@aurodesignsystem-dev/auro-formkit 0.0.0-pr1457.1 → 0.0.0-pr1457.2
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/components/checkbox/demo/accessibility.html +1 -1
- package/components/checkbox/demo/api.html +2 -1
- package/components/checkbox/demo/customize.html +1 -1
- package/components/checkbox/demo/demo-support.min.js +60 -0
- package/components/checkbox/demo/design.html +2 -1
- package/components/checkbox/demo/getting-started.html +1 -1
- package/components/checkbox/demo/getting-started.md +154 -0
- package/components/checkbox/demo/index.html +1 -1
- package/components/checkbox/demo/index.min.js +3 -2
- package/components/checkbox/demo/install.html +49 -0
- package/components/checkbox/demo/keyboard-behavior.html +1 -1
- package/components/checkbox/demo/pages.json +1 -0
- package/components/checkbox/demo/readme.html +2 -1
- package/components/checkbox/demo/styles.min.css +1 -1
- package/components/checkbox/demo/voiceover.html +1 -1
- package/components/checkbox/dist/auro-checkbox.d.ts +1 -0
- package/components/checkbox/dist/index.js +3 -2
- package/components/checkbox/dist/registered.js +3 -2
- package/components/combobox/demo/accessibility.html +1 -3
- package/components/combobox/demo/api.html +2 -3
- package/components/combobox/demo/customize.html +1 -1
- package/components/combobox/demo/demo-support.min.js +60 -0
- package/components/combobox/demo/design.html +2 -3
- package/components/combobox/demo/getting-started.html +1 -1
- package/components/combobox/demo/index.html +1 -1
- package/components/combobox/demo/install.html +50 -0
- package/components/combobox/demo/keyboard-behavior.html +1 -3
- package/components/combobox/demo/pages.json +1 -0
- package/components/combobox/demo/readme.html +2 -3
- package/components/combobox/demo/registered.min.js +5 -4
- package/components/combobox/demo/styles.min.css +1 -1
- package/components/combobox/demo/voiceover.html +1 -3
- package/components/combobox/dist/index.js +5 -4
- package/components/combobox/dist/registered.js +5 -4
- package/components/counter/README.md +21 -47
- package/components/counter/demo/accessibility.html +49 -0
- package/components/counter/demo/accessibility.md +34 -0
- package/components/counter/demo/api.html +13 -21
- package/components/counter/demo/api.md +49 -1299
- package/components/counter/demo/api.min.js +1 -8390
- package/components/counter/demo/auro-counter-group.min.js +8392 -0
- package/components/counter/demo/customize.html +53 -0
- package/components/counter/demo/customize.md +650 -0
- package/components/counter/demo/demo-support.js +1 -0
- package/components/counter/demo/demo-support.min.js +55792 -0
- package/components/counter/demo/design.html +52 -0
- package/components/counter/demo/design.md +192 -0
- package/components/counter/demo/getting-started.html +54 -0
- package/components/counter/demo/getting-started.md +482 -0
- package/components/counter/demo/index.html +14 -20
- package/components/counter/demo/index.md +117 -51
- package/components/counter/demo/index.min.js +1 -8390
- package/components/{dropdown/demo/keyboardBehavior.html → counter/demo/keyboard-behavior.html} +9 -42
- package/components/counter/demo/keyboardBehavior.html +7 -40
- package/components/counter/demo/pages.json +1 -0
- package/components/counter/demo/readme.html +12 -16
- package/components/counter/demo/readme.md +21 -47
- package/components/counter/demo/styles.min.css +1 -0
- package/components/counter/demo/styles.scss +1 -0
- package/components/counter/demo/voiceover.html +51 -0
- package/components/counter/demo/voiceover.md +80 -0
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/demo/accessibility.html +2 -3
- package/components/datepicker/demo/api.html +2 -2
- package/components/datepicker/demo/auro-datepicker.min.js +5 -4
- package/components/datepicker/demo/customize.html +1 -1
- package/components/datepicker/demo/demo-support.min.js +60 -0
- package/components/datepicker/demo/design.html +3 -4
- package/components/datepicker/demo/getting-started.html +1 -1
- package/components/datepicker/demo/index.html +1 -1
- package/components/datepicker/demo/keyboard-behavior.html +2 -4
- package/components/datepicker/demo/pages.json +1 -0
- package/components/datepicker/demo/readme.html +2 -2
- package/components/datepicker/demo/styles.min.css +1 -1
- package/components/datepicker/demo/voiceover.html +2 -4
- package/components/datepicker/dist/index.js +5 -4
- package/components/datepicker/dist/registered.js +5 -4
- package/components/dropdown/README.md +0 -21
- package/components/dropdown/demo/accessibility.html +49 -0
- package/components/dropdown/demo/accessibility.md +45 -0
- package/components/dropdown/demo/api.html +11 -20
- package/components/dropdown/demo/api.md +40 -1364
- package/components/dropdown/demo/api.min.js +2 -5098
- package/components/dropdown/demo/auro-dropdown.min.js +5099 -0
- package/components/dropdown/demo/customize.html +54 -0
- package/components/dropdown/demo/customize.md +780 -0
- package/components/dropdown/demo/demo-support.js +1 -0
- package/components/dropdown/demo/demo-support.min.js +55792 -0
- package/components/dropdown/demo/design.html +52 -0
- package/components/dropdown/demo/design.md +186 -0
- package/components/dropdown/demo/getting-started.html +54 -0
- package/components/dropdown/demo/getting-started.md +463 -0
- package/components/dropdown/demo/index.html +12 -21
- package/components/dropdown/demo/index.md +78 -233
- package/components/dropdown/demo/index.min.js +1 -5097
- package/components/dropdown/demo/keyboard-behavior.html +48 -0
- package/components/dropdown/demo/pages.json +1 -0
- package/components/dropdown/demo/readme.html +8 -21
- package/components/dropdown/demo/readme.md +0 -21
- package/components/dropdown/demo/styles.min.css +1 -0
- package/components/dropdown/demo/styles.scss +1 -0
- package/components/dropdown/demo/voiceover.html +51 -0
- package/components/dropdown/demo/voiceover.md +63 -0
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/README.md +9 -9
- package/components/form/demo/accessibility.html +51 -0
- package/components/form/demo/accessibility.md +23 -0
- package/components/form/demo/api.html +12 -15
- package/components/form/demo/api.md +14 -290
- package/components/form/demo/api.min.js +2 -71921
- package/components/form/demo/auro-form.min.js +718 -0
- package/components/form/demo/autocomplete.html +2 -2
- package/components/form/demo/customize.html +54 -0
- package/components/form/demo/customize.md +246 -0
- package/components/form/demo/demo-support.js +1 -0
- package/components/form/demo/demo-support.min.js +55792 -0
- package/components/form/demo/getting-started.html +54 -0
- package/components/form/demo/getting-started.md +434 -0
- package/components/form/demo/index.html +13 -15
- package/components/form/demo/index.md +67 -97
- package/components/form/demo/index.min.js +2 -71921
- package/components/form/demo/keyboard-behavior.html +51 -0
- package/components/form/demo/pages.json +1 -0
- package/components/form/demo/readme.html +13 -18
- package/components/form/demo/readme.md +9 -9
- package/components/form/demo/registerDemoDeps.min.js +71212 -0
- package/components/form/demo/styles.min.css +1 -0
- package/components/form/demo/styles.scss +1 -0
- package/components/form/demo/voiceover.html +51 -0
- package/components/form/demo/voiceover.md +36 -0
- package/components/form/demo/working.html +3 -2
- package/components/input/demo/accessibility.html +1 -1
- package/components/input/demo/api.html +1 -1
- package/components/input/demo/auro-input.min.js +3 -2
- package/components/input/demo/customize.html +1 -1
- package/components/input/demo/demo-support.min.js +60 -0
- package/components/input/demo/design.html +2 -1
- package/components/input/demo/getting-started.html +1 -1
- package/components/input/demo/index.html +1 -1
- package/components/input/demo/keyboard-behavior.html +2 -1
- package/components/input/demo/pages.json +1 -0
- package/components/input/demo/readme.html +2 -2
- package/components/input/demo/styles.min.css +1 -1
- package/components/input/demo/voiceover.html +1 -1
- package/components/input/dist/base-input.d.ts +1 -0
- package/components/input/dist/index.js +3 -2
- package/components/input/dist/registered.js +3 -2
- package/components/menu/README.md +8 -26
- package/components/menu/demo/accessibility.html +53 -0
- package/components/menu/demo/accessibility.md +34 -0
- package/components/menu/demo/api.html +12 -18
- package/components/menu/demo/api.md +43 -1102
- package/components/menu/demo/api.min.js +2 -2288
- package/components/menu/demo/auro-menu.min.js +2289 -0
- package/components/menu/demo/customize.html +54 -0
- package/components/menu/demo/customize.md +637 -0
- package/components/menu/demo/demo-support.js +1 -0
- package/components/menu/demo/demo-support.min.js +55792 -0
- package/components/menu/demo/design.html +53 -0
- package/components/menu/demo/design.md +81 -0
- package/components/menu/demo/getting-started.html +54 -0
- package/components/menu/demo/getting-started.md +322 -0
- package/components/menu/demo/index.html +14 -20
- package/components/menu/demo/index.md +26 -63
- package/components/menu/demo/index.min.js +1 -2287
- package/components/menu/demo/keyboard-behavior.html +53 -0
- package/components/menu/demo/pages.json +1 -0
- package/components/menu/demo/readme.html +12 -16
- package/components/menu/demo/readme.md +8 -26
- package/components/menu/demo/styles.min.css +1 -0
- package/components/menu/demo/styles.scss +1 -0
- package/components/menu/demo/voiceover.html +53 -0
- package/components/menu/demo/voiceover.md +33 -0
- package/components/radio/demo/accessibility.html +2 -1
- package/components/radio/demo/api.html +2 -1
- package/components/radio/demo/customize.html +2 -1
- package/components/radio/demo/demo-support.min.js +60 -0
- package/components/radio/demo/design.html +2 -1
- package/components/radio/demo/getting-started.html +2 -1
- package/components/radio/demo/getting-started.md +154 -0
- package/components/radio/demo/index.html +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/demo/keyboard-behavior.html +2 -1
- package/components/radio/demo/pages.json +1 -0
- package/components/radio/demo/readme.html +3 -3
- package/components/radio/demo/styles.min.css +1 -1
- package/components/radio/demo/voiceover.html +2 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/accessibility.html +1 -1
- package/components/select/demo/api.html +2 -1
- package/components/select/demo/customize.html +1 -1
- package/components/select/demo/demo-support.min.js +60 -0
- package/components/select/demo/design.html +2 -1
- package/components/select/demo/getting-started.html +1 -1
- package/components/select/demo/index.html +1 -1
- package/components/select/demo/install.html +50 -0
- package/components/select/demo/keyboard-behavior.html +1 -1
- package/components/select/demo/keyboardBehavior.html +1 -1
- package/components/select/demo/layout.html +2 -1
- package/components/select/demo/pages.json +1 -0
- package/components/select/demo/readme.html +2 -1
- package/components/select/demo/registered.min.js +2 -2
- package/components/select/demo/styles.min.css +1 -1
- package/components/select/demo/voiceover.html +1 -1
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +249 -246
- package/package.json +1 -1
- package/components/counter/demo/keyboard-behavior.md +0 -127
- package/components/dropdown/demo/keyboard-behavior.md +0 -72
- package/components/form/demo/keyboard-behavior.md +0 -38
- package/components/menu/demo/keyboard-behavior.md +0 -18
|
@@ -31,15 +31,13 @@
|
|
|
31
31
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
32
|
|
|
33
33
|
<!-- Demo Specific Styles -->
|
|
34
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
34
|
<link rel="stylesheet" type="text/css" href="./styles.min.css" />
|
|
37
35
|
</head>
|
|
38
36
|
<body class="auro-markdown">
|
|
39
37
|
<main></main>
|
|
40
38
|
|
|
41
39
|
<script type="module">
|
|
42
|
-
import { renderPage } from './demo-support.js';
|
|
40
|
+
import { renderPage } from './demo-support.min.js';
|
|
43
41
|
await renderPage('./design.md');
|
|
44
42
|
</script>
|
|
45
43
|
|
|
@@ -47,6 +45,7 @@
|
|
|
47
45
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
48
46
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
49
47
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
48
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
50
49
|
|
|
51
50
|
<script src="./index.min.js" data-demo-script="true" type="module"></script>
|
|
52
51
|
</body>
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
43
43
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
|
|
44
44
|
<script type="module">
|
|
45
|
-
import { renderPage } from './demo-support.js';
|
|
45
|
+
import { renderPage } from './demo-support.min.js';
|
|
46
46
|
await renderPage('./getting-started.md');
|
|
47
47
|
import { initExamples } from "./getting-started.min.js";
|
|
48
48
|
initExamples();
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
46
46
|
|
|
47
47
|
<script type="module">
|
|
48
|
-
import { renderPage } from './demo-support.js';
|
|
48
|
+
import { renderPage } from './demo-support.min.js';
|
|
49
49
|
await renderPage('./index.md');
|
|
50
50
|
import { initExamples } from "./index.min.js";
|
|
51
51
|
initExamples();
|
|
@@ -0,0 +1,50 @@
|
|
|
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
|
+
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 Demo | auro-combobox | Install</title>
|
|
20
|
+
|
|
21
|
+
<!-- highlight.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-combobox's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="./styles.min.css" />
|
|
35
|
+
</head>
|
|
36
|
+
<body class="auro-markdown">
|
|
37
|
+
<main></main>
|
|
38
|
+
|
|
39
|
+
<script type="module">
|
|
40
|
+
import { renderPage } from './demo-support.min.js';
|
|
41
|
+
await renderPage('./install.md');
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
45
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
47
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
48
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
49
|
+
</body>
|
|
50
|
+
</html>
|
|
@@ -31,8 +31,6 @@
|
|
|
31
31
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
32
|
|
|
33
33
|
<!-- Demo Specific Styles -->
|
|
34
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
34
|
<link rel="stylesheet" type="text/css" href="./styles.min.css" />
|
|
37
35
|
<style>
|
|
38
36
|
table {
|
|
@@ -64,7 +62,7 @@
|
|
|
64
62
|
<main></main>
|
|
65
63
|
|
|
66
64
|
<script type="module">
|
|
67
|
-
import { renderPage } from './demo-support.js';
|
|
65
|
+
import { renderPage } from './demo-support.min.js';
|
|
68
66
|
await renderPage('./keyboard-behavior.md');
|
|
69
67
|
</script>
|
|
70
68
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","install.md","keyboard-behavior.md","voiceover.md"]
|
|
@@ -31,20 +31,19 @@
|
|
|
31
31
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
32
|
|
|
33
33
|
<!-- Demo Specific Styles -->
|
|
34
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
34
|
<link rel="stylesheet" type="text/css" href="./styles.min.css" />
|
|
37
35
|
</head>
|
|
38
36
|
<body class="auro-markdown">
|
|
39
37
|
<main></main>
|
|
40
38
|
|
|
41
39
|
<script type="module">
|
|
42
|
-
import { renderPage } from './demo-support.js';
|
|
40
|
+
import { renderPage } from './demo-support.min.js';
|
|
43
41
|
await renderPage('./readme.md');
|
|
44
42
|
</script>
|
|
45
43
|
<script src="./index.min.js" data-demo-script="true" type="module"></script>
|
|
46
44
|
|
|
47
45
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
48
46
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
47
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
49
48
|
</body>
|
|
50
49
|
</html>
|
|
@@ -5278,7 +5278,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
5278
5278
|
}
|
|
5279
5279
|
};
|
|
5280
5280
|
|
|
5281
|
-
var formkitVersion$2 = '
|
|
5281
|
+
var formkitVersion$2 = '202605051928';
|
|
5282
5282
|
|
|
5283
5283
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5284
5284
|
static get properties() {
|
|
@@ -11750,7 +11750,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
11750
11750
|
* The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
11751
11751
|
*/
|
|
11752
11752
|
id: {
|
|
11753
|
-
type: String
|
|
11753
|
+
type: String,
|
|
11754
|
+
reflect: true
|
|
11754
11755
|
},
|
|
11755
11756
|
|
|
11756
11757
|
/**
|
|
@@ -13029,7 +13030,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
13029
13030
|
}
|
|
13030
13031
|
};
|
|
13031
13032
|
|
|
13032
|
-
var formkitVersion$1 = '
|
|
13033
|
+
var formkitVersion$1 = '202605051928';
|
|
13033
13034
|
|
|
13034
13035
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13035
13036
|
// See LICENSE in the project root for license information.
|
|
@@ -14094,7 +14095,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
14094
14095
|
}
|
|
14095
14096
|
}
|
|
14096
14097
|
|
|
14097
|
-
var formkitVersion = '
|
|
14098
|
+
var formkitVersion = '202605051928';
|
|
14098
14099
|
|
|
14099
14100
|
var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
14100
14101
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import'@aurodesignsystem/webcorestylesheets/dist/elementDemoStyles.css';@import'@aurodesignsystem/webcorestylesheets/dist/demoWrapper.css'
|
|
1
|
+
.container{display:grid;margin-left:auto;margin-right:auto;max-width:1232px}.pagecontainer{padding-left:1rem;padding-right:1rem;margin-left:auto;margin-right:auto;max-width:1232px}@media screen and (min-width: 576px){.pagecontainer{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pagecontainer{padding-left:1.5rem;padding-right:1.5rem}}@media screen and (min-width: 1024px){.pagecontainer{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pagecontainer{padding-left:2rem;padding-right:2rem}}.pagecontainer.breadcrumbs{margin-block-end:3.35rem}.pageLayout-2colAnchorNav{display:grid;margin-left:auto;margin-right:auto;padding-left:1rem;padding-right:1rem;max-width:1232px;gap:2rem;grid-template-areas:"breadcrumbs" "anchornav" "main"}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 576px){.pageLayout-2colAnchorNav{padding-left:1rem;padding-right:1rem}}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs" "main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colAnchorNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colAnchorNav .breadcrumbs{grid-area:breadcrumbs}.pageLayout-2colAnchorNav .main{grid-area:main}.pageLayout-2colAnchorNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-2colAnchorNav .anchornav{grid-area:anchornav}@media screen and (min-width: 768px){.pageLayout-2colAnchorNav .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}.pageLayout-2colSideNav{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;gap:2rem;grid-template-areas:"breadcrumbs" "sidenav" "main"}@media screen and (min-width: 576px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-2colSideNav{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto;grid-template-areas:"breadcrumbs breadcrumbs" "sidenav main"}}@media screen and (min-width: 1024px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-2colSideNav{padding-left:2rem;padding-right:2rem}}.pageLayout-2colSideNav .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .sidenav{grid-area:sidenav;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-2colSideNav .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-2colSideNav .main{padding-left:0;padding-right:0}}.pageLayout-2colSideNav .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col{display:grid;margin-left:auto;margin-right:auto;padding-left:0;padding-right:0;max-width:1232px;gap:2rem;grid-template-areas:"breadcrumbs" "sidenav" "anchornav" "main"}@media screen and (min-width: 576px){.pageLayout-3col{gap:var(--ds-grid-gutter-sm, 1rem)}}@media screen and (min-width: 768px){.pageLayout-3col{gap:var(--ds-grid-gutter-md, 1.5rem)}}@media screen and (min-width: 1024px){.pageLayout-3col{gap:var(--ds-grid-gutter-lg, 1.5rem)}}@media screen and (min-width: 1232px){.pageLayout-3col{gap:var(--ds-grid-gutter-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-3col{padding-left:1.5rem;padding-right:1.5rem;grid-template-columns:var(--fixed-nav-width, 280px) auto var(--fixed-anchor-width, 168px);grid-template-areas:"breadcrumbs breadcrumbs breadcrumbs" "sidenav main anchornav"}}@media screen and (min-width: 1024px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}@media screen and (min-width: 1232px){.pageLayout-3col{padding-left:2rem;padding-right:2rem}}.pageLayout-3col .breadcrumbs{grid-area:breadcrumbs;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .breadcrumbs{padding-left:0;padding-right:0}}.pageLayout-3col .sidenav{grid-area:sidenav;z-index:1;background-color:var(--ds-color-container-primary-default, #ffffff);padding-left:1rem;padding-right:1rem;position:sticky;top:0;--align-self: stretch;align-self:var(--align-self)}@media screen and (min-width: 768px){.pageLayout-3col .sidenav{padding-left:0;padding-right:0;background-color:transparent}}.pageLayout-3col .main{grid-area:main;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .main{padding-left:0;padding-right:0}}.pageLayout-3col .main *{scroll-margin-top:var(--ds-grid-margin-md, 1.5rem)}.pageLayout-3col .anchornav{grid-area:anchornav;padding-left:1rem;padding-right:1rem}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{position:sticky;top:0;max-height:100vh;padding-top:var(--ds-grid-margin-xl, 2rem)}}@media screen and (min-width: 768px){.pageLayout-3col .anchornav{padding-left:0;padding-right:0}}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-display-weight, 100);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-heading-medium-weight, 300);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff")}@font-face{font-family:"AS Circular";font-weight:var(--ds-text-body-default-weight, 500);font-style:normal;font-display:fallback;src:url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"),url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff")}html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}main{display:block}hr{overflow:visible;box-sizing:content-box;height:0}pre{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}a{background-color:transparent}abbr[title]{text-decoration:underline;text-decoration:underline dotted;border-bottom:none}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:var(--ds-text-body-size-default, 1rem)}sub,sup{position:relative;vertical-align:baseline;font-size:75%;line-height:0}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:100%;line-height:var(--ds-text-body-height-default, 1.5rem)}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:none;appearance:none}fieldset{padding:.35em .75em .625em}legend{display:table;box-sizing:border-box;max-width:100%;padding:0;white-space:normal;color:inherit}progress{vertical-align:baseline}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield;appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button;appearance:button}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}.heading,.auro-markdown h1,.auro-markdown h2,.auro-markdown h3{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,.auro-markdown h1{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,.auro-markdown h1{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,.auro-markdown h1{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,.auro-markdown h2{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,.auro-markdown h2{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,.auro-markdown h2{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,.auro-markdown h3{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,.auro-markdown h3{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,.auro-markdown h3{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,.auro-markdown h4{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,.auro-markdown h4{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,.auro-markdown h4{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)}blockquote{margin-left:0;border-left:1px solid var(--ds-color-border-ui-active-default, #225296);padding:var(--ds-size-100, 0.5rem);padding-left:var(--ds-size-400, 2rem);color:var(--ds-color-text-secondary-default, #525252);font-weight:200;margin-top:var(--ds-size-300, 1.5rem);margin-bottom:var(--ds-size-300, 1.5rem)}blockquote p,blockquote .auro-markdown p,.auro-markdown blockquote p{line-height:2}blockquote p:last-child{margin-bottom:0}blockquote+p,.auro-markdown blockquote+p{margin-bottom:var(--ds-size-400, 2rem)}.auro_table,.auro-markdown table{display:block;overflow:scroll;width:auto;margin-bottom:var(--ds-size-400, 2rem);border-spacing:var(--ds-size-150, 0.75rem);border-collapse:collapse;font-weight:var(--ds-text-heading-display-weight, 100)}.auro_table tr:nth-child(even),.auro-markdown table tr:nth-child(even){background-color:var(--ds-color-container-secondary-default, #f7f7f7)}.auro_table th,.auro-markdown table th{text-align:left;font-weight:var(--ds-text-heading-default-weight, 500)}@media screen and (min-width: 576px){.auro_table,.auro-markdown table{display:table;width:100%}}.auro_table thead,.auro-markdown table thead{border-collapse:collapse;border-bottom:1px solid var(--ds-color-border-tertiary-default, #dddddd)}.auro_table th,.auro-markdown table th,.auro_table td,.auro-markdown table td{padding:var(--ds-size-200, 1rem)}*:focus-visible{outline:1px solid var(--ds-color-border-ui-focus-default, #2c67b5)}:focus:not(:focus-visible){outline:3px solid transparent}html{box-sizing:border-box;font-size:var(--ds-text-body-size-default, 1rem);-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body,.baseType{margin:0;color:var(--ds-color-text-primary-default, #2a2a2a);font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-variant-ligatures:no-common-ligatures;font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph{margin:0 0 1rem;line-height:var(--ds-text-body-height-default, 1.5rem)}.baseParagraph .hyperlink,.baseParagraph .auro-markdown a,.auro-markdown .baseParagraph a{text-decoration:underline}.hyperlink,.auro-markdown a{text-decoration:underline;color:var(--ds-color-text-ui-default-default, #2c67b5)}.hyperlink:visited,.auro-markdown a:visited{color:var(--ds-color-text-ui-default-default, #2c67b5)}.hyperlink--nav{display:block;text-decoration:none}.hyperlink--nav:not(.is-touching):hover{text-decoration:underline !important}.hyperlink--ondark{color:var(--ds-color-text-ui-default-inverse, #56bbde)}.hyperlink--ondark:not(.is-touching):hover{color:var(--ds-color-text-ui-hover-inverse, #a8e9f7)}.hyperlink--ondark:visited{color:var(--ds-color-text-ui-default-inverse, #56bbde)}.hyperlink:not(.is-touching):hover,.auro-markdown a:not(.is-touching):hover{text-decoration:none;color:var(--ds-color-text-ui-hover-default, #193d73)}img{max-width:100%}small,.type--small{font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem)}.fineprint{font-family:var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);font-size:var(--ds-text-body-size-xs, 0.75rem);line-height:var(--ds-text-body-height-xs, 1rem);color:var(--ds-color-text-secondary-default, #525252)}.auro-markdown p:last-child{margin-bottom:0}.hljs{background-color:unset !important;padding:unset !important}pre{background:var(--ds-color-brand-gray-100, #f7f7f7) !important;border:unset !important;padding:var(--ds-size-200) !important;margin-bottom:var(--ds-size-300, 1.5rem) !important;border-style:solid !important;border-width:1px !important;border-color:var(--ds-color-border-secondary-default) !important;border-radius:.5rem;margin-top:var(--ds-size-200) !important;box-shadow:inset 0 2px 6px rgba(0, 0, 0, 0.15),0 1px 2px rgba(0, 0, 0, 0.1) !important;overflow-x:scroll !important}pre code{font-size:.85rem !important;font-family:monospace;text-shadow:none}.pre-wrapper:last-of-type pre{margin-bottom:0 !important}code:not(.html):not(.css):not(.js):not([class*=language-]){color:var(--ds-color-brand-flamingo-500, #b82b47);margin-bottom:0 !important}.token.operator{background-color:unset !important}auro-accordion:not(.section){margin-top:1rem !important;display:block}auro-accordion:not(.section):nth-child(2){margin-block-start:0}auro-accordion[class~=section]::part(accordion){padding-right:2px;display:block}.accordion-content{padding-top:1rem}.token.operator{background-color:unset !important}auro-accordion:not(auro-accordion-group *){margin-top:1rem !important;display:block}.pre-wrapper{position:relative}.copy-btn{position:absolute;top:6px;right:6px;opacity:0;transition:opacity .15s ease;background:var(--ds-color-container-primary-default, #fff);border:1px solid var(--ds-color-border-secondary-default, #ccc);border-radius:4px;padding:4px 8px;cursor:pointer;font-size:12px;line-height:1;color:var(--ds-color-text-secondary-default, #333);z-index:1}.copy-btn:hover{background:var(--ds-color-container-secondary-default, #f0f0f0)}.pre-wrapper:hover .copy-btn{opacity:1}.exampleWrapper{background-color:var(--ds-basic-color-surface-default);padding:1rem;border-radius:.5rem;margin-top:1rem}.exampleWrapper--ondark{background-color:var(--ds-basic-color-surface-inverse);padding:1rem;border-radius:.5rem;margin-top:1rem}table{--ds-color-container-secondary-default: transparent}table.compressed{width:unset !important;margin:var(--ds-size-50) 0 var(--ds-size-100) !important}table.compressed th,table.compressed td{padding:var(--ds-size-50) !important}tr:not(:last-of-type){border-bottom:1px solid var(--ds-color-border-tertiary-default)}body{padding:0;display:flex;flex-direction:column;height:100vh}main{display:flex;flex-direction:column;min-height:0;flex:1}.contentWrapper{display:flex;flex-direction:row-reverse;gap:25px;align-items:flex-start}.contentWrapper>nav{width:200px;flex-shrink:0;position:sticky;top:0;height:100vh;overflow-y:auto}.contentWrapper>nav auro-nav{display:block}.mainContent{flex:1;display:flex;flex-direction:column;flex-basis:0;box-sizing:border-box;min-width:0}.scrollWrapper{flex:1;min-height:0}auro-nav{max-width:200px;position:sticky;top:2rem;align-self:flex-start;max-height:calc(100vh - 4rem);overflow-y:auto}auro-anchorlink[class~=level2]{padding-left:var(--ds-size-200)}p:first-of-type{margin-top:0}.note,.warning{margin:10px 0;padding:10px;border-radius:6px;font-style:italic}.note{background-color:var(--ds-basic-color-surface-neutral-subtle);color:var(--ds-basic-color-texticon-muted)}.warning{background-color:var(--ds-basic-color-status-error-subtle);color:var(--ds-basic-color-status-error)}auro-header{margin-top:1rem}body{padding:var(--ds-size-400, 2rem)}main{margin:0 auto;max-width:64rem}#page-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;padding:8px 16px;background:var(--ds-color-background-lightest, #fff);border-bottom:1px solid var(--ds-color-border-subtle, #ddd);font-family:var(--ds-text-body-default-font, sans-serif);font-size:.8rem}
|
|
@@ -31,8 +31,6 @@
|
|
|
31
31
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
32
|
|
|
33
33
|
<!-- Demo Specific Styles -->
|
|
34
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
|
|
36
34
|
<link rel="stylesheet" type="text/css" href="./styles.min.css" />
|
|
37
35
|
<style>
|
|
38
36
|
table {
|
|
@@ -48,7 +46,7 @@
|
|
|
48
46
|
<main></main>
|
|
49
47
|
|
|
50
48
|
<script type="module">
|
|
51
|
-
import { renderPage } from './demo-support.js';
|
|
49
|
+
import { renderPage } from './demo-support.min.js';
|
|
52
50
|
await renderPage('./voiceover.md');
|
|
53
51
|
</script>
|
|
54
52
|
|
|
@@ -5211,7 +5211,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
5211
5211
|
}
|
|
5212
5212
|
};
|
|
5213
5213
|
|
|
5214
|
-
var formkitVersion$2 = '
|
|
5214
|
+
var formkitVersion$2 = '202605051928';
|
|
5215
5215
|
|
|
5216
5216
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
5217
5217
|
static get properties() {
|
|
@@ -11676,7 +11676,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
11676
11676
|
* The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
11677
11677
|
*/
|
|
11678
11678
|
id: {
|
|
11679
|
-
type: String
|
|
11679
|
+
type: String,
|
|
11680
|
+
reflect: true
|
|
11680
11681
|
},
|
|
11681
11682
|
|
|
11682
11683
|
/**
|
|
@@ -12955,7 +12956,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
12955
12956
|
}
|
|
12956
12957
|
};
|
|
12957
12958
|
|
|
12958
|
-
var formkitVersion$1 = '
|
|
12959
|
+
var formkitVersion$1 = '202605051928';
|
|
12959
12960
|
|
|
12960
12961
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12961
12962
|
// See LICENSE in the project root for license information.
|
|
@@ -14020,7 +14021,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
14020
14021
|
}
|
|
14021
14022
|
}
|
|
14022
14023
|
|
|
14023
|
-
var formkitVersion = '
|
|
14024
|
+
var formkitVersion = '202605051928';
|
|
14024
14025
|
|
|
14025
14026
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
14026
14027
|
|
|
@@ -5211,7 +5211,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
5211
5211
|
}
|
|
5212
5212
|
};
|
|
5213
5213
|
|
|
5214
|
-
var formkitVersion$2 = '
|
|
5214
|
+
var formkitVersion$2 = '202605051928';
|
|
5215
5215
|
|
|
5216
5216
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
5217
5217
|
static get properties() {
|
|
@@ -11676,7 +11676,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
11676
11676
|
* The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
11677
11677
|
*/
|
|
11678
11678
|
id: {
|
|
11679
|
-
type: String
|
|
11679
|
+
type: String,
|
|
11680
|
+
reflect: true
|
|
11680
11681
|
},
|
|
11681
11682
|
|
|
11682
11683
|
/**
|
|
@@ -12955,7 +12956,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
12955
12956
|
}
|
|
12956
12957
|
};
|
|
12957
12958
|
|
|
12958
|
-
var formkitVersion$1 = '
|
|
12959
|
+
var formkitVersion$1 = '202605051928';
|
|
12959
12960
|
|
|
12960
12961
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12961
12962
|
// See LICENSE in the project root for license information.
|
|
@@ -14020,7 +14021,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
14020
14021
|
}
|
|
14021
14022
|
}
|
|
14022
14023
|
|
|
14023
|
-
var formkitVersion = '
|
|
14024
|
+
var formkitVersion = '202605051928';
|
|
14024
14025
|
|
|
14025
14026
|
var styleCss$1 = css`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
14026
14027
|
|
|
@@ -21,7 +21,7 @@ The following sections are editable by making changes to the following files:
|
|
|
21
21
|
|
|
22
22
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/description.md) -->
|
|
23
23
|
<!-- The below content is automatically added from ./docs/partials/description.md -->
|
|
24
|
-
The
|
|
24
|
+
The <code>auro-counter</code> component is a ui element that enables a way to increment or decrement a single digit value. Common use case is inside the <code>auro-counter-group</code> to facilitate a collection of counters to add passenger types to a flight.
|
|
25
25
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
26
26
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/readmeAddlInfo.md) -->
|
|
27
27
|
<!-- The below content is automatically added from ./docs/partials/readmeAddlInfo.md -->
|
|
@@ -84,11 +84,9 @@ To only develop a single component, use the `--filter` flag:
|
|
|
84
84
|
<pre class="language-shell"><code class="language-shell">npx turbo dev --filter=@aurodesignsystem/auro-input</code></pre>
|
|
85
85
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
86
86
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./docs/partials/customRegistration.md) -->
|
|
87
|
-
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
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.
|
|
87
|
+
<!-- The below content is automatically added from ./docs/partials/customRegistration.md -->
|
|
88
|
+
<auro-header level="4">Custom Component Registration for Version Management</auro-header>
|
|
89
|
+
There are two key parts to every Auro component: the <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes">class</auro-hyperlink> 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.
|
|
92
90
|
|
|
93
91
|
You can do this by importing only the component class and using the `register(name)` method with a unique name:
|
|
94
92
|
|
|
@@ -99,45 +97,21 @@ import { AuroCounter, AuroCounterGroup } from '@aurodesignsystem/auro-formkit/au
|
|
|
99
97
|
AuroCounter.register('custom-counter');
|
|
100
98
|
AuroCounterGroup.register('custom-counter-group');</code></pre>
|
|
101
99
|
|
|
102
|
-
This will create a new custom element
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
<
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
<span slot="trigger">See code</span>
|
|
120
|
-
|
|
121
|
-
<pre class="language-html"><code class="language-html"> <custom-counter-group>
|
|
122
|
-
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
123
|
-
<div slot="label">Passengers</div>
|
|
124
|
-
<custom-counter>
|
|
125
|
-
Adults
|
|
126
|
-
<span slot="description">18 years or older</span>
|
|
127
|
-
</custom-counter>
|
|
128
|
-
<custom-counter>
|
|
129
|
-
Children
|
|
130
|
-
<span slot="description">2-17 years</span>
|
|
131
|
-
</custom-counter>
|
|
132
|
-
</custom-counter-group>
|
|
133
|
-
|
|
134
|
-
```html
|
|
135
|
-
<custom-checkbox-group>
|
|
136
|
-
<span slot="legend">Form label goes here</span>
|
|
137
|
-
<custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
|
|
138
|
-
<custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
|
|
139
|
-
<custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
|
|
140
|
-
<custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
|
|
141
|
-
</custom-checkbox-group></code></pre>
|
|
142
|
-
</auro-accordion>
|
|
100
|
+
This will create a new custom element <code><custom-counter></code> and <code><custom-counter-group></code> that behaves exactly like <code><auro-counter></code> and <code><auro-counter-group></code>, allowing both to coexist on the same page without interfering with each other.
|
|
101
|
+
|
|
102
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/custom.html) -->
|
|
103
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/custom.html -->
|
|
104
|
+
<pre class="language-html"><code class="language-html"><custom-counter-group>
|
|
105
|
+
<div slot="bib.fullscreen.headline">Passengers</div>
|
|
106
|
+
<div slot="label">Passengers</div>
|
|
107
|
+
<custom-counter>
|
|
108
|
+
Adults
|
|
109
|
+
<span slot="description">18 years or older</span>
|
|
110
|
+
</custom-counter>
|
|
111
|
+
<custom-counter>
|
|
112
|
+
Children
|
|
113
|
+
<span slot="description">2-17 years</span>
|
|
114
|
+
</custom-counter>
|
|
115
|
+
</custom-counter-group></code></pre>
|
|
116
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
143
117
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
@@ -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/accessibility.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 Demo | auro-counter | Accessibility</title>
|
|
20
|
+
|
|
21
|
+
<!-- highlight.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
|
|
23
|
+
|
|
24
|
+
<!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
|
+
|
|
27
|
+
<!-- Design Token Alaska Theme -->
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
+
|
|
30
|
+
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
+
|
|
33
|
+
<!-- Demo Specific Styles -->
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="./styles.min.css" />
|
|
35
|
+
</head>
|
|
36
|
+
<body class="auro-markdown">
|
|
37
|
+
<main></main>
|
|
38
|
+
|
|
39
|
+
<script type="module">
|
|
40
|
+
import { renderPage } from './demo-support.min.js';
|
|
41
|
+
await renderPage('./accessibility.md');
|
|
42
|
+
</script>
|
|
43
|
+
|
|
44
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
45
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
47
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
48
|
+
</body>
|
|
49
|
+
</html>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<auro-header level="1" id="overview">Counter - Accessibility</auro-header>
|
|
2
|
+
<div class="contentWrapper">
|
|
3
|
+
<div class="mainContent">
|
|
4
|
+
<div class="scrollWrapper">
|
|
5
|
+
<section>
|
|
6
|
+
<auro-header level="2" id="ariaRoles">ARIA Roles and Attributes</auro-header>
|
|
7
|
+
<p>The <code>auro-counter</code> component uses the <code>spinbutton</code> role to convey its purpose to assistive technologies. Key ARIA attributes include:</p>
|
|
8
|
+
<ul>
|
|
9
|
+
<li><code>role="spinbutton"</code> — Identifies the element as a numeric spinner control.</li>
|
|
10
|
+
<li><code>aria-valuenow</code> — Reflects the current counter value.</li>
|
|
11
|
+
<li><code>aria-valuemin</code> — Reflects the minimum allowed value.</li>
|
|
12
|
+
<li><code>aria-valuemax</code> — Reflects the maximum allowed value.</li>
|
|
13
|
+
<li><code>aria-label</code> — Derived from the default slot content (counter label).</li>
|
|
14
|
+
</ul>
|
|
15
|
+
</section>
|
|
16
|
+
<section>
|
|
17
|
+
<auro-header level="2" id="accessibleLabels">Accessible Labels</auro-header>
|
|
18
|
+
<p>The increment and decrement buttons include accessible labels. Custom labels can be provided using the <code>ariaLabel.minus</code> and <code>ariaLabel.plus</code> slots to override the default button descriptions.</p>
|
|
19
|
+
</section>
|
|
20
|
+
<section>
|
|
21
|
+
<auro-header level="2" id="screenReader">Screen Reader Announcements</auro-header>
|
|
22
|
+
<p>When a user interacts with the counter, the updated value is announced via the <code>aria-valuenow</code> attribute. Screen readers will announce the counter label and current value when the element receives focus.</p>
|
|
23
|
+
</section>
|
|
24
|
+
<section>
|
|
25
|
+
<auro-header level="2" id="disabledState">Disabled State</auro-header>
|
|
26
|
+
<p>When a counter is disabled, the <code>aria-disabled</code> attribute is set, and the increment/decrement buttons become inoperable. Screen readers will announce the disabled state to the user.</p>
|
|
27
|
+
</section>
|
|
28
|
+
<section>
|
|
29
|
+
<auro-header level="2" id="dropdownA11y">Dropdown Accessibility</auro-header>
|
|
30
|
+
<p>When used as a dropdown (<code>isDropdown</code>), the counter group inherits dropdown accessibility patterns. The <code>ariaLabel.bib.close</code> slot provides an accessible label for the close button in fullscreen mode.</p>
|
|
31
|
+
</section>
|
|
32
|
+
</div>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
@@ -18,45 +18,37 @@
|
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
19
|
<title>Auro Web Component Demo | auro-counter</title>
|
|
20
20
|
|
|
21
|
-
<!--
|
|
22
|
-
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/
|
|
21
|
+
<!-- highlight.js Stylesheet -->
|
|
22
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.9.0/build/styles/github.min.css"/>
|
|
23
23
|
|
|
24
24
|
<!-- Legacy reference is still needed to support auro-counter's use of legacy token values at this time -->
|
|
25
25
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
26
26
|
|
|
27
27
|
<!-- Design Token Alaska Theme -->
|
|
28
28
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
29
|
-
|
|
29
|
+
|
|
30
30
|
<!-- Webcore Stylesheet Alaska Theme -->
|
|
31
31
|
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
32
|
-
|
|
32
|
+
|
|
33
33
|
<!-- Demo Specific Styles -->
|
|
34
|
-
<link rel="stylesheet" type="text/css" href="
|
|
35
|
-
|
|
36
|
-
</head>
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="./styles.min.css" />
|
|
35
|
+
</head>
|
|
37
36
|
<body class="auro-markdown">
|
|
38
37
|
<main></main>
|
|
39
38
|
|
|
40
39
|
<script type="module">
|
|
41
|
-
import '
|
|
42
|
-
import '
|
|
43
|
-
|
|
44
|
-
.then((response) => response.text())
|
|
45
|
-
.then((text) => {
|
|
46
|
-
const rawHtml = marked.parse(text);
|
|
47
|
-
document.querySelector('main').innerHTML = rawHtml;
|
|
48
|
-
Prism.highlightAll();
|
|
49
|
-
})
|
|
50
|
-
</script>
|
|
51
|
-
<script type="module">
|
|
52
|
-
import { initExamples } from "./api.min.js";
|
|
53
|
-
|
|
40
|
+
import { renderPage } from './demo-support.min.js';
|
|
41
|
+
import { initExamples } from './api.min.js';
|
|
42
|
+
await renderPage('./api.md');
|
|
54
43
|
initExamples();
|
|
55
44
|
</script>
|
|
56
|
-
|
|
45
|
+
|
|
57
46
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
58
47
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
48
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
49
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
59
50
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/+esm" type="module"></script>
|
|
51
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
60
52
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-dialog@latest/+esm" type="module"></script>
|
|
61
53
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-drawer@latest/+esm" type="module"></script>
|
|
62
54
|
</body>
|