@aurodesignsystem-dev/auro-formkit 0.0.0-pr1516.0 → 0.0.0-pr1519.0

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 (54) hide show
  1. package/components/checkbox/demo/customize.min.js +18 -10
  2. package/components/checkbox/demo/getting-started.min.js +18 -10
  3. package/components/checkbox/demo/index.min.js +18 -10
  4. package/components/checkbox/dist/index.js +18 -10
  5. package/components/checkbox/dist/registered.js +18 -10
  6. package/components/combobox/README.md +1 -1
  7. package/components/combobox/demo/customize.md +2 -10
  8. package/components/combobox/demo/customize.min.js +454 -467
  9. package/components/combobox/demo/getting-started.min.js +454 -463
  10. package/components/combobox/demo/index.md +1 -1
  11. package/components/combobox/demo/index.min.js +454 -463
  12. package/components/combobox/demo/keyboard-behavior.md +2 -142
  13. package/components/combobox/demo/readme.md +1 -1
  14. package/components/combobox/demo/why-combobox.md +2 -2
  15. package/components/combobox/dist/auro-combobox.d.ts +30 -14
  16. package/components/combobox/dist/index.js +454 -463
  17. package/components/combobox/dist/registered.js +454 -463
  18. package/components/counter/demo/customize.min.js +32 -12
  19. package/components/counter/demo/index.min.js +32 -12
  20. package/components/counter/dist/index.js +32 -12
  21. package/components/counter/dist/registered.js +32 -12
  22. package/components/datepicker/demo/customize.min.js +183 -167
  23. package/components/datepicker/demo/index.min.js +183 -167
  24. package/components/datepicker/dist/index.js +183 -167
  25. package/components/datepicker/dist/registered.js +183 -167
  26. package/components/dropdown/demo/customize.min.js +14 -2
  27. package/components/dropdown/demo/getting-started.min.js +14 -2
  28. package/components/dropdown/demo/index.min.js +14 -2
  29. package/components/dropdown/dist/index.js +14 -2
  30. package/components/dropdown/dist/registered.js +14 -2
  31. package/components/form/demo/customize.min.js +851 -829
  32. package/components/form/demo/getting-started.min.js +851 -829
  33. package/components/form/demo/index.min.js +851 -829
  34. package/components/form/demo/registerDemoDeps.min.js +851 -829
  35. package/components/input/demo/api.md +58 -57
  36. package/components/input/demo/customize.min.js +114 -155
  37. package/components/input/demo/getting-started.min.js +114 -155
  38. package/components/input/demo/index.min.js +114 -155
  39. package/components/input/dist/base-input.d.ts +9 -51
  40. package/components/input/dist/index.js +114 -155
  41. package/components/input/dist/registered.js +114 -155
  42. package/components/input/dist/utilities.d.ts +9 -0
  43. package/components/radio/demo/customize.min.js +18 -10
  44. package/components/radio/demo/getting-started.min.js +18 -10
  45. package/components/radio/demo/index.min.js +18 -10
  46. package/components/radio/dist/index.js +18 -10
  47. package/components/radio/dist/registered.js +18 -10
  48. package/components/select/demo/customize.min.js +32 -12
  49. package/components/select/demo/getting-started.min.js +32 -12
  50. package/components/select/demo/index.min.js +32 -12
  51. package/components/select/dist/index.js +32 -12
  52. package/components/select/dist/registered.js +32 -12
  53. package/custom-elements.json +142 -278
  54. package/package.json +1 -1
package/components/input/demo/api.md CHANGED
@@ -7,63 +7,64 @@ The `auro-input` element provides users a way to enter data into a text field.
7
7
 
8
8
  ## Properties
9
9
 
10
- | Property | Attribute | Modifiers | Type | Default | Description |
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. |
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]. |
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. |
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. |
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. |
26
- | `format` | `format` | | `string` | | Specifies the input mask format. |
27
- | `hasFocus` | | | `boolean` | | Flag to indicate if the input currently has focus. |
28
- | `hasValue` | | | `boolean` | false | Flag to indicate if the input currently has value. |
29
- | `icon` | `icon` | | `boolean` | false | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
30
- | `id` | `id` | | `string` | | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
31
- | `inputmode` | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
32
- | `lang` | `lang` | | `string` | | Defines the language of an element. |
33
- | `layout` | | | `string` | "classic" | |
34
- | `locale` | `locale` | | `string` | "en-US" | Defines the locale of an element.<br />Used for locale-specific formatting, such as date formats. |
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. |
37
- | `maxObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `max` for full date formats. |
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`. |
40
- | `minObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `min` for full date formats. |
41
- | `name` | `name` | | `string` | | Populates the `name` attribute on the input. |
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. |
45
- | `pattern` | `pattern` | | `string` | | Specifies a regular expression the form control's value should match. |
46
- | `placeholder` | `placeholder` | | `string` | | Define custom placeholder text. |
47
- | `readonly` | `readonly` | | `boolean` | | Makes the input read-only, but can be set programmatically. |
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
- | `setCustomValidityRangeOverflow` | `setCustomValidityRangeOverflow` | | `string` | | Custom help text message to display when validity = `rangeOverflow`. |
54
- | `setCustomValidityRangeUnderflow` | `setCustomValidityRangeUnderflow` | | `string` | | Custom help text message to display when validity = `rangeUnderflow`. |
55
- | `setCustomValidityTooLong` | `setCustomValidityTooLong` | | `string` | | Custom help text message to display when validity = `tooLong`. |
56
- | `setCustomValidityTooShort` | `setCustomValidityTooShort` | | `string` | | Custom help text message to display when validity = `tooShort`. |
57
- | `setCustomValidityValueMissing` | `setCustomValidityValueMissing` | | `string` | | Custom help text message to display when validity = `valueMissing`. |
58
- | `shape` | | | `string` | "classic" | |
59
- | `simple` | `simple` | | `boolean` | | Simple makes the input render without a border. |
60
- | `size` | | | `string` | "lg" | |
61
- | `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`. |
62
- | `type` | `type` | | `'text' \| 'password' \| 'email' \| 'credit-card' \| 'tel' \| 'number'` | "'text'" | Populates the `type` attribute on the input. |
63
- | `validateOnInput` | `validateOnInput` | | `boolean` | | Sets validation mode to re-eval with each input. |
64
- | `validity` | `validity` | | `string` | | Specifies the `validityState` this element is in. |
65
- | `value` | `value` | | `string` | "undefined" | Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.<br />The format for this property should be ISO for `date` type inputs. |
66
- | `valueObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `value` for full date formats. |
10
+ | Property | Attribute | Modifiers | Type | Default | Description |
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. |
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]. |
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. |
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. |
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. |
26
+ | `format` | `format` | | `string` | | Specifies the input mask format. |
27
+ | `hasFocus` | | | `boolean` | | Flag to indicate if the input currently has focus. |
28
+ | `hasValue` | | | `boolean` | false | Flag to indicate if the input currently has value. |
29
+ | `icon` | `icon` | | `boolean` | false | If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format. |
30
+ | `id` | `id` | | `string` | | The id global attribute defines an identifier (ID) which must be unique in the whole document. |
31
+ | `inputmode` | `inputmode` | | `string` | | Exposes inputmode attribute for input. |
32
+ | `lang` | `lang` | | `string` | | Defines the language of an element. |
33
+ | `layout` | | | `string` | "classic" | |
34
+ | `locale` | `locale` | | `string` | "en-US" | Defines the locale of an element.<br />Used for locale-specific formatting, such as date formats. |
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. |
37
+ | `maxObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `max` for full date formats. |
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`. |
40
+ | `minObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `min` for full date formats. |
41
+ | `name` | `name` | | `string` | | Populates the `name` attribute on the input. |
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. |
45
+ | `pattern` | `pattern` | | `string` | | Specifies a regular expression the form control's value should match. |
46
+ | `placeholder` | `placeholder` | | `string` | | Define custom placeholder text. |
47
+ | `readonly` | `readonly` | | `boolean` | | Makes the input read-only, but can be set programmatically. |
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" | |
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`. |
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. |
65
+ | `validity` | `validity` | | `string` | | Specifies the `validityState` this element is in. |
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 />The format for this property should be ISO for `date` type inputs. |
67
+ | `valueObject` | | readonly | `Date \| undefined` | | Read-only Date object representation of `value` for full date formats. |
67
68
 
68
69
  ## Methods
69
70