@aurodesignsystem-dev/auro-formkit 0.0.0-pr622.1 → 0.0.0-pr624.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 (109) hide show
  1. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  2. package/components/bibtemplate/dist/index.js +2 -2
  3. package/components/bibtemplate/dist/registered.js +2 -2
  4. package/components/checkbox/README.md +1 -1
  5. package/components/checkbox/demo/api.min.js +14 -3
  6. package/components/checkbox/demo/index.min.js +14 -3
  7. package/components/checkbox/demo/readme.md +1 -1
  8. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  9. package/components/checkbox/dist/auro-checkbox.d.ts +5 -1
  10. package/components/checkbox/dist/index.js +14 -3
  11. package/components/checkbox/dist/registered.js +14 -3
  12. package/components/combobox/README.md +1 -1
  13. package/components/combobox/demo/api.md +3 -0
  14. package/components/combobox/demo/api.min.js +1479 -395
  15. package/components/combobox/demo/index.html +2 -0
  16. package/components/combobox/demo/index.md +75 -0
  17. package/components/combobox/demo/index.min.js +1479 -395
  18. package/components/combobox/demo/readme.md +1 -1
  19. package/components/combobox/dist/auro-combobox.d.ts +19 -9
  20. package/components/combobox/dist/index.js +1471 -387
  21. package/components/combobox/dist/registered.js +1471 -387
  22. package/components/counter/README.md +1 -1
  23. package/components/counter/demo/api.min.js +433 -104
  24. package/components/counter/demo/index.min.js +433 -104
  25. package/components/counter/demo/readme.md +1 -1
  26. package/components/counter/dist/iconVersion.d.ts +1 -1
  27. package/components/counter/dist/index.js +433 -104
  28. package/components/counter/dist/registered.js +433 -104
  29. package/components/datepicker/README.md +1 -1
  30. package/components/datepicker/demo/api.min.js +1157 -376
  31. package/components/datepicker/demo/index.min.js +1157 -376
  32. package/components/datepicker/demo/readme.md +1 -1
  33. package/components/datepicker/dist/index.js +1156 -375
  34. package/components/datepicker/dist/registered.js +1156 -375
  35. package/components/dropdown/README.md +1 -1
  36. package/components/dropdown/demo/api.md +59 -35
  37. package/components/dropdown/demo/api.min.js +361 -88
  38. package/components/dropdown/demo/index.md +52 -0
  39. package/components/dropdown/demo/index.min.js +361 -88
  40. package/components/dropdown/demo/readme.md +1 -1
  41. package/components/dropdown/dist/auro-dropdown.d.ts +70 -21
  42. package/components/dropdown/dist/index.js +331 -58
  43. package/components/dropdown/dist/registered.js +331 -58
  44. package/components/dropdown/dist/styles/default/style-css.d.ts +2 -0
  45. package/components/dropdown/dist/styles/emphasized/style-css.d.ts +2 -0
  46. package/components/dropdown/dist/styles/shapeSize-css.d.ts +2 -0
  47. package/components/dropdown/dist/styles/snowflake/style-css.d.ts +2 -0
  48. package/components/form/README.md +1 -1
  49. package/components/form/demo/readme.md +1 -1
  50. package/components/input/README.md +2 -2
  51. package/components/input/demo/api.md +76 -64
  52. package/components/input/demo/api.min.js +747 -295
  53. package/components/input/demo/index.html +1 -1
  54. package/components/input/demo/index.md +49 -4
  55. package/components/input/demo/index.min.js +747 -295
  56. package/components/input/demo/readme.md +2 -2
  57. package/components/input/dist/auro-input.d.ts +97 -3
  58. package/components/input/dist/base-input.d.ts +36 -18
  59. package/components/input/dist/index.js +681 -229
  60. package/components/input/dist/registered.js +681 -229
  61. package/components/input/dist/styles/classic/color-css.d.ts +2 -0
  62. package/components/input/dist/styles/classic/style-css.d.ts +2 -0
  63. package/components/input/dist/styles/default/borders-css.d.ts +2 -0
  64. package/components/input/dist/styles/default/color-css.d.ts +2 -0
  65. package/components/input/dist/styles/default/input-css.d.ts +2 -0
  66. package/components/input/dist/styles/default/label-css.d.ts +2 -0
  67. package/components/input/dist/styles/default/mixins-css.d.ts +2 -0
  68. package/components/input/dist/styles/default/notificationIcons-css.d.ts +2 -0
  69. package/components/input/dist/styles/default/style-css.d.ts +2 -0
  70. package/components/input/dist/styles/emphasized/color-css.d.ts +2 -0
  71. package/components/input/dist/styles/emphasized/style-css.d.ts +2 -0
  72. package/components/input/dist/styles/shapeSize-css.d.ts +2 -0
  73. package/components/input/dist/styles/snowflake/style-css.d.ts +2 -0
  74. package/components/layoutElement/dist/auroElement.d.ts +34 -0
  75. package/components/layoutElement/dist/index.d.ts +1 -0
  76. package/components/layoutElement/dist/index.js +1 -0
  77. package/components/layoutElement/dist/registered.js +1 -0
  78. package/components/menu/README.md +1 -1
  79. package/components/menu/demo/api.min.js +2 -2
  80. package/components/menu/demo/index.min.js +2 -2
  81. package/components/menu/demo/readme.md +1 -1
  82. package/components/menu/dist/iconVersion.d.ts +1 -1
  83. package/components/menu/dist/index.js +2 -2
  84. package/components/menu/dist/registered.js +2 -2
  85. package/components/radio/README.md +1 -1
  86. package/components/radio/demo/api.md +8 -0
  87. package/components/radio/demo/api.min.js +13 -5
  88. package/components/radio/demo/index.min.js +13 -5
  89. package/components/radio/demo/readme.md +1 -1
  90. package/components/radio/dist/auro-radio.d.ts +4 -0
  91. package/components/radio/dist/index.js +13 -5
  92. package/components/radio/dist/registered.js +13 -5
  93. package/components/select/README.md +1 -1
  94. package/components/select/demo/api.html +15 -0
  95. package/components/select/demo/api.md +178 -0
  96. package/components/select/demo/api.min.js +403 -62
  97. package/components/select/demo/index.html +15 -0
  98. package/components/select/demo/index.md +177 -0
  99. package/components/select/demo/index.min.js +403 -62
  100. package/components/select/demo/readme.md +1 -1
  101. package/components/select/dist/auro-select.d.ts +27 -0
  102. package/components/select/dist/index.js +400 -58
  103. package/components/select/dist/registered.js +400 -58
  104. package/package.json +2 -2
  105. /package/components/{dropdown/dist/styles/bibColors-css.d.ts → combobox/dist/styles/emphasized/style-css.d.ts} +0 -0
  106. /package/components/{dropdown/dist/styles/bibStyles-css.d.ts → combobox/dist/styles/snowflake/style-css.d.ts} +0 -0
  107. /package/components/{input/dist/styles/borders-css.d.ts → dropdown/dist/styles/default/bibColors-css.d.ts} +0 -0
  108. /package/components/{input/dist/styles/label-css.d.ts → dropdown/dist/styles/default/bibStyles-css.d.ts} +0 -0
  109. /package/components/{input/dist/styles/notificationIcons-css.d.ts → dropdown/dist/styles/default/color-css.d.ts} +0 -0
package/components/select/demo/index.html CHANGED
@@ -47,5 +47,20 @@
47
47
  <!-- If additional elements are needed for the demo, add them here. -->
48
48
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
49
49
  <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
50
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@3.2.4/auro-input/+esm"></script>
51
+
52
+ <style>
53
+ .autofill-example-form .input-row {
54
+ display: flex;
55
+ flex-direction: row;
56
+ justify-content: space-between;
57
+ margin-bottom: 1rem;
58
+ gap: 15px;
59
+ }
60
+ .autofill-example-form .input-row auro-input,
61
+ .autofill-example-form .input-row auro-select {
62
+ flex: 1 0 auto;
63
+ }
64
+ </style>
50
65
  </body>
51
66
  </html>
package/components/select/demo/index.md CHANGED
@@ -178,6 +178,183 @@ The following example illustrates the use of the `label`, `placeholder` and `hel
178
178
  <!-- AURO-GENERATED-CONTENT:END -->
179
179
  </auro-accordion>
180
180
 
181
+ ## Autofill/Autocomplete Support
182
+
183
+ Use the `autocomplete` attribute to let browser's know what information to use to fill out the form.
184
+
185
+ <div class="exampleWrapper">
186
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/autocomplete.html) -->
187
+ <!-- The below content is automatically added from ./../apiExamples/autocomplete.html -->
188
+ <div class="autofill-example-form">
189
+ <div class="input-row">
190
+ <auro-input autocomplete="given-name">
191
+ <span slot="label">First Name</span>
192
+ <span slot="bib.fullscreen.headline">First Name</span>
193
+ </auro-input>
194
+ <auro-input autocomplete="family-name">
195
+ <span slot="label">Last Name</span>
196
+ <span slot="bib.fullscreen.headline">Last Name</span>
197
+ </auro-input>
198
+ </div>
199
+ <div class="input-row">
200
+ <auro-input autocomplete="address-line1">
201
+ <span slot="label">Street Address</span>
202
+ <span slot="bib.fullscreen.headline">Street Address</span>
203
+ </auro-input>
204
+ <auro-input autocomplete="address-level2">
205
+ <span slot="label">City</span>
206
+ <span slot="bib.fullscreen.headline">City</span>
207
+ </auro-input>
208
+ <auro-select autocomplete="address-level1">
209
+ <span slot="bib.fullscreen.headline">Select Your State</span>
210
+ <span slot="label">Select Your State</span>
211
+ <auro-menu>
212
+ <auro-menuoption value="AL">Alabama</auro-menuoption>
213
+ <auro-menuoption value="AK">Alaska</auro-menuoption>
214
+ <auro-menuoption value="AZ">Arizona</auro-menuoption>
215
+ <auro-menuoption value="AR">Arkansas</auro-menuoption>
216
+ <auro-menuoption value="CA">California</auro-menuoption>
217
+ <auro-menuoption value="CO">Colorado</auro-menuoption>
218
+ <auro-menuoption value="CT">Connecticut</auro-menuoption>
219
+ <auro-menuoption value="DE">Delaware</auro-menuoption>
220
+ <auro-menuoption value="DC">District of Columbia</auro-menuoption>
221
+ <auro-menuoption value="FL">Florida</auro-menuoption>
222
+ <auro-menuoption value="GA">Georgia</auro-menuoption>
223
+ <auro-menuoption value="HI">Hawaii</auro-menuoption>
224
+ <auro-menuoption value="ID">Idaho</auro-menuoption>
225
+ <auro-menuoption value="IL">Illinois</auro-menuoption>
226
+ <auro-menuoption value="IN">Indiana</auro-menuoption>
227
+ <auro-menuoption value="IA">Iowa</auro-menuoption>
228
+ <auro-menuoption value="KS">Kansas</auro-menuoption>
229
+ <auro-menuoption value="KY">Kentucky</auro-menuoption>
230
+ <auro-menuoption value="LA">Louisiana</auro-menuoption>
231
+ <auro-menuoption value="ME">Maine</auro-menuoption>
232
+ <auro-menuoption value="MD">Maryland</auro-menuoption>
233
+ <auro-menuoption value="MA">Massachusetts</auro-menuoption>
234
+ <auro-menuoption value="MI">Michigan</auro-menuoption>
235
+ <auro-menuoption value="MN">Minnesota</auro-menuoption>
236
+ <auro-menuoption value="MS">Mississippi</auro-menuoption>
237
+ <auro-menuoption value="MO">Missouri</auro-menuoption>
238
+ <auro-menuoption value="MT">Montana</auro-menuoption>
239
+ <auro-menuoption value="NE">Nebraska</auro-menuoption>
240
+ <auro-menuoption value="NV">Nevada</auro-menuoption>
241
+ <auro-menuoption value="NH">New Hampshire</auro-menuoption>
242
+ <auro-menuoption value="NJ">New Jersey</auro-menuoption>
243
+ <auro-menuoption value="NM">New Mexico</auro-menuoption>
244
+ <auro-menuoption value="NY">New York</auro-menuoption>
245
+ <auro-menuoption value="NC">North Carolina</auro-menuoption>
246
+ <auro-menuoption value="ND">North Dakota</auro-menuoption>
247
+ <auro-menuoption value="OH">Ohio</auro-menuoption>
248
+ <auro-menuoption value="OK">Oklahoma</auro-menuoption>
249
+ <auro-menuoption value="OR">Oregon</auro-menuoption>
250
+ <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
251
+ <auro-menuoption value="RI">Rhode Island</auro-menuoption>
252
+ <auro-menuoption value="SC">South Carolina</auro-menuoption>
253
+ <auro-menuoption value="SD">South Dakota</auro-menuoption>
254
+ <auro-menuoption value="TN">Tennessee</auro-menuoption>
255
+ <auro-menuoption value="TX">Texas</auro-menuoption>
256
+ <auro-menuoption value="UT">Utah</auro-menuoption>
257
+ <auro-menuoption value="VT">Vermont</auro-menuoption>
258
+ <auro-menuoption value="VA">Virginia</auro-menuoption>
259
+ <auro-menuoption value="WA">Washington</auro-menuoption>
260
+ <auro-menuoption value="WV">West Virginia</auro-menuoption>
261
+ <auro-menuoption value="WI">Wisconsin</auro-menuoption>
262
+ <auro-menuoption value="WY">Wyoming</auro-menuoption>
263
+ </auro-menu>
264
+ </auro-select>
265
+ </div>
266
+ </div>
267
+ <!-- AURO-GENERATED-CONTENT:END -->
268
+ </div>
269
+ <auro-accordion alignRight>
270
+ <span slot="trigger">See code</span>
271
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/autocomplete.html) -->
272
+ <!-- The below code snippet is automatically added from ./../apiExamples/autocomplete.html -->
273
+
274
+ ```html
275
+ <div class="autofill-example-form">
276
+ <div class="input-row">
277
+ <auro-input autocomplete="given-name">
278
+ <span slot="label">First Name</span>
279
+ <span slot="bib.fullscreen.headline">First Name</span>
280
+ </auro-input>
281
+ <auro-input autocomplete="family-name">
282
+ <span slot="label">Last Name</span>
283
+ <span slot="bib.fullscreen.headline">Last Name</span>
284
+ </auro-input>
285
+ </div>
286
+ <div class="input-row">
287
+ <auro-input autocomplete="address-line1">
288
+ <span slot="label">Street Address</span>
289
+ <span slot="bib.fullscreen.headline">Street Address</span>
290
+ </auro-input>
291
+ <auro-input autocomplete="address-level2">
292
+ <span slot="label">City</span>
293
+ <span slot="bib.fullscreen.headline">City</span>
294
+ </auro-input>
295
+ <auro-select autocomplete="address-level1">
296
+ <span slot="bib.fullscreen.headline">Select Your State</span>
297
+ <span slot="label">Select Your State</span>
298
+ <auro-menu>
299
+ <auro-menuoption value="AL">Alabama</auro-menuoption>
300
+ <auro-menuoption value="AK">Alaska</auro-menuoption>
301
+ <auro-menuoption value="AZ">Arizona</auro-menuoption>
302
+ <auro-menuoption value="AR">Arkansas</auro-menuoption>
303
+ <auro-menuoption value="CA">California</auro-menuoption>
304
+ <auro-menuoption value="CO">Colorado</auro-menuoption>
305
+ <auro-menuoption value="CT">Connecticut</auro-menuoption>
306
+ <auro-menuoption value="DE">Delaware</auro-menuoption>
307
+ <auro-menuoption value="DC">District of Columbia</auro-menuoption>
308
+ <auro-menuoption value="FL">Florida</auro-menuoption>
309
+ <auro-menuoption value="GA">Georgia</auro-menuoption>
310
+ <auro-menuoption value="HI">Hawaii</auro-menuoption>
311
+ <auro-menuoption value="ID">Idaho</auro-menuoption>
312
+ <auro-menuoption value="IL">Illinois</auro-menuoption>
313
+ <auro-menuoption value="IN">Indiana</auro-menuoption>
314
+ <auro-menuoption value="IA">Iowa</auro-menuoption>
315
+ <auro-menuoption value="KS">Kansas</auro-menuoption>
316
+ <auro-menuoption value="KY">Kentucky</auro-menuoption>
317
+ <auro-menuoption value="LA">Louisiana</auro-menuoption>
318
+ <auro-menuoption value="ME">Maine</auro-menuoption>
319
+ <auro-menuoption value="MD">Maryland</auro-menuoption>
320
+ <auro-menuoption value="MA">Massachusetts</auro-menuoption>
321
+ <auro-menuoption value="MI">Michigan</auro-menuoption>
322
+ <auro-menuoption value="MN">Minnesota</auro-menuoption>
323
+ <auro-menuoption value="MS">Mississippi</auro-menuoption>
324
+ <auro-menuoption value="MO">Missouri</auro-menuoption>
325
+ <auro-menuoption value="MT">Montana</auro-menuoption>
326
+ <auro-menuoption value="NE">Nebraska</auro-menuoption>
327
+ <auro-menuoption value="NV">Nevada</auro-menuoption>
328
+ <auro-menuoption value="NH">New Hampshire</auro-menuoption>
329
+ <auro-menuoption value="NJ">New Jersey</auro-menuoption>
330
+ <auro-menuoption value="NM">New Mexico</auro-menuoption>
331
+ <auro-menuoption value="NY">New York</auro-menuoption>
332
+ <auro-menuoption value="NC">North Carolina</auro-menuoption>
333
+ <auro-menuoption value="ND">North Dakota</auro-menuoption>
334
+ <auro-menuoption value="OH">Ohio</auro-menuoption>
335
+ <auro-menuoption value="OK">Oklahoma</auro-menuoption>
336
+ <auro-menuoption value="OR">Oregon</auro-menuoption>
337
+ <auro-menuoption value="PA">Pennsylvania</auro-menuoption>
338
+ <auro-menuoption value="RI">Rhode Island</auro-menuoption>
339
+ <auro-menuoption value="SC">South Carolina</auro-menuoption>
340
+ <auro-menuoption value="SD">South Dakota</auro-menuoption>
341
+ <auro-menuoption value="TN">Tennessee</auro-menuoption>
342
+ <auro-menuoption value="TX">Texas</auro-menuoption>
343
+ <auro-menuoption value="UT">Utah</auro-menuoption>
344
+ <auro-menuoption value="VT">Vermont</auro-menuoption>
345
+ <auro-menuoption value="VA">Virginia</auro-menuoption>
346
+ <auro-menuoption value="WA">Washington</auro-menuoption>
347
+ <auro-menuoption value="WV">West Virginia</auro-menuoption>
348
+ <auro-menuoption value="WI">Wisconsin</auro-menuoption>
349
+ <auro-menuoption value="WY">Wyoming</auro-menuoption>
350
+ </auro-menu>
351
+ </auro-select>
352
+ </div>
353
+ </div>
354
+ ```
355
+ <!-- AURO-GENERATED-CONTENT:END -->
356
+ </auro-accordion>
357
+
181
358
  ## Example with auro-icons in options
182
359
 
183
360
  Displays an `<auro-select>` element with `<auro-icon>` elements in each option.