@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
@@ -9242,7 +9242,7 @@ class AuroBibtemplate extends LitElement {
9242
9242
  }
9243
9243
  }
9244
9244
 
9245
- var formkitVersion$2 = '202604071818';
9245
+ var formkitVersion$2 = '202604072118';
9246
9246
 
9247
9247
  let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=literal`${unsafeStatic(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$1 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$1=css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
9248
9248
  `,u$4=css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
@@ -11552,19 +11552,11 @@ class AuroFloatingUI {
11552
11552
  * This ensures that the bib content has the same dimensions as the sizer element.
11553
11553
  */
11554
11554
  mirrorSize() {
11555
- const element = this.element;
11556
- if (!element) {
11557
- return;
11558
- }
11559
-
11560
11555
  // mirror the boxsize from bibSizer
11561
- if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
11562
- const sizerStyle = window.getComputedStyle(element.bibSizer);
11563
- const bibContent = element.bib.shadowRoot.querySelector(".container");
11564
- if (!bibContent) {
11565
- return;
11566
- }
11567
-
11556
+ if (this.element.bibSizer && this.element.matchWidth) {
11557
+ const sizerStyle = window.getComputedStyle(this.element.bibSizer);
11558
+ const bibContent =
11559
+ this.element.bib.shadowRoot.querySelector(".container");
11568
11560
  if (sizerStyle.width !== "0px") {
11569
11561
  bibContent.style.width = sizerStyle.width;
11570
11562
  }
@@ -11586,14 +11578,9 @@ class AuroFloatingUI {
11586
11578
  * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
11587
11579
  */
11588
11580
  getPositioningStrategy() {
11589
- const element = this.element;
11590
- if (!element) {
11591
- return "floating";
11592
- }
11593
-
11594
11581
  const breakpoint =
11595
- element.bib?.mobileFullscreenBreakpoint ||
11596
- element.floaterConfig?.fullscreenBreakpoint;
11582
+ this.element.bib.mobileFullscreenBreakpoint ||
11583
+ this.element.floaterConfig?.fullscreenBreakpoint;
11597
11584
  switch (this.behavior) {
11598
11585
  case "tooltip":
11599
11586
  return "floating";
@@ -11604,9 +11591,9 @@ class AuroFloatingUI {
11604
11591
  `(max-width: ${breakpoint})`,
11605
11592
  ).matches;
11606
11593
 
11607
- element.expanded = smallerThanBreakpoint;
11594
+ this.element.expanded = smallerThanBreakpoint;
11608
11595
  }
11609
- if (element.nested) {
11596
+ if (this.element.nested) {
11610
11597
  return "cover";
11611
11598
  }
11612
11599
  return "fullscreen";
@@ -11636,65 +11623,42 @@ class AuroFloatingUI {
11636
11623
  * and applies the calculated position to the bib's style.
11637
11624
  */
11638
11625
  position() {
11639
- const element = this.element;
11640
- if (!element) {
11641
- return;
11642
- }
11643
-
11644
11626
  const strategy = this.getPositioningStrategy();
11645
11627
  this.configureBibStrategy(strategy);
11646
11628
 
11647
11629
  if (strategy === "floating") {
11648
- if (!element.trigger || !element.bib) {
11649
- return;
11650
- }
11651
-
11652
11630
  this.mirrorSize();
11653
11631
  // Define the middlware for the floater configuration
11654
11632
  const middleware = [
11655
- offset(element.floaterConfig?.offset || 0),
11656
- ...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
11657
- ...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
11658
- ...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
11633
+ offset(this.element.floaterConfig?.offset || 0),
11634
+ ...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
11635
+ ...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
11636
+ ...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
11659
11637
  ];
11660
11638
 
11661
11639
  // Compute the position of the bib
11662
- computePosition(element.trigger, element.bib, {
11663
- strategy: element.floaterConfig?.strategy || "fixed",
11664
- placement: element.floaterConfig?.placement,
11640
+ computePosition(this.element.trigger, this.element.bib, {
11641
+ strategy: this.element.floaterConfig?.strategy || "fixed",
11642
+ placement: this.element.floaterConfig?.placement,
11665
11643
  middleware: middleware || [],
11666
11644
  }).then(({ x, y }) => {
11667
11645
  // eslint-disable-line id-length
11668
- const currentElement = this.element;
11669
- if (!currentElement?.bib) {
11670
- return;
11671
- }
11672
-
11673
- Object.assign(currentElement.bib.style, {
11646
+ Object.assign(this.element.bib.style, {
11674
11647
  left: `${x}px`,
11675
11648
  top: `${y}px`,
11676
11649
  });
11677
11650
  });
11678
11651
  } else if (strategy === "cover") {
11679
- if (!element.parentNode || !element.bib) {
11680
- return;
11681
- }
11682
-
11683
11652
  // Compute the position of the bib
11684
- computePosition(element.parentNode, element.bib, {
11653
+ computePosition(this.element.parentNode, this.element.bib, {
11685
11654
  placement: "bottom-start",
11686
11655
  }).then(({ x, y }) => {
11687
11656
  // eslint-disable-line id-length
11688
- const currentElement = this.element;
11689
- if (!currentElement?.bib || !currentElement.parentNode) {
11690
- return;
11691
- }
11692
-
11693
- Object.assign(currentElement.bib.style, {
11657
+ Object.assign(this.element.bib.style, {
11694
11658
  left: `${x}px`,
11695
- top: `${y - currentElement.parentNode.offsetHeight}px`,
11696
- width: `${currentElement.parentNode.offsetWidth}px`,
11697
- height: `${currentElement.parentNode.offsetHeight}px`,
11659
+ top: `${y - this.element.parentNode.offsetHeight}px`,
11660
+ width: `${this.element.parentNode.offsetWidth}px`,
11661
+ height: `${this.element.parentNode.offsetHeight}px`,
11698
11662
  });
11699
11663
  });
11700
11664
  }
@@ -11706,17 +11670,11 @@ class AuroFloatingUI {
11706
11670
  * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
11707
11671
  */
11708
11672
  lockScroll(lock = true) {
11709
- const element = this.element;
11710
-
11711
11673
  if (lock) {
11712
- if (!element?.bib) {
11713
- return;
11714
- }
11715
-
11716
11674
  document.body.style.overflow = "hidden"; // hide body's scrollbar
11717
11675
 
11718
11676
  // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
11719
- element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
11677
+ this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
11720
11678
  } else {
11721
11679
  document.body.style.overflow = "";
11722
11680
  }
@@ -11732,24 +11690,20 @@ class AuroFloatingUI {
11732
11690
  * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
11733
11691
  */
11734
11692
  configureBibStrategy(value) {
11735
- const element = this.element;
11736
- if (!element?.bib) {
11737
- return;
11738
- }
11739
-
11740
11693
  if (value === "fullscreen") {
11741
- element.isBibFullscreen = true;
11694
+ this.element.isBibFullscreen = true;
11742
11695
  // reset the prev position
11743
- element.bib.setAttribute("isfullscreen", "");
11744
- element.bib.style.position = "fixed";
11745
- element.bib.style.top = "0px";
11746
- element.bib.style.left = "0px";
11747
- element.bib.style.width = "";
11748
- element.bib.style.height = "";
11749
- element.style.contain = "";
11696
+ this.element.bib.setAttribute("isfullscreen", "");
11697
+ this.element.bib.style.position = "fixed";
11698
+ this.element.bib.style.top = "0px";
11699
+ this.element.bib.style.left = "0px";
11700
+ this.element.bib.style.width = "";
11701
+ this.element.bib.style.height = "";
11702
+ this.element.style.contain = "";
11750
11703
 
11751
11704
  // reset the size that was mirroring `size` css-part
11752
- const bibContent = element.bib.shadowRoot?.querySelector(".container");
11705
+ const bibContent =
11706
+ this.element.bib.shadowRoot.querySelector(".container");
11753
11707
  if (bibContent) {
11754
11708
  bibContent.style.width = "";
11755
11709
  bibContent.style.height = "";
@@ -11764,14 +11718,14 @@ class AuroFloatingUI {
11764
11718
  }, 0);
11765
11719
  }
11766
11720
 
11767
- if (element.isPopoverVisible) {
11721
+ if (this.element.isPopoverVisible) {
11768
11722
  this.lockScroll(true);
11769
11723
  }
11770
11724
  } else {
11771
- element.bib.style.position = "";
11772
- element.bib.removeAttribute("isfullscreen");
11773
- element.isBibFullscreen = false;
11774
- element.style.contain = "layout";
11725
+ this.element.bib.style.position = "";
11726
+ this.element.bib.removeAttribute("isfullscreen");
11727
+ this.element.isBibFullscreen = false;
11728
+ this.element.style.contain = "layout";
11775
11729
  }
11776
11730
 
11777
11731
  const isChanged = this.strategy && this.strategy !== value;
@@ -11789,21 +11743,16 @@ class AuroFloatingUI {
11789
11743
  },
11790
11744
  );
11791
11745
 
11792
- element.dispatchEvent(event);
11746
+ this.element.dispatchEvent(event);
11793
11747
  }
11794
11748
  }
11795
11749
 
11796
11750
  updateState() {
11797
- const element = this.element;
11798
- if (!element) {
11799
- return;
11800
- }
11801
-
11802
- const isVisible = element.isPopoverVisible;
11751
+ const isVisible = this.element.isPopoverVisible;
11803
11752
  if (!isVisible) {
11804
11753
  this.cleanupHideHandlers();
11805
11754
  try {
11806
- element.cleanup?.();
11755
+ this.element.cleanup?.();
11807
11756
  } catch (error) {
11808
11757
  // Do nothing
11809
11758
  }
@@ -11819,30 +11768,28 @@ class AuroFloatingUI {
11819
11768
  * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
11820
11769
  */
11821
11770
  handleFocusLoss() {
11822
- const element = this.element;
11823
- if (!element?.bib) {
11824
- return;
11825
- }
11826
-
11827
11771
  // if mouse is being pressed, skip and let click event to handle the action
11828
11772
  if (AuroFloatingUI.isMousePressed) {
11829
11773
  return;
11830
11774
  }
11831
11775
 
11832
11776
  if (
11833
- element.noHideOnThisFocusLoss ||
11834
- element.hasAttribute("noHideOnThisFocusLoss")
11777
+ this.element.noHideOnThisFocusLoss ||
11778
+ this.element.hasAttribute("noHideOnThisFocusLoss")
11835
11779
  ) {
11836
11780
  return;
11837
11781
  }
11838
11782
 
11839
11783
  // if focus is still inside of trigger or bib, do not close
11840
- if (element.matches(":focus") || element.matches(":focus-within")) {
11784
+ if (
11785
+ this.element.matches(":focus") ||
11786
+ this.element.matches(":focus-within")
11787
+ ) {
11841
11788
  return;
11842
11789
  }
11843
11790
 
11844
11791
  // if fullscreen bib is in fullscreen mode, do not close
11845
- if (element.bib.hasAttribute("isfullscreen")) {
11792
+ if (this.element.bib.hasAttribute("isfullscreen")) {
11846
11793
  return;
11847
11794
  }
11848
11795
 
@@ -11850,33 +11797,23 @@ class AuroFloatingUI {
11850
11797
  }
11851
11798
 
11852
11799
  setupHideHandlers() {
11853
- const element = this.element;
11854
- if (!element) {
11855
- return;
11856
- }
11857
-
11858
11800
  // Define handlers & store references
11859
11801
  this.focusHandler = () => this.handleFocusLoss();
11860
11802
 
11861
11803
  this.clickHandler = (evt) => {
11862
- const element = this.element;
11863
- if (!element?.bib) {
11864
- return;
11865
- }
11866
-
11867
11804
  // When the bib is fullscreen (modal dialog), don't close on outside
11868
11805
  // clicks. VoiceOver's synthetic click events inside a top-layer modal
11869
11806
  // <dialog> may not include the bib in composedPath(), causing false
11870
11807
  // positives. This mirrors the fullscreen guard in handleFocusLoss().
11871
- if (element.bib.hasAttribute("isfullscreen")) {
11808
+ if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
11872
11809
  return;
11873
11810
  }
11874
11811
 
11875
11812
  if (
11876
- (!evt.composedPath().includes(element.trigger) &&
11877
- !evt.composedPath().includes(element.bib)) ||
11878
- (element.bib.backdrop &&
11879
- evt.composedPath().includes(element.bib.backdrop))
11813
+ (!evt.composedPath().includes(this.element.trigger) &&
11814
+ !evt.composedPath().includes(this.element.bib)) ||
11815
+ (this.element.bib.backdrop &&
11816
+ evt.composedPath().includes(this.element.bib.backdrop))
11880
11817
  ) {
11881
11818
  const existedVisibleFloatingUI =
11882
11819
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -11897,12 +11834,7 @@ class AuroFloatingUI {
11897
11834
 
11898
11835
  // ESC key handler
11899
11836
  this.keyDownHandler = (evt) => {
11900
- const element = this.element;
11901
- if (!element) {
11902
- return;
11903
- }
11904
-
11905
- if (evt.key === "Escape" && element.isPopoverVisible) {
11837
+ if (evt.key === "Escape" && this.element.isPopoverVisible) {
11906
11838
  const existedVisibleFloatingUI =
11907
11839
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
11908
11840
  if (
@@ -11959,10 +11891,6 @@ class AuroFloatingUI {
11959
11891
  }
11960
11892
 
11961
11893
  updateCurrentExpandedDropdown() {
11962
- if (!this.element) {
11963
- return;
11964
- }
11965
-
11966
11894
  // Close any other dropdown that is already open
11967
11895
  const existedVisibleFloatingUI =
11968
11896
  document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
@@ -11979,34 +11907,25 @@ class AuroFloatingUI {
11979
11907
  }
11980
11908
 
11981
11909
  showBib() {
11982
- const element = this.element;
11983
- if (!element) {
11984
- return;
11985
- }
11986
-
11987
- if (!element.bib || (!element.trigger && !element.parentNode)) {
11988
- return;
11989
- }
11990
-
11991
- if (!element.disabled && !this.showing) {
11910
+ if (!this.element.disabled && !this.showing) {
11992
11911
  this.updateCurrentExpandedDropdown();
11993
- element.triggerChevron?.setAttribute("data-expanded", true);
11912
+ this.element.triggerChevron?.setAttribute("data-expanded", true);
11994
11913
 
11995
11914
  // prevent double showing: isPopovervisible gets first and showBib gets called later
11996
11915
  if (!this.showing) {
11997
- if (!element.modal) {
11916
+ if (!this.element.modal) {
11998
11917
  this.setupHideHandlers();
11999
11918
  }
12000
11919
  this.showing = true;
12001
- element.isPopoverVisible = true;
11920
+ this.element.isPopoverVisible = true;
12002
11921
  this.position();
12003
11922
  this.dispatchEventDropdownToggle();
12004
11923
  }
12005
11924
 
12006
11925
  // Setup auto update to handle resize and scroll
12007
- element.cleanup = autoUpdate(
12008
- element.trigger || element.parentNode,
12009
- element.bib,
11926
+ this.element.cleanup = autoUpdate(
11927
+ this.element.trigger || this.element.parentNode,
11928
+ this.element.bib,
12010
11929
  () => {
12011
11930
  this.position();
12012
11931
  },
@@ -12019,27 +11938,22 @@ class AuroFloatingUI {
12019
11938
  * @param {String} eventType - The event type that triggered the hiding action.
12020
11939
  */
12021
11940
  hideBib(eventType = "unknown") {
12022
- const element = this.element;
12023
- if (!element) {
12024
- return;
12025
- }
12026
-
12027
- if (element.disabled) {
11941
+ if (this.element.disabled) {
12028
11942
  return;
12029
11943
  }
12030
11944
 
12031
11945
  // noToggle dropdowns should not close when the trigger is clicked (the
12032
11946
  // "toggle" behavior), but they CAN still close via other interactions like
12033
11947
  // Escape key or focus loss.
12034
- if (element.noToggle && eventType === "click") {
11948
+ if (this.element.noToggle && eventType === "click") {
12035
11949
  return;
12036
11950
  }
12037
11951
 
12038
11952
  this.lockScroll(false);
12039
- element.triggerChevron?.removeAttribute("data-expanded");
11953
+ this.element.triggerChevron?.removeAttribute("data-expanded");
12040
11954
 
12041
- if (element.isPopoverVisible) {
12042
- element.isPopoverVisible = false;
11955
+ if (this.element.isPopoverVisible) {
11956
+ this.element.isPopoverVisible = false;
12043
11957
  }
12044
11958
  if (this.showing) {
12045
11959
  this.cleanupHideHandlers();
@@ -12059,11 +11973,6 @@ class AuroFloatingUI {
12059
11973
  * @param {String} eventType - The event type that triggered the toggle action.
12060
11974
  */
12061
11975
  dispatchEventDropdownToggle(eventType) {
12062
- const element = this.element;
12063
- if (!element) {
12064
- return;
12065
- }
12066
-
12067
11976
  const event = new CustomEvent(
12068
11977
  this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
12069
11978
  {
@@ -12075,16 +11984,11 @@ class AuroFloatingUI {
12075
11984
  },
12076
11985
  );
12077
11986
 
12078
- element.dispatchEvent(event);
11987
+ this.element.dispatchEvent(event);
12079
11988
  }
12080
11989
 
12081
11990
  handleClick() {
12082
- const element = this.element;
12083
- if (!element) {
12084
- return;
12085
- }
12086
-
12087
- if (element.isPopoverVisible) {
11991
+ if (this.element.isPopoverVisible) {
12088
11992
  this.hideBib("click");
12089
11993
  } else {
12090
11994
  this.showBib();
@@ -12095,66 +11999,63 @@ class AuroFloatingUI {
12095
11999
  {
12096
12000
  composed: true,
12097
12001
  detail: {
12098
- expanded: element.isPopoverVisible,
12002
+ expanded: this.element.isPopoverVisible,
12099
12003
  },
12100
12004
  },
12101
12005
  );
12102
12006
 
12103
- element.dispatchEvent(event);
12007
+ this.element.dispatchEvent(event);
12104
12008
  }
12105
12009
 
12106
12010
  handleEvent(event) {
12107
- const element = this.element;
12108
- if (!element || element.disableEventShow) {
12109
- return;
12110
- }
12111
-
12112
- switch (event.type) {
12113
- case "keydown": {
12114
- // Support both Enter and Space keys for accessibility
12115
- // Space is included as it's expected behavior for interactive elements
12116
-
12117
- const origin = event.composedPath()[0];
12118
- if (
12119
- event.key === "Enter" ||
12120
- (event.key === " " && (!origin || origin.tagName !== "INPUT"))
12121
- ) {
12122
- event.preventDefault();
12123
- this.handleClick();
12011
+ if (!this.element.disableEventShow) {
12012
+ switch (event.type) {
12013
+ case "keydown": {
12014
+ // Support both Enter and Space keys for accessibility
12015
+ // Space is included as it's expected behavior for interactive elements
12016
+
12017
+ const origin = event.composedPath()[0];
12018
+ if (
12019
+ event.key === "Enter" ||
12020
+ (event.key === " " && (!origin || origin.tagName !== "INPUT"))
12021
+ ) {
12022
+ event.preventDefault();
12023
+ this.handleClick();
12024
+ }
12025
+ break;
12124
12026
  }
12125
- break;
12027
+ case "mouseenter":
12028
+ if (this.element.hoverToggle) {
12029
+ this.showBib();
12030
+ }
12031
+ break;
12032
+ case "mouseleave":
12033
+ if (this.element.hoverToggle) {
12034
+ this.hideBib("mouseleave");
12035
+ }
12036
+ break;
12037
+ case "focus":
12038
+ if (this.element.focusShow) {
12039
+ /*
12040
+ This needs to better handle clicking that gives focus -
12041
+ currently it shows and then immediately hides the bib
12042
+ */
12043
+ this.showBib();
12044
+ }
12045
+ break;
12046
+ case "blur":
12047
+ // send this task 100ms later queue to
12048
+ // wait a frame in case focus moves within the floating element/bib
12049
+ setTimeout(() => this.handleFocusLoss(), 0);
12050
+ break;
12051
+ case "click":
12052
+ if (document.activeElement === document.body) {
12053
+ event.currentTarget.focus();
12054
+ }
12055
+ this.handleClick();
12056
+ break;
12057
+ // Do nothing
12126
12058
  }
12127
- case "mouseenter":
12128
- if (element.hoverToggle) {
12129
- this.showBib();
12130
- }
12131
- break;
12132
- case "mouseleave":
12133
- if (element.hoverToggle) {
12134
- this.hideBib("mouseleave");
12135
- }
12136
- break;
12137
- case "focus":
12138
- if (element.focusShow) {
12139
- /*
12140
- This needs to better handle clicking that gives focus -
12141
- currently it shows and then immediately hides the bib
12142
- */
12143
- this.showBib();
12144
- }
12145
- break;
12146
- case "blur":
12147
- // send this task 100ms later queue to
12148
- // wait a frame in case focus moves within the floating element/bib
12149
- setTimeout(() => this.handleFocusLoss(), 0);
12150
- break;
12151
- case "click":
12152
- if (document.activeElement === document.body) {
12153
- event.currentTarget.focus();
12154
- }
12155
- this.handleClick();
12156
- break;
12157
- // Do nothing
12158
12059
  }
12159
12060
  }
12160
12061
 
@@ -12165,11 +12066,6 @@ class AuroFloatingUI {
12165
12066
  * This prevents the component itself from being focusable when the trigger element already handles focus.
12166
12067
  */
12167
12068
  handleTriggerTabIndex() {
12168
- const element = this.element;
12169
- if (!element) {
12170
- return;
12171
- }
12172
-
12173
12069
  const focusableElementSelectors = [
12174
12070
  "a",
12175
12071
  "button",
@@ -12182,7 +12078,7 @@ class AuroFloatingUI {
12182
12078
  "auro-hyperlink",
12183
12079
  ];
12184
12080
 
12185
- const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
12081
+ const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
12186
12082
  if (!triggerNode) {
12187
12083
  return;
12188
12084
  }
@@ -12191,13 +12087,13 @@ class AuroFloatingUI {
12191
12087
  focusableElementSelectors.forEach((selector) => {
12192
12088
  // Check if the trigger node element is focusable
12193
12089
  if (triggerNodeTagName === selector) {
12194
- element.tabIndex = -1;
12090
+ this.element.tabIndex = -1;
12195
12091
  return;
12196
12092
  }
12197
12093
 
12198
12094
  // Check if any child is focusable
12199
12095
  if (triggerNode.querySelector(selector)) {
12200
- element.tabIndex = -1;
12096
+ this.element.tabIndex = -1;
12201
12097
  }
12202
12098
  });
12203
12099
  }
@@ -12207,18 +12103,13 @@ class AuroFloatingUI {
12207
12103
  * @param {*} eventPrefix
12208
12104
  */
12209
12105
  regenerateBibId() {
12210
- const element = this.element;
12211
- if (!element) {
12212
- return;
12213
- }
12214
-
12215
- this.id = element.getAttribute("id");
12106
+ this.id = this.element.getAttribute("id");
12216
12107
  if (!this.id) {
12217
12108
  this.id = window.crypto.randomUUID();
12218
- element.setAttribute("id", this.id);
12109
+ this.element.setAttribute("id", this.id);
12219
12110
  }
12220
12111
 
12221
- element.bib?.setAttribute("id", `${this.id}-floater-bib`);
12112
+ this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
12222
12113
  }
12223
12114
 
12224
12115
  configure(elem, eventPrefix, enableKeyboardHandling = true) {
@@ -12230,69 +12121,67 @@ class AuroFloatingUI {
12230
12121
  this.element = elem;
12231
12122
  }
12232
12123
 
12233
- const element = this.element;
12234
- if (!element) {
12235
- return;
12124
+ if (this.behavior !== this.element.behavior) {
12125
+ this.behavior = this.element.behavior;
12236
12126
  }
12237
12127
 
12238
- if (this.behavior !== element.behavior) {
12239
- this.behavior = element.behavior;
12240
- }
12241
-
12242
- if (element.trigger) {
12128
+ if (this.element.trigger) {
12243
12129
  this.disconnect();
12244
12130
  }
12245
- element.trigger =
12246
- element.triggerElement ||
12247
- element.shadowRoot?.querySelector("#trigger") ||
12248
- element.trigger;
12249
- element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
12250
- element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
12251
- element.triggerChevron =
12252
- element.shadowRoot?.querySelector("#showStateIcon");
12131
+ this.element.trigger =
12132
+ this.element.triggerElement ||
12133
+ this.element.shadowRoot.querySelector("#trigger") ||
12134
+ this.element.trigger;
12135
+ this.element.bib =
12136
+ this.element.shadowRoot.querySelector("#bib") || this.element.bib;
12137
+ this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
12138
+ this.element.triggerChevron =
12139
+ this.element.shadowRoot.querySelector("#showStateIcon");
12253
12140
 
12254
- if (element.floaterConfig) {
12255
- element.hoverToggle = element.floaterConfig.hoverToggle;
12141
+ if (this.element.floaterConfig) {
12142
+ this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
12256
12143
  }
12257
12144
 
12258
12145
  this.regenerateBibId();
12259
12146
  this.handleTriggerTabIndex();
12260
12147
 
12261
12148
  this.handleEvent = this.handleEvent.bind(this);
12262
- if (element.trigger) {
12149
+ if (this.element.trigger) {
12263
12150
  if (this.enableKeyboardHandling) {
12264
- element.trigger.addEventListener("keydown", this.handleEvent);
12151
+ this.element.trigger.addEventListener("keydown", this.handleEvent);
12265
12152
  }
12266
- element.trigger.addEventListener("click", this.handleEvent);
12267
- element.trigger.addEventListener("mouseenter", this.handleEvent);
12268
- element.trigger.addEventListener("mouseleave", this.handleEvent);
12269
- element.trigger.addEventListener("focus", this.handleEvent);
12270
- element.trigger.addEventListener("blur", this.handleEvent);
12153
+ this.element.trigger.addEventListener("click", this.handleEvent);
12154
+ this.element.trigger.addEventListener("mouseenter", this.handleEvent);
12155
+ this.element.trigger.addEventListener("mouseleave", this.handleEvent);
12156
+ this.element.trigger.addEventListener("focus", this.handleEvent);
12157
+ this.element.trigger.addEventListener("blur", this.handleEvent);
12271
12158
  }
12272
12159
  }
12273
12160
 
12274
12161
  disconnect() {
12275
12162
  this.cleanupHideHandlers();
12163
+ if (this.element) {
12164
+ this.element.cleanup?.();
12276
12165
 
12277
- const element = this.element;
12278
- if (!element) {
12279
- return;
12280
- }
12281
-
12282
- element.cleanup?.();
12283
-
12284
- if (element.bib && element.shadowRoot) {
12285
- element.shadowRoot.append(element.bib);
12286
- }
12166
+ if (this.element.bib) {
12167
+ this.element.shadowRoot.append(this.element.bib);
12168
+ }
12287
12169
 
12288
- // Remove event & keyboard listeners
12289
- if (element.trigger) {
12290
- element.trigger.removeEventListener("keydown", this.handleEvent);
12291
- element.trigger.removeEventListener("click", this.handleEvent);
12292
- element.trigger.removeEventListener("mouseenter", this.handleEvent);
12293
- element.trigger.removeEventListener("mouseleave", this.handleEvent);
12294
- element.trigger.removeEventListener("focus", this.handleEvent);
12295
- element.trigger.removeEventListener("blur", this.handleEvent);
12170
+ // Remove event & keyboard listeners
12171
+ if (this.element?.trigger) {
12172
+ this.element.trigger.removeEventListener("keydown", this.handleEvent);
12173
+ this.element.trigger.removeEventListener("click", this.handleEvent);
12174
+ this.element.trigger.removeEventListener(
12175
+ "mouseenter",
12176
+ this.handleEvent,
12177
+ );
12178
+ this.element.trigger.removeEventListener(
12179
+ "mouseleave",
12180
+ this.handleEvent,
12181
+ );
12182
+ this.element.trigger.removeEventListener("focus", this.handleEvent);
12183
+ this.element.trigger.removeEventListener("blur", this.handleEvent);
12184
+ }
12296
12185
  }
12297
12186
  }
12298
12187
  }
@@ -13420,7 +13309,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
13420
13309
  }
13421
13310
  };
13422
13311
 
13423
- var formkitVersion$1 = '202604071818';
13312
+ var formkitVersion$1 = '202604072118';
13424
13313
 
13425
13314
  let AuroElement$2 = class AuroElement extends LitElement {
13426
13315
  static get properties() {
@@ -21177,7 +21066,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
21177
21066
  }
21178
21067
  };
21179
21068
 
21180
- var formkitVersion = '202604071818';
21069
+ var formkitVersion = '202604072118';
21181
21070
 
21182
21071
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
21183
21072
  // See LICENSE in the project root for license information.