@aurodesignsystem-dev/auro-formkit 0.0.0-pr1395.2 → 0.0.0-pr1396.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/components/checkbox/demo/api.min.js +1 -1
  2. package/components/checkbox/demo/index.min.js +1 -1
  3. package/components/checkbox/dist/index.js +1 -1
  4. package/components/checkbox/dist/registered.js +1 -1
  5. package/components/combobox/demo/api.min.js +45 -13
  6. package/components/combobox/demo/index.min.js +45 -13
  7. package/components/combobox/dist/index.js +45 -13
  8. package/components/combobox/dist/registered.js +45 -13
  9. package/components/counter/demo/api.min.js +44 -12
  10. package/components/counter/demo/index.min.js +44 -12
  11. package/components/counter/dist/index.js +44 -12
  12. package/components/counter/dist/registered.js +44 -12
  13. package/components/datepicker/demo/api.min.js +51 -85
  14. package/components/datepicker/demo/index.min.js +51 -85
  15. package/components/datepicker/dist/index.js +51 -85
  16. package/components/datepicker/dist/registered.js +51 -85
  17. package/components/dropdown/demo/api.min.js +43 -11
  18. package/components/dropdown/demo/index.min.js +43 -11
  19. package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -2
  20. package/components/dropdown/dist/index.js +43 -11
  21. package/components/dropdown/dist/registered.js +43 -11
  22. package/components/form/demo/api.min.js +187 -125
  23. package/components/form/demo/index.min.js +187 -125
  24. package/components/input/demo/api.min.js +1 -1
  25. package/components/input/demo/index.min.js +1 -1
  26. package/components/input/dist/index.js +1 -1
  27. package/components/input/dist/registered.js +1 -1
  28. package/components/radio/demo/api.min.js +1 -1
  29. package/components/radio/demo/index.min.js +1 -1
  30. package/components/radio/dist/index.js +1 -1
  31. package/components/radio/dist/registered.js +1 -1
  32. package/components/select/demo/api.min.js +44 -12
  33. package/components/select/demo/index.min.js +44 -12
  34. package/components/select/dist/index.js +44 -12
  35. package/components/select/dist/registered.js +44 -12
  36. package/custom-elements.json +1418 -1420
  37. package/package.json +2 -1
  38. package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +0 -4
@@ -9242,7 +9242,7 @@ class AuroBibtemplate extends LitElement {
9242
9242
  }
9243
9243
  }
9244
9244
 
9245
- var formkitVersion$2 = '202603241855';
9245
+ var formkitVersion$2 = '202603242359';
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}}
@@ -12650,6 +12650,7 @@ class AuroDropdownBib extends LitElement {
12650
12650
 
12651
12651
  this.shape = "rounded";
12652
12652
  this.matchWidth = false;
12653
+ this.hasActiveDescendant = false;
12653
12654
  }
12654
12655
 
12655
12656
  static get styles() {
@@ -12736,6 +12737,18 @@ class AuroDropdownBib extends LitElement {
12736
12737
  */
12737
12738
  dialogRole: {
12738
12739
  type: String
12740
+ },
12741
+
12742
+ /**
12743
+ * Set by auro-dropdown when a menu option is highlighted via
12744
+ * aria-activedescendant. The dialog keyboard bridge checks this
12745
+ * flag so that Enter selects the highlighted option instead of
12746
+ * activating the focused interactive element (e.g. the trigger
12747
+ * button, or the bibtemplate close button in fullscreen).
12748
+ * @private
12749
+ */
12750
+ hasActiveDescendant: {
12751
+ type: Boolean
12739
12752
  }
12740
12753
  };
12741
12754
  }
@@ -12819,7 +12832,7 @@ class AuroDropdownBib extends LitElement {
12819
12832
  /**
12820
12833
  * Forwards the dialog's native `cancel` event (fired on ESC) as
12821
12834
  * an `auro-bib-cancel` custom event so parent components can close.
12822
- * @param {HTMLDialogElement} dialog
12835
+ * @param {HTMLDialogElement} dialog - The dialog element to attach the cancel listener to.
12823
12836
  * @private
12824
12837
  */
12825
12838
  _setupCancelHandler(dialog) {
@@ -12863,7 +12876,7 @@ class AuroDropdownBib extends LitElement {
12863
12876
  * is a secondary path for parent components that also listen for
12864
12877
  * Escape keydown.
12865
12878
  *
12866
- * @param {HTMLDialogElement} dialog
12879
+ * @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
12867
12880
  * @private
12868
12881
  */
12869
12882
  _setupKeyboardBridge(dialog) {
@@ -12882,15 +12895,23 @@ class AuroDropdownBib extends LitElement {
12882
12895
 
12883
12896
  // Custom elements (auro-button) don't get the native Enter→click
12884
12897
  // behavior that <button> has. Find the button in the composed path
12885
- // and click it directly.
12898
+ // and click it directly — but only when no menu option is
12899
+ // highlighted. In fullscreen mode focus stays on the close button
12900
+ // while arrow keys move the active-descendant highlight through
12901
+ // the listbox. If the user presses Enter with an option
12902
+ // highlighted, the intent is to select that option, not to click
12903
+ // the close button. In that case we fall through and bridge the
12904
+ // Enter key to the parent component's keyboard strategy.
12886
12905
  if (event.key === 'Enter') {
12887
- const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
12888
- const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
12889
- if (btn) {
12890
- event.preventDefault();
12891
- event.stopPropagation();
12892
- btn.click();
12893
- return;
12906
+ if (!this.hasActiveDescendant) {
12907
+ const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
12908
+ const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
12909
+ if (btn) {
12910
+ event.preventDefault();
12911
+ event.stopPropagation();
12912
+ btn.click();
12913
+ return;
12914
+ }
12894
12915
  }
12895
12916
  }
12896
12917
 
@@ -13005,6 +13026,8 @@ class AuroDropdownBib extends LitElement {
13005
13026
  * Closes the dialog.
13006
13027
  */
13007
13028
  close() {
13029
+ this.hasActiveDescendant = false;
13030
+
13008
13031
  const dialog = this.shadowRoot.querySelector('dialog');
13009
13032
 
13010
13033
  if (dialog && dialog.open) {
@@ -13282,7 +13305,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
13282
13305
  }
13283
13306
  };
13284
13307
 
13285
- var formkitVersion$1 = '202603241855';
13308
+ var formkitVersion$1 = '202603242359';
13286
13309
 
13287
13310
  let AuroElement$2 = class AuroElement extends LitElement {
13288
13311
  static get properties() {
@@ -13601,6 +13624,15 @@ class AuroDropdown extends AuroElement$2 {
13601
13624
  this.trigger.ariaActiveDescendantElement = null;
13602
13625
  this.trigger.removeAttribute('aria-activedescendant');
13603
13626
  }
13627
+
13628
+ // In fullscreen, focus stays on the close button while arrow keys
13629
+ // highlight options via active-descendant. Without this flag the
13630
+ // keyboard bridge clicks the close button on Enter (closing the
13631
+ // bib without selecting). When true, the bridge skips the button
13632
+ // click and forwards Enter to the parent to make the selection.
13633
+ if (this.bibContent) {
13634
+ this.bibContent.hasActiveDescendant = this.isBibFullscreen && Boolean(element);
13635
+ }
13604
13636
  }
13605
13637
 
13606
13638
  // function to define props used within the scope of this component
@@ -21030,7 +21062,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
21030
21062
  }
21031
21063
  };
21032
21064
 
21033
- var formkitVersion = '202603241855';
21065
+ var formkitVersion = '202603242359';
21034
21066
 
21035
21067
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
21036
21068
  // See LICENSE in the project root for license information.
@@ -22225,75 +22257,6 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
22225
22257
  });
22226
22258
  }
22227
22259
 
22228
- /**
22229
- * Computes display state once per keydown event.
22230
- * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
22231
- *
22232
- * @param {HTMLElement} component - The component with a dropdown reference.
22233
- * @param {Object} [options] - Optional config.
22234
- * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
22235
- * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
22236
- * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
22237
- * isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
22238
- */
22239
- function createDisplayContext(component, options = {}) {
22240
- const dd = options.dropdown || component.dropdown;
22241
- // isPopoverVisible reflects as the `open` attribute.
22242
- // It reports whether the bib is open in any mode (popover or modal).
22243
- const isExpanded = Boolean(dd && dd.isPopoverVisible);
22244
- const isFullscreen = Boolean(dd && dd.isBibFullscreen);
22245
-
22246
- const ctx = {
22247
- isExpanded,
22248
- isModal: isFullscreen,
22249
- isPopover: !isFullscreen,
22250
- activeInput: null,
22251
- };
22252
-
22253
- if (options.inputResolver) {
22254
- const resolvedInput = options.inputResolver(component, ctx);
22255
- // Guard against resolvers returning undefined or non-HTMLElement values.
22256
- ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
22257
- }
22258
-
22259
- return ctx;
22260
- }
22261
-
22262
- /**
22263
- * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
22264
- * Handles both sync and async handlers.
22265
- * @param {HTMLElement} component - The component to attach the listener to.
22266
- * @param {Object} strategy - Map of key names to handler functions.
22267
- * @param {Object} [options] - Optional config passed to createDisplayContext.
22268
- */
22269
- function applyKeyboardStrategy(component, strategy, options = {}) {
22270
- component.addEventListener('keydown', async (evt) => {
22271
- const handler = strategy[evt.key] || strategy.default;
22272
- if (typeof handler === 'function') {
22273
- const ctx = createDisplayContext(component, options);
22274
- await handler(component, evt, ctx);
22275
- }
22276
- });
22277
- }
22278
-
22279
- // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
22280
- // See LICENSE in the project root for license information.
22281
-
22282
- const datepickerKeyboardStrategy = {
22283
- Enter(component, evt, ctx) {
22284
- if (!ctx.isExpanded) {
22285
- evt.preventDefault();
22286
- component.dropdown.show();
22287
- }
22288
- },
22289
-
22290
- Tab(component, _evt, ctx) {
22291
- if (ctx.isExpanded && ctx.isModal) {
22292
- component.dropdown.hide();
22293
- }
22294
- },
22295
- };
22296
-
22297
22260
  // Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
22298
22261
  // See LICENSE in the project root for license information.
22299
22262
 
@@ -22303,7 +22266,7 @@ const datepickerKeyboardStrategy = {
22303
22266
  /**
22304
22267
  * The `auro-datepicker` component provides users with a way to select a date or date range from a calendar popup or fullscreen calendar on mobile.
22305
22268
  * @customElement auro-datepicker
22306
- *
22269
+ *
22307
22270
  * @slot helpText - Defines the content of the helpText.
22308
22271
  * @slot ariaLabel.bib.close - Sets aria-label on close button in fullscreen bib
22309
22272
  * @slot ariaLabel.input.clear - Sets aria-label on clear button
@@ -23107,8 +23070,11 @@ class AuroDatePicker extends AuroElement {
23107
23070
  // Tab closes the fullscreen dialog (same pattern as select).
23108
23071
  // The dialog event bridge intercepts Tab and re-dispatches it as a
23109
23072
  // composed keydown; this listener catches the re-dispatched event.
23110
- // Enter opens the bib when it is closed.
23111
- applyKeyboardStrategy(this, datepickerKeyboardStrategy);
23073
+ this.addEventListener('keydown', (evt) => {
23074
+ if (evt.key === 'Tab' && this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
23075
+ this.dropdown.hide();
23076
+ }
23077
+ });
23112
23078
 
23113
23079
  this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
23114
23080
  if (!this.isPopoverVisible) {
@@ -3087,6 +3087,7 @@ class AuroDropdownBib extends i {
3087
3087
 
3088
3088
  this.shape = "rounded";
3089
3089
  this.matchWidth = false;
3090
+ this.hasActiveDescendant = false;
3090
3091
  }
3091
3092
 
3092
3093
  static get styles() {
@@ -3173,6 +3174,18 @@ class AuroDropdownBib extends i {
3173
3174
  */
3174
3175
  dialogRole: {
3175
3176
  type: String
3177
+ },
3178
+
3179
+ /**
3180
+ * Set by auro-dropdown when a menu option is highlighted via
3181
+ * aria-activedescendant. The dialog keyboard bridge checks this
3182
+ * flag so that Enter selects the highlighted option instead of
3183
+ * activating the focused interactive element (e.g. the trigger
3184
+ * button, or the bibtemplate close button in fullscreen).
3185
+ * @private
3186
+ */
3187
+ hasActiveDescendant: {
3188
+ type: Boolean
3176
3189
  }
3177
3190
  };
3178
3191
  }
@@ -3256,7 +3269,7 @@ class AuroDropdownBib extends i {
3256
3269
  /**
3257
3270
  * Forwards the dialog's native `cancel` event (fired on ESC) as
3258
3271
  * an `auro-bib-cancel` custom event so parent components can close.
3259
- * @param {HTMLDialogElement} dialog
3272
+ * @param {HTMLDialogElement} dialog - The dialog element to attach the cancel listener to.
3260
3273
  * @private
3261
3274
  */
3262
3275
  _setupCancelHandler(dialog) {
@@ -3300,7 +3313,7 @@ class AuroDropdownBib extends i {
3300
3313
  * is a secondary path for parent components that also listen for
3301
3314
  * Escape keydown.
3302
3315
  *
3303
- * @param {HTMLDialogElement} dialog
3316
+ * @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
3304
3317
  * @private
3305
3318
  */
3306
3319
  _setupKeyboardBridge(dialog) {
@@ -3319,15 +3332,23 @@ class AuroDropdownBib extends i {
3319
3332
 
3320
3333
  // Custom elements (auro-button) don't get the native Enter→click
3321
3334
  // behavior that <button> has. Find the button in the composed path
3322
- // and click it directly.
3335
+ // and click it directly — but only when no menu option is
3336
+ // highlighted. In fullscreen mode focus stays on the close button
3337
+ // while arrow keys move the active-descendant highlight through
3338
+ // the listbox. If the user presses Enter with an option
3339
+ // highlighted, the intent is to select that option, not to click
3340
+ // the close button. In that case we fall through and bridge the
3341
+ // Enter key to the parent component's keyboard strategy.
3323
3342
  if (event.key === 'Enter') {
3324
- const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
3325
- const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
3326
- if (btn) {
3327
- event.preventDefault();
3328
- event.stopPropagation();
3329
- btn.click();
3330
- return;
3343
+ if (!this.hasActiveDescendant) {
3344
+ const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
3345
+ const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
3346
+ if (btn) {
3347
+ event.preventDefault();
3348
+ event.stopPropagation();
3349
+ btn.click();
3350
+ return;
3351
+ }
3331
3352
  }
3332
3353
  }
3333
3354
 
@@ -3442,6 +3463,8 @@ class AuroDropdownBib extends i {
3442
3463
  * Closes the dialog.
3443
3464
  */
3444
3465
  close() {
3466
+ this.hasActiveDescendant = false;
3467
+
3445
3468
  const dialog = this.shadowRoot.querySelector('dialog');
3446
3469
 
3447
3470
  if (dialog && dialog.open) {
@@ -3719,7 +3742,7 @@ class AuroHelpText extends i {
3719
3742
  }
3720
3743
  }
3721
3744
 
3722
- var formkitVersion = '202603241855';
3745
+ var formkitVersion = '202603242359';
3723
3746
 
3724
3747
  class AuroElement extends i {
3725
3748
  static get properties() {
@@ -4038,6 +4061,15 @@ class AuroDropdown extends AuroElement {
4038
4061
  this.trigger.ariaActiveDescendantElement = null;
4039
4062
  this.trigger.removeAttribute('aria-activedescendant');
4040
4063
  }
4064
+
4065
+ // In fullscreen, focus stays on the close button while arrow keys
4066
+ // highlight options via active-descendant. Without this flag the
4067
+ // keyboard bridge clicks the close button on Enter (closing the
4068
+ // bib without selecting). When true, the bridge skips the button
4069
+ // click and forwards Enter to the parent to make the selection.
4070
+ if (this.bibContent) {
4071
+ this.bibContent.hasActiveDescendant = this.isBibFullscreen && Boolean(element);
4072
+ }
4041
4073
  }
4042
4074
 
4043
4075
  // function to define props used within the scope of this component
@@ -3027,6 +3027,7 @@ class AuroDropdownBib extends i {
3027
3027
 
3028
3028
  this.shape = "rounded";
3029
3029
  this.matchWidth = false;
3030
+ this.hasActiveDescendant = false;
3030
3031
  }
3031
3032
 
3032
3033
  static get styles() {
@@ -3113,6 +3114,18 @@ class AuroDropdownBib extends i {
3113
3114
  */
3114
3115
  dialogRole: {
3115
3116
  type: String
3117
+ },
3118
+
3119
+ /**
3120
+ * Set by auro-dropdown when a menu option is highlighted via
3121
+ * aria-activedescendant. The dialog keyboard bridge checks this
3122
+ * flag so that Enter selects the highlighted option instead of
3123
+ * activating the focused interactive element (e.g. the trigger
3124
+ * button, or the bibtemplate close button in fullscreen).
3125
+ * @private
3126
+ */
3127
+ hasActiveDescendant: {
3128
+ type: Boolean
3116
3129
  }
3117
3130
  };
3118
3131
  }
@@ -3196,7 +3209,7 @@ class AuroDropdownBib extends i {
3196
3209
  /**
3197
3210
  * Forwards the dialog's native `cancel` event (fired on ESC) as
3198
3211
  * an `auro-bib-cancel` custom event so parent components can close.
3199
- * @param {HTMLDialogElement} dialog
3212
+ * @param {HTMLDialogElement} dialog - The dialog element to attach the cancel listener to.
3200
3213
  * @private
3201
3214
  */
3202
3215
  _setupCancelHandler(dialog) {
@@ -3240,7 +3253,7 @@ class AuroDropdownBib extends i {
3240
3253
  * is a secondary path for parent components that also listen for
3241
3254
  * Escape keydown.
3242
3255
  *
3243
- * @param {HTMLDialogElement} dialog
3256
+ * @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
3244
3257
  * @private
3245
3258
  */
3246
3259
  _setupKeyboardBridge(dialog) {
@@ -3259,15 +3272,23 @@ class AuroDropdownBib extends i {
3259
3272
 
3260
3273
  // Custom elements (auro-button) don't get the native Enter→click
3261
3274
  // behavior that <button> has. Find the button in the composed path
3262
- // and click it directly.
3275
+ // and click it directly — but only when no menu option is
3276
+ // highlighted. In fullscreen mode focus stays on the close button
3277
+ // while arrow keys move the active-descendant highlight through
3278
+ // the listbox. If the user presses Enter with an option
3279
+ // highlighted, the intent is to select that option, not to click
3280
+ // the close button. In that case we fall through and bridge the
3281
+ // Enter key to the parent component's keyboard strategy.
3263
3282
  if (event.key === 'Enter') {
3264
- const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
3265
- const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
3266
- if (btn) {
3267
- event.preventDefault();
3268
- event.stopPropagation();
3269
- btn.click();
3270
- return;
3283
+ if (!this.hasActiveDescendant) {
3284
+ const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
3285
+ const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
3286
+ if (btn) {
3287
+ event.preventDefault();
3288
+ event.stopPropagation();
3289
+ btn.click();
3290
+ return;
3291
+ }
3271
3292
  }
3272
3293
  }
3273
3294
 
@@ -3382,6 +3403,8 @@ class AuroDropdownBib extends i {
3382
3403
  * Closes the dialog.
3383
3404
  */
3384
3405
  close() {
3406
+ this.hasActiveDescendant = false;
3407
+
3385
3408
  const dialog = this.shadowRoot.querySelector('dialog');
3386
3409
 
3387
3410
  if (dialog && dialog.open) {
@@ -3659,7 +3682,7 @@ class AuroHelpText extends i {
3659
3682
  }
3660
3683
  }
3661
3684
 
3662
- var formkitVersion = '202603241855';
3685
+ var formkitVersion = '202603242359';
3663
3686
 
3664
3687
  class AuroElement extends i {
3665
3688
  static get properties() {
@@ -3978,6 +4001,15 @@ class AuroDropdown extends AuroElement {
3978
4001
  this.trigger.ariaActiveDescendantElement = null;
3979
4002
  this.trigger.removeAttribute('aria-activedescendant');
3980
4003
  }
4004
+
4005
+ // In fullscreen, focus stays on the close button while arrow keys
4006
+ // highlight options via active-descendant. Without this flag the
4007
+ // keyboard bridge clicks the close button on Enter (closing the
4008
+ // bib without selecting). When true, the bridge skips the button
4009
+ // click and forwards Enter to the parent to make the selection.
4010
+ if (this.bibContent) {
4011
+ this.bibContent.hasActiveDescendant = this.isBibFullscreen && Boolean(element);
4012
+ }
3981
4013
  }
3982
4014
 
3983
4015
  // function to define props used within the scope of this component
@@ -71,6 +71,17 @@ export class AuroDropdownBib extends LitElement {
71
71
  dialogRole: {
72
72
  type: StringConstructor;
73
73
  };
74
+ /**
75
+ * Set by auro-dropdown when a menu option is highlighted via
76
+ * aria-activedescendant. The dialog keyboard bridge checks this
77
+ * flag so that Enter selects the highlighted option instead of
78
+ * activating the focused interactive element (e.g. the trigger
79
+ * button, or the bibtemplate close button in fullscreen).
80
+ * @private
81
+ */
82
+ hasActiveDescendant: {
83
+ type: BooleanConstructor;
84
+ };
74
85
  };
75
86
  /**
76
87
  * @private
@@ -78,6 +89,7 @@ export class AuroDropdownBib extends LitElement {
78
89
  private _mobileBreakpointValue;
79
90
  shape: string;
80
91
  matchWidth: boolean;
92
+ hasActiveDescendant: boolean;
81
93
  set mobileFullscreenBreakpoint(value: string);
82
94
  get mobileFullscreenBreakpoint(): string;
83
95
  updated(changedProperties: any): void;
@@ -86,7 +98,7 @@ export class AuroDropdownBib extends LitElement {
86
98
  /**
87
99
  * Forwards the dialog's native `cancel` event (fired on ESC) as
88
100
  * an `auro-bib-cancel` custom event so parent components can close.
89
- * @param {HTMLDialogElement} dialog
101
+ * @param {HTMLDialogElement} dialog - The dialog element to attach the cancel listener to.
90
102
  * @private
91
103
  */
92
104
  private _setupCancelHandler;
@@ -121,7 +133,7 @@ export class AuroDropdownBib extends LitElement {
121
133
  * is a secondary path for parent components that also listen for
122
134
  * Escape keydown.
123
135
  *
124
- * @param {HTMLDialogElement} dialog
136
+ * @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
125
137
  * @private
126
138
  */
127
139
  private _setupKeyboardBridge;
@@ -2936,6 +2936,7 @@ class AuroDropdownBib extends LitElement {
2936
2936
 
2937
2937
  this.shape = "rounded";
2938
2938
  this.matchWidth = false;
2939
+ this.hasActiveDescendant = false;
2939
2940
  }
2940
2941
 
2941
2942
  static get styles() {
@@ -3022,6 +3023,18 @@ class AuroDropdownBib extends LitElement {
3022
3023
  */
3023
3024
  dialogRole: {
3024
3025
  type: String
3026
+ },
3027
+
3028
+ /**
3029
+ * Set by auro-dropdown when a menu option is highlighted via
3030
+ * aria-activedescendant. The dialog keyboard bridge checks this
3031
+ * flag so that Enter selects the highlighted option instead of
3032
+ * activating the focused interactive element (e.g. the trigger
3033
+ * button, or the bibtemplate close button in fullscreen).
3034
+ * @private
3035
+ */
3036
+ hasActiveDescendant: {
3037
+ type: Boolean
3025
3038
  }
3026
3039
  };
3027
3040
  }
@@ -3105,7 +3118,7 @@ class AuroDropdownBib extends LitElement {
3105
3118
  /**
3106
3119
  * Forwards the dialog's native `cancel` event (fired on ESC) as
3107
3120
  * an `auro-bib-cancel` custom event so parent components can close.
3108
- * @param {HTMLDialogElement} dialog
3121
+ * @param {HTMLDialogElement} dialog - The dialog element to attach the cancel listener to.
3109
3122
  * @private
3110
3123
  */
3111
3124
  _setupCancelHandler(dialog) {
@@ -3149,7 +3162,7 @@ class AuroDropdownBib extends LitElement {
3149
3162
  * is a secondary path for parent components that also listen for
3150
3163
  * Escape keydown.
3151
3164
  *
3152
- * @param {HTMLDialogElement} dialog
3165
+ * @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
3153
3166
  * @private
3154
3167
  */
3155
3168
  _setupKeyboardBridge(dialog) {
@@ -3168,15 +3181,23 @@ class AuroDropdownBib extends LitElement {
3168
3181
 
3169
3182
  // Custom elements (auro-button) don't get the native Enter→click
3170
3183
  // behavior that <button> has. Find the button in the composed path
3171
- // and click it directly.
3184
+ // and click it directly — but only when no menu option is
3185
+ // highlighted. In fullscreen mode focus stays on the close button
3186
+ // while arrow keys move the active-descendant highlight through
3187
+ // the listbox. If the user presses Enter with an option
3188
+ // highlighted, the intent is to select that option, not to click
3189
+ // the close button. In that case we fall through and bridge the
3190
+ // Enter key to the parent component's keyboard strategy.
3172
3191
  if (event.key === 'Enter') {
3173
- const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
3174
- const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
3175
- if (btn) {
3176
- event.preventDefault();
3177
- event.stopPropagation();
3178
- btn.click();
3179
- return;
3192
+ if (!this.hasActiveDescendant) {
3193
+ const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
3194
+ const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
3195
+ if (btn) {
3196
+ event.preventDefault();
3197
+ event.stopPropagation();
3198
+ btn.click();
3199
+ return;
3200
+ }
3180
3201
  }
3181
3202
  }
3182
3203
 
@@ -3291,6 +3312,8 @@ class AuroDropdownBib extends LitElement {
3291
3312
  * Closes the dialog.
3292
3313
  */
3293
3314
  close() {
3315
+ this.hasActiveDescendant = false;
3316
+
3294
3317
  const dialog = this.shadowRoot.querySelector('dialog');
3295
3318
 
3296
3319
  if (dialog && dialog.open) {
@@ -3568,7 +3591,7 @@ class AuroHelpText extends LitElement {
3568
3591
  }
3569
3592
  }
3570
3593
 
3571
- var formkitVersion = '202603241855';
3594
+ var formkitVersion = '202603242359';
3572
3595
 
3573
3596
  class AuroElement extends LitElement {
3574
3597
  static get properties() {
@@ -3887,6 +3910,15 @@ class AuroDropdown extends AuroElement {
3887
3910
  this.trigger.ariaActiveDescendantElement = null;
3888
3911
  this.trigger.removeAttribute('aria-activedescendant');
3889
3912
  }
3913
+
3914
+ // In fullscreen, focus stays on the close button while arrow keys
3915
+ // highlight options via active-descendant. Without this flag the
3916
+ // keyboard bridge clicks the close button on Enter (closing the
3917
+ // bib without selecting). When true, the bridge skips the button
3918
+ // click and forwards Enter to the parent to make the selection.
3919
+ if (this.bibContent) {
3920
+ this.bibContent.hasActiveDescendant = this.isBibFullscreen && Boolean(element);
3921
+ }
3890
3922
  }
3891
3923
 
3892
3924
  // function to define props used within the scope of this component