@aurodesignsystem-dev/auro-formkit 0.0.0-pr784.0 → 0.0.0-pr785.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 (71) hide show
  1. package/components/checkbox/demo/api.html +10 -16
  2. package/components/checkbox/demo/api.min.js +7 -18
  3. package/components/checkbox/demo/index.html +10 -16
  4. package/components/checkbox/demo/index.min.js +7 -18
  5. package/components/checkbox/demo/readme.html +9 -16
  6. package/components/checkbox/dist/index.js +7 -18
  7. package/components/checkbox/dist/registered.js +7 -18
  8. package/components/combobox/demo/api.html +10 -16
  9. package/components/combobox/demo/api.md +0 -1
  10. package/components/combobox/demo/api.min.js +20 -58
  11. package/components/combobox/demo/index.html +10 -16
  12. package/components/combobox/demo/index.min.js +20 -58
  13. package/components/combobox/demo/readme.html +9 -16
  14. package/components/combobox/dist/auro-combobox.d.ts +0 -5
  15. package/components/combobox/dist/index.js +20 -58
  16. package/components/combobox/dist/registered.js +20 -58
  17. package/components/counter/demo/api.html +10 -16
  18. package/components/counter/demo/api.min.js +8 -19
  19. package/components/counter/demo/index.html +10 -16
  20. package/components/counter/demo/index.min.js +8 -19
  21. package/components/counter/demo/readme.html +9 -16
  22. package/components/counter/dist/index.js +8 -19
  23. package/components/counter/dist/registered.js +8 -19
  24. package/components/datepicker/demo/api.html +10 -16
  25. package/components/datepicker/demo/api.md +1 -2
  26. package/components/datepicker/demo/api.min.js +68 -58
  27. package/components/datepicker/demo/index.html +10 -16
  28. package/components/datepicker/demo/index.min.js +68 -58
  29. package/components/datepicker/demo/readme.html +9 -16
  30. package/components/datepicker/dist/auro-datepicker.d.ts +18 -6
  31. package/components/datepicker/dist/index.js +68 -58
  32. package/components/datepicker/dist/registered.js +68 -58
  33. package/components/dropdown/demo/api.html +10 -16
  34. package/components/dropdown/demo/api.min.js +3 -3
  35. package/components/dropdown/demo/index.html +10 -16
  36. package/components/dropdown/demo/index.min.js +3 -3
  37. package/components/dropdown/demo/readme.html +9 -16
  38. package/components/dropdown/dist/index.js +3 -3
  39. package/components/dropdown/dist/registered.js +3 -3
  40. package/components/form/demo/api.html +9 -16
  41. package/components/form/demo/autocomplete.html +3 -19
  42. package/components/form/demo/index.html +9 -16
  43. package/components/form/demo/readme.html +9 -16
  44. package/components/form/demo/working.html +13 -19
  45. package/components/input/demo/api.html +10 -16
  46. package/components/input/demo/api.md +1 -2
  47. package/components/input/demo/api.min.js +9 -27
  48. package/components/input/demo/index.html +10 -16
  49. package/components/input/demo/index.min.js +9 -27
  50. package/components/input/demo/readme.html +9 -16
  51. package/components/input/dist/base-input.d.ts +1 -5
  52. package/components/input/dist/index.js +9 -27
  53. package/components/input/dist/registered.js +9 -27
  54. package/components/menu/demo/api.html +32 -16
  55. package/components/menu/demo/index.html +10 -16
  56. package/components/menu/demo/readme.html +9 -16
  57. package/components/radio/demo/api.html +10 -16
  58. package/components/radio/demo/api.min.js +5 -16
  59. package/components/radio/demo/index.html +10 -16
  60. package/components/radio/demo/index.min.js +5 -16
  61. package/components/radio/demo/readme.html +9 -16
  62. package/components/radio/dist/index.js +5 -16
  63. package/components/radio/dist/registered.js +5 -16
  64. package/components/select/demo/api.html +10 -16
  65. package/components/select/demo/api.min.js +8 -19
  66. package/components/select/demo/index.html +11 -16
  67. package/components/select/demo/index.min.js +8 -19
  68. package/components/select/demo/readme.html +9 -16
  69. package/components/select/dist/index.js +8 -19
  70. package/components/select/dist/registered.js +8 -19
  71. package/package.json +3 -4
package/components/input/dist/registered.js CHANGED
@@ -4696,24 +4696,13 @@ class AuroFormValidation {
4696
4696
  this.getInputElements(elem);
4697
4697
  this.getAuroInputs(elem);
4698
4698
 
4699
- // Check if validation should run
4699
+ // Validate only if noValidate is not true and the input does not have focus
4700
4700
  let validationShouldRun =
4701
-
4702
- // If the validation was forced
4703
4701
  force ||
4704
-
4705
- // If the validation should run on input
4706
- elem.validateOnInput ||
4707
-
4708
- // State-based checks
4709
- (
4710
- // Element is not currently focused
4711
- !elem.contains(document.activeElement) && // native input is not focused directly
4712
- !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
4713
-
4714
- // And element has been touched or is untouched but has a value
4715
- ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
4716
- );
4702
+ (!elem.contains(document.activeElement) &&
4703
+ (elem.touched ||
4704
+ (!elem.touched && typeof elem.value !== "undefined"))) ||
4705
+ elem.validateOnInput;
4717
4706
 
4718
4707
  if (elem.hasAttribute('error')) {
4719
4708
  elem.validity = 'customError';
@@ -5537,9 +5526,9 @@ class BaseInput extends AuroElement$2 {
5537
5526
  if (!this.shadowRoot.contains(this.getActiveElement())) {
5538
5527
  this.validation.validate(this);
5539
5528
  }
5540
- }
5541
5529
 
5542
- this.notifyValueChanged();
5530
+ this.notifyValueChanged();
5531
+ }
5543
5532
  }
5544
5533
 
5545
5534
  if (changedProperties.has('error')) {
@@ -5664,9 +5653,9 @@ class BaseInput extends AuroElement$2 {
5664
5653
  this.inputElement.value = "";
5665
5654
  this.value = "";
5666
5655
  this.labelElement.classList.remove('inputElement-label--sticky');
5667
- this.notifyValueChanged();
5668
5656
  this.focus();
5669
5657
  this.validation.validate(this);
5658
+ this.notifyValueChanged();
5670
5659
  }
5671
5660
 
5672
5661
  /**
@@ -5761,20 +5750,13 @@ class BaseInput extends AuroElement$2 {
5761
5750
  }
5762
5751
 
5763
5752
  /**
5764
- * Resets component to initial state, including resetting the touched state and validity.
5753
+ * Resets component to initial state.
5765
5754
  * @returns {void}
5766
5755
  */
5767
5756
  reset() {
5768
5757
  this.validation.reset(this);
5769
5758
  }
5770
5759
 
5771
- /**
5772
- * Clears the input value
5773
- */
5774
- clear() {
5775
- this.value = undefined;
5776
- }
5777
-
5778
5760
  /**
5779
5761
  * Sets configuration data used elsewhere based on the `type` attribute.
5780
5762
  * @private
package/components/menu/demo/api.html CHANGED
@@ -16,24 +16,40 @@
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 Demo | auro-menu</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-menu'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 -->
19
+ <title>Auro Web Component Generator | auro-menu 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">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ <style>
31
+ header {
32
+ background: lightgray;
33
+ position: fixed;
34
+ bottom: 0;
35
+ right: 0;
36
+ z-index: 10;
37
+ }
38
+ </style>
39
+ <script>
40
+ function onRadioInput(event) {
41
+ if (event.constructor.name === 'CustomEvent') {
42
+ const group = event.target.getAttribute('name');
43
+ const menus = document.querySelectorAll('auro-menu');
44
+ if (menus) {
45
+ menus.forEach((menu) => {
46
+ menu.setAttribute(group, event.target.value);
47
+ });
48
+ }
49
+ };
50
+ }
51
+ </script>
52
+ </head>
37
53
  <body class="auro-markdown">
38
54
  <header oninput="onRadioInput(event)">
39
55
  <auro-radio-group required horizontal name="shape">
package/components/menu/demo/index.html CHANGED
@@ -16,24 +16,18 @@
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 Demo | auro-menu</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-menu'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 -->
19
+ <title>Auro Web Component Generator | auro-menu 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">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ </head>
37
31
  <body class="auro-markdown">
38
32
  <main></main>
39
33
 
package/components/menu/demo/readme.html CHANGED
@@ -16,24 +16,17 @@
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 Demo | auro-menu</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-menu'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 -->
19
+ <title>Auro Web Component Generator | auro-menu 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">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ </head>
37
30
  <body class="auro-markdown">
38
31
  <main></main>
39
32
 
package/components/radio/demo/api.html CHANGED
@@ -15,24 +15,18 @@
15
15
  <head>
16
16
  <meta charset="UTF-8" />
17
17
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
18
- <title>Auro Web Component Demo | auro-radio</title>
19
-
20
- <!-- Prism.js Stylesheet -->
21
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
22
-
23
- <!-- Legacy reference is still needed to support auro-radio's use of legacy token values at this time -->
24
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
25
-
26
- <!-- Design Token Alaska Theme -->
27
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
28
-
29
- <!-- Webcore Stylesheet Alaska Theme -->
30
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
31
-
32
- <!-- Demo Specific Styles -->
18
+ <title>Auro Web Component Generator | auro-radio custom element</title>
19
+ <link
20
+ rel="stylesheet"
21
+ type="text/css"
22
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
23
+ />
24
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
33
26
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
35
- </head>
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
29
+ </head>
36
30
  <body class="auro-markdown">
37
31
  <main></main>
38
32
 
package/components/radio/demo/api.min.js CHANGED
@@ -1082,24 +1082,13 @@ class AuroFormValidation {
1082
1082
  this.getInputElements(elem);
1083
1083
  this.getAuroInputs(elem);
1084
1084
 
1085
- // Check if validation should run
1085
+ // Validate only if noValidate is not true and the input does not have focus
1086
1086
  let validationShouldRun =
1087
-
1088
- // If the validation was forced
1089
1087
  force ||
1090
-
1091
- // If the validation should run on input
1092
- elem.validateOnInput ||
1093
-
1094
- // State-based checks
1095
- (
1096
- // Element is not currently focused
1097
- !elem.contains(document.activeElement) && // native input is not focused directly
1098
- !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
1099
-
1100
- // And element has been touched or is untouched but has a value
1101
- ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
1102
- );
1088
+ (!elem.contains(document.activeElement) &&
1089
+ (elem.touched ||
1090
+ (!elem.touched && typeof elem.value !== "undefined"))) ||
1091
+ elem.validateOnInput;
1103
1092
 
1104
1093
  if (elem.hasAttribute('error')) {
1105
1094
  elem.validity = 'customError';
package/components/radio/demo/index.html CHANGED
@@ -16,24 +16,18 @@
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 Demo | auro-radio</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-radio'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 -->
19
+ <title>Auro Web Component Generator | auro-radio 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">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ </head>
37
31
  <body class="auro-markdown">
38
32
  <main></main>
39
33
 
package/components/radio/demo/index.min.js CHANGED
@@ -1057,24 +1057,13 @@ class AuroFormValidation {
1057
1057
  this.getInputElements(elem);
1058
1058
  this.getAuroInputs(elem);
1059
1059
 
1060
- // Check if validation should run
1060
+ // Validate only if noValidate is not true and the input does not have focus
1061
1061
  let validationShouldRun =
1062
-
1063
- // If the validation was forced
1064
1062
  force ||
1065
-
1066
- // If the validation should run on input
1067
- elem.validateOnInput ||
1068
-
1069
- // State-based checks
1070
- (
1071
- // Element is not currently focused
1072
- !elem.contains(document.activeElement) && // native input is not focused directly
1073
- !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
1074
-
1075
- // And element has been touched or is untouched but has a value
1076
- ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
1077
- );
1063
+ (!elem.contains(document.activeElement) &&
1064
+ (elem.touched ||
1065
+ (!elem.touched && typeof elem.value !== "undefined"))) ||
1066
+ elem.validateOnInput;
1078
1067
 
1079
1068
  if (elem.hasAttribute('error')) {
1080
1069
  elem.validity = 'customError';
package/components/radio/demo/readme.html CHANGED
@@ -16,24 +16,17 @@
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 Demo | auro-radio</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-radio'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 -->
19
+ <title>Auro Web Component Generator | auro-radio 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">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ </head>
37
30
  <body class="auro-markdown">
38
31
  <main></main>
39
32
 
package/components/radio/dist/index.js CHANGED
@@ -1010,24 +1010,13 @@ class AuroFormValidation {
1010
1010
  this.getInputElements(elem);
1011
1011
  this.getAuroInputs(elem);
1012
1012
 
1013
- // Check if validation should run
1013
+ // Validate only if noValidate is not true and the input does not have focus
1014
1014
  let validationShouldRun =
1015
-
1016
- // If the validation was forced
1017
1015
  force ||
1018
-
1019
- // If the validation should run on input
1020
- elem.validateOnInput ||
1021
-
1022
- // State-based checks
1023
- (
1024
- // Element is not currently focused
1025
- !elem.contains(document.activeElement) && // native input is not focused directly
1026
- !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
1027
-
1028
- // And element has been touched or is untouched but has a value
1029
- ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
1030
- );
1016
+ (!elem.contains(document.activeElement) &&
1017
+ (elem.touched ||
1018
+ (!elem.touched && typeof elem.value !== "undefined"))) ||
1019
+ elem.validateOnInput;
1031
1020
 
1032
1021
  if (elem.hasAttribute('error')) {
1033
1022
  elem.validity = 'customError';
package/components/radio/dist/registered.js CHANGED
@@ -1010,24 +1010,13 @@ class AuroFormValidation {
1010
1010
  this.getInputElements(elem);
1011
1011
  this.getAuroInputs(elem);
1012
1012
 
1013
- // Check if validation should run
1013
+ // Validate only if noValidate is not true and the input does not have focus
1014
1014
  let validationShouldRun =
1015
-
1016
- // If the validation was forced
1017
1015
  force ||
1018
-
1019
- // If the validation should run on input
1020
- elem.validateOnInput ||
1021
-
1022
- // State-based checks
1023
- (
1024
- // Element is not currently focused
1025
- !elem.contains(document.activeElement) && // native input is not focused directly
1026
- !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
1027
-
1028
- // And element has been touched or is untouched but has a value
1029
- ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
1030
- );
1016
+ (!elem.contains(document.activeElement) &&
1017
+ (elem.touched ||
1018
+ (!elem.touched && typeof elem.value !== "undefined"))) ||
1019
+ elem.validateOnInput;
1031
1020
 
1032
1021
  if (elem.hasAttribute('error')) {
1033
1022
  elem.validity = 'customError';
package/components/select/demo/api.html CHANGED
@@ -16,24 +16,18 @@
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 Demo | auro-select</title>
20
-
21
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
-
24
- <!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
25
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
-
27
- <!-- Design Token Alaska Theme -->
28
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
-
30
- <!-- Webcore Stylesheet Alaska Theme -->
31
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
33
- <!-- Demo Specific Styles -->
19
+ <title>Auro Web Component Generator | auro-select custom element</title>
20
+ <link
21
+ rel="stylesheet"
22
+ type="text/css"
23
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
+ />
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ </head>
37
31
  <body class="auro-markdown">
38
32
  <main></main>
39
33
 
package/components/select/demo/api.min.js CHANGED
@@ -940,24 +940,13 @@ class AuroFormValidation {
940
940
  this.getInputElements(elem);
941
941
  this.getAuroInputs(elem);
942
942
 
943
- // Check if validation should run
943
+ // Validate only if noValidate is not true and the input does not have focus
944
944
  let validationShouldRun =
945
-
946
- // If the validation was forced
947
945
  force ||
948
-
949
- // If the validation should run on input
950
- elem.validateOnInput ||
951
-
952
- // State-based checks
953
- (
954
- // Element is not currently focused
955
- !elem.contains(document.activeElement) && // native input is not focused directly
956
- !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
957
-
958
- // And element has been touched or is untouched but has a value
959
- ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
960
- );
946
+ (!elem.contains(document.activeElement) &&
947
+ (elem.touched ||
948
+ (!elem.touched && typeof elem.value !== "undefined"))) ||
949
+ elem.validateOnInput;
961
950
 
962
951
  if (elem.hasAttribute('error')) {
963
952
  elem.validity = 'customError';
@@ -2825,7 +2814,7 @@ class AuroFloatingUI {
2825
2814
  */
2826
2815
  mirrorSize() {
2827
2816
  // mirror the boxsize from bibSizer
2828
- if (this.element.bibSizer) {
2817
+ if (this.element.bibSizer && this.element.matchWidth) {
2829
2818
  const sizerStyle = window.getComputedStyle(this.element.bibSizer);
2830
2819
  const bibContent = this.element.bib.shadowRoot.querySelector(".container");
2831
2820
  if (sizerStyle.width !== '0px') {
@@ -3037,7 +3026,7 @@ class AuroFloatingUI {
3037
3026
  if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
3038
3027
  return;
3039
3028
  }
3040
-
3029
+
3041
3030
  // if fullscreen bib is in fullscreen mode, do not close
3042
3031
  if (this.element.bib.hasAttribute('isfullscreen')) {
3043
3032
  return;
@@ -3225,7 +3214,7 @@ class AuroFloatingUI {
3225
3214
 
3226
3215
  event.preventDefault();
3227
3216
  this.handleClick();
3228
- }
3217
+ }
3229
3218
  break;
3230
3219
  case 'mouseenter':
3231
3220
  if (this.element.hoverToggle) {
package/components/select/demo/index.html CHANGED
@@ -16,24 +16,19 @@
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 Demo | auro-select</title>
20
-
21
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
-
24
- <!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
25
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
-
27
- <!-- Design Token Alaska Theme -->
28
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
-
30
- <!-- Webcore Stylesheet Alaska Theme -->
31
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
33
- <!-- Demo Specific Styles -->
19
+ <title>Auro Web Component Generator | auro-select custom element</title>
20
+ <link
21
+ rel="stylesheet"
22
+ type="text/css"
23
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
+ />
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
34
27
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
28
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
- </head>
29
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
30
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@8.0.3/dist/auro-icon__bundled.js" type="module"></script>
31
+ </head>
37
32
  <body class="auro-markdown">
38
33
  <main></main>
39
34
 
package/components/select/demo/index.min.js CHANGED
@@ -848,24 +848,13 @@ class AuroFormValidation {
848
848
  this.getInputElements(elem);
849
849
  this.getAuroInputs(elem);
850
850
 
851
- // Check if validation should run
851
+ // Validate only if noValidate is not true and the input does not have focus
852
852
  let validationShouldRun =
853
-
854
- // If the validation was forced
855
853
  force ||
856
-
857
- // If the validation should run on input
858
- elem.validateOnInput ||
859
-
860
- // State-based checks
861
- (
862
- // Element is not currently focused
863
- !elem.contains(document.activeElement) && // native input is not focused directly
864
- !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
865
-
866
- // And element has been touched or is untouched but has a value
867
- ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
868
- );
854
+ (!elem.contains(document.activeElement) &&
855
+ (elem.touched ||
856
+ (!elem.touched && typeof elem.value !== "undefined"))) ||
857
+ elem.validateOnInput;
869
858
 
870
859
  if (elem.hasAttribute('error')) {
871
860
  elem.validity = 'customError';
@@ -2733,7 +2722,7 @@ class AuroFloatingUI {
2733
2722
  */
2734
2723
  mirrorSize() {
2735
2724
  // mirror the boxsize from bibSizer
2736
- if (this.element.bibSizer) {
2725
+ if (this.element.bibSizer && this.element.matchWidth) {
2737
2726
  const sizerStyle = window.getComputedStyle(this.element.bibSizer);
2738
2727
  const bibContent = this.element.bib.shadowRoot.querySelector(".container");
2739
2728
  if (sizerStyle.width !== '0px') {
@@ -2945,7 +2934,7 @@ class AuroFloatingUI {
2945
2934
  if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
2946
2935
  return;
2947
2936
  }
2948
-
2937
+
2949
2938
  // if fullscreen bib is in fullscreen mode, do not close
2950
2939
  if (this.element.bib.hasAttribute('isfullscreen')) {
2951
2940
  return;
@@ -3133,7 +3122,7 @@ class AuroFloatingUI {
3133
3122
 
3134
3123
  event.preventDefault();
3135
3124
  this.handleClick();
3136
- }
3125
+ }
3137
3126
  break;
3138
3127
  case 'mouseenter':
3139
3128
  if (this.element.hoverToggle) {