@aurodesignsystem/auro-formkit 4.0.1 → 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 (175) hide show
  1. package/CHANGELOG.md +193 -3
  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/README.md +1 -1
  9. package/components/checkbox/demo/api.html +16 -10
  10. package/components/checkbox/demo/api.md +54 -19
  11. package/components/checkbox/demo/api.min.js +81 -45
  12. package/components/checkbox/demo/index.html +16 -10
  13. package/components/checkbox/demo/index.md +2 -2
  14. package/components/checkbox/demo/index.min.js +81 -45
  15. package/components/checkbox/demo/readme.html +16 -9
  16. package/components/checkbox/demo/readme.md +1 -1
  17. package/components/checkbox/dist/auro-checkbox-group.d.ts +2 -2
  18. package/components/checkbox/dist/auro-checkbox.d.ts +10 -3
  19. package/components/checkbox/dist/index.js +80 -44
  20. package/components/checkbox/dist/registered.js +80 -44
  21. package/components/combobox/README.md +2 -0
  22. package/components/combobox/demo/api.html +16 -10
  23. package/components/combobox/demo/api.md +124 -7
  24. package/components/combobox/demo/api.min.js +4542 -1330
  25. package/components/combobox/demo/index.html +16 -10
  26. package/components/combobox/demo/index.md +108 -4
  27. package/components/combobox/demo/index.min.js +4542 -1330
  28. package/components/combobox/demo/readme.html +16 -9
  29. package/components/combobox/demo/readme.md +2 -0
  30. package/components/combobox/dist/auro-combobox.d.ts +81 -18
  31. package/components/combobox/dist/index.js +4588 -1520
  32. package/components/combobox/dist/registered.js +4588 -1520
  33. package/components/counter/demo/api.html +17 -10
  34. package/components/counter/demo/api.md +167 -21
  35. package/components/counter/demo/api.min.js +3621 -866
  36. package/components/counter/demo/index.html +17 -10
  37. package/components/counter/demo/index.md +191 -34
  38. package/components/counter/demo/index.min.js +3621 -866
  39. package/components/counter/demo/readme.html +16 -9
  40. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  41. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  42. package/components/counter/dist/auro-counter.d.ts +16 -0
  43. package/components/counter/dist/helptextVersion.d.ts +2 -0
  44. package/components/counter/dist/iconVersion.d.ts +1 -1
  45. package/components/counter/dist/index.js +3619 -864
  46. package/components/counter/dist/registered.js +3619 -864
  47. package/components/datepicker/README.md +2 -1
  48. package/components/datepicker/demo/api.html +16 -10
  49. package/components/datepicker/demo/api.md +80 -30
  50. package/components/datepicker/demo/api.min.js +14795 -10365
  51. package/components/datepicker/demo/index.html +16 -10
  52. package/components/datepicker/demo/index.md +96 -4
  53. package/components/datepicker/demo/index.min.js +14795 -10365
  54. package/components/datepicker/demo/readme.html +16 -9
  55. package/components/datepicker/demo/readme.md +2 -1
  56. package/components/datepicker/dist/auro-datepicker.d.ts +163 -4
  57. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  58. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  59. package/components/datepicker/dist/index.js +14916 -10486
  60. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  61. package/components/datepicker/dist/registered.js +14916 -10486
  62. package/components/dropdown/demo/api.html +16 -10
  63. package/components/dropdown/demo/api.md +94 -262
  64. package/components/dropdown/demo/api.min.js +738 -259
  65. package/components/dropdown/demo/index.html +16 -10
  66. package/components/dropdown/demo/index.md +93 -266
  67. package/components/dropdown/demo/index.min.js +738 -259
  68. package/components/dropdown/demo/readme.html +16 -9
  69. package/components/dropdown/dist/auro-dropdown.d.ts +92 -73
  70. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  71. package/components/dropdown/dist/index.js +710 -231
  72. package/components/dropdown/dist/registered.js +710 -231
  73. package/components/dropdown/dist/styles/classic/style-css.d.ts +2 -0
  74. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  75. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  76. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  77. package/components/form/demo/api.html +16 -9
  78. package/components/form/demo/api.md +1 -1
  79. package/components/form/demo/api.min.js +3 -3
  80. package/components/form/demo/autocomplete.html +19 -3
  81. package/components/form/demo/index.html +16 -9
  82. package/components/form/demo/index.min.js +3 -3
  83. package/components/form/demo/readme.html +16 -9
  84. package/components/form/demo/working.html +19 -13
  85. package/components/form/dist/auro-form.d.ts +1 -1
  86. package/components/form/dist/index.js +2 -2
  87. package/components/form/dist/registered.js +2 -2
  88. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  89. package/components/helptext/dist/index.js +2 -4
  90. package/components/helptext/dist/registered.js +2 -4
  91. package/components/input/README.md +6 -2
  92. package/components/input/demo/api.html +16 -10
  93. package/components/input/demo/api.md +258 -144
  94. package/components/input/demo/api.min.js +1550 -497
  95. package/components/input/demo/index.html +17 -11
  96. package/components/input/demo/index.md +95 -27
  97. package/components/input/demo/index.min.js +1549 -496
  98. package/components/input/demo/readme.html +16 -9
  99. package/components/input/demo/readme.md +6 -2
  100. package/components/input/dist/auro-input.d.ts +139 -3
  101. package/components/input/dist/base-input.d.ts +80 -26
  102. package/components/input/dist/buttonVersion.d.ts +1 -1
  103. package/components/input/dist/iconVersion.d.ts +1 -1
  104. package/components/input/dist/index.js +1504 -451
  105. package/components/input/dist/registered.js +1504 -451
  106. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  107. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  108. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  109. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  110. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  111. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  112. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  113. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  114. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  115. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  116. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  117. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  118. package/components/layoutElement/dist/index.d.ts +2 -0
  119. package/components/layoutElement/dist/index.js +98 -0
  120. package/components/layoutElement/dist/registered.js +98 -0
  121. package/components/menu/demo/api.html +17 -10
  122. package/components/menu/demo/api.md +65 -8
  123. package/components/menu/demo/api.min.js +304 -65
  124. package/components/menu/demo/index.html +16 -10
  125. package/components/menu/demo/index.min.js +304 -65
  126. package/components/menu/demo/readme.html +16 -9
  127. package/components/menu/dist/auro-menu.d.ts +53 -7
  128. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  129. package/components/menu/dist/iconVersion.d.ts +1 -1
  130. package/components/menu/dist/index.js +289 -50
  131. package/components/menu/dist/registered.js +289 -50
  132. package/components/menu/dist/styles/default/color-menu-css.d.ts +2 -0
  133. package/components/menu/dist/styles/default/color-menuoption-css.d.ts +2 -0
  134. package/components/menu/dist/styles/default/style-menu-css.d.ts +2 -0
  135. package/components/menu/dist/styles/default/style-menuoption-css.d.ts +2 -0
  136. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  137. package/components/radio/demo/api.html +16 -10
  138. package/components/radio/demo/api.md +41 -9
  139. package/components/radio/demo/api.min.js +93 -95
  140. package/components/radio/demo/index.html +16 -10
  141. package/components/radio/demo/index.min.js +93 -95
  142. package/components/radio/demo/readme.html +16 -9
  143. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  144. package/components/radio/dist/auro-radio.d.ts +11 -12
  145. package/components/radio/dist/index.js +92 -94
  146. package/components/radio/dist/registered.js +92 -94
  147. package/components/select/README.md +1 -0
  148. package/components/select/demo/api.html +16 -10
  149. package/components/select/demo/api.js +0 -2
  150. package/components/select/demo/api.md +156 -114
  151. package/components/select/demo/api.min.js +3126 -657
  152. package/components/select/demo/index.html +17 -10
  153. package/components/select/demo/index.md +398 -62
  154. package/components/select/demo/index.min.js +3129 -648
  155. package/components/select/demo/readme.html +16 -9
  156. package/components/select/demo/readme.md +1 -0
  157. package/components/select/dist/auro-select.d.ts +173 -18
  158. package/components/select/dist/helptextVersion.d.ts +2 -0
  159. package/components/select/dist/index.js +3128 -791
  160. package/components/select/dist/registered.js +3128 -791
  161. package/components/select/dist/styles/shapeSize-css.d.ts +2 -0
  162. package/components/select/dist/styles/tokens-css.d.ts +2 -0
  163. package/package.json +33 -32
  164. package/packages/build-tools/src/postinstall.mjs +0 -12
  165. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  166. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  167. /package/components/{input/dist/styles/borders-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  168. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/classic/color-css.d.ts} +0 -0
  169. /package/components/{input/dist/styles/label-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  170. /package/components/{input/dist/styles/notificationIcons-css.d.ts → datepicker/dist/styles/shapeSize-css.d.ts} +0 -0
  171. /package/components/{menu/dist/styles/color-menu-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  172. /package/components/{menu/dist/styles/color-menuoption-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  173. /package/components/{menu/dist/styles/style-menu-css.d.ts → dropdown/dist/styles/classic/bibColors-css.d.ts} +0 -0
  174. /package/components/{menu/dist/styles/style-menuoption-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
  175. /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">