@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
@@ -9242,7 +9242,7 @@ class AuroBibtemplate extends LitElement {
9242
9242
  }
9243
9243
  }
9244
9244
 
9245
- var formkitVersion$2 = '202604072212';
9245
+ var formkitVersion$2 = '202604091759';
9246
9246
 
9247
9247
  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=literal`${unsafeStatic(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$1 = 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$1=css`: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}
9248
9248
  `,u$4=css`.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}}
@@ -11552,11 +11552,19 @@ class AuroFloatingUI {
11552
11552
  * This ensures that the bib content has the same dimensions as the sizer element.
11553
11553
  */
11554
11554
  mirrorSize() {
11555
+ const element = this.element;
11556
+ if (!element) {
11557
+ return;
11558
+ }
11559
+
11555
11560
  // mirror the boxsize from bibSizer
11556
- if (this.element.bibSizer && this.element.matchWidth) {
11557
- const sizerStyle = window.getComputedStyle(this.element.bibSizer);
11558
- const bibContent =
11559
- this.element.bib.shadowRoot.querySelector(".container");
11561
+ if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
11562
+ const sizerStyle = window.getComputedStyle(element.bibSizer);
11563
+ const bibContent = element.bib.shadowRoot.querySelector(".container");
11564
+ if (!bibContent) {
11565
+ return;
11566
+ }
11567
+
11560
11568
  if (sizerStyle.width !== "0px") {
11561
11569
  bibContent.style.width = sizerStyle.width;
11562
11570
  }
@@ -11578,9 +11586,14 @@ class AuroFloatingUI {
11578
11586
  * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
11579
11587
  */
11580
11588
  getPositioningStrategy() {
11589
+ const element = this.element;
11590
+ if (!element) {
11591
+ return "floating";
11592
+ }
11593
+
11581
11594
  const breakpoint =
11582
- this.element.bib.mobileFullscreenBreakpoint ||
11583
- this.element.floaterConfig?.fullscreenBreakpoint;
11595
+ element.bib?.mobileFullscreenBreakpoint ||
11596
+ element.floaterConfig?.fullscreenBreakpoint;
11584
11597
  switch (this.behavior) {
11585
11598
  case "tooltip":
11586
11599
  return "floating";
@@ -11591,9 +11604,9 @@ class AuroFloatingUI {
11591
11604
  `(max-width: ${breakpoint})`,
11592
11605
  ).matches;
11593
11606
 
11594
- this.element.expanded = smallerThanBreakpoint;
11607
+ element.expanded = smallerThanBreakpoint;
11595
11608
  }
11596
- if (this.element.nested) {
11609
+ if (element.nested) {
11597
11610
  return "cover";
11598
11611
  }
11599
11612
  return "fullscreen";
@@ -11623,42 +11636,65 @@ class AuroFloatingUI {
11623
11636
  * and applies the calculated position to the bib's style.
11624
11637
  */
11625
11638
  position() {
11639
+ const element = this.element;
11640
+ if (!element) {
11641
+ return;
11642
+ }
11643
+
11626
11644
  const strategy = this.getPositioningStrategy();
11627
11645
  this.configureBibStrategy(strategy);
11628
11646
 
11629
11647
  if (strategy === "floating") {
11648
+ if (!element.trigger || !element.bib) {
11649
+ return;
11650
+ }
11651
+
11630
11652
  this.mirrorSize();
11631
11653
  // Define the middlware for the floater configuration
11632
11654
  const middleware = [
11633
- offset(this.element.floaterConfig?.offset || 0),
11634
- ...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
11635
- ...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
11636
- ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
11655
+ offset(element.floaterConfig?.offset || 0),
11656
+ ...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
11657
+ ...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
11658
+ ...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
11637
11659
  ];
11638
11660
 
11639
11661
  // Compute the position of the bib
11640
- computePosition(this.element.trigger, this.element.bib, {
11641
- strategy: this.element.floaterConfig?.strategy || "fixed",
11642
- placement: this.element.floaterConfig?.placement,
11662
+ computePosition(element.trigger, element.bib, {
11663
+ strategy: element.floaterConfig?.strategy || "fixed",
11664
+ placement: element.floaterConfig?.placement,
11643
11665
  middleware: middleware || [],
11644
11666
  }).then(({ x, y }) => {
11645
11667
  // eslint-disable-line id-length
11646
- Object.assign(this.element.bib.style, {
11668
+ const currentElement = this.element;
11669
+ if (!currentElement?.bib) {
11670
+ return;
11671
+ }
11672
+
11673
+ Object.assign(currentElement.bib.style, {
11647
11674
  left: `${x}px`,
11648
11675
  top: `${y}px`,
11649
11676
  });
11650
11677
  });
11651
11678
  } else if (strategy === "cover") {
11679
+ if (!element.parentNode || !element.bib) {
11680
+ return;
11681
+ }
11682
+
11652
11683
  // Compute the position of the bib
11653
- computePosition(this.element.parentNode, this.element.bib, {
11684
+ computePosition(element.parentNode, element.bib, {
11654
11685
  placement: "bottom-start",
11655
11686
  }).then(({ x, y }) => {
11656
11687
  // eslint-disable-line id-length
11657
- Object.assign(this.element.bib.style, {
11688
+ const currentElement = this.element;
11689
+ if (!currentElement?.bib || !currentElement.parentNode) {
11690
+ return;
11691
+ }
11692
+
11693
+ Object.assign(currentElement.bib.style, {
11658
11694
  left: `${x}px`,
11659
- top: `${y - this.element.parentNode.offsetHeight}px`,
11660
- width: `${this.element.parentNode.offsetWidth}px`,
11661
- height: `${this.element.parentNode.offsetHeight}px`,
11695
+ top: `${y - currentElement.parentNode.offsetHeight}px`,
11696
+ width: `${currentElement.parentNode.offsetWidth}px`,
11697
+ height: `${currentElement.parentNode.offsetHeight}px`,
11662
11698
  });
11663
11699
  });
11664
11700
  }
@@ -11670,11 +11706,17 @@ class AuroFloatingUI {
11670
11706
  * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
11671
11707
  */
11672
11708
  lockScroll(lock = true) {
11709
+ const element = this.element;
11710
+
11673
11711
  if (lock) {
11712
+ if (!element?.bib) {
11713
+ return;
11714
+ }
11715
+
11674
11716
  document.body.style.overflow = "hidden"; // hide body's scrollbar
11675
11717
 
11676
11718
  // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
11677
- this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
11719
+ element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
11678
11720
  } else {
11679
11721
  document.body.style.overflow = "";
11680
11722
  }
@@ -11690,20 +11732,24 @@ class AuroFloatingUI {
11690
11732
  * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
11691
11733
  */
11692
11734
  configureBibStrategy(value) {
11735
+ const element = this.element;
11736
+ if (!element?.bib) {
11737
+ return;
11738
+ }
11739
+
11693
11740
  if (value === "fullscreen") {
11694
- this.element.isBibFullscreen = true;
11741
+ element.isBibFullscreen = true;
11695
11742
  // reset the prev position
11696
- this.element.bib.setAttribute("isfullscreen", "");
11697
- this.element.bib.style.position = "fixed";
11698
- this.element.bib.style.top = "0px";
11699
- this.element.bib.style.left = "0px";
11700
- this.element.bib.style.width = "";
11701
- this.element.bib.style.height = "";
11702
- this.element.style.contain = "";
11743
+ element.bib.setAttribute("isfullscreen", "");
11744
+ element.bib.style.position = "fixed";
11745
+ element.bib.style.top = "0px";
11746
+ element.bib.style.left = "0px";
11747
+ element.bib.style.width = "";
11748
+ element.bib.style.height = "";
11749
+ element.style.contain = "";
11703
11750
 
11704
11751
  // reset the size that was mirroring `size` css-part
11705
- const bibContent =
11706
- this.element.bib.shadowRoot.querySelector(".container");
11752
+ const bibContent = element.bib.shadowRoot?.querySelector(".container");
11707
11753
  if (bibContent) {
11708
11754
  bibContent.style.width = "";
11709
11755
  bibContent.style.height = "";
@@ -11718,14 +11764,14 @@ class AuroFloatingUI {
11718
11764
  }, 0);
11719
11765
  }
11720
11766
 
11721
- if (this.element.isPopoverVisible) {
11767
+ if (element.isPopoverVisible) {
11722
11768
  this.lockScroll(true);
11723
11769
  }
11724
11770
  } else {
11725
- this.element.bib.style.position = "";
11726
- this.element.bib.removeAttribute("isfullscreen");
11727
- this.element.isBibFullscreen = false;
11728
- this.element.style.contain = "layout";
11771
+ element.bib.style.position = "";
11772
+ element.bib.removeAttribute("isfullscreen");
11773
+ element.isBibFullscreen = false;
11774
+ element.style.contain = "layout";
11729
11775
  }
11730
11776
 
11731
11777
  const isChanged = this.strategy && this.strategy !== value;
@@ -11743,16 +11789,21 @@ class AuroFloatingUI {
11743
11789
  },
11744
11790
  );
11745
11791
 
11746
- this.element.dispatchEvent(event);
11792
+ element.dispatchEvent(event);
11747
11793
  }
11748
11794
  }
11749
11795
 
11750
11796
  updateState() {
11751
- const isVisible = this.element.isPopoverVisible;
11797
+ const element = this.element;
11798
+ if (!element) {
11799
+ return;
11800
+ }
11801
+
11802
+ const isVisible = element.isPopoverVisible;
11752
11803
  if (!isVisible) {
11753
11804
  this.cleanupHideHandlers();
11754
11805
  try {
11755
- this.element.cleanup?.();
11806
+ element.cleanup?.();
11756
11807
  } catch (error) {
11757
11808
  // Do nothing
11758
11809
  }
@@ -11768,28 +11819,30 @@ class AuroFloatingUI {
11768
11819
  * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
11769
11820
  */
11770
11821
  handleFocusLoss() {
11822
+ const element = this.element;
11823
+ if (!element?.bib) {
11824
+ return;
11825
+ }
11826
+
11771
11827
  // if mouse is being pressed, skip and let click event to handle the action
11772
11828
  if (AuroFloatingUI.isMousePressed) {
11773
11829
  return;
11774
11830
  }
11775
11831
 
11776
11832
  if (
11777
- this.element.noHideOnThisFocusLoss ||
11778
- this.element.hasAttribute("noHideOnThisFocusLoss")
11833
+ element.noHideOnThisFocusLoss ||
11834
+ element.hasAttribute("noHideOnThisFocusLoss")
11779
11835
  ) {
11780
11836
  return;
11781
11837
  }
11782
11838
 
11783
11839
  // if focus is still inside of trigger or bib, do not close
11784
- if (
11785
- this.element.matches(":focus") ||
11786
- this.element.matches(":focus-within")
11787
- ) {
11840
+ if (element.matches(":focus") || element.matches(":focus-within")) {
11788
11841
  return;
11789
11842
  }
11790
11843
 
11791
11844
  // if fullscreen bib is in fullscreen mode, do not close
11792
- if (this.element.bib.hasAttribute("isfullscreen")) {
11845
+ if (element.bib.hasAttribute("isfullscreen")) {
11793
11846
  return;
11794
11847
  }
11795
11848
 
@@ -11797,23 +11850,33 @@ class AuroFloatingUI {
11797
11850
  }
11798
11851
 
11799
11852
  setupHideHandlers() {
11853
+ const element = this.element;
11854
+ if (!element) {
11855
+ return;
11856
+ }
11857
+
11800
11858
  // Define handlers & store references
11801
11859
  this.focusHandler = () => this.handleFocusLoss();
11802
11860
 
11803
11861
  this.clickHandler = (evt) => {
11862
+ const element = this.element;
11863
+ if (!element?.bib) {
11864
+ return;
11865
+ }
11866
+
11804
11867
  // When the bib is fullscreen (modal dialog), don't close on outside
11805
11868
  // clicks. VoiceOver's synthetic click events inside a top-layer modal
11806
11869
  // <dialog> may not include the bib in composedPath(), causing false
11807
11870
  // positives. This mirrors the fullscreen guard in handleFocusLoss().
11808
- if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
11871
+ if (element.bib.hasAttribute("isfullscreen")) {
11809
11872
  return;
11810
11873
  }
11811
11874
 
11812
11875
  if (
11813
- (!evt.composedPath().includes(this.element.trigger) &&
11814
- !evt.composedPath().includes(this.element.bib)) ||
11815
- (this.element.bib.backdrop &&
11816
- evt.composedPath().includes(this.element.bib.backdrop))
11876
+ (!evt.composedPath().includes(element.trigger) &&
11877
+ !evt.composedPath().includes(element.bib)) ||
11878
+ (element.bib.backdrop &&
11879
+ evt.composedPath().includes(element.bib.backdrop))
11817
11880
  ) {
11818
11881
  const existedVisibleFloatingUI =
11819
11882
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -11834,7 +11897,12 @@ class AuroFloatingUI {
11834
11897
 
11835
11898
  // ESC key handler
11836
11899
  this.keyDownHandler = (evt) => {
11837
- if (evt.key === "Escape" && this.element.isPopoverVisible) {
11900
+ const element = this.element;
11901
+ if (!element) {
11902
+ return;
11903
+ }
11904
+
11905
+ if (evt.key === "Escape" && element.isPopoverVisible) {
11838
11906
  const existedVisibleFloatingUI =
11839
11907
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
11840
11908
  if (
@@ -11891,6 +11959,10 @@ class AuroFloatingUI {
11891
11959
  }
11892
11960
 
11893
11961
  updateCurrentExpandedDropdown() {
11962
+ if (!this.element) {
11963
+ return;
11964
+ }
11965
+
11894
11966
  // Close any other dropdown that is already open
11895
11967
  const existedVisibleFloatingUI =
11896
11968
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -11907,25 +11979,34 @@ class AuroFloatingUI {
11907
11979
  }
11908
11980
 
11909
11981
  showBib() {
11910
- if (!this.element.disabled && !this.showing) {
11982
+ const element = this.element;
11983
+ if (!element) {
11984
+ return;
11985
+ }
11986
+
11987
+ if (!element.bib || (!element.trigger && !element.parentNode)) {
11988
+ return;
11989
+ }
11990
+
11991
+ if (!element.disabled && !this.showing) {
11911
11992
  this.updateCurrentExpandedDropdown();
11912
- this.element.triggerChevron?.setAttribute("data-expanded", true);
11993
+ element.triggerChevron?.setAttribute("data-expanded", true);
11913
11994
 
11914
11995
  // prevent double showing: isPopovervisible gets first and showBib gets called later
11915
11996
  if (!this.showing) {
11916
- if (!this.element.modal) {
11997
+ if (!element.modal) {
11917
11998
  this.setupHideHandlers();
11918
11999
  }
11919
12000
  this.showing = true;
11920
- this.element.isPopoverVisible = true;
12001
+ element.isPopoverVisible = true;
11921
12002
  this.position();
11922
12003
  this.dispatchEventDropdownToggle();
11923
12004
  }
11924
12005
 
11925
12006
  // Setup auto update to handle resize and scroll
11926
- this.element.cleanup = autoUpdate(
11927
- this.element.trigger || this.element.parentNode,
11928
- this.element.bib,
12007
+ element.cleanup = autoUpdate(
12008
+ element.trigger || element.parentNode,
12009
+ element.bib,
11929
12010
  () => {
11930
12011
  this.position();
11931
12012
  },
@@ -11938,22 +12019,27 @@ class AuroFloatingUI {
11938
12019
  * @param {String} eventType - The event type that triggered the hiding action.
11939
12020
  */
11940
12021
  hideBib(eventType = "unknown") {
11941
- if (this.element.disabled) {
12022
+ const element = this.element;
12023
+ if (!element) {
12024
+ return;
12025
+ }
12026
+
12027
+ if (element.disabled) {
11942
12028
  return;
11943
12029
  }
11944
12030
 
11945
12031
  // noToggle dropdowns should not close when the trigger is clicked (the
11946
12032
  // "toggle" behavior), but they CAN still close via other interactions like
11947
12033
  // Escape key or focus loss.
11948
- if (this.element.noToggle && eventType === "click") {
12034
+ if (element.noToggle && eventType === "click") {
11949
12035
  return;
11950
12036
  }
11951
12037
 
11952
12038
  this.lockScroll(false);
11953
- this.element.triggerChevron?.removeAttribute("data-expanded");
12039
+ element.triggerChevron?.removeAttribute("data-expanded");
11954
12040
 
11955
- if (this.element.isPopoverVisible) {
11956
- this.element.isPopoverVisible = false;
12041
+ if (element.isPopoverVisible) {
12042
+ element.isPopoverVisible = false;
11957
12043
  }
11958
12044
  if (this.showing) {
11959
12045
  this.cleanupHideHandlers();
@@ -11973,6 +12059,11 @@ class AuroFloatingUI {
11973
12059
  * @param {String} eventType - The event type that triggered the toggle action.
11974
12060
  */
11975
12061
  dispatchEventDropdownToggle(eventType) {
12062
+ const element = this.element;
12063
+ if (!element) {
12064
+ return;
12065
+ }
12066
+
11976
12067
  const event = new CustomEvent(
11977
12068
  this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
11978
12069
  {
@@ -11984,11 +12075,16 @@ class AuroFloatingUI {
11984
12075
  },
11985
12076
  );
11986
12077
 
11987
- this.element.dispatchEvent(event);
12078
+ element.dispatchEvent(event);
11988
12079
  }
11989
12080
 
11990
12081
  handleClick() {
11991
- if (this.element.isPopoverVisible) {
12082
+ const element = this.element;
12083
+ if (!element) {
12084
+ return;
12085
+ }
12086
+
12087
+ if (element.isPopoverVisible) {
11992
12088
  this.hideBib("click");
11993
12089
  } else {
11994
12090
  this.showBib();
@@ -11999,63 +12095,66 @@ class AuroFloatingUI {
11999
12095
  {
12000
12096
  composed: true,
12001
12097
  detail: {
12002
- expanded: this.element.isPopoverVisible,
12098
+ expanded: element.isPopoverVisible,
12003
12099
  },
12004
12100
  },
12005
12101
  );
12006
12102
 
12007
- this.element.dispatchEvent(event);
12103
+ element.dispatchEvent(event);
12008
12104
  }
12009
12105
 
12010
12106
  handleEvent(event) {
12011
- if (!this.element.disableEventShow) {
12012
- switch (event.type) {
12013
- case "keydown": {
12014
- // Support both Enter and Space keys for accessibility
12015
- // Space is included as it's expected behavior for interactive elements
12016
-
12017
- const origin = event.composedPath()[0];
12018
- if (
12019
- event.key === "Enter" ||
12020
- (event.key === " " && (!origin || origin.tagName !== "INPUT"))
12021
- ) {
12022
- event.preventDefault();
12023
- this.handleClick();
12024
- }
12025
- break;
12026
- }
12027
- case "mouseenter":
12028
- if (this.element.hoverToggle) {
12029
- this.showBib();
12030
- }
12031
- break;
12032
- case "mouseleave":
12033
- if (this.element.hoverToggle) {
12034
- this.hideBib("mouseleave");
12035
- }
12036
- break;
12037
- case "focus":
12038
- if (this.element.focusShow) {
12039
- /*
12040
- This needs to better handle clicking that gives focus -
12041
- currently it shows and then immediately hides the bib
12042
- */
12043
- this.showBib();
12044
- }
12045
- break;
12046
- case "blur":
12047
- // send this task 100ms later queue to
12048
- // wait a frame in case focus moves within the floating element/bib
12049
- setTimeout(() => this.handleFocusLoss(), 0);
12050
- break;
12051
- case "click":
12052
- if (document.activeElement === document.body) {
12053
- event.currentTarget.focus();
12054
- }
12107
+ const element = this.element;
12108
+ if (!element || element.disableEventShow) {
12109
+ return;
12110
+ }
12111
+
12112
+ switch (event.type) {
12113
+ case "keydown": {
12114
+ // Support both Enter and Space keys for accessibility
12115
+ // Space is included as it's expected behavior for interactive elements
12116
+
12117
+ const origin = event.composedPath()[0];
12118
+ if (
12119
+ event.key === "Enter" ||
12120
+ (event.key === " " && (!origin || origin.tagName !== "INPUT"))
12121
+ ) {
12122
+ event.preventDefault();
12055
12123
  this.handleClick();
12056
- break;
12057
- // Do nothing
12124
+ }
12125
+ break;
12058
12126
  }
12127
+ case "mouseenter":
12128
+ if (element.hoverToggle) {
12129
+ this.showBib();
12130
+ }
12131
+ break;
12132
+ case "mouseleave":
12133
+ if (element.hoverToggle) {
12134
+ this.hideBib("mouseleave");
12135
+ }
12136
+ break;
12137
+ case "focus":
12138
+ if (element.focusShow) {
12139
+ /*
12140
+ This needs to better handle clicking that gives focus -
12141
+ currently it shows and then immediately hides the bib
12142
+ */
12143
+ this.showBib();
12144
+ }
12145
+ break;
12146
+ case "blur":
12147
+ // send this task 100ms later queue to
12148
+ // wait a frame in case focus moves within the floating element/bib
12149
+ setTimeout(() => this.handleFocusLoss(), 0);
12150
+ break;
12151
+ case "click":
12152
+ if (document.activeElement === document.body) {
12153
+ event.currentTarget.focus();
12154
+ }
12155
+ this.handleClick();
12156
+ break;
12157
+ // Do nothing
12059
12158
  }
12060
12159
  }
12061
12160
 
@@ -12066,6 +12165,11 @@ class AuroFloatingUI {
12066
12165
  * This prevents the component itself from being focusable when the trigger element already handles focus.
12067
12166
  */
12068
12167
  handleTriggerTabIndex() {
12168
+ const element = this.element;
12169
+ if (!element) {
12170
+ return;
12171
+ }
12172
+
12069
12173
  const focusableElementSelectors = [
12070
12174
  "a",
12071
12175
  "button",
@@ -12078,7 +12182,7 @@ class AuroFloatingUI {
12078
12182
  "auro-hyperlink",
12079
12183
  ];
12080
12184
 
12081
- const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
12185
+ const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
12082
12186
  if (!triggerNode) {
12083
12187
  return;
12084
12188
  }
@@ -12087,13 +12191,13 @@ class AuroFloatingUI {
12087
12191
  focusableElementSelectors.forEach((selector) => {
12088
12192
  // Check if the trigger node element is focusable
12089
12193
  if (triggerNodeTagName === selector) {
12090
- this.element.tabIndex = -1;
12194
+ element.tabIndex = -1;
12091
12195
  return;
12092
12196
  }
12093
12197
 
12094
12198
  // Check if any child is focusable
12095
12199
  if (triggerNode.querySelector(selector)) {
12096
- this.element.tabIndex = -1;
12200
+ element.tabIndex = -1;
12097
12201
  }
12098
12202
  });
12099
12203
  }
@@ -12103,13 +12207,18 @@ class AuroFloatingUI {
12103
12207
  * @param {*} eventPrefix
12104
12208
  */
12105
12209
  regenerateBibId() {
12106
- this.id = this.element.getAttribute("id");
12210
+ const element = this.element;
12211
+ if (!element) {
12212
+ return;
12213
+ }
12214
+
12215
+ this.id = element.getAttribute("id");
12107
12216
  if (!this.id) {
12108
12217
  this.id = window.crypto.randomUUID();
12109
- this.element.setAttribute("id", this.id);
12218
+ element.setAttribute("id", this.id);
12110
12219
  }
12111
12220
 
12112
- this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
12221
+ element.bib?.setAttribute("id", `${this.id}-floater-bib`);
12113
12222
  }
12114
12223
 
12115
12224
  configure(elem, eventPrefix, enableKeyboardHandling = true) {
@@ -12121,67 +12230,69 @@ class AuroFloatingUI {
12121
12230
  this.element = elem;
12122
12231
  }
12123
12232
 
12124
- if (this.behavior !== this.element.behavior) {
12125
- this.behavior = this.element.behavior;
12233
+ const element = this.element;
12234
+ if (!element) {
12235
+ return;
12236
+ }
12237
+
12238
+ if (this.behavior !== element.behavior) {
12239
+ this.behavior = element.behavior;
12126
12240
  }
12127
12241
 
12128
- if (this.element.trigger) {
12242
+ if (element.trigger) {
12129
12243
  this.disconnect();
12130
12244
  }
12131
- this.element.trigger =
12132
- this.element.triggerElement ||
12133
- this.element.shadowRoot.querySelector("#trigger") ||
12134
- this.element.trigger;
12135
- this.element.bib =
12136
- this.element.shadowRoot.querySelector("#bib") || this.element.bib;
12137
- this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
12138
- this.element.triggerChevron =
12139
- this.element.shadowRoot.querySelector("#showStateIcon");
12245
+ element.trigger =
12246
+ element.triggerElement ||
12247
+ element.shadowRoot?.querySelector("#trigger") ||
12248
+ element.trigger;
12249
+ element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
12250
+ element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
12251
+ element.triggerChevron =
12252
+ element.shadowRoot?.querySelector("#showStateIcon");
12140
12253
 
12141
- if (this.element.floaterConfig) {
12142
- this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
12254
+ if (element.floaterConfig) {
12255
+ element.hoverToggle = element.floaterConfig.hoverToggle;
12143
12256
  }
12144
12257
 
12145
12258
  this.regenerateBibId();
12146
12259
  this.handleTriggerTabIndex();
12147
12260
 
12148
12261
  this.handleEvent = this.handleEvent.bind(this);
12149
- if (this.element.trigger) {
12262
+ if (element.trigger) {
12150
12263
  if (this.enableKeyboardHandling) {
12151
- this.element.trigger.addEventListener("keydown", this.handleEvent);
12264
+ element.trigger.addEventListener("keydown", this.handleEvent);
12152
12265
  }
12153
- this.element.trigger.addEventListener("click", this.handleEvent);
12154
- this.element.trigger.addEventListener("mouseenter", this.handleEvent);
12155
- this.element.trigger.addEventListener("mouseleave", this.handleEvent);
12156
- this.element.trigger.addEventListener("focus", this.handleEvent);
12157
- this.element.trigger.addEventListener("blur", this.handleEvent);
12266
+ element.trigger.addEventListener("click", this.handleEvent);
12267
+ element.trigger.addEventListener("mouseenter", this.handleEvent);
12268
+ element.trigger.addEventListener("mouseleave", this.handleEvent);
12269
+ element.trigger.addEventListener("focus", this.handleEvent);
12270
+ element.trigger.addEventListener("blur", this.handleEvent);
12158
12271
  }
12159
12272
  }
12160
12273
 
12161
12274
  disconnect() {
12162
12275
  this.cleanupHideHandlers();
12163
- if (this.element) {
12164
- this.element.cleanup?.();
12165
12276
 
12166
- if (this.element.bib) {
12167
- this.element.shadowRoot.append(this.element.bib);
12168
- }
12277
+ const element = this.element;
12278
+ if (!element) {
12279
+ return;
12280
+ }
12169
12281
 
12170
- // Remove event & keyboard listeners
12171
- if (this.element?.trigger) {
12172
- this.element.trigger.removeEventListener("keydown", this.handleEvent);
12173
- this.element.trigger.removeEventListener("click", this.handleEvent);
12174
- this.element.trigger.removeEventListener(
12175
- "mouseenter",
12176
- this.handleEvent,
12177
- );
12178
- this.element.trigger.removeEventListener(
12179
- "mouseleave",
12180
- this.handleEvent,
12181
- );
12182
- this.element.trigger.removeEventListener("focus", this.handleEvent);
12183
- this.element.trigger.removeEventListener("blur", this.handleEvent);
12184
- }
12282
+ element.cleanup?.();
12283
+
12284
+ if (element.bib && element.shadowRoot) {
12285
+ element.shadowRoot.append(element.bib);
12286
+ }
12287
+
12288
+ // Remove event & keyboard listeners
12289
+ if (element.trigger) {
12290
+ element.trigger.removeEventListener("keydown", this.handleEvent);
12291
+ element.trigger.removeEventListener("click", this.handleEvent);
12292
+ element.trigger.removeEventListener("mouseenter", this.handleEvent);
12293
+ element.trigger.removeEventListener("mouseleave", this.handleEvent);
12294
+ element.trigger.removeEventListener("focus", this.handleEvent);
12295
+ element.trigger.removeEventListener("blur", this.handleEvent);
12185
12296
  }
12186
12297
  }
12187
12298
  }
@@ -12638,7 +12749,7 @@ var iconVersion$2 = '9.1.2';
12638
12749
  * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
12639
12750
  * isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
12640
12751
  */
12641
- function createDisplayContext(component, options = {}) {
12752
+ function createDisplayContext$1(component, options = {}) {
12642
12753
  const dd = options.dropdown || component.dropdown;
12643
12754
  // isPopoverVisible reflects as the `open` attribute.
12644
12755
  // It reports whether the bib is open in any mode (popover or modal).
@@ -12668,11 +12779,11 @@ function createDisplayContext(component, options = {}) {
12668
12779
  * @param {Object} strategy - Map of key names to handler functions.
12669
12780
  * @param {Object} [options] - Optional config passed to createDisplayContext.
12670
12781
  */
12671
- function applyKeyboardStrategy(component, strategy, options = {}) {
12782
+ function applyKeyboardStrategy$1(component, strategy, options = {}) {
12672
12783
  component.addEventListener('keydown', async (evt) => {
12673
12784
  const handler = strategy[evt.key] || strategy.default;
12674
12785
  if (typeof handler === 'function') {
12675
- const ctx = createDisplayContext(component, options);
12786
+ const ctx = createDisplayContext$1(component, options);
12676
12787
  await handler(component, evt, ctx);
12677
12788
  }
12678
12789
  });
@@ -12907,7 +13018,7 @@ class AuroDropdownBib extends LitElement {
12907
13018
 
12908
13019
  const dialog = this.shadowRoot.querySelector('dialog');
12909
13020
  this._setupCancelHandler(dialog);
12910
- applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
13021
+ applyKeyboardStrategy$1(dialog, createDropdownBibKeyboardStrategy());
12911
13022
 
12912
13023
  this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
12913
13024
  bubbles: true,
@@ -13309,7 +13420,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
13309
13420
  }
13310
13421
  };
13311
13422
 
13312
- var formkitVersion$1 = '202604072212';
13423
+ var formkitVersion$1 = '202604091759';
13313
13424
 
13314
13425
  let AuroElement$2 = class AuroElement extends LitElement {
13315
13426
  static get properties() {
@@ -13415,7 +13526,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
13415
13526
  }
13416
13527
  };
13417
13528
 
13418
- // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
13529
+ // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
13419
13530
  // See LICENSE in the project root for license information.
13420
13531
 
13421
13532
 
@@ -21058,7 +21169,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
21058
21169
  }
21059
21170
  };
21060
21171
 
21061
- var formkitVersion = '202604072212';
21172
+ var formkitVersion = '202604091759';
21062
21173
 
21063
21174
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
21064
21175
  // See LICENSE in the project root for license information.
@@ -22255,7 +22366,88 @@ function guardTouchPassthrough(element) {
22255
22366
  }, { once: true });
22256
22367
  }
22257
22368
 
22258
- // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
22369
+ /**
22370
+ * Computes display state once per keydown event.
22371
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
22372
+ *
22373
+ * @param {HTMLElement} component - The component with a dropdown reference.
22374
+ * @param {Object} [options] - Optional config.
22375
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
22376
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
22377
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
22378
+ * isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
22379
+ */
22380
+ function createDisplayContext(component, options = {}) {
22381
+ const dd = options.dropdown || component.dropdown;
22382
+ // isPopoverVisible reflects as the `open` attribute.
22383
+ // It reports whether the bib is open in any mode (popover or modal).
22384
+ const isExpanded = Boolean(dd && dd.isPopoverVisible);
22385
+ const isFullscreen = Boolean(dd && dd.isBibFullscreen);
22386
+
22387
+ const ctx = {
22388
+ isExpanded,
22389
+ isModal: isFullscreen,
22390
+ isPopover: !isFullscreen,
22391
+ activeInput: null,
22392
+ };
22393
+
22394
+ if (options.inputResolver) {
22395
+ const resolvedInput = options.inputResolver(component, ctx);
22396
+ // Guard against resolvers returning undefined or non-HTMLElement values.
22397
+ ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
22398
+ }
22399
+
22400
+ return ctx;
22401
+ }
22402
+
22403
+ /**
22404
+ * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
22405
+ * Handles both sync and async handlers.
22406
+ * @param {HTMLElement} component - The component to attach the listener to.
22407
+ * @param {Object} strategy - Map of key names to handler functions.
22408
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
22409
+ */
22410
+ function applyKeyboardStrategy(component, strategy, options = {}) {
22411
+ component.addEventListener('keydown', async (evt) => {
22412
+ const handler = strategy[evt.key] || strategy.default;
22413
+ if (typeof handler === 'function') {
22414
+ const ctx = createDisplayContext(component, options);
22415
+ await handler(component, evt, ctx);
22416
+ }
22417
+ });
22418
+ }
22419
+
22420
+ // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
22421
+ // See LICENSE in the project root for license information.
22422
+
22423
+ // Authoritative datepicker keyboard behavior spec:
22424
+ // components/datepicker/docs/partials/keyboardBehavior.md
22425
+ //
22426
+ // Current behavior (transitional — full bib keyboard navigation is planned for a future iteration):
22427
+ // - The bib opens and closes via pointer/touch interaction only.
22428
+ // - Escape closes the bib and prevents the event from reaching parent containers.
22429
+ // - Tab uses the browser's default tabindex sequence across trigger controls.
22430
+ // - Enter and Space do not open or close the bib.
22431
+ //
22432
+ // This file is an intentional placeholder for most keys. When datepicker bib keyboard navigation is
22433
+ // added, handlers should go here following the same strategy pattern used by
22434
+ // auro-select (selectKeyboardStrategy.js) and auro-combobox (comboboxKeyboardStrategy.js).
22435
+ const datepickerKeyboardStrategy = {
22436
+ Escape(component, evt) {
22437
+ if (!component.dropdown || !component.dropdown.isPopoverVisible) {
22438
+ return;
22439
+ }
22440
+
22441
+ // Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups.
22442
+ // Because stopPropagation prevents the document-level floatingUI keydown handler from
22443
+ // seeing this event, we must also close the dropdown explicitly.
22444
+ evt.stopPropagation();
22445
+
22446
+ component.dropdown.hide();
22447
+ },
22448
+ };
22449
+
22450
+ // Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
22259
22451
  // See LICENSE in the project root for license information.
22260
22452
 
22261
22453
 
@@ -23712,6 +23904,7 @@ class AuroDatePicker extends AuroElement {
23712
23904
  this.configureCalendar();
23713
23905
  this.configureDatepicker();
23714
23906
  this.configureClickHandler();
23907
+ applyKeyboardStrategy(this, datepickerKeyboardStrategy);
23715
23908
  }
23716
23909
 
23717
23910
  connectedCallback() {