@aurodesignsystem-dev/auro-formkit 0.0.0-pr1398.2 → 0.0.0-pr1398.3

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 (61) 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/demo/keyboardBehavior.md +0 -0
  4. package/components/checkbox/dist/index.js +1 -1
  5. package/components/checkbox/dist/registered.js +1 -1
  6. package/components/combobox/demo/api.min.js +129 -166
  7. package/components/combobox/demo/index.min.js +129 -166
  8. package/components/combobox/demo/keyboardBehavior.html +81 -0
  9. package/components/combobox/demo/keyboardBehavior.md +308 -0
  10. package/components/combobox/dist/index.js +87 -134
  11. package/components/combobox/dist/registered.js +87 -134
  12. package/components/counter/demo/api.min.js +157 -160
  13. package/components/counter/demo/index.min.js +157 -160
  14. package/components/counter/demo/keyboardBehavior.html +81 -0
  15. package/components/counter/demo/keyboardBehavior.md +127 -0
  16. package/components/counter/dist/auro-counter.d.ts +0 -7
  17. package/components/counter/dist/index.js +157 -160
  18. package/components/counter/dist/keyboardStrategy.d.ts +4 -0
  19. package/components/counter/dist/registered.js +157 -160
  20. package/components/datepicker/demo/api.min.js +89 -137
  21. package/components/datepicker/demo/index.min.js +89 -137
  22. package/components/datepicker/demo/keyboardBehavior.html +81 -0
  23. package/components/datepicker/demo/keyboardBehavior.md +24 -0
  24. package/components/datepicker/dist/index.js +84 -132
  25. package/components/datepicker/dist/registered.js +84 -132
  26. package/components/dropdown/demo/api.md +0 -1
  27. package/components/dropdown/demo/api.min.js +99 -140
  28. package/components/dropdown/demo/index.md +2 -2
  29. package/components/dropdown/demo/index.min.js +99 -140
  30. package/components/dropdown/demo/keyboardBehavior.html +81 -0
  31. package/components/dropdown/demo/keyboardBehavior.md +77 -0
  32. package/components/dropdown/dist/auro-dropdown.d.ts +0 -8
  33. package/components/dropdown/dist/auro-dropdownBib.d.ts +1 -50
  34. package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +7 -0
  35. package/components/dropdown/dist/index.js +83 -128
  36. package/components/dropdown/dist/registered.js +83 -128
  37. package/components/form/demo/api.min.js +466 -599
  38. package/components/form/demo/index.min.js +466 -599
  39. package/components/form/demo/keyboardBehavior.md +0 -0
  40. package/components/input/demo/api.min.js +1 -1
  41. package/components/input/demo/index.min.js +1 -1
  42. package/components/input/demo/keyboardBehavior.md +0 -0
  43. package/components/input/dist/index.js +1 -1
  44. package/components/input/dist/registered.js +1 -1
  45. package/components/menu/demo/api.min.js +42 -32
  46. package/components/menu/demo/index.min.js +42 -32
  47. package/components/menu/dist/auro-menu.d.ts +3 -11
  48. package/components/menu/dist/index.js +42 -32
  49. package/components/menu/dist/registered.js +42 -32
  50. package/components/radio/demo/api.min.js +1 -1
  51. package/components/radio/demo/index.min.js +1 -1
  52. package/components/radio/dist/index.js +1 -1
  53. package/components/radio/dist/registered.js +1 -1
  54. package/components/select/demo/api.min.js +132 -167
  55. package/components/select/demo/index.min.js +132 -167
  56. package/components/select/demo/keyboardBehavior.html +81 -0
  57. package/components/select/demo/keyboardBehavior.md +246 -0
  58. package/components/select/dist/index.js +90 -135
  59. package/components/select/dist/registered.js +90 -135
  60. package/custom-elements.json +61 -89
  61. package/package.json +2 -2
@@ -9290,7 +9290,7 @@ class AuroBibtemplate extends i$1 {
9290
9290
  }
9291
9291
  }
9292
9292
 
9293
- var formkitVersion$2 = '202603271519';
9293
+ var formkitVersion$2 = '202604012043';
9294
9294
 
9295
9295
  let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$4 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
9296
9296
  `,u$6=i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
@@ -9784,6 +9784,12 @@ if (!customElements.get('auro-formkit-calendar')) {
9784
9784
  * SPDX-License-Identifier: BSD-3-Clause
9785
9785
  */const e$1=()=>new h$1;let h$1 = class h{};const o=new WeakMap,n=e$5(class extends f$4{render(i){return A$4}update(i,[s]){const e=s!==this.G;return e&&void 0!==this.G&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.G=s,this.ht=i.options?.host,this.rt(this.ct=i.element)),A$4}rt(t){if(this.isConnected||(t=void 0),"function"==typeof this.G){const i=this.ht??globalThis;let s=o.get(i);void 0===s&&(s=new WeakMap,o.set(i,s)),void 0!==s.get(this.G)&&this.G.call(this.ht,void 0),s.set(this.G,t),void 0!==t&&this.G.call(this.ht,t);}else this.G.value=t;}get lt(){return "function"==typeof this.G?o.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0);}reconnected(){this.rt(this.ct);}});
9786
9786
 
9787
+ /**
9788
+ * @license
9789
+ * Copyright 2017 Google LLC
9790
+ * SPDX-License-Identifier: BSD-3-Clause
9791
+ */class e extends i$4{constructor(i){if(super(i),this.it=A$4,i.type!==t$2.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A$4||null==r)return this._t=void 0,this.it=r;if(r===E$1)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;
9792
+
9787
9793
  // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
9788
9794
  // See LICENSE in the project root for license information.
9789
9795
 
@@ -11833,11 +11839,10 @@ class AuroFloatingUI {
11833
11839
  return;
11834
11840
  }
11835
11841
 
11836
- const { activeElement } = document;
11837
11842
  // if focus is still inside of trigger or bib, do not close
11838
11843
  if (
11839
- this.element.contains(activeElement) ||
11840
- this.element.bib?.contains(activeElement)
11844
+ this.element.matches(":focus") ||
11845
+ this.element.matches(":focus-within")
11841
11846
  ) {
11842
11847
  return;
11843
11848
  }
@@ -12676,12 +12681,83 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
12676
12681
 
12677
12682
  var iconVersion$2 = '9.1.2';
12678
12683
 
12684
+ /**
12685
+ * Computes display state once per keydown event.
12686
+ * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
12687
+ *
12688
+ * @param {HTMLElement} component - The component with a dropdown reference.
12689
+ * @param {Object} [options] - Optional config.
12690
+ * @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
12691
+ * @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
12692
+ * @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
12693
+ * isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
12694
+ */
12695
+ function createDisplayContext$1(component, options = {}) {
12696
+ const dd = options.dropdown || component.dropdown;
12697
+ // isPopoverVisible reflects as the `open` attribute.
12698
+ // It reports whether the bib is open in any mode (popover or modal).
12699
+ const isExpanded = Boolean(dd && dd.isPopoverVisible);
12700
+ const isFullscreen = Boolean(dd && dd.isBibFullscreen);
12701
+
12702
+ const ctx = {
12703
+ isExpanded,
12704
+ isModal: isFullscreen,
12705
+ isPopover: !isFullscreen,
12706
+ activeInput: null,
12707
+ };
12708
+
12709
+ if (options.inputResolver) {
12710
+ const resolvedInput = options.inputResolver(component, ctx);
12711
+ // Guard against resolvers returning undefined or non-HTMLElement values.
12712
+ ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
12713
+ }
12714
+
12715
+ return ctx;
12716
+ }
12717
+
12718
+ /**
12719
+ * Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
12720
+ * Handles both sync and async handlers.
12721
+ * @param {HTMLElement} component - The component to attach the listener to.
12722
+ * @param {Object} strategy - Map of key names to handler functions.
12723
+ * @param {Object} [options] - Optional config passed to createDisplayContext.
12724
+ */
12725
+ function applyKeyboardStrategy$1(component, strategy, options = {}) {
12726
+ component.addEventListener('keydown', async (evt) => {
12727
+ const handler = strategy[evt.key] || strategy.default;
12728
+ if (typeof handler === 'function') {
12729
+ const ctx = createDisplayContext$1(component, options);
12730
+ await handler(component, evt, ctx);
12731
+ }
12732
+ });
12733
+ }
12734
+
12679
12735
  var styleCss$2$1 = i$3`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
12680
12736
 
12681
12737
  var colorCss$2 = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
12682
12738
 
12683
12739
  var tokensCss$1$1 = i$3`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
12684
12740
 
12741
+ /**
12742
+ * Creates a keyboard strategy for dialog-specific key handling.
12743
+ * All other keydown behavior is left to the browser's native bubbling path.
12744
+ * @param {HTMLElement} bib - The dropdown bib element.
12745
+ * @returns {Object} Keyboard handlers keyed by `event.key`.
12746
+ */
12747
+ // eslint-disable-next-line no-unused-vars
12748
+ function createDropdownBibKeyboardStrategy(bib) {
12749
+ return {
12750
+ // eslint-disable-next-line no-unused-vars
12751
+ Enter(_dialog, event) {
12752
+ // Floating UI handles Enter key to open the dropdown
12753
+ },
12754
+ // eslint-disable-next-line no-unused-vars
12755
+ Escape(_dialog, event) {
12756
+ // Floating UI handles Escape key to close the dropdown
12757
+ }
12758
+ };
12759
+ }
12760
+
12685
12761
  // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
12686
12762
  // See LICENSE in the project root for license information.
12687
12763
  /* eslint-disable max-lines */
@@ -12806,26 +12882,11 @@ class AuroDropdownBib extends i$1 {
12806
12882
  },
12807
12883
 
12808
12884
  /**
12809
- * Set by auro-dropdown when a menu option is highlighted via
12810
- * aria-activedescendant. The dialog keyboard bridge checks this
12811
- * flag so that Enter selects the highlighted option instead of
12812
- * activating the focused interactive element (e.g. the trigger
12813
- * button, or the bibtemplate close button in fullscreen).
12885
+ * Tracks whether a menu option is currently highlighted.
12814
12886
  * @private
12815
12887
  */
12816
12888
  hasActiveDescendant: {
12817
12889
  type: Boolean
12818
- },
12819
-
12820
- /**
12821
- * When true, the keyboard bridge allows native Tab behavior
12822
- * instead of intercepting it. Set this for bib consumers
12823
- * (e.g. counter) whose content contains real focusable elements
12824
- * that need native Tab navigation.
12825
- * @private
12826
- */
12827
- nativeFocusableContent: {
12828
- type: Boolean
12829
12890
  }
12830
12891
  };
12831
12892
  }
@@ -12895,7 +12956,7 @@ class AuroDropdownBib extends i$1 {
12895
12956
 
12896
12957
  const dialog = this.shadowRoot.querySelector('dialog');
12897
12958
  this._setupCancelHandler(dialog);
12898
- this._setupKeyboardBridge(dialog);
12959
+ applyKeyboardStrategy$1(dialog, createDropdownBibKeyboardStrategy());
12899
12960
 
12900
12961
  this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
12901
12962
  bubbles: true,
@@ -12922,98 +12983,6 @@ class AuroDropdownBib extends i$1 {
12922
12983
  });
12923
12984
  }
12924
12985
 
12925
- /**
12926
- * showModal() creates a closed focus scope — keyboard events inside
12927
- * the dialog's shadow DOM do NOT bubble out to the combobox/select
12928
- * keydown handlers in the parent shadow DOM. This handler bridges
12929
- * that gap by re-dispatching navigation keys so they cross the
12930
- * shadow boundary and reach the menu navigation logic in the parent
12931
- * component.
12932
- *
12933
- * The trade-off: intercepting these keys means native keyboard
12934
- * behaviors that would normally "just work" must be manually
12935
- * re-implemented here:
12936
- *
12937
- * - Enter on buttons: Custom elements (auro-button) don't get the
12938
- * native Enter→click that <button> provides, so we call .click()
12939
- * directly when Enter is pressed on a button-like element.
12940
- *
12941
- * - Tab: Intercepted and re-dispatched so parent components
12942
- * (select/combobox) can select the active option and close the
12943
- * dialog. The <dialog> provides containment and isolation
12944
- * (inert background, VoiceOver focus trapping, top layer), while
12945
- * the content inside is a role="listbox" navigated via
12946
- * aria-activedescendant (options are not focusable). Tab keyboard
12947
- * behavior follows listbox conventions (select + close) because
12948
- * the dialog's native Tab trap only cycles between the close
12949
- * button and browser chrome.
12950
- *
12951
- * - Escape: The native <dialog> fires a `cancel` event on ESC
12952
- * (handled by _setupCancelHandler), so the re-dispatched Escape
12953
- * is a secondary path for parent components that also listen for
12954
- * Escape keydown.
12955
- *
12956
- * @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
12957
- * @private
12958
- */
12959
- _setupKeyboardBridge(dialog) {
12960
- const navKeys = new Set([
12961
- 'ArrowUp',
12962
- 'ArrowDown',
12963
- 'Enter',
12964
- 'Escape',
12965
- 'Tab'
12966
- ]);
12967
-
12968
- dialog.addEventListener('keydown', (event) => {
12969
- if (!navKeys.has(event.key)) {
12970
- return;
12971
- }
12972
-
12973
- // Custom elements (auro-button) don't get the native Enter→click
12974
- // behavior that <button> has. Find the button in the composed path
12975
- // and click it directly — but only when no menu option is
12976
- // highlighted. In fullscreen mode focus stays on the close button
12977
- // while arrow keys move the active-descendant highlight through
12978
- // the listbox. If the user presses Enter with an option
12979
- // highlighted, the intent is to select that option, not to click
12980
- // the close button. In that case we fall through and bridge the
12981
- // Enter key to the parent component's keyboard strategy.
12982
- if (event.key === 'Enter') {
12983
- if (!this.hasActiveDescendant) {
12984
- const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
12985
- const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
12986
- if (btn) {
12987
- event.preventDefault();
12988
- event.stopPropagation();
12989
- btn.click();
12990
- return;
12991
- }
12992
- }
12993
- }
12994
-
12995
- // Allow native Tab when the bib contains focusable content
12996
- // (e.g. counter buttons) that needs normal Tab navigation.
12997
- if (event.key === 'Tab' && this.nativeFocusableContent) {
12998
- return;
12999
- }
13000
-
13001
- event.preventDefault();
13002
- event.stopPropagation();
13003
- const newEvent = new KeyboardEvent('keydown', {
13004
- key: event.key,
13005
- code: event.code,
13006
- shiftKey: event.shiftKey,
13007
- altKey: event.altKey,
13008
- ctrlKey: event.ctrlKey,
13009
- metaKey: event.metaKey,
13010
- bubbles: true,
13011
- composed: true,
13012
- cancelable: true
13013
- });
13014
- this.dispatchEvent(newEvent);
13015
- });
13016
- }
13017
12986
 
13018
12987
  /**
13019
12988
  * Blocks touch-driven page scroll while a fullscreen modal dialog is open.
@@ -13388,7 +13357,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
13388
13357
  }
13389
13358
  };
13390
13359
 
13391
- var formkitVersion$1 = '202603271519';
13360
+ var formkitVersion$1 = '202604012043';
13392
13361
 
13393
13362
  let AuroElement$2 = class AuroElement extends i$1 {
13394
13363
  static get properties() {
@@ -13569,7 +13538,6 @@ class AuroDropdown extends AuroElement$2 {
13569
13538
  this.appearance = 'default';
13570
13539
  this.chevron = false;
13571
13540
  this.disabled = false;
13572
- this.disableFocusTrap = false;
13573
13541
  this.error = false;
13574
13542
  this.tabIndex = 0;
13575
13543
  this.noToggle = false;
@@ -13667,9 +13635,8 @@ class AuroDropdown extends AuroElement$2 {
13667
13635
  // showModal() fires asynchronously via Lit's update cycle, which
13668
13636
  // falls outside the user activation window and causes iOS to
13669
13637
  // dismiss the keyboard.
13670
- if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
13671
- const useModal = !this.disableFocusTrap;
13672
- this.bibElement.value.open(useModal);
13638
+ if (this.bibElement && this.bibElement.value) {
13639
+ this.bibElement.value.open(this.isBibFullscreen);
13673
13640
  }
13674
13641
  }
13675
13642
 
@@ -13782,14 +13749,6 @@ class AuroDropdown extends AuroElement$2 {
13782
13749
  reflect: true
13783
13750
  },
13784
13751
 
13785
- /**
13786
- * If declared, the focus trap inside of bib will be turned off.
13787
- */
13788
- disableFocusTrap: {
13789
- type: Boolean,
13790
- reflect: true
13791
- },
13792
-
13793
13752
  /**
13794
13753
  * @private
13795
13754
  */
@@ -14063,7 +14022,7 @@ class AuroDropdown extends AuroElement$2 {
14063
14022
  if (this.isPopoverVisible) {
14064
14023
  // Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
14065
14024
  // Desktop: use show() for Floating UI positioning + FocusTrap for focus management
14066
- const useModal = this.isBibFullscreen && !this.disableFocusTrap;
14025
+ const useModal = this.isBibFullscreen;
14067
14026
  this.bibElement.value.open(useModal);
14068
14027
  } else {
14069
14028
  this.bibElement.value.close();
@@ -14073,7 +14032,7 @@ class AuroDropdown extends AuroElement$2 {
14073
14032
  // When fullscreen strategy changes while open, re-open dialog with correct mode
14074
14033
  // (e.g. resizing from desktop → mobile while dropdown is open)
14075
14034
  if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
14076
- const useModal = this.isBibFullscreen && !this.disableFocusTrap;
14035
+ const useModal = this.isBibFullscreen;
14077
14036
  this.bibElement.value.close();
14078
14037
  this.bibElement.value.open(useModal);
14079
14038
  }
@@ -14185,7 +14144,7 @@ class AuroDropdown extends AuroElement$2 {
14185
14144
  * @private
14186
14145
  */
14187
14146
  updateFocusTrap() {
14188
- if (this.isPopoverVisible && !this.disableFocusTrap) {
14147
+ if (this.isPopoverVisible) {
14189
14148
  if (!this.isBibFullscreen) {
14190
14149
  // Desktop: show() doesn't trap focus, so use FocusTrap
14191
14150
  this.focusTrap = new FocusTrap(this.bibContent);
@@ -21152,7 +21111,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
21152
21111
  }
21153
21112
  };
21154
21113
 
21155
- var formkitVersion = '202603271519';
21114
+ var formkitVersion = '202604012043';
21156
21115
 
21157
21116
  // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
21158
21117
  // See LICENSE in the project root for license information.
@@ -22347,12 +22306,6 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
22347
22306
  });
22348
22307
  }
22349
22308
 
22350
- /**
22351
- * @license
22352
- * Copyright 2017 Google LLC
22353
- * SPDX-License-Identifier: BSD-3-Clause
22354
- */class e extends i$4{constructor(i){if(super(i),this.it=A$4,i.type!==t$2.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A$4||null==r)return this._t=void 0,this.it=r;if(r===E$1)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;
22355
-
22356
22309
  /**
22357
22310
  * Computes display state once per keydown event.
22358
22311
  * Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
@@ -24321,7 +24274,6 @@ class AuroDatePicker extends AuroElement {
24321
24274
  .size="${this.size}"
24322
24275
  class="${e$4(dropdownElementClassMap)}"
24323
24276
  disableEventShow
24324
- disableFocusTrap
24325
24277
  for="dropdownMenu"
24326
24278
  part="dropdown"
24327
24279
  >
@@ -0,0 +1,81 @@
1
+ <!--
2
+ Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
3
+ See LICENSE in the project root for license information.
4
+
5
+ HTML in this document is standardized and NOT to be edited.
6
+ All demo code should be added/edited in ./demo/index.md
7
+
8
+ With the exception of adding custom elements if needed for the demo.
9
+
10
+ ----------------------- DO NOT EDIT -----------------------------
11
+
12
+ -->
13
+
14
+ <!DOCTYPE html>
15
+ <html lang="en">
16
+ <head>
17
+ <meta charset="UTF-8" />
18
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
19
+ <title>Auro Web Component Demo | auro-datepicker</title>
20
+
21
+ <!-- Prism.js Stylesheet -->
22
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/prismjs@1.24.1/themes/prism.css"/>
23
+
24
+ <!-- Legacy reference is still needed to support auro-datepicker's use of legacy token values at this time -->
25
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/legacy/auro-classic/CSSCustomProperties.css"/>
26
+
27
+ <!-- Design Token Alaska Theme -->
28
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/design-tokens@latest/dist/themes/alaska/CSSCustomProperties--alaska.min.css"/>
29
+
30
+ <!-- Webcore Stylesheet Alaska Theme -->
31
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/bundled/themes/alaska.global.min.css" />
32
+
33
+ <!-- Demo Specific Styles -->
34
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/demoWrapper.css" />
35
+ <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@aurodesignsystem/webcorestylesheets@latest/dist/elementDemoStyles.css" />
36
+ <style>
37
+ table {
38
+ --ds-color-container-secondary-default: transparent;
39
+ }
40
+
41
+ tr:not(:last-of-type) {
42
+ border-bottom: 1px solid var(--ds-color-border-tertiary-default);
43
+ }
44
+
45
+ sup {
46
+ font-size: 60%;
47
+ font-style: italic;
48
+ opacity: 0.6;
49
+ top: -.5rem;
50
+ }
51
+
52
+ .note {
53
+ margin: 10px 0;
54
+ padding: 10px;
55
+ border-radius: 6px;
56
+ font-style: italic;
57
+ color: var(--ds-basic-color-texticon-muted);
58
+ background-color: var(--ds-basic-color-surface-neutral-subtle);
59
+ }
60
+ </style>
61
+ </head>
62
+ <body class="auro-markdown">
63
+ <main></main>
64
+
65
+ <script type="module">
66
+ import 'https://cdn.jsdelivr.net/npm/marked@latest/marked.min.js';
67
+ import 'https://cdn.jsdelivr.net/npm/prismjs@latest/prism.js';
68
+ fetch('./keyboardBehavior.md')
69
+ .then((response) => response.text())
70
+ .then((text) => {
71
+ const rawHtml = marked.parse(text);
72
+ document.querySelector('main').innerHTML = rawHtml;
73
+ Prism.highlightAll();
74
+ })
75
+ </script>
76
+
77
+ <!-- If additional elements are needed for the demo, add them here. -->
78
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
79
+ <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
80
+ </body>
81
+ </html>
@@ -0,0 +1,24 @@
1
+ <auro-header level="1" id="overview">Datepicker - Keyboard Behavior</auro-header>
2
+ <div class="contentWrapper">
3
+ <div class="mainContent">
4
+ <div class="scrollWrapper">
5
+ <auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
6
+ <p>The component trigger contains <code>&lt;auro-input&gt;</code> element(s) which each have two focusable elements:</p>
7
+ <ol>
8
+ <li><strong>Input</strong></li>
9
+ <li><strong>Clear button:</strong> only shown when the input has a value.</li>
10
+ </ol>
11
+ <p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> sequence.</p>
12
+ <p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
13
+ <div class="note">
14
+ <p><strong>Note:</strong> The current implementation <strong>DOES</strong> support full interaction of the bib content and calendar with touch, click and VoiceOver interactions.</p>
15
+ <p>The current implementation of the component <strong>DOES</strong> support using the keyboard to navigate the trigger and type dates via the keyboard. It <strong>DOES NOT</strong> support navigating the bib content and calendar via the keyboard. This functionality is scheduled to be added in the next major redesign of the component.</p>
16
+ </div>
17
+ </div>
18
+ </div>
19
+ </div>
20
+
21
+ ## DEVELOPER NOTES / CODE ACTION ITEMS / TODO ITEMS
22
+ 1. Remove the bridge for keyboard event bubbling out of the bib
23
+ 1. Prevent auro-dropdown `Enter` and `Space` key behavior for opening and closing the bib. Preserve `Escape` key to close.
24
+ 1. Strip out key event listeners not listed in this document