@aurodesignsystem-dev/auro-formkit 0.0.0-pr1451.1 → 0.0.0-pr1451.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/README.md +23 -37
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/readme.md +0 -2
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/README.md +43 -57
- package/components/combobox/demo/accessibility.html +22 -11
- package/components/combobox/demo/api.html +27 -16
- package/components/combobox/demo/api.min.js +4 -4
- package/components/combobox/demo/design.html +27 -16
- package/components/combobox/demo/index.html +28 -22
- package/components/combobox/demo/index.min.js +4 -4
- package/components/combobox/demo/install.html +26 -16
- package/components/combobox/demo/install.md +0 -2
- package/components/combobox/demo/install.min.js +4 -4
- package/components/combobox/demo/keyboard-behavior.html +22 -11
- package/components/combobox/demo/readme.html +27 -16
- package/components/combobox/demo/readme.md +0 -2
- package/components/combobox/demo/styles.css +911 -71
- package/components/combobox/demo/voiceover.html +22 -11
- package/components/combobox/dist/index.js +4 -4
- package/components/combobox/dist/registered.js +4 -4
- package/components/counter/README.md +39 -53
- package/components/counter/demo/api.min.js +2 -2
- package/components/counter/demo/index.min.js +2 -2
- package/components/counter/demo/readme.md +0 -2
- package/components/counter/dist/index.js +2 -2
- package/components/counter/dist/registered.js +2 -2
- package/components/datepicker/README.md +19 -33
- package/components/datepicker/demo/api.min.js +4 -4
- package/components/datepicker/demo/index.min.js +4 -4
- package/components/datepicker/demo/readme.md +0 -2
- package/components/datepicker/dist/index.js +4 -4
- package/components/datepicker/dist/registered.js +4 -4
- package/components/dropdown/README.md +39 -53
- package/components/dropdown/demo/api.min.js +1 -1
- package/components/dropdown/demo/index.min.js +1 -1
- package/components/dropdown/demo/readme.md +0 -2
- package/components/dropdown/dist/index.js +1 -1
- package/components/dropdown/dist/registered.js +1 -1
- package/components/form/README.md +14 -30
- package/components/form/demo/api.min.js +16 -16
- package/components/form/demo/index.min.js +16 -16
- package/components/form/demo/readme.md +0 -2
- package/components/input/README.md +17 -31
- package/components/input/demo/api.min.js +2 -2
- package/components/input/demo/index.min.js +2 -2
- package/components/input/demo/readme.md +0 -2
- package/components/input/dist/index.js +2 -2
- package/components/input/dist/registered.js +2 -2
- package/components/menu/README.md +23 -37
- package/components/menu/demo/readme.md +0 -2
- package/components/radio/README.md +21 -35
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/demo/readme.md +0 -2
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/README.md +41 -73
- package/components/select/demo/accessibility.html +23 -20
- package/components/select/demo/api.html +45 -10
- package/components/select/demo/api.min.js +2 -2
- package/components/select/demo/design.html +94 -0
- package/components/select/demo/design.md +391 -0
- package/components/select/demo/getting-started.html +125 -0
- package/components/select/demo/getting-started.js +9 -0
- package/components/select/demo/getting-started.md +1020 -0
- package/components/select/demo/getting-started.min.js +10490 -0
- package/components/select/demo/index.html +55 -241
- package/components/select/demo/index.md +38 -98
- package/components/select/demo/index.min.js +2 -2
- package/components/select/demo/install.md +92 -0
- package/components/select/demo/keyboard-behavior.html +23 -11
- package/components/select/demo/keyboard-behavior.md +247 -36
- package/components/select/demo/keyboardBehavior.html +22 -11
- package/components/select/demo/layout.html +45 -10
- package/components/select/demo/layout.md +71 -260
- package/components/select/demo/readme.html +46 -11
- package/components/select/demo/readme.md +25 -45
- package/components/select/demo/styles.css +1026 -0
- package/components/select/demo/voiceover.html +23 -11
- package/components/select/dist/index.js +2 -2
- package/components/select/dist/registered.js +2 -2
- package/custom-elements.json +1667 -1667
- package/package.json +1 -1
|
@@ -11,270 +11,84 @@
|
|
|
11
11
|
|
|
12
12
|
-->
|
|
13
13
|
|
|
14
|
-
<!
|
|
14
|
+
<!DOCTYPE html>
|
|
15
15
|
<html lang="en">
|
|
16
16
|
<head>
|
|
17
17
|
<meta charset="UTF-8" />
|
|
18
18
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
19
19
|
<title>Auro Web Component Demo | auro-select</title>
|
|
20
20
|
|
|
21
|
-
<!--
|
|
22
|
-
<link
|
|
23
|
-
rel="stylesheet"
|
|
24
|
-
type="text/css"
|
|
25
|
-
href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"
|
|
26
|
-
/>
|
|
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"/>
|
|
27
23
|
|
|
28
24
|
<!-- Legacy reference is still needed to support auro-select's use of legacy token values at this time -->
|
|
29
|
-
<link
|
|
30
|
-
rel="stylesheet"
|
|
31
|
-
type="text/css"
|
|
32
|
-
href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"
|
|
33
|
-
/>
|
|
25
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
|
|
34
26
|
|
|
35
27
|
<!-- Design Token Alaska Theme -->
|
|
36
|
-
<link
|
|
37
|
-
rel="stylesheet"
|
|
38
|
-
type="text/css"
|
|
39
|
-
href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"
|
|
40
|
-
/>
|
|
28
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
|
|
41
29
|
|
|
42
30
|
<!-- Webcore Stylesheet Alaska Theme -->
|
|
43
|
-
<link
|
|
44
|
-
rel="stylesheet"
|
|
45
|
-
type="text/css"
|
|
46
|
-
href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css"
|
|
47
|
-
/>
|
|
31
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
|
|
48
32
|
|
|
49
33
|
<!-- Demo Specific Styles -->
|
|
50
|
-
<link
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css"
|
|
54
|
-
/>
|
|
55
|
-
<link
|
|
56
|
-
rel="stylesheet"
|
|
57
|
-
type="text/css"
|
|
58
|
-
href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css"
|
|
59
|
-
/>
|
|
60
|
-
|
|
61
|
-
<style>
|
|
62
|
-
pre[class*="language-"] {
|
|
63
|
-
/* padding: 1em; */
|
|
64
|
-
/* margin: .5em 0; */
|
|
65
|
-
overflow: unset !important;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
table {
|
|
69
|
-
--ds-color-container-secondary-default: transparent;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
tr:not(:last-of-type) {
|
|
73
|
-
border-bottom: 1px solid var(--ds-color-border-tertiary-default);
|
|
74
|
-
}
|
|
75
|
-
|
|
76
|
-
sup {
|
|
77
|
-
font-size: 60%;
|
|
78
|
-
font-style: italic;
|
|
79
|
-
/* opacity: 0.6; */
|
|
80
|
-
top: -0.5rem;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
sup a {
|
|
84
|
-
text-decoration: none !important;
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
body {
|
|
88
|
-
padding: 0;
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
main {
|
|
92
|
-
height: 100vh;
|
|
93
|
-
display: flex;
|
|
94
|
-
flex-direction: column;
|
|
95
|
-
min-height: 0;
|
|
96
|
-
flex: 1;
|
|
97
|
-
/* background-color: aquamarine; */
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.contentWrapper {
|
|
101
|
-
flex: 1;
|
|
102
|
-
display: flex;
|
|
103
|
-
flex-direction: row-reverse;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
.mainContent {
|
|
107
|
-
flex: 1;
|
|
108
|
-
/* height: 100%; */
|
|
109
|
-
overflow: auto;
|
|
110
|
-
padding-right: 25px;
|
|
111
|
-
/* background-color: aqua; */
|
|
112
|
-
display: flex;
|
|
113
|
-
flex-direction: column;
|
|
114
|
-
flex-basis: 0;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
.scrollWrapper {
|
|
118
|
-
flex: 1;
|
|
119
|
-
flex-basis: 0;
|
|
120
|
-
min-height: 0;
|
|
121
|
-
overflow: auto;
|
|
122
|
-
/* background-color: burlywood; */
|
|
123
|
-
}
|
|
124
|
-
|
|
125
|
-
nav {
|
|
126
|
-
max-width: 200px;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
.stepDetails {
|
|
130
|
-
margin: 10px 0;
|
|
131
|
-
padding: 10px;
|
|
132
|
-
border-radius: 6px;
|
|
133
|
-
font-style: italic;
|
|
134
|
-
color: var(--ds-basic-color-texticon-muted);
|
|
135
|
-
background-color: var(--ds-basic-color-surface-neutral-subtle);
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
.indent1 {
|
|
139
|
-
margin-left: 40px;
|
|
140
|
-
}
|
|
141
|
-
|
|
142
|
-
auro-header {
|
|
143
|
-
margin: 10px 0;
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
.authorTodo {
|
|
147
|
-
color: red;
|
|
148
|
-
background-color: pink;
|
|
149
|
-
font-weight: bold;
|
|
150
|
-
padding: 5px 10px;
|
|
151
|
-
border-radius: 6px;
|
|
152
|
-
margin-bottom: 2px !important;
|
|
153
|
-
}
|
|
154
|
-
|
|
155
|
-
.footnotes {
|
|
156
|
-
/* background-color: aqua; */
|
|
157
|
-
padding-bottom: 20px;
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
auro-anchorlink.level2 {
|
|
161
|
-
padding-left: var(--ds-size-200);
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
table.compressed {
|
|
165
|
-
width: unset !important;
|
|
166
|
-
margin: var(--ds-size-50) 0 var(--ds-size-100) !important;
|
|
167
|
-
}
|
|
168
|
-
|
|
169
|
-
table.compressed th,
|
|
170
|
-
table.compressed td {
|
|
171
|
-
padding: var(--ds-size-50) !important;
|
|
172
|
-
}
|
|
173
|
-
|
|
174
|
-
.tabList {
|
|
175
|
-
/* box-shadow: inset 0 -2px 0 var(--ds-color-brand-gray-300); */
|
|
176
|
-
display: flex;
|
|
177
|
-
flex-direction: row;
|
|
178
|
-
justify-content: center;
|
|
179
|
-
margin-bottom: 20px;
|
|
180
|
-
}
|
|
181
|
-
|
|
182
|
-
.tab {
|
|
183
|
-
color: var(--ds-advanced-color-hyperlink-text);
|
|
184
|
-
transition: border 0.3s ease-out;
|
|
185
|
-
padding: var(--ds-size-200);
|
|
186
|
-
border-width: 0px 0px 2px;
|
|
187
|
-
border-style: solid;
|
|
188
|
-
border-bottom-color: var(--ds-color-brand-gray-300);
|
|
189
|
-
text-decoration: none;
|
|
190
|
-
white-space: nowrap;
|
|
191
|
-
display: block;
|
|
192
|
-
}
|
|
193
|
-
|
|
194
|
-
.tab:hover {
|
|
195
|
-
cursor: pointer;
|
|
196
|
-
color: var(--ds-advanced-color-hyperlink-text-hover);
|
|
197
|
-
border-bottom-color: rgb(1, 66, 106);
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
.tab {
|
|
201
|
-
text-decoration: none !important;
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
/* .link.active {
|
|
205
|
-
color: rgb(5, 70, 135) !important;;
|
|
206
|
-
padding-bottom: calc(-1px + 1rem);
|
|
207
|
-
cursor: default !important;
|
|
208
|
-
text-decoration: none;
|
|
209
|
-
border-bottom: 2px solid currentcolor;
|
|
210
|
-
} */
|
|
211
|
-
|
|
212
|
-
/* .tab {
|
|
213
|
-
color: var(--ds-advanced-color-hyperlink-text);
|
|
214
|
-
transition: border 0.3s ease-out;
|
|
215
|
-
padding: var(--ds-size-200);
|
|
216
|
-
border-width: 0px 0px 2px;
|
|
217
|
-
border-style: solid;
|
|
218
|
-
border-color: transparent;
|
|
219
|
-
text-decoration: none;
|
|
220
|
-
white-space: nowrap;
|
|
221
|
-
} */
|
|
222
|
-
|
|
223
|
-
.tab.active {
|
|
224
|
-
cursor: pointer;
|
|
225
|
-
color: var(--ds-basic-color-texticon-default);
|
|
226
|
-
text-decoration: none;
|
|
227
|
-
border-color: currentcolor;
|
|
228
|
-
}
|
|
229
|
-
|
|
230
|
-
body {
|
|
231
|
-
display: flex;
|
|
232
|
-
flex-direction: column;
|
|
233
|
-
height: 100vh;
|
|
234
|
-
}
|
|
235
|
-
</style>
|
|
34
|
+
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
|
|
35
|
+
<!-- <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" /> -->
|
|
36
|
+
<link rel="stylesheet" type="text/css" href="./styles.css" />
|
|
236
37
|
</head>
|
|
237
38
|
<body class="auro-markdown">
|
|
238
39
|
<main></main>
|
|
239
40
|
|
|
240
41
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
241
|
-
<script
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
></script>
|
|
245
|
-
<script
|
|
246
|
-
src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm"
|
|
247
|
-
type="module"
|
|
248
|
-
></script>
|
|
249
|
-
<script
|
|
250
|
-
src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm"
|
|
251
|
-
type="module"
|
|
252
|
-
></script>
|
|
253
|
-
<script
|
|
254
|
-
src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm"
|
|
255
|
-
type="module"
|
|
256
|
-
></script>
|
|
257
|
-
<script
|
|
258
|
-
src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm"
|
|
259
|
-
type="module"
|
|
260
|
-
></script>
|
|
42
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/+esm" type="module"></script>
|
|
43
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-nav@latest/+esm" type="module"></script>
|
|
44
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
45
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
46
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-icon@latest/+esm" type="module"></script>
|
|
261
47
|
|
|
262
48
|
<script type="module">
|
|
263
|
-
import
|
|
264
|
-
import
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
49
|
+
import {unified} from 'https://esm.sh/unified';
|
|
50
|
+
import remarkParse from 'https://esm.sh/remark-parse';
|
|
51
|
+
import remarkGfm from 'https://esm.sh/remark-gfm';
|
|
52
|
+
import remarkRehype from 'https://esm.sh/remark-rehype';
|
|
53
|
+
import rehypeRaw from 'https://esm.sh/rehype-raw';
|
|
54
|
+
import rehypeHighlight from 'https://esm.sh/rehype-highlight';
|
|
55
|
+
import rehypeStringify from 'https://esm.sh/rehype-stringify';
|
|
56
|
+
|
|
57
|
+
const response = await fetch('./index.md');
|
|
58
|
+
const text = await response.text();
|
|
59
|
+
const result = await unified()
|
|
60
|
+
.use(remarkParse)
|
|
61
|
+
.use(remarkGfm)
|
|
62
|
+
.use(remarkRehype, { allowDangerousHtml: true })
|
|
63
|
+
.use(rehypeRaw)
|
|
64
|
+
.use(rehypeHighlight)
|
|
65
|
+
.use(rehypeStringify)
|
|
66
|
+
.process(text);
|
|
67
|
+
|
|
68
|
+
document.querySelector("main").innerHTML = String(result);
|
|
69
|
+
addCopyButtons();
|
|
70
|
+
|
|
71
|
+
function addCopyButtons() {
|
|
72
|
+
document.querySelectorAll('pre code[class*="language-"], pre code[class*="hljs"]').forEach((code) => {
|
|
73
|
+
const pre = code.parentElement;
|
|
74
|
+
const wrapper = document.createElement('div');
|
|
75
|
+
wrapper.className = 'pre-wrapper';
|
|
76
|
+
pre.parentNode.insertBefore(wrapper, pre);
|
|
77
|
+
wrapper.appendChild(pre);
|
|
78
|
+
const btn = document.createElement('button');
|
|
79
|
+
btn.className = 'copy-btn';
|
|
80
|
+
btn.textContent = 'Copy';
|
|
81
|
+
btn.addEventListener('click', () => {
|
|
82
|
+
const raw = code.textContent;
|
|
83
|
+
const text = raw.replace(/\u200B/g, '').replace(/^\n+/, '').replace(/\n+$/, '\n').replace(/^\$ /, '');
|
|
84
|
+
navigator.clipboard.writeText(text).then(() => {
|
|
85
|
+
btn.textContent = 'Copied!';
|
|
86
|
+
setTimeout(() => { btn.textContent = 'Copy'; }, 1500);
|
|
87
|
+
});
|
|
273
88
|
});
|
|
89
|
+
wrapper.appendChild(btn);
|
|
90
|
+
});
|
|
274
91
|
}
|
|
275
|
-
|
|
276
|
-
loadMd("./index.md");
|
|
277
|
-
|
|
278
92
|
</script>
|
|
279
93
|
<script src="./index.min.js" data-demo-script="true" type="module"></script>
|
|
280
94
|
</body>
|
|
@@ -2,24 +2,15 @@
|
|
|
2
2
|
<div class="contentWrapper">
|
|
3
3
|
<nav>
|
|
4
4
|
<auro-nav anchorNavContent=".scrollWrapper">
|
|
5
|
-
<!-- <span slot="label">Anchor Navigation</span> -->
|
|
6
5
|
<span slot="mobileToggleCollapsed">View More</span>
|
|
7
6
|
<span slot="mobileToggleExpanded">View Less</span>
|
|
8
7
|
<auro-anchorlink fluid href="#description">Description</auro-anchorlink>
|
|
9
|
-
<auro-anchorlink fluid href="#
|
|
10
|
-
<auro-anchorlink fluid href="#trigger" class="level2 body-xs">Trigger</auro-anchorlink>
|
|
11
|
-
<auro-anchorlink fluid href="#options" class="level2 body-xs">Options</auro-anchorlink>
|
|
12
|
-
<auro-anchorlink fluid href="#helpText" class="level2 body-xs">Help Text</auro-anchorlink>
|
|
13
|
-
<auro-anchorlink fluid href="#initialState">Initial State</auro-anchorlink>
|
|
14
|
-
<auro-anchorlink fluid href="#usersStories">User Stories</auro-anchorlink>
|
|
8
|
+
<auro-anchorlink fluid href="#userStories">User Stories</auro-anchorlink>
|
|
15
9
|
<auro-anchorlink fluid href="#select" class="level2 body-xs">Select A Value</auro-anchorlink>
|
|
16
10
|
<auro-anchorlink fluid href="#presetValue" class="level2 body-xs">Preset Value</auro-anchorlink>
|
|
11
|
+
<auro-anchorlink fluid href="#multiselect" class="level2 body-xs">Multi-select</auro-anchorlink>
|
|
17
12
|
<auro-anchorlink fluid href="#autocomplete" class="level2 body-xs">Autocomplete</auro-anchorlink>
|
|
18
13
|
<auro-anchorlink fluid href="#skipSelection" class="level2 body-xs">Skip Selection</auro-anchorlink>
|
|
19
|
-
<auro-anchorlink fluid href="#requireSelection" class="level2 body-xs">Require Selection</auro-anchorlink>
|
|
20
|
-
<auro-anchorlink fluid href="#multiselect" class="level2 body-xs">Multi-select</auro-anchorlink>
|
|
21
|
-
<auro-anchorlink fluid href="#disableOptions" class="level2 body-xs">Disable Option(s)</auro-anchorlink>
|
|
22
|
-
<auro-anchorlink fluid href="#disableComponent" class="level2 body-xs">Disable Component</auro-anchorlink>
|
|
23
14
|
<auro-anchorlink fluid href="#viewport" class="level2 body-xs">Viewport Size</auro-anchorlink>
|
|
24
15
|
</auro-nav>
|
|
25
16
|
</nav>
|
|
@@ -62,8 +53,7 @@
|
|
|
62
53
|
<auro-accordion alignRight>
|
|
63
54
|
<span slot="trigger">See code</span>
|
|
64
55
|
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/basic.html) -->
|
|
65
|
-
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
66
|
-
|
|
56
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/basic.html -->
|
|
67
57
|
<pre class="language-html"><code class="language-html"><auro-select>
|
|
68
58
|
<span slot="ariaLabel.bib.close">Close Popup</span>
|
|
69
59
|
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
@@ -76,55 +66,10 @@
|
|
|
76
66
|
<auro-menuoption value="arrival">Arrival</auro-menuoption>
|
|
77
67
|
<auro-menuoption value="prefer alaska">Prefer Alaska</auro-menuoption>
|
|
78
68
|
</auro-menu>
|
|
79
|
-
</auro-select></code></pre>
|
|
69
|
+
</auro-select></code></pre>
|
|
80
70
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
81
71
|
</auro-accordion>
|
|
82
72
|
<section>
|
|
83
|
-
<auro-header level="2" id="ui">UI</auro-header>
|
|
84
|
-
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/ui.md) -->
|
|
85
|
-
<!-- The below content is automatically added from ./../docs/partials/ui.md -->
|
|
86
|
-
<p>The component consists of the following elements:</p>
|
|
87
|
-
<ul>
|
|
88
|
-
<li>
|
|
89
|
-
<strong>trigger:</strong> shows the component label, current value and will render to reflect state of the component (e.g. <code>focus</code>, <code>hover</code>, <code>disabled</code>, <code>valid</code>, <code>invalid</code>), and a flag marking instances that are required.
|
|
90
|
-
</li>
|
|
91
|
-
<li>
|
|
92
|
-
<strong>options list:</strong> a list of options that may be selected which are rendered in an element which can be expanded/collapsed by interacting with the trigger.
|
|
93
|
-
</li>
|
|
94
|
-
<li>
|
|
95
|
-
<strong>help text:</strong> descriptive text rendered below the trigger intended to help clarify the intended use of the component instance and any current validation error with instructions to resolve those errors.
|
|
96
|
-
</li>
|
|
97
|
-
</ul>
|
|
98
|
-
<auro-header level="3" id="trigger">Trigger</auro-header>
|
|
99
|
-
<p>The trigger includes the component label, a flag marking the component optional/required and the current value. This label is required in order to ensure correct behavior when a guest is using accessibility tools such as screen readers and VoiceOver utilities. The invalid state will also announce to accessibility tools when applied.</p>
|
|
100
|
-
<p>The optional/required flag content may be customized.</p>
|
|
101
|
-
<p>When rendering the value of a selected option, the entire text content of the option will render in the trigger, including any icons.</p>
|
|
102
|
-
<p>The trigger is a focusable element and will visually respond to common UI states - <strong>Hover</strong> <em>(:hover)</em>, <strong>Focus</strong> <em>(:focus / :focus-visible)</em>, <strong>Disabled</strong> <em>(:disabled)</em>. The component does not have a visual response to the <strong>Active</strong> <em>(:active)</em> state.</p>
|
|
103
|
-
<auro-header level="3" id="options">List Options</auro-header>
|
|
104
|
-
<p>The component will render a list of options that may be selected. Each option may be in one of the following states when rendered:</p>
|
|
105
|
-
<ul>
|
|
106
|
-
<li>
|
|
107
|
-
<code>selected</code> - One option may be selected at a time and identifies the current value of the component. There is an optional feature that may be used to enable more than one option to be selected at a time.
|
|
108
|
-
</li>
|
|
109
|
-
<li>
|
|
110
|
-
<code>active</code> - One option may be active at a time. The active option indicates the item that will become selected if the user chooses.
|
|
111
|
-
</li>
|
|
112
|
-
<li>
|
|
113
|
-
<code>disabled</code> - One or more options may be disabled. Disabled options are not interactive and cannot be marked as active or selected.
|
|
114
|
-
</li>
|
|
115
|
-
</ul>
|
|
116
|
-
<auro-header level="3" id="helpText">Help Text</auro-header>
|
|
117
|
-
<p>Help text is not required. However, consideration should be given to how users will understand the full context of the component instance, particularly users reliant on accessibility tools like screen readers. In certain cases, a component label alone may be confusing.</p>
|
|
118
|
-
<p>If the component fails validation, the help text will change to show a validation help message instead of the default help text.</p>
|
|
119
|
-
</section>
|
|
120
|
-
<section>
|
|
121
|
-
<auro-header level="2" id="initialState">Initial Render State</auro-header>
|
|
122
|
-
<p>
|
|
123
|
-
When the component first renders in it's default use case the value is <code>undefined</code> and the first enabled option is marked <code>active</code>. The component will initially render with the option list collapsed.
|
|
124
|
-
</p>
|
|
125
|
-
</section>
|
|
126
|
-
<!-- AURO-GENERATED-CONTENT:END -->
|
|
127
|
-
<section>
|
|
128
73
|
<auro-header level="2" id="userStories">User Stories</auro-header>
|
|
129
74
|
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../docs/partials/userStories.md) -->
|
|
130
75
|
<!-- The below content is automatically added from ./../docs/partials/userStories.md -->
|
|
@@ -170,6 +115,39 @@ Any previously selected option will be un-selected. The current active option ma
|
|
|
170
115
|
<p>When configured for multi-select, the preset value may include multiple options. The first selected option will also be marked <code>active</code>.</p>
|
|
171
116
|
<p>If one or more preset values do not match any option they will be discarded. If no preset values match any option, the value is reset to <code>undefined</code>.</p>
|
|
172
117
|
<div class="note"><strong>Important caveat:</strong> Multi-select is notoriously difficult for all users, including screen reader users — WCAG and usability research generally recommend avoiding <code><auro-select multiSelect></code> in favor of checkboxes or other patterns that make multi-selection more discoverable.</div>
|
|
118
|
+
<auro-header level="3" id="multiselect">Multi-select</auro-header>
|
|
119
|
+
<p>In certain cases it may be valid to allow more than one option to be selected. When the component is configured to support multi-select only one option is still able to be marked <code>active</code>. However, multiple options may be <code>selected</code> via click, tap or keyboard events on each option. A second click, tap or keyboard event on an already selected option will de-select it.</p>
|
|
120
|
+
<div class="exampleWrapper">
|
|
121
|
+
<!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/multi-select.html) -->
|
|
122
|
+
<!-- The below content is automatically added from ./../apiExamples/multi-select.html -->
|
|
123
|
+
<auro-select multiselect>
|
|
124
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
125
|
+
<label slot="placeholder">Select one or more options</label>
|
|
126
|
+
<span slot="label">multiselect select example</span>
|
|
127
|
+
<auro-menu>
|
|
128
|
+
<auro-menuoption value="1">Option 1</auro-menuoption>
|
|
129
|
+
<auro-menuoption value="2">Option 2</auro-menuoption>
|
|
130
|
+
<auro-menuoption value="3">Option 3</auro-menuoption>
|
|
131
|
+
</auro-menu>
|
|
132
|
+
</auro-select>
|
|
133
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
134
|
+
</div>
|
|
135
|
+
<auro-accordion alignRight>
|
|
136
|
+
<span slot="trigger">See code</span>
|
|
137
|
+
<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/multi-select.html) -->
|
|
138
|
+
<!-- The below code snippet is automatically added from ./../apiExamples/multi-select.html -->
|
|
139
|
+
<pre class="language-html"><code class="language-html"><auro-select multiselect>
|
|
140
|
+
<span slot="bib.fullscreen.headline">Bib Headline</span>
|
|
141
|
+
<label slot="placeholder">Select one or more options</label>
|
|
142
|
+
<span slot="label">multiselect select example</span>
|
|
143
|
+
<auro-menu>
|
|
144
|
+
<auro-menuoption value="1">Option 1</auro-menuoption>
|
|
145
|
+
<auro-menuoption value="2">Option 2</auro-menuoption>
|
|
146
|
+
<auro-menuoption value="3">Option 3</auro-menuoption>
|
|
147
|
+
</auro-menu>
|
|
148
|
+
</auro-select></code></pre>
|
|
149
|
+
<!-- AURO-GENERATED-CONTENT:END -->
|
|
150
|
+
</auro-accordion>
|
|
173
151
|
<auro-header level="3" id="autocomplete">Autocomplete</auro-header>
|
|
174
152
|
<p>The component supports the use of <auro-hyperlink href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Attributes/autocomplete">autocomplete</auro-hyperlink> configuration through HTML attributes.</p>
|
|
175
153
|
<auro-header level="3" id="skipSelection">Close the list of options without making a selection</auro-header>
|
|
@@ -183,45 +161,6 @@ Any previously selected option will be un-selected. The current active option ma
|
|
|
183
161
|
</div>
|
|
184
162
|
</li>
|
|
185
163
|
</ol>
|
|
186
|
-
<auro-header level="3" id="requireSelection">Require selection of an option</auro-header>
|
|
187
|
-
<p>Certain use cases may require the guest to make a selection from the component in order to continue the intended work flow (e.g. form submission).</p>
|
|
188
|
-
<p>When the component is marked required:</p>
|
|
189
|
-
<ol>
|
|
190
|
-
<li>Move focus to the auro-select element</li>
|
|
191
|
-
<li>Activate the trigger (e.g. mouse click, tap or keyboard event)</li>
|
|
192
|
-
<li>Navigate the list of options</li>
|
|
193
|
-
<li>
|
|
194
|
-
Collapse the bib without making a selection
|
|
195
|
-
<div class="note">
|
|
196
|
-
<p>This will re-render the component in a state reflecting the validation error. To resolve the error, the guest may continue to the following steps.</p>
|
|
197
|
-
</div>
|
|
198
|
-
</li>
|
|
199
|
-
<li>Activate the trigger</li>
|
|
200
|
-
<li>Navigate the list of options marking any option as active</li>
|
|
201
|
-
<li>
|
|
202
|
-
Select the active option
|
|
203
|
-
<div class="note">
|
|
204
|
-
<p>This will re-render the component and the validation error state will be removed.</p>
|
|
205
|
-
</div>
|
|
206
|
-
</li>
|
|
207
|
-
</ol>
|
|
208
|
-
<auro-header level="3" id="multiselect">Supporting multi-select</auro-header>
|
|
209
|
-
<p>In certain cases it may be valid to allow more than one option to be selected. When the component is configured to support multi-select only one option is still able to be marked <code>active</code>. However, multiple options may be <code>selected</code> via click, tap or keyboard events on each option. A second click, tap or keyboard event on an already selected option will de-select it.</p>
|
|
210
|
-
<auro-header level="3" id="disableOptions">Disable Option(s)</auro-header>
|
|
211
|
-
<p>The component may be rendered with one or more <code>disabled</code> options. When navigating the list of options with the keyboard or assistive technology to mark the next or previous option as active, disabled options will skipped, jumping to the next enabled option.</p>
|
|
212
|
-
<p>While using the pointer to mark options as active, hovering over disabled options will be ignored and the previous active option will remain active.</p>
|
|
213
|
-
<div class="note">
|
|
214
|
-
<strong>Note:</strong> If the currently <code>selected</code> option is marked as <code>disabled</code>, the component value is reset to <code>undefined</code> and the component validation workflow is performed (e.g., if the component instance is <code>required</code> it will set <code>validity="valueMissing".</code>).
|
|
215
|
-
</div>
|
|
216
|
-
<div class="note">
|
|
217
|
-
<strong>Note:</strong> marking all options as disabled is not supported. Disable the component instead.
|
|
218
|
-
</div>
|
|
219
|
-
<auro-header level="3" id="disableComponent">Disable Component</auro-header>
|
|
220
|
-
<p>The entire component may be disabled. When disabled, the component will render to reflect the state, may not receive focus nor react to any key or pointer events.</p>
|
|
221
|
-
<p>When the component is disabled and part of a form, the components value is still included in the form submission.</p>
|
|
222
|
-
<div class="note">
|
|
223
|
-
<strong>Note:</strong> If the component is marked as both <strong>invalid</strong> and <code>disabled</code>, the <strong>invalid</strong> state UI/UX and functional behavior are ignored. The <code>disabled</code> UI/UX and functional behavior works normally.
|
|
224
|
-
</div>
|
|
225
164
|
<auro-header level="3" id="viewport">Change Viewport Size</auro-header>
|
|
226
165
|
<p>The guest may change the size of their viewport (e.g. resize their desktop browser window, rotate their mobile device). In some cases, this may cause a re-render of the component while the option list is expanded. It is possible that the viewport size change will cause the option list to change from a popover bib to a fullscreen modal or vice versa while the bib is open.</p>
|
|
227
166
|
<auro-header level="4" id="us9a">Popover to Modal</auro-header>
|
|
@@ -230,6 +169,7 @@ Select the active option
|
|
|
230
169
|
<p>While in a fullscreen modal display state with the bib open, focus will be on the close button inside the dialog. After switching to the fullscreen modal dialog, focus will move to the trigger.</p>
|
|
231
170
|
</section>
|
|
232
171
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
172
|
+
</section>
|
|
233
173
|
</div>
|
|
234
174
|
</div>
|
|
235
175
|
</div>
|
|
@@ -5195,7 +5195,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
5195
5195
|
}
|
|
5196
5196
|
};
|
|
5197
5197
|
|
|
5198
|
-
var formkitVersion$1 = '
|
|
5198
|
+
var formkitVersion$1 = '202604281911';
|
|
5199
5199
|
|
|
5200
5200
|
class AuroElement extends i$3 {
|
|
5201
5201
|
static get properties() {
|
|
@@ -6948,7 +6948,7 @@ class AuroHelpText extends i$3 {
|
|
|
6948
6948
|
}
|
|
6949
6949
|
}
|
|
6950
6950
|
|
|
6951
|
-
var formkitVersion = '
|
|
6951
|
+
var formkitVersion = '202604281911';
|
|
6952
6952
|
|
|
6953
6953
|
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);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-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, 450);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, 450);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}`;
|
|
6954
6954
|
|