@aurodesignsystem-dev/auro-formkit 0.0.0-pr1475.4 → 0.0.0-pr1475.6
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/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/demo/why-checkbox.html +57 -0
- package/components/checkbox/demo/why-checkbox.md +86 -0
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/customize.min.js +10 -8
- package/components/combobox/demo/getting-started.min.js +10 -8
- package/components/combobox/demo/index.min.js +10 -8
- package/components/combobox/demo/pages.json +1 -1
- package/components/combobox/demo/why-combobox.html +57 -0
- package/components/combobox/demo/why-combobox.md +113 -0
- package/components/combobox/dist/index.js +10 -8
- package/components/combobox/dist/registered.js +10 -8
- package/components/counter/demo/customize.min.js +9 -7
- package/components/counter/demo/index.min.js +9 -7
- package/components/counter/demo/pages.json +1 -1
- package/components/counter/demo/why-counter.html +57 -0
- package/components/counter/demo/why-counter.md +108 -0
- package/components/counter/dist/index.js +441 -45
- package/components/counter/dist/registered.js +1 -1
- package/components/datepicker/demo/api.md +2 -2
- package/components/datepicker/demo/customize.min.js +259 -41
- package/components/datepicker/demo/index.md +2 -1
- package/components/datepicker/demo/index.min.js +259 -41
- package/components/datepicker/demo/pages.json +1 -1
- package/components/datepicker/demo/voiceover.md +5 -5
- package/components/datepicker/demo/why-datepicker.html +57 -0
- package/components/datepicker/demo/why-datepicker.md +133 -0
- package/components/datepicker/dist/index.js +259 -41
- package/components/datepicker/dist/registered.js +259 -41
- package/components/datepicker/dist/src/auro-calendar-cell.d.ts +2 -0
- package/components/datepicker/dist/src/auro-calendar.d.ts +17 -1
- package/components/datepicker/dist/src/auro-datepicker.d.ts +8 -0
- package/components/dropdown/demo/customize.min.js +8 -6
- package/components/dropdown/demo/getting-started.min.js +8 -6
- package/components/dropdown/demo/index.min.js +8 -6
- package/components/dropdown/demo/pages.json +1 -1
- package/components/dropdown/demo/why-dropdown.html +57 -0
- package/components/dropdown/demo/why-dropdown.md +97 -0
- package/components/dropdown/dist/auro-dropdown.d.ts +3 -1
- package/components/dropdown/dist/index.js +8 -6
- package/components/dropdown/dist/registered.js +8 -6
- package/components/form/demo/customize.min.js +1218 -994
- package/components/form/demo/getting-started.min.js +1218 -994
- package/components/form/demo/index.min.js +1218 -994
- package/components/form/demo/pages.json +1 -1
- package/components/form/demo/registerDemoDeps.min.js +1130 -906
- package/components/form/demo/why-form.html +57 -0
- package/components/form/demo/why-form.md +101 -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/demo/why-input.html +57 -0
- package/components/input/demo/why-input.md +121 -0
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/pages.json +1 -1
- package/components/menu/demo/why-menu.html +57 -0
- package/components/menu/demo/why-menu.md +104 -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/demo/why-radio.html +57 -0
- package/components/radio/demo/why-radio.md +92 -0
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/customize.min.js +9 -7
- package/components/select/demo/getting-started.min.js +9 -7
- package/components/select/demo/index.min.js +9 -7
- package/components/select/demo/pages.json +1 -1
- package/components/select/demo/why-select.html +57 -0
- package/components/select/demo/why-select.md +128 -0
- package/components/select/dist/index.js +9 -7
- package/components/select/dist/registered.js +9 -7
- package/custom-elements.json +1521 -1476
- package/package.json +2 -2
|
@@ -1682,7 +1682,7 @@ class AuroHelpText extends i$2 {
|
|
|
1682
1682
|
}
|
|
1683
1683
|
}
|
|
1684
1684
|
|
|
1685
|
-
var formkitVersion = '
|
|
1685
|
+
var formkitVersion = '202605201522';
|
|
1686
1686
|
|
|
1687
1687
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1688
1688
|
// See LICENSE in the project root for license information.
|
|
@@ -1682,7 +1682,7 @@ class AuroHelpText extends i$2 {
|
|
|
1682
1682
|
}
|
|
1683
1683
|
}
|
|
1684
1684
|
|
|
1685
|
-
var formkitVersion = '
|
|
1685
|
+
var formkitVersion = '202605201522';
|
|
1686
1686
|
|
|
1687
1687
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1688
1688
|
// See LICENSE in the project root for license information.
|
|
@@ -1682,7 +1682,7 @@ class AuroHelpText extends i$2 {
|
|
|
1682
1682
|
}
|
|
1683
1683
|
}
|
|
1684
1684
|
|
|
1685
|
-
var formkitVersion = '
|
|
1685
|
+
var formkitVersion = '202605201522';
|
|
1686
1686
|
|
|
1687
1687
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1688
1688
|
// 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","readme.md"]
|
|
1
|
+
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-checkbox.md","readme.md"]
|
|
@@ -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/why-checkbox.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 | Why auro-checkbox</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('./why-checkbox.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,86 @@
|
|
|
1
|
+
<auro-header level="1" id="overview">Why auro-checkbox?</auro-header>
|
|
2
|
+
<p>The native HTML <code><input type="checkbox"></code> is functional but minimal. It cannot be styled consistently across browsers, offers no group-level validation, and provides no integration with a design system. <code>auro-checkbox</code> and <code>auro-checkbox-group</code> address these gaps.</p>
|
|
3
|
+
<auro-header level="2" id="accessibility">Accessibility</auro-header>
|
|
4
|
+
<p>Native checkboxes have basic accessibility, but managing groups of related checkboxes — with a shared legend, coordinated validation, and consistent keyboard behavior — requires significant custom work.</p>
|
|
5
|
+
<p><code>auro-checkbox</code> provides:</p>
|
|
6
|
+
<ul>
|
|
7
|
+
<li><strong>Proper ARIA semantics</strong> — Each checkbox carries <code>role="checkbox"</code>, <code>aria-checked</code>, and <code>aria-disabled</code> attributes that stay in sync with component state.</li>
|
|
8
|
+
<li><strong>Automatic label binding</strong> — Slot content is automatically associated as the accessible label, eliminating <code><label for></code> wiring.</li>
|
|
9
|
+
<li><strong>Group-level semantics</strong> — <code>auro-checkbox-group</code> wraps checkboxes with a <code>legend</code> slot, giving screen readers a clear group description.</li>
|
|
10
|
+
<li><strong>Keyboard interaction</strong> — Space toggles the checkbox, matching the expected interaction pattern.</li>
|
|
11
|
+
</ul>
|
|
12
|
+
<auro-header level="2" id="groupManagement">Group management</auro-header>
|
|
13
|
+
<p>HTML has no native concept of a checkbox group. Building one requires manual DOM wiring for legends, error messages, and validation state.</p>
|
|
14
|
+
<p><code>auro-checkbox-group</code> handles this with:</p>
|
|
15
|
+
<ul>
|
|
16
|
+
<li>A coordinated <code>value</code> array reflecting all checked items</li>
|
|
17
|
+
<li>Group-level <code>required</code> validation (at least one must be selected)</li>
|
|
18
|
+
<li>Propagation of <code>disabled</code> state to all child checkboxes</li>
|
|
19
|
+
<li>Horizontal layout option for compact groups (up to 3 items)</li>
|
|
20
|
+
<li>A single <code>reset()</code> method that clears all checkboxes and validation state</li>
|
|
21
|
+
</ul>
|
|
22
|
+
<auro-header level="2" id="validation">Validation</auro-header>
|
|
23
|
+
<p>Native checkboxes support <code>required</code> on individual inputs, but there is no way to require "at least one selected" across a group without JavaScript.</p>
|
|
24
|
+
<p><code>auro-checkbox-group</code> integrates with the Auro form validation system:</p>
|
|
25
|
+
<ul>
|
|
26
|
+
<li>Group-level <code>required</code> validation</li>
|
|
27
|
+
<li>Custom error messages via <code>setCustomValidity</code> and <code>setCustomValidityValueMissing</code></li>
|
|
28
|
+
<li><code>touched</code> tracking so errors only appear after user interaction</li>
|
|
29
|
+
<li>Dispatches <code>auroFormElement-validated</code> events for parent form coordination</li>
|
|
30
|
+
</ul>
|
|
31
|
+
<auro-header level="2" id="themingAndVisualConsistency">Theming and visual consistency</auro-header>
|
|
32
|
+
<p>Native checkboxes render differently across browsers and operating systems. Their appearance cannot be reliably controlled with CSS alone.</p>
|
|
33
|
+
<p><code>auro-checkbox</code> is built with the Auro Design System:</p>
|
|
34
|
+
<ul>
|
|
35
|
+
<li>Consistent visual language across all browsers and platforms</li>
|
|
36
|
+
<li>Light and dark theme support (<code>appearance="default"</code> or <code>appearance="inverse"</code>)</li>
|
|
37
|
+
<li>CSS <code>::part()</code> selectors for targeted styling (<code>checkbox</code>, <code>checkbox-input</code>, <code>checkbox-label</code>)</li>
|
|
38
|
+
<li>Embedded checkmark SVG that renders only when checked</li>
|
|
39
|
+
</ul>
|
|
40
|
+
<auro-header level="2" id="summary">Summary</auro-header>
|
|
41
|
+
<table>
|
|
42
|
+
<thead>
|
|
43
|
+
<tr>
|
|
44
|
+
<th>Capability</th>
|
|
45
|
+
<th><code><input type="checkbox"></code></th>
|
|
46
|
+
<th><code>auro-checkbox</code></th>
|
|
47
|
+
</tr>
|
|
48
|
+
</thead>
|
|
49
|
+
<tbody>
|
|
50
|
+
<tr>
|
|
51
|
+
<td>Consistent cross-browser styling</td>
|
|
52
|
+
<td>No</td>
|
|
53
|
+
<td>Yes</td>
|
|
54
|
+
</tr>
|
|
55
|
+
<tr>
|
|
56
|
+
<td>Group validation</td>
|
|
57
|
+
<td>Not supported</td>
|
|
58
|
+
<td>Built-in with <code>auro-checkbox-group</code></td>
|
|
59
|
+
</tr>
|
|
60
|
+
<tr>
|
|
61
|
+
<td>Custom error messages</td>
|
|
62
|
+
<td>Not supported</td>
|
|
63
|
+
<td>Per-constraint custom messages</td>
|
|
64
|
+
</tr>
|
|
65
|
+
<tr>
|
|
66
|
+
<td>Accessible group labeling</td>
|
|
67
|
+
<td>Manual <code><fieldset></code>/<code><legend></code></td>
|
|
68
|
+
<td>Automatic via <code>legend</code> slot</td>
|
|
69
|
+
</tr>
|
|
70
|
+
<tr>
|
|
71
|
+
<td>Theming</td>
|
|
72
|
+
<td>Browser-dependent</td>
|
|
73
|
+
<td>Full design system integration</td>
|
|
74
|
+
</tr>
|
|
75
|
+
<tr>
|
|
76
|
+
<td>Horizontal layout</td>
|
|
77
|
+
<td>Manual CSS</td>
|
|
78
|
+
<td><code>horizontal</code> attribute</td>
|
|
79
|
+
</tr>
|
|
80
|
+
<tr>
|
|
81
|
+
<td>Reset all in group</td>
|
|
82
|
+
<td>Manual</td>
|
|
83
|
+
<td>Single <code>reset()</code> call</td>
|
|
84
|
+
</tr>
|
|
85
|
+
</tbody>
|
|
86
|
+
</table>
|
|
@@ -1635,7 +1635,7 @@ class AuroHelpText extends LitElement {
|
|
|
1635
1635
|
}
|
|
1636
1636
|
}
|
|
1637
1637
|
|
|
1638
|
-
var formkitVersion = '
|
|
1638
|
+
var formkitVersion = '202605201522';
|
|
1639
1639
|
|
|
1640
1640
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1641
1641
|
// See LICENSE in the project root for license information.
|
|
@@ -1635,7 +1635,7 @@ class AuroHelpText extends LitElement {
|
|
|
1635
1635
|
}
|
|
1636
1636
|
}
|
|
1637
1637
|
|
|
1638
|
-
var formkitVersion = '
|
|
1638
|
+
var formkitVersion = '202605201522';
|
|
1639
1639
|
|
|
1640
1640
|
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
1641
1641
|
// See LICENSE in the project root for license information.
|
|
@@ -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 = '202605201522';
|
|
5282
5282
|
|
|
5283
5283
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5284
5284
|
static get properties() {
|
|
@@ -6275,9 +6275,9 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6275
6275
|
while (current.parentElement) {
|
|
6276
6276
|
const parent = current.parentElement;
|
|
6277
6277
|
for (const sibling of parent.children) {
|
|
6278
|
-
if (sibling !== current
|
|
6278
|
+
if (sibling !== current) {
|
|
6279
|
+
this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
|
|
6279
6280
|
sibling.inert = true;
|
|
6280
|
-
this._inertSiblings.push(sibling);
|
|
6281
6281
|
}
|
|
6282
6282
|
}
|
|
6283
6283
|
current = parent;
|
|
@@ -6285,13 +6285,15 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6285
6285
|
}
|
|
6286
6286
|
|
|
6287
6287
|
/**
|
|
6288
|
-
* Restores `inert` state on siblings that were
|
|
6288
|
+
* Restores `inert` state on siblings that were tracked by `_setPageInert`.
|
|
6289
|
+
* Preserves the previous inert state so externally-inerted elements are
|
|
6290
|
+
* not inadvertently re-enabled.
|
|
6289
6291
|
* @private
|
|
6290
6292
|
*/
|
|
6291
6293
|
_clearPageInert() {
|
|
6292
6294
|
if (this._inertSiblings) {
|
|
6293
|
-
for (const
|
|
6294
|
-
|
|
6295
|
+
for (const entry of this._inertSiblings) {
|
|
6296
|
+
entry.element.inert = entry.wasInert;
|
|
6295
6297
|
}
|
|
6296
6298
|
this._inertSiblings = undefined;
|
|
6297
6299
|
}
|
|
@@ -13238,7 +13240,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
13238
13240
|
}
|
|
13239
13241
|
};
|
|
13240
13242
|
|
|
13241
|
-
var formkitVersion$1 = '
|
|
13243
|
+
var formkitVersion$1 = '202605201522';
|
|
13242
13244
|
|
|
13243
13245
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13244
13246
|
// See LICENSE in the project root for license information.
|
|
@@ -14311,7 +14313,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
14311
14313
|
}
|
|
14312
14314
|
}
|
|
14313
14315
|
|
|
14314
|
-
var formkitVersion = '
|
|
14316
|
+
var formkitVersion = '202605201522';
|
|
14315
14317
|
|
|
14316
14318
|
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}`;
|
|
14317
14319
|
|
|
@@ -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 = '202605201522';
|
|
5282
5282
|
|
|
5283
5283
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5284
5284
|
static get properties() {
|
|
@@ -6275,9 +6275,9 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6275
6275
|
while (current.parentElement) {
|
|
6276
6276
|
const parent = current.parentElement;
|
|
6277
6277
|
for (const sibling of parent.children) {
|
|
6278
|
-
if (sibling !== current
|
|
6278
|
+
if (sibling !== current) {
|
|
6279
|
+
this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
|
|
6279
6280
|
sibling.inert = true;
|
|
6280
|
-
this._inertSiblings.push(sibling);
|
|
6281
6281
|
}
|
|
6282
6282
|
}
|
|
6283
6283
|
current = parent;
|
|
@@ -6285,13 +6285,15 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6285
6285
|
}
|
|
6286
6286
|
|
|
6287
6287
|
/**
|
|
6288
|
-
* Restores `inert` state on siblings that were
|
|
6288
|
+
* Restores `inert` state on siblings that were tracked by `_setPageInert`.
|
|
6289
|
+
* Preserves the previous inert state so externally-inerted elements are
|
|
6290
|
+
* not inadvertently re-enabled.
|
|
6289
6291
|
* @private
|
|
6290
6292
|
*/
|
|
6291
6293
|
_clearPageInert() {
|
|
6292
6294
|
if (this._inertSiblings) {
|
|
6293
|
-
for (const
|
|
6294
|
-
|
|
6295
|
+
for (const entry of this._inertSiblings) {
|
|
6296
|
+
entry.element.inert = entry.wasInert;
|
|
6295
6297
|
}
|
|
6296
6298
|
this._inertSiblings = undefined;
|
|
6297
6299
|
}
|
|
@@ -13238,7 +13240,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
13238
13240
|
}
|
|
13239
13241
|
};
|
|
13240
13242
|
|
|
13241
|
-
var formkitVersion$1 = '
|
|
13243
|
+
var formkitVersion$1 = '202605201522';
|
|
13242
13244
|
|
|
13243
13245
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13244
13246
|
// See LICENSE in the project root for license information.
|
|
@@ -14311,7 +14313,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
14311
14313
|
}
|
|
14312
14314
|
}
|
|
14313
14315
|
|
|
14314
|
-
var formkitVersion = '
|
|
14316
|
+
var formkitVersion = '202605201522';
|
|
14315
14317
|
|
|
14316
14318
|
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}`;
|
|
14317
14319
|
|
|
@@ -5293,7 +5293,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
5293
5293
|
}
|
|
5294
5294
|
};
|
|
5295
5295
|
|
|
5296
|
-
var formkitVersion$2 = '
|
|
5296
|
+
var formkitVersion$2 = '202605201522';
|
|
5297
5297
|
|
|
5298
5298
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5299
5299
|
static get properties() {
|
|
@@ -6290,9 +6290,9 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6290
6290
|
while (current.parentElement) {
|
|
6291
6291
|
const parent = current.parentElement;
|
|
6292
6292
|
for (const sibling of parent.children) {
|
|
6293
|
-
if (sibling !== current
|
|
6293
|
+
if (sibling !== current) {
|
|
6294
|
+
this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
|
|
6294
6295
|
sibling.inert = true;
|
|
6295
|
-
this._inertSiblings.push(sibling);
|
|
6296
6296
|
}
|
|
6297
6297
|
}
|
|
6298
6298
|
current = parent;
|
|
@@ -6300,13 +6300,15 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6300
6300
|
}
|
|
6301
6301
|
|
|
6302
6302
|
/**
|
|
6303
|
-
* Restores `inert` state on siblings that were
|
|
6303
|
+
* Restores `inert` state on siblings that were tracked by `_setPageInert`.
|
|
6304
|
+
* Preserves the previous inert state so externally-inerted elements are
|
|
6305
|
+
* not inadvertently re-enabled.
|
|
6304
6306
|
* @private
|
|
6305
6307
|
*/
|
|
6306
6308
|
_clearPageInert() {
|
|
6307
6309
|
if (this._inertSiblings) {
|
|
6308
|
-
for (const
|
|
6309
|
-
|
|
6310
|
+
for (const entry of this._inertSiblings) {
|
|
6311
|
+
entry.element.inert = entry.wasInert;
|
|
6310
6312
|
}
|
|
6311
6313
|
this._inertSiblings = undefined;
|
|
6312
6314
|
}
|
|
@@ -13253,7 +13255,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
13253
13255
|
}
|
|
13254
13256
|
};
|
|
13255
13257
|
|
|
13256
|
-
var formkitVersion$1 = '
|
|
13258
|
+
var formkitVersion$1 = '202605201522';
|
|
13257
13259
|
|
|
13258
13260
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13259
13261
|
// See LICENSE in the project root for license information.
|
|
@@ -14326,7 +14328,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
14326
14328
|
}
|
|
14327
14329
|
}
|
|
14328
14330
|
|
|
14329
|
-
var formkitVersion = '
|
|
14331
|
+
var formkitVersion = '202605201522';
|
|
14330
14332
|
|
|
14331
14333
|
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}`;
|
|
14332
14334
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","readme.md"]
|
|
1
|
+
["accessibility.md","api.md","customize.md","design.md","getting-started.md","index.md","keyboard-behavior.md","voiceover.md","why-combobox.md","readme.md"]
|
|
@@ -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/why-combobox.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 | Why auro-combobox</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('./why-combobox.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,113 @@
|
|
|
1
|
+
<auro-header level="1" id="overview">Why auro-combobox?</auro-header>
|
|
2
|
+
<p>The native <code><input list></code> with <code><datalist></code> provides a basic autocomplete experience, but it cannot be styled, has no concept of required selection, and offers no mobile-friendly layout. <code>auro-combobox</code> is a fully featured autocomplete and selection component designed for real-world use.</p>
|
|
3
|
+
<auro-header level="2" id="accessibility">Accessibility</auro-header>
|
|
4
|
+
<p>Native <code><datalist></code> support varies between browsers. Some announce suggestion counts, others do not. Keyboard behavior is inconsistent, and there is no standard way to communicate selection state to screen readers.</p>
|
|
5
|
+
<p><code>auro-combobox</code> provides:</p>
|
|
6
|
+
<ul>
|
|
7
|
+
<li><strong>ARIA combobox pattern</strong> — The input carries <code>aria-expanded</code>, <code>aria-owns</code>, and <code>aria-haspopup</code> to properly describe the relationship between the input and the suggestions list.</li>
|
|
8
|
+
<li><strong>Active descendant tracking</strong> — <code>aria-activedescendant</code> moves with keyboard navigation so screen readers announce the highlighted option without moving DOM focus.</li>
|
|
9
|
+
<li><strong>Live region announcements</strong> — Selections are announced via <code>aria-live="polite"</code>, and validation errors use <code>aria-live="assertive"</code>.</li>
|
|
10
|
+
<li><strong>Full keyboard navigation</strong> — Arrow keys navigate options, Enter selects, Escape closes, Home/End jump to boundaries. A dedicated keyboard strategy handles all interactions.</li>
|
|
11
|
+
</ul>
|
|
12
|
+
<auro-header level="2" id="dualBehaviorModes">Dual behavior modes</auro-header>
|
|
13
|
+
<p>Native <code><datalist></code> always allows freeform input. There is no way to restrict the user to only the provided options.</p>
|
|
14
|
+
<p><code>auro-combobox</code> supports two modes:</p>
|
|
15
|
+
<ul>
|
|
16
|
+
<li><strong>Suggestion mode</strong> (default) — The user can type any value. Suggestions are offered but not required.</li>
|
|
17
|
+
<li><strong>Filter mode</strong> — The user must select from the available options. Typed text filters the list but cannot be submitted as a value. Validation enforces this constraint.</li>
|
|
18
|
+
</ul>
|
|
19
|
+
<auro-header level="2" id="realtimeFiltering">Real-time filtering</auro-header>
|
|
20
|
+
<p><code><datalist></code> filtering is browser-controlled and cannot be customized. Some browsers match from the start of the option text, others match anywhere.</p>
|
|
21
|
+
<p><code>auro-combobox</code> filters options as the user types, with full control:</p>
|
|
22
|
+
<ul>
|
|
23
|
+
<li><code>noFilter</code> disables filtering to show all options regardless of input</li>
|
|
24
|
+
<li><code>matchWord</code> highlights the matched portion of each option</li>
|
|
25
|
+
<li><code>persistInput</code> keeps the filter text visible after selection</li>
|
|
26
|
+
</ul>
|
|
27
|
+
<auro-header level="2" id="responsiveLayout">Responsive layout</auro-header>
|
|
28
|
+
<p>Native <code><datalist></code> renders a small browser-controlled popup that cannot be repositioned or resized.</p>
|
|
29
|
+
<p><code>auro-combobox</code> adapts to the viewport:</p>
|
|
30
|
+
<ul>
|
|
31
|
+
<li><strong>Desktop</strong> — Suggestions appear as a positioned dropdown using Floating UI, with configurable placement, offset, flip, and shift behavior</li>
|
|
32
|
+
<li><strong>Mobile</strong> — Suggestions open in a fullscreen dialog via <code>showModal()</code>, with a configurable breakpoint (<code>fullscreenBreakpoint</code>)</li>
|
|
33
|
+
<li><strong>Width matching</strong> — The dropdown can match the input width or size independently</li>
|
|
34
|
+
</ul>
|
|
35
|
+
<auro-header level="2" id="validation">Validation</auro-header>
|
|
36
|
+
<p>Native <code><datalist></code> has no built-in validation beyond standard <code>required</code>.</p>
|
|
37
|
+
<p><code>auro-combobox</code> integrates with the Auro form validation system:</p>
|
|
38
|
+
<ul>
|
|
39
|
+
<li>Required field validation with mode-aware messaging (separate messages for suggestion vs. filter mode)</li>
|
|
40
|
+
<li>Custom error messages per validity state (<code>setCustomValidityCustomError</code>, <code>setCustomValidityValueMissing</code>, <code>setCustomValidityValueMissingFilter</code>)</li>
|
|
41
|
+
<li>Validation on blur with <code>noValidate</code> opt-out</li>
|
|
42
|
+
<li>Error display via help text with <code>role="alert"</code></li>
|
|
43
|
+
</ul>
|
|
44
|
+
<auro-header level="2" id="inputMasking">Input masking</auro-header>
|
|
45
|
+
<p><code><datalist></code> inputs have no formatting support.</p>
|
|
46
|
+
<p><code>auro-combobox</code> supports input masks via the <code>format</code> attribute, enabling structured input (e.g., dates, phone numbers) while still offering suggestions.</p>
|
|
47
|
+
<auro-header level="2" id="designSystemIntegration">Design system integration</auro-header>
|
|
48
|
+
<p><code><datalist></code> styling is entirely browser-controlled. The popup cannot be themed, and option rendering is limited to plain text.</p>
|
|
49
|
+
<p><code>auro-combobox</code> is built with the Auro Design System:</p>
|
|
50
|
+
<ul>
|
|
51
|
+
<li>Three layout options: classic, emphasized, and snowflake</li>
|
|
52
|
+
<li>Light and dark theme support (<code>appearance</code>)</li>
|
|
53
|
+
<li>Checkmarks on selected options</li>
|
|
54
|
+
<li>Rich HTML content in options (icons, descriptions, nested structure)</li>
|
|
55
|
+
<li>CSS <code>::part()</code> selectors for styling</li>
|
|
56
|
+
</ul>
|
|
57
|
+
<auro-header level="2" id="summary">Summary</auro-header>
|
|
58
|
+
<table>
|
|
59
|
+
<thead>
|
|
60
|
+
<tr>
|
|
61
|
+
<th>Capability</th>
|
|
62
|
+
<th><code><input list></code> + <code><datalist></code></th>
|
|
63
|
+
<th><code>auro-combobox</code></th>
|
|
64
|
+
</tr>
|
|
65
|
+
</thead>
|
|
66
|
+
<tbody>
|
|
67
|
+
<tr>
|
|
68
|
+
<td>Restrict to options only</td>
|
|
69
|
+
<td>No</td>
|
|
70
|
+
<td>Yes (filter mode)</td>
|
|
71
|
+
</tr>
|
|
72
|
+
<tr>
|
|
73
|
+
<td>Real-time filtering control</td>
|
|
74
|
+
<td>Browser-controlled</td>
|
|
75
|
+
<td>Fully configurable</td>
|
|
76
|
+
</tr>
|
|
77
|
+
<tr>
|
|
78
|
+
<td>Keyboard navigation</td>
|
|
79
|
+
<td>Inconsistent</td>
|
|
80
|
+
<td>Full arrow/Enter/Escape/Home/End</td>
|
|
81
|
+
</tr>
|
|
82
|
+
<tr>
|
|
83
|
+
<td>Screen reader announcements</td>
|
|
84
|
+
<td>Inconsistent</td>
|
|
85
|
+
<td>Live regions and active descendant</td>
|
|
86
|
+
</tr>
|
|
87
|
+
<tr>
|
|
88
|
+
<td>Mobile fullscreen</td>
|
|
89
|
+
<td>No</td>
|
|
90
|
+
<td>Automatic at breakpoint</td>
|
|
91
|
+
</tr>
|
|
92
|
+
<tr>
|
|
93
|
+
<td>Input masking</td>
|
|
94
|
+
<td>No</td>
|
|
95
|
+
<td>Yes (format attribute)</td>
|
|
96
|
+
</tr>
|
|
97
|
+
<tr>
|
|
98
|
+
<td>Custom validation messages</td>
|
|
99
|
+
<td>No</td>
|
|
100
|
+
<td>Per-constraint messages</td>
|
|
101
|
+
</tr>
|
|
102
|
+
<tr>
|
|
103
|
+
<td>Rich option content</td>
|
|
104
|
+
<td>Plain text only</td>
|
|
105
|
+
<td>Full HTML</td>
|
|
106
|
+
</tr>
|
|
107
|
+
<tr>
|
|
108
|
+
<td>Theming</td>
|
|
109
|
+
<td>No</td>
|
|
110
|
+
<td>Three layouts + appearance modes</td>
|
|
111
|
+
</tr>
|
|
112
|
+
</tbody>
|
|
113
|
+
</table>
|
|
@@ -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 = '202605201522';
|
|
5215
5215
|
|
|
5216
5216
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
5217
5217
|
static get properties() {
|
|
@@ -6208,9 +6208,9 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6208
6208
|
while (current.parentElement) {
|
|
6209
6209
|
const parent = current.parentElement;
|
|
6210
6210
|
for (const sibling of parent.children) {
|
|
6211
|
-
if (sibling !== current
|
|
6211
|
+
if (sibling !== current) {
|
|
6212
|
+
this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
|
|
6212
6213
|
sibling.inert = true;
|
|
6213
|
-
this._inertSiblings.push(sibling);
|
|
6214
6214
|
}
|
|
6215
6215
|
}
|
|
6216
6216
|
current = parent;
|
|
@@ -6218,13 +6218,15 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6218
6218
|
}
|
|
6219
6219
|
|
|
6220
6220
|
/**
|
|
6221
|
-
* Restores `inert` state on siblings that were
|
|
6221
|
+
* Restores `inert` state on siblings that were tracked by `_setPageInert`.
|
|
6222
|
+
* Preserves the previous inert state so externally-inerted elements are
|
|
6223
|
+
* not inadvertently re-enabled.
|
|
6222
6224
|
* @private
|
|
6223
6225
|
*/
|
|
6224
6226
|
_clearPageInert() {
|
|
6225
6227
|
if (this._inertSiblings) {
|
|
6226
|
-
for (const
|
|
6227
|
-
|
|
6228
|
+
for (const entry of this._inertSiblings) {
|
|
6229
|
+
entry.element.inert = entry.wasInert;
|
|
6228
6230
|
}
|
|
6229
6231
|
this._inertSiblings = undefined;
|
|
6230
6232
|
}
|
|
@@ -13164,7 +13166,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
13164
13166
|
}
|
|
13165
13167
|
};
|
|
13166
13168
|
|
|
13167
|
-
var formkitVersion$1 = '
|
|
13169
|
+
var formkitVersion$1 = '202605201522';
|
|
13168
13170
|
|
|
13169
13171
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13170
13172
|
// See LICENSE in the project root for license information.
|
|
@@ -14237,7 +14239,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
14237
14239
|
}
|
|
14238
14240
|
}
|
|
14239
14241
|
|
|
14240
|
-
var formkitVersion = '
|
|
14242
|
+
var formkitVersion = '202605201522';
|
|
14241
14243
|
|
|
14242
14244
|
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}`;
|
|
14243
14245
|
|