@aurodesignsystem-dev/auro-formkit 0.0.0-pr1408.9 → 0.0.0-pr1411.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/checkbox/demo/api.min.js +1 -1
- package/components/checkbox/demo/index.min.js +1 -1
- package/components/checkbox/demo/keyboardBehavior.md +0 -0
- package/components/checkbox/dist/index.js +1 -1
- package/components/checkbox/dist/registered.js +1 -1
- package/components/combobox/demo/api.min.js +121 -144
- package/components/combobox/demo/index.min.js +121 -144
- package/components/combobox/demo/keyboardBehavior.html +1 -0
- package/components/combobox/demo/keyboardBehavior.md +20 -21
- package/components/combobox/dist/index.js +87 -117
- package/components/combobox/dist/registered.js +87 -117
- package/components/counter/demo/api.md +1 -1
- package/components/counter/demo/api.min.js +184 -148
- package/components/counter/demo/index.min.js +184 -148
- package/components/counter/demo/keyboardBehavior.html +1 -0
- package/components/counter/demo/keyboardBehavior.md +1 -1
- package/components/counter/dist/auro-counter.d.ts +11 -8
- package/components/counter/dist/index.js +184 -148
- package/components/counter/dist/keyboardStrategy.d.ts +4 -0
- package/components/counter/dist/registered.js +184 -148
- package/components/datepicker/demo/api.min.js +89 -120
- package/components/datepicker/demo/index.min.js +89 -120
- package/components/datepicker/demo/keyboardBehavior.html +1 -0
- package/components/datepicker/demo/keyboardBehavior.md +14 -13
- package/components/datepicker/dist/index.js +84 -115
- package/components/datepicker/dist/registered.js +84 -115
- package/components/dropdown/demo/api.md +0 -1
- package/components/dropdown/demo/api.min.js +99 -123
- package/components/dropdown/demo/index.md +2 -2
- package/components/dropdown/demo/index.min.js +99 -123
- package/components/dropdown/demo/keyboardBehavior.html +1 -0
- package/components/dropdown/dist/auro-dropdown.d.ts +0 -8
- package/components/dropdown/dist/auro-dropdownBib.d.ts +1 -40
- package/components/dropdown/dist/dropdownBibKeyboardStrategy.d.ts +7 -0
- package/components/dropdown/dist/index.js +83 -111
- package/components/dropdown/dist/registered.js +83 -111
- package/components/form/demo/api.min.js +542 -564
- package/components/form/demo/index.min.js +542 -564
- package/components/form/demo/keyboardBehavior.md +0 -0
- package/components/input/demo/api.min.js +1 -1
- package/components/input/demo/index.min.js +1 -1
- package/components/input/demo/keyboardBehavior.md +0 -0
- package/components/input/dist/index.js +1 -1
- package/components/input/dist/registered.js +1 -1
- package/components/menu/demo/api.min.js +34 -27
- package/components/menu/demo/index.min.js +34 -27
- package/components/menu/dist/auro-menu.d.ts +0 -6
- package/components/menu/dist/index.js +34 -27
- package/components/menu/dist/registered.js +34 -27
- package/components/radio/demo/api.min.js +1 -1
- package/components/radio/demo/index.min.js +1 -1
- package/components/radio/dist/index.js +1 -1
- package/components/radio/dist/registered.js +1 -1
- package/components/select/demo/api.min.js +181 -178
- package/components/select/demo/index.min.js +181 -178
- package/components/select/demo/keyboardBehavior.html +1 -0
- package/components/select/demo/keyboardBehavior.md +240 -239
- package/components/select/dist/index.js +147 -151
- package/components/select/dist/registered.js +147 -151
- package/components/select/dist/selectKeyboardStrategy.d.ts +3 -1
- package/custom-elements.json +101 -83
- package/package.json +5 -3
|
@@ -9290,7 +9290,7 @@ class AuroBibtemplate extends i$1 {
|
|
|
9290
9290
|
}
|
|
9291
9291
|
}
|
|
9292
9292
|
|
|
9293
|
-
var formkitVersion$2 = '
|
|
9293
|
+
var formkitVersion$2 = '202604021512';
|
|
9294
9294
|
|
|
9295
9295
|
let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$5`${s$5(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}};let d$1 = class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}};let h$4 = class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}};var c$3=i$3`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
9296
9296
|
`,u$6=i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
@@ -9784,6 +9784,12 @@ if (!customElements.get('auro-formkit-calendar')) {
|
|
|
9784
9784
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
9785
9785
|
*/const e$1=()=>new h$1;let h$1 = class h{};const o=new WeakMap,n=e$5(class extends f$4{render(i){return A$4}update(i,[s]){const e=s!==this.G;return e&&void 0!==this.G&&this.rt(void 0),(e||this.lt!==this.ct)&&(this.G=s,this.ht=i.options?.host,this.rt(this.ct=i.element)),A$4}rt(t){if(this.isConnected||(t=void 0),"function"==typeof this.G){const i=this.ht??globalThis;let s=o.get(i);void 0===s&&(s=new WeakMap,o.set(i,s)),void 0!==s.get(this.G)&&this.G.call(this.ht,void 0),s.set(this.G,t),void 0!==t&&this.G.call(this.ht,t);}else this.G.value=t;}get lt(){return "function"==typeof this.G?o.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0);}reconnected(){this.rt(this.ct);}});
|
|
9786
9786
|
|
|
9787
|
+
/**
|
|
9788
|
+
* @license
|
|
9789
|
+
* Copyright 2017 Google LLC
|
|
9790
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
9791
|
+
*/class e extends i$4{constructor(i){if(super(i),this.it=A$4,i.type!==t$2.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A$4||null==r)return this._t=void 0,this.it=r;if(r===E$1)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;
|
|
9792
|
+
|
|
9787
9793
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
9788
9794
|
// See LICENSE in the project root for license information.
|
|
9789
9795
|
|
|
@@ -11833,11 +11839,10 @@ class AuroFloatingUI {
|
|
|
11833
11839
|
return;
|
|
11834
11840
|
}
|
|
11835
11841
|
|
|
11836
|
-
const { activeElement } = document;
|
|
11837
11842
|
// if focus is still inside of trigger or bib, do not close
|
|
11838
11843
|
if (
|
|
11839
|
-
this.element.
|
|
11840
|
-
this.element.
|
|
11844
|
+
this.element.matches(":focus") ||
|
|
11845
|
+
this.element.matches(":focus-within")
|
|
11841
11846
|
) {
|
|
11842
11847
|
return;
|
|
11843
11848
|
}
|
|
@@ -12676,12 +12681,83 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
12676
12681
|
|
|
12677
12682
|
var iconVersion$2 = '9.1.2';
|
|
12678
12683
|
|
|
12684
|
+
/**
|
|
12685
|
+
* Computes display state once per keydown event.
|
|
12686
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
12687
|
+
*
|
|
12688
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
12689
|
+
* @param {Object} [options] - Optional config.
|
|
12690
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
12691
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
12692
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
12693
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
12694
|
+
*/
|
|
12695
|
+
function createDisplayContext$1(component, options = {}) {
|
|
12696
|
+
const dd = options.dropdown || component.dropdown;
|
|
12697
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
12698
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
12699
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
12700
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
12701
|
+
|
|
12702
|
+
const ctx = {
|
|
12703
|
+
isExpanded,
|
|
12704
|
+
isModal: isFullscreen,
|
|
12705
|
+
isPopover: !isFullscreen,
|
|
12706
|
+
activeInput: null,
|
|
12707
|
+
};
|
|
12708
|
+
|
|
12709
|
+
if (options.inputResolver) {
|
|
12710
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
12711
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
12712
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
12713
|
+
}
|
|
12714
|
+
|
|
12715
|
+
return ctx;
|
|
12716
|
+
}
|
|
12717
|
+
|
|
12718
|
+
/**
|
|
12719
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
12720
|
+
* Handles both sync and async handlers.
|
|
12721
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
12722
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
12723
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
12724
|
+
*/
|
|
12725
|
+
function applyKeyboardStrategy$1(component, strategy, options = {}) {
|
|
12726
|
+
component.addEventListener('keydown', async (evt) => {
|
|
12727
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
12728
|
+
if (typeof handler === 'function') {
|
|
12729
|
+
const ctx = createDisplayContext$1(component, options);
|
|
12730
|
+
await handler(component, evt, ctx);
|
|
12731
|
+
}
|
|
12732
|
+
});
|
|
12733
|
+
}
|
|
12734
|
+
|
|
12679
12735
|
var styleCss$2$1 = i$3`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host(:popover-open){position:fixed;overflow:visible;padding:0;border:none;margin:0;background:transparent;inset:unset;outline:none}:host([data-show]){display:flex}:host([common]:not([isfullscreen])) .container,:host([rounded]:not([isfullscreen])) .container{border-radius:var(--ds-border-radius, 0.375rem)}:host([common][isfullscreen]) .container,:host([rounded][isfullscreen]) .container{border-radius:unset;box-shadow:unset}.container{display:inline-block;overflow:auto;box-sizing:border-box;border-radius:var(--ds-border-radius, 0.375rem);margin:var(--ds-size-50, 0.25rem) 0}.util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;margin:-1px;clip-path:inset(50%);white-space:nowrap}`;
|
|
12680
12736
|
|
|
12681
12737
|
var colorCss$2 = i$3`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
12682
12738
|
|
|
12683
12739
|
var tokensCss$1$1 = i$3`:host(:not([ondark])),:host(:not([appearance=inverse])){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-dropdown-trigger-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-hover-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db);--ds-auro-dropdown-trigger-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-hover-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: transparent;--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-dropdownbib-boxshadow-color: var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, 0.15));--ds-auro-dropdownbib-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-dropdownbib-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}`;
|
|
12684
12740
|
|
|
12741
|
+
/**
|
|
12742
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
12743
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
12744
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
12745
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
12746
|
+
*/
|
|
12747
|
+
// eslint-disable-next-line no-unused-vars
|
|
12748
|
+
function createDropdownBibKeyboardStrategy(bib) {
|
|
12749
|
+
return {
|
|
12750
|
+
// eslint-disable-next-line no-unused-vars
|
|
12751
|
+
Enter(_dialog, event) {
|
|
12752
|
+
// Floating UI handles Enter key to open the dropdown
|
|
12753
|
+
},
|
|
12754
|
+
// eslint-disable-next-line no-unused-vars
|
|
12755
|
+
Escape(_dialog, event) {
|
|
12756
|
+
// Floating UI handles Escape key to close the dropdown
|
|
12757
|
+
}
|
|
12758
|
+
};
|
|
12759
|
+
}
|
|
12760
|
+
|
|
12685
12761
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12686
12762
|
// See LICENSE in the project root for license information.
|
|
12687
12763
|
/* eslint-disable max-lines */
|
|
@@ -12806,11 +12882,7 @@ class AuroDropdownBib extends i$1 {
|
|
|
12806
12882
|
},
|
|
12807
12883
|
|
|
12808
12884
|
/**
|
|
12809
|
-
*
|
|
12810
|
-
* aria-activedescendant. The dialog keyboard bridge checks this
|
|
12811
|
-
* flag so that Enter selects the highlighted option instead of
|
|
12812
|
-
* activating the focused interactive element (e.g. the trigger
|
|
12813
|
-
* button, or the bibtemplate close button in fullscreen).
|
|
12885
|
+
* Tracks whether a menu option is currently highlighted.
|
|
12814
12886
|
* @private
|
|
12815
12887
|
*/
|
|
12816
12888
|
hasActiveDescendant: {
|
|
@@ -12884,7 +12956,7 @@ class AuroDropdownBib extends i$1 {
|
|
|
12884
12956
|
|
|
12885
12957
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
12886
12958
|
this._setupCancelHandler(dialog);
|
|
12887
|
-
|
|
12959
|
+
applyKeyboardStrategy$1(dialog, createDropdownBibKeyboardStrategy());
|
|
12888
12960
|
|
|
12889
12961
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
12890
12962
|
bubbles: true,
|
|
@@ -12911,92 +12983,6 @@ class AuroDropdownBib extends i$1 {
|
|
|
12911
12983
|
});
|
|
12912
12984
|
}
|
|
12913
12985
|
|
|
12914
|
-
/**
|
|
12915
|
-
* showModal() creates a closed focus scope — keyboard events inside
|
|
12916
|
-
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
12917
|
-
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
12918
|
-
* that gap by re-dispatching navigation keys so they cross the
|
|
12919
|
-
* shadow boundary and reach the menu navigation logic in the parent
|
|
12920
|
-
* component.
|
|
12921
|
-
*
|
|
12922
|
-
* The trade-off: intercepting these keys means native keyboard
|
|
12923
|
-
* behaviors that would normally "just work" must be manually
|
|
12924
|
-
* re-implemented here:
|
|
12925
|
-
*
|
|
12926
|
-
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
12927
|
-
* native Enter→click that <button> provides, so we call .click()
|
|
12928
|
-
* directly when Enter is pressed on a button-like element.
|
|
12929
|
-
*
|
|
12930
|
-
* - Tab: Intercepted and re-dispatched so parent components
|
|
12931
|
-
* (select/combobox) can select the active option and close the
|
|
12932
|
-
* dialog. The <dialog> provides containment and isolation
|
|
12933
|
-
* (inert background, VoiceOver focus trapping, top layer), while
|
|
12934
|
-
* the content inside is a role="listbox" navigated via
|
|
12935
|
-
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
12936
|
-
* behavior follows listbox conventions (select + close) because
|
|
12937
|
-
* the dialog's native Tab trap only cycles between the close
|
|
12938
|
-
* button and browser chrome.
|
|
12939
|
-
*
|
|
12940
|
-
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
12941
|
-
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
12942
|
-
* is a secondary path for parent components that also listen for
|
|
12943
|
-
* Escape keydown.
|
|
12944
|
-
*
|
|
12945
|
-
* @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
|
|
12946
|
-
* @private
|
|
12947
|
-
*/
|
|
12948
|
-
_setupKeyboardBridge(dialog) {
|
|
12949
|
-
const navKeys = new Set([
|
|
12950
|
-
'ArrowUp',
|
|
12951
|
-
'ArrowDown',
|
|
12952
|
-
'Enter',
|
|
12953
|
-
'Escape',
|
|
12954
|
-
'Tab'
|
|
12955
|
-
]);
|
|
12956
|
-
|
|
12957
|
-
dialog.addEventListener('keydown', (event) => {
|
|
12958
|
-
if (!navKeys.has(event.key)) {
|
|
12959
|
-
return;
|
|
12960
|
-
}
|
|
12961
|
-
|
|
12962
|
-
// Custom elements (auro-button) don't get the native Enter→click
|
|
12963
|
-
// behavior that <button> has. Find the button in the composed path
|
|
12964
|
-
// and click it directly — but only when no menu option is
|
|
12965
|
-
// highlighted. In fullscreen mode focus stays on the close button
|
|
12966
|
-
// while arrow keys move the active-descendant highlight through
|
|
12967
|
-
// the listbox. If the user presses Enter with an option
|
|
12968
|
-
// highlighted, the intent is to select that option, not to click
|
|
12969
|
-
// the close button. In that case we fall through and bridge the
|
|
12970
|
-
// Enter key to the parent component's keyboard strategy.
|
|
12971
|
-
if (event.key === 'Enter') {
|
|
12972
|
-
if (!this.hasActiveDescendant) {
|
|
12973
|
-
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
12974
|
-
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
12975
|
-
if (btn) {
|
|
12976
|
-
event.preventDefault();
|
|
12977
|
-
event.stopPropagation();
|
|
12978
|
-
btn.click();
|
|
12979
|
-
return;
|
|
12980
|
-
}
|
|
12981
|
-
}
|
|
12982
|
-
}
|
|
12983
|
-
|
|
12984
|
-
event.preventDefault();
|
|
12985
|
-
event.stopPropagation();
|
|
12986
|
-
const newEvent = new KeyboardEvent('keydown', {
|
|
12987
|
-
key: event.key,
|
|
12988
|
-
code: event.code,
|
|
12989
|
-
shiftKey: event.shiftKey,
|
|
12990
|
-
altKey: event.altKey,
|
|
12991
|
-
ctrlKey: event.ctrlKey,
|
|
12992
|
-
metaKey: event.metaKey,
|
|
12993
|
-
bubbles: true,
|
|
12994
|
-
composed: true,
|
|
12995
|
-
cancelable: true
|
|
12996
|
-
});
|
|
12997
|
-
this.dispatchEvent(newEvent);
|
|
12998
|
-
});
|
|
12999
|
-
}
|
|
13000
12986
|
|
|
13001
12987
|
/**
|
|
13002
12988
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -13371,7 +13357,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$1 {
|
|
|
13371
13357
|
}
|
|
13372
13358
|
};
|
|
13373
13359
|
|
|
13374
|
-
var formkitVersion$1 = '
|
|
13360
|
+
var formkitVersion$1 = '202604021512';
|
|
13375
13361
|
|
|
13376
13362
|
let AuroElement$2 = class AuroElement extends i$1 {
|
|
13377
13363
|
static get properties() {
|
|
@@ -13552,7 +13538,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
13552
13538
|
this.appearance = 'default';
|
|
13553
13539
|
this.chevron = false;
|
|
13554
13540
|
this.disabled = false;
|
|
13555
|
-
this.disableFocusTrap = false;
|
|
13556
13541
|
this.error = false;
|
|
13557
13542
|
this.tabIndex = 0;
|
|
13558
13543
|
this.noToggle = false;
|
|
@@ -13650,9 +13635,8 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
13650
13635
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
13651
13636
|
// falls outside the user activation window and causes iOS to
|
|
13652
13637
|
// dismiss the keyboard.
|
|
13653
|
-
if (this.
|
|
13654
|
-
|
|
13655
|
-
this.bibElement.value.open(useModal);
|
|
13638
|
+
if (this.bibElement && this.bibElement.value) {
|
|
13639
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
13656
13640
|
}
|
|
13657
13641
|
}
|
|
13658
13642
|
|
|
@@ -13765,14 +13749,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
13765
13749
|
reflect: true
|
|
13766
13750
|
},
|
|
13767
13751
|
|
|
13768
|
-
/**
|
|
13769
|
-
* If declared, the focus trap inside of bib will be turned off.
|
|
13770
|
-
*/
|
|
13771
|
-
disableFocusTrap: {
|
|
13772
|
-
type: Boolean,
|
|
13773
|
-
reflect: true
|
|
13774
|
-
},
|
|
13775
|
-
|
|
13776
13752
|
/**
|
|
13777
13753
|
* @private
|
|
13778
13754
|
*/
|
|
@@ -14046,7 +14022,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
14046
14022
|
if (this.isPopoverVisible) {
|
|
14047
14023
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
14048
14024
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
14049
|
-
const useModal = this.isBibFullscreen
|
|
14025
|
+
const useModal = this.isBibFullscreen;
|
|
14050
14026
|
this.bibElement.value.open(useModal);
|
|
14051
14027
|
} else {
|
|
14052
14028
|
this.bibElement.value.close();
|
|
@@ -14056,7 +14032,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
14056
14032
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
14057
14033
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
14058
14034
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
14059
|
-
const useModal = this.isBibFullscreen
|
|
14035
|
+
const useModal = this.isBibFullscreen;
|
|
14060
14036
|
this.bibElement.value.close();
|
|
14061
14037
|
this.bibElement.value.open(useModal);
|
|
14062
14038
|
}
|
|
@@ -14168,7 +14144,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
14168
14144
|
* @private
|
|
14169
14145
|
*/
|
|
14170
14146
|
updateFocusTrap() {
|
|
14171
|
-
if (this.isPopoverVisible
|
|
14147
|
+
if (this.isPopoverVisible) {
|
|
14172
14148
|
if (!this.isBibFullscreen) {
|
|
14173
14149
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
14174
14150
|
this.focusTrap = new FocusTrap(this.bibContent);
|
|
@@ -21135,7 +21111,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$1 {
|
|
|
21135
21111
|
}
|
|
21136
21112
|
};
|
|
21137
21113
|
|
|
21138
|
-
var formkitVersion = '
|
|
21114
|
+
var formkitVersion = '202604021512';
|
|
21139
21115
|
|
|
21140
21116
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
21141
21117
|
// See LICENSE in the project root for license information.
|
|
@@ -22330,12 +22306,6 @@ function restoreTriggerAfterClose(dropdown, focusTarget) {
|
|
|
22330
22306
|
});
|
|
22331
22307
|
}
|
|
22332
22308
|
|
|
22333
|
-
/**
|
|
22334
|
-
* @license
|
|
22335
|
-
* Copyright 2017 Google LLC
|
|
22336
|
-
* SPDX-License-Identifier: BSD-3-Clause
|
|
22337
|
-
*/class e extends i$4{constructor(i){if(super(i),this.it=A$4,i.type!==t$2.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A$4||null==r)return this._t=void 0,this.it=r;if(r===E$1)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;
|
|
22338
|
-
|
|
22339
22309
|
/**
|
|
22340
22310
|
* Computes display state once per keydown event.
|
|
22341
22311
|
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
@@ -24304,7 +24274,6 @@ class AuroDatePicker extends AuroElement {
|
|
|
24304
24274
|
.size="${this.size}"
|
|
24305
24275
|
class="${e$4(dropdownElementClassMap)}"
|
|
24306
24276
|
disableEventShow
|
|
24307
|
-
disableFocusTrap
|
|
24308
24277
|
for="dropdownMenu"
|
|
24309
24278
|
part="dropdown"
|
|
24310
24279
|
>
|
|
@@ -76,5 +76,6 @@
|
|
|
76
76
|
|
|
77
77
|
<!-- If additional elements are needed for the demo, add them here. -->
|
|
78
78
|
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-header@latest/+esm" type="module"></script>
|
|
79
|
+
<script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-hyperlink@latest/+esm" type="module"></script>
|
|
79
80
|
</body>
|
|
80
81
|
</html>
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
<auro-header level="1" id="overview">Datepicker - Keyboard Behavior</auro-header>
|
|
2
2
|
<div class="contentWrapper">
|
|
3
3
|
<div class="mainContent">
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
4
|
+
<div class="scrollWrapper">
|
|
5
|
+
<auro-header level="2" id="tabBehavior">Tab Behavior</auro-header>
|
|
6
|
+
<p>The component trigger contains <code><auro-input></code> element(s) which each have two focusable elements:</p>
|
|
7
|
+
<ol>
|
|
8
|
+
<li><strong>Input</strong></li>
|
|
9
|
+
<li><strong>Clear button:</strong> only shown when the input has a value.</li>
|
|
10
|
+
</ol>
|
|
11
|
+
<p>Each focusable element <em>(when shown)</em> participates in the browser window's default <code>tabindex</code> sequence.</p>
|
|
12
|
+
<p>When the component is <code>disabled</code> it is removed from the <code>tabindex</code> sequence. VoiceOver's virtual cursor <em>(swipe navigation)</em> can still encounter the component, but standard keyboard <code>Tab</code> navigation skips it.</p>
|
|
13
|
+
<div class="note">
|
|
14
|
+
<p><strong>Note:</strong> The current implementation <strong>DOES</strong> support full interaction of the bib content and calendar with touch, click and VoiceOver interactions.</p>
|
|
15
|
+
<p>The current implementation of the component <strong>DOES</strong> support using the keyboard to navigate the trigger and type dates via the keyboard. It <strong>DOES NOT</strong> support navigating the bib content and calendar via the keyboard. This functionality is scheduled to be added in the next major redesign of the component.</p>
|
|
16
|
+
</div>
|
|
16
17
|
</div>
|
|
17
18
|
</div>
|
|
18
19
|
</div>
|
|
19
20
|
|
|
20
21
|
## DEVELOPER NOTES / CODE ACTION ITEMS / TODO ITEMS
|
|
21
22
|
1. Remove the bridge for keyboard event bubbling out of the bib
|
|
22
|
-
1. Prevent auro-dropdown `Enter` and `Space` key behavior for opening and closing the bib. Preserve `
|
|
23
|
+
1. Prevent auro-dropdown `Enter` and `Space` key behavior for opening and closing the bib. Preserve `Escape` key to close.
|
|
23
24
|
1. Strip out key event listeners not listed in this document
|