@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.10 → 0.0.0-pr624.100

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 (148) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
  2. package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
  3. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
  5. package/components/bibtemplate/dist/index.js +1242 -94
  6. package/components/bibtemplate/dist/registered.js +1242 -94
  7. package/components/checkbox/README.md +1 -1
  8. package/components/checkbox/demo/api.html +16 -10
  9. package/components/checkbox/demo/api.md +54 -19
  10. package/components/checkbox/demo/api.min.js +71 -46
  11. package/components/checkbox/demo/index.html +16 -10
  12. package/components/checkbox/demo/index.md +2 -2
  13. package/components/checkbox/demo/index.min.js +71 -46
  14. package/components/checkbox/demo/readme.html +16 -9
  15. package/components/checkbox/demo/readme.md +1 -1
  16. package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
  17. package/components/checkbox/dist/auro-checkbox.d.ts +6 -3
  18. package/components/checkbox/dist/index.js +70 -45
  19. package/components/checkbox/dist/registered.js +70 -45
  20. package/components/combobox/README.md +2 -0
  21. package/components/combobox/demo/api.html +16 -10
  22. package/components/combobox/demo/api.md +121 -8
  23. package/components/combobox/demo/api.min.js +3314 -1013
  24. package/components/combobox/demo/index.html +16 -10
  25. package/components/combobox/demo/index.md +20 -34
  26. package/components/combobox/demo/index.min.js +3314 -1013
  27. package/components/combobox/demo/readme.html +16 -9
  28. package/components/combobox/demo/readme.md +2 -0
  29. package/components/combobox/dist/auro-combobox.d.ts +59 -14
  30. package/components/combobox/dist/index.js +3008 -850
  31. package/components/combobox/dist/registered.js +3008 -850
  32. package/components/counter/demo/api.html +17 -10
  33. package/components/counter/demo/api.md +167 -21
  34. package/components/counter/demo/api.min.js +3419 -773
  35. package/components/counter/demo/index.html +17 -10
  36. package/components/counter/demo/index.md +191 -34
  37. package/components/counter/demo/index.min.js +3419 -773
  38. package/components/counter/demo/readme.html +16 -9
  39. package/components/counter/dist/auro-counter-button.d.ts +2 -0
  40. package/components/counter/dist/auro-counter-group.d.ts +162 -11
  41. package/components/counter/dist/auro-counter.d.ts +16 -0
  42. package/components/counter/dist/helptextVersion.d.ts +2 -0
  43. package/components/counter/dist/iconVersion.d.ts +1 -1
  44. package/components/counter/dist/index.js +3419 -773
  45. package/components/counter/dist/registered.js +3419 -773
  46. package/components/datepicker/README.md +2 -1
  47. package/components/datepicker/demo/api.html +16 -10
  48. package/components/datepicker/demo/api.md +70 -28
  49. package/components/datepicker/demo/api.min.js +11970 -8081
  50. package/components/datepicker/demo/index.html +16 -10
  51. package/components/datepicker/demo/index.md +87 -8
  52. package/components/datepicker/demo/index.min.js +11970 -8081
  53. package/components/datepicker/demo/readme.html +16 -9
  54. package/components/datepicker/demo/readme.md +2 -1
  55. package/components/datepicker/dist/auro-datepicker.d.ts +152 -12
  56. package/components/datepicker/dist/buttonVersion.d.ts +1 -1
  57. package/components/datepicker/dist/iconVersion.d.ts +2 -0
  58. package/components/datepicker/dist/index.js +14577 -10688
  59. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  60. package/components/datepicker/dist/registered.js +14577 -10688
  61. package/components/dropdown/demo/api.html +16 -10
  62. package/components/dropdown/demo/api.md +89 -281
  63. package/components/dropdown/demo/api.min.js +451 -271
  64. package/components/dropdown/demo/index.html +16 -10
  65. package/components/dropdown/demo/index.md +92 -362
  66. package/components/dropdown/demo/index.min.js +451 -271
  67. package/components/dropdown/demo/readme.html +16 -9
  68. package/components/dropdown/dist/auro-dropdown.d.ts +43 -82
  69. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
  70. package/components/dropdown/dist/index.js +450 -270
  71. package/components/dropdown/dist/registered.js +450 -270
  72. package/components/form/demo/api.html +16 -9
  73. package/components/form/demo/api.md +1 -1
  74. package/components/form/demo/api.min.js +3 -3
  75. package/components/form/demo/autocomplete.html +19 -3
  76. package/components/form/demo/index.html +16 -9
  77. package/components/form/demo/index.min.js +3 -3
  78. package/components/form/demo/readme.html +16 -9
  79. package/components/form/demo/working.html +19 -13
  80. package/components/form/dist/auro-form.d.ts +1 -1
  81. package/components/form/dist/index.js +2 -2
  82. package/components/form/dist/registered.js +2 -2
  83. package/components/helptext/dist/auro-helptext.d.ts +0 -2
  84. package/components/helptext/dist/index.js +3 -5
  85. package/components/helptext/dist/registered.js +3 -5
  86. package/components/input/README.md +6 -2
  87. package/components/input/demo/api.html +16 -10
  88. package/components/input/demo/api.md +235 -135
  89. package/components/input/demo/api.min.js +1046 -301
  90. package/components/input/demo/index.html +16 -10
  91. package/components/input/demo/index.md +55 -32
  92. package/components/input/demo/index.min.js +1062 -317
  93. package/components/input/demo/readme.html +16 -9
  94. package/components/input/demo/readme.md +6 -2
  95. package/components/input/dist/auro-input.d.ts +26 -2
  96. package/components/input/dist/base-input.d.ts +47 -11
  97. package/components/input/dist/buttonVersion.d.ts +1 -1
  98. package/components/input/dist/iconVersion.d.ts +1 -1
  99. package/components/input/dist/index.js +1061 -316
  100. package/components/input/dist/registered.js +1061 -316
  101. package/components/layoutElement/dist/index.js +11 -8
  102. package/components/layoutElement/dist/registered.js +97 -0
  103. package/components/menu/demo/api.html +17 -10
  104. package/components/menu/demo/api.md +65 -8
  105. package/components/menu/demo/api.min.js +301 -63
  106. package/components/menu/demo/index.html +16 -10
  107. package/components/menu/demo/index.min.js +301 -63
  108. package/components/menu/demo/readme.html +16 -9
  109. package/components/menu/dist/auro-menu.d.ts +53 -7
  110. package/components/menu/dist/auro-menuoption.d.ts +21 -3
  111. package/components/menu/dist/iconVersion.d.ts +1 -1
  112. package/components/menu/dist/index.js +286 -48
  113. package/components/menu/dist/registered.js +286 -48
  114. package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
  115. package/components/radio/demo/api.html +16 -10
  116. package/components/radio/demo/api.md +41 -9
  117. package/components/radio/demo/api.min.js +95 -97
  118. package/components/radio/demo/index.html +16 -10
  119. package/components/radio/demo/index.min.js +95 -97
  120. package/components/radio/demo/readme.html +16 -9
  121. package/components/radio/dist/auro-radio-group.d.ts +1 -1
  122. package/components/radio/dist/auro-radio.d.ts +11 -12
  123. package/components/radio/dist/index.js +94 -96
  124. package/components/radio/dist/registered.js +94 -96
  125. package/components/select/README.md +1 -0
  126. package/components/select/demo/api.html +16 -10
  127. package/components/select/demo/api.js +0 -2
  128. package/components/select/demo/api.md +159 -125
  129. package/components/select/demo/api.min.js +2281 -730
  130. package/components/select/demo/index.html +17 -11
  131. package/components/select/demo/index.md +1074 -259
  132. package/components/select/demo/index.min.js +2283 -720
  133. package/components/select/demo/readme.html +16 -9
  134. package/components/select/demo/readme.md +1 -0
  135. package/components/select/dist/auro-select.d.ts +86 -25
  136. package/components/select/dist/index.js +2175 -755
  137. package/components/select/dist/registered.js +2175 -755
  138. package/package.json +31 -28
  139. /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
  140. /package/components/datepicker/dist/styles/{emphasized/style-css.d.ts → classic/color-css.d.ts} +0 -0
  141. /package/components/{input/dist/styles/default/input-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
  142. /package/components/{input/dist/styles/default/label-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
  143. /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/snowflake/style-css.d.ts} +0 -0
  144. /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
  145. /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
  146. /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
  147. /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
  148. /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-css.d.ts} +0 -0
package/components/select/demo/readme.html CHANGED
@@ -16,17 +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-select 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-select</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-select'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
- </head>
36
+ </head>
30
37
  <body class="auro-markdown">
31
38
  <main></main>
32
39
 
package/components/select/demo/readme.md CHANGED
@@ -84,6 +84,7 @@ This configuration enables proper module resolution for the component's TypeScri
84
84
 
85
85
  ```html
86
86
  <auro-select>
87
+ <span slot="ariaLabel.bib.close">Close Popup</span>
87
88
  <span slot="bib.fullscreen.headline">Bib Headline</span>
88
89
  <span slot="label">Select Example</span>
89
90
  <auro-menu>
package/components/select/dist/auro-select.d.ts CHANGED
@@ -2,14 +2,20 @@
2
2
  * The auro-select element is a wrapper for auro-dropdown and auro-menu to create a dropdown menu control.
3
3
  *
4
4
  * @slot - Default slot for the menu content.
5
+ * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
5
6
  * @slot bib.fullscreen.headline - Defines the headline to display above menu-options
6
7
  * @slot label - Defines the content of the label.
8
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
7
9
  * @slot helpText - Defines the content of the helpText.
8
- * @slot placeholder - Defines the content of the placeholder to be shown when there is no value
9
10
  * @slot valueText - Dropdown value text display.
11
+ * @slot displayValue - Allows custom HTML content to display the selected value when select is not focused.
10
12
  * @event auroSelect-valueSet - Notifies that the component has a new value set.
11
13
  * @event input - Notifies every time the value prop of the element is changed. The updated `value` and `optionSelected` will be delivered in `detail` object.
12
14
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` values have changed.
15
+ *
16
+ * @csspart dropdownTrigger - Apply CSS to the trigger content container.
17
+ * @csspart dropdownChevron - Apply CSS to the collapsed/expanded state icon container.
18
+ * @csspart dropdownSize - Apply size styles to the dropdown bib. (height, width, maxHeight, maxWidth only)
13
19
  * @csspart helpText - Apply CSS to the help text.
14
20
  */
15
21
  export class AuroSelect extends AuroElement {
@@ -43,6 +49,13 @@ export class AuroSelect extends AuroElement {
43
49
  type: BooleanConstructor;
44
50
  reflect: boolean;
45
51
  };
52
+ /**
53
+ * When attribute is present, element will be 100% width of container element.
54
+ */
55
+ fluid: {
56
+ type: BooleanConstructor;
57
+ reflect: boolean;
58
+ };
46
59
  /**
47
60
  * @private
48
61
  */
@@ -64,13 +77,6 @@ export class AuroSelect extends AuroElement {
64
77
  type: StringConstructor;
65
78
  reflect: boolean;
66
79
  };
67
- /**
68
- * If set, makes dropdown width match the size of the content, rather than the width of the trigger.
69
- */
70
- flexMenuWidth: {
71
- type: BooleanConstructor;
72
- reflect: boolean;
73
- };
74
80
  /**
75
81
  * Defines the screen size breakpoint (`xs`, `sm`, `md`, `lg`, `xl`, `disabled`)
76
82
  * at which the dropdown switches to fullscreen mode on mobile. `disabled` indicates a dropdown should _never_ enter fullscreen.
@@ -152,13 +158,20 @@ export class AuroSelect extends AuroElement {
152
158
  * "top" | "right" | "bottom" | "left" |
153
159
  * "bottom-start" | "top-start" | "top-end" |
154
160
  * "right-start" | "right-end" | "bottom-end" |
155
- * "left-start" | "left-end"
161
+ * "left-start" | "left-end".
156
162
  * @default bottom-start
157
163
  */
158
164
  placement: {
159
165
  type: StringConstructor;
160
166
  reflect: boolean;
161
167
  };
168
+ /**
169
+ * Define custom placeholder text.
170
+ */
171
+ placeholder: {
172
+ type: StringConstructor;
173
+ reflect: boolean;
174
+ };
162
175
  /**
163
176
  * Populates the `required` attribute on the element. Used for client-side validation.
164
177
  */
@@ -199,10 +212,13 @@ export class AuroSelect extends AuroElement {
199
212
  reflect: boolean;
200
213
  };
201
214
  /**
202
- * Value selected for the component. Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
203
- * @type {String|Array<String>}
215
+ * Value selected for the component.
204
216
  */
205
- value: string | Array<string>;
217
+ value: {
218
+ type: StringConstructor;
219
+ reflect: boolean;
220
+ attribute: string;
221
+ };
206
222
  /**
207
223
  * Sets multi-select mode, allowing multiple options to be selected at once.
208
224
  */
@@ -246,8 +262,6 @@ export class AuroSelect extends AuroElement {
246
262
  */
247
263
  static register(name?: string): void;
248
264
  matchWidth: boolean;
249
- shape: string;
250
- size: string;
251
265
  placement: string;
252
266
  offset: number;
253
267
  noFlip: boolean;
@@ -301,12 +315,33 @@ export class AuroSelect extends AuroElement {
301
315
  fullscreenBreakpoint: string;
302
316
  onDark: boolean;
303
317
  isPopoverVisible: any;
318
+ shape: string;
319
+ size: string;
304
320
  /**
305
- * Returns classmap configuration for wrapper elements in each layout.
321
+ * Formatted value based on `multiSelect` state.
322
+ * Default type is `String`, changing to `Array<String>` when `multiSelect` is true.
306
323
  * @private
307
- * @return {object} - Returns classmap.
324
+ * @returns {String|Array<String>}
308
325
  */
309
- private get commonWrapperClasses();
326
+ private get formattedValue();
327
+ /**
328
+ * Returns classmap configuration for html5 input labels in all layouts.
329
+ * @private
330
+ * @returns {Record<string, boolean>}
331
+ */
332
+ private get commonLabelClasses();
333
+ /**
334
+ * Returns the label font class based on layout and selection state.
335
+ * @private
336
+ * @returns {string} - The font class for the label.
337
+ */
338
+ private get labelFontClass();
339
+ /**
340
+ * Whether or not the component has a value.
341
+ * @returns {boolean} - Returns true if the component has a value or placeholder.
342
+ * @private
343
+ */
344
+ private get hasValue();
310
345
  /**
311
346
  * Binds all behavior needed to the dropdown after rendering.
312
347
  * @private
@@ -321,6 +356,11 @@ export class AuroSelect extends AuroElement {
321
356
  * @returns {void}
322
357
  */
323
358
  private updateDisplayedValue;
359
+ /**
360
+ * Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
361
+ * @private
362
+ */
363
+ private updateMenuShapeSize;
324
364
  /**
325
365
  * Binds all behavior needed to the menu after rendering.
326
366
  * @private
@@ -358,6 +398,16 @@ export class AuroSelect extends AuroElement {
358
398
  * @returns {void}
359
399
  */
360
400
  private handleMenuLoadingChange;
401
+ /**
402
+ * Hides the dropdown bib if its open.
403
+ * @returns {void}
404
+ */
405
+ hideBib(): void;
406
+ /**
407
+ * Shows the dropdown bib if there are options to show.
408
+ * @returns {void}
409
+ */
410
+ showBib(): void;
361
411
  /**
362
412
  * Function to support @focusin event.
363
413
  * @private
@@ -384,17 +434,19 @@ export class AuroSelect extends AuroElement {
384
434
  */
385
435
  private clearSelection;
386
436
  firstUpdated(): void;
437
+ /**
438
+ * Update the menu value. With checks for menu existence. Awaits value update.
439
+ * @param {string} value - The value to set in the menu.
440
+ * @returns {void}
441
+ * @private
442
+ */
443
+ private updateMenuValue;
387
444
  updated(changedProperties: any): Promise<void>;
388
445
  /**
389
446
  * Resets component to initial state.
390
447
  * @returns {void}
391
448
  */
392
449
  reset(): void;
393
- /**
394
- * Hide dropdownbib.
395
- * @private
396
- */
397
- private hideBib;
398
450
  /**
399
451
  * Validates value.
400
452
  * @param {boolean} [force=false] - Whether to force validation.
@@ -413,8 +465,18 @@ export class AuroSelect extends AuroElement {
413
465
  * @private
414
466
  */
415
467
  private _updateNativeSelect;
416
- renderAriaHtml(): import("lit-html").TemplateResult;
417
- renderNativeSelect(): import("lit-html").TemplateResult;
468
+ /**
469
+ * Returns HTML for the hidden a11y screen reader content.
470
+ * @private
471
+ * @returns {html} - Returns HTML for the hidden a11y screen reader content.
472
+ */
473
+ private renderAriaHtml;
474
+ /**
475
+ * Returns HTML for the hidden HTML5 select.
476
+ * @private
477
+ * @returns {html} - Returns HTML for the hidden HTML5 select.
478
+ */
479
+ private renderNativeSelect;
418
480
  /**
419
481
  * Returns HTML for the help text and error message.
420
482
  * @private
@@ -446,6 +508,5 @@ export class AuroSelect extends AuroElement {
446
508
  * @returns {void}
447
509
  */
448
510
  private renderLayout;
449
- renderBACKUP(): import("lit-html").TemplateResult;
450
511
  }
451
512
  import { AuroElement } from '../../layoutElement/src/auroElement.js';