@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.9 → 0.0.0-pr624.91

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 (149) 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 +1241 -94
  6. package/components/bibtemplate/dist/registered.js +1241 -94
  7. package/components/checkbox/README.md +1 -1
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +49 -15
  10. package/components/checkbox/demo/api.min.js +74 -46
  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 +74 -46
  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 +3 -3
  18. package/components/checkbox/dist/index.js +73 -45
  19. package/components/checkbox/dist/registered.js +73 -45
  20. package/components/combobox/demo/api.html +16 -10
  21. package/components/combobox/demo/api.md +115 -8
  22. package/components/combobox/demo/api.min.js +3305 -1002
  23. package/components/combobox/demo/index.html +16 -10
  24. package/components/combobox/demo/index.md +8 -34
  25. package/components/combobox/demo/index.min.js +3305 -1002
  26. package/components/combobox/demo/readme.html +16 -9
  27. package/components/combobox/dist/auro-combobox.d.ts +57 -14
  28. package/components/combobox/dist/index.js +2992 -836
  29. package/components/combobox/dist/registered.js +2992 -836
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +158 -21
  32. package/components/counter/demo/api.min.js +3417 -765
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +185 -34
  35. package/components/counter/demo/index.min.js +3417 -765
  36. package/components/counter/demo/readme.html +16 -9
  37. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  38. package/components/counter/dist/auro-counter-group.d.ts +161 -11
  39. package/components/counter/dist/auro-counter.d.ts +16 -0
  40. package/components/counter/dist/helptextVersion.d.ts +2 -0
  41. package/components/counter/dist/iconVersion.d.ts +1 -1
  42. package/components/counter/dist/index.js +3420 -768
  43. package/components/counter/dist/registered.js +3420 -768
  44. package/components/datepicker/README.md +1 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +62 -28
  47. package/components/datepicker/demo/api.min.js +11956 -8070
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +75 -8
  50. package/components/datepicker/demo/index.min.js +11956 -8070
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +1 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
  54. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  55. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  56. package/components/datepicker/dist/index.js +13802 -9916
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +13802 -9916
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +82 -275
  61. package/components/dropdown/demo/api.min.js +450 -261
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +92 -362
  64. package/components/dropdown/demo/index.min.js +450 -261
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +449 -260
  69. package/components/dropdown/dist/registered.js +449 -260
  70. package/components/form/demo/api.html +16 -9
  71. package/components/form/demo/api.md +1 -1
  72. package/components/form/demo/api.min.js +3 -3
  73. package/components/form/demo/autocomplete.html +19 -3
  74. package/components/form/demo/index.html +16 -9
  75. package/components/form/demo/index.min.js +3 -3
  76. package/components/form/demo/readme.html +16 -9
  77. package/components/form/demo/working.html +19 -13
  78. package/components/form/dist/auro-form.d.ts +1 -1
  79. package/components/form/dist/index.js +2 -2
  80. package/components/form/dist/registered.js +2 -2
  81. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  82. package/components/helptext/dist/index.js +3 -5
  83. package/components/helptext/dist/registered.js +3 -5
  84. package/components/input/README.md +5 -2
  85. package/components/input/demo/api.html +16 -10
  86. package/components/input/demo/api.md +226 -132
  87. package/components/input/demo/api.min.js +1034 -297
  88. package/components/input/demo/index.html +16 -10
  89. package/components/input/demo/index.md +48 -32
  90. package/components/input/demo/index.min.js +1048 -311
  91. package/components/input/demo/readme.html +16 -9
  92. package/components/input/demo/readme.md +5 -2
  93. package/components/input/dist/auro-input.d.ts +24 -0
  94. package/components/input/dist/base-input.d.ts +45 -11
  95. package/components/input/dist/buttonVersion.d.ts +1 -1
  96. package/components/input/dist/iconVersion.d.ts +1 -1
  97. package/components/input/dist/index.js +1047 -310
  98. package/components/input/dist/registered.js +1047 -310
  99. package/components/layoutElement/dist/index.js +11 -8
  100. package/components/layoutElement/dist/registered.js +97 -0
  101. package/components/menu/demo/api.html +17 -10
  102. package/components/menu/demo/api.md +65 -8
  103. package/components/menu/demo/api.min.js +305 -63
  104. package/components/menu/demo/index.html +16 -10
  105. package/components/menu/demo/index.min.js +305 -63
  106. package/components/menu/demo/readme.html +16 -9
  107. package/components/menu/dist/auro-menu.d.ts +53 -7
  108. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  109. package/components/menu/dist/iconVersion.d.ts +1 -1
  110. package/components/menu/dist/index.js +290 -48
  111. package/components/menu/dist/registered.js +290 -48
  112. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  113. package/components/menu/dist/styles/shapeSize-css.d.ts +2 -0
  114. package/components/radio/demo/api.html +16 -10
  115. package/components/radio/demo/api.md +39 -9
  116. package/components/radio/demo/api.min.js +92 -96
  117. package/components/radio/demo/index.html +16 -10
  118. package/components/radio/demo/index.min.js +92 -96
  119. package/components/radio/demo/readme.html +16 -9
  120. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  121. package/components/radio/dist/auro-radio.d.ts +9 -12
  122. package/components/radio/dist/index.js +91 -95
  123. package/components/radio/dist/registered.js +91 -95
  124. package/components/select/demo/api.html +16 -10
  125. package/components/select/demo/api.js +0 -2
  126. package/components/select/demo/api.md +149 -122
  127. package/components/select/demo/api.min.js +2283 -736
  128. package/components/select/demo/index.html +17 -11
  129. package/components/select/demo/index.md +1066 -259
  130. package/components/select/demo/index.min.js +2284 -725
  131. package/components/select/demo/readme.html +16 -9
  132. package/components/select/dist/auro-select.d.ts +74 -25
  133. package/components/select/dist/index.js +2165 -753
  134. package/components/select/dist/registered.js +2165 -753
  135. package/package.json +31 -28
  136. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  137. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
  138. /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
  139. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  140. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  141. /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
  142. /package/components/{input/dist/styles/default/input-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  143. /package/components/{input/dist/styles/default/label-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  144. /package/components/{input/dist/styles/input-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  145. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  147. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  148. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  149. /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,7 @@ 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
87
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
88
88
  <span slot="fromLabel">Choose a date</span>
89
89
  <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. |
53
57
  | [resetLayoutClasses](#resetLayoutClasses) | `(): void` | |
54
58
  | [resetShapeClasses](#resetShapeClasses) | `(): void` | |
59
+ | [resetValues](#resetValues) | `(): void` | Resets values without resetting validation. |
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
 
@@ -97,7 +103,7 @@
97
103
  <div class="exampleWrapper">
98
104
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
99
105
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
100
- <auro-datepicker>
106
+ <auro-datepicker required="">
101
107
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
102
108
  <span slot="fromLabel">Choose a date</span>
103
109
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -110,7 +116,7 @@
110
116
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
111
117
 
112
118
  ```html
113
- <auro-datepicker>
119
+ <auro-datepicker required="">
114
120
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
115
121
  <span slot="fromLabel">Choose a date</span>
116
122
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -126,7 +132,7 @@ When used, the datepicker will display two inputs and the component will support
126
132
  <div class="exampleWrapper">
127
133
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
128
134
  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
129
- <auro-datepicker range>
135
+ <auro-datepicker range minDate="07/08/2025">
130
136
  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
131
137
  <span slot="fromLabel">Departure</span>
132
138
  <span slot="toLabel">Return</span>
@@ -140,7 +146,7 @@ When used, the datepicker will display two inputs and the component will support
140
146
  <!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
141
147
 
142
148
  ```html
143
- <auro-datepicker range>
149
+ <auro-datepicker range minDate="07/08/2025">
144
150
  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
145
151
  <span slot="fromLabel">Departure</span>
146
152
  <span slot="toLabel">Return</span>
@@ -904,7 +910,7 @@ Sets the label used for the input. When the `range` attribute is used this is th
904
910
  <div class="exampleWrapper">
905
911
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
906
912
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
907
- <auro-datepicker>
913
+ <auro-datepicker required="">
908
914
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
909
915
  <span slot="fromLabel">Choose a date</span>
910
916
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -917,7 +923,7 @@ Sets the label used for the input. When the `range` attribute is used this is th
917
923
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
918
924
 
919
925
  ```html
920
- <auro-datepicker>
926
+ <auro-datepicker required="">
921
927
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
922
928
  <span slot="fromLabel">Choose a date</span>
923
929
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -965,7 +971,7 @@ To view this demo, set your window to a mobile screen size.
965
971
  <div class="exampleWrapper">
966
972
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
967
973
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
968
- <auro-datepicker>
974
+ <auro-datepicker required="">
969
975
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
970
976
  <span slot="fromLabel">Choose a date</span>
971
977
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -978,7 +984,7 @@ To view this demo, set your window to a mobile screen size.
978
984
  <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
979
985
 
980
986
  ```html
981
- <auro-datepicker>
987
+ <auro-datepicker required="">
982
988
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
983
989
  <span slot="fromLabel">Choose a date</span>
984
990
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
@@ -994,7 +1000,7 @@ Only for use with the `range` attribute. Sets the label for the second input.
994
1000
  <div class="exampleWrapper">
995
1001
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basicRange.html) -->
996
1002
  <!-- The below content is automatically added from ./../apiExamples/basicRange.html -->
997
- <auro-datepicker range>
1003
+ <auro-datepicker range minDate="07/08/2025">
998
1004
  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
999
1005
  <span slot="fromLabel">Departure</span>
1000
1006
  <span slot="toLabel">Return</span>
@@ -1008,7 +1014,7 @@ Only for use with the `range` attribute. Sets the label for the second input.
1008
1014
  <!-- The below code snippet is automatically added from ./../apiExamples/basicRange.html -->
1009
1015
 
1010
1016
  ```html
1011
- <auro-datepicker range>
1017
+ <auro-datepicker range minDate="07/08/2025">
1012
1018
  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
1013
1019
  <span slot="fromLabel">Departure</span>
1014
1020
  <span slot="toLabel">Return</span>
@@ -1462,26 +1468,54 @@ The component may be restyled using the following code sample and changing the v
1462
1468
  ```scss
1463
1469
  /* stylelint-disable color-function-notation */
1464
1470
 
1465
- @import "@aurodesignsystem/design-tokens/dist/alaska/SCSSVariables--alaska";
1466
- @import "@aurodesignsystem/design-tokens/dist/auro-classic/SCSSVariables";
1471
+ @use "@aurodesignsystem/design-tokens/dist/themes/alaska/SCSSVariables--alaska" as v;
1472
+
1473
+ :host(:not([ondark])) {
1474
+
1475
+ --ds-auro-datepicker-label-text-color: red; // var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1476
+
1477
+ // datepicker
1478
+ --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
1479
+ --ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
1480
+ --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1481
+
1482
+ // calendar
1483
+ --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1484
+ --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1485
+ --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1486
+ --ds-auro-calendar-nav-btn-border-color: transparent;
1487
+ --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
1488
+ --ds-auro-calendar-nav-btn-container-color: transparent;
1489
+ --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1490
+ --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1491
+ --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1492
+ --ds-auro-calendar-cell-border-color: transparent;
1493
+ --ds-auro-calendar-cell-container-color: transparent;
1494
+ --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
1495
+ --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1496
+ --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1497
+ }
1498
+
1499
+ :host([ondark]) {
1500
+ --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
1501
+ --ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error-subtle, #{v.$ds-basic-color-status-error-subtle});
1502
+ --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #{v.$ds-basic-color-texticon-inverse-muted});
1467
1503
 
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});
1504
+ // calendar
1505
+ --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1506
+ --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1507
+ --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1474
1508
  --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});
1509
+ --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
1476
1510
  --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});
1511
+ --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1512
+ --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1513
+ --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1480
1514
  --ds-auro-calendar-cell-border-color: transparent;
1481
1515
  --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});
1516
+ --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
1517
+ --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1518
+ --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1485
1519
  }
1486
1520
  ```
1487
1521
  <!-- AURO-GENERATED-CONTENT:END -->