@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.
Files changed (62) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/README.md +133 -183
  3. package/components/checkbox/demo/api.min.js +3 -3
  4. package/components/checkbox/demo/index.min.js +3 -3
  5. package/components/checkbox/dist/index.js +3 -3
  6. package/components/checkbox/dist/registered.js +3 -3
  7. package/components/combobox/demo/api.html +1 -0
  8. package/components/combobox/demo/api.js +3 -1
  9. package/components/combobox/demo/api.md +75 -0
  10. package/components/combobox/demo/api.min.js +314 -172
  11. package/components/combobox/demo/index.min.js +301 -171
  12. package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +1 -1
  13. package/components/combobox/dist/index.js +291 -171
  14. package/components/combobox/dist/registered.js +291 -171
  15. package/components/counter/demo/api.html +3 -0
  16. package/components/counter/demo/api.js +4 -0
  17. package/components/counter/demo/api.md +130 -0
  18. package/components/counter/demo/api.min.js +320 -167
  19. package/components/counter/demo/index.min.js +300 -167
  20. package/components/counter/dist/counterGroupKeyboardStrategy.d.ts +3 -0
  21. package/components/counter/dist/index.js +300 -167
  22. package/components/counter/dist/registered.js +300 -167
  23. package/components/datepicker/demo/api.html +1 -0
  24. package/components/datepicker/demo/api.js +2 -0
  25. package/components/datepicker/demo/api.md +57 -0
  26. package/components/datepicker/demo/api.min.js +376 -171
  27. package/components/datepicker/demo/index.min.js +364 -171
  28. package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +3 -1
  29. package/components/datepicker/dist/index.js +364 -171
  30. package/components/datepicker/dist/registered.js +364 -171
  31. package/components/dropdown/demo/api.html +1 -0
  32. package/components/dropdown/demo/api.js +2 -0
  33. package/components/dropdown/demo/api.md +95 -0
  34. package/components/dropdown/demo/api.min.js +296 -165
  35. package/components/dropdown/demo/index.min.js +276 -165
  36. package/components/dropdown/dist/index.js +276 -165
  37. package/components/dropdown/dist/registered.js +276 -165
  38. package/components/form/demo/api.min.js +1254 -684
  39. package/components/form/demo/index.min.js +1254 -684
  40. package/components/input/demo/api.min.js +1 -1
  41. package/components/input/demo/index.min.js +1 -1
  42. package/components/input/dist/index.js +1 -1
  43. package/components/input/dist/registered.js +1 -1
  44. package/components/menu/demo/api.md +1 -0
  45. package/components/menu/demo/api.min.js +10 -0
  46. package/components/menu/demo/index.min.js +10 -0
  47. package/components/menu/dist/auro-menuoption.d.ts +9 -0
  48. package/components/menu/dist/index.js +10 -0
  49. package/components/menu/dist/registered.js +10 -0
  50. package/components/radio/demo/api.min.js +2 -2
  51. package/components/radio/demo/index.min.js +2 -2
  52. package/components/radio/dist/index.js +2 -2
  53. package/components/radio/dist/registered.js +2 -2
  54. package/components/select/demo/api.html +1 -0
  55. package/components/select/demo/api.js +2 -0
  56. package/components/select/demo/api.md +76 -0
  57. package/components/select/demo/api.min.js +306 -169
  58. package/components/select/demo/index.min.js +293 -169
  59. package/components/select/dist/index.js +283 -169
  60. package/components/select/dist/registered.js +283 -169
  61. package/custom-elements.json +48 -3
  62. package/package.json +5 -3
@@ -1301,10 +1301,19 @@ const comboboxKeyboardStrategy = {
1301
1301
  }
1302
1302
  },
1303
1303
 
1304
- Escape(component, _evt, ctx) {
1305
- if (ctx.isExpanded && ctx.isModal) {
1304
+ Escape(component, evt, ctx) {
1305
+ if (!ctx.isExpanded) {
1306
+ return;
1307
+ }
1308
+
1309
+ // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups
1310
+ evt.stopPropagation();
1311
+
1312
+ if (ctx.isModal) {
1306
1313
  component.setTriggerInputFocus();
1307
1314
  }
1315
+
1316
+ component.hideBib();
1308
1317
  },
1309
1318
 
1310
1319
  Home(component, evt, ctx) {
@@ -3168,11 +3177,19 @@ class AuroFloatingUI {
3168
3177
  * This ensures that the bib content has the same dimensions as the sizer element.
3169
3178
  */
3170
3179
  mirrorSize() {
3180
+ const element = this.element;
3181
+ if (!element) {
3182
+ return;
3183
+ }
3184
+
3171
3185
  // mirror the boxsize from bibSizer
3172
- if (this.element.bibSizer && this.element.matchWidth) {
3173
- const sizerStyle = window.getComputedStyle(this.element.bibSizer);
3174
- const bibContent =
3175
- this.element.bib.shadowRoot.querySelector(".container");
3186
+ if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
3187
+ const sizerStyle = window.getComputedStyle(element.bibSizer);
3188
+ const bibContent = element.bib.shadowRoot.querySelector(".container");
3189
+ if (!bibContent) {
3190
+ return;
3191
+ }
3192
+
3176
3193
  if (sizerStyle.width !== "0px") {
3177
3194
  bibContent.style.width = sizerStyle.width;
3178
3195
  }
@@ -3194,9 +3211,14 @@ class AuroFloatingUI {
3194
3211
  * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
3195
3212
  */
3196
3213
  getPositioningStrategy() {
3214
+ const element = this.element;
3215
+ if (!element) {
3216
+ return "floating";
3217
+ }
3218
+
3197
3219
  const breakpoint =
3198
- this.element.bib.mobileFullscreenBreakpoint ||
3199
- this.element.floaterConfig?.fullscreenBreakpoint;
3220
+ element.bib?.mobileFullscreenBreakpoint ||
3221
+ element.floaterConfig?.fullscreenBreakpoint;
3200
3222
  switch (this.behavior) {
3201
3223
  case "tooltip":
3202
3224
  return "floating";
@@ -3207,9 +3229,9 @@ class AuroFloatingUI {
3207
3229
  `(max-width: ${breakpoint})`,
3208
3230
  ).matches;
3209
3231
 
3210
- this.element.expanded = smallerThanBreakpoint;
3232
+ element.expanded = smallerThanBreakpoint;
3211
3233
  }
3212
- if (this.element.nested) {
3234
+ if (element.nested) {
3213
3235
  return "cover";
3214
3236
  }
3215
3237
  return "fullscreen";
@@ -3239,42 +3261,65 @@ class AuroFloatingUI {
3239
3261
  * and applies the calculated position to the bib's style.
3240
3262
  */
3241
3263
  position() {
3264
+ const element = this.element;
3265
+ if (!element) {
3266
+ return;
3267
+ }
3268
+
3242
3269
  const strategy = this.getPositioningStrategy();
3243
3270
  this.configureBibStrategy(strategy);
3244
3271
 
3245
3272
  if (strategy === "floating") {
3273
+ if (!element.trigger || !element.bib) {
3274
+ return;
3275
+ }
3276
+
3246
3277
  this.mirrorSize();
3247
3278
  // Define the middlware for the floater configuration
3248
3279
  const middleware = [
3249
- offset(this.element.floaterConfig?.offset || 0),
3250
- ...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
3251
- ...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
3252
- ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
3280
+ offset(element.floaterConfig?.offset || 0),
3281
+ ...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
3282
+ ...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
3283
+ ...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
3253
3284
  ];
3254
3285
 
3255
3286
  // Compute the position of the bib
3256
- computePosition(this.element.trigger, this.element.bib, {
3257
- strategy: this.element.floaterConfig?.strategy || "fixed",
3258
- placement: this.element.floaterConfig?.placement,
3287
+ computePosition(element.trigger, element.bib, {
3288
+ strategy: element.floaterConfig?.strategy || "fixed",
3289
+ placement: element.floaterConfig?.placement,
3259
3290
  middleware: middleware || [],
3260
3291
  }).then(({ x, y }) => {
3261
3292
  // eslint-disable-line id-length
3262
- Object.assign(this.element.bib.style, {
3293
+ const currentElement = this.element;
3294
+ if (!currentElement?.bib) {
3295
+ return;
3296
+ }
3297
+
3298
+ Object.assign(currentElement.bib.style, {
3263
3299
  left: `${x}px`,
3264
3300
  top: `${y}px`,
3265
3301
  });
3266
3302
  });
3267
3303
  } else if (strategy === "cover") {
3304
+ if (!element.parentNode || !element.bib) {
3305
+ return;
3306
+ }
3307
+
3268
3308
  // Compute the position of the bib
3269
- computePosition(this.element.parentNode, this.element.bib, {
3309
+ computePosition(element.parentNode, element.bib, {
3270
3310
  placement: "bottom-start",
3271
3311
  }).then(({ x, y }) => {
3272
3312
  // eslint-disable-line id-length
3273
- Object.assign(this.element.bib.style, {
3313
+ const currentElement = this.element;
3314
+ if (!currentElement?.bib || !currentElement.parentNode) {
3315
+ return;
3316
+ }
3317
+
3318
+ Object.assign(currentElement.bib.style, {
3274
3319
  left: `${x}px`,
3275
- top: `${y - this.element.parentNode.offsetHeight}px`,
3276
- width: `${this.element.parentNode.offsetWidth}px`,
3277
- height: `${this.element.parentNode.offsetHeight}px`,
3320
+ top: `${y - currentElement.parentNode.offsetHeight}px`,
3321
+ width: `${currentElement.parentNode.offsetWidth}px`,
3322
+ height: `${currentElement.parentNode.offsetHeight}px`,
3278
3323
  });
3279
3324
  });
3280
3325
  }
@@ -3286,11 +3331,17 @@ class AuroFloatingUI {
3286
3331
  * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
3287
3332
  */
3288
3333
  lockScroll(lock = true) {
3334
+ const element = this.element;
3335
+
3289
3336
  if (lock) {
3337
+ if (!element?.bib) {
3338
+ return;
3339
+ }
3340
+
3290
3341
  document.body.style.overflow = "hidden"; // hide body's scrollbar
3291
3342
 
3292
3343
  // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
3293
- this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
3344
+ element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
3294
3345
  } else {
3295
3346
  document.body.style.overflow = "";
3296
3347
  }
@@ -3306,20 +3357,24 @@ class AuroFloatingUI {
3306
3357
  * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
3307
3358
  */
3308
3359
  configureBibStrategy(value) {
3360
+ const element = this.element;
3361
+ if (!element?.bib) {
3362
+ return;
3363
+ }
3364
+
3309
3365
  if (value === "fullscreen") {
3310
- this.element.isBibFullscreen = true;
3366
+ element.isBibFullscreen = true;
3311
3367
  // reset the prev position
3312
- this.element.bib.setAttribute("isfullscreen", "");
3313
- this.element.bib.style.position = "fixed";
3314
- this.element.bib.style.top = "0px";
3315
- this.element.bib.style.left = "0px";
3316
- this.element.bib.style.width = "";
3317
- this.element.bib.style.height = "";
3318
- this.element.style.contain = "";
3368
+ element.bib.setAttribute("isfullscreen", "");
3369
+ element.bib.style.position = "fixed";
3370
+ element.bib.style.top = "0px";
3371
+ element.bib.style.left = "0px";
3372
+ element.bib.style.width = "";
3373
+ element.bib.style.height = "";
3374
+ element.style.contain = "";
3319
3375
 
3320
3376
  // reset the size that was mirroring `size` css-part
3321
- const bibContent =
3322
- this.element.bib.shadowRoot.querySelector(".container");
3377
+ const bibContent = element.bib.shadowRoot?.querySelector(".container");
3323
3378
  if (bibContent) {
3324
3379
  bibContent.style.width = "";
3325
3380
  bibContent.style.height = "";
@@ -3334,14 +3389,14 @@ class AuroFloatingUI {
3334
3389
  }, 0);
3335
3390
  }
3336
3391
 
3337
- if (this.element.isPopoverVisible) {
3392
+ if (element.isPopoverVisible) {
3338
3393
  this.lockScroll(true);
3339
3394
  }
3340
3395
  } else {
3341
- this.element.bib.style.position = "";
3342
- this.element.bib.removeAttribute("isfullscreen");
3343
- this.element.isBibFullscreen = false;
3344
- this.element.style.contain = "layout";
3396
+ element.bib.style.position = "";
3397
+ element.bib.removeAttribute("isfullscreen");
3398
+ element.isBibFullscreen = false;
3399
+ element.style.contain = "layout";
3345
3400
  }
3346
3401
 
3347
3402
  const isChanged = this.strategy && this.strategy !== value;
@@ -3359,16 +3414,21 @@ class AuroFloatingUI {
3359
3414
  },
3360
3415
  );
3361
3416
 
3362
- this.element.dispatchEvent(event);
3417
+ element.dispatchEvent(event);
3363
3418
  }
3364
3419
  }
3365
3420
 
3366
3421
  updateState() {
3367
- const isVisible = this.element.isPopoverVisible;
3422
+ const element = this.element;
3423
+ if (!element) {
3424
+ return;
3425
+ }
3426
+
3427
+ const isVisible = element.isPopoverVisible;
3368
3428
  if (!isVisible) {
3369
3429
  this.cleanupHideHandlers();
3370
3430
  try {
3371
- this.element.cleanup?.();
3431
+ element.cleanup?.();
3372
3432
  } catch (error) {
3373
3433
  // Do nothing
3374
3434
  }
@@ -3384,28 +3444,30 @@ class AuroFloatingUI {
3384
3444
  * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
3385
3445
  */
3386
3446
  handleFocusLoss() {
3447
+ const element = this.element;
3448
+ if (!element?.bib) {
3449
+ return;
3450
+ }
3451
+
3387
3452
  // if mouse is being pressed, skip and let click event to handle the action
3388
3453
  if (AuroFloatingUI.isMousePressed) {
3389
3454
  return;
3390
3455
  }
3391
3456
 
3392
3457
  if (
3393
- this.element.noHideOnThisFocusLoss ||
3394
- this.element.hasAttribute("noHideOnThisFocusLoss")
3458
+ element.noHideOnThisFocusLoss ||
3459
+ element.hasAttribute("noHideOnThisFocusLoss")
3395
3460
  ) {
3396
3461
  return;
3397
3462
  }
3398
3463
 
3399
3464
  // if focus is still inside of trigger or bib, do not close
3400
- if (
3401
- this.element.matches(":focus") ||
3402
- this.element.matches(":focus-within")
3403
- ) {
3465
+ if (element.matches(":focus") || element.matches(":focus-within")) {
3404
3466
  return;
3405
3467
  }
3406
3468
 
3407
3469
  // if fullscreen bib is in fullscreen mode, do not close
3408
- if (this.element.bib.hasAttribute("isfullscreen")) {
3470
+ if (element.bib.hasAttribute("isfullscreen")) {
3409
3471
  return;
3410
3472
  }
3411
3473
 
@@ -3413,23 +3475,33 @@ class AuroFloatingUI {
3413
3475
  }
3414
3476
 
3415
3477
  setupHideHandlers() {
3478
+ const element = this.element;
3479
+ if (!element) {
3480
+ return;
3481
+ }
3482
+
3416
3483
  // Define handlers & store references
3417
3484
  this.focusHandler = () => this.handleFocusLoss();
3418
3485
 
3419
3486
  this.clickHandler = (evt) => {
3487
+ const element = this.element;
3488
+ if (!element?.bib) {
3489
+ return;
3490
+ }
3491
+
3420
3492
  // When the bib is fullscreen (modal dialog), don't close on outside
3421
3493
  // clicks. VoiceOver's synthetic click events inside a top-layer modal
3422
3494
  // <dialog> may not include the bib in composedPath(), causing false
3423
3495
  // positives. This mirrors the fullscreen guard in handleFocusLoss().
3424
- if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
3496
+ if (element.bib.hasAttribute("isfullscreen")) {
3425
3497
  return;
3426
3498
  }
3427
3499
 
3428
3500
  if (
3429
- (!evt.composedPath().includes(this.element.trigger) &&
3430
- !evt.composedPath().includes(this.element.bib)) ||
3431
- (this.element.bib.backdrop &&
3432
- evt.composedPath().includes(this.element.bib.backdrop))
3501
+ (!evt.composedPath().includes(element.trigger) &&
3502
+ !evt.composedPath().includes(element.bib)) ||
3503
+ (element.bib.backdrop &&
3504
+ evt.composedPath().includes(element.bib.backdrop))
3433
3505
  ) {
3434
3506
  const existedVisibleFloatingUI =
3435
3507
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -3450,7 +3522,12 @@ class AuroFloatingUI {
3450
3522
 
3451
3523
  // ESC key handler
3452
3524
  this.keyDownHandler = (evt) => {
3453
- if (evt.key === "Escape" && this.element.isPopoverVisible) {
3525
+ const element = this.element;
3526
+ if (!element) {
3527
+ return;
3528
+ }
3529
+
3530
+ if (evt.key === "Escape" && element.isPopoverVisible) {
3454
3531
  const existedVisibleFloatingUI =
3455
3532
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
3456
3533
  if (
@@ -3507,6 +3584,10 @@ class AuroFloatingUI {
3507
3584
  }
3508
3585
 
3509
3586
  updateCurrentExpandedDropdown() {
3587
+ if (!this.element) {
3588
+ return;
3589
+ }
3590
+
3510
3591
  // Close any other dropdown that is already open
3511
3592
  const existedVisibleFloatingUI =
3512
3593
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -3523,25 +3604,34 @@ class AuroFloatingUI {
3523
3604
  }
3524
3605
 
3525
3606
  showBib() {
3526
- if (!this.element.disabled && !this.showing) {
3607
+ const element = this.element;
3608
+ if (!element) {
3609
+ return;
3610
+ }
3611
+
3612
+ if (!element.bib || (!element.trigger && !element.parentNode)) {
3613
+ return;
3614
+ }
3615
+
3616
+ if (!element.disabled && !this.showing) {
3527
3617
  this.updateCurrentExpandedDropdown();
3528
- this.element.triggerChevron?.setAttribute("data-expanded", true);
3618
+ element.triggerChevron?.setAttribute("data-expanded", true);
3529
3619
 
3530
3620
  // prevent double showing: isPopovervisible gets first and showBib gets called later
3531
3621
  if (!this.showing) {
3532
- if (!this.element.modal) {
3622
+ if (!element.modal) {
3533
3623
  this.setupHideHandlers();
3534
3624
  }
3535
3625
  this.showing = true;
3536
- this.element.isPopoverVisible = true;
3626
+ element.isPopoverVisible = true;
3537
3627
  this.position();
3538
3628
  this.dispatchEventDropdownToggle();
3539
3629
  }
3540
3630
 
3541
3631
  // Setup auto update to handle resize and scroll
3542
- this.element.cleanup = autoUpdate(
3543
- this.element.trigger || this.element.parentNode,
3544
- this.element.bib,
3632
+ element.cleanup = autoUpdate(
3633
+ element.trigger || element.parentNode,
3634
+ element.bib,
3545
3635
  () => {
3546
3636
  this.position();
3547
3637
  },
@@ -3554,22 +3644,27 @@ class AuroFloatingUI {
3554
3644
  * @param {String} eventType - The event type that triggered the hiding action.
3555
3645
  */
3556
3646
  hideBib(eventType = "unknown") {
3557
- if (this.element.disabled) {
3647
+ const element = this.element;
3648
+ if (!element) {
3649
+ return;
3650
+ }
3651
+
3652
+ if (element.disabled) {
3558
3653
  return;
3559
3654
  }
3560
3655
 
3561
3656
  // noToggle dropdowns should not close when the trigger is clicked (the
3562
3657
  // "toggle" behavior), but they CAN still close via other interactions like
3563
3658
  // Escape key or focus loss.
3564
- if (this.element.noToggle && eventType === "click") {
3659
+ if (element.noToggle && eventType === "click") {
3565
3660
  return;
3566
3661
  }
3567
3662
 
3568
3663
  this.lockScroll(false);
3569
- this.element.triggerChevron?.removeAttribute("data-expanded");
3664
+ element.triggerChevron?.removeAttribute("data-expanded");
3570
3665
 
3571
- if (this.element.isPopoverVisible) {
3572
- this.element.isPopoverVisible = false;
3666
+ if (element.isPopoverVisible) {
3667
+ element.isPopoverVisible = false;
3573
3668
  }
3574
3669
  if (this.showing) {
3575
3670
  this.cleanupHideHandlers();
@@ -3589,6 +3684,11 @@ class AuroFloatingUI {
3589
3684
  * @param {String} eventType - The event type that triggered the toggle action.
3590
3685
  */
3591
3686
  dispatchEventDropdownToggle(eventType) {
3687
+ const element = this.element;
3688
+ if (!element) {
3689
+ return;
3690
+ }
3691
+
3592
3692
  const event = new CustomEvent(
3593
3693
  this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
3594
3694
  {
@@ -3600,11 +3700,16 @@ class AuroFloatingUI {
3600
3700
  },
3601
3701
  );
3602
3702
 
3603
- this.element.dispatchEvent(event);
3703
+ element.dispatchEvent(event);
3604
3704
  }
3605
3705
 
3606
3706
  handleClick() {
3607
- if (this.element.isPopoverVisible) {
3707
+ const element = this.element;
3708
+ if (!element) {
3709
+ return;
3710
+ }
3711
+
3712
+ if (element.isPopoverVisible) {
3608
3713
  this.hideBib("click");
3609
3714
  } else {
3610
3715
  this.showBib();
@@ -3615,63 +3720,66 @@ class AuroFloatingUI {
3615
3720
  {
3616
3721
  composed: true,
3617
3722
  detail: {
3618
- expanded: this.element.isPopoverVisible,
3723
+ expanded: element.isPopoverVisible,
3619
3724
  },
3620
3725
  },
3621
3726
  );
3622
3727
 
3623
- this.element.dispatchEvent(event);
3728
+ element.dispatchEvent(event);
3624
3729
  }
3625
3730
 
3626
3731
  handleEvent(event) {
3627
- if (!this.element.disableEventShow) {
3628
- switch (event.type) {
3629
- case "keydown": {
3630
- // Support both Enter and Space keys for accessibility
3631
- // Space is included as it's expected behavior for interactive elements
3632
-
3633
- const origin = event.composedPath()[0];
3634
- if (
3635
- event.key === "Enter" ||
3636
- (event.key === " " && (!origin || origin.tagName !== "INPUT"))
3637
- ) {
3638
- event.preventDefault();
3639
- this.handleClick();
3640
- }
3641
- break;
3642
- }
3643
- case "mouseenter":
3644
- if (this.element.hoverToggle) {
3645
- this.showBib();
3646
- }
3647
- break;
3648
- case "mouseleave":
3649
- if (this.element.hoverToggle) {
3650
- this.hideBib("mouseleave");
3651
- }
3652
- break;
3653
- case "focus":
3654
- if (this.element.focusShow) {
3655
- /*
3656
- This needs to better handle clicking that gives focus -
3657
- currently it shows and then immediately hides the bib
3658
- */
3659
- this.showBib();
3660
- }
3661
- break;
3662
- case "blur":
3663
- // send this task 100ms later queue to
3664
- // wait a frame in case focus moves within the floating element/bib
3665
- setTimeout(() => this.handleFocusLoss(), 0);
3666
- break;
3667
- case "click":
3668
- if (document.activeElement === document.body) {
3669
- event.currentTarget.focus();
3670
- }
3732
+ const element = this.element;
3733
+ if (!element || element.disableEventShow) {
3734
+ return;
3735
+ }
3736
+
3737
+ switch (event.type) {
3738
+ case "keydown": {
3739
+ // Support both Enter and Space keys for accessibility
3740
+ // Space is included as it's expected behavior for interactive elements
3741
+
3742
+ const origin = event.composedPath()[0];
3743
+ if (
3744
+ event.key === "Enter" ||
3745
+ (event.key === " " && (!origin || origin.tagName !== "INPUT"))
3746
+ ) {
3747
+ event.preventDefault();
3671
3748
  this.handleClick();
3672
- break;
3673
- // Do nothing
3749
+ }
3750
+ break;
3674
3751
  }
3752
+ case "mouseenter":
3753
+ if (element.hoverToggle) {
3754
+ this.showBib();
3755
+ }
3756
+ break;
3757
+ case "mouseleave":
3758
+ if (element.hoverToggle) {
3759
+ this.hideBib("mouseleave");
3760
+ }
3761
+ break;
3762
+ case "focus":
3763
+ if (element.focusShow) {
3764
+ /*
3765
+ This needs to better handle clicking that gives focus -
3766
+ currently it shows and then immediately hides the bib
3767
+ */
3768
+ this.showBib();
3769
+ }
3770
+ break;
3771
+ case "blur":
3772
+ // send this task 100ms later queue to
3773
+ // wait a frame in case focus moves within the floating element/bib
3774
+ setTimeout(() => this.handleFocusLoss(), 0);
3775
+ break;
3776
+ case "click":
3777
+ if (document.activeElement === document.body) {
3778
+ event.currentTarget.focus();
3779
+ }
3780
+ this.handleClick();
3781
+ break;
3782
+ // Do nothing
3675
3783
  }
3676
3784
  }
3677
3785
 
@@ -3682,6 +3790,11 @@ class AuroFloatingUI {
3682
3790
  * This prevents the component itself from being focusable when the trigger element already handles focus.
3683
3791
  */
3684
3792
  handleTriggerTabIndex() {
3793
+ const element = this.element;
3794
+ if (!element) {
3795
+ return;
3796
+ }
3797
+
3685
3798
  const focusableElementSelectors = [
3686
3799
  "a",
3687
3800
  "button",
@@ -3694,7 +3807,7 @@ class AuroFloatingUI {
3694
3807
  "auro-hyperlink",
3695
3808
  ];
3696
3809
 
3697
- const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
3810
+ const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
3698
3811
  if (!triggerNode) {
3699
3812
  return;
3700
3813
  }
@@ -3703,13 +3816,13 @@ class AuroFloatingUI {
3703
3816
  focusableElementSelectors.forEach((selector) => {
3704
3817
  // Check if the trigger node element is focusable
3705
3818
  if (triggerNodeTagName === selector) {
3706
- this.element.tabIndex = -1;
3819
+ element.tabIndex = -1;
3707
3820
  return;
3708
3821
  }
3709
3822
 
3710
3823
  // Check if any child is focusable
3711
3824
  if (triggerNode.querySelector(selector)) {
3712
- this.element.tabIndex = -1;
3825
+ element.tabIndex = -1;
3713
3826
  }
3714
3827
  });
3715
3828
  }
@@ -3719,13 +3832,18 @@ class AuroFloatingUI {
3719
3832
  * @param {*} eventPrefix
3720
3833
  */
3721
3834
  regenerateBibId() {
3722
- this.id = this.element.getAttribute("id");
3835
+ const element = this.element;
3836
+ if (!element) {
3837
+ return;
3838
+ }
3839
+
3840
+ this.id = element.getAttribute("id");
3723
3841
  if (!this.id) {
3724
3842
  this.id = window.crypto.randomUUID();
3725
- this.element.setAttribute("id", this.id);
3843
+ element.setAttribute("id", this.id);
3726
3844
  }
3727
3845
 
3728
- this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
3846
+ element.bib?.setAttribute("id", `${this.id}-floater-bib`);
3729
3847
  }
3730
3848
 
3731
3849
  configure(elem, eventPrefix, enableKeyboardHandling = true) {
@@ -3737,67 +3855,69 @@ class AuroFloatingUI {
3737
3855
  this.element = elem;
3738
3856
  }
3739
3857
 
3740
- if (this.behavior !== this.element.behavior) {
3741
- this.behavior = this.element.behavior;
3858
+ const element = this.element;
3859
+ if (!element) {
3860
+ return;
3742
3861
  }
3743
3862
 
3744
- if (this.element.trigger) {
3863
+ if (this.behavior !== element.behavior) {
3864
+ this.behavior = element.behavior;
3865
+ }
3866
+
3867
+ if (element.trigger) {
3745
3868
  this.disconnect();
3746
3869
  }
3747
- this.element.trigger =
3748
- this.element.triggerElement ||
3749
- this.element.shadowRoot.querySelector("#trigger") ||
3750
- this.element.trigger;
3751
- this.element.bib =
3752
- this.element.shadowRoot.querySelector("#bib") || this.element.bib;
3753
- this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
3754
- this.element.triggerChevron =
3755
- this.element.shadowRoot.querySelector("#showStateIcon");
3870
+ element.trigger =
3871
+ element.triggerElement ||
3872
+ element.shadowRoot?.querySelector("#trigger") ||
3873
+ element.trigger;
3874
+ element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
3875
+ element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
3876
+ element.triggerChevron =
3877
+ element.shadowRoot?.querySelector("#showStateIcon");
3756
3878
 
3757
- if (this.element.floaterConfig) {
3758
- this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
3879
+ if (element.floaterConfig) {
3880
+ element.hoverToggle = element.floaterConfig.hoverToggle;
3759
3881
  }
3760
3882
 
3761
3883
  this.regenerateBibId();
3762
3884
  this.handleTriggerTabIndex();
3763
3885
 
3764
3886
  this.handleEvent = this.handleEvent.bind(this);
3765
- if (this.element.trigger) {
3887
+ if (element.trigger) {
3766
3888
  if (this.enableKeyboardHandling) {
3767
- this.element.trigger.addEventListener("keydown", this.handleEvent);
3889
+ element.trigger.addEventListener("keydown", this.handleEvent);
3768
3890
  }
3769
- this.element.trigger.addEventListener("click", this.handleEvent);
3770
- this.element.trigger.addEventListener("mouseenter", this.handleEvent);
3771
- this.element.trigger.addEventListener("mouseleave", this.handleEvent);
3772
- this.element.trigger.addEventListener("focus", this.handleEvent);
3773
- this.element.trigger.addEventListener("blur", this.handleEvent);
3891
+ element.trigger.addEventListener("click", this.handleEvent);
3892
+ element.trigger.addEventListener("mouseenter", this.handleEvent);
3893
+ element.trigger.addEventListener("mouseleave", this.handleEvent);
3894
+ element.trigger.addEventListener("focus", this.handleEvent);
3895
+ element.trigger.addEventListener("blur", this.handleEvent);
3774
3896
  }
3775
3897
  }
3776
3898
 
3777
3899
  disconnect() {
3778
3900
  this.cleanupHideHandlers();
3779
- if (this.element) {
3780
- this.element.cleanup?.();
3781
3901
 
3782
- if (this.element.bib) {
3783
- this.element.shadowRoot.append(this.element.bib);
3784
- }
3902
+ const element = this.element;
3903
+ if (!element) {
3904
+ return;
3905
+ }
3785
3906
 
3786
- // Remove event & keyboard listeners
3787
- if (this.element?.trigger) {
3788
- this.element.trigger.removeEventListener("keydown", this.handleEvent);
3789
- this.element.trigger.removeEventListener("click", this.handleEvent);
3790
- this.element.trigger.removeEventListener(
3791
- "mouseenter",
3792
- this.handleEvent,
3793
- );
3794
- this.element.trigger.removeEventListener(
3795
- "mouseleave",
3796
- this.handleEvent,
3797
- );
3798
- this.element.trigger.removeEventListener("focus", this.handleEvent);
3799
- this.element.trigger.removeEventListener("blur", this.handleEvent);
3800
- }
3907
+ element.cleanup?.();
3908
+
3909
+ if (element.bib && element.shadowRoot) {
3910
+ element.shadowRoot.append(element.bib);
3911
+ }
3912
+
3913
+ // Remove event & keyboard listeners
3914
+ if (element.trigger) {
3915
+ element.trigger.removeEventListener("keydown", this.handleEvent);
3916
+ element.trigger.removeEventListener("click", this.handleEvent);
3917
+ element.trigger.removeEventListener("mouseenter", this.handleEvent);
3918
+ element.trigger.removeEventListener("mouseleave", this.handleEvent);
3919
+ element.trigger.removeEventListener("focus", this.handleEvent);
3920
+ element.trigger.removeEventListener("blur", this.handleEvent);
3801
3921
  }
3802
3922
  }
3803
3923
  }
@@ -4925,7 +5045,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
4925
5045
  }
4926
5046
  };
4927
5047
 
4928
- var formkitVersion$2 = '202604072212';
5048
+ var formkitVersion$2 = '202604091759';
4929
5049
 
4930
5050
  let AuroElement$2 = class AuroElement extends LitElement {
4931
5051
  static get properties() {
@@ -5031,7 +5151,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
5031
5151
  }
5032
5152
  };
5033
5153
 
5034
- // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
5154
+ // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
5035
5155
  // See LICENSE in the project root for license information.
5036
5156
 
5037
5157
 
@@ -12674,7 +12794,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
12674
12794
  }
12675
12795
  };
12676
12796
 
12677
- var formkitVersion$1 = '202604072212';
12797
+ var formkitVersion$1 = '202604091759';
12678
12798
 
12679
12799
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12680
12800
  // See LICENSE in the project root for license information.
@@ -13739,7 +13859,7 @@ class AuroBibtemplate extends LitElement {
13739
13859
  }
13740
13860
  }
13741
13861
 
13742
- var formkitVersion = '202604072212';
13862
+ var formkitVersion = '202604091759';
13743
13863
 
13744
13864
  var styleCss$1 = 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}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
13745
13865
 
@@ -14079,7 +14199,7 @@ class AuroHelpText extends LitElement {
14079
14199
  }
14080
14200
  }
14081
14201
 
14082
- // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
14202
+ // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
14083
14203
  // See LICENSE in the project root for license information.
14084
14204
 
14085
14205
 
@@ -14602,7 +14722,7 @@ class AuroCombobox extends AuroElement {
14602
14722
  * @returns {void}
14603
14723
  */
14604
14724
  activateFirstEnabledAvailableOption() {
14605
- const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled);
14725
+ const firstEnabledOptionIndex = this.availableOptions.findIndex((opt) => !opt.disabled && !opt.hasAttribute('nomatch'));
14606
14726
  this.updateActiveOption(firstEnabledOptionIndex);
14607
14727
  }
14608
14728
 
@@ -14616,7 +14736,7 @@ class AuroCombobox extends AuroElement {
14616
14736
 
14617
14737
  // Work backwards through the available options array to find the last enabled option
14618
14738
  for (let index = this.availableOptions.length - 1; index >= 0; index -= 1) {
14619
- if (!this.availableOptions[index].disabled) {
14739
+ if (!this.availableOptions[index].disabled && !this.availableOptions[index].hasAttribute('nomatch')) {
14620
14740
  lastEnabledOptionIndex = index;
14621
14741
  break;
14622
14742
  }