@aurodesignsystem-dev/auro-formkit 0.0.0-pr785.0 → 0.0.0-pr785.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 (63) hide show
  1. package/components/checkbox/demo/api.html +16 -10
  2. package/components/checkbox/demo/api.min.js +2 -2
  3. package/components/checkbox/demo/index.html +16 -10
  4. package/components/checkbox/demo/index.min.js +2 -2
  5. package/components/checkbox/demo/readme.html +16 -9
  6. package/components/checkbox/dist/index.js +2 -2
  7. package/components/checkbox/dist/registered.js +2 -2
  8. package/components/combobox/demo/api.html +16 -10
  9. package/components/combobox/demo/api.min.js +13 -7
  10. package/components/combobox/demo/index.html +16 -10
  11. package/components/combobox/demo/index.min.js +13 -7
  12. package/components/combobox/demo/readme.html +16 -9
  13. package/components/combobox/dist/index.js +13 -7
  14. package/components/combobox/dist/registered.js +13 -7
  15. package/components/counter/demo/api.html +16 -10
  16. package/components/counter/demo/api.min.js +11 -5
  17. package/components/counter/demo/index.html +16 -10
  18. package/components/counter/demo/index.min.js +11 -5
  19. package/components/counter/demo/readme.html +16 -9
  20. package/components/counter/dist/index.js +11 -5
  21. package/components/counter/dist/registered.js +11 -5
  22. package/components/datepicker/demo/api.html +16 -10
  23. package/components/datepicker/demo/api.min.js +23 -7
  24. package/components/datepicker/demo/index.html +16 -10
  25. package/components/datepicker/demo/index.min.js +23 -7
  26. package/components/datepicker/demo/readme.html +16 -9
  27. package/components/datepicker/dist/index.js +23 -7
  28. package/components/datepicker/dist/registered.js +23 -7
  29. package/components/dropdown/demo/api.html +16 -10
  30. package/components/dropdown/demo/api.md +7 -6
  31. package/components/dropdown/demo/api.min.js +11 -5
  32. package/components/dropdown/demo/index.html +16 -10
  33. package/components/dropdown/demo/index.min.js +11 -5
  34. package/components/dropdown/demo/readme.html +16 -9
  35. package/components/dropdown/dist/auro-dropdown.d.ts +1 -0
  36. package/components/dropdown/dist/index.js +11 -5
  37. package/components/dropdown/dist/registered.js +11 -5
  38. package/components/form/demo/api.html +16 -9
  39. package/components/form/demo/autocomplete.html +19 -3
  40. package/components/form/demo/index.html +16 -9
  41. package/components/form/demo/readme.html +16 -9
  42. package/components/form/demo/working.html +19 -13
  43. package/components/input/demo/api.html +16 -10
  44. package/components/input/demo/api.min.js +2 -2
  45. package/components/input/demo/index.html +16 -10
  46. package/components/input/demo/index.min.js +2 -2
  47. package/components/input/demo/readme.html +16 -9
  48. package/components/input/dist/index.js +2 -2
  49. package/components/input/dist/registered.js +2 -2
  50. package/components/menu/demo/api.html +16 -32
  51. package/components/menu/demo/index.html +16 -10
  52. package/components/menu/demo/readme.html +16 -9
  53. package/components/radio/demo/api.html +16 -10
  54. package/components/radio/demo/index.html +16 -10
  55. package/components/radio/demo/readme.html +16 -9
  56. package/components/select/demo/api.html +16 -10
  57. package/components/select/demo/api.min.js +11 -5
  58. package/components/select/demo/index.html +16 -11
  59. package/components/select/demo/index.min.js +11 -5
  60. package/components/select/demo/readme.html +16 -9
  61. package/components/select/dist/index.js +11 -5
  62. package/components/select/dist/registered.js +11 -5
  63. package/package.json +3 -2
package/components/datepicker/dist/registered.js CHANGED
@@ -17592,6 +17592,9 @@ class AuroDropdown extends AuroElement$4 {
17592
17592
 
17593
17593
  this.parentBorder = false;
17594
17594
 
17595
+ /** @private */
17596
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
17597
+
17595
17598
  this.privateDefaults();
17596
17599
  }
17597
17600
 
@@ -18025,12 +18028,14 @@ class AuroDropdown extends AuroElement$4 {
18025
18028
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
18026
18029
  this.handleTriggerContentSlotChange();
18027
18030
  }
18031
+ }
18028
18032
 
18029
- if (changedProperties.has('isPopoverVisible')) {
18030
- this.updateFocusTrap();
18031
- if (!this.isPopoverVisible && this.hasFocus) {
18032
- this.trigger.focus();
18033
- }
18033
+ handleDropdownToggle(event) {
18034
+ this.updateFocusTrap();
18035
+ this.isPopoverVisible = event.detail.expanded;
18036
+ const eventType = event.detail.eventType || "unknown";
18037
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
18038
+ this.trigger.focus();
18034
18039
  }
18035
18040
  }
18036
18041
 
@@ -18038,6 +18043,7 @@ class AuroDropdown extends AuroElement$4 {
18038
18043
 
18039
18044
  // Configure the floater to, this will generate the ID for the bib
18040
18045
  this.floater.configure(this, 'auroDropdown');
18046
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
18041
18047
 
18042
18048
  /**
18043
18049
  * @description Let subscribers know that the dropdown ID ha been generated and added.
@@ -24014,9 +24020,9 @@ class BaseInput extends AuroElement$2 {
24014
24020
  if (!this.shadowRoot.contains(this.getActiveElement())) {
24015
24021
  this.validation.validate(this);
24016
24022
  }
24017
-
24018
- this.notifyValueChanged();
24019
24023
  }
24024
+
24025
+ this.notifyValueChanged();
24020
24026
  }
24021
24027
 
24022
24028
  if (changedProperties.has('error')) {
@@ -27650,6 +27656,15 @@ class AuroDatePicker extends AuroElement$1 {
27650
27656
  this.layout = 'classic';
27651
27657
  this.shape = 'classic';
27652
27658
  this.size = 'lg';
27659
+
27660
+ /**
27661
+ * @private
27662
+ * @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
27663
+ */
27664
+ this.constructor.shadowRootOptions = {
27665
+ ...LitElement.shadowRootOptions,
27666
+ delegatesFocus: true,
27667
+ };
27653
27668
  }
27654
27669
 
27655
27670
  // This function is to define props used within the scope of this component
@@ -28387,6 +28402,7 @@ class AuroDatePicker extends AuroElement$1 {
28387
28402
  }
28388
28403
 
28389
28404
  this.hasFocus = true;
28405
+ this.dropdown.show();
28390
28406
 
28391
28407
  // shadowroot active element is null if we focus the datepicker itself
28392
28408
  if (this.shadowRoot.activeElement === null) {
package/components/dropdown/demo/api.html CHANGED
@@ -16,18 +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-dropdown 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-dropdown</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-dropdown'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
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
- </head>
36
+ </head>
31
37
  <body class="auro-markdown">
32
38
  <main></main>
33
39
 
package/components/dropdown/demo/api.md CHANGED
@@ -35,12 +35,13 @@
35
35
 
36
36
  ## Methods
37
37
 
38
- | Method | Type | Description |
39
- |------------------|------------|--------------------------------------------------|
40
- | [exposeCssParts](#exposeCssParts) | `(): void` | Exposes CSS parts for styling from parent components. |
41
- | [focus](#focus) | `(): void` | When bib is open, focus on the first element inside of bib.<br />If not, trigger element will get focus. |
42
- | [hide](#hide) | `(): void` | Public method to hide the dropdown. |
43
- | [show](#show) | `(): void` | Public method to show the dropdown. |
38
+ | Method | Type | Description |
39
+ |------------------------|----------------------|--------------------------------------------------|
40
+ | [exposeCssParts](#exposeCssParts) | `(): void` | Exposes CSS parts for styling from parent components. |
41
+ | [focus](#focus) | `(): void` | When bib is open, focus on the first element inside of bib.<br />If not, trigger element will get focus. |
42
+ | [handleDropdownToggle](#handleDropdownToggle) | `(event: any): void` | |
43
+ | [hide](#hide) | `(): void` | Public method to hide the dropdown. |
44
+ | [show](#show) | `(): void` | Public method to show the dropdown. |
44
45
 
45
46
  ## Events
46
47
 
package/components/dropdown/demo/api.min.js CHANGED
@@ -3558,6 +3558,9 @@ class AuroDropdown extends AuroElement {
3558
3558
 
3559
3559
  this.parentBorder = false;
3560
3560
 
3561
+ /** @private */
3562
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3563
+
3561
3564
  this.privateDefaults();
3562
3565
  }
3563
3566
 
@@ -3991,12 +3994,14 @@ class AuroDropdown extends AuroElement {
3991
3994
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
3992
3995
  this.handleTriggerContentSlotChange();
3993
3996
  }
3997
+ }
3994
3998
 
3995
- if (changedProperties.has('isPopoverVisible')) {
3996
- this.updateFocusTrap();
3997
- if (!this.isPopoverVisible && this.hasFocus) {
3998
- this.trigger.focus();
3999
- }
3999
+ handleDropdownToggle(event) {
4000
+ this.updateFocusTrap();
4001
+ this.isPopoverVisible = event.detail.expanded;
4002
+ const eventType = event.detail.eventType || "unknown";
4003
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
4004
+ this.trigger.focus();
4000
4005
  }
4001
4006
  }
4002
4007
 
@@ -4004,6 +4009,7 @@ class AuroDropdown extends AuroElement {
4004
4009
 
4005
4010
  // Configure the floater to, this will generate the ID for the bib
4006
4011
  this.floater.configure(this, 'auroDropdown');
4012
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
4007
4013
 
4008
4014
  /**
4009
4015
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/dropdown/demo/index.html CHANGED
@@ -16,18 +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-dropdown 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-dropdown</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-dropdown'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
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
- </head>
36
+ </head>
31
37
  <body class="auro-markdown">
32
38
  <main></main>
33
39
 
package/components/dropdown/demo/index.min.js CHANGED
@@ -3533,6 +3533,9 @@ class AuroDropdown extends AuroElement {
3533
3533
 
3534
3534
  this.parentBorder = false;
3535
3535
 
3536
+ /** @private */
3537
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3538
+
3536
3539
  this.privateDefaults();
3537
3540
  }
3538
3541
 
@@ -3966,12 +3969,14 @@ class AuroDropdown extends AuroElement {
3966
3969
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
3967
3970
  this.handleTriggerContentSlotChange();
3968
3971
  }
3972
+ }
3969
3973
 
3970
- if (changedProperties.has('isPopoverVisible')) {
3971
- this.updateFocusTrap();
3972
- if (!this.isPopoverVisible && this.hasFocus) {
3973
- this.trigger.focus();
3974
- }
3974
+ handleDropdownToggle(event) {
3975
+ this.updateFocusTrap();
3976
+ this.isPopoverVisible = event.detail.expanded;
3977
+ const eventType = event.detail.eventType || "unknown";
3978
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
3979
+ this.trigger.focus();
3975
3980
  }
3976
3981
  }
3977
3982
 
@@ -3979,6 +3984,7 @@ class AuroDropdown extends AuroElement {
3979
3984
 
3980
3985
  // Configure the floater to, this will generate the ID for the bib
3981
3986
  this.floater.configure(this, 'auroDropdown');
3987
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
3982
3988
 
3983
3989
  /**
3984
3990
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/dropdown/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-dropdown 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-dropdown</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-dropdown'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/dropdown/dist/auro-dropdown.d.ts CHANGED
@@ -220,6 +220,7 @@ export class AuroDropdown extends AuroElement {
220
220
  shape: any;
221
221
  size: any;
222
222
  parentBorder: boolean;
223
+ handleDropdownToggle(event: any): void;
223
224
  /**
224
225
  * @private
225
226
  * @returns {object} Class definition for the wrapper element.
package/components/dropdown/dist/index.js CHANGED
@@ -3486,6 +3486,9 @@ class AuroDropdown extends AuroElement {
3486
3486
 
3487
3487
  this.parentBorder = false;
3488
3488
 
3489
+ /** @private */
3490
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3491
+
3489
3492
  this.privateDefaults();
3490
3493
  }
3491
3494
 
@@ -3919,12 +3922,14 @@ class AuroDropdown extends AuroElement {
3919
3922
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
3920
3923
  this.handleTriggerContentSlotChange();
3921
3924
  }
3925
+ }
3922
3926
 
3923
- if (changedProperties.has('isPopoverVisible')) {
3924
- this.updateFocusTrap();
3925
- if (!this.isPopoverVisible && this.hasFocus) {
3926
- this.trigger.focus();
3927
- }
3927
+ handleDropdownToggle(event) {
3928
+ this.updateFocusTrap();
3929
+ this.isPopoverVisible = event.detail.expanded;
3930
+ const eventType = event.detail.eventType || "unknown";
3931
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
3932
+ this.trigger.focus();
3928
3933
  }
3929
3934
  }
3930
3935
 
@@ -3932,6 +3937,7 @@ class AuroDropdown extends AuroElement {
3932
3937
 
3933
3938
  // Configure the floater to, this will generate the ID for the bib
3934
3939
  this.floater.configure(this, 'auroDropdown');
3940
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
3935
3941
 
3936
3942
  /**
3937
3943
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/dropdown/dist/registered.js CHANGED
@@ -3486,6 +3486,9 @@ class AuroDropdown extends AuroElement {
3486
3486
 
3487
3487
  this.parentBorder = false;
3488
3488
 
3489
+ /** @private */
3490
+ this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
3491
+
3489
3492
  this.privateDefaults();
3490
3493
  }
3491
3494
 
@@ -3919,12 +3922,14 @@ class AuroDropdown extends AuroElement {
3919
3922
  if (changedProperties.size === 0 || changedProperties.has('isPopoverVisible')) {
3920
3923
  this.handleTriggerContentSlotChange();
3921
3924
  }
3925
+ }
3922
3926
 
3923
- if (changedProperties.has('isPopoverVisible')) {
3924
- this.updateFocusTrap();
3925
- if (!this.isPopoverVisible && this.hasFocus) {
3926
- this.trigger.focus();
3927
- }
3927
+ handleDropdownToggle(event) {
3928
+ this.updateFocusTrap();
3929
+ this.isPopoverVisible = event.detail.expanded;
3930
+ const eventType = event.detail.eventType || "unknown";
3931
+ if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
3932
+ this.trigger.focus();
3928
3933
  }
3929
3934
  }
3930
3935
 
@@ -3932,6 +3937,7 @@ class AuroDropdown extends AuroElement {
3932
3937
 
3933
3938
  // Configure the floater to, this will generate the ID for the bib
3934
3939
  this.floater.configure(this, 'auroDropdown');
3940
+ this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
3935
3941
 
3936
3942
  /**
3937
3943
  * @description Let subscribers know that the dropdown ID ha been generated and added.
package/components/form/demo/api.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-form 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-form</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-form'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/form/demo/autocomplete.html CHANGED
@@ -1,9 +1,25 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
3
  <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1">
6
- <title>Demo page for auto-complete</title>
4
+ <meta charset="UTF-8" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Auro Web Component Demo | auro-form</title>
7
+
8
+ <!-- Prism.js Stylesheet -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
10
+
11
+ <!-- Legacy reference is still needed to support auro-form's use of legacy token values at this time -->
12
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
13
+
14
+ <!-- Design Token Alaska Theme -->
15
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
16
+
17
+ <!-- Webcore Stylesheet Alaska Theme -->
18
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
19
+
20
+ <!-- Demo Specific Styles -->
21
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
7
23
  </head>
8
24
  <body>
9
25
  <!-- EVERY AUTOCOMPLETE OPTION, auro inputs -->
package/components/form/demo/index.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-form 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-form</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-form'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/form/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-form 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-form</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-form'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/form/demo/working.html CHANGED
@@ -14,19 +14,25 @@
14
14
  <!DOCTYPE html>
15
15
  <html lang="en">
16
16
  <head>
17
- <meta charset="UTF-8" />
18
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
- <title>Auro Web Component Generator | auro-form 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">
27
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
28
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
29
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@8.2.0/dist/auro-button__bundled.js" type="module"></script>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-form</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-form'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 -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
30
36
  </head>
31
37
  <body class="auro-markdown">
32
38
  <main>
package/components/input/demo/api.html CHANGED
@@ -3,18 +3,24 @@
3
3
  <head>
4
4
  <meta charset="UTF-8" />
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
- <title>Auro Web Component Generator | auro-input custom element</title>
7
- <link
8
- rel="stylesheet"
9
- type="text/css"
10
- href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
11
- />
12
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
13
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
6
+ <title>Auro Web Component Demo | auro-input</title>
7
+
8
+ <!-- Prism.js Stylesheet -->
9
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
10
+
11
+ <!-- Legacy reference is still needed to support auro-input's use of legacy token values at this time -->
12
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
13
+
14
+ <!-- Design Token Alaska Theme -->
15
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
16
+
17
+ <!-- Webcore Stylesheet Alaska Theme -->
18
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
19
+
20
+ <!-- Demo Specific Styles -->
14
21
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
15
22
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
16
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
17
- </head>
23
+ </head>
18
24
  <body class="auro-markdown">
19
25
  <main></main>
20
26
 
package/components/input/demo/api.min.js CHANGED
@@ -5677,9 +5677,9 @@ class BaseInput extends AuroElement$2 {
5677
5677
  if (!this.shadowRoot.contains(this.getActiveElement())) {
5678
5678
  this.validation.validate(this);
5679
5679
  }
5680
-
5681
- this.notifyValueChanged();
5682
5680
  }
5681
+
5682
+ this.notifyValueChanged();
5683
5683
  }
5684
5684
 
5685
5685
  if (changedProperties.has('error')) {