@aurodesignsystem-dev/auro-formkit 0.0.0-pr1489.12 → 0.0.0-pr1489.14
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/css-only.html +57 -0
- package/components/checkbox/demo/css-only.md +146 -0
- package/components/checkbox/demo/customize.min.js +1 -1
- package/components/checkbox/demo/getting-started.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/pages.json +1 -1
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/css-only.html +57 -0
- package/components/combobox/demo/css-only.md +209 -0
- package/components/combobox/demo/customize.min.js +3 -3
- package/components/combobox/demo/getting-started.min.js +3 -3
- package/components/combobox/demo/index.min.js +3 -3
- package/components/combobox/demo/pages.json +1 -1
- package/components/combobox/dist/index.js +3 -3
- package/components/combobox/dist/registered.js +3 -3
- package/components/counter/demo/css-only.html +57 -0
- package/components/counter/demo/css-only.md +184 -0
- package/components/counter/demo/customize.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/demo/pages.json +1 -1
- package/components/counter/dist/index.js +441 -45
- package/components/counter/dist/registered.js +1 -1
- package/components/datepicker/demo/css-only.html +57 -0
- package/components/datepicker/demo/css-only.md +151 -0
- package/components/datepicker/demo/customize.min.js +13 -7
- package/components/datepicker/demo/index.min.js +13 -7
- package/components/datepicker/demo/pages.json +1 -1
- package/components/datepicker/dist/index.js +13 -7
- package/components/datepicker/dist/registered.js +13 -7
- package/components/datepicker/dist/src/auro-calendar.d.ts +5 -0
- package/components/dropdown/demo/css-only.html +57 -0
- package/components/dropdown/demo/css-only.md +219 -0
- package/components/dropdown/demo/customize.min.js +1 -1
- package/components/dropdown/demo/getting-started.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/demo/pages.json +1 -1
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/demo/css-only.html +57 -0
- package/components/form/demo/css-only.md +156 -0
- package/components/form/demo/customize.min.js +864 -858
- package/components/form/demo/getting-started.min.js +864 -858
- package/components/form/demo/index.min.js +864 -858
- package/components/form/demo/pages.json +1 -1
- package/components/form/demo/registerDemoDeps.min.js +859 -853
- package/components/input/demo/css-only.html +57 -0
- package/components/input/demo/css-only.md +199 -0
- package/components/input/demo/customize.min.js +1 -1
- package/components/input/demo/getting-started.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/demo/pages.json +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/css-only.html +57 -0
- package/components/menu/demo/css-only.md +166 -0
- package/components/menu/demo/pages.json +1 -1
- package/components/radio/demo/css-only.html +57 -0
- package/components/radio/demo/css-only.md +151 -0
- package/components/radio/demo/customize.min.js +1 -1
- package/components/radio/demo/getting-started.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/demo/pages.json +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/css-only.html +57 -0
- package/components/select/demo/css-only.md +203 -0
- package/components/select/demo/customize.min.js +2 -2
- package/components/select/demo/getting-started.min.js +2 -2
- package/components/select/demo/index.min.js +2 -2
- package/components/select/demo/pages.json +1 -1
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +1629 -1619
- package/package.json +1 -1
|
@@ -0,0 +1,57 @@
|
|
|
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/css-only.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-checkbox | CSS only</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-checkbox'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
|
+
<style>
|
|
36
|
+
table {
|
|
37
|
+
--ds-color-container-secondary-default: transparent;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
tr:not(:last-of-type) {
|
|
41
|
+
border-bottom: 1px solid var(--ds-color-border-tertiary-default);
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
44
|
+
</head>
|
|
45
|
+
<body class="auro-markdown">
|
|
46
|
+
<main></main>
|
|
47
|
+
|
|
48
|
+
<script type="module">
|
|
49
|
+
import { renderPage } from './demo-support.min.js';
|
|
50
|
+
await renderPage('./css-only.md');
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
55
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|
|
@@ -0,0 +1,146 @@
|
|
|
1
|
+
<auro-header level="1">CSS only with native checkbox</auro-header>
|
|
2
|
+
<p>For situations where the <code><auro-checkbox></code> web component cannot be used, a native HTML <code><input type="checkbox"></code> element can be styled with the Auro Design System tokens to approximate the visual appearance of <code>auro-checkbox</code>. Unlike <auro-hyperlink href="https://auro.alaskaair.com/components/auro/hyperlink/css-only" target="_blank">auro-hyperlink</auro-hyperlink>, <auro-hyperlink href="https://alaskaairlines.github.io/WebCoreStyleSheets/" target="_blank">Web Core Style Sheets</auro-hyperlink> does not provide a prebuilt <code>.checkbox</code> class, so the styling must be authored manually using Auro design tokens.</p>
|
|
3
|
+
<auro-header level="2">Styling a native checkbox</auro-header>
|
|
4
|
+
<p>The native checkbox can be reset and restyled with the Auro design tokens published by <auro-hyperlink href="https://alaskaairlines.github.io/WebCoreStyleSheets/" target="_blank">@aurodesignsystem/design-tokens</auro-hyperlink>. The pattern below replicates the size, border, and selected-state colors used by <code>auro-checkbox</code>.</p>
|
|
5
|
+
<pre><code>@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
|
|
6
|
+
|
|
7
|
+
.checkbox {
|
|
8
|
+
appearance: none;
|
|
9
|
+
-webkit-appearance: none;
|
|
10
|
+
width: var(--ds-size-300, 1.5rem);
|
|
11
|
+
height: var(--ds-size-300, 1.5rem);
|
|
12
|
+
border: 1px solid var(--ds-color-border-ui-default, #6e767f);
|
|
13
|
+
border-radius: var(--ds-border-radius, 4px);
|
|
14
|
+
background-color: var(--ds-color-container-primary-default, #ffffff);
|
|
15
|
+
cursor: pointer;
|
|
16
|
+
vertical-align: middle;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.checkbox:checked {
|
|
20
|
+
background-color: var(--ds-color-container-ui-selected-default, #01426a);
|
|
21
|
+
border-color: var(--ds-color-border-ui-selected-default, #01426a);
|
|
22
|
+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpolyline points='5 12 10 17 19 8'/%3E%3C/svg%3E");
|
|
23
|
+
background-repeat: no-repeat;
|
|
24
|
+
background-position: center;
|
|
25
|
+
background-size: 80%;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.checkbox:focus-visible {
|
|
29
|
+
outline: 2px solid var(--ds-color-border-active-default, #01426a);
|
|
30
|
+
outline-offset: 2px;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.checkbox:disabled {
|
|
34
|
+
cursor: not-allowed;
|
|
35
|
+
opacity: 0.5;
|
|
36
|
+
}</code></pre>
|
|
37
|
+
<auro-header level="3">Basic checkbox</auro-header>
|
|
38
|
+
<p>Apply the <code>.checkbox</code> class to a native <code><input type="checkbox"></code> element and pair it with a <code><label></code>:</p>
|
|
39
|
+
<pre><code><label>
|
|
40
|
+
<input type="checkbox" class="checkbox" name="terms" value="agree" />
|
|
41
|
+
I agree to the terms
|
|
42
|
+
</label></code></pre>
|
|
43
|
+
<auro-header level="3">Group of checkboxes</auro-header>
|
|
44
|
+
<p>Use a <code><fieldset></code> and <code><legend></code> to give the group an accessible name:</p>
|
|
45
|
+
<pre><code><fieldset>
|
|
46
|
+
<legend>Select your preferences</legend>
|
|
47
|
+
<label><input type="checkbox" class="checkbox" name="prefs" value="email" /> Email</label>
|
|
48
|
+
<label><input type="checkbox" class="checkbox" name="prefs" value="sms" /> SMS</label>
|
|
49
|
+
<label><input type="checkbox" class="checkbox" name="prefs" value="push" /> Push notifications</label>
|
|
50
|
+
</fieldset></code></pre>
|
|
51
|
+
<auro-header level="2">What you lose without auro-checkbox</auro-header>
|
|
52
|
+
<p>While the CSS above replicates the <strong>visual styling</strong> of <code>auro-checkbox</code>, the following functionality built into the <code>auro-checkbox</code> and <code>auro-checkbox-group</code> web components is <strong>not available</strong> when using plain HTML:</p>
|
|
53
|
+
<auro-header level="3">Group-level validation</auro-header>
|
|
54
|
+
<p><code>auro-checkbox-group</code> supports a <code>required</code> attribute that validates "at least one checkbox in the group must be selected." Native HTML has no equivalent — <code>required</code> on individual checkboxes only enforces that <em>that specific</em> checkbox is checked. With plain HTML, you must write custom JavaScript to coordinate group-level validation across multiple inputs.</p>
|
|
55
|
+
<auro-header level="3">Custom validation messages</auro-header>
|
|
56
|
+
<p><code>auro-checkbox-group</code> exposes <code>setCustomValidity</code> and <code>setCustomValidityValueMissing</code> for fully customizable error messages per validity state. Native checkboxes surface browser-controlled validation messages that cannot be customized beyond <code>setCustomValidity()</code> on the individual input.</p>
|
|
57
|
+
<auro-header level="3">Touched-state tracking</auro-header>
|
|
58
|
+
<p><code>auro-checkbox-group</code> tracks a <code>touched</code> state so validation errors only appear after the user has interacted with the group. Native checkboxes have no built-in touched concept — you must implement focus/blur tracking yourself to avoid showing errors on initial render.</p>
|
|
59
|
+
<auro-header level="3">Coordinated value array</auro-header>
|
|
60
|
+
<p><code>auro-checkbox-group</code> exposes a single <code>value</code> property that reflects the array of checked items in the group. With native HTML, you must query each input individually and assemble the selected values yourself, and there is no single change event that fires when the group's value changes.</p>
|
|
61
|
+
<auro-header level="3">Automatic label binding</auro-header>
|
|
62
|
+
<p><code>auro-checkbox</code> automatically associates slot content as the accessible label, eliminating the need for <code><label for></code> wiring or wrapping <code><label></code> elements. With native HTML, you must manage <code>id</code> and <code>for</code> attributes manually to keep labels in sync with inputs.</p>
|
|
63
|
+
<auro-header level="3">Disabled propagation</auro-header>
|
|
64
|
+
<p><code>auro-checkbox-group</code> propagates a single <code>disabled</code> attribute to all child checkboxes. With native HTML, you must apply <code>disabled</code> to each input individually or wrap them in a <code><fieldset disabled></code>, the latter of which has additional side effects on nested form controls.</p>
|
|
65
|
+
<auro-header level="3">Form integration events</auro-header>
|
|
66
|
+
<p><code>auro-checkbox-group</code> dispatches <code>auroFormElement-validated</code> events so parent <code>auro-form</code> elements can coordinate validation across all child fields. Native checkboxes participate in form submission but do not emit the structured validation events that the Auro form system expects.</p>
|
|
67
|
+
<auro-header level="3">Horizontal layout</auro-header>
|
|
68
|
+
<p><code>auro-checkbox-group</code> supports a <code>horizontal</code> attribute for compact groups of up to three items, with spacing and alignment handled by the component. With native HTML, you must author the layout CSS yourself.</p>
|
|
69
|
+
<auro-header level="3">Reset behavior</auro-header>
|
|
70
|
+
<p><code>auro-checkbox-group</code> provides a single <code>reset()</code> method that clears all checkboxes and resets validation state in one call. With native HTML, you must iterate each input to uncheck it and separately clear any custom validation state you are tracking.</p>
|
|
71
|
+
<auro-header level="3">Multi-brand theming</auro-header>
|
|
72
|
+
<p><code>auro-checkbox</code> consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only checkbox is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does.</p>
|
|
73
|
+
<auro-header level="2">Summary</auro-header>
|
|
74
|
+
<table>
|
|
75
|
+
<thead>
|
|
76
|
+
<tr>
|
|
77
|
+
<th>Feature</th>
|
|
78
|
+
<th>Native <code><input type="checkbox"></code> with Auro tokens</th>
|
|
79
|
+
<th><code>auro-checkbox</code></th>
|
|
80
|
+
</tr>
|
|
81
|
+
</thead>
|
|
82
|
+
<tbody>
|
|
83
|
+
<tr>
|
|
84
|
+
<td>Design-system-aligned styling</td>
|
|
85
|
+
<td>Manual (author-written CSS)</td>
|
|
86
|
+
<td>Built-in</td>
|
|
87
|
+
</tr>
|
|
88
|
+
<tr>
|
|
89
|
+
<td>Dark background support</td>
|
|
90
|
+
<td>Manual</td>
|
|
91
|
+
<td>Yes (<code>appearance="inverse"</code>)</td>
|
|
92
|
+
</tr>
|
|
93
|
+
<tr>
|
|
94
|
+
<td>Group-level <code>required</code> validation</td>
|
|
95
|
+
<td>Not supported</td>
|
|
96
|
+
<td>Built-in via <code>auro-checkbox-group</code></td>
|
|
97
|
+
</tr>
|
|
98
|
+
<tr>
|
|
99
|
+
<td>Custom validation messages</td>
|
|
100
|
+
<td>Limited to <code>setCustomValidity()</code></td>
|
|
101
|
+
<td>Per-constraint custom messages</td>
|
|
102
|
+
</tr>
|
|
103
|
+
<tr>
|
|
104
|
+
<td>Touched-state tracking</td>
|
|
105
|
+
<td>Manual</td>
|
|
106
|
+
<td>Automatic</td>
|
|
107
|
+
</tr>
|
|
108
|
+
<tr>
|
|
109
|
+
<td>Coordinated value array</td>
|
|
110
|
+
<td>Manual aggregation</td>
|
|
111
|
+
<td>Single <code>value</code> property</td>
|
|
112
|
+
</tr>
|
|
113
|
+
<tr>
|
|
114
|
+
<td>Automatic label binding</td>
|
|
115
|
+
<td>Manual <code>id</code>/<code>for</code> wiring</td>
|
|
116
|
+
<td>Automatic via slot</td>
|
|
117
|
+
</tr>
|
|
118
|
+
<tr>
|
|
119
|
+
<td>Disabled propagation</td>
|
|
120
|
+
<td>Per-input or <code><fieldset></code></td>
|
|
121
|
+
<td>Single group attribute</td>
|
|
122
|
+
</tr>
|
|
123
|
+
<tr>
|
|
124
|
+
<td>Form validation events</td>
|
|
125
|
+
<td>Not supported</td>
|
|
126
|
+
<td><code>auroFormElement-validated</code></td>
|
|
127
|
+
</tr>
|
|
128
|
+
<tr>
|
|
129
|
+
<td>Horizontal layout</td>
|
|
130
|
+
<td>Manual CSS</td>
|
|
131
|
+
<td><code>horizontal</code> attribute</td>
|
|
132
|
+
</tr>
|
|
133
|
+
<tr>
|
|
134
|
+
<td>Reset all in group</td>
|
|
135
|
+
<td>Manual iteration</td>
|
|
136
|
+
<td>Single <code>reset()</code> call</td>
|
|
137
|
+
</tr>
|
|
138
|
+
<tr>
|
|
139
|
+
<td>Multi-brand theming</td>
|
|
140
|
+
<td>Static (import-time tokens)</td>
|
|
141
|
+
<td>Full (design tokens + component logic)</td>
|
|
142
|
+
</tr>
|
|
143
|
+
</tbody>
|
|
144
|
+
</table>
|
|
145
|
+
<auro-header level="2">Recommendation</auro-header>
|
|
146
|
+
<p>Use <code>auro-checkbox</code> and <code>auro-checkbox-group</code> whenever possible. Fall back to a CSS-styled native checkbox only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to reimplement group validation, touched tracking, and value coordination yourself.</p>
|
|
@@ -1806,7 +1806,7 @@ class AuroHelpText extends i$2 {
|
|
|
1806
1806
|
}
|
|
1807
1807
|
}
|
|
1808
1808
|
|
|
1809
|
-
var formkitVersion = '
|
|
1809
|
+
var formkitVersion = '202606051806';
|
|
1810
1810
|
|
|
1811
1811
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1812
1812
|
// See LICENSE in the project root for license information.
|
|
@@ -1806,7 +1806,7 @@ class AuroHelpText extends i$2 {
|
|
|
1806
1806
|
}
|
|
1807
1807
|
}
|
|
1808
1808
|
|
|
1809
|
-
var formkitVersion = '
|
|
1809
|
+
var formkitVersion = '202606051806';
|
|
1810
1810
|
|
|
1811
1811
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1812
1812
|
// See LICENSE in the project root for license information.
|
|
@@ -1806,7 +1806,7 @@ class AuroHelpText extends i$2 {
|
|
|
1806
1806
|
}
|
|
1807
1807
|
}
|
|
1808
1808
|
|
|
1809
|
-
var formkitVersion = '
|
|
1809
|
+
var formkitVersion = '202606051806';
|
|
1810
1810
|
|
|
1811
1811
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1812
1812
|
// See LICENSE in the project root for license information.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-checkbox.md","readme.md"]
|
|
1
|
+
["accessibility.md","api.md","css-only.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-checkbox.md","readme.md"]
|
|
@@ -1759,7 +1759,7 @@ class AuroHelpText extends LitElement {
|
|
|
1759
1759
|
}
|
|
1760
1760
|
}
|
|
1761
1761
|
|
|
1762
|
-
var formkitVersion = '
|
|
1762
|
+
var formkitVersion = '202606051806';
|
|
1763
1763
|
|
|
1764
1764
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1765
1765
|
// See LICENSE in the project root for license information.
|
|
@@ -1759,7 +1759,7 @@ class AuroHelpText extends LitElement {
|
|
|
1759
1759
|
}
|
|
1760
1760
|
}
|
|
1761
1761
|
|
|
1762
|
-
var formkitVersion = '
|
|
1762
|
+
var formkitVersion = '202606051806';
|
|
1763
1763
|
|
|
1764
1764
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1765
1765
|
// See LICENSE in the project root for license information.
|
|
@@ -0,0 +1,57 @@
|
|
|
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/css-only.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 | CSS only</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
|
+
<style>
|
|
36
|
+
table {
|
|
37
|
+
--ds-color-container-secondary-default: transparent;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
tr:not(:last-of-type) {
|
|
41
|
+
border-bottom: 1px solid var(--ds-color-border-tertiary-default);
|
|
42
|
+
}
|
|
43
|
+
</style>
|
|
44
|
+
</head>
|
|
45
|
+
<body class="auro-markdown">
|
|
46
|
+
<main></main>
|
|
47
|
+
|
|
48
|
+
<script type="module">
|
|
49
|
+
import { renderPage } from './demo-support.min.js';
|
|
50
|
+
await renderPage('./css-only.md');
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
<!-- If additional elements are needed for the demo, add them here. -->
|
|
54
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
55
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
56
|
+
</body>
|
|
57
|
+
</html>
|
|
@@ -0,0 +1,209 @@
|
|
|
1
|
+
<auro-header level="1">CSS only with native input and datalist</auro-header>
|
|
2
|
+
<p>For situations where the <code><auro-combobox></code> web component cannot be used, a native HTML <code><input type="text"></code> paired with a <code><datalist></code> element can be styled with the Auro Design System tokens to approximate the visual appearance of <code>auro-combobox</code>. Unlike <auro-hyperlink href="https://auro.alaskaair.com/components/auro/hyperlink/css-only" target="_blank">auro-hyperlink</auro-hyperlink>, <auro-hyperlink href="https://alaskaairlines.github.io/WebCoreStyleSheets/" target="_blank">Web Core Style Sheets</auro-hyperlink> does not provide a prebuilt <code>.combobox</code> class, so the styling must be authored manually using Auro design tokens.</p>
|
|
3
|
+
<auro-header level="2">Styling a native input with datalist</auro-header>
|
|
4
|
+
<p>The native input can be restyled with the Auro design tokens published by <auro-hyperlink href="https://alaskaairlines.github.io/WebCoreStyleSheets/" target="_blank">@aurodesignsystem/design-tokens</auro-hyperlink>. The pattern below replicates the size, border, and focus-state colors used by the <code>auro-combobox</code> trigger input.</p>
|
|
5
|
+
<pre><code>@import "./node_modules/@aurodesignsystem/design-tokens/dist/tokens/CSSCustomProperties.css";
|
|
6
|
+
|
|
7
|
+
.combobox {
|
|
8
|
+
display: inline-block;
|
|
9
|
+
position: relative;
|
|
10
|
+
width: 100%;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.combobox-label {
|
|
14
|
+
display: block;
|
|
15
|
+
font-size: var(--ds-size-150, 0.75rem);
|
|
16
|
+
color: var(--ds-color-text-secondary-default, #6e767f);
|
|
17
|
+
margin-bottom: var(--ds-size-50, 0.25rem);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.combobox-input {
|
|
21
|
+
appearance: none;
|
|
22
|
+
-webkit-appearance: none;
|
|
23
|
+
width: 100%;
|
|
24
|
+
height: var(--ds-size-600, 3rem);
|
|
25
|
+
padding: 0 var(--ds-size-200, 1rem);
|
|
26
|
+
font-size: var(--ds-size-200, 1rem);
|
|
27
|
+
color: var(--ds-color-text-primary-default, #00256c);
|
|
28
|
+
background-color: var(--ds-color-container-primary-default, #ffffff);
|
|
29
|
+
border: 1px solid var(--ds-color-border-ui-default, #6e767f);
|
|
30
|
+
border-radius: var(--ds-border-radius, 4px);
|
|
31
|
+
box-sizing: border-box;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.combobox-input:focus-visible {
|
|
35
|
+
outline: 2px solid var(--ds-color-border-active-default, #01426a);
|
|
36
|
+
outline-offset: 2px;
|
|
37
|
+
border-color: var(--ds-color-border-active-default, #01426a);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.combobox-input:disabled {
|
|
41
|
+
cursor: not-allowed;
|
|
42
|
+
opacity: 0.5;
|
|
43
|
+
background-color: var(--ds-color-container-disabled-default, #f2f3f5);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.combobox-input[aria-invalid="true"] {
|
|
47
|
+
border-color: var(--ds-color-border-error-default, #d23153);
|
|
48
|
+
}</code></pre>
|
|
49
|
+
<auro-header level="3">Basic combobox</auro-header>
|
|
50
|
+
<p>Apply the <code>.combobox-input</code> class to a native <code><input type="text"></code> element and reference a <code><datalist></code> via the <code>list</code> attribute:</p>
|
|
51
|
+
<pre><code><label class="combobox">
|
|
52
|
+
<span class="combobox-label">Departure airport</span>
|
|
53
|
+
<input
|
|
54
|
+
type="text"
|
|
55
|
+
class="combobox-input"
|
|
56
|
+
name="departure"
|
|
57
|
+
list="airport-options"
|
|
58
|
+
autocomplete="off" />
|
|
59
|
+
<datalist id="airport-options">
|
|
60
|
+
<option value="Seattle (SEA)"></option>
|
|
61
|
+
<option value="Portland (PDX)"></option>
|
|
62
|
+
<option value="San Francisco (SFO)"></option>
|
|
63
|
+
<option value="Los Angeles (LAX)"></option>
|
|
64
|
+
</datalist>
|
|
65
|
+
</label></code></pre>
|
|
66
|
+
<auro-header level="3">Required combobox in a form</auro-header>
|
|
67
|
+
<p>Use the native <code>required</code> attribute to enforce that a value is entered before form submission:</p>
|
|
68
|
+
<pre><code><form>
|
|
69
|
+
<label class="combobox">
|
|
70
|
+
<span class="combobox-label">Destination</span>
|
|
71
|
+
<input
|
|
72
|
+
type="text"
|
|
73
|
+
class="combobox-input"
|
|
74
|
+
name="destination"
|
|
75
|
+
list="destination-options"
|
|
76
|
+
required
|
|
77
|
+
autocomplete="off" />
|
|
78
|
+
<datalist id="destination-options">
|
|
79
|
+
<option value="Anchorage (ANC)"></option>
|
|
80
|
+
<option value="Fairbanks (FAI)"></option>
|
|
81
|
+
<option value="Juneau (JNU)"></option>
|
|
82
|
+
</datalist>
|
|
83
|
+
</label>
|
|
84
|
+
<button type="submit">Search</button>
|
|
85
|
+
</form></code></pre>
|
|
86
|
+
<auro-header level="2">What you lose without auro-combobox</auro-header>
|
|
87
|
+
<p>While the CSS above replicates the <strong>visual styling</strong> of the <code>auro-combobox</code> trigger, the following functionality built into the <code>auro-combobox</code> web component is <strong>not available</strong> when using plain HTML with a <code><datalist></code>:</p>
|
|
88
|
+
<auro-header level="3">Filter vs. suggestion behavior</auro-header>
|
|
89
|
+
<p><code>auro-combobox</code> exposes a <code>behavior</code> attribute (<code>"filter"</code> or <code>"suggestion"</code>) that controls whether the user must select a menu option or may submit a freeform typed value. Native <code><datalist></code> always behaves like suggestion mode — there is no way to require the user to choose from the list without writing custom JavaScript to compare the input value against the option set.</p>
|
|
90
|
+
<auro-header level="3">Custom filtering and matching</auro-header>
|
|
91
|
+
<p><code>auro-combobox</code> filters options against the typed value and supports a <code>suggest</code> attribute on each menu option for additional matching keywords, plus <code>persistent</code>, <code>static</code>, and <code>nomatch</code> options that change how the list reacts to input. <code><datalist></code> matching is browser-controlled, varies across browsers, and cannot be extended with synonyms, persistent items, or a "no match" placeholder.</p>
|
|
92
|
+
<auro-header level="3">Highlighted match text</auro-header>
|
|
93
|
+
<p><code>auro-combobox</code> passes the typed value to <code>auro-menu</code> as a <code>matchWord</code> so the matching substring is visually highlighted in each option. Native <code><datalist></code> renders options using the browser's default UI with no control over typography, highlight color, or layout of the option content.</p>
|
|
94
|
+
<auro-header level="3">Custom validation messages</auro-header>
|
|
95
|
+
<p><code>auro-combobox</code> exposes <code>setCustomValidity</code>, <code>setCustomValidityCustomError</code>, <code>setCustomValidityValueMissing</code>, and <code>setCustomValidityValueMissingFilter</code> for fully customizable error messages per validity state, including a distinct message for "did not pick a value from the list" when <code>behavior="filter"</code>. Native inputs surface browser-controlled validation messages that cannot be customized beyond a single <code>setCustomValidity()</code> string.</p>
|
|
96
|
+
<auro-header level="3">Touched-state tracking</auro-header>
|
|
97
|
+
<p><code>auro-combobox</code> tracks a <code>touched</code> state so validation errors only appear after the user has interacted with the field. Native inputs have no built-in touched concept — you must implement focus/blur tracking yourself to avoid showing errors on initial render.</p>
|
|
98
|
+
<auro-header level="3">Keyboard navigation and ARIA</auro-header>
|
|
99
|
+
<p><code>auro-combobox</code> implements the WAI-ARIA combobox pattern: <code>role="combobox"</code> on the input, <code>aria-expanded</code>, <code>aria-controls</code>, <code>aria-activedescendant</code>, and <code>aria-setsize</code>/<code>aria-posinset</code> on each option, plus arrow-key navigation, Home/End, Escape to close, and Enter to select. <code><datalist></code> exposes none of these hooks — keyboard behavior is whatever the browser provides, and the experience differs substantially between Chrome, Safari, and Firefox.</p>
|
|
100
|
+
<auro-header level="3">Screen reader announcements</auro-header>
|
|
101
|
+
<p><code>auro-combobox</code> dispatches live-region announcements when an option becomes active ("Seattle, not selected, 1 of 5") and when an option is selected, including special handling for fullscreen dialog mode where the trigger is inert. <code><datalist></code> announcements depend entirely on the assistive technology and browser combination.</p>
|
|
102
|
+
<auro-header level="3">Mobile fullscreen presentation</auro-header>
|
|
103
|
+
<p><code>auro-combobox</code> automatically switches to a fullscreen dialog at a configurable <code>fullscreenBreakpoint</code> for mobile-friendly input, including iOS virtual keyboard retention logic so the keyboard stays visible across the trigger-to-dialog transition. Native <code><datalist></code> renders an inline dropdown on every device with no fullscreen mode.</p>
|
|
104
|
+
<auro-header level="3">Rich option content and display value</auro-header>
|
|
105
|
+
<p><code>auro-combobox</code> works with <code>auro-menuoption</code> elements that can contain markup, icons, and a <code>displayValue</code> slot that lets the visible trigger content differ from the underlying value (paired with <code>persistInput</code> for advanced filter UIs). <code><datalist></code> options are plain strings — no markup, no icons, and the visible value always equals the submitted value.</p>
|
|
106
|
+
<auro-header level="3">Coordinated value and option-selected state</auro-header>
|
|
107
|
+
<p><code>auro-combobox</code> exposes both <code>value</code> (the selected option's value) and <code>optionSelected</code> (a reference to the chosen <code>auro-menuoption</code> element), and fires <code>input</code> and <code>inputValue</code> events with structured detail. With native HTML, you only get the input's string value — there is no concept of which datalist option the user picked because the browser does not report it.</p>
|
|
108
|
+
<auro-header level="3">Form integration events</auro-header>
|
|
109
|
+
<p><code>auro-combobox</code> dispatches <code>auroFormElement-validated</code> events so parent <code>auro-form</code> elements can coordinate validation across all child fields. Native inputs participate in form submission but do not emit the structured validation events that the Auro form system expects.</p>
|
|
110
|
+
<auro-header level="3">Reset behavior</auro-header>
|
|
111
|
+
<p><code>auro-combobox</code> provides <code>reset()</code> and <code>clear()</code> methods that clear the input, menu selection, validation state, and touched flag in one call. With native HTML, you must clear the input value and separately reset any custom validation state you are tracking.</p>
|
|
112
|
+
<auro-header level="3">Layouts, shapes, and sizes</auro-header>
|
|
113
|
+
<p><code>auro-combobox</code> supports <code>layout</code> (<code>classic</code>, <code>emphasized</code>, <code>snowflake</code>), <code>shape</code>, and <code>size</code> attributes that coordinate the appearance of the trigger, dropdown, and menu options together. With native HTML, every variant must be authored from scratch and the dropdown UI cannot be restyled at all.</p>
|
|
114
|
+
<auro-header level="3">Multi-brand theming</auro-header>
|
|
115
|
+
<p><code>auro-combobox</code> consumes Auro design tokens through its component logic, so it automatically picks up brand-specific theming when token packages are swapped. A CSS-only input is tied to whichever tokens were imported at author time and will not respond to runtime theme switching the way the web component does. The browser-rendered <code><datalist></code> popup cannot be themed at all.</p>
|
|
116
|
+
<auro-header level="2">Summary</auro-header>
|
|
117
|
+
<table>
|
|
118
|
+
<thead>
|
|
119
|
+
<tr>
|
|
120
|
+
<th>Feature</th>
|
|
121
|
+
<th>Native <code><input list></code> + <code><datalist></code> with Auro tokens</th>
|
|
122
|
+
<th><code>auro-combobox</code></th>
|
|
123
|
+
</tr>
|
|
124
|
+
</thead>
|
|
125
|
+
<tbody>
|
|
126
|
+
<tr>
|
|
127
|
+
<td>Design-system-aligned trigger styling</td>
|
|
128
|
+
<td>Manual (author-written CSS)</td>
|
|
129
|
+
<td>Built-in</td>
|
|
130
|
+
</tr>
|
|
131
|
+
<tr>
|
|
132
|
+
<td>Styled dropdown / option list</td>
|
|
133
|
+
<td>Browser-controlled, not styleable</td>
|
|
134
|
+
<td>Fully themed via <code>auro-menu</code></td>
|
|
135
|
+
</tr>
|
|
136
|
+
<tr>
|
|
137
|
+
<td>Filter vs. suggestion behavior</td>
|
|
138
|
+
<td>Suggestion only</td>
|
|
139
|
+
<td><code>behavior="filter" | "suggestion"</code></td>
|
|
140
|
+
</tr>
|
|
141
|
+
<tr>
|
|
142
|
+
<td>Custom match keywords / persistent / nomatch options</td>
|
|
143
|
+
<td>Not supported</td>
|
|
144
|
+
<td>Built-in option attributes</td>
|
|
145
|
+
</tr>
|
|
146
|
+
<tr>
|
|
147
|
+
<td>Highlighted match text</td>
|
|
148
|
+
<td>Not supported</td>
|
|
149
|
+
<td>Built-in via <code>matchWord</code></td>
|
|
150
|
+
</tr>
|
|
151
|
+
<tr>
|
|
152
|
+
<td>Custom validation messages</td>
|
|
153
|
+
<td>Limited to <code>setCustomValidity()</code></td>
|
|
154
|
+
<td>Per-constraint custom messages</td>
|
|
155
|
+
</tr>
|
|
156
|
+
<tr>
|
|
157
|
+
<td>Touched-state tracking</td>
|
|
158
|
+
<td>Manual</td>
|
|
159
|
+
<td>Automatic</td>
|
|
160
|
+
</tr>
|
|
161
|
+
<tr>
|
|
162
|
+
<td>ARIA combobox pattern</td>
|
|
163
|
+
<td>Inconsistent across browsers</td>
|
|
164
|
+
<td>Full WAI-ARIA combobox implementation</td>
|
|
165
|
+
</tr>
|
|
166
|
+
<tr>
|
|
167
|
+
<td>Screen reader option announcements</td>
|
|
168
|
+
<td>Browser-dependent</td>
|
|
169
|
+
<td>Live-region announcements</td>
|
|
170
|
+
</tr>
|
|
171
|
+
<tr>
|
|
172
|
+
<td>Mobile fullscreen mode</td>
|
|
173
|
+
<td>Not supported</td>
|
|
174
|
+
<td><code>fullscreenBreakpoint</code> attribute</td>
|
|
175
|
+
</tr>
|
|
176
|
+
<tr>
|
|
177
|
+
<td>Rich option content / display value</td>
|
|
178
|
+
<td>Plain strings only</td>
|
|
179
|
+
<td><code>auro-menuoption</code> + <code>displayValue</code> slot</td>
|
|
180
|
+
</tr>
|
|
181
|
+
<tr>
|
|
182
|
+
<td><code>optionSelected</code> reference</td>
|
|
183
|
+
<td>Not available</td>
|
|
184
|
+
<td>Exposed as a property</td>
|
|
185
|
+
</tr>
|
|
186
|
+
<tr>
|
|
187
|
+
<td>Form validation events</td>
|
|
188
|
+
<td>Not supported</td>
|
|
189
|
+
<td><code>auroFormElement-validated</code></td>
|
|
190
|
+
</tr>
|
|
191
|
+
<tr>
|
|
192
|
+
<td>Reset / clear</td>
|
|
193
|
+
<td>Manual</td>
|
|
194
|
+
<td><code>reset()</code> and <code>clear()</code> methods</td>
|
|
195
|
+
</tr>
|
|
196
|
+
<tr>
|
|
197
|
+
<td>Layout, shape, size variants</td>
|
|
198
|
+
<td>Manual CSS</td>
|
|
199
|
+
<td><code>layout</code>, <code>shape</code>, <code>size</code> attributes</td>
|
|
200
|
+
</tr>
|
|
201
|
+
<tr>
|
|
202
|
+
<td>Multi-brand theming</td>
|
|
203
|
+
<td>Static (import-time tokens)</td>
|
|
204
|
+
<td>Full (design tokens + component logic)</td>
|
|
205
|
+
</tr>
|
|
206
|
+
</tbody>
|
|
207
|
+
</table>
|
|
208
|
+
<auro-header level="2">Recommendation</auro-header>
|
|
209
|
+
<p>Use <code>auro-combobox</code> whenever possible. Fall back to a CSS-styled native <code><input list></code> with a <code><datalist></code> only in environments where custom elements are not supported or when integrating with third-party systems that require plain HTML — and be prepared to accept browser-controlled dropdown styling, inconsistent keyboard and screen reader behavior, and the loss of filter-mode validation, match highlighting, fullscreen presentation, and structured form integration.</p>
|
|
@@ -5402,7 +5402,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
5402
5402
|
}
|
|
5403
5403
|
};
|
|
5404
5404
|
|
|
5405
|
-
var formkitVersion$2 = '
|
|
5405
|
+
var formkitVersion$2 = '202606051806';
|
|
5406
5406
|
|
|
5407
5407
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5408
5408
|
static get properties() {
|
|
@@ -13504,7 +13504,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
13504
13504
|
}
|
|
13505
13505
|
};
|
|
13506
13506
|
|
|
13507
|
-
var formkitVersion$1 = '
|
|
13507
|
+
var formkitVersion$1 = '202606051806';
|
|
13508
13508
|
|
|
13509
13509
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13510
13510
|
// See LICENSE in the project root for license information.
|
|
@@ -14577,7 +14577,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
14577
14577
|
}
|
|
14578
14578
|
}
|
|
14579
14579
|
|
|
14580
|
-
var formkitVersion = '
|
|
14580
|
+
var formkitVersion = '202606051806';
|
|
14581
14581
|
|
|
14582
14582
|
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}`;
|
|
14583
14583
|
|
|
@@ -5402,7 +5402,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
5402
5402
|
}
|
|
5403
5403
|
};
|
|
5404
5404
|
|
|
5405
|
-
var formkitVersion$2 = '
|
|
5405
|
+
var formkitVersion$2 = '202606051806';
|
|
5406
5406
|
|
|
5407
5407
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5408
5408
|
static get properties() {
|
|
@@ -13504,7 +13504,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
13504
13504
|
}
|
|
13505
13505
|
};
|
|
13506
13506
|
|
|
13507
|
-
var formkitVersion$1 = '
|
|
13507
|
+
var formkitVersion$1 = '202606051806';
|
|
13508
13508
|
|
|
13509
13509
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13510
13510
|
// See LICENSE in the project root for license information.
|
|
@@ -14577,7 +14577,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
14577
14577
|
}
|
|
14578
14578
|
}
|
|
14579
14579
|
|
|
14580
|
-
var formkitVersion = '
|
|
14580
|
+
var formkitVersion = '202606051806';
|
|
14581
14581
|
|
|
14582
14582
|
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}`;
|
|
14583
14583
|
|
|
@@ -5417,7 +5417,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
5417
5417
|
}
|
|
5418
5418
|
};
|
|
5419
5419
|
|
|
5420
|
-
var formkitVersion$2 = '
|
|
5420
|
+
var formkitVersion$2 = '202606051806';
|
|
5421
5421
|
|
|
5422
5422
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5423
5423
|
static get properties() {
|
|
@@ -13519,7 +13519,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
13519
13519
|
}
|
|
13520
13520
|
};
|
|
13521
13521
|
|
|
13522
|
-
var formkitVersion$1 = '
|
|
13522
|
+
var formkitVersion$1 = '202606051806';
|
|
13523
13523
|
|
|
13524
13524
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13525
13525
|
// See LICENSE in the project root for license information.
|
|
@@ -14592,7 +14592,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
14592
14592
|
}
|
|
14593
14593
|
}
|
|
14594
14594
|
|
|
14595
|
-
var formkitVersion = '
|
|
14595
|
+
var formkitVersion = '202606051806';
|
|
14596
14596
|
|
|
14597
14597
|
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}`;
|
|
14598
14598
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-combobox.md","readme.md"]
|
|
1
|
+
["accessibility.md","api.md","css-only.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-combobox.md","readme.md"]
|