@aurodesignsystem-dev/auro-formkit 0.0.0-pr1452.1 → 0.0.0-pr1452.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.
Files changed (44) hide show
  1. package/components/checkbox/demo/api.js +17 -0
  2. package/components/checkbox/demo/api.min.js +26 -0
  3. package/components/checkbox/demo/index.min.js +1 -1
  4. package/components/checkbox/dist/index.js +1 -1
  5. package/components/checkbox/dist/registered.js +1 -1
  6. package/components/combobox/demo/registered.min.js +3 -3
  7. package/components/combobox/dist/index.js +3 -3
  8. package/components/combobox/dist/registered.js +3 -3
  9. package/components/counter/demo/auro-counter-group.min.js +2 -2
  10. package/components/counter/dist/index.js +13 -240
  11. package/components/counter/dist/registered.js +1 -1
  12. package/components/datepicker/demo/accessibility.html +0 -1
  13. package/components/datepicker/demo/auro-datepicker.min.js +3 -3
  14. package/components/datepicker/dist/index.js +3 -3
  15. package/components/datepicker/dist/registered.js +3 -3
  16. package/components/dropdown/demo/auro-dropdown.min.js +1 -1
  17. package/components/dropdown/dist/index.js +1 -1
  18. package/components/dropdown/dist/registered.js +1 -1
  19. package/components/form/demo/keyboard-behavior.md +38 -0
  20. package/components/form/demo/pages.json +1 -1
  21. package/components/form/demo/registerDemoDeps.min.js +257 -257
  22. package/components/input/demo/api.js +8 -0
  23. package/components/input/demo/api.min.js +9 -0
  24. package/components/input/demo/auro-input.min.js +1 -1
  25. package/components/input/dist/index.js +1 -1
  26. package/components/input/dist/registered.js +1 -1
  27. package/components/menu/demo/api.js +29 -0
  28. package/components/menu/demo/api.min.js +121 -0
  29. package/components/menu/demo/auro-menuoption.min.js +2289 -0
  30. package/components/menu/demo/index.min.js +1 -2287
  31. package/components/radio/demo/index.min.js +1 -1
  32. package/components/radio/dist/index.js +1 -1
  33. package/components/radio/dist/registered.js +1 -1
  34. package/components/select/demo/api.js +39 -0
  35. package/components/select/demo/api.min.js +83 -0
  36. package/components/select/demo/getting-started.min.js +1 -31
  37. package/components/select/demo/registered.min.js +2 -2
  38. package/components/select/demo/update-active-option.min.js +32 -0
  39. package/components/select/dist/index.js +2 -2
  40. package/components/select/dist/registered.js +2 -2
  41. package/package.json +1 -1
  42. package/components/combobox/demo/install.html +0 -50
  43. package/components/combobox/demo/styles.css +0 -974
  44. package/components/select/demo/keyboardBehavior.html +0 -48
@@ -1,974 +0,0 @@
1
- /* stylelint-disable no-invalid-position-at-import-rule */
2
- .container {
3
- display: grid;
4
- margin-left: auto;
5
- margin-right: auto;
6
- max-width: 1232px;
7
- }
8
-
9
- .pagecontainer {
10
- padding-left: 1rem;
11
- padding-right: 1rem;
12
- margin-left: auto;
13
- margin-right: auto;
14
- max-width: 1232px;
15
- }
16
- @media screen and (min-width: 576px) {
17
- .pagecontainer {
18
- padding-left: 1rem;
19
- padding-right: 1rem;
20
- }
21
- }
22
- @media screen and (min-width: 768px) {
23
- .pagecontainer {
24
- padding-left: 1.5rem;
25
- padding-right: 1.5rem;
26
- }
27
- }
28
- @media screen and (min-width: 1024px) {
29
- .pagecontainer {
30
- padding-left: 2rem;
31
- padding-right: 2rem;
32
- }
33
- }
34
- @media screen and (min-width: 1232px) {
35
- .pagecontainer {
36
- padding-left: 2rem;
37
- padding-right: 2rem;
38
- }
39
- }
40
- .pagecontainer.breadcrumbs {
41
- margin-block-end: 3.35rem;
42
- }
43
-
44
- .pageLayout-2colAnchorNav {
45
- display: grid;
46
- margin-left: auto;
47
- margin-right: auto;
48
- padding-left: 1rem;
49
- padding-right: 1rem;
50
- max-width: 1232px;
51
- gap: 2rem;
52
- grid-template-areas: "breadcrumbs" "anchornav" "main";
53
- }
54
- @media screen and (min-width: 576px) {
55
- .pageLayout-2colAnchorNav {
56
- gap: var(--ds-grid-gutter-sm, 1rem);
57
- }
58
- }
59
- @media screen and (min-width: 768px) {
60
- .pageLayout-2colAnchorNav {
61
- gap: var(--ds-grid-gutter-md, 1.5rem);
62
- }
63
- }
64
- @media screen and (min-width: 1024px) {
65
- .pageLayout-2colAnchorNav {
66
- gap: var(--ds-grid-gutter-lg, 1.5rem);
67
- }
68
- }
69
- @media screen and (min-width: 1232px) {
70
- .pageLayout-2colAnchorNav {
71
- gap: var(--ds-grid-gutter-xl, 2rem);
72
- }
73
- }
74
- @media screen and (min-width: 576px) {
75
- .pageLayout-2colAnchorNav {
76
- padding-left: 1rem;
77
- padding-right: 1rem;
78
- }
79
- }
80
- @media screen and (min-width: 768px) {
81
- .pageLayout-2colAnchorNav {
82
- padding-left: 1.5rem;
83
- padding-right: 1.5rem;
84
- grid-template-columns: auto var(--fixed-anchor-width, 168px);
85
- grid-template-areas: "breadcrumbs breadcrumbs" "main anchornav";
86
- }
87
- }
88
- @media screen and (min-width: 1024px) {
89
- .pageLayout-2colAnchorNav {
90
- padding-left: 2rem;
91
- padding-right: 2rem;
92
- }
93
- }
94
- @media screen and (min-width: 1232px) {
95
- .pageLayout-2colAnchorNav {
96
- padding-left: 2rem;
97
- padding-right: 2rem;
98
- }
99
- }
100
- .pageLayout-2colAnchorNav .breadcrumbs {
101
- grid-area: breadcrumbs;
102
- }
103
- .pageLayout-2colAnchorNav .main {
104
- grid-area: main;
105
- }
106
- .pageLayout-2colAnchorNav .main * {
107
- scroll-margin-top: var(--ds-grid-margin-md, 1.5rem);
108
- }
109
- .pageLayout-2colAnchorNav .anchornav {
110
- grid-area: anchornav;
111
- }
112
- @media screen and (min-width: 768px) {
113
- .pageLayout-2colAnchorNav .anchornav {
114
- position: sticky;
115
- top: 0;
116
- max-height: 100vh;
117
- padding-top: var(--ds-grid-margin-xl, 2rem);
118
- }
119
- }
120
-
121
- .pageLayout-2colSideNav {
122
- display: grid;
123
- margin-left: auto;
124
- margin-right: auto;
125
- padding-left: 0;
126
- padding-right: 0;
127
- max-width: 1232px;
128
- gap: 2rem;
129
- grid-template-areas: "breadcrumbs" "sidenav" "main";
130
- }
131
- @media screen and (min-width: 576px) {
132
- .pageLayout-2colSideNav {
133
- gap: var(--ds-grid-gutter-sm, 1rem);
134
- }
135
- }
136
- @media screen and (min-width: 768px) {
137
- .pageLayout-2colSideNav {
138
- gap: var(--ds-grid-gutter-md, 1.5rem);
139
- }
140
- }
141
- @media screen and (min-width: 1024px) {
142
- .pageLayout-2colSideNav {
143
- gap: var(--ds-grid-gutter-lg, 1.5rem);
144
- }
145
- }
146
- @media screen and (min-width: 1232px) {
147
- .pageLayout-2colSideNav {
148
- gap: var(--ds-grid-gutter-xl, 2rem);
149
- }
150
- }
151
- @media screen and (min-width: 768px) {
152
- .pageLayout-2colSideNav {
153
- padding-left: 1.5rem;
154
- padding-right: 1.5rem;
155
- grid-template-columns: var(--fixed-nav-width, 280px) auto;
156
- grid-template-areas: "breadcrumbs breadcrumbs" "sidenav main";
157
- }
158
- }
159
- @media screen and (min-width: 1024px) {
160
- .pageLayout-2colSideNav {
161
- padding-left: 2rem;
162
- padding-right: 2rem;
163
- }
164
- }
165
- @media screen and (min-width: 1232px) {
166
- .pageLayout-2colSideNav {
167
- padding-left: 2rem;
168
- padding-right: 2rem;
169
- }
170
- }
171
- .pageLayout-2colSideNav .breadcrumbs {
172
- grid-area: breadcrumbs;
173
- padding-left: 1rem;
174
- padding-right: 1rem;
175
- }
176
- @media screen and (min-width: 768px) {
177
- .pageLayout-2colSideNav .breadcrumbs {
178
- padding-left: 0;
179
- padding-right: 0;
180
- }
181
- }
182
- .pageLayout-2colSideNav .sidenav {
183
- grid-area: sidenav;
184
- background-color: var(--ds-color-container-primary-default, #ffffff);
185
- padding-left: 1rem;
186
- padding-right: 1rem;
187
- }
188
- @media screen and (min-width: 768px) {
189
- .pageLayout-2colSideNav .sidenav {
190
- padding-left: 0;
191
- padding-right: 0;
192
- background-color: transparent;
193
- }
194
- }
195
- .pageLayout-2colSideNav .main {
196
- grid-area: main;
197
- padding-left: 1rem;
198
- padding-right: 1rem;
199
- }
200
- @media screen and (min-width: 768px) {
201
- .pageLayout-2colSideNav .main {
202
- padding-left: 0;
203
- padding-right: 0;
204
- }
205
- }
206
- .pageLayout-2colSideNav .main * {
207
- scroll-margin-top: var(--ds-grid-margin-md, 1.5rem);
208
- }
209
-
210
- .pageLayout-3col {
211
- display: grid;
212
- margin-left: auto;
213
- margin-right: auto;
214
- padding-left: 0;
215
- padding-right: 0;
216
- max-width: 1232px;
217
- gap: 2rem;
218
- grid-template-areas: "breadcrumbs" "sidenav" "anchornav" "main";
219
- }
220
- @media screen and (min-width: 576px) {
221
- .pageLayout-3col {
222
- gap: var(--ds-grid-gutter-sm, 1rem);
223
- }
224
- }
225
- @media screen and (min-width: 768px) {
226
- .pageLayout-3col {
227
- gap: var(--ds-grid-gutter-md, 1.5rem);
228
- }
229
- }
230
- @media screen and (min-width: 1024px) {
231
- .pageLayout-3col {
232
- gap: var(--ds-grid-gutter-lg, 1.5rem);
233
- }
234
- }
235
- @media screen and (min-width: 1232px) {
236
- .pageLayout-3col {
237
- gap: var(--ds-grid-gutter-xl, 2rem);
238
- }
239
- }
240
- @media screen and (min-width: 768px) {
241
- .pageLayout-3col {
242
- padding-left: 1.5rem;
243
- padding-right: 1.5rem;
244
- grid-template-columns: var(--fixed-nav-width, 280px) auto var(--fixed-anchor-width, 168px);
245
- grid-template-areas: "breadcrumbs breadcrumbs breadcrumbs" "sidenav main anchornav";
246
- }
247
- }
248
- @media screen and (min-width: 1024px) {
249
- .pageLayout-3col {
250
- padding-left: 2rem;
251
- padding-right: 2rem;
252
- }
253
- }
254
- @media screen and (min-width: 1232px) {
255
- .pageLayout-3col {
256
- padding-left: 2rem;
257
- padding-right: 2rem;
258
- }
259
- }
260
- .pageLayout-3col .breadcrumbs {
261
- grid-area: breadcrumbs;
262
- padding-left: 1rem;
263
- padding-right: 1rem;
264
- }
265
- @media screen and (min-width: 768px) {
266
- .pageLayout-3col .breadcrumbs {
267
- padding-left: 0;
268
- padding-right: 0;
269
- }
270
- }
271
- .pageLayout-3col .sidenav {
272
- grid-area: sidenav;
273
- z-index: 1;
274
- background-color: var(--ds-color-container-primary-default, #ffffff);
275
- padding-left: 1rem;
276
- padding-right: 1rem;
277
- position: sticky;
278
- top: 0;
279
- --align-self: stretch;
280
- align-self: var(--align-self);
281
- }
282
- @media screen and (min-width: 768px) {
283
- .pageLayout-3col .sidenav {
284
- padding-left: 0;
285
- padding-right: 0;
286
- background-color: transparent;
287
- }
288
- }
289
- .pageLayout-3col .main {
290
- grid-area: main;
291
- padding-left: 1rem;
292
- padding-right: 1rem;
293
- }
294
- @media screen and (min-width: 768px) {
295
- .pageLayout-3col .main {
296
- padding-left: 0;
297
- padding-right: 0;
298
- }
299
- }
300
- .pageLayout-3col .main * {
301
- scroll-margin-top: var(--ds-grid-margin-md, 1.5rem);
302
- }
303
- .pageLayout-3col .anchornav {
304
- grid-area: anchornav;
305
- padding-left: 1rem;
306
- padding-right: 1rem;
307
- }
308
- @media screen and (min-width: 768px) {
309
- .pageLayout-3col .anchornav {
310
- position: sticky;
311
- top: 0;
312
- max-height: 100vh;
313
- padding-top: var(--ds-grid-margin-xl, 2rem);
314
- }
315
- }
316
- @media screen and (min-width: 768px) {
317
- .pageLayout-3col .anchornav {
318
- padding-left: 0;
319
- padding-right: 0;
320
- }
321
- }
322
-
323
- @font-face {
324
- font-family: "AS Circular";
325
- font-weight: var(--ds-text-heading-display-weight, 100);
326
- font-style: normal;
327
- font-display: fallback;
328
- src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltd55b385b9432ca51/ASCircularWeb-Light?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt1566a6d54c0bf457/ASCircularWeb-Light?environment=production") format("woff");
329
- }
330
- @font-face {
331
- font-family: "AS Circular";
332
- font-weight: var(--ds-text-heading-medium-weight, 300);
333
- font-style: normal;
334
- font-display: fallback;
335
- src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltc48385a5d7dd0f20/ASCircularWeb-Medium?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/bltf30c93842722e935/ASCircularWeb-Medium?environment=production") format("woff");
336
- }
337
- @font-face {
338
- font-family: "AS Circular";
339
- font-weight: var(--ds-text-body-default-weight, 500);
340
- font-style: normal;
341
- font-display: fallback;
342
- src: url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt3b851fb0e0de3833/ASCircularWeb-Book?environment=production") format("woff2"), url("https://www.alaskaair.com/v3/assets/blt2cefe12c88e9dd91/blt8b440e82e9793058/ASCircularWeb-Book?environment=production") format("woff");
343
- }
344
- /* Document
345
- ========================================================================== */
346
- html {
347
- line-height: 1.15; /* 1 */
348
- -webkit-text-size-adjust: 100%; /* 2 */
349
- }
350
-
351
- /* Sections
352
- ========================================================================== */
353
- body {
354
- margin: 0;
355
- -webkit-font-smoothing: antialiased;
356
- -moz-osx-font-smoothing: grayscale;
357
- }
358
-
359
- main {
360
- display: block;
361
- }
362
-
363
- /* Grouping content
364
- ========================================================================== */
365
- hr {
366
- overflow: visible; /* 1 */
367
- box-sizing: content-box; /* 2 */
368
- height: 0; /* 2 */
369
- }
370
-
371
- pre {
372
- font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line font-family-no-duplicate-names */
373
- font-size: var(--ds-text-body-size-default, 1rem); /* 2 */
374
- }
375
-
376
- /* Text-level semantics
377
- ========================================================================== */
378
- a {
379
- background-color: transparent;
380
- }
381
-
382
- abbr[title] {
383
- text-decoration: underline; /* 1 */
384
- text-decoration: underline dotted; /* 1 */ /* stylelint-disable-line declaration-block-no-duplicate-properties */
385
- border-bottom: none; /* 2 */
386
- }
387
-
388
- b,
389
- strong {
390
- font-weight: bolder;
391
- }
392
-
393
- code,
394
- kbd,
395
- samp {
396
- font-family: monospace, monospace; /* 1 */ /* stylelint-disable-line font-family-no-duplicate-names */
397
- font-size: var(--ds-text-body-size-default, 1rem); /* 2 */
398
- }
399
-
400
- sub,
401
- sup {
402
- position: relative;
403
- vertical-align: baseline;
404
- font-size: 75%;
405
- line-height: 0;
406
- }
407
-
408
- sub {
409
- bottom: -0.25em;
410
- }
411
-
412
- sup {
413
- top: -0.5em;
414
- }
415
-
416
- /* Embedded content
417
- ========================================================================== */
418
- img {
419
- border-style: none;
420
- }
421
-
422
- /* Forms
423
- ========================================================================== */
424
- button,
425
- input,
426
- optgroup,
427
- select,
428
- textarea {
429
- margin: 0; /* 1 */
430
- font-family: inherit; /* 2 */
431
- font-size: 100%; /* 2 */
432
- line-height: var(--ds-text-body-height-default, 1.5rem); /* 2 */
433
- }
434
-
435
- button,
436
- input { /* 1 */
437
- overflow: visible;
438
- }
439
-
440
- button,
441
- select { /* 1 */
442
- text-transform: none;
443
- }
444
-
445
- button,
446
- [type=button],
447
- [type=reset],
448
- [type=submit] {
449
- -webkit-appearance: none;
450
- appearance: none;
451
- }
452
-
453
- fieldset {
454
- padding: 0.35em 0.75em 0.625em;
455
- }
456
-
457
- legend {
458
- display: table; /* 1 */
459
- box-sizing: border-box; /* 1 */
460
- max-width: 100%; /* 1 */
461
- padding: 0; /* 2 */
462
- white-space: normal; /* 1 */
463
- color: inherit; /* 3 */
464
- }
465
-
466
- progress {
467
- vertical-align: baseline;
468
- }
469
-
470
- textarea {
471
- overflow: auto;
472
- }
473
-
474
- [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
475
- height: auto;
476
- }
477
-
478
- [type=search] {
479
- outline-offset: -2px; /* 1 */
480
- -webkit-appearance: textfield; /* 2 */
481
- appearance: textfield; /* 2 */
482
- }
483
-
484
- ::-webkit-search-decoration {
485
- -webkit-appearance: none;
486
- appearance: none;
487
- }
488
-
489
- ::-webkit-file-upload-button {
490
- font: inherit; /* 1 */
491
- -webkit-appearance: button; /* 2 */
492
- appearance: button; /* 2 */
493
- }
494
-
495
- /* Interactive
496
- ========================================================================== */
497
- details {
498
- display: block;
499
- }
500
-
501
- summary {
502
- display: list-item;
503
- }
504
-
505
- /* Misc
506
- ========================================================================== */
507
- template {
508
- display: none;
509
- }
510
-
511
- [hidden] {
512
- display: none;
513
- }
514
-
515
- .heading, .auro-markdown h1,
516
- .auro-markdown h2,
517
- .auro-markdown h3 {
518
- margin: calc(1rem + 0.75rem) 0;
519
- letter-spacing: var(--ds-text-heading-default-spacing, -0.2px);
520
- font-weight: var(--ds-text-heading-default-weight, 500);
521
- }
522
-
523
- .heading--display, .auro-markdown h1 {
524
- margin-top: 0;
525
- font-size: var(--ds-text-heading-display-size-breakpoint-sm, 2.75rem);
526
- font-weight: var(--ds-text-heading-display-weight, 100);
527
- line-height: var(--ds-text-heading-display-height-breakpoint-sm, 3.375rem);
528
- }
529
- @media screen and (min-width: 768px) {
530
- .heading--display, .auro-markdown h1 {
531
- font-size: var(--ds-text-heading-display-size-breakpoint-md, 3rem);
532
- line-height: var(--ds-text-heading-display-height-breakpoint-md, 3.75rem);
533
- }
534
- }
535
- @media screen and (min-width: 1024px) {
536
- .heading--display, .auro-markdown h1 {
537
- font-size: var(--ds-text-heading-display-size-breakpoint-lg, 3.5rem);
538
- line-height: var(--ds-text-heading-display-height-breakpoint-lg, 4.25rem);
539
- }
540
- }
541
-
542
- .heading--800 {
543
- font-size: var(--ds-text-heading-800-size-breakpoint-sm, 2rem);
544
- font-weight: var(--ds-text-heading-800-weight, 500);
545
- line-height: var(--ds-text-heading-800-height-breakpoint-sm, 2.375rem);
546
- }
547
- @media screen and (min-width: 768px) {
548
- .heading--800 {
549
- font-size: var(--ds-text-heading-800-size-breakpoint-md, 2.25rem);
550
- line-height: var(--ds-text-heading-800-height-breakpoint-md, 2.625rem);
551
- }
552
- }
553
- @media screen and (min-width: 1024px) {
554
- .heading--800 {
555
- font-size: var(--ds-text-heading-800-size-breakpoint-lg, 2.5rem);
556
- line-height: var(--ds-text-heading-800-height-breakpoint-lg, 3rem);
557
- }
558
- }
559
-
560
- .heading--700, .auro-markdown h2 {
561
- font-size: var(--ds-text-heading-700-size-breakpoint-sm, 1.75rem);
562
- font-weight: var(--ds-text-heading-700-weight, 500);
563
- line-height: var(--ds-text-heading-700-height-breakpoint-sm, 2.125rem);
564
- }
565
- @media screen and (min-width: 768px) {
566
- .heading--700, .auro-markdown h2 {
567
- font-size: var(--ds-text-heading-700-size-breakpoint-md, 2rem);
568
- line-height: var(--ds-text-heading-700-height-breakpoint-md, 2.375rem);
569
- }
570
- }
571
- @media screen and (min-width: 1024px) {
572
- .heading--700, .auro-markdown h2 {
573
- font-size: var(--ds-text-heading-700-size-breakpoint-lg, 2.25rem);
574
- line-height: var(--ds-text-heading-700-height-breakpoint-lg, 2.75rem);
575
- }
576
- }
577
-
578
- .heading--600, .auro-markdown h3 {
579
- margin: 1rem 0;
580
- font-size: var(--ds-text-heading-600-size-breakpoint-sm, 1.625rem);
581
- font-weight: var(--ds-text-heading-600-weight, 300);
582
- line-height: var(--ds-text-heading-600-height-breakpoint-sm, 1.875rem);
583
- }
584
- @media screen and (min-width: 768px) {
585
- .heading--600, .auro-markdown h3 {
586
- font-size: var(--ds-text-heading-600-size-breakpoint-md, 1.75rem);
587
- line-height: var(--ds-text-heading-600-height-breakpoint-md, 2.125rem);
588
- }
589
- }
590
- @media screen and (min-width: 1024px) {
591
- .heading--600, .auro-markdown h3 {
592
- font-size: var(--ds-text-heading-600-size-breakpoint-lg, 1.75rem);
593
- line-height: var(--ds-text-heading-600-height-breakpoint-lg, 2.25rem);
594
- }
595
- }
596
-
597
- .heading--500, .auro-markdown h4 {
598
- margin: 1rem 0;
599
- font-size: var(--ds-text-heading-500-size-breakpoint-sm, 1.375rem);
600
- font-weight: var(--ds-text-heading-500-weight, 300);
601
- line-height: var(--ds-text-heading-500-height-breakpoint-sm, 1.625rem);
602
- }
603
- @media screen and (min-width: 768px) {
604
- .heading--500, .auro-markdown h4 {
605
- font-size: var(--ds-text-heading-500-size-breakpoint-md, 1.5rem);
606
- line-height: var(--ds-text-heading-500-height-breakpoint-md, 1.875rem);
607
- }
608
- }
609
- @media screen and (min-width: 1024px) {
610
- .heading--500, .auro-markdown h4 {
611
- font-size: var(--ds-text-heading-500-size-breakpoint-lg, 1.5rem);
612
- line-height: var(--ds-text-heading-500-height-breakpoint-lg, 2rem);
613
- }
614
- }
615
-
616
- .heading--400 {
617
- margin: 0.75rem 0;
618
- font-size: var(--ds-text-heading-400-size, 1.25rem);
619
- font-weight: var(--ds-text-heading-400-weight, 300);
620
- line-height: var(--ds-text-heading-400-height, 1.625rem);
621
- }
622
-
623
- .heading--300 {
624
- margin: 0.75rem 0;
625
- font-size: var(--ds-text-heading-300-size, 1.125rem);
626
- font-weight: var(--ds-text-heading-300-weight, 300);
627
- line-height: var(--ds-text-heading-300-height, 1.625rem);
628
- }
629
-
630
- blockquote {
631
- margin-left: 0;
632
- border-left: 1px solid var(--ds-color-border-ui-active-default, #225296);
633
- padding: var(--ds-size-100, 0.5rem);
634
- padding-left: var(--ds-size-400, 2rem);
635
- color: var(--ds-color-text-secondary-default, #525252);
636
- font-weight: 200;
637
- margin-top: var(--ds-size-300, 1.5rem);
638
- margin-bottom: var(--ds-size-300, 1.5rem);
639
- }
640
- blockquote p, blockquote .auro-markdown p, .auro-markdown blockquote p {
641
- line-height: 2;
642
- }
643
- blockquote p:last-child {
644
- margin-bottom: 0;
645
- }
646
- blockquote + p, .auro-markdown blockquote + p {
647
- margin-bottom: var(--ds-size-400, 2rem);
648
- }
649
-
650
- .auro_table, .auro-markdown table {
651
- display: block;
652
- overflow: scroll;
653
- width: auto;
654
- margin-bottom: var(--ds-size-400, 2rem);
655
- border-spacing: var(--ds-size-150, 0.75rem);
656
- border-collapse: collapse;
657
- font-weight: var(--ds-text-heading-display-weight, 100);
658
- }
659
- .auro_table tr:nth-child(even), .auro-markdown table tr:nth-child(even) {
660
- background-color: var(--ds-color-container-secondary-default, #f7f7f7);
661
- }
662
- .auro_table th, .auro-markdown table th {
663
- text-align: left;
664
- font-weight: var(--ds-text-heading-default-weight, 500);
665
- }
666
- @media screen and (min-width: 576px) {
667
- .auro_table, .auro-markdown table {
668
- display: table;
669
- width: 100%;
670
- }
671
- }
672
- .auro_table thead, .auro-markdown table thead {
673
- border-collapse: collapse;
674
- border-bottom: 1px solid var(--ds-color-border-tertiary-default, #dddddd);
675
- }
676
- .auro_table th, .auro-markdown table th,
677
- .auro_table td,
678
- .auro-markdown table td {
679
- padding: var(--ds-size-200, 1rem);
680
- }
681
-
682
- *:focus-visible {
683
- outline: 1px solid var(--ds-color-border-ui-focus-default, #2c67b5);
684
- }
685
-
686
- /*
687
- Essentials for Auro Classic theme
688
- */
689
- :focus:not(:focus-visible) {
690
- outline: 3px solid transparent;
691
- }
692
-
693
- html {
694
- box-sizing: border-box;
695
- font-size: var(--ds-text-body-size-default, 1rem);
696
- -webkit-text-size-adjust: 100%;
697
- -ms-text-size-adjust: 100%;
698
- }
699
-
700
- body,
701
- .baseType {
702
- margin: 0;
703
- color: var(--ds-color-text-primary-default, #2a2a2a);
704
- font-family: var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);
705
- font-variant-ligatures: no-common-ligatures;
706
- font-size: var(--ds-text-body-size-default, 1rem);
707
- font-weight: var(--ds-text-body-default-weight, 500);
708
- line-height: var(--ds-text-body-height-default, 1.5rem);
709
- }
710
-
711
- .baseParagraph {
712
- margin: 0 0 1rem;
713
- line-height: var(--ds-text-body-height-default, 1.5rem);
714
- }
715
- .baseParagraph .hyperlink, .baseParagraph .auro-markdown a, .auro-markdown .baseParagraph a {
716
- text-decoration: underline;
717
- }
718
-
719
- .hyperlink, .auro-markdown a {
720
- text-decoration: underline;
721
- color: var(--ds-color-text-ui-default-default, #2c67b5);
722
- }
723
- .hyperlink:visited, .auro-markdown a:visited {
724
- color: var(--ds-color-text-ui-default-default, #2c67b5);
725
- }
726
- .hyperlink--nav {
727
- display: block;
728
- text-decoration: none;
729
- }
730
- .hyperlink--nav:not(.is-touching):hover {
731
- text-decoration: underline !important;
732
- }
733
- .hyperlink--ondark {
734
- color: var(--ds-color-text-ui-default-inverse, #56bbde);
735
- }
736
- .hyperlink--ondark:not(.is-touching):hover {
737
- color: var(--ds-color-text-ui-hover-inverse, #a8e9f7);
738
- }
739
- .hyperlink--ondark:visited {
740
- color: var(--ds-color-text-ui-default-inverse, #56bbde);
741
- }
742
- .hyperlink:not(.is-touching):hover, .auro-markdown a:not(.is-touching):hover {
743
- text-decoration: none;
744
- color: var(--ds-color-text-ui-hover-default, #193d73);
745
- }
746
-
747
- img {
748
- max-width: 100%;
749
- }
750
-
751
- small,
752
- .type--small {
753
- font-size: var(--ds-text-body-size-xs, 0.75rem);
754
- line-height: var(--ds-text-body-height-xs, 1rem);
755
- }
756
-
757
- /* stylelint-disable-line scss/dollar-variable-first-in-block */
758
- .fineprint {
759
- font-family: var(--ds-font-family-default, "AS Circular", "Helvetica Neue", Arial, sans-serif);
760
- font-size: var(--ds-text-body-size-xs, 0.75rem);
761
- line-height: var(--ds-text-body-height-xs, 1rem);
762
- color: var(--ds-color-text-secondary-default, #525252);
763
- }
764
-
765
- /* stylelint-disable selector-type-no-unknown */
766
- .auro-markdown p:last-child {
767
- margin-bottom: 0;
768
- }
769
- .hljs {
770
- background-color: unset !important;
771
- padding: unset !important;
772
- }
773
-
774
- pre {
775
- background: var(--ds-color-brand-gray-100, #f7f7f7) !important;
776
- border: unset !important;
777
- padding: var(--ds-size-200) !important;
778
- margin-bottom: var(--ds-size-300, 1.5rem) !important;
779
- border-style: solid !important;
780
- border-width: 1px !important;
781
- border-color: var(--ds-color-border-secondary-default) !important;
782
- border-radius: 0.5rem;
783
- margin-top: var(--ds-size-200) !important;
784
- box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
785
- overflow-x: scroll !important;
786
- }
787
- pre code {
788
- font-size: 0.85rem !important;
789
- font-family: monospace;
790
- text-shadow: none;
791
- }
792
-
793
- .pre-wrapper:last-of-type pre {
794
- margin-bottom: 0 !important;
795
- }
796
-
797
- code:not(.html):not(.css):not(.js):not([class*=language-]) {
798
- color: var(--ds-color-brand-flamingo-500, #b82b47);
799
- margin-bottom: 0 !important;
800
- }
801
-
802
- .token.operator {
803
- background-color: unset !important;
804
- }
805
-
806
- auro-accordion:not(.section) {
807
- margin-top: 1rem !important;
808
- display: block;
809
- }
810
-
811
- auro-accordion:not(.section):nth-child(2) {
812
- margin-block-start: 0;
813
- }
814
-
815
- auro-accordion[class~=section]::part(accordion) {
816
- padding-right: 2px;
817
- display: block;
818
- }
819
-
820
- .accordion-content {
821
- padding-top: 1rem;
822
- }
823
-
824
- .token.operator {
825
- background-color: unset !important;
826
- }
827
-
828
- auro-accordion:not(auro-accordion-group *) {
829
- margin-top: 1rem !important;
830
- display: block;
831
- }
832
-
833
- .pre-wrapper {
834
- position: relative;
835
- }
836
-
837
- .copy-btn {
838
- position: absolute;
839
- top: 6px;
840
- right: 6px;
841
- opacity: 0;
842
- transition: opacity 0.15s ease;
843
- background: var(--ds-color-container-primary-default, #fff);
844
- border: 1px solid var(--ds-color-border-secondary-default, #ccc);
845
- border-radius: 4px;
846
- padding: 4px 8px;
847
- cursor: pointer;
848
- font-size: 12px;
849
- line-height: 1;
850
- color: var(--ds-color-text-secondary-default, #333);
851
- z-index: 1;
852
- }
853
- .copy-btn:hover {
854
- background: var(--ds-color-container-secondary-default, #f0f0f0);
855
- }
856
-
857
- .pre-wrapper:hover .copy-btn {
858
- opacity: 1;
859
- }
860
-
861
- .exampleWrapper {
862
- background-color: var(--ds-basic-color-surface-default);
863
- padding: 1rem;
864
- border-radius: 0.5rem;
865
- margin-top: 1rem;
866
- }
867
-
868
- .exampleWrapper--ondark {
869
- background-color: var(--ds-basic-color-surface-inverse);
870
- padding: 1rem;
871
- border-radius: 0.5rem;
872
- margin-top: 1rem;
873
- }
874
-
875
- table {
876
- --ds-color-container-secondary-default: transparent;
877
- }
878
- table.compressed {
879
- width: unset !important;
880
- margin: var(--ds-size-50) 0 var(--ds-size-100) !important;
881
- }
882
- table.compressed th,
883
- table.compressed td {
884
- padding: var(--ds-size-50) !important;
885
- }
886
-
887
- tr:not(:last-of-type) {
888
- border-bottom: 1px solid var(--ds-color-border-tertiary-default);
889
- }
890
-
891
- body {
892
- padding: 0;
893
- display: flex;
894
- flex-direction: column;
895
- height: 100vh;
896
- }
897
-
898
- main {
899
- display: flex;
900
- flex-direction: column;
901
- min-height: 0;
902
- flex: 1;
903
- }
904
-
905
- .contentWrapper {
906
- display: flex;
907
- flex-direction: row-reverse;
908
- gap: 25px;
909
- align-items: flex-start;
910
- }
911
- .contentWrapper > nav {
912
- width: 200px;
913
- flex-shrink: 0;
914
- position: sticky;
915
- top: 0;
916
- height: 100vh;
917
- overflow-y: auto;
918
- }
919
- .contentWrapper > nav auro-nav {
920
- display: block;
921
- }
922
-
923
- .mainContent {
924
- flex: 1;
925
- display: flex;
926
- flex-direction: column;
927
- flex-basis: 0;
928
- box-sizing: border-box;
929
- min-width: 0;
930
- }
931
-
932
- .scrollWrapper {
933
- flex: 1;
934
- min-height: 0;
935
- }
936
-
937
- auro-nav {
938
- max-width: 200px;
939
- position: sticky;
940
- top: 2rem;
941
- align-self: flex-start;
942
- max-height: calc(100vh - 4rem);
943
- overflow-y: auto;
944
- }
945
-
946
- auro-anchorlink[class~=level2] {
947
- padding-left: var(--ds-size-200);
948
- }
949
-
950
- p:first-of-type {
951
- margin-top: 0;
952
- }
953
-
954
- .note,
955
- .warning {
956
- margin: 10px 0;
957
- padding: 10px;
958
- border-radius: 6px;
959
- font-style: italic;
960
- }
961
-
962
- .note {
963
- background-color: var(--ds-basic-color-surface-neutral-subtle);
964
- color: var(--ds-basic-color-texticon-muted);
965
- }
966
-
967
- .warning {
968
- background-color: var(--ds-basic-color-status-error-subtle);
969
- color: var(--ds-basic-color-status-error);
970
- }
971
-
972
- auro-header {
973
- margin-top: 1rem;
974
- }