@aurodesignsystem/auro-formkit 2.0.0-beta.51 → 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.
- package/CHANGELOG.md +19 -0
- package/README.md +27 -6
- package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +4 -3
- package/components/bibtemplate/dist/registered.js +4 -3
- package/components/checkbox/README.md +56 -93
- package/components/checkbox/demo/index.md +0 -45
- package/components/checkbox/demo/readme.html +49 -0
- package/components/checkbox/demo/readme.md +142 -0
- package/components/combobox/README.md +57 -102
- package/components/combobox/demo/api.md +1 -1
- package/components/combobox/demo/api.min.js +10 -8
- package/components/combobox/demo/index.md +0 -53
- package/components/combobox/demo/index.min.js +10 -8
- package/components/combobox/demo/readme.html +49 -0
- package/components/combobox/demo/readme.md +152 -0
- package/components/combobox/dist/auro-combobox.d.ts +1 -1
- package/components/combobox/dist/index.js +10 -8
- package/components/combobox/dist/registered.js +10 -8
- package/components/counter/README.md +58 -100
- package/components/counter/demo/api.js +3 -0
- package/components/counter/demo/api.md +255 -13
- package/components/counter/demo/api.min.js +27 -12
- package/components/counter/demo/index.html +0 -1
- package/components/counter/demo/index.js +1 -2
- package/components/counter/demo/index.md +71 -221
- package/components/counter/demo/index.min.js +16 -12
- package/components/counter/demo/readme.html +49 -0
- package/components/counter/demo/readme.md +146 -0
- package/components/counter/dist/auro-counter-group.d.ts +7 -7
- package/components/counter/dist/auro-counter.d.ts +1 -1
- package/components/counter/dist/index.js +16 -12
- package/components/counter/dist/registered.js +16 -12
- package/components/datepicker/README.md +59 -97
- package/components/datepicker/demo/api.md +125 -124
- package/components/datepicker/demo/api.min.js +19 -17
- package/components/datepicker/demo/index.md +8 -47
- package/components/datepicker/demo/index.min.js +19 -17
- package/components/datepicker/demo/readme.html +49 -0
- package/components/datepicker/demo/readme.md +140 -0
- package/components/datepicker/dist/auro-datepicker.d.ts +3 -3
- package/components/datepicker/dist/index.js +19 -17
- package/components/datepicker/dist/registered.js +19 -17
- package/components/dropdown/README.md +56 -92
- package/components/dropdown/demo/index.md +1 -60
- package/components/dropdown/demo/readme.html +49 -0
- package/components/dropdown/demo/readme.md +144 -0
- package/components/form/README.md +56 -91
- package/components/form/demo/readme.html +49 -0
- package/components/form/demo/readme.md +145 -0
- package/components/form/demo/working.html +2 -2
- package/components/input/README.md +56 -87
- package/components/input/demo/api.min.js +5 -4
- package/components/input/demo/index.md +0 -31
- package/components/input/demo/index.min.js +5 -4
- package/components/input/demo/readme.html +49 -0
- package/components/input/demo/readme.md +135 -0
- package/components/input/dist/index.js +5 -4
- package/components/input/dist/registered.js +5 -4
- package/components/menu/README.md +56 -93
- package/components/menu/demo/index.md +1 -44
- package/components/menu/demo/readme.html +49 -0
- package/components/menu/demo/readme.md +145 -0
- package/components/radio/README.md +56 -87
- package/components/radio/demo/index.md +0 -45
- package/components/radio/demo/readme.html +49 -0
- package/components/radio/demo/readme.md +137 -0
- package/components/select/README.md +57 -100
- package/components/select/demo/api.md +1 -1
- package/components/select/demo/api.min.js +5 -4
- package/components/select/demo/index.md +0 -53
- package/components/select/demo/index.min.js +5 -4
- package/components/select/demo/readme.html +49 -0
- package/components/select/demo/readme.md +143 -0
- package/components/select/dist/auro-select.d.ts +1 -1
- package/components/select/dist/index.js +5 -4
- package/components/select/dist/registered.js +5 -4
- package/package.json +3 -2
|
@@ -4359,7 +4359,7 @@ let AuroIcon$1 = class AuroIcon extends BaseIcon$1 {
|
|
|
4359
4359
|
|
|
4360
4360
|
var iconVersion$1 = '6.1.2';
|
|
4361
4361
|
|
|
4362
|
-
var styleCss$4 = 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$4 = 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$4 = 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 = '
|
|
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">
|
|
@@ -4883,7 +4884,7 @@ class AuroSelect extends r$9 {
|
|
|
4883
4884
|
},
|
|
4884
4885
|
|
|
4885
4886
|
/**
|
|
4886
|
-
* If declared, make
|
|
4887
|
+
* If declared, make bib.fullscreen.headline in HeadingDisplay.
|
|
4887
4888
|
* Otherwise, Heading 600
|
|
4888
4889
|
*/
|
|
4889
4890
|
largeFullscreenHeadline: {
|
|
@@ -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>
|
|
@@ -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 -->
|
|
@@ -37,7 +37,7 @@ export class AuroSelect extends LitElement {
|
|
|
37
37
|
reflect: boolean;
|
|
38
38
|
};
|
|
39
39
|
/**
|
|
40
|
-
* If declared, make
|
|
40
|
+
* If declared, make bib.fullscreen.headline in HeadingDisplay.
|
|
41
41
|
* Otherwise, Heading 600
|
|
42
42
|
*/
|
|
43
43
|
largeFullscreenHeadline: {
|
|
@@ -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 = '
|
|
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">
|
|
@@ -4883,7 +4884,7 @@ class AuroSelect extends r$9 {
|
|
|
4883
4884
|
},
|
|
4884
4885
|
|
|
4885
4886
|
/**
|
|
4886
|
-
* If declared, make
|
|
4887
|
+
* If declared, make bib.fullscreen.headline in HeadingDisplay.
|
|
4887
4888
|
* Otherwise, Heading 600
|
|
4888
4889
|
*/
|
|
4889
4890
|
largeFullscreenHeadline: {
|
|
@@ -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 = '
|
|
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">
|
|
@@ -4883,7 +4884,7 @@ class AuroSelect extends r$9 {
|
|
|
4883
4884
|
},
|
|
4884
4885
|
|
|
4885
4886
|
/**
|
|
4886
|
-
* If declared, make
|
|
4887
|
+
* If declared, make bib.fullscreen.headline in HeadingDisplay.
|
|
4887
4888
|
* Otherwise, Heading 600
|
|
4888
4889
|
*/
|
|
4889
4890
|
largeFullscreenHeadline: {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@aurodesignsystem/auro-formkit",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
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"
|