@aurodesignsystem-dev/auro-formkit 0.0.0-pr1424.2 → 0.0.0-pr1424.4
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/CHANGELOG.md +2 -2
- package/README.md +133 -183
- package/components/checkbox/demo/api.min.js +3 -3
- package/components/checkbox/demo/index.min.js +3 -3
- package/components/checkbox/dist/index.js +3 -3
- package/components/checkbox/dist/registered.js +3 -3
- package/components/combobox/demo/api.html +1 -0
- package/components/combobox/demo/api.js +3 -1
- package/components/combobox/demo/api.md +75 -0
- package/components/combobox/demo/api.min.js +314 -172
- package/components/combobox/demo/index.min.js +301 -171
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +1 -1
- package/components/combobox/dist/index.js +291 -171
- package/components/combobox/dist/registered.js +291 -171
- package/components/counter/demo/api.html +3 -0
- package/components/counter/demo/api.js +4 -0
- package/components/counter/demo/api.md +130 -0
- package/components/counter/demo/api.min.js +320 -167
- package/components/counter/demo/index.min.js +300 -167
- package/components/counter/dist/counterGroupKeyboardStrategy.d.ts +3 -0
- package/components/counter/dist/index.js +300 -167
- package/components/counter/dist/registered.js +300 -167
- package/components/datepicker/demo/api.html +1 -0
- package/components/datepicker/demo/api.js +2 -0
- package/components/datepicker/demo/api.md +57 -0
- package/components/datepicker/demo/api.min.js +376 -171
- package/components/datepicker/demo/index.min.js +364 -171
- package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +3 -1
- package/components/datepicker/dist/index.js +364 -171
- package/components/datepicker/dist/registered.js +364 -171
- package/components/dropdown/demo/api.html +1 -0
- package/components/dropdown/demo/api.js +2 -0
- package/components/dropdown/demo/api.md +95 -0
- package/components/dropdown/demo/api.min.js +296 -165
- package/components/dropdown/demo/index.min.js +276 -165
- package/components/dropdown/dist/index.js +276 -165
- package/components/dropdown/dist/registered.js +276 -165
- package/components/form/demo/api.min.js +1254 -684
- package/components/form/demo/index.min.js +1254 -684
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/api.md +1 -0
- package/components/menu/demo/api.min.js +10 -0
- package/components/menu/demo/index.min.js +10 -0
- package/components/menu/dist/auro-menuoption.d.ts +9 -0
- package/components/menu/dist/index.js +10 -0
- package/components/menu/dist/registered.js +10 -0
- package/components/radio/demo/api.min.js +2 -2
- package/components/radio/demo/index.min.js +2 -2
- package/components/radio/dist/index.js +2 -2
- package/components/radio/dist/registered.js +2 -2
- package/components/select/demo/api.html +1 -0
- package/components/select/demo/api.js +2 -0
- package/components/select/demo/api.md +76 -0
- package/components/select/demo/api.min.js +306 -169
- package/components/select/demo/index.min.js +293 -169
- package/components/select/dist/index.js +283 -169
- package/components/select/dist/registered.js +283 -169
- package/custom-elements.json +48 -3
- package/package.json +5 -3
|
@@ -1290,6 +1290,10 @@ const selectKeyboardStrategy = {
|
|
|
1290
1290
|
if (!ctx.isExpanded) {
|
|
1291
1291
|
return;
|
|
1292
1292
|
}
|
|
1293
|
+
|
|
1294
|
+
// Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
|
|
1295
|
+
evt.stopPropagation();
|
|
1296
|
+
|
|
1293
1297
|
component.dropdown.hide();
|
|
1294
1298
|
},
|
|
1295
1299
|
|
|
@@ -3228,11 +3232,19 @@ class AuroFloatingUI {
|
|
|
3228
3232
|
* This ensures that the bib content has the same dimensions as the sizer element.
|
|
3229
3233
|
*/
|
|
3230
3234
|
mirrorSize() {
|
|
3235
|
+
const element = this.element;
|
|
3236
|
+
if (!element) {
|
|
3237
|
+
return;
|
|
3238
|
+
}
|
|
3239
|
+
|
|
3231
3240
|
// mirror the boxsize from bibSizer
|
|
3232
|
-
if (
|
|
3233
|
-
const sizerStyle = window.getComputedStyle(
|
|
3234
|
-
const bibContent =
|
|
3235
|
-
|
|
3241
|
+
if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
|
|
3242
|
+
const sizerStyle = window.getComputedStyle(element.bibSizer);
|
|
3243
|
+
const bibContent = element.bib.shadowRoot.querySelector(".container");
|
|
3244
|
+
if (!bibContent) {
|
|
3245
|
+
return;
|
|
3246
|
+
}
|
|
3247
|
+
|
|
3236
3248
|
if (sizerStyle.width !== "0px") {
|
|
3237
3249
|
bibContent.style.width = sizerStyle.width;
|
|
3238
3250
|
}
|
|
@@ -3254,9 +3266,14 @@ class AuroFloatingUI {
|
|
|
3254
3266
|
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
3255
3267
|
*/
|
|
3256
3268
|
getPositioningStrategy() {
|
|
3269
|
+
const element = this.element;
|
|
3270
|
+
if (!element) {
|
|
3271
|
+
return "floating";
|
|
3272
|
+
}
|
|
3273
|
+
|
|
3257
3274
|
const breakpoint =
|
|
3258
|
-
|
|
3259
|
-
|
|
3275
|
+
element.bib?.mobileFullscreenBreakpoint ||
|
|
3276
|
+
element.floaterConfig?.fullscreenBreakpoint;
|
|
3260
3277
|
switch (this.behavior) {
|
|
3261
3278
|
case "tooltip":
|
|
3262
3279
|
return "floating";
|
|
@@ -3267,9 +3284,9 @@ class AuroFloatingUI {
|
|
|
3267
3284
|
`(max-width: ${breakpoint})`,
|
|
3268
3285
|
).matches;
|
|
3269
3286
|
|
|
3270
|
-
|
|
3287
|
+
element.expanded = smallerThanBreakpoint;
|
|
3271
3288
|
}
|
|
3272
|
-
if (
|
|
3289
|
+
if (element.nested) {
|
|
3273
3290
|
return "cover";
|
|
3274
3291
|
}
|
|
3275
3292
|
return "fullscreen";
|
|
@@ -3299,42 +3316,65 @@ class AuroFloatingUI {
|
|
|
3299
3316
|
* and applies the calculated position to the bib's style.
|
|
3300
3317
|
*/
|
|
3301
3318
|
position() {
|
|
3319
|
+
const element = this.element;
|
|
3320
|
+
if (!element) {
|
|
3321
|
+
return;
|
|
3322
|
+
}
|
|
3323
|
+
|
|
3302
3324
|
const strategy = this.getPositioningStrategy();
|
|
3303
3325
|
this.configureBibStrategy(strategy);
|
|
3304
3326
|
|
|
3305
3327
|
if (strategy === "floating") {
|
|
3328
|
+
if (!element.trigger || !element.bib) {
|
|
3329
|
+
return;
|
|
3330
|
+
}
|
|
3331
|
+
|
|
3306
3332
|
this.mirrorSize();
|
|
3307
3333
|
// Define the middlware for the floater configuration
|
|
3308
3334
|
const middleware = [
|
|
3309
|
-
offset(
|
|
3310
|
-
...(
|
|
3311
|
-
...(
|
|
3312
|
-
...(
|
|
3335
|
+
offset(element.floaterConfig?.offset || 0),
|
|
3336
|
+
...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
3337
|
+
...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
3338
|
+
...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
3313
3339
|
];
|
|
3314
3340
|
|
|
3315
3341
|
// Compute the position of the bib
|
|
3316
|
-
computePosition(
|
|
3317
|
-
strategy:
|
|
3318
|
-
placement:
|
|
3342
|
+
computePosition(element.trigger, element.bib, {
|
|
3343
|
+
strategy: element.floaterConfig?.strategy || "fixed",
|
|
3344
|
+
placement: element.floaterConfig?.placement,
|
|
3319
3345
|
middleware: middleware || [],
|
|
3320
3346
|
}).then(({ x, y }) => {
|
|
3321
3347
|
// eslint-disable-line id-length
|
|
3322
|
-
|
|
3348
|
+
const currentElement = this.element;
|
|
3349
|
+
if (!currentElement?.bib) {
|
|
3350
|
+
return;
|
|
3351
|
+
}
|
|
3352
|
+
|
|
3353
|
+
Object.assign(currentElement.bib.style, {
|
|
3323
3354
|
left: `${x}px`,
|
|
3324
3355
|
top: `${y}px`,
|
|
3325
3356
|
});
|
|
3326
3357
|
});
|
|
3327
3358
|
} else if (strategy === "cover") {
|
|
3359
|
+
if (!element.parentNode || !element.bib) {
|
|
3360
|
+
return;
|
|
3361
|
+
}
|
|
3362
|
+
|
|
3328
3363
|
// Compute the position of the bib
|
|
3329
|
-
computePosition(
|
|
3364
|
+
computePosition(element.parentNode, element.bib, {
|
|
3330
3365
|
placement: "bottom-start",
|
|
3331
3366
|
}).then(({ x, y }) => {
|
|
3332
3367
|
// eslint-disable-line id-length
|
|
3333
|
-
|
|
3368
|
+
const currentElement = this.element;
|
|
3369
|
+
if (!currentElement?.bib || !currentElement.parentNode) {
|
|
3370
|
+
return;
|
|
3371
|
+
}
|
|
3372
|
+
|
|
3373
|
+
Object.assign(currentElement.bib.style, {
|
|
3334
3374
|
left: `${x}px`,
|
|
3335
|
-
top: `${y -
|
|
3336
|
-
width: `${
|
|
3337
|
-
height: `${
|
|
3375
|
+
top: `${y - currentElement.parentNode.offsetHeight}px`,
|
|
3376
|
+
width: `${currentElement.parentNode.offsetWidth}px`,
|
|
3377
|
+
height: `${currentElement.parentNode.offsetHeight}px`,
|
|
3338
3378
|
});
|
|
3339
3379
|
});
|
|
3340
3380
|
}
|
|
@@ -3346,11 +3386,17 @@ class AuroFloatingUI {
|
|
|
3346
3386
|
* @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
|
|
3347
3387
|
*/
|
|
3348
3388
|
lockScroll(lock = true) {
|
|
3389
|
+
const element = this.element;
|
|
3390
|
+
|
|
3349
3391
|
if (lock) {
|
|
3392
|
+
if (!element?.bib) {
|
|
3393
|
+
return;
|
|
3394
|
+
}
|
|
3395
|
+
|
|
3350
3396
|
document.body.style.overflow = "hidden"; // hide body's scrollbar
|
|
3351
3397
|
|
|
3352
3398
|
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
3353
|
-
|
|
3399
|
+
element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
3354
3400
|
} else {
|
|
3355
3401
|
document.body.style.overflow = "";
|
|
3356
3402
|
}
|
|
@@ -3366,20 +3412,24 @@ class AuroFloatingUI {
|
|
|
3366
3412
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
3367
3413
|
*/
|
|
3368
3414
|
configureBibStrategy(value) {
|
|
3415
|
+
const element = this.element;
|
|
3416
|
+
if (!element?.bib) {
|
|
3417
|
+
return;
|
|
3418
|
+
}
|
|
3419
|
+
|
|
3369
3420
|
if (value === "fullscreen") {
|
|
3370
|
-
|
|
3421
|
+
element.isBibFullscreen = true;
|
|
3371
3422
|
// reset the prev position
|
|
3372
|
-
|
|
3373
|
-
|
|
3374
|
-
|
|
3375
|
-
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3423
|
+
element.bib.setAttribute("isfullscreen", "");
|
|
3424
|
+
element.bib.style.position = "fixed";
|
|
3425
|
+
element.bib.style.top = "0px";
|
|
3426
|
+
element.bib.style.left = "0px";
|
|
3427
|
+
element.bib.style.width = "";
|
|
3428
|
+
element.bib.style.height = "";
|
|
3429
|
+
element.style.contain = "";
|
|
3379
3430
|
|
|
3380
3431
|
// reset the size that was mirroring `size` css-part
|
|
3381
|
-
const bibContent =
|
|
3382
|
-
this.element.bib.shadowRoot.querySelector(".container");
|
|
3432
|
+
const bibContent = element.bib.shadowRoot?.querySelector(".container");
|
|
3383
3433
|
if (bibContent) {
|
|
3384
3434
|
bibContent.style.width = "";
|
|
3385
3435
|
bibContent.style.height = "";
|
|
@@ -3394,14 +3444,14 @@ class AuroFloatingUI {
|
|
|
3394
3444
|
}, 0);
|
|
3395
3445
|
}
|
|
3396
3446
|
|
|
3397
|
-
if (
|
|
3447
|
+
if (element.isPopoverVisible) {
|
|
3398
3448
|
this.lockScroll(true);
|
|
3399
3449
|
}
|
|
3400
3450
|
} else {
|
|
3401
|
-
|
|
3402
|
-
|
|
3403
|
-
|
|
3404
|
-
|
|
3451
|
+
element.bib.style.position = "";
|
|
3452
|
+
element.bib.removeAttribute("isfullscreen");
|
|
3453
|
+
element.isBibFullscreen = false;
|
|
3454
|
+
element.style.contain = "layout";
|
|
3405
3455
|
}
|
|
3406
3456
|
|
|
3407
3457
|
const isChanged = this.strategy && this.strategy !== value;
|
|
@@ -3419,16 +3469,21 @@ class AuroFloatingUI {
|
|
|
3419
3469
|
},
|
|
3420
3470
|
);
|
|
3421
3471
|
|
|
3422
|
-
|
|
3472
|
+
element.dispatchEvent(event);
|
|
3423
3473
|
}
|
|
3424
3474
|
}
|
|
3425
3475
|
|
|
3426
3476
|
updateState() {
|
|
3427
|
-
const
|
|
3477
|
+
const element = this.element;
|
|
3478
|
+
if (!element) {
|
|
3479
|
+
return;
|
|
3480
|
+
}
|
|
3481
|
+
|
|
3482
|
+
const isVisible = element.isPopoverVisible;
|
|
3428
3483
|
if (!isVisible) {
|
|
3429
3484
|
this.cleanupHideHandlers();
|
|
3430
3485
|
try {
|
|
3431
|
-
|
|
3486
|
+
element.cleanup?.();
|
|
3432
3487
|
} catch (error) {
|
|
3433
3488
|
// Do nothing
|
|
3434
3489
|
}
|
|
@@ -3444,28 +3499,30 @@ class AuroFloatingUI {
|
|
|
3444
3499
|
* If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
|
|
3445
3500
|
*/
|
|
3446
3501
|
handleFocusLoss() {
|
|
3502
|
+
const element = this.element;
|
|
3503
|
+
if (!element?.bib) {
|
|
3504
|
+
return;
|
|
3505
|
+
}
|
|
3506
|
+
|
|
3447
3507
|
// if mouse is being pressed, skip and let click event to handle the action
|
|
3448
3508
|
if (AuroFloatingUI.isMousePressed) {
|
|
3449
3509
|
return;
|
|
3450
3510
|
}
|
|
3451
3511
|
|
|
3452
3512
|
if (
|
|
3453
|
-
|
|
3454
|
-
|
|
3513
|
+
element.noHideOnThisFocusLoss ||
|
|
3514
|
+
element.hasAttribute("noHideOnThisFocusLoss")
|
|
3455
3515
|
) {
|
|
3456
3516
|
return;
|
|
3457
3517
|
}
|
|
3458
3518
|
|
|
3459
3519
|
// if focus is still inside of trigger or bib, do not close
|
|
3460
|
-
if (
|
|
3461
|
-
this.element.matches(":focus") ||
|
|
3462
|
-
this.element.matches(":focus-within")
|
|
3463
|
-
) {
|
|
3520
|
+
if (element.matches(":focus") || element.matches(":focus-within")) {
|
|
3464
3521
|
return;
|
|
3465
3522
|
}
|
|
3466
3523
|
|
|
3467
3524
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
3468
|
-
if (
|
|
3525
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
3469
3526
|
return;
|
|
3470
3527
|
}
|
|
3471
3528
|
|
|
@@ -3473,23 +3530,33 @@ class AuroFloatingUI {
|
|
|
3473
3530
|
}
|
|
3474
3531
|
|
|
3475
3532
|
setupHideHandlers() {
|
|
3533
|
+
const element = this.element;
|
|
3534
|
+
if (!element) {
|
|
3535
|
+
return;
|
|
3536
|
+
}
|
|
3537
|
+
|
|
3476
3538
|
// Define handlers & store references
|
|
3477
3539
|
this.focusHandler = () => this.handleFocusLoss();
|
|
3478
3540
|
|
|
3479
3541
|
this.clickHandler = (evt) => {
|
|
3542
|
+
const element = this.element;
|
|
3543
|
+
if (!element?.bib) {
|
|
3544
|
+
return;
|
|
3545
|
+
}
|
|
3546
|
+
|
|
3480
3547
|
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
3481
3548
|
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
3482
3549
|
// <dialog> may not include the bib in composedPath(), causing false
|
|
3483
3550
|
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
3484
|
-
if (
|
|
3551
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
3485
3552
|
return;
|
|
3486
3553
|
}
|
|
3487
3554
|
|
|
3488
3555
|
if (
|
|
3489
|
-
(!evt.composedPath().includes(
|
|
3490
|
-
!evt.composedPath().includes(
|
|
3491
|
-
(
|
|
3492
|
-
evt.composedPath().includes(
|
|
3556
|
+
(!evt.composedPath().includes(element.trigger) &&
|
|
3557
|
+
!evt.composedPath().includes(element.bib)) ||
|
|
3558
|
+
(element.bib.backdrop &&
|
|
3559
|
+
evt.composedPath().includes(element.bib.backdrop))
|
|
3493
3560
|
) {
|
|
3494
3561
|
const existedVisibleFloatingUI =
|
|
3495
3562
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -3510,7 +3577,12 @@ class AuroFloatingUI {
|
|
|
3510
3577
|
|
|
3511
3578
|
// ESC key handler
|
|
3512
3579
|
this.keyDownHandler = (evt) => {
|
|
3513
|
-
|
|
3580
|
+
const element = this.element;
|
|
3581
|
+
if (!element) {
|
|
3582
|
+
return;
|
|
3583
|
+
}
|
|
3584
|
+
|
|
3585
|
+
if (evt.key === "Escape" && element.isPopoverVisible) {
|
|
3514
3586
|
const existedVisibleFloatingUI =
|
|
3515
3587
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3516
3588
|
if (
|
|
@@ -3567,6 +3639,10 @@ class AuroFloatingUI {
|
|
|
3567
3639
|
}
|
|
3568
3640
|
|
|
3569
3641
|
updateCurrentExpandedDropdown() {
|
|
3642
|
+
if (!this.element) {
|
|
3643
|
+
return;
|
|
3644
|
+
}
|
|
3645
|
+
|
|
3570
3646
|
// Close any other dropdown that is already open
|
|
3571
3647
|
const existedVisibleFloatingUI =
|
|
3572
3648
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -3583,25 +3659,34 @@ class AuroFloatingUI {
|
|
|
3583
3659
|
}
|
|
3584
3660
|
|
|
3585
3661
|
showBib() {
|
|
3586
|
-
|
|
3662
|
+
const element = this.element;
|
|
3663
|
+
if (!element) {
|
|
3664
|
+
return;
|
|
3665
|
+
}
|
|
3666
|
+
|
|
3667
|
+
if (!element.bib || (!element.trigger && !element.parentNode)) {
|
|
3668
|
+
return;
|
|
3669
|
+
}
|
|
3670
|
+
|
|
3671
|
+
if (!element.disabled && !this.showing) {
|
|
3587
3672
|
this.updateCurrentExpandedDropdown();
|
|
3588
|
-
|
|
3673
|
+
element.triggerChevron?.setAttribute("data-expanded", true);
|
|
3589
3674
|
|
|
3590
3675
|
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
3591
3676
|
if (!this.showing) {
|
|
3592
|
-
if (!
|
|
3677
|
+
if (!element.modal) {
|
|
3593
3678
|
this.setupHideHandlers();
|
|
3594
3679
|
}
|
|
3595
3680
|
this.showing = true;
|
|
3596
|
-
|
|
3681
|
+
element.isPopoverVisible = true;
|
|
3597
3682
|
this.position();
|
|
3598
3683
|
this.dispatchEventDropdownToggle();
|
|
3599
3684
|
}
|
|
3600
3685
|
|
|
3601
3686
|
// Setup auto update to handle resize and scroll
|
|
3602
|
-
|
|
3603
|
-
|
|
3604
|
-
|
|
3687
|
+
element.cleanup = autoUpdate(
|
|
3688
|
+
element.trigger || element.parentNode,
|
|
3689
|
+
element.bib,
|
|
3605
3690
|
() => {
|
|
3606
3691
|
this.position();
|
|
3607
3692
|
},
|
|
@@ -3614,22 +3699,27 @@ class AuroFloatingUI {
|
|
|
3614
3699
|
* @param {String} eventType - The event type that triggered the hiding action.
|
|
3615
3700
|
*/
|
|
3616
3701
|
hideBib(eventType = "unknown") {
|
|
3617
|
-
|
|
3702
|
+
const element = this.element;
|
|
3703
|
+
if (!element) {
|
|
3704
|
+
return;
|
|
3705
|
+
}
|
|
3706
|
+
|
|
3707
|
+
if (element.disabled) {
|
|
3618
3708
|
return;
|
|
3619
3709
|
}
|
|
3620
3710
|
|
|
3621
3711
|
// noToggle dropdowns should not close when the trigger is clicked (the
|
|
3622
3712
|
// "toggle" behavior), but they CAN still close via other interactions like
|
|
3623
3713
|
// Escape key or focus loss.
|
|
3624
|
-
if (
|
|
3714
|
+
if (element.noToggle && eventType === "click") {
|
|
3625
3715
|
return;
|
|
3626
3716
|
}
|
|
3627
3717
|
|
|
3628
3718
|
this.lockScroll(false);
|
|
3629
|
-
|
|
3719
|
+
element.triggerChevron?.removeAttribute("data-expanded");
|
|
3630
3720
|
|
|
3631
|
-
if (
|
|
3632
|
-
|
|
3721
|
+
if (element.isPopoverVisible) {
|
|
3722
|
+
element.isPopoverVisible = false;
|
|
3633
3723
|
}
|
|
3634
3724
|
if (this.showing) {
|
|
3635
3725
|
this.cleanupHideHandlers();
|
|
@@ -3649,6 +3739,11 @@ class AuroFloatingUI {
|
|
|
3649
3739
|
* @param {String} eventType - The event type that triggered the toggle action.
|
|
3650
3740
|
*/
|
|
3651
3741
|
dispatchEventDropdownToggle(eventType) {
|
|
3742
|
+
const element = this.element;
|
|
3743
|
+
if (!element) {
|
|
3744
|
+
return;
|
|
3745
|
+
}
|
|
3746
|
+
|
|
3652
3747
|
const event = new CustomEvent(
|
|
3653
3748
|
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
3654
3749
|
{
|
|
@@ -3660,11 +3755,16 @@ class AuroFloatingUI {
|
|
|
3660
3755
|
},
|
|
3661
3756
|
);
|
|
3662
3757
|
|
|
3663
|
-
|
|
3758
|
+
element.dispatchEvent(event);
|
|
3664
3759
|
}
|
|
3665
3760
|
|
|
3666
3761
|
handleClick() {
|
|
3667
|
-
|
|
3762
|
+
const element = this.element;
|
|
3763
|
+
if (!element) {
|
|
3764
|
+
return;
|
|
3765
|
+
}
|
|
3766
|
+
|
|
3767
|
+
if (element.isPopoverVisible) {
|
|
3668
3768
|
this.hideBib("click");
|
|
3669
3769
|
} else {
|
|
3670
3770
|
this.showBib();
|
|
@@ -3675,63 +3775,66 @@ class AuroFloatingUI {
|
|
|
3675
3775
|
{
|
|
3676
3776
|
composed: true,
|
|
3677
3777
|
detail: {
|
|
3678
|
-
expanded:
|
|
3778
|
+
expanded: element.isPopoverVisible,
|
|
3679
3779
|
},
|
|
3680
3780
|
},
|
|
3681
3781
|
);
|
|
3682
3782
|
|
|
3683
|
-
|
|
3783
|
+
element.dispatchEvent(event);
|
|
3684
3784
|
}
|
|
3685
3785
|
|
|
3686
3786
|
handleEvent(event) {
|
|
3687
|
-
|
|
3688
|
-
|
|
3689
|
-
|
|
3690
|
-
|
|
3691
|
-
|
|
3692
|
-
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
|
|
3696
|
-
|
|
3697
|
-
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
case "mouseenter":
|
|
3704
|
-
if (this.element.hoverToggle) {
|
|
3705
|
-
this.showBib();
|
|
3706
|
-
}
|
|
3707
|
-
break;
|
|
3708
|
-
case "mouseleave":
|
|
3709
|
-
if (this.element.hoverToggle) {
|
|
3710
|
-
this.hideBib("mouseleave");
|
|
3711
|
-
}
|
|
3712
|
-
break;
|
|
3713
|
-
case "focus":
|
|
3714
|
-
if (this.element.focusShow) {
|
|
3715
|
-
/*
|
|
3716
|
-
This needs to better handle clicking that gives focus -
|
|
3717
|
-
currently it shows and then immediately hides the bib
|
|
3718
|
-
*/
|
|
3719
|
-
this.showBib();
|
|
3720
|
-
}
|
|
3721
|
-
break;
|
|
3722
|
-
case "blur":
|
|
3723
|
-
// send this task 100ms later queue to
|
|
3724
|
-
// wait a frame in case focus moves within the floating element/bib
|
|
3725
|
-
setTimeout(() => this.handleFocusLoss(), 0);
|
|
3726
|
-
break;
|
|
3727
|
-
case "click":
|
|
3728
|
-
if (document.activeElement === document.body) {
|
|
3729
|
-
event.currentTarget.focus();
|
|
3730
|
-
}
|
|
3787
|
+
const element = this.element;
|
|
3788
|
+
if (!element || element.disableEventShow) {
|
|
3789
|
+
return;
|
|
3790
|
+
}
|
|
3791
|
+
|
|
3792
|
+
switch (event.type) {
|
|
3793
|
+
case "keydown": {
|
|
3794
|
+
// Support both Enter and Space keys for accessibility
|
|
3795
|
+
// Space is included as it's expected behavior for interactive elements
|
|
3796
|
+
|
|
3797
|
+
const origin = event.composedPath()[0];
|
|
3798
|
+
if (
|
|
3799
|
+
event.key === "Enter" ||
|
|
3800
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
3801
|
+
) {
|
|
3802
|
+
event.preventDefault();
|
|
3731
3803
|
this.handleClick();
|
|
3732
|
-
|
|
3733
|
-
|
|
3804
|
+
}
|
|
3805
|
+
break;
|
|
3734
3806
|
}
|
|
3807
|
+
case "mouseenter":
|
|
3808
|
+
if (element.hoverToggle) {
|
|
3809
|
+
this.showBib();
|
|
3810
|
+
}
|
|
3811
|
+
break;
|
|
3812
|
+
case "mouseleave":
|
|
3813
|
+
if (element.hoverToggle) {
|
|
3814
|
+
this.hideBib("mouseleave");
|
|
3815
|
+
}
|
|
3816
|
+
break;
|
|
3817
|
+
case "focus":
|
|
3818
|
+
if (element.focusShow) {
|
|
3819
|
+
/*
|
|
3820
|
+
This needs to better handle clicking that gives focus -
|
|
3821
|
+
currently it shows and then immediately hides the bib
|
|
3822
|
+
*/
|
|
3823
|
+
this.showBib();
|
|
3824
|
+
}
|
|
3825
|
+
break;
|
|
3826
|
+
case "blur":
|
|
3827
|
+
// send this task 100ms later queue to
|
|
3828
|
+
// wait a frame in case focus moves within the floating element/bib
|
|
3829
|
+
setTimeout(() => this.handleFocusLoss(), 0);
|
|
3830
|
+
break;
|
|
3831
|
+
case "click":
|
|
3832
|
+
if (document.activeElement === document.body) {
|
|
3833
|
+
event.currentTarget.focus();
|
|
3834
|
+
}
|
|
3835
|
+
this.handleClick();
|
|
3836
|
+
break;
|
|
3837
|
+
// Do nothing
|
|
3735
3838
|
}
|
|
3736
3839
|
}
|
|
3737
3840
|
|
|
@@ -3742,6 +3845,11 @@ class AuroFloatingUI {
|
|
|
3742
3845
|
* This prevents the component itself from being focusable when the trigger element already handles focus.
|
|
3743
3846
|
*/
|
|
3744
3847
|
handleTriggerTabIndex() {
|
|
3848
|
+
const element = this.element;
|
|
3849
|
+
if (!element) {
|
|
3850
|
+
return;
|
|
3851
|
+
}
|
|
3852
|
+
|
|
3745
3853
|
const focusableElementSelectors = [
|
|
3746
3854
|
"a",
|
|
3747
3855
|
"button",
|
|
@@ -3754,7 +3862,7 @@ class AuroFloatingUI {
|
|
|
3754
3862
|
"auro-hyperlink",
|
|
3755
3863
|
];
|
|
3756
3864
|
|
|
3757
|
-
const triggerNode =
|
|
3865
|
+
const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
|
|
3758
3866
|
if (!triggerNode) {
|
|
3759
3867
|
return;
|
|
3760
3868
|
}
|
|
@@ -3763,13 +3871,13 @@ class AuroFloatingUI {
|
|
|
3763
3871
|
focusableElementSelectors.forEach((selector) => {
|
|
3764
3872
|
// Check if the trigger node element is focusable
|
|
3765
3873
|
if (triggerNodeTagName === selector) {
|
|
3766
|
-
|
|
3874
|
+
element.tabIndex = -1;
|
|
3767
3875
|
return;
|
|
3768
3876
|
}
|
|
3769
3877
|
|
|
3770
3878
|
// Check if any child is focusable
|
|
3771
3879
|
if (triggerNode.querySelector(selector)) {
|
|
3772
|
-
|
|
3880
|
+
element.tabIndex = -1;
|
|
3773
3881
|
}
|
|
3774
3882
|
});
|
|
3775
3883
|
}
|
|
@@ -3779,13 +3887,18 @@ class AuroFloatingUI {
|
|
|
3779
3887
|
* @param {*} eventPrefix
|
|
3780
3888
|
*/
|
|
3781
3889
|
regenerateBibId() {
|
|
3782
|
-
|
|
3890
|
+
const element = this.element;
|
|
3891
|
+
if (!element) {
|
|
3892
|
+
return;
|
|
3893
|
+
}
|
|
3894
|
+
|
|
3895
|
+
this.id = element.getAttribute("id");
|
|
3783
3896
|
if (!this.id) {
|
|
3784
3897
|
this.id = window.crypto.randomUUID();
|
|
3785
|
-
|
|
3898
|
+
element.setAttribute("id", this.id);
|
|
3786
3899
|
}
|
|
3787
3900
|
|
|
3788
|
-
|
|
3901
|
+
element.bib?.setAttribute("id", `${this.id}-floater-bib`);
|
|
3789
3902
|
}
|
|
3790
3903
|
|
|
3791
3904
|
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
@@ -3797,67 +3910,69 @@ class AuroFloatingUI {
|
|
|
3797
3910
|
this.element = elem;
|
|
3798
3911
|
}
|
|
3799
3912
|
|
|
3800
|
-
|
|
3801
|
-
|
|
3913
|
+
const element = this.element;
|
|
3914
|
+
if (!element) {
|
|
3915
|
+
return;
|
|
3916
|
+
}
|
|
3917
|
+
|
|
3918
|
+
if (this.behavior !== element.behavior) {
|
|
3919
|
+
this.behavior = element.behavior;
|
|
3802
3920
|
}
|
|
3803
3921
|
|
|
3804
|
-
if (
|
|
3922
|
+
if (element.trigger) {
|
|
3805
3923
|
this.disconnect();
|
|
3806
3924
|
}
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
|
|
3812
|
-
|
|
3813
|
-
|
|
3814
|
-
|
|
3815
|
-
this.element.shadowRoot.querySelector("#showStateIcon");
|
|
3925
|
+
element.trigger =
|
|
3926
|
+
element.triggerElement ||
|
|
3927
|
+
element.shadowRoot?.querySelector("#trigger") ||
|
|
3928
|
+
element.trigger;
|
|
3929
|
+
element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
|
|
3930
|
+
element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
|
|
3931
|
+
element.triggerChevron =
|
|
3932
|
+
element.shadowRoot?.querySelector("#showStateIcon");
|
|
3816
3933
|
|
|
3817
|
-
if (
|
|
3818
|
-
|
|
3934
|
+
if (element.floaterConfig) {
|
|
3935
|
+
element.hoverToggle = element.floaterConfig.hoverToggle;
|
|
3819
3936
|
}
|
|
3820
3937
|
|
|
3821
3938
|
this.regenerateBibId();
|
|
3822
3939
|
this.handleTriggerTabIndex();
|
|
3823
3940
|
|
|
3824
3941
|
this.handleEvent = this.handleEvent.bind(this);
|
|
3825
|
-
if (
|
|
3942
|
+
if (element.trigger) {
|
|
3826
3943
|
if (this.enableKeyboardHandling) {
|
|
3827
|
-
|
|
3944
|
+
element.trigger.addEventListener("keydown", this.handleEvent);
|
|
3828
3945
|
}
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
|
|
3946
|
+
element.trigger.addEventListener("click", this.handleEvent);
|
|
3947
|
+
element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
3948
|
+
element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
3949
|
+
element.trigger.addEventListener("focus", this.handleEvent);
|
|
3950
|
+
element.trigger.addEventListener("blur", this.handleEvent);
|
|
3834
3951
|
}
|
|
3835
3952
|
}
|
|
3836
3953
|
|
|
3837
3954
|
disconnect() {
|
|
3838
3955
|
this.cleanupHideHandlers();
|
|
3839
|
-
if (this.element) {
|
|
3840
|
-
this.element.cleanup?.();
|
|
3841
3956
|
|
|
3842
|
-
|
|
3843
|
-
|
|
3844
|
-
|
|
3957
|
+
const element = this.element;
|
|
3958
|
+
if (!element) {
|
|
3959
|
+
return;
|
|
3960
|
+
}
|
|
3845
3961
|
|
|
3846
|
-
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
|
|
3856
|
-
|
|
3857
|
-
|
|
3858
|
-
|
|
3859
|
-
|
|
3860
|
-
}
|
|
3962
|
+
element.cleanup?.();
|
|
3963
|
+
|
|
3964
|
+
if (element.bib && element.shadowRoot) {
|
|
3965
|
+
element.shadowRoot.append(element.bib);
|
|
3966
|
+
}
|
|
3967
|
+
|
|
3968
|
+
// Remove event & keyboard listeners
|
|
3969
|
+
if (element.trigger) {
|
|
3970
|
+
element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
3971
|
+
element.trigger.removeEventListener("click", this.handleEvent);
|
|
3972
|
+
element.trigger.removeEventListener("mouseenter", this.handleEvent);
|
|
3973
|
+
element.trigger.removeEventListener("mouseleave", this.handleEvent);
|
|
3974
|
+
element.trigger.removeEventListener("focus", this.handleEvent);
|
|
3975
|
+
element.trigger.removeEventListener("blur", this.handleEvent);
|
|
3861
3976
|
}
|
|
3862
3977
|
}
|
|
3863
3978
|
}
|
|
@@ -4985,7 +5100,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
4985
5100
|
}
|
|
4986
5101
|
};
|
|
4987
5102
|
|
|
4988
|
-
var formkitVersion$1 = '
|
|
5103
|
+
var formkitVersion$1 = '202604091759';
|
|
4989
5104
|
|
|
4990
5105
|
class AuroElement extends LitElement {
|
|
4991
5106
|
static get properties() {
|
|
@@ -5091,7 +5206,7 @@ class AuroElement extends LitElement {
|
|
|
5091
5206
|
}
|
|
5092
5207
|
}
|
|
5093
5208
|
|
|
5094
|
-
// Copyright (c) 2026 Alaska Airlines. All
|
|
5209
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
5095
5210
|
// See LICENSE in the project root for license information.
|
|
5096
5211
|
|
|
5097
5212
|
|
|
@@ -6730,13 +6845,13 @@ class AuroHelpText extends LitElement {
|
|
|
6730
6845
|
}
|
|
6731
6846
|
}
|
|
6732
6847
|
|
|
6733
|
-
var formkitVersion = '
|
|
6848
|
+
var formkitVersion = '202604091759';
|
|
6734
6849
|
|
|
6735
6850
|
var styleCss = css`.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}`;
|
|
6736
6851
|
|
|
6737
6852
|
var emphasizedColorCss = css`:host([layout=emphasized]) [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown]:hover{--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}:host([layout=emphasized]) [auro-dropdown][layout*=emphasized]::part(wrapper){--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-dropdown-emphasized-background, rgba(0, 39, 74, 0.1019607843))}`;
|
|
6738
6853
|
|
|
6739
|
-
// Copyright (c) 2026 Alaska Airlines. All
|
|
6854
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
6740
6855
|
// See LICENSE in the project root for license information.
|
|
6741
6856
|
|
|
6742
6857
|
|
|
@@ -7531,6 +7646,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7531
7646
|
this.scrollActiveOptionIntoView();
|
|
7532
7647
|
}
|
|
7533
7648
|
});
|
|
7649
|
+
|
|
7534
7650
|
this.menu.addEventListener('auroMenu-selectedOption', (event) => {
|
|
7535
7651
|
|
|
7536
7652
|
// Update the displayed value
|
|
@@ -7544,6 +7660,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7544
7660
|
|
|
7545
7661
|
if (this.dropdown.isPopoverVisible && !this.multiSelect) {
|
|
7546
7662
|
this.dropdown.hide();
|
|
7663
|
+
this.dropdown.trigger.focus();
|
|
7547
7664
|
}
|
|
7548
7665
|
|
|
7549
7666
|
// Announce the selection after the dropdown closes so it isn't
|
|
@@ -7805,9 +7922,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7805
7922
|
if (!this.multiSelect) {
|
|
7806
7923
|
this.hideBib();
|
|
7807
7924
|
}
|
|
7808
|
-
if (this.dropdown && this.dropdown.trigger) {
|
|
7809
|
-
this.dropdown.trigger.focus();
|
|
7810
|
-
}
|
|
7811
7925
|
|
|
7812
7926
|
// LEGACY EVENT
|
|
7813
7927
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|