@aurodesignsystem-dev/auro-formkit 0.0.0-pr1408.14 → 0.0.0-pr1408.16
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 +139 -142
- package/components/combobox/demo/index.min.js +139 -142
- package/components/combobox/demo/keyboardBehavior.md +1 -2
- package/components/combobox/dist/index.js +105 -115
- package/components/combobox/dist/registered.js +105 -115
- package/components/counter/demo/api.md +1 -1
- package/components/counter/demo/api.min.js +202 -146
- package/components/counter/demo/index.min.js +202 -146
- package/components/counter/dist/auro-counter.d.ts +11 -8
- package/components/counter/dist/index.js +202 -146
- package/components/counter/dist/keyboardStrategy.d.ts +4 -0
- package/components/counter/dist/registered.js +202 -146
- package/components/datepicker/demo/api.min.js +107 -118
- package/components/datepicker/demo/index.min.js +107 -118
- package/components/datepicker/dist/index.js +102 -113
- package/components/datepicker/dist/registered.js +102 -113
- package/components/dropdown/demo/api.md +29 -29
- package/components/dropdown/demo/api.min.js +117 -121
- package/components/dropdown/demo/index.min.js +117 -121
- package/components/dropdown/dist/auro-dropdown.d.ts +3 -3
- 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 +101 -109
- package/components/dropdown/dist/registered.js +101 -109
- package/components/form/demo/api.min.js +629 -544
- package/components/form/demo/index.min.js +629 -544
- 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 +214 -164
- package/components/select/demo/index.min.js +214 -164
- package/components/select/demo/keyboardBehavior.md +3 -3
- package/components/select/dist/index.js +180 -137
- package/components/select/dist/registered.js +180 -137
- package/components/select/dist/selectKeyboardStrategy.d.ts +5 -2
- package/custom-elements.json +1518 -1481
- package/package.json +8 -6
|
@@ -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 = '202604022013';
|
|
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 = '202604022013';
|
|
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}}
|
|
@@ -19631,6 +19631,11 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
|
|
|
19631
19631
|
this.clickHandler = null;
|
|
19632
19632
|
this.keyDownHandler = null;
|
|
19633
19633
|
|
|
19634
|
+
/**
|
|
19635
|
+
* @private
|
|
19636
|
+
*/
|
|
19637
|
+
this.enableKeyboardHandling = true;
|
|
19638
|
+
|
|
19634
19639
|
/**
|
|
19635
19640
|
* @private
|
|
19636
19641
|
*/
|
|
@@ -19891,11 +19896,10 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
|
|
|
19891
19896
|
return;
|
|
19892
19897
|
}
|
|
19893
19898
|
|
|
19894
|
-
const { activeElement } = document;
|
|
19895
19899
|
// if focus is still inside of trigger or bib, do not close
|
|
19896
19900
|
if (
|
|
19897
|
-
this.element.
|
|
19898
|
-
this.element.
|
|
19901
|
+
this.element.matches(":focus") ||
|
|
19902
|
+
this.element.matches(":focus-within")
|
|
19899
19903
|
) {
|
|
19900
19904
|
return;
|
|
19901
19905
|
}
|
|
@@ -19966,7 +19970,9 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
|
|
|
19966
19970
|
document.addEventListener("focusin", this.focusHandler);
|
|
19967
19971
|
}
|
|
19968
19972
|
|
|
19969
|
-
|
|
19973
|
+
if (this.enableKeyboardHandling) {
|
|
19974
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
19975
|
+
}
|
|
19970
19976
|
|
|
19971
19977
|
// send this task to the end of queue to prevent conflicting
|
|
19972
19978
|
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
@@ -20222,8 +20228,9 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
|
|
|
20222
20228
|
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
20223
20229
|
}
|
|
20224
20230
|
|
|
20225
|
-
configure(elem, eventPrefix) {
|
|
20231
|
+
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
20226
20232
|
AuroFloatingUI.setupMousePressChecker();
|
|
20233
|
+
this.enableKeyboardHandling = enableKeyboardHandling;
|
|
20227
20234
|
|
|
20228
20235
|
this.eventPrefix = eventPrefix;
|
|
20229
20236
|
if (this.element !== elem) {
|
|
@@ -20256,7 +20263,9 @@ let AuroFloatingUI$3 = class AuroFloatingUI {
|
|
|
20256
20263
|
|
|
20257
20264
|
this.handleEvent = this.handleEvent.bind(this);
|
|
20258
20265
|
if (this.element.trigger) {
|
|
20259
|
-
|
|
20266
|
+
if (this.enableKeyboardHandling) {
|
|
20267
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
20268
|
+
}
|
|
20260
20269
|
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
20261
20270
|
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
20262
20271
|
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
@@ -20734,12 +20743,83 @@ let p$3$3 = class p{registerComponent(t,a){customElements.get(t)||customElements
|
|
|
20734
20743
|
|
|
20735
20744
|
var iconVersion$2$3 = '9.1.2';
|
|
20736
20745
|
|
|
20746
|
+
/**
|
|
20747
|
+
* Computes display state once per keydown event.
|
|
20748
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
20749
|
+
*
|
|
20750
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
20751
|
+
* @param {Object} [options] - Optional config.
|
|
20752
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
20753
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
20754
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
20755
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
20756
|
+
*/
|
|
20757
|
+
function createDisplayContext$1$3(component, options = {}) {
|
|
20758
|
+
const dd = options.dropdown || component.dropdown;
|
|
20759
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
20760
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
20761
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
20762
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
20763
|
+
|
|
20764
|
+
const ctx = {
|
|
20765
|
+
isExpanded,
|
|
20766
|
+
isModal: isFullscreen,
|
|
20767
|
+
isPopover: !isFullscreen,
|
|
20768
|
+
activeInput: null,
|
|
20769
|
+
};
|
|
20770
|
+
|
|
20771
|
+
if (options.inputResolver) {
|
|
20772
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
20773
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
20774
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
20775
|
+
}
|
|
20776
|
+
|
|
20777
|
+
return ctx;
|
|
20778
|
+
}
|
|
20779
|
+
|
|
20780
|
+
/**
|
|
20781
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
20782
|
+
* Handles both sync and async handlers.
|
|
20783
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
20784
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
20785
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
20786
|
+
*/
|
|
20787
|
+
function applyKeyboardStrategy$1$3(component, strategy, options = {}) {
|
|
20788
|
+
component.addEventListener('keydown', async (evt) => {
|
|
20789
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
20790
|
+
if (typeof handler === 'function') {
|
|
20791
|
+
const ctx = createDisplayContext$1$3(component, options);
|
|
20792
|
+
await handler(component, evt, ctx);
|
|
20793
|
+
}
|
|
20794
|
+
});
|
|
20795
|
+
}
|
|
20796
|
+
|
|
20737
20797
|
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
20798
|
|
|
20739
20799
|
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
20800
|
|
|
20741
20801
|
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
20802
|
|
|
20803
|
+
/**
|
|
20804
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
20805
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
20806
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
20807
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
20808
|
+
*/
|
|
20809
|
+
// eslint-disable-next-line no-unused-vars
|
|
20810
|
+
function createDropdownBibKeyboardStrategy$3(bib) {
|
|
20811
|
+
return {
|
|
20812
|
+
// eslint-disable-next-line no-unused-vars
|
|
20813
|
+
Enter(_dialog, event) {
|
|
20814
|
+
// Floating UI handles Enter key to open the dropdown
|
|
20815
|
+
},
|
|
20816
|
+
// eslint-disable-next-line no-unused-vars
|
|
20817
|
+
Escape(_dialog, event) {
|
|
20818
|
+
// Floating UI handles Escape key to close the dropdown
|
|
20819
|
+
}
|
|
20820
|
+
};
|
|
20821
|
+
}
|
|
20822
|
+
|
|
20743
20823
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
20744
20824
|
// See LICENSE in the project root for license information.
|
|
20745
20825
|
/* eslint-disable max-lines */
|
|
@@ -20864,11 +20944,7 @@ let AuroDropdownBib$3 = class AuroDropdownBib extends i$4 {
|
|
|
20864
20944
|
},
|
|
20865
20945
|
|
|
20866
20946
|
/**
|
|
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).
|
|
20947
|
+
* Tracks whether a menu option is currently highlighted.
|
|
20872
20948
|
* @private
|
|
20873
20949
|
*/
|
|
20874
20950
|
hasActiveDescendant: {
|
|
@@ -20942,7 +21018,7 @@ let AuroDropdownBib$3 = class AuroDropdownBib extends i$4 {
|
|
|
20942
21018
|
|
|
20943
21019
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
20944
21020
|
this._setupCancelHandler(dialog);
|
|
20945
|
-
|
|
21021
|
+
applyKeyboardStrategy$1$3(dialog, createDropdownBibKeyboardStrategy$3());
|
|
20946
21022
|
|
|
20947
21023
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
20948
21024
|
bubbles: true,
|
|
@@ -20969,92 +21045,6 @@ let AuroDropdownBib$3 = class AuroDropdownBib extends i$4 {
|
|
|
20969
21045
|
});
|
|
20970
21046
|
}
|
|
20971
21047
|
|
|
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
21048
|
|
|
21059
21049
|
/**
|
|
21060
21050
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -21429,7 +21419,7 @@ let AuroHelpText$2$1 = class AuroHelpText extends i$4 {
|
|
|
21429
21419
|
}
|
|
21430
21420
|
};
|
|
21431
21421
|
|
|
21432
|
-
var formkitVersion$1$3 = '
|
|
21422
|
+
var formkitVersion$1$3 = '202604022013';
|
|
21433
21423
|
|
|
21434
21424
|
let AuroElement$2$2 = class AuroElement extends i$4 {
|
|
21435
21425
|
static get properties() {
|
|
@@ -21610,7 +21600,7 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
21610
21600
|
this.appearance = 'default';
|
|
21611
21601
|
this.chevron = false;
|
|
21612
21602
|
this.disabled = false;
|
|
21613
|
-
this.
|
|
21603
|
+
this.disableKeyboardHandling = false;
|
|
21614
21604
|
this.error = false;
|
|
21615
21605
|
this.tabIndex = 0;
|
|
21616
21606
|
this.noToggle = false;
|
|
@@ -21708,9 +21698,8 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
21708
21698
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
21709
21699
|
// falls outside the user activation window and causes iOS to
|
|
21710
21700
|
// dismiss the keyboard.
|
|
21711
|
-
if (this.
|
|
21712
|
-
|
|
21713
|
-
this.bibElement.value.open(useModal);
|
|
21701
|
+
if (this.bibElement && this.bibElement.value) {
|
|
21702
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
21714
21703
|
}
|
|
21715
21704
|
}
|
|
21716
21705
|
|
|
@@ -21824,9 +21813,9 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
21824
21813
|
},
|
|
21825
21814
|
|
|
21826
21815
|
/**
|
|
21827
|
-
* If declared, the
|
|
21816
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
21828
21817
|
*/
|
|
21829
|
-
|
|
21818
|
+
disableKeyboardHandling: {
|
|
21830
21819
|
type: Boolean,
|
|
21831
21820
|
reflect: true
|
|
21832
21821
|
},
|
|
@@ -22104,7 +22093,7 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
22104
22093
|
if (this.isPopoverVisible) {
|
|
22105
22094
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
22106
22095
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
22107
|
-
const useModal = this.isBibFullscreen
|
|
22096
|
+
const useModal = this.isBibFullscreen;
|
|
22108
22097
|
this.bibElement.value.open(useModal);
|
|
22109
22098
|
} else {
|
|
22110
22099
|
this.bibElement.value.close();
|
|
@@ -22114,7 +22103,7 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
22114
22103
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
22115
22104
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
22116
22105
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
22117
|
-
const useModal = this.isBibFullscreen
|
|
22106
|
+
const useModal = this.isBibFullscreen;
|
|
22118
22107
|
this.bibElement.value.close();
|
|
22119
22108
|
this.bibElement.value.open(useModal);
|
|
22120
22109
|
}
|
|
@@ -22136,7 +22125,7 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
22136
22125
|
|
|
22137
22126
|
firstUpdated() {
|
|
22138
22127
|
// Configure the floater to, this will generate the ID for the bib
|
|
22139
|
-
this.floater.configure(this, 'auroDropdown');
|
|
22128
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
22140
22129
|
|
|
22141
22130
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
22142
22131
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -22226,7 +22215,7 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
22226
22215
|
* @private
|
|
22227
22216
|
*/
|
|
22228
22217
|
updateFocusTrap() {
|
|
22229
|
-
if (this.isPopoverVisible
|
|
22218
|
+
if (this.isPopoverVisible) {
|
|
22230
22219
|
if (!this.isBibFullscreen) {
|
|
22231
22220
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
22232
22221
|
this.focusTrap = new FocusTrap$3(this.bibContent);
|
|
@@ -22444,6 +22433,7 @@ let AuroDropdown$3 = class AuroDropdown extends AuroElement$2$2 {
|
|
|
22444
22433
|
aria-expanded="${o$4(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
22445
22434
|
aria-controls="${o$4(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
22446
22435
|
aria-labelledby="${o$4(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
22436
|
+
aria-disabled="${o$4(this.disabled ? 'true' : undefined)}"
|
|
22447
22437
|
@focusin="${this.handleFocusin}"
|
|
22448
22438
|
@blur="${this.handleFocusOut}">
|
|
22449
22439
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -29186,7 +29176,7 @@ let AuroHelpText$1$3 = class AuroHelpText extends i$4 {
|
|
|
29186
29176
|
}
|
|
29187
29177
|
};
|
|
29188
29178
|
|
|
29189
|
-
var formkitVersion$7 = '
|
|
29179
|
+
var formkitVersion$7 = '202604022013';
|
|
29190
29180
|
|
|
29191
29181
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
29192
29182
|
// See LICENSE in the project root for license information.
|
|
@@ -30392,7 +30382,7 @@ function restoreTriggerAfterClose$2(dropdown, focusTarget) {
|
|
|
30392
30382
|
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
30393
30383
|
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
30394
30384
|
*/
|
|
30395
|
-
function createDisplayContext$
|
|
30385
|
+
function createDisplayContext$4(component, options = {}) {
|
|
30396
30386
|
const dd = options.dropdown || component.dropdown;
|
|
30397
30387
|
// isPopoverVisible reflects as the `open` attribute.
|
|
30398
30388
|
// It reports whether the bib is open in any mode (popover or modal).
|
|
@@ -30422,11 +30412,11 @@ function createDisplayContext$2(component, options = {}) {
|
|
|
30422
30412
|
* @param {Object} strategy - Map of key names to handler functions.
|
|
30423
30413
|
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
30424
30414
|
*/
|
|
30425
|
-
function applyKeyboardStrategy$
|
|
30415
|
+
function applyKeyboardStrategy$4(component, strategy, options = {}) {
|
|
30426
30416
|
component.addEventListener('keydown', async (evt) => {
|
|
30427
30417
|
const handler = strategy[evt.key] || strategy.default;
|
|
30428
30418
|
if (typeof handler === 'function') {
|
|
30429
|
-
const ctx = createDisplayContext$
|
|
30419
|
+
const ctx = createDisplayContext$4(component, options);
|
|
30430
30420
|
await handler(component, evt, ctx);
|
|
30431
30421
|
}
|
|
30432
30422
|
});
|
|
@@ -31264,7 +31254,7 @@ class AuroDatePicker extends AuroElement$5 {
|
|
|
31264
31254
|
// The dialog event bridge intercepts Tab and re-dispatches it as a
|
|
31265
31255
|
// composed keydown; this listener catches the re-dispatched event.
|
|
31266
31256
|
// Enter opens the bib when it is closed.
|
|
31267
|
-
applyKeyboardStrategy$
|
|
31257
|
+
applyKeyboardStrategy$4(this, datepickerKeyboardStrategy);
|
|
31268
31258
|
|
|
31269
31259
|
this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
|
|
31270
31260
|
if (!this.isPopoverVisible) {
|
|
@@ -32349,7 +32339,6 @@ class AuroDatePicker extends AuroElement$5 {
|
|
|
32349
32339
|
.size="${this.size}"
|
|
32350
32340
|
class="${e$3(dropdownElementClassMap)}"
|
|
32351
32341
|
disableEventShow
|
|
32352
|
-
disableFocusTrap
|
|
32353
32342
|
for="dropdownMenu"
|
|
32354
32343
|
part="dropdown"
|
|
32355
32344
|
>
|
|
@@ -33546,6 +33535,57 @@ class IconUtil {
|
|
|
33546
33535
|
}
|
|
33547
33536
|
}
|
|
33548
33537
|
|
|
33538
|
+
/**
|
|
33539
|
+
* Computes display state once per keydown event.
|
|
33540
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
33541
|
+
*
|
|
33542
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
33543
|
+
* @param {Object} [options] - Optional config.
|
|
33544
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
33545
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
33546
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
33547
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
33548
|
+
*/
|
|
33549
|
+
function createDisplayContext$1$2(component, options = {}) {
|
|
33550
|
+
const dd = options.dropdown || component.dropdown;
|
|
33551
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
33552
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
33553
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
33554
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
33555
|
+
|
|
33556
|
+
const ctx = {
|
|
33557
|
+
isExpanded,
|
|
33558
|
+
isModal: isFullscreen,
|
|
33559
|
+
isPopover: !isFullscreen,
|
|
33560
|
+
activeInput: null,
|
|
33561
|
+
};
|
|
33562
|
+
|
|
33563
|
+
if (options.inputResolver) {
|
|
33564
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
33565
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
33566
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
33567
|
+
}
|
|
33568
|
+
|
|
33569
|
+
return ctx;
|
|
33570
|
+
}
|
|
33571
|
+
|
|
33572
|
+
/**
|
|
33573
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
33574
|
+
* Handles both sync and async handlers.
|
|
33575
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
33576
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
33577
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
33578
|
+
*/
|
|
33579
|
+
function applyKeyboardStrategy$1$2(component, strategy, options = {}) {
|
|
33580
|
+
component.addEventListener('keydown', async (evt) => {
|
|
33581
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
33582
|
+
if (typeof handler === 'function') {
|
|
33583
|
+
const ctx = createDisplayContext$1$2(component, options);
|
|
33584
|
+
await handler(component, evt, ctx);
|
|
33585
|
+
}
|
|
33586
|
+
});
|
|
33587
|
+
}
|
|
33588
|
+
|
|
33549
33589
|
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
33590
|
|
|
33551
33591
|
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 +33822,30 @@ let AuroHelpText$1$2 = class AuroHelpText extends i$4 {
|
|
|
33782
33822
|
}
|
|
33783
33823
|
};
|
|
33784
33824
|
|
|
33785
|
-
var formkitVersion$1$2 = '
|
|
33825
|
+
var formkitVersion$1$2 = '202604022013';
|
|
33826
|
+
|
|
33827
|
+
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
33828
|
+
// See LICENSE in the project root for license information.
|
|
33829
|
+
|
|
33830
|
+
const keyboardStrategy = {
|
|
33831
|
+
ArrowUp(component, _evt) {
|
|
33832
|
+
if (component.disabled) {
|
|
33833
|
+
return;
|
|
33834
|
+
}
|
|
33835
|
+
|
|
33836
|
+
_evt.preventDefault();
|
|
33837
|
+
component.increment();
|
|
33838
|
+
},
|
|
33839
|
+
|
|
33840
|
+
ArrowDown(component, _evt) {
|
|
33841
|
+
if (component.disabled) {
|
|
33842
|
+
return;
|
|
33843
|
+
}
|
|
33844
|
+
|
|
33845
|
+
_evt.preventDefault();
|
|
33846
|
+
component.decrement();
|
|
33847
|
+
}
|
|
33848
|
+
};
|
|
33786
33849
|
|
|
33787
33850
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
33788
33851
|
// See LICENSE in the project root for license information.
|
|
@@ -33856,14 +33919,36 @@ class AuroCounter extends i$4 {
|
|
|
33856
33919
|
|
|
33857
33920
|
connectedCallback() {
|
|
33858
33921
|
super.connectedCallback();
|
|
33859
|
-
this
|
|
33922
|
+
applyKeyboardStrategy$1$2(this, keyboardStrategy);
|
|
33860
33923
|
}
|
|
33861
33924
|
|
|
33862
33925
|
disconnectedCallback() {
|
|
33863
|
-
this.removeEventListener('keydown', this.handleKeyDown);
|
|
33864
33926
|
super.disconnectedCallback();
|
|
33865
33927
|
}
|
|
33866
33928
|
|
|
33929
|
+
/**
|
|
33930
|
+
* Gets the current value of the counter.
|
|
33931
|
+
* @returns {number|undefined} The current value of the counter, or undefined if the value is not set or invalid.
|
|
33932
|
+
*/
|
|
33933
|
+
get value() {
|
|
33934
|
+
return this._value;
|
|
33935
|
+
}
|
|
33936
|
+
|
|
33937
|
+
/**
|
|
33938
|
+
* 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.
|
|
33939
|
+
* @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.
|
|
33940
|
+
*/
|
|
33941
|
+
set value(val) {
|
|
33942
|
+
const old = this._value;
|
|
33943
|
+
if (val === undefined || val === null) {
|
|
33944
|
+
this._value = undefined;
|
|
33945
|
+
} else {
|
|
33946
|
+
const num = Number(val);
|
|
33947
|
+
this._value = Number.isNaN(num) ? undefined : num;
|
|
33948
|
+
}
|
|
33949
|
+
this.requestUpdate('value', old);
|
|
33950
|
+
}
|
|
33951
|
+
|
|
33867
33952
|
/**
|
|
33868
33953
|
* Defines reactive properties for the component.
|
|
33869
33954
|
* @returns {Object} Property configuration.
|
|
@@ -34048,29 +34133,6 @@ class AuroCounter extends i$4 {
|
|
|
34048
34133
|
this.validation.validate(this, force);
|
|
34049
34134
|
}
|
|
34050
34135
|
|
|
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
34136
|
firstUpdated() {
|
|
34075
34137
|
this.initValue();
|
|
34076
34138
|
this.setTagAttribute("auro-counter");
|
|
@@ -36013,6 +36075,11 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
|
|
|
36013
36075
|
this.clickHandler = null;
|
|
36014
36076
|
this.keyDownHandler = null;
|
|
36015
36077
|
|
|
36078
|
+
/**
|
|
36079
|
+
* @private
|
|
36080
|
+
*/
|
|
36081
|
+
this.enableKeyboardHandling = true;
|
|
36082
|
+
|
|
36016
36083
|
/**
|
|
36017
36084
|
* @private
|
|
36018
36085
|
*/
|
|
@@ -36273,11 +36340,10 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
|
|
|
36273
36340
|
return;
|
|
36274
36341
|
}
|
|
36275
36342
|
|
|
36276
|
-
const { activeElement } = document;
|
|
36277
36343
|
// if focus is still inside of trigger or bib, do not close
|
|
36278
36344
|
if (
|
|
36279
|
-
this.element.
|
|
36280
|
-
this.element.
|
|
36345
|
+
this.element.matches(":focus") ||
|
|
36346
|
+
this.element.matches(":focus-within")
|
|
36281
36347
|
) {
|
|
36282
36348
|
return;
|
|
36283
36349
|
}
|
|
@@ -36348,7 +36414,9 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
|
|
|
36348
36414
|
document.addEventListener("focusin", this.focusHandler);
|
|
36349
36415
|
}
|
|
36350
36416
|
|
|
36351
|
-
|
|
36417
|
+
if (this.enableKeyboardHandling) {
|
|
36418
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
36419
|
+
}
|
|
36352
36420
|
|
|
36353
36421
|
// send this task to the end of queue to prevent conflicting
|
|
36354
36422
|
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
@@ -36604,8 +36672,9 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
|
|
|
36604
36672
|
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
36605
36673
|
}
|
|
36606
36674
|
|
|
36607
|
-
configure(elem, eventPrefix) {
|
|
36675
|
+
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
36608
36676
|
AuroFloatingUI.setupMousePressChecker();
|
|
36677
|
+
this.enableKeyboardHandling = enableKeyboardHandling;
|
|
36609
36678
|
|
|
36610
36679
|
this.eventPrefix = eventPrefix;
|
|
36611
36680
|
if (this.element !== elem) {
|
|
@@ -36638,7 +36707,9 @@ let AuroFloatingUI$2 = class AuroFloatingUI {
|
|
|
36638
36707
|
|
|
36639
36708
|
this.handleEvent = this.handleEvent.bind(this);
|
|
36640
36709
|
if (this.element.trigger) {
|
|
36641
|
-
|
|
36710
|
+
if (this.enableKeyboardHandling) {
|
|
36711
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
36712
|
+
}
|
|
36642
36713
|
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
36643
36714
|
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
36644
36715
|
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
@@ -37116,12 +37187,83 @@ let p$2$2 = class p{registerComponent(t,a){customElements.get(t)||customElements
|
|
|
37116
37187
|
|
|
37117
37188
|
var iconVersion$1$2 = '9.1.2';
|
|
37118
37189
|
|
|
37190
|
+
/**
|
|
37191
|
+
* Computes display state once per keydown event.
|
|
37192
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
37193
|
+
*
|
|
37194
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
37195
|
+
* @param {Object} [options] - Optional config.
|
|
37196
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
37197
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
37198
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
37199
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
37200
|
+
*/
|
|
37201
|
+
function createDisplayContext$3(component, options = {}) {
|
|
37202
|
+
const dd = options.dropdown || component.dropdown;
|
|
37203
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
37204
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
37205
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
37206
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
37207
|
+
|
|
37208
|
+
const ctx = {
|
|
37209
|
+
isExpanded,
|
|
37210
|
+
isModal: isFullscreen,
|
|
37211
|
+
isPopover: !isFullscreen,
|
|
37212
|
+
activeInput: null,
|
|
37213
|
+
};
|
|
37214
|
+
|
|
37215
|
+
if (options.inputResolver) {
|
|
37216
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
37217
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
37218
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
37219
|
+
}
|
|
37220
|
+
|
|
37221
|
+
return ctx;
|
|
37222
|
+
}
|
|
37223
|
+
|
|
37224
|
+
/**
|
|
37225
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
37226
|
+
* Handles both sync and async handlers.
|
|
37227
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
37228
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
37229
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
37230
|
+
*/
|
|
37231
|
+
function applyKeyboardStrategy$3(component, strategy, options = {}) {
|
|
37232
|
+
component.addEventListener('keydown', async (evt) => {
|
|
37233
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
37234
|
+
if (typeof handler === 'function') {
|
|
37235
|
+
const ctx = createDisplayContext$3(component, options);
|
|
37236
|
+
await handler(component, evt, ctx);
|
|
37237
|
+
}
|
|
37238
|
+
});
|
|
37239
|
+
}
|
|
37240
|
+
|
|
37119
37241
|
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
37242
|
|
|
37121
37243
|
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
37244
|
|
|
37123
37245
|
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
37246
|
|
|
37247
|
+
/**
|
|
37248
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
37249
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
37250
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
37251
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
37252
|
+
*/
|
|
37253
|
+
// eslint-disable-next-line no-unused-vars
|
|
37254
|
+
function createDropdownBibKeyboardStrategy$2(bib) {
|
|
37255
|
+
return {
|
|
37256
|
+
// eslint-disable-next-line no-unused-vars
|
|
37257
|
+
Enter(_dialog, event) {
|
|
37258
|
+
// Floating UI handles Enter key to open the dropdown
|
|
37259
|
+
},
|
|
37260
|
+
// eslint-disable-next-line no-unused-vars
|
|
37261
|
+
Escape(_dialog, event) {
|
|
37262
|
+
// Floating UI handles Escape key to close the dropdown
|
|
37263
|
+
}
|
|
37264
|
+
};
|
|
37265
|
+
}
|
|
37266
|
+
|
|
37125
37267
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
37126
37268
|
// See LICENSE in the project root for license information.
|
|
37127
37269
|
/* eslint-disable max-lines */
|
|
@@ -37246,11 +37388,7 @@ let AuroDropdownBib$2 = class AuroDropdownBib extends i$4 {
|
|
|
37246
37388
|
},
|
|
37247
37389
|
|
|
37248
37390
|
/**
|
|
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).
|
|
37391
|
+
* Tracks whether a menu option is currently highlighted.
|
|
37254
37392
|
* @private
|
|
37255
37393
|
*/
|
|
37256
37394
|
hasActiveDescendant: {
|
|
@@ -37324,7 +37462,7 @@ let AuroDropdownBib$2 = class AuroDropdownBib extends i$4 {
|
|
|
37324
37462
|
|
|
37325
37463
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
37326
37464
|
this._setupCancelHandler(dialog);
|
|
37327
|
-
|
|
37465
|
+
applyKeyboardStrategy$3(dialog, createDropdownBibKeyboardStrategy$2());
|
|
37328
37466
|
|
|
37329
37467
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
37330
37468
|
bubbles: true,
|
|
@@ -37351,92 +37489,6 @@ let AuroDropdownBib$2 = class AuroDropdownBib extends i$4 {
|
|
|
37351
37489
|
});
|
|
37352
37490
|
}
|
|
37353
37491
|
|
|
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
37492
|
|
|
37441
37493
|
/**
|
|
37442
37494
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -37811,7 +37863,7 @@ let AuroHelpText$6 = class AuroHelpText extends i$4 {
|
|
|
37811
37863
|
}
|
|
37812
37864
|
};
|
|
37813
37865
|
|
|
37814
|
-
var formkitVersion$6 = '
|
|
37866
|
+
var formkitVersion$6 = '202604022013';
|
|
37815
37867
|
|
|
37816
37868
|
let AuroElement$1$2 = class AuroElement extends i$4 {
|
|
37817
37869
|
static get properties() {
|
|
@@ -37992,7 +38044,7 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
37992
38044
|
this.appearance = 'default';
|
|
37993
38045
|
this.chevron = false;
|
|
37994
38046
|
this.disabled = false;
|
|
37995
|
-
this.
|
|
38047
|
+
this.disableKeyboardHandling = false;
|
|
37996
38048
|
this.error = false;
|
|
37997
38049
|
this.tabIndex = 0;
|
|
37998
38050
|
this.noToggle = false;
|
|
@@ -38090,9 +38142,8 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38090
38142
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
38091
38143
|
// falls outside the user activation window and causes iOS to
|
|
38092
38144
|
// dismiss the keyboard.
|
|
38093
|
-
if (this.
|
|
38094
|
-
|
|
38095
|
-
this.bibElement.value.open(useModal);
|
|
38145
|
+
if (this.bibElement && this.bibElement.value) {
|
|
38146
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
38096
38147
|
}
|
|
38097
38148
|
}
|
|
38098
38149
|
|
|
@@ -38206,9 +38257,9 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38206
38257
|
},
|
|
38207
38258
|
|
|
38208
38259
|
/**
|
|
38209
|
-
* If declared, the
|
|
38260
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
38210
38261
|
*/
|
|
38211
|
-
|
|
38262
|
+
disableKeyboardHandling: {
|
|
38212
38263
|
type: Boolean,
|
|
38213
38264
|
reflect: true
|
|
38214
38265
|
},
|
|
@@ -38486,7 +38537,7 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38486
38537
|
if (this.isPopoverVisible) {
|
|
38487
38538
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
38488
38539
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
38489
|
-
const useModal = this.isBibFullscreen
|
|
38540
|
+
const useModal = this.isBibFullscreen;
|
|
38490
38541
|
this.bibElement.value.open(useModal);
|
|
38491
38542
|
} else {
|
|
38492
38543
|
this.bibElement.value.close();
|
|
@@ -38496,7 +38547,7 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38496
38547
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
38497
38548
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
38498
38549
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
38499
|
-
const useModal = this.isBibFullscreen
|
|
38550
|
+
const useModal = this.isBibFullscreen;
|
|
38500
38551
|
this.bibElement.value.close();
|
|
38501
38552
|
this.bibElement.value.open(useModal);
|
|
38502
38553
|
}
|
|
@@ -38518,7 +38569,7 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38518
38569
|
|
|
38519
38570
|
firstUpdated() {
|
|
38520
38571
|
// Configure the floater to, this will generate the ID for the bib
|
|
38521
|
-
this.floater.configure(this, 'auroDropdown');
|
|
38572
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
38522
38573
|
|
|
38523
38574
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
38524
38575
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -38608,7 +38659,7 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38608
38659
|
* @private
|
|
38609
38660
|
*/
|
|
38610
38661
|
updateFocusTrap() {
|
|
38611
|
-
if (this.isPopoverVisible
|
|
38662
|
+
if (this.isPopoverVisible) {
|
|
38612
38663
|
if (!this.isBibFullscreen) {
|
|
38613
38664
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
38614
38665
|
this.focusTrap = new FocusTrap$2(this.bibContent);
|
|
@@ -38826,6 +38877,7 @@ let AuroDropdown$2 = class AuroDropdown extends AuroElement$1$2 {
|
|
|
38826
38877
|
aria-expanded="${o$4(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
38827
38878
|
aria-controls="${o$4(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
38828
38879
|
aria-labelledby="${o$4(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
38880
|
+
aria-disabled="${o$4(this.disabled ? 'true' : undefined)}"
|
|
38829
38881
|
@focusin="${this.handleFocusin}"
|
|
38830
38882
|
@blur="${this.handleFocusOut}">
|
|
38831
38883
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -39808,6 +39860,7 @@ class AuroCounterGroup extends AuroElement$4 {
|
|
|
39808
39860
|
counter.addEventListener("input", this.updateValue);
|
|
39809
39861
|
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
39810
39862
|
});
|
|
39863
|
+
this.updateValue();
|
|
39811
39864
|
}
|
|
39812
39865
|
|
|
39813
39866
|
/**
|
|
@@ -39938,6 +39991,8 @@ class AuroCounterGroup extends AuroElement$4 {
|
|
|
39938
39991
|
counter.addEventListener("auroFormElement-validated", this.updateValidity);
|
|
39939
39992
|
});
|
|
39940
39993
|
|
|
39994
|
+
this.updateValue();
|
|
39995
|
+
|
|
39941
39996
|
if (this.isDropdown) {
|
|
39942
39997
|
this.configureBibtemplate();
|
|
39943
39998
|
}
|
|
@@ -39963,15 +40018,6 @@ class AuroCounterGroup extends AuroElement$4 {
|
|
|
39963
40018
|
});
|
|
39964
40019
|
}
|
|
39965
40020
|
});
|
|
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
40021
|
}
|
|
39976
40022
|
|
|
39977
40023
|
/**
|
|
@@ -40161,8 +40207,7 @@ class AuroCounterGroup extends AuroElement$4 {
|
|
|
40161
40207
|
*/
|
|
40162
40208
|
renderCounterDropdown() {
|
|
40163
40209
|
return u$c`
|
|
40164
|
-
<${this.dropdownTag}
|
|
40165
|
-
noHideOnThisFocusLoss
|
|
40210
|
+
<${this.dropdownTag}
|
|
40166
40211
|
chevron
|
|
40167
40212
|
part="dropdown"
|
|
40168
40213
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
@@ -41888,7 +41933,7 @@ let AuroHelpText$5 = class AuroHelpText extends i$4 {
|
|
|
41888
41933
|
}
|
|
41889
41934
|
};
|
|
41890
41935
|
|
|
41891
|
-
var formkitVersion$5 = '
|
|
41936
|
+
var formkitVersion$5 = '202604022013';
|
|
41892
41937
|
|
|
41893
41938
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
41894
41939
|
// See LICENSE in the project root for license information.
|
|
@@ -44057,7 +44102,7 @@ let AuroHelpText$4 = class AuroHelpText extends i$4 {
|
|
|
44057
44102
|
}
|
|
44058
44103
|
};
|
|
44059
44104
|
|
|
44060
|
-
var formkitVersion$4 = '
|
|
44105
|
+
var formkitVersion$4 = '202604022013';
|
|
44061
44106
|
|
|
44062
44107
|
// Copyright (c) 2026 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
44063
44108
|
// See LICENSE in the project root for license information.
|
|
@@ -45594,7 +45639,7 @@ function restoreTriggerAfterClose$1(dropdown, focusTarget) {
|
|
|
45594
45639
|
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
45595
45640
|
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
45596
45641
|
*/
|
|
45597
|
-
function createDisplayContext$1(component, options = {}) {
|
|
45642
|
+
function createDisplayContext$1$1(component, options = {}) {
|
|
45598
45643
|
const dd = options.dropdown || component.dropdown;
|
|
45599
45644
|
// isPopoverVisible reflects as the `open` attribute.
|
|
45600
45645
|
// It reports whether the bib is open in any mode (popover or modal).
|
|
@@ -45624,11 +45669,11 @@ function createDisplayContext$1(component, options = {}) {
|
|
|
45624
45669
|
* @param {Object} strategy - Map of key names to handler functions.
|
|
45625
45670
|
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
45626
45671
|
*/
|
|
45627
|
-
function applyKeyboardStrategy$1(component, strategy, options = {}) {
|
|
45672
|
+
function applyKeyboardStrategy$1$1(component, strategy, options = {}) {
|
|
45628
45673
|
component.addEventListener('keydown', async (evt) => {
|
|
45629
45674
|
const handler = strategy[evt.key] || strategy.default;
|
|
45630
45675
|
if (typeof handler === 'function') {
|
|
45631
|
-
const ctx = createDisplayContext$1(component, options);
|
|
45676
|
+
const ctx = createDisplayContext$1$1(component, options);
|
|
45632
45677
|
await handler(component, evt, ctx);
|
|
45633
45678
|
}
|
|
45634
45679
|
});
|
|
@@ -47600,6 +47645,11 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
|
|
|
47600
47645
|
this.clickHandler = null;
|
|
47601
47646
|
this.keyDownHandler = null;
|
|
47602
47647
|
|
|
47648
|
+
/**
|
|
47649
|
+
* @private
|
|
47650
|
+
*/
|
|
47651
|
+
this.enableKeyboardHandling = true;
|
|
47652
|
+
|
|
47603
47653
|
/**
|
|
47604
47654
|
* @private
|
|
47605
47655
|
*/
|
|
@@ -47860,11 +47910,10 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
|
|
|
47860
47910
|
return;
|
|
47861
47911
|
}
|
|
47862
47912
|
|
|
47863
|
-
const { activeElement } = document;
|
|
47864
47913
|
// if focus is still inside of trigger or bib, do not close
|
|
47865
47914
|
if (
|
|
47866
|
-
this.element.
|
|
47867
|
-
this.element.
|
|
47915
|
+
this.element.matches(":focus") ||
|
|
47916
|
+
this.element.matches(":focus-within")
|
|
47868
47917
|
) {
|
|
47869
47918
|
return;
|
|
47870
47919
|
}
|
|
@@ -47935,7 +47984,9 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
|
|
|
47935
47984
|
document.addEventListener("focusin", this.focusHandler);
|
|
47936
47985
|
}
|
|
47937
47986
|
|
|
47938
|
-
|
|
47987
|
+
if (this.enableKeyboardHandling) {
|
|
47988
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
47989
|
+
}
|
|
47939
47990
|
|
|
47940
47991
|
// send this task to the end of queue to prevent conflicting
|
|
47941
47992
|
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
@@ -48191,8 +48242,9 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
|
|
|
48191
48242
|
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
48192
48243
|
}
|
|
48193
48244
|
|
|
48194
|
-
configure(elem, eventPrefix) {
|
|
48245
|
+
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
48195
48246
|
AuroFloatingUI.setupMousePressChecker();
|
|
48247
|
+
this.enableKeyboardHandling = enableKeyboardHandling;
|
|
48196
48248
|
|
|
48197
48249
|
this.eventPrefix = eventPrefix;
|
|
48198
48250
|
if (this.element !== elem) {
|
|
@@ -48225,7 +48277,9 @@ let AuroFloatingUI$1 = class AuroFloatingUI {
|
|
|
48225
48277
|
|
|
48226
48278
|
this.handleEvent = this.handleEvent.bind(this);
|
|
48227
48279
|
if (this.element.trigger) {
|
|
48228
|
-
|
|
48280
|
+
if (this.enableKeyboardHandling) {
|
|
48281
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
48282
|
+
}
|
|
48229
48283
|
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
48230
48284
|
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
48231
48285
|
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
@@ -48703,12 +48757,83 @@ let p$3$1 = class p{registerComponent(t,a){customElements.get(t)||customElements
|
|
|
48703
48757
|
|
|
48704
48758
|
var iconVersion$2$1 = '9.1.2';
|
|
48705
48759
|
|
|
48760
|
+
/**
|
|
48761
|
+
* Computes display state once per keydown event.
|
|
48762
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
48763
|
+
*
|
|
48764
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
48765
|
+
* @param {Object} [options] - Optional config.
|
|
48766
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
48767
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
48768
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
48769
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
48770
|
+
*/
|
|
48771
|
+
function createDisplayContext$2(component, options = {}) {
|
|
48772
|
+
const dd = options.dropdown || component.dropdown;
|
|
48773
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
48774
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
48775
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
48776
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
48777
|
+
|
|
48778
|
+
const ctx = {
|
|
48779
|
+
isExpanded,
|
|
48780
|
+
isModal: isFullscreen,
|
|
48781
|
+
isPopover: !isFullscreen,
|
|
48782
|
+
activeInput: null,
|
|
48783
|
+
};
|
|
48784
|
+
|
|
48785
|
+
if (options.inputResolver) {
|
|
48786
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
48787
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
48788
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
48789
|
+
}
|
|
48790
|
+
|
|
48791
|
+
return ctx;
|
|
48792
|
+
}
|
|
48793
|
+
|
|
48794
|
+
/**
|
|
48795
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
48796
|
+
* Handles both sync and async handlers.
|
|
48797
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
48798
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
48799
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
48800
|
+
*/
|
|
48801
|
+
function applyKeyboardStrategy$2(component, strategy, options = {}) {
|
|
48802
|
+
component.addEventListener('keydown', async (evt) => {
|
|
48803
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
48804
|
+
if (typeof handler === 'function') {
|
|
48805
|
+
const ctx = createDisplayContext$2(component, options);
|
|
48806
|
+
await handler(component, evt, ctx);
|
|
48807
|
+
}
|
|
48808
|
+
});
|
|
48809
|
+
}
|
|
48810
|
+
|
|
48706
48811
|
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
48812
|
|
|
48708
48813
|
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
48814
|
|
|
48710
48815
|
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
48816
|
|
|
48817
|
+
/**
|
|
48818
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
48819
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
48820
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
48821
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
48822
|
+
*/
|
|
48823
|
+
// eslint-disable-next-line no-unused-vars
|
|
48824
|
+
function createDropdownBibKeyboardStrategy$1(bib) {
|
|
48825
|
+
return {
|
|
48826
|
+
// eslint-disable-next-line no-unused-vars
|
|
48827
|
+
Enter(_dialog, event) {
|
|
48828
|
+
// Floating UI handles Enter key to open the dropdown
|
|
48829
|
+
},
|
|
48830
|
+
// eslint-disable-next-line no-unused-vars
|
|
48831
|
+
Escape(_dialog, event) {
|
|
48832
|
+
// Floating UI handles Escape key to close the dropdown
|
|
48833
|
+
}
|
|
48834
|
+
};
|
|
48835
|
+
}
|
|
48836
|
+
|
|
48712
48837
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
48713
48838
|
// See LICENSE in the project root for license information.
|
|
48714
48839
|
/* eslint-disable max-lines */
|
|
@@ -48833,11 +48958,7 @@ let AuroDropdownBib$1 = class AuroDropdownBib extends i$4 {
|
|
|
48833
48958
|
},
|
|
48834
48959
|
|
|
48835
48960
|
/**
|
|
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).
|
|
48961
|
+
* Tracks whether a menu option is currently highlighted.
|
|
48841
48962
|
* @private
|
|
48842
48963
|
*/
|
|
48843
48964
|
hasActiveDescendant: {
|
|
@@ -48911,7 +49032,7 @@ let AuroDropdownBib$1 = class AuroDropdownBib extends i$4 {
|
|
|
48911
49032
|
|
|
48912
49033
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
48913
49034
|
this._setupCancelHandler(dialog);
|
|
48914
|
-
|
|
49035
|
+
applyKeyboardStrategy$2(dialog, createDropdownBibKeyboardStrategy$1());
|
|
48915
49036
|
|
|
48916
49037
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
48917
49038
|
bubbles: true,
|
|
@@ -48938,92 +49059,6 @@ let AuroDropdownBib$1 = class AuroDropdownBib extends i$4 {
|
|
|
48938
49059
|
});
|
|
48939
49060
|
}
|
|
48940
49061
|
|
|
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
49062
|
|
|
49028
49063
|
/**
|
|
49029
49064
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -49398,7 +49433,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
49398
49433
|
}
|
|
49399
49434
|
};
|
|
49400
49435
|
|
|
49401
|
-
var formkitVersion$2 = '
|
|
49436
|
+
var formkitVersion$2 = '202604022013';
|
|
49402
49437
|
|
|
49403
49438
|
let AuroElement$2$1 = class AuroElement extends i$4 {
|
|
49404
49439
|
static get properties() {
|
|
@@ -49579,7 +49614,7 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
49579
49614
|
this.appearance = 'default';
|
|
49580
49615
|
this.chevron = false;
|
|
49581
49616
|
this.disabled = false;
|
|
49582
|
-
this.
|
|
49617
|
+
this.disableKeyboardHandling = false;
|
|
49583
49618
|
this.error = false;
|
|
49584
49619
|
this.tabIndex = 0;
|
|
49585
49620
|
this.noToggle = false;
|
|
@@ -49677,9 +49712,8 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
49677
49712
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
49678
49713
|
// falls outside the user activation window and causes iOS to
|
|
49679
49714
|
// dismiss the keyboard.
|
|
49680
|
-
if (this.
|
|
49681
|
-
|
|
49682
|
-
this.bibElement.value.open(useModal);
|
|
49715
|
+
if (this.bibElement && this.bibElement.value) {
|
|
49716
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
49683
49717
|
}
|
|
49684
49718
|
}
|
|
49685
49719
|
|
|
@@ -49793,9 +49827,9 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
49793
49827
|
},
|
|
49794
49828
|
|
|
49795
49829
|
/**
|
|
49796
|
-
* If declared, the
|
|
49830
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
49797
49831
|
*/
|
|
49798
|
-
|
|
49832
|
+
disableKeyboardHandling: {
|
|
49799
49833
|
type: Boolean,
|
|
49800
49834
|
reflect: true
|
|
49801
49835
|
},
|
|
@@ -50073,7 +50107,7 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
50073
50107
|
if (this.isPopoverVisible) {
|
|
50074
50108
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
50075
50109
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
50076
|
-
const useModal = this.isBibFullscreen
|
|
50110
|
+
const useModal = this.isBibFullscreen;
|
|
50077
50111
|
this.bibElement.value.open(useModal);
|
|
50078
50112
|
} else {
|
|
50079
50113
|
this.bibElement.value.close();
|
|
@@ -50083,7 +50117,7 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
50083
50117
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
50084
50118
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
50085
50119
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
50086
|
-
const useModal = this.isBibFullscreen
|
|
50120
|
+
const useModal = this.isBibFullscreen;
|
|
50087
50121
|
this.bibElement.value.close();
|
|
50088
50122
|
this.bibElement.value.open(useModal);
|
|
50089
50123
|
}
|
|
@@ -50105,7 +50139,7 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
50105
50139
|
|
|
50106
50140
|
firstUpdated() {
|
|
50107
50141
|
// Configure the floater to, this will generate the ID for the bib
|
|
50108
|
-
this.floater.configure(this, 'auroDropdown');
|
|
50142
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
50109
50143
|
|
|
50110
50144
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
50111
50145
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -50195,7 +50229,7 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
50195
50229
|
* @private
|
|
50196
50230
|
*/
|
|
50197
50231
|
updateFocusTrap() {
|
|
50198
|
-
if (this.isPopoverVisible
|
|
50232
|
+
if (this.isPopoverVisible) {
|
|
50199
50233
|
if (!this.isBibFullscreen) {
|
|
50200
50234
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
50201
50235
|
this.focusTrap = new FocusTrap$1(this.bibContent);
|
|
@@ -50413,6 +50447,7 @@ let AuroDropdown$1 = class AuroDropdown extends AuroElement$2$1 {
|
|
|
50413
50447
|
aria-expanded="${o$4(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
50414
50448
|
aria-controls="${o$4(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
50415
50449
|
aria-labelledby="${o$4(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
50450
|
+
aria-disabled="${o$4(this.disabled ? 'true' : undefined)}"
|
|
50416
50451
|
@focusin="${this.handleFocusin}"
|
|
50417
50452
|
@blur="${this.handleFocusOut}">
|
|
50418
50453
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -57155,7 +57190,7 @@ let AuroHelpText$1$1 = class AuroHelpText extends i$4 {
|
|
|
57155
57190
|
}
|
|
57156
57191
|
};
|
|
57157
57192
|
|
|
57158
|
-
var formkitVersion$1$1 = '
|
|
57193
|
+
var formkitVersion$1$1 = '202604022013';
|
|
57159
57194
|
|
|
57160
57195
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
57161
57196
|
// See LICENSE in the project root for license information.
|
|
@@ -58194,7 +58229,7 @@ let AuroBibtemplate$1 = class AuroBibtemplate extends i$4 {
|
|
|
58194
58229
|
}
|
|
58195
58230
|
};
|
|
58196
58231
|
|
|
58197
|
-
var formkitVersion$3 = '
|
|
58232
|
+
var formkitVersion$3 = '202604022013';
|
|
58198
58233
|
|
|
58199
58234
|
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
58235
|
|
|
@@ -59688,7 +59723,7 @@ class AuroCombobox extends AuroElement$3 {
|
|
|
59688
59723
|
* @returns {void}
|
|
59689
59724
|
*/
|
|
59690
59725
|
configureCombobox() {
|
|
59691
|
-
applyKeyboardStrategy$1(this, comboboxKeyboardStrategy, {
|
|
59726
|
+
applyKeyboardStrategy$1$1(this, comboboxKeyboardStrategy, {
|
|
59692
59727
|
// In modal mode the input moves into the bib; route keyboard events to that element instead.
|
|
59693
59728
|
inputResolver: (comp, ctx) => (ctx.isModal && comp.inputInBib ? comp.inputInBib : comp.input),
|
|
59694
59729
|
});
|
|
@@ -60920,7 +60955,7 @@ class AuroMenuOption extends AuroElement$2 {
|
|
|
60920
60955
|
});
|
|
60921
60956
|
|
|
60922
60957
|
return u$c`
|
|
60923
|
-
<div class="${classes}">
|
|
60958
|
+
<div class="${classes}" aria-disabled="${this.disabled ? 'true' : 'false'}">
|
|
60924
60959
|
${this.selected && !this.noCheckmark
|
|
60925
60960
|
? this.generateIconHtml(checkmarkIcon.svg)
|
|
60926
60961
|
: undefined}
|
|
@@ -61691,10 +61726,10 @@ class AuroMenu extends AuroElement$2 {
|
|
|
61691
61726
|
|
|
61692
61727
|
// Event Bindings
|
|
61693
61728
|
|
|
61694
|
-
/**
|
|
61695
|
-
|
|
61696
|
-
|
|
61697
|
-
this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
61729
|
+
// /**
|
|
61730
|
+
// * @private
|
|
61731
|
+
// */
|
|
61732
|
+
// this.handleKeyDown = this.handleKeyDown.bind(this);
|
|
61698
61733
|
|
|
61699
61734
|
|
|
61700
61735
|
/**
|
|
@@ -62043,7 +62078,7 @@ class AuroMenu extends AuroElement$2 {
|
|
|
62043
62078
|
|
|
62044
62079
|
this.provideContext();
|
|
62045
62080
|
|
|
62046
|
-
this.addEventListener('keydown', this.handleKeyDown);
|
|
62081
|
+
// this.addEventListener('keydown', this.handleKeyDown);
|
|
62047
62082
|
this.addEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
62048
62083
|
this.addEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
62049
62084
|
this.addEventListener('slotchange', this.handleSlotChange);
|
|
@@ -62051,7 +62086,7 @@ class AuroMenu extends AuroElement$2 {
|
|
|
62051
62086
|
}
|
|
62052
62087
|
|
|
62053
62088
|
disconnectedCallback() {
|
|
62054
|
-
this.removeEventListener('keydown', this.handleKeyDown);
|
|
62089
|
+
// this.removeEventListener('keydown', this.handleKeyDown);
|
|
62055
62090
|
this.removeEventListener('auroMenuOption-click', this.handleMouseSelect);
|
|
62056
62091
|
this.removeEventListener('auroMenuOption-mouseover', this.handleOptionHover);
|
|
62057
62092
|
this.removeEventListener('slotchange', this.handleSlotChange);
|
|
@@ -62192,26 +62227,33 @@ class AuroMenu extends AuroElement$2 {
|
|
|
62192
62227
|
|
|
62193
62228
|
// Event Handlers
|
|
62194
62229
|
|
|
62195
|
-
/**
|
|
62196
|
-
|
|
62197
|
-
|
|
62198
|
-
|
|
62199
|
-
|
|
62200
|
-
handleKeyDown(event) {
|
|
62201
|
-
|
|
62202
|
-
|
|
62203
|
-
|
|
62204
|
-
|
|
62205
|
-
|
|
62206
|
-
|
|
62207
|
-
|
|
62208
|
-
|
|
62209
|
-
|
|
62210
|
-
|
|
62211
|
-
|
|
62212
|
-
|
|
62213
|
-
|
|
62214
|
-
|
|
62230
|
+
// /**
|
|
62231
|
+
// * Handles keyboard navigation.
|
|
62232
|
+
// * @private
|
|
62233
|
+
// * @param {KeyboardEvent} event - Event object from the browser.
|
|
62234
|
+
// */
|
|
62235
|
+
// handleKeyDown(event) {
|
|
62236
|
+
// // Update to Chris keyboard handler
|
|
62237
|
+
// // We have a new "navigateArrow" function in that handler, maybe that replaces those keys here?
|
|
62238
|
+
// event.preventDefault();
|
|
62239
|
+
// switch (event.key) {
|
|
62240
|
+
// case "ArrowDown":
|
|
62241
|
+
// console.warn("ArrowDown key is pressed and heard from menu");
|
|
62242
|
+
// this.menuService.highlightNext();
|
|
62243
|
+
// break;
|
|
62244
|
+
// case "ArrowUp":
|
|
62245
|
+
// console.warn("ArrowUp key is pressed and heard from menu");
|
|
62246
|
+
// this.menuService.highlightPrevious();
|
|
62247
|
+
// break;
|
|
62248
|
+
// case "Tab":
|
|
62249
|
+
// case "Enter":
|
|
62250
|
+
// this.menuService.selectHighlightedOption();
|
|
62251
|
+
// // Does this need to get separated into two cases to handle the different expected behavior of tab vs enter?
|
|
62252
|
+
// break;
|
|
62253
|
+
// default:
|
|
62254
|
+
// break;
|
|
62255
|
+
// }
|
|
62256
|
+
// }
|
|
62215
62257
|
|
|
62216
62258
|
/**
|
|
62217
62259
|
* Navigates the menu options in the specified direction.
|
|
@@ -63515,7 +63557,7 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
|
|
|
63515
63557
|
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
63516
63558
|
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
63517
63559
|
*/
|
|
63518
|
-
function createDisplayContext(component, options = {}) {
|
|
63560
|
+
function createDisplayContext$1(component, options = {}) {
|
|
63519
63561
|
const dd = options.dropdown || component.dropdown;
|
|
63520
63562
|
// isPopoverVisible reflects as the `open` attribute.
|
|
63521
63563
|
// It reports whether the bib is open in any mode (popover or modal).
|
|
@@ -63545,11 +63587,11 @@ function createDisplayContext(component, options = {}) {
|
|
|
63545
63587
|
* @param {Object} strategy - Map of key names to handler functions.
|
|
63546
63588
|
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
63547
63589
|
*/
|
|
63548
|
-
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
63590
|
+
function applyKeyboardStrategy$1(component, strategy, options = {}) {
|
|
63549
63591
|
component.addEventListener('keydown', async (evt) => {
|
|
63550
63592
|
const handler = strategy[evt.key] || strategy.default;
|
|
63551
63593
|
if (typeof handler === 'function') {
|
|
63552
|
-
const ctx = createDisplayContext(component, options);
|
|
63594
|
+
const ctx = createDisplayContext$1(component, options);
|
|
63553
63595
|
await handler(component, evt, ctx);
|
|
63554
63596
|
}
|
|
63555
63597
|
});
|
|
@@ -63573,9 +63615,16 @@ function navigateArrow(component, direction, options = {}) {
|
|
|
63573
63615
|
}
|
|
63574
63616
|
}
|
|
63575
63617
|
|
|
63618
|
+
/* eslint-disable new-cap */
|
|
63619
|
+
|
|
63576
63620
|
const selectKeyboardStrategy = {
|
|
63577
63621
|
ArrowUp(component, evt, ctx) {
|
|
63578
63622
|
evt.preventDefault();
|
|
63623
|
+
if (evt.altKey || evt.metaKey) {
|
|
63624
|
+
// navigate to first enabled option
|
|
63625
|
+
selectKeyboardStrategy.Home(component, evt, ctx);
|
|
63626
|
+
return;
|
|
63627
|
+
}
|
|
63579
63628
|
navigateArrow(component, 'up', {
|
|
63580
63629
|
ctx,
|
|
63581
63630
|
showFn: () => component.dropdown.show(),
|
|
@@ -63584,30 +63633,36 @@ const selectKeyboardStrategy = {
|
|
|
63584
63633
|
|
|
63585
63634
|
ArrowDown(component, evt, ctx) {
|
|
63586
63635
|
evt.preventDefault();
|
|
63636
|
+
if (evt.altKey || evt.metaKey) {
|
|
63637
|
+
// navigate to last enabled option
|
|
63638
|
+
selectKeyboardStrategy.End(component, evt, ctx);
|
|
63639
|
+
return;
|
|
63640
|
+
}
|
|
63587
63641
|
navigateArrow(component, 'down', {
|
|
63588
63642
|
ctx,
|
|
63589
63643
|
showFn: () => component.dropdown.show(),
|
|
63590
63644
|
});
|
|
63591
63645
|
},
|
|
63592
63646
|
|
|
63593
|
-
Enter(component, evt) {
|
|
63647
|
+
Enter(component, evt, ctx) {
|
|
63594
63648
|
evt.preventDefault();
|
|
63649
|
+
evt.stopPropagation();
|
|
63650
|
+
if (!ctx.isExpanded) {
|
|
63651
|
+
component.dropdown.show();
|
|
63652
|
+
return;
|
|
63653
|
+
}
|
|
63595
63654
|
component.menu.makeSelection();
|
|
63596
63655
|
},
|
|
63597
63656
|
|
|
63598
|
-
|
|
63657
|
+
Escape(component, evt, ctx) {
|
|
63599
63658
|
if (!ctx.isExpanded) {
|
|
63600
63659
|
return;
|
|
63601
63660
|
}
|
|
63661
|
+
component.dropdown.hide();
|
|
63662
|
+
},
|
|
63602
63663
|
|
|
63603
|
-
|
|
63604
|
-
|
|
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
|
-
}
|
|
63664
|
+
Tab(component, evt, ctx) {
|
|
63665
|
+
if (!ctx.isExpanded) {
|
|
63611
63666
|
return;
|
|
63612
63667
|
}
|
|
63613
63668
|
|
|
@@ -63618,9 +63673,41 @@ const selectKeyboardStrategy = {
|
|
|
63618
63673
|
}
|
|
63619
63674
|
component.dropdown.hide();
|
|
63620
63675
|
},
|
|
63676
|
+
Home(component, evt, ctx) {
|
|
63677
|
+
if (!ctx.isExpanded) {
|
|
63678
|
+
return;
|
|
63679
|
+
}
|
|
63680
|
+
evt.preventDefault();
|
|
63681
|
+
evt.stopPropagation();
|
|
63682
|
+
const firstOption = component.menu.menuService.menuOptions.find((option) => !option.disabled);
|
|
63683
|
+
if (firstOption) {
|
|
63684
|
+
component.menu.updateActiveOption(firstOption);
|
|
63685
|
+
}
|
|
63686
|
+
},
|
|
63687
|
+
|
|
63688
|
+
End(component, evt, ctx) {
|
|
63689
|
+
if (!ctx.isExpanded) {
|
|
63690
|
+
return;
|
|
63691
|
+
}
|
|
63692
|
+
evt.preventDefault();
|
|
63693
|
+
evt.stopPropagation();
|
|
63694
|
+
const lastOption = [...component.menu.menuService.menuOptions].reverse().find((option) => !option.disabled);
|
|
63695
|
+
if (lastOption) {
|
|
63696
|
+
component.menu.updateActiveOption(lastOption);
|
|
63697
|
+
}
|
|
63698
|
+
},
|
|
63621
63699
|
|
|
63622
|
-
default(component, evt) {
|
|
63700
|
+
default(component, evt, ctx) {
|
|
63623
63701
|
component.updateActiveOptionBasedOnKey(evt.key);
|
|
63702
|
+
if (evt.key === ' ') {
|
|
63703
|
+
evt.preventDefault();
|
|
63704
|
+
evt.stopPropagation();
|
|
63705
|
+
if (ctx.isExpanded) {
|
|
63706
|
+
component.dropdown.hide();
|
|
63707
|
+
return;
|
|
63708
|
+
}
|
|
63709
|
+
component.dropdown.show();
|
|
63710
|
+
}
|
|
63624
63711
|
},
|
|
63625
63712
|
};
|
|
63626
63713
|
|
|
@@ -65453,6 +65540,11 @@ class AuroFloatingUI {
|
|
|
65453
65540
|
this.clickHandler = null;
|
|
65454
65541
|
this.keyDownHandler = null;
|
|
65455
65542
|
|
|
65543
|
+
/**
|
|
65544
|
+
* @private
|
|
65545
|
+
*/
|
|
65546
|
+
this.enableKeyboardHandling = true;
|
|
65547
|
+
|
|
65456
65548
|
/**
|
|
65457
65549
|
* @private
|
|
65458
65550
|
*/
|
|
@@ -65713,11 +65805,10 @@ class AuroFloatingUI {
|
|
|
65713
65805
|
return;
|
|
65714
65806
|
}
|
|
65715
65807
|
|
|
65716
|
-
const { activeElement } = document;
|
|
65717
65808
|
// if focus is still inside of trigger or bib, do not close
|
|
65718
65809
|
if (
|
|
65719
|
-
this.element.
|
|
65720
|
-
this.element.
|
|
65810
|
+
this.element.matches(":focus") ||
|
|
65811
|
+
this.element.matches(":focus-within")
|
|
65721
65812
|
) {
|
|
65722
65813
|
return;
|
|
65723
65814
|
}
|
|
@@ -65788,7 +65879,9 @@ class AuroFloatingUI {
|
|
|
65788
65879
|
document.addEventListener("focusin", this.focusHandler);
|
|
65789
65880
|
}
|
|
65790
65881
|
|
|
65791
|
-
|
|
65882
|
+
if (this.enableKeyboardHandling) {
|
|
65883
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
65884
|
+
}
|
|
65792
65885
|
|
|
65793
65886
|
// send this task to the end of queue to prevent conflicting
|
|
65794
65887
|
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
@@ -66044,8 +66137,9 @@ class AuroFloatingUI {
|
|
|
66044
66137
|
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
66045
66138
|
}
|
|
66046
66139
|
|
|
66047
|
-
configure(elem, eventPrefix) {
|
|
66140
|
+
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
66048
66141
|
AuroFloatingUI.setupMousePressChecker();
|
|
66142
|
+
this.enableKeyboardHandling = enableKeyboardHandling;
|
|
66049
66143
|
|
|
66050
66144
|
this.eventPrefix = eventPrefix;
|
|
66051
66145
|
if (this.element !== elem) {
|
|
@@ -66078,7 +66172,9 @@ class AuroFloatingUI {
|
|
|
66078
66172
|
|
|
66079
66173
|
this.handleEvent = this.handleEvent.bind(this);
|
|
66080
66174
|
if (this.element.trigger) {
|
|
66081
|
-
|
|
66175
|
+
if (this.enableKeyboardHandling) {
|
|
66176
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
66177
|
+
}
|
|
66082
66178
|
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
66083
66179
|
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
66084
66180
|
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
@@ -66556,12 +66652,83 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
66556
66652
|
|
|
66557
66653
|
var iconVersion$1 = '9.1.2';
|
|
66558
66654
|
|
|
66655
|
+
/**
|
|
66656
|
+
* Computes display state once per keydown event.
|
|
66657
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
66658
|
+
*
|
|
66659
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
66660
|
+
* @param {Object} [options] - Optional config.
|
|
66661
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
66662
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
66663
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
66664
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
66665
|
+
*/
|
|
66666
|
+
function createDisplayContext(component, options = {}) {
|
|
66667
|
+
const dd = options.dropdown || component.dropdown;
|
|
66668
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
66669
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
66670
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
66671
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
66672
|
+
|
|
66673
|
+
const ctx = {
|
|
66674
|
+
isExpanded,
|
|
66675
|
+
isModal: isFullscreen,
|
|
66676
|
+
isPopover: !isFullscreen,
|
|
66677
|
+
activeInput: null,
|
|
66678
|
+
};
|
|
66679
|
+
|
|
66680
|
+
if (options.inputResolver) {
|
|
66681
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
66682
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
66683
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
66684
|
+
}
|
|
66685
|
+
|
|
66686
|
+
return ctx;
|
|
66687
|
+
}
|
|
66688
|
+
|
|
66689
|
+
/**
|
|
66690
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
66691
|
+
* Handles both sync and async handlers.
|
|
66692
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
66693
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
66694
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
66695
|
+
*/
|
|
66696
|
+
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
66697
|
+
component.addEventListener('keydown', async (evt) => {
|
|
66698
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
66699
|
+
if (typeof handler === 'function') {
|
|
66700
|
+
const ctx = createDisplayContext(component, options);
|
|
66701
|
+
await handler(component, evt, ctx);
|
|
66702
|
+
}
|
|
66703
|
+
});
|
|
66704
|
+
}
|
|
66705
|
+
|
|
66559
66706
|
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
66707
|
|
|
66561
66708
|
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
66709
|
|
|
66563
66710
|
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
66711
|
|
|
66712
|
+
/**
|
|
66713
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
66714
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
66715
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
66716
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
66717
|
+
*/
|
|
66718
|
+
// eslint-disable-next-line no-unused-vars
|
|
66719
|
+
function createDropdownBibKeyboardStrategy(bib) {
|
|
66720
|
+
return {
|
|
66721
|
+
// eslint-disable-next-line no-unused-vars
|
|
66722
|
+
Enter(_dialog, event) {
|
|
66723
|
+
// Floating UI handles Enter key to open the dropdown
|
|
66724
|
+
},
|
|
66725
|
+
// eslint-disable-next-line no-unused-vars
|
|
66726
|
+
Escape(_dialog, event) {
|
|
66727
|
+
// Floating UI handles Escape key to close the dropdown
|
|
66728
|
+
}
|
|
66729
|
+
};
|
|
66730
|
+
}
|
|
66731
|
+
|
|
66565
66732
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
66566
66733
|
// See LICENSE in the project root for license information.
|
|
66567
66734
|
/* eslint-disable max-lines */
|
|
@@ -66686,11 +66853,7 @@ class AuroDropdownBib extends i$4 {
|
|
|
66686
66853
|
},
|
|
66687
66854
|
|
|
66688
66855
|
/**
|
|
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).
|
|
66856
|
+
* Tracks whether a menu option is currently highlighted.
|
|
66694
66857
|
* @private
|
|
66695
66858
|
*/
|
|
66696
66859
|
hasActiveDescendant: {
|
|
@@ -66764,7 +66927,7 @@ class AuroDropdownBib extends i$4 {
|
|
|
66764
66927
|
|
|
66765
66928
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
66766
66929
|
this._setupCancelHandler(dialog);
|
|
66767
|
-
|
|
66930
|
+
applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
|
|
66768
66931
|
|
|
66769
66932
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
66770
66933
|
bubbles: true,
|
|
@@ -66791,92 +66954,6 @@ class AuroDropdownBib extends i$4 {
|
|
|
66791
66954
|
});
|
|
66792
66955
|
}
|
|
66793
66956
|
|
|
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
66957
|
|
|
66881
66958
|
/**
|
|
66882
66959
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -67251,7 +67328,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
67251
67328
|
}
|
|
67252
67329
|
};
|
|
67253
67330
|
|
|
67254
|
-
var formkitVersion$1 = '
|
|
67331
|
+
var formkitVersion$1 = '202604022013';
|
|
67255
67332
|
|
|
67256
67333
|
class AuroElement extends i$4 {
|
|
67257
67334
|
static get properties() {
|
|
@@ -67432,7 +67509,7 @@ class AuroDropdown extends AuroElement {
|
|
|
67432
67509
|
this.appearance = 'default';
|
|
67433
67510
|
this.chevron = false;
|
|
67434
67511
|
this.disabled = false;
|
|
67435
|
-
this.
|
|
67512
|
+
this.disableKeyboardHandling = false;
|
|
67436
67513
|
this.error = false;
|
|
67437
67514
|
this.tabIndex = 0;
|
|
67438
67515
|
this.noToggle = false;
|
|
@@ -67530,9 +67607,8 @@ class AuroDropdown extends AuroElement {
|
|
|
67530
67607
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
67531
67608
|
// falls outside the user activation window and causes iOS to
|
|
67532
67609
|
// dismiss the keyboard.
|
|
67533
|
-
if (this.
|
|
67534
|
-
|
|
67535
|
-
this.bibElement.value.open(useModal);
|
|
67610
|
+
if (this.bibElement && this.bibElement.value) {
|
|
67611
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
67536
67612
|
}
|
|
67537
67613
|
}
|
|
67538
67614
|
|
|
@@ -67646,9 +67722,9 @@ class AuroDropdown extends AuroElement {
|
|
|
67646
67722
|
},
|
|
67647
67723
|
|
|
67648
67724
|
/**
|
|
67649
|
-
* If declared, the
|
|
67725
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
67650
67726
|
*/
|
|
67651
|
-
|
|
67727
|
+
disableKeyboardHandling: {
|
|
67652
67728
|
type: Boolean,
|
|
67653
67729
|
reflect: true
|
|
67654
67730
|
},
|
|
@@ -67926,7 +68002,7 @@ class AuroDropdown extends AuroElement {
|
|
|
67926
68002
|
if (this.isPopoverVisible) {
|
|
67927
68003
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
67928
68004
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
67929
|
-
const useModal = this.isBibFullscreen
|
|
68005
|
+
const useModal = this.isBibFullscreen;
|
|
67930
68006
|
this.bibElement.value.open(useModal);
|
|
67931
68007
|
} else {
|
|
67932
68008
|
this.bibElement.value.close();
|
|
@@ -67936,7 +68012,7 @@ class AuroDropdown extends AuroElement {
|
|
|
67936
68012
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
67937
68013
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
67938
68014
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
67939
|
-
const useModal = this.isBibFullscreen
|
|
68015
|
+
const useModal = this.isBibFullscreen;
|
|
67940
68016
|
this.bibElement.value.close();
|
|
67941
68017
|
this.bibElement.value.open(useModal);
|
|
67942
68018
|
}
|
|
@@ -67958,7 +68034,7 @@ class AuroDropdown extends AuroElement {
|
|
|
67958
68034
|
|
|
67959
68035
|
firstUpdated() {
|
|
67960
68036
|
// Configure the floater to, this will generate the ID for the bib
|
|
67961
|
-
this.floater.configure(this, 'auroDropdown');
|
|
68037
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
67962
68038
|
|
|
67963
68039
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
67964
68040
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -68048,7 +68124,7 @@ class AuroDropdown extends AuroElement {
|
|
|
68048
68124
|
* @private
|
|
68049
68125
|
*/
|
|
68050
68126
|
updateFocusTrap() {
|
|
68051
|
-
if (this.isPopoverVisible
|
|
68127
|
+
if (this.isPopoverVisible) {
|
|
68052
68128
|
if (!this.isBibFullscreen) {
|
|
68053
68129
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
68054
68130
|
this.focusTrap = new FocusTrap(this.bibContent);
|
|
@@ -68266,6 +68342,7 @@ class AuroDropdown extends AuroElement {
|
|
|
68266
68342
|
aria-expanded="${o$4(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
68267
68343
|
aria-controls="${o$4(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
68268
68344
|
aria-labelledby="${o$4(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
68345
|
+
aria-disabled="${o$4(this.disabled ? 'true' : undefined)}"
|
|
68269
68346
|
@focusin="${this.handleFocusin}"
|
|
68270
68347
|
@blur="${this.handleFocusOut}">
|
|
68271
68348
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -69004,7 +69081,7 @@ class AuroHelpText extends i$4 {
|
|
|
69004
69081
|
}
|
|
69005
69082
|
}
|
|
69006
69083
|
|
|
69007
|
-
var formkitVersion = '
|
|
69084
|
+
var formkitVersion = '202604022013';
|
|
69008
69085
|
|
|
69009
69086
|
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
69087
|
|
|
@@ -69539,12 +69616,28 @@ class AuroSelect extends AuroElement$1 {
|
|
|
69539
69616
|
this.dropdown.setActiveDescendant(null);
|
|
69540
69617
|
this.optionActive = null;
|
|
69541
69618
|
|
|
69542
|
-
|
|
69619
|
+
if (this.dropdown.isBibFullscreen) {
|
|
69620
|
+
restoreTriggerAfterClose(this.dropdown, this.dropdown.trigger);
|
|
69621
|
+
}
|
|
69543
69622
|
}
|
|
69544
69623
|
|
|
69545
69624
|
if (this.dropdown.isPopoverVisible) {
|
|
69546
69625
|
this.updateMenuShapeSize();
|
|
69547
69626
|
|
|
69627
|
+
// If there's a selected option, highlight it (per W3C APG combobox-select-only pattern)
|
|
69628
|
+
// No selection → first enabled option gets highlighted
|
|
69629
|
+
if (this.optionSelected && !Array.isArray(this.optionSelected)) {
|
|
69630
|
+
this.menu.updateActiveOption(this.optionSelected);
|
|
69631
|
+
} else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
|
|
69632
|
+
this.menu.updateActiveOption(this.optionSelected[0]);
|
|
69633
|
+
} else if (!this.menu.optionActive) {
|
|
69634
|
+
// If no activeOption has yet to be set, then make the first enabled option active by default
|
|
69635
|
+
const firstActive = this.menu.menuService.menuOptions.find((option) => !option.disabled);
|
|
69636
|
+
this.menu.updateActiveOption(firstActive);
|
|
69637
|
+
}
|
|
69638
|
+
|
|
69639
|
+
// Scroll the selected option into view when dropdown opens
|
|
69640
|
+
this.scrollSelectedOptionIntoView();
|
|
69548
69641
|
if (this.dropdown.isBibFullscreen) {
|
|
69549
69642
|
// Hide the trigger from assistive technology so VoiceOver cannot reach it
|
|
69550
69643
|
// behind the fullscreen dialog
|
|
@@ -69556,17 +69649,6 @@ class AuroSelect extends AuroElement$1 {
|
|
|
69556
69649
|
// multiple Lit update cycles before moving focus into the bib
|
|
69557
69650
|
doubleRaf(() => {
|
|
69558
69651
|
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
69652
|
});
|
|
69571
69653
|
} else {
|
|
69572
69654
|
// wait til the bib gets fully rendered
|
|
@@ -69813,7 +69895,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
69813
69895
|
configureSelect() {
|
|
69814
69896
|
this.nativeSelect = this.shadowRoot.querySelector('select');
|
|
69815
69897
|
|
|
69816
|
-
applyKeyboardStrategy(this, selectKeyboardStrategy);
|
|
69898
|
+
applyKeyboardStrategy$1(this, selectKeyboardStrategy);
|
|
69817
69899
|
|
|
69818
69900
|
this.addEventListener('focusin', this.handleFocusin);
|
|
69819
69901
|
|
|
@@ -70252,6 +70334,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
70252
70334
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
70253
70335
|
</div>
|
|
70254
70336
|
<${this.dropdownTag}
|
|
70337
|
+
disableKeyboardHandling
|
|
70255
70338
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
70256
70339
|
.a11yRole=${"combobox"}
|
|
70257
70340
|
?autoPlacement="${this.autoPlacement}"
|
|
@@ -70331,6 +70414,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
70331
70414
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
70332
70415
|
</div>
|
|
70333
70416
|
<${this.dropdownTag}
|
|
70417
|
+
disableKeyboardHandling
|
|
70334
70418
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
70335
70419
|
.a11yRole=${"combobox"}
|
|
70336
70420
|
?autoPlacement="${this.autoPlacement}"
|
|
@@ -70416,6 +70500,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
70416
70500
|
<slot name="bib.fullscreen.headline" @slotchange="${this.handleSlotChange}"></slot>
|
|
70417
70501
|
</div>
|
|
70418
70502
|
<${this.dropdownTag}
|
|
70503
|
+
disableKeyboardHandling
|
|
70419
70504
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
70420
70505
|
.a11yRole=${"combobox"}
|
|
70421
70506
|
?autoPlacement="${this.autoPlacement}"
|