@aurodesignsystem/auro-formkit 2.0.0-beta.52 → 2.0.0-beta.53

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/CHANGELOG.md +7 -0
  2. package/README.md +27 -6
  3. package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
  4. package/components/bibtemplate/dist/index.js +4 -3
  5. package/components/bibtemplate/dist/registered.js +4 -3
  6. package/components/checkbox/README.md +56 -93
  7. package/components/checkbox/demo/index.md +0 -45
  8. package/components/checkbox/demo/readme.html +49 -0
  9. package/components/checkbox/demo/readme.md +142 -0
  10. package/components/combobox/README.md +57 -102
  11. package/components/combobox/demo/api.min.js +9 -7
  12. package/components/combobox/demo/index.md +0 -53
  13. package/components/combobox/demo/index.min.js +9 -7
  14. package/components/combobox/demo/readme.html +49 -0
  15. package/components/combobox/demo/readme.md +152 -0
  16. package/components/combobox/dist/index.js +9 -7
  17. package/components/combobox/dist/registered.js +9 -7
  18. package/components/counter/README.md +58 -100
  19. package/components/counter/demo/api.js +3 -0
  20. package/components/counter/demo/api.md +254 -12
  21. package/components/counter/demo/api.min.js +26 -11
  22. package/components/counter/demo/index.html +0 -1
  23. package/components/counter/demo/index.js +1 -2
  24. package/components/counter/demo/index.md +71 -221
  25. package/components/counter/demo/index.min.js +15 -11
  26. package/components/counter/demo/readme.html +49 -0
  27. package/components/counter/demo/readme.md +146 -0
  28. package/components/counter/dist/auro-counter-group.d.ts +6 -6
  29. package/components/counter/dist/auro-counter.d.ts +1 -1
  30. package/components/counter/dist/index.js +15 -11
  31. package/components/counter/dist/registered.js +15 -11
  32. package/components/datepicker/README.md +57 -95
  33. package/components/datepicker/demo/api.min.js +9 -7
  34. package/components/datepicker/demo/index.md +0 -39
  35. package/components/datepicker/demo/index.min.js +9 -7
  36. package/components/datepicker/demo/readme.html +49 -0
  37. package/components/datepicker/demo/readme.md +140 -0
  38. package/components/datepicker/dist/index.js +9 -7
  39. package/components/datepicker/dist/registered.js +9 -7
  40. package/components/dropdown/README.md +56 -92
  41. package/components/dropdown/demo/index.md +1 -60
  42. package/components/dropdown/demo/readme.html +49 -0
  43. package/components/dropdown/demo/readme.md +144 -0
  44. package/components/form/README.md +56 -91
  45. package/components/form/demo/readme.html +49 -0
  46. package/components/form/demo/readme.md +145 -0
  47. package/components/input/README.md +56 -87
  48. package/components/input/demo/api.min.js +5 -4
  49. package/components/input/demo/index.md +0 -31
  50. package/components/input/demo/index.min.js +5 -4
  51. package/components/input/demo/readme.html +49 -0
  52. package/components/input/demo/readme.md +135 -0
  53. package/components/input/dist/index.js +5 -4
  54. package/components/input/dist/registered.js +5 -4
  55. package/components/menu/README.md +56 -93
  56. package/components/menu/demo/index.md +1 -44
  57. package/components/menu/demo/readme.html +49 -0
  58. package/components/menu/demo/readme.md +145 -0
  59. package/components/radio/README.md +56 -87
  60. package/components/radio/demo/index.md +0 -45
  61. package/components/radio/demo/readme.html +49 -0
  62. package/components/radio/demo/readme.md +137 -0
  63. package/components/select/README.md +57 -100
  64. package/components/select/demo/api.min.js +4 -3
  65. package/components/select/demo/index.md +0 -53
  66. package/components/select/demo/index.min.js +4 -3
  67. package/components/select/demo/readme.html +49 -0
  68. package/components/select/demo/readme.md +143 -0
  69. package/components/select/dist/index.js +4 -3
  70. package/components/select/dist/registered.js +4 -3
  71. package/package.json +3 -2
package/components/select/demo/readme.html ADDED
@@ -0,0 +1,49 @@
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/index.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
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-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/tokens/CSSCustomProperties.css">
26
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
27
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
28
+ </head>
29
+ <body class="auro-markdown">
30
+ <main></main>
31
+
32
+ <script type="module">
33
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
34
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
35
+ fetch('./readme.md')
36
+ .then((response) => response.text())
37
+ .then((text) => {
38
+ const rawHtml = marked.parse(text);
39
+ document.querySelector('main').innerHTML = rawHtml;
40
+ Prism.highlightAll();
41
+ })
42
+ </script>
43
+ <script type="module">
44
+ import { initExamples } from "./index.min.js";
45
+
46
+ initExamples();
47
+ </script>
48
+ </body>
49
+ </html>
package/components/select/demo/readme.md ADDED
@@ -0,0 +1,143 @@
1
+ <!--
2
+ The README.md file is a compiled document. No edits should be made directly to this file.
3
+
4
+ README.md is created by running `npm run build:docs`.
5
+
6
+ This file is generated based on a template fetched from
7
+ `../../docs/templates/componentReadmeTemplate.md`
8
+ and copied to `./componentDocs/README.md` each time the docs are compiled.
9
+
10
+ The following sections are editable by making changes to the following files:
11
+
12
+ | SECTION | DESCRIPTION | FILE LOCATION |
13
+ |------------------------|---------------------------------------------------|-------------------------------------|
14
+ | Description | Description of the component | `./docs/partials/description.md` |
15
+ | Use Cases | Examples for when to use this component | `./docs/partials/useCases.md` |
16
+ | Additional Information | For use to add any component specific information | `./docs/partials/readmeAddlInfo.md` |
17
+ | Component Example Code | HTML sample code of the components use | `./apiExamples/basic.html` |
18
+ -->
19
+
20
+ # Select
21
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
22
+ <!-- The below content is automatically added from ./docs/partials/description.md -->
23
+ `<auro-select>` is a combination <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements">HTML custom element</auro-hyperlink> that consists of a pre-defined trigger element, `<auro-menu>` for the panel content. The `<auro-select>` element presents a menu of options. The options within the menu are represented by `<auro-menu>` and `<auro-menuoption>` elements. You can pre-select options for the user with the `selected` attribute as part of the `<auro-menuoption>` API.
24
+ <!-- AURO-GENERATED-CONTENT:END -->
25
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
26
+ <!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
27
+ <!-- AURO-GENERATED-CONTENT This file is to be used for any additional content that should be included in the README.md which is specific to this component. -->
28
+ <!-- AURO-GENERATED-CONTENT:END -->
29
+
30
+ ## Getting Started
31
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/componentInstall.md) -->
32
+ <!-- The below content is automatically added from ../../docs/templates/componentInstall.md -->
33
+
34
+ #### NPM Installation
35
+
36
+ ```shell
37
+ $ npm i @aurodesignsystem/auro-formkit
38
+ ```
39
+ <!-- AURO-GENERATED-CONTENT:END -->
40
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/gettingStarted.md) -->
41
+ <!-- The below content is automatically added from ../../docs/templates/gettingStarted.md -->
42
+
43
+ ### Import Options
44
+
45
+ #### Automatic Registration
46
+
47
+ For automatic registration, simply import the component:
48
+
49
+ ```javascript
50
+ // Registers <auro-select> automatically
51
+ import '@aurodesignsystem/auro-formkit/auro-select';
52
+ ```
53
+
54
+ #### Custom Registration
55
+
56
+ To protect from versioning conflicts with other instances of the component being loaded, it is recommended to use our static `AuroSelect.register('custom-select')` method on the component class and pass in a unique name.
57
+
58
+ ```javascript
59
+ // Import the class only
60
+ import { AuroSelect } from '@aurodesignsystem/auro-formkit/auro-select/class';
61
+
62
+ // Register with a custom name if desired
63
+ AuroSelect.register('custom-select');
64
+ ```
65
+
66
+ #### TypeScript Module Resolution
67
+
68
+ When using TypeScript set `moduleResolution` to `bundler`, add the following to your `tsconfig.json`:
69
+
70
+ ```json
71
+ {
72
+ "compilerOptions": {
73
+ "moduleResolution": "bundler"
74
+ }
75
+ }
76
+ ```
77
+
78
+ This configuration enables proper module resolution for the component's TypeScript files.
79
+ <!-- AURO-GENERATED-CONTENT:END -->
80
+ **Reference component in HTML**
81
+
82
+ <!-- AURO-GENERATED-CONTENT:START (CODE:src=./apiExamples/basic.html) -->
83
+ <!-- The below code snippet is automatically added from ./apiExamples/basic.html -->
84
+
85
+ ```html
86
+ <auro-select>
87
+ <span slot="bib.fullscreen.headline">Bib Headline</span>
88
+ <auro-menu>
89
+ <auro-menuoption value="stops">Stops</auro-menuoption>
90
+ <auro-menuoption value="price">Price</auro-menuoption>
91
+ <auro-menuoption value="duration">Duration</auro-menuoption>
92
+ <auro-menuoption value="departure">Departure</auro-menuoption>
93
+ <auro-menuoption value="arrival">Arrival</auro-menuoption>
94
+ <auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
95
+ </auro-menu>
96
+ </auro-select>
97
+ ```
98
+ <!-- AURO-GENERATED-CONTENT:END -->
99
+
100
+ ### Design Token CSS Custom Property dependency
101
+
102
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/development/designTokens.md) -->
103
+ The use of any Auro custom element has a dependency on the [Auro Design Tokens](https://auro.alaskaair.com/getting-started/developers/design-tokens).
104
+
105
+ <!-- AURO-GENERATED-CONTENT:END -->
106
+
107
+ ## Install from CDN
108
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/templates/bundleInstallDescription.md) -->
109
+ <!-- The below content is automatically added from ../../docs/templates/bundleInstallDescription.md -->
110
+ 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.
111
+
112
+ ```html
113
+ <script type="module "src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@2.0.0-beta.52/auro-select/+esm"></script>
114
+ ```
115
+ <!-- AURO-GENERATED-CONTENT:END -->
116
+
117
+ ## UI development browser support
118
+ <!-- AURO-GENERATED-CONTENT:START (REMOTE:url=https://raw.githubusercontent.com/AlaskaAirlines/WC-Generator/master/componentDocs/partials/browserSupport.md) -->
119
+ For the most up to date information on [UI development browser support](https://auro.alaskaair.com/support/browsersSupport)
120
+
121
+ <!-- AURO-GENERATED-CONTENT:END -->
122
+
123
+ ## auro-select use cases
124
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/useCases.md) -->
125
+ <!-- The below content is automatically added from ./docs/partials/useCases.md -->
126
+ See description.
127
+ <!-- AURO-GENERATED-CONTENT:END -->
128
+
129
+ ## Formkit development
130
+
131
+ <!-- AURO-GENERATED-CONTENT:START (FILE:src=../../docs/partials/developmentDescription.md) -->
132
+ <!-- The below content is automatically added from ../../docs/partials/developmentDescription.md -->
133
+
134
+ ### Filtering
135
+
136
+ Running the `dev` command will open a `localhost` development server for all components in the monorepo at once.
137
+
138
+ To only develop a single component, use the `--filter` flag:
139
+
140
+ ```shell
141
+ npx turbo dev --filter=@aurodesignsystem/auro-input
142
+ ```
143
+ <!-- AURO-GENERATED-CONTENT:END -->
package/components/select/dist/index.js CHANGED
@@ -4359,7 +4359,7 @@ class AuroIcon extends BaseIcon {
4359
4359
 
4360
4360
  var iconVersion = '6.1.2';
4361
4361
 
4362
- var styleCss$3 = i$5$1`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
4362
+ var styleCss$3 = i$5$1`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
4363
4363
 
4364
4364
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4365
4365
  // See LICENSE in the project root for license information.
@@ -4368,6 +4368,7 @@ var styleCss$3 = i$5$1`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-he
4368
4368
  /**
4369
4369
  * The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
4370
4370
  *
4371
+ * @attr {Boolean} no-margin-block - if declared, margin-block will be set to `0`
4371
4372
  * @attr {String} level - Determines heading level for HTML element. Options are `1` - `6`
4372
4373
  * @attr {String} display - Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`.
4373
4374
  * @attr {String} color - Allows user to pass in CSS custom property or direct hex value to change the color of the header
@@ -4500,7 +4501,7 @@ class AuroHeader extends r$4 {
4500
4501
  }
4501
4502
  }
4502
4503
 
4503
- var headerVersion = '3.0.0';
4504
+ var headerVersion = '4.0.0';
4504
4505
 
4505
4506
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4506
4507
  // See LICENSE in the project root for license information.
@@ -4599,7 +4600,7 @@ class AuroBibtemplate extends r$4 {
4599
4600
  <button id="closeButton" @click="${this.onCloseButtonClick}">
4600
4601
  <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
4601
4602
  </button>
4602
- <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header">
4603
+ <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
4603
4604
  <slot name="header"></slot>
4604
4605
  </${this.headerTag}>
4605
4606
  <span id="subheader">
package/components/select/dist/registered.js CHANGED
@@ -4359,7 +4359,7 @@ class AuroIcon extends BaseIcon {
4359
4359
 
4360
4360
  var iconVersion = '6.1.2';
4361
4361
 
4362
- var styleCss$3 = i$5$1`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
4362
+ var styleCss$3 = i$5$1`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-heading-default-spacing, -0.2px);font-weight:var(--ds-text-heading-default-weight, 500)}.heading--display{margin-top:0;font-size:var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);font-weight:var(--ds-text-heading-display-weight, 100);line-height:var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem)}@media screen and (min-width: 768px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-md, 3rem);line-height:var(--ds-text-heading-display-height-breakpoint-md, 3.75rem)}}@media screen and (min-width: 1024px){.heading--display{font-size:var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);line-height:var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem)}}.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-sm, 2rem);font-weight:var(--ds-text-heading-800-weight, 500);line-height:var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem)}@media screen and (min-width: 768px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);line-height:var(--ds-text-heading-800-height-breakpoint-md, 2.625rem)}}@media screen and (min-width: 1024px){.heading--800{font-size:var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);line-height:var(--ds-text-heading-800-height-breakpoint-lg, 3rem)}}.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);font-weight:var(--ds-text-heading-700-weight, 500);line-height:var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem)}@media screen and (min-width: 768px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-md, 2rem);line-height:var(--ds-text-heading-700-height-breakpoint-md, 2.375rem)}}@media screen and (min-width: 1024px){.heading--700{font-size:var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);line-height:var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem)}}.heading--600{margin:1rem 0;font-size:var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);font-weight:var(--ds-text-heading-600-weight, 300);line-height:var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem)}@media screen and (min-width: 768px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-md, 2.125rem)}}@media screen and (min-width: 1024px){.heading--600{font-size:var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);line-height:var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem)}}.heading--500{margin:1rem 0;font-size:var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);font-weight:var(--ds-text-heading-500-weight, 300);line-height:var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem)}@media screen and (min-width: 768px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-md, 1.875rem)}}@media screen and (min-width: 1024px){.heading--500{font-size:var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);line-height:var(--ds-text-heading-500-height-breakpoint-lg, 2rem)}}.heading--400{margin:.75rem 0;font-size:var(--ds-text-heading-400-size, 1.25rem);font-weight:var(--ds-text-heading-400-weight, 300);line-height:var(--ds-text-heading-400-height, 1.625rem)}.heading--300{margin:.75rem 0;font-size:var(--ds-text-heading-300-size, 1.125rem);font-weight:var(--ds-text-heading-300-weight, 300);line-height:var(--ds-text-heading-300-height, 1.625rem)}:host([no-margin-block]) .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, 0.125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, 0.25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, 0.5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, 0.75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, 0.125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, 0.25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, 0.5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, 0.75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}`;
4363
4363
 
4364
4364
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4365
4365
  // See LICENSE in the project root for license information.
@@ -4368,6 +4368,7 @@ var styleCss$3 = i$5$1`.heading{margin:1.75rem 0;letter-spacing:var(--ds-text-he
4368
4368
  /**
4369
4369
  * The auro-header component is a custom element to make using headers with the Auro Design System seamless and easy.
4370
4370
  *
4371
+ * @attr {Boolean} no-margin-block - if declared, margin-block will be set to `0`
4371
4372
  * @attr {String} level - Determines heading level for HTML element. Options are `1` - `6`
4372
4373
  * @attr {String} display - Determines presentation of header. Options are `display`, `800`, `700`, `600`, `500`, `400`, `300`.
4373
4374
  * @attr {String} color - Allows user to pass in CSS custom property or direct hex value to change the color of the header
@@ -4500,7 +4501,7 @@ class AuroHeader extends r$4 {
4500
4501
  }
4501
4502
  }
4502
4503
 
4503
- var headerVersion = '3.0.0';
4504
+ var headerVersion = '4.0.0';
4504
4505
 
4505
4506
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
4506
4507
  // See LICENSE in the project root for license information.
@@ -4599,7 +4600,7 @@ class AuroBibtemplate extends r$4 {
4599
4600
  <button id="closeButton" @click="${this.onCloseButtonClick}">
4600
4601
  <${this.iconTag} category="interface" name="x-lg"></${this.iconTag}>
4601
4602
  </button>
4602
- <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header">
4603
+ <${this.headerTag} display="${this.large ? 'display' : '600'}" level="3" size="none" id="header" no-margin-block>
4603
4604
  <slot name="header"></slot>
4604
4605
  </${this.headerTag}>
4605
4606
  <span id="subheader">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aurodesignsystem/auro-formkit",
3
- "version": "2.0.0-beta.52",
3
+ "version": "2.0.0-beta.53",
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": {
@@ -48,7 +48,8 @@
48
48
  "build:docs:kit": "node ./packages/build-tools/src/kitDocProcessor.mjs",
49
49
  "sweep": "find ./components ./packages -type d -name 'dist' -exec rm -rf {} + && find ./ -type d -name '.turbo' -exec rm -rf {} + && find ./components ./packages -not -path '*/node_modules/*' -type f \\( -name '*.css' -o -name '*-css.js' \\) -delete",
50
50
  "preCommit": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/pre-commit.mjs",
51
- "prepare": "husky"
51
+ "prepare": "husky",
52
+ "deploy-demo": "npm run build && sh ./deploy-components.sh"
52
53
  },
53
54
  "dependencies": {
54
55
  "@aurodesignsystem/auro-library": "^3.0.10"