@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.2 → 0.0.0-pr1451.21

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 (254) hide show
  1. package/components/checkbox/README.md +11 -27
  2. package/components/checkbox/demo/accessibility.html +49 -0
  3. package/components/checkbox/demo/accessibility.md +44 -0
  4. package/components/checkbox/demo/api.html +17 -25
  5. package/components/checkbox/demo/api.md +40 -416
  6. package/components/checkbox/demo/api.min.js +5 -4
  7. package/components/checkbox/demo/customize.html +52 -0
  8. package/components/checkbox/demo/customize.md +361 -0
  9. package/components/checkbox/demo/demo-support.js +60 -0
  10. package/components/checkbox/demo/design.html +52 -0
  11. package/components/checkbox/demo/design.md +149 -0
  12. package/components/checkbox/demo/getting-started.html +52 -0
  13. package/components/checkbox/demo/getting-started.md +261 -0
  14. package/components/checkbox/demo/index.html +17 -20
  15. package/components/checkbox/demo/index.md +144 -29
  16. package/components/checkbox/demo/index.min.js +5 -4
  17. package/components/checkbox/demo/keyboard-behavior.html +49 -0
  18. package/components/checkbox/demo/keyboard-behavior.md +0 -3
  19. package/components/checkbox/demo/layout.md +30 -0
  20. package/components/checkbox/demo/readme.html +10 -17
  21. package/components/checkbox/demo/readme.md +11 -27
  22. package/components/checkbox/demo/styles.css +974 -0
  23. package/components/checkbox/demo/voiceover.html +49 -0
  24. package/components/checkbox/demo/voiceover.md +37 -0
  25. package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
  26. package/components/checkbox/dist/index.js +5 -4
  27. package/components/checkbox/dist/registered.js +5 -4
  28. package/components/combobox/README.md +8 -29
  29. package/components/combobox/demo/accessibility.html +2 -20
  30. package/components/combobox/demo/accessibility.md +1 -1
  31. package/components/combobox/demo/api.html +5 -52
  32. package/components/combobox/demo/api.md +53 -2261
  33. package/components/combobox/demo/api.min.js +15 -12
  34. package/components/combobox/demo/customize.html +53 -0
  35. package/components/combobox/demo/customize.js +24 -0
  36. package/components/combobox/demo/customize.md +1249 -0
  37. package/components/combobox/demo/customize.min.js +18132 -0
  38. package/components/combobox/demo/demo-support.js +60 -0
  39. package/components/combobox/demo/design.html +2 -43
  40. package/components/combobox/demo/design.md +4 -4
  41. package/components/combobox/demo/getting-started.html +53 -0
  42. package/components/combobox/demo/{install.js → getting-started.js} +2 -5
  43. package/components/combobox/demo/getting-started.md +397 -0
  44. package/components/combobox/demo/{install.min.js → getting-started.min.js} +14 -38
  45. package/components/combobox/demo/index.html +4 -47
  46. package/components/combobox/demo/index.md +3 -569
  47. package/components/combobox/demo/index.min.js +15 -12
  48. package/components/combobox/demo/keyboard-behavior.html +2 -20
  49. package/components/combobox/demo/keyboard-behavior.md +2 -2
  50. package/components/combobox/demo/layout.md +2 -2
  51. package/components/combobox/demo/readme.html +2 -43
  52. package/components/combobox/demo/readme.md +8 -29
  53. package/components/combobox/demo/styles.css +98 -105
  54. package/components/combobox/demo/voiceover.html +2 -20
  55. package/components/combobox/demo/voiceover.md +1 -1
  56. package/components/combobox/dist/index.js +12 -10
  57. package/components/combobox/dist/registered.js +12 -10
  58. package/components/counter/README.md +21 -51
  59. package/components/counter/demo/accessibility.html +49 -0
  60. package/components/counter/demo/accessibility.md +34 -0
  61. package/components/counter/demo/api.html +12 -20
  62. package/components/counter/demo/api.md +49 -1299
  63. package/components/counter/demo/api.min.js +6 -6
  64. package/components/counter/demo/customize.html +53 -0
  65. package/components/counter/demo/customize.md +650 -0
  66. package/components/counter/demo/demo-support.js +60 -0
  67. package/components/counter/demo/design.html +52 -0
  68. package/components/counter/demo/design.md +192 -0
  69. package/components/counter/demo/getting-started.html +54 -0
  70. package/components/counter/demo/getting-started.md +332 -0
  71. package/components/counter/demo/index.html +14 -19
  72. package/components/counter/demo/index.md +113 -47
  73. package/components/counter/demo/index.min.js +6 -6
  74. package/components/counter/demo/keyboard-behavior.html +49 -0
  75. package/components/counter/demo/keyboard-behavior.md +1 -1
  76. package/components/counter/demo/keyboardBehavior.html +7 -39
  77. package/components/counter/demo/layout.md +10 -0
  78. package/components/counter/demo/readme.html +11 -15
  79. package/components/counter/demo/readme.md +21 -51
  80. package/components/counter/demo/styles.css +974 -0
  81. package/components/counter/demo/voiceover.html +51 -0
  82. package/components/counter/demo/voiceover.md +80 -0
  83. package/components/counter/dist/index.js +6 -6
  84. package/components/counter/dist/registered.js +6 -6
  85. package/components/datepicker/README.md +10 -24
  86. package/components/datepicker/demo/accessibility.html +50 -0
  87. package/components/datepicker/demo/accessibility.md +64 -0
  88. package/components/datepicker/demo/api.md +69 -1739
  89. package/components/datepicker/demo/api.min.js +14 -14
  90. package/components/datepicker/demo/customize.html +53 -0
  91. package/components/datepicker/demo/customize.md +723 -0
  92. package/components/datepicker/demo/demo-support.js +60 -0
  93. package/components/{select/demo/layout.html → datepicker/demo/design.html} +7 -47
  94. package/components/datepicker/demo/design.md +158 -0
  95. package/components/datepicker/demo/getting-started.html +53 -0
  96. package/components/datepicker/demo/getting-started.md +237 -0
  97. package/components/datepicker/demo/index.html +14 -34
  98. package/components/datepicker/demo/index.md +160 -103
  99. package/components/datepicker/demo/index.min.js +14 -14
  100. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  101. package/components/datepicker/demo/layout.md +92 -0
  102. package/components/datepicker/demo/readme.md +10 -24
  103. package/components/datepicker/demo/styles.css +974 -0
  104. package/components/{dropdown/demo/keyboardBehavior.html → datepicker/demo/voiceover.html} +14 -36
  105. package/components/datepicker/demo/voiceover.md +98 -0
  106. package/components/datepicker/dist/index.js +14 -14
  107. package/components/datepicker/dist/registered.js +14 -14
  108. package/components/dropdown/README.md +0 -25
  109. package/components/dropdown/demo/accessibility.html +49 -0
  110. package/components/dropdown/demo/accessibility.md +45 -0
  111. package/components/dropdown/demo/api.html +10 -19
  112. package/components/dropdown/demo/api.md +40 -1364
  113. package/components/dropdown/demo/api.min.js +2 -2
  114. package/components/dropdown/demo/customize.html +54 -0
  115. package/components/dropdown/demo/customize.md +780 -0
  116. package/components/dropdown/demo/demo-support.js +60 -0
  117. package/components/dropdown/demo/design.html +52 -0
  118. package/components/dropdown/demo/design.md +186 -0
  119. package/components/dropdown/demo/getting-started.html +54 -0
  120. package/components/dropdown/demo/getting-started.md +317 -0
  121. package/components/dropdown/demo/index.html +12 -20
  122. package/components/dropdown/demo/index.md +70 -225
  123. package/components/dropdown/demo/index.min.js +2 -2
  124. package/components/dropdown/demo/keyboard-behavior.html +49 -0
  125. package/components/dropdown/demo/keyboard-behavior.md +4 -8
  126. package/components/dropdown/demo/layout.md +21 -0
  127. package/components/dropdown/demo/readme.html +7 -20
  128. package/components/dropdown/demo/readme.md +0 -25
  129. package/components/dropdown/demo/styles.css +974 -0
  130. package/components/dropdown/demo/voiceover.html +51 -0
  131. package/components/dropdown/demo/voiceover.md +63 -0
  132. package/components/dropdown/dist/index.js +2 -2
  133. package/components/dropdown/dist/registered.js +2 -2
  134. package/components/form/README.md +9 -13
  135. package/components/form/demo/accessibility.html +51 -0
  136. package/components/form/demo/accessibility.md +23 -0
  137. package/components/form/demo/api.html +11 -14
  138. package/components/form/demo/api.md +14 -290
  139. package/components/form/demo/api.min.js +53 -50
  140. package/components/form/demo/customize.html +54 -0
  141. package/components/form/demo/customize.md +246 -0
  142. package/components/form/demo/demo-support.js +60 -0
  143. package/components/form/demo/getting-started.html +54 -0
  144. package/components/form/demo/getting-started.md +291 -0
  145. package/components/form/demo/index.html +12 -14
  146. package/components/form/demo/index.md +66 -96
  147. package/components/form/demo/index.min.js +53 -50
  148. package/components/form/demo/keyboard-behavior.html +51 -0
  149. package/components/form/demo/readme.html +12 -17
  150. package/components/form/demo/readme.md +9 -13
  151. package/components/form/demo/styles.css +974 -0
  152. package/components/form/demo/voiceover.html +51 -0
  153. package/components/form/demo/voiceover.md +36 -0
  154. package/components/helptext/dist/index.js +1 -1
  155. package/components/helptext/dist/registered.js +1 -1
  156. package/components/input/README.md +17 -28
  157. package/components/input/demo/accessibility.html +38 -0
  158. package/components/input/demo/accessibility.md +69 -0
  159. package/components/input/demo/api.html +17 -22
  160. package/components/input/demo/api.js +4 -23
  161. package/components/input/demo/api.md +67 -1267
  162. package/components/input/demo/api.min.js +6 -98
  163. package/components/input/demo/customize.html +54 -0
  164. package/components/input/demo/customize.js +25 -0
  165. package/components/input/demo/customize.md +1372 -0
  166. package/components/input/demo/customize.min.js +7431 -0
  167. package/components/input/demo/demo-support.js +60 -0
  168. package/components/input/demo/design.html +39 -0
  169. package/components/input/demo/design.md +224 -0
  170. package/components/input/demo/getting-started.html +53 -0
  171. package/components/input/demo/getting-started.js +8 -0
  172. package/components/input/demo/getting-started.md +312 -0
  173. package/components/input/demo/getting-started.min.js +7369 -0
  174. package/components/input/demo/index.html +16 -22
  175. package/components/input/demo/index.js +0 -11
  176. package/components/input/demo/index.md +171 -139
  177. package/components/input/demo/index.min.js +6 -18
  178. package/components/input/demo/keyboard-behavior.html +38 -0
  179. package/components/input/demo/layout.md +77 -0
  180. package/components/input/demo/readme.md +17 -28
  181. package/components/input/demo/styles.css +974 -0
  182. package/components/input/demo/voiceover.html +38 -0
  183. package/components/input/demo/voiceover.md +70 -0
  184. package/components/input/dist/base-input.d.ts +1 -0
  185. package/components/input/dist/index.js +6 -6
  186. package/components/input/dist/registered.js +6 -6
  187. package/components/menu/README.md +1 -5
  188. package/components/menu/demo/api.md +43 -43
  189. package/components/menu/demo/api.min.js +2 -2
  190. package/components/menu/demo/index.md +1 -1
  191. package/components/menu/demo/index.min.js +2 -2
  192. package/components/menu/demo/readme.md +1 -5
  193. package/components/menu/dist/index.js +2 -2
  194. package/components/menu/dist/registered.js +2 -2
  195. package/components/radio/README.md +9 -22
  196. package/components/radio/demo/accessibility.html +51 -0
  197. package/components/radio/demo/accessibility.md +44 -0
  198. package/components/radio/demo/api.html +13 -20
  199. package/components/radio/demo/api.md +44 -589
  200. package/components/radio/demo/api.min.js +3 -3
  201. package/components/radio/demo/customize.html +53 -0
  202. package/components/radio/demo/customize.md +368 -0
  203. package/components/radio/demo/demo-support.js +60 -0
  204. package/components/radio/demo/design.html +52 -0
  205. package/components/radio/demo/design.md +143 -0
  206. package/components/radio/demo/getting-started.html +54 -0
  207. package/components/radio/demo/getting-started.md +296 -0
  208. package/components/radio/demo/index.html +16 -19
  209. package/components/radio/demo/index.md +110 -45
  210. package/components/radio/demo/index.min.js +3 -3
  211. package/components/radio/demo/keyboard-behavior.html +51 -0
  212. package/components/radio/demo/layout.md +30 -0
  213. package/components/radio/demo/readme.html +11 -17
  214. package/components/radio/demo/readme.md +9 -22
  215. package/components/radio/demo/styles.css +974 -0
  216. package/components/radio/demo/voiceover.html +51 -0
  217. package/components/radio/demo/voiceover.md +43 -0
  218. package/components/radio/dist/index.js +3 -3
  219. package/components/radio/dist/registered.js +3 -3
  220. package/components/select/README.md +7 -4
  221. package/components/select/demo/accessibility.html +5 -21
  222. package/components/select/demo/accessibility.md +1 -1
  223. package/components/select/demo/api.html +3 -48
  224. package/components/select/demo/api.md +52 -2342
  225. package/components/select/demo/customize.html +54 -0
  226. package/components/select/demo/customize.js +11 -0
  227. package/components/select/demo/customize.md +1049 -0
  228. package/components/select/demo/{api.min.js → customize.min.js} +12 -113
  229. package/components/select/demo/demo-support.js +60 -0
  230. package/components/select/demo/design.html +3 -44
  231. package/components/select/demo/design.md +2 -2
  232. package/components/select/demo/getting-started.html +5 -76
  233. package/components/select/demo/getting-started.js +20 -3
  234. package/components/select/demo/getting-started.md +97 -705
  235. package/components/select/demo/getting-started.min.js +58 -9
  236. package/components/select/demo/index.html +4 -43
  237. package/components/select/demo/index.js +5 -3
  238. package/components/select/demo/index.md +2 -2
  239. package/components/select/demo/index.min.js +14 -9
  240. package/components/select/demo/keyboard-behavior.html +6 -47
  241. package/components/select/demo/keyboard-behavior.md +5 -6
  242. package/components/select/demo/keyboardBehavior.html +4 -46
  243. package/components/select/demo/readme.html +3 -44
  244. package/components/select/demo/readme.md +7 -4
  245. package/components/select/demo/styles.css +57 -109
  246. package/components/select/demo/voiceover.html +3 -30
  247. package/components/select/dist/index.js +5 -5
  248. package/components/select/dist/registered.js +5 -5
  249. package/custom-elements.json +249 -246
  250. package/package.json +3 -3
  251. package/components/combobox/demo/install.html +0 -94
  252. package/components/combobox/demo/install.md +0 -98
  253. package/components/select/demo/api.js +0 -39
  254. package/components/select/demo/install.md +0 -92
package/components/datepicker/demo/keyboard-behavior.html CHANGED
@@ -3,7 +3,7 @@
3
3
  See LICENSE in the project root for license information.
4
4
 
5
5
  HTML in this document is standardized and NOT to be edited.
6
- All demo code should be added/edited in ./demo/index.md
6
+ All demo code should be added/edited in ./demo/keyboard-behavior.md
7
7
 
8
8
  With the exception of adding custom elements if needed for the demo.
9
9
 
@@ -16,39 +16,25 @@
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 Demo | auro-datepicker</title>
19
+ <title>Auro Web Component Demo | auro-datepicker | Keyboard Behavior</title>
20
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"/>
21
+ <!-- highlight.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
23
23
 
24
24
  <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
25
25
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
26
 
27
27
  <!-- Design Token Alaska Theme -->
28
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
-
29
+
30
30
  <!-- Webcore Stylesheet Alaska Theme -->
31
31
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
32
+
33
33
  <!-- Demo Specific Styles -->
34
34
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
35
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ <link rel="stylesheet" type="text/css" href="./styles.css" />
36
37
  <style>
37
- table {
38
- --ds-color-container-secondary-default: transparent;
39
- }
40
-
41
- tr:not(:last-of-type) {
42
- border-bottom: 1px solid var(--ds-color-border-tertiary-default);
43
- }
44
-
45
- sup {
46
- font-size: 60%;
47
- font-style: italic;
48
- opacity: 0.6;
49
- top: -.5rem;
50
- }
51
-
52
38
  .note {
53
39
  margin: 10px 0;
54
40
  padding: 10px;
@@ -58,24 +44,17 @@
58
44
  background-color: var(--ds-basic-color-surface-neutral-subtle);
59
45
  }
60
46
  </style>
61
- </head>
47
+ </head>
62
48
  <body class="auro-markdown">
63
49
  <main></main>
64
50
 
65
51
  <script type="module">
66
- import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
67
- import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
68
- fetch('./keyboardBehavior.md')
69
- .then((response) => response.text())
70
- .then((text) => {
71
- const rawHtml = marked.parse(text);
72
- document.querySelector('main').innerHTML = rawHtml;
73
- Prism.highlightAll();
74
- })
52
+ import { renderPage } from './demo-support.js';
53
+ await renderPage('./keyboard-behavior.md');
75
54
  </script>
76
55
 
77
56
  <!-- If additional elements are needed for the demo, add them here. -->
78
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
79
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
57
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
58
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
80
59
  </body>
81
60
  </html>
package/components/datepicker/demo/layout.md ADDED
@@ -0,0 +1,92 @@
1
+ <p>The component consists of the following elements:</p>
2
+ <ul>
3
+ <li>
4
+ <strong>trigger:</strong> shows the component label(s), current date value(s), and will render to reflect the state of the component (e.g. <code>focus</code>, <code>hover</code>, <code>disabled</code>, <code>valid</code>, <code>invalid</code>). The trigger includes one or two text inputs (depending on whether <code>range</code> is set) that allow the user to type a date directly.
5
+ </li>
6
+ <li>
7
+ <strong>calendar:</strong> a monthly calendar grid rendered in a dropdown bib. Users can navigate between months and select dates by clicking or tapping calendar cells. On smaller viewports the calendar opens in a fullscreen modal dialog.
8
+ </li>
9
+ <li>
10
+ <strong>help text:</strong> descriptive text rendered below the trigger intended to help clarify the intended use of the component instance and any current validation error with instructions to resolve those errors.
11
+ </li>
12
+ </ul>
13
+ <auro-header level="4" id="trigger">Trigger</auro-header>
14
+ <p>The trigger includes the component label(s) and the current date value(s). The label is required to ensure correct behavior with accessibility tools such as screen readers.</p>
15
+ <p>When <code>range</code> is set, two inputs are shown — one for the departure date and one for the return date — separated by a visual divider.</p>
16
+ <p>The trigger is a focusable element and will visually respond to common UI states — <strong>Hover</strong> <em>(:hover)</em>, <strong>Focus</strong> <em>(:focus / :focus-visible)</em>, <strong>Disabled</strong> <em>(:disabled)</em>. The component does not have a visual response to the <strong>Active</strong> <em>(:active)</em> state.</p>
17
+ <auro-header level="4" id="triggerConditional">Conditional Elements</auro-header>
18
+ <p>The trigger contains the following elements that render conditionally:</p>
19
+ <ul>
20
+ <li>
21
+ <strong>Calendar icon:</strong> a decorative calendar icon rendered to the left of the input field(s). Provides a visual cue that the component opens a calendar.
22
+ </li>
23
+ <li>
24
+ <strong>Clear button:</strong> rendered when the input has a value, allowing the user to clear the current date selection.
25
+ </li>
26
+ <li>
27
+ <strong>Validation error icon:</strong> rendered when the component is in an invalid state, visually indicating a validation problem.
28
+ </li>
29
+ </ul>
30
+ <auro-header level="4" id="calendar">Calendar</auro-header>
31
+ <p>The calendar displays one or more months in a grid layout. Users interact with the calendar by clicking on individual date cells. The calendar supports:</p>
32
+ <ul>
33
+ <li>Navigating between months using previous/next arrows.</li>
34
+ <li>Date range highlighting when <code>range</code> is set.</li>
35
+ <li>Disabled dates outside the <code>minDate</code>/<code>maxDate</code> bounds.</li>
36
+ <li>Custom cell content via the <code>date_MM_DD_YYYY</code> slot.</li>
37
+ <li>Cell popovers via the <code>popover_MM_DD_YYYY</code> slot.</li>
38
+ </ul>
39
+ <auro-header level="4" id="helpText">Help Text</auro-header>
40
+ <p>Help text is not required. However, consideration should be given to how users will understand the full context of the component instance, particularly users reliant on accessibility tools like screen readers.</p>
41
+ <p>If the component fails validation, the help text will change to show a validation help message instead of the default help text.</p>
42
+ <auro-header level="3" id="colors">Colors</auro-header>
43
+ <auro-header level="4" id="defaultColor">Default Color</auro-header>
44
+ <p>When the component is used on a light background.</p>
45
+ <div class="exampleWrapper">
46
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
47
+ <!-- The below content is automatically added from ./../apiExamples/basic.html -->
48
+ <auro-datepicker>
49
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
50
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
51
+ <span slot="fromLabel">Choose a date</span>
52
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
53
+ </auro-datepicker>
54
+ <!-- AURO-GENERATED-CONTENT:END -->
55
+ </div>
56
+ <auro-accordion alignRight>
57
+ <span slot="trigger">See code</span>
58
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
59
+ <!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
60
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker&gt;
61
+ &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
62
+ &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
63
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
64
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
65
+ &lt;/auro-datepicker&gt;</code></pre>
66
+ <!-- AURO-GENERATED-CONTENT:END -->
67
+ </auro-accordion>
68
+ <auro-header level="4" id="inverseColor">Inverse Color</auro-header>
69
+ <p>When the component is used on a darker background, set <code>appearance="inverse"</code> to invert the component colors for proper contrast and visibility.</p>
70
+ <div class="exampleWrapper--ondark">
71
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/appearance-inverse.html) -->
72
+ <!-- The below content is automatically added from ./../apiExamples/appearance-inverse.html -->
73
+ <auro-datepicker appearance="inverse">
74
+ <span slot="ariaLabel.bib.close">Close Calendar</span>
75
+ <span slot="bib.fullscreen.headline">Datepicker Headline</span>
76
+ <span slot="fromLabel">Choose a date</span>
77
+ <span slot="bib.fullscreen.fromLabel">Choose a date</span>
78
+ </auro-datepicker>
79
+ <!-- AURO-GENERATED-CONTENT:END -->
80
+ </div>
81
+ <auro-accordion alignRight>
82
+ <span slot="trigger">See code</span>
83
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/appearance-inverse.html) -->
84
+ <!-- The below code snippet is automatically added from ./../apiExamples/appearance-inverse.html -->
85
+ <pre class="language-html"><code class="language-html">&lt;auro-datepicker appearance="inverse"&gt;
86
+ &lt;span slot="ariaLabel.bib.close"&gt;Close Calendar&lt;/span&gt;
87
+ &lt;span slot="bib.fullscreen.headline"&gt;Datepicker Headline&lt;/span&gt;
88
+ &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
89
+ &lt;span slot="bib.fullscreen.fromLabel"&gt;Choose a date&lt;/span&gt;
90
+ &lt;/auro-datepicker&gt;</code></pre>
91
+ <!-- AURO-GENERATED-CONTENT:END -->
92
+ </auro-accordion>
package/components/datepicker/demo/readme.md CHANGED
@@ -21,7 +21,7 @@ The following sections are editable by making changes to the following files:
21
21
 
22
22
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
23
23
  <!-- The below content is automatically added from ./docs/partials/description.md -->
24
- The `<auro-datepicker>` element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The `<auro-datepicker>` element is the combination of [auro-dropdown](http://auro.alaskaair.com/components/auro/dropdown), [auro-input](http://auro.alaskaair.com/components/auro/input), and Auro's extension of [wc-range-datepicker](https://www.npmjs.com/package/wc-range-datepicker).
24
+ The <code>&lt;auro-datepicker&gt;</code> element allows users to select a date, or a pair of dates identifying a range, either with text input or by making a section in a calendar. The <code>&lt;auro-datepicker&gt;</code> element is the combination of <auro-hyperlink href="http://auro.alaskaair.com/components/auro/dropdown">auro-dropdown</auro-hyperlink>, <auro-hyperlink href="http://auro.alaskaair.com/components/auro/input">auro-input</auro-hyperlink>, and Auro's extension of <auro-hyperlink href="https://www.npmjs.com/package/wc-range-datepicker" target="_blank">wc-range-datepicker</auro-hyperlink>.
25
25
  <!-- AURO-GENERATED-CONTENT:END -->
26
26
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
27
27
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -32,7 +32,7 @@ The `<auro-datepicker>` element allows users to select a date, or a pair of date
32
32
 
33
33
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
34
34
  <!-- The below content is automatically added from ./docs/partials/useCases.md -->
35
- The `<auro-datepicker>` element should be used in situations where users may:
35
+ The <code>&lt;auro-datepicker&gt;</code> element should be used in situations where users may:
36
36
 
37
37
  * select a single date
38
38
  * select a pair of dates which identify a calendar range
@@ -84,18 +84,15 @@ To only develop a single component, use the `--filter` flag:
84
84
  <pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
85
85
  <!-- AURO-GENERATED-CONTENT:END -->
86
86
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
87
- <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
87
+ <!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
88
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/partials/customRegistrationDescription.md) -->
89
+ <!-- The below content is automatically added from ./../../../docs/partials/customRegistrationDescription.md -->
90
+ <p>Every Auro component consists of a JavaScript <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and a <a href="https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define">custom element registration</a>. The class defines the component's behavior, and the registration maps it to an HTML tag name so it can be used in markup.</p>
91
+ <p>The default import (shown above) handles both steps automatically, registering the component under its standard tag name.</p>
92
+ <p>If you need multiple versions of the same component on a single page — for example, when two projects depend on different versions — you can register the class under a custom tag name to avoid conflicts.</p>
93
+ <p>To do this, import the component class directly and call its <code>register(name)</code> method with a unique name:</p>
94
+ <!-- AURO-GENERATED-CONTENT:END -->
88
95
 
89
- ## Custom Component Registration for Version Management
90
-
91
- There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
92
-
93
- When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
94
-
95
- However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
96
-
97
- You can do this by importing only the component class and using the `register(name)` method with a unique name:
98
-
99
96
  <pre class="language-js"><code class="language-js">// Import the class only
100
97
  import { AuroDatepicker } from '@aurodesignsystem/auro-formkit/auro-datepicker/class';
101
98
  ​
@@ -104,20 +101,9 @@ AuroDatepicker.register('custom-datepicker');</code></pre>
104
101
 
105
102
  This will create a new custom element `<custom-datepicker>` that behaves exactly like `<auro-datepicker>`, allowing both to coexist on the same page without interfering with each other.
106
103
 
107
- <div class="exampleWrapper exampleWrapper--flex">
108
- <custom-datepicker>
109
- <span slot="bib.fullscreen.headline">custom-datepicker Example</span>
110
- <span slot="fromLabel">Choose a date</span>
111
- <span slot="bib.fullscreen.dateLabel">Choose a date</span>
112
- </custom-datepicker>
113
- </div>
114
- <auro-accordion alignRight>
115
- <span slot="trigger">See code</span>
116
-
117
104
  <pre class="language-html"><code class="language-html">&lt;custom-datepicker&gt;
118
105
  &lt;span slot="bib.fullscreen.headline"&gt;custom-datepicker Example&lt;/span&gt;
119
106
  &lt;span slot="fromLabel"&gt;Choose a date&lt;/span&gt;
120
107
  &lt;span slot="bib.fullscreen.dateLabel"&gt;Choose a date&lt;/span&gt;
121
108
  &lt;/custom-datepicker&gt;</code></pre>
122
- </auro-accordion>
123
109
  <!-- AURO-GENERATED-CONTENT:END -->