@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
|
@@ -30,7 +30,7 @@ function customExample() {
|
|
|
30
30
|
* Copyright 2017 Google LLC
|
|
31
31
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
32
32
|
*/
|
|
33
|
-
const t$2=globalThis,i$5=t=>t,s$4=t$2.trustedTypes,e$
|
|
33
|
+
const t$2=globalThis,i$5=t=>t,s$4=t$2.trustedTypes,e$6=s$4?s$4.createPolicy("lit-html",{createHTML:t=>t}):void 0,h$3="$lit$",o$7=`lit$${Math.random().toFixed(9).slice(2)}$`,n$5="?"+o$7,r$4=`<${n$5}>`,l$2=document,c$3=()=>l$2.createComment(""),a$2=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u$3=Array.isArray,d$1=t=>u$3(t)||"function"==typeof t?.[Symbol.iterator],f$3="[ \t\n\f\r]",v=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_$1=/-->/g,m$1=/>/g,p$2=RegExp(`>|${f$3}(?:([^\\s"'>=/]+)(${f$3}*=${f$3}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g$1=/'/g,$=/"/g,y$2=/^(?:script|style|textarea|title)$/i,x$1=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b$1=x$1(1),E=Symbol.for("lit-noChange"),A=Symbol.for("lit-nothing"),C=new WeakMap,P=l$2.createTreeWalker(l$2,129);function V(t,i){if(!u$3(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$6?e$6.createHTML(i):i}const N=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,f=0;for(;f<s.length&&(c.lastIndex=f,u=c.exec(s),null!==u);)f=c.lastIndex,c===v?"!--"===u[1]?c=_$1:void 0!==u[1]?c=m$1:void 0!==u[2]?(y$2.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p$2):void 0!==u[3]&&(c=p$2):c===p$2?">"===u[0]?(c=n??v,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p$2:'"'===u[3]?$:g$1):c===$||c===g$1?c=p$2:c===_$1||c===m$1?c=v:(c=p$2,n=void 0);const x=c===p$2&&t[i+1].startsWith("/>")?" ":"";l+=c===v?s+r$4:d>=0?(e.push(a),s.slice(0,d)+h$3+s.slice(d)+o$7+x):s+o$7+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};let S$1 = class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h$3)){const i=v[a++],s=r.getAttribute(t).split(o$7),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z$1:H}),r.removeAttribute(t);}else t.startsWith(o$7)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y$2.test(r.tagName)){const t=r.textContent.split(o$7),i=t.length-1;if(i>0){r.textContent=s$4?s$4.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c$3()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c$3());}}}else if(8===r.nodeType)if(r.data===n$5)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$7,t+1));)d.push({type:7,index:l}),t+=o$7.length-1;}l++;}}static createElement(t,i){const s=l$2.createElement("template");return s.innerHTML=t,s}};function M(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a$2(i)?void 0:i._$litDirective$;return h?.constructor!==o&&(h?._$AO?.(false),void 0===o?h=void 0:(h=new o(t),h._$AT(t,s,e)),void 0!==e?(s._$Co??=[])[e]=h:s._$Cl=h),void 0!==h&&(i=M(t,h._$AS(t,i.values),h,e)),i}class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??l$2).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l$2,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A,this._$AN=void 0,this._$AA=t,this._$AB=i,this._$AM=s,this.options=e,this._$Cv=e?.isConnected??true;}get parentNode(){let t=this._$AA.parentNode;const i=this._$AM;return void 0!==i&&11===t?.nodeType&&(t=i.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,i=this){t=M(this,t,i),a$2(t)?t===A||null==t||""===t?(this._$AH!==A&&this._$AR(),this._$AH=A):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d$1(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==A&&a$2(this._$AH)?this._$AA.nextSibling.data=t:this.T(l$2.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=S$1.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C.get(t.strings);return void 0===i&&C.set(t.strings,i=new S$1(t)),i}k(t){u$3(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new k(this.O(c$3()),this.O(c$3()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$5(t).nextSibling;i$5(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}class H{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=A,this._$AN=void 0,this.element=t,this.name=i,this._$AM=e,this.options=h,s.length>2||""!==s[0]||""!==s[1]?(this._$AH=Array(s.length-1).fill(new String),this.strings=s):this._$AH=A;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M(this,t,i,0),o=!a$2(t)||t!==this._$AH&&t!==E,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=M(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a$2(r)||r!==this._$AH[n],r===A?t=A:t!==A&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}}class I extends H{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A?void 0:t;}}class L extends H{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A);}}let z$1 = class z extends H{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M(this,t,i,0)??A)===E)return;const s=this._$AH,e=t===A&&s!==A||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A&&(s===A||e);e&&this.element.removeEventListener(this.name,this,s),h&&this.element.addEventListener(this.name,this,t),this._$AH=t;}handleEvent(t){"function"==typeof this._$AH?this._$AH.call(this.options?.host??this.element,t):this._$AH.handleEvent(t);}};class Z{constructor(t,i,s){this.element=t,this.type=6,this._$AN=void 0,this._$AM=i,this.options=s;}get _$AU(){return this._$AM._$AU}_$AI(t){M(this,t);}}const B=t$2.litHtmlPolyfillSupport;B?.(S$1,k),(t$2.litHtmlVersions??=[]).push("3.3.2");const D=(t,i,s)=>{const e=s?.renderBefore??i;let h=e._$litPart$;if(void 0===h){const t=s?.renderBefore??null;e._$litPart$=h=new k(i.insertBefore(c$3(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
34
34
|
|
|
35
35
|
/**
|
|
36
36
|
* @license
|
|
@@ -44,13 +44,13 @@ const a$1=Symbol.for(""),o$6=t=>{if(t?.r===a$1)return t?._$litStatic$},s$3=t=>({
|
|
|
44
44
|
* Copyright 2017 Google LLC
|
|
45
45
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
46
46
|
*/
|
|
47
|
-
const t$1={ATTRIBUTE:1,CHILD:2},e$
|
|
47
|
+
const t$1={ATTRIBUTE:1,CHILD:2},e$5=t=>(...e)=>({_$litDirective$:t,values:e});let i$3 = class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}};
|
|
48
48
|
|
|
49
49
|
/**
|
|
50
50
|
* @license
|
|
51
51
|
* Copyright 2018 Google LLC
|
|
52
52
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
53
|
-
*/const e$
|
|
53
|
+
*/const e$4=e$5(class extends i$3{constructor(t){if(super(t),t.type!==t$1.ATTRIBUTE||"class"!==t.name||t.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter(s=>t[s]).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter(t=>""!==t)));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return E}});
|
|
54
54
|
|
|
55
55
|
/**
|
|
56
56
|
* @license
|
|
@@ -68,7 +68,7 @@ const t$1={ATTRIBUTE:1,CHILD:2},e$4=t=>(...e)=>({_$litDirective$:t,values:e});le
|
|
|
68
68
|
* @license
|
|
69
69
|
* Copyright 2020 Google LLC
|
|
70
70
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
71
|
-
*/const e$
|
|
71
|
+
*/const e$3=()=>new h$1;let h$1 = class h{};const o$4=new WeakMap,n$2=e$5(class extends f$2{render(i){return A}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}rt(t){if(this.isConnected||(t=void 0),"function"==typeof this.G){const i=this.ht??globalThis;let s=o$4.get(i);void 0===s&&(s=new WeakMap,o$4.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$4.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0);}reconnected(){this.rt(this.ct);}});
|
|
72
72
|
|
|
73
73
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
74
74
|
// See LICENSE in the project root for license information.
|
|
@@ -1859,6 +1859,11 @@ class AuroFloatingUI {
|
|
|
1859
1859
|
this.clickHandler = null;
|
|
1860
1860
|
this.keyDownHandler = null;
|
|
1861
1861
|
|
|
1862
|
+
/**
|
|
1863
|
+
* @private
|
|
1864
|
+
*/
|
|
1865
|
+
this.enableKeyboardHandling = true;
|
|
1866
|
+
|
|
1862
1867
|
/**
|
|
1863
1868
|
* @private
|
|
1864
1869
|
*/
|
|
@@ -2119,11 +2124,10 @@ class AuroFloatingUI {
|
|
|
2119
2124
|
return;
|
|
2120
2125
|
}
|
|
2121
2126
|
|
|
2122
|
-
const { activeElement } = document;
|
|
2123
2127
|
// if focus is still inside of trigger or bib, do not close
|
|
2124
2128
|
if (
|
|
2125
|
-
this.element.
|
|
2126
|
-
this.element.
|
|
2129
|
+
this.element.matches(":focus") ||
|
|
2130
|
+
this.element.matches(":focus-within")
|
|
2127
2131
|
) {
|
|
2128
2132
|
return;
|
|
2129
2133
|
}
|
|
@@ -2194,7 +2198,9 @@ class AuroFloatingUI {
|
|
|
2194
2198
|
document.addEventListener("focusin", this.focusHandler);
|
|
2195
2199
|
}
|
|
2196
2200
|
|
|
2197
|
-
|
|
2201
|
+
if (this.enableKeyboardHandling) {
|
|
2202
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
2203
|
+
}
|
|
2198
2204
|
|
|
2199
2205
|
// send this task to the end of queue to prevent conflicting
|
|
2200
2206
|
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
@@ -2450,8 +2456,9 @@ class AuroFloatingUI {
|
|
|
2450
2456
|
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
2451
2457
|
}
|
|
2452
2458
|
|
|
2453
|
-
configure(elem, eventPrefix) {
|
|
2459
|
+
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
2454
2460
|
AuroFloatingUI.setupMousePressChecker();
|
|
2461
|
+
this.enableKeyboardHandling = enableKeyboardHandling;
|
|
2455
2462
|
|
|
2456
2463
|
this.eventPrefix = eventPrefix;
|
|
2457
2464
|
if (this.element !== elem) {
|
|
@@ -2484,7 +2491,9 @@ class AuroFloatingUI {
|
|
|
2484
2491
|
|
|
2485
2492
|
this.handleEvent = this.handleEvent.bind(this);
|
|
2486
2493
|
if (this.element.trigger) {
|
|
2487
|
-
|
|
2494
|
+
if (this.enableKeyboardHandling) {
|
|
2495
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
2496
|
+
}
|
|
2488
2497
|
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
2489
2498
|
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
2490
2499
|
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
@@ -2941,13 +2950,13 @@ class AuroDependencyVersioning {
|
|
|
2941
2950
|
* Copyright 2019 Google LLC
|
|
2942
2951
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
2943
2952
|
*/
|
|
2944
|
-
const t=globalThis,e$
|
|
2953
|
+
const t=globalThis,e$2=t.ShadowRoot&&(void 0===t.ShadyCSS||t.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$3=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$2&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$1=t=>new n$1("string"==typeof t?t:t+"",void 0,s$1),i$2=(t,...e)=>{const o=1===t.length?t[0]:e.reduce((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1],t[0]);return new n$1(o,t,s$1)},S=(s,o)=>{if(e$2)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$1=e$2?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$1(e)})(t):t;
|
|
2945
2954
|
|
|
2946
2955
|
/**
|
|
2947
2956
|
* @license
|
|
2948
2957
|
* Copyright 2017 Google LLC
|
|
2949
2958
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
2950
|
-
*/const{is:i$1,defineProperty:e,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p$1=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;let y$1 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM();}updated(t){}firstUpdated(t){}};y$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d("elementProperties")]=new Map,y$1[d("finalized")]=new Map,p$1?.({ReactiveElement:y$1}),(a.reactiveElementVersions??=[]).push("2.1.2");
|
|
2959
|
+
*/const{is:i$1,defineProperty:e$1,getOwnPropertyDescriptor:h,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c=a.trustedTypes,l=c?c.emptyScript:"",p$1=a.reactiveElementPolyfillSupport,d=(t,s)=>t,u$1={toAttribute(t,s){switch(s){case Boolean:t=t?l:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$1(t,s),b={attribute:true,type:String,converter:u$1,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;let y$1 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$1(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b}static _$Ei(){if(this.hasOwnProperty(d("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$1(s));}else void 0!==s&&i.push(c$1(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise(t=>this.enableUpdating=t),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach(t=>t(this));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach(t=>t.hostConnected?.());}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach(t=>t.hostDisconnected?.());}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$1).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$1;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i,e=false,h){if(void 0!==t){const r=this.constructor;if(false===e&&(h=this[t]),i??=r.getPropertyOptions(t),!((i.hasChanged??f$1)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(r._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach(t=>t.hostUpdate?.()),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach(t=>t.hostUpdated?.()),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach(t=>this._$ET(t,this[t])),this._$EM();}updated(t){}firstUpdated(t){}};y$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d("elementProperties")]=new Map,y$1[d("finalized")]=new Map,p$1?.({ReactiveElement:y$1}),(a.reactiveElementVersions??=[]).push("2.1.2");
|
|
2951
2960
|
|
|
2952
2961
|
/**
|
|
2953
2962
|
* @license
|
|
@@ -2968,7 +2977,7 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
2968
2977
|
`;class _ extends z{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...z.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z.styles,y,w,x]}static register(t="auro-icon"){p.prototype.registerComponent(t,_);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return b$1`
|
|
2969
2978
|
<div class="componentWrapper">
|
|
2970
2979
|
<div
|
|
2971
|
-
class="${e$
|
|
2980
|
+
class="${e$4({svgWrapper:true})}"
|
|
2972
2981
|
title="${o(this.title||void 0)}">
|
|
2973
2982
|
<span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
|
|
2974
2983
|
${this.customSvg?b$1`
|
|
@@ -2979,7 +2988,7 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
2979
2988
|
</span>
|
|
2980
2989
|
</div>
|
|
2981
2990
|
|
|
2982
|
-
<div class="${e$
|
|
2991
|
+
<div class="${e$4(t)}" part="label">
|
|
2983
2992
|
<slot></slot>
|
|
2984
2993
|
</div>
|
|
2985
2994
|
</div>
|
|
@@ -2987,12 +2996,89 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
2987
2996
|
|
|
2988
2997
|
var iconVersion = '9.1.2';
|
|
2989
2998
|
|
|
2999
|
+
/**
|
|
3000
|
+
* @license
|
|
3001
|
+
* Copyright 2017 Google LLC
|
|
3002
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
3003
|
+
*/class e extends i$3{constructor(i){if(super(i),this.it=A,i.type!==t$1.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A||null==r)return this._t=void 0,this.it=r;if(r===E)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;
|
|
3004
|
+
|
|
3005
|
+
/**
|
|
3006
|
+
* Computes display state once per keydown event.
|
|
3007
|
+
* Centralizes null-safety checks and makes the shared/modal/popover branching explicit.
|
|
3008
|
+
*
|
|
3009
|
+
* @param {HTMLElement} component - The component with a dropdown reference.
|
|
3010
|
+
* @param {Object} [options] - Optional config.
|
|
3011
|
+
* @param {HTMLElement} [options.dropdown] - Explicit dropdown reference. Falls back to component.dropdown.
|
|
3012
|
+
* @param {Function} [options.inputResolver] - Called with (component, ctx) to resolve the active input element.
|
|
3013
|
+
* @returns {{isExpanded: boolean, isModal: boolean, isPopover: boolean, activeInput: HTMLElement|null}}
|
|
3014
|
+
* isModal and isPopover reflect the display mode (fullscreen vs not) regardless of expanded state.
|
|
3015
|
+
*/
|
|
3016
|
+
function createDisplayContext(component, options = {}) {
|
|
3017
|
+
const dd = options.dropdown || component.dropdown;
|
|
3018
|
+
// isPopoverVisible reflects as the `open` attribute.
|
|
3019
|
+
// It reports whether the bib is open in any mode (popover or modal).
|
|
3020
|
+
const isExpanded = Boolean(dd && dd.isPopoverVisible);
|
|
3021
|
+
const isFullscreen = Boolean(dd && dd.isBibFullscreen);
|
|
3022
|
+
|
|
3023
|
+
const ctx = {
|
|
3024
|
+
isExpanded,
|
|
3025
|
+
isModal: isFullscreen,
|
|
3026
|
+
isPopover: !isFullscreen,
|
|
3027
|
+
activeInput: null,
|
|
3028
|
+
};
|
|
3029
|
+
|
|
3030
|
+
if (options.inputResolver) {
|
|
3031
|
+
const resolvedInput = options.inputResolver(component, ctx);
|
|
3032
|
+
// Guard against resolvers returning undefined or non-HTMLElement values.
|
|
3033
|
+
ctx.activeInput = resolvedInput instanceof HTMLElement ? resolvedInput : null;
|
|
3034
|
+
}
|
|
3035
|
+
|
|
3036
|
+
return ctx;
|
|
3037
|
+
}
|
|
3038
|
+
|
|
3039
|
+
/**
|
|
3040
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
3041
|
+
* Handles both sync and async handlers.
|
|
3042
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
3043
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
3044
|
+
* @param {Object} [options] - Optional config passed to createDisplayContext.
|
|
3045
|
+
*/
|
|
3046
|
+
function applyKeyboardStrategy(component, strategy, options = {}) {
|
|
3047
|
+
component.addEventListener('keydown', async (evt) => {
|
|
3048
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
3049
|
+
if (typeof handler === 'function') {
|
|
3050
|
+
const ctx = createDisplayContext(component, options);
|
|
3051
|
+
await handler(component, evt, ctx);
|
|
3052
|
+
}
|
|
3053
|
+
});
|
|
3054
|
+
}
|
|
3055
|
+
|
|
2990
3056
|
var styleCss$2 = i$2`: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}`;
|
|
2991
3057
|
|
|
2992
3058
|
var colorCss$2 = i$2`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
2993
3059
|
|
|
2994
3060
|
var tokensCss$1 = i$2`: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)}`;
|
|
2995
3061
|
|
|
3062
|
+
/**
|
|
3063
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
3064
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
3065
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
3066
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
3067
|
+
*/
|
|
3068
|
+
// eslint-disable-next-line no-unused-vars
|
|
3069
|
+
function createDropdownBibKeyboardStrategy(bib) {
|
|
3070
|
+
return {
|
|
3071
|
+
// eslint-disable-next-line no-unused-vars
|
|
3072
|
+
Enter(_dialog, event) {
|
|
3073
|
+
// Floating UI handles Enter key to open the dropdown
|
|
3074
|
+
},
|
|
3075
|
+
// eslint-disable-next-line no-unused-vars
|
|
3076
|
+
Escape(_dialog, event) {
|
|
3077
|
+
// Floating UI handles Escape key to close the dropdown
|
|
3078
|
+
}
|
|
3079
|
+
};
|
|
3080
|
+
}
|
|
3081
|
+
|
|
2996
3082
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
2997
3083
|
// See LICENSE in the project root for license information.
|
|
2998
3084
|
/* eslint-disable max-lines */
|
|
@@ -3117,11 +3203,7 @@ class AuroDropdownBib extends i {
|
|
|
3117
3203
|
},
|
|
3118
3204
|
|
|
3119
3205
|
/**
|
|
3120
|
-
*
|
|
3121
|
-
* aria-activedescendant. The dialog keyboard bridge checks this
|
|
3122
|
-
* flag so that Enter selects the highlighted option instead of
|
|
3123
|
-
* activating the focused interactive element (e.g. the trigger
|
|
3124
|
-
* button, or the bibtemplate close button in fullscreen).
|
|
3206
|
+
* Tracks whether a menu option is currently highlighted.
|
|
3125
3207
|
* @private
|
|
3126
3208
|
*/
|
|
3127
3209
|
hasActiveDescendant: {
|
|
@@ -3195,7 +3277,7 @@ class AuroDropdownBib extends i {
|
|
|
3195
3277
|
|
|
3196
3278
|
const dialog = this.shadowRoot.querySelector('dialog');
|
|
3197
3279
|
this._setupCancelHandler(dialog);
|
|
3198
|
-
|
|
3280
|
+
applyKeyboardStrategy(dialog, createDropdownBibKeyboardStrategy());
|
|
3199
3281
|
|
|
3200
3282
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
3201
3283
|
bubbles: true,
|
|
@@ -3222,92 +3304,6 @@ class AuroDropdownBib extends i {
|
|
|
3222
3304
|
});
|
|
3223
3305
|
}
|
|
3224
3306
|
|
|
3225
|
-
/**
|
|
3226
|
-
* showModal() creates a closed focus scope — keyboard events inside
|
|
3227
|
-
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
3228
|
-
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
3229
|
-
* that gap by re-dispatching navigation keys so they cross the
|
|
3230
|
-
* shadow boundary and reach the menu navigation logic in the parent
|
|
3231
|
-
* component.
|
|
3232
|
-
*
|
|
3233
|
-
* The trade-off: intercepting these keys means native keyboard
|
|
3234
|
-
* behaviors that would normally "just work" must be manually
|
|
3235
|
-
* re-implemented here:
|
|
3236
|
-
*
|
|
3237
|
-
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
3238
|
-
* native Enter→click that <button> provides, so we call .click()
|
|
3239
|
-
* directly when Enter is pressed on a button-like element.
|
|
3240
|
-
*
|
|
3241
|
-
* - Tab: Intercepted and re-dispatched so parent components
|
|
3242
|
-
* (select/combobox) can select the active option and close the
|
|
3243
|
-
* dialog. The <dialog> provides containment and isolation
|
|
3244
|
-
* (inert background, VoiceOver focus trapping, top layer), while
|
|
3245
|
-
* the content inside is a role="listbox" navigated via
|
|
3246
|
-
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
3247
|
-
* behavior follows listbox conventions (select + close) because
|
|
3248
|
-
* the dialog's native Tab trap only cycles between the close
|
|
3249
|
-
* button and browser chrome.
|
|
3250
|
-
*
|
|
3251
|
-
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
3252
|
-
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
3253
|
-
* is a secondary path for parent components that also listen for
|
|
3254
|
-
* Escape keydown.
|
|
3255
|
-
*
|
|
3256
|
-
* @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
|
|
3257
|
-
* @private
|
|
3258
|
-
*/
|
|
3259
|
-
_setupKeyboardBridge(dialog) {
|
|
3260
|
-
const navKeys = new Set([
|
|
3261
|
-
'ArrowUp',
|
|
3262
|
-
'ArrowDown',
|
|
3263
|
-
'Enter',
|
|
3264
|
-
'Escape',
|
|
3265
|
-
'Tab'
|
|
3266
|
-
]);
|
|
3267
|
-
|
|
3268
|
-
dialog.addEventListener('keydown', (event) => {
|
|
3269
|
-
if (!navKeys.has(event.key)) {
|
|
3270
|
-
return;
|
|
3271
|
-
}
|
|
3272
|
-
|
|
3273
|
-
// Custom elements (auro-button) don't get the native Enter→click
|
|
3274
|
-
// behavior that <button> has. Find the button in the composed path
|
|
3275
|
-
// and click it directly — but only when no menu option is
|
|
3276
|
-
// highlighted. In fullscreen mode focus stays on the close button
|
|
3277
|
-
// while arrow keys move the active-descendant highlight through
|
|
3278
|
-
// the listbox. If the user presses Enter with an option
|
|
3279
|
-
// highlighted, the intent is to select that option, not to click
|
|
3280
|
-
// the close button. In that case we fall through and bridge the
|
|
3281
|
-
// Enter key to the parent component's keyboard strategy.
|
|
3282
|
-
if (event.key === 'Enter') {
|
|
3283
|
-
if (!this.hasActiveDescendant) {
|
|
3284
|
-
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
3285
|
-
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
3286
|
-
if (btn) {
|
|
3287
|
-
event.preventDefault();
|
|
3288
|
-
event.stopPropagation();
|
|
3289
|
-
btn.click();
|
|
3290
|
-
return;
|
|
3291
|
-
}
|
|
3292
|
-
}
|
|
3293
|
-
}
|
|
3294
|
-
|
|
3295
|
-
event.preventDefault();
|
|
3296
|
-
event.stopPropagation();
|
|
3297
|
-
const newEvent = new KeyboardEvent('keydown', {
|
|
3298
|
-
key: event.key,
|
|
3299
|
-
code: event.code,
|
|
3300
|
-
shiftKey: event.shiftKey,
|
|
3301
|
-
altKey: event.altKey,
|
|
3302
|
-
ctrlKey: event.ctrlKey,
|
|
3303
|
-
metaKey: event.metaKey,
|
|
3304
|
-
bubbles: true,
|
|
3305
|
-
composed: true,
|
|
3306
|
-
cancelable: true
|
|
3307
|
-
});
|
|
3308
|
-
this.dispatchEvent(newEvent);
|
|
3309
|
-
});
|
|
3310
|
-
}
|
|
3311
3307
|
|
|
3312
3308
|
/**
|
|
3313
3309
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
@@ -3432,7 +3428,7 @@ class AuroDropdownBib extends i {
|
|
|
3432
3428
|
classes[`shape-${this.shape}`] = true;
|
|
3433
3429
|
|
|
3434
3430
|
return u$2`
|
|
3435
|
-
<dialog class="${e$
|
|
3431
|
+
<dialog class="${e$4(classes)}" part="bibContainer" role="${o(this.dialogRole)}" aria-labelledby="${o(this.dialogLabel ? 'dialogLabel' : undefined)}">
|
|
3436
3432
|
${this.dialogLabel ? u$2`<span id="dialogLabel" class="util_displayHiddenVisually">${this.dialogLabel}</span>` : ''}
|
|
3437
3433
|
<slot></slot>
|
|
3438
3434
|
</dialog>
|
|
@@ -3682,7 +3678,7 @@ class AuroHelpText extends i {
|
|
|
3682
3678
|
}
|
|
3683
3679
|
}
|
|
3684
3680
|
|
|
3685
|
-
var formkitVersion = '
|
|
3681
|
+
var formkitVersion = '202604022013';
|
|
3686
3682
|
|
|
3687
3683
|
class AuroElement extends i {
|
|
3688
3684
|
static get properties() {
|
|
@@ -3836,7 +3832,7 @@ class AuroDropdown extends AuroElement {
|
|
|
3836
3832
|
this.handleDropdownToggle = this.handleDropdownToggle.bind(this);
|
|
3837
3833
|
|
|
3838
3834
|
/** @private */
|
|
3839
|
-
this.bibElement = e$
|
|
3835
|
+
this.bibElement = e$3();
|
|
3840
3836
|
|
|
3841
3837
|
this._intializeDefaults();
|
|
3842
3838
|
}
|
|
@@ -3863,7 +3859,7 @@ class AuroDropdown extends AuroElement {
|
|
|
3863
3859
|
this.appearance = 'default';
|
|
3864
3860
|
this.chevron = false;
|
|
3865
3861
|
this.disabled = false;
|
|
3866
|
-
this.
|
|
3862
|
+
this.disableKeyboardHandling = false;
|
|
3867
3863
|
this.error = false;
|
|
3868
3864
|
this.tabIndex = 0;
|
|
3869
3865
|
this.noToggle = false;
|
|
@@ -3961,9 +3957,8 @@ class AuroDropdown extends AuroElement {
|
|
|
3961
3957
|
// showModal() fires asynchronously via Lit's update cycle, which
|
|
3962
3958
|
// falls outside the user activation window and causes iOS to
|
|
3963
3959
|
// dismiss the keyboard.
|
|
3964
|
-
if (this.
|
|
3965
|
-
|
|
3966
|
-
this.bibElement.value.open(useModal);
|
|
3960
|
+
if (this.bibElement && this.bibElement.value) {
|
|
3961
|
+
this.bibElement.value.open(this.isBibFullscreen);
|
|
3967
3962
|
}
|
|
3968
3963
|
}
|
|
3969
3964
|
|
|
@@ -4077,9 +4072,9 @@ class AuroDropdown extends AuroElement {
|
|
|
4077
4072
|
},
|
|
4078
4073
|
|
|
4079
4074
|
/**
|
|
4080
|
-
* If declared, the
|
|
4075
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
4081
4076
|
*/
|
|
4082
|
-
|
|
4077
|
+
disableKeyboardHandling: {
|
|
4083
4078
|
type: Boolean,
|
|
4084
4079
|
reflect: true
|
|
4085
4080
|
},
|
|
@@ -4357,7 +4352,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4357
4352
|
if (this.isPopoverVisible) {
|
|
4358
4353
|
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
4359
4354
|
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
4360
|
-
const useModal = this.isBibFullscreen
|
|
4355
|
+
const useModal = this.isBibFullscreen;
|
|
4361
4356
|
this.bibElement.value.open(useModal);
|
|
4362
4357
|
} else {
|
|
4363
4358
|
this.bibElement.value.close();
|
|
@@ -4367,7 +4362,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4367
4362
|
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
4368
4363
|
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
4369
4364
|
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
4370
|
-
const useModal = this.isBibFullscreen
|
|
4365
|
+
const useModal = this.isBibFullscreen;
|
|
4371
4366
|
this.bibElement.value.close();
|
|
4372
4367
|
this.bibElement.value.open(useModal);
|
|
4373
4368
|
}
|
|
@@ -4389,7 +4384,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4389
4384
|
|
|
4390
4385
|
firstUpdated() {
|
|
4391
4386
|
// Configure the floater to, this will generate the ID for the bib
|
|
4392
|
-
this.floater.configure(this, 'auroDropdown');
|
|
4387
|
+
this.floater.configure(this, 'auroDropdown', !this.disableKeyboardHandling);
|
|
4393
4388
|
|
|
4394
4389
|
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
4395
4390
|
// creates a containing block for position:fixed descendants (the bib),
|
|
@@ -4479,7 +4474,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4479
4474
|
* @private
|
|
4480
4475
|
*/
|
|
4481
4476
|
updateFocusTrap() {
|
|
4482
|
-
if (this.isPopoverVisible
|
|
4477
|
+
if (this.isPopoverVisible) {
|
|
4483
4478
|
if (!this.isBibFullscreen) {
|
|
4484
4479
|
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
4485
4480
|
this.focusTrap = new FocusTrap(this.bibContent);
|
|
@@ -4691,12 +4686,13 @@ class AuroDropdown extends AuroElement {
|
|
|
4691
4686
|
<div>
|
|
4692
4687
|
<div
|
|
4693
4688
|
id="trigger"
|
|
4694
|
-
class="${e$
|
|
4689
|
+
class="${e$4(this.commonWrapperClasses)}" part="wrapper"
|
|
4695
4690
|
tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
4696
4691
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
4697
4692
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
4698
4693
|
aria-controls="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.dropdownId)}"
|
|
4699
4694
|
aria-labelledby="${o(this.triggerContentFocusable ? undefined : 'triggerLabel')}"
|
|
4695
|
+
aria-disabled="${o(this.disabled ? 'true' : undefined)}"
|
|
4700
4696
|
@focusin="${this.handleFocusin}"
|
|
4701
4697
|
@blur="${this.handleFocusOut}">
|
|
4702
4698
|
<div class="triggerContentWrapper" id="triggerLabel">
|
|
@@ -4720,7 +4716,7 @@ class AuroDropdown extends AuroElement {
|
|
|
4720
4716
|
</div>
|
|
4721
4717
|
` : undefined }
|
|
4722
4718
|
</div>
|
|
4723
|
-
<div class="${e$
|
|
4719
|
+
<div class="${e$4(helpTextClasses)}">
|
|
4724
4720
|
<slot name="helpText"></slot>
|
|
4725
4721
|
</div>
|
|
4726
4722
|
<div id="bibSizer" part="size"></div>
|
|
@@ -74,9 +74,9 @@ export class AuroDropdown extends AuroElement {
|
|
|
74
74
|
reflect: boolean;
|
|
75
75
|
};
|
|
76
76
|
/**
|
|
77
|
-
* If declared, the
|
|
77
|
+
* If declared, the dropdown will not handle keyboard events and will require the consumer to manage this behavior.
|
|
78
78
|
*/
|
|
79
|
-
|
|
79
|
+
disableKeyboardHandling: {
|
|
80
80
|
type: BooleanConstructor;
|
|
81
81
|
reflect: boolean;
|
|
82
82
|
};
|
|
@@ -286,7 +286,7 @@ export class AuroDropdown extends AuroElement {
|
|
|
286
286
|
appearance: string;
|
|
287
287
|
chevron: boolean;
|
|
288
288
|
disabled: boolean;
|
|
289
|
-
|
|
289
|
+
disableKeyboardHandling: boolean;
|
|
290
290
|
error: boolean;
|
|
291
291
|
noToggle: boolean;
|
|
292
292
|
a11yRole: string;
|
|
@@ -72,11 +72,7 @@ export class AuroDropdownBib extends LitElement {
|
|
|
72
72
|
type: StringConstructor;
|
|
73
73
|
};
|
|
74
74
|
/**
|
|
75
|
-
*
|
|
76
|
-
* aria-activedescendant. The dialog keyboard bridge checks this
|
|
77
|
-
* flag so that Enter selects the highlighted option instead of
|
|
78
|
-
* activating the focused interactive element (e.g. the trigger
|
|
79
|
-
* button, or the bibtemplate close button in fullscreen).
|
|
75
|
+
* Tracks whether a menu option is currently highlighted.
|
|
80
76
|
* @private
|
|
81
77
|
*/
|
|
82
78
|
hasActiveDescendant: {
|
|
@@ -102,41 +98,6 @@ export class AuroDropdownBib extends LitElement {
|
|
|
102
98
|
* @private
|
|
103
99
|
*/
|
|
104
100
|
private _setupCancelHandler;
|
|
105
|
-
/**
|
|
106
|
-
* showModal() creates a closed focus scope — keyboard events inside
|
|
107
|
-
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
108
|
-
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
109
|
-
* that gap by re-dispatching navigation keys so they cross the
|
|
110
|
-
* shadow boundary and reach the menu navigation logic in the parent
|
|
111
|
-
* component.
|
|
112
|
-
*
|
|
113
|
-
* The trade-off: intercepting these keys means native keyboard
|
|
114
|
-
* behaviors that would normally "just work" must be manually
|
|
115
|
-
* re-implemented here:
|
|
116
|
-
*
|
|
117
|
-
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
118
|
-
* native Enter→click that <button> provides, so we call .click()
|
|
119
|
-
* directly when Enter is pressed on a button-like element.
|
|
120
|
-
*
|
|
121
|
-
* - Tab: Intercepted and re-dispatched so parent components
|
|
122
|
-
* (select/combobox) can select the active option and close the
|
|
123
|
-
* dialog. The <dialog> provides containment and isolation
|
|
124
|
-
* (inert background, VoiceOver focus trapping, top layer), while
|
|
125
|
-
* the content inside is a role="listbox" navigated via
|
|
126
|
-
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
127
|
-
* behavior follows listbox conventions (select + close) because
|
|
128
|
-
* the dialog's native Tab trap only cycles between the close
|
|
129
|
-
* button and browser chrome.
|
|
130
|
-
*
|
|
131
|
-
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
132
|
-
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
133
|
-
* is a secondary path for parent components that also listen for
|
|
134
|
-
* Escape keydown.
|
|
135
|
-
*
|
|
136
|
-
* @param {HTMLDialogElement} dialog - The dialog element to attach the keyboard bridge to.
|
|
137
|
-
* @private
|
|
138
|
-
*/
|
|
139
|
-
private _setupKeyboardBridge;
|
|
140
101
|
/**
|
|
141
102
|
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
142
103
|
*
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Creates a keyboard strategy for dialog-specific key handling.
|
|
3
|
+
* All other keydown behavior is left to the browser's native bubbling path.
|
|
4
|
+
* @param {HTMLElement} bib - The dropdown bib element.
|
|
5
|
+
* @returns {Object} Keyboard handlers keyed by `event.key`.
|
|
6
|
+
*/
|
|
7
|
+
export function createDropdownBibKeyboardStrategy(bib: HTMLElement): any;
|