@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
|
@@ -1333,6 +1333,10 @@ const selectKeyboardStrategy = {
|
|
|
1333
1333
|
if (!ctx.isExpanded) {
|
|
1334
1334
|
return;
|
|
1335
1335
|
}
|
|
1336
|
+
|
|
1337
|
+
// Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
|
|
1338
|
+
evt.stopPropagation();
|
|
1339
|
+
|
|
1336
1340
|
component.dropdown.hide();
|
|
1337
1341
|
},
|
|
1338
1342
|
|
|
@@ -3295,11 +3299,19 @@ class AuroFloatingUI {
|
|
|
3295
3299
|
* This ensures that the bib content has the same dimensions as the sizer element.
|
|
3296
3300
|
*/
|
|
3297
3301
|
mirrorSize() {
|
|
3302
|
+
const element = this.element;
|
|
3303
|
+
if (!element) {
|
|
3304
|
+
return;
|
|
3305
|
+
}
|
|
3306
|
+
|
|
3298
3307
|
// mirror the boxsize from bibSizer
|
|
3299
|
-
if (
|
|
3300
|
-
const sizerStyle = window.getComputedStyle(
|
|
3301
|
-
const bibContent =
|
|
3302
|
-
|
|
3308
|
+
if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
|
|
3309
|
+
const sizerStyle = window.getComputedStyle(element.bibSizer);
|
|
3310
|
+
const bibContent = element.bib.shadowRoot.querySelector(".container");
|
|
3311
|
+
if (!bibContent) {
|
|
3312
|
+
return;
|
|
3313
|
+
}
|
|
3314
|
+
|
|
3303
3315
|
if (sizerStyle.width !== "0px") {
|
|
3304
3316
|
bibContent.style.width = sizerStyle.width;
|
|
3305
3317
|
}
|
|
@@ -3321,9 +3333,14 @@ class AuroFloatingUI {
|
|
|
3321
3333
|
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
3322
3334
|
*/
|
|
3323
3335
|
getPositioningStrategy() {
|
|
3336
|
+
const element = this.element;
|
|
3337
|
+
if (!element) {
|
|
3338
|
+
return "floating";
|
|
3339
|
+
}
|
|
3340
|
+
|
|
3324
3341
|
const breakpoint =
|
|
3325
|
-
|
|
3326
|
-
|
|
3342
|
+
element.bib?.mobileFullscreenBreakpoint ||
|
|
3343
|
+
element.floaterConfig?.fullscreenBreakpoint;
|
|
3327
3344
|
switch (this.behavior) {
|
|
3328
3345
|
case "tooltip":
|
|
3329
3346
|
return "floating";
|
|
@@ -3334,9 +3351,9 @@ class AuroFloatingUI {
|
|
|
3334
3351
|
`(max-width: ${breakpoint})`,
|
|
3335
3352
|
).matches;
|
|
3336
3353
|
|
|
3337
|
-
|
|
3354
|
+
element.expanded = smallerThanBreakpoint;
|
|
3338
3355
|
}
|
|
3339
|
-
if (
|
|
3356
|
+
if (element.nested) {
|
|
3340
3357
|
return "cover";
|
|
3341
3358
|
}
|
|
3342
3359
|
return "fullscreen";
|
|
@@ -3366,42 +3383,65 @@ class AuroFloatingUI {
|
|
|
3366
3383
|
* and applies the calculated position to the bib's style.
|
|
3367
3384
|
*/
|
|
3368
3385
|
position() {
|
|
3386
|
+
const element = this.element;
|
|
3387
|
+
if (!element) {
|
|
3388
|
+
return;
|
|
3389
|
+
}
|
|
3390
|
+
|
|
3369
3391
|
const strategy = this.getPositioningStrategy();
|
|
3370
3392
|
this.configureBibStrategy(strategy);
|
|
3371
3393
|
|
|
3372
3394
|
if (strategy === "floating") {
|
|
3395
|
+
if (!element.trigger || !element.bib) {
|
|
3396
|
+
return;
|
|
3397
|
+
}
|
|
3398
|
+
|
|
3373
3399
|
this.mirrorSize();
|
|
3374
3400
|
// Define the middlware for the floater configuration
|
|
3375
3401
|
const middleware = [
|
|
3376
|
-
offset(
|
|
3377
|
-
...(
|
|
3378
|
-
...(
|
|
3379
|
-
...(
|
|
3402
|
+
offset(element.floaterConfig?.offset || 0),
|
|
3403
|
+
...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
3404
|
+
...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
3405
|
+
...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
3380
3406
|
];
|
|
3381
3407
|
|
|
3382
3408
|
// Compute the position of the bib
|
|
3383
|
-
computePosition(
|
|
3384
|
-
strategy:
|
|
3385
|
-
placement:
|
|
3409
|
+
computePosition(element.trigger, element.bib, {
|
|
3410
|
+
strategy: element.floaterConfig?.strategy || "fixed",
|
|
3411
|
+
placement: element.floaterConfig?.placement,
|
|
3386
3412
|
middleware: middleware || [],
|
|
3387
3413
|
}).then(({ x, y }) => {
|
|
3388
3414
|
// eslint-disable-line id-length
|
|
3389
|
-
|
|
3415
|
+
const currentElement = this.element;
|
|
3416
|
+
if (!currentElement?.bib) {
|
|
3417
|
+
return;
|
|
3418
|
+
}
|
|
3419
|
+
|
|
3420
|
+
Object.assign(currentElement.bib.style, {
|
|
3390
3421
|
left: `${x}px`,
|
|
3391
3422
|
top: `${y}px`,
|
|
3392
3423
|
});
|
|
3393
3424
|
});
|
|
3394
3425
|
} else if (strategy === "cover") {
|
|
3426
|
+
if (!element.parentNode || !element.bib) {
|
|
3427
|
+
return;
|
|
3428
|
+
}
|
|
3429
|
+
|
|
3395
3430
|
// Compute the position of the bib
|
|
3396
|
-
computePosition(
|
|
3431
|
+
computePosition(element.parentNode, element.bib, {
|
|
3397
3432
|
placement: "bottom-start",
|
|
3398
3433
|
}).then(({ x, y }) => {
|
|
3399
3434
|
// eslint-disable-line id-length
|
|
3400
|
-
|
|
3435
|
+
const currentElement = this.element;
|
|
3436
|
+
if (!currentElement?.bib || !currentElement.parentNode) {
|
|
3437
|
+
return;
|
|
3438
|
+
}
|
|
3439
|
+
|
|
3440
|
+
Object.assign(currentElement.bib.style, {
|
|
3401
3441
|
left: `${x}px`,
|
|
3402
|
-
top: `${y -
|
|
3403
|
-
width: `${
|
|
3404
|
-
height: `${
|
|
3442
|
+
top: `${y - currentElement.parentNode.offsetHeight}px`,
|
|
3443
|
+
width: `${currentElement.parentNode.offsetWidth}px`,
|
|
3444
|
+
height: `${currentElement.parentNode.offsetHeight}px`,
|
|
3405
3445
|
});
|
|
3406
3446
|
});
|
|
3407
3447
|
}
|
|
@@ -3413,11 +3453,17 @@ class AuroFloatingUI {
|
|
|
3413
3453
|
* @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
|
|
3414
3454
|
*/
|
|
3415
3455
|
lockScroll(lock = true) {
|
|
3456
|
+
const element = this.element;
|
|
3457
|
+
|
|
3416
3458
|
if (lock) {
|
|
3459
|
+
if (!element?.bib) {
|
|
3460
|
+
return;
|
|
3461
|
+
}
|
|
3462
|
+
|
|
3417
3463
|
document.body.style.overflow = "hidden"; // hide body's scrollbar
|
|
3418
3464
|
|
|
3419
3465
|
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
3420
|
-
|
|
3466
|
+
element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
3421
3467
|
} else {
|
|
3422
3468
|
document.body.style.overflow = "";
|
|
3423
3469
|
}
|
|
@@ -3433,20 +3479,24 @@ class AuroFloatingUI {
|
|
|
3433
3479
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
3434
3480
|
*/
|
|
3435
3481
|
configureBibStrategy(value) {
|
|
3482
|
+
const element = this.element;
|
|
3483
|
+
if (!element?.bib) {
|
|
3484
|
+
return;
|
|
3485
|
+
}
|
|
3486
|
+
|
|
3436
3487
|
if (value === "fullscreen") {
|
|
3437
|
-
|
|
3488
|
+
element.isBibFullscreen = true;
|
|
3438
3489
|
// reset the prev position
|
|
3439
|
-
|
|
3440
|
-
|
|
3441
|
-
|
|
3442
|
-
|
|
3443
|
-
|
|
3444
|
-
|
|
3445
|
-
|
|
3490
|
+
element.bib.setAttribute("isfullscreen", "");
|
|
3491
|
+
element.bib.style.position = "fixed";
|
|
3492
|
+
element.bib.style.top = "0px";
|
|
3493
|
+
element.bib.style.left = "0px";
|
|
3494
|
+
element.bib.style.width = "";
|
|
3495
|
+
element.bib.style.height = "";
|
|
3496
|
+
element.style.contain = "";
|
|
3446
3497
|
|
|
3447
3498
|
// reset the size that was mirroring `size` css-part
|
|
3448
|
-
const bibContent =
|
|
3449
|
-
this.element.bib.shadowRoot.querySelector(".container");
|
|
3499
|
+
const bibContent = element.bib.shadowRoot?.querySelector(".container");
|
|
3450
3500
|
if (bibContent) {
|
|
3451
3501
|
bibContent.style.width = "";
|
|
3452
3502
|
bibContent.style.height = "";
|
|
@@ -3461,14 +3511,14 @@ class AuroFloatingUI {
|
|
|
3461
3511
|
}, 0);
|
|
3462
3512
|
}
|
|
3463
3513
|
|
|
3464
|
-
if (
|
|
3514
|
+
if (element.isPopoverVisible) {
|
|
3465
3515
|
this.lockScroll(true);
|
|
3466
3516
|
}
|
|
3467
3517
|
} else {
|
|
3468
|
-
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
|
|
3518
|
+
element.bib.style.position = "";
|
|
3519
|
+
element.bib.removeAttribute("isfullscreen");
|
|
3520
|
+
element.isBibFullscreen = false;
|
|
3521
|
+
element.style.contain = "layout";
|
|
3472
3522
|
}
|
|
3473
3523
|
|
|
3474
3524
|
const isChanged = this.strategy && this.strategy !== value;
|
|
@@ -3486,16 +3536,21 @@ class AuroFloatingUI {
|
|
|
3486
3536
|
},
|
|
3487
3537
|
);
|
|
3488
3538
|
|
|
3489
|
-
|
|
3539
|
+
element.dispatchEvent(event);
|
|
3490
3540
|
}
|
|
3491
3541
|
}
|
|
3492
3542
|
|
|
3493
3543
|
updateState() {
|
|
3494
|
-
const
|
|
3544
|
+
const element = this.element;
|
|
3545
|
+
if (!element) {
|
|
3546
|
+
return;
|
|
3547
|
+
}
|
|
3548
|
+
|
|
3549
|
+
const isVisible = element.isPopoverVisible;
|
|
3495
3550
|
if (!isVisible) {
|
|
3496
3551
|
this.cleanupHideHandlers();
|
|
3497
3552
|
try {
|
|
3498
|
-
|
|
3553
|
+
element.cleanup?.();
|
|
3499
3554
|
} catch (error) {
|
|
3500
3555
|
// Do nothing
|
|
3501
3556
|
}
|
|
@@ -3511,28 +3566,30 @@ class AuroFloatingUI {
|
|
|
3511
3566
|
* If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
|
|
3512
3567
|
*/
|
|
3513
3568
|
handleFocusLoss() {
|
|
3569
|
+
const element = this.element;
|
|
3570
|
+
if (!element?.bib) {
|
|
3571
|
+
return;
|
|
3572
|
+
}
|
|
3573
|
+
|
|
3514
3574
|
// if mouse is being pressed, skip and let click event to handle the action
|
|
3515
3575
|
if (AuroFloatingUI.isMousePressed) {
|
|
3516
3576
|
return;
|
|
3517
3577
|
}
|
|
3518
3578
|
|
|
3519
3579
|
if (
|
|
3520
|
-
|
|
3521
|
-
|
|
3580
|
+
element.noHideOnThisFocusLoss ||
|
|
3581
|
+
element.hasAttribute("noHideOnThisFocusLoss")
|
|
3522
3582
|
) {
|
|
3523
3583
|
return;
|
|
3524
3584
|
}
|
|
3525
3585
|
|
|
3526
3586
|
// if focus is still inside of trigger or bib, do not close
|
|
3527
|
-
if (
|
|
3528
|
-
this.element.matches(":focus") ||
|
|
3529
|
-
this.element.matches(":focus-within")
|
|
3530
|
-
) {
|
|
3587
|
+
if (element.matches(":focus") || element.matches(":focus-within")) {
|
|
3531
3588
|
return;
|
|
3532
3589
|
}
|
|
3533
3590
|
|
|
3534
3591
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
3535
|
-
if (
|
|
3592
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
3536
3593
|
return;
|
|
3537
3594
|
}
|
|
3538
3595
|
|
|
@@ -3540,23 +3597,33 @@ class AuroFloatingUI {
|
|
|
3540
3597
|
}
|
|
3541
3598
|
|
|
3542
3599
|
setupHideHandlers() {
|
|
3600
|
+
const element = this.element;
|
|
3601
|
+
if (!element) {
|
|
3602
|
+
return;
|
|
3603
|
+
}
|
|
3604
|
+
|
|
3543
3605
|
// Define handlers & store references
|
|
3544
3606
|
this.focusHandler = () => this.handleFocusLoss();
|
|
3545
3607
|
|
|
3546
3608
|
this.clickHandler = (evt) => {
|
|
3609
|
+
const element = this.element;
|
|
3610
|
+
if (!element?.bib) {
|
|
3611
|
+
return;
|
|
3612
|
+
}
|
|
3613
|
+
|
|
3547
3614
|
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
3548
3615
|
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
3549
3616
|
// <dialog> may not include the bib in composedPath(), causing false
|
|
3550
3617
|
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
3551
|
-
if (
|
|
3618
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
3552
3619
|
return;
|
|
3553
3620
|
}
|
|
3554
3621
|
|
|
3555
3622
|
if (
|
|
3556
|
-
(!evt.composedPath().includes(
|
|
3557
|
-
!evt.composedPath().includes(
|
|
3558
|
-
(
|
|
3559
|
-
evt.composedPath().includes(
|
|
3623
|
+
(!evt.composedPath().includes(element.trigger) &&
|
|
3624
|
+
!evt.composedPath().includes(element.bib)) ||
|
|
3625
|
+
(element.bib.backdrop &&
|
|
3626
|
+
evt.composedPath().includes(element.bib.backdrop))
|
|
3560
3627
|
) {
|
|
3561
3628
|
const existedVisibleFloatingUI =
|
|
3562
3629
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -3577,7 +3644,12 @@ class AuroFloatingUI {
|
|
|
3577
3644
|
|
|
3578
3645
|
// ESC key handler
|
|
3579
3646
|
this.keyDownHandler = (evt) => {
|
|
3580
|
-
|
|
3647
|
+
const element = this.element;
|
|
3648
|
+
if (!element) {
|
|
3649
|
+
return;
|
|
3650
|
+
}
|
|
3651
|
+
|
|
3652
|
+
if (evt.key === "Escape" && element.isPopoverVisible) {
|
|
3581
3653
|
const existedVisibleFloatingUI =
|
|
3582
3654
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3583
3655
|
if (
|
|
@@ -3634,6 +3706,10 @@ class AuroFloatingUI {
|
|
|
3634
3706
|
}
|
|
3635
3707
|
|
|
3636
3708
|
updateCurrentExpandedDropdown() {
|
|
3709
|
+
if (!this.element) {
|
|
3710
|
+
return;
|
|
3711
|
+
}
|
|
3712
|
+
|
|
3637
3713
|
// Close any other dropdown that is already open
|
|
3638
3714
|
const existedVisibleFloatingUI =
|
|
3639
3715
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -3650,25 +3726,34 @@ class AuroFloatingUI {
|
|
|
3650
3726
|
}
|
|
3651
3727
|
|
|
3652
3728
|
showBib() {
|
|
3653
|
-
|
|
3729
|
+
const element = this.element;
|
|
3730
|
+
if (!element) {
|
|
3731
|
+
return;
|
|
3732
|
+
}
|
|
3733
|
+
|
|
3734
|
+
if (!element.bib || (!element.trigger && !element.parentNode)) {
|
|
3735
|
+
return;
|
|
3736
|
+
}
|
|
3737
|
+
|
|
3738
|
+
if (!element.disabled && !this.showing) {
|
|
3654
3739
|
this.updateCurrentExpandedDropdown();
|
|
3655
|
-
|
|
3740
|
+
element.triggerChevron?.setAttribute("data-expanded", true);
|
|
3656
3741
|
|
|
3657
3742
|
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
3658
3743
|
if (!this.showing) {
|
|
3659
|
-
if (!
|
|
3744
|
+
if (!element.modal) {
|
|
3660
3745
|
this.setupHideHandlers();
|
|
3661
3746
|
}
|
|
3662
3747
|
this.showing = true;
|
|
3663
|
-
|
|
3748
|
+
element.isPopoverVisible = true;
|
|
3664
3749
|
this.position();
|
|
3665
3750
|
this.dispatchEventDropdownToggle();
|
|
3666
3751
|
}
|
|
3667
3752
|
|
|
3668
3753
|
// Setup auto update to handle resize and scroll
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3754
|
+
element.cleanup = autoUpdate(
|
|
3755
|
+
element.trigger || element.parentNode,
|
|
3756
|
+
element.bib,
|
|
3672
3757
|
() => {
|
|
3673
3758
|
this.position();
|
|
3674
3759
|
},
|
|
@@ -3681,22 +3766,27 @@ class AuroFloatingUI {
|
|
|
3681
3766
|
* @param {String} eventType - The event type that triggered the hiding action.
|
|
3682
3767
|
*/
|
|
3683
3768
|
hideBib(eventType = "unknown") {
|
|
3684
|
-
|
|
3769
|
+
const element = this.element;
|
|
3770
|
+
if (!element) {
|
|
3771
|
+
return;
|
|
3772
|
+
}
|
|
3773
|
+
|
|
3774
|
+
if (element.disabled) {
|
|
3685
3775
|
return;
|
|
3686
3776
|
}
|
|
3687
3777
|
|
|
3688
3778
|
// noToggle dropdowns should not close when the trigger is clicked (the
|
|
3689
3779
|
// "toggle" behavior), but they CAN still close via other interactions like
|
|
3690
3780
|
// Escape key or focus loss.
|
|
3691
|
-
if (
|
|
3781
|
+
if (element.noToggle && eventType === "click") {
|
|
3692
3782
|
return;
|
|
3693
3783
|
}
|
|
3694
3784
|
|
|
3695
3785
|
this.lockScroll(false);
|
|
3696
|
-
|
|
3786
|
+
element.triggerChevron?.removeAttribute("data-expanded");
|
|
3697
3787
|
|
|
3698
|
-
if (
|
|
3699
|
-
|
|
3788
|
+
if (element.isPopoverVisible) {
|
|
3789
|
+
element.isPopoverVisible = false;
|
|
3700
3790
|
}
|
|
3701
3791
|
if (this.showing) {
|
|
3702
3792
|
this.cleanupHideHandlers();
|
|
@@ -3716,6 +3806,11 @@ class AuroFloatingUI {
|
|
|
3716
3806
|
* @param {String} eventType - The event type that triggered the toggle action.
|
|
3717
3807
|
*/
|
|
3718
3808
|
dispatchEventDropdownToggle(eventType) {
|
|
3809
|
+
const element = this.element;
|
|
3810
|
+
if (!element) {
|
|
3811
|
+
return;
|
|
3812
|
+
}
|
|
3813
|
+
|
|
3719
3814
|
const event = new CustomEvent(
|
|
3720
3815
|
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
3721
3816
|
{
|
|
@@ -3727,11 +3822,16 @@ class AuroFloatingUI {
|
|
|
3727
3822
|
},
|
|
3728
3823
|
);
|
|
3729
3824
|
|
|
3730
|
-
|
|
3825
|
+
element.dispatchEvent(event);
|
|
3731
3826
|
}
|
|
3732
3827
|
|
|
3733
3828
|
handleClick() {
|
|
3734
|
-
|
|
3829
|
+
const element = this.element;
|
|
3830
|
+
if (!element) {
|
|
3831
|
+
return;
|
|
3832
|
+
}
|
|
3833
|
+
|
|
3834
|
+
if (element.isPopoverVisible) {
|
|
3735
3835
|
this.hideBib("click");
|
|
3736
3836
|
} else {
|
|
3737
3837
|
this.showBib();
|
|
@@ -3742,63 +3842,66 @@ class AuroFloatingUI {
|
|
|
3742
3842
|
{
|
|
3743
3843
|
composed: true,
|
|
3744
3844
|
detail: {
|
|
3745
|
-
expanded:
|
|
3845
|
+
expanded: element.isPopoverVisible,
|
|
3746
3846
|
},
|
|
3747
3847
|
},
|
|
3748
3848
|
);
|
|
3749
3849
|
|
|
3750
|
-
|
|
3850
|
+
element.dispatchEvent(event);
|
|
3751
3851
|
}
|
|
3752
3852
|
|
|
3753
3853
|
handleEvent(event) {
|
|
3754
|
-
|
|
3755
|
-
|
|
3756
|
-
|
|
3757
|
-
|
|
3758
|
-
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
case "mouseenter":
|
|
3771
|
-
if (this.element.hoverToggle) {
|
|
3772
|
-
this.showBib();
|
|
3773
|
-
}
|
|
3774
|
-
break;
|
|
3775
|
-
case "mouseleave":
|
|
3776
|
-
if (this.element.hoverToggle) {
|
|
3777
|
-
this.hideBib("mouseleave");
|
|
3778
|
-
}
|
|
3779
|
-
break;
|
|
3780
|
-
case "focus":
|
|
3781
|
-
if (this.element.focusShow) {
|
|
3782
|
-
/*
|
|
3783
|
-
This needs to better handle clicking that gives focus -
|
|
3784
|
-
currently it shows and then immediately hides the bib
|
|
3785
|
-
*/
|
|
3786
|
-
this.showBib();
|
|
3787
|
-
}
|
|
3788
|
-
break;
|
|
3789
|
-
case "blur":
|
|
3790
|
-
// send this task 100ms later queue to
|
|
3791
|
-
// wait a frame in case focus moves within the floating element/bib
|
|
3792
|
-
setTimeout(() => this.handleFocusLoss(), 0);
|
|
3793
|
-
break;
|
|
3794
|
-
case "click":
|
|
3795
|
-
if (document.activeElement === document.body) {
|
|
3796
|
-
event.currentTarget.focus();
|
|
3797
|
-
}
|
|
3854
|
+
const element = this.element;
|
|
3855
|
+
if (!element || element.disableEventShow) {
|
|
3856
|
+
return;
|
|
3857
|
+
}
|
|
3858
|
+
|
|
3859
|
+
switch (event.type) {
|
|
3860
|
+
case "keydown": {
|
|
3861
|
+
// Support both Enter and Space keys for accessibility
|
|
3862
|
+
// Space is included as it's expected behavior for interactive elements
|
|
3863
|
+
|
|
3864
|
+
const origin = event.composedPath()[0];
|
|
3865
|
+
if (
|
|
3866
|
+
event.key === "Enter" ||
|
|
3867
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
3868
|
+
) {
|
|
3869
|
+
event.preventDefault();
|
|
3798
3870
|
this.handleClick();
|
|
3799
|
-
|
|
3800
|
-
|
|
3871
|
+
}
|
|
3872
|
+
break;
|
|
3801
3873
|
}
|
|
3874
|
+
case "mouseenter":
|
|
3875
|
+
if (element.hoverToggle) {
|
|
3876
|
+
this.showBib();
|
|
3877
|
+
}
|
|
3878
|
+
break;
|
|
3879
|
+
case "mouseleave":
|
|
3880
|
+
if (element.hoverToggle) {
|
|
3881
|
+
this.hideBib("mouseleave");
|
|
3882
|
+
}
|
|
3883
|
+
break;
|
|
3884
|
+
case "focus":
|
|
3885
|
+
if (element.focusShow) {
|
|
3886
|
+
/*
|
|
3887
|
+
This needs to better handle clicking that gives focus -
|
|
3888
|
+
currently it shows and then immediately hides the bib
|
|
3889
|
+
*/
|
|
3890
|
+
this.showBib();
|
|
3891
|
+
}
|
|
3892
|
+
break;
|
|
3893
|
+
case "blur":
|
|
3894
|
+
// send this task 100ms later queue to
|
|
3895
|
+
// wait a frame in case focus moves within the floating element/bib
|
|
3896
|
+
setTimeout(() => this.handleFocusLoss(), 0);
|
|
3897
|
+
break;
|
|
3898
|
+
case "click":
|
|
3899
|
+
if (document.activeElement === document.body) {
|
|
3900
|
+
event.currentTarget.focus();
|
|
3901
|
+
}
|
|
3902
|
+
this.handleClick();
|
|
3903
|
+
break;
|
|
3904
|
+
// Do nothing
|
|
3802
3905
|
}
|
|
3803
3906
|
}
|
|
3804
3907
|
|
|
@@ -3809,6 +3912,11 @@ class AuroFloatingUI {
|
|
|
3809
3912
|
* This prevents the component itself from being focusable when the trigger element already handles focus.
|
|
3810
3913
|
*/
|
|
3811
3914
|
handleTriggerTabIndex() {
|
|
3915
|
+
const element = this.element;
|
|
3916
|
+
if (!element) {
|
|
3917
|
+
return;
|
|
3918
|
+
}
|
|
3919
|
+
|
|
3812
3920
|
const focusableElementSelectors = [
|
|
3813
3921
|
"a",
|
|
3814
3922
|
"button",
|
|
@@ -3821,7 +3929,7 @@ class AuroFloatingUI {
|
|
|
3821
3929
|
"auro-hyperlink",
|
|
3822
3930
|
];
|
|
3823
3931
|
|
|
3824
|
-
const triggerNode =
|
|
3932
|
+
const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
|
|
3825
3933
|
if (!triggerNode) {
|
|
3826
3934
|
return;
|
|
3827
3935
|
}
|
|
@@ -3830,13 +3938,13 @@ class AuroFloatingUI {
|
|
|
3830
3938
|
focusableElementSelectors.forEach((selector) => {
|
|
3831
3939
|
// Check if the trigger node element is focusable
|
|
3832
3940
|
if (triggerNodeTagName === selector) {
|
|
3833
|
-
|
|
3941
|
+
element.tabIndex = -1;
|
|
3834
3942
|
return;
|
|
3835
3943
|
}
|
|
3836
3944
|
|
|
3837
3945
|
// Check if any child is focusable
|
|
3838
3946
|
if (triggerNode.querySelector(selector)) {
|
|
3839
|
-
|
|
3947
|
+
element.tabIndex = -1;
|
|
3840
3948
|
}
|
|
3841
3949
|
});
|
|
3842
3950
|
}
|
|
@@ -3846,13 +3954,18 @@ class AuroFloatingUI {
|
|
|
3846
3954
|
* @param {*} eventPrefix
|
|
3847
3955
|
*/
|
|
3848
3956
|
regenerateBibId() {
|
|
3849
|
-
|
|
3957
|
+
const element = this.element;
|
|
3958
|
+
if (!element) {
|
|
3959
|
+
return;
|
|
3960
|
+
}
|
|
3961
|
+
|
|
3962
|
+
this.id = element.getAttribute("id");
|
|
3850
3963
|
if (!this.id) {
|
|
3851
3964
|
this.id = window.crypto.randomUUID();
|
|
3852
|
-
|
|
3965
|
+
element.setAttribute("id", this.id);
|
|
3853
3966
|
}
|
|
3854
3967
|
|
|
3855
|
-
|
|
3968
|
+
element.bib?.setAttribute("id", `${this.id}-floater-bib`);
|
|
3856
3969
|
}
|
|
3857
3970
|
|
|
3858
3971
|
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
@@ -3864,67 +3977,69 @@ class AuroFloatingUI {
|
|
|
3864
3977
|
this.element = elem;
|
|
3865
3978
|
}
|
|
3866
3979
|
|
|
3867
|
-
|
|
3868
|
-
|
|
3980
|
+
const element = this.element;
|
|
3981
|
+
if (!element) {
|
|
3982
|
+
return;
|
|
3983
|
+
}
|
|
3984
|
+
|
|
3985
|
+
if (this.behavior !== element.behavior) {
|
|
3986
|
+
this.behavior = element.behavior;
|
|
3869
3987
|
}
|
|
3870
3988
|
|
|
3871
|
-
if (
|
|
3989
|
+
if (element.trigger) {
|
|
3872
3990
|
this.disconnect();
|
|
3873
3991
|
}
|
|
3874
|
-
|
|
3875
|
-
|
|
3876
|
-
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
|
|
3881
|
-
|
|
3882
|
-
this.element.shadowRoot.querySelector("#showStateIcon");
|
|
3992
|
+
element.trigger =
|
|
3993
|
+
element.triggerElement ||
|
|
3994
|
+
element.shadowRoot?.querySelector("#trigger") ||
|
|
3995
|
+
element.trigger;
|
|
3996
|
+
element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
|
|
3997
|
+
element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
|
|
3998
|
+
element.triggerChevron =
|
|
3999
|
+
element.shadowRoot?.querySelector("#showStateIcon");
|
|
3883
4000
|
|
|
3884
|
-
if (
|
|
3885
|
-
|
|
4001
|
+
if (element.floaterConfig) {
|
|
4002
|
+
element.hoverToggle = element.floaterConfig.hoverToggle;
|
|
3886
4003
|
}
|
|
3887
4004
|
|
|
3888
4005
|
this.regenerateBibId();
|
|
3889
4006
|
this.handleTriggerTabIndex();
|
|
3890
4007
|
|
|
3891
4008
|
this.handleEvent = this.handleEvent.bind(this);
|
|
3892
|
-
if (
|
|
4009
|
+
if (element.trigger) {
|
|
3893
4010
|
if (this.enableKeyboardHandling) {
|
|
3894
|
-
|
|
4011
|
+
element.trigger.addEventListener("keydown", this.handleEvent);
|
|
3895
4012
|
}
|
|
3896
|
-
|
|
3897
|
-
|
|
3898
|
-
|
|
3899
|
-
|
|
3900
|
-
|
|
4013
|
+
element.trigger.addEventListener("click", this.handleEvent);
|
|
4014
|
+
element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
4015
|
+
element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
4016
|
+
element.trigger.addEventListener("focus", this.handleEvent);
|
|
4017
|
+
element.trigger.addEventListener("blur", this.handleEvent);
|
|
3901
4018
|
}
|
|
3902
4019
|
}
|
|
3903
4020
|
|
|
3904
4021
|
disconnect() {
|
|
3905
4022
|
this.cleanupHideHandlers();
|
|
3906
|
-
if (this.element) {
|
|
3907
|
-
this.element.cleanup?.();
|
|
3908
4023
|
|
|
3909
|
-
|
|
3910
|
-
|
|
3911
|
-
|
|
4024
|
+
const element = this.element;
|
|
4025
|
+
if (!element) {
|
|
4026
|
+
return;
|
|
4027
|
+
}
|
|
3912
4028
|
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
|
|
3917
|
-
|
|
3918
|
-
|
|
3919
|
-
|
|
3920
|
-
|
|
3921
|
-
|
|
3922
|
-
|
|
3923
|
-
|
|
3924
|
-
|
|
3925
|
-
|
|
3926
|
-
|
|
3927
|
-
}
|
|
4029
|
+
element.cleanup?.();
|
|
4030
|
+
|
|
4031
|
+
if (element.bib && element.shadowRoot) {
|
|
4032
|
+
element.shadowRoot.append(element.bib);
|
|
4033
|
+
}
|
|
4034
|
+
|
|
4035
|
+
// Remove event & keyboard listeners
|
|
4036
|
+
if (element.trigger) {
|
|
4037
|
+
element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
4038
|
+
element.trigger.removeEventListener("click", this.handleEvent);
|
|
4039
|
+
element.trigger.removeEventListener("mouseenter", this.handleEvent);
|
|
4040
|
+
element.trigger.removeEventListener("mouseleave", this.handleEvent);
|
|
4041
|
+
element.trigger.removeEventListener("focus", this.handleEvent);
|
|
4042
|
+
element.trigger.removeEventListener("blur", this.handleEvent);
|
|
3928
4043
|
}
|
|
3929
4044
|
}
|
|
3930
4045
|
}
|
|
@@ -5052,7 +5167,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
5052
5167
|
}
|
|
5053
5168
|
};
|
|
5054
5169
|
|
|
5055
|
-
var formkitVersion$1 = '
|
|
5170
|
+
var formkitVersion$1 = '202604091759';
|
|
5056
5171
|
|
|
5057
5172
|
class AuroElement extends i$3 {
|
|
5058
5173
|
static get properties() {
|
|
@@ -5158,7 +5273,7 @@ class AuroElement extends i$3 {
|
|
|
5158
5273
|
}
|
|
5159
5274
|
}
|
|
5160
5275
|
|
|
5161
|
-
// Copyright (c) 2026 Alaska Airlines. All
|
|
5276
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
5162
5277
|
// See LICENSE in the project root for license information.
|
|
5163
5278
|
|
|
5164
5279
|
|
|
@@ -6797,13 +6912,13 @@ class AuroHelpText extends i$3 {
|
|
|
6797
6912
|
}
|
|
6798
6913
|
}
|
|
6799
6914
|
|
|
6800
|
-
var formkitVersion = '
|
|
6915
|
+
var formkitVersion = '202604091759';
|
|
6801
6916
|
|
|
6802
6917
|
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}`;
|
|
6803
6918
|
|
|
6804
6919
|
var emphasizedColorCss = i$6`: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))}`;
|
|
6805
6920
|
|
|
6806
|
-
// Copyright (c) 2026 Alaska Airlines. All
|
|
6921
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
6807
6922
|
// See LICENSE in the project root for license information.
|
|
6808
6923
|
|
|
6809
6924
|
|
|
@@ -7598,6 +7713,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7598
7713
|
this.scrollActiveOptionIntoView();
|
|
7599
7714
|
}
|
|
7600
7715
|
});
|
|
7716
|
+
|
|
7601
7717
|
this.menu.addEventListener('auroMenu-selectedOption', (event) => {
|
|
7602
7718
|
|
|
7603
7719
|
// Update the displayed value
|
|
@@ -7611,6 +7727,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7611
7727
|
|
|
7612
7728
|
if (this.dropdown.isPopoverVisible && !this.multiSelect) {
|
|
7613
7729
|
this.dropdown.hide();
|
|
7730
|
+
this.dropdown.trigger.focus();
|
|
7614
7731
|
}
|
|
7615
7732
|
|
|
7616
7733
|
// Announce the selection after the dropdown closes so it isn't
|
|
@@ -7872,9 +7989,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7872
7989
|
if (!this.multiSelect) {
|
|
7873
7990
|
this.hideBib();
|
|
7874
7991
|
}
|
|
7875
|
-
if (this.dropdown && this.dropdown.trigger) {
|
|
7876
|
-
this.dropdown.trigger.focus();
|
|
7877
|
-
}
|
|
7878
7992
|
|
|
7879
7993
|
// LEGACY EVENT
|
|
7880
7994
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|
|
@@ -8479,6 +8593,7 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
8479
8593
|
this.selected = false;
|
|
8480
8594
|
this.noCheckmark = false;
|
|
8481
8595
|
this.disabled = false;
|
|
8596
|
+
this.noMatch = false;
|
|
8482
8597
|
|
|
8483
8598
|
/**
|
|
8484
8599
|
* @private
|
|
@@ -8554,6 +8669,15 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
8554
8669
|
reflect: true
|
|
8555
8670
|
},
|
|
8556
8671
|
|
|
8672
|
+
/**
|
|
8673
|
+
* When true, marks this option as the "no matching results" placeholder shown by combobox when the user's input does not match any available options. Enables distinct styling and prevents the option from being treated as a selectable match.
|
|
8674
|
+
*/
|
|
8675
|
+
noMatch: {
|
|
8676
|
+
type: Boolean,
|
|
8677
|
+
reflect: true,
|
|
8678
|
+
attribute: 'nomatch'
|
|
8679
|
+
},
|
|
8680
|
+
|
|
8557
8681
|
/**
|
|
8558
8682
|
* Specifies that an option is selected.
|
|
8559
8683
|
*/
|