@aurodesignsystem-dev/auro-formkit 0.0.0-pr1408.8 → 0.0.0-pr1411.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/keyboardBehavior.md +0 -0
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +121 -144
- package/components/combobox/demo/index.min.js +121 -144
- package/components/combobox/demo/keyboardBehavior.html +1 -0
- package/components/combobox/demo/keyboardBehavior.md +21 -22
- package/components/combobox/dist/index.js +87 -117
- package/components/combobox/dist/registered.js +87 -117
- package/components/counter/demo/api.md +1 -1
- package/components/counter/demo/api.min.js +184 -148
- package/components/counter/demo/index.min.js +184 -148
- package/components/counter/demo/keyboardBehavior.html +1 -0
- package/components/counter/demo/keyboardBehavior.md +1 -1
- package/components/counter/dist/auro-counter.d.ts +11 -8
- package/components/counter/dist/index.js +184 -148
- package/components/counter/dist/keyboardStrategy.d.ts +4 -0
- package/components/counter/dist/registered.js +184 -148
- package/components/datepicker/demo/api.min.js +89 -120
- package/components/datepicker/demo/index.min.js +89 -120
- package/components/datepicker/demo/keyboardBehavior.html +1 -0
- package/components/datepicker/demo/keyboardBehavior.md +14 -13
- package/components/datepicker/dist/index.js +84 -115
- package/components/datepicker/dist/registered.js +84 -115
- package/components/dropdown/demo/api.md +0 -1
- package/components/dropdown/demo/api.min.js +99 -123
- package/components/dropdown/demo/index.md +2 -2
- package/components/dropdown/demo/index.min.js +99 -123
- package/components/dropdown/demo/keyboardBehavior.html +1 -0
- package/components/dropdown/dist/auro-dropdown.d.ts +0 -8
- package/components/dropdown/dist/auro-dropdownBib.d.ts +1 -40
- package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +7 -0
- package/components/dropdown/dist/index.js +83 -111
- package/components/dropdown/dist/registered.js +83 -111
- package/components/form/demo/api.min.js +542 -564
- package/components/form/demo/index.min.js +542 -564
- package/components/form/demo/keyboardBehavior.md +0 -0
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/demo/keyboardBehavior.md +0 -0
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/api.min.js +34 -27
- package/components/menu/demo/index.min.js +34 -27
- package/components/menu/dist/auro-menu.d.ts +0 -6
- package/components/menu/dist/index.js +34 -27
- package/components/menu/dist/registered.js +34 -27
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.min.js +181 -178
- package/components/select/demo/index.min.js +181 -178
- package/components/select/demo/keyboardBehavior.html +1 -0
- package/components/select/demo/keyboardBehavior.md +240 -239
- package/components/select/dist/index.js +147 -151
- package/components/select/dist/registered.js +147 -151
- package/components/select/dist/selectKeyboardStrategy.d.ts +3 -1
- package/custom-elements.json +1521 -1503
- package/package.json +5 -3
|
@@ -7458,7 +7458,7 @@ let AuroHelpText$8 = class AuroHelpText extends i$4 {
|
|
|
7458
7458
|
}
|
|
7459
7459
|
};
|
|
7460
7460
|
|
|
7461
|
-
var formkitVersion$8 = '
|
|
7461
|
+
var formkitVersion$8 = '202604021512';
|
|
7462
7462
|
|
|
7463
7463
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7464
7464
|
// See LICENSE in the project root for license information.
|
|
@@ -17366,7 +17366,7 @@ let AuroBibtemplate$3 = class AuroBibtemplate extends i$4 {
|
|
|
17366
17366
|
}
|
|
17367
17367
|
};
|
|
17368
17368
|
|
|
17369
|
-
var formkitVersion$2$1 = '
|
|
17369
|
+
var formkitVersion$2$1 = '202604021512';
|
|
17370
17370
|
|
|
17371
17371
|
let l$1$2 = 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$3`${s$6(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1$2 = 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$2 = 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$3=i$7`: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}
|
|
17372
17372
|
`,u$4$2=i$7`.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}}
|
|
@@ -19891,11 +19891,10 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
|
|
|
19891
19891
|
return;
|
|
19892
19892
|
}
|
|
19893
19893
|
|
|
19894
|
-
const { activeElement } = document;
|
|
19895
19894
|
// if focus is still inside of trigger or bib, do not close
|
|
19896
19895
|
if (
|
|
19897
|
-
this.element.
|
|
19898
|
-
this.element.
|
|
19896
|
+
this.element.matches(":focus") ||
|
|
19897
|
+
this.element.matches(":focus-within")
|
|
19899
19898
|
) {
|
|
19900
19899
|
return;
|
|
19901
19900
|
}
|
|
@@ -20734,12 +20733,83 @@ let p$3$3 = class p{registerComponent(t,a){customElements.get(t)||customElements
|
|
|
20734
20733
|
|
|
20735
20734
|
var iconVersion$2$3 = '9.1.2';
|
|
20736
20735
|
|
|
20736
|
+
/**
|
|
20737
|
+
* Computes display state once per keydown event.
|
|
20738
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
20739
|
+
*
|
|
20740
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
20741
|
+
* @param {Object} [options] - Optional config.
|
|
20742
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
20743
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
20744
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
20745
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
20746
|
+
*/
|
|
20747
|
+
function createDisplayContext$1$3(component, options = {}) {
|
|
20748
|
+
const dd = options.dropdown || component.dropdown;
|
|
20749
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
20750
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
20751
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
20752
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
20753
|
+
|
|
20754
|
+
const ctx = {
|
|
20755
|
+
isExpanded,
|
|
20756
|
+
isModal: isFullscreen,
|
|
20757
|
+
isPopover: !isFullscreen,
|
|
20758
|
+
activeInput: null,
|
|
20759
|
+
};
|
|
20760
|
+
|
|
20761
|
+
if (options.inputResolver) {
|
|
20762
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
20763
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
20764
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
20765
|
+
}
|
|
20766
|
+
|
|
20767
|
+
return ctx;
|
|
20768
|
+
}
|
|
20769
|
+
|
|
20770
|
+
/**
|
|
20771
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
20772
|
+
* Handles both sync and async handlers.
|
|
20773
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
20774
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
20775
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
20776
|
+
*/
|
|
20777
|
+
function applyKeyboardStrategy$1$3(component, strategy, options = {}) {
|
|
20778
|
+
component.addEventListener('keydown', async (evt) => {
|
|
20779
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
20780
|
+
if (typeof handler === 'function') {
|
|
20781
|
+
const ctx = createDisplayContext$1$3(component, options);
|
|
20782
|
+
await handler(component, evt, ctx);
|
|
20783
|
+
}
|
|
20784
|
+
});
|
|
20785
|
+
}
|
|
20786
|
+
|
|
20737
20787
|
var styleCss$2$1$2 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
|
|
20738
20788
|
|
|
20739
20789
|
var colorCss$2$6 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
20740
20790
|
|
|
20741
20791
|
var tokensCss$1$1$1 = i$7`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
|
|
20742
20792
|
|
|
20793
|
+
/**
|
|
20794
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
20795
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
20796
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
20797
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
20798
|
+
*/
|
|
20799
|
+
// eslint-disable-next-line no-unused-vars
|
|
20800
|
+
function createDropdownBibKeyboardStrategy$3(bib) {
|
|
20801
|
+
return {
|
|
20802
|
+
// eslint-disable-next-line no-unused-vars
|
|
20803
|
+
Enter(_dialog, event) {
|
|
20804
|
+
// Floating UI handles Enter key to open the dropdown
|
|
20805
|
+
},
|
|
20806
|
+
// eslint-disable-next-line no-unused-vars
|
|
20807
|
+
Escape(_dialog, event) {
|
|
20808
|
+
// Floating UI handles Escape key to close the dropdown
|
|
20809
|
+
}
|
|
20810
|
+
};
|
|
20811
|
+
}
|
|
20812
|
+
|
|
20743
20813
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
20744
20814
|
// See LICENSE in the project root for license information.
|
|
20745
20815
|
/* eslint-disable max-lines */
|
|
@@ -20864,11 +20934,7 @@ let AuroDropdownBib$3 = class AuroDropdownBib extends i$4 {
|
|
|
20864
20934
|
},
|
|
20865
20935
|
|
|
20866
20936
|
/**
|
|
20867
|
-
*
|
|
20868
|
-
* aria-activedescendant. The dialog keyboard bridge checks this
|
|
20869
|
-
* flag so that Enter selects the highlighted option instead of
|
|
20870
|
-
* activating the focused interactive element (e.g. the trigger
|
|
20871
|
-
* button, or the bibtemplate close button in fullscreen).
|
|
20937
|
+
* Tracks whether a menu option is currently highlighted.
|
|
20872
20938
|
* @private
|
|
20873
20939
|
*/
|
|
20874
20940
|
hasActiveDescendant: {
|
|
@@ -20942,7 +21008,7 @@ let AuroDropdownBib$3 = class AuroDropdownBib extends i$4 {
|
|
|
20942
21008
|
|
|
20943
21009
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
20944
21010
|
this._setupCancelHandler(dialog);
|
|
20945
|
-
|
|
21011
|
+
applyKeyboardStrategy$1$3(dialog, createDropdownBibKeyboardStrategy$3());
|
|
20946
21012
|
|
|
20947
21013
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
20948
21014
|
bubbles: true,
|
|
@@ -20969,92 +21035,6 @@ let AuroDropdownBib$3 = class AuroDropdownBib extends i$4 {
|
|
|
20969
21035
|
});
|
|
20970
21036
|
}
|
|
20971
21037
|
|
|
20972
|
-
/**
|
|
20973
|
-
* showModal() creates a closed focus scope — keyboard events inside
|
|
20974
|
-
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
20975
|
-
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
20976
|
-
* that gap by re-dispatching navigation keys so they cross the
|
|
20977
|
-
* shadow boundary and reach the menu navigation logic in the parent
|
|
20978
|
-
* component.
|
|
20979
|
-
*
|
|
20980
|
-
* The trade-off: intercepting these keys means native keyboard
|
|
20981
|
-
* behaviors that would normally "just work" must be manually
|
|
20982
|
-
* re-implemented here:
|
|
20983
|
-
*
|
|
20984
|
-
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
20985
|
-
* native Enter→click that <button> provides, so we call .click()
|
|
20986
|
-
* directly when Enter is pressed on a button-like element.
|
|
20987
|
-
*
|
|
20988
|
-
* - Tab: Intercepted and re-dispatched so parent components
|
|
20989
|
-
* (select/combobox) can select the active option and close the
|
|
20990
|
-
* dialog. The <dialog> provides containment and isolation
|
|
20991
|
-
* (inert background, VoiceOver focus trapping, top layer), while
|
|
20992
|
-
* the content inside is a role="listbox" navigated via
|
|
20993
|
-
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
20994
|
-
* behavior follows listbox conventions (select + close) because
|
|
20995
|
-
* the dialog's native Tab trap only cycles between the close
|
|
20996
|
-
* button and browser chrome.
|
|
20997
|
-
*
|
|
20998
|
-
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
20999
|
-
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
21000
|
-
* is a secondary path for parent components that also listen for
|
|
21001
|
-
* Escape keydown.
|
|
21002
|
-
*
|
|
21003
|
-
* @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
|
|
21004
|
-
* @private
|
|
21005
|
-
*/
|
|
21006
|
-
_setupKeyboardBridge(dialog) {
|
|
21007
|
-
const navKeys = new Set([
|
|
21008
|
-
'ArrowUp',
|
|
21009
|
-
'ArrowDown',
|
|
21010
|
-
'Enter',
|
|
21011
|
-
'Escape',
|
|
21012
|
-
'Tab'
|
|
21013
|
-
]);
|
|
21014
|
-
|
|
21015
|
-
dialog.addEventListener('keydown', (event) => {
|
|
21016
|
-
if (!navKeys.has(event.key)) {
|
|
21017
|
-
return;
|
|
21018
|
-
}
|
|
21019
|
-
|
|
21020
|
-
// Custom elements (auro-button) don't get the native Enter→click
|
|
21021
|
-
// behavior that <button> has. Find the button in the composed path
|
|
21022
|
-
// and click it directly — but only when no menu option is
|
|
21023
|
-
// highlighted. In fullscreen mode focus stays on the close button
|
|
21024
|
-
// while arrow keys move the active-descendant highlight through
|
|
21025
|
-
// the listbox. If the user presses Enter with an option
|
|
21026
|
-
// highlighted, the intent is to select that option, not to click
|
|
21027
|
-
// the close button. In that case we fall through and bridge the
|
|
21028
|
-
// Enter key to the parent component's keyboard strategy.
|
|
21029
|
-
if (event.key === 'Enter') {
|
|
21030
|
-
if (!this.hasActiveDescendant) {
|
|
21031
|
-
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
21032
|
-
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
21033
|
-
if (btn) {
|
|
21034
|
-
event.preventDefault();
|
|
21035
|
-
event.stopPropagation();
|
|
21036
|
-
btn.click();
|
|
21037
|
-
return;
|
|
21038
|
-
}
|
|
21039
|
-
}
|
|
21040
|
-
}
|
|
21041
|
-
|
|
21042
|
-
event.preventDefault();
|
|
21043
|
-
event.stopPropagation();
|
|
21044
|
-
const newEvent = new KeyboardEvent('keydown', {
|
|
21045
|
-
key: event.key,
|
|
21046
|
-
code: event.code,
|
|
21047
|
-
shiftKey: event.shiftKey,
|
|
21048
|
-
altKey: event.altKey,
|
|
21049
|
-
ctrlKey: event.ctrlKey,
|
|
21050
|
-
metaKey: event.metaKey,
|
|
21051
|
-
bubbles: true,
|
|
21052
|
-
composed: true,
|
|
21053
|
-
cancelable: true
|
|
21054
|
-
});
|
|
21055
|
-
this.dispatchEvent(newEvent);
|
|
21056
|
-
});
|
|
21057
|
-
}
|
|
21058
21038
|
|
|
21059
21039
|
/**
|
|
21060
21040
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -21429,7 +21409,7 @@ let AuroHelpText$2$1 = class AuroHelpText extends i$4 {
|
|
|
21429
21409
|
}
|
|
21430
21410
|
};
|
|
21431
21411
|
|
|
21432
|
-
var formkitVersion$1$3 = '
|
|
21412
|
+
var formkitVersion$1$3 = '202604021512';
|
|
21433
21413
|
|
|
21434
21414
|
let AuroElement$2$2 = class AuroElement extends i$4 {
|
|
21435
21415
|
static get properties() {
|
|
@@ -21610,7 +21590,6 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
21610
21590
|
this.appearance = 'default';
|
|
21611
21591
|
this.chevron = false;
|
|
21612
21592
|
this.disabled = false;
|
|
21613
|
-
this.disableFocusTrap = false;
|
|
21614
21593
|
this.error = false;
|
|
21615
21594
|
this.tabIndex = 0;
|
|
21616
21595
|
this.noToggle = false;
|
|
@@ -21708,9 +21687,8 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
21708
21687
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
21709
21688
|
// falls outside the user activation window and causes iOS to
|
|
21710
21689
|
// dismiss the keyboard.
|
|
21711
|
-
if (this.
|
|
21712
|
-
|
|
21713
|
-
this.bibElement.value.open(useModal);
|
|
21690
|
+
if (this.bibElement && this.bibElement.value) {
|
|
21691
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
21714
21692
|
}
|
|
21715
21693
|
}
|
|
21716
21694
|
|
|
@@ -21823,14 +21801,6 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
21823
21801
|
reflect: true
|
|
21824
21802
|
},
|
|
21825
21803
|
|
|
21826
|
-
/**
|
|
21827
|
-
* If declared, the focus trap inside of bib will be turned off.
|
|
21828
|
-
*/
|
|
21829
|
-
disableFocusTrap: {
|
|
21830
|
-
type: Boolean,
|
|
21831
|
-
reflect: true
|
|
21832
|
-
},
|
|
21833
|
-
|
|
21834
21804
|
/**
|
|
21835
21805
|
* @private
|
|
21836
21806
|
*/
|
|
@@ -22104,7 +22074,7 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
22104
22074
|
if (this.isPopoverVisible) {
|
|
22105
22075
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
22106
22076
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
22107
|
-
const useModal = this.isBibFullscreen
|
|
22077
|
+
const useModal = this.isBibFullscreen;
|
|
22108
22078
|
this.bibElement.value.open(useModal);
|
|
22109
22079
|
} else {
|
|
22110
22080
|
this.bibElement.value.close();
|
|
@@ -22114,7 +22084,7 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
22114
22084
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
22115
22085
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
22116
22086
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
22117
|
-
const useModal = this.isBibFullscreen
|
|
22087
|
+
const useModal = this.isBibFullscreen;
|
|
22118
22088
|
this.bibElement.value.close();
|
|
22119
22089
|
this.bibElement.value.open(useModal);
|
|
22120
22090
|
}
|
|
@@ -22226,7 +22196,7 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
22226
22196
|
* @private
|
|
22227
22197
|
*/
|
|
22228
22198
|
updateFocusTrap() {
|
|
22229
|
-
if (this.isPopoverVisible
|
|
22199
|
+
if (this.isPopoverVisible) {
|
|
22230
22200
|
if (!this.isBibFullscreen) {
|
|
22231
22201
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
22232
22202
|
this.focusTrap = new FocusTrap$3(this.bibContent);
|
|
@@ -29186,7 +29156,7 @@ let AuroHelpText$1$3 = class AuroHelpText extends i$4 {
|
|
|
29186
29156
|
}
|
|
29187
29157
|
};
|
|
29188
29158
|
|
|
29189
|
-
var formkitVersion$7 = '
|
|
29159
|
+
var formkitVersion$7 = '202604021512';
|
|
29190
29160
|
|
|
29191
29161
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
29192
29162
|
// See LICENSE in the project root for license information.
|
|
@@ -30392,7 +30362,7 @@ function restoreTriggerAfterClose$2(dropdown, focusTarget) {
|
|
|
30392
30362
|
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
30393
30363
|
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
30394
30364
|
*/
|
|
30395
|
-
function createDisplayContext$
|
|
30365
|
+
function createDisplayContext$4(component, options = {}) {
|
|
30396
30366
|
const dd = options.dropdown || component.dropdown;
|
|
30397
30367
|
// isPopoverVisible reflects as the `open` attribute.
|
|
30398
30368
|
// It reports whether the bib is open in any mode (popover or modal).
|
|
@@ -30422,11 +30392,11 @@ function createDisplayContext$2(component, options = {}) {
|
|
|
30422
30392
|
* @param {Object} strategy - Map of key names to handler functions.
|
|
30423
30393
|
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
30424
30394
|
*/
|
|
30425
|
-
function applyKeyboardStrategy$
|
|
30395
|
+
function applyKeyboardStrategy$4(component, strategy, options = {}) {
|
|
30426
30396
|
component.addEventListener('keydown', async (evt) => {
|
|
30427
30397
|
const handler = strategy[evt.key] || strategy.default;
|
|
30428
30398
|
if (typeof handler === 'function') {
|
|
30429
|
-
const ctx = createDisplayContext$
|
|
30399
|
+
const ctx = createDisplayContext$4(component, options);
|
|
30430
30400
|
await handler(component, evt, ctx);
|
|
30431
30401
|
}
|
|
30432
30402
|
});
|
|
@@ -31264,7 +31234,7 @@ class AuroDatePicker extends AuroElement$5 {
|
|
|
31264
31234
|
// The dialog event bridge intercepts Tab and re-dispatches it as a
|
|
31265
31235
|
// composed keydown; this listener catches the re-dispatched event.
|
|
31266
31236
|
// Enter opens the bib when it is closed.
|
|
31267
|
-
applyKeyboardStrategy$
|
|
31237
|
+
applyKeyboardStrategy$4(this, datepickerKeyboardStrategy);
|
|
31268
31238
|
|
|
31269
31239
|
this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
|
|
31270
31240
|
if (!this.isPopoverVisible) {
|
|
@@ -32349,7 +32319,6 @@ class AuroDatePicker extends AuroElement$5 {
|
|
|
32349
32319
|
.size="${this.size}"
|
|
32350
32320
|
class="${e$3(dropdownElementClassMap)}"
|
|
32351
32321
|
disableEventShow
|
|
32352
|
-
disableFocusTrap
|
|
32353
32322
|
for="dropdownMenu"
|
|
32354
32323
|
part="dropdown"
|
|
32355
32324
|
>
|
|
@@ -33546,6 +33515,57 @@ class IconUtil {
|
|
|
33546
33515
|
}
|
|
33547
33516
|
}
|
|
33548
33517
|
|
|
33518
|
+
/**
|
|
33519
|
+
* Computes display state once per keydown event.
|
|
33520
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
33521
|
+
*
|
|
33522
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
33523
|
+
* @param {Object} [options] - Optional config.
|
|
33524
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
33525
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
33526
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
33527
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
33528
|
+
*/
|
|
33529
|
+
function createDisplayContext$1$2(component, options = {}) {
|
|
33530
|
+
const dd = options.dropdown || component.dropdown;
|
|
33531
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
33532
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
33533
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
33534
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
33535
|
+
|
|
33536
|
+
const ctx = {
|
|
33537
|
+
isExpanded,
|
|
33538
|
+
isModal: isFullscreen,
|
|
33539
|
+
isPopover: !isFullscreen,
|
|
33540
|
+
activeInput: null,
|
|
33541
|
+
};
|
|
33542
|
+
|
|
33543
|
+
if (options.inputResolver) {
|
|
33544
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
33545
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
33546
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
33547
|
+
}
|
|
33548
|
+
|
|
33549
|
+
return ctx;
|
|
33550
|
+
}
|
|
33551
|
+
|
|
33552
|
+
/**
|
|
33553
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
33554
|
+
* Handles both sync and async handlers.
|
|
33555
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
33556
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
33557
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
33558
|
+
*/
|
|
33559
|
+
function applyKeyboardStrategy$1$2(component, strategy, options = {}) {
|
|
33560
|
+
component.addEventListener('keydown', async (evt) => {
|
|
33561
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
33562
|
+
if (typeof handler === 'function') {
|
|
33563
|
+
const ctx = createDisplayContext$1$2(component, options);
|
|
33564
|
+
await handler(component, evt, ctx);
|
|
33565
|
+
}
|
|
33566
|
+
});
|
|
33567
|
+
}
|
|
33568
|
+
|
|
33549
33569
|
var plusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"plus-lg","category":"interface","svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><path d=\"M11.898 5.007 12 5a.75.75 0 0 1 .743.648l.007.102v5.5h5.5a.75.75 0 0 1 .743.648L19 12a.75.75 0 0 1-.648.743l-.102.007h-5.501l.001 5.5a.75.75 0 0 1-.648.743L12 19a.75.75 0 0 1-.743-.648l-.007-.102-.001-5.5H5.75a.75.75 0 0 1-.743-.648L5 12a.75.75 0 0 1 .648-.743l.102-.007h5.5v-5.5a.75.75 0 0 1 .648-.743L12 5z\"/></svg>"};
|
|
33550
33570
|
|
|
33551
33571
|
var minusIcon = {"role":"img","color":"currentColor","title":"","desc":"","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"minus-lg","category":"interface","deprecated":true,"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-hidden=\"true\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><path d=\"M5.75 12.75h12.5a.75.75 0 1 0 0-1.5H5.75a.75.75 0 1 0 0 1.5\"/></svg>"};
|
|
@@ -33782,7 +33802,30 @@ let AuroHelpText$1$2 = class AuroHelpText extends i$4 {
|
|
|
33782
33802
|
}
|
|
33783
33803
|
};
|
|
33784
33804
|
|
|
33785
|
-
var formkitVersion$1$2 = '
|
|
33805
|
+
var formkitVersion$1$2 = '202604021512';
|
|
33806
|
+
|
|
33807
|
+
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
33808
|
+
// See LICENSE in the project root for license information.
|
|
33809
|
+
|
|
33810
|
+
const keyboardStrategy = {
|
|
33811
|
+
ArrowUp(component, _evt) {
|
|
33812
|
+
if (component.disabled) {
|
|
33813
|
+
return;
|
|
33814
|
+
}
|
|
33815
|
+
|
|
33816
|
+
_evt.preventDefault();
|
|
33817
|
+
component.increment();
|
|
33818
|
+
},
|
|
33819
|
+
|
|
33820
|
+
ArrowDown(component, _evt) {
|
|
33821
|
+
if (component.disabled) {
|
|
33822
|
+
return;
|
|
33823
|
+
}
|
|
33824
|
+
|
|
33825
|
+
_evt.preventDefault();
|
|
33826
|
+
component.decrement();
|
|
33827
|
+
}
|
|
33828
|
+
};
|
|
33786
33829
|
|
|
33787
33830
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
33788
33831
|
// See LICENSE in the project root for license information.
|
|
@@ -33856,14 +33899,36 @@ class AuroCounter extends i$4 {
|
|
|
33856
33899
|
|
|
33857
33900
|
connectedCallback() {
|
|
33858
33901
|
super.connectedCallback();
|
|
33859
|
-
this
|
|
33902
|
+
applyKeyboardStrategy$1$2(this, keyboardStrategy);
|
|
33860
33903
|
}
|
|
33861
33904
|
|
|
33862
33905
|
disconnectedCallback() {
|
|
33863
|
-
this.removeEventListener('keydown', this.handleKeyDown);
|
|
33864
33906
|
super.disconnectedCallback();
|
|
33865
33907
|
}
|
|
33866
33908
|
|
|
33909
|
+
/**
|
|
33910
|
+
* Gets the current value of the counter.
|
|
33911
|
+
* @returns {number|undefined} The current value of the counter, or undefined if the value is not set or invalid.
|
|
33912
|
+
*/
|
|
33913
|
+
get value() {
|
|
33914
|
+
return this._value;
|
|
33915
|
+
}
|
|
33916
|
+
|
|
33917
|
+
/**
|
|
33918
|
+
* Sets the value of the counter. If the provided value is undefined, null, or cannot be converted to a number, the internal value will be set to undefined.
|
|
33919
|
+
* @param {number|string|undefined|null} val - The value to set for the counter. Can be a number, a string that can be converted to a number, undefined, or null.
|
|
33920
|
+
*/
|
|
33921
|
+
set value(val) {
|
|
33922
|
+
const old = this._value;
|
|
33923
|
+
if (val === undefined || val === null) {
|
|
33924
|
+
this._value = undefined;
|
|
33925
|
+
} else {
|
|
33926
|
+
const num = Number(val);
|
|
33927
|
+
this._value = Number.isNaN(num) ? undefined : num;
|
|
33928
|
+
}
|
|
33929
|
+
this.requestUpdate('value', old);
|
|
33930
|
+
}
|
|
33931
|
+
|
|
33867
33932
|
/**
|
|
33868
33933
|
* Defines reactive properties for the component.
|
|
33869
33934
|
* @returns {Object} Property configuration.
|
|
@@ -34048,29 +34113,6 @@ class AuroCounter extends i$4 {
|
|
|
34048
34113
|
this.validation.validate(this, force);
|
|
34049
34114
|
}
|
|
34050
34115
|
|
|
34051
|
-
/**
|
|
34052
|
-
* Handles the keydown event for the counter component.
|
|
34053
|
-
* @param {KeyboardEvent} event - The keyboard event object.
|
|
34054
|
-
* @returns {void}
|
|
34055
|
-
* @private
|
|
34056
|
-
*/
|
|
34057
|
-
handleKeyDown(event) {
|
|
34058
|
-
if (this.disabled) {
|
|
34059
|
-
return;
|
|
34060
|
-
}
|
|
34061
|
-
|
|
34062
|
-
switch (event.key) {
|
|
34063
|
-
case 'ArrowUp':
|
|
34064
|
-
event.preventDefault();
|
|
34065
|
-
this.increment();
|
|
34066
|
-
break;
|
|
34067
|
-
case 'ArrowDown':
|
|
34068
|
-
event.preventDefault();
|
|
34069
|
-
this.decrement();
|
|
34070
|
-
break;
|
|
34071
|
-
}
|
|
34072
|
-
}
|
|
34073
|
-
|
|
34074
34116
|
firstUpdated() {
|
|
34075
34117
|
this.initValue();
|
|
34076
34118
|
this.setTagAttribute("auro-counter");
|
|
@@ -36273,11 +36315,10 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
|
|
|
36273
36315
|
return;
|
|
36274
36316
|
}
|
|
36275
36317
|
|
|
36276
|
-
const { activeElement } = document;
|
|
36277
36318
|
// if focus is still inside of trigger or bib, do not close
|
|
36278
36319
|
if (
|
|
36279
|
-
this.element.
|
|
36280
|
-
this.element.
|
|
36320
|
+
this.element.matches(":focus") ||
|
|
36321
|
+
this.element.matches(":focus-within")
|
|
36281
36322
|
) {
|
|
36282
36323
|
return;
|
|
36283
36324
|
}
|
|
@@ -37116,12 +37157,83 @@ let p$2$2 = class p{registerComponent(t,a){customElements.get(t)||customElements
|
|
|
37116
37157
|
|
|
37117
37158
|
var iconVersion$1$2 = '9.1.2';
|
|
37118
37159
|
|
|
37160
|
+
/**
|
|
37161
|
+
* Computes display state once per keydown event.
|
|
37162
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
37163
|
+
*
|
|
37164
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
37165
|
+
* @param {Object} [options] - Optional config.
|
|
37166
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
37167
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
37168
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
37169
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
37170
|
+
*/
|
|
37171
|
+
function createDisplayContext$3(component, options = {}) {
|
|
37172
|
+
const dd = options.dropdown || component.dropdown;
|
|
37173
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
37174
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
37175
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
37176
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
37177
|
+
|
|
37178
|
+
const ctx = {
|
|
37179
|
+
isExpanded,
|
|
37180
|
+
isModal: isFullscreen,
|
|
37181
|
+
isPopover: !isFullscreen,
|
|
37182
|
+
activeInput: null,
|
|
37183
|
+
};
|
|
37184
|
+
|
|
37185
|
+
if (options.inputResolver) {
|
|
37186
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
37187
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
37188
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
37189
|
+
}
|
|
37190
|
+
|
|
37191
|
+
return ctx;
|
|
37192
|
+
}
|
|
37193
|
+
|
|
37194
|
+
/**
|
|
37195
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
37196
|
+
* Handles both sync and async handlers.
|
|
37197
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
37198
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
37199
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
37200
|
+
*/
|
|
37201
|
+
function applyKeyboardStrategy$3(component, strategy, options = {}) {
|
|
37202
|
+
component.addEventListener('keydown', async (evt) => {
|
|
37203
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
37204
|
+
if (typeof handler === 'function') {
|
|
37205
|
+
const ctx = createDisplayContext$3(component, options);
|
|
37206
|
+
await handler(component, evt, ctx);
|
|
37207
|
+
}
|
|
37208
|
+
});
|
|
37209
|
+
}
|
|
37210
|
+
|
|
37119
37211
|
var styleCss$2$5 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
|
|
37120
37212
|
|
|
37121
37213
|
var colorCss$2$5 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
37122
37214
|
|
|
37123
37215
|
var tokensCss$1$4 = i$7`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
|
|
37124
37216
|
|
|
37217
|
+
/**
|
|
37218
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
37219
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
37220
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
37221
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
37222
|
+
*/
|
|
37223
|
+
// eslint-disable-next-line no-unused-vars
|
|
37224
|
+
function createDropdownBibKeyboardStrategy$2(bib) {
|
|
37225
|
+
return {
|
|
37226
|
+
// eslint-disable-next-line no-unused-vars
|
|
37227
|
+
Enter(_dialog, event) {
|
|
37228
|
+
// Floating UI handles Enter key to open the dropdown
|
|
37229
|
+
},
|
|
37230
|
+
// eslint-disable-next-line no-unused-vars
|
|
37231
|
+
Escape(_dialog, event) {
|
|
37232
|
+
// Floating UI handles Escape key to close the dropdown
|
|
37233
|
+
}
|
|
37234
|
+
};
|
|
37235
|
+
}
|
|
37236
|
+
|
|
37125
37237
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
37126
37238
|
// See LICENSE in the project root for license information.
|
|
37127
37239
|
/* eslint-disable max-lines */
|
|
@@ -37246,11 +37358,7 @@ let AuroDropdownBib$2 = class AuroDropdownBib extends i$4 {
|
|
|
37246
37358
|
},
|
|
37247
37359
|
|
|
37248
37360
|
/**
|
|
37249
|
-
*
|
|
37250
|
-
* aria-activedescendant. The dialog keyboard bridge checks this
|
|
37251
|
-
* flag so that Enter selects the highlighted option instead of
|
|
37252
|
-
* activating the focused interactive element (e.g. the trigger
|
|
37253
|
-
* button, or the bibtemplate close button in fullscreen).
|
|
37361
|
+
* Tracks whether a menu option is currently highlighted.
|
|
37254
37362
|
* @private
|
|
37255
37363
|
*/
|
|
37256
37364
|
hasActiveDescendant: {
|
|
@@ -37324,7 +37432,7 @@ let AuroDropdownBib$2 = class AuroDropdownBib extends i$4 {
|
|
|
37324
37432
|
|
|
37325
37433
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
37326
37434
|
this._setupCancelHandler(dialog);
|
|
37327
|
-
|
|
37435
|
+
applyKeyboardStrategy$3(dialog, createDropdownBibKeyboardStrategy$2());
|
|
37328
37436
|
|
|
37329
37437
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
37330
37438
|
bubbles: true,
|
|
@@ -37351,92 +37459,6 @@ let AuroDropdownBib$2 = class AuroDropdownBib extends i$4 {
|
|
|
37351
37459
|
});
|
|
37352
37460
|
}
|
|
37353
37461
|
|
|
37354
|
-
/**
|
|
37355
|
-
* showModal() creates a closed focus scope — keyboard events inside
|
|
37356
|
-
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
37357
|
-
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
37358
|
-
* that gap by re-dispatching navigation keys so they cross the
|
|
37359
|
-
* shadow boundary and reach the menu navigation logic in the parent
|
|
37360
|
-
* component.
|
|
37361
|
-
*
|
|
37362
|
-
* The trade-off: intercepting these keys means native keyboard
|
|
37363
|
-
* behaviors that would normally "just work" must be manually
|
|
37364
|
-
* re-implemented here:
|
|
37365
|
-
*
|
|
37366
|
-
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
37367
|
-
* native Enter→click that <button> provides, so we call .click()
|
|
37368
|
-
* directly when Enter is pressed on a button-like element.
|
|
37369
|
-
*
|
|
37370
|
-
* - Tab: Intercepted and re-dispatched so parent components
|
|
37371
|
-
* (select/combobox) can select the active option and close the
|
|
37372
|
-
* dialog. The <dialog> provides containment and isolation
|
|
37373
|
-
* (inert background, VoiceOver focus trapping, top layer), while
|
|
37374
|
-
* the content inside is a role="listbox" navigated via
|
|
37375
|
-
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
37376
|
-
* behavior follows listbox conventions (select + close) because
|
|
37377
|
-
* the dialog's native Tab trap only cycles between the close
|
|
37378
|
-
* button and browser chrome.
|
|
37379
|
-
*
|
|
37380
|
-
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
37381
|
-
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
37382
|
-
* is a secondary path for parent components that also listen for
|
|
37383
|
-
* Escape keydown.
|
|
37384
|
-
*
|
|
37385
|
-
* @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
|
|
37386
|
-
* @private
|
|
37387
|
-
*/
|
|
37388
|
-
_setupKeyboardBridge(dialog) {
|
|
37389
|
-
const navKeys = new Set([
|
|
37390
|
-
'ArrowUp',
|
|
37391
|
-
'ArrowDown',
|
|
37392
|
-
'Enter',
|
|
37393
|
-
'Escape',
|
|
37394
|
-
'Tab'
|
|
37395
|
-
]);
|
|
37396
|
-
|
|
37397
|
-
dialog.addEventListener('keydown', (event) => {
|
|
37398
|
-
if (!navKeys.has(event.key)) {
|
|
37399
|
-
return;
|
|
37400
|
-
}
|
|
37401
|
-
|
|
37402
|
-
// Custom elements (auro-button) don't get the native Enter→click
|
|
37403
|
-
// behavior that <button> has. Find the button in the composed path
|
|
37404
|
-
// and click it directly — but only when no menu option is
|
|
37405
|
-
// highlighted. In fullscreen mode focus stays on the close button
|
|
37406
|
-
// while arrow keys move the active-descendant highlight through
|
|
37407
|
-
// the listbox. If the user presses Enter with an option
|
|
37408
|
-
// highlighted, the intent is to select that option, not to click
|
|
37409
|
-
// the close button. In that case we fall through and bridge the
|
|
37410
|
-
// Enter key to the parent component's keyboard strategy.
|
|
37411
|
-
if (event.key === 'Enter') {
|
|
37412
|
-
if (!this.hasActiveDescendant) {
|
|
37413
|
-
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
37414
|
-
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
37415
|
-
if (btn) {
|
|
37416
|
-
event.preventDefault();
|
|
37417
|
-
event.stopPropagation();
|
|
37418
|
-
btn.click();
|
|
37419
|
-
return;
|
|
37420
|
-
}
|
|
37421
|
-
}
|
|
37422
|
-
}
|
|
37423
|
-
|
|
37424
|
-
event.preventDefault();
|
|
37425
|
-
event.stopPropagation();
|
|
37426
|
-
const newEvent = new KeyboardEvent('keydown', {
|
|
37427
|
-
key: event.key,
|
|
37428
|
-
code: event.code,
|
|
37429
|
-
shiftKey: event.shiftKey,
|
|
37430
|
-
altKey: event.altKey,
|
|
37431
|
-
ctrlKey: event.ctrlKey,
|
|
37432
|
-
metaKey: event.metaKey,
|
|
37433
|
-
bubbles: true,
|
|
37434
|
-
composed: true,
|
|
37435
|
-
cancelable: true
|
|
37436
|
-
});
|
|
37437
|
-
this.dispatchEvent(newEvent);
|
|
37438
|
-
});
|
|
37439
|
-
}
|
|
37440
37462
|
|
|
37441
37463
|
/**
|
|
37442
37464
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -37811,7 +37833,7 @@ let AuroHelpText$6 = class AuroHelpText extends i$4 {
|
|
|
37811
37833
|
}
|
|
37812
37834
|
};
|
|
37813
37835
|
|
|
37814
|
-
var formkitVersion$6 = '
|
|
37836
|
+
var formkitVersion$6 = '202604021512';
|
|
37815
37837
|
|
|
37816
37838
|
let AuroElement$1$2 = class AuroElement extends i$4 {
|
|
37817
37839
|
static get properties() {
|
|
@@ -37992,7 +38014,6 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
37992
38014
|
this.appearance = 'default';
|
|
37993
38015
|
this.chevron = false;
|
|
37994
38016
|
this.disabled = false;
|
|
37995
|
-
this.disableFocusTrap = false;
|
|
37996
38017
|
this.error = false;
|
|
37997
38018
|
this.tabIndex = 0;
|
|
37998
38019
|
this.noToggle = false;
|
|
@@ -38090,9 +38111,8 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38090
38111
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
38091
38112
|
// falls outside the user activation window and causes iOS to
|
|
38092
38113
|
// dismiss the keyboard.
|
|
38093
|
-
if (this.
|
|
38094
|
-
|
|
38095
|
-
this.bibElement.value.open(useModal);
|
|
38114
|
+
if (this.bibElement && this.bibElement.value) {
|
|
38115
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
38096
38116
|
}
|
|
38097
38117
|
}
|
|
38098
38118
|
|
|
@@ -38205,14 +38225,6 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38205
38225
|
reflect: true
|
|
38206
38226
|
},
|
|
38207
38227
|
|
|
38208
|
-
/**
|
|
38209
|
-
* If declared, the focus trap inside of bib will be turned off.
|
|
38210
|
-
*/
|
|
38211
|
-
disableFocusTrap: {
|
|
38212
|
-
type: Boolean,
|
|
38213
|
-
reflect: true
|
|
38214
|
-
},
|
|
38215
|
-
|
|
38216
38228
|
/**
|
|
38217
38229
|
* @private
|
|
38218
38230
|
*/
|
|
@@ -38486,7 +38498,7 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38486
38498
|
if (this.isPopoverVisible) {
|
|
38487
38499
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
38488
38500
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
38489
|
-
const useModal = this.isBibFullscreen
|
|
38501
|
+
const useModal = this.isBibFullscreen;
|
|
38490
38502
|
this.bibElement.value.open(useModal);
|
|
38491
38503
|
} else {
|
|
38492
38504
|
this.bibElement.value.close();
|
|
@@ -38496,7 +38508,7 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38496
38508
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
38497
38509
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
38498
38510
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
38499
|
-
const useModal = this.isBibFullscreen
|
|
38511
|
+
const useModal = this.isBibFullscreen;
|
|
38500
38512
|
this.bibElement.value.close();
|
|
38501
38513
|
this.bibElement.value.open(useModal);
|
|
38502
38514
|
}
|
|
@@ -38608,7 +38620,7 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38608
38620
|
* @private
|
|
38609
38621
|
*/
|
|
38610
38622
|
updateFocusTrap() {
|
|
38611
|
-
if (this.isPopoverVisible
|
|
38623
|
+
if (this.isPopoverVisible) {
|
|
38612
38624
|
if (!this.isBibFullscreen) {
|
|
38613
38625
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
38614
38626
|
this.focusTrap = new FocusTrap$2(this.bibContent);
|
|
@@ -39808,6 +39820,7 @@ class AuroCounterGroup extends AuroElement$4 {
|
|
|
39808
39820
|
counter.addEventListener("input", this.updateValue);
|
|
39809
39821
|
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
39810
39822
|
});
|
|
39823
|
+
this.updateValue();
|
|
39811
39824
|
}
|
|
39812
39825
|
|
|
39813
39826
|
/**
|
|
@@ -39938,6 +39951,8 @@ class AuroCounterGroup extends AuroElement$4 {
|
|
|
39938
39951
|
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
39939
39952
|
});
|
|
39940
39953
|
|
|
39954
|
+
this.updateValue();
|
|
39955
|
+
|
|
39941
39956
|
if (this.isDropdown) {
|
|
39942
39957
|
this.configureBibtemplate();
|
|
39943
39958
|
}
|
|
@@ -39963,15 +39978,6 @@ class AuroCounterGroup extends AuroElement$4 {
|
|
|
39963
39978
|
});
|
|
39964
39979
|
}
|
|
39965
39980
|
});
|
|
39966
|
-
|
|
39967
|
-
// Tab closes the fullscreen dialog
|
|
39968
|
-
// The dialog event bridge intercepts Tab and re-dispatches it as a
|
|
39969
|
-
// composed keydown; this listener catches the re-dispatched event.
|
|
39970
|
-
this.addEventListener('keydown', (evt) => {
|
|
39971
|
-
if (evt.key === 'Tab' && this.dropdown.isPopoverVisible && this.dropdown.isBibFullscreen) {
|
|
39972
|
-
this.dropdown.hide();
|
|
39973
|
-
}
|
|
39974
|
-
});
|
|
39975
39981
|
}
|
|
39976
39982
|
|
|
39977
39983
|
/**
|
|
@@ -40161,8 +40167,7 @@ class AuroCounterGroup extends AuroElement$4 {
|
|
|
40161
40167
|
*/
|
|
40162
40168
|
renderCounterDropdown() {
|
|
40163
40169
|
return u$c`
|
|
40164
|
-
<${this.dropdownTag}
|
|
40165
|
-
noHideOnThisFocusLoss
|
|
40170
|
+
<${this.dropdownTag}
|
|
40166
40171
|
chevron
|
|
40167
40172
|
part="dropdown"
|
|
40168
40173
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
@@ -41888,7 +41893,7 @@ let AuroHelpText$5 = class AuroHelpText extends i$4 {
|
|
|
41888
41893
|
}
|
|
41889
41894
|
};
|
|
41890
41895
|
|
|
41891
|
-
var formkitVersion$5 = '
|
|
41896
|
+
var formkitVersion$5 = '202604021512';
|
|
41892
41897
|
|
|
41893
41898
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
41894
41899
|
// See LICENSE in the project root for license information.
|
|
@@ -44057,7 +44062,7 @@ let AuroHelpText$4 = class AuroHelpText extends i$4 {
|
|
|
44057
44062
|
}
|
|
44058
44063
|
};
|
|
44059
44064
|
|
|
44060
|
-
var formkitVersion$4 = '
|
|
44065
|
+
var formkitVersion$4 = '202604021512';
|
|
44061
44066
|
|
|
44062
44067
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
44063
44068
|
// See LICENSE in the project root for license information.
|
|
@@ -45594,7 +45599,7 @@ function restoreTriggerAfterClose$1(dropdown, focusTarget) {
|
|
|
45594
45599
|
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
45595
45600
|
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
45596
45601
|
*/
|
|
45597
|
-
function createDisplayContext$1(component, options = {}) {
|
|
45602
|
+
function createDisplayContext$1$1(component, options = {}) {
|
|
45598
45603
|
const dd = options.dropdown || component.dropdown;
|
|
45599
45604
|
// isPopoverVisible reflects as the `open` attribute.
|
|
45600
45605
|
// It reports whether the bib is open in any mode (popover or modal).
|
|
@@ -45624,11 +45629,11 @@ function createDisplayContext$1(component, options = {}) {
|
|
|
45624
45629
|
* @param {Object} strategy - Map of key names to handler functions.
|
|
45625
45630
|
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
45626
45631
|
*/
|
|
45627
|
-
function applyKeyboardStrategy$1(component, strategy, options = {}) {
|
|
45632
|
+
function applyKeyboardStrategy$1$1(component, strategy, options = {}) {
|
|
45628
45633
|
component.addEventListener('keydown', async (evt) => {
|
|
45629
45634
|
const handler = strategy[evt.key] || strategy.default;
|
|
45630
45635
|
if (typeof handler === 'function') {
|
|
45631
|
-
const ctx = createDisplayContext$1(component, options);
|
|
45636
|
+
const ctx = createDisplayContext$1$1(component, options);
|
|
45632
45637
|
await handler(component, evt, ctx);
|
|
45633
45638
|
}
|
|
45634
45639
|
});
|
|
@@ -47860,11 +47865,10 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
|
|
|
47860
47865
|
return;
|
|
47861
47866
|
}
|
|
47862
47867
|
|
|
47863
|
-
const { activeElement } = document;
|
|
47864
47868
|
// if focus is still inside of trigger or bib, do not close
|
|
47865
47869
|
if (
|
|
47866
|
-
this.element.
|
|
47867
|
-
this.element.
|
|
47870
|
+
this.element.matches(":focus") ||
|
|
47871
|
+
this.element.matches(":focus-within")
|
|
47868
47872
|
) {
|
|
47869
47873
|
return;
|
|
47870
47874
|
}
|
|
@@ -48703,12 +48707,83 @@ let p$3$1 = class p{registerComponent(t,a){customElements.get(t)||customElements
|
|
|
48703
48707
|
|
|
48704
48708
|
var iconVersion$2$1 = '9.1.2';
|
|
48705
48709
|
|
|
48710
|
+
/**
|
|
48711
|
+
* Computes display state once per keydown event.
|
|
48712
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
48713
|
+
*
|
|
48714
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
48715
|
+
* @param {Object} [options] - Optional config.
|
|
48716
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
48717
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
48718
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
48719
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
48720
|
+
*/
|
|
48721
|
+
function createDisplayContext$2(component, options = {}) {
|
|
48722
|
+
const dd = options.dropdown || component.dropdown;
|
|
48723
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
48724
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
48725
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
48726
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
48727
|
+
|
|
48728
|
+
const ctx = {
|
|
48729
|
+
isExpanded,
|
|
48730
|
+
isModal: isFullscreen,
|
|
48731
|
+
isPopover: !isFullscreen,
|
|
48732
|
+
activeInput: null,
|
|
48733
|
+
};
|
|
48734
|
+
|
|
48735
|
+
if (options.inputResolver) {
|
|
48736
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
48737
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
48738
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
48739
|
+
}
|
|
48740
|
+
|
|
48741
|
+
return ctx;
|
|
48742
|
+
}
|
|
48743
|
+
|
|
48744
|
+
/**
|
|
48745
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
48746
|
+
* Handles both sync and async handlers.
|
|
48747
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
48748
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
48749
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
48750
|
+
*/
|
|
48751
|
+
function applyKeyboardStrategy$2(component, strategy, options = {}) {
|
|
48752
|
+
component.addEventListener('keydown', async (evt) => {
|
|
48753
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
48754
|
+
if (typeof handler === 'function') {
|
|
48755
|
+
const ctx = createDisplayContext$2(component, options);
|
|
48756
|
+
await handler(component, evt, ctx);
|
|
48757
|
+
}
|
|
48758
|
+
});
|
|
48759
|
+
}
|
|
48760
|
+
|
|
48706
48761
|
var styleCss$2$1$1 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
|
|
48707
48762
|
|
|
48708
48763
|
var colorCss$2$1 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
48709
48764
|
|
|
48710
48765
|
var tokensCss$1$1 = i$7`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
|
|
48711
48766
|
|
|
48767
|
+
/**
|
|
48768
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
48769
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
48770
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
48771
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
48772
|
+
*/
|
|
48773
|
+
// eslint-disable-next-line no-unused-vars
|
|
48774
|
+
function createDropdownBibKeyboardStrategy$1(bib) {
|
|
48775
|
+
return {
|
|
48776
|
+
// eslint-disable-next-line no-unused-vars
|
|
48777
|
+
Enter(_dialog, event) {
|
|
48778
|
+
// Floating UI handles Enter key to open the dropdown
|
|
48779
|
+
},
|
|
48780
|
+
// eslint-disable-next-line no-unused-vars
|
|
48781
|
+
Escape(_dialog, event) {
|
|
48782
|
+
// Floating UI handles Escape key to close the dropdown
|
|
48783
|
+
}
|
|
48784
|
+
};
|
|
48785
|
+
}
|
|
48786
|
+
|
|
48712
48787
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
48713
48788
|
// See LICENSE in the project root for license information.
|
|
48714
48789
|
/* eslint-disable max-lines */
|
|
@@ -48833,11 +48908,7 @@ let AuroDropdownBib$1 = class AuroDropdownBib extends i$4 {
|
|
|
48833
48908
|
},
|
|
48834
48909
|
|
|
48835
48910
|
/**
|
|
48836
|
-
*
|
|
48837
|
-
* aria-activedescendant. The dialog keyboard bridge checks this
|
|
48838
|
-
* flag so that Enter selects the highlighted option instead of
|
|
48839
|
-
* activating the focused interactive element (e.g. the trigger
|
|
48840
|
-
* button, or the bibtemplate close button in fullscreen).
|
|
48911
|
+
* Tracks whether a menu option is currently highlighted.
|
|
48841
48912
|
* @private
|
|
48842
48913
|
*/
|
|
48843
48914
|
hasActiveDescendant: {
|
|
@@ -48911,7 +48982,7 @@ let AuroDropdownBib$1 = class AuroDropdownBib extends i$4 {
|
|
|
48911
48982
|
|
|
48912
48983
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
48913
48984
|
this._setupCancelHandler(dialog);
|
|
48914
|
-
|
|
48985
|
+
applyKeyboardStrategy$2(dialog, createDropdownBibKeyboardStrategy$1());
|
|
48915
48986
|
|
|
48916
48987
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
48917
48988
|
bubbles: true,
|
|
@@ -48938,92 +49009,6 @@ let AuroDropdownBib$1 = class AuroDropdownBib extends i$4 {
|
|
|
48938
49009
|
});
|
|
48939
49010
|
}
|
|
48940
49011
|
|
|
48941
|
-
/**
|
|
48942
|
-
* showModal() creates a closed focus scope — keyboard events inside
|
|
48943
|
-
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
48944
|
-
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
48945
|
-
* that gap by re-dispatching navigation keys so they cross the
|
|
48946
|
-
* shadow boundary and reach the menu navigation logic in the parent
|
|
48947
|
-
* component.
|
|
48948
|
-
*
|
|
48949
|
-
* The trade-off: intercepting these keys means native keyboard
|
|
48950
|
-
* behaviors that would normally "just work" must be manually
|
|
48951
|
-
* re-implemented here:
|
|
48952
|
-
*
|
|
48953
|
-
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
48954
|
-
* native Enter→click that <button> provides, so we call .click()
|
|
48955
|
-
* directly when Enter is pressed on a button-like element.
|
|
48956
|
-
*
|
|
48957
|
-
* - Tab: Intercepted and re-dispatched so parent components
|
|
48958
|
-
* (select/combobox) can select the active option and close the
|
|
48959
|
-
* dialog. The <dialog> provides containment and isolation
|
|
48960
|
-
* (inert background, VoiceOver focus trapping, top layer), while
|
|
48961
|
-
* the content inside is a role="listbox" navigated via
|
|
48962
|
-
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
48963
|
-
* behavior follows listbox conventions (select + close) because
|
|
48964
|
-
* the dialog's native Tab trap only cycles between the close
|
|
48965
|
-
* button and browser chrome.
|
|
48966
|
-
*
|
|
48967
|
-
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
48968
|
-
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
48969
|
-
* is a secondary path for parent components that also listen for
|
|
48970
|
-
* Escape keydown.
|
|
48971
|
-
*
|
|
48972
|
-
* @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
|
|
48973
|
-
* @private
|
|
48974
|
-
*/
|
|
48975
|
-
_setupKeyboardBridge(dialog) {
|
|
48976
|
-
const navKeys = new Set([
|
|
48977
|
-
'ArrowUp',
|
|
48978
|
-
'ArrowDown',
|
|
48979
|
-
'Enter',
|
|
48980
|
-
'Escape',
|
|
48981
|
-
'Tab'
|
|
48982
|
-
]);
|
|
48983
|
-
|
|
48984
|
-
dialog.addEventListener('keydown', (event) => {
|
|
48985
|
-
if (!navKeys.has(event.key)) {
|
|
48986
|
-
return;
|
|
48987
|
-
}
|
|
48988
|
-
|
|
48989
|
-
// Custom elements (auro-button) don't get the native Enter→click
|
|
48990
|
-
// behavior that <button> has. Find the button in the composed path
|
|
48991
|
-
// and click it directly — but only when no menu option is
|
|
48992
|
-
// highlighted. In fullscreen mode focus stays on the close button
|
|
48993
|
-
// while arrow keys move the active-descendant highlight through
|
|
48994
|
-
// the listbox. If the user presses Enter with an option
|
|
48995
|
-
// highlighted, the intent is to select that option, not to click
|
|
48996
|
-
// the close button. In that case we fall through and bridge the
|
|
48997
|
-
// Enter key to the parent component's keyboard strategy.
|
|
48998
|
-
if (event.key === 'Enter') {
|
|
48999
|
-
if (!this.hasActiveDescendant) {
|
|
49000
|
-
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
49001
|
-
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
49002
|
-
if (btn) {
|
|
49003
|
-
event.preventDefault();
|
|
49004
|
-
event.stopPropagation();
|
|
49005
|
-
btn.click();
|
|
49006
|
-
return;
|
|
49007
|
-
}
|
|
49008
|
-
}
|
|
49009
|
-
}
|
|
49010
|
-
|
|
49011
|
-
event.preventDefault();
|
|
49012
|
-
event.stopPropagation();
|
|
49013
|
-
const newEvent = new KeyboardEvent('keydown', {
|
|
49014
|
-
key: event.key,
|
|
49015
|
-
code: event.code,
|
|
49016
|
-
shiftKey: event.shiftKey,
|
|
49017
|
-
altKey: event.altKey,
|
|
49018
|
-
ctrlKey: event.ctrlKey,
|
|
49019
|
-
metaKey: event.metaKey,
|
|
49020
|
-
bubbles: true,
|
|
49021
|
-
composed: true,
|
|
49022
|
-
cancelable: true
|
|
49023
|
-
});
|
|
49024
|
-
this.dispatchEvent(newEvent);
|
|
49025
|
-
});
|
|
49026
|
-
}
|
|
49027
49012
|
|
|
49028
49013
|
/**
|
|
49029
49014
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -49398,7 +49383,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
49398
49383
|
}
|
|
49399
49384
|
};
|
|
49400
49385
|
|
|
49401
|
-
var formkitVersion$2 = '
|
|
49386
|
+
var formkitVersion$2 = '202604021512';
|
|
49402
49387
|
|
|
49403
49388
|
let AuroElement$2$1 = class AuroElement extends i$4 {
|
|
49404
49389
|
static get properties() {
|
|
@@ -49579,7 +49564,6 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
49579
49564
|
this.appearance = 'default';
|
|
49580
49565
|
this.chevron = false;
|
|
49581
49566
|
this.disabled = false;
|
|
49582
|
-
this.disableFocusTrap = false;
|
|
49583
49567
|
this.error = false;
|
|
49584
49568
|
this.tabIndex = 0;
|
|
49585
49569
|
this.noToggle = false;
|
|
@@ -49677,9 +49661,8 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
49677
49661
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
49678
49662
|
// falls outside the user activation window and causes iOS to
|
|
49679
49663
|
// dismiss the keyboard.
|
|
49680
|
-
if (this.
|
|
49681
|
-
|
|
49682
|
-
this.bibElement.value.open(useModal);
|
|
49664
|
+
if (this.bibElement && this.bibElement.value) {
|
|
49665
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
49683
49666
|
}
|
|
49684
49667
|
}
|
|
49685
49668
|
|
|
@@ -49792,14 +49775,6 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
49792
49775
|
reflect: true
|
|
49793
49776
|
},
|
|
49794
49777
|
|
|
49795
|
-
/**
|
|
49796
|
-
* If declared, the focus trap inside of bib will be turned off.
|
|
49797
|
-
*/
|
|
49798
|
-
disableFocusTrap: {
|
|
49799
|
-
type: Boolean,
|
|
49800
|
-
reflect: true
|
|
49801
|
-
},
|
|
49802
|
-
|
|
49803
49778
|
/**
|
|
49804
49779
|
* @private
|
|
49805
49780
|
*/
|
|
@@ -50073,7 +50048,7 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
50073
50048
|
if (this.isPopoverVisible) {
|
|
50074
50049
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
50075
50050
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
50076
|
-
const useModal = this.isBibFullscreen
|
|
50051
|
+
const useModal = this.isBibFullscreen;
|
|
50077
50052
|
this.bibElement.value.open(useModal);
|
|
50078
50053
|
} else {
|
|
50079
50054
|
this.bibElement.value.close();
|
|
@@ -50083,7 +50058,7 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
50083
50058
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
50084
50059
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
50085
50060
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
50086
|
-
const useModal = this.isBibFullscreen
|
|
50061
|
+
const useModal = this.isBibFullscreen;
|
|
50087
50062
|
this.bibElement.value.close();
|
|
50088
50063
|
this.bibElement.value.open(useModal);
|
|
50089
50064
|
}
|
|
@@ -50195,7 +50170,7 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
50195
50170
|
* @private
|
|
50196
50171
|
*/
|
|
50197
50172
|
updateFocusTrap() {
|
|
50198
|
-
if (this.isPopoverVisible
|
|
50173
|
+
if (this.isPopoverVisible) {
|
|
50199
50174
|
if (!this.isBibFullscreen) {
|
|
50200
50175
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
50201
50176
|
this.focusTrap = new FocusTrap$1(this.bibContent);
|
|
@@ -57155,7 +57130,7 @@ let AuroHelpText$1$1 = class AuroHelpText extends i$4 {
|
|
|
57155
57130
|
}
|
|
57156
57131
|
};
|
|
57157
57132
|
|
|
57158
|
-
var formkitVersion$1$1 = '
|
|
57133
|
+
var formkitVersion$1$1 = '202604021512';
|
|
57159
57134
|
|
|
57160
57135
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
57161
57136
|
// See LICENSE in the project root for license information.
|
|
@@ -58194,7 +58169,7 @@ let AuroBibtemplate$1 = class AuroBibtemplate extends i$4 {
|
|
|
58194
58169
|
}
|
|
58195
58170
|
};
|
|
58196
58171
|
|
|
58197
|
-
var formkitVersion$3 = '
|
|
58172
|
+
var formkitVersion$3 = '202604021512';
|
|
58198
58173
|
|
|
58199
58174
|
var styleCss$1$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
58200
58175
|
|
|
@@ -59688,7 +59663,7 @@ class AuroCombobox extends AuroElement$3 {
|
|
|
59688
59663
|
* @returns {void}
|
|
59689
59664
|
*/
|
|
59690
59665
|
configureCombobox() {
|
|
59691
|
-
applyKeyboardStrategy$1(this, comboboxKeyboardStrategy, {
|
|
59666
|
+
applyKeyboardStrategy$1$1(this, comboboxKeyboardStrategy, {
|
|
59692
59667
|
// In modal mode the input moves into the bib; route keyboard events to that element instead.
|
|
59693
59668
|
inputResolver: (comp, ctx) => (ctx.isModal && comp.inputInBib ? comp.inputInBib : comp.input),
|
|
59694
59669
|
});
|
|
@@ -60920,7 +60895,7 @@ class AuroMenuOption extends AuroElement$2 {
|
|
|
60920
60895
|
});
|
|
60921
60896
|
|
|
60922
60897
|
return u$c`
|
|
60923
|
-
<div class="${classes}">
|
|
60898
|
+
<div class="${classes}" aria-disabled="${this.disabled ? 'true' : 'false'}">
|
|
60924
60899
|
${this.selected && !this.noCheckmark
|
|
60925
60900
|
? this.generateIconHtml(checkmarkIcon.svg)
|
|
60926
60901
|
: undefined}
|
|
@@ -61691,10 +61666,10 @@ class AuroMenu extends AuroElement$2 {
|
|
|
61691
61666
|
|
|
61692
61667
|
// Event Bindings
|
|
61693
61668
|
|
|
61694
|
-
/**
|
|
61695
|
-
|
|
61696
|
-
|
|
61697
|
-
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
61669
|
+
// /**
|
|
61670
|
+
// * @private
|
|
61671
|
+
// */
|
|
61672
|
+
// this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
61698
61673
|
|
|
61699
61674
|
|
|
61700
61675
|
/**
|
|
@@ -62043,7 +62018,7 @@ class AuroMenu extends AuroElement$2 {
|
|
|
62043
62018
|
|
|
62044
62019
|
this.provideContext();
|
|
62045
62020
|
|
|
62046
|
-
this.addEventListener('keydown', this.handleKeyDown);
|
|
62021
|
+
// this.addEventListener('keydown', this.handleKeyDown);
|
|
62047
62022
|
this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
62048
62023
|
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
62049
62024
|
this.addEventListener('slotchange', this.handleSlotChange);
|
|
@@ -62051,7 +62026,7 @@ class AuroMenu extends AuroElement$2 {
|
|
|
62051
62026
|
}
|
|
62052
62027
|
|
|
62053
62028
|
disconnectedCallback() {
|
|
62054
|
-
this.removeEventListener('keydown', this.handleKeyDown);
|
|
62029
|
+
// this.removeEventListener('keydown', this.handleKeyDown);
|
|
62055
62030
|
this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
62056
62031
|
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
62057
62032
|
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
@@ -62192,26 +62167,33 @@ class AuroMenu extends AuroElement$2 {
|
|
|
62192
62167
|
|
|
62193
62168
|
// Event Handlers
|
|
62194
62169
|
|
|
62195
|
-
/**
|
|
62196
|
-
|
|
62197
|
-
|
|
62198
|
-
|
|
62199
|
-
|
|
62200
|
-
handleKeyDown(event) {
|
|
62201
|
-
|
|
62202
|
-
|
|
62203
|
-
|
|
62204
|
-
|
|
62205
|
-
|
|
62206
|
-
|
|
62207
|
-
|
|
62208
|
-
|
|
62209
|
-
|
|
62210
|
-
|
|
62211
|
-
|
|
62212
|
-
|
|
62213
|
-
|
|
62214
|
-
|
|
62170
|
+
// /**
|
|
62171
|
+
// * Handles keyboard navigation.
|
|
62172
|
+
// * @private
|
|
62173
|
+
// * @param {KeyboardEvent} event - Event object from the browser.
|
|
62174
|
+
// */
|
|
62175
|
+
// handleKeyDown(event) {
|
|
62176
|
+
// // Update to Chris keyboard handler
|
|
62177
|
+
// // We have a new "navigateArrow" function in that handler, maybe that replaces those keys here?
|
|
62178
|
+
// event.preventDefault();
|
|
62179
|
+
// switch (event.key) {
|
|
62180
|
+
// case "ArrowDown":
|
|
62181
|
+
// console.warn("ArrowDown key is pressed and heard from menu");
|
|
62182
|
+
// this.menuService.highlightNext();
|
|
62183
|
+
// break;
|
|
62184
|
+
// case "ArrowUp":
|
|
62185
|
+
// console.warn("ArrowUp key is pressed and heard from menu");
|
|
62186
|
+
// this.menuService.highlightPrevious();
|
|
62187
|
+
// break;
|
|
62188
|
+
// case "Tab":
|
|
62189
|
+
// case "Enter":
|
|
62190
|
+
// this.menuService.selectHighlightedOption();
|
|
62191
|
+
// // Does this need to get separated into two cases to handle the different expected behavior of tab vs enter?
|
|
62192
|
+
// break;
|
|
62193
|
+
// default:
|
|
62194
|
+
// break;
|
|
62195
|
+
// }
|
|
62196
|
+
// }
|
|
62215
62197
|
|
|
62216
62198
|
/**
|
|
62217
62199
|
* Navigates the menu options in the specified direction.
|
|
@@ -63515,7 +63497,7 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
|
|
|
63515
63497
|
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
63516
63498
|
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
63517
63499
|
*/
|
|
63518
|
-
function createDisplayContext(component, options = {}) {
|
|
63500
|
+
function createDisplayContext$1(component, options = {}) {
|
|
63519
63501
|
const dd = options.dropdown || component.dropdown;
|
|
63520
63502
|
// isPopoverVisible reflects as the `open` attribute.
|
|
63521
63503
|
// It reports whether the bib is open in any mode (popover or modal).
|
|
@@ -63545,11 +63527,11 @@ function createDisplayContext(component, options = {}) {
|
|
|
63545
63527
|
* @param {Object} strategy - Map of key names to handler functions.
|
|
63546
63528
|
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
63547
63529
|
*/
|
|
63548
|
-
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
63530
|
+
function applyKeyboardStrategy$1(component, strategy, options = {}) {
|
|
63549
63531
|
component.addEventListener('keydown', async (evt) => {
|
|
63550
63532
|
const handler = strategy[evt.key] || strategy.default;
|
|
63551
63533
|
if (typeof handler === 'function') {
|
|
63552
|
-
const ctx = createDisplayContext(component, options);
|
|
63534
|
+
const ctx = createDisplayContext$1(component, options);
|
|
63553
63535
|
await handler(component, evt, ctx);
|
|
63554
63536
|
}
|
|
63555
63537
|
});
|
|
@@ -63575,24 +63557,39 @@ function navigateArrow(component, direction, options = {}) {
|
|
|
63575
63557
|
|
|
63576
63558
|
const selectKeyboardStrategy = {
|
|
63577
63559
|
ArrowUp(component, evt, ctx) {
|
|
63560
|
+
// Navigate menu only if the bib is open, otherwise open the bib
|
|
63578
63561
|
evt.preventDefault();
|
|
63579
|
-
|
|
63580
|
-
|
|
63581
|
-
|
|
63582
|
-
|
|
63562
|
+
if (evt.altKey || evt.metaKey) ; else if (component.dropdown.isPopoverVisible) {
|
|
63563
|
+
navigateArrow(component, 'up', {
|
|
63564
|
+
ctx,
|
|
63565
|
+
showFn: () => component.dropdown.show(),
|
|
63566
|
+
});
|
|
63567
|
+
} else {
|
|
63568
|
+
component.dropdown.show();
|
|
63569
|
+
}
|
|
63583
63570
|
},
|
|
63584
63571
|
|
|
63585
63572
|
ArrowDown(component, evt, ctx) {
|
|
63573
|
+
// Navigate menu only if the bib is open, otherwise open the bib
|
|
63586
63574
|
evt.preventDefault();
|
|
63587
|
-
|
|
63588
|
-
|
|
63589
|
-
|
|
63590
|
-
|
|
63575
|
+
if (evt.altKey || evt.metaKey) ; else if (component.dropdown.isPopoverVisible) {
|
|
63576
|
+
navigateArrow(component, 'down', {
|
|
63577
|
+
ctx,
|
|
63578
|
+
showFn: () => component.dropdown.show(),
|
|
63579
|
+
});
|
|
63580
|
+
} else {
|
|
63581
|
+
component.dropdown.show();
|
|
63582
|
+
}
|
|
63591
63583
|
},
|
|
63592
63584
|
|
|
63593
|
-
Enter(component, evt) {
|
|
63594
|
-
|
|
63595
|
-
|
|
63585
|
+
Enter(component, evt, ctx) {
|
|
63586
|
+
if (!ctx.isExpanded && ctx.isPopover) {
|
|
63587
|
+
component.menu.makeSelection();
|
|
63588
|
+
} else if (ctx.isModal && !evt.defaultPrevented) {
|
|
63589
|
+
// for modal, isExpanded is always true
|
|
63590
|
+
// defaultPrevented will be true if Floating UI has already handled the event to open the dropdown
|
|
63591
|
+
component.menu.makeSelection();
|
|
63592
|
+
}
|
|
63596
63593
|
},
|
|
63597
63594
|
|
|
63598
63595
|
Tab(component, evt, ctx) {
|
|
@@ -63600,17 +63597,6 @@ const selectKeyboardStrategy = {
|
|
|
63600
63597
|
return;
|
|
63601
63598
|
}
|
|
63602
63599
|
|
|
63603
|
-
// Shift+Tab moves the highlight to the first non-disabled option
|
|
63604
|
-
// without making a selection or closing the bib.
|
|
63605
|
-
if (evt.shiftKey) {
|
|
63606
|
-
evt.preventDefault();
|
|
63607
|
-
const firstActive = component.menu.menuService.menuOptions.find((option) => option.isActive);
|
|
63608
|
-
if (firstActive) {
|
|
63609
|
-
component.menu.updateActiveOption(firstActive);
|
|
63610
|
-
}
|
|
63611
|
-
return;
|
|
63612
|
-
}
|
|
63613
|
-
|
|
63614
63600
|
// Tab selects the focused option and closes the popup per the
|
|
63615
63601
|
// WAI-ARIA APG select-only combobox / listbox pattern.
|
|
63616
63602
|
if (component.optionActive && !component.multiSelect) {
|
|
@@ -63618,6 +63604,23 @@ const selectKeyboardStrategy = {
|
|
|
63618
63604
|
}
|
|
63619
63605
|
component.dropdown.hide();
|
|
63620
63606
|
},
|
|
63607
|
+
Home(component, evt) {
|
|
63608
|
+
evt.preventDefault();
|
|
63609
|
+
evt.stopPropagation();
|
|
63610
|
+
const firstOption = component.menu.menuService.menuOptions.find((option) => !option.disabled);
|
|
63611
|
+
if (firstOption) {
|
|
63612
|
+
component.menu.updateActiveOption(firstOption);
|
|
63613
|
+
}
|
|
63614
|
+
},
|
|
63615
|
+
|
|
63616
|
+
End(component, evt) {
|
|
63617
|
+
evt.preventDefault();
|
|
63618
|
+
evt.stopPropagation();
|
|
63619
|
+
const lastOption = [...component.menu.menuService.menuOptions].reverse().find((option) => !option.disabled);
|
|
63620
|
+
if (lastOption) {
|
|
63621
|
+
component.menu.updateActiveOption(lastOption);
|
|
63622
|
+
}
|
|
63623
|
+
},
|
|
63621
63624
|
|
|
63622
63625
|
default(component, evt) {
|
|
63623
63626
|
component.updateActiveOptionBasedOnKey(evt.key);
|
|
@@ -65713,11 +65716,10 @@ class AuroFloatingUI {
|
|
|
65713
65716
|
return;
|
|
65714
65717
|
}
|
|
65715
65718
|
|
|
65716
|
-
const { activeElement } = document;
|
|
65717
65719
|
// if focus is still inside of trigger or bib, do not close
|
|
65718
65720
|
if (
|
|
65719
|
-
this.element.
|
|
65720
|
-
this.element.
|
|
65721
|
+
this.element.matches(":focus") ||
|
|
65722
|
+
this.element.matches(":focus-within")
|
|
65721
65723
|
) {
|
|
65722
65724
|
return;
|
|
65723
65725
|
}
|
|
@@ -66556,12 +66558,83 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
66556
66558
|
|
|
66557
66559
|
var iconVersion$1 = '9.1.2';
|
|
66558
66560
|
|
|
66561
|
+
/**
|
|
66562
|
+
* Computes display state once per keydown event.
|
|
66563
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
66564
|
+
*
|
|
66565
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
66566
|
+
* @param {Object} [options] - Optional config.
|
|
66567
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
66568
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
66569
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
66570
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
66571
|
+
*/
|
|
66572
|
+
function createDisplayContext(component, options = {}) {
|
|
66573
|
+
const dd = options.dropdown || component.dropdown;
|
|
66574
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
66575
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
66576
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
66577
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
66578
|
+
|
|
66579
|
+
const ctx = {
|
|
66580
|
+
isExpanded,
|
|
66581
|
+
isModal: isFullscreen,
|
|
66582
|
+
isPopover: !isFullscreen,
|
|
66583
|
+
activeInput: null,
|
|
66584
|
+
};
|
|
66585
|
+
|
|
66586
|
+
if (options.inputResolver) {
|
|
66587
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
66588
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
66589
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
66590
|
+
}
|
|
66591
|
+
|
|
66592
|
+
return ctx;
|
|
66593
|
+
}
|
|
66594
|
+
|
|
66595
|
+
/**
|
|
66596
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
66597
|
+
* Handles both sync and async handlers.
|
|
66598
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
66599
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
66600
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
66601
|
+
*/
|
|
66602
|
+
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
66603
|
+
component.addEventListener('keydown', async (evt) => {
|
|
66604
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
66605
|
+
if (typeof handler === 'function') {
|
|
66606
|
+
const ctx = createDisplayContext(component, options);
|
|
66607
|
+
await handler(component, evt, ctx);
|
|
66608
|
+
}
|
|
66609
|
+
});
|
|
66610
|
+
}
|
|
66611
|
+
|
|
66559
66612
|
var styleCss$2$1 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
|
|
66560
66613
|
|
|
66561
66614
|
var colorCss$2 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
66562
66615
|
|
|
66563
66616
|
var tokensCss$1 = i$7`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
|
|
66564
66617
|
|
|
66618
|
+
/**
|
|
66619
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
66620
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
66621
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
66622
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
66623
|
+
*/
|
|
66624
|
+
// eslint-disable-next-line no-unused-vars
|
|
66625
|
+
function createDropdownBibKeyboardStrategy(bib) {
|
|
66626
|
+
return {
|
|
66627
|
+
// eslint-disable-next-line no-unused-vars
|
|
66628
|
+
Enter(_dialog, event) {
|
|
66629
|
+
// Floating UI handles Enter key to open the dropdown
|
|
66630
|
+
},
|
|
66631
|
+
// eslint-disable-next-line no-unused-vars
|
|
66632
|
+
Escape(_dialog, event) {
|
|
66633
|
+
// Floating UI handles Escape key to close the dropdown
|
|
66634
|
+
}
|
|
66635
|
+
};
|
|
66636
|
+
}
|
|
66637
|
+
|
|
66565
66638
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
66566
66639
|
// See LICENSE in the project root for license information.
|
|
66567
66640
|
/* eslint-disable max-lines */
|
|
@@ -66686,11 +66759,7 @@ class AuroDropdownBib extends i$4 {
|
|
|
66686
66759
|
},
|
|
66687
66760
|
|
|
66688
66761
|
/**
|
|
66689
|
-
*
|
|
66690
|
-
* aria-activedescendant. The dialog keyboard bridge checks this
|
|
66691
|
-
* flag so that Enter selects the highlighted option instead of
|
|
66692
|
-
* activating the focused interactive element (e.g. the trigger
|
|
66693
|
-
* button, or the bibtemplate close button in fullscreen).
|
|
66762
|
+
* Tracks whether a menu option is currently highlighted.
|
|
66694
66763
|
* @private
|
|
66695
66764
|
*/
|
|
66696
66765
|
hasActiveDescendant: {
|
|
@@ -66764,7 +66833,7 @@ class AuroDropdownBib extends i$4 {
|
|
|
66764
66833
|
|
|
66765
66834
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
66766
66835
|
this._setupCancelHandler(dialog);
|
|
66767
|
-
|
|
66836
|
+
applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
|
|
66768
66837
|
|
|
66769
66838
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
66770
66839
|
bubbles: true,
|
|
@@ -66791,92 +66860,6 @@ class AuroDropdownBib extends i$4 {
|
|
|
66791
66860
|
});
|
|
66792
66861
|
}
|
|
66793
66862
|
|
|
66794
|
-
/**
|
|
66795
|
-
* showModal() creates a closed focus scope — keyboard events inside
|
|
66796
|
-
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
66797
|
-
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
66798
|
-
* that gap by re-dispatching navigation keys so they cross the
|
|
66799
|
-
* shadow boundary and reach the menu navigation logic in the parent
|
|
66800
|
-
* component.
|
|
66801
|
-
*
|
|
66802
|
-
* The trade-off: intercepting these keys means native keyboard
|
|
66803
|
-
* behaviors that would normally "just work" must be manually
|
|
66804
|
-
* re-implemented here:
|
|
66805
|
-
*
|
|
66806
|
-
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
66807
|
-
* native Enter→click that <button> provides, so we call .click()
|
|
66808
|
-
* directly when Enter is pressed on a button-like element.
|
|
66809
|
-
*
|
|
66810
|
-
* - Tab: Intercepted and re-dispatched so parent components
|
|
66811
|
-
* (select/combobox) can select the active option and close the
|
|
66812
|
-
* dialog. The <dialog> provides containment and isolation
|
|
66813
|
-
* (inert background, VoiceOver focus trapping, top layer), while
|
|
66814
|
-
* the content inside is a role="listbox" navigated via
|
|
66815
|
-
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
66816
|
-
* behavior follows listbox conventions (select + close) because
|
|
66817
|
-
* the dialog's native Tab trap only cycles between the close
|
|
66818
|
-
* button and browser chrome.
|
|
66819
|
-
*
|
|
66820
|
-
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
66821
|
-
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
66822
|
-
* is a secondary path for parent components that also listen for
|
|
66823
|
-
* Escape keydown.
|
|
66824
|
-
*
|
|
66825
|
-
* @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
|
|
66826
|
-
* @private
|
|
66827
|
-
*/
|
|
66828
|
-
_setupKeyboardBridge(dialog) {
|
|
66829
|
-
const navKeys = new Set([
|
|
66830
|
-
'ArrowUp',
|
|
66831
|
-
'ArrowDown',
|
|
66832
|
-
'Enter',
|
|
66833
|
-
'Escape',
|
|
66834
|
-
'Tab'
|
|
66835
|
-
]);
|
|
66836
|
-
|
|
66837
|
-
dialog.addEventListener('keydown', (event) => {
|
|
66838
|
-
if (!navKeys.has(event.key)) {
|
|
66839
|
-
return;
|
|
66840
|
-
}
|
|
66841
|
-
|
|
66842
|
-
// Custom elements (auro-button) don't get the native Enter→click
|
|
66843
|
-
// behavior that <button> has. Find the button in the composed path
|
|
66844
|
-
// and click it directly — but only when no menu option is
|
|
66845
|
-
// highlighted. In fullscreen mode focus stays on the close button
|
|
66846
|
-
// while arrow keys move the active-descendant highlight through
|
|
66847
|
-
// the listbox. If the user presses Enter with an option
|
|
66848
|
-
// highlighted, the intent is to select that option, not to click
|
|
66849
|
-
// the close button. In that case we fall through and bridge the
|
|
66850
|
-
// Enter key to the parent component's keyboard strategy.
|
|
66851
|
-
if (event.key === 'Enter') {
|
|
66852
|
-
if (!this.hasActiveDescendant) {
|
|
66853
|
-
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
66854
|
-
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
66855
|
-
if (btn) {
|
|
66856
|
-
event.preventDefault();
|
|
66857
|
-
event.stopPropagation();
|
|
66858
|
-
btn.click();
|
|
66859
|
-
return;
|
|
66860
|
-
}
|
|
66861
|
-
}
|
|
66862
|
-
}
|
|
66863
|
-
|
|
66864
|
-
event.preventDefault();
|
|
66865
|
-
event.stopPropagation();
|
|
66866
|
-
const newEvent = new KeyboardEvent('keydown', {
|
|
66867
|
-
key: event.key,
|
|
66868
|
-
code: event.code,
|
|
66869
|
-
shiftKey: event.shiftKey,
|
|
66870
|
-
altKey: event.altKey,
|
|
66871
|
-
ctrlKey: event.ctrlKey,
|
|
66872
|
-
metaKey: event.metaKey,
|
|
66873
|
-
bubbles: true,
|
|
66874
|
-
composed: true,
|
|
66875
|
-
cancelable: true
|
|
66876
|
-
});
|
|
66877
|
-
this.dispatchEvent(newEvent);
|
|
66878
|
-
});
|
|
66879
|
-
}
|
|
66880
66863
|
|
|
66881
66864
|
/**
|
|
66882
66865
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -67251,7 +67234,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
67251
67234
|
}
|
|
67252
67235
|
};
|
|
67253
67236
|
|
|
67254
|
-
var formkitVersion$1 = '
|
|
67237
|
+
var formkitVersion$1 = '202604021512';
|
|
67255
67238
|
|
|
67256
67239
|
class AuroElement extends i$4 {
|
|
67257
67240
|
static get properties() {
|
|
@@ -67432,7 +67415,6 @@ class AuroDropdown extends AuroElement {
|
|
|
67432
67415
|
this.appearance = 'default';
|
|
67433
67416
|
this.chevron = false;
|
|
67434
67417
|
this.disabled = false;
|
|
67435
|
-
this.disableFocusTrap = false;
|
|
67436
67418
|
this.error = false;
|
|
67437
67419
|
this.tabIndex = 0;
|
|
67438
67420
|
this.noToggle = false;
|
|
@@ -67530,9 +67512,8 @@ class AuroDropdown extends AuroElement {
|
|
|
67530
67512
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
67531
67513
|
// falls outside the user activation window and causes iOS to
|
|
67532
67514
|
// dismiss the keyboard.
|
|
67533
|
-
if (this.
|
|
67534
|
-
|
|
67535
|
-
this.bibElement.value.open(useModal);
|
|
67515
|
+
if (this.bibElement && this.bibElement.value) {
|
|
67516
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
67536
67517
|
}
|
|
67537
67518
|
}
|
|
67538
67519
|
|
|
@@ -67645,14 +67626,6 @@ class AuroDropdown extends AuroElement {
|
|
|
67645
67626
|
reflect: true
|
|
67646
67627
|
},
|
|
67647
67628
|
|
|
67648
|
-
/**
|
|
67649
|
-
* If declared, the focus trap inside of bib will be turned off.
|
|
67650
|
-
*/
|
|
67651
|
-
disableFocusTrap: {
|
|
67652
|
-
type: Boolean,
|
|
67653
|
-
reflect: true
|
|
67654
|
-
},
|
|
67655
|
-
|
|
67656
67629
|
/**
|
|
67657
67630
|
* @private
|
|
67658
67631
|
*/
|
|
@@ -67926,7 +67899,7 @@ class AuroDropdown extends AuroElement {
|
|
|
67926
67899
|
if (this.isPopoverVisible) {
|
|
67927
67900
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
67928
67901
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
67929
|
-
const useModal = this.isBibFullscreen
|
|
67902
|
+
const useModal = this.isBibFullscreen;
|
|
67930
67903
|
this.bibElement.value.open(useModal);
|
|
67931
67904
|
} else {
|
|
67932
67905
|
this.bibElement.value.close();
|
|
@@ -67936,7 +67909,7 @@ class AuroDropdown extends AuroElement {
|
|
|
67936
67909
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
67937
67910
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
67938
67911
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
67939
|
-
const useModal = this.isBibFullscreen
|
|
67912
|
+
const useModal = this.isBibFullscreen;
|
|
67940
67913
|
this.bibElement.value.close();
|
|
67941
67914
|
this.bibElement.value.open(useModal);
|
|
67942
67915
|
}
|
|
@@ -68048,7 +68021,7 @@ class AuroDropdown extends AuroElement {
|
|
|
68048
68021
|
* @private
|
|
68049
68022
|
*/
|
|
68050
68023
|
updateFocusTrap() {
|
|
68051
|
-
if (this.isPopoverVisible
|
|
68024
|
+
if (this.isPopoverVisible) {
|
|
68052
68025
|
if (!this.isBibFullscreen) {
|
|
68053
68026
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
68054
68027
|
this.focusTrap = new FocusTrap(this.bibContent);
|
|
@@ -69004,7 +68977,7 @@ class AuroHelpText extends i$4 {
|
|
|
69004
68977
|
}
|
|
69005
68978
|
}
|
|
69006
68979
|
|
|
69007
|
-
var formkitVersion = '
|
|
68980
|
+
var formkitVersion = '202604021512';
|
|
69008
68981
|
|
|
69009
68982
|
var styleCss = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.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, 0.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, 0.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, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
69010
68983
|
|
|
@@ -69526,7 +69499,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
69526
69499
|
|
|
69527
69500
|
// Prevent dropdown from closing on focus loss since menu content is slotted
|
|
69528
69501
|
// from select's light DOM and won't be detected by dropdown's contains() check.
|
|
69529
|
-
// Select handles Tab key closing explicitly,
|
|
69502
|
+
// Select handles Tab key closing explicitly, `Escape` key via dialog cancel, and
|
|
69530
69503
|
// click outside works correctly via composedPath().
|
|
69531
69504
|
this.dropdown.noHideOnThisFocusLoss = true;
|
|
69532
69505
|
|
|
@@ -69539,12 +69512,28 @@ class AuroSelect extends AuroElement$1 {
|
|
|
69539
69512
|
this.dropdown.setActiveDescendant(null);
|
|
69540
69513
|
this.optionActive = null;
|
|
69541
69514
|
|
|
69542
|
-
|
|
69515
|
+
if (this.dropdown.isBibFullscreen) {
|
|
69516
|
+
restoreTriggerAfterClose(this.dropdown, this.dropdown.trigger);
|
|
69517
|
+
}
|
|
69543
69518
|
}
|
|
69544
69519
|
|
|
69545
69520
|
if (this.dropdown.isPopoverVisible) {
|
|
69546
69521
|
this.updateMenuShapeSize();
|
|
69547
69522
|
|
|
69523
|
+
// If there's a selected option, highlight it (per W3C APG combobox-select-only pattern)
|
|
69524
|
+
// No selection → first enabled option gets highlighted
|
|
69525
|
+
if (this.optionSelected && !Array.isArray(this.optionSelected)) {
|
|
69526
|
+
this.menu.updateActiveOption(this.optionSelected);
|
|
69527
|
+
} else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
|
|
69528
|
+
this.menu.updateActiveOption(this.optionSelected[0]);
|
|
69529
|
+
} else if (!this.menu.optionActive) {
|
|
69530
|
+
// If no activeOption has yet to be set, then make the first enabled option active by default
|
|
69531
|
+
const firstActive = this.menu.menuService.menuOptions.find((option) => !option.disabled);
|
|
69532
|
+
this.menu.updateActiveOption(firstActive);
|
|
69533
|
+
}
|
|
69534
|
+
|
|
69535
|
+
// Scroll the selected option into view when dropdown opens
|
|
69536
|
+
this.scrollSelectedOptionIntoView();
|
|
69548
69537
|
if (this.dropdown.isBibFullscreen) {
|
|
69549
69538
|
// Hide the trigger from assistive technology so VoiceOver cannot reach it
|
|
69550
69539
|
// behind the fullscreen dialog
|
|
@@ -69556,17 +69545,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
69556
69545
|
// multiple Lit update cycles before moving focus into the bib
|
|
69557
69546
|
doubleRaf(() => {
|
|
69558
69547
|
this.bibtemplate.focusCloseButton();
|
|
69559
|
-
|
|
69560
|
-
// If there's a selected option, highlight it (per W3C APG combobox-select-only pattern)
|
|
69561
|
-
// No selection → no highlight
|
|
69562
|
-
if (this.optionSelected && !Array.isArray(this.optionSelected)) {
|
|
69563
|
-
this.menu.updateActiveOption(this.optionSelected);
|
|
69564
|
-
} else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
|
|
69565
|
-
this.menu.updateActiveOption(this.optionSelected[0]);
|
|
69566
|
-
}
|
|
69567
|
-
|
|
69568
|
-
// Scroll the selected option into view when dropdown opens
|
|
69569
|
-
this.scrollSelectedOptionIntoView();
|
|
69570
69548
|
});
|
|
69571
69549
|
} else {
|
|
69572
69550
|
// wait til the bib gets fully rendered
|
|
@@ -69813,7 +69791,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
69813
69791
|
configureSelect() {
|
|
69814
69792
|
this.nativeSelect = this.shadowRoot.querySelector('select');
|
|
69815
69793
|
|
|
69816
|
-
applyKeyboardStrategy(this, selectKeyboardStrategy);
|
|
69794
|
+
applyKeyboardStrategy$1(this, selectKeyboardStrategy);
|
|
69817
69795
|
|
|
69818
69796
|
this.addEventListener('focusin', this.handleFocusin);
|
|
69819
69797
|
|