@aurodesignsystem-dev/auro-formkit 0.0.0-pr1477.2 → 0.0.0-pr1480.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 +236 -18
- package/components/combobox/demo/getting-started.min.js +236 -18
- package/components/combobox/demo/index.min.js +236 -18
- package/components/combobox/demo/keyboard-behavior.md +8 -68
- 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 +236 -18
- package/components/combobox/dist/registered.js +236 -18
- 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 +54 -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 +26492 -0
- package/components/datepicker/demo/design.md +3 -1
- package/components/datepicker/demo/index.js +5 -1
- package/components/datepicker/demo/index.md +85 -2
- package/components/datepicker/demo/index.min.js +2115 -184
- package/components/datepicker/demo/keyboard-behavior.md +201 -2
- package/components/datepicker/demo/pages.json +1 -1
- package/components/datepicker/demo/voiceover.md +21 -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 +2010 -155
- package/components/datepicker/dist/registered.js +2010 -155
- package/components/datepicker/dist/src/auro-calendar-cell.d.ts +112 -11
- package/components/datepicker/dist/src/auro-calendar-month.d.ts +37 -0
- package/components/datepicker/dist/src/auro-calendar.d.ts +177 -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 +2726 -219
- package/components/form/demo/getting-started.min.js +2726 -219
- package/components/form/demo/index.min.js +2726 -219
- package/components/form/demo/pages.json +1 -1
- package/components/form/demo/registerDemoDeps.min.js +2726 -219
- 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 +249 -33
- package/components/select/demo/getting-started.min.js +249 -33
- package/components/select/demo/index.min.js +249 -33
- package/components/select/demo/keyboard-behavior.md +9 -54
- 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 +249 -33
- package/components/select/dist/registered.js +249 -33
- package/custom-elements.json +2446 -1502
- 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 = '202605210326';
|
|
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 = '202605210326';
|
|
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 = '202605210326';
|
|
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.
|
|
@@ -1305,30 +1305,28 @@ function navigateArrow(component, direction, options = {}) {
|
|
|
1305
1305
|
const selectKeyboardStrategy = {
|
|
1306
1306
|
ArrowDown(component, evt, ctx) {
|
|
1307
1307
|
evt.preventDefault();
|
|
1308
|
-
if (
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
|
|
1312
|
-
} else {
|
|
1313
|
-
navigateArrow(component, 'down', { ctx });
|
|
1314
|
-
}
|
|
1315
|
-
} else {
|
|
1316
|
-
component.dropdown.show();
|
|
1308
|
+
if (evt.altKey || evt.metaKey) {
|
|
1309
|
+
// navigate to last enabled option
|
|
1310
|
+
selectKeyboardStrategy.End(component, evt, ctx);
|
|
1311
|
+
return;
|
|
1317
1312
|
}
|
|
1313
|
+
navigateArrow(component, 'down', {
|
|
1314
|
+
ctx,
|
|
1315
|
+
showFn: () => component.dropdown.show(),
|
|
1316
|
+
});
|
|
1318
1317
|
},
|
|
1319
1318
|
|
|
1320
1319
|
ArrowUp(component, evt, ctx) {
|
|
1321
1320
|
evt.preventDefault();
|
|
1322
|
-
if (
|
|
1323
|
-
|
|
1324
|
-
|
|
1325
|
-
|
|
1326
|
-
} else {
|
|
1327
|
-
navigateArrow(component, 'up', { ctx });
|
|
1328
|
-
}
|
|
1329
|
-
} else {
|
|
1330
|
-
component.dropdown.show();
|
|
1321
|
+
if (evt.altKey || evt.metaKey) {
|
|
1322
|
+
// navigate to first enabled option
|
|
1323
|
+
selectKeyboardStrategy.Home(component, evt, ctx);
|
|
1324
|
+
return;
|
|
1331
1325
|
}
|
|
1326
|
+
navigateArrow(component, 'up', {
|
|
1327
|
+
ctx,
|
|
1328
|
+
showFn: () => component.dropdown.show(),
|
|
1329
|
+
});
|
|
1332
1330
|
},
|
|
1333
1331
|
|
|
1334
1332
|
Escape(component, evt, ctx) {
|
|
@@ -4704,7 +4702,7 @@ function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
|
4704
4702
|
});
|
|
4705
4703
|
}
|
|
4706
4704
|
|
|
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}`;
|
|
4705
|
+
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
4706
|
|
|
4709
4707
|
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
4708
|
|
|
@@ -5335,7 +5333,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
5335
5333
|
}
|
|
5336
5334
|
};
|
|
5337
5335
|
|
|
5338
|
-
var formkitVersion$1 = '
|
|
5336
|
+
var formkitVersion$1 = '202605210326';
|
|
5339
5337
|
|
|
5340
5338
|
class AuroElement extends i$3 {
|
|
5341
5339
|
static get properties() {
|
|
@@ -5515,6 +5513,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5515
5513
|
_intializeDefaults() {
|
|
5516
5514
|
this.appearance = 'default';
|
|
5517
5515
|
this.chevron = false;
|
|
5516
|
+
this.desktopModal = false;
|
|
5518
5517
|
this.disabled = false;
|
|
5519
5518
|
this.disableKeyboardHandling = false;
|
|
5520
5519
|
this.error = false;
|
|
@@ -5695,6 +5694,14 @@ class AuroDropdown extends AuroElement {
|
|
|
5695
5694
|
reflect: true
|
|
5696
5695
|
},
|
|
5697
5696
|
|
|
5697
|
+
/**
|
|
5698
|
+
* If declared, the dropdown will behave as a modal dialog when in a desktop viewport size.
|
|
5699
|
+
*/
|
|
5700
|
+
desktopModal: {
|
|
5701
|
+
type: Boolean,
|
|
5702
|
+
reflect: true
|
|
5703
|
+
},
|
|
5704
|
+
|
|
5698
5705
|
/**
|
|
5699
5706
|
* If declared, the dropdown will only show by calling the API .show() public method.
|
|
5700
5707
|
*/
|
|
@@ -5982,6 +5989,15 @@ class AuroDropdown extends AuroElement {
|
|
|
5982
5989
|
|
|
5983
5990
|
disconnectedCallback() {
|
|
5984
5991
|
super.disconnectedCallback();
|
|
5992
|
+
this._clearPageInert();
|
|
5993
|
+
if (this._bibTabHandler) {
|
|
5994
|
+
this.removeEventListener('keydown', this._bibTabHandler);
|
|
5995
|
+
this._bibTabHandler = undefined;
|
|
5996
|
+
}
|
|
5997
|
+
if (this.focusTrap) {
|
|
5998
|
+
this.focusTrap.disconnect();
|
|
5999
|
+
this.focusTrap = undefined;
|
|
6000
|
+
}
|
|
5985
6001
|
if (this.floater) {
|
|
5986
6002
|
this.floater.hideBib('disconnect');
|
|
5987
6003
|
this.floater.disconnect();
|
|
@@ -6009,19 +6025,45 @@ class AuroDropdown extends AuroElement {
|
|
|
6009
6025
|
if (this.isPopoverVisible) {
|
|
6010
6026
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
6011
6027
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
6012
|
-
|
|
6013
|
-
this.
|
|
6028
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
6029
|
+
this.updateFocusTrap();
|
|
6030
|
+
|
|
6031
|
+
// Desktop modal: make siblings inert so content outside is not interactive
|
|
6032
|
+
if (this.desktopModal && !this.isBibFullscreen) {
|
|
6033
|
+
this._setPageInert();
|
|
6034
|
+
}
|
|
6014
6035
|
} else {
|
|
6015
6036
|
this.bibElement.value.close();
|
|
6037
|
+
this._clearPageInert();
|
|
6016
6038
|
}
|
|
6017
6039
|
}
|
|
6018
6040
|
|
|
6019
6041
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
6020
6042
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
6021
6043
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
6022
|
-
const useModal = this.isBibFullscreen;
|
|
6023
6044
|
this.bibElement.value.close();
|
|
6024
|
-
this.bibElement.value.open(
|
|
6045
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
6046
|
+
|
|
6047
|
+
// Re-initialize focus management for the new strategy
|
|
6048
|
+
this.updateFocusTrap();
|
|
6049
|
+
|
|
6050
|
+
// Toggle inert: desktop modal needs it, fullscreen showModal() handles it natively
|
|
6051
|
+
if (this.desktopModal && !this.isBibFullscreen) {
|
|
6052
|
+
this._setPageInert();
|
|
6053
|
+
} else {
|
|
6054
|
+
this._clearPageInert();
|
|
6055
|
+
}
|
|
6056
|
+
}
|
|
6057
|
+
|
|
6058
|
+
// Handle desktopModal toggled while the dropdown is already open.
|
|
6059
|
+
// Re-initialize focus trapping and page inert state to match the new mode.
|
|
6060
|
+
if (changedProperties.has('desktopModal') && this.isPopoverVisible && !this.isBibFullscreen) {
|
|
6061
|
+
this.updateFocusTrap();
|
|
6062
|
+
if (this.desktopModal) {
|
|
6063
|
+
this._setPageInert();
|
|
6064
|
+
} else {
|
|
6065
|
+
this._clearPageInert();
|
|
6066
|
+
}
|
|
6025
6067
|
}
|
|
6026
6068
|
}
|
|
6027
6069
|
|
|
@@ -6031,8 +6073,14 @@ class AuroDropdown extends AuroElement {
|
|
|
6031
6073
|
* @param {CustomEvent} event - The custom event that contains the dropdown toggle information.
|
|
6032
6074
|
*/
|
|
6033
6075
|
handleDropdownToggle(event) {
|
|
6034
|
-
this.updateFocusTrap();
|
|
6035
6076
|
this.isPopoverVisible = event.detail.expanded;
|
|
6077
|
+
|
|
6078
|
+
// Tear down FocusTrap when closing. Creation happens in updated()
|
|
6079
|
+
// after the dialog is open so getFocusableElements can find content.
|
|
6080
|
+
if (!this.isPopoverVisible) {
|
|
6081
|
+
this.updateFocusTrap();
|
|
6082
|
+
}
|
|
6083
|
+
|
|
6036
6084
|
const eventType = event.detail.eventType || "unknown";
|
|
6037
6085
|
if (!this.isPopoverVisible && this.hasFocus && eventType === "keydown") {
|
|
6038
6086
|
this.trigger.focus();
|
|
@@ -6131,19 +6179,178 @@ class AuroDropdown extends AuroElement {
|
|
|
6131
6179
|
* @private
|
|
6132
6180
|
*/
|
|
6133
6181
|
updateFocusTrap() {
|
|
6182
|
+
// Always clean up existing handlers/traps before setting up new ones
|
|
6183
|
+
// to prevent duplicate listeners on repeated calls.
|
|
6184
|
+
if (this._bibTabHandler) {
|
|
6185
|
+
this.removeEventListener('keydown', this._bibTabHandler);
|
|
6186
|
+
this._bibTabHandler = undefined;
|
|
6187
|
+
}
|
|
6188
|
+
|
|
6189
|
+
if (this.focusTrap) {
|
|
6190
|
+
this.focusTrap.disconnect();
|
|
6191
|
+
this.focusTrap = undefined;
|
|
6192
|
+
}
|
|
6193
|
+
|
|
6134
6194
|
if (this.isPopoverVisible) {
|
|
6135
6195
|
if (!this.isBibFullscreen) {
|
|
6136
|
-
|
|
6137
|
-
|
|
6138
|
-
|
|
6196
|
+
if (this.desktopModal) {
|
|
6197
|
+
// Desktop modal: trap focus only within the bib content.
|
|
6198
|
+
// Can't use FocusTrap on the bib element because keydown events
|
|
6199
|
+
// from slotted content bubble through the dropdown host (light DOM),
|
|
6200
|
+
// not through the bib (shadow projection target). Using FocusTrap
|
|
6201
|
+
// on the dropdown would include the trigger in the tab cycle.
|
|
6202
|
+
// Instead, listen for Tab on the dropdown and manually wrap focus
|
|
6203
|
+
// within the bib's focusable elements.
|
|
6204
|
+
this._bibTabHandler = (event) => {
|
|
6205
|
+
if (event.key !== 'Tab') {
|
|
6206
|
+
return;
|
|
6207
|
+
}
|
|
6208
|
+
|
|
6209
|
+
// Collect focusable elements from the bib content.
|
|
6210
|
+
const focusables = getFocusableElements(this.bibContent);
|
|
6211
|
+
|
|
6212
|
+
// Fallback: try from slotted content directly
|
|
6213
|
+
if (!focusables.length) {
|
|
6214
|
+
const slot = this.shadowRoot.querySelector('.slotContent slot');
|
|
6215
|
+
const assignedNodes = slot ? slot.assignedNodes({ flatten: true }) : [];
|
|
6216
|
+
|
|
6217
|
+
for (const node of assignedNodes) {
|
|
6218
|
+
if (node.nodeType === Node.ELEMENT_NODE) {
|
|
6219
|
+
focusables.push(...getFocusableElements(node));
|
|
6220
|
+
}
|
|
6221
|
+
}
|
|
6222
|
+
}
|
|
6223
|
+
|
|
6224
|
+
if (!focusables.length) {
|
|
6225
|
+
return;
|
|
6226
|
+
}
|
|
6227
|
+
|
|
6228
|
+
event.preventDefault();
|
|
6229
|
+
|
|
6230
|
+
const direction = event.shiftKey ? -1 : 1; // eslint-disable-line no-magic-numbers
|
|
6231
|
+
|
|
6232
|
+
// Walk the active element chain through shadow roots
|
|
6233
|
+
const actives = this._getActiveElements();
|
|
6234
|
+
|
|
6235
|
+
let idx = focusables.findIndex((el) => actives.includes(el));
|
|
6236
|
+
|
|
6237
|
+
if (idx === -1) { // eslint-disable-line no-magic-numbers
|
|
6238
|
+
// Focus is not on a known element — move to first/last
|
|
6239
|
+
idx = direction === 1 ? -1 : focusables.length; // eslint-disable-line no-magic-numbers
|
|
6240
|
+
}
|
|
6241
|
+
|
|
6242
|
+
// Try each element in order, skipping any that can't receive focus
|
|
6243
|
+
// (e.g. hidden elements, elements in collapsed sections)
|
|
6244
|
+
for (let index = 0; index < focusables.length; index++) { // eslint-disable-line no-plusplus
|
|
6245
|
+
let nextIdx = idx + direction;
|
|
6246
|
+
|
|
6247
|
+
// Wrap around
|
|
6248
|
+
if (nextIdx < 0) {
|
|
6249
|
+
nextIdx = focusables.length - 1;
|
|
6250
|
+
} else if (nextIdx >= focusables.length) {
|
|
6251
|
+
nextIdx = 0;
|
|
6252
|
+
}
|
|
6253
|
+
|
|
6254
|
+
focusables[nextIdx].focus();
|
|
6255
|
+
|
|
6256
|
+
// Verify focus actually moved to the target
|
|
6257
|
+
const newActives = this._getActiveElements();
|
|
6258
|
+
|
|
6259
|
+
if (newActives.includes(focusables[nextIdx])) {
|
|
6260
|
+
return;
|
|
6261
|
+
}
|
|
6262
|
+
|
|
6263
|
+
// Focus didn't stick — skip this element and try the next
|
|
6264
|
+
idx = nextIdx;
|
|
6265
|
+
}
|
|
6266
|
+
};
|
|
6267
|
+
this.addEventListener('keydown', this._bibTabHandler);
|
|
6268
|
+
|
|
6269
|
+
// Move initial focus into the bib content, matching FocusTrap behavior
|
|
6270
|
+
requestAnimationFrame(() => {
|
|
6271
|
+
const focusables = getFocusableElements(this.bibContent);
|
|
6272
|
+
if (focusables.length) {
|
|
6273
|
+
focusables[0].focus();
|
|
6274
|
+
}
|
|
6275
|
+
});
|
|
6276
|
+
} else {
|
|
6277
|
+
// Normal desktop: use FocusTrap on the bib element
|
|
6278
|
+
this.focusTrap = new FocusTrap(this.bibContent);
|
|
6279
|
+
this.focusTrap.focusFirstElement();
|
|
6280
|
+
}
|
|
6139
6281
|
}
|
|
6140
6282
|
// Fullscreen: showModal() provides native focus trapping
|
|
6283
|
+
}
|
|
6284
|
+
}
|
|
6285
|
+
|
|
6286
|
+
/**
|
|
6287
|
+
* Returns the chain of active (focused) elements through shadow roots.
|
|
6288
|
+
* @private
|
|
6289
|
+
* @returns {Array<HTMLElement>}
|
|
6290
|
+
*/
|
|
6291
|
+
_getActiveElements() {
|
|
6292
|
+
let { activeElement } = document;
|
|
6293
|
+
const actives = [activeElement];
|
|
6294
|
+
|
|
6295
|
+
while (activeElement?.shadowRoot?.activeElement) {
|
|
6296
|
+
activeElement = activeElement.shadowRoot.activeElement;
|
|
6297
|
+
actives.push(activeElement);
|
|
6298
|
+
}
|
|
6299
|
+
|
|
6300
|
+
return actives;
|
|
6301
|
+
}
|
|
6302
|
+
|
|
6303
|
+
/**
|
|
6304
|
+
* Sets `inert` on sibling elements of the dropdown's top-level host
|
|
6305
|
+
* so that content outside the dropdown is not interactive while the modal is open.
|
|
6306
|
+
* Walks up through shadow DOM boundaries to find the outermost host element
|
|
6307
|
+
* in the light DOM, then sets `inert` on siblings at each ancestor level
|
|
6308
|
+
* to ensure all page content outside the host subtree is inert.
|
|
6309
|
+
* @private
|
|
6310
|
+
*/
|
|
6311
|
+
_setPageInert() {
|
|
6312
|
+
if (this._inertSiblings) {
|
|
6141
6313
|
return;
|
|
6142
6314
|
}
|
|
6143
6315
|
|
|
6144
|
-
|
|
6145
|
-
|
|
6146
|
-
|
|
6316
|
+
this._inertSiblings = [];
|
|
6317
|
+
|
|
6318
|
+
// Walk up through shadow DOM boundaries to find the topmost host
|
|
6319
|
+
// element in the light DOM. For example, if this dropdown is inside
|
|
6320
|
+
// auro-datepicker's shadow DOM, we walk up to the datepicker element
|
|
6321
|
+
// so we set inert on its siblings — not on the datepicker itself.
|
|
6322
|
+
let host = this;
|
|
6323
|
+
while (host.getRootNode() instanceof ShadowRoot) {
|
|
6324
|
+
host = host.getRootNode().host;
|
|
6325
|
+
}
|
|
6326
|
+
|
|
6327
|
+
// Walk up the ancestor chain, inerting siblings at each level
|
|
6328
|
+
// to ensure the entire page outside the host subtree is inert.
|
|
6329
|
+
let current = host;
|
|
6330
|
+
while (current.parentElement) {
|
|
6331
|
+
const parent = current.parentElement;
|
|
6332
|
+
for (const sibling of parent.children) {
|
|
6333
|
+
if (sibling !== current) {
|
|
6334
|
+
this._inertSiblings.push({ element: sibling, wasInert: sibling.inert });
|
|
6335
|
+
sibling.inert = true;
|
|
6336
|
+
}
|
|
6337
|
+
}
|
|
6338
|
+
current = parent;
|
|
6339
|
+
}
|
|
6340
|
+
}
|
|
6341
|
+
|
|
6342
|
+
/**
|
|
6343
|
+
* Restores `inert` state on siblings that were tracked by `_setPageInert`.
|
|
6344
|
+
* Preserves the previous inert state so externally-inerted elements are
|
|
6345
|
+
* not inadvertently re-enabled.
|
|
6346
|
+
* @private
|
|
6347
|
+
*/
|
|
6348
|
+
_clearPageInert() {
|
|
6349
|
+
if (this._inertSiblings) {
|
|
6350
|
+
for (const entry of this._inertSiblings) {
|
|
6351
|
+
entry.element.inert = entry.wasInert;
|
|
6352
|
+
}
|
|
6353
|
+
this._inertSiblings = undefined;
|
|
6147
6354
|
}
|
|
6148
6355
|
}
|
|
6149
6356
|
|
|
@@ -6382,6 +6589,7 @@ class AuroDropdown extends AuroElement {
|
|
|
6382
6589
|
shape="${this.shape}"
|
|
6383
6590
|
?data-show="${this.isPopoverVisible}"
|
|
6384
6591
|
?isfullscreen="${this.isBibFullscreen}"
|
|
6592
|
+
?desktopmodal="${this.desktopModal}"
|
|
6385
6593
|
.dialogLabel="${this.bibDialogLabel}"
|
|
6386
6594
|
${n$2(this.bibElement)}
|
|
6387
6595
|
>
|
|
@@ -6749,6 +6957,14 @@ class AuroBibtemplate extends i$3 {
|
|
|
6749
6957
|
large: {
|
|
6750
6958
|
type: Boolean,
|
|
6751
6959
|
reflect: true
|
|
6960
|
+
},
|
|
6961
|
+
|
|
6962
|
+
/**
|
|
6963
|
+
* If declared, the footer slot will be rendered even when not in fullscreen mode.
|
|
6964
|
+
*/
|
|
6965
|
+
showFooter: {
|
|
6966
|
+
type: Boolean,
|
|
6967
|
+
reflect: true
|
|
6752
6968
|
}
|
|
6753
6969
|
};
|
|
6754
6970
|
}
|
|
@@ -6851,7 +7067,7 @@ class AuroBibtemplate extends i$3 {
|
|
|
6851
7067
|
<slot></slot>
|
|
6852
7068
|
</div>
|
|
6853
7069
|
|
|
6854
|
-
${this.isFullscreen ? u$4`
|
|
7070
|
+
${this.isFullscreen || this.showFooter ? u$4`
|
|
6855
7071
|
<div id="footerContainer">
|
|
6856
7072
|
<slot name="footer"></slot>
|
|
6857
7073
|
</div>` : null}
|
|
@@ -7088,7 +7304,7 @@ class AuroHelpText extends i$3 {
|
|
|
7088
7304
|
}
|
|
7089
7305
|
}
|
|
7090
7306
|
|
|
7091
|
-
var formkitVersion = '
|
|
7307
|
+
var formkitVersion = '202605210326';
|
|
7092
7308
|
|
|
7093
7309
|
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
7310
|
|