@aurodesignsystem-dev/auro-formkit 0.0.0-pr1594.2 → 0.0.0-pr1595.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 (83) hide show
  1. package/components/bibtemplate/dist/auro-bibtemplate.d.ts +11 -0
  2. package/components/bibtemplate/dist/index.js +13 -0
  3. package/components/bibtemplate/dist/registered.js +13 -0
  4. package/components/checkbox/demo/api.md +17 -11
  5. package/components/checkbox/demo/customize.min.js +23 -6
  6. package/components/checkbox/demo/getting-started.min.js +23 -6
  7. package/components/checkbox/demo/index.min.js +23 -6
  8. package/components/checkbox/dist/auro-checkbox-group.d.ts +8 -0
  9. package/components/checkbox/dist/auro-checkbox.d.ts +4 -0
  10. package/components/checkbox/dist/index.js +23 -6
  11. package/components/checkbox/dist/registered.js +23 -6
  12. package/components/combobox/demo/api.md +26 -18
  13. package/components/combobox/demo/customize.min.js +426 -126
  14. package/components/combobox/demo/getting-started.min.js +426 -126
  15. package/components/combobox/demo/index.min.js +426 -126
  16. package/components/combobox/dist/auro-combobox.d.ts +38 -21
  17. package/components/combobox/dist/index.js +338 -111
  18. package/components/combobox/dist/registered.js +338 -111
  19. package/components/counter/demo/api.md +34 -16
  20. package/components/counter/demo/customize.min.js +204 -64
  21. package/components/counter/demo/index.min.js +204 -64
  22. package/components/counter/dist/auro-counter-button.d.ts +4 -0
  23. package/components/counter/dist/auro-counter-group.d.ts +27 -4
  24. package/components/counter/dist/auro-counter.d.ts +7 -0
  25. package/components/counter/dist/index.js +204 -64
  26. package/components/counter/dist/registered.js +204 -64
  27. package/components/datepicker/demo/api.md +55 -49
  28. package/components/datepicker/demo/customize.min.js +515 -134
  29. package/components/datepicker/demo/index.min.js +515 -134
  30. package/components/datepicker/dist/auro-calendar-cell.d.ts +58 -4
  31. package/components/datepicker/dist/auro-calendar-month.d.ts +10 -4
  32. package/components/datepicker/dist/auro-calendar.d.ts +25 -6
  33. package/components/datepicker/dist/auro-datepicker.d.ts +70 -22
  34. package/components/datepicker/dist/index.js +515 -134
  35. package/components/datepicker/dist/registered.js +515 -134
  36. package/components/dropdown/demo/api.md +25 -22
  37. package/components/dropdown/demo/customize.min.js +107 -37
  38. package/components/dropdown/demo/getting-started.min.js +245 -82
  39. package/components/dropdown/demo/index.min.js +107 -37
  40. package/components/dropdown/dist/auro-dropdown.d.ts +34 -8
  41. package/components/dropdown/dist/auro-dropdownBib.d.ts +17 -5
  42. package/components/dropdown/dist/index.js +107 -37
  43. package/components/dropdown/dist/registered.js +107 -37
  44. package/components/form/demo/customize.min.js +1518 -466
  45. package/components/form/demo/getting-started.min.js +1518 -466
  46. package/components/form/demo/index.min.js +1518 -466
  47. package/components/form/demo/registerDemoDeps.min.js +1518 -466
  48. package/components/helptext/dist/auro-helptext.d.ts +8 -7
  49. package/components/helptext/dist/index.js +7 -2
  50. package/components/helptext/dist/registered.js +7 -2
  51. package/components/input/demo/api.md +30 -30
  52. package/components/input/demo/customize.min.js +138 -45
  53. package/components/input/demo/getting-started.min.js +138 -45
  54. package/components/input/demo/index.min.js +138 -45
  55. package/components/input/dist/base-input.d.ts +79 -25
  56. package/components/input/dist/index.js +138 -45
  57. package/components/input/dist/registered.js +138 -45
  58. package/components/layoutElement/dist/auroElement.d.ts +10 -17
  59. package/components/layoutElement/dist/index.js +20 -20
  60. package/components/layoutElement/dist/registered.js +20 -20
  61. package/components/menu/demo/api.md +31 -27
  62. package/components/menu/demo/index.min.js +108 -35
  63. package/components/menu/dist/auro-menu.d.ts +26 -21
  64. package/components/menu/dist/auro-menuoption.d.ts +27 -1
  65. package/components/menu/dist/index.js +108 -35
  66. package/components/menu/dist/registered.js +108 -35
  67. package/components/radio/demo/api.md +8 -7
  68. package/components/radio/demo/customize.min.js +21 -7
  69. package/components/radio/demo/getting-started.min.js +21 -7
  70. package/components/radio/demo/index.min.js +21 -7
  71. package/components/radio/dist/auro-radio-group.d.ts +8 -3
  72. package/components/radio/dist/auro-radio.d.ts +1 -0
  73. package/components/radio/dist/index.js +21 -7
  74. package/components/radio/dist/registered.js +21 -7
  75. package/components/select/demo/api.md +18 -15
  76. package/components/select/demo/customize.min.js +259 -79
  77. package/components/select/demo/getting-started.min.js +259 -79
  78. package/components/select/demo/index.min.js +259 -79
  79. package/components/select/dist/auro-select.d.ts +17 -0
  80. package/components/select/dist/index.js +171 -64
  81. package/components/select/dist/registered.js +171 -64
  82. package/custom-elements.json +1189 -1336
  83. package/package.json +1 -1
package/components/helptext/dist/auro-helptext.d.ts CHANGED
@@ -5,25 +5,24 @@ export class AuroHelpText extends LitElement {
5
5
  static get styles(): import("lit").CSSResult[];
6
6
  static get properties(): {
7
7
  /**
8
- * Defines whether the component will be on lighter or darker backgrounds.
9
- * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
8
+ * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
9
+ * @type {'default' | 'inverse'}
10
10
  * @default 'default'
11
11
  */
12
- appearance: {
13
- type: StringConstructor;
14
- reflect: boolean;
15
- };
12
+ appearance: "default" | "inverse";
16
13
  /**
17
14
  * @private
18
15
  */
19
16
  slotNodes: {
20
17
  type: BooleanConstructor;
18
+ attribute: string;
21
19
  };
22
20
  /**
23
21
  * @private
24
22
  */
25
23
  hasTextContent: {
26
24
  type: BooleanConstructor;
25
+ attribute: string;
27
26
  };
28
27
  /**
29
28
  * If declared, make font color red.
@@ -37,6 +36,7 @@ export class AuroHelpText extends LitElement {
37
36
  */
38
37
  onDark: {
39
38
  type: BooleanConstructor;
39
+ attribute: string;
40
40
  reflect: boolean;
41
41
  };
42
42
  };
@@ -50,7 +50,8 @@ export class AuroHelpText extends LitElement {
50
50
  */
51
51
  static register(name?: string): void;
52
52
  error: boolean;
53
- appearance: string;
53
+ /** @type {'default' | 'inverse'} */
54
+ appearance: "default" | "inverse";
54
55
  onDark: boolean;
55
56
  hasTextContent: boolean;
56
57
  updated(): void;
package/components/helptext/dist/index.js CHANGED
@@ -102,6 +102,8 @@ class AuroHelpText extends LitElement {
102
102
  super();
103
103
 
104
104
  this.error = false;
105
+
106
+ /** @type {'default' | 'inverse'} */
105
107
  this.appearance = "default";
106
108
  this.onDark = false;
107
109
  this.hasTextContent = false;
@@ -122,8 +124,8 @@ class AuroHelpText extends LitElement {
122
124
  return {
123
125
 
124
126
  /**
125
- * Defines whether the component will be on lighter or darker backgrounds.
126
- * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
127
+ * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
128
+ * @type {'default' | 'inverse'}
127
129
  * @default 'default'
128
130
  */
129
131
  appearance: {
@@ -136,6 +138,7 @@ class AuroHelpText extends LitElement {
136
138
  */
137
139
  slotNodes: {
138
140
  type: Boolean,
141
+ attribute: 'slotnodes',
139
142
  },
140
143
 
141
144
  /**
@@ -143,6 +146,7 @@ class AuroHelpText extends LitElement {
143
146
  */
144
147
  hasTextContent: {
145
148
  type: Boolean,
149
+ attribute: 'hastextcontent',
146
150
  },
147
151
 
148
152
  /**
@@ -158,6 +162,7 @@ class AuroHelpText extends LitElement {
158
162
  */
159
163
  onDark: {
160
164
  type: Boolean,
165
+ attribute: 'ondark',
161
166
  reflect: true
162
167
  }
163
168
  };
package/components/helptext/dist/registered.js CHANGED
@@ -102,6 +102,8 @@ class AuroHelpText extends LitElement {
102
102
  super();
103
103
 
104
104
  this.error = false;
105
+
106
+ /** @type {'default' | 'inverse'} */
105
107
  this.appearance = "default";
106
108
  this.onDark = false;
107
109
  this.hasTextContent = false;
@@ -122,8 +124,8 @@ class AuroHelpText extends LitElement {
122
124
  return {
123
125
 
124
126
  /**
125
- * Defines whether the component will be on lighter or darker backgrounds.
126
- * @property {'default', 'inverse'} - The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
127
+ * The appearance of the help text, either default (for light backgrounds) or inverse (for dark backgrounds).
128
+ * @type {'default' | 'inverse'}
127
129
  * @default 'default'
128
130
  */
129
131
  appearance: {
@@ -136,6 +138,7 @@ class AuroHelpText extends LitElement {
136
138
  */
137
139
  slotNodes: {
138
140
  type: Boolean,
141
+ attribute: 'slotnodes',
139
142
  },
140
143
 
141
144
  /**
@@ -143,6 +146,7 @@ class AuroHelpText extends LitElement {
143
146
  */
144
147
  hasTextContent: {
145
148
  type: Boolean,
149
+ attribute: 'hastextcontent',
146
150
  },
147
151
 
148
152
  /**
@@ -158,6 +162,7 @@ class AuroHelpText extends LitElement {
158
162
  */
159
163
  onDark: {
160
164
  type: Boolean,
165
+ attribute: 'ondark',
161
166
  reflect: true
162
167
  }
163
168
  };
package/components/input/demo/api.md CHANGED
@@ -9,20 +9,20 @@ The `auro-input` element provides users a way to enter data into a text field.
9
9
 
10
10
  | Property | Attribute | Modifiers | Type | Default | Description |
11
11
  |------------------------------------|------------------------------------|-----------|--------------------------------------------------|-------------|--------------------------------------------------|
12
- | `a11yActivedescendant` | `a11yActivedescendant` | | `string` | | The value for the aria-activedescendant attribute.<br />Points to the ID of the currently active/highlighted option in a listbox. |
13
- | `a11yControls` | `a11yControls` | | `string` | | The value for the aria-controls attribute. |
14
- | `a11yExpanded` | `a11yExpanded` | | `boolean` | | The value for the aria-expanded attribute. |
15
- | `a11yRole` | `a11yRole` | | `string` | | The value for the role attribute. |
16
- | `activeLabel` | `activeLabel` | | `boolean` | false | If set, the label will remain fixed in the active position.<br />Only applies to the classic/default layout; the emphasized and snowflake<br />layouts always render the label inside the field, so this has no effect there. |
12
+ | `a11yActivedescendant` | `a11yactivedescendant` | | `string` | | The value for the aria-activedescendant attribute.<br />Points to the ID of the currently active/highlighted option in a listbox. |
13
+ | `a11yControls` | `a11ycontrols` | | `string` | | The value for the aria-controls attribute. |
14
+ | `a11yExpanded` | `a11yexpanded` | | `boolean` | | The value for the aria-expanded attribute. |
15
+ | `a11yRole` | `a11yrole` | | `string` | | The value for the role attribute. |
16
+ | `activeLabel` | `activelabel` | | `boolean` | false | If set, the label will remain fixed in the active position.<br />Only applies to the classic/default layout; the emphasized and snowflake<br />layouts always render the label inside the field, so this has no effect there. |
17
17
  | `appearance` | `appearance` | | `'default' \| 'inverse'` | "'default'" | Defines whether the component will be on lighter or darker backgrounds. |
18
- | `autocapitalize` | `autocapitalize` | | `string` | | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters]. |
18
+ | `autocapitalize` | `autocapitalize` | | `'off' \| 'none' \| 'on' \| 'sentences' \| 'words' \| 'characters'` | | An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. |
19
19
  | `autocomplete` | `autocomplete` | | `string` | | An enumerated attribute that defines what the user agent can suggest for autofill. At this time, only `autocomplete="off"` is supported. |
20
- | `autocorrect` | `autocorrect` | | `string` | | When set to `off`, stops iOS from auto-correcting words when typed into a text box. |
21
- | `customValidityTypeEmail` | `customValidityTypeEmail` | | `string` | | Custom help text message for email type validity. |
20
+ | `autocorrect` | `autocorrect` | | `'on' \| 'off'` | | When set to `off`, stops iOS from auto-correcting words when typed into a text box. |
21
+ | `customValidityTypeEmail` | `customvaliditytypeemail` | | `string` | | Custom help text message for email type validity. |
22
22
  | `disabled` | `disabled` | | `boolean` | false | If set, disables the input. |
23
- | `dvInputOnly` | `dvInputOnly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
23
+ | `dvInputOnly` | `dvinputonly` | | `boolean` | false | If defined, the display value slot content will only mask the HTML5 input element. The input's label will not be masked. |
24
24
  | `error` | `error` | | `string` | | When defined, sets persistent validity to `customError` and sets `setCustomValidity` = attribute value. |
25
- | `errorMessage` | `errorMessage` | | `string` | | Contains the help text message for the current validity error. |
25
+ | `errorMessage` | `errormessage` | | `string` | | Contains the help text message for the current validity error. |
26
26
  | `format` | `format` | | `string` | | Specifies the input mask format. |
27
27
  | `hasFocus` | | | `boolean` | | Flag to indicate if the input currently has focus. |
28
28
  | `hasValue` | | | `boolean` | false | Flag to indicate if the input currently has value. |
@@ -30,38 +30,38 @@ The `auro-input` element provides users a way to enter data into a text field.
30
30
  | `id` | `id` | | `string` | | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
31
31
  | `inputmode` | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
32
32
  | `lang` | `lang` | | `string` | | Defines the language of an element. |
33
- | `layout` | | | `string` | "classic" | |
33
+ | `layout` | `layout` | | `'classic' \| 'emphasized' \| 'emphasized-left' \| 'emphasized-right' \| 'snowflake' \| 'snowflake-left' \| 'snowflake-right'` | "'classic'" | Sets the layout variant of the input. |
34
34
  | `locale` | `locale` | | `string` | "en-US" | Defines the locale of an element.<br />Used for locale-specific formatting, such as date formats. |
35
35
  | `max` | `max` | | `string` | "undefined" | The maximum value allowed. This only applies for inputs with a type of `number` and ISO format. |
36
- | `maxLength` | `maxLength` | | `number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.<br />**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers. |
36
+ | `maxLength` | `maxlength` | | `number` | "undefined" | The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.<br />**Note**: This attribute is not intended to be used with a `type` or `format` that already has a defined length, such as credit-cards, dates or phone numbers. |
37
37
  | `maxObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `max` for full date formats. |
38
38
  | `min` | `min` | | `string` | "undefined" | The minimum value allowed. This only applies for inputs with a type of `number` and ISO date format. |
39
- | `minLength` | `minLength` | | `number` | "undefined" | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
39
+ | `minLength` | `minlength` | | `number` | "undefined" | The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`. |
40
40
  | `minObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `min` for full date formats. |
41
41
  | `name` | `name` | | `string` | | Populates the `name` attribute on the input. |
42
42
  | `nested` | `nested` | | `boolean` | | Sets styles for nested operation - removes borders, hides help + error text, and<br />hides accents. |
43
- | `noValidate` | `noValidate` | | `boolean` | false | If set, disables auto-validation on blur. |
44
- | `onDark` | `onDark` | | `boolean` | false | DEPRECATED - use `appearance="inverse"` instead. |
43
+ | `noValidate` | `novalidate` | | `boolean` | false | If set, disables auto-validation on blur. |
44
+ | `onDark` | `ondark` | | `boolean` | false | DEPRECATED - use `appearance="inverse"` instead. |
45
45
  | `pattern` | `pattern` | | `string` | | Specifies a regular expression the form control's value should match. |
46
46
  | `placeholder` | `placeholder` | | `string` | | Define custom placeholder text. |
47
47
  | `readonly` | `readonly` | | `boolean` | | Makes the input read-only, but can be set programmatically. |
48
48
  | `required` | `required` | | `boolean` | false | Populates the `required` attribute on the input. Used for client-side validation. |
49
- | `setCustomValidity` | `setCustomValidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
50
- | `setCustomValidityBadInput` | `setCustomValidityBadInput` | | `string` | | Custom help text message to display when validity = `badInput`. |
51
- | `setCustomValidityCustomError` | `setCustomValidityCustomError` | | `string` | | Custom help text message to display when validity = `customError`. |
52
- | `setCustomValidityForType` | `setCustomValidityForType` | | `string` | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
53
- | `setCustomValidityPatternMismatch` | `setCustomValidityPatternMismatch` | | `string` | | Custom help text message to display when validity = `patternMismatch`. |
54
- | `setCustomValidityRangeOverflow` | `setCustomValidityRangeOverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
55
- | `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
56
- | `setCustomValidityTooLong` | `setCustomValidityTooLong` | | `string` | | Custom help text message to display when validity = `tooLong`. |
57
- | `setCustomValidityTooShort` | `setCustomValidityTooShort` | | `string` | | Custom help text message to display when validity = `tooShort`. |
58
- | `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
59
- | `shape` | | | `string` | "classic" | |
49
+ | `setCustomValidity` | `setcustomvalidity` | | `string` | | Sets a custom help text message to display for all validityStates. |
50
+ | `setCustomValidityBadInput` | `setcustomvaliditybadinput` | | `string` | | Custom help text message to display when validity = `badInput`. |
51
+ | `setCustomValidityCustomError` | `setcustomvaliditycustomerror` | | `string` | | Custom help text message to display when validity = `customError`. |
52
+ | `setCustomValidityForType` | `setcustomvalidityfortype` | | `string` | "undefined" | Custom help text message to display for the declared element `type` and type validity fails. |
53
+ | `setCustomValidityPatternMismatch` | `setcustomvaliditypatternmismatch` | | `string` | | Custom help text message to display when validity = `patternMismatch`. |
54
+ | `setCustomValidityRangeOverflow` | `setcustomvalidityrangeoverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
55
+ | `setCustomValidityRangeUnderflow` | `setcustomvalidityrangeunderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
56
+ | `setCustomValidityTooLong` | `setcustomvaliditytoolong` | | `string` | | Custom help text message to display when validity = `tooLong`. |
57
+ | `setCustomValidityTooShort` | `setcustomvaliditytooshort` | | `string` | | Custom help text message to display when validity = `tooShort`. |
58
+ | `setCustomValidityValueMissing` | `setcustomvalidityvaluemissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
59
+ | `shape` | `shape` | | `'box' \| 'classic' \| 'pill' \| 'pill-left' \| 'pill-right' \| 'rounded' \| 'snowflake'` | "'classic'" | Sets the shape of the input. |
60
60
  | `simple` | `simple` | | `boolean` | | Simple makes the input render without a border. |
61
- | `size` | | | `string` | "lg" | |
62
- | `spellcheck` | `spellcheck` | | `string` | | An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
61
+ | `size` | `size` | | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'` | "'lg'" | Sets the size of the input. |
62
+ | `spellcheck` | `spellcheck` | | `'true' \| 'false'` | | An enumerated attribute defines whether the element may be checked for spelling errors. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`. |
63
63
  | `type` | `type` | | `'text' \| 'password' \| 'email' \| 'credit-card' \| 'tel' \| 'number' \| 'date'` | "'text'" | Populates the `type` attribute on the input. |
64
- | `validateOnInput` | `validateOnInput` | | `boolean` | | Sets validation mode to re-eval with each input. |
64
+ | `validateOnInput` | `validateoninput` | | `boolean` | | Sets validation mode to re-eval with each input. |
65
65
  | `validity` | `validity` | | `string` | | Specifies the `validityState` this element is in. |
66
66
  | `value` | `value` | | `string` | "undefined" | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.<br />For `date` type inputs using a full date format (year/month/day), the `value` should be ISO (YYYY-MM-DD). Partial date formats use the display format. |
67
67
  | `valueObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `value` for full date formats. |
@@ -80,7 +80,7 @@ The `auro-input` element provides users a way to enter data into a text field.
80
80
  | Event | Type | Description |
81
81
  |-----------------------------|--------------------|--------------------------------------------------|
82
82
  | `auroFormElement-validated` | | Notifies that the `validity` and `errorMessage` value has changed. |
83
- | `auroInput-validityChange` | `CustomEvent<any>` | |
83
+ | `auroInput-validityChange` | `CustomEvent<any>` | Notifies that the `validity` state of the input has changed. |
84
84
  | `input` | `InputEvent` | Event fires when the value of an `auro-input` has been changed. |
85
85
 
86
86
  ## Slots