@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.11 → 0.0.0-pr624.111

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 +1244 -95
  6. package/components/bibtemplate/dist/registered.js +1244 -95
  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 +70 -45
  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 +70 -45
  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 +69 -44
  19. package/components/checkbox/dist/registered.js +69 -44
  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 +3283 -963
  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 +3283 -963
  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 +3024 -848
  31. package/components/combobox/dist/registered.js +3024 -848
  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 +3428 -777
  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 +3428 -777
  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 +3427 -776
  45. package/components/counter/dist/registered.js +3427 -776
  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 +7082 -3165
  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 +7082 -3165
  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 +14635 -10718
  59. package/components/datepicker/dist/popoverVersion.d.ts +1 -1
  60. package/components/datepicker/dist/registered.js +14635 -10718
  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 +452 -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 +452 -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 +451 -270
  71. package/components/dropdown/dist/registered.js +451 -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 +2 -4
  85. package/components/helptext/dist/registered.js +2 -4
  86. package/components/input/README.md +6 -2
  87. package/components/input/demo/api.html +16 -10
  88. package/components/input/demo/api.md +234 -136
  89. package/components/input/demo/api.min.js +1057 -299
  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 +1071 -313
  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 +36 -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 +1070 -312
  100. package/components/input/dist/registered.js +1070 -312
  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 +303 -64
  106. package/components/menu/demo/index.html +16 -10
  107. package/components/menu/demo/index.min.js +303 -64
  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 +288 -49
  113. package/components/menu/dist/registered.js +288 -49
  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 +93 -95
  118. package/components/radio/demo/index.html +16 -10
  119. package/components/radio/demo/index.min.js +93 -95
  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 +92 -94
  124. package/components/radio/dist/registered.js +92 -94
  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 +2284 -729
  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 +2286 -719
  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 +2178 -755
  137. package/components/select/dist/registered.js +2178 -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/input/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-input 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-input</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-input'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/input/demo/readme.md CHANGED
@@ -20,7 +20,7 @@ The following sections are editable by making changes to the following files:
20
20
  # Input
21
21
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
22
22
  <!-- The below content is automatically added from ./docs/partials/description.md -->
23
- Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helptext` for additional content support.
23
+ Use the `<auro-input>` custom element to create basic single-line text fields. Supports type `text`, `password`, and `email` with validation, required input, error states and a secondary `bordered` theme. Use the slots `label` and `helpText` for additional content support.
24
24
  <!-- AURO-GENERATED-CONTENT:END -->
25
25
  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
26
26
  <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
@@ -82,7 +82,11 @@ This configuration enables proper module resolution for the component's TypeScri
82
82
  <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
83
83
 
84
84
  ```html
85
- <auro-input bordered shape="rounded" size="lg"></auro-input>
85
+ <auro-input>
86
+ <span slot="ariaLabel.clear">Clear All</span>
87
+ <span slot="label">Label</span>
88
+ <span slot="helpText">Help Text</span>
89
+ </auro-input>
86
90
  ```
87
91
  <!-- AURO-GENERATED-CONTENT:END -->
88
92
 
package/components/input/dist/auro-input.d.ts CHANGED
@@ -25,16 +25,50 @@ export class AuroInput extends BaseInput {
25
25
  * @private
26
26
  */
27
27
  private iconTag;
28
+ /**
29
+ * Determines if the HTML input element should be visually hidden.
30
+ * Returns true when display value content exists without focus and has a value,
31
+ * or when the input has no value, is not focused, and has no placeholder text.
32
+ * @returns {boolean} - True if the input should be visually hidden, false otherwise.
33
+ * @private
34
+ */
35
+ private get inputHidden();
36
+ /**
37
+ * Determines if the input should display in a state with no focus or value indication.
38
+ * Returns true when the input has display content without focus and has a value,
39
+ * or when the input has no value and is not focused.
40
+ * @returns {boolean} - True if the input should show no focus or value state, false otherwise.
41
+ * @private
42
+ */
43
+ private get noFocusOrValue();
44
+ /**
45
+ * Whether the label is being hidden currently based on state.
46
+ * @returns {boolean} - Returns true if the label is hidden.
47
+ * @private
48
+ */
49
+ private get labelHidden();
50
+ /**
51
+ * Returns the label font class based on layout and visibility state.
52
+ * @private
53
+ * @returns {string} - The font class for the label.
54
+ */
55
+ private get labelFontClass();
56
+ /**
57
+ * Returns the input font class based on layout and visibility state.
58
+ * @private
59
+ * @returns {string} - The font class for the input.
60
+ */
61
+ private get inputFontClass();
28
62
  /**
29
63
  * Returns classmap configuration for html5 input labels in all layouts.
30
64
  * @private
31
- * @returns {void}
65
+ * @returns {Record<string, boolean>}
32
66
  */
33
67
  private get commonLabelClasses();
34
68
  /**
35
69
  * Returns classmap configuration for html5 inputs in all layouts.
36
70
  * @private
37
- * @returns {object} - Returns classmap.
71
+ * @returns {Record<string, boolean>} - Returns classmap.
38
72
  */
39
73
  private get commonInputClasses();
40
74
  /**
package/components/input/dist/base-input.d.ts CHANGED
@@ -4,14 +4,22 @@
4
4
  * @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
5
5
  * @attr id
6
6
  *
7
- * @slot helptext - Sets the help text displayed below the input.
7
+ * @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
8
+ * @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
9
+ * @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
10
+ * @slot helpText - Sets the help text displayed below the input.
8
11
  * @slot label - Sets the label text for the input.
12
+ * @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
13
+ * @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
9
14
  *
10
15
  * @csspart wrapper - Use for customizing the style of the root element
11
16
  * @csspart label - Use for customizing the style of the label element
12
17
  * @csspart helpText - Use for customizing the style of the helpText element
18
+ * @csspart input - Use for customizing the style of the input element
13
19
  * @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
14
20
  * @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
21
+ * @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
22
+ * @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
15
23
  * @event input - Event fires when the value of an `auro-input` has been changed.
16
24
  * @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
17
25
  */
@@ -22,7 +30,6 @@ export default class BaseInput extends AuroElement {
22
30
  */
23
31
  a11yRole: {
24
32
  type: StringConstructor;
25
- attribute: boolean;
26
33
  reflect: boolean;
27
34
  };
28
35
  /**
@@ -30,7 +37,6 @@ export default class BaseInput extends AuroElement {
30
37
  */
31
38
  a11yExpanded: {
32
39
  type: BooleanConstructor;
33
- attribute: boolean;
34
40
  reflect: boolean;
35
41
  };
36
42
  /**
@@ -38,7 +44,6 @@ export default class BaseInput extends AuroElement {
38
44
  */
39
45
  a11yControls: {
40
46
  type: StringConstructor;
41
- attribute: boolean;
42
47
  reflect: boolean;
43
48
  };
44
49
  /**
@@ -53,6 +58,7 @@ export default class BaseInput extends AuroElement {
53
58
  */
54
59
  autocapitalize: {
55
60
  type: StringConstructor;
61
+ reflect: boolean;
56
62
  };
57
63
  /**
58
64
  * An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported.
@@ -66,6 +72,7 @@ export default class BaseInput extends AuroElement {
66
72
  */
67
73
  autocorrect: {
68
74
  type: StringConstructor;
75
+ reflect: boolean;
69
76
  };
70
77
  /**
71
78
  * If set, disables the input.
@@ -104,7 +111,6 @@ export default class BaseInput extends AuroElement {
104
111
  /** Exposes inputmode attribute for input. */
105
112
  inputmode: {
106
113
  type: StringConstructor;
107
- attribute: boolean;
108
114
  reflect: boolean;
109
115
  };
110
116
  /**
@@ -112,6 +118,7 @@ export default class BaseInput extends AuroElement {
112
118
  */
113
119
  lang: {
114
120
  type: StringConstructor;
121
+ reflect: boolean;
115
122
  };
116
123
  /**
117
124
  * The maximum value allowed. This only applies for inputs with a type of `number` and all date formats.
@@ -124,6 +131,7 @@ export default class BaseInput extends AuroElement {
124
131
  */
125
132
  maxLength: {
126
133
  type: NumberConstructor;
134
+ reflect: boolean;
127
135
  };
128
136
  /**
129
137
  * The minimum value allowed. This only applies for inputs with a type of `number` and all date formats.
@@ -136,12 +144,22 @@ export default class BaseInput extends AuroElement {
136
144
  */
137
145
  minLength: {
138
146
  type: NumberConstructor;
147
+ reflect: boolean;
139
148
  };
140
149
  /**
141
150
  * Populates the `name` attribute on the input.
142
151
  */
143
152
  name: {
144
153
  type: StringConstructor;
154
+ reflect: boolean;
155
+ };
156
+ /**
157
+ * Sets styles for nested operation - removes borders, hides help + error text, and
158
+ * hides accents.
159
+ */
160
+ nested: {
161
+ type: BooleanConstructor;
162
+ reflect: boolean;
145
163
  };
146
164
  /**
147
165
  * If set, disables auto-validation on blur.
@@ -165,10 +183,11 @@ export default class BaseInput extends AuroElement {
165
183
  reflect: boolean;
166
184
  };
167
185
  /**
168
- * Define custom placeholder text, only supported by date input formats.
186
+ * Define custom placeholder text.
169
187
  */
170
188
  placeholder: {
171
189
  type: StringConstructor;
190
+ reflect: boolean;
172
191
  };
173
192
  /**
174
193
  * Makes the input read-only, but can be set programmatically.
@@ -244,6 +263,13 @@ export default class BaseInput extends AuroElement {
244
263
  setCustomValidityValueMissing: {
245
264
  type: StringConstructor;
246
265
  };
266
+ /**
267
+ * Simple makes the input render without a border.
268
+ */
269
+ simple: {
270
+ type: BooleanConstructor;
271
+ reflect: boolean;
272
+ };
247
273
  /**
248
274
  * Custom help text message for email type validity.
249
275
  */
@@ -255,6 +281,7 @@ export default class BaseInput extends AuroElement {
255
281
  */
256
282
  spellcheck: {
257
283
  type: StringConstructor;
284
+ reflect: boolean;
258
285
  };
259
286
  /**
260
287
  * Populates the `type` attribute on the input. Allowed values are `password`, `email`, `credit-card`, `date`, `tel` or `text`. If given value is not allowed or set, defaults to `text`.
@@ -315,8 +342,14 @@ export default class BaseInput extends AuroElement {
315
342
  onDark: boolean;
316
343
  required: boolean;
317
344
  setCustomValidityForType: string;
318
- shape: string;
319
- size: string;
345
+ /**
346
+ * @private
347
+ */
348
+ private shape;
349
+ /**
350
+ * @private
351
+ */
352
+ private size;
320
353
  /**
321
354
  * Internal Defaults.
322
355
  * @private
@@ -415,10 +448,9 @@ export default class BaseInput extends AuroElement {
415
448
  private handleClick;
416
449
  /**
417
450
  * Function to set element focus.
418
- * @private
419
451
  * @return {void}
420
452
  */
421
- private focus;
453
+ focus(): void;
422
454
  /**
423
455
  * Handles event of clearing input content by clicking the X icon.
424
456
  * @private
@@ -462,10 +494,14 @@ export default class BaseInput extends AuroElement {
462
494
  */
463
495
  validate(force?: boolean): void;
464
496
  /**
465
- * Resets component to initial state.
497
+ * Resets component to initial state, including resetting the touched state and validity.
466
498
  * @returns {void}
467
499
  */
468
500
  reset(): void;
501
+ /**
502
+ * Clears the input value.
503
+ */
504
+ clear(): void;
469
505
  /**
470
506
  * Sets configuration data used elsewhere based on the `type` attribute.
471
507
  * @private
package/components/input/dist/buttonVersion.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "9.3.0";
1
+ declare const _default: "11.0.0";
2
2
  export default _default;
package/components/input/dist/iconVersion.d.ts CHANGED
@@ -1,2 +1,2 @@
1
- declare const _default: "8.0.1";
1
+ declare const _default: "8.0.4";
2
2
  export default _default;