@aurodesignsystem-dev/auro-formkit 0.0.0-pr1488.2 → 0.0.0-pr1489.1
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 +22 -241
- 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 +2461 -415
- package/components/form/demo/getting-started.min.js +2461 -415
- package/components/form/demo/index.min.js +2461 -415
- package/components/form/demo/pages.json +1 -1
- package/components/form/demo/registerDemoDeps.min.js +2457 -411
- 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 +2183 -1466
- package/package.json +2 -2
|
@@ -1634,7 +1634,7 @@ class AuroHelpText extends i$2 {
|
|
|
1634
1634
|
}
|
|
1635
1635
|
}
|
|
1636
1636
|
|
|
1637
|
-
var formkitVersion = '
|
|
1637
|
+
var formkitVersion = '202606011911';
|
|
1638
1638
|
|
|
1639
1639
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1640
1640
|
// 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-radio.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-radio.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-radio | Why auro-radio</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-radio'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-radio.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,92 @@
|
|
|
1
|
+
<auro-header level="1" id="overview">Why auro-radio?</auro-header>
|
|
2
|
+
<p>The native <code><input type="radio"></code> provides basic mutual exclusion within a named group, but it cannot be styled consistently, has no built-in group validation or error messaging, and requires manual <code><fieldset></code>/<code><legend></code> wiring. <code>auro-radio</code> and <code>auro-radio-group</code> address these gaps.</p>
|
|
3
|
+
<auro-header level="2" id="accessibility">Accessibility</auro-header>
|
|
4
|
+
<p>Native radio buttons have basic accessibility, but managing a group with a legend, validation errors, and consistent keyboard behavior requires careful manual implementation.</p>
|
|
5
|
+
<p><code>auro-radio</code> provides:</p>
|
|
6
|
+
<ul>
|
|
7
|
+
<li><strong>Proper ARIA semantics</strong> — Each radio carries <code>role="radio"</code>, <code>aria-checked</code>, <code>aria-required</code>, and <code>aria-disabled</code>.</li>
|
|
8
|
+
<li><strong>Roving tabindex</strong> — Only the selected radio (or the first radio if none is selected) has <code>tabindex="0"</code>. Arrow keys move between radios within the group, matching the expected WAI-ARIA radio group pattern.</li>
|
|
9
|
+
<li><strong>Group labeling</strong> — <code>auro-radio-group</code> provides a <code>legend</code> slot that is automatically associated as the group's accessible label.</li>
|
|
10
|
+
<li><strong>Keyboard interaction</strong> — Arrow keys navigate between options, Space selects the focused radio.</li>
|
|
11
|
+
</ul>
|
|
12
|
+
<auro-header level="2" id="groupManagement">Group management</auro-header>
|
|
13
|
+
<p>Building a radio group with coordinated validation, error display, and state management from native inputs requires custom JavaScript and DOM structure.</p>
|
|
14
|
+
<p><code>auro-radio-group</code> provides:</p>
|
|
15
|
+
<ul>
|
|
16
|
+
<li>A single <code>value</code> property reflecting the selected radio's value</li>
|
|
17
|
+
<li><code>optionSelected</code> reference to the selected element</li>
|
|
18
|
+
<li>Propagation of <code>disabled</code> state to all child radios</li>
|
|
19
|
+
<li>Horizontal layout option via the <code>horizontal</code> attribute</li>
|
|
20
|
+
<li><code>reset()</code> to clear selection and validation state across all children</li>
|
|
21
|
+
</ul>
|
|
22
|
+
<auro-header level="2" id="validation">Validation</auro-header>
|
|
23
|
+
<p>Native radio groups support <code>required</code> via the HTML attribute, but the error message is browser-controlled and there is no standard way to display custom error text below the group.</p>
|
|
24
|
+
<p><code>auro-radio-group</code> integrates with the Auro form validation system:</p>
|
|
25
|
+
<ul>
|
|
26
|
+
<li>Group-level <code>required</code> validation (at least one must be selected)</li>
|
|
27
|
+
<li>Custom error messages via <code>setCustomValidityCustomError</code> and <code>setCustomValidityValueMissing</code></li>
|
|
28
|
+
<li><code>noValidate</code> to disable auto-validation on blur</li>
|
|
29
|
+
<li><code>touched</code> tracking so errors appear only after user interaction</li>
|
|
30
|
+
<li>Dispatches <code>auroFormElement-validated</code> events for parent form coordination</li>
|
|
31
|
+
<li>Error display via the <code>helpText</code> slot</li>
|
|
32
|
+
</ul>
|
|
33
|
+
<auro-header level="2" id="themingAndVisualConsistency">Theming and visual consistency</auro-header>
|
|
34
|
+
<p>Native radio buttons render differently across browsers and operating systems. Their appearance — the circle, the fill, the label spacing — cannot be reliably controlled with CSS alone.</p>
|
|
35
|
+
<p><code>auro-radio</code> is built with the Auro Design System:</p>
|
|
36
|
+
<ul>
|
|
37
|
+
<li>Consistent visual language across all browsers and platforms</li>
|
|
38
|
+
<li>Light and dark theme support (<code>appearance="default"</code> or <code>appearance="inverse"</code>)</li>
|
|
39
|
+
<li>CSS <code>::part()</code> selectors for targeted styling (<code>radio</code>, <code>radio-input</code>, <code>radio-label</code>)</li>
|
|
40
|
+
</ul>
|
|
41
|
+
<auro-header level="2" id="summary">Summary</auro-header>
|
|
42
|
+
<table>
|
|
43
|
+
<thead>
|
|
44
|
+
<tr>
|
|
45
|
+
<th>Capability</th>
|
|
46
|
+
<th><code><input type="radio"></code></th>
|
|
47
|
+
<th><code>auro-radio</code></th>
|
|
48
|
+
</tr>
|
|
49
|
+
</thead>
|
|
50
|
+
<tbody>
|
|
51
|
+
<tr>
|
|
52
|
+
<td>Consistent cross-browser styling</td>
|
|
53
|
+
<td>No</td>
|
|
54
|
+
<td>Yes</td>
|
|
55
|
+
</tr>
|
|
56
|
+
<tr>
|
|
57
|
+
<td>Group validation</td>
|
|
58
|
+
<td>Manual <code><fieldset></code></td>
|
|
59
|
+
<td>Built-in with <code>auro-radio-group</code></td>
|
|
60
|
+
</tr>
|
|
61
|
+
<tr>
|
|
62
|
+
<td>Custom error messages</td>
|
|
63
|
+
<td>Browser-controlled</td>
|
|
64
|
+
<td>Per-constraint custom messages</td>
|
|
65
|
+
</tr>
|
|
66
|
+
<tr>
|
|
67
|
+
<td>Roving tabindex</td>
|
|
68
|
+
<td>Manual implementation</td>
|
|
69
|
+
<td>Built-in</td>
|
|
70
|
+
</tr>
|
|
71
|
+
<tr>
|
|
72
|
+
<td>Group legend</td>
|
|
73
|
+
<td>Manual <code><legend></code></td>
|
|
74
|
+
<td><code>legend</code> slot</td>
|
|
75
|
+
</tr>
|
|
76
|
+
<tr>
|
|
77
|
+
<td>Horizontal layout</td>
|
|
78
|
+
<td>Manual CSS</td>
|
|
79
|
+
<td><code>horizontal</code> attribute</td>
|
|
80
|
+
</tr>
|
|
81
|
+
<tr>
|
|
82
|
+
<td>Theming</td>
|
|
83
|
+
<td>Browser-dependent</td>
|
|
84
|
+
<td>Full design system integration</td>
|
|
85
|
+
</tr>
|
|
86
|
+
<tr>
|
|
87
|
+
<td>Reset group</td>
|
|
88
|
+
<td>Manual per-element</td>
|
|
89
|
+
<td>Single <code>reset()</code> call</td>
|
|
90
|
+
</tr>
|
|
91
|
+
</tbody>
|
|
92
|
+
</table>
|
|
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
|
|
|
1573
1573
|
}
|
|
1574
1574
|
}
|
|
1575
1575
|
|
|
1576
|
-
var formkitVersion = '
|
|
1576
|
+
var formkitVersion = '202606011911';
|
|
1577
1577
|
|
|
1578
1578
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1579
1579
|
// See LICENSE in the project root for license information.
|
|
@@ -1573,7 +1573,7 @@ class AuroHelpText extends LitElement {
|
|
|
1573
1573
|
}
|
|
1574
1574
|
}
|
|
1575
1575
|
|
|
1576
|
-
var formkitVersion = '
|
|
1576
|
+
var formkitVersion = '202606011911';
|
|
1577
1577
|
|
|
1578
1578
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1579
1579
|
// See LICENSE in the project root for license information.
|
|
@@ -4704,7 +4704,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
|
4704
4704
|
});
|
|
4705
4705
|
}
|
|
4706
4706
|
|
|
4707
|
-
var styleCss$2$1 = i$6`: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}`;
|
|
4707
|
+
var styleCss$2$1 = i$6`: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}`;
|
|
4708
4708
|
|
|
4709
4709
|
var colorCss$2$1 = i$6`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
4710
4710
|
|
|
@@ -5335,7 +5335,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
5335
5335
|
}
|
|
5336
5336
|
};
|
|
5337
5337
|
|
|
5338
|
-
var formkitVersion$1 = '
|
|
5338
|
+
var formkitVersion$1 = '202606011911';
|
|
5339
5339
|
|
|
5340
5340
|
class AuroElement extends i$3 {
|
|
5341
5341
|
static get properties() {
|
|
@@ -5515,6 +5515,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5515
5515
|
_intializeDefaults() {
|
|
5516
5516
|
this.appearance = 'default';
|
|
5517
5517
|
this.chevron = false;
|
|
5518
|
+
this.desktopModal = false;
|
|
5518
5519
|
this.disabled = false;
|
|
5519
5520
|
this.disableKeyboardHandling = false;
|
|
5520
5521
|
this.error = false;
|
|
@@ -5695,6 +5696,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5695
5696
|
reflect: true
|
|
5696
5697
|
},
|
|
5697
5698
|
|
|
5699
|
+
/**
|
|
5700
|
+
* If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
|
|
5701
|
+
*/
|
|
5702
|
+
desktopModal: {
|
|
5703
|
+
type: Boolean,
|
|
5704
|
+
reflect: true
|
|
5705
|
+
},
|
|
5706
|
+
|
|
5698
5707
|
/**
|
|
5699
5708
|
* If declared, the dropdown will only show by calling the API .show() public method.
|
|
5700
5709
|
*/
|
|
@@ -5982,6 +5991,15 @@ class AuroDropdown extends AuroElement {
|
|
|
5982
5991
|
|
|
5983
5992
|
disconnectedCallback() {
|
|
5984
5993
|
super.disconnectedCallback();
|
|
5994
|
+
this._clearPageInert();
|
|
5995
|
+
if (this._bibTabHandler) {
|
|
5996
|
+
this.removeEventListener('keydown', this._bibTabHandler);
|
|
5997
|
+
this._bibTabHandler = undefined;
|
|
5998
|
+
}
|
|
5999
|
+
if (this.focusTrap) {
|
|
6000
|
+
this.focusTrap.disconnect();
|
|
6001
|
+
this.focusTrap = undefined;
|
|
6002
|
+
}
|
|
5985
6003
|
if (this.floater) {
|
|
5986
6004
|
this.floater.hideBib('disconnect');
|
|
5987
6005
|
this.floater.disconnect();
|
|
@@ -6009,19 +6027,45 @@ class AuroDropdown extends AuroElement {
|
|
|
6009
6027
|
if (this.isPopoverVisible) {
|
|
6010
6028
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
6011
6029
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
6012
|
-
|
|
6013
|
-
this.
|
|
6030
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
6031
|
+
this.updateFocusTrap();
|
|
6032
|
+
|
|
6033
|
+
// Desktop modal: make siblings inert so content outside is not interactive
|
|
6034
|
+
if (this.desktopModal && !this.isBibFullscreen) {
|
|
6035
|
+
this._setPageInert();
|
|
6036
|
+
}
|
|
6014
6037
|
} else {
|
|
6015
6038
|
this.bibElement.value.close();
|
|
6039
|
+
this._clearPageInert();
|
|
6016
6040
|
}
|
|
6017
6041
|
}
|
|
6018
6042
|
|
|
6019
6043
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
6020
6044
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
6021
6045
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
6022
|
-
const useModal = this.isBibFullscreen;
|
|
6023
6046
|
this.bibElement.value.close();
|
|
6024
|
-
this.bibElement.value.open(
|
|
6047
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
6048
|
+
|
|
6049
|
+
// Re-initialize focus management for the new strategy
|
|
6050
|
+
this.updateFocusTrap();
|
|
6051
|
+
|
|
6052
|
+
// Toggle inert: desktop modal needs it, fullscreen showModal() handles it natively
|
|
6053
|
+
if (this.desktopModal && !this.isBibFullscreen) {
|
|
6054
|
+
this._setPageInert();
|
|
6055
|
+
} else {
|
|
6056
|
+
this._clearPageInert();
|
|
6057
|
+
}
|
|
6058
|
+
}
|
|
6059
|
+
|
|
6060
|
+
// Handle desktopModal toggled while the dropdown is already open.
|
|
6061
|
+
// Re-initialize focus trapping and page inert state to match the new mode.
|
|
6062
|
+
if (changedProperties.has('desktopModal') && this.isPopoverVisible && !this.isBibFullscreen) {
|
|
6063
|
+
this.updateFocusTrap();
|
|
6064
|
+
if (this.desktopModal) {
|
|
6065
|
+
this._setPageInert();
|
|
6066
|
+
} else {
|
|
6067
|
+
this._clearPageInert();
|
|
6068
|
+
}
|
|
6025
6069
|
}
|
|
6026
6070
|
}
|
|
6027
6071
|
|
|
@@ -6031,8 +6075,14 @@ class AuroDropdown extends AuroElement {
|
|
|
6031
6075
|
* @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
|
|
6032
6076
|
*/
|
|
6033
6077
|
handleDropdownToggle(event) {
|
|
6034
|
-
this.updateFocusTrap();
|
|
6035
6078
|
this.isPopoverVisible = event.detail.expanded;
|
|
6079
|
+
|
|
6080
|
+
// Tear down FocusTrap when closing. Creation happens in updated()
|
|
6081
|
+
// after the dialog is open so getFocusableElements can find content.
|
|
6082
|
+
if (!this.isPopoverVisible) {
|
|
6083
|
+
this.updateFocusTrap();
|
|
6084
|
+
}
|
|
6085
|
+
|
|
6036
6086
|
const eventType = event.detail.eventType || "unknown";
|
|
6037
6087
|
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
6038
6088
|
this.trigger.focus();
|
|
@@ -6131,19 +6181,178 @@ class AuroDropdown extends AuroElement {
|
|
|
6131
6181
|
* @private
|
|
6132
6182
|
*/
|
|
6133
6183
|
updateFocusTrap() {
|
|
6184
|
+
// Always clean up existing handlers/traps before setting up new ones
|
|
6185
|
+
// to prevent duplicate listeners on repeated calls.
|
|
6186
|
+
if (this._bibTabHandler) {
|
|
6187
|
+
this.removeEventListener('keydown', this._bibTabHandler);
|
|
6188
|
+
this._bibTabHandler = undefined;
|
|
6189
|
+
}
|
|
6190
|
+
|
|
6191
|
+
if (this.focusTrap) {
|
|
6192
|
+
this.focusTrap.disconnect();
|
|
6193
|
+
this.focusTrap = undefined;
|
|
6194
|
+
}
|
|
6195
|
+
|
|
6134
6196
|
if (this.isPopoverVisible) {
|
|
6135
6197
|
if (!this.isBibFullscreen) {
|
|
6136
|
-
|
|
6137
|
-
|
|
6138
|
-
|
|
6198
|
+
if (this.desktopModal) {
|
|
6199
|
+
// Desktop modal: trap focus only within the bib content.
|
|
6200
|
+
// Can't use FocusTrap on the bib element because keydown events
|
|
6201
|
+
// from slotted content bubble through the dropdown host (light DOM),
|
|
6202
|
+
// not through the bib (shadow projection target). Using FocusTrap
|
|
6203
|
+
// on the dropdown would include the trigger in the tab cycle.
|
|
6204
|
+
// Instead, listen for Tab on the dropdown and manually wrap focus
|
|
6205
|
+
// within the bib's focusable elements.
|
|
6206
|
+
this._bibTabHandler = (event) => {
|
|
6207
|
+
if (event.key !== 'Tab') {
|
|
6208
|
+
return;
|
|
6209
|
+
}
|
|
6210
|
+
|
|
6211
|
+
// Collect focusable elements from the bib content.
|
|
6212
|
+
const focusables = getFocusableElements(this.bibContent);
|
|
6213
|
+
|
|
6214
|
+
// Fallback: try from slotted content directly
|
|
6215
|
+
if (!focusables.length) {
|
|
6216
|
+
const slot = this.shadowRoot.querySelector('.slotContent slot');
|
|
6217
|
+
const assignedNodes = slot ? slot.assignedNodes({ flatten: true }) : [];
|
|
6218
|
+
|
|
6219
|
+
for (const node of assignedNodes) {
|
|
6220
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
6221
|
+
focusables.push(...getFocusableElements(node));
|
|
6222
|
+
}
|
|
6223
|
+
}
|
|
6224
|
+
}
|
|
6225
|
+
|
|
6226
|
+
if (!focusables.length) {
|
|
6227
|
+
return;
|
|
6228
|
+
}
|
|
6229
|
+
|
|
6230
|
+
event.preventDefault();
|
|
6231
|
+
|
|
6232
|
+
const direction = event.shiftKey ? -1 : 1; // eslint-disable-line no-magic-numbers
|
|
6233
|
+
|
|
6234
|
+
// Walk the active element chain through shadow roots
|
|
6235
|
+
const actives = this._getActiveElements();
|
|
6236
|
+
|
|
6237
|
+
let idx = focusables.findIndex((el) => actives.includes(el));
|
|
6238
|
+
|
|
6239
|
+
if (idx === -1) { // eslint-disable-line no-magic-numbers
|
|
6240
|
+
// Focus is not on a known element — move to first/last
|
|
6241
|
+
idx = direction === 1 ? -1 : focusables.length; // eslint-disable-line no-magic-numbers
|
|
6242
|
+
}
|
|
6243
|
+
|
|
6244
|
+
// Try each element in order, skipping any that can't receive focus
|
|
6245
|
+
// (e.g. hidden elements, elements in collapsed sections)
|
|
6246
|
+
for (let index = 0; index < focusables.length; index++) { // eslint-disable-line no-plusplus
|
|
6247
|
+
let nextIdx = idx + direction;
|
|
6248
|
+
|
|
6249
|
+
// Wrap around
|
|
6250
|
+
if (nextIdx < 0) {
|
|
6251
|
+
nextIdx = focusables.length - 1;
|
|
6252
|
+
} else if (nextIdx >= focusables.length) {
|
|
6253
|
+
nextIdx = 0;
|
|
6254
|
+
}
|
|
6255
|
+
|
|
6256
|
+
focusables[nextIdx].focus();
|
|
6257
|
+
|
|
6258
|
+
// Verify focus actually moved to the target
|
|
6259
|
+
const newActives = this._getActiveElements();
|
|
6260
|
+
|
|
6261
|
+
if (newActives.includes(focusables[nextIdx])) {
|
|
6262
|
+
return;
|
|
6263
|
+
}
|
|
6264
|
+
|
|
6265
|
+
// Focus didn't stick — skip this element and try the next
|
|
6266
|
+
idx = nextIdx;
|
|
6267
|
+
}
|
|
6268
|
+
};
|
|
6269
|
+
this.addEventListener('keydown', this._bibTabHandler);
|
|
6270
|
+
|
|
6271
|
+
// Move initial focus into the bib content, matching FocusTrap behavior
|
|
6272
|
+
requestAnimationFrame(() => {
|
|
6273
|
+
const focusables = getFocusableElements(this.bibContent);
|
|
6274
|
+
if (focusables.length) {
|
|
6275
|
+
focusables[0].focus();
|
|
6276
|
+
}
|
|
6277
|
+
});
|
|
6278
|
+
} else {
|
|
6279
|
+
// Normal desktop: use FocusTrap on the bib element
|
|
6280
|
+
this.focusTrap = new FocusTrap(this.bibContent);
|
|
6281
|
+
this.focusTrap.focusFirstElement();
|
|
6282
|
+
}
|
|
6139
6283
|
}
|
|
6140
6284
|
// Fullscreen: showModal() provides native focus trapping
|
|
6285
|
+
}
|
|
6286
|
+
}
|
|
6287
|
+
|
|
6288
|
+
/**
|
|
6289
|
+
* Returns the chain of active (focused) elements through shadow roots.
|
|
6290
|
+
* @private
|
|
6291
|
+
* @returns {Array<HTMLElement>}
|
|
6292
|
+
*/
|
|
6293
|
+
_getActiveElements() {
|
|
6294
|
+
let { activeElement } = document;
|
|
6295
|
+
const actives = [activeElement];
|
|
6296
|
+
|
|
6297
|
+
while (activeElement?.shadowRoot?.activeElement) {
|
|
6298
|
+
activeElement = activeElement.shadowRoot.activeElement;
|
|
6299
|
+
actives.push(activeElement);
|
|
6300
|
+
}
|
|
6301
|
+
|
|
6302
|
+
return actives;
|
|
6303
|
+
}
|
|
6304
|
+
|
|
6305
|
+
/**
|
|
6306
|
+
* Sets `inert` on sibling elements of the dropdown's top-level host
|
|
6307
|
+
* so that content outside the dropdown is not interactive while the modal is open.
|
|
6308
|
+
* Walks up through shadow DOM boundaries to find the outermost host element
|
|
6309
|
+
* in the light DOM, then sets `inert` on siblings at each ancestor level
|
|
6310
|
+
* to ensure all page content outside the host subtree is inert.
|
|
6311
|
+
* @private
|
|
6312
|
+
*/
|
|
6313
|
+
_setPageInert() {
|
|
6314
|
+
if (this._inertSiblings) {
|
|
6141
6315
|
return;
|
|
6142
6316
|
}
|
|
6143
6317
|
|
|
6144
|
-
|
|
6145
|
-
|
|
6146
|
-
|
|
6318
|
+
this._inertSiblings = [];
|
|
6319
|
+
|
|
6320
|
+
// Walk up through shadow DOM boundaries to find the topmost host
|
|
6321
|
+
// element in the light DOM. For example, if this dropdown is inside
|
|
6322
|
+
// auro-datepicker's shadow DOM, we walk up to the datepicker element
|
|
6323
|
+
// so we set inert on its siblings — not on the datepicker itself.
|
|
6324
|
+
let host = this;
|
|
6325
|
+
while (host.getRootNode() instanceof ShadowRoot) {
|
|
6326
|
+
host = host.getRootNode().host;
|
|
6327
|
+
}
|
|
6328
|
+
|
|
6329
|
+
// Walk up the ancestor chain, inerting siblings at each level
|
|
6330
|
+
// to ensure the entire page outside the host subtree is inert.
|
|
6331
|
+
let current = host;
|
|
6332
|
+
while (current.parentElement) {
|
|
6333
|
+
const parent = current.parentElement;
|
|
6334
|
+
for (const sibling of parent.children) {
|
|
6335
|
+
if (sibling !== current) {
|
|
6336
|
+
this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
|
|
6337
|
+
sibling.inert = true;
|
|
6338
|
+
}
|
|
6339
|
+
}
|
|
6340
|
+
current = parent;
|
|
6341
|
+
}
|
|
6342
|
+
}
|
|
6343
|
+
|
|
6344
|
+
/**
|
|
6345
|
+
* Restores `inert` state on siblings that were tracked by `_setPageInert`.
|
|
6346
|
+
* Preserves the previous inert state so externally-inerted elements are
|
|
6347
|
+
* not inadvertently re-enabled.
|
|
6348
|
+
* @private
|
|
6349
|
+
*/
|
|
6350
|
+
_clearPageInert() {
|
|
6351
|
+
if (this._inertSiblings) {
|
|
6352
|
+
for (const entry of this._inertSiblings) {
|
|
6353
|
+
entry.element.inert = entry.wasInert;
|
|
6354
|
+
}
|
|
6355
|
+
this._inertSiblings = undefined;
|
|
6147
6356
|
}
|
|
6148
6357
|
}
|
|
6149
6358
|
|
|
@@ -6382,6 +6591,7 @@ class AuroDropdown extends AuroElement {
|
|
|
6382
6591
|
shape="${this.shape}"
|
|
6383
6592
|
?data-show="${this.isPopoverVisible}"
|
|
6384
6593
|
?isfullscreen="${this.isBibFullscreen}"
|
|
6594
|
+
?desktopmodal="${this.desktopModal}"
|
|
6385
6595
|
.dialogLabel="${this.bibDialogLabel}"
|
|
6386
6596
|
${n$2(this.bibElement)}
|
|
6387
6597
|
>
|
|
@@ -6749,6 +6959,14 @@ class AuroBibtemplate extends i$3 {
|
|
|
6749
6959
|
large: {
|
|
6750
6960
|
type: Boolean,
|
|
6751
6961
|
reflect: true
|
|
6962
|
+
},
|
|
6963
|
+
|
|
6964
|
+
/**
|
|
6965
|
+
* If declared, the footer slot will be rendered even when not in fullscreen mode.
|
|
6966
|
+
*/
|
|
6967
|
+
showFooter: {
|
|
6968
|
+
type: Boolean,
|
|
6969
|
+
reflect: true
|
|
6752
6970
|
}
|
|
6753
6971
|
};
|
|
6754
6972
|
}
|
|
@@ -6851,7 +7069,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
6851
7069
|
<slot></slot>
|
|
6852
7070
|
</div>
|
|
6853
7071
|
|
|
6854
|
-
${this.isFullscreen ? u$4`
|
|
7072
|
+
${this.isFullscreen || this.showFooter ? u$4`
|
|
6855
7073
|
<div id="footerContainer">
|
|
6856
7074
|
<slot name="footer"></slot>
|
|
6857
7075
|
</div>` : null}
|
|
@@ -7088,7 +7306,7 @@ class AuroHelpText extends i$3 {
|
|
|
7088
7306
|
}
|
|
7089
7307
|
}
|
|
7090
7308
|
|
|
7091
|
-
var formkitVersion = '
|
|
7309
|
+
var formkitVersion = '202606011911';
|
|
7092
7310
|
|
|
7093
7311
|
var styleCss$2 = i$6`.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}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, 0.875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, 0.75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, 0.625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 300);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 300);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
7094
7312
|
|