@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.13 → 0.0.0-pr1451.15

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 (125) hide show
  1. package/components/checkbox/demo/api.min.js +3 -3
  2. package/components/checkbox/demo/index.min.js +3 -3
  3. package/components/checkbox/dist/index.js +3 -3
  4. package/components/checkbox/dist/registered.js +3 -3
  5. package/components/combobox/README.md +8 -29
  6. package/components/combobox/demo/accessibility.html +2 -20
  7. package/components/combobox/demo/accessibility.md +1 -1
  8. package/components/combobox/demo/api.min.js +10 -9
  9. package/components/combobox/demo/customize.md +182 -32
  10. package/components/combobox/demo/customize.min.js +30 -28
  11. package/components/combobox/demo/design.html +2 -43
  12. package/components/combobox/demo/design.md +4 -4
  13. package/components/combobox/demo/getting-started.md +51 -39
  14. package/components/combobox/demo/getting-started.min.js +9 -9
  15. package/components/combobox/demo/index.md +3 -2
  16. package/components/combobox/demo/index.min.js +10 -9
  17. package/components/combobox/demo/keyboard-behavior.html +2 -20
  18. package/components/combobox/demo/keyboard-behavior.md +2 -2
  19. package/components/combobox/demo/layout.md +2 -2
  20. package/components/combobox/demo/readme.html +2 -43
  21. package/components/combobox/demo/readme.md +8 -29
  22. package/components/combobox/demo/styles.css +1 -1
  23. package/components/combobox/demo/voiceover.html +2 -20
  24. package/components/combobox/dist/index.js +7 -7
  25. package/components/combobox/dist/registered.js +7 -7
  26. package/components/counter/demo/api.min.js +6 -6
  27. package/components/counter/demo/index.min.js +6 -6
  28. package/components/counter/demo/keyboard-behavior.md +1 -1
  29. package/components/counter/dist/index.js +6 -6
  30. package/components/counter/dist/registered.js +6 -6
  31. package/components/datepicker/README.md +10 -24
  32. package/components/datepicker/demo/accessibility.html +50 -0
  33. package/components/datepicker/demo/accessibility.md +64 -0
  34. package/components/datepicker/demo/api.md +0 -1670
  35. package/components/datepicker/demo/api.min.js +11 -11
  36. package/components/datepicker/demo/customize.html +53 -0
  37. package/components/datepicker/demo/customize.md +723 -0
  38. package/components/datepicker/demo/demo-support.js +60 -0
  39. package/components/datepicker/demo/design.html +54 -0
  40. package/components/datepicker/demo/design.md +158 -0
  41. package/components/datepicker/demo/getting-started.html +53 -0
  42. package/components/datepicker/demo/getting-started.md +237 -0
  43. package/components/datepicker/demo/index.html +14 -34
  44. package/components/datepicker/demo/index.md +160 -103
  45. package/components/datepicker/demo/index.min.js +11 -11
  46. package/components/datepicker/demo/keyboard-behavior.html +12 -33
  47. package/components/datepicker/demo/layout.md +92 -0
  48. package/components/datepicker/demo/readme.md +10 -24
  49. package/components/datepicker/demo/styles.css +974 -0
  50. package/components/datepicker/demo/voiceover.html +59 -0
  51. package/components/datepicker/demo/voiceover.md +98 -0
  52. package/components/datepicker/dist/index.js +11 -11
  53. package/components/datepicker/dist/registered.js +11 -11
  54. package/components/dropdown/demo/api.min.js +2 -2
  55. package/components/dropdown/demo/index.min.js +2 -2
  56. package/components/dropdown/demo/keyboard-behavior.md +1 -1
  57. package/components/dropdown/dist/index.js +2 -2
  58. package/components/dropdown/dist/registered.js +2 -2
  59. package/components/form/demo/api.min.js +40 -40
  60. package/components/form/demo/index.min.js +40 -40
  61. package/components/helptext/dist/index.js +1 -1
  62. package/components/helptext/dist/registered.js +1 -1
  63. package/components/input/README.md +17 -28
  64. package/components/input/demo/accessibility.html +38 -0
  65. package/components/input/demo/accessibility.md +69 -0
  66. package/components/input/demo/api.html +17 -22
  67. package/components/input/demo/api.js +4 -23
  68. package/components/input/demo/api.md +0 -1200
  69. package/components/input/demo/api.min.js +3 -95
  70. package/components/input/demo/customize.html +54 -0
  71. package/components/input/demo/customize.js +25 -0
  72. package/components/input/demo/customize.md +1372 -0
  73. package/components/input/demo/customize.min.js +7430 -0
  74. package/components/input/demo/demo-support.js +60 -0
  75. package/components/input/demo/design.html +39 -0
  76. package/components/input/demo/design.md +224 -0
  77. package/components/input/demo/getting-started.html +53 -0
  78. package/components/input/demo/getting-started.js +8 -0
  79. package/components/input/demo/getting-started.md +312 -0
  80. package/components/input/demo/getting-started.min.js +7368 -0
  81. package/components/input/demo/index.html +16 -22
  82. package/components/input/demo/index.js +0 -11
  83. package/components/input/demo/index.md +171 -139
  84. package/components/input/demo/index.min.js +3 -15
  85. package/components/input/demo/keyboard-behavior.html +38 -0
  86. package/components/input/demo/layout.md +77 -0
  87. package/components/input/demo/readme.md +17 -28
  88. package/components/input/demo/styles.css +974 -0
  89. package/components/input/demo/voiceover.html +38 -0
  90. package/components/input/demo/voiceover.md +70 -0
  91. package/components/input/dist/index.js +3 -3
  92. package/components/input/dist/registered.js +3 -3
  93. package/components/menu/demo/api.min.js +2 -2
  94. package/components/menu/demo/index.min.js +2 -2
  95. package/components/menu/dist/index.js +2 -2
  96. package/components/menu/dist/registered.js +2 -2
  97. package/components/radio/demo/api.min.js +3 -3
  98. package/components/radio/demo/index.min.js +3 -3
  99. package/components/radio/dist/index.js +3 -3
  100. package/components/radio/dist/registered.js +3 -3
  101. package/components/select/README.md +7 -4
  102. package/components/select/demo/accessibility.md +1 -1
  103. package/components/select/demo/customize.js +1 -13
  104. package/components/select/demo/customize.md +158 -1
  105. package/components/select/demo/customize.min.js +9 -9
  106. package/components/select/demo/design.md +2 -2
  107. package/components/select/demo/getting-started.js +1 -3
  108. package/components/select/demo/getting-started.md +53 -18
  109. package/components/select/demo/getting-started.min.js +9 -9
  110. package/components/select/demo/index.html +2 -0
  111. package/components/select/demo/index.js +5 -3
  112. package/components/select/demo/index.md +2 -2
  113. package/components/select/demo/index.min.js +14 -9
  114. package/components/select/demo/keyboard-behavior.md +3 -3
  115. package/components/select/demo/readme.md +7 -4
  116. package/components/select/demo/styles.css +1 -1
  117. package/components/select/dist/index.js +5 -5
  118. package/components/select/dist/registered.js +5 -5
  119. package/custom-elements.json +1444 -1444
  120. package/package.json +2 -2
  121. package/components/combobox/demo/install.html +0 -94
  122. package/components/combobox/demo/install.js +0 -24
  123. package/components/combobox/demo/install.md +0 -98
  124. package/components/combobox/demo/install.min.js +0 -17992
  125. package/components/select/demo/install.md +0 -92
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem-dev/auro-formkit",
3
- "version": "0.0.0-pr1451.13",
3
+ "version": "0.0.0-pr1451.15",
4
4
  "description": "A collection of web components used to build forms.",
5
5
  "homepage": "https://github.com/AlaskaAirlines/auro-formkit#readme",
6
6
  "bugs": {
@@ -97,7 +97,7 @@
97
97
  "@aurodesignsystem/typescript": "*",
98
98
  "@aurodesignsystem/utils": "*",
99
99
  "@aurodesignsystem/version": "*",
100
- "@aurodesignsystem/webcorestylesheets": "npm:@aurodesignsystem-dev/webcorestylesheets@^0.0.0-pr280.6",
100
+ "@aurodesignsystem/webcorestylesheets": "npm:@aurodesignsystem-dev/webcorestylesheets@^0.0.0-pr280.8",
101
101
  "@chromatic-com/storybook": "^5.1.2",
102
102
  "@commitlint/cli": "^20.5.0",
103
103
  "@commitlint/config-conventional": "^20.5.0",
package/components/combobox/demo/install.html DELETED
@@ -1,94 +0,0 @@
1
- <!--
2
- Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
- See LICENSE in the project root for license information.
4
-
5
- HTML in this document is standardized and NOT to be edited.
6
- All demo code should be added/edited in ./demo/install.md
7
-
8
- ----------------------- DO NOT EDIT -----------------------------
9
-
10
- -->
11
-
12
- <!DOCTYPE html>
13
- <html lang="en">
14
- <head>
15
- <meta charset="UTF-8" />
16
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
17
- <title>Auro Web Component Demo | auro-combobox | Install</title>
18
-
19
- <!-- highlight.js Stylesheet -->
20
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
21
-
22
- <!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
23
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
24
-
25
- <!-- Design Token Alaska Theme -->
26
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
27
-
28
- <!-- Webcore Stylesheet Alaska Theme -->
29
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
30
-
31
- <!-- Demo Specific Styles -->
32
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
33
- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
34
- <link rel="stylesheet" type="text/css" href="./styles.css" />
35
- </head>
36
- <body class="auro-markdown">
37
- <main></main>
38
-
39
- <!-- If additional elements are needed for the demo, add them here. -->
40
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
41
- <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
42
-
43
- <script type="module">
44
- import {unified} from 'https://esm.sh/unified';
45
- import remarkParse from 'https://esm.sh/remark-parse';
46
- import remarkGfm from 'https://esm.sh/remark-gfm';
47
- import remarkRehype from 'https://esm.sh/remark-rehype';
48
- import rehypeRaw from 'https://esm.sh/rehype-raw';
49
- import rehypeHighlight from 'https://esm.sh/rehype-highlight';
50
- import rehypeStringify from 'https://esm.sh/rehype-stringify';
51
-
52
- const response = await fetch('./install.md');
53
- const text = await response.text();
54
- const result = await unified()
55
- .use(remarkParse)
56
- .use(remarkGfm)
57
- .use(remarkRehype, { allowDangerousHtml: true })
58
- .use(rehypeRaw)
59
- .use(rehypeHighlight)
60
- .use(rehypeStringify)
61
- .process(text);
62
-
63
- document.querySelector('main').innerHTML = String(result);
64
- addCopyButtons();
65
-
66
- function addCopyButtons() {
67
- document.querySelectorAll('pre code[class*="language-"], pre code[class*="hljs"]').forEach((code) => {
68
- const pre = code.parentElement;
69
- const wrapper = document.createElement('div');
70
- wrapper.className = 'pre-wrapper';
71
- pre.parentNode.insertBefore(wrapper, pre);
72
- wrapper.appendChild(pre);
73
- const btn = document.createElement('button');
74
- btn.className = 'copy-btn';
75
- btn.textContent = 'Copy';
76
- btn.addEventListener('click', () => {
77
- const raw = code.textContent;
78
- const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
79
- navigator.clipboard.writeText(text).then(() => {
80
- btn.textContent = 'Copied!';
81
- setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
82
- });
83
- });
84
- wrapper.appendChild(btn);
85
- });
86
- }
87
- </script>
88
- <script src="./install.min.js" data-demo-script="true" type="module"></script>
89
- <script type="module" data-demo-script="true">
90
- import { initExamples } from "./install.min.js"
91
- initExamples();
92
- </script>
93
- </body>
94
- </html>
package/components/combobox/demo/install.js DELETED
@@ -1,24 +0,0 @@
1
- /* eslint-disable jsdoc/require-jsdoc, no-magic-numbers, no-param-reassign */
2
-
3
- import { swapValueExample } from '../apiExamples/swap-value';
4
-
5
- import { AuroCombobox } from '../src/auro-combobox.js';
6
- import '../../menu/src/registered.js';
7
-
8
- AuroCombobox.register();
9
- AuroCombobox.register('custom-combobox');
10
-
11
- export function initExamples(initCount) {
12
- initCount = initCount || 0;
13
-
14
- try {
15
- swapValueExample();
16
- } catch {
17
- if (initCount <= 20) {
18
- // setTimeout handles issue where content is sometimes loaded after the functions get called
19
- setTimeout(() => {
20
- initExamples(initCount + 1);
21
- }, 100);
22
- }
23
- }
24
- }
package/components/combobox/demo/install.md DELETED
@@ -1,98 +0,0 @@
1
- <auro-header level="1" id="install">Install</auro-header>
2
- <auro-header level="2" id="npmInstall">NPM Installation</auro-header>
3
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/componentInstall.md) -->
4
- <!-- The below content is automatically added from ./../../../docs/templates/componentInstall.md -->
5
-
6
- <pre class="language-shell"><code class="language-shell">$ npm i @aurodesignsystem/auro-formkit</code></pre>
7
- <!-- AURO-GENERATED-CONTENT:END -->
8
- <auro-header level="2" id="gettingStarted">Getting Started</auro-header>
9
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/gettingStarted.md) -->
10
- <!-- The below content is automatically added from ./../../../docs/templates/gettingStarted.md -->
11
-
12
- ### TypeScript Module Resolution
13
-
14
- When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
15
-
16
- <pre class="language-json"><code class="language-json">{
17
- "compilerOptions": {
18
- "moduleResolution": "bundler"
19
- }
20
- }</code></pre>
21
-
22
- This configuration enables proper module resolution for the component's TypeScript files.
23
- <!-- AURO-GENERATED-CONTENT:END -->
24
- <auro-header level="2" id="defaultSetup">Default Component Setup</auro-header>
25
- Once installed, the component can be used in your project by importing the component's registered module:
26
-
27
- <pre class="language-js"><code class="language-js">import '@aurodesignsystem/auro-formkit/auro-combobox';</code></pre>
28
-
29
- This import registers the `<auro-combobox>` custom element globally. You can then use it in your HTML:
30
-
31
- <pre class="language-html"><code class="language-html">&lt;auro-combobox&gt;
32
- &lt;span slot="label"&gt;Choose an option&lt;/span&gt;
33
- &lt;auro-menu&gt;
34
- &lt;auro-menuoption value="option1"&gt;Option 1&lt;/auro-menuoption&gt;
35
- &lt;auro-menuoption value="option2"&gt;Option 2&lt;/auro-menuoption&gt;
36
- &lt;/auro-menu&gt;
37
- &lt;/auro-combobox&gt;</code></pre>
38
-
39
- <auro-header level="2" id="cdn">Install from CDN</auro-header>
40
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../../../docs/templates/bundleInstallDescription.md) -->
41
- <!-- The below content is automatically added from ./../../../docs/templates/bundleInstallDescription.md -->
42
- In cases where the project is not able to process JS assets, there are pre-processed assets available for use. Legacy browsers such as IE11 are no longer supported.
43
-
44
- <pre class="language-html"><code class="language-html">&lt;script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-combobox/+esm"&gt;&lt;/script&gt;</code></pre>
45
- <!-- AURO-GENERATED-CONTENT:END -->
46
- <auro-header level="2" id="customRegistration">Custom Component Registration</auro-header>
47
- <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/customRegistration.md) -->
48
- <!-- The below content is automatically added from ./../docs/partials/customRegistration.md -->
49
-
50
- ## Custom Component Registration for Version Management
51
-
52
- There are two key parts to every Auro component: the <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</a> and the custom element definition. The class defines the component’s behavior, while the custom element registers it under a specific name so it can be used in HTML.
53
-
54
- When you install the component as described on the `Install` page, the class is imported automatically, and the component is registered globally for you.
55
-
56
- However, if you need to load multiple versions of the same component on a single page (for example, when two projects depend on different versions), you can manually register the class under a custom element name to avoid conflicts.
57
-
58
- You can do this by importing only the component class and using the `register(name)` method with a unique name:
59
-
60
- <pre class="language-js"><code class="language-js">// Import the class only
61
- import { AuroCombobox } from '@aurodesignsystem/auro-formkit/auro-combobox/class';
62
- ​
63
- // Register with a custom name if desired
64
- AuroCombobox.register('custom-combobox');</code></pre>
65
-
66
- This will create a new custom element `<custom-combobox>` that behaves exactly like `<auro-combobox>`, allowing both to coexist on the same page without interfering with each other.
67
-
68
- <div class="exampleWrapper exampleWrapper--flex">
69
- <custom-combobox>
70
- <span slot="bib.fullscreen.headline">Bib Header</span>
71
- <span slot="label">Name</span>
72
- <auro-menu>
73
- <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
74
- <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
75
- <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
76
- <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
77
- <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
78
- <auro-menuoption static nomatch>No matching option</auro-menuoption>
79
- </auro-menu>
80
- </custom-combobox>
81
- </div>
82
- <auro-accordion alignRight>
83
- <span slot="trigger">See code</span>
84
-
85
- <pre class="language-html"><code class="language-html">&lt;custom-combobox&gt;
86
- &lt;span slot="bib.fullscreen.headline"&gt;Bib Header&lt;/span&gt;
87
- &lt;span slot="label"&gt;Name&lt;/span&gt;
88
- &lt;auro-menu&gt;
89
- &lt;auro-menuoption value="Apples" id="option-0"&gt;Apples&lt;/auro-menuoption&gt;
90
- &lt;auro-menuoption value="Oranges" id="option-1"&gt;Oranges&lt;/auro-menuoption&gt;
91
- &lt;auro-menuoption value="Peaches" id="option-2"&gt;Peaches&lt;/auro-menuoption&gt;
92
- &lt;auro-menuoption value="Grapes" id="option-3"&gt;Grapes&lt;/auro-menuoption&gt;
93
- &lt;auro-menuoption value="Cherries" id="option-4"&gt;Cherries&lt;/auro-menuoption&gt;
94
- &lt;auro-menuoption static nomatch&gt;No matching option&lt;/auro-menuoption&gt;
95
- &lt;/auro-menu&gt;
96
- &lt;/custom-combobox&gt;</code></pre>
97
- </auro-accordion>
98
- <!-- AURO-GENERATED-CONTENT:END -->