@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.8 → 0.0.0-pr624.80

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 (143) 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/iconVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/index.js +1262 -81
  5. package/components/bibtemplate/dist/registered.js +1262 -81
  6. package/components/checkbox/README.md +1 -1
  7. package/components/checkbox/demo/api.html +16 -10
  8. package/components/checkbox/demo/api.md +49 -15
  9. package/components/checkbox/demo/api.min.js +73 -43
  10. package/components/checkbox/demo/index.html +16 -10
  11. package/components/checkbox/demo/index.md +2 -2
  12. package/components/checkbox/demo/index.min.js +73 -43
  13. package/components/checkbox/demo/readme.html +16 -9
  14. package/components/checkbox/demo/readme.md +1 -1
  15. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  16. package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
  17. package/components/checkbox/dist/index.js +72 -42
  18. package/components/checkbox/dist/registered.js +72 -42
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +115 -8
  21. package/components/combobox/demo/api.min.js +3102 -921
  22. package/components/combobox/demo/index.html +16 -10
  23. package/components/combobox/demo/index.md +6 -30
  24. package/components/combobox/demo/index.min.js +3102 -921
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/dist/auro-combobox.d.ts +44 -12
  27. package/components/combobox/dist/index.js +3080 -995
  28. package/components/combobox/dist/registered.js +3080 -995
  29. package/components/counter/demo/api.html +17 -10
  30. package/components/counter/demo/api.md +158 -21
  31. package/components/counter/demo/api.min.js +3416 -728
  32. package/components/counter/demo/index.html +17 -10
  33. package/components/counter/demo/index.md +185 -34
  34. package/components/counter/demo/index.min.js +3416 -728
  35. package/components/counter/demo/readme.html +16 -9
  36. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  37. package/components/counter/dist/auro-counter-group.d.ts +161 -11
  38. package/components/counter/dist/auro-counter.d.ts +16 -0
  39. package/components/counter/dist/helptextVersion.d.ts +2 -0
  40. package/components/counter/dist/iconVersion.d.ts +1 -1
  41. package/components/counter/dist/index.js +3416 -728
  42. package/components/counter/dist/registered.js +3416 -728
  43. package/components/datepicker/README.md +1 -1
  44. package/components/datepicker/demo/api.html +16 -10
  45. package/components/datepicker/demo/api.md +59 -28
  46. package/components/datepicker/demo/api.min.js +8486 -4644
  47. package/components/datepicker/demo/index.html +16 -10
  48. package/components/datepicker/demo/index.md +75 -8
  49. package/components/datepicker/demo/index.min.js +8486 -4644
  50. package/components/datepicker/demo/readme.html +16 -9
  51. package/components/datepicker/demo/readme.md +1 -1
  52. package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
  53. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  54. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  55. package/components/datepicker/dist/index.js +7033 -3191
  56. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  57. package/components/datepicker/dist/registered.js +7033 -3191
  58. package/components/dropdown/demo/api.html +16 -10
  59. package/components/dropdown/demo/api.md +82 -275
  60. package/components/dropdown/demo/api.min.js +451 -260
  61. package/components/dropdown/demo/index.html +16 -10
  62. package/components/dropdown/demo/index.md +92 -362
  63. package/components/dropdown/demo/index.min.js +451 -260
  64. package/components/dropdown/demo/readme.html +16 -9
  65. package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
  66. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  67. package/components/dropdown/dist/index.js +450 -259
  68. package/components/dropdown/dist/registered.js +450 -259
  69. package/components/form/demo/api.html +16 -9
  70. package/components/form/demo/api.min.js +2 -2
  71. package/components/form/demo/autocomplete.html +19 -3
  72. package/components/form/demo/index.html +16 -9
  73. package/components/form/demo/index.min.js +2 -2
  74. package/components/form/demo/readme.html +16 -9
  75. package/components/form/demo/working.html +19 -13
  76. package/components/form/dist/index.js +1 -1
  77. package/components/form/dist/registered.js +1 -1
  78. package/components/helptext/dist/index.js +2 -2
  79. package/components/helptext/dist/registered.js +2 -2
  80. package/components/input/README.md +5 -2
  81. package/components/input/demo/api.html +16 -10
  82. package/components/input/demo/api.md +228 -130
  83. package/components/input/demo/api.min.js +909 -247
  84. package/components/input/demo/index.html +16 -10
  85. package/components/input/demo/index.md +48 -32
  86. package/components/input/demo/index.min.js +909 -247
  87. package/components/input/demo/readme.html +16 -9
  88. package/components/input/demo/readme.md +5 -2
  89. package/components/input/dist/auro-input.d.ts +3 -3
  90. package/components/input/dist/base-input.d.ts +38 -10
  91. package/components/input/dist/buttonVersion.d.ts +1 -1
  92. package/components/input/dist/iconVersion.d.ts +1 -1
  93. package/components/input/dist/index.js +908 -246
  94. package/components/input/dist/registered.js +908 -246
  95. package/components/layoutElement/dist/index.js +13 -10
  96. package/components/menu/demo/api.html +32 -10
  97. package/components/menu/demo/api.md +69 -8
  98. package/components/menu/demo/api.min.js +239 -48
  99. package/components/menu/demo/index.html +16 -10
  100. package/components/menu/demo/index.min.js +239 -48
  101. package/components/menu/demo/readme.html +16 -9
  102. package/components/menu/dist/auro-menu.d.ts +41 -7
  103. package/components/menu/dist/auro-menuoption.d.ts +15 -3
  104. package/components/menu/dist/iconVersion.d.ts +1 -1
  105. package/components/menu/dist/index.js +238 -47
  106. package/components/menu/dist/registered.js +238 -47
  107. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  108. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  109. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  110. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  111. package/components/radio/demo/api.html +16 -10
  112. package/components/radio/demo/api.md +39 -9
  113. package/components/radio/demo/api.min.js +91 -93
  114. package/components/radio/demo/index.html +16 -10
  115. package/components/radio/demo/index.min.js +91 -93
  116. package/components/radio/demo/readme.html +16 -9
  117. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  118. package/components/radio/dist/auro-radio.d.ts +9 -12
  119. package/components/radio/dist/index.js +90 -92
  120. package/components/radio/dist/registered.js +90 -92
  121. package/components/select/demo/api.html +16 -10
  122. package/components/select/demo/api.js +0 -2
  123. package/components/select/demo/api.md +150 -121
  124. package/components/select/demo/api.min.js +2184 -704
  125. package/components/select/demo/index.html +17 -11
  126. package/components/select/demo/index.md +1066 -259
  127. package/components/select/demo/index.min.js +2186 -694
  128. package/components/select/demo/readme.html +16 -9
  129. package/components/select/dist/auro-select.d.ts +59 -21
  130. package/components/select/dist/index.js +2107 -711
  131. package/components/select/dist/registered.js +2107 -711
  132. package/package.json +31 -28
  133. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  134. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
  135. /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
  136. /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  137. /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
  138. /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
  139. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  140. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
  141. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
  142. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  143. /package/components/menu/dist/styles/{tokens-css.d.ts → default/color-menu-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,51 @@ 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
+ // datepicker
1475
+ --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-border-bold, #{v.$ds-basic-color-border-bold});
1476
+ --ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error, #{v.$ds-basic-color-status-error});
1477
+ --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1478
+
1479
+ // calendar
1480
+ --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1481
+ --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1482
+ --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1483
+ --ds-auro-calendar-nav-btn-border-color: transparent;
1484
+ --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
1485
+ --ds-auro-calendar-nav-btn-container-color: transparent;
1486
+ --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1487
+ --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1488
+ --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1489
+ --ds-auro-calendar-cell-border-color: transparent;
1490
+ --ds-auro-calendar-cell-container-color: transparent;
1491
+ --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
1492
+ --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1493
+ --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1494
+ }
1495
+
1496
+ :host([ondark]) {
1497
+ --ds-auro-datepicker-range-input-divider-color: var(--ds-basic-color-texticon-inverse-muted, v.$ds-basic-color-texticon-inverse-muted);
1498
+ --ds-auro-datepicker-error-icon-color: var(--ds-basic-color-status-error-subtle, v.$ds-basic-color-status-error-subtle);
1499
+ --ds-auro-datepicker-label-text-color: var(--ds-basic-color-texticon-inverse-muted, v.$ds-basic-color-texticon-inverse-muted);
1467
1500
 
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});
1501
+ // calendar
1502
+ --ds-auro-calendar-mobile-header-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1503
+ --ds-auro-calendar-mobile-header-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1504
+ --ds-auro-calendar-mobile-header-text-color: var(--ds-basic-color-texticon-muted, #{v.$ds-basic-color-texticon-muted});
1474
1505
  --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});
1506
+ --ds-auro-calendar-nav-btn-chevron-color: var(--ds-basic-color-brand-primary, #{v.$ds-basic-color-brand-primary});
1476
1507
  --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});
1508
+ --ds-auro-calendar-month-container-color: var(--ds-basic-color-surface-default, #{v.$ds-basic-color-surface-default});
1509
+ --ds-auro-calendar-month-divider-color: var(--ds-basic-color-border-divider, #{v.$ds-basic-color-border-divider});
1510
+ --ds-auro-calendar-month-header-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1480
1511
  --ds-auro-calendar-cell-border-color: transparent;
1481
1512
  --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});
1513
+ --ds-auro-calendar-cell-in-range-color: var(--ds-advanced-color-shared-background-muted, #{v.$ds-advanced-color-shared-background-muted});
1514
+ --ds-auro-calendar-cell-price-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1515
+ --ds-auro-calendar-cell-text-color: var(--ds-basic-color-texticon-default, #{v.$ds-basic-color-texticon-default});
1485
1516
  }
1486
1517
  ```
1487
1518
  <!-- AURO-GENERATED-CONTENT:END -->