@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
@@ -9290,7 +9290,7 @@ class AuroBibtemplate extends i$1 {
9290
9290
  }
9291
9291
  }
9292
9292
 
9293
- var formkitVersion$2 = '202604072212';
9293
+ var formkitVersion$2 = '202604091759';
9294
9294
 
9295
9295
  let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$4 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
9296
9296
  `,u$6=i$3`.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, .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, .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, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .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, .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, .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, .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, .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, .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, .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(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
@@ -11624,11 +11624,19 @@ class AuroFloatingUI {
11624
11624
  * This ensures that the bib content has the same dimensions as the sizer element.
11625
11625
  */
11626
11626
  mirrorSize() {
11627
+ const element = this.element;
11628
+ if (!element) {
11629
+ return;
11630
+ }
11631
+
11627
11632
  // mirror the boxsize from bibSizer
11628
- if (this.element.bibSizer && this.element.matchWidth) {
11629
- const sizerStyle = window.getComputedStyle(this.element.bibSizer);
11630
- const bibContent =
11631
- this.element.bib.shadowRoot.querySelector(".container");
11633
+ if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
11634
+ const sizerStyle = window.getComputedStyle(element.bibSizer);
11635
+ const bibContent = element.bib.shadowRoot.querySelector(".container");
11636
+ if (!bibContent) {
11637
+ return;
11638
+ }
11639
+
11632
11640
  if (sizerStyle.width !== "0px") {
11633
11641
  bibContent.style.width = sizerStyle.width;
11634
11642
  }
@@ -11650,9 +11658,14 @@ class AuroFloatingUI {
11650
11658
  * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
11651
11659
  */
11652
11660
  getPositioningStrategy() {
11661
+ const element = this.element;
11662
+ if (!element) {
11663
+ return "floating";
11664
+ }
11665
+
11653
11666
  const breakpoint =
11654
- this.element.bib.mobileFullscreenBreakpoint ||
11655
- this.element.floaterConfig?.fullscreenBreakpoint;
11667
+ element.bib?.mobileFullscreenBreakpoint ||
11668
+ element.floaterConfig?.fullscreenBreakpoint;
11656
11669
  switch (this.behavior) {
11657
11670
  case "tooltip":
11658
11671
  return "floating";
@@ -11663,9 +11676,9 @@ class AuroFloatingUI {
11663
11676
  `(max-width: ${breakpoint})`,
11664
11677
  ).matches;
11665
11678
 
11666
- this.element.expanded = smallerThanBreakpoint;
11679
+ element.expanded = smallerThanBreakpoint;
11667
11680
  }
11668
- if (this.element.nested) {
11681
+ if (element.nested) {
11669
11682
  return "cover";
11670
11683
  }
11671
11684
  return "fullscreen";
@@ -11695,42 +11708,65 @@ class AuroFloatingUI {
11695
11708
  * and applies the calculated position to the bib's style.
11696
11709
  */
11697
11710
  position() {
11711
+ const element = this.element;
11712
+ if (!element) {
11713
+ return;
11714
+ }
11715
+
11698
11716
  const strategy = this.getPositioningStrategy();
11699
11717
  this.configureBibStrategy(strategy);
11700
11718
 
11701
11719
  if (strategy === "floating") {
11720
+ if (!element.trigger || !element.bib) {
11721
+ return;
11722
+ }
11723
+
11702
11724
  this.mirrorSize();
11703
11725
  // Define the middlware for the floater configuration
11704
11726
  const middleware = [
11705
- offset(this.element.floaterConfig?.offset || 0),
11706
- ...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
11707
- ...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
11708
- ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
11727
+ offset(element.floaterConfig?.offset || 0),
11728
+ ...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
11729
+ ...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
11730
+ ...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
11709
11731
  ];
11710
11732
 
11711
11733
  // Compute the position of the bib
11712
- computePosition(this.element.trigger, this.element.bib, {
11713
- strategy: this.element.floaterConfig?.strategy || "fixed",
11714
- placement: this.element.floaterConfig?.placement,
11734
+ computePosition(element.trigger, element.bib, {
11735
+ strategy: element.floaterConfig?.strategy || "fixed",
11736
+ placement: element.floaterConfig?.placement,
11715
11737
  middleware: middleware || [],
11716
11738
  }).then(({ x, y }) => {
11717
11739
  // eslint-disable-line id-length
11718
- Object.assign(this.element.bib.style, {
11740
+ const currentElement = this.element;
11741
+ if (!currentElement?.bib) {
11742
+ return;
11743
+ }
11744
+
11745
+ Object.assign(currentElement.bib.style, {
11719
11746
  left: `${x}px`,
11720
11747
  top: `${y}px`,
11721
11748
  });
11722
11749
  });
11723
11750
  } else if (strategy === "cover") {
11751
+ if (!element.parentNode || !element.bib) {
11752
+ return;
11753
+ }
11754
+
11724
11755
  // Compute the position of the bib
11725
- computePosition(this.element.parentNode, this.element.bib, {
11756
+ computePosition(element.parentNode, element.bib, {
11726
11757
  placement: "bottom-start",
11727
11758
  }).then(({ x, y }) => {
11728
11759
  // eslint-disable-line id-length
11729
- Object.assign(this.element.bib.style, {
11760
+ const currentElement = this.element;
11761
+ if (!currentElement?.bib || !currentElement.parentNode) {
11762
+ return;
11763
+ }
11764
+
11765
+ Object.assign(currentElement.bib.style, {
11730
11766
  left: `${x}px`,
11731
- top: `${y - this.element.parentNode.offsetHeight}px`,
11732
- width: `${this.element.parentNode.offsetWidth}px`,
11733
- height: `${this.element.parentNode.offsetHeight}px`,
11767
+ top: `${y - currentElement.parentNode.offsetHeight}px`,
11768
+ width: `${currentElement.parentNode.offsetWidth}px`,
11769
+ height: `${currentElement.parentNode.offsetHeight}px`,
11734
11770
  });
11735
11771
  });
11736
11772
  }
@@ -11742,11 +11778,17 @@ class AuroFloatingUI {
11742
11778
  * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
11743
11779
  */
11744
11780
  lockScroll(lock = true) {
11781
+ const element = this.element;
11782
+
11745
11783
  if (lock) {
11784
+ if (!element?.bib) {
11785
+ return;
11786
+ }
11787
+
11746
11788
  document.body.style.overflow = "hidden"; // hide body's scrollbar
11747
11789
 
11748
11790
  // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
11749
- this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
11791
+ element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
11750
11792
  } else {
11751
11793
  document.body.style.overflow = "";
11752
11794
  }
@@ -11762,20 +11804,24 @@ class AuroFloatingUI {
11762
11804
  * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
11763
11805
  */
11764
11806
  configureBibStrategy(value) {
11807
+ const element = this.element;
11808
+ if (!element?.bib) {
11809
+ return;
11810
+ }
11811
+
11765
11812
  if (value === "fullscreen") {
11766
- this.element.isBibFullscreen = true;
11813
+ element.isBibFullscreen = true;
11767
11814
  // reset the prev position
11768
- this.element.bib.setAttribute("isfullscreen", "");
11769
- this.element.bib.style.position = "fixed";
11770
- this.element.bib.style.top = "0px";
11771
- this.element.bib.style.left = "0px";
11772
- this.element.bib.style.width = "";
11773
- this.element.bib.style.height = "";
11774
- this.element.style.contain = "";
11815
+ element.bib.setAttribute("isfullscreen", "");
11816
+ element.bib.style.position = "fixed";
11817
+ element.bib.style.top = "0px";
11818
+ element.bib.style.left = "0px";
11819
+ element.bib.style.width = "";
11820
+ element.bib.style.height = "";
11821
+ element.style.contain = "";
11775
11822
 
11776
11823
  // reset the size that was mirroring `size` css-part
11777
- const bibContent =
11778
- this.element.bib.shadowRoot.querySelector(".container");
11824
+ const bibContent = element.bib.shadowRoot?.querySelector(".container");
11779
11825
  if (bibContent) {
11780
11826
  bibContent.style.width = "";
11781
11827
  bibContent.style.height = "";
@@ -11790,14 +11836,14 @@ class AuroFloatingUI {
11790
11836
  }, 0);
11791
11837
  }
11792
11838
 
11793
- if (this.element.isPopoverVisible) {
11839
+ if (element.isPopoverVisible) {
11794
11840
  this.lockScroll(true);
11795
11841
  }
11796
11842
  } else {
11797
- this.element.bib.style.position = "";
11798
- this.element.bib.removeAttribute("isfullscreen");
11799
- this.element.isBibFullscreen = false;
11800
- this.element.style.contain = "layout";
11843
+ element.bib.style.position = "";
11844
+ element.bib.removeAttribute("isfullscreen");
11845
+ element.isBibFullscreen = false;
11846
+ element.style.contain = "layout";
11801
11847
  }
11802
11848
 
11803
11849
  const isChanged = this.strategy && this.strategy !== value;
@@ -11815,16 +11861,21 @@ class AuroFloatingUI {
11815
11861
  },
11816
11862
  );
11817
11863
 
11818
- this.element.dispatchEvent(event);
11864
+ element.dispatchEvent(event);
11819
11865
  }
11820
11866
  }
11821
11867
 
11822
11868
  updateState() {
11823
- const isVisible = this.element.isPopoverVisible;
11869
+ const element = this.element;
11870
+ if (!element) {
11871
+ return;
11872
+ }
11873
+
11874
+ const isVisible = element.isPopoverVisible;
11824
11875
  if (!isVisible) {
11825
11876
  this.cleanupHideHandlers();
11826
11877
  try {
11827
- this.element.cleanup?.();
11878
+ element.cleanup?.();
11828
11879
  } catch (error) {
11829
11880
  // Do nothing
11830
11881
  }
@@ -11840,28 +11891,30 @@ class AuroFloatingUI {
11840
11891
  * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
11841
11892
  */
11842
11893
  handleFocusLoss() {
11894
+ const element = this.element;
11895
+ if (!element?.bib) {
11896
+ return;
11897
+ }
11898
+
11843
11899
  // if mouse is being pressed, skip and let click event to handle the action
11844
11900
  if (AuroFloatingUI.isMousePressed) {
11845
11901
  return;
11846
11902
  }
11847
11903
 
11848
11904
  if (
11849
- this.element.noHideOnThisFocusLoss ||
11850
- this.element.hasAttribute("noHideOnThisFocusLoss")
11905
+ element.noHideOnThisFocusLoss ||
11906
+ element.hasAttribute("noHideOnThisFocusLoss")
11851
11907
  ) {
11852
11908
  return;
11853
11909
  }
11854
11910
 
11855
11911
  // if focus is still inside of trigger or bib, do not close
11856
- if (
11857
- this.element.matches(":focus") ||
11858
- this.element.matches(":focus-within")
11859
- ) {
11912
+ if (element.matches(":focus") || element.matches(":focus-within")) {
11860
11913
  return;
11861
11914
  }
11862
11915
 
11863
11916
  // if fullscreen bib is in fullscreen mode, do not close
11864
- if (this.element.bib.hasAttribute("isfullscreen")) {
11917
+ if (element.bib.hasAttribute("isfullscreen")) {
11865
11918
  return;
11866
11919
  }
11867
11920
 
@@ -11869,23 +11922,33 @@ class AuroFloatingUI {
11869
11922
  }
11870
11923
 
11871
11924
  setupHideHandlers() {
11925
+ const element = this.element;
11926
+ if (!element) {
11927
+ return;
11928
+ }
11929
+
11872
11930
  // Define handlers & store references
11873
11931
  this.focusHandler = () => this.handleFocusLoss();
11874
11932
 
11875
11933
  this.clickHandler = (evt) => {
11934
+ const element = this.element;
11935
+ if (!element?.bib) {
11936
+ return;
11937
+ }
11938
+
11876
11939
  // When the bib is fullscreen (modal dialog), don't close on outside
11877
11940
  // clicks. VoiceOver's synthetic click events inside a top-layer modal
11878
11941
  // <dialog> may not include the bib in composedPath(), causing false
11879
11942
  // positives. This mirrors the fullscreen guard in handleFocusLoss().
11880
- if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
11943
+ if (element.bib.hasAttribute("isfullscreen")) {
11881
11944
  return;
11882
11945
  }
11883
11946
 
11884
11947
  if (
11885
- (!evt.composedPath().includes(this.element.trigger) &&
11886
- !evt.composedPath().includes(this.element.bib)) ||
11887
- (this.element.bib.backdrop &&
11888
- evt.composedPath().includes(this.element.bib.backdrop))
11948
+ (!evt.composedPath().includes(element.trigger) &&
11949
+ !evt.composedPath().includes(element.bib)) ||
11950
+ (element.bib.backdrop &&
11951
+ evt.composedPath().includes(element.bib.backdrop))
11889
11952
  ) {
11890
11953
  const existedVisibleFloatingUI =
11891
11954
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -11906,7 +11969,12 @@ class AuroFloatingUI {
11906
11969
 
11907
11970
  // ESC key handler
11908
11971
  this.keyDownHandler = (evt) => {
11909
- if (evt.key === "Escape" && this.element.isPopoverVisible) {
11972
+ const element = this.element;
11973
+ if (!element) {
11974
+ return;
11975
+ }
11976
+
11977
+ if (evt.key === "Escape" && element.isPopoverVisible) {
11910
11978
  const existedVisibleFloatingUI =
11911
11979
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
11912
11980
  if (
@@ -11963,6 +12031,10 @@ class AuroFloatingUI {
11963
12031
  }
11964
12032
 
11965
12033
  updateCurrentExpandedDropdown() {
12034
+ if (!this.element) {
12035
+ return;
12036
+ }
12037
+
11966
12038
  // Close any other dropdown that is already open
11967
12039
  const existedVisibleFloatingUI =
11968
12040
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -11979,25 +12051,34 @@ class AuroFloatingUI {
11979
12051
  }
11980
12052
 
11981
12053
  showBib() {
11982
- if (!this.element.disabled && !this.showing) {
12054
+ const element = this.element;
12055
+ if (!element) {
12056
+ return;
12057
+ }
12058
+
12059
+ if (!element.bib || (!element.trigger && !element.parentNode)) {
12060
+ return;
12061
+ }
12062
+
12063
+ if (!element.disabled && !this.showing) {
11983
12064
  this.updateCurrentExpandedDropdown();
11984
- this.element.triggerChevron?.setAttribute("data-expanded", true);
12065
+ element.triggerChevron?.setAttribute("data-expanded", true);
11985
12066
 
11986
12067
  // prevent double showing: isPopovervisible gets first and showBib gets called later
11987
12068
  if (!this.showing) {
11988
- if (!this.element.modal) {
12069
+ if (!element.modal) {
11989
12070
  this.setupHideHandlers();
11990
12071
  }
11991
12072
  this.showing = true;
11992
- this.element.isPopoverVisible = true;
12073
+ element.isPopoverVisible = true;
11993
12074
  this.position();
11994
12075
  this.dispatchEventDropdownToggle();
11995
12076
  }
11996
12077
 
11997
12078
  // Setup auto update to handle resize and scroll
11998
- this.element.cleanup = autoUpdate(
11999
- this.element.trigger || this.element.parentNode,
12000
- this.element.bib,
12079
+ element.cleanup = autoUpdate(
12080
+ element.trigger || element.parentNode,
12081
+ element.bib,
12001
12082
  () => {
12002
12083
  this.position();
12003
12084
  },
@@ -12010,22 +12091,27 @@ class AuroFloatingUI {
12010
12091
  * @param {String} eventType - The event type that triggered the hiding action.
12011
12092
  */
12012
12093
  hideBib(eventType = "unknown") {
12013
- if (this.element.disabled) {
12094
+ const element = this.element;
12095
+ if (!element) {
12096
+ return;
12097
+ }
12098
+
12099
+ if (element.disabled) {
12014
12100
  return;
12015
12101
  }
12016
12102
 
12017
12103
  // noToggle dropdowns should not close when the trigger is clicked (the
12018
12104
  // "toggle" behavior), but they CAN still close via other interactions like
12019
12105
  // Escape key or focus loss.
12020
- if (this.element.noToggle && eventType === "click") {
12106
+ if (element.noToggle && eventType === "click") {
12021
12107
  return;
12022
12108
  }
12023
12109
 
12024
12110
  this.lockScroll(false);
12025
- this.element.triggerChevron?.removeAttribute("data-expanded");
12111
+ element.triggerChevron?.removeAttribute("data-expanded");
12026
12112
 
12027
- if (this.element.isPopoverVisible) {
12028
- this.element.isPopoverVisible = false;
12113
+ if (element.isPopoverVisible) {
12114
+ element.isPopoverVisible = false;
12029
12115
  }
12030
12116
  if (this.showing) {
12031
12117
  this.cleanupHideHandlers();
@@ -12045,6 +12131,11 @@ class AuroFloatingUI {
12045
12131
  * @param {String} eventType - The event type that triggered the toggle action.
12046
12132
  */
12047
12133
  dispatchEventDropdownToggle(eventType) {
12134
+ const element = this.element;
12135
+ if (!element) {
12136
+ return;
12137
+ }
12138
+
12048
12139
  const event = new CustomEvent(
12049
12140
  this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
12050
12141
  {
@@ -12056,11 +12147,16 @@ class AuroFloatingUI {
12056
12147
  },
12057
12148
  );
12058
12149
 
12059
- this.element.dispatchEvent(event);
12150
+ element.dispatchEvent(event);
12060
12151
  }
12061
12152
 
12062
12153
  handleClick() {
12063
- if (this.element.isPopoverVisible) {
12154
+ const element = this.element;
12155
+ if (!element) {
12156
+ return;
12157
+ }
12158
+
12159
+ if (element.isPopoverVisible) {
12064
12160
  this.hideBib("click");
12065
12161
  } else {
12066
12162
  this.showBib();
@@ -12071,63 +12167,66 @@ class AuroFloatingUI {
12071
12167
  {
12072
12168
  composed: true,
12073
12169
  detail: {
12074
- expanded: this.element.isPopoverVisible,
12170
+ expanded: element.isPopoverVisible,
12075
12171
  },
12076
12172
  },
12077
12173
  );
12078
12174
 
12079
- this.element.dispatchEvent(event);
12175
+ element.dispatchEvent(event);
12080
12176
  }
12081
12177
 
12082
12178
  handleEvent(event) {
12083
- if (!this.element.disableEventShow) {
12084
- switch (event.type) {
12085
- case "keydown": {
12086
- // Support both Enter and Space keys for accessibility
12087
- // Space is included as it's expected behavior for interactive elements
12088
-
12089
- const origin = event.composedPath()[0];
12090
- if (
12091
- event.key === "Enter" ||
12092
- (event.key === " " && (!origin || origin.tagName !== "INPUT"))
12093
- ) {
12094
- event.preventDefault();
12095
- this.handleClick();
12096
- }
12097
- break;
12098
- }
12099
- case "mouseenter":
12100
- if (this.element.hoverToggle) {
12101
- this.showBib();
12102
- }
12103
- break;
12104
- case "mouseleave":
12105
- if (this.element.hoverToggle) {
12106
- this.hideBib("mouseleave");
12107
- }
12108
- break;
12109
- case "focus":
12110
- if (this.element.focusShow) {
12111
- /*
12112
- This needs to better handle clicking that gives focus -
12113
- currently it shows and then immediately hides the bib
12114
- */
12115
- this.showBib();
12116
- }
12117
- break;
12118
- case "blur":
12119
- // send this task 100ms later queue to
12120
- // wait a frame in case focus moves within the floating element/bib
12121
- setTimeout(() => this.handleFocusLoss(), 0);
12122
- break;
12123
- case "click":
12124
- if (document.activeElement === document.body) {
12125
- event.currentTarget.focus();
12126
- }
12179
+ const element = this.element;
12180
+ if (!element || element.disableEventShow) {
12181
+ return;
12182
+ }
12183
+
12184
+ switch (event.type) {
12185
+ case "keydown": {
12186
+ // Support both Enter and Space keys for accessibility
12187
+ // Space is included as it's expected behavior for interactive elements
12188
+
12189
+ const origin = event.composedPath()[0];
12190
+ if (
12191
+ event.key === "Enter" ||
12192
+ (event.key === " " && (!origin || origin.tagName !== "INPUT"))
12193
+ ) {
12194
+ event.preventDefault();
12127
12195
  this.handleClick();
12128
- break;
12129
- // Do nothing
12196
+ }
12197
+ break;
12130
12198
  }
12199
+ case "mouseenter":
12200
+ if (element.hoverToggle) {
12201
+ this.showBib();
12202
+ }
12203
+ break;
12204
+ case "mouseleave":
12205
+ if (element.hoverToggle) {
12206
+ this.hideBib("mouseleave");
12207
+ }
12208
+ break;
12209
+ case "focus":
12210
+ if (element.focusShow) {
12211
+ /*
12212
+ This needs to better handle clicking that gives focus -
12213
+ currently it shows and then immediately hides the bib
12214
+ */
12215
+ this.showBib();
12216
+ }
12217
+ break;
12218
+ case "blur":
12219
+ // send this task 100ms later queue to
12220
+ // wait a frame in case focus moves within the floating element/bib
12221
+ setTimeout(() => this.handleFocusLoss(), 0);
12222
+ break;
12223
+ case "click":
12224
+ if (document.activeElement === document.body) {
12225
+ event.currentTarget.focus();
12226
+ }
12227
+ this.handleClick();
12228
+ break;
12229
+ // Do nothing
12131
12230
  }
12132
12231
  }
12133
12232
 
@@ -12138,6 +12237,11 @@ class AuroFloatingUI {
12138
12237
  * This prevents the component itself from being focusable when the trigger element already handles focus.
12139
12238
  */
12140
12239
  handleTriggerTabIndex() {
12240
+ const element = this.element;
12241
+ if (!element) {
12242
+ return;
12243
+ }
12244
+
12141
12245
  const focusableElementSelectors = [
12142
12246
  "a",
12143
12247
  "button",
@@ -12150,7 +12254,7 @@ class AuroFloatingUI {
12150
12254
  "auro-hyperlink",
12151
12255
  ];
12152
12256
 
12153
- const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
12257
+ const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
12154
12258
  if (!triggerNode) {
12155
12259
  return;
12156
12260
  }
@@ -12159,13 +12263,13 @@ class AuroFloatingUI {
12159
12263
  focusableElementSelectors.forEach((selector) => {
12160
12264
  // Check if the trigger node element is focusable
12161
12265
  if (triggerNodeTagName === selector) {
12162
- this.element.tabIndex = -1;
12266
+ element.tabIndex = -1;
12163
12267
  return;
12164
12268
  }
12165
12269
 
12166
12270
  // Check if any child is focusable
12167
12271
  if (triggerNode.querySelector(selector)) {
12168
- this.element.tabIndex = -1;
12272
+ element.tabIndex = -1;
12169
12273
  }
12170
12274
  });
12171
12275
  }
@@ -12175,13 +12279,18 @@ class AuroFloatingUI {
12175
12279
  * @param {*} eventPrefix
12176
12280
  */
12177
12281
  regenerateBibId() {
12178
- this.id = this.element.getAttribute("id");
12282
+ const element = this.element;
12283
+ if (!element) {
12284
+ return;
12285
+ }
12286
+
12287
+ this.id = element.getAttribute("id");
12179
12288
  if (!this.id) {
12180
12289
  this.id = window.crypto.randomUUID();
12181
- this.element.setAttribute("id", this.id);
12290
+ element.setAttribute("id", this.id);
12182
12291
  }
12183
12292
 
12184
- this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
12293
+ element.bib?.setAttribute("id", `${this.id}-floater-bib`);
12185
12294
  }
12186
12295
 
12187
12296
  configure(elem, eventPrefix, enableKeyboardHandling = true) {
@@ -12193,67 +12302,69 @@ class AuroFloatingUI {
12193
12302
  this.element = elem;
12194
12303
  }
12195
12304
 
12196
- if (this.behavior !== this.element.behavior) {
12197
- this.behavior = this.element.behavior;
12305
+ const element = this.element;
12306
+ if (!element) {
12307
+ return;
12308
+ }
12309
+
12310
+ if (this.behavior !== element.behavior) {
12311
+ this.behavior = element.behavior;
12198
12312
  }
12199
12313
 
12200
- if (this.element.trigger) {
12314
+ if (element.trigger) {
12201
12315
  this.disconnect();
12202
12316
  }
12203
- this.element.trigger =
12204
- this.element.triggerElement ||
12205
- this.element.shadowRoot.querySelector("#trigger") ||
12206
- this.element.trigger;
12207
- this.element.bib =
12208
- this.element.shadowRoot.querySelector("#bib") || this.element.bib;
12209
- this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
12210
- this.element.triggerChevron =
12211
- this.element.shadowRoot.querySelector("#showStateIcon");
12317
+ element.trigger =
12318
+ element.triggerElement ||
12319
+ element.shadowRoot?.querySelector("#trigger") ||
12320
+ element.trigger;
12321
+ element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
12322
+ element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
12323
+ element.triggerChevron =
12324
+ element.shadowRoot?.querySelector("#showStateIcon");
12212
12325
 
12213
- if (this.element.floaterConfig) {
12214
- this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
12326
+ if (element.floaterConfig) {
12327
+ element.hoverToggle = element.floaterConfig.hoverToggle;
12215
12328
  }
12216
12329
 
12217
12330
  this.regenerateBibId();
12218
12331
  this.handleTriggerTabIndex();
12219
12332
 
12220
12333
  this.handleEvent = this.handleEvent.bind(this);
12221
- if (this.element.trigger) {
12334
+ if (element.trigger) {
12222
12335
  if (this.enableKeyboardHandling) {
12223
- this.element.trigger.addEventListener("keydown", this.handleEvent);
12336
+ element.trigger.addEventListener("keydown", this.handleEvent);
12224
12337
  }
12225
- this.element.trigger.addEventListener("click", this.handleEvent);
12226
- this.element.trigger.addEventListener("mouseenter", this.handleEvent);
12227
- this.element.trigger.addEventListener("mouseleave", this.handleEvent);
12228
- this.element.trigger.addEventListener("focus", this.handleEvent);
12229
- this.element.trigger.addEventListener("blur", this.handleEvent);
12338
+ element.trigger.addEventListener("click", this.handleEvent);
12339
+ element.trigger.addEventListener("mouseenter", this.handleEvent);
12340
+ element.trigger.addEventListener("mouseleave", this.handleEvent);
12341
+ element.trigger.addEventListener("focus", this.handleEvent);
12342
+ element.trigger.addEventListener("blur", this.handleEvent);
12230
12343
  }
12231
12344
  }
12232
12345
 
12233
12346
  disconnect() {
12234
12347
  this.cleanupHideHandlers();
12235
- if (this.element) {
12236
- this.element.cleanup?.();
12237
12348
 
12238
- if (this.element.bib) {
12239
- this.element.shadowRoot.append(this.element.bib);
12240
- }
12349
+ const element = this.element;
12350
+ if (!element) {
12351
+ return;
12352
+ }
12241
12353
 
12242
- // Remove event & keyboard listeners
12243
- if (this.element?.trigger) {
12244
- this.element.trigger.removeEventListener("keydown", this.handleEvent);
12245
- this.element.trigger.removeEventListener("click", this.handleEvent);
12246
- this.element.trigger.removeEventListener(
12247
- "mouseenter",
12248
- this.handleEvent,
12249
- );
12250
- this.element.trigger.removeEventListener(
12251
- "mouseleave",
12252
- this.handleEvent,
12253
- );
12254
- this.element.trigger.removeEventListener("focus", this.handleEvent);
12255
- this.element.trigger.removeEventListener("blur", this.handleEvent);
12256
- }
12354
+ element.cleanup?.();
12355
+
12356
+ if (element.bib && element.shadowRoot) {
12357
+ element.shadowRoot.append(element.bib);
12358
+ }
12359
+
12360
+ // Remove event & keyboard listeners
12361
+ if (element.trigger) {
12362
+ element.trigger.removeEventListener("keydown", this.handleEvent);
12363
+ element.trigger.removeEventListener("click", this.handleEvent);
12364
+ element.trigger.removeEventListener("mouseenter", this.handleEvent);
12365
+ element.trigger.removeEventListener("mouseleave", this.handleEvent);
12366
+ element.trigger.removeEventListener("focus", this.handleEvent);
12367
+ element.trigger.removeEventListener("blur", this.handleEvent);
12257
12368
  }
12258
12369
  }
12259
12370
  }
@@ -12710,7 +12821,7 @@ var iconVersion$2 = '9.1.2';
12710
12821
  * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
12711
12822
  * isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
12712
12823
  */
12713
- function createDisplayContext(component, options = {}) {
12824
+ function createDisplayContext$1(component, options = {}) {
12714
12825
  const dd = options.dropdown || component.dropdown;
12715
12826
  // isPopoverVisible reflects as the `open` attribute.
12716
12827
  // It reports whether the bib is open in any mode (popover or modal).
@@ -12740,11 +12851,11 @@ function createDisplayContext(component, options = {}) {
12740
12851
  * @param {Object} strategy - Map of key names to handler functions.
12741
12852
  * @param {Object} [options] - Optional config passed to createDisplayContext.
12742
12853
  */
12743
- function applyKeyboardStrategy(component, strategy, options = {}) {
12854
+ function applyKeyboardStrategy$1(component, strategy, options = {}) {
12744
12855
  component.addEventListener('keydown', async (evt) => {
12745
12856
  const handler = strategy[evt.key] || strategy.default;
12746
12857
  if (typeof handler === 'function') {
12747
- const ctx = createDisplayContext(component, options);
12858
+ const ctx = createDisplayContext$1(component, options);
12748
12859
  await handler(component, evt, ctx);
12749
12860
  }
12750
12861
  });
@@ -12979,7 +13090,7 @@ class AuroDropdownBib extends i$1 {
12979
13090
 
12980
13091
  const dialog = this.shadowRoot.querySelector('dialog');
12981
13092
  this._setupCancelHandler(dialog);
12982
- applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
13093
+ applyKeyboardStrategy$1(dialog, createDropdownBibKeyboardStrategy());
12983
13094
 
12984
13095
  this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
12985
13096
  bubbles: true,
@@ -13381,7 +13492,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
13381
13492
  }
13382
13493
  };
13383
13494
 
13384
- var formkitVersion$1 = '202604072212';
13495
+ var formkitVersion$1 = '202604091759';
13385
13496
 
13386
13497
  let AuroElement$2 = class AuroElement extends i$1 {
13387
13498
  static get properties() {
@@ -13487,7 +13598,7 @@ let AuroElement$2 = class AuroElement extends i$1 {
13487
13598
  }
13488
13599
  };
13489
13600
 
13490
- // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
13601
+ // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
13491
13602
  // See LICENSE in the project root for license information.
13492
13603
 
13493
13604
 
@@ -21137,7 +21248,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
21137
21248
  }
21138
21249
  };
21139
21250
 
21140
- var formkitVersion = '202604072212';
21251
+ var formkitVersion = '202604091759';
21141
21252
 
21142
21253
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
21143
21254
  // See LICENSE in the project root for license information.
@@ -22334,7 +22445,88 @@ function guardTouchPassthrough(element) {
22334
22445
  }, { once: true });
22335
22446
  }
22336
22447
 
22337
- // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
22448
+ /**
22449
+ * Computes display state once per keydown event.
22450
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
22451
+ *
22452
+ * @param {HTMLElement} component - The component with a dropdown reference.
22453
+ * @param {Object} [options] - Optional config.
22454
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
22455
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
22456
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
22457
+ * isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
22458
+ */
22459
+ function createDisplayContext(component, options = {}) {
22460
+ const dd = options.dropdown || component.dropdown;
22461
+ // isPopoverVisible reflects as the `open` attribute.
22462
+ // It reports whether the bib is open in any mode (popover or modal).
22463
+ const isExpanded = Boolean(dd && dd.isPopoverVisible);
22464
+ const isFullscreen = Boolean(dd && dd.isBibFullscreen);
22465
+
22466
+ const ctx = {
22467
+ isExpanded,
22468
+ isModal: isFullscreen,
22469
+ isPopover: !isFullscreen,
22470
+ activeInput: null,
22471
+ };
22472
+
22473
+ if (options.inputResolver) {
22474
+ const resolvedInput = options.inputResolver(component, ctx);
22475
+ // Guard against resolvers returning undefined or non-HTMLElement values.
22476
+ ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
22477
+ }
22478
+
22479
+ return ctx;
22480
+ }
22481
+
22482
+ /**
22483
+ * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
22484
+ * Handles both sync and async handlers.
22485
+ * @param {HTMLElement} component - The component to attach the listener to.
22486
+ * @param {Object} strategy - Map of key names to handler functions.
22487
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
22488
+ */
22489
+ function applyKeyboardStrategy(component, strategy, options = {}) {
22490
+ component.addEventListener('keydown', async (evt) => {
22491
+ const handler = strategy[evt.key] || strategy.default;
22492
+ if (typeof handler === 'function') {
22493
+ const ctx = createDisplayContext(component, options);
22494
+ await handler(component, evt, ctx);
22495
+ }
22496
+ });
22497
+ }
22498
+
22499
+ // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
22500
+ // See LICENSE in the project root for license information.
22501
+
22502
+ // Authoritative datepicker keyboard behavior spec:
22503
+ // components/datepicker/docs/partials/keyboardBehavior.md
22504
+ //
22505
+ // Current behavior (transitional — full bib keyboard navigation is planned for a future iteration):
22506
+ // - The bib opens and closes via pointer/touch interaction only.
22507
+ // - Escape closes the bib and prevents the event from reaching parent containers.
22508
+ // - Tab uses the browser's default tabindex sequence across trigger controls.
22509
+ // - Enter and Space do not open or close the bib.
22510
+ //
22511
+ // This file is an intentional placeholder for most keys. When datepicker bib keyboard navigation is
22512
+ // added, handlers should go here following the same strategy pattern used by
22513
+ // auro-select (selectKeyboardStrategy.js) and auro-combobox (comboboxKeyboardStrategy.js).
22514
+ const datepickerKeyboardStrategy = {
22515
+ Escape(component, evt) {
22516
+ if (!component.dropdown || !component.dropdown.isPopoverVisible) {
22517
+ return;
22518
+ }
22519
+
22520
+ // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups.
22521
+ // Because stopPropagation prevents the document-level floatingUI keydown handler from
22522
+ // seeing this event, we must also close the dropdown explicitly.
22523
+ evt.stopPropagation();
22524
+
22525
+ component.dropdown.hide();
22526
+ },
22527
+ };
22528
+
22529
+ // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
22338
22530
  // See LICENSE in the project root for license information.
22339
22531
 
22340
22532
 
@@ -23791,6 +23983,7 @@ class AuroDatePicker extends AuroElement {
23791
23983
  this.configureCalendar();
23792
23984
  this.configureDatepicker();
23793
23985
  this.configureClickHandler();
23986
+ applyKeyboardStrategy(this, datepickerKeyboardStrategy);
23794
23987
  }
23795
23988
 
23796
23989
  connectedCallback() {