@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/dropdown/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-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 -->
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">
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/dropdown/dist/index.js CHANGED
@@ -1689,7 +1689,7 @@ class AuroFloatingUI {
1689
1689
  */
1690
1690
  mirrorSize() {
1691
1691
  // mirror the boxsize from bibSizer
1692
- if (this.element.bibSizer) {
1692
+ if (this.element.bibSizer && this.element.matchWidth) {
1693
1693
  const sizerStyle = window.getComputedStyle(this.element.bibSizer);
1694
1694
  const bibContent = this.element.bib.shadowRoot.querySelector(".container");
1695
1695
  if (sizerStyle.width !== '0px') {
@@ -1901,7 +1901,7 @@ class AuroFloatingUI {
1901
1901
  if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
1902
1902
  return;
1903
1903
  }
1904
-
1904
+
1905
1905
  // if fullscreen bib is in fullscreen mode, do not close
1906
1906
  if (this.element.bib.hasAttribute('isfullscreen')) {
1907
1907
  return;
@@ -2089,7 +2089,7 @@ class AuroFloatingUI {
2089
2089
 
2090
2090
  event.preventDefault();
2091
2091
  this.handleClick();
2092
- }
2092
+ }
2093
2093
  break;
2094
2094
  case 'mouseenter':
2095
2095
  if (this.element.hoverToggle) {
package/components/dropdown/dist/registered.js CHANGED
@@ -1689,7 +1689,7 @@ class AuroFloatingUI {
1689
1689
  */
1690
1690
  mirrorSize() {
1691
1691
  // mirror the boxsize from bibSizer
1692
- if (this.element.bibSizer) {
1692
+ if (this.element.bibSizer && this.element.matchWidth) {
1693
1693
  const sizerStyle = window.getComputedStyle(this.element.bibSizer);
1694
1694
  const bibContent = this.element.bib.shadowRoot.querySelector(".container");
1695
1695
  if (sizerStyle.width !== '0px') {
@@ -1901,7 +1901,7 @@ class AuroFloatingUI {
1901
1901
  if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
1902
1902
  return;
1903
1903
  }
1904
-
1904
+
1905
1905
  // if fullscreen bib is in fullscreen mode, do not close
1906
1906
  if (this.element.bib.hasAttribute('isfullscreen')) {
1907
1907
  return;
@@ -2089,7 +2089,7 @@ class AuroFloatingUI {
2089
2089
 
2090
2090
  event.preventDefault();
2091
2091
  this.handleClick();
2092
- }
2092
+ }
2093
2093
  break;
2094
2094
  case 'mouseenter':
2095
2095
  if (this.element.hoverToggle) {
package/components/form/demo/api.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-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 -->
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">
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/form/demo/autocomplete.html CHANGED
@@ -1,25 +1,9 @@
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.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" />
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Demo page for auto-complete</title>
23
7
  </head>
24
8
  <body>
25
9
  <!-- EVERY AUTOCOMPLETE OPTION, auro inputs -->
package/components/form/demo/index.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-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 -->
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">
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/form/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-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 -->
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">
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/form/demo/working.html CHANGED
@@ -14,25 +14,19 @@
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 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" />
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>
36
30
  </head>
37
31
  <body class="auro-markdown">
38
32
  <main>
package/components/input/demo/api.html CHANGED
@@ -3,24 +3,18 @@
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 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 -->
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">
21
14
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
22
15
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
23
- </head>
16
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
17
+ </head>
24
18
  <body class="auro-markdown">
25
19
  <main></main>
26
20
 
package/components/input/demo/api.md CHANGED
@@ -60,9 +60,8 @@ Generate unique names for dependency components.
60
60
 
61
61
  | Method | Type | Description |
62
62
  |------------|----------------------------------------|--------------------------------------------------|
63
- | [clear](#clear) | `(): void` | Clears the input value |
64
63
  | [focus](#focus) | `(): void` | Function to set element focus. |
65
- | [reset](#reset) | `(): void` | Resets component to initial state, including resetting the touched state and validity. |
64
+ | [reset](#reset) | `(): void` | Resets component to initial state. |
66
65
  | [validate](#validate) | `(force?: boolean \| undefined): void` | Validates value.<br /><br />**force**: Whether to force validation. |
67
66
 
68
67
  ## Events
package/components/input/demo/api.min.js CHANGED
@@ -4847,24 +4847,13 @@ class AuroFormValidation {
4847
4847
  this.getInputElements(elem);
4848
4848
  this.getAuroInputs(elem);
4849
4849
 
4850
- // Check if validation should run
4850
+ // Validate only if noValidate is not true and the input does not have focus
4851
4851
  let validationShouldRun =
4852
-
4853
- // If the validation was forced
4854
4852
  force ||
4855
-
4856
- // If the validation should run on input
4857
- elem.validateOnInput ||
4858
-
4859
- // State-based checks
4860
- (
4861
- // Element is not currently focused
4862
- !elem.contains(document.activeElement) && // native input is not focused directly
4863
- !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
4864
-
4865
- // And element has been touched or is untouched but has a value
4866
- ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
4867
- );
4853
+ (!elem.contains(document.activeElement) &&
4854
+ (elem.touched ||
4855
+ (!elem.touched && typeof elem.value !== "undefined"))) ||
4856
+ elem.validateOnInput;
4868
4857
 
4869
4858
  if (elem.hasAttribute('error')) {
4870
4859
  elem.validity = 'customError';
@@ -5688,9 +5677,9 @@ class BaseInput extends AuroElement$2 {
5688
5677
  if (!this.shadowRoot.contains(this.getActiveElement())) {
5689
5678
  this.validation.validate(this);
5690
5679
  }
5691
- }
5692
5680
 
5693
- this.notifyValueChanged();
5681
+ this.notifyValueChanged();
5682
+ }
5694
5683
  }
5695
5684
 
5696
5685
  if (changedProperties.has('error')) {
@@ -5815,9 +5804,9 @@ class BaseInput extends AuroElement$2 {
5815
5804
  this.inputElement.value = "";
5816
5805
  this.value = "";
5817
5806
  this.labelElement.classList.remove('inputElement-label--sticky');
5818
- this.notifyValueChanged();
5819
5807
  this.focus();
5820
5808
  this.validation.validate(this);
5809
+ this.notifyValueChanged();
5821
5810
  }
5822
5811
 
5823
5812
  /**
@@ -5912,20 +5901,13 @@ class BaseInput extends AuroElement$2 {
5912
5901
  }
5913
5902
 
5914
5903
  /**
5915
- * Resets component to initial state, including resetting the touched state and validity.
5904
+ * Resets component to initial state.
5916
5905
  * @returns {void}
5917
5906
  */
5918
5907
  reset() {
5919
5908
  this.validation.reset(this);
5920
5909
  }
5921
5910
 
5922
- /**
5923
- * Clears the input value
5924
- */
5925
- clear() {
5926
- this.value = undefined;
5927
- }
5928
-
5929
5911
  /**
5930
5912
  * Sets configuration data used elsewhere based on the `type` attribute.
5931
5913
  * @private
package/components/input/demo/index.html CHANGED
@@ -3,24 +3,18 @@
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 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 -->
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">
21
14
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
22
15
  <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
23
- </head>
16
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/essentials-as.css" />
17
+ </head>
24
18
  <body class="auro-markdown">
25
19
  <main></main>
26
20
 
package/components/input/demo/index.min.js CHANGED
@@ -4772,24 +4772,13 @@ class AuroFormValidation {
4772
4772
  this.getInputElements(elem);
4773
4773
  this.getAuroInputs(elem);
4774
4774
 
4775
- // Check if validation should run
4775
+ // Validate only if noValidate is not true and the input does not have focus
4776
4776
  let validationShouldRun =
4777
-
4778
- // If the validation was forced
4779
4777
  force ||
4780
-
4781
- // If the validation should run on input
4782
- elem.validateOnInput ||
4783
-
4784
- // State-based checks
4785
- (
4786
- // Element is not currently focused
4787
- !elem.contains(document.activeElement) && // native input is not focused directly
4788
- !document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
4789
-
4790
- // And element has been touched or is untouched but has a value
4791
- ( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
4792
- );
4778
+ (!elem.contains(document.activeElement) &&
4779
+ (elem.touched ||
4780
+ (!elem.touched && typeof elem.value !== "undefined"))) ||
4781
+ elem.validateOnInput;
4793
4782
 
4794
4783
  if (elem.hasAttribute('error')) {
4795
4784
  elem.validity = 'customError';
@@ -5613,9 +5602,9 @@ class BaseInput extends AuroElement$2 {
5613
5602
  if (!this.shadowRoot.contains(this.getActiveElement())) {
5614
5603
  this.validation.validate(this);
5615
5604
  }
5616
- }
5617
5605
 
5618
- this.notifyValueChanged();
5606
+ this.notifyValueChanged();
5607
+ }
5619
5608
  }
5620
5609
 
5621
5610
  if (changedProperties.has('error')) {
@@ -5740,9 +5729,9 @@ class BaseInput extends AuroElement$2 {
5740
5729
  this.inputElement.value = "";
5741
5730
  this.value = "";
5742
5731
  this.labelElement.classList.remove('inputElement-label--sticky');
5743
- this.notifyValueChanged();
5744
5732
  this.focus();
5745
5733
  this.validation.validate(this);
5734
+ this.notifyValueChanged();
5746
5735
  }
5747
5736
 
5748
5737
  /**
@@ -5837,20 +5826,13 @@ class BaseInput extends AuroElement$2 {
5837
5826
  }
5838
5827
 
5839
5828
  /**
5840
- * Resets component to initial state, including resetting the touched state and validity.
5829
+ * Resets component to initial state.
5841
5830
  * @returns {void}
5842
5831
  */
5843
5832
  reset() {
5844
5833
  this.validation.reset(this);
5845
5834
  }
5846
5835
 
5847
- /**
5848
- * Clears the input value
5849
- */
5850
- clear() {
5851
- this.value = undefined;
5852
- }
5853
-
5854
5836
  /**
5855
5837
  * Sets configuration data used elsewhere based on the `type` attribute.
5856
5838
  * @private
package/components/input/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-input</title>
20
-
21
- <!-- Prism.js Stylesheet -->
22
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
-
24
- <!-- Legacy reference is still needed to support auro-input's use of legacy token values at this time -->
25
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
-
27
- <!-- Design Token Alaska Theme -->
28
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
-
30
- <!-- Webcore Stylesheet Alaska Theme -->
31
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
-
33
- <!-- Demo Specific Styles -->
19
+ <title>Auro Web Component Generator | auro-input custom element</title>
20
+ <link
21
+ rel="stylesheet"
22
+ type="text/css"
23
+ href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
24
+ />
25
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/auro-classic/CSSCustomProperties.css">
26
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/alaska/CSSCustomProperties--alaska.css">
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/input/dist/base-input.d.ts CHANGED
@@ -486,14 +486,10 @@ export default class BaseInput extends AuroElement {
486
486
  */
487
487
  validate(force?: boolean): void;
488
488
  /**
489
- * Resets component to initial state, including resetting the touched state and validity.
489
+ * Resets component to initial state.
490
490
  * @returns {void}
491
491
  */
492
492
  reset(): void;
493
- /**
494
- * Clears the input value
495
- */
496
- clear(): void;
497
493
  /**
498
494
  * Sets configuration data used elsewhere based on the `type` attribute.
499
495
  * @private
package/components/input/dist/index.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