@aurodesignsystem/auro-formkit 5.1.2 → 5.1.4

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 (59) hide show
  1. package/CHANGELOG.md +14 -7
  2. package/components/checkbox/demo/api.min.js +2 -2
  3. package/components/checkbox/demo/index.min.js +2 -2
  4. package/components/checkbox/dist/index.js +2 -2
  5. package/components/checkbox/dist/registered.js +2 -2
  6. package/components/combobox/README.md +2 -0
  7. package/components/combobox/demo/api.md +190 -62
  8. package/components/combobox/demo/api.min.js +414 -156
  9. package/components/combobox/demo/index.md +4 -2
  10. package/components/combobox/demo/index.min.js +344 -142
  11. package/components/combobox/demo/readme.md +2 -0
  12. package/components/combobox/dist/auro-combobox.d.ts +81 -33
  13. package/components/combobox/dist/index.js +309 -131
  14. package/components/combobox/dist/registered.js +309 -131
  15. package/components/counter/demo/api.min.js +17 -10
  16. package/components/counter/demo/index.min.js +17 -10
  17. package/components/counter/dist/index.js +17 -10
  18. package/components/counter/dist/registered.js +17 -10
  19. package/components/datepicker/demo/api.md +0 -1
  20. package/components/datepicker/demo/api.min.js +76 -28
  21. package/components/datepicker/demo/index.min.js +76 -28
  22. package/components/datepicker/dist/index.js +76 -28
  23. package/components/datepicker/dist/registered.js +76 -28
  24. package/components/dropdown/demo/api.md +2 -0
  25. package/components/dropdown/demo/api.min.js +12 -6
  26. package/components/dropdown/demo/index.min.js +12 -6
  27. package/components/dropdown/dist/index.js +12 -6
  28. package/components/dropdown/dist/registered.js +12 -6
  29. package/components/helptext/dist/index.js +1 -1
  30. package/components/helptext/dist/registered.js +1 -1
  31. package/components/input/demo/api.md +48 -46
  32. package/components/input/demo/api.min.js +57 -16
  33. package/components/input/demo/index.md +7 -3
  34. package/components/input/demo/index.min.js +57 -16
  35. package/components/input/dist/auro-input.d.ts +4 -0
  36. package/components/input/dist/base-input.d.ts +9 -1
  37. package/components/input/dist/index.js +57 -16
  38. package/components/input/dist/registered.js +57 -16
  39. package/components/layoutElement/dist/auroElement.d.ts +2 -1
  40. package/components/layoutElement/dist/index.js +2 -1
  41. package/components/layoutElement/dist/registered.js +2 -1
  42. package/components/menu/demo/api.md +4 -3
  43. package/components/menu/demo/api.min.js +37 -12
  44. package/components/menu/demo/index.min.js +37 -12
  45. package/components/menu/dist/auro-menu.d.ts +3 -2
  46. package/components/menu/dist/auro-menuoption.d.ts +1 -0
  47. package/components/menu/dist/index.js +37 -12
  48. package/components/menu/dist/registered.js +37 -12
  49. package/components/radio/demo/api.min.js +2 -2
  50. package/components/radio/demo/index.min.js +2 -2
  51. package/components/radio/dist/index.js +2 -2
  52. package/components/radio/dist/registered.js +2 -2
  53. package/components/select/demo/api.min.js +54 -20
  54. package/components/select/demo/index.md +78 -66
  55. package/components/select/demo/index.min.js +54 -20
  56. package/components/select/dist/index.js +19 -9
  57. package/components/select/dist/registered.js +19 -9
  58. package/components/select/dist/styles/emphasized/color-css.d.ts +2 -0
  59. package/package.json +3 -3
package/components/select/demo/index.md CHANGED
@@ -153,73 +153,79 @@ The `emphasized` layout supports the following shapes:
153
153
  The `emphasized` layout supports the following sizes:
154
154
  - `xl`
155
155
 
156
- <div class="exampleWrapper--ondark">
157
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic-ondark.html) -->
158
- <!-- The below content is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
159
- <div>
160
- <auro-select layout="emphasized" shape="pill" size="xl" ondark required style="width:300px;">
156
+ <div class="exampleWrapper">
157
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/basic.html) -->
158
+ <!-- The below content is automatically added from ./../apiExamples/emphasized/basic.html -->
159
+ <div style="display: flex; flex-direction: row; gap: 10px;">
160
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
161
161
  <span slot="ariaLabel.bib.close">Close Popup</span>
162
- <span slot="label">Label</span>
163
- <span slot="helpText">Help Text</span>
162
+ <span slot="label">Select Example</span>
164
163
  <auro-menu nocheckmark>
165
164
  <auro-menuoption value="flights">
166
- <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
165
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
166
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
167
167
  </auro-menuoption>
168
168
  <auro-menuoption value="cars">
169
- <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
169
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
170
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
170
171
  </auro-menuoption>
171
172
  <auro-menuoption value="hotels">
172
- <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
173
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
174
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
173
175
  </auro-menuoption>
174
176
  <auro-menuoption value="packages">
175
- <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
177
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
178
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
176
179
  </auro-menuoption>
177
180
  <auro-menuoption value="cruises">
178
- <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
181
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
182
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
179
183
  </auro-menuoption>
180
184
  </auro-menu>
181
- </auro-select>
182
- </div>
183
- <div style="display: flex; gap: 4px;">
184
- <auro-select layout="emphasized" shape="pill-left" size="xl" ondark required style="width:300px;">
185
- <span slot="label">Label</span>
186
- <span slot="helpText">Help Text</span>
185
+ </auro-select>
186
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
187
+ <span slot="label">Select Example</span>
187
188
  <auro-menu nocheckmark>
188
189
  <auro-menuoption value="flights">
189
- <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
190
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
191
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
190
192
  </auro-menuoption>
191
193
  <auro-menuoption value="cars">
192
- <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
194
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
195
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
193
196
  </auro-menuoption>
194
197
  <auro-menuoption value="hotels">
195
- <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
198
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
199
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
196
200
  </auro-menuoption>
197
201
  <auro-menuoption value="packages">
198
- <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
202
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
203
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
199
204
  </auro-menuoption>
200
205
  <auro-menuoption value="cruises">
201
- <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
206
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
207
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
202
208
  </auro-menuoption>
203
209
  </auro-menu>
204
- </auro-select>
205
- <auro-select layout="emphasized" shape="pill-right" size="xl" ondark required style="width:300px;">
206
- <span slot="label">Label</span>
207
- <span slot="helpText">Help Text</span>
210
+ </auro-select>
211
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
212
+ <span slot="label">Select Example</span>
213
+ <span slot="helpText">no displayValue in menuoptions</span>
208
214
  <auro-menu nocheckmark>
209
215
  <auro-menuoption value="flights">
210
- <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
216
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
211
217
  </auro-menuoption>
212
218
  <auro-menuoption value="cars">
213
- <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
219
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
214
220
  </auro-menuoption>
215
221
  <auro-menuoption value="hotels">
216
- <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
222
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
217
223
  </auro-menuoption>
218
224
  <auro-menuoption value="packages">
219
- <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
225
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
220
226
  </auro-menuoption>
221
227
  <auro-menuoption value="cruises">
222
- <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
228
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
223
229
  </auro-menuoption>
224
230
  </auro-menu>
225
231
  </auro-select>
@@ -228,74 +234,80 @@ The `emphasized` layout supports the following sizes:
228
234
  </div>
229
235
  <auro-accordion alignRight>
230
236
  <span slot="trigger">See code</span>
231
- <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic-ondark.html) -->
232
- <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic-ondark.html -->
237
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/emphasized/basic.html) -->
238
+ <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/basic.html -->
233
239
 
234
240
  ```html
235
- <div>
236
- <auro-select layout="emphasized" shape="pill" size="xl" ondark required style="width:300px;">
241
+ <div style="display: flex; flex-direction: row; gap: 10px;">
242
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
237
243
  <span slot="ariaLabel.bib.close">Close Popup</span>
238
- <span slot="label">Label</span>
239
- <span slot="helpText">Help Text</span>
244
+ <span slot="label">Select Example</span>
240
245
  <auro-menu nocheckmark>
241
246
  <auro-menuoption value="flights">
242
- <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
247
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
248
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
243
249
  </auro-menuoption>
244
250
  <auro-menuoption value="cars">
245
- <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
251
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
252
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
246
253
  </auro-menuoption>
247
254
  <auro-menuoption value="hotels">
248
- <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
255
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
256
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
249
257
  </auro-menuoption>
250
258
  <auro-menuoption value="packages">
251
- <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
259
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
260
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
252
261
  </auro-menuoption>
253
262
  <auro-menuoption value="cruises">
254
- <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
263
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
264
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
255
265
  </auro-menuoption>
256
266
  </auro-menu>
257
- </auro-select>
258
- </div>
259
- <div style="display: flex; gap: 4px;">
260
- <auro-select layout="emphasized" shape="pill-left" size="xl" ondark required style="width:300px;">
261
- <span slot="label">Label</span>
262
- <span slot="helpText">Help Text</span>
267
+ </auro-select>
268
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" style="display:inline-block;">
269
+ <span slot="label">Select Example</span>
263
270
  <auro-menu nocheckmark>
264
271
  <auro-menuoption value="flights">
265
- <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
272
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
273
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="terminal" name="plane-diag-fill" customcolor></auro-icon>
266
274
  </auro-menuoption>
267
275
  <auro-menuoption value="cars">
268
- <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
276
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
277
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="car-rental-stroke" customcolor></auro-icon>
269
278
  </auro-menuoption>
270
279
  <auro-menuoption value="hotels">
271
- <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
280
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
281
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="destination" name="hotel-filled" customcolor></auro-icon>
272
282
  </auro-menuoption>
273
283
  <auro-menuoption value="packages">
274
- <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
284
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
285
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="shop" name="gift-filled" customcolor></auro-icon>
275
286
  </auro-menuoption>
276
287
  <auro-menuoption value="cruises">
277
- <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
288
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
289
+ <auro-icon style="--ds-auro-icon-size: 40px;" slot="displayValue" category="in-flight" name="boarding" customcolor></auro-icon>
278
290
  </auro-menuoption>
279
291
  </auro-menu>
280
- </auro-select>
281
- <auro-select layout="emphasized" shape="pill-right" size="xl" ondark required style="width:300px;">
282
- <span slot="label">Label</span>
283
- <span slot="helpText">Help Text</span>
292
+ </auro-select>
293
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" required style="display:inline-block;">
294
+ <span slot="label">Select Example</span>
295
+ <span slot="helpText">no displayValue in menuoptions</span>
284
296
  <auro-menu nocheckmark>
285
297
  <auro-menuoption value="flights">
286
- <auro-icon category="terminal" name="plane-diag-stroke" customColor></auro-icon> Flights
298
+ <auro-icon category="terminal" name="plane-diag-stroke" customcolor></auro-icon> Flights
287
299
  </auro-menuoption>
288
300
  <auro-menuoption value="cars">
289
- <auro-icon category="destination" name="car-rental-stroke" customColor></auro-icon> Cars
301
+ <auro-icon category="destination" name="car-rental-stroke" customcolor></auro-icon> Cars
290
302
  </auro-menuoption>
291
303
  <auro-menuoption value="hotels">
292
- <auro-icon category="destination" name="hotel-stroke" customColor></auro-icon> Hotels
304
+ <auro-icon category="destination" name="hotel-stroke" customcolor></auro-icon> Hotels
293
305
  </auro-menuoption>
294
306
  <auro-menuoption value="packages">
295
- <auro-icon category="shop" name="gift-stroke" customColor></auro-icon> Packages
307
+ <auro-icon category="shop" name="gift-stroke" customcolor></auro-icon> Packages
296
308
  </auro-menuoption>
297
309
  <auro-menuoption value="cruises">
298
- <auro-icon category="in-flight" name="boarding" customColor></auro-icon> Cruises
310
+ <auro-icon category="in-flight" name="boarding" customcolor></auro-icon> Cruises
299
311
  </auro-menuoption>
300
312
  </auro-menu>
301
313
  </auro-select>
@@ -377,10 +389,10 @@ The custom display value content is inserted using `slot="displayValue"` on each
377
389
 
378
390
  The following example demonstrates menu options with an icon and text. When selected, the auro-select renders an icon with no text.
379
391
 
380
- <div class="exampleWrapper--ondark">
392
+ <div class="exampleWrapper">
381
393
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/emphasized/constantDisplayValue.html) -->
382
394
  <!-- The below content is automatically added from ./../apiExamples/emphasized/constantDisplayValue.html -->
383
- <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
395
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
384
396
  <span slot="label">Select Example</span>
385
397
  <auro-menu nocheckmark>
386
398
  <auro-menuoption value="flights">
@@ -413,7 +425,7 @@ The following example demonstrates menu options with an icon and text. When sele
413
425
  <!-- The below code snippet is automatically added from ./../apiExamples/emphasized/constantDisplayValue.html -->
414
426
 
415
427
  ```html
416
- <auro-select layout="emphasized" shape="pill" size="xl" value="flights" ondark forceDisplayValue style="display:inline-block;">
428
+ <auro-select layout="emphasized" shape="pill" size="xl" value="flights" forceDisplayValue style="display:inline-block;">
417
429
  <span slot="label">Select Example</span>
418
430
  <auro-menu nocheckmark>
419
431
  <auro-menuoption value="flights">