@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
|
@@ -9242,7 +9242,7 @@ class AuroBibtemplate extends LitElement {
|
|
|
9242
9242
|
}
|
|
9243
9243
|
}
|
|
9244
9244
|
|
|
9245
|
-
var formkitVersion$2 = '
|
|
9245
|
+
var formkitVersion$2 = '202604091759';
|
|
9246
9246
|
|
|
9247
9247
|
let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=literal`${unsafeStatic(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$1 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$1=css`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
9248
9248
|
`,u$4=css`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
@@ -11552,11 +11552,19 @@ class AuroFloatingUI {
|
|
|
11552
11552
|
* This ensures that the bib content has the same dimensions as the sizer element.
|
|
11553
11553
|
*/
|
|
11554
11554
|
mirrorSize() {
|
|
11555
|
+
const element = this.element;
|
|
11556
|
+
if (!element) {
|
|
11557
|
+
return;
|
|
11558
|
+
}
|
|
11559
|
+
|
|
11555
11560
|
// mirror the boxsize from bibSizer
|
|
11556
|
-
if (
|
|
11557
|
-
const sizerStyle = window.getComputedStyle(
|
|
11558
|
-
const bibContent =
|
|
11559
|
-
|
|
11561
|
+
if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
|
|
11562
|
+
const sizerStyle = window.getComputedStyle(element.bibSizer);
|
|
11563
|
+
const bibContent = element.bib.shadowRoot.querySelector(".container");
|
|
11564
|
+
if (!bibContent) {
|
|
11565
|
+
return;
|
|
11566
|
+
}
|
|
11567
|
+
|
|
11560
11568
|
if (sizerStyle.width !== "0px") {
|
|
11561
11569
|
bibContent.style.width = sizerStyle.width;
|
|
11562
11570
|
}
|
|
@@ -11578,9 +11586,14 @@ class AuroFloatingUI {
|
|
|
11578
11586
|
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
11579
11587
|
*/
|
|
11580
11588
|
getPositioningStrategy() {
|
|
11589
|
+
const element = this.element;
|
|
11590
|
+
if (!element) {
|
|
11591
|
+
return "floating";
|
|
11592
|
+
}
|
|
11593
|
+
|
|
11581
11594
|
const breakpoint =
|
|
11582
|
-
|
|
11583
|
-
|
|
11595
|
+
element.bib?.mobileFullscreenBreakpoint ||
|
|
11596
|
+
element.floaterConfig?.fullscreenBreakpoint;
|
|
11584
11597
|
switch (this.behavior) {
|
|
11585
11598
|
case "tooltip":
|
|
11586
11599
|
return "floating";
|
|
@@ -11591,9 +11604,9 @@ class AuroFloatingUI {
|
|
|
11591
11604
|
`(max-width: ${breakpoint})`,
|
|
11592
11605
|
).matches;
|
|
11593
11606
|
|
|
11594
|
-
|
|
11607
|
+
element.expanded = smallerThanBreakpoint;
|
|
11595
11608
|
}
|
|
11596
|
-
if (
|
|
11609
|
+
if (element.nested) {
|
|
11597
11610
|
return "cover";
|
|
11598
11611
|
}
|
|
11599
11612
|
return "fullscreen";
|
|
@@ -11623,42 +11636,65 @@ class AuroFloatingUI {
|
|
|
11623
11636
|
* and applies the calculated position to the bib's style.
|
|
11624
11637
|
*/
|
|
11625
11638
|
position() {
|
|
11639
|
+
const element = this.element;
|
|
11640
|
+
if (!element) {
|
|
11641
|
+
return;
|
|
11642
|
+
}
|
|
11643
|
+
|
|
11626
11644
|
const strategy = this.getPositioningStrategy();
|
|
11627
11645
|
this.configureBibStrategy(strategy);
|
|
11628
11646
|
|
|
11629
11647
|
if (strategy === "floating") {
|
|
11648
|
+
if (!element.trigger || !element.bib) {
|
|
11649
|
+
return;
|
|
11650
|
+
}
|
|
11651
|
+
|
|
11630
11652
|
this.mirrorSize();
|
|
11631
11653
|
// Define the middlware for the floater configuration
|
|
11632
11654
|
const middleware = [
|
|
11633
|
-
offset(
|
|
11634
|
-
...(
|
|
11635
|
-
...(
|
|
11636
|
-
...(
|
|
11655
|
+
offset(element.floaterConfig?.offset || 0),
|
|
11656
|
+
...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
11657
|
+
...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
11658
|
+
...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
11637
11659
|
];
|
|
11638
11660
|
|
|
11639
11661
|
// Compute the position of the bib
|
|
11640
|
-
computePosition(
|
|
11641
|
-
strategy:
|
|
11642
|
-
placement:
|
|
11662
|
+
computePosition(element.trigger, element.bib, {
|
|
11663
|
+
strategy: element.floaterConfig?.strategy || "fixed",
|
|
11664
|
+
placement: element.floaterConfig?.placement,
|
|
11643
11665
|
middleware: middleware || [],
|
|
11644
11666
|
}).then(({ x, y }) => {
|
|
11645
11667
|
// eslint-disable-line id-length
|
|
11646
|
-
|
|
11668
|
+
const currentElement = this.element;
|
|
11669
|
+
if (!currentElement?.bib) {
|
|
11670
|
+
return;
|
|
11671
|
+
}
|
|
11672
|
+
|
|
11673
|
+
Object.assign(currentElement.bib.style, {
|
|
11647
11674
|
left: `${x}px`,
|
|
11648
11675
|
top: `${y}px`,
|
|
11649
11676
|
});
|
|
11650
11677
|
});
|
|
11651
11678
|
} else if (strategy === "cover") {
|
|
11679
|
+
if (!element.parentNode || !element.bib) {
|
|
11680
|
+
return;
|
|
11681
|
+
}
|
|
11682
|
+
|
|
11652
11683
|
// Compute the position of the bib
|
|
11653
|
-
computePosition(
|
|
11684
|
+
computePosition(element.parentNode, element.bib, {
|
|
11654
11685
|
placement: "bottom-start",
|
|
11655
11686
|
}).then(({ x, y }) => {
|
|
11656
11687
|
// eslint-disable-line id-length
|
|
11657
|
-
|
|
11688
|
+
const currentElement = this.element;
|
|
11689
|
+
if (!currentElement?.bib || !currentElement.parentNode) {
|
|
11690
|
+
return;
|
|
11691
|
+
}
|
|
11692
|
+
|
|
11693
|
+
Object.assign(currentElement.bib.style, {
|
|
11658
11694
|
left: `${x}px`,
|
|
11659
|
-
top: `${y -
|
|
11660
|
-
width: `${
|
|
11661
|
-
height: `${
|
|
11695
|
+
top: `${y - currentElement.parentNode.offsetHeight}px`,
|
|
11696
|
+
width: `${currentElement.parentNode.offsetWidth}px`,
|
|
11697
|
+
height: `${currentElement.parentNode.offsetHeight}px`,
|
|
11662
11698
|
});
|
|
11663
11699
|
});
|
|
11664
11700
|
}
|
|
@@ -11670,11 +11706,17 @@ class AuroFloatingUI {
|
|
|
11670
11706
|
* @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
|
|
11671
11707
|
*/
|
|
11672
11708
|
lockScroll(lock = true) {
|
|
11709
|
+
const element = this.element;
|
|
11710
|
+
|
|
11673
11711
|
if (lock) {
|
|
11712
|
+
if (!element?.bib) {
|
|
11713
|
+
return;
|
|
11714
|
+
}
|
|
11715
|
+
|
|
11674
11716
|
document.body.style.overflow = "hidden"; // hide body's scrollbar
|
|
11675
11717
|
|
|
11676
11718
|
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
11677
|
-
|
|
11719
|
+
element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
11678
11720
|
} else {
|
|
11679
11721
|
document.body.style.overflow = "";
|
|
11680
11722
|
}
|
|
@@ -11690,20 +11732,24 @@ class AuroFloatingUI {
|
|
|
11690
11732
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
11691
11733
|
*/
|
|
11692
11734
|
configureBibStrategy(value) {
|
|
11735
|
+
const element = this.element;
|
|
11736
|
+
if (!element?.bib) {
|
|
11737
|
+
return;
|
|
11738
|
+
}
|
|
11739
|
+
|
|
11693
11740
|
if (value === "fullscreen") {
|
|
11694
|
-
|
|
11741
|
+
element.isBibFullscreen = true;
|
|
11695
11742
|
// reset the prev position
|
|
11696
|
-
|
|
11697
|
-
|
|
11698
|
-
|
|
11699
|
-
|
|
11700
|
-
|
|
11701
|
-
|
|
11702
|
-
|
|
11743
|
+
element.bib.setAttribute("isfullscreen", "");
|
|
11744
|
+
element.bib.style.position = "fixed";
|
|
11745
|
+
element.bib.style.top = "0px";
|
|
11746
|
+
element.bib.style.left = "0px";
|
|
11747
|
+
element.bib.style.width = "";
|
|
11748
|
+
element.bib.style.height = "";
|
|
11749
|
+
element.style.contain = "";
|
|
11703
11750
|
|
|
11704
11751
|
// reset the size that was mirroring `size` css-part
|
|
11705
|
-
const bibContent =
|
|
11706
|
-
this.element.bib.shadowRoot.querySelector(".container");
|
|
11752
|
+
const bibContent = element.bib.shadowRoot?.querySelector(".container");
|
|
11707
11753
|
if (bibContent) {
|
|
11708
11754
|
bibContent.style.width = "";
|
|
11709
11755
|
bibContent.style.height = "";
|
|
@@ -11718,14 +11764,14 @@ class AuroFloatingUI {
|
|
|
11718
11764
|
}, 0);
|
|
11719
11765
|
}
|
|
11720
11766
|
|
|
11721
|
-
if (
|
|
11767
|
+
if (element.isPopoverVisible) {
|
|
11722
11768
|
this.lockScroll(true);
|
|
11723
11769
|
}
|
|
11724
11770
|
} else {
|
|
11725
|
-
|
|
11726
|
-
|
|
11727
|
-
|
|
11728
|
-
|
|
11771
|
+
element.bib.style.position = "";
|
|
11772
|
+
element.bib.removeAttribute("isfullscreen");
|
|
11773
|
+
element.isBibFullscreen = false;
|
|
11774
|
+
element.style.contain = "layout";
|
|
11729
11775
|
}
|
|
11730
11776
|
|
|
11731
11777
|
const isChanged = this.strategy && this.strategy !== value;
|
|
@@ -11743,16 +11789,21 @@ class AuroFloatingUI {
|
|
|
11743
11789
|
},
|
|
11744
11790
|
);
|
|
11745
11791
|
|
|
11746
|
-
|
|
11792
|
+
element.dispatchEvent(event);
|
|
11747
11793
|
}
|
|
11748
11794
|
}
|
|
11749
11795
|
|
|
11750
11796
|
updateState() {
|
|
11751
|
-
const
|
|
11797
|
+
const element = this.element;
|
|
11798
|
+
if (!element) {
|
|
11799
|
+
return;
|
|
11800
|
+
}
|
|
11801
|
+
|
|
11802
|
+
const isVisible = element.isPopoverVisible;
|
|
11752
11803
|
if (!isVisible) {
|
|
11753
11804
|
this.cleanupHideHandlers();
|
|
11754
11805
|
try {
|
|
11755
|
-
|
|
11806
|
+
element.cleanup?.();
|
|
11756
11807
|
} catch (error) {
|
|
11757
11808
|
// Do nothing
|
|
11758
11809
|
}
|
|
@@ -11768,28 +11819,30 @@ class AuroFloatingUI {
|
|
|
11768
11819
|
* If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
|
|
11769
11820
|
*/
|
|
11770
11821
|
handleFocusLoss() {
|
|
11822
|
+
const element = this.element;
|
|
11823
|
+
if (!element?.bib) {
|
|
11824
|
+
return;
|
|
11825
|
+
}
|
|
11826
|
+
|
|
11771
11827
|
// if mouse is being pressed, skip and let click event to handle the action
|
|
11772
11828
|
if (AuroFloatingUI.isMousePressed) {
|
|
11773
11829
|
return;
|
|
11774
11830
|
}
|
|
11775
11831
|
|
|
11776
11832
|
if (
|
|
11777
|
-
|
|
11778
|
-
|
|
11833
|
+
element.noHideOnThisFocusLoss ||
|
|
11834
|
+
element.hasAttribute("noHideOnThisFocusLoss")
|
|
11779
11835
|
) {
|
|
11780
11836
|
return;
|
|
11781
11837
|
}
|
|
11782
11838
|
|
|
11783
11839
|
// if focus is still inside of trigger or bib, do not close
|
|
11784
|
-
if (
|
|
11785
|
-
this.element.matches(":focus") ||
|
|
11786
|
-
this.element.matches(":focus-within")
|
|
11787
|
-
) {
|
|
11840
|
+
if (element.matches(":focus") || element.matches(":focus-within")) {
|
|
11788
11841
|
return;
|
|
11789
11842
|
}
|
|
11790
11843
|
|
|
11791
11844
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
11792
|
-
if (
|
|
11845
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
11793
11846
|
return;
|
|
11794
11847
|
}
|
|
11795
11848
|
|
|
@@ -11797,23 +11850,33 @@ class AuroFloatingUI {
|
|
|
11797
11850
|
}
|
|
11798
11851
|
|
|
11799
11852
|
setupHideHandlers() {
|
|
11853
|
+
const element = this.element;
|
|
11854
|
+
if (!element) {
|
|
11855
|
+
return;
|
|
11856
|
+
}
|
|
11857
|
+
|
|
11800
11858
|
// Define handlers & store references
|
|
11801
11859
|
this.focusHandler = () => this.handleFocusLoss();
|
|
11802
11860
|
|
|
11803
11861
|
this.clickHandler = (evt) => {
|
|
11862
|
+
const element = this.element;
|
|
11863
|
+
if (!element?.bib) {
|
|
11864
|
+
return;
|
|
11865
|
+
}
|
|
11866
|
+
|
|
11804
11867
|
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
11805
11868
|
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
11806
11869
|
// <dialog> may not include the bib in composedPath(), causing false
|
|
11807
11870
|
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
11808
|
-
if (
|
|
11871
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
11809
11872
|
return;
|
|
11810
11873
|
}
|
|
11811
11874
|
|
|
11812
11875
|
if (
|
|
11813
|
-
(!evt.composedPath().includes(
|
|
11814
|
-
!evt.composedPath().includes(
|
|
11815
|
-
(
|
|
11816
|
-
evt.composedPath().includes(
|
|
11876
|
+
(!evt.composedPath().includes(element.trigger) &&
|
|
11877
|
+
!evt.composedPath().includes(element.bib)) ||
|
|
11878
|
+
(element.bib.backdrop &&
|
|
11879
|
+
evt.composedPath().includes(element.bib.backdrop))
|
|
11817
11880
|
) {
|
|
11818
11881
|
const existedVisibleFloatingUI =
|
|
11819
11882
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -11834,7 +11897,12 @@ class AuroFloatingUI {
|
|
|
11834
11897
|
|
|
11835
11898
|
// ESC key handler
|
|
11836
11899
|
this.keyDownHandler = (evt) => {
|
|
11837
|
-
|
|
11900
|
+
const element = this.element;
|
|
11901
|
+
if (!element) {
|
|
11902
|
+
return;
|
|
11903
|
+
}
|
|
11904
|
+
|
|
11905
|
+
if (evt.key === "Escape" && element.isPopoverVisible) {
|
|
11838
11906
|
const existedVisibleFloatingUI =
|
|
11839
11907
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
11840
11908
|
if (
|
|
@@ -11891,6 +11959,10 @@ class AuroFloatingUI {
|
|
|
11891
11959
|
}
|
|
11892
11960
|
|
|
11893
11961
|
updateCurrentExpandedDropdown() {
|
|
11962
|
+
if (!this.element) {
|
|
11963
|
+
return;
|
|
11964
|
+
}
|
|
11965
|
+
|
|
11894
11966
|
// Close any other dropdown that is already open
|
|
11895
11967
|
const existedVisibleFloatingUI =
|
|
11896
11968
|
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
@@ -11907,25 +11979,34 @@ class AuroFloatingUI {
|
|
|
11907
11979
|
}
|
|
11908
11980
|
|
|
11909
11981
|
showBib() {
|
|
11910
|
-
|
|
11982
|
+
const element = this.element;
|
|
11983
|
+
if (!element) {
|
|
11984
|
+
return;
|
|
11985
|
+
}
|
|
11986
|
+
|
|
11987
|
+
if (!element.bib || (!element.trigger && !element.parentNode)) {
|
|
11988
|
+
return;
|
|
11989
|
+
}
|
|
11990
|
+
|
|
11991
|
+
if (!element.disabled && !this.showing) {
|
|
11911
11992
|
this.updateCurrentExpandedDropdown();
|
|
11912
|
-
|
|
11993
|
+
element.triggerChevron?.setAttribute("data-expanded", true);
|
|
11913
11994
|
|
|
11914
11995
|
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
11915
11996
|
if (!this.showing) {
|
|
11916
|
-
if (!
|
|
11997
|
+
if (!element.modal) {
|
|
11917
11998
|
this.setupHideHandlers();
|
|
11918
11999
|
}
|
|
11919
12000
|
this.showing = true;
|
|
11920
|
-
|
|
12001
|
+
element.isPopoverVisible = true;
|
|
11921
12002
|
this.position();
|
|
11922
12003
|
this.dispatchEventDropdownToggle();
|
|
11923
12004
|
}
|
|
11924
12005
|
|
|
11925
12006
|
// Setup auto update to handle resize and scroll
|
|
11926
|
-
|
|
11927
|
-
|
|
11928
|
-
|
|
12007
|
+
element.cleanup = autoUpdate(
|
|
12008
|
+
element.trigger || element.parentNode,
|
|
12009
|
+
element.bib,
|
|
11929
12010
|
() => {
|
|
11930
12011
|
this.position();
|
|
11931
12012
|
},
|
|
@@ -11938,22 +12019,27 @@ class AuroFloatingUI {
|
|
|
11938
12019
|
* @param {String} eventType - The event type that triggered the hiding action.
|
|
11939
12020
|
*/
|
|
11940
12021
|
hideBib(eventType = "unknown") {
|
|
11941
|
-
|
|
12022
|
+
const element = this.element;
|
|
12023
|
+
if (!element) {
|
|
12024
|
+
return;
|
|
12025
|
+
}
|
|
12026
|
+
|
|
12027
|
+
if (element.disabled) {
|
|
11942
12028
|
return;
|
|
11943
12029
|
}
|
|
11944
12030
|
|
|
11945
12031
|
// noToggle dropdowns should not close when the trigger is clicked (the
|
|
11946
12032
|
// "toggle" behavior), but they CAN still close via other interactions like
|
|
11947
12033
|
// Escape key or focus loss.
|
|
11948
|
-
if (
|
|
12034
|
+
if (element.noToggle && eventType === "click") {
|
|
11949
12035
|
return;
|
|
11950
12036
|
}
|
|
11951
12037
|
|
|
11952
12038
|
this.lockScroll(false);
|
|
11953
|
-
|
|
12039
|
+
element.triggerChevron?.removeAttribute("data-expanded");
|
|
11954
12040
|
|
|
11955
|
-
if (
|
|
11956
|
-
|
|
12041
|
+
if (element.isPopoverVisible) {
|
|
12042
|
+
element.isPopoverVisible = false;
|
|
11957
12043
|
}
|
|
11958
12044
|
if (this.showing) {
|
|
11959
12045
|
this.cleanupHideHandlers();
|
|
@@ -11973,6 +12059,11 @@ class AuroFloatingUI {
|
|
|
11973
12059
|
* @param {String} eventType - The event type that triggered the toggle action.
|
|
11974
12060
|
*/
|
|
11975
12061
|
dispatchEventDropdownToggle(eventType) {
|
|
12062
|
+
const element = this.element;
|
|
12063
|
+
if (!element) {
|
|
12064
|
+
return;
|
|
12065
|
+
}
|
|
12066
|
+
|
|
11976
12067
|
const event = new CustomEvent(
|
|
11977
12068
|
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
11978
12069
|
{
|
|
@@ -11984,11 +12075,16 @@ class AuroFloatingUI {
|
|
|
11984
12075
|
},
|
|
11985
12076
|
);
|
|
11986
12077
|
|
|
11987
|
-
|
|
12078
|
+
element.dispatchEvent(event);
|
|
11988
12079
|
}
|
|
11989
12080
|
|
|
11990
12081
|
handleClick() {
|
|
11991
|
-
|
|
12082
|
+
const element = this.element;
|
|
12083
|
+
if (!element) {
|
|
12084
|
+
return;
|
|
12085
|
+
}
|
|
12086
|
+
|
|
12087
|
+
if (element.isPopoverVisible) {
|
|
11992
12088
|
this.hideBib("click");
|
|
11993
12089
|
} else {
|
|
11994
12090
|
this.showBib();
|
|
@@ -11999,63 +12095,66 @@ class AuroFloatingUI {
|
|
|
11999
12095
|
{
|
|
12000
12096
|
composed: true,
|
|
12001
12097
|
detail: {
|
|
12002
|
-
expanded:
|
|
12098
|
+
expanded: element.isPopoverVisible,
|
|
12003
12099
|
},
|
|
12004
12100
|
},
|
|
12005
12101
|
);
|
|
12006
12102
|
|
|
12007
|
-
|
|
12103
|
+
element.dispatchEvent(event);
|
|
12008
12104
|
}
|
|
12009
12105
|
|
|
12010
12106
|
handleEvent(event) {
|
|
12011
|
-
|
|
12012
|
-
|
|
12013
|
-
|
|
12014
|
-
|
|
12015
|
-
|
|
12016
|
-
|
|
12017
|
-
|
|
12018
|
-
|
|
12019
|
-
|
|
12020
|
-
|
|
12021
|
-
|
|
12022
|
-
|
|
12023
|
-
|
|
12024
|
-
|
|
12025
|
-
|
|
12026
|
-
|
|
12027
|
-
case "mouseenter":
|
|
12028
|
-
if (this.element.hoverToggle) {
|
|
12029
|
-
this.showBib();
|
|
12030
|
-
}
|
|
12031
|
-
break;
|
|
12032
|
-
case "mouseleave":
|
|
12033
|
-
if (this.element.hoverToggle) {
|
|
12034
|
-
this.hideBib("mouseleave");
|
|
12035
|
-
}
|
|
12036
|
-
break;
|
|
12037
|
-
case "focus":
|
|
12038
|
-
if (this.element.focusShow) {
|
|
12039
|
-
/*
|
|
12040
|
-
This needs to better handle clicking that gives focus -
|
|
12041
|
-
currently it shows and then immediately hides the bib
|
|
12042
|
-
*/
|
|
12043
|
-
this.showBib();
|
|
12044
|
-
}
|
|
12045
|
-
break;
|
|
12046
|
-
case "blur":
|
|
12047
|
-
// send this task 100ms later queue to
|
|
12048
|
-
// wait a frame in case focus moves within the floating element/bib
|
|
12049
|
-
setTimeout(() => this.handleFocusLoss(), 0);
|
|
12050
|
-
break;
|
|
12051
|
-
case "click":
|
|
12052
|
-
if (document.activeElement === document.body) {
|
|
12053
|
-
event.currentTarget.focus();
|
|
12054
|
-
}
|
|
12107
|
+
const element = this.element;
|
|
12108
|
+
if (!element || element.disableEventShow) {
|
|
12109
|
+
return;
|
|
12110
|
+
}
|
|
12111
|
+
|
|
12112
|
+
switch (event.type) {
|
|
12113
|
+
case "keydown": {
|
|
12114
|
+
// Support both Enter and Space keys for accessibility
|
|
12115
|
+
// Space is included as it's expected behavior for interactive elements
|
|
12116
|
+
|
|
12117
|
+
const origin = event.composedPath()[0];
|
|
12118
|
+
if (
|
|
12119
|
+
event.key === "Enter" ||
|
|
12120
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
12121
|
+
) {
|
|
12122
|
+
event.preventDefault();
|
|
12055
12123
|
this.handleClick();
|
|
12056
|
-
|
|
12057
|
-
|
|
12124
|
+
}
|
|
12125
|
+
break;
|
|
12058
12126
|
}
|
|
12127
|
+
case "mouseenter":
|
|
12128
|
+
if (element.hoverToggle) {
|
|
12129
|
+
this.showBib();
|
|
12130
|
+
}
|
|
12131
|
+
break;
|
|
12132
|
+
case "mouseleave":
|
|
12133
|
+
if (element.hoverToggle) {
|
|
12134
|
+
this.hideBib("mouseleave");
|
|
12135
|
+
}
|
|
12136
|
+
break;
|
|
12137
|
+
case "focus":
|
|
12138
|
+
if (element.focusShow) {
|
|
12139
|
+
/*
|
|
12140
|
+
This needs to better handle clicking that gives focus -
|
|
12141
|
+
currently it shows and then immediately hides the bib
|
|
12142
|
+
*/
|
|
12143
|
+
this.showBib();
|
|
12144
|
+
}
|
|
12145
|
+
break;
|
|
12146
|
+
case "blur":
|
|
12147
|
+
// send this task 100ms later queue to
|
|
12148
|
+
// wait a frame in case focus moves within the floating element/bib
|
|
12149
|
+
setTimeout(() => this.handleFocusLoss(), 0);
|
|
12150
|
+
break;
|
|
12151
|
+
case "click":
|
|
12152
|
+
if (document.activeElement === document.body) {
|
|
12153
|
+
event.currentTarget.focus();
|
|
12154
|
+
}
|
|
12155
|
+
this.handleClick();
|
|
12156
|
+
break;
|
|
12157
|
+
// Do nothing
|
|
12059
12158
|
}
|
|
12060
12159
|
}
|
|
12061
12160
|
|
|
@@ -12066,6 +12165,11 @@ class AuroFloatingUI {
|
|
|
12066
12165
|
* This prevents the component itself from being focusable when the trigger element already handles focus.
|
|
12067
12166
|
*/
|
|
12068
12167
|
handleTriggerTabIndex() {
|
|
12168
|
+
const element = this.element;
|
|
12169
|
+
if (!element) {
|
|
12170
|
+
return;
|
|
12171
|
+
}
|
|
12172
|
+
|
|
12069
12173
|
const focusableElementSelectors = [
|
|
12070
12174
|
"a",
|
|
12071
12175
|
"button",
|
|
@@ -12078,7 +12182,7 @@ class AuroFloatingUI {
|
|
|
12078
12182
|
"auro-hyperlink",
|
|
12079
12183
|
];
|
|
12080
12184
|
|
|
12081
|
-
const triggerNode =
|
|
12185
|
+
const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
|
|
12082
12186
|
if (!triggerNode) {
|
|
12083
12187
|
return;
|
|
12084
12188
|
}
|
|
@@ -12087,13 +12191,13 @@ class AuroFloatingUI {
|
|
|
12087
12191
|
focusableElementSelectors.forEach((selector) => {
|
|
12088
12192
|
// Check if the trigger node element is focusable
|
|
12089
12193
|
if (triggerNodeTagName === selector) {
|
|
12090
|
-
|
|
12194
|
+
element.tabIndex = -1;
|
|
12091
12195
|
return;
|
|
12092
12196
|
}
|
|
12093
12197
|
|
|
12094
12198
|
// Check if any child is focusable
|
|
12095
12199
|
if (triggerNode.querySelector(selector)) {
|
|
12096
|
-
|
|
12200
|
+
element.tabIndex = -1;
|
|
12097
12201
|
}
|
|
12098
12202
|
});
|
|
12099
12203
|
}
|
|
@@ -12103,13 +12207,18 @@ class AuroFloatingUI {
|
|
|
12103
12207
|
* @param {*} eventPrefix
|
|
12104
12208
|
*/
|
|
12105
12209
|
regenerateBibId() {
|
|
12106
|
-
|
|
12210
|
+
const element = this.element;
|
|
12211
|
+
if (!element) {
|
|
12212
|
+
return;
|
|
12213
|
+
}
|
|
12214
|
+
|
|
12215
|
+
this.id = element.getAttribute("id");
|
|
12107
12216
|
if (!this.id) {
|
|
12108
12217
|
this.id = window.crypto.randomUUID();
|
|
12109
|
-
|
|
12218
|
+
element.setAttribute("id", this.id);
|
|
12110
12219
|
}
|
|
12111
12220
|
|
|
12112
|
-
|
|
12221
|
+
element.bib?.setAttribute("id", `${this.id}-floater-bib`);
|
|
12113
12222
|
}
|
|
12114
12223
|
|
|
12115
12224
|
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
@@ -12121,67 +12230,69 @@ class AuroFloatingUI {
|
|
|
12121
12230
|
this.element = elem;
|
|
12122
12231
|
}
|
|
12123
12232
|
|
|
12124
|
-
|
|
12125
|
-
|
|
12233
|
+
const element = this.element;
|
|
12234
|
+
if (!element) {
|
|
12235
|
+
return;
|
|
12236
|
+
}
|
|
12237
|
+
|
|
12238
|
+
if (this.behavior !== element.behavior) {
|
|
12239
|
+
this.behavior = element.behavior;
|
|
12126
12240
|
}
|
|
12127
12241
|
|
|
12128
|
-
if (
|
|
12242
|
+
if (element.trigger) {
|
|
12129
12243
|
this.disconnect();
|
|
12130
12244
|
}
|
|
12131
|
-
|
|
12132
|
-
|
|
12133
|
-
|
|
12134
|
-
|
|
12135
|
-
|
|
12136
|
-
|
|
12137
|
-
|
|
12138
|
-
|
|
12139
|
-
this.element.shadowRoot.querySelector("#showStateIcon");
|
|
12245
|
+
element.trigger =
|
|
12246
|
+
element.triggerElement ||
|
|
12247
|
+
element.shadowRoot?.querySelector("#trigger") ||
|
|
12248
|
+
element.trigger;
|
|
12249
|
+
element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
|
|
12250
|
+
element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
|
|
12251
|
+
element.triggerChevron =
|
|
12252
|
+
element.shadowRoot?.querySelector("#showStateIcon");
|
|
12140
12253
|
|
|
12141
|
-
if (
|
|
12142
|
-
|
|
12254
|
+
if (element.floaterConfig) {
|
|
12255
|
+
element.hoverToggle = element.floaterConfig.hoverToggle;
|
|
12143
12256
|
}
|
|
12144
12257
|
|
|
12145
12258
|
this.regenerateBibId();
|
|
12146
12259
|
this.handleTriggerTabIndex();
|
|
12147
12260
|
|
|
12148
12261
|
this.handleEvent = this.handleEvent.bind(this);
|
|
12149
|
-
if (
|
|
12262
|
+
if (element.trigger) {
|
|
12150
12263
|
if (this.enableKeyboardHandling) {
|
|
12151
|
-
|
|
12264
|
+
element.trigger.addEventListener("keydown", this.handleEvent);
|
|
12152
12265
|
}
|
|
12153
|
-
|
|
12154
|
-
|
|
12155
|
-
|
|
12156
|
-
|
|
12157
|
-
|
|
12266
|
+
element.trigger.addEventListener("click", this.handleEvent);
|
|
12267
|
+
element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
12268
|
+
element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
12269
|
+
element.trigger.addEventListener("focus", this.handleEvent);
|
|
12270
|
+
element.trigger.addEventListener("blur", this.handleEvent);
|
|
12158
12271
|
}
|
|
12159
12272
|
}
|
|
12160
12273
|
|
|
12161
12274
|
disconnect() {
|
|
12162
12275
|
this.cleanupHideHandlers();
|
|
12163
|
-
if (this.element) {
|
|
12164
|
-
this.element.cleanup?.();
|
|
12165
12276
|
|
|
12166
|
-
|
|
12167
|
-
|
|
12168
|
-
|
|
12277
|
+
const element = this.element;
|
|
12278
|
+
if (!element) {
|
|
12279
|
+
return;
|
|
12280
|
+
}
|
|
12169
12281
|
|
|
12170
|
-
|
|
12171
|
-
|
|
12172
|
-
|
|
12173
|
-
|
|
12174
|
-
|
|
12175
|
-
|
|
12176
|
-
|
|
12177
|
-
|
|
12178
|
-
|
|
12179
|
-
|
|
12180
|
-
|
|
12181
|
-
|
|
12182
|
-
|
|
12183
|
-
|
|
12184
|
-
}
|
|
12282
|
+
element.cleanup?.();
|
|
12283
|
+
|
|
12284
|
+
if (element.bib && element.shadowRoot) {
|
|
12285
|
+
element.shadowRoot.append(element.bib);
|
|
12286
|
+
}
|
|
12287
|
+
|
|
12288
|
+
// Remove event & keyboard listeners
|
|
12289
|
+
if (element.trigger) {
|
|
12290
|
+
element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
12291
|
+
element.trigger.removeEventListener("click", this.handleEvent);
|
|
12292
|
+
element.trigger.removeEventListener("mouseenter", this.handleEvent);
|
|
12293
|
+
element.trigger.removeEventListener("mouseleave", this.handleEvent);
|
|
12294
|
+
element.trigger.removeEventListener("focus", this.handleEvent);
|
|
12295
|
+
element.trigger.removeEventListener("blur", this.handleEvent);
|
|
12185
12296
|
}
|
|
12186
12297
|
}
|
|
12187
12298
|
}
|
|
@@ -12638,7 +12749,7 @@ var iconVersion$2 = '9.1.2';
|
|
|
12638
12749
|
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
12639
12750
|
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
12640
12751
|
*/
|
|
12641
|
-
function createDisplayContext(component, options = {}) {
|
|
12752
|
+
function createDisplayContext$1(component, options = {}) {
|
|
12642
12753
|
const dd = options.dropdown || component.dropdown;
|
|
12643
12754
|
// isPopoverVisible reflects as the `open` attribute.
|
|
12644
12755
|
// It reports whether the bib is open in any mode (popover or modal).
|
|
@@ -12668,11 +12779,11 @@ function createDisplayContext(component, options = {}) {
|
|
|
12668
12779
|
* @param {Object} strategy - Map of key names to handler functions.
|
|
12669
12780
|
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
12670
12781
|
*/
|
|
12671
|
-
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
12782
|
+
function applyKeyboardStrategy$1(component, strategy, options = {}) {
|
|
12672
12783
|
component.addEventListener('keydown', async (evt) => {
|
|
12673
12784
|
const handler = strategy[evt.key] || strategy.default;
|
|
12674
12785
|
if (typeof handler === 'function') {
|
|
12675
|
-
const ctx = createDisplayContext(component, options);
|
|
12786
|
+
const ctx = createDisplayContext$1(component, options);
|
|
12676
12787
|
await handler(component, evt, ctx);
|
|
12677
12788
|
}
|
|
12678
12789
|
});
|
|
@@ -12907,7 +13018,7 @@ class AuroDropdownBib extends LitElement {
|
|
|
12907
13018
|
|
|
12908
13019
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
12909
13020
|
this._setupCancelHandler(dialog);
|
|
12910
|
-
applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
|
|
13021
|
+
applyKeyboardStrategy$1(dialog, createDropdownBibKeyboardStrategy());
|
|
12911
13022
|
|
|
12912
13023
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
12913
13024
|
bubbles: true,
|
|
@@ -13309,7 +13420,7 @@ let AuroHelpText$2 = class AuroHelpText extends LitElement {
|
|
|
13309
13420
|
}
|
|
13310
13421
|
};
|
|
13311
13422
|
|
|
13312
|
-
var formkitVersion$1 = '
|
|
13423
|
+
var formkitVersion$1 = '202604091759';
|
|
13313
13424
|
|
|
13314
13425
|
let AuroElement$2 = class AuroElement extends LitElement {
|
|
13315
13426
|
static get properties() {
|
|
@@ -13415,7 +13526,7 @@ let AuroElement$2 = class AuroElement extends LitElement {
|
|
|
13415
13526
|
}
|
|
13416
13527
|
};
|
|
13417
13528
|
|
|
13418
|
-
// Copyright (c) 2026 Alaska Airlines. All
|
|
13529
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
13419
13530
|
// See LICENSE in the project root for license information.
|
|
13420
13531
|
|
|
13421
13532
|
|
|
@@ -21058,7 +21169,7 @@ let AuroHelpText$1 = class AuroHelpText extends LitElement {
|
|
|
21058
21169
|
}
|
|
21059
21170
|
};
|
|
21060
21171
|
|
|
21061
|
-
var formkitVersion = '
|
|
21172
|
+
var formkitVersion = '202604091759';
|
|
21062
21173
|
|
|
21063
21174
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
21064
21175
|
// See LICENSE in the project root for license information.
|
|
@@ -22255,7 +22366,88 @@ function guardTouchPassthrough(element) {
|
|
|
22255
22366
|
}, { once: true });
|
|
22256
22367
|
}
|
|
22257
22368
|
|
|
22258
|
-
|
|
22369
|
+
/**
|
|
22370
|
+
* Computes display state once per keydown event.
|
|
22371
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
22372
|
+
*
|
|
22373
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
22374
|
+
* @param {Object} [options] - Optional config.
|
|
22375
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
22376
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
22377
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
22378
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
22379
|
+
*/
|
|
22380
|
+
function createDisplayContext(component, options = {}) {
|
|
22381
|
+
const dd = options.dropdown || component.dropdown;
|
|
22382
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
22383
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
22384
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
22385
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
22386
|
+
|
|
22387
|
+
const ctx = {
|
|
22388
|
+
isExpanded,
|
|
22389
|
+
isModal: isFullscreen,
|
|
22390
|
+
isPopover: !isFullscreen,
|
|
22391
|
+
activeInput: null,
|
|
22392
|
+
};
|
|
22393
|
+
|
|
22394
|
+
if (options.inputResolver) {
|
|
22395
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
22396
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
22397
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
22398
|
+
}
|
|
22399
|
+
|
|
22400
|
+
return ctx;
|
|
22401
|
+
}
|
|
22402
|
+
|
|
22403
|
+
/**
|
|
22404
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
22405
|
+
* Handles both sync and async handlers.
|
|
22406
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
22407
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
22408
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
22409
|
+
*/
|
|
22410
|
+
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
22411
|
+
component.addEventListener('keydown', async (evt) => {
|
|
22412
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
22413
|
+
if (typeof handler === 'function') {
|
|
22414
|
+
const ctx = createDisplayContext(component, options);
|
|
22415
|
+
await handler(component, evt, ctx);
|
|
22416
|
+
}
|
|
22417
|
+
});
|
|
22418
|
+
}
|
|
22419
|
+
|
|
22420
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
22421
|
+
// See LICENSE in the project root for license information.
|
|
22422
|
+
|
|
22423
|
+
// Authoritative datepicker keyboard behavior spec:
|
|
22424
|
+
// components/datepicker/docs/partials/keyboardBehavior.md
|
|
22425
|
+
//
|
|
22426
|
+
// Current behavior (transitional — full bib keyboard navigation is planned for a future iteration):
|
|
22427
|
+
// - The bib opens and closes via pointer/touch interaction only.
|
|
22428
|
+
// - Escape closes the bib and prevents the event from reaching parent containers.
|
|
22429
|
+
// - Tab uses the browser's default tabindex sequence across trigger controls.
|
|
22430
|
+
// - Enter and Space do not open or close the bib.
|
|
22431
|
+
//
|
|
22432
|
+
// This file is an intentional placeholder for most keys. When datepicker bib keyboard navigation is
|
|
22433
|
+
// added, handlers should go here following the same strategy pattern used by
|
|
22434
|
+
// auro-select (selectKeyboardStrategy.js) and auro-combobox (comboboxKeyboardStrategy.js).
|
|
22435
|
+
const datepickerKeyboardStrategy = {
|
|
22436
|
+
Escape(component, evt) {
|
|
22437
|
+
if (!component.dropdown || !component.dropdown.isPopoverVisible) {
|
|
22438
|
+
return;
|
|
22439
|
+
}
|
|
22440
|
+
|
|
22441
|
+
// Prevent the Escape key from bubbling up and closing any parent dialogs / drawers / popups.
|
|
22442
|
+
// Because stopPropagation prevents the document-level floatingUI keydown handler from
|
|
22443
|
+
// seeing this event, we must also close the dropdown explicitly.
|
|
22444
|
+
evt.stopPropagation();
|
|
22445
|
+
|
|
22446
|
+
component.dropdown.hide();
|
|
22447
|
+
},
|
|
22448
|
+
};
|
|
22449
|
+
|
|
22450
|
+
// Copyright (c) 2026 Alaska Airlines. All rights reserved. Licensed under the Apache-2.0 license
|
|
22259
22451
|
// See LICENSE in the project root for license information.
|
|
22260
22452
|
|
|
22261
22453
|
|
|
@@ -23712,6 +23904,7 @@ class AuroDatePicker extends AuroElement {
|
|
|
23712
23904
|
this.configureCalendar();
|
|
23713
23905
|
this.configureDatepicker();
|
|
23714
23906
|
this.configureClickHandler();
|
|
23907
|
+
applyKeyboardStrategy(this, datepickerKeyboardStrategy);
|
|
23715
23908
|
}
|
|
23716
23909
|
|
|
23717
23910
|
connectedCallback() {
|