@aurodesignsystem-dev/auro-formkit 0.0.0-pr1422.2 → 0.0.0-pr1424.0

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 (38) hide show
  1. package/CHANGELOG.md +2 -2
  2. package/README.md +183 -133
  3. package/components/checkbox/demo/api.min.js +1 -1
  4. package/components/checkbox/demo/index.min.js +1 -1
  5. package/components/checkbox/dist/index.js +1 -1
  6. package/components/checkbox/dist/registered.js +1 -1
  7. package/components/combobox/demo/api.min.js +165 -276
  8. package/components/combobox/demo/index.min.js +165 -276
  9. package/components/combobox/dist/index.js +165 -276
  10. package/components/combobox/dist/registered.js +165 -276
  11. package/components/counter/demo/api.min.js +164 -275
  12. package/components/counter/demo/index.min.js +164 -275
  13. package/components/counter/dist/index.js +164 -275
  14. package/components/counter/dist/registered.js +164 -275
  15. package/components/datepicker/demo/api.min.js +165 -276
  16. package/components/datepicker/demo/index.min.js +165 -276
  17. package/components/datepicker/dist/index.js +165 -276
  18. package/components/datepicker/dist/registered.js +165 -276
  19. package/components/dropdown/demo/api.min.js +164 -275
  20. package/components/dropdown/demo/index.min.js +164 -275
  21. package/components/dropdown/dist/index.js +164 -275
  22. package/components/dropdown/dist/registered.js +164 -275
  23. package/components/form/demo/api.md +460 -76
  24. package/components/form/demo/api.min.js +661 -1105
  25. package/components/form/demo/index.min.js +661 -1105
  26. package/components/input/demo/api.min.js +1 -1
  27. package/components/input/demo/index.min.js +1 -1
  28. package/components/input/dist/index.js +1 -1
  29. package/components/input/dist/registered.js +1 -1
  30. package/components/radio/demo/api.min.js +1 -1
  31. package/components/radio/demo/index.min.js +1 -1
  32. package/components/radio/dist/index.js +1 -1
  33. package/components/radio/dist/registered.js +1 -1
  34. package/components/select/demo/api.min.js +164 -275
  35. package/components/select/demo/index.min.js +164 -275
  36. package/components/select/dist/index.js +164 -275
  37. package/components/select/dist/registered.js +164 -275
  38. package/package.json +3 -3
@@ -7470,7 +7470,7 @@ let AuroHelpText$8 = class AuroHelpText extends i$4 {
7470
7470
  }
7471
7471
  };
7472
7472
 
7473
- var formkitVersion$8 = '202604071818';
7473
+ var formkitVersion$8 = '202604072118';
7474
7474
 
7475
7475
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
7476
7476
  // See LICENSE in the project root for license information.
@@ -17392,7 +17392,7 @@ let AuroBibtemplate$3 = class AuroBibtemplate extends i$4 {
17392
17392
  }
17393
17393
  };
17394
17394
 
17395
- var formkitVersion$2$1 = '202604071818';
17395
+ var formkitVersion$2$1 = '202604072118';
17396
17396
 
17397
17397
  let l$1$2 = 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$3`${s$6(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1$2 = 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$2 = 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$3=i$7`: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}
17398
17398
  `,u$4$2=i$7`.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}}
@@ -19702,19 +19702,11 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
19702
19702
  * This ensures that the bib content has the same dimensions as the sizer element.
19703
19703
  */
19704
19704
  mirrorSize() {
19705
- const element = this.element;
19706
- if (!element) {
19707
- return;
19708
- }
19709
-
19710
19705
  // mirror the boxsize from bibSizer
19711
- if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
19712
- const sizerStyle = window.getComputedStyle(element.bibSizer);
19713
- const bibContent = element.bib.shadowRoot.querySelector(".container");
19714
- if (!bibContent) {
19715
- return;
19716
- }
19717
-
19706
+ if (this.element.bibSizer && this.element.matchWidth) {
19707
+ const sizerStyle = window.getComputedStyle(this.element.bibSizer);
19708
+ const bibContent =
19709
+ this.element.bib.shadowRoot.querySelector(".container");
19718
19710
  if (sizerStyle.width !== "0px") {
19719
19711
  bibContent.style.width = sizerStyle.width;
19720
19712
  }
@@ -19736,14 +19728,9 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
19736
19728
  * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
19737
19729
  */
19738
19730
  getPositioningStrategy() {
19739
- const element = this.element;
19740
- if (!element) {
19741
- return "floating";
19742
- }
19743
-
19744
19731
  const breakpoint =
19745
- element.bib?.mobileFullscreenBreakpoint ||
19746
- element.floaterConfig?.fullscreenBreakpoint;
19732
+ this.element.bib.mobileFullscreenBreakpoint ||
19733
+ this.element.floaterConfig?.fullscreenBreakpoint;
19747
19734
  switch (this.behavior) {
19748
19735
  case "tooltip":
19749
19736
  return "floating";
@@ -19754,9 +19741,9 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
19754
19741
  `(max-width: ${breakpoint})`,
19755
19742
  ).matches;
19756
19743
 
19757
- element.expanded = smallerThanBreakpoint;
19744
+ this.element.expanded = smallerThanBreakpoint;
19758
19745
  }
19759
- if (element.nested) {
19746
+ if (this.element.nested) {
19760
19747
  return "cover";
19761
19748
  }
19762
19749
  return "fullscreen";
@@ -19786,65 +19773,42 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
19786
19773
  * and applies the calculated position to the bib's style.
19787
19774
  */
19788
19775
  position() {
19789
- const element = this.element;
19790
- if (!element) {
19791
- return;
19792
- }
19793
-
19794
19776
  const strategy = this.getPositioningStrategy();
19795
19777
  this.configureBibStrategy(strategy);
19796
19778
 
19797
19779
  if (strategy === "floating") {
19798
- if (!element.trigger || !element.bib) {
19799
- return;
19800
- }
19801
-
19802
19780
  this.mirrorSize();
19803
19781
  // Define the middlware for the floater configuration
19804
19782
  const middleware = [
19805
- offset$4(element.floaterConfig?.offset || 0),
19806
- ...(element.floaterConfig?.shift ? [shift$4()] : []), // Add shift middleware if shift is enabled.
19807
- ...(element.floaterConfig?.flip ? [flip$4()] : []), // Add flip middleware if flip is enabled.
19808
- ...(element.floaterConfig?.autoPlacement ? [autoPlacement$4()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
19783
+ offset$4(this.element.floaterConfig?.offset || 0),
19784
+ ...(this.element.floaterConfig?.shift ? [shift$4()] : []), // Add shift middleware if shift is enabled.
19785
+ ...(this.element.floaterConfig?.flip ? [flip$4()] : []), // Add flip middleware if flip is enabled.
19786
+ ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement$4()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
19809
19787
  ];
19810
19788
 
19811
19789
  // Compute the position of the bib
19812
- computePosition$4(element.trigger, element.bib, {
19813
- strategy: element.floaterConfig?.strategy || "fixed",
19814
- placement: element.floaterConfig?.placement,
19790
+ computePosition$4(this.element.trigger, this.element.bib, {
19791
+ strategy: this.element.floaterConfig?.strategy || "fixed",
19792
+ placement: this.element.floaterConfig?.placement,
19815
19793
  middleware: middleware || [],
19816
19794
  }).then(({ x, y }) => {
19817
19795
  // eslint-disable-line id-length
19818
- const currentElement = this.element;
19819
- if (!currentElement?.bib) {
19820
- return;
19821
- }
19822
-
19823
- Object.assign(currentElement.bib.style, {
19796
+ Object.assign(this.element.bib.style, {
19824
19797
  left: `${x}px`,
19825
19798
  top: `${y}px`,
19826
19799
  });
19827
19800
  });
19828
19801
  } else if (strategy === "cover") {
19829
- if (!element.parentNode || !element.bib) {
19830
- return;
19831
- }
19832
-
19833
19802
  // Compute the position of the bib
19834
- computePosition$4(element.parentNode, element.bib, {
19803
+ computePosition$4(this.element.parentNode, this.element.bib, {
19835
19804
  placement: "bottom-start",
19836
19805
  }).then(({ x, y }) => {
19837
19806
  // eslint-disable-line id-length
19838
- const currentElement = this.element;
19839
- if (!currentElement?.bib || !currentElement.parentNode) {
19840
- return;
19841
- }
19842
-
19843
- Object.assign(currentElement.bib.style, {
19807
+ Object.assign(this.element.bib.style, {
19844
19808
  left: `${x}px`,
19845
- top: `${y - currentElement.parentNode.offsetHeight}px`,
19846
- width: `${currentElement.parentNode.offsetWidth}px`,
19847
- height: `${currentElement.parentNode.offsetHeight}px`,
19809
+ top: `${y - this.element.parentNode.offsetHeight}px`,
19810
+ width: `${this.element.parentNode.offsetWidth}px`,
19811
+ height: `${this.element.parentNode.offsetHeight}px`,
19848
19812
  });
19849
19813
  });
19850
19814
  }
@@ -19856,17 +19820,11 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
19856
19820
  * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
19857
19821
  */
19858
19822
  lockScroll(lock = true) {
19859
- const element = this.element;
19860
-
19861
19823
  if (lock) {
19862
- if (!element?.bib) {
19863
- return;
19864
- }
19865
-
19866
19824
  document.body.style.overflow = "hidden"; // hide body's scrollbar
19867
19825
 
19868
19826
  // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
19869
- element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
19827
+ this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
19870
19828
  } else {
19871
19829
  document.body.style.overflow = "";
19872
19830
  }
@@ -19882,24 +19840,20 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
19882
19840
  * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
19883
19841
  */
19884
19842
  configureBibStrategy(value) {
19885
- const element = this.element;
19886
- if (!element?.bib) {
19887
- return;
19888
- }
19889
-
19890
19843
  if (value === "fullscreen") {
19891
- element.isBibFullscreen = true;
19844
+ this.element.isBibFullscreen = true;
19892
19845
  // reset the prev position
19893
- element.bib.setAttribute("isfullscreen", "");
19894
- element.bib.style.position = "fixed";
19895
- element.bib.style.top = "0px";
19896
- element.bib.style.left = "0px";
19897
- element.bib.style.width = "";
19898
- element.bib.style.height = "";
19899
- element.style.contain = "";
19846
+ this.element.bib.setAttribute("isfullscreen", "");
19847
+ this.element.bib.style.position = "fixed";
19848
+ this.element.bib.style.top = "0px";
19849
+ this.element.bib.style.left = "0px";
19850
+ this.element.bib.style.width = "";
19851
+ this.element.bib.style.height = "";
19852
+ this.element.style.contain = "";
19900
19853
 
19901
19854
  // reset the size that was mirroring `size` css-part
19902
- const bibContent = element.bib.shadowRoot?.querySelector(".container");
19855
+ const bibContent =
19856
+ this.element.bib.shadowRoot.querySelector(".container");
19903
19857
  if (bibContent) {
19904
19858
  bibContent.style.width = "";
19905
19859
  bibContent.style.height = "";
@@ -19914,14 +19868,14 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
19914
19868
  }, 0);
19915
19869
  }
19916
19870
 
19917
- if (element.isPopoverVisible) {
19871
+ if (this.element.isPopoverVisible) {
19918
19872
  this.lockScroll(true);
19919
19873
  }
19920
19874
  } else {
19921
- element.bib.style.position = "";
19922
- element.bib.removeAttribute("isfullscreen");
19923
- element.isBibFullscreen = false;
19924
- element.style.contain = "layout";
19875
+ this.element.bib.style.position = "";
19876
+ this.element.bib.removeAttribute("isfullscreen");
19877
+ this.element.isBibFullscreen = false;
19878
+ this.element.style.contain = "layout";
19925
19879
  }
19926
19880
 
19927
19881
  const isChanged = this.strategy && this.strategy !== value;
@@ -19939,21 +19893,16 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
19939
19893
  },
19940
19894
  );
19941
19895
 
19942
- element.dispatchEvent(event);
19896
+ this.element.dispatchEvent(event);
19943
19897
  }
19944
19898
  }
19945
19899
 
19946
19900
  updateState() {
19947
- const element = this.element;
19948
- if (!element) {
19949
- return;
19950
- }
19951
-
19952
- const isVisible = element.isPopoverVisible;
19901
+ const isVisible = this.element.isPopoverVisible;
19953
19902
  if (!isVisible) {
19954
19903
  this.cleanupHideHandlers();
19955
19904
  try {
19956
- element.cleanup?.();
19905
+ this.element.cleanup?.();
19957
19906
  } catch (error) {
19958
19907
  // Do nothing
19959
19908
  }
@@ -19969,30 +19918,28 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
19969
19918
  * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
19970
19919
  */
19971
19920
  handleFocusLoss() {
19972
- const element = this.element;
19973
- if (!element?.bib) {
19974
- return;
19975
- }
19976
-
19977
19921
  // if mouse is being pressed, skip and let click event to handle the action
19978
19922
  if (AuroFloatingUI.isMousePressed) {
19979
19923
  return;
19980
19924
  }
19981
19925
 
19982
19926
  if (
19983
- element.noHideOnThisFocusLoss ||
19984
- element.hasAttribute("noHideOnThisFocusLoss")
19927
+ this.element.noHideOnThisFocusLoss ||
19928
+ this.element.hasAttribute("noHideOnThisFocusLoss")
19985
19929
  ) {
19986
19930
  return;
19987
19931
  }
19988
19932
 
19989
19933
  // if focus is still inside of trigger or bib, do not close
19990
- if (element.matches(":focus") || element.matches(":focus-within")) {
19934
+ if (
19935
+ this.element.matches(":focus") ||
19936
+ this.element.matches(":focus-within")
19937
+ ) {
19991
19938
  return;
19992
19939
  }
19993
19940
 
19994
19941
  // if fullscreen bib is in fullscreen mode, do not close
19995
- if (element.bib.hasAttribute("isfullscreen")) {
19942
+ if (this.element.bib.hasAttribute("isfullscreen")) {
19996
19943
  return;
19997
19944
  }
19998
19945
 
@@ -20000,33 +19947,23 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20000
19947
  }
20001
19948
 
20002
19949
  setupHideHandlers() {
20003
- const element = this.element;
20004
- if (!element) {
20005
- return;
20006
- }
20007
-
20008
19950
  // Define handlers & store references
20009
19951
  this.focusHandler = () => this.handleFocusLoss();
20010
19952
 
20011
19953
  this.clickHandler = (evt) => {
20012
- const element = this.element;
20013
- if (!element?.bib) {
20014
- return;
20015
- }
20016
-
20017
19954
  // When the bib is fullscreen (modal dialog), don't close on outside
20018
19955
  // clicks. VoiceOver's synthetic click events inside a top-layer modal
20019
19956
  // <dialog> may not include the bib in composedPath(), causing false
20020
19957
  // positives. This mirrors the fullscreen guard in handleFocusLoss().
20021
- if (element.bib.hasAttribute("isfullscreen")) {
19958
+ if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
20022
19959
  return;
20023
19960
  }
20024
19961
 
20025
19962
  if (
20026
- (!evt.composedPath().includes(element.trigger) &&
20027
- !evt.composedPath().includes(element.bib)) ||
20028
- (element.bib.backdrop &&
20029
- evt.composedPath().includes(element.bib.backdrop))
19963
+ (!evt.composedPath().includes(this.element.trigger) &&
19964
+ !evt.composedPath().includes(this.element.bib)) ||
19965
+ (this.element.bib.backdrop &&
19966
+ evt.composedPath().includes(this.element.bib.backdrop))
20030
19967
  ) {
20031
19968
  const existedVisibleFloatingUI =
20032
19969
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -20047,12 +19984,7 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20047
19984
 
20048
19985
  // ESC key handler
20049
19986
  this.keyDownHandler = (evt) => {
20050
- const element = this.element;
20051
- if (!element) {
20052
- return;
20053
- }
20054
-
20055
- if (evt.key === "Escape" && element.isPopoverVisible) {
19987
+ if (evt.key === "Escape" && this.element.isPopoverVisible) {
20056
19988
  const existedVisibleFloatingUI =
20057
19989
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
20058
19990
  if (
@@ -20109,10 +20041,6 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20109
20041
  }
20110
20042
 
20111
20043
  updateCurrentExpandedDropdown() {
20112
- if (!this.element) {
20113
- return;
20114
- }
20115
-
20116
20044
  // Close any other dropdown that is already open
20117
20045
  const existedVisibleFloatingUI =
20118
20046
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -20129,34 +20057,25 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20129
20057
  }
20130
20058
 
20131
20059
  showBib() {
20132
- const element = this.element;
20133
- if (!element) {
20134
- return;
20135
- }
20136
-
20137
- if (!element.bib || (!element.trigger && !element.parentNode)) {
20138
- return;
20139
- }
20140
-
20141
- if (!element.disabled && !this.showing) {
20060
+ if (!this.element.disabled && !this.showing) {
20142
20061
  this.updateCurrentExpandedDropdown();
20143
- element.triggerChevron?.setAttribute("data-expanded", true);
20062
+ this.element.triggerChevron?.setAttribute("data-expanded", true);
20144
20063
 
20145
20064
  // prevent double showing: isPopovervisible gets first and showBib gets called later
20146
20065
  if (!this.showing) {
20147
- if (!element.modal) {
20066
+ if (!this.element.modal) {
20148
20067
  this.setupHideHandlers();
20149
20068
  }
20150
20069
  this.showing = true;
20151
- element.isPopoverVisible = true;
20070
+ this.element.isPopoverVisible = true;
20152
20071
  this.position();
20153
20072
  this.dispatchEventDropdownToggle();
20154
20073
  }
20155
20074
 
20156
20075
  // Setup auto update to handle resize and scroll
20157
- element.cleanup = autoUpdate$3(
20158
- element.trigger || element.parentNode,
20159
- element.bib,
20076
+ this.element.cleanup = autoUpdate$3(
20077
+ this.element.trigger || this.element.parentNode,
20078
+ this.element.bib,
20160
20079
  () => {
20161
20080
  this.position();
20162
20081
  },
@@ -20169,27 +20088,22 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20169
20088
  * @param {String} eventType - The event type that triggered the hiding action.
20170
20089
  */
20171
20090
  hideBib(eventType = "unknown") {
20172
- const element = this.element;
20173
- if (!element) {
20174
- return;
20175
- }
20176
-
20177
- if (element.disabled) {
20091
+ if (this.element.disabled) {
20178
20092
  return;
20179
20093
  }
20180
20094
 
20181
20095
  // noToggle dropdowns should not close when the trigger is clicked (the
20182
20096
  // "toggle" behavior), but they CAN still close via other interactions like
20183
20097
  // Escape key or focus loss.
20184
- if (element.noToggle && eventType === "click") {
20098
+ if (this.element.noToggle && eventType === "click") {
20185
20099
  return;
20186
20100
  }
20187
20101
 
20188
20102
  this.lockScroll(false);
20189
- element.triggerChevron?.removeAttribute("data-expanded");
20103
+ this.element.triggerChevron?.removeAttribute("data-expanded");
20190
20104
 
20191
- if (element.isPopoverVisible) {
20192
- element.isPopoverVisible = false;
20105
+ if (this.element.isPopoverVisible) {
20106
+ this.element.isPopoverVisible = false;
20193
20107
  }
20194
20108
  if (this.showing) {
20195
20109
  this.cleanupHideHandlers();
@@ -20209,11 +20123,6 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20209
20123
  * @param {String} eventType - The event type that triggered the toggle action.
20210
20124
  */
20211
20125
  dispatchEventDropdownToggle(eventType) {
20212
- const element = this.element;
20213
- if (!element) {
20214
- return;
20215
- }
20216
-
20217
20126
  const event = new CustomEvent(
20218
20127
  this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
20219
20128
  {
@@ -20225,16 +20134,11 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20225
20134
  },
20226
20135
  );
20227
20136
 
20228
- element.dispatchEvent(event);
20137
+ this.element.dispatchEvent(event);
20229
20138
  }
20230
20139
 
20231
20140
  handleClick() {
20232
- const element = this.element;
20233
- if (!element) {
20234
- return;
20235
- }
20236
-
20237
- if (element.isPopoverVisible) {
20141
+ if (this.element.isPopoverVisible) {
20238
20142
  this.hideBib("click");
20239
20143
  } else {
20240
20144
  this.showBib();
@@ -20245,66 +20149,63 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20245
20149
  {
20246
20150
  composed: true,
20247
20151
  detail: {
20248
- expanded: element.isPopoverVisible,
20152
+ expanded: this.element.isPopoverVisible,
20249
20153
  },
20250
20154
  },
20251
20155
  );
20252
20156
 
20253
- element.dispatchEvent(event);
20157
+ this.element.dispatchEvent(event);
20254
20158
  }
20255
20159
 
20256
20160
  handleEvent(event) {
20257
- const element = this.element;
20258
- if (!element || element.disableEventShow) {
20259
- return;
20260
- }
20261
-
20262
- switch (event.type) {
20263
- case "keydown": {
20264
- // Support both Enter and Space keys for accessibility
20265
- // Space is included as it's expected behavior for interactive elements
20266
-
20267
- const origin = event.composedPath()[0];
20268
- if (
20269
- event.key === "Enter" ||
20270
- (event.key === " " && (!origin || origin.tagName !== "INPUT"))
20271
- ) {
20272
- event.preventDefault();
20273
- this.handleClick();
20161
+ if (!this.element.disableEventShow) {
20162
+ switch (event.type) {
20163
+ case "keydown": {
20164
+ // Support both Enter and Space keys for accessibility
20165
+ // Space is included as it's expected behavior for interactive elements
20166
+
20167
+ const origin = event.composedPath()[0];
20168
+ if (
20169
+ event.key === "Enter" ||
20170
+ (event.key === " " && (!origin || origin.tagName !== "INPUT"))
20171
+ ) {
20172
+ event.preventDefault();
20173
+ this.handleClick();
20174
+ }
20175
+ break;
20274
20176
  }
20275
- break;
20177
+ case "mouseenter":
20178
+ if (this.element.hoverToggle) {
20179
+ this.showBib();
20180
+ }
20181
+ break;
20182
+ case "mouseleave":
20183
+ if (this.element.hoverToggle) {
20184
+ this.hideBib("mouseleave");
20185
+ }
20186
+ break;
20187
+ case "focus":
20188
+ if (this.element.focusShow) {
20189
+ /*
20190
+ This needs to better handle clicking that gives focus -
20191
+ currently it shows and then immediately hides the bib
20192
+ */
20193
+ this.showBib();
20194
+ }
20195
+ break;
20196
+ case "blur":
20197
+ // send this task 100ms later queue to
20198
+ // wait a frame in case focus moves within the floating element/bib
20199
+ setTimeout(() => this.handleFocusLoss(), 0);
20200
+ break;
20201
+ case "click":
20202
+ if (document.activeElement === document.body) {
20203
+ event.currentTarget.focus();
20204
+ }
20205
+ this.handleClick();
20206
+ break;
20207
+ // Do nothing
20276
20208
  }
20277
- case "mouseenter":
20278
- if (element.hoverToggle) {
20279
- this.showBib();
20280
- }
20281
- break;
20282
- case "mouseleave":
20283
- if (element.hoverToggle) {
20284
- this.hideBib("mouseleave");
20285
- }
20286
- break;
20287
- case "focus":
20288
- if (element.focusShow) {
20289
- /*
20290
- This needs to better handle clicking that gives focus -
20291
- currently it shows and then immediately hides the bib
20292
- */
20293
- this.showBib();
20294
- }
20295
- break;
20296
- case "blur":
20297
- // send this task 100ms later queue to
20298
- // wait a frame in case focus moves within the floating element/bib
20299
- setTimeout(() => this.handleFocusLoss(), 0);
20300
- break;
20301
- case "click":
20302
- if (document.activeElement === document.body) {
20303
- event.currentTarget.focus();
20304
- }
20305
- this.handleClick();
20306
- break;
20307
- // Do nothing
20308
20209
  }
20309
20210
  }
20310
20211
 
@@ -20315,11 +20216,6 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20315
20216
  * This prevents the component itself from being focusable when the trigger element already handles focus.
20316
20217
  */
20317
20218
  handleTriggerTabIndex() {
20318
- const element = this.element;
20319
- if (!element) {
20320
- return;
20321
- }
20322
-
20323
20219
  const focusableElementSelectors = [
20324
20220
  "a",
20325
20221
  "button",
@@ -20332,7 +20228,7 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20332
20228
  "auro-hyperlink",
20333
20229
  ];
20334
20230
 
20335
- const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
20231
+ const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
20336
20232
  if (!triggerNode) {
20337
20233
  return;
20338
20234
  }
@@ -20341,13 +20237,13 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20341
20237
  focusableElementSelectors.forEach((selector) => {
20342
20238
  // Check if the trigger node element is focusable
20343
20239
  if (triggerNodeTagName === selector) {
20344
- element.tabIndex = -1;
20240
+ this.element.tabIndex = -1;
20345
20241
  return;
20346
20242
  }
20347
20243
 
20348
20244
  // Check if any child is focusable
20349
20245
  if (triggerNode.querySelector(selector)) {
20350
- element.tabIndex = -1;
20246
+ this.element.tabIndex = -1;
20351
20247
  }
20352
20248
  });
20353
20249
  }
@@ -20357,18 +20253,13 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20357
20253
  * @param {*} eventPrefix
20358
20254
  */
20359
20255
  regenerateBibId() {
20360
- const element = this.element;
20361
- if (!element) {
20362
- return;
20363
- }
20364
-
20365
- this.id = element.getAttribute("id");
20256
+ this.id = this.element.getAttribute("id");
20366
20257
  if (!this.id) {
20367
20258
  this.id = window.crypto.randomUUID();
20368
- element.setAttribute("id", this.id);
20259
+ this.element.setAttribute("id", this.id);
20369
20260
  }
20370
20261
 
20371
- element.bib?.setAttribute("id", `${this.id}-floater-bib`);
20262
+ this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
20372
20263
  }
20373
20264
 
20374
20265
  configure(elem, eventPrefix, enableKeyboardHandling = true) {
@@ -20380,69 +20271,67 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
20380
20271
  this.element = elem;
20381
20272
  }
20382
20273
 
20383
- const element = this.element;
20384
- if (!element) {
20385
- return;
20274
+ if (this.behavior !== this.element.behavior) {
20275
+ this.behavior = this.element.behavior;
20386
20276
  }
20387
20277
 
20388
- if (this.behavior !== element.behavior) {
20389
- this.behavior = element.behavior;
20390
- }
20391
-
20392
- if (element.trigger) {
20278
+ if (this.element.trigger) {
20393
20279
  this.disconnect();
20394
20280
  }
20395
- element.trigger =
20396
- element.triggerElement ||
20397
- element.shadowRoot?.querySelector("#trigger") ||
20398
- element.trigger;
20399
- element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
20400
- element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
20401
- element.triggerChevron =
20402
- element.shadowRoot?.querySelector("#showStateIcon");
20281
+ this.element.trigger =
20282
+ this.element.triggerElement ||
20283
+ this.element.shadowRoot.querySelector("#trigger") ||
20284
+ this.element.trigger;
20285
+ this.element.bib =
20286
+ this.element.shadowRoot.querySelector("#bib") || this.element.bib;
20287
+ this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
20288
+ this.element.triggerChevron =
20289
+ this.element.shadowRoot.querySelector("#showStateIcon");
20403
20290
 
20404
- if (element.floaterConfig) {
20405
- element.hoverToggle = element.floaterConfig.hoverToggle;
20291
+ if (this.element.floaterConfig) {
20292
+ this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
20406
20293
  }
20407
20294
 
20408
20295
  this.regenerateBibId();
20409
20296
  this.handleTriggerTabIndex();
20410
20297
 
20411
20298
  this.handleEvent = this.handleEvent.bind(this);
20412
- if (element.trigger) {
20299
+ if (this.element.trigger) {
20413
20300
  if (this.enableKeyboardHandling) {
20414
- element.trigger.addEventListener("keydown", this.handleEvent);
20301
+ this.element.trigger.addEventListener("keydown", this.handleEvent);
20415
20302
  }
20416
- element.trigger.addEventListener("click", this.handleEvent);
20417
- element.trigger.addEventListener("mouseenter", this.handleEvent);
20418
- element.trigger.addEventListener("mouseleave", this.handleEvent);
20419
- element.trigger.addEventListener("focus", this.handleEvent);
20420
- element.trigger.addEventListener("blur", this.handleEvent);
20303
+ this.element.trigger.addEventListener("click", this.handleEvent);
20304
+ this.element.trigger.addEventListener("mouseenter", this.handleEvent);
20305
+ this.element.trigger.addEventListener("mouseleave", this.handleEvent);
20306
+ this.element.trigger.addEventListener("focus", this.handleEvent);
20307
+ this.element.trigger.addEventListener("blur", this.handleEvent);
20421
20308
  }
20422
20309
  }
20423
20310
 
20424
20311
  disconnect() {
20425
20312
  this.cleanupHideHandlers();
20313
+ if (this.element) {
20314
+ this.element.cleanup?.();
20426
20315
 
20427
- const element = this.element;
20428
- if (!element) {
20429
- return;
20430
- }
20431
-
20432
- element.cleanup?.();
20433
-
20434
- if (element.bib && element.shadowRoot) {
20435
- element.shadowRoot.append(element.bib);
20436
- }
20316
+ if (this.element.bib) {
20317
+ this.element.shadowRoot.append(this.element.bib);
20318
+ }
20437
20319
 
20438
- // Remove event & keyboard listeners
20439
- if (element.trigger) {
20440
- element.trigger.removeEventListener("keydown", this.handleEvent);
20441
- element.trigger.removeEventListener("click", this.handleEvent);
20442
- element.trigger.removeEventListener("mouseenter", this.handleEvent);
20443
- element.trigger.removeEventListener("mouseleave", this.handleEvent);
20444
- element.trigger.removeEventListener("focus", this.handleEvent);
20445
- element.trigger.removeEventListener("blur", this.handleEvent);
20320
+ // Remove event & keyboard listeners
20321
+ if (this.element?.trigger) {
20322
+ this.element.trigger.removeEventListener("keydown", this.handleEvent);
20323
+ this.element.trigger.removeEventListener("click", this.handleEvent);
20324
+ this.element.trigger.removeEventListener(
20325
+ "mouseenter",
20326
+ this.handleEvent,
20327
+ );
20328
+ this.element.trigger.removeEventListener(
20329
+ "mouseleave",
20330
+ this.handleEvent,
20331
+ );
20332
+ this.element.trigger.removeEventListener("focus", this.handleEvent);
20333
+ this.element.trigger.removeEventListener("blur", this.handleEvent);
20334
+ }
20446
20335
  }
20447
20336
  }
20448
20337
  };
@@ -21570,7 +21459,7 @@ let AuroHelpText$2$1 = class AuroHelpText extends i$4 {
21570
21459
  }
21571
21460
  };
21572
21461
 
21573
- var formkitVersion$1$3 = '202604071818';
21462
+ var formkitVersion$1$3 = '202604072118';
21574
21463
 
21575
21464
  let AuroElement$2$2 = class AuroElement extends i$4 {
21576
21465
  static get properties() {
@@ -29327,7 +29216,7 @@ let AuroHelpText$1$3 = class AuroHelpText extends i$4 {
29327
29216
  }
29328
29217
  };
29329
29218
 
29330
- var formkitVersion$7 = '202604071818';
29219
+ var formkitVersion$7 = '202604072118';
29331
29220
 
29332
29221
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
29333
29222
  // See LICENSE in the project root for license information.
@@ -33902,7 +33791,7 @@ let AuroHelpText$1$2 = class AuroHelpText extends i$4 {
33902
33791
  }
33903
33792
  };
33904
33793
 
33905
- var formkitVersion$1$2 = '202604071818';
33794
+ var formkitVersion$1$2 = '202604072118';
33906
33795
 
33907
33796
  // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
33908
33797
  // See LICENSE in the project root for license information.
@@ -36200,19 +36089,11 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36200
36089
  * This ensures that the bib content has the same dimensions as the sizer element.
36201
36090
  */
36202
36091
  mirrorSize() {
36203
- const element = this.element;
36204
- if (!element) {
36205
- return;
36206
- }
36207
-
36208
36092
  // mirror the boxsize from bibSizer
36209
- if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
36210
- const sizerStyle = window.getComputedStyle(element.bibSizer);
36211
- const bibContent = element.bib.shadowRoot.querySelector(".container");
36212
- if (!bibContent) {
36213
- return;
36214
- }
36215
-
36093
+ if (this.element.bibSizer && this.element.matchWidth) {
36094
+ const sizerStyle = window.getComputedStyle(this.element.bibSizer);
36095
+ const bibContent =
36096
+ this.element.bib.shadowRoot.querySelector(".container");
36216
36097
  if (sizerStyle.width !== "0px") {
36217
36098
  bibContent.style.width = sizerStyle.width;
36218
36099
  }
@@ -36234,14 +36115,9 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36234
36115
  * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
36235
36116
  */
36236
36117
  getPositioningStrategy() {
36237
- const element = this.element;
36238
- if (!element) {
36239
- return "floating";
36240
- }
36241
-
36242
36118
  const breakpoint =
36243
- element.bib?.mobileFullscreenBreakpoint ||
36244
- element.floaterConfig?.fullscreenBreakpoint;
36119
+ this.element.bib.mobileFullscreenBreakpoint ||
36120
+ this.element.floaterConfig?.fullscreenBreakpoint;
36245
36121
  switch (this.behavior) {
36246
36122
  case "tooltip":
36247
36123
  return "floating";
@@ -36252,9 +36128,9 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36252
36128
  `(max-width: ${breakpoint})`,
36253
36129
  ).matches;
36254
36130
 
36255
- element.expanded = smallerThanBreakpoint;
36131
+ this.element.expanded = smallerThanBreakpoint;
36256
36132
  }
36257
- if (element.nested) {
36133
+ if (this.element.nested) {
36258
36134
  return "cover";
36259
36135
  }
36260
36136
  return "fullscreen";
@@ -36284,65 +36160,42 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36284
36160
  * and applies the calculated position to the bib's style.
36285
36161
  */
36286
36162
  position() {
36287
- const element = this.element;
36288
- if (!element) {
36289
- return;
36290
- }
36291
-
36292
36163
  const strategy = this.getPositioningStrategy();
36293
36164
  this.configureBibStrategy(strategy);
36294
36165
 
36295
36166
  if (strategy === "floating") {
36296
- if (!element.trigger || !element.bib) {
36297
- return;
36298
- }
36299
-
36300
36167
  this.mirrorSize();
36301
36168
  // Define the middlware for the floater configuration
36302
36169
  const middleware = [
36303
- offset$3(element.floaterConfig?.offset || 0),
36304
- ...(element.floaterConfig?.shift ? [shift$3()] : []), // Add shift middleware if shift is enabled.
36305
- ...(element.floaterConfig?.flip ? [flip$3()] : []), // Add flip middleware if flip is enabled.
36306
- ...(element.floaterConfig?.autoPlacement ? [autoPlacement$3()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
36170
+ offset$3(this.element.floaterConfig?.offset || 0),
36171
+ ...(this.element.floaterConfig?.shift ? [shift$3()] : []), // Add shift middleware if shift is enabled.
36172
+ ...(this.element.floaterConfig?.flip ? [flip$3()] : []), // Add flip middleware if flip is enabled.
36173
+ ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement$3()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
36307
36174
  ];
36308
36175
 
36309
36176
  // Compute the position of the bib
36310
- computePosition$3(element.trigger, element.bib, {
36311
- strategy: element.floaterConfig?.strategy || "fixed",
36312
- placement: element.floaterConfig?.placement,
36177
+ computePosition$3(this.element.trigger, this.element.bib, {
36178
+ strategy: this.element.floaterConfig?.strategy || "fixed",
36179
+ placement: this.element.floaterConfig?.placement,
36313
36180
  middleware: middleware || [],
36314
36181
  }).then(({ x, y }) => {
36315
36182
  // eslint-disable-line id-length
36316
- const currentElement = this.element;
36317
- if (!currentElement?.bib) {
36318
- return;
36319
- }
36320
-
36321
- Object.assign(currentElement.bib.style, {
36183
+ Object.assign(this.element.bib.style, {
36322
36184
  left: `${x}px`,
36323
36185
  top: `${y}px`,
36324
36186
  });
36325
36187
  });
36326
36188
  } else if (strategy === "cover") {
36327
- if (!element.parentNode || !element.bib) {
36328
- return;
36329
- }
36330
-
36331
36189
  // Compute the position of the bib
36332
- computePosition$3(element.parentNode, element.bib, {
36190
+ computePosition$3(this.element.parentNode, this.element.bib, {
36333
36191
  placement: "bottom-start",
36334
36192
  }).then(({ x, y }) => {
36335
36193
  // eslint-disable-line id-length
36336
- const currentElement = this.element;
36337
- if (!currentElement?.bib || !currentElement.parentNode) {
36338
- return;
36339
- }
36340
-
36341
- Object.assign(currentElement.bib.style, {
36194
+ Object.assign(this.element.bib.style, {
36342
36195
  left: `${x}px`,
36343
- top: `${y - currentElement.parentNode.offsetHeight}px`,
36344
- width: `${currentElement.parentNode.offsetWidth}px`,
36345
- height: `${currentElement.parentNode.offsetHeight}px`,
36196
+ top: `${y - this.element.parentNode.offsetHeight}px`,
36197
+ width: `${this.element.parentNode.offsetWidth}px`,
36198
+ height: `${this.element.parentNode.offsetHeight}px`,
36346
36199
  });
36347
36200
  });
36348
36201
  }
@@ -36354,17 +36207,11 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36354
36207
  * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
36355
36208
  */
36356
36209
  lockScroll(lock = true) {
36357
- const element = this.element;
36358
-
36359
36210
  if (lock) {
36360
- if (!element?.bib) {
36361
- return;
36362
- }
36363
-
36364
36211
  document.body.style.overflow = "hidden"; // hide body's scrollbar
36365
36212
 
36366
36213
  // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
36367
- element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
36214
+ this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
36368
36215
  } else {
36369
36216
  document.body.style.overflow = "";
36370
36217
  }
@@ -36380,24 +36227,20 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36380
36227
  * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
36381
36228
  */
36382
36229
  configureBibStrategy(value) {
36383
- const element = this.element;
36384
- if (!element?.bib) {
36385
- return;
36386
- }
36387
-
36388
36230
  if (value === "fullscreen") {
36389
- element.isBibFullscreen = true;
36231
+ this.element.isBibFullscreen = true;
36390
36232
  // reset the prev position
36391
- element.bib.setAttribute("isfullscreen", "");
36392
- element.bib.style.position = "fixed";
36393
- element.bib.style.top = "0px";
36394
- element.bib.style.left = "0px";
36395
- element.bib.style.width = "";
36396
- element.bib.style.height = "";
36397
- element.style.contain = "";
36233
+ this.element.bib.setAttribute("isfullscreen", "");
36234
+ this.element.bib.style.position = "fixed";
36235
+ this.element.bib.style.top = "0px";
36236
+ this.element.bib.style.left = "0px";
36237
+ this.element.bib.style.width = "";
36238
+ this.element.bib.style.height = "";
36239
+ this.element.style.contain = "";
36398
36240
 
36399
36241
  // reset the size that was mirroring `size` css-part
36400
- const bibContent = element.bib.shadowRoot?.querySelector(".container");
36242
+ const bibContent =
36243
+ this.element.bib.shadowRoot.querySelector(".container");
36401
36244
  if (bibContent) {
36402
36245
  bibContent.style.width = "";
36403
36246
  bibContent.style.height = "";
@@ -36412,14 +36255,14 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36412
36255
  }, 0);
36413
36256
  }
36414
36257
 
36415
- if (element.isPopoverVisible) {
36258
+ if (this.element.isPopoverVisible) {
36416
36259
  this.lockScroll(true);
36417
36260
  }
36418
36261
  } else {
36419
- element.bib.style.position = "";
36420
- element.bib.removeAttribute("isfullscreen");
36421
- element.isBibFullscreen = false;
36422
- element.style.contain = "layout";
36262
+ this.element.bib.style.position = "";
36263
+ this.element.bib.removeAttribute("isfullscreen");
36264
+ this.element.isBibFullscreen = false;
36265
+ this.element.style.contain = "layout";
36423
36266
  }
36424
36267
 
36425
36268
  const isChanged = this.strategy && this.strategy !== value;
@@ -36437,21 +36280,16 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36437
36280
  },
36438
36281
  );
36439
36282
 
36440
- element.dispatchEvent(event);
36283
+ this.element.dispatchEvent(event);
36441
36284
  }
36442
36285
  }
36443
36286
 
36444
36287
  updateState() {
36445
- const element = this.element;
36446
- if (!element) {
36447
- return;
36448
- }
36449
-
36450
- const isVisible = element.isPopoverVisible;
36288
+ const isVisible = this.element.isPopoverVisible;
36451
36289
  if (!isVisible) {
36452
36290
  this.cleanupHideHandlers();
36453
36291
  try {
36454
- element.cleanup?.();
36292
+ this.element.cleanup?.();
36455
36293
  } catch (error) {
36456
36294
  // Do nothing
36457
36295
  }
@@ -36467,30 +36305,28 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36467
36305
  * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
36468
36306
  */
36469
36307
  handleFocusLoss() {
36470
- const element = this.element;
36471
- if (!element?.bib) {
36472
- return;
36473
- }
36474
-
36475
36308
  // if mouse is being pressed, skip and let click event to handle the action
36476
36309
  if (AuroFloatingUI.isMousePressed) {
36477
36310
  return;
36478
36311
  }
36479
36312
 
36480
36313
  if (
36481
- element.noHideOnThisFocusLoss ||
36482
- element.hasAttribute("noHideOnThisFocusLoss")
36314
+ this.element.noHideOnThisFocusLoss ||
36315
+ this.element.hasAttribute("noHideOnThisFocusLoss")
36483
36316
  ) {
36484
36317
  return;
36485
36318
  }
36486
36319
 
36487
36320
  // if focus is still inside of trigger or bib, do not close
36488
- if (element.matches(":focus") || element.matches(":focus-within")) {
36321
+ if (
36322
+ this.element.matches(":focus") ||
36323
+ this.element.matches(":focus-within")
36324
+ ) {
36489
36325
  return;
36490
36326
  }
36491
36327
 
36492
36328
  // if fullscreen bib is in fullscreen mode, do not close
36493
- if (element.bib.hasAttribute("isfullscreen")) {
36329
+ if (this.element.bib.hasAttribute("isfullscreen")) {
36494
36330
  return;
36495
36331
  }
36496
36332
 
@@ -36498,33 +36334,23 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36498
36334
  }
36499
36335
 
36500
36336
  setupHideHandlers() {
36501
- const element = this.element;
36502
- if (!element) {
36503
- return;
36504
- }
36505
-
36506
36337
  // Define handlers & store references
36507
36338
  this.focusHandler = () => this.handleFocusLoss();
36508
36339
 
36509
36340
  this.clickHandler = (evt) => {
36510
- const element = this.element;
36511
- if (!element?.bib) {
36512
- return;
36513
- }
36514
-
36515
36341
  // When the bib is fullscreen (modal dialog), don't close on outside
36516
36342
  // clicks. VoiceOver's synthetic click events inside a top-layer modal
36517
36343
  // <dialog> may not include the bib in composedPath(), causing false
36518
36344
  // positives. This mirrors the fullscreen guard in handleFocusLoss().
36519
- if (element.bib.hasAttribute("isfullscreen")) {
36345
+ if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
36520
36346
  return;
36521
36347
  }
36522
36348
 
36523
36349
  if (
36524
- (!evt.composedPath().includes(element.trigger) &&
36525
- !evt.composedPath().includes(element.bib)) ||
36526
- (element.bib.backdrop &&
36527
- evt.composedPath().includes(element.bib.backdrop))
36350
+ (!evt.composedPath().includes(this.element.trigger) &&
36351
+ !evt.composedPath().includes(this.element.bib)) ||
36352
+ (this.element.bib.backdrop &&
36353
+ evt.composedPath().includes(this.element.bib.backdrop))
36528
36354
  ) {
36529
36355
  const existedVisibleFloatingUI =
36530
36356
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -36545,12 +36371,7 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36545
36371
 
36546
36372
  // ESC key handler
36547
36373
  this.keyDownHandler = (evt) => {
36548
- const element = this.element;
36549
- if (!element) {
36550
- return;
36551
- }
36552
-
36553
- if (evt.key === "Escape" && element.isPopoverVisible) {
36374
+ if (evt.key === "Escape" && this.element.isPopoverVisible) {
36554
36375
  const existedVisibleFloatingUI =
36555
36376
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
36556
36377
  if (
@@ -36607,10 +36428,6 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36607
36428
  }
36608
36429
 
36609
36430
  updateCurrentExpandedDropdown() {
36610
- if (!this.element) {
36611
- return;
36612
- }
36613
-
36614
36431
  // Close any other dropdown that is already open
36615
36432
  const existedVisibleFloatingUI =
36616
36433
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -36627,34 +36444,25 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36627
36444
  }
36628
36445
 
36629
36446
  showBib() {
36630
- const element = this.element;
36631
- if (!element) {
36632
- return;
36633
- }
36634
-
36635
- if (!element.bib || (!element.trigger && !element.parentNode)) {
36636
- return;
36637
- }
36638
-
36639
- if (!element.disabled && !this.showing) {
36447
+ if (!this.element.disabled && !this.showing) {
36640
36448
  this.updateCurrentExpandedDropdown();
36641
- element.triggerChevron?.setAttribute("data-expanded", true);
36449
+ this.element.triggerChevron?.setAttribute("data-expanded", true);
36642
36450
 
36643
36451
  // prevent double showing: isPopovervisible gets first and showBib gets called later
36644
36452
  if (!this.showing) {
36645
- if (!element.modal) {
36453
+ if (!this.element.modal) {
36646
36454
  this.setupHideHandlers();
36647
36455
  }
36648
36456
  this.showing = true;
36649
- element.isPopoverVisible = true;
36457
+ this.element.isPopoverVisible = true;
36650
36458
  this.position();
36651
36459
  this.dispatchEventDropdownToggle();
36652
36460
  }
36653
36461
 
36654
36462
  // Setup auto update to handle resize and scroll
36655
- element.cleanup = autoUpdate$2(
36656
- element.trigger || element.parentNode,
36657
- element.bib,
36463
+ this.element.cleanup = autoUpdate$2(
36464
+ this.element.trigger || this.element.parentNode,
36465
+ this.element.bib,
36658
36466
  () => {
36659
36467
  this.position();
36660
36468
  },
@@ -36667,27 +36475,22 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36667
36475
  * @param {String} eventType - The event type that triggered the hiding action.
36668
36476
  */
36669
36477
  hideBib(eventType = "unknown") {
36670
- const element = this.element;
36671
- if (!element) {
36672
- return;
36673
- }
36674
-
36675
- if (element.disabled) {
36478
+ if (this.element.disabled) {
36676
36479
  return;
36677
36480
  }
36678
36481
 
36679
36482
  // noToggle dropdowns should not close when the trigger is clicked (the
36680
36483
  // "toggle" behavior), but they CAN still close via other interactions like
36681
36484
  // Escape key or focus loss.
36682
- if (element.noToggle && eventType === "click") {
36485
+ if (this.element.noToggle && eventType === "click") {
36683
36486
  return;
36684
36487
  }
36685
36488
 
36686
36489
  this.lockScroll(false);
36687
- element.triggerChevron?.removeAttribute("data-expanded");
36490
+ this.element.triggerChevron?.removeAttribute("data-expanded");
36688
36491
 
36689
- if (element.isPopoverVisible) {
36690
- element.isPopoverVisible = false;
36492
+ if (this.element.isPopoverVisible) {
36493
+ this.element.isPopoverVisible = false;
36691
36494
  }
36692
36495
  if (this.showing) {
36693
36496
  this.cleanupHideHandlers();
@@ -36707,11 +36510,6 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36707
36510
  * @param {String} eventType - The event type that triggered the toggle action.
36708
36511
  */
36709
36512
  dispatchEventDropdownToggle(eventType) {
36710
- const element = this.element;
36711
- if (!element) {
36712
- return;
36713
- }
36714
-
36715
36513
  const event = new CustomEvent(
36716
36514
  this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
36717
36515
  {
@@ -36723,16 +36521,11 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36723
36521
  },
36724
36522
  );
36725
36523
 
36726
- element.dispatchEvent(event);
36524
+ this.element.dispatchEvent(event);
36727
36525
  }
36728
36526
 
36729
36527
  handleClick() {
36730
- const element = this.element;
36731
- if (!element) {
36732
- return;
36733
- }
36734
-
36735
- if (element.isPopoverVisible) {
36528
+ if (this.element.isPopoverVisible) {
36736
36529
  this.hideBib("click");
36737
36530
  } else {
36738
36531
  this.showBib();
@@ -36743,66 +36536,63 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36743
36536
  {
36744
36537
  composed: true,
36745
36538
  detail: {
36746
- expanded: element.isPopoverVisible,
36539
+ expanded: this.element.isPopoverVisible,
36747
36540
  },
36748
36541
  },
36749
36542
  );
36750
36543
 
36751
- element.dispatchEvent(event);
36544
+ this.element.dispatchEvent(event);
36752
36545
  }
36753
36546
 
36754
36547
  handleEvent(event) {
36755
- const element = this.element;
36756
- if (!element || element.disableEventShow) {
36757
- return;
36758
- }
36759
-
36760
- switch (event.type) {
36761
- case "keydown": {
36762
- // Support both Enter and Space keys for accessibility
36763
- // Space is included as it's expected behavior for interactive elements
36764
-
36765
- const origin = event.composedPath()[0];
36766
- if (
36767
- event.key === "Enter" ||
36768
- (event.key === " " && (!origin || origin.tagName !== "INPUT"))
36769
- ) {
36770
- event.preventDefault();
36771
- this.handleClick();
36548
+ if (!this.element.disableEventShow) {
36549
+ switch (event.type) {
36550
+ case "keydown": {
36551
+ // Support both Enter and Space keys for accessibility
36552
+ // Space is included as it's expected behavior for interactive elements
36553
+
36554
+ const origin = event.composedPath()[0];
36555
+ if (
36556
+ event.key === "Enter" ||
36557
+ (event.key === " " && (!origin || origin.tagName !== "INPUT"))
36558
+ ) {
36559
+ event.preventDefault();
36560
+ this.handleClick();
36561
+ }
36562
+ break;
36772
36563
  }
36773
- break;
36564
+ case "mouseenter":
36565
+ if (this.element.hoverToggle) {
36566
+ this.showBib();
36567
+ }
36568
+ break;
36569
+ case "mouseleave":
36570
+ if (this.element.hoverToggle) {
36571
+ this.hideBib("mouseleave");
36572
+ }
36573
+ break;
36574
+ case "focus":
36575
+ if (this.element.focusShow) {
36576
+ /*
36577
+ This needs to better handle clicking that gives focus -
36578
+ currently it shows and then immediately hides the bib
36579
+ */
36580
+ this.showBib();
36581
+ }
36582
+ break;
36583
+ case "blur":
36584
+ // send this task 100ms later queue to
36585
+ // wait a frame in case focus moves within the floating element/bib
36586
+ setTimeout(() => this.handleFocusLoss(), 0);
36587
+ break;
36588
+ case "click":
36589
+ if (document.activeElement === document.body) {
36590
+ event.currentTarget.focus();
36591
+ }
36592
+ this.handleClick();
36593
+ break;
36594
+ // Do nothing
36774
36595
  }
36775
- case "mouseenter":
36776
- if (element.hoverToggle) {
36777
- this.showBib();
36778
- }
36779
- break;
36780
- case "mouseleave":
36781
- if (element.hoverToggle) {
36782
- this.hideBib("mouseleave");
36783
- }
36784
- break;
36785
- case "focus":
36786
- if (element.focusShow) {
36787
- /*
36788
- This needs to better handle clicking that gives focus -
36789
- currently it shows and then immediately hides the bib
36790
- */
36791
- this.showBib();
36792
- }
36793
- break;
36794
- case "blur":
36795
- // send this task 100ms later queue to
36796
- // wait a frame in case focus moves within the floating element/bib
36797
- setTimeout(() => this.handleFocusLoss(), 0);
36798
- break;
36799
- case "click":
36800
- if (document.activeElement === document.body) {
36801
- event.currentTarget.focus();
36802
- }
36803
- this.handleClick();
36804
- break;
36805
- // Do nothing
36806
36596
  }
36807
36597
  }
36808
36598
 
@@ -36813,11 +36603,6 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36813
36603
  * This prevents the component itself from being focusable when the trigger element already handles focus.
36814
36604
  */
36815
36605
  handleTriggerTabIndex() {
36816
- const element = this.element;
36817
- if (!element) {
36818
- return;
36819
- }
36820
-
36821
36606
  const focusableElementSelectors = [
36822
36607
  "a",
36823
36608
  "button",
@@ -36830,7 +36615,7 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36830
36615
  "auro-hyperlink",
36831
36616
  ];
36832
36617
 
36833
- const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
36618
+ const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
36834
36619
  if (!triggerNode) {
36835
36620
  return;
36836
36621
  }
@@ -36839,13 +36624,13 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36839
36624
  focusableElementSelectors.forEach((selector) => {
36840
36625
  // Check if the trigger node element is focusable
36841
36626
  if (triggerNodeTagName === selector) {
36842
- element.tabIndex = -1;
36627
+ this.element.tabIndex = -1;
36843
36628
  return;
36844
36629
  }
36845
36630
 
36846
36631
  // Check if any child is focusable
36847
36632
  if (triggerNode.querySelector(selector)) {
36848
- element.tabIndex = -1;
36633
+ this.element.tabIndex = -1;
36849
36634
  }
36850
36635
  });
36851
36636
  }
@@ -36855,18 +36640,13 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36855
36640
  * @param {*} eventPrefix
36856
36641
  */
36857
36642
  regenerateBibId() {
36858
- const element = this.element;
36859
- if (!element) {
36860
- return;
36861
- }
36862
-
36863
- this.id = element.getAttribute("id");
36643
+ this.id = this.element.getAttribute("id");
36864
36644
  if (!this.id) {
36865
36645
  this.id = window.crypto.randomUUID();
36866
- element.setAttribute("id", this.id);
36646
+ this.element.setAttribute("id", this.id);
36867
36647
  }
36868
36648
 
36869
- element.bib?.setAttribute("id", `${this.id}-floater-bib`);
36649
+ this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
36870
36650
  }
36871
36651
 
36872
36652
  configure(elem, eventPrefix, enableKeyboardHandling = true) {
@@ -36878,69 +36658,67 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
36878
36658
  this.element = elem;
36879
36659
  }
36880
36660
 
36881
- const element = this.element;
36882
- if (!element) {
36883
- return;
36661
+ if (this.behavior !== this.element.behavior) {
36662
+ this.behavior = this.element.behavior;
36884
36663
  }
36885
36664
 
36886
- if (this.behavior !== element.behavior) {
36887
- this.behavior = element.behavior;
36888
- }
36889
-
36890
- if (element.trigger) {
36665
+ if (this.element.trigger) {
36891
36666
  this.disconnect();
36892
36667
  }
36893
- element.trigger =
36894
- element.triggerElement ||
36895
- element.shadowRoot?.querySelector("#trigger") ||
36896
- element.trigger;
36897
- element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
36898
- element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
36899
- element.triggerChevron =
36900
- element.shadowRoot?.querySelector("#showStateIcon");
36668
+ this.element.trigger =
36669
+ this.element.triggerElement ||
36670
+ this.element.shadowRoot.querySelector("#trigger") ||
36671
+ this.element.trigger;
36672
+ this.element.bib =
36673
+ this.element.shadowRoot.querySelector("#bib") || this.element.bib;
36674
+ this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
36675
+ this.element.triggerChevron =
36676
+ this.element.shadowRoot.querySelector("#showStateIcon");
36901
36677
 
36902
- if (element.floaterConfig) {
36903
- element.hoverToggle = element.floaterConfig.hoverToggle;
36678
+ if (this.element.floaterConfig) {
36679
+ this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
36904
36680
  }
36905
36681
 
36906
36682
  this.regenerateBibId();
36907
36683
  this.handleTriggerTabIndex();
36908
36684
 
36909
36685
  this.handleEvent = this.handleEvent.bind(this);
36910
- if (element.trigger) {
36686
+ if (this.element.trigger) {
36911
36687
  if (this.enableKeyboardHandling) {
36912
- element.trigger.addEventListener("keydown", this.handleEvent);
36688
+ this.element.trigger.addEventListener("keydown", this.handleEvent);
36913
36689
  }
36914
- element.trigger.addEventListener("click", this.handleEvent);
36915
- element.trigger.addEventListener("mouseenter", this.handleEvent);
36916
- element.trigger.addEventListener("mouseleave", this.handleEvent);
36917
- element.trigger.addEventListener("focus", this.handleEvent);
36918
- element.trigger.addEventListener("blur", this.handleEvent);
36690
+ this.element.trigger.addEventListener("click", this.handleEvent);
36691
+ this.element.trigger.addEventListener("mouseenter", this.handleEvent);
36692
+ this.element.trigger.addEventListener("mouseleave", this.handleEvent);
36693
+ this.element.trigger.addEventListener("focus", this.handleEvent);
36694
+ this.element.trigger.addEventListener("blur", this.handleEvent);
36919
36695
  }
36920
36696
  }
36921
36697
 
36922
36698
  disconnect() {
36923
36699
  this.cleanupHideHandlers();
36700
+ if (this.element) {
36701
+ this.element.cleanup?.();
36924
36702
 
36925
- const element = this.element;
36926
- if (!element) {
36927
- return;
36928
- }
36929
-
36930
- element.cleanup?.();
36931
-
36932
- if (element.bib && element.shadowRoot) {
36933
- element.shadowRoot.append(element.bib);
36934
- }
36703
+ if (this.element.bib) {
36704
+ this.element.shadowRoot.append(this.element.bib);
36705
+ }
36935
36706
 
36936
- // Remove event & keyboard listeners
36937
- if (element.trigger) {
36938
- element.trigger.removeEventListener("keydown", this.handleEvent);
36939
- element.trigger.removeEventListener("click", this.handleEvent);
36940
- element.trigger.removeEventListener("mouseenter", this.handleEvent);
36941
- element.trigger.removeEventListener("mouseleave", this.handleEvent);
36942
- element.trigger.removeEventListener("focus", this.handleEvent);
36943
- element.trigger.removeEventListener("blur", this.handleEvent);
36707
+ // Remove event & keyboard listeners
36708
+ if (this.element?.trigger) {
36709
+ this.element.trigger.removeEventListener("keydown", this.handleEvent);
36710
+ this.element.trigger.removeEventListener("click", this.handleEvent);
36711
+ this.element.trigger.removeEventListener(
36712
+ "mouseenter",
36713
+ this.handleEvent,
36714
+ );
36715
+ this.element.trigger.removeEventListener(
36716
+ "mouseleave",
36717
+ this.handleEvent,
36718
+ );
36719
+ this.element.trigger.removeEventListener("focus", this.handleEvent);
36720
+ this.element.trigger.removeEventListener("blur", this.handleEvent);
36721
+ }
36944
36722
  }
36945
36723
  }
36946
36724
  };
@@ -38068,7 +37846,7 @@ let AuroHelpText$6 = class AuroHelpText extends i$4 {
38068
37846
  }
38069
37847
  };
38070
37848
 
38071
- var formkitVersion$6 = '202604071818';
37849
+ var formkitVersion$6 = '202604072118';
38072
37850
 
38073
37851
  let AuroElement$1$2 = class AuroElement extends i$4 {
38074
37852
  static get properties() {
@@ -42138,7 +41916,7 @@ let AuroHelpText$5 = class AuroHelpText extends i$4 {
42138
41916
  }
42139
41917
  };
42140
41918
 
42141
- var formkitVersion$5 = '202604071818';
41919
+ var formkitVersion$5 = '202604072118';
42142
41920
 
42143
41921
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
42144
41922
  // See LICENSE in the project root for license information.
@@ -44307,7 +44085,7 @@ let AuroHelpText$4 = class AuroHelpText extends i$4 {
44307
44085
  }
44308
44086
  };
44309
44087
 
44310
- var formkitVersion$4 = '202604071818';
44088
+ var formkitVersion$4 = '202604072118';
44311
44089
 
44312
44090
  // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
44313
44091
  // See LICENSE in the project root for license information.
@@ -47890,19 +47668,11 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
47890
47668
  * This ensures that the bib content has the same dimensions as the sizer element.
47891
47669
  */
47892
47670
  mirrorSize() {
47893
- const element = this.element;
47894
- if (!element) {
47895
- return;
47896
- }
47897
-
47898
47671
  // mirror the boxsize from bibSizer
47899
- if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
47900
- const sizerStyle = window.getComputedStyle(element.bibSizer);
47901
- const bibContent = element.bib.shadowRoot.querySelector(".container");
47902
- if (!bibContent) {
47903
- return;
47904
- }
47905
-
47672
+ if (this.element.bibSizer && this.element.matchWidth) {
47673
+ const sizerStyle = window.getComputedStyle(this.element.bibSizer);
47674
+ const bibContent =
47675
+ this.element.bib.shadowRoot.querySelector(".container");
47906
47676
  if (sizerStyle.width !== "0px") {
47907
47677
  bibContent.style.width = sizerStyle.width;
47908
47678
  }
@@ -47924,14 +47694,9 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
47924
47694
  * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
47925
47695
  */
47926
47696
  getPositioningStrategy() {
47927
- const element = this.element;
47928
- if (!element) {
47929
- return "floating";
47930
- }
47931
-
47932
47697
  const breakpoint =
47933
- element.bib?.mobileFullscreenBreakpoint ||
47934
- element.floaterConfig?.fullscreenBreakpoint;
47698
+ this.element.bib.mobileFullscreenBreakpoint ||
47699
+ this.element.floaterConfig?.fullscreenBreakpoint;
47935
47700
  switch (this.behavior) {
47936
47701
  case "tooltip":
47937
47702
  return "floating";
@@ -47942,9 +47707,9 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
47942
47707
  `(max-width: ${breakpoint})`,
47943
47708
  ).matches;
47944
47709
 
47945
- element.expanded = smallerThanBreakpoint;
47710
+ this.element.expanded = smallerThanBreakpoint;
47946
47711
  }
47947
- if (element.nested) {
47712
+ if (this.element.nested) {
47948
47713
  return "cover";
47949
47714
  }
47950
47715
  return "fullscreen";
@@ -47974,65 +47739,42 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
47974
47739
  * and applies the calculated position to the bib's style.
47975
47740
  */
47976
47741
  position() {
47977
- const element = this.element;
47978
- if (!element) {
47979
- return;
47980
- }
47981
-
47982
47742
  const strategy = this.getPositioningStrategy();
47983
47743
  this.configureBibStrategy(strategy);
47984
47744
 
47985
47745
  if (strategy === "floating") {
47986
- if (!element.trigger || !element.bib) {
47987
- return;
47988
- }
47989
-
47990
47746
  this.mirrorSize();
47991
47747
  // Define the middlware for the floater configuration
47992
47748
  const middleware = [
47993
- offset$2(element.floaterConfig?.offset || 0),
47994
- ...(element.floaterConfig?.shift ? [shift$2()] : []), // Add shift middleware if shift is enabled.
47995
- ...(element.floaterConfig?.flip ? [flip$2()] : []), // Add flip middleware if flip is enabled.
47996
- ...(element.floaterConfig?.autoPlacement ? [autoPlacement$2()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
47749
+ offset$2(this.element.floaterConfig?.offset || 0),
47750
+ ...(this.element.floaterConfig?.shift ? [shift$2()] : []), // Add shift middleware if shift is enabled.
47751
+ ...(this.element.floaterConfig?.flip ? [flip$2()] : []), // Add flip middleware if flip is enabled.
47752
+ ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement$2()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
47997
47753
  ];
47998
47754
 
47999
47755
  // Compute the position of the bib
48000
- computePosition$2(element.trigger, element.bib, {
48001
- strategy: element.floaterConfig?.strategy || "fixed",
48002
- placement: element.floaterConfig?.placement,
47756
+ computePosition$2(this.element.trigger, this.element.bib, {
47757
+ strategy: this.element.floaterConfig?.strategy || "fixed",
47758
+ placement: this.element.floaterConfig?.placement,
48003
47759
  middleware: middleware || [],
48004
47760
  }).then(({ x, y }) => {
48005
47761
  // eslint-disable-line id-length
48006
- const currentElement = this.element;
48007
- if (!currentElement?.bib) {
48008
- return;
48009
- }
48010
-
48011
- Object.assign(currentElement.bib.style, {
47762
+ Object.assign(this.element.bib.style, {
48012
47763
  left: `${x}px`,
48013
47764
  top: `${y}px`,
48014
47765
  });
48015
47766
  });
48016
47767
  } else if (strategy === "cover") {
48017
- if (!element.parentNode || !element.bib) {
48018
- return;
48019
- }
48020
-
48021
47768
  // Compute the position of the bib
48022
- computePosition$2(element.parentNode, element.bib, {
47769
+ computePosition$2(this.element.parentNode, this.element.bib, {
48023
47770
  placement: "bottom-start",
48024
47771
  }).then(({ x, y }) => {
48025
47772
  // eslint-disable-line id-length
48026
- const currentElement = this.element;
48027
- if (!currentElement?.bib || !currentElement.parentNode) {
48028
- return;
48029
- }
48030
-
48031
- Object.assign(currentElement.bib.style, {
47773
+ Object.assign(this.element.bib.style, {
48032
47774
  left: `${x}px`,
48033
- top: `${y - currentElement.parentNode.offsetHeight}px`,
48034
- width: `${currentElement.parentNode.offsetWidth}px`,
48035
- height: `${currentElement.parentNode.offsetHeight}px`,
47775
+ top: `${y - this.element.parentNode.offsetHeight}px`,
47776
+ width: `${this.element.parentNode.offsetWidth}px`,
47777
+ height: `${this.element.parentNode.offsetHeight}px`,
48036
47778
  });
48037
47779
  });
48038
47780
  }
@@ -48044,17 +47786,11 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48044
47786
  * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
48045
47787
  */
48046
47788
  lockScroll(lock = true) {
48047
- const element = this.element;
48048
-
48049
47789
  if (lock) {
48050
- if (!element?.bib) {
48051
- return;
48052
- }
48053
-
48054
47790
  document.body.style.overflow = "hidden"; // hide body's scrollbar
48055
47791
 
48056
47792
  // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
48057
- element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
47793
+ this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
48058
47794
  } else {
48059
47795
  document.body.style.overflow = "";
48060
47796
  }
@@ -48070,24 +47806,20 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48070
47806
  * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
48071
47807
  */
48072
47808
  configureBibStrategy(value) {
48073
- const element = this.element;
48074
- if (!element?.bib) {
48075
- return;
48076
- }
48077
-
48078
47809
  if (value === "fullscreen") {
48079
- element.isBibFullscreen = true;
47810
+ this.element.isBibFullscreen = true;
48080
47811
  // reset the prev position
48081
- element.bib.setAttribute("isfullscreen", "");
48082
- element.bib.style.position = "fixed";
48083
- element.bib.style.top = "0px";
48084
- element.bib.style.left = "0px";
48085
- element.bib.style.width = "";
48086
- element.bib.style.height = "";
48087
- element.style.contain = "";
47812
+ this.element.bib.setAttribute("isfullscreen", "");
47813
+ this.element.bib.style.position = "fixed";
47814
+ this.element.bib.style.top = "0px";
47815
+ this.element.bib.style.left = "0px";
47816
+ this.element.bib.style.width = "";
47817
+ this.element.bib.style.height = "";
47818
+ this.element.style.contain = "";
48088
47819
 
48089
47820
  // reset the size that was mirroring `size` css-part
48090
- const bibContent = element.bib.shadowRoot?.querySelector(".container");
47821
+ const bibContent =
47822
+ this.element.bib.shadowRoot.querySelector(".container");
48091
47823
  if (bibContent) {
48092
47824
  bibContent.style.width = "";
48093
47825
  bibContent.style.height = "";
@@ -48102,14 +47834,14 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48102
47834
  }, 0);
48103
47835
  }
48104
47836
 
48105
- if (element.isPopoverVisible) {
47837
+ if (this.element.isPopoverVisible) {
48106
47838
  this.lockScroll(true);
48107
47839
  }
48108
47840
  } else {
48109
- element.bib.style.position = "";
48110
- element.bib.removeAttribute("isfullscreen");
48111
- element.isBibFullscreen = false;
48112
- element.style.contain = "layout";
47841
+ this.element.bib.style.position = "";
47842
+ this.element.bib.removeAttribute("isfullscreen");
47843
+ this.element.isBibFullscreen = false;
47844
+ this.element.style.contain = "layout";
48113
47845
  }
48114
47846
 
48115
47847
  const isChanged = this.strategy && this.strategy !== value;
@@ -48127,21 +47859,16 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48127
47859
  },
48128
47860
  );
48129
47861
 
48130
- element.dispatchEvent(event);
47862
+ this.element.dispatchEvent(event);
48131
47863
  }
48132
47864
  }
48133
47865
 
48134
47866
  updateState() {
48135
- const element = this.element;
48136
- if (!element) {
48137
- return;
48138
- }
48139
-
48140
- const isVisible = element.isPopoverVisible;
47867
+ const isVisible = this.element.isPopoverVisible;
48141
47868
  if (!isVisible) {
48142
47869
  this.cleanupHideHandlers();
48143
47870
  try {
48144
- element.cleanup?.();
47871
+ this.element.cleanup?.();
48145
47872
  } catch (error) {
48146
47873
  // Do nothing
48147
47874
  }
@@ -48157,30 +47884,28 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48157
47884
  * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
48158
47885
  */
48159
47886
  handleFocusLoss() {
48160
- const element = this.element;
48161
- if (!element?.bib) {
48162
- return;
48163
- }
48164
-
48165
47887
  // if mouse is being pressed, skip and let click event to handle the action
48166
47888
  if (AuroFloatingUI.isMousePressed) {
48167
47889
  return;
48168
47890
  }
48169
47891
 
48170
47892
  if (
48171
- element.noHideOnThisFocusLoss ||
48172
- element.hasAttribute("noHideOnThisFocusLoss")
47893
+ this.element.noHideOnThisFocusLoss ||
47894
+ this.element.hasAttribute("noHideOnThisFocusLoss")
48173
47895
  ) {
48174
47896
  return;
48175
47897
  }
48176
47898
 
48177
47899
  // if focus is still inside of trigger or bib, do not close
48178
- if (element.matches(":focus") || element.matches(":focus-within")) {
47900
+ if (
47901
+ this.element.matches(":focus") ||
47902
+ this.element.matches(":focus-within")
47903
+ ) {
48179
47904
  return;
48180
47905
  }
48181
47906
 
48182
47907
  // if fullscreen bib is in fullscreen mode, do not close
48183
- if (element.bib.hasAttribute("isfullscreen")) {
47908
+ if (this.element.bib.hasAttribute("isfullscreen")) {
48184
47909
  return;
48185
47910
  }
48186
47911
 
@@ -48188,33 +47913,23 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48188
47913
  }
48189
47914
 
48190
47915
  setupHideHandlers() {
48191
- const element = this.element;
48192
- if (!element) {
48193
- return;
48194
- }
48195
-
48196
47916
  // Define handlers & store references
48197
47917
  this.focusHandler = () => this.handleFocusLoss();
48198
47918
 
48199
47919
  this.clickHandler = (evt) => {
48200
- const element = this.element;
48201
- if (!element?.bib) {
48202
- return;
48203
- }
48204
-
48205
47920
  // When the bib is fullscreen (modal dialog), don't close on outside
48206
47921
  // clicks. VoiceOver's synthetic click events inside a top-layer modal
48207
47922
  // <dialog> may not include the bib in composedPath(), causing false
48208
47923
  // positives. This mirrors the fullscreen guard in handleFocusLoss().
48209
- if (element.bib.hasAttribute("isfullscreen")) {
47924
+ if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
48210
47925
  return;
48211
47926
  }
48212
47927
 
48213
47928
  if (
48214
- (!evt.composedPath().includes(element.trigger) &&
48215
- !evt.composedPath().includes(element.bib)) ||
48216
- (element.bib.backdrop &&
48217
- evt.composedPath().includes(element.bib.backdrop))
47929
+ (!evt.composedPath().includes(this.element.trigger) &&
47930
+ !evt.composedPath().includes(this.element.bib)) ||
47931
+ (this.element.bib.backdrop &&
47932
+ evt.composedPath().includes(this.element.bib.backdrop))
48218
47933
  ) {
48219
47934
  const existedVisibleFloatingUI =
48220
47935
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -48235,12 +47950,7 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48235
47950
 
48236
47951
  // ESC key handler
48237
47952
  this.keyDownHandler = (evt) => {
48238
- const element = this.element;
48239
- if (!element) {
48240
- return;
48241
- }
48242
-
48243
- if (evt.key === "Escape" && element.isPopoverVisible) {
47953
+ if (evt.key === "Escape" && this.element.isPopoverVisible) {
48244
47954
  const existedVisibleFloatingUI =
48245
47955
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
48246
47956
  if (
@@ -48297,10 +48007,6 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48297
48007
  }
48298
48008
 
48299
48009
  updateCurrentExpandedDropdown() {
48300
- if (!this.element) {
48301
- return;
48302
- }
48303
-
48304
48010
  // Close any other dropdown that is already open
48305
48011
  const existedVisibleFloatingUI =
48306
48012
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -48317,34 +48023,25 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48317
48023
  }
48318
48024
 
48319
48025
  showBib() {
48320
- const element = this.element;
48321
- if (!element) {
48322
- return;
48323
- }
48324
-
48325
- if (!element.bib || (!element.trigger && !element.parentNode)) {
48326
- return;
48327
- }
48328
-
48329
- if (!element.disabled && !this.showing) {
48026
+ if (!this.element.disabled && !this.showing) {
48330
48027
  this.updateCurrentExpandedDropdown();
48331
- element.triggerChevron?.setAttribute("data-expanded", true);
48028
+ this.element.triggerChevron?.setAttribute("data-expanded", true);
48332
48029
 
48333
48030
  // prevent double showing: isPopovervisible gets first and showBib gets called later
48334
48031
  if (!this.showing) {
48335
- if (!element.modal) {
48032
+ if (!this.element.modal) {
48336
48033
  this.setupHideHandlers();
48337
48034
  }
48338
48035
  this.showing = true;
48339
- element.isPopoverVisible = true;
48036
+ this.element.isPopoverVisible = true;
48340
48037
  this.position();
48341
48038
  this.dispatchEventDropdownToggle();
48342
48039
  }
48343
48040
 
48344
48041
  // Setup auto update to handle resize and scroll
48345
- element.cleanup = autoUpdate$1(
48346
- element.trigger || element.parentNode,
48347
- element.bib,
48042
+ this.element.cleanup = autoUpdate$1(
48043
+ this.element.trigger || this.element.parentNode,
48044
+ this.element.bib,
48348
48045
  () => {
48349
48046
  this.position();
48350
48047
  },
@@ -48357,27 +48054,22 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48357
48054
  * @param {String} eventType - The event type that triggered the hiding action.
48358
48055
  */
48359
48056
  hideBib(eventType = "unknown") {
48360
- const element = this.element;
48361
- if (!element) {
48362
- return;
48363
- }
48364
-
48365
- if (element.disabled) {
48057
+ if (this.element.disabled) {
48366
48058
  return;
48367
48059
  }
48368
48060
 
48369
48061
  // noToggle dropdowns should not close when the trigger is clicked (the
48370
48062
  // "toggle" behavior), but they CAN still close via other interactions like
48371
48063
  // Escape key or focus loss.
48372
- if (element.noToggle && eventType === "click") {
48064
+ if (this.element.noToggle && eventType === "click") {
48373
48065
  return;
48374
48066
  }
48375
48067
 
48376
48068
  this.lockScroll(false);
48377
- element.triggerChevron?.removeAttribute("data-expanded");
48069
+ this.element.triggerChevron?.removeAttribute("data-expanded");
48378
48070
 
48379
- if (element.isPopoverVisible) {
48380
- element.isPopoverVisible = false;
48071
+ if (this.element.isPopoverVisible) {
48072
+ this.element.isPopoverVisible = false;
48381
48073
  }
48382
48074
  if (this.showing) {
48383
48075
  this.cleanupHideHandlers();
@@ -48397,11 +48089,6 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48397
48089
  * @param {String} eventType - The event type that triggered the toggle action.
48398
48090
  */
48399
48091
  dispatchEventDropdownToggle(eventType) {
48400
- const element = this.element;
48401
- if (!element) {
48402
- return;
48403
- }
48404
-
48405
48092
  const event = new CustomEvent(
48406
48093
  this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
48407
48094
  {
@@ -48413,16 +48100,11 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48413
48100
  },
48414
48101
  );
48415
48102
 
48416
- element.dispatchEvent(event);
48103
+ this.element.dispatchEvent(event);
48417
48104
  }
48418
48105
 
48419
48106
  handleClick() {
48420
- const element = this.element;
48421
- if (!element) {
48422
- return;
48423
- }
48424
-
48425
- if (element.isPopoverVisible) {
48107
+ if (this.element.isPopoverVisible) {
48426
48108
  this.hideBib("click");
48427
48109
  } else {
48428
48110
  this.showBib();
@@ -48433,66 +48115,63 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48433
48115
  {
48434
48116
  composed: true,
48435
48117
  detail: {
48436
- expanded: element.isPopoverVisible,
48118
+ expanded: this.element.isPopoverVisible,
48437
48119
  },
48438
48120
  },
48439
48121
  );
48440
48122
 
48441
- element.dispatchEvent(event);
48123
+ this.element.dispatchEvent(event);
48442
48124
  }
48443
48125
 
48444
48126
  handleEvent(event) {
48445
- const element = this.element;
48446
- if (!element || element.disableEventShow) {
48447
- return;
48448
- }
48449
-
48450
- switch (event.type) {
48451
- case "keydown": {
48452
- // Support both Enter and Space keys for accessibility
48453
- // Space is included as it's expected behavior for interactive elements
48454
-
48455
- const origin = event.composedPath()[0];
48456
- if (
48457
- event.key === "Enter" ||
48458
- (event.key === " " && (!origin || origin.tagName !== "INPUT"))
48459
- ) {
48460
- event.preventDefault();
48461
- this.handleClick();
48127
+ if (!this.element.disableEventShow) {
48128
+ switch (event.type) {
48129
+ case "keydown": {
48130
+ // Support both Enter and Space keys for accessibility
48131
+ // Space is included as it's expected behavior for interactive elements
48132
+
48133
+ const origin = event.composedPath()[0];
48134
+ if (
48135
+ event.key === "Enter" ||
48136
+ (event.key === " " && (!origin || origin.tagName !== "INPUT"))
48137
+ ) {
48138
+ event.preventDefault();
48139
+ this.handleClick();
48140
+ }
48141
+ break;
48462
48142
  }
48463
- break;
48143
+ case "mouseenter":
48144
+ if (this.element.hoverToggle) {
48145
+ this.showBib();
48146
+ }
48147
+ break;
48148
+ case "mouseleave":
48149
+ if (this.element.hoverToggle) {
48150
+ this.hideBib("mouseleave");
48151
+ }
48152
+ break;
48153
+ case "focus":
48154
+ if (this.element.focusShow) {
48155
+ /*
48156
+ This needs to better handle clicking that gives focus -
48157
+ currently it shows and then immediately hides the bib
48158
+ */
48159
+ this.showBib();
48160
+ }
48161
+ break;
48162
+ case "blur":
48163
+ // send this task 100ms later queue to
48164
+ // wait a frame in case focus moves within the floating element/bib
48165
+ setTimeout(() => this.handleFocusLoss(), 0);
48166
+ break;
48167
+ case "click":
48168
+ if (document.activeElement === document.body) {
48169
+ event.currentTarget.focus();
48170
+ }
48171
+ this.handleClick();
48172
+ break;
48173
+ // Do nothing
48464
48174
  }
48465
- case "mouseenter":
48466
- if (element.hoverToggle) {
48467
- this.showBib();
48468
- }
48469
- break;
48470
- case "mouseleave":
48471
- if (element.hoverToggle) {
48472
- this.hideBib("mouseleave");
48473
- }
48474
- break;
48475
- case "focus":
48476
- if (element.focusShow) {
48477
- /*
48478
- This needs to better handle clicking that gives focus -
48479
- currently it shows and then immediately hides the bib
48480
- */
48481
- this.showBib();
48482
- }
48483
- break;
48484
- case "blur":
48485
- // send this task 100ms later queue to
48486
- // wait a frame in case focus moves within the floating element/bib
48487
- setTimeout(() => this.handleFocusLoss(), 0);
48488
- break;
48489
- case "click":
48490
- if (document.activeElement === document.body) {
48491
- event.currentTarget.focus();
48492
- }
48493
- this.handleClick();
48494
- break;
48495
- // Do nothing
48496
48175
  }
48497
48176
  }
48498
48177
 
@@ -48503,11 +48182,6 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48503
48182
  * This prevents the component itself from being focusable when the trigger element already handles focus.
48504
48183
  */
48505
48184
  handleTriggerTabIndex() {
48506
- const element = this.element;
48507
- if (!element) {
48508
- return;
48509
- }
48510
-
48511
48185
  const focusableElementSelectors = [
48512
48186
  "a",
48513
48187
  "button",
@@ -48520,7 +48194,7 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48520
48194
  "auro-hyperlink",
48521
48195
  ];
48522
48196
 
48523
- const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
48197
+ const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
48524
48198
  if (!triggerNode) {
48525
48199
  return;
48526
48200
  }
@@ -48529,13 +48203,13 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48529
48203
  focusableElementSelectors.forEach((selector) => {
48530
48204
  // Check if the trigger node element is focusable
48531
48205
  if (triggerNodeTagName === selector) {
48532
- element.tabIndex = -1;
48206
+ this.element.tabIndex = -1;
48533
48207
  return;
48534
48208
  }
48535
48209
 
48536
48210
  // Check if any child is focusable
48537
48211
  if (triggerNode.querySelector(selector)) {
48538
- element.tabIndex = -1;
48212
+ this.element.tabIndex = -1;
48539
48213
  }
48540
48214
  });
48541
48215
  }
@@ -48545,18 +48219,13 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48545
48219
  * @param {*} eventPrefix
48546
48220
  */
48547
48221
  regenerateBibId() {
48548
- const element = this.element;
48549
- if (!element) {
48550
- return;
48551
- }
48552
-
48553
- this.id = element.getAttribute("id");
48222
+ this.id = this.element.getAttribute("id");
48554
48223
  if (!this.id) {
48555
48224
  this.id = window.crypto.randomUUID();
48556
- element.setAttribute("id", this.id);
48225
+ this.element.setAttribute("id", this.id);
48557
48226
  }
48558
48227
 
48559
- element.bib?.setAttribute("id", `${this.id}-floater-bib`);
48228
+ this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
48560
48229
  }
48561
48230
 
48562
48231
  configure(elem, eventPrefix, enableKeyboardHandling = true) {
@@ -48568,69 +48237,67 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
48568
48237
  this.element = elem;
48569
48238
  }
48570
48239
 
48571
- const element = this.element;
48572
- if (!element) {
48573
- return;
48240
+ if (this.behavior !== this.element.behavior) {
48241
+ this.behavior = this.element.behavior;
48574
48242
  }
48575
48243
 
48576
- if (this.behavior !== element.behavior) {
48577
- this.behavior = element.behavior;
48578
- }
48579
-
48580
- if (element.trigger) {
48244
+ if (this.element.trigger) {
48581
48245
  this.disconnect();
48582
48246
  }
48583
- element.trigger =
48584
- element.triggerElement ||
48585
- element.shadowRoot?.querySelector("#trigger") ||
48586
- element.trigger;
48587
- element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
48588
- element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
48589
- element.triggerChevron =
48590
- element.shadowRoot?.querySelector("#showStateIcon");
48247
+ this.element.trigger =
48248
+ this.element.triggerElement ||
48249
+ this.element.shadowRoot.querySelector("#trigger") ||
48250
+ this.element.trigger;
48251
+ this.element.bib =
48252
+ this.element.shadowRoot.querySelector("#bib") || this.element.bib;
48253
+ this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
48254
+ this.element.triggerChevron =
48255
+ this.element.shadowRoot.querySelector("#showStateIcon");
48591
48256
 
48592
- if (element.floaterConfig) {
48593
- element.hoverToggle = element.floaterConfig.hoverToggle;
48257
+ if (this.element.floaterConfig) {
48258
+ this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
48594
48259
  }
48595
48260
 
48596
48261
  this.regenerateBibId();
48597
48262
  this.handleTriggerTabIndex();
48598
48263
 
48599
48264
  this.handleEvent = this.handleEvent.bind(this);
48600
- if (element.trigger) {
48265
+ if (this.element.trigger) {
48601
48266
  if (this.enableKeyboardHandling) {
48602
- element.trigger.addEventListener("keydown", this.handleEvent);
48267
+ this.element.trigger.addEventListener("keydown", this.handleEvent);
48603
48268
  }
48604
- element.trigger.addEventListener("click", this.handleEvent);
48605
- element.trigger.addEventListener("mouseenter", this.handleEvent);
48606
- element.trigger.addEventListener("mouseleave", this.handleEvent);
48607
- element.trigger.addEventListener("focus", this.handleEvent);
48608
- element.trigger.addEventListener("blur", this.handleEvent);
48269
+ this.element.trigger.addEventListener("click", this.handleEvent);
48270
+ this.element.trigger.addEventListener("mouseenter", this.handleEvent);
48271
+ this.element.trigger.addEventListener("mouseleave", this.handleEvent);
48272
+ this.element.trigger.addEventListener("focus", this.handleEvent);
48273
+ this.element.trigger.addEventListener("blur", this.handleEvent);
48609
48274
  }
48610
48275
  }
48611
48276
 
48612
48277
  disconnect() {
48613
48278
  this.cleanupHideHandlers();
48279
+ if (this.element) {
48280
+ this.element.cleanup?.();
48614
48281
 
48615
- const element = this.element;
48616
- if (!element) {
48617
- return;
48618
- }
48619
-
48620
- element.cleanup?.();
48621
-
48622
- if (element.bib && element.shadowRoot) {
48623
- element.shadowRoot.append(element.bib);
48624
- }
48282
+ if (this.element.bib) {
48283
+ this.element.shadowRoot.append(this.element.bib);
48284
+ }
48625
48285
 
48626
- // Remove event & keyboard listeners
48627
- if (element.trigger) {
48628
- element.trigger.removeEventListener("keydown", this.handleEvent);
48629
- element.trigger.removeEventListener("click", this.handleEvent);
48630
- element.trigger.removeEventListener("mouseenter", this.handleEvent);
48631
- element.trigger.removeEventListener("mouseleave", this.handleEvent);
48632
- element.trigger.removeEventListener("focus", this.handleEvent);
48633
- element.trigger.removeEventListener("blur", this.handleEvent);
48286
+ // Remove event & keyboard listeners
48287
+ if (this.element?.trigger) {
48288
+ this.element.trigger.removeEventListener("keydown", this.handleEvent);
48289
+ this.element.trigger.removeEventListener("click", this.handleEvent);
48290
+ this.element.trigger.removeEventListener(
48291
+ "mouseenter",
48292
+ this.handleEvent,
48293
+ );
48294
+ this.element.trigger.removeEventListener(
48295
+ "mouseleave",
48296
+ this.handleEvent,
48297
+ );
48298
+ this.element.trigger.removeEventListener("focus", this.handleEvent);
48299
+ this.element.trigger.removeEventListener("blur", this.handleEvent);
48300
+ }
48634
48301
  }
48635
48302
  }
48636
48303
  };
@@ -49758,7 +49425,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
49758
49425
  }
49759
49426
  };
49760
49427
 
49761
- var formkitVersion$2 = '202604071818';
49428
+ var formkitVersion$2 = '202604072118';
49762
49429
 
49763
49430
  let AuroElement$2$1 = class AuroElement extends i$4 {
49764
49431
  static get properties() {
@@ -57515,7 +57182,7 @@ let AuroHelpText$1$1 = class AuroHelpText extends i$4 {
57515
57182
  }
57516
57183
  };
57517
57184
 
57518
- var formkitVersion$1$1 = '202604071818';
57185
+ var formkitVersion$1$1 = '202604072118';
57519
57186
 
57520
57187
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
57521
57188
  // See LICENSE in the project root for license information.
@@ -58580,7 +58247,7 @@ let AuroBibtemplate$1 = class AuroBibtemplate extends i$4 {
58580
58247
  }
58581
58248
  };
58582
58249
 
58583
- var formkitVersion$3 = '202604071818';
58250
+ var formkitVersion$3 = '202604072118';
58584
58251
 
58585
58252
  var styleCss$1$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
58586
58253
 
@@ -66007,19 +65674,11 @@ class AuroFloatingUI {
66007
65674
  * This ensures that the bib content has the same dimensions as the sizer element.
66008
65675
  */
66009
65676
  mirrorSize() {
66010
- const element = this.element;
66011
- if (!element) {
66012
- return;
66013
- }
66014
-
66015
65677
  // mirror the boxsize from bibSizer
66016
- if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
66017
- const sizerStyle = window.getComputedStyle(element.bibSizer);
66018
- const bibContent = element.bib.shadowRoot.querySelector(".container");
66019
- if (!bibContent) {
66020
- return;
66021
- }
66022
-
65678
+ if (this.element.bibSizer && this.element.matchWidth) {
65679
+ const sizerStyle = window.getComputedStyle(this.element.bibSizer);
65680
+ const bibContent =
65681
+ this.element.bib.shadowRoot.querySelector(".container");
66023
65682
  if (sizerStyle.width !== "0px") {
66024
65683
  bibContent.style.width = sizerStyle.width;
66025
65684
  }
@@ -66041,14 +65700,9 @@ class AuroFloatingUI {
66041
65700
  * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
66042
65701
  */
66043
65702
  getPositioningStrategy() {
66044
- const element = this.element;
66045
- if (!element) {
66046
- return "floating";
66047
- }
66048
-
66049
65703
  const breakpoint =
66050
- element.bib?.mobileFullscreenBreakpoint ||
66051
- element.floaterConfig?.fullscreenBreakpoint;
65704
+ this.element.bib.mobileFullscreenBreakpoint ||
65705
+ this.element.floaterConfig?.fullscreenBreakpoint;
66052
65706
  switch (this.behavior) {
66053
65707
  case "tooltip":
66054
65708
  return "floating";
@@ -66059,9 +65713,9 @@ class AuroFloatingUI {
66059
65713
  `(max-width: ${breakpoint})`,
66060
65714
  ).matches;
66061
65715
 
66062
- element.expanded = smallerThanBreakpoint;
65716
+ this.element.expanded = smallerThanBreakpoint;
66063
65717
  }
66064
- if (element.nested) {
65718
+ if (this.element.nested) {
66065
65719
  return "cover";
66066
65720
  }
66067
65721
  return "fullscreen";
@@ -66091,65 +65745,42 @@ class AuroFloatingUI {
66091
65745
  * and applies the calculated position to the bib's style.
66092
65746
  */
66093
65747
  position() {
66094
- const element = this.element;
66095
- if (!element) {
66096
- return;
66097
- }
66098
-
66099
65748
  const strategy = this.getPositioningStrategy();
66100
65749
  this.configureBibStrategy(strategy);
66101
65750
 
66102
65751
  if (strategy === "floating") {
66103
- if (!element.trigger || !element.bib) {
66104
- return;
66105
- }
66106
-
66107
65752
  this.mirrorSize();
66108
65753
  // Define the middlware for the floater configuration
66109
65754
  const middleware = [
66110
- offset(element.floaterConfig?.offset || 0),
66111
- ...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
66112
- ...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
66113
- ...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
65755
+ offset(this.element.floaterConfig?.offset || 0),
65756
+ ...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
65757
+ ...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
65758
+ ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
66114
65759
  ];
66115
65760
 
66116
65761
  // Compute the position of the bib
66117
- computePosition(element.trigger, element.bib, {
66118
- strategy: element.floaterConfig?.strategy || "fixed",
66119
- placement: element.floaterConfig?.placement,
65762
+ computePosition(this.element.trigger, this.element.bib, {
65763
+ strategy: this.element.floaterConfig?.strategy || "fixed",
65764
+ placement: this.element.floaterConfig?.placement,
66120
65765
  middleware: middleware || [],
66121
65766
  }).then(({ x, y }) => {
66122
65767
  // eslint-disable-line id-length
66123
- const currentElement = this.element;
66124
- if (!currentElement?.bib) {
66125
- return;
66126
- }
66127
-
66128
- Object.assign(currentElement.bib.style, {
65768
+ Object.assign(this.element.bib.style, {
66129
65769
  left: `${x}px`,
66130
65770
  top: `${y}px`,
66131
65771
  });
66132
65772
  });
66133
65773
  } else if (strategy === "cover") {
66134
- if (!element.parentNode || !element.bib) {
66135
- return;
66136
- }
66137
-
66138
65774
  // Compute the position of the bib
66139
- computePosition(element.parentNode, element.bib, {
65775
+ computePosition(this.element.parentNode, this.element.bib, {
66140
65776
  placement: "bottom-start",
66141
65777
  }).then(({ x, y }) => {
66142
65778
  // eslint-disable-line id-length
66143
- const currentElement = this.element;
66144
- if (!currentElement?.bib || !currentElement.parentNode) {
66145
- return;
66146
- }
66147
-
66148
- Object.assign(currentElement.bib.style, {
65779
+ Object.assign(this.element.bib.style, {
66149
65780
  left: `${x}px`,
66150
- top: `${y - currentElement.parentNode.offsetHeight}px`,
66151
- width: `${currentElement.parentNode.offsetWidth}px`,
66152
- height: `${currentElement.parentNode.offsetHeight}px`,
65781
+ top: `${y - this.element.parentNode.offsetHeight}px`,
65782
+ width: `${this.element.parentNode.offsetWidth}px`,
65783
+ height: `${this.element.parentNode.offsetHeight}px`,
66153
65784
  });
66154
65785
  });
66155
65786
  }
@@ -66161,17 +65792,11 @@ class AuroFloatingUI {
66161
65792
  * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
66162
65793
  */
66163
65794
  lockScroll(lock = true) {
66164
- const element = this.element;
66165
-
66166
65795
  if (lock) {
66167
- if (!element?.bib) {
66168
- return;
66169
- }
66170
-
66171
65796
  document.body.style.overflow = "hidden"; // hide body's scrollbar
66172
65797
 
66173
65798
  // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
66174
- element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
65799
+ this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
66175
65800
  } else {
66176
65801
  document.body.style.overflow = "";
66177
65802
  }
@@ -66187,24 +65812,20 @@ class AuroFloatingUI {
66187
65812
  * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
66188
65813
  */
66189
65814
  configureBibStrategy(value) {
66190
- const element = this.element;
66191
- if (!element?.bib) {
66192
- return;
66193
- }
66194
-
66195
65815
  if (value === "fullscreen") {
66196
- element.isBibFullscreen = true;
65816
+ this.element.isBibFullscreen = true;
66197
65817
  // reset the prev position
66198
- element.bib.setAttribute("isfullscreen", "");
66199
- element.bib.style.position = "fixed";
66200
- element.bib.style.top = "0px";
66201
- element.bib.style.left = "0px";
66202
- element.bib.style.width = "";
66203
- element.bib.style.height = "";
66204
- element.style.contain = "";
65818
+ this.element.bib.setAttribute("isfullscreen", "");
65819
+ this.element.bib.style.position = "fixed";
65820
+ this.element.bib.style.top = "0px";
65821
+ this.element.bib.style.left = "0px";
65822
+ this.element.bib.style.width = "";
65823
+ this.element.bib.style.height = "";
65824
+ this.element.style.contain = "";
66205
65825
 
66206
65826
  // reset the size that was mirroring `size` css-part
66207
- const bibContent = element.bib.shadowRoot?.querySelector(".container");
65827
+ const bibContent =
65828
+ this.element.bib.shadowRoot.querySelector(".container");
66208
65829
  if (bibContent) {
66209
65830
  bibContent.style.width = "";
66210
65831
  bibContent.style.height = "";
@@ -66219,14 +65840,14 @@ class AuroFloatingUI {
66219
65840
  }, 0);
66220
65841
  }
66221
65842
 
66222
- if (element.isPopoverVisible) {
65843
+ if (this.element.isPopoverVisible) {
66223
65844
  this.lockScroll(true);
66224
65845
  }
66225
65846
  } else {
66226
- element.bib.style.position = "";
66227
- element.bib.removeAttribute("isfullscreen");
66228
- element.isBibFullscreen = false;
66229
- element.style.contain = "layout";
65847
+ this.element.bib.style.position = "";
65848
+ this.element.bib.removeAttribute("isfullscreen");
65849
+ this.element.isBibFullscreen = false;
65850
+ this.element.style.contain = "layout";
66230
65851
  }
66231
65852
 
66232
65853
  const isChanged = this.strategy && this.strategy !== value;
@@ -66244,21 +65865,16 @@ class AuroFloatingUI {
66244
65865
  },
66245
65866
  );
66246
65867
 
66247
- element.dispatchEvent(event);
65868
+ this.element.dispatchEvent(event);
66248
65869
  }
66249
65870
  }
66250
65871
 
66251
65872
  updateState() {
66252
- const element = this.element;
66253
- if (!element) {
66254
- return;
66255
- }
66256
-
66257
- const isVisible = element.isPopoverVisible;
65873
+ const isVisible = this.element.isPopoverVisible;
66258
65874
  if (!isVisible) {
66259
65875
  this.cleanupHideHandlers();
66260
65876
  try {
66261
- element.cleanup?.();
65877
+ this.element.cleanup?.();
66262
65878
  } catch (error) {
66263
65879
  // Do nothing
66264
65880
  }
@@ -66274,30 +65890,28 @@ class AuroFloatingUI {
66274
65890
  * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
66275
65891
  */
66276
65892
  handleFocusLoss() {
66277
- const element = this.element;
66278
- if (!element?.bib) {
66279
- return;
66280
- }
66281
-
66282
65893
  // if mouse is being pressed, skip and let click event to handle the action
66283
65894
  if (AuroFloatingUI.isMousePressed) {
66284
65895
  return;
66285
65896
  }
66286
65897
 
66287
65898
  if (
66288
- element.noHideOnThisFocusLoss ||
66289
- element.hasAttribute("noHideOnThisFocusLoss")
65899
+ this.element.noHideOnThisFocusLoss ||
65900
+ this.element.hasAttribute("noHideOnThisFocusLoss")
66290
65901
  ) {
66291
65902
  return;
66292
65903
  }
66293
65904
 
66294
65905
  // if focus is still inside of trigger or bib, do not close
66295
- if (element.matches(":focus") || element.matches(":focus-within")) {
65906
+ if (
65907
+ this.element.matches(":focus") ||
65908
+ this.element.matches(":focus-within")
65909
+ ) {
66296
65910
  return;
66297
65911
  }
66298
65912
 
66299
65913
  // if fullscreen bib is in fullscreen mode, do not close
66300
- if (element.bib.hasAttribute("isfullscreen")) {
65914
+ if (this.element.bib.hasAttribute("isfullscreen")) {
66301
65915
  return;
66302
65916
  }
66303
65917
 
@@ -66305,33 +65919,23 @@ class AuroFloatingUI {
66305
65919
  }
66306
65920
 
66307
65921
  setupHideHandlers() {
66308
- const element = this.element;
66309
- if (!element) {
66310
- return;
66311
- }
66312
-
66313
65922
  // Define handlers & store references
66314
65923
  this.focusHandler = () => this.handleFocusLoss();
66315
65924
 
66316
65925
  this.clickHandler = (evt) => {
66317
- const element = this.element;
66318
- if (!element?.bib) {
66319
- return;
66320
- }
66321
-
66322
65926
  // When the bib is fullscreen (modal dialog), don't close on outside
66323
65927
  // clicks. VoiceOver's synthetic click events inside a top-layer modal
66324
65928
  // <dialog> may not include the bib in composedPath(), causing false
66325
65929
  // positives. This mirrors the fullscreen guard in handleFocusLoss().
66326
- if (element.bib.hasAttribute("isfullscreen")) {
65930
+ if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
66327
65931
  return;
66328
65932
  }
66329
65933
 
66330
65934
  if (
66331
- (!evt.composedPath().includes(element.trigger) &&
66332
- !evt.composedPath().includes(element.bib)) ||
66333
- (element.bib.backdrop &&
66334
- evt.composedPath().includes(element.bib.backdrop))
65935
+ (!evt.composedPath().includes(this.element.trigger) &&
65936
+ !evt.composedPath().includes(this.element.bib)) ||
65937
+ (this.element.bib.backdrop &&
65938
+ evt.composedPath().includes(this.element.bib.backdrop))
66335
65939
  ) {
66336
65940
  const existedVisibleFloatingUI =
66337
65941
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -66352,12 +65956,7 @@ class AuroFloatingUI {
66352
65956
 
66353
65957
  // ESC key handler
66354
65958
  this.keyDownHandler = (evt) => {
66355
- const element = this.element;
66356
- if (!element) {
66357
- return;
66358
- }
66359
-
66360
- if (evt.key === "Escape" && element.isPopoverVisible) {
65959
+ if (evt.key === "Escape" && this.element.isPopoverVisible) {
66361
65960
  const existedVisibleFloatingUI =
66362
65961
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
66363
65962
  if (
@@ -66414,10 +66013,6 @@ class AuroFloatingUI {
66414
66013
  }
66415
66014
 
66416
66015
  updateCurrentExpandedDropdown() {
66417
- if (!this.element) {
66418
- return;
66419
- }
66420
-
66421
66016
  // Close any other dropdown that is already open
66422
66017
  const existedVisibleFloatingUI =
66423
66018
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -66434,34 +66029,25 @@ class AuroFloatingUI {
66434
66029
  }
66435
66030
 
66436
66031
  showBib() {
66437
- const element = this.element;
66438
- if (!element) {
66439
- return;
66440
- }
66441
-
66442
- if (!element.bib || (!element.trigger && !element.parentNode)) {
66443
- return;
66444
- }
66445
-
66446
- if (!element.disabled && !this.showing) {
66032
+ if (!this.element.disabled && !this.showing) {
66447
66033
  this.updateCurrentExpandedDropdown();
66448
- element.triggerChevron?.setAttribute("data-expanded", true);
66034
+ this.element.triggerChevron?.setAttribute("data-expanded", true);
66449
66035
 
66450
66036
  // prevent double showing: isPopovervisible gets first and showBib gets called later
66451
66037
  if (!this.showing) {
66452
- if (!element.modal) {
66038
+ if (!this.element.modal) {
66453
66039
  this.setupHideHandlers();
66454
66040
  }
66455
66041
  this.showing = true;
66456
- element.isPopoverVisible = true;
66042
+ this.element.isPopoverVisible = true;
66457
66043
  this.position();
66458
66044
  this.dispatchEventDropdownToggle();
66459
66045
  }
66460
66046
 
66461
66047
  // Setup auto update to handle resize and scroll
66462
- element.cleanup = autoUpdate(
66463
- element.trigger || element.parentNode,
66464
- element.bib,
66048
+ this.element.cleanup = autoUpdate(
66049
+ this.element.trigger || this.element.parentNode,
66050
+ this.element.bib,
66465
66051
  () => {
66466
66052
  this.position();
66467
66053
  },
@@ -66474,27 +66060,22 @@ class AuroFloatingUI {
66474
66060
  * @param {String} eventType - The event type that triggered the hiding action.
66475
66061
  */
66476
66062
  hideBib(eventType = "unknown") {
66477
- const element = this.element;
66478
- if (!element) {
66479
- return;
66480
- }
66481
-
66482
- if (element.disabled) {
66063
+ if (this.element.disabled) {
66483
66064
  return;
66484
66065
  }
66485
66066
 
66486
66067
  // noToggle dropdowns should not close when the trigger is clicked (the
66487
66068
  // "toggle" behavior), but they CAN still close via other interactions like
66488
66069
  // Escape key or focus loss.
66489
- if (element.noToggle && eventType === "click") {
66070
+ if (this.element.noToggle && eventType === "click") {
66490
66071
  return;
66491
66072
  }
66492
66073
 
66493
66074
  this.lockScroll(false);
66494
- element.triggerChevron?.removeAttribute("data-expanded");
66075
+ this.element.triggerChevron?.removeAttribute("data-expanded");
66495
66076
 
66496
- if (element.isPopoverVisible) {
66497
- element.isPopoverVisible = false;
66077
+ if (this.element.isPopoverVisible) {
66078
+ this.element.isPopoverVisible = false;
66498
66079
  }
66499
66080
  if (this.showing) {
66500
66081
  this.cleanupHideHandlers();
@@ -66514,11 +66095,6 @@ class AuroFloatingUI {
66514
66095
  * @param {String} eventType - The event type that triggered the toggle action.
66515
66096
  */
66516
66097
  dispatchEventDropdownToggle(eventType) {
66517
- const element = this.element;
66518
- if (!element) {
66519
- return;
66520
- }
66521
-
66522
66098
  const event = new CustomEvent(
66523
66099
  this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
66524
66100
  {
@@ -66530,16 +66106,11 @@ class AuroFloatingUI {
66530
66106
  },
66531
66107
  );
66532
66108
 
66533
- element.dispatchEvent(event);
66109
+ this.element.dispatchEvent(event);
66534
66110
  }
66535
66111
 
66536
66112
  handleClick() {
66537
- const element = this.element;
66538
- if (!element) {
66539
- return;
66540
- }
66541
-
66542
- if (element.isPopoverVisible) {
66113
+ if (this.element.isPopoverVisible) {
66543
66114
  this.hideBib("click");
66544
66115
  } else {
66545
66116
  this.showBib();
@@ -66550,66 +66121,63 @@ class AuroFloatingUI {
66550
66121
  {
66551
66122
  composed: true,
66552
66123
  detail: {
66553
- expanded: element.isPopoverVisible,
66124
+ expanded: this.element.isPopoverVisible,
66554
66125
  },
66555
66126
  },
66556
66127
  );
66557
66128
 
66558
- element.dispatchEvent(event);
66129
+ this.element.dispatchEvent(event);
66559
66130
  }
66560
66131
 
66561
66132
  handleEvent(event) {
66562
- const element = this.element;
66563
- if (!element || element.disableEventShow) {
66564
- return;
66565
- }
66566
-
66567
- switch (event.type) {
66568
- case "keydown": {
66569
- // Support both Enter and Space keys for accessibility
66570
- // Space is included as it's expected behavior for interactive elements
66571
-
66572
- const origin = event.composedPath()[0];
66573
- if (
66574
- event.key === "Enter" ||
66575
- (event.key === " " && (!origin || origin.tagName !== "INPUT"))
66576
- ) {
66577
- event.preventDefault();
66578
- this.handleClick();
66133
+ if (!this.element.disableEventShow) {
66134
+ switch (event.type) {
66135
+ case "keydown": {
66136
+ // Support both Enter and Space keys for accessibility
66137
+ // Space is included as it's expected behavior for interactive elements
66138
+
66139
+ const origin = event.composedPath()[0];
66140
+ if (
66141
+ event.key === "Enter" ||
66142
+ (event.key === " " && (!origin || origin.tagName !== "INPUT"))
66143
+ ) {
66144
+ event.preventDefault();
66145
+ this.handleClick();
66146
+ }
66147
+ break;
66579
66148
  }
66580
- break;
66149
+ case "mouseenter":
66150
+ if (this.element.hoverToggle) {
66151
+ this.showBib();
66152
+ }
66153
+ break;
66154
+ case "mouseleave":
66155
+ if (this.element.hoverToggle) {
66156
+ this.hideBib("mouseleave");
66157
+ }
66158
+ break;
66159
+ case "focus":
66160
+ if (this.element.focusShow) {
66161
+ /*
66162
+ This needs to better handle clicking that gives focus -
66163
+ currently it shows and then immediately hides the bib
66164
+ */
66165
+ this.showBib();
66166
+ }
66167
+ break;
66168
+ case "blur":
66169
+ // send this task 100ms later queue to
66170
+ // wait a frame in case focus moves within the floating element/bib
66171
+ setTimeout(() => this.handleFocusLoss(), 0);
66172
+ break;
66173
+ case "click":
66174
+ if (document.activeElement === document.body) {
66175
+ event.currentTarget.focus();
66176
+ }
66177
+ this.handleClick();
66178
+ break;
66179
+ // Do nothing
66581
66180
  }
66582
- case "mouseenter":
66583
- if (element.hoverToggle) {
66584
- this.showBib();
66585
- }
66586
- break;
66587
- case "mouseleave":
66588
- if (element.hoverToggle) {
66589
- this.hideBib("mouseleave");
66590
- }
66591
- break;
66592
- case "focus":
66593
- if (element.focusShow) {
66594
- /*
66595
- This needs to better handle clicking that gives focus -
66596
- currently it shows and then immediately hides the bib
66597
- */
66598
- this.showBib();
66599
- }
66600
- break;
66601
- case "blur":
66602
- // send this task 100ms later queue to
66603
- // wait a frame in case focus moves within the floating element/bib
66604
- setTimeout(() => this.handleFocusLoss(), 0);
66605
- break;
66606
- case "click":
66607
- if (document.activeElement === document.body) {
66608
- event.currentTarget.focus();
66609
- }
66610
- this.handleClick();
66611
- break;
66612
- // Do nothing
66613
66181
  }
66614
66182
  }
66615
66183
 
@@ -66620,11 +66188,6 @@ class AuroFloatingUI {
66620
66188
  * This prevents the component itself from being focusable when the trigger element already handles focus.
66621
66189
  */
66622
66190
  handleTriggerTabIndex() {
66623
- const element = this.element;
66624
- if (!element) {
66625
- return;
66626
- }
66627
-
66628
66191
  const focusableElementSelectors = [
66629
66192
  "a",
66630
66193
  "button",
@@ -66637,7 +66200,7 @@ class AuroFloatingUI {
66637
66200
  "auro-hyperlink",
66638
66201
  ];
66639
66202
 
66640
- const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
66203
+ const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
66641
66204
  if (!triggerNode) {
66642
66205
  return;
66643
66206
  }
@@ -66646,13 +66209,13 @@ class AuroFloatingUI {
66646
66209
  focusableElementSelectors.forEach((selector) => {
66647
66210
  // Check if the trigger node element is focusable
66648
66211
  if (triggerNodeTagName === selector) {
66649
- element.tabIndex = -1;
66212
+ this.element.tabIndex = -1;
66650
66213
  return;
66651
66214
  }
66652
66215
 
66653
66216
  // Check if any child is focusable
66654
66217
  if (triggerNode.querySelector(selector)) {
66655
- element.tabIndex = -1;
66218
+ this.element.tabIndex = -1;
66656
66219
  }
66657
66220
  });
66658
66221
  }
@@ -66662,18 +66225,13 @@ class AuroFloatingUI {
66662
66225
  * @param {*} eventPrefix
66663
66226
  */
66664
66227
  regenerateBibId() {
66665
- const element = this.element;
66666
- if (!element) {
66667
- return;
66668
- }
66669
-
66670
- this.id = element.getAttribute("id");
66228
+ this.id = this.element.getAttribute("id");
66671
66229
  if (!this.id) {
66672
66230
  this.id = window.crypto.randomUUID();
66673
- element.setAttribute("id", this.id);
66231
+ this.element.setAttribute("id", this.id);
66674
66232
  }
66675
66233
 
66676
- element.bib?.setAttribute("id", `${this.id}-floater-bib`);
66234
+ this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
66677
66235
  }
66678
66236
 
66679
66237
  configure(elem, eventPrefix, enableKeyboardHandling = true) {
@@ -66685,69 +66243,67 @@ class AuroFloatingUI {
66685
66243
  this.element = elem;
66686
66244
  }
66687
66245
 
66688
- const element = this.element;
66689
- if (!element) {
66690
- return;
66246
+ if (this.behavior !== this.element.behavior) {
66247
+ this.behavior = this.element.behavior;
66691
66248
  }
66692
66249
 
66693
- if (this.behavior !== element.behavior) {
66694
- this.behavior = element.behavior;
66695
- }
66696
-
66697
- if (element.trigger) {
66250
+ if (this.element.trigger) {
66698
66251
  this.disconnect();
66699
66252
  }
66700
- element.trigger =
66701
- element.triggerElement ||
66702
- element.shadowRoot?.querySelector("#trigger") ||
66703
- element.trigger;
66704
- element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
66705
- element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
66706
- element.triggerChevron =
66707
- element.shadowRoot?.querySelector("#showStateIcon");
66253
+ this.element.trigger =
66254
+ this.element.triggerElement ||
66255
+ this.element.shadowRoot.querySelector("#trigger") ||
66256
+ this.element.trigger;
66257
+ this.element.bib =
66258
+ this.element.shadowRoot.querySelector("#bib") || this.element.bib;
66259
+ this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
66260
+ this.element.triggerChevron =
66261
+ this.element.shadowRoot.querySelector("#showStateIcon");
66708
66262
 
66709
- if (element.floaterConfig) {
66710
- element.hoverToggle = element.floaterConfig.hoverToggle;
66263
+ if (this.element.floaterConfig) {
66264
+ this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
66711
66265
  }
66712
66266
 
66713
66267
  this.regenerateBibId();
66714
66268
  this.handleTriggerTabIndex();
66715
66269
 
66716
66270
  this.handleEvent = this.handleEvent.bind(this);
66717
- if (element.trigger) {
66271
+ if (this.element.trigger) {
66718
66272
  if (this.enableKeyboardHandling) {
66719
- element.trigger.addEventListener("keydown", this.handleEvent);
66273
+ this.element.trigger.addEventListener("keydown", this.handleEvent);
66720
66274
  }
66721
- element.trigger.addEventListener("click", this.handleEvent);
66722
- element.trigger.addEventListener("mouseenter", this.handleEvent);
66723
- element.trigger.addEventListener("mouseleave", this.handleEvent);
66724
- element.trigger.addEventListener("focus", this.handleEvent);
66725
- element.trigger.addEventListener("blur", this.handleEvent);
66275
+ this.element.trigger.addEventListener("click", this.handleEvent);
66276
+ this.element.trigger.addEventListener("mouseenter", this.handleEvent);
66277
+ this.element.trigger.addEventListener("mouseleave", this.handleEvent);
66278
+ this.element.trigger.addEventListener("focus", this.handleEvent);
66279
+ this.element.trigger.addEventListener("blur", this.handleEvent);
66726
66280
  }
66727
66281
  }
66728
66282
 
66729
66283
  disconnect() {
66730
66284
  this.cleanupHideHandlers();
66285
+ if (this.element) {
66286
+ this.element.cleanup?.();
66731
66287
 
66732
- const element = this.element;
66733
- if (!element) {
66734
- return;
66735
- }
66736
-
66737
- element.cleanup?.();
66738
-
66739
- if (element.bib && element.shadowRoot) {
66740
- element.shadowRoot.append(element.bib);
66741
- }
66288
+ if (this.element.bib) {
66289
+ this.element.shadowRoot.append(this.element.bib);
66290
+ }
66742
66291
 
66743
- // Remove event & keyboard listeners
66744
- if (element.trigger) {
66745
- element.trigger.removeEventListener("keydown", this.handleEvent);
66746
- element.trigger.removeEventListener("click", this.handleEvent);
66747
- element.trigger.removeEventListener("mouseenter", this.handleEvent);
66748
- element.trigger.removeEventListener("mouseleave", this.handleEvent);
66749
- element.trigger.removeEventListener("focus", this.handleEvent);
66750
- element.trigger.removeEventListener("blur", this.handleEvent);
66292
+ // Remove event & keyboard listeners
66293
+ if (this.element?.trigger) {
66294
+ this.element.trigger.removeEventListener("keydown", this.handleEvent);
66295
+ this.element.trigger.removeEventListener("click", this.handleEvent);
66296
+ this.element.trigger.removeEventListener(
66297
+ "mouseenter",
66298
+ this.handleEvent,
66299
+ );
66300
+ this.element.trigger.removeEventListener(
66301
+ "mouseleave",
66302
+ this.handleEvent,
66303
+ );
66304
+ this.element.trigger.removeEventListener("focus", this.handleEvent);
66305
+ this.element.trigger.removeEventListener("blur", this.handleEvent);
66306
+ }
66751
66307
  }
66752
66308
  }
66753
66309
  }
@@ -67875,7 +67431,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
67875
67431
  }
67876
67432
  };
67877
67433
 
67878
- var formkitVersion$1 = '202604071818';
67434
+ var formkitVersion$1 = '202604072118';
67879
67435
 
67880
67436
  class AuroElement extends i$4 {
67881
67437
  static get properties() {
@@ -69628,7 +69184,7 @@ class AuroHelpText extends i$4 {
69628
69184
  }
69629
69185
  }
69630
69186
 
69631
- var formkitVersion = '202604071818';
69187
+ var formkitVersion = '202604072118';
69632
69188
 
69633
69189
  var styleCss = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
69634
69190