@aurodesignsystem-dev/auro-formkit 0.0.0-pr1424.2 → 0.0.0-pr1424.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +2 -2
- package/README.md +133 -183
- package/components/checkbox/demo/api.min.js +3 -3
- package/components/checkbox/demo/index.min.js +3 -3
- package/components/checkbox/dist/index.js +3 -3
- package/components/checkbox/dist/registered.js +3 -3
- package/components/combobox/demo/api.html +1 -0
- package/components/combobox/demo/api.js +3 -1
- package/components/combobox/demo/api.md +75 -0
- package/components/combobox/demo/api.min.js +314 -172
- package/components/combobox/demo/index.min.js +301 -171
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +1 -1
- package/components/combobox/dist/index.js +291 -171
- package/components/combobox/dist/registered.js +291 -171
- package/components/counter/demo/api.html +3 -0
- package/components/counter/demo/api.js +4 -0
- package/components/counter/demo/api.md +130 -0
- package/components/counter/demo/api.min.js +320 -167
- package/components/counter/demo/index.min.js +300 -167
- package/components/counter/dist/counterGroupKeyboardStrategy.d.ts +3 -0
- package/components/counter/dist/index.js +300 -167
- package/components/counter/dist/registered.js +300 -167
- package/components/datepicker/demo/api.html +1 -0
- package/components/datepicker/demo/api.js +2 -0
- package/components/datepicker/demo/api.md +57 -0
- package/components/datepicker/demo/api.min.js +376 -171
- package/components/datepicker/demo/index.min.js +364 -171
- package/components/datepicker/dist/datepickerKeyboardStrategy.d.ts +3 -1
- package/components/datepicker/dist/index.js +364 -171
- package/components/datepicker/dist/registered.js +364 -171
- package/components/dropdown/demo/api.html +1 -0
- package/components/dropdown/demo/api.js +2 -0
- package/components/dropdown/demo/api.md +95 -0
- package/components/dropdown/demo/api.min.js +296 -165
- package/components/dropdown/demo/index.min.js +276 -165
- package/components/dropdown/dist/index.js +276 -165
- package/components/dropdown/dist/registered.js +276 -165
- package/components/form/demo/api.min.js +1254 -684
- package/components/form/demo/index.min.js +1254 -684
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/api.md +1 -0
- package/components/menu/demo/api.min.js +10 -0
- package/components/menu/demo/index.min.js +10 -0
- package/components/menu/dist/auro-menuoption.d.ts +9 -0
- package/components/menu/dist/index.js +10 -0
- package/components/menu/dist/registered.js +10 -0
- package/components/radio/demo/api.min.js +2 -2
- package/components/radio/demo/index.min.js +2 -2
- package/components/radio/dist/index.js +2 -2
- package/components/radio/dist/registered.js +2 -2
- package/components/select/demo/api.html +1 -0
- package/components/select/demo/api.js +2 -0
- package/components/select/demo/api.md +76 -0
- package/components/select/demo/api.min.js +306 -169
- package/components/select/demo/index.min.js +293 -169
- package/components/select/dist/index.js +283 -169
- package/components/select/dist/registered.js +283 -169
- package/custom-elements.json +48 -3
- package/package.json +5 -3
|
@@ -9290,7 +9290,7 @@ class AuroBibtemplate extends i$1 {
|
|
|
9290
9290
|
}
|
|
9291
9291
|
}
|
|
9292
9292
|
|
|
9293
|
-
var formkitVersion$2 = '
|
|
9293
|
+
var formkitVersion$2 = '202604091759';
|
|
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}}
|
|
@@ -11624,11 +11624,19 @@ class AuroFloatingUI {
|
|
|
11624
11624
|
* This ensures that the bib content has the same dimensions as the sizer element.
|
|
11625
11625
|
*/
|
|
11626
11626
|
mirrorSize() {
|
|
11627
|
+
const element = this.element;
|
|
11628
|
+
if (!element) {
|
|
11629
|
+
return;
|
|
11630
|
+
}
|
|
11631
|
+
|
|
11627
11632
|
// mirror the boxsize from bibSizer
|
|
11628
|
-
if (
|
|
11629
|
-
const sizerStyle = window.getComputedStyle(
|
|
11630
|
-
const bibContent =
|
|
11631
|
-
|
|
11633
|
+
if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
|
|
11634
|
+
const sizerStyle = window.getComputedStyle(element.bibSizer);
|
|
11635
|
+
const bibContent = element.bib.shadowRoot.querySelector(".container");
|
|
11636
|
+
if (!bibContent) {
|
|
11637
|
+
return;
|
|
11638
|
+
}
|
|
11639
|
+
|
|
11632
11640
|
if (sizerStyle.width !== "0px") {
|
|
11633
11641
|
bibContent.style.width = sizerStyle.width;
|
|
11634
11642
|
}
|
|
@@ -11650,9 +11658,14 @@ class AuroFloatingUI {
|
|
|
11650
11658
|
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
11651
11659
|
*/
|
|
11652
11660
|
getPositioningStrategy() {
|
|
11661
|
+
const element = this.element;
|
|
11662
|
+
if (!element) {
|
|
11663
|
+
return "floating";
|
|
11664
|
+
}
|
|
11665
|
+
|
|
11653
11666
|
const breakpoint =
|
|
11654
|
-
|
|
11655
|
-
|
|
11667
|
+
element.bib?.mobileFullscreenBreakpoint ||
|
|
11668
|
+
element.floaterConfig?.fullscreenBreakpoint;
|
|
11656
11669
|
switch (this.behavior) {
|
|
11657
11670
|
case "tooltip":
|
|
11658
11671
|
return "floating";
|
|
@@ -11663,9 +11676,9 @@ class AuroFloatingUI {
|
|
|
11663
11676
|
`(max-width: ${breakpoint})`,
|
|
11664
11677
|
).matches;
|
|
11665
11678
|
|
|
11666
|
-
|
|
11679
|
+
element.expanded = smallerThanBreakpoint;
|
|
11667
11680
|
}
|
|
11668
|
-
if (
|
|
11681
|
+
if (element.nested) {
|
|
11669
11682
|
return "cover";
|
|
11670
11683
|
}
|
|
11671
11684
|
return "fullscreen";
|
|
@@ -11695,42 +11708,65 @@ class AuroFloatingUI {
|
|
|
11695
11708
|
* and applies the calculated position to the bib's style.
|
|
11696
11709
|
*/
|
|
11697
11710
|
position() {
|
|
11711
|
+
const element = this.element;
|
|
11712
|
+
if (!element) {
|
|
11713
|
+
return;
|
|
11714
|
+
}
|
|
11715
|
+
|
|
11698
11716
|
const strategy = this.getPositioningStrategy();
|
|
11699
11717
|
this.configureBibStrategy(strategy);
|
|
11700
11718
|
|
|
11701
11719
|
if (strategy === "floating") {
|
|
11720
|
+
if (!element.trigger || !element.bib) {
|
|
11721
|
+
return;
|
|
11722
|
+
}
|
|
11723
|
+
|
|
11702
11724
|
this.mirrorSize();
|
|
11703
11725
|
// Define the middlware for the floater configuration
|
|
11704
11726
|
const middleware = [
|
|
11705
|
-
offset(
|
|
11706
|
-
...(
|
|
11707
|
-
...(
|
|
11708
|
-
...(
|
|
11727
|
+
offset(element.floaterConfig?.offset || 0),
|
|
11728
|
+
...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
11729
|
+
...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
11730
|
+
...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
11709
11731
|
];
|
|
11710
11732
|
|
|
11711
11733
|
// Compute the position of the bib
|
|
11712
|
-
computePosition(
|
|
11713
|
-
strategy:
|
|
11714
|
-
placement:
|
|
11734
|
+
computePosition(element.trigger, element.bib, {
|
|
11735
|
+
strategy: element.floaterConfig?.strategy || "fixed",
|
|
11736
|
+
placement: element.floaterConfig?.placement,
|
|
11715
11737
|
middleware: middleware || [],
|
|
11716
11738
|
}).then(({ x, y }) => {
|
|
11717
11739
|
// eslint-disable-line id-length
|
|
11718
|
-
|
|
11740
|
+
const currentElement = this.element;
|
|
11741
|
+
if (!currentElement?.bib) {
|
|
11742
|
+
return;
|
|
11743
|
+
}
|
|
11744
|
+
|
|
11745
|
+
Object.assign(currentElement.bib.style, {
|
|
11719
11746
|
left: `${x}px`,
|
|
11720
11747
|
top: `${y}px`,
|
|
11721
11748
|
});
|
|
11722
11749
|
});
|
|
11723
11750
|
} else if (strategy === "cover") {
|
|
11751
|
+
if (!element.parentNode || !element.bib) {
|
|
11752
|
+
return;
|
|
11753
|
+
}
|
|
11754
|
+
|
|
11724
11755
|
// Compute the position of the bib
|
|
11725
|
-
computePosition(
|
|
11756
|
+
computePosition(element.parentNode, element.bib, {
|
|
11726
11757
|
placement: "bottom-start",
|
|
11727
11758
|
}).then(({ x, y }) => {
|
|
11728
11759
|
// eslint-disable-line id-length
|
|
11729
|
-
|
|
11760
|
+
const currentElement = this.element;
|
|
11761
|
+
if (!currentElement?.bib || !currentElement.parentNode) {
|
|
11762
|
+
return;
|
|
11763
|
+
}
|
|
11764
|
+
|
|
11765
|
+
Object.assign(currentElement.bib.style, {
|
|
11730
11766
|
left: `${x}px`,
|
|
11731
|
-
top: `${y -
|
|
11732
|
-
width: `${
|
|
11733
|
-
height: `${
|
|
11767
|
+
top: `${y - currentElement.parentNode.offsetHeight}px`,
|
|
11768
|
+
width: `${currentElement.parentNode.offsetWidth}px`,
|
|
11769
|
+
height: `${currentElement.parentNode.offsetHeight}px`,
|
|
11734
11770
|
});
|
|
11735
11771
|
});
|
|
11736
11772
|
}
|
|
@@ -11742,11 +11778,17 @@ class AuroFloatingUI {
|
|
|
11742
11778
|
* @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
|
|
11743
11779
|
*/
|
|
11744
11780
|
lockScroll(lock = true) {
|
|
11781
|
+
const element = this.element;
|
|
11782
|
+
|
|
11745
11783
|
if (lock) {
|
|
11784
|
+
if (!element?.bib) {
|
|
11785
|
+
return;
|
|
11786
|
+
}
|
|
11787
|
+
|
|
11746
11788
|
document.body.style.overflow = "hidden"; // hide body's scrollbar
|
|
11747
11789
|
|
|
11748
11790
|
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
11749
|
-
|
|
11791
|
+
element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
11750
11792
|
} else {
|
|
11751
11793
|
document.body.style.overflow = "";
|
|
11752
11794
|
}
|
|
@@ -11762,20 +11804,24 @@ class AuroFloatingUI {
|
|
|
11762
11804
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
11763
11805
|
*/
|
|
11764
11806
|
configureBibStrategy(value) {
|
|
11807
|
+
const element = this.element;
|
|
11808
|
+
if (!element?.bib) {
|
|
11809
|
+
return;
|
|
11810
|
+
}
|
|
11811
|
+
|
|
11765
11812
|
if (value === "fullscreen") {
|
|
11766
|
-
|
|
11813
|
+
element.isBibFullscreen = true;
|
|
11767
11814
|
// reset the prev position
|
|
11768
|
-
|
|
11769
|
-
|
|
11770
|
-
|
|
11771
|
-
|
|
11772
|
-
|
|
11773
|
-
|
|
11774
|
-
|
|
11815
|
+
element.bib.setAttribute("isfullscreen", "");
|
|
11816
|
+
element.bib.style.position = "fixed";
|
|
11817
|
+
element.bib.style.top = "0px";
|
|
11818
|
+
element.bib.style.left = "0px";
|
|
11819
|
+
element.bib.style.width = "";
|
|
11820
|
+
element.bib.style.height = "";
|
|
11821
|
+
element.style.contain = "";
|
|
11775
11822
|
|
|
11776
11823
|
// reset the size that was mirroring `size` css-part
|
|
11777
|
-
const bibContent =
|
|
11778
|
-
this.element.bib.shadowRoot.querySelector(".container");
|
|
11824
|
+
const bibContent = element.bib.shadowRoot?.querySelector(".container");
|
|
11779
11825
|
if (bibContent) {
|
|
11780
11826
|
bibContent.style.width = "";
|
|
11781
11827
|
bibContent.style.height = "";
|
|
@@ -11790,14 +11836,14 @@ class AuroFloatingUI {
|
|
|
11790
11836
|
}, 0);
|
|
11791
11837
|
}
|
|
11792
11838
|
|
|
11793
|
-
if (
|
|
11839
|
+
if (element.isPopoverVisible) {
|
|
11794
11840
|
this.lockScroll(true);
|
|
11795
11841
|
}
|
|
11796
11842
|
} else {
|
|
11797
|
-
|
|
11798
|
-
|
|
11799
|
-
|
|
11800
|
-
|
|
11843
|
+
element.bib.style.position = "";
|
|
11844
|
+
element.bib.removeAttribute("isfullscreen");
|
|
11845
|
+
element.isBibFullscreen = false;
|
|
11846
|
+
element.style.contain = "layout";
|
|
11801
11847
|
}
|
|
11802
11848
|
|
|
11803
11849
|
const isChanged = this.strategy && this.strategy !== value;
|
|
@@ -11815,16 +11861,21 @@ class AuroFloatingUI {
|
|
|
11815
11861
|
},
|
|
11816
11862
|
);
|
|
11817
11863
|
|
|
11818
|
-
|
|
11864
|
+
element.dispatchEvent(event);
|
|
11819
11865
|
}
|
|
11820
11866
|
}
|
|
11821
11867
|
|
|
11822
11868
|
updateState() {
|
|
11823
|
-
const
|
|
11869
|
+
const element = this.element;
|
|
11870
|
+
if (!element) {
|
|
11871
|
+
return;
|
|
11872
|
+
}
|
|
11873
|
+
|
|
11874
|
+
const isVisible = element.isPopoverVisible;
|
|
11824
11875
|
if (!isVisible) {
|
|
11825
11876
|
this.cleanupHideHandlers();
|
|
11826
11877
|
try {
|
|
11827
|
-
|
|
11878
|
+
element.cleanup?.();
|
|
11828
11879
|
} catch (error) {
|
|
11829
11880
|
// Do nothing
|
|
11830
11881
|
}
|
|
@@ -11840,28 +11891,30 @@ class AuroFloatingUI {
|
|
|
11840
11891
|
* If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
|
|
11841
11892
|
*/
|
|
11842
11893
|
handleFocusLoss() {
|
|
11894
|
+
const element = this.element;
|
|
11895
|
+
if (!element?.bib) {
|
|
11896
|
+
return;
|
|
11897
|
+
}
|
|
11898
|
+
|
|
11843
11899
|
// if mouse is being pressed, skip and let click event to handle the action
|
|
11844
11900
|
if (AuroFloatingUI.isMousePressed) {
|
|
11845
11901
|
return;
|
|
11846
11902
|
}
|
|
11847
11903
|
|
|
11848
11904
|
if (
|
|
11849
|
-
|
|
11850
|
-
|
|
11905
|
+
element.noHideOnThisFocusLoss ||
|
|
11906
|
+
element.hasAttribute("noHideOnThisFocusLoss")
|
|
11851
11907
|
) {
|
|
11852
11908
|
return;
|
|
11853
11909
|
}
|
|
11854
11910
|
|
|
11855
11911
|
// if focus is still inside of trigger or bib, do not close
|
|
11856
|
-
if (
|
|
11857
|
-
this.element.matches(":focus") ||
|
|
11858
|
-
this.element.matches(":focus-within")
|
|
11859
|
-
) {
|
|
11912
|
+
if (element.matches(":focus") || element.matches(":focus-within")) {
|
|
11860
11913
|
return;
|
|
11861
11914
|
}
|
|
11862
11915
|
|
|
11863
11916
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
11864
|
-
if (
|
|
11917
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
11865
11918
|
return;
|
|
11866
11919
|
}
|
|
11867
11920
|
|
|
@@ -11869,23 +11922,33 @@ class AuroFloatingUI {
|
|
|
11869
11922
|
}
|
|
11870
11923
|
|
|
11871
11924
|
setupHideHandlers() {
|
|
11925
|
+
const element = this.element;
|
|
11926
|
+
if (!element) {
|
|
11927
|
+
return;
|
|
11928
|
+
}
|
|
11929
|
+
|
|
11872
11930
|
// Define handlers & store references
|
|
11873
11931
|
this.focusHandler = () => this.handleFocusLoss();
|
|
11874
11932
|
|
|
11875
11933
|
this.clickHandler = (evt) => {
|
|
11934
|
+
const element = this.element;
|
|
11935
|
+
if (!element?.bib) {
|
|
11936
|
+
return;
|
|
11937
|
+
}
|
|
11938
|
+
|
|
11876
11939
|
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
11877
11940
|
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
11878
11941
|
// <dialog> may not include the bib in composedPath(), causing false
|
|
11879
11942
|
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
11880
|
-
if (
|
|
11943
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
11881
11944
|
return;
|
|
11882
11945
|
}
|
|
11883
11946
|
|
|
11884
11947
|
if (
|
|
11885
|
-
(!evt.composedPath().includes(
|
|
11886
|
-
!evt.composedPath().includes(
|
|
11887
|
-
(
|
|
11888
|
-
evt.composedPath().includes(
|
|
11948
|
+
(!evt.composedPath().includes(element.trigger) &&
|
|
11949
|
+
!evt.composedPath().includes(element.bib)) ||
|
|
11950
|
+
(element.bib.backdrop &&
|
|
11951
|
+
evt.composedPath().includes(element.bib.backdrop))
|
|
11889
11952
|
) {
|
|
11890
11953
|
const existedVisibleFloatingUI =
|
|
11891
11954
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -11906,7 +11969,12 @@ class AuroFloatingUI {
|
|
|
11906
11969
|
|
|
11907
11970
|
// ESC key handler
|
|
11908
11971
|
this.keyDownHandler = (evt) => {
|
|
11909
|
-
|
|
11972
|
+
const element = this.element;
|
|
11973
|
+
if (!element) {
|
|
11974
|
+
return;
|
|
11975
|
+
}
|
|
11976
|
+
|
|
11977
|
+
if (evt.key === "Escape" && element.isPopoverVisible) {
|
|
11910
11978
|
const existedVisibleFloatingUI =
|
|
11911
11979
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
11912
11980
|
if (
|
|
@@ -11963,6 +12031,10 @@ class AuroFloatingUI {
|
|
|
11963
12031
|
}
|
|
11964
12032
|
|
|
11965
12033
|
updateCurrentExpandedDropdown() {
|
|
12034
|
+
if (!this.element) {
|
|
12035
|
+
return;
|
|
12036
|
+
}
|
|
12037
|
+
|
|
11966
12038
|
// Close any other dropdown that is already open
|
|
11967
12039
|
const existedVisibleFloatingUI =
|
|
11968
12040
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -11979,25 +12051,34 @@ class AuroFloatingUI {
|
|
|
11979
12051
|
}
|
|
11980
12052
|
|
|
11981
12053
|
showBib() {
|
|
11982
|
-
|
|
12054
|
+
const element = this.element;
|
|
12055
|
+
if (!element) {
|
|
12056
|
+
return;
|
|
12057
|
+
}
|
|
12058
|
+
|
|
12059
|
+
if (!element.bib || (!element.trigger && !element.parentNode)) {
|
|
12060
|
+
return;
|
|
12061
|
+
}
|
|
12062
|
+
|
|
12063
|
+
if (!element.disabled && !this.showing) {
|
|
11983
12064
|
this.updateCurrentExpandedDropdown();
|
|
11984
|
-
|
|
12065
|
+
element.triggerChevron?.setAttribute("data-expanded", true);
|
|
11985
12066
|
|
|
11986
12067
|
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
11987
12068
|
if (!this.showing) {
|
|
11988
|
-
if (!
|
|
12069
|
+
if (!element.modal) {
|
|
11989
12070
|
this.setupHideHandlers();
|
|
11990
12071
|
}
|
|
11991
12072
|
this.showing = true;
|
|
11992
|
-
|
|
12073
|
+
element.isPopoverVisible = true;
|
|
11993
12074
|
this.position();
|
|
11994
12075
|
this.dispatchEventDropdownToggle();
|
|
11995
12076
|
}
|
|
11996
12077
|
|
|
11997
12078
|
// Setup auto update to handle resize and scroll
|
|
11998
|
-
|
|
11999
|
-
|
|
12000
|
-
|
|
12079
|
+
element.cleanup = autoUpdate(
|
|
12080
|
+
element.trigger || element.parentNode,
|
|
12081
|
+
element.bib,
|
|
12001
12082
|
() => {
|
|
12002
12083
|
this.position();
|
|
12003
12084
|
},
|
|
@@ -12010,22 +12091,27 @@ class AuroFloatingUI {
|
|
|
12010
12091
|
* @param {String} eventType - The event type that triggered the hiding action.
|
|
12011
12092
|
*/
|
|
12012
12093
|
hideBib(eventType = "unknown") {
|
|
12013
|
-
|
|
12094
|
+
const element = this.element;
|
|
12095
|
+
if (!element) {
|
|
12096
|
+
return;
|
|
12097
|
+
}
|
|
12098
|
+
|
|
12099
|
+
if (element.disabled) {
|
|
12014
12100
|
return;
|
|
12015
12101
|
}
|
|
12016
12102
|
|
|
12017
12103
|
// noToggle dropdowns should not close when the trigger is clicked (the
|
|
12018
12104
|
// "toggle" behavior), but they CAN still close via other interactions like
|
|
12019
12105
|
// Escape key or focus loss.
|
|
12020
|
-
if (
|
|
12106
|
+
if (element.noToggle && eventType === "click") {
|
|
12021
12107
|
return;
|
|
12022
12108
|
}
|
|
12023
12109
|
|
|
12024
12110
|
this.lockScroll(false);
|
|
12025
|
-
|
|
12111
|
+
element.triggerChevron?.removeAttribute("data-expanded");
|
|
12026
12112
|
|
|
12027
|
-
if (
|
|
12028
|
-
|
|
12113
|
+
if (element.isPopoverVisible) {
|
|
12114
|
+
element.isPopoverVisible = false;
|
|
12029
12115
|
}
|
|
12030
12116
|
if (this.showing) {
|
|
12031
12117
|
this.cleanupHideHandlers();
|
|
@@ -12045,6 +12131,11 @@ class AuroFloatingUI {
|
|
|
12045
12131
|
* @param {String} eventType - The event type that triggered the toggle action.
|
|
12046
12132
|
*/
|
|
12047
12133
|
dispatchEventDropdownToggle(eventType) {
|
|
12134
|
+
const element = this.element;
|
|
12135
|
+
if (!element) {
|
|
12136
|
+
return;
|
|
12137
|
+
}
|
|
12138
|
+
|
|
12048
12139
|
const event = new CustomEvent(
|
|
12049
12140
|
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
12050
12141
|
{
|
|
@@ -12056,11 +12147,16 @@ class AuroFloatingUI {
|
|
|
12056
12147
|
},
|
|
12057
12148
|
);
|
|
12058
12149
|
|
|
12059
|
-
|
|
12150
|
+
element.dispatchEvent(event);
|
|
12060
12151
|
}
|
|
12061
12152
|
|
|
12062
12153
|
handleClick() {
|
|
12063
|
-
|
|
12154
|
+
const element = this.element;
|
|
12155
|
+
if (!element) {
|
|
12156
|
+
return;
|
|
12157
|
+
}
|
|
12158
|
+
|
|
12159
|
+
if (element.isPopoverVisible) {
|
|
12064
12160
|
this.hideBib("click");
|
|
12065
12161
|
} else {
|
|
12066
12162
|
this.showBib();
|
|
@@ -12071,63 +12167,66 @@ class AuroFloatingUI {
|
|
|
12071
12167
|
{
|
|
12072
12168
|
composed: true,
|
|
12073
12169
|
detail: {
|
|
12074
|
-
expanded:
|
|
12170
|
+
expanded: element.isPopoverVisible,
|
|
12075
12171
|
},
|
|
12076
12172
|
},
|
|
12077
12173
|
);
|
|
12078
12174
|
|
|
12079
|
-
|
|
12175
|
+
element.dispatchEvent(event);
|
|
12080
12176
|
}
|
|
12081
12177
|
|
|
12082
12178
|
handleEvent(event) {
|
|
12083
|
-
|
|
12084
|
-
|
|
12085
|
-
|
|
12086
|
-
|
|
12087
|
-
|
|
12088
|
-
|
|
12089
|
-
|
|
12090
|
-
|
|
12091
|
-
|
|
12092
|
-
|
|
12093
|
-
|
|
12094
|
-
|
|
12095
|
-
|
|
12096
|
-
|
|
12097
|
-
|
|
12098
|
-
|
|
12099
|
-
case "mouseenter":
|
|
12100
|
-
if (this.element.hoverToggle) {
|
|
12101
|
-
this.showBib();
|
|
12102
|
-
}
|
|
12103
|
-
break;
|
|
12104
|
-
case "mouseleave":
|
|
12105
|
-
if (this.element.hoverToggle) {
|
|
12106
|
-
this.hideBib("mouseleave");
|
|
12107
|
-
}
|
|
12108
|
-
break;
|
|
12109
|
-
case "focus":
|
|
12110
|
-
if (this.element.focusShow) {
|
|
12111
|
-
/*
|
|
12112
|
-
This needs to better handle clicking that gives focus -
|
|
12113
|
-
currently it shows and then immediately hides the bib
|
|
12114
|
-
*/
|
|
12115
|
-
this.showBib();
|
|
12116
|
-
}
|
|
12117
|
-
break;
|
|
12118
|
-
case "blur":
|
|
12119
|
-
// send this task 100ms later queue to
|
|
12120
|
-
// wait a frame in case focus moves within the floating element/bib
|
|
12121
|
-
setTimeout(() => this.handleFocusLoss(), 0);
|
|
12122
|
-
break;
|
|
12123
|
-
case "click":
|
|
12124
|
-
if (document.activeElement === document.body) {
|
|
12125
|
-
event.currentTarget.focus();
|
|
12126
|
-
}
|
|
12179
|
+
const element = this.element;
|
|
12180
|
+
if (!element || element.disableEventShow) {
|
|
12181
|
+
return;
|
|
12182
|
+
}
|
|
12183
|
+
|
|
12184
|
+
switch (event.type) {
|
|
12185
|
+
case "keydown": {
|
|
12186
|
+
// Support both Enter and Space keys for accessibility
|
|
12187
|
+
// Space is included as it's expected behavior for interactive elements
|
|
12188
|
+
|
|
12189
|
+
const origin = event.composedPath()[0];
|
|
12190
|
+
if (
|
|
12191
|
+
event.key === "Enter" ||
|
|
12192
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
12193
|
+
) {
|
|
12194
|
+
event.preventDefault();
|
|
12127
12195
|
this.handleClick();
|
|
12128
|
-
|
|
12129
|
-
|
|
12196
|
+
}
|
|
12197
|
+
break;
|
|
12130
12198
|
}
|
|
12199
|
+
case "mouseenter":
|
|
12200
|
+
if (element.hoverToggle) {
|
|
12201
|
+
this.showBib();
|
|
12202
|
+
}
|
|
12203
|
+
break;
|
|
12204
|
+
case "mouseleave":
|
|
12205
|
+
if (element.hoverToggle) {
|
|
12206
|
+
this.hideBib("mouseleave");
|
|
12207
|
+
}
|
|
12208
|
+
break;
|
|
12209
|
+
case "focus":
|
|
12210
|
+
if (element.focusShow) {
|
|
12211
|
+
/*
|
|
12212
|
+
This needs to better handle clicking that gives focus -
|
|
12213
|
+
currently it shows and then immediately hides the bib
|
|
12214
|
+
*/
|
|
12215
|
+
this.showBib();
|
|
12216
|
+
}
|
|
12217
|
+
break;
|
|
12218
|
+
case "blur":
|
|
12219
|
+
// send this task 100ms later queue to
|
|
12220
|
+
// wait a frame in case focus moves within the floating element/bib
|
|
12221
|
+
setTimeout(() => this.handleFocusLoss(), 0);
|
|
12222
|
+
break;
|
|
12223
|
+
case "click":
|
|
12224
|
+
if (document.activeElement === document.body) {
|
|
12225
|
+
event.currentTarget.focus();
|
|
12226
|
+
}
|
|
12227
|
+
this.handleClick();
|
|
12228
|
+
break;
|
|
12229
|
+
// Do nothing
|
|
12131
12230
|
}
|
|
12132
12231
|
}
|
|
12133
12232
|
|
|
@@ -12138,6 +12237,11 @@ class AuroFloatingUI {
|
|
|
12138
12237
|
* This prevents the component itself from being focusable when the trigger element already handles focus.
|
|
12139
12238
|
*/
|
|
12140
12239
|
handleTriggerTabIndex() {
|
|
12240
|
+
const element = this.element;
|
|
12241
|
+
if (!element) {
|
|
12242
|
+
return;
|
|
12243
|
+
}
|
|
12244
|
+
|
|
12141
12245
|
const focusableElementSelectors = [
|
|
12142
12246
|
"a",
|
|
12143
12247
|
"button",
|
|
@@ -12150,7 +12254,7 @@ class AuroFloatingUI {
|
|
|
12150
12254
|
"auro-hyperlink",
|
|
12151
12255
|
];
|
|
12152
12256
|
|
|
12153
|
-
const triggerNode =
|
|
12257
|
+
const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
|
|
12154
12258
|
if (!triggerNode) {
|
|
12155
12259
|
return;
|
|
12156
12260
|
}
|
|
@@ -12159,13 +12263,13 @@ class AuroFloatingUI {
|
|
|
12159
12263
|
focusableElementSelectors.forEach((selector) => {
|
|
12160
12264
|
// Check if the trigger node element is focusable
|
|
12161
12265
|
if (triggerNodeTagName === selector) {
|
|
12162
|
-
|
|
12266
|
+
element.tabIndex = -1;
|
|
12163
12267
|
return;
|
|
12164
12268
|
}
|
|
12165
12269
|
|
|
12166
12270
|
// Check if any child is focusable
|
|
12167
12271
|
if (triggerNode.querySelector(selector)) {
|
|
12168
|
-
|
|
12272
|
+
element.tabIndex = -1;
|
|
12169
12273
|
}
|
|
12170
12274
|
});
|
|
12171
12275
|
}
|
|
@@ -12175,13 +12279,18 @@ class AuroFloatingUI {
|
|
|
12175
12279
|
* @param {*} eventPrefix
|
|
12176
12280
|
*/
|
|
12177
12281
|
regenerateBibId() {
|
|
12178
|
-
|
|
12282
|
+
const element = this.element;
|
|
12283
|
+
if (!element) {
|
|
12284
|
+
return;
|
|
12285
|
+
}
|
|
12286
|
+
|
|
12287
|
+
this.id = element.getAttribute("id");
|
|
12179
12288
|
if (!this.id) {
|
|
12180
12289
|
this.id = window.crypto.randomUUID();
|
|
12181
|
-
|
|
12290
|
+
element.setAttribute("id", this.id);
|
|
12182
12291
|
}
|
|
12183
12292
|
|
|
12184
|
-
|
|
12293
|
+
element.bib?.setAttribute("id", `${this.id}-floater-bib`);
|
|
12185
12294
|
}
|
|
12186
12295
|
|
|
12187
12296
|
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
@@ -12193,67 +12302,69 @@ class AuroFloatingUI {
|
|
|
12193
12302
|
this.element = elem;
|
|
12194
12303
|
}
|
|
12195
12304
|
|
|
12196
|
-
|
|
12197
|
-
|
|
12305
|
+
const element = this.element;
|
|
12306
|
+
if (!element) {
|
|
12307
|
+
return;
|
|
12308
|
+
}
|
|
12309
|
+
|
|
12310
|
+
if (this.behavior !== element.behavior) {
|
|
12311
|
+
this.behavior = element.behavior;
|
|
12198
12312
|
}
|
|
12199
12313
|
|
|
12200
|
-
if (
|
|
12314
|
+
if (element.trigger) {
|
|
12201
12315
|
this.disconnect();
|
|
12202
12316
|
}
|
|
12203
|
-
|
|
12204
|
-
|
|
12205
|
-
|
|
12206
|
-
|
|
12207
|
-
|
|
12208
|
-
|
|
12209
|
-
|
|
12210
|
-
|
|
12211
|
-
this.element.shadowRoot.querySelector("#showStateIcon");
|
|
12317
|
+
element.trigger =
|
|
12318
|
+
element.triggerElement ||
|
|
12319
|
+
element.shadowRoot?.querySelector("#trigger") ||
|
|
12320
|
+
element.trigger;
|
|
12321
|
+
element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
|
|
12322
|
+
element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
|
|
12323
|
+
element.triggerChevron =
|
|
12324
|
+
element.shadowRoot?.querySelector("#showStateIcon");
|
|
12212
12325
|
|
|
12213
|
-
if (
|
|
12214
|
-
|
|
12326
|
+
if (element.floaterConfig) {
|
|
12327
|
+
element.hoverToggle = element.floaterConfig.hoverToggle;
|
|
12215
12328
|
}
|
|
12216
12329
|
|
|
12217
12330
|
this.regenerateBibId();
|
|
12218
12331
|
this.handleTriggerTabIndex();
|
|
12219
12332
|
|
|
12220
12333
|
this.handleEvent = this.handleEvent.bind(this);
|
|
12221
|
-
if (
|
|
12334
|
+
if (element.trigger) {
|
|
12222
12335
|
if (this.enableKeyboardHandling) {
|
|
12223
|
-
|
|
12336
|
+
element.trigger.addEventListener("keydown", this.handleEvent);
|
|
12224
12337
|
}
|
|
12225
|
-
|
|
12226
|
-
|
|
12227
|
-
|
|
12228
|
-
|
|
12229
|
-
|
|
12338
|
+
element.trigger.addEventListener("click", this.handleEvent);
|
|
12339
|
+
element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
12340
|
+
element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
12341
|
+
element.trigger.addEventListener("focus", this.handleEvent);
|
|
12342
|
+
element.trigger.addEventListener("blur", this.handleEvent);
|
|
12230
12343
|
}
|
|
12231
12344
|
}
|
|
12232
12345
|
|
|
12233
12346
|
disconnect() {
|
|
12234
12347
|
this.cleanupHideHandlers();
|
|
12235
|
-
if (this.element) {
|
|
12236
|
-
this.element.cleanup?.();
|
|
12237
12348
|
|
|
12238
|
-
|
|
12239
|
-
|
|
12240
|
-
|
|
12349
|
+
const element = this.element;
|
|
12350
|
+
if (!element) {
|
|
12351
|
+
return;
|
|
12352
|
+
}
|
|
12241
12353
|
|
|
12242
|
-
|
|
12243
|
-
|
|
12244
|
-
|
|
12245
|
-
|
|
12246
|
-
|
|
12247
|
-
|
|
12248
|
-
|
|
12249
|
-
|
|
12250
|
-
|
|
12251
|
-
|
|
12252
|
-
|
|
12253
|
-
|
|
12254
|
-
|
|
12255
|
-
|
|
12256
|
-
}
|
|
12354
|
+
element.cleanup?.();
|
|
12355
|
+
|
|
12356
|
+
if (element.bib && element.shadowRoot) {
|
|
12357
|
+
element.shadowRoot.append(element.bib);
|
|
12358
|
+
}
|
|
12359
|
+
|
|
12360
|
+
// Remove event & keyboard listeners
|
|
12361
|
+
if (element.trigger) {
|
|
12362
|
+
element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
12363
|
+
element.trigger.removeEventListener("click", this.handleEvent);
|
|
12364
|
+
element.trigger.removeEventListener("mouseenter", this.handleEvent);
|
|
12365
|
+
element.trigger.removeEventListener("mouseleave", this.handleEvent);
|
|
12366
|
+
element.trigger.removeEventListener("focus", this.handleEvent);
|
|
12367
|
+
element.trigger.removeEventListener("blur", this.handleEvent);
|
|
12257
12368
|
}
|
|
12258
12369
|
}
|
|
12259
12370
|
}
|
|
@@ -12710,7 +12821,7 @@ var iconVersion$2 = '9.1.2';
|
|
|
12710
12821
|
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
12711
12822
|
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
12712
12823
|
*/
|
|
12713
|
-
function createDisplayContext(component, options = {}) {
|
|
12824
|
+
function createDisplayContext$1(component, options = {}) {
|
|
12714
12825
|
const dd = options.dropdown || component.dropdown;
|
|
12715
12826
|
// isPopoverVisible reflects as the `open` attribute.
|
|
12716
12827
|
// It reports whether the bib is open in any mode (popover or modal).
|
|
@@ -12740,11 +12851,11 @@ function createDisplayContext(component, options = {}) {
|
|
|
12740
12851
|
* @param {Object} strategy - Map of key names to handler functions.
|
|
12741
12852
|
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
12742
12853
|
*/
|
|
12743
|
-
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
12854
|
+
function applyKeyboardStrategy$1(component, strategy, options = {}) {
|
|
12744
12855
|
component.addEventListener('keydown', async (evt) => {
|
|
12745
12856
|
const handler = strategy[evt.key] || strategy.default;
|
|
12746
12857
|
if (typeof handler === 'function') {
|
|
12747
|
-
const ctx = createDisplayContext(component, options);
|
|
12858
|
+
const ctx = createDisplayContext$1(component, options);
|
|
12748
12859
|
await handler(component, evt, ctx);
|
|
12749
12860
|
}
|
|
12750
12861
|
});
|
|
@@ -12979,7 +13090,7 @@ class AuroDropdownBib extends i$1 {
|
|
|
12979
13090
|
|
|
12980
13091
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
12981
13092
|
this._setupCancelHandler(dialog);
|
|
12982
|
-
applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
|
|
13093
|
+
applyKeyboardStrategy$1(dialog, createDropdownBibKeyboardStrategy());
|
|
12983
13094
|
|
|
12984
13095
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
12985
13096
|
bubbles: true,
|
|
@@ -13381,7 +13492,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
|
|
|
13381
13492
|
}
|
|
13382
13493
|
};
|
|
13383
13494
|
|
|
13384
|
-
var formkitVersion$1 = '
|
|
13495
|
+
var formkitVersion$1 = '202604091759';
|
|
13385
13496
|
|
|
13386
13497
|
let AuroElement$2 = class AuroElement extends i$1 {
|
|
13387
13498
|
static get properties() {
|
|
@@ -13487,7 +13598,7 @@ let AuroElement$2 = class AuroElement extends i$1 {
|
|
|
13487
13598
|
}
|
|
13488
13599
|
};
|
|
13489
13600
|
|
|
13490
|
-
// Copyright (c) 2026 Alaska Airlines. All
|
|
13601
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
13491
13602
|
// See LICENSE in the project root for license information.
|
|
13492
13603
|
|
|
13493
13604
|
|
|
@@ -21137,7 +21248,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
|
|
|
21137
21248
|
}
|
|
21138
21249
|
};
|
|
21139
21250
|
|
|
21140
|
-
var formkitVersion = '
|
|
21251
|
+
var formkitVersion = '202604091759';
|
|
21141
21252
|
|
|
21142
21253
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
21143
21254
|
// See LICENSE in the project root for license information.
|
|
@@ -22334,7 +22445,88 @@ function guardTouchPassthrough(element) {
|
|
|
22334
22445
|
}, { once: true });
|
|
22335
22446
|
}
|
|
22336
22447
|
|
|
22337
|
-
|
|
22448
|
+
/**
|
|
22449
|
+
* Computes display state once per keydown event.
|
|
22450
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
22451
|
+
*
|
|
22452
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
22453
|
+
* @param {Object} [options] - Optional config.
|
|
22454
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
22455
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
22456
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
22457
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
22458
|
+
*/
|
|
22459
|
+
function createDisplayContext(component, options = {}) {
|
|
22460
|
+
const dd = options.dropdown || component.dropdown;
|
|
22461
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
22462
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
22463
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
22464
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
22465
|
+
|
|
22466
|
+
const ctx = {
|
|
22467
|
+
isExpanded,
|
|
22468
|
+
isModal: isFullscreen,
|
|
22469
|
+
isPopover: !isFullscreen,
|
|
22470
|
+
activeInput: null,
|
|
22471
|
+
};
|
|
22472
|
+
|
|
22473
|
+
if (options.inputResolver) {
|
|
22474
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
22475
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
22476
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
22477
|
+
}
|
|
22478
|
+
|
|
22479
|
+
return ctx;
|
|
22480
|
+
}
|
|
22481
|
+
|
|
22482
|
+
/**
|
|
22483
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
22484
|
+
* Handles both sync and async handlers.
|
|
22485
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
22486
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
22487
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
22488
|
+
*/
|
|
22489
|
+
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
22490
|
+
component.addEventListener('keydown', async (evt) => {
|
|
22491
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
22492
|
+
if (typeof handler === 'function') {
|
|
22493
|
+
const ctx = createDisplayContext(component, options);
|
|
22494
|
+
await handler(component, evt, ctx);
|
|
22495
|
+
}
|
|
22496
|
+
});
|
|
22497
|
+
}
|
|
22498
|
+
|
|
22499
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
22500
|
+
// See LICENSE in the project root for license information.
|
|
22501
|
+
|
|
22502
|
+
// Authoritative datepicker keyboard behavior spec:
|
|
22503
|
+
// components/datepicker/docs/partials/keyboardBehavior.md
|
|
22504
|
+
//
|
|
22505
|
+
// Current behavior (transitional — full bib keyboard navigation is planned for a future iteration):
|
|
22506
|
+
// - The bib opens and closes via pointer/touch interaction only.
|
|
22507
|
+
// - Escape closes the bib and prevents the event from reaching parent containers.
|
|
22508
|
+
// - Tab uses the browser's default tabindex sequence across trigger controls.
|
|
22509
|
+
// - Enter and Space do not open or close the bib.
|
|
22510
|
+
//
|
|
22511
|
+
// This file is an intentional placeholder for most keys. When datepicker bib keyboard navigation is
|
|
22512
|
+
// added, handlers should go here following the same strategy pattern used by
|
|
22513
|
+
// auro-select (selectKeyboardStrategy.js) and auro-combobox (comboboxKeyboardStrategy.js).
|
|
22514
|
+
const datepickerKeyboardStrategy = {
|
|
22515
|
+
Escape(component, evt) {
|
|
22516
|
+
if (!component.dropdown || !component.dropdown.isPopoverVisible) {
|
|
22517
|
+
return;
|
|
22518
|
+
}
|
|
22519
|
+
|
|
22520
|
+
// Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups.
|
|
22521
|
+
// Because stopPropagation prevents the document-level floatingUI keydown handler from
|
|
22522
|
+
// seeing this event, we must also close the dropdown explicitly.
|
|
22523
|
+
evt.stopPropagation();
|
|
22524
|
+
|
|
22525
|
+
component.dropdown.hide();
|
|
22526
|
+
},
|
|
22527
|
+
};
|
|
22528
|
+
|
|
22529
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
22338
22530
|
// See LICENSE in the project root for license information.
|
|
22339
22531
|
|
|
22340
22532
|
|
|
@@ -23791,6 +23983,7 @@ class AuroDatePicker extends AuroElement {
|
|
|
23791
23983
|
this.configureCalendar();
|
|
23792
23984
|
this.configureDatepicker();
|
|
23793
23985
|
this.configureClickHandler();
|
|
23986
|
+
applyKeyboardStrategy(this, datepickerKeyboardStrategy);
|
|
23794
23987
|
}
|
|
23795
23988
|
|
|
23796
23989
|
connectedCallback() {
|