@aurodesignsystem-dev/auro-formkit 0.0.0-pr1488.1 → 0.0.0-pr1489.0
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/bibtemplate/dist/auro-bibtemplate.d.ts +7 -0
- package/components/bibtemplate/dist/index.js +9 -1
- package/components/bibtemplate/dist/registered.js +9 -1
- 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 +234 -16
- package/components/combobox/demo/getting-started.min.js +234 -16
- package/components/combobox/demo/index.min.js +234 -16
- 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 +234 -16
- package/components/combobox/dist/registered.js +234 -16
- package/components/counter/demo/customize.min.js +233 -15
- package/components/counter/demo/index.min.js +233 -15
- package/components/counter/demo/keyboard-behavior.md +1 -0
- 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 +10 -2
- package/components/counter/dist/registered.js +10 -2
- package/components/datepicker/demo/accessibility.md +51 -3
- package/components/datepicker/demo/api.md +11 -2
- package/components/datepicker/demo/customize.html +2 -0
- package/components/datepicker/demo/customize.js +19 -0
- package/components/datepicker/demo/customize.md +72 -8
- package/components/datepicker/demo/customize.min.js +26029 -0
- package/components/datepicker/demo/design.md +3 -1
- package/components/datepicker/demo/index.js +5 -1
- package/components/datepicker/demo/index.md +83 -2
- package/components/datepicker/demo/index.min.js +1564 -96
- package/components/datepicker/demo/keyboard-behavior.md +201 -2
- package/components/datepicker/demo/pages.json +1 -1
- package/components/datepicker/demo/voiceover.md +19 -12
- package/components/datepicker/demo/why-datepicker.html +57 -0
- package/components/datepicker/demo/why-datepicker.md +133 -0
- package/components/datepicker/dist/index.js +1489 -97
- package/components/datepicker/dist/registered.js +1489 -97
- package/components/datepicker/dist/src/auro-calendar-cell.d.ts +66 -1
- package/components/datepicker/dist/src/auro-calendar-month.d.ts +28 -0
- package/components/datepicker/dist/src/auro-calendar.d.ts +100 -0
- package/components/datepicker/dist/src/auro-datepicker.d.ts +88 -0
- package/components/datepicker/dist/src/datepickerKeyboardStrategy.d.ts +5 -3
- package/components/dropdown/demo/accessibility.md +11 -0
- package/components/dropdown/demo/api.md +1 -0
- package/components/dropdown/demo/customize.md +3 -0
- package/components/dropdown/demo/customize.min.js +223 -13
- package/components/dropdown/demo/getting-started.min.js +223 -13
- package/components/dropdown/demo/index.min.js +223 -13
- package/components/dropdown/demo/keyboard-behavior.md +1 -0
- 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 +33 -1
- package/components/dropdown/dist/index.js +223 -13
- package/components/dropdown/dist/registered.js +223 -13
- package/components/form/demo/customize.min.js +2191 -145
- package/components/form/demo/getting-started.min.js +2191 -145
- package/components/form/demo/index.min.js +2191 -145
- package/components/form/demo/pages.json +1 -1
- package/components/form/demo/registerDemoDeps.min.js +2191 -145
- 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 +2186 -0
- package/components/radio/demo/demo-support.min.js +55807 -0
- package/components/radio/demo/getting-started.js +1 -1
- package/components/radio/demo/getting-started.md +1 -1
- package/components/radio/demo/getting-started.min.js +2205 -0
- 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 +233 -15
- package/components/select/demo/getting-started.min.js +233 -15
- package/components/select/demo/index.min.js +233 -15
- package/components/select/demo/keyboard-behavior.md +1 -0
- 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 +233 -15
- package/components/select/dist/registered.js +233 -15
- package/custom-elements.json +2177 -1460
- package/package.json +2 -2
|
@@ -19,6 +19,13 @@ export class AuroBibtemplate extends LitElement {
|
|
|
19
19
|
type: BooleanConstructor;
|
|
20
20
|
reflect: boolean;
|
|
21
21
|
};
|
|
22
|
+
/**
|
|
23
|
+
* If declared, the footer slot will be rendered even when not in fullscreen mode.
|
|
24
|
+
*/
|
|
25
|
+
showFooter: {
|
|
26
|
+
type: BooleanConstructor;
|
|
27
|
+
reflect: boolean;
|
|
28
|
+
};
|
|
22
29
|
};
|
|
23
30
|
/**
|
|
24
31
|
* This will register this element with the browser.
|
|
@@ -281,6 +281,14 @@ class AuroBibtemplate extends LitElement {
|
|
|
281
281
|
large: {
|
|
282
282
|
type: Boolean,
|
|
283
283
|
reflect: true
|
|
284
|
+
},
|
|
285
|
+
|
|
286
|
+
/**
|
|
287
|
+
* If declared, the footer slot will be rendered even when not in fullscreen mode.
|
|
288
|
+
*/
|
|
289
|
+
showFooter: {
|
|
290
|
+
type: Boolean,
|
|
291
|
+
reflect: true
|
|
284
292
|
}
|
|
285
293
|
};
|
|
286
294
|
}
|
|
@@ -383,7 +391,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
383
391
|
<slot></slot>
|
|
384
392
|
</div>
|
|
385
393
|
|
|
386
|
-
${this.isFullscreen ? html`
|
|
394
|
+
${this.isFullscreen || this.showFooter ? html`
|
|
387
395
|
<div id="footerContainer">
|
|
388
396
|
<slot name="footer"></slot>
|
|
389
397
|
</div>` : null}
|
|
@@ -281,6 +281,14 @@ class AuroBibtemplate extends LitElement {
|
|
|
281
281
|
large: {
|
|
282
282
|
type: Boolean,
|
|
283
283
|
reflect: true
|
|
284
|
+
},
|
|
285
|
+
|
|
286
|
+
/**
|
|
287
|
+
* If declared, the footer slot will be rendered even when not in fullscreen mode.
|
|
288
|
+
*/
|
|
289
|
+
showFooter: {
|
|
290
|
+
type: Boolean,
|
|
291
|
+
reflect: true
|
|
284
292
|
}
|
|
285
293
|
};
|
|
286
294
|
}
|
|
@@ -383,7 +391,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
383
391
|
<slot></slot>
|
|
384
392
|
</div>
|
|
385
393
|
|
|
386
|
-
${this.isFullscreen ? html`
|
|
394
|
+
${this.isFullscreen || this.showFooter ? html`
|
|
387
395
|
<div id="footerContainer">
|
|
388
396
|
<slot name="footer"></slot>
|
|
389
397
|
</div>` : null}
|
|
@@ -1682,7 +1682,7 @@ class AuroHelpText extends i$2 {
|
|
|
1682
1682
|
}
|
|
1683
1683
|
}
|
|
1684
1684
|
|
|
1685
|
-
var formkitVersion = '
|
|
1685
|
+
var formkitVersion = '202606011856';
|
|
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 = '202606011856';
|
|
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 = '202606011856';
|
|
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 = '202606011856';
|
|
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 = '202606011856';
|
|
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.
|
|
@@ -4647,7 +4647,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
|
4647
4647
|
});
|
|
4648
4648
|
}
|
|
4649
4649
|
|
|
4650
|
-
var styleCss$2$1 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
|
|
4650
|
+
var styleCss$2$1 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host([desktopmodal]:popover-open)::backdrop{background:transparent}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
|
|
4651
4651
|
|
|
4652
4652
|
var colorCss$2$1 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
4653
4653
|
|
|
@@ -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 = '202606011856';
|
|
5282
5282
|
|
|
5283
5283
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
5284
5284
|
static get properties() {
|
|
@@ -5458,6 +5458,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5458
5458
|
_intializeDefaults() {
|
|
5459
5459
|
this.appearance = 'default';
|
|
5460
5460
|
this.chevron = false;
|
|
5461
|
+
this.desktopModal = false;
|
|
5461
5462
|
this.disabled = false;
|
|
5462
5463
|
this.disableKeyboardHandling = false;
|
|
5463
5464
|
this.error = false;
|
|
@@ -5638,6 +5639,14 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5638
5639
|
reflect: true
|
|
5639
5640
|
},
|
|
5640
5641
|
|
|
5642
|
+
/**
|
|
5643
|
+
* If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
|
|
5644
|
+
*/
|
|
5645
|
+
desktopModal: {
|
|
5646
|
+
type: Boolean,
|
|
5647
|
+
reflect: true
|
|
5648
|
+
},
|
|
5649
|
+
|
|
5641
5650
|
/**
|
|
5642
5651
|
* If declared, the dropdown will only show by calling the API .show() public method.
|
|
5643
5652
|
*/
|
|
@@ -5925,6 +5934,15 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5925
5934
|
|
|
5926
5935
|
disconnectedCallback() {
|
|
5927
5936
|
super.disconnectedCallback();
|
|
5937
|
+
this._clearPageInert();
|
|
5938
|
+
if (this._bibTabHandler) {
|
|
5939
|
+
this.removeEventListener('keydown', this._bibTabHandler);
|
|
5940
|
+
this._bibTabHandler = undefined;
|
|
5941
|
+
}
|
|
5942
|
+
if (this.focusTrap) {
|
|
5943
|
+
this.focusTrap.disconnect();
|
|
5944
|
+
this.focusTrap = undefined;
|
|
5945
|
+
}
|
|
5928
5946
|
if (this.floater) {
|
|
5929
5947
|
this.floater.hideBib('disconnect');
|
|
5930
5948
|
this.floater.disconnect();
|
|
@@ -5952,19 +5970,45 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5952
5970
|
if (this.isPopoverVisible) {
|
|
5953
5971
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
5954
5972
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
5955
|
-
|
|
5956
|
-
this.
|
|
5973
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
5974
|
+
this.updateFocusTrap();
|
|
5975
|
+
|
|
5976
|
+
// Desktop modal: make siblings inert so content outside is not interactive
|
|
5977
|
+
if (this.desktopModal && !this.isBibFullscreen) {
|
|
5978
|
+
this._setPageInert();
|
|
5979
|
+
}
|
|
5957
5980
|
} else {
|
|
5958
5981
|
this.bibElement.value.close();
|
|
5982
|
+
this._clearPageInert();
|
|
5959
5983
|
}
|
|
5960
5984
|
}
|
|
5961
5985
|
|
|
5962
5986
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
5963
5987
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
5964
5988
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
5965
|
-
const useModal = this.isBibFullscreen;
|
|
5966
5989
|
this.bibElement.value.close();
|
|
5967
|
-
this.bibElement.value.open(
|
|
5990
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
5991
|
+
|
|
5992
|
+
// Re-initialize focus management for the new strategy
|
|
5993
|
+
this.updateFocusTrap();
|
|
5994
|
+
|
|
5995
|
+
// Toggle inert: desktop modal needs it, fullscreen showModal() handles it natively
|
|
5996
|
+
if (this.desktopModal && !this.isBibFullscreen) {
|
|
5997
|
+
this._setPageInert();
|
|
5998
|
+
} else {
|
|
5999
|
+
this._clearPageInert();
|
|
6000
|
+
}
|
|
6001
|
+
}
|
|
6002
|
+
|
|
6003
|
+
// Handle desktopModal toggled while the dropdown is already open.
|
|
6004
|
+
// Re-initialize focus trapping and page inert state to match the new mode.
|
|
6005
|
+
if (changedProperties.has('desktopModal') && this.isPopoverVisible && !this.isBibFullscreen) {
|
|
6006
|
+
this.updateFocusTrap();
|
|
6007
|
+
if (this.desktopModal) {
|
|
6008
|
+
this._setPageInert();
|
|
6009
|
+
} else {
|
|
6010
|
+
this._clearPageInert();
|
|
6011
|
+
}
|
|
5968
6012
|
}
|
|
5969
6013
|
}
|
|
5970
6014
|
|
|
@@ -5974,8 +6018,14 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5974
6018
|
* @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
|
|
5975
6019
|
*/
|
|
5976
6020
|
handleDropdownToggle(event) {
|
|
5977
|
-
this.updateFocusTrap();
|
|
5978
6021
|
this.isPopoverVisible = event.detail.expanded;
|
|
6022
|
+
|
|
6023
|
+
// Tear down FocusTrap when closing. Creation happens in updated()
|
|
6024
|
+
// after the dialog is open so getFocusableElements can find content.
|
|
6025
|
+
if (!this.isPopoverVisible) {
|
|
6026
|
+
this.updateFocusTrap();
|
|
6027
|
+
}
|
|
6028
|
+
|
|
5979
6029
|
const eventType = event.detail.eventType || "unknown";
|
|
5980
6030
|
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
5981
6031
|
this.trigger.focus();
|
|
@@ -6074,19 +6124,178 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6074
6124
|
* @private
|
|
6075
6125
|
*/
|
|
6076
6126
|
updateFocusTrap() {
|
|
6127
|
+
// Always clean up existing handlers/traps before setting up new ones
|
|
6128
|
+
// to prevent duplicate listeners on repeated calls.
|
|
6129
|
+
if (this._bibTabHandler) {
|
|
6130
|
+
this.removeEventListener('keydown', this._bibTabHandler);
|
|
6131
|
+
this._bibTabHandler = undefined;
|
|
6132
|
+
}
|
|
6133
|
+
|
|
6134
|
+
if (this.focusTrap) {
|
|
6135
|
+
this.focusTrap.disconnect();
|
|
6136
|
+
this.focusTrap = undefined;
|
|
6137
|
+
}
|
|
6138
|
+
|
|
6077
6139
|
if (this.isPopoverVisible) {
|
|
6078
6140
|
if (!this.isBibFullscreen) {
|
|
6079
|
-
|
|
6080
|
-
|
|
6081
|
-
|
|
6141
|
+
if (this.desktopModal) {
|
|
6142
|
+
// Desktop modal: trap focus only within the bib content.
|
|
6143
|
+
// Can't use FocusTrap on the bib element because keydown events
|
|
6144
|
+
// from slotted content bubble through the dropdown host (light DOM),
|
|
6145
|
+
// not through the bib (shadow projection target). Using FocusTrap
|
|
6146
|
+
// on the dropdown would include the trigger in the tab cycle.
|
|
6147
|
+
// Instead, listen for Tab on the dropdown and manually wrap focus
|
|
6148
|
+
// within the bib's focusable elements.
|
|
6149
|
+
this._bibTabHandler = (event) => {
|
|
6150
|
+
if (event.key !== 'Tab') {
|
|
6151
|
+
return;
|
|
6152
|
+
}
|
|
6153
|
+
|
|
6154
|
+
// Collect focusable elements from the bib content.
|
|
6155
|
+
const focusables = getFocusableElements(this.bibContent);
|
|
6156
|
+
|
|
6157
|
+
// Fallback: try from slotted content directly
|
|
6158
|
+
if (!focusables.length) {
|
|
6159
|
+
const slot = this.shadowRoot.querySelector('.slotContent slot');
|
|
6160
|
+
const assignedNodes = slot ? slot.assignedNodes({ flatten: true }) : [];
|
|
6161
|
+
|
|
6162
|
+
for (const node of assignedNodes) {
|
|
6163
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
6164
|
+
focusables.push(...getFocusableElements(node));
|
|
6165
|
+
}
|
|
6166
|
+
}
|
|
6167
|
+
}
|
|
6168
|
+
|
|
6169
|
+
if (!focusables.length) {
|
|
6170
|
+
return;
|
|
6171
|
+
}
|
|
6172
|
+
|
|
6173
|
+
event.preventDefault();
|
|
6174
|
+
|
|
6175
|
+
const direction = event.shiftKey ? -1 : 1; // eslint-disable-line no-magic-numbers
|
|
6176
|
+
|
|
6177
|
+
// Walk the active element chain through shadow roots
|
|
6178
|
+
const actives = this._getActiveElements();
|
|
6179
|
+
|
|
6180
|
+
let idx = focusables.findIndex((el) => actives.includes(el));
|
|
6181
|
+
|
|
6182
|
+
if (idx === -1) { // eslint-disable-line no-magic-numbers
|
|
6183
|
+
// Focus is not on a known element — move to first/last
|
|
6184
|
+
idx = direction === 1 ? -1 : focusables.length; // eslint-disable-line no-magic-numbers
|
|
6185
|
+
}
|
|
6186
|
+
|
|
6187
|
+
// Try each element in order, skipping any that can't receive focus
|
|
6188
|
+
// (e.g. hidden elements, elements in collapsed sections)
|
|
6189
|
+
for (let index = 0; index < focusables.length; index++) { // eslint-disable-line no-plusplus
|
|
6190
|
+
let nextIdx = idx + direction;
|
|
6191
|
+
|
|
6192
|
+
// Wrap around
|
|
6193
|
+
if (nextIdx < 0) {
|
|
6194
|
+
nextIdx = focusables.length - 1;
|
|
6195
|
+
} else if (nextIdx >= focusables.length) {
|
|
6196
|
+
nextIdx = 0;
|
|
6197
|
+
}
|
|
6198
|
+
|
|
6199
|
+
focusables[nextIdx].focus();
|
|
6200
|
+
|
|
6201
|
+
// Verify focus actually moved to the target
|
|
6202
|
+
const newActives = this._getActiveElements();
|
|
6203
|
+
|
|
6204
|
+
if (newActives.includes(focusables[nextIdx])) {
|
|
6205
|
+
return;
|
|
6206
|
+
}
|
|
6207
|
+
|
|
6208
|
+
// Focus didn't stick — skip this element and try the next
|
|
6209
|
+
idx = nextIdx;
|
|
6210
|
+
}
|
|
6211
|
+
};
|
|
6212
|
+
this.addEventListener('keydown', this._bibTabHandler);
|
|
6213
|
+
|
|
6214
|
+
// Move initial focus into the bib content, matching FocusTrap behavior
|
|
6215
|
+
requestAnimationFrame(() => {
|
|
6216
|
+
const focusables = getFocusableElements(this.bibContent);
|
|
6217
|
+
if (focusables.length) {
|
|
6218
|
+
focusables[0].focus();
|
|
6219
|
+
}
|
|
6220
|
+
});
|
|
6221
|
+
} else {
|
|
6222
|
+
// Normal desktop: use FocusTrap on the bib element
|
|
6223
|
+
this.focusTrap = new FocusTrap(this.bibContent);
|
|
6224
|
+
this.focusTrap.focusFirstElement();
|
|
6225
|
+
}
|
|
6082
6226
|
}
|
|
6083
6227
|
// Fullscreen: showModal() provides native focus trapping
|
|
6228
|
+
}
|
|
6229
|
+
}
|
|
6230
|
+
|
|
6231
|
+
/**
|
|
6232
|
+
* Returns the chain of active (focused) elements through shadow roots.
|
|
6233
|
+
* @private
|
|
6234
|
+
* @returns {Array<HTMLElement>}
|
|
6235
|
+
*/
|
|
6236
|
+
_getActiveElements() {
|
|
6237
|
+
let { activeElement } = document;
|
|
6238
|
+
const actives = [activeElement];
|
|
6239
|
+
|
|
6240
|
+
while (activeElement?.shadowRoot?.activeElement) {
|
|
6241
|
+
activeElement = activeElement.shadowRoot.activeElement;
|
|
6242
|
+
actives.push(activeElement);
|
|
6243
|
+
}
|
|
6244
|
+
|
|
6245
|
+
return actives;
|
|
6246
|
+
}
|
|
6247
|
+
|
|
6248
|
+
/**
|
|
6249
|
+
* Sets `inert` on sibling elements of the dropdown's top-level host
|
|
6250
|
+
* so that content outside the dropdown is not interactive while the modal is open.
|
|
6251
|
+
* Walks up through shadow DOM boundaries to find the outermost host element
|
|
6252
|
+
* in the light DOM, then sets `inert` on siblings at each ancestor level
|
|
6253
|
+
* to ensure all page content outside the host subtree is inert.
|
|
6254
|
+
* @private
|
|
6255
|
+
*/
|
|
6256
|
+
_setPageInert() {
|
|
6257
|
+
if (this._inertSiblings) {
|
|
6084
6258
|
return;
|
|
6085
6259
|
}
|
|
6086
6260
|
|
|
6087
|
-
|
|
6088
|
-
|
|
6089
|
-
|
|
6261
|
+
this._inertSiblings = [];
|
|
6262
|
+
|
|
6263
|
+
// Walk up through shadow DOM boundaries to find the topmost host
|
|
6264
|
+
// element in the light DOM. For example, if this dropdown is inside
|
|
6265
|
+
// auro-datepicker's shadow DOM, we walk up to the datepicker element
|
|
6266
|
+
// so we set inert on its siblings — not on the datepicker itself.
|
|
6267
|
+
let host = this;
|
|
6268
|
+
while (host.getRootNode() instanceof ShadowRoot) {
|
|
6269
|
+
host = host.getRootNode().host;
|
|
6270
|
+
}
|
|
6271
|
+
|
|
6272
|
+
// Walk up the ancestor chain, inerting siblings at each level
|
|
6273
|
+
// to ensure the entire page outside the host subtree is inert.
|
|
6274
|
+
let current = host;
|
|
6275
|
+
while (current.parentElement) {
|
|
6276
|
+
const parent = current.parentElement;
|
|
6277
|
+
for (const sibling of parent.children) {
|
|
6278
|
+
if (sibling !== current) {
|
|
6279
|
+
this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
|
|
6280
|
+
sibling.inert = true;
|
|
6281
|
+
}
|
|
6282
|
+
}
|
|
6283
|
+
current = parent;
|
|
6284
|
+
}
|
|
6285
|
+
}
|
|
6286
|
+
|
|
6287
|
+
/**
|
|
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.
|
|
6291
|
+
* @private
|
|
6292
|
+
*/
|
|
6293
|
+
_clearPageInert() {
|
|
6294
|
+
if (this._inertSiblings) {
|
|
6295
|
+
for (const entry of this._inertSiblings) {
|
|
6296
|
+
entry.element.inert = entry.wasInert;
|
|
6297
|
+
}
|
|
6298
|
+
this._inertSiblings = undefined;
|
|
6090
6299
|
}
|
|
6091
6300
|
}
|
|
6092
6301
|
|
|
@@ -6325,6 +6534,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
6325
6534
|
shape="${this.shape}"
|
|
6326
6535
|
?data-show="${this.isPopoverVisible}"
|
|
6327
6536
|
?isfullscreen="${this.isBibFullscreen}"
|
|
6537
|
+
?desktopmodal="${this.desktopModal}"
|
|
6328
6538
|
.dialogLabel="${this.bibDialogLabel}"
|
|
6329
6539
|
${n$2(this.bibElement)}
|
|
6330
6540
|
>
|
|
@@ -13030,7 +13240,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
13030
13240
|
}
|
|
13031
13241
|
};
|
|
13032
13242
|
|
|
13033
|
-
var formkitVersion$1 = '
|
|
13243
|
+
var formkitVersion$1 = '202606011856';
|
|
13034
13244
|
|
|
13035
13245
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
13036
13246
|
// See LICENSE in the project root for license information.
|
|
@@ -13984,6 +14194,14 @@ class AuroBibtemplate extends i$4 {
|
|
|
13984
14194
|
large: {
|
|
13985
14195
|
type: Boolean,
|
|
13986
14196
|
reflect: true
|
|
14197
|
+
},
|
|
14198
|
+
|
|
14199
|
+
/**
|
|
14200
|
+
* If declared, the footer slot will be rendered even when not in fullscreen mode.
|
|
14201
|
+
*/
|
|
14202
|
+
showFooter: {
|
|
14203
|
+
type: Boolean,
|
|
14204
|
+
reflect: true
|
|
13987
14205
|
}
|
|
13988
14206
|
};
|
|
13989
14207
|
}
|
|
@@ -14086,7 +14304,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
14086
14304
|
<slot></slot>
|
|
14087
14305
|
</div>
|
|
14088
14306
|
|
|
14089
|
-
${this.isFullscreen ? u$7`
|
|
14307
|
+
${this.isFullscreen || this.showFooter ? u$7`
|
|
14090
14308
|
<div id="footerContainer">
|
|
14091
14309
|
<slot name="footer"></slot>
|
|
14092
14310
|
</div>` : null}
|
|
@@ -14095,7 +14313,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
14095
14313
|
}
|
|
14096
14314
|
}
|
|
14097
14315
|
|
|
14098
|
-
var formkitVersion = '
|
|
14316
|
+
var formkitVersion = '202606011856';
|
|
14099
14317
|
|
|
14100
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}`;
|
|
14101
14319
|
|