@aurodesignsystem/auro-formkit 4.0.2 → 5.0.0-rc-1002.1.1

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 (172) hide show
  1. package/CHANGELOG.md +193 -2
  2. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  3. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  4. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  6. package/components/bibtemplate/dist/index.js +1184 -105
  7. package/components/bibtemplate/dist/registered.js +1184 -105
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +52 -17
  10. package/components/checkbox/demo/api.min.js +66 -33
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.min.js +66 -33
  13. package/components/checkbox/demo/readme.html +16 -9
  14. package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
  15. package/components/checkbox/dist/auro-checkbox.d.ts +8 -1
  16. package/components/checkbox/dist/index.js +65 -32
  17. package/components/checkbox/dist/registered.js +65 -32
  18. package/components/combobox/README.md +2 -0
  19. package/components/combobox/demo/api.html +16 -10
  20. package/components/combobox/demo/api.md +124 -7
  21. package/components/combobox/demo/api.min.js +4542 -1330
  22. package/components/combobox/demo/index.html +16 -10
  23. package/components/combobox/demo/index.md +108 -4
  24. package/components/combobox/demo/index.min.js +4542 -1330
  25. package/components/combobox/demo/readme.html +16 -9
  26. package/components/combobox/demo/readme.md +2 -0
  27. package/components/combobox/dist/auro-combobox.d.ts +81 -18
  28. package/components/combobox/dist/index.js +4588 -1520
  29. package/components/combobox/dist/registered.js +4588 -1520
  30. package/components/counter/demo/api.html +17 -10
  31. package/components/counter/demo/api.md +167 -21
  32. package/components/counter/demo/api.min.js +3621 -866
  33. package/components/counter/demo/index.html +17 -10
  34. package/components/counter/demo/index.md +191 -34
  35. package/components/counter/demo/index.min.js +3621 -866
  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 +162 -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 +3619 -864
  43. package/components/counter/dist/registered.js +3619 -864
  44. package/components/datepicker/README.md +2 -1
  45. package/components/datepicker/demo/api.html +16 -10
  46. package/components/datepicker/demo/api.md +80 -30
  47. package/components/datepicker/demo/api.min.js +14795 -10365
  48. package/components/datepicker/demo/index.html +16 -10
  49. package/components/datepicker/demo/index.md +96 -4
  50. package/components/datepicker/demo/index.min.js +14795 -10365
  51. package/components/datepicker/demo/readme.html +16 -9
  52. package/components/datepicker/demo/readme.md +2 -1
  53. package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
  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 +14916 -10486
  57. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  58. package/components/datepicker/dist/registered.js +14916 -10486
  59. package/components/dropdown/demo/api.html +16 -10
  60. package/components/dropdown/demo/api.md +94 -262
  61. package/components/dropdown/demo/api.min.js +738 -259
  62. package/components/dropdown/demo/index.html +16 -10
  63. package/components/dropdown/demo/index.md +93 -266
  64. package/components/dropdown/demo/index.min.js +738 -259
  65. package/components/dropdown/demo/readme.html +16 -9
  66. package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
  67. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  68. package/components/dropdown/dist/index.js +710 -231
  69. package/components/dropdown/dist/registered.js +710 -231
  70. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  71. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  72. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  73. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  74. package/components/form/demo/api.html +16 -9
  75. package/components/form/demo/api.md +1 -1
  76. package/components/form/demo/api.min.js +3 -3
  77. package/components/form/demo/autocomplete.html +19 -3
  78. package/components/form/demo/index.html +16 -9
  79. package/components/form/demo/index.min.js +3 -3
  80. package/components/form/demo/readme.html +16 -9
  81. package/components/form/demo/working.html +19 -13
  82. package/components/form/dist/auro-form.d.ts +1 -1
  83. package/components/form/dist/index.js +2 -2
  84. package/components/form/dist/registered.js +2 -2
  85. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  86. package/components/helptext/dist/index.js +2 -4
  87. package/components/helptext/dist/registered.js +2 -4
  88. package/components/input/README.md +6 -2
  89. package/components/input/demo/api.html +16 -10
  90. package/components/input/demo/api.md +258 -144
  91. package/components/input/demo/api.min.js +1550 -497
  92. package/components/input/demo/index.html +17 -11
  93. package/components/input/demo/index.md +95 -27
  94. package/components/input/demo/index.min.js +1549 -496
  95. package/components/input/demo/readme.html +16 -9
  96. package/components/input/demo/readme.md +6 -2
  97. package/components/input/dist/auro-input.d.ts +139 -3
  98. package/components/input/dist/base-input.d.ts +80 -26
  99. package/components/input/dist/buttonVersion.d.ts +1 -1
  100. package/components/input/dist/iconVersion.d.ts +1 -1
  101. package/components/input/dist/index.js +1504 -451
  102. package/components/input/dist/registered.js +1504 -451
  103. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  104. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  105. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  106. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  107. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  108. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  109. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  110. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  111. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  112. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  113. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  114. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  115. package/components/layoutElement/dist/index.d.ts +2 -0
  116. package/components/layoutElement/dist/index.js +98 -0
  117. package/components/layoutElement/dist/registered.js +98 -0
  118. package/components/menu/demo/api.html +17 -10
  119. package/components/menu/demo/api.md +65 -8
  120. package/components/menu/demo/api.min.js +304 -65
  121. package/components/menu/demo/index.html +16 -10
  122. package/components/menu/demo/index.min.js +304 -65
  123. package/components/menu/demo/readme.html +16 -9
  124. package/components/menu/dist/auro-menu.d.ts +53 -7
  125. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  126. package/components/menu/dist/iconVersion.d.ts +1 -1
  127. package/components/menu/dist/index.js +289 -50
  128. package/components/menu/dist/registered.js +289 -50
  129. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  130. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  131. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  132. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  133. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  134. package/components/radio/demo/api.html +16 -10
  135. package/components/radio/demo/api.md +41 -9
  136. package/components/radio/demo/api.min.js +93 -95
  137. package/components/radio/demo/index.html +16 -10
  138. package/components/radio/demo/index.min.js +93 -95
  139. package/components/radio/demo/readme.html +16 -9
  140. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  141. package/components/radio/dist/auro-radio.d.ts +11 -12
  142. package/components/radio/dist/index.js +92 -94
  143. package/components/radio/dist/registered.js +92 -94
  144. package/components/select/README.md +1 -0
  145. package/components/select/demo/api.html +16 -10
  146. package/components/select/demo/api.js +0 -2
  147. package/components/select/demo/api.md +156 -114
  148. package/components/select/demo/api.min.js +3126 -657
  149. package/components/select/demo/index.html +17 -10
  150. package/components/select/demo/index.md +398 -62
  151. package/components/select/demo/index.min.js +3129 -648
  152. package/components/select/demo/readme.html +16 -9
  153. package/components/select/demo/readme.md +1 -0
  154. package/components/select/dist/auro-select.d.ts +173 -18
  155. package/components/select/dist/helptextVersion.d.ts +2 -0
  156. package/components/select/dist/index.js +3128 -791
  157. package/components/select/dist/registered.js +3128 -791
  158. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  159. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  160. package/package.json +33 -32
  161. package/packages/build-tools/src/postinstall.mjs +0 -12
  162. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  163. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  164. /package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  165. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
  166. /package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  167. /package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  168. /package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  169. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  170. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  171. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  172. /package/components/{menu/dist/styles/tokens-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
package/components/combobox/demo/index.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-combobox 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-combobox</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-combobox'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/combobox/demo/index.md CHANGED
@@ -22,10 +22,114 @@ The `<auro-combobox>` element should be used in situations where users may:
22
22
 
23
23
  ## Example(s)
24
24
 
25
+ ## Classic Layout
26
+
27
+ <div class="exampleWrapper">
28
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/basic.html) -->
29
+ <!-- The below content is automatically added from ./../apiExamples/classic/basic.html -->
30
+ <auro-combobox layout="classic" shape="classic" size="lg" placeholder="Placeholder content" required style="width: 249px;">
31
+ <span slot="ariaLabel.bib.close">Close combobox</span>
32
+ <span slot="ariaLabel.input.clear">Clear All</span>
33
+ <span slot="bib.fullscreen.headline">Bib Header</span>
34
+ <span slot="label">Name</span>
35
+ <auro-menu>
36
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
37
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
38
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
39
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
40
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
41
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
42
+ </auro-menu>
43
+ <span slot="helpText">
44
+ Help text - Lorem ipsum solar lorem ipsum solar
45
+ </span>
46
+ </auro-combobox>
47
+ <!-- AURO-GENERATED-CONTENT:END -->
48
+ </div>
49
+ <div class="exampleWrapper--ondark">
50
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/classic/onDark.html) -->
51
+ <!-- The below content is automatically added from ./../apiExamples/classic/onDark.html -->
52
+ <auro-combobox layout="classic" shape="classic" size="lg" placeholder="Placeholder content" ondark required style="width: 249px;">
53
+ <span slot="ariaLabel.bib.close">Close combobox</span>
54
+ <span slot="ariaLabel.input.clear">Clear All</span>
55
+ <span slot="bib.fullscreen.headline">Bib Header</span>
56
+ <span slot="label">Name</span>
57
+ <auro-menu>
58
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
59
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
60
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
61
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
62
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
63
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
64
+ </auro-menu>
65
+ <span slot="helpText">
66
+ Help text - Lorem ipsum solar lorem ipsum solar
67
+ </span>
68
+ </auro-combobox>
69
+ <!-- AURO-GENERATED-CONTENT:END -->
70
+ </div>
71
+
72
+ ### Emphasized
73
+
74
+ <div class="exampleWrapper--ondark">
75
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
76
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
77
+ <auro-combobox layout="emphasized" value="Oranges" shape="pill" size="xl" placeholder="Placeholder content" required ondark style="width: 249px;">
78
+ <span slot="ariaLabel.bib.close">Close combobox</span>
79
+ <span slot="ariaLabel.input.clear">Clear All</span>
80
+ <span slot="bib.fullscreen.headline">Bib Header</span>
81
+ <span slot="label">Name</span>
82
+ <auro-menu>
83
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
84
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
85
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
86
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
87
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
88
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
89
+ </auro-menu>
90
+ <span slot="helpText">
91
+ Help text - Lorem ipsum solar lorem ipsum solar
92
+ </span>
93
+ <span slot="displayValue">
94
+ <div>
95
+ <div class="mainText">Apples</div>
96
+ <div class="subText">Fruit</div>
97
+ </div>
98
+ </span>
99
+ </auro-combobox>
100
+ <!-- AURO-GENERATED-CONTENT:END -->
101
+ </div>
102
+
103
+ ### Snowflake
104
+
105
+ <div class="exampleWrapper--ondark">
106
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/snowflake/basic.html) -->
107
+ <!-- The below content is automatically added from ./../apiExamples/snowflake/basic.html -->
108
+ <auro-combobox layout="snowflake" shape="snowflake" size="lg" placeholder="Placeholder content" required ondark style="width: 249px;">
109
+ <span slot="ariaLabel.bib.close">Close combobox</span>
110
+ <span slot="ariaLabel.input.clear">Clear All</span>
111
+ <span slot="bib.fullscreen.headline">Bib Header</span>
112
+ <span slot="label">Name</span>
113
+ <auro-menu>
114
+ <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
115
+ <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
116
+ <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
117
+ <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
118
+ <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
119
+ <auro-menuoption static nomatch>No matching option</auro-menuoption>
120
+ </auro-menu>
121
+ <span slot="helpText">
122
+ Help text - Lorem ipsum solar lorem ipsum solar
123
+ </span>
124
+ </auro-combobox>
125
+ <!-- AURO-GENERATED-CONTENT:END -->
126
+ </div>
25
127
  <div class="exampleWrapper">
26
128
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/basic.html) -->
27
129
  <!-- The below content is automatically added from ./../apiExamples/basic.html -->
28
130
  <auro-combobox>
131
+ <span slot="ariaLabel.bib.close">Close combobox</span>
132
+ <span slot="ariaLabel.input.clear">Clear All</span>
29
133
  <span slot="bib.fullscreen.headline">Bib Header</span>
30
134
  <span slot="label">Name</span>
31
135
  <auro-menu>
@@ -63,6 +167,8 @@ The `<auro-combobox>` element should be used in situations where users may:
63
167
 
64
168
  ```html
65
169
  <auro-combobox>
170
+ <span slot="ariaLabel.bib.close">Close combobox</span>
171
+ <span slot="ariaLabel.input.clear">Clear All</span>
66
172
  <span slot="bib.fullscreen.headline">Bib Header</span>
67
173
  <span slot="label">Name</span>
68
174
  <auro-menu>
@@ -523,8 +629,7 @@ This example illustrates using a JavaScript function attached to an auro-button
523
629
  <auro-icon
524
630
  customColor
525
631
  category="terminal"
526
- name="round-trip-arrows"
527
- slot="icon">
632
+ name="round-trip-arrows">
528
633
  </auro-icon>
529
634
  </auro-button>
530
635
  <auro-combobox id="swapExampleRight">
@@ -582,8 +687,7 @@ This example illustrates using a JavaScript function attached to an auro-button
582
687
  <auro-icon
583
688
  customColor
584
689
  category="terminal"
585
- name="round-trip-arrows"
586
- slot="icon">
690
+ name="round-trip-arrows">
587
691
  </auro-icon>
588
692
  </auro-button>
589
693
  <auro-combobox id="swapExampleRight">