@aurodesignsystem/auro-formkit 5.10.0 → 5.11.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/CHANGELOG.md +55 -15
- package/components/bibtemplate/dist/auro-bibtemplate.d.ts +6 -0
- package/components/bibtemplate/dist/index.js +12 -0
- package/components/bibtemplate/dist/registered.js +12 -0
- package/components/checkbox/demo/api.min.js +3 -3
- package/components/checkbox/demo/index.min.js +3 -3
- package/components/checkbox/dist/index.js +3 -3
- package/components/checkbox/dist/registered.js +3 -3
- package/components/combobox/demo/api.min.js +1140 -305
- package/components/combobox/demo/index.min.js +1140 -305
- package/components/combobox/dist/auro-combobox.d.ts +24 -1
- package/components/combobox/dist/comboboxKeyboardStrategy.d.ts +6 -0
- package/components/combobox/dist/index.js +1082 -264
- package/components/combobox/dist/registered.js +1082 -264
- package/components/counter/demo/api.min.js +583 -172
- package/components/counter/demo/index.min.js +583 -172
- package/components/counter/dist/auro-counter.d.ts +8 -0
- package/components/counter/dist/buttonVersion.d.ts +1 -1
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +583 -172
- package/components/counter/dist/registered.js +583 -172
- package/components/datepicker/demo/api.md +108 -85
- package/components/datepicker/demo/api.min.js +872 -257
- package/components/datepicker/demo/index.md +18 -12
- package/components/datepicker/demo/index.min.js +872 -257
- package/components/datepicker/dist/auro-calendar.d.ts +6 -0
- package/components/datepicker/dist/auro-datepicker.d.ts +11 -1
- package/components/datepicker/dist/index.js +819 -208
- package/components/datepicker/dist/registered.js +819 -208
- package/components/dropdown/demo/api.md +15 -17
- package/components/dropdown/demo/api.min.js +537 -183
- package/components/dropdown/demo/index.min.js +537 -183
- package/components/dropdown/dist/auro-dropdown.d.ts +27 -1
- package/components/dropdown/dist/auro-dropdownBib.d.ts +87 -0
- package/components/dropdown/dist/index.js +514 -160
- package/components/dropdown/dist/keyboardUtils.d.ts +18 -0
- package/components/dropdown/dist/registered.js +514 -160
- package/components/form/README.md +47 -2
- package/components/form/demo/api.js +2 -0
- package/components/form/demo/api.md +303 -30
- package/components/form/demo/api.min.js +69256 -62
- package/components/form/demo/index.html +0 -1
- package/components/form/demo/index.js +1 -0
- package/components/form/demo/index.md +1 -275
- package/components/form/demo/index.min.js +69255 -62
- package/components/form/demo/readme.md +47 -2
- package/components/form/demo/working.html +123 -32
- package/components/form/dist/auro-form.d.ts +98 -61
- package/components/form/dist/index.js +135 -51
- package/components/form/dist/registered.js +135 -51
- package/components/input/demo/api.md +1 -0
- package/components/input/demo/api.min.js +78 -24
- package/components/input/demo/index.min.js +78 -24
- package/components/input/dist/base-input.d.ts +34 -0
- package/components/input/dist/index.js +78 -24
- package/components/input/dist/registered.js +78 -24
- package/components/menu/demo/api.md +4 -10
- package/components/menu/demo/api.min.js +18 -5
- package/components/menu/demo/index.min.js +18 -5
- package/components/menu/dist/auro-menuoption.d.ts +0 -8
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +18 -5
- package/components/menu/dist/registered.js +18 -5
- package/components/radio/demo/api.min.js +3 -3
- package/components/radio/demo/index.min.js +3 -3
- package/components/radio/dist/index.js +3 -3
- package/components/radio/dist/registered.js +3 -3
- package/components/select/demo/api.js +2 -0
- package/components/select/demo/api.md +333 -78
- package/components/select/demo/api.min.js +945 -282
- package/components/select/demo/index.min.js +933 -282
- package/components/select/dist/auro-select.d.ts +26 -0
- package/components/select/dist/index.js +881 -247
- package/components/select/dist/registered.js +881 -247
- package/components/select/dist/selectKeyboardStrategy.d.ts +8 -0
- package/custom-elements.json +596 -89
- package/package.json +7 -5
|
@@ -80,20 +80,20 @@ function swapValueExample() {
|
|
|
80
80
|
* Copyright 2019 Google LLC
|
|
81
81
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
82
82
|
*/
|
|
83
|
-
const t$3=globalThis,e$
|
|
83
|
+
const t$3=globalThis,e$7=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$8=Symbol(),o$7=new WeakMap;let n$7 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$8)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$7&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$7.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$7.set(s,t));}return t}toString(){return this.cssText}};const r$5=t=>new n$7("string"==typeof t?t:t+"",void 0,s$8),i$7=(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$7(o,t,s$8)},S$3=(s,o)=>{if(e$7)s.adoptedStyleSheets=o.map(t=>t instanceof CSSStyleSheet?t:t.styleSheet);else for(const e of o){const o=document.createElement("style"),n=t$3.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$7=e$7?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$5(e)})(t):t;
|
|
84
84
|
|
|
85
85
|
/**
|
|
86
86
|
* @license
|
|
87
87
|
* Copyright 2017 Google LLC
|
|
88
88
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
89
|
-
*/const{is:i$6,defineProperty:e$
|
|
89
|
+
*/const{is:i$6,defineProperty:e$6,getOwnPropertyDescriptor:h$6,getOwnPropertyNames:r$4,getOwnPropertySymbols:o$6,getPrototypeOf:n$6}=Object,a$2=globalThis,c$6=a$2.trustedTypes,l$4=c$6?c$6.emptyScript:"",p$7=a$2.reactiveElementPolyfillSupport,d$3=(t,s)=>t,u$9={toAttribute(t,s){switch(s){case Boolean:t=t?l$4: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$7=(t,s)=>!i$6(t,s),b$3={attribute:true,type:String,converter:u$9,reflect:false,useDefault:false,hasChanged:f$7};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;let y$6 = 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$3){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$6(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$6(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$3}static _$Ei(){if(this.hasOwnProperty(d$3("elementProperties")))return;const t=n$6(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$3("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$3("properties"))){const t=this.properties,s=[...r$4(t),...o$6(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$7(s));}else void 0!==s&&i.push(c$7(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$3(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$9).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$9;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$7)(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$6.elementStyles=[],y$6.shadowRootOptions={mode:"open"},y$6[d$3("elementProperties")]=new Map,y$6[d$3("finalized")]=new Map,p$7?.({ReactiveElement:y$6}),(a$2.reactiveElementVersions??=[]).push("2.1.2");
|
|
90
90
|
|
|
91
91
|
/**
|
|
92
92
|
* @license
|
|
93
93
|
* Copyright 2017 Google LLC
|
|
94
94
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
95
95
|
*/
|
|
96
|
-
const t$2=globalThis,i$5=t=>t,s$7=t$2.trustedTypes,e$
|
|
96
|
+
const t$2=globalThis,i$5=t=>t,s$7=t$2.trustedTypes,e$5=s$7?s$7.createPolicy("lit-html",{createHTML:t=>t}):void 0,h$5="$lit$",o$5=`lit$${Math.random().toFixed(9).slice(2)}$`,n$5="?"+o$5,r$3=`<${n$5}>`,l$3=document,c$5=()=>l$3.createComment(""),a$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u$8=Array.isArray,d$2=t=>u$8(t)||"function"==typeof t?.[Symbol.iterator],f$6="[ \t\n\f\r]",v$3=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_$4=/-->/g,m$6=/>/g,p$6=RegExp(`>|${f$6}(?:([^\\s"'>=/]+)(${f$6}*=${f$6}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g$5=/'/g,$=/"/g,y$5=/^(?:script|style|textarea|title)$/i,x$5=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b$2=x$5(1),E=Symbol.for("lit-noChange"),A$2=Symbol.for("lit-nothing"),C$2=new WeakMap,P=l$3.createTreeWalker(l$3,129);function V(t,i){if(!u$8(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$5?e$5.createHTML(i):i}const N$2=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v$3;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$3?"!--"===u[1]?c=_$4:void 0!==u[1]?c=m$6:void 0!==u[2]?(y$5.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p$6):void 0!==u[3]&&(c=p$6):c===p$6?">"===u[0]?(c=n??v$3,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p$6:'"'===u[3]?$:g$5):c===$||c===g$5?c=p$6:c===_$4||c===m$6?c=v$3:(c=p$6,n=void 0);const x=c===p$6&&t[i+1].startsWith("/>")?" ":"";l+=c===v$3?s+r$3:d>=0?(e.push(a),s.slice(0,d)+h$5+s.slice(d)+o$5+x):s+o$5+(-2===d?i:x);}return [V(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),e]};let S$2 = 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$2(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$5)){const i=v[a++],s=r.getAttribute(t).split(o$5),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:l,name:e[2],strings:s,ctor:"."===e[1]?I:"?"===e[1]?L:"@"===e[1]?z$5:H$2}),r.removeAttribute(t);}else t.startsWith(o$5)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y$5.test(r.tagName)){const t=r.textContent.split(o$5),i=t.length-1;if(i>0){r.textContent=s$7?s$7.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c$5()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c$5());}}}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$5,t+1));)d.push({type:7,index:l}),t+=o$5.length-1;}l++;}}static createElement(t,i){const s=l$3.createElement("template");return s.innerHTML=t,s}};function M$3(t,i,s=t,e){if(i===E)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=a$1(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$3(t,h._$AS(t,i.values),h,e)),i}let R$2 = 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$3).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$2(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$3,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++;}};let k$2 = class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A$2,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$3(this,t,i),a$1(t)?t===A$2||null==t||""===t?(this._$AH!==A$2&&this._$AR(),this._$AH=A$2):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d$2(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$2&&a$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(l$3.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$2.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R$2(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C$2.get(t.strings);return void 0===i&&C$2.set(t.strings,i=new S$2(t)),i}k(t){u$8(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$5()),this.O(c$5()),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));}};let H$2 = 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$2,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$2;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M$3(this,t,i,0),o=!a$1(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$3(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a$1(r)||r!==this._$AH[n],r===A$2?t=A$2:t!==A$2&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A$2?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};class I extends H$2{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A$2?void 0:t;}}class L extends H$2{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A$2);}}let z$5 = class z extends H$2{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M$3(this,t,i,0)??A$2)===E)return;const s=this._$AH,e=t===A$2&&s!==A$2||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A$2&&(s===A$2||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$3(this,t);}}const j={I:k$2},B$2=t$2.litHtmlPolyfillSupport;B$2?.(S$2,k$2),(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$2(i.insertBefore(c$5(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
97
97
|
|
|
98
98
|
/**
|
|
99
99
|
* @license
|
|
@@ -113,13 +113,13 @@ const a=Symbol.for(""),o$3=t=>{if(t?.r===a)return t?._$litStatic$},s$5=t=>({_$li
|
|
|
113
113
|
* Copyright 2017 Google LLC
|
|
114
114
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
115
115
|
*/
|
|
116
|
-
const t$1={ATTRIBUTE:1,CHILD:2},e$
|
|
116
|
+
const t$1={ATTRIBUTE:1,CHILD:2},e$4=t=>(...e)=>({_$litDirective$:t,values:e});let i$2 = 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)}};
|
|
117
117
|
|
|
118
118
|
/**
|
|
119
119
|
* @license
|
|
120
120
|
* Copyright 2018 Google LLC
|
|
121
121
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
122
|
-
*/const e$
|
|
122
|
+
*/const e$3=e$4(class extends i$2{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}});
|
|
123
123
|
|
|
124
124
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
125
125
|
// See LICENSE in the project root for license information.
|
|
@@ -1000,7 +1000,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
1000
1000
|
}
|
|
1001
1001
|
}
|
|
1002
1002
|
|
|
1003
|
-
if (!hasValue && elem.required && elem.touched) {
|
|
1003
|
+
if (!hasValue && elem.required && (force || elem.touched)) {
|
|
1004
1004
|
elem.validity = 'valueMissing';
|
|
1005
1005
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
1006
1006
|
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
@@ -1024,7 +1024,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
1024
1024
|
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
1025
1025
|
|
|
1026
1026
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
1027
|
-
this.auroInputElements.forEach(input => input.validate());
|
|
1027
|
+
this.auroInputElements.forEach(input => input.validate(force));
|
|
1028
1028
|
|
|
1029
1029
|
// Reset element validity to the validity of the input
|
|
1030
1030
|
elem.validity = this.auroInputElements[0].validity;
|
|
@@ -1115,6 +1115,239 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
1115
1115
|
}
|
|
1116
1116
|
};
|
|
1117
1117
|
|
|
1118
|
+
/**
|
|
1119
|
+
* Announces text to screen readers via an `aria-live` region inside the given shadow root.
|
|
1120
|
+
*
|
|
1121
|
+
* Expects the shadow root to contain an element with `id="srAnnouncement"`.
|
|
1122
|
+
* The text is cleared and re-set inside a `requestAnimationFrame` so that
|
|
1123
|
+
* repeated identical announcements still fire, and is cleared again after
|
|
1124
|
+
* {@link ANNOUNCEMENT_DURATION_MS} so VoiceOver cannot swipe to stale text.
|
|
1125
|
+
*
|
|
1126
|
+
* @param {ShadowRoot} shadowRoot - The shadow root containing the live region.
|
|
1127
|
+
* @param {string} text - The text to announce.
|
|
1128
|
+
*/
|
|
1129
|
+
|
|
1130
|
+
const ANNOUNCEMENT_DURATION_MS = 1000;
|
|
1131
|
+
|
|
1132
|
+
function announceToScreenReader(shadowRoot, text) {
|
|
1133
|
+
const liveRegion = shadowRoot.querySelector('#srAnnouncement');
|
|
1134
|
+
if (liveRegion) {
|
|
1135
|
+
// Clear and re-set to ensure the announcement fires even with same text
|
|
1136
|
+
liveRegion.textContent = '';
|
|
1137
|
+
requestAnimationFrame(() => {
|
|
1138
|
+
liveRegion.textContent = text;
|
|
1139
|
+
|
|
1140
|
+
// Clear after the announcement so VoiceOver cannot swipe to stale text
|
|
1141
|
+
setTimeout(() => {
|
|
1142
|
+
liveRegion.textContent = '';
|
|
1143
|
+
}, ANNOUNCEMENT_DURATION_MS);
|
|
1144
|
+
});
|
|
1145
|
+
}
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
/**
|
|
1149
|
+
* Schedules a callback after two animation frames.
|
|
1150
|
+
*
|
|
1151
|
+
* Used when opening a fullscreen dialog to wait for the dialog to render
|
|
1152
|
+
* (first frame) and then for a Lit update cycle to complete (second frame)
|
|
1153
|
+
* before performing an action like focusing the close button.
|
|
1154
|
+
*
|
|
1155
|
+
* @param {Function} fn - The callback to execute after two animation frames.
|
|
1156
|
+
*/
|
|
1157
|
+
function doubleRaf(fn) {
|
|
1158
|
+
requestAnimationFrame(() => {
|
|
1159
|
+
requestAnimationFrame(fn);
|
|
1160
|
+
});
|
|
1161
|
+
}
|
|
1162
|
+
|
|
1163
|
+
/**
|
|
1164
|
+
* Prevents touch pass-through when a fullscreen dialog opens on a touch device.
|
|
1165
|
+
*
|
|
1166
|
+
* On coarse-pointer devices (phones / tablets), the tap that opens the
|
|
1167
|
+
* fullscreen dialog can "pass through" to content beneath the finger —
|
|
1168
|
+
* the touchstart opens the dialog, but the finger is still on the screen,
|
|
1169
|
+
* so the subsequent touchend / click lands on whatever element sits at
|
|
1170
|
+
* those coordinates (e.g. a menu option or calendar cell), selecting it
|
|
1171
|
+
* unintentionally. This does NOT happen with mouse clicks because
|
|
1172
|
+
* showModal() promotes the dialog to the top layer synchronously and the
|
|
1173
|
+
* click has already completed.
|
|
1174
|
+
*
|
|
1175
|
+
* Guard: only activates on devices whose primary input is coarse.
|
|
1176
|
+
* Laptops with a touchscreen report `pointer: fine` (trackpad / mouse is
|
|
1177
|
+
* primary) so they are unaffected. Re-enables on the next touchstart,
|
|
1178
|
+
* which is the user's first deliberate gesture inside the dialog.
|
|
1179
|
+
*
|
|
1180
|
+
* @param {HTMLElement} element - The element to disable pointer events on
|
|
1181
|
+
* (e.g. the menu or calendar wrapper).
|
|
1182
|
+
*/
|
|
1183
|
+
function guardTouchPassthrough(element) {
|
|
1184
|
+
if (!element || !window.matchMedia('(pointer: coarse)').matches) return;
|
|
1185
|
+
|
|
1186
|
+
element.style.pointerEvents = 'none';
|
|
1187
|
+
document.addEventListener('touchstart', () => {
|
|
1188
|
+
element.style.pointerEvents = '';
|
|
1189
|
+
}, { once: true });
|
|
1190
|
+
}
|
|
1191
|
+
|
|
1192
|
+
/**
|
|
1193
|
+
* Restores the dropdown trigger after a fullscreen dialog closes.
|
|
1194
|
+
*
|
|
1195
|
+
* Removes the `inert` attribute from the trigger so it is accessible again,
|
|
1196
|
+
* and restores focus to the given target after one animation frame. The rAF
|
|
1197
|
+
* delay lets Lit's microtask update cycle call `dialog.close()` first —
|
|
1198
|
+
* without it the browser's native dialog focus restoration can conflict.
|
|
1199
|
+
*
|
|
1200
|
+
* The focus is only applied if the dropdown is still closed at the time the
|
|
1201
|
+
* rAF fires, guarding against a rapid close-then-reopen race.
|
|
1202
|
+
*
|
|
1203
|
+
* @param {HTMLElement} dropdown - The `auro-dropdown` element.
|
|
1204
|
+
* @param {HTMLElement} focusTarget - The element to focus (e.g. trigger or input).
|
|
1205
|
+
*/
|
|
1206
|
+
function restoreTriggerAfterClose(dropdown, focusTarget) {
|
|
1207
|
+
dropdown.trigger.inert = false;
|
|
1208
|
+
|
|
1209
|
+
if (dropdown.isBibFullscreen) {
|
|
1210
|
+
requestAnimationFrame(() => {
|
|
1211
|
+
if (!dropdown.isPopoverVisible) {
|
|
1212
|
+
focusTarget.focus();
|
|
1213
|
+
}
|
|
1214
|
+
});
|
|
1215
|
+
}
|
|
1216
|
+
}
|
|
1217
|
+
|
|
1218
|
+
/**
|
|
1219
|
+
* @license
|
|
1220
|
+
* Copyright 2017 Google LLC
|
|
1221
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
1222
|
+
*/let e$2 = class e extends i$2{constructor(i){if(super(i),this.it=A$2,i.type!==t$1.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A$2||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$2.directiveName="unsafeHTML",e$2.resultType=1;
|
|
1223
|
+
|
|
1224
|
+
/**
|
|
1225
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
1226
|
+
* Handles both sync and async handlers.
|
|
1227
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
1228
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
1229
|
+
*/
|
|
1230
|
+
function applyKeyboardStrategy(component, strategy) {
|
|
1231
|
+
component.addEventListener('keydown', async (evt) => {
|
|
1232
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
1233
|
+
if (handler) {
|
|
1234
|
+
await handler(component, evt);
|
|
1235
|
+
}
|
|
1236
|
+
});
|
|
1237
|
+
}
|
|
1238
|
+
|
|
1239
|
+
/**
|
|
1240
|
+
* Shared arrow navigation. Calls menu.navigateOptions(direction) if visible.
|
|
1241
|
+
* Optionally opens dropdown via showFn when closed.
|
|
1242
|
+
* @param {HTMLElement} component - The component with dropdown and menu references.
|
|
1243
|
+
* @param {string} direction - 'up' or 'down'.
|
|
1244
|
+
* @param {Object} [options] - Optional config.
|
|
1245
|
+
* @param {Function} [options.showFn] - Called to open the dropdown when closed.
|
|
1246
|
+
*/
|
|
1247
|
+
function navigateArrow(component, direction, options = {}) {
|
|
1248
|
+
if (component.dropdown.isPopoverVisible) {
|
|
1249
|
+
component.menu.navigateOptions(direction);
|
|
1250
|
+
} else if (options.showFn) {
|
|
1251
|
+
options.showFn();
|
|
1252
|
+
}
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
const comboboxKeyboardStrategy = {
|
|
1256
|
+
async Enter(component, evt) {
|
|
1257
|
+
// If the clear button has focus, let the browser activate it normally.
|
|
1258
|
+
const clearBtn = component.input.shadowRoot.querySelector('.clearBtn');
|
|
1259
|
+
if (clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null) {
|
|
1260
|
+
return;
|
|
1261
|
+
}
|
|
1262
|
+
|
|
1263
|
+
if (component.dropdown.isPopoverVisible && component.optionActive) {
|
|
1264
|
+
component.menu.makeSelection();
|
|
1265
|
+
await component.updateComplete;
|
|
1266
|
+
evt.preventDefault();
|
|
1267
|
+
evt.stopPropagation();
|
|
1268
|
+
component.setClearBtnFocus();
|
|
1269
|
+
} else {
|
|
1270
|
+
component.showBib();
|
|
1271
|
+
}
|
|
1272
|
+
},
|
|
1273
|
+
|
|
1274
|
+
Tab(component) {
|
|
1275
|
+
if (!component.dropdown.isPopoverVisible) {
|
|
1276
|
+
return;
|
|
1277
|
+
}
|
|
1278
|
+
|
|
1279
|
+
if (component.dropdown.isBibFullscreen) {
|
|
1280
|
+
const clearBtn = component.inputInBib.shadowRoot.querySelector('.clearBtn');
|
|
1281
|
+
|
|
1282
|
+
// Use shadowRoot.activeElement to detect focus inside auro-button,
|
|
1283
|
+
// since Safari does not propagate :focus-within through shadow DOM.
|
|
1284
|
+
const clearBtnHasFocus = clearBtn && clearBtn.shadowRoot && clearBtn.shadowRoot.activeElement !== null;
|
|
1285
|
+
|
|
1286
|
+
// Tab from input: if clear button exists and doesn't have focus, focus it
|
|
1287
|
+
if (clearBtn && !clearBtnHasFocus && component.inputInBib.value) {
|
|
1288
|
+
// Force clear button container visible to work around Safari not
|
|
1289
|
+
// propagating :focus-within through shadow DOM boundaries, which
|
|
1290
|
+
// causes .wrapper:not(:focus-within) to hide .notification.clear.
|
|
1291
|
+
const clearContainer = clearBtn.closest('.clear');
|
|
1292
|
+
if (clearContainer) {
|
|
1293
|
+
clearContainer.style.display = 'flex';
|
|
1294
|
+
clearBtn.addEventListener('focusout', () => {
|
|
1295
|
+
// Delay cleanup so :focus-within settles when focus moves
|
|
1296
|
+
// to a sibling (e.g., Shift+Tab back to the input).
|
|
1297
|
+
requestAnimationFrame(() => {
|
|
1298
|
+
clearContainer.style.display = '';
|
|
1299
|
+
});
|
|
1300
|
+
}, { once: true });
|
|
1301
|
+
}
|
|
1302
|
+
|
|
1303
|
+
// Focus the native button inside auro-button so the browser
|
|
1304
|
+
// treats it as a real focusable element inside the dialog.
|
|
1305
|
+
const nativeBtn = clearBtn.shadowRoot && clearBtn.shadowRoot.querySelector('button');
|
|
1306
|
+
if (nativeBtn) {
|
|
1307
|
+
nativeBtn.focus();
|
|
1308
|
+
} else {
|
|
1309
|
+
clearBtn.focus();
|
|
1310
|
+
}
|
|
1311
|
+
return;
|
|
1312
|
+
}
|
|
1313
|
+
|
|
1314
|
+
// Tab from clear button (or no clear button / no value) →
|
|
1315
|
+
// select the highlighted option if any, then close
|
|
1316
|
+
if (component.optionActive) {
|
|
1317
|
+
component.menu.makeSelection();
|
|
1318
|
+
}
|
|
1319
|
+
component.hideBib();
|
|
1320
|
+
return;
|
|
1321
|
+
}
|
|
1322
|
+
|
|
1323
|
+
// Non-fullscreen: select + close
|
|
1324
|
+
if (component.menu.optionActive && component.menu.optionActive.value) {
|
|
1325
|
+
component.menu.value = component.menu.optionActive.value;
|
|
1326
|
+
}
|
|
1327
|
+
component.hideBib();
|
|
1328
|
+
},
|
|
1329
|
+
|
|
1330
|
+
ArrowUp(component, evt) {
|
|
1331
|
+
if (component.availableOptions.length > 0) {
|
|
1332
|
+
component.showBib();
|
|
1333
|
+
}
|
|
1334
|
+
if (component.dropdown.isPopoverVisible) {
|
|
1335
|
+
evt.preventDefault();
|
|
1336
|
+
navigateArrow(component, 'up');
|
|
1337
|
+
}
|
|
1338
|
+
},
|
|
1339
|
+
|
|
1340
|
+
ArrowDown(component, evt) {
|
|
1341
|
+
if (component.availableOptions.length > 0) {
|
|
1342
|
+
component.showBib();
|
|
1343
|
+
}
|
|
1344
|
+
if (component.dropdown.isPopoverVisible) {
|
|
1345
|
+
evt.preventDefault();
|
|
1346
|
+
navigateArrow(component, 'down');
|
|
1347
|
+
}
|
|
1348
|
+
},
|
|
1349
|
+
};
|
|
1350
|
+
|
|
1118
1351
|
/**
|
|
1119
1352
|
* @license
|
|
1120
1353
|
* Copyright 2020 Google LLC
|
|
@@ -1131,7 +1364,7 @@ let AuroFormValidation$1 = class AuroFormValidation {
|
|
|
1131
1364
|
* @license
|
|
1132
1365
|
* Copyright 2020 Google LLC
|
|
1133
1366
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1134
|
-
*/const e$1=()=>new h$2;let h$2 = class h{};const o$1=new WeakMap,n$2=e$
|
|
1367
|
+
*/const e$1=()=>new h$2;let h$2 = class h{};const o$1=new WeakMap,n$2=e$4(class extends f$5{render(i){return A$2}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$2}rt(t){if(this.isConnected||(t=void 0),"function"==typeof this.G){const i=this.ht??globalThis;let s=o$1.get(i);void 0===s&&(s=new WeakMap,o$1.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$1.get(this.ht??globalThis)?.get(this.G):this.G?.value}disconnected(){this.lt===this.ct&&this.rt(void 0);}reconnected(){this.rt(this.ct);}});
|
|
1135
1368
|
|
|
1136
1369
|
/**
|
|
1137
1370
|
* @license
|
|
@@ -2866,11 +3099,9 @@ const computePosition = (reference, floating, options) => {
|
|
|
2866
3099
|
/* eslint-disable line-comment-position, no-inline-comments */
|
|
2867
3100
|
|
|
2868
3101
|
|
|
2869
|
-
|
|
2870
3102
|
const MAX_CONFIGURATION_COUNT = 10;
|
|
2871
3103
|
|
|
2872
3104
|
class AuroFloatingUI {
|
|
2873
|
-
|
|
2874
3105
|
/**
|
|
2875
3106
|
* @private
|
|
2876
3107
|
*/
|
|
@@ -2885,7 +3116,11 @@ class AuroFloatingUI {
|
|
|
2885
3116
|
* @private
|
|
2886
3117
|
*/
|
|
2887
3118
|
static setupMousePressChecker() {
|
|
2888
|
-
if (
|
|
3119
|
+
if (
|
|
3120
|
+
!AuroFloatingUI.isMousePressHandlerInitialized &&
|
|
3121
|
+
window &&
|
|
3122
|
+
window.addEventListener
|
|
3123
|
+
) {
|
|
2889
3124
|
AuroFloatingUI.isMousePressHandlerInitialized = true;
|
|
2890
3125
|
|
|
2891
3126
|
// Track timeout for isMousePressed reset to avoid race conditions
|
|
@@ -2893,7 +3128,7 @@ class AuroFloatingUI {
|
|
|
2893
3128
|
AuroFloatingUI._mousePressedTimeout = null;
|
|
2894
3129
|
}
|
|
2895
3130
|
const mouseEventGlobalHandler = (event) => {
|
|
2896
|
-
const isPressed = event.type ===
|
|
3131
|
+
const isPressed = event.type === "mousedown";
|
|
2897
3132
|
if (isPressed) {
|
|
2898
3133
|
// Clear any pending timeout to prevent race condition
|
|
2899
3134
|
if (AuroFloatingUI._mousePressedTimeout !== null) {
|
|
@@ -2912,8 +3147,8 @@ class AuroFloatingUI {
|
|
|
2912
3147
|
}
|
|
2913
3148
|
};
|
|
2914
3149
|
|
|
2915
|
-
window.addEventListener(
|
|
2916
|
-
window.addEventListener(
|
|
3150
|
+
window.addEventListener("mousedown", mouseEventGlobalHandler);
|
|
3151
|
+
window.addEventListener("mouseup", mouseEventGlobalHandler);
|
|
2917
3152
|
}
|
|
2918
3153
|
}
|
|
2919
3154
|
|
|
@@ -2961,11 +3196,12 @@ class AuroFloatingUI {
|
|
|
2961
3196
|
// mirror the boxsize from bibSizer
|
|
2962
3197
|
if (this.element.bibSizer && this.element.matchWidth) {
|
|
2963
3198
|
const sizerStyle = window.getComputedStyle(this.element.bibSizer);
|
|
2964
|
-
const bibContent =
|
|
2965
|
-
|
|
3199
|
+
const bibContent =
|
|
3200
|
+
this.element.bib.shadowRoot.querySelector(".container");
|
|
3201
|
+
if (sizerStyle.width !== "0px") {
|
|
2966
3202
|
bibContent.style.width = sizerStyle.width;
|
|
2967
3203
|
}
|
|
2968
|
-
if (sizerStyle.height !==
|
|
3204
|
+
if (sizerStyle.height !== "0px") {
|
|
2969
3205
|
bibContent.style.height = sizerStyle.height;
|
|
2970
3206
|
}
|
|
2971
3207
|
bibContent.style.maxWidth = sizerStyle.maxWidth;
|
|
@@ -2983,28 +3219,34 @@ class AuroFloatingUI {
|
|
|
2983
3219
|
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
2984
3220
|
*/
|
|
2985
3221
|
getPositioningStrategy() {
|
|
2986
|
-
const breakpoint =
|
|
3222
|
+
const breakpoint =
|
|
3223
|
+
this.element.bib.mobileFullscreenBreakpoint ||
|
|
3224
|
+
this.element.floaterConfig?.fullscreenBreakpoint;
|
|
2987
3225
|
switch (this.behavior) {
|
|
2988
3226
|
case "tooltip":
|
|
2989
3227
|
return "floating";
|
|
2990
3228
|
case "dialog":
|
|
2991
3229
|
case "drawer":
|
|
2992
3230
|
if (breakpoint) {
|
|
2993
|
-
const smallerThanBreakpoint = window.matchMedia(
|
|
3231
|
+
const smallerThanBreakpoint = window.matchMedia(
|
|
3232
|
+
`(max-width: ${breakpoint})`,
|
|
3233
|
+
).matches;
|
|
2994
3234
|
|
|
2995
3235
|
this.element.expanded = smallerThanBreakpoint;
|
|
2996
3236
|
}
|
|
2997
3237
|
if (this.element.nested) {
|
|
2998
3238
|
return "cover";
|
|
2999
3239
|
}
|
|
3000
|
-
return
|
|
3240
|
+
return "fullscreen";
|
|
3001
3241
|
case "dropdown":
|
|
3002
3242
|
case undefined:
|
|
3003
3243
|
case null:
|
|
3004
3244
|
if (breakpoint) {
|
|
3005
|
-
const smallerThanBreakpoint = window.matchMedia(
|
|
3245
|
+
const smallerThanBreakpoint = window.matchMedia(
|
|
3246
|
+
`(max-width: ${breakpoint})`,
|
|
3247
|
+
).matches;
|
|
3006
3248
|
if (smallerThanBreakpoint) {
|
|
3007
|
-
return
|
|
3249
|
+
return "fullscreen";
|
|
3008
3250
|
}
|
|
3009
3251
|
}
|
|
3010
3252
|
return "floating";
|
|
@@ -3025,37 +3267,39 @@ class AuroFloatingUI {
|
|
|
3025
3267
|
const strategy = this.getPositioningStrategy();
|
|
3026
3268
|
this.configureBibStrategy(strategy);
|
|
3027
3269
|
|
|
3028
|
-
if (strategy ===
|
|
3270
|
+
if (strategy === "floating") {
|
|
3029
3271
|
this.mirrorSize();
|
|
3030
3272
|
// Define the middlware for the floater configuration
|
|
3031
3273
|
const middleware = [
|
|
3032
3274
|
offset(this.element.floaterConfig?.offset || 0),
|
|
3033
|
-
...this.element.floaterConfig?.shift ? [shift()] : [], // Add shift middleware if shift is enabled.
|
|
3034
|
-
...this.element.floaterConfig?.flip ? [flip()] : [], // Add flip middleware if flip is enabled.
|
|
3035
|
-
...this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : [], // Add autoPlacement middleware if autoPlacement is enabled.
|
|
3275
|
+
...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
3276
|
+
...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
3277
|
+
...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
3036
3278
|
];
|
|
3037
3279
|
|
|
3038
3280
|
// Compute the position of the bib
|
|
3039
3281
|
computePosition(this.element.trigger, this.element.bib, {
|
|
3040
|
-
strategy: this.element.floaterConfig?.strategy ||
|
|
3282
|
+
strategy: this.element.floaterConfig?.strategy || "fixed",
|
|
3041
3283
|
placement: this.element.floaterConfig?.placement,
|
|
3042
|
-
middleware: middleware || []
|
|
3043
|
-
}).then(({ x, y }) => {
|
|
3284
|
+
middleware: middleware || [],
|
|
3285
|
+
}).then(({ x, y }) => {
|
|
3286
|
+
// eslint-disable-line id-length
|
|
3044
3287
|
Object.assign(this.element.bib.style, {
|
|
3045
3288
|
left: `${x}px`,
|
|
3046
3289
|
top: `${y}px`,
|
|
3047
3290
|
});
|
|
3048
3291
|
});
|
|
3049
|
-
} else if (strategy ===
|
|
3292
|
+
} else if (strategy === "cover") {
|
|
3050
3293
|
// Compute the position of the bib
|
|
3051
3294
|
computePosition(this.element.parentNode, this.element.bib, {
|
|
3052
|
-
placement:
|
|
3053
|
-
}).then(({ x, y }) => {
|
|
3295
|
+
placement: "bottom-start",
|
|
3296
|
+
}).then(({ x, y }) => {
|
|
3297
|
+
// eslint-disable-line id-length
|
|
3054
3298
|
Object.assign(this.element.bib.style, {
|
|
3055
3299
|
left: `${x}px`,
|
|
3056
3300
|
top: `${y - this.element.parentNode.offsetHeight}px`,
|
|
3057
3301
|
width: `${this.element.parentNode.offsetWidth}px`,
|
|
3058
|
-
height: `${this.element.parentNode.offsetHeight}px
|
|
3302
|
+
height: `${this.element.parentNode.offsetHeight}px`,
|
|
3059
3303
|
});
|
|
3060
3304
|
});
|
|
3061
3305
|
}
|
|
@@ -3068,12 +3312,12 @@ class AuroFloatingUI {
|
|
|
3068
3312
|
*/
|
|
3069
3313
|
lockScroll(lock = true) {
|
|
3070
3314
|
if (lock) {
|
|
3071
|
-
document.body.style.overflow =
|
|
3315
|
+
document.body.style.overflow = "hidden"; // hide body's scrollbar
|
|
3072
3316
|
|
|
3073
3317
|
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
3074
3318
|
this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
3075
3319
|
} else {
|
|
3076
|
-
document.body.style.overflow =
|
|
3320
|
+
document.body.style.overflow = "";
|
|
3077
3321
|
}
|
|
3078
3322
|
}
|
|
3079
3323
|
|
|
@@ -3087,23 +3331,24 @@ class AuroFloatingUI {
|
|
|
3087
3331
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
3088
3332
|
*/
|
|
3089
3333
|
configureBibStrategy(value) {
|
|
3090
|
-
if (value ===
|
|
3334
|
+
if (value === "fullscreen") {
|
|
3091
3335
|
this.element.isBibFullscreen = true;
|
|
3092
3336
|
// reset the prev position
|
|
3093
|
-
this.element.bib.setAttribute(
|
|
3094
|
-
this.element.bib.style.position =
|
|
3337
|
+
this.element.bib.setAttribute("isfullscreen", "");
|
|
3338
|
+
this.element.bib.style.position = "fixed";
|
|
3095
3339
|
this.element.bib.style.top = "0px";
|
|
3096
3340
|
this.element.bib.style.left = "0px";
|
|
3097
|
-
this.element.bib.style.width =
|
|
3098
|
-
this.element.bib.style.height =
|
|
3099
|
-
this.element.style.contain =
|
|
3341
|
+
this.element.bib.style.width = "";
|
|
3342
|
+
this.element.bib.style.height = "";
|
|
3343
|
+
this.element.style.contain = "";
|
|
3100
3344
|
|
|
3101
3345
|
// reset the size that was mirroring `size` css-part
|
|
3102
|
-
const bibContent =
|
|
3346
|
+
const bibContent =
|
|
3347
|
+
this.element.bib.shadowRoot.querySelector(".container");
|
|
3103
3348
|
if (bibContent) {
|
|
3104
|
-
bibContent.style.width =
|
|
3105
|
-
bibContent.style.height =
|
|
3106
|
-
bibContent.style.maxWidth =
|
|
3349
|
+
bibContent.style.width = "";
|
|
3350
|
+
bibContent.style.height = "";
|
|
3351
|
+
bibContent.style.maxWidth = "";
|
|
3107
3352
|
bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
|
|
3108
3353
|
this.configureTrial = 0;
|
|
3109
3354
|
} else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
|
|
@@ -3118,21 +3363,26 @@ class AuroFloatingUI {
|
|
|
3118
3363
|
this.lockScroll(true);
|
|
3119
3364
|
}
|
|
3120
3365
|
} else {
|
|
3121
|
-
this.element.bib.style.position =
|
|
3122
|
-
this.element.bib.removeAttribute(
|
|
3366
|
+
this.element.bib.style.position = "";
|
|
3367
|
+
this.element.bib.removeAttribute("isfullscreen");
|
|
3123
3368
|
this.element.isBibFullscreen = false;
|
|
3124
|
-
this.element.style.contain =
|
|
3369
|
+
this.element.style.contain = "layout";
|
|
3125
3370
|
}
|
|
3126
3371
|
|
|
3127
3372
|
const isChanged = this.strategy && this.strategy !== value;
|
|
3128
3373
|
this.strategy = value;
|
|
3129
3374
|
if (isChanged) {
|
|
3130
|
-
const event = new CustomEvent(
|
|
3131
|
-
|
|
3132
|
-
|
|
3375
|
+
const event = new CustomEvent(
|
|
3376
|
+
this.eventPrefix
|
|
3377
|
+
? `${this.eventPrefix}-strategy-change`
|
|
3378
|
+
: "strategy-change",
|
|
3379
|
+
{
|
|
3380
|
+
detail: {
|
|
3381
|
+
value,
|
|
3382
|
+
},
|
|
3383
|
+
composed: true,
|
|
3133
3384
|
},
|
|
3134
|
-
|
|
3135
|
-
});
|
|
3385
|
+
);
|
|
3136
3386
|
|
|
3137
3387
|
this.element.dispatchEvent(event);
|
|
3138
3388
|
}
|
|
@@ -3164,19 +3414,24 @@ class AuroFloatingUI {
|
|
|
3164
3414
|
return;
|
|
3165
3415
|
}
|
|
3166
3416
|
|
|
3167
|
-
if (
|
|
3168
|
-
this.element.
|
|
3417
|
+
if (
|
|
3418
|
+
this.element.noHideOnThisFocusLoss ||
|
|
3419
|
+
this.element.hasAttribute("noHideOnThisFocusLoss")
|
|
3420
|
+
) {
|
|
3169
3421
|
return;
|
|
3170
3422
|
}
|
|
3171
3423
|
|
|
3172
3424
|
const { activeElement } = document;
|
|
3173
3425
|
// if focus is still inside of trigger or bib, do not close
|
|
3174
|
-
if (
|
|
3426
|
+
if (
|
|
3427
|
+
this.element.contains(activeElement) ||
|
|
3428
|
+
this.element.bib?.contains(activeElement)
|
|
3429
|
+
) {
|
|
3175
3430
|
return;
|
|
3176
3431
|
}
|
|
3177
3432
|
|
|
3178
3433
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
3179
|
-
if (this.element.bib.hasAttribute(
|
|
3434
|
+
if (this.element.bib.hasAttribute("isfullscreen")) {
|
|
3180
3435
|
return;
|
|
3181
3436
|
}
|
|
3182
3437
|
|
|
@@ -3188,12 +3443,27 @@ class AuroFloatingUI {
|
|
|
3188
3443
|
this.focusHandler = () => this.handleFocusLoss();
|
|
3189
3444
|
|
|
3190
3445
|
this.clickHandler = (evt) => {
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
|
|
3194
|
-
|
|
3446
|
+
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
3447
|
+
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
3448
|
+
// <dialog> may not include the bib in composedPath(), causing false
|
|
3449
|
+
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
3450
|
+
if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
|
|
3451
|
+
return;
|
|
3452
|
+
}
|
|
3195
3453
|
|
|
3196
|
-
|
|
3454
|
+
if (
|
|
3455
|
+
(!evt.composedPath().includes(this.element.trigger) &&
|
|
3456
|
+
!evt.composedPath().includes(this.element.bib)) ||
|
|
3457
|
+
(this.element.bib.backdrop &&
|
|
3458
|
+
evt.composedPath().includes(this.element.bib.backdrop))
|
|
3459
|
+
) {
|
|
3460
|
+
const existedVisibleFloatingUI =
|
|
3461
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3462
|
+
|
|
3463
|
+
if (
|
|
3464
|
+
existedVisibleFloatingUI &&
|
|
3465
|
+
existedVisibleFloatingUI.element.isPopoverVisible
|
|
3466
|
+
) {
|
|
3197
3467
|
// if something else is open, close that
|
|
3198
3468
|
existedVisibleFloatingUI.hideBib();
|
|
3199
3469
|
document.expandedAuroFormkitDropdown = null;
|
|
@@ -3206,9 +3476,14 @@ class AuroFloatingUI {
|
|
|
3206
3476
|
|
|
3207
3477
|
// ESC key handler
|
|
3208
3478
|
this.keyDownHandler = (evt) => {
|
|
3209
|
-
if (evt.key ===
|
|
3210
|
-
const existedVisibleFloatingUI =
|
|
3211
|
-
|
|
3479
|
+
if (evt.key === "Escape" && this.element.isPopoverVisible) {
|
|
3480
|
+
const existedVisibleFloatingUI =
|
|
3481
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3482
|
+
if (
|
|
3483
|
+
existedVisibleFloatingUI &&
|
|
3484
|
+
existedVisibleFloatingUI !== this &&
|
|
3485
|
+
existedVisibleFloatingUI.element.isPopoverVisible
|
|
3486
|
+
) {
|
|
3212
3487
|
// if something else is open, let it handle itself
|
|
3213
3488
|
return;
|
|
3214
3489
|
}
|
|
@@ -3216,17 +3491,17 @@ class AuroFloatingUI {
|
|
|
3216
3491
|
}
|
|
3217
3492
|
};
|
|
3218
3493
|
|
|
3219
|
-
if (this.behavior !==
|
|
3494
|
+
if (this.behavior !== "drawer" && this.behavior !== "dialog") {
|
|
3220
3495
|
// Add event listeners using the stored references
|
|
3221
|
-
document.addEventListener(
|
|
3496
|
+
document.addEventListener("focusin", this.focusHandler);
|
|
3222
3497
|
}
|
|
3223
3498
|
|
|
3224
|
-
document.addEventListener(
|
|
3499
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
3225
3500
|
|
|
3226
3501
|
// send this task to the end of queue to prevent conflicting
|
|
3227
3502
|
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
3228
3503
|
setTimeout(() => {
|
|
3229
|
-
window.addEventListener(
|
|
3504
|
+
window.addEventListener("click", this.clickHandler);
|
|
3230
3505
|
}, 0);
|
|
3231
3506
|
}
|
|
3232
3507
|
|
|
@@ -3234,34 +3509,38 @@ class AuroFloatingUI {
|
|
|
3234
3509
|
// Remove event listeners if they exist
|
|
3235
3510
|
|
|
3236
3511
|
if (this.focusHandler) {
|
|
3237
|
-
document.removeEventListener(
|
|
3512
|
+
document.removeEventListener("focusin", this.focusHandler);
|
|
3238
3513
|
this.focusHandler = null;
|
|
3239
3514
|
}
|
|
3240
3515
|
|
|
3241
3516
|
if (this.clickHandler) {
|
|
3242
|
-
window.removeEventListener(
|
|
3517
|
+
window.removeEventListener("click", this.clickHandler);
|
|
3243
3518
|
this.clickHandler = null;
|
|
3244
3519
|
}
|
|
3245
3520
|
|
|
3246
3521
|
if (this.keyDownHandler) {
|
|
3247
|
-
document.removeEventListener(
|
|
3522
|
+
document.removeEventListener("keydown", this.keyDownHandler);
|
|
3248
3523
|
this.keyDownHandler = null;
|
|
3249
3524
|
}
|
|
3250
3525
|
}
|
|
3251
3526
|
|
|
3252
3527
|
handleUpdate(changedProperties) {
|
|
3253
|
-
if (changedProperties.has(
|
|
3528
|
+
if (changedProperties.has("isPopoverVisible")) {
|
|
3254
3529
|
this.updateState();
|
|
3255
3530
|
}
|
|
3256
3531
|
}
|
|
3257
3532
|
|
|
3258
3533
|
updateCurrentExpandedDropdown() {
|
|
3259
3534
|
// Close any other dropdown that is already open
|
|
3260
|
-
const existedVisibleFloatingUI =
|
|
3261
|
-
|
|
3535
|
+
const existedVisibleFloatingUI =
|
|
3536
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3537
|
+
if (
|
|
3538
|
+
existedVisibleFloatingUI &&
|
|
3539
|
+
existedVisibleFloatingUI !== this &&
|
|
3262
3540
|
existedVisibleFloatingUI.element.isPopoverVisible &&
|
|
3263
|
-
|
|
3264
|
-
|
|
3541
|
+
existedVisibleFloatingUI.eventPrefix === this.eventPrefix
|
|
3542
|
+
) {
|
|
3543
|
+
existedVisibleFloatingUI.hideBib();
|
|
3265
3544
|
}
|
|
3266
3545
|
|
|
3267
3546
|
document.expandedAuroFloater = this;
|
|
@@ -3270,7 +3549,7 @@ class AuroFloatingUI {
|
|
|
3270
3549
|
showBib() {
|
|
3271
3550
|
if (!this.element.disabled && !this.showing) {
|
|
3272
3551
|
this.updateCurrentExpandedDropdown();
|
|
3273
|
-
this.element.triggerChevron?.setAttribute(
|
|
3552
|
+
this.element.triggerChevron?.setAttribute("data-expanded", true);
|
|
3274
3553
|
|
|
3275
3554
|
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
3276
3555
|
if (!this.showing) {
|
|
@@ -3284,9 +3563,13 @@ class AuroFloatingUI {
|
|
|
3284
3563
|
}
|
|
3285
3564
|
|
|
3286
3565
|
// Setup auto update to handle resize and scroll
|
|
3287
|
-
this.element.cleanup = autoUpdate(
|
|
3288
|
-
this.
|
|
3289
|
-
|
|
3566
|
+
this.element.cleanup = autoUpdate(
|
|
3567
|
+
this.element.trigger || this.element.parentNode,
|
|
3568
|
+
this.element.bib,
|
|
3569
|
+
() => {
|
|
3570
|
+
this.position();
|
|
3571
|
+
},
|
|
3572
|
+
);
|
|
3290
3573
|
}
|
|
3291
3574
|
}
|
|
3292
3575
|
|
|
@@ -3297,7 +3580,7 @@ class AuroFloatingUI {
|
|
|
3297
3580
|
hideBib(eventType = "unknown") {
|
|
3298
3581
|
if (!this.element.disabled && !this.element.noToggle) {
|
|
3299
3582
|
this.lockScroll(false);
|
|
3300
|
-
this.element.triggerChevron?.removeAttribute(
|
|
3583
|
+
this.element.triggerChevron?.removeAttribute("data-expanded");
|
|
3301
3584
|
|
|
3302
3585
|
if (this.element.isPopoverVisible) {
|
|
3303
3586
|
this.element.isPopoverVisible = false;
|
|
@@ -3317,13 +3600,16 @@ class AuroFloatingUI {
|
|
|
3317
3600
|
* @param {String} eventType - The event type that triggered the toggle action.
|
|
3318
3601
|
*/
|
|
3319
3602
|
dispatchEventDropdownToggle(eventType) {
|
|
3320
|
-
const event = new CustomEvent(
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3603
|
+
const event = new CustomEvent(
|
|
3604
|
+
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
3605
|
+
{
|
|
3606
|
+
detail: {
|
|
3607
|
+
expanded: this.showing,
|
|
3608
|
+
eventType: eventType || "unknown",
|
|
3609
|
+
},
|
|
3610
|
+
composed: true,
|
|
3324
3611
|
},
|
|
3325
|
-
|
|
3326
|
-
});
|
|
3612
|
+
);
|
|
3327
3613
|
|
|
3328
3614
|
this.element.dispatchEvent(event);
|
|
3329
3615
|
}
|
|
@@ -3335,12 +3621,15 @@ class AuroFloatingUI {
|
|
|
3335
3621
|
this.showBib();
|
|
3336
3622
|
}
|
|
3337
3623
|
|
|
3338
|
-
const event = new CustomEvent(
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
|
|
3624
|
+
const event = new CustomEvent(
|
|
3625
|
+
this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick",
|
|
3626
|
+
{
|
|
3627
|
+
composed: true,
|
|
3628
|
+
detail: {
|
|
3629
|
+
expanded: this.element.isPopoverVisible,
|
|
3630
|
+
},
|
|
3631
|
+
},
|
|
3632
|
+
);
|
|
3344
3633
|
|
|
3345
3634
|
this.element.dispatchEvent(event);
|
|
3346
3635
|
}
|
|
@@ -3348,30 +3637,32 @@ class AuroFloatingUI {
|
|
|
3348
3637
|
handleEvent(event) {
|
|
3349
3638
|
if (!this.element.disableEventShow) {
|
|
3350
3639
|
switch (event.type) {
|
|
3351
|
-
case
|
|
3640
|
+
case "keydown": {
|
|
3352
3641
|
// Support both Enter and Space keys for accessibility
|
|
3353
3642
|
// Space is included as it's expected behavior for interactive elements
|
|
3354
3643
|
|
|
3355
3644
|
const origin = event.composedPath()[0];
|
|
3356
|
-
if (
|
|
3357
|
-
|
|
3645
|
+
if (
|
|
3646
|
+
event.key === "Enter" ||
|
|
3647
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
3648
|
+
) {
|
|
3358
3649
|
event.preventDefault();
|
|
3359
3650
|
this.handleClick();
|
|
3360
3651
|
}
|
|
3361
3652
|
break;
|
|
3362
|
-
|
|
3653
|
+
}
|
|
3654
|
+
case "mouseenter":
|
|
3363
3655
|
if (this.element.hoverToggle) {
|
|
3364
3656
|
this.showBib();
|
|
3365
3657
|
}
|
|
3366
3658
|
break;
|
|
3367
|
-
case
|
|
3659
|
+
case "mouseleave":
|
|
3368
3660
|
if (this.element.hoverToggle) {
|
|
3369
3661
|
this.hideBib("mouseleave");
|
|
3370
3662
|
}
|
|
3371
3663
|
break;
|
|
3372
|
-
case
|
|
3664
|
+
case "focus":
|
|
3373
3665
|
if (this.element.focusShow) {
|
|
3374
|
-
|
|
3375
3666
|
/*
|
|
3376
3667
|
This needs to better handle clicking that gives focus -
|
|
3377
3668
|
currently it shows and then immediately hides the bib
|
|
@@ -3379,12 +3670,12 @@ class AuroFloatingUI {
|
|
|
3379
3670
|
this.showBib();
|
|
3380
3671
|
}
|
|
3381
3672
|
break;
|
|
3382
|
-
case
|
|
3673
|
+
case "blur":
|
|
3383
3674
|
// send this task 100ms later queue to
|
|
3384
3675
|
// wait a frame in case focus moves within the floating element/bib
|
|
3385
3676
|
setTimeout(() => this.handleFocusLoss(), 0);
|
|
3386
3677
|
break;
|
|
3387
|
-
case
|
|
3678
|
+
case "click":
|
|
3388
3679
|
if (document.activeElement === document.body) {
|
|
3389
3680
|
event.currentTarget.focus();
|
|
3390
3681
|
}
|
|
@@ -3403,15 +3694,15 @@ class AuroFloatingUI {
|
|
|
3403
3694
|
*/
|
|
3404
3695
|
handleTriggerTabIndex() {
|
|
3405
3696
|
const focusableElementSelectors = [
|
|
3406
|
-
|
|
3407
|
-
|
|
3697
|
+
"a",
|
|
3698
|
+
"button",
|
|
3408
3699
|
'input:not([type="hidden"])',
|
|
3409
|
-
|
|
3410
|
-
|
|
3700
|
+
"select",
|
|
3701
|
+
"textarea",
|
|
3411
3702
|
'[tabindex]:not([tabindex="-1"])',
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
|
|
3703
|
+
"auro-button",
|
|
3704
|
+
"auro-input",
|
|
3705
|
+
"auro-hyperlink",
|
|
3415
3706
|
];
|
|
3416
3707
|
|
|
3417
3708
|
const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
|
|
@@ -3439,10 +3730,10 @@ class AuroFloatingUI {
|
|
|
3439
3730
|
* @param {*} eventPrefix
|
|
3440
3731
|
*/
|
|
3441
3732
|
regenerateBibId() {
|
|
3442
|
-
this.id = this.element.getAttribute(
|
|
3733
|
+
this.id = this.element.getAttribute("id");
|
|
3443
3734
|
if (!this.id) {
|
|
3444
3735
|
this.id = window.crypto.randomUUID();
|
|
3445
|
-
this.element.setAttribute(
|
|
3736
|
+
this.element.setAttribute("id", this.id);
|
|
3446
3737
|
}
|
|
3447
3738
|
|
|
3448
3739
|
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
@@ -3463,11 +3754,15 @@ class AuroFloatingUI {
|
|
|
3463
3754
|
if (this.element.trigger) {
|
|
3464
3755
|
this.disconnect();
|
|
3465
3756
|
}
|
|
3466
|
-
this.element.trigger =
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
|
|
3470
|
-
|
|
3757
|
+
this.element.trigger =
|
|
3758
|
+
this.element.triggerElement ||
|
|
3759
|
+
this.element.shadowRoot.querySelector("#trigger") ||
|
|
3760
|
+
this.element.trigger;
|
|
3761
|
+
this.element.bib =
|
|
3762
|
+
this.element.shadowRoot.querySelector("#bib") || this.element.bib;
|
|
3763
|
+
this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
|
|
3764
|
+
this.element.triggerChevron =
|
|
3765
|
+
this.element.shadowRoot.querySelector("#showStateIcon");
|
|
3471
3766
|
|
|
3472
3767
|
if (this.element.floaterConfig) {
|
|
3473
3768
|
this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
|
|
@@ -3478,12 +3773,12 @@ class AuroFloatingUI {
|
|
|
3478
3773
|
|
|
3479
3774
|
this.handleEvent = this.handleEvent.bind(this);
|
|
3480
3775
|
if (this.element.trigger) {
|
|
3481
|
-
this.element.trigger.addEventListener(
|
|
3482
|
-
this.element.trigger.addEventListener(
|
|
3483
|
-
this.element.trigger.addEventListener(
|
|
3484
|
-
this.element.trigger.addEventListener(
|
|
3485
|
-
this.element.trigger.addEventListener(
|
|
3486
|
-
this.element.trigger.addEventListener(
|
|
3776
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
3777
|
+
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
3778
|
+
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
3779
|
+
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
3780
|
+
this.element.trigger.addEventListener("focus", this.handleEvent);
|
|
3781
|
+
this.element.trigger.addEventListener("blur", this.handleEvent);
|
|
3487
3782
|
}
|
|
3488
3783
|
}
|
|
3489
3784
|
|
|
@@ -3498,12 +3793,18 @@ class AuroFloatingUI {
|
|
|
3498
3793
|
|
|
3499
3794
|
// Remove event & keyboard listeners
|
|
3500
3795
|
if (this.element?.trigger) {
|
|
3501
|
-
this.element.trigger.removeEventListener(
|
|
3502
|
-
this.element.trigger.removeEventListener(
|
|
3503
|
-
this.element.trigger.removeEventListener(
|
|
3504
|
-
|
|
3505
|
-
|
|
3506
|
-
|
|
3796
|
+
this.element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
3797
|
+
this.element.trigger.removeEventListener("click", this.handleEvent);
|
|
3798
|
+
this.element.trigger.removeEventListener(
|
|
3799
|
+
"mouseenter",
|
|
3800
|
+
this.handleEvent,
|
|
3801
|
+
);
|
|
3802
|
+
this.element.trigger.removeEventListener(
|
|
3803
|
+
"mouseleave",
|
|
3804
|
+
this.handleEvent,
|
|
3805
|
+
);
|
|
3806
|
+
this.element.trigger.removeEventListener("focus", this.handleEvent);
|
|
3807
|
+
this.element.trigger.removeEventListener("blur", this.handleEvent);
|
|
3507
3808
|
}
|
|
3508
3809
|
}
|
|
3509
3810
|
}
|
|
@@ -3931,7 +4232,7 @@ let p$4 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
3931
4232
|
`;let _$3 = class _ extends z$4{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p$4;}static get properties(){return {...z$4.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$4.styles,y$4,w$4,x$4]}static register(t="auro-icon"){p$4.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$2`
|
|
3932
4233
|
<div class="componentWrapper">
|
|
3933
4234
|
<div
|
|
3934
|
-
class="${e$
|
|
4235
|
+
class="${e$3({svgWrapper:true})}"
|
|
3935
4236
|
title="${o(this.title||void 0)}">
|
|
3936
4237
|
<span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
|
|
3937
4238
|
${this.customSvg?b$2`
|
|
@@ -3942,7 +4243,7 @@ let p$4 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
3942
4243
|
</span>
|
|
3943
4244
|
</div>
|
|
3944
4245
|
|
|
3945
|
-
<div class="${e$
|
|
4246
|
+
<div class="${e$3(t)}" part="label">
|
|
3946
4247
|
<slot></slot>
|
|
3947
4248
|
</div>
|
|
3948
4249
|
</div>
|
|
@@ -3950,7 +4251,7 @@ let p$4 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
3950
4251
|
|
|
3951
4252
|
var iconVersion$3 = '9.1.2';
|
|
3952
4253
|
|
|
3953
|
-
var styleCss$2$1 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}: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([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}
|
|
4254
|
+
var styleCss$2$1 = i$7`:host{position:fixed;z-index:var(--depth-tooltip, 400);display:none;isolation:isolate}:host dialog{width:auto;max-width:none;height:auto;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0)}:host dialog::backdrop{background:transparent}:host(:not([isfullscreen])) dialog{position:relative;inset:unset}:host(:not([isfullscreen])) .container.shape-box{border-radius:unset}:host(:not([isfullscreen])) .container[class*=shape-pill],:host(:not([isfullscreen])) .container[class*=shape-snowflake]{border-radius:30px}:host(:not([isfullscreen])) .container[class*=shape-rounded]{border-radius:16px}:host(:not([matchWidth])) .container{min-width:fit-content}:host([isfullscreen]){position:fixed;top:0;left:0}:host([isfullscreen]) .container{width:100dvw;max-width:none;height:100dvh;max-height:none;border-radius:unset;margin-top:0;box-shadow:unset;overscroll-behavior:contain}:host([isfullscreen]) .container::backdrop{background:var(--ds-color-background-primary, #fff)}:host([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}`;
|
|
3954
4255
|
|
|
3955
4256
|
var colorCss$2$1 = i$7`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
3956
4257
|
|
|
@@ -3958,6 +4259,8 @@ var tokensCss$1$2 = i$7`:host(:not([ondark])),:host(:not([appearance=inverse])){
|
|
|
3958
4259
|
|
|
3959
4260
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3960
4261
|
// See LICENSE in the project root for license information.
|
|
4262
|
+
/* eslint-disable max-lines */
|
|
4263
|
+
// ---------------------------------------------------------------------
|
|
3961
4264
|
|
|
3962
4265
|
|
|
3963
4266
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
@@ -4052,6 +4355,28 @@ class AuroDropdownBib extends i$4 {
|
|
|
4052
4355
|
shape: {
|
|
4053
4356
|
type: String,
|
|
4054
4357
|
reflect: true
|
|
4358
|
+
},
|
|
4359
|
+
|
|
4360
|
+
/**
|
|
4361
|
+
* Accessible label for the dialog element, used when displayed as a modal.
|
|
4362
|
+
* Applied via aria-labelledby on a visually hidden element rather than
|
|
4363
|
+
* aria-label because iOS VoiceOver does not reliably read aria-label
|
|
4364
|
+
* on <dialog> elements.
|
|
4365
|
+
* @private
|
|
4366
|
+
*/
|
|
4367
|
+
dialogLabel: {
|
|
4368
|
+
type: String
|
|
4369
|
+
},
|
|
4370
|
+
|
|
4371
|
+
/**
|
|
4372
|
+
* Overrides the native role of the dialog element.
|
|
4373
|
+
* For example, set to `"presentation"` on desktop combobox to prevent
|
|
4374
|
+
* VoiceOver from announcing "listbox inside of a dialog".
|
|
4375
|
+
* When `undefined`, the dialog keeps its native role.
|
|
4376
|
+
* @private
|
|
4377
|
+
*/
|
|
4378
|
+
dialogRole: {
|
|
4379
|
+
type: String
|
|
4055
4380
|
}
|
|
4056
4381
|
};
|
|
4057
4382
|
}
|
|
@@ -4119,7 +4444,10 @@ class AuroDropdownBib extends i$4 {
|
|
|
4119
4444
|
firstUpdated(changedProperties) {
|
|
4120
4445
|
super.firstUpdated(changedProperties);
|
|
4121
4446
|
|
|
4122
|
-
|
|
4447
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4448
|
+
this._setupCancelHandler(dialog);
|
|
4449
|
+
this._setupKeyboardBridge(dialog);
|
|
4450
|
+
|
|
4123
4451
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
4124
4452
|
bubbles: true,
|
|
4125
4453
|
composed: true,
|
|
@@ -4129,6 +4457,189 @@ class AuroDropdownBib extends i$4 {
|
|
|
4129
4457
|
}));
|
|
4130
4458
|
}
|
|
4131
4459
|
|
|
4460
|
+
/**
|
|
4461
|
+
* Forwards the dialog's native `cancel` event (fired on ESC) as
|
|
4462
|
+
* an `auro-bib-cancel` custom event so parent components can close.
|
|
4463
|
+
* @param {HTMLDialogElement} dialog
|
|
4464
|
+
* @private
|
|
4465
|
+
*/
|
|
4466
|
+
_setupCancelHandler(dialog) {
|
|
4467
|
+
dialog.addEventListener('cancel', (event) => {
|
|
4468
|
+
event.preventDefault();
|
|
4469
|
+
this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
|
|
4470
|
+
bubbles: true,
|
|
4471
|
+
composed: true
|
|
4472
|
+
}));
|
|
4473
|
+
});
|
|
4474
|
+
}
|
|
4475
|
+
|
|
4476
|
+
/**
|
|
4477
|
+
* showModal() creates a closed focus scope — keyboard events inside
|
|
4478
|
+
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
4479
|
+
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
4480
|
+
* that gap by re-dispatching navigation keys so they cross the
|
|
4481
|
+
* shadow boundary and reach the menu navigation logic in the parent
|
|
4482
|
+
* component.
|
|
4483
|
+
*
|
|
4484
|
+
* The trade-off: intercepting these keys means native keyboard
|
|
4485
|
+
* behaviors that would normally "just work" must be manually
|
|
4486
|
+
* re-implemented here:
|
|
4487
|
+
*
|
|
4488
|
+
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
4489
|
+
* native Enter→click that <button> provides, so we call .click()
|
|
4490
|
+
* directly when Enter is pressed on a button-like element.
|
|
4491
|
+
*
|
|
4492
|
+
* - Tab: Intercepted and re-dispatched so parent components
|
|
4493
|
+
* (select/combobox) can select the active option and close the
|
|
4494
|
+
* dialog. The <dialog> provides containment and isolation
|
|
4495
|
+
* (inert background, VoiceOver focus trapping, top layer), while
|
|
4496
|
+
* the content inside is a role="listbox" navigated via
|
|
4497
|
+
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
4498
|
+
* behavior follows listbox conventions (select + close) because
|
|
4499
|
+
* the dialog's native Tab trap only cycles between the close
|
|
4500
|
+
* button and browser chrome.
|
|
4501
|
+
*
|
|
4502
|
+
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
4503
|
+
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
4504
|
+
* is a secondary path for parent components that also listen for
|
|
4505
|
+
* Escape keydown.
|
|
4506
|
+
*
|
|
4507
|
+
* @param {HTMLDialogElement} dialog
|
|
4508
|
+
* @private
|
|
4509
|
+
*/
|
|
4510
|
+
_setupKeyboardBridge(dialog) {
|
|
4511
|
+
const navKeys = new Set([
|
|
4512
|
+
'ArrowUp',
|
|
4513
|
+
'ArrowDown',
|
|
4514
|
+
'Enter',
|
|
4515
|
+
'Escape',
|
|
4516
|
+
'Tab'
|
|
4517
|
+
]);
|
|
4518
|
+
|
|
4519
|
+
dialog.addEventListener('keydown', (event) => {
|
|
4520
|
+
if (!navKeys.has(event.key)) {
|
|
4521
|
+
return;
|
|
4522
|
+
}
|
|
4523
|
+
|
|
4524
|
+
// Custom elements (auro-button) don't get the native Enter→click
|
|
4525
|
+
// behavior that <button> has. Find the button in the composed path
|
|
4526
|
+
// and click it directly.
|
|
4527
|
+
if (event.key === 'Enter') {
|
|
4528
|
+
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
4529
|
+
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
4530
|
+
if (btn) {
|
|
4531
|
+
event.preventDefault();
|
|
4532
|
+
event.stopPropagation();
|
|
4533
|
+
btn.click();
|
|
4534
|
+
return;
|
|
4535
|
+
}
|
|
4536
|
+
}
|
|
4537
|
+
|
|
4538
|
+
event.preventDefault();
|
|
4539
|
+
event.stopPropagation();
|
|
4540
|
+
const newEvent = new KeyboardEvent('keydown', {
|
|
4541
|
+
key: event.key,
|
|
4542
|
+
code: event.code,
|
|
4543
|
+
shiftKey: event.shiftKey,
|
|
4544
|
+
altKey: event.altKey,
|
|
4545
|
+
ctrlKey: event.ctrlKey,
|
|
4546
|
+
metaKey: event.metaKey,
|
|
4547
|
+
bubbles: true,
|
|
4548
|
+
composed: true,
|
|
4549
|
+
cancelable: true
|
|
4550
|
+
});
|
|
4551
|
+
this.dispatchEvent(newEvent);
|
|
4552
|
+
});
|
|
4553
|
+
}
|
|
4554
|
+
|
|
4555
|
+
/**
|
|
4556
|
+
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
4557
|
+
*
|
|
4558
|
+
* The showModal() function places the dialog in the browser's **top layer**,
|
|
4559
|
+
* which is a separate rendering layer above the normal DOM. On mobile, the
|
|
4560
|
+
* compositor processes visual-viewport panning before top-layer touch
|
|
4561
|
+
* handling. This means the entire viewport — including the top-layer dialog
|
|
4562
|
+
* — can be panned by a touch gesture, causing the page behind the dialog to
|
|
4563
|
+
* scroll into view. To prevent this, we add a touchmove listener that cancels
|
|
4564
|
+
* the event if the touch started outside the dialog or any scrollable child within it.
|
|
4565
|
+
*
|
|
4566
|
+
* @private
|
|
4567
|
+
*/
|
|
4568
|
+
_lockTouchScroll() {
|
|
4569
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4570
|
+
|
|
4571
|
+
this._touchMoveHandler = (event) => {
|
|
4572
|
+
// Walk the composed path (which crosses shadow DOM boundaries) to
|
|
4573
|
+
// check whether the touch started inside a scrollable element that
|
|
4574
|
+
// lives within the dialog. If so, allow the scroll.
|
|
4575
|
+
for (const el of event.composedPath()) {
|
|
4576
|
+
if (el === dialog) {
|
|
4577
|
+
// Reached the dialog boundary without finding a scrollable child.
|
|
4578
|
+
break;
|
|
4579
|
+
}
|
|
4580
|
+
if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
|
|
4581
|
+
const { overflowY } = getComputedStyle(el);
|
|
4582
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
4583
|
+
return;
|
|
4584
|
+
}
|
|
4585
|
+
}
|
|
4586
|
+
}
|
|
4587
|
+
|
|
4588
|
+
event.preventDefault();
|
|
4589
|
+
};
|
|
4590
|
+
|
|
4591
|
+
document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
|
|
4592
|
+
}
|
|
4593
|
+
|
|
4594
|
+
/**
|
|
4595
|
+
* Removes the touchmove listener added by _lockTouchScroll().
|
|
4596
|
+
* @private
|
|
4597
|
+
*/
|
|
4598
|
+
_unlockTouchScroll() {
|
|
4599
|
+
if (this._touchMoveHandler) {
|
|
4600
|
+
document.removeEventListener('touchmove', this._touchMoveHandler);
|
|
4601
|
+
this._touchMoveHandler = undefined;
|
|
4602
|
+
}
|
|
4603
|
+
}
|
|
4604
|
+
|
|
4605
|
+
open(modal = true) {
|
|
4606
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4607
|
+
if (dialog && !dialog.open) {
|
|
4608
|
+
if (modal) {
|
|
4609
|
+
// Prevent showModal() from scrolling the page to bring the dialog
|
|
4610
|
+
// into view. Locking overflow on <html> blocks the viewport scroll
|
|
4611
|
+
// that browsers perform natively; we release it immediately after
|
|
4612
|
+
// so it doesn't interfere with the modal's focus management.
|
|
4613
|
+
const { documentElement } = document;
|
|
4614
|
+
const prevOverflow = documentElement.style.overflow;
|
|
4615
|
+
documentElement.style.overflow = 'hidden';
|
|
4616
|
+
|
|
4617
|
+
dialog.showModal();
|
|
4618
|
+
|
|
4619
|
+
documentElement.style.overflow = prevOverflow;
|
|
4620
|
+
|
|
4621
|
+
this._lockTouchScroll();
|
|
4622
|
+
|
|
4623
|
+
} else {
|
|
4624
|
+
// Use setAttribute instead of dialog.show() to avoid the dialog
|
|
4625
|
+
// focusing steps which steal focus from the trigger and cause
|
|
4626
|
+
// the floater's handleFocusLoss() to immediately hide the bib.
|
|
4627
|
+
dialog.setAttribute('open', '');
|
|
4628
|
+
}
|
|
4629
|
+
}
|
|
4630
|
+
}
|
|
4631
|
+
|
|
4632
|
+
/**
|
|
4633
|
+
* Closes the dialog.
|
|
4634
|
+
*/
|
|
4635
|
+
close() {
|
|
4636
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4637
|
+
if (dialog && dialog.open) {
|
|
4638
|
+
this._unlockTouchScroll();
|
|
4639
|
+
dialog.close();
|
|
4640
|
+
}
|
|
4641
|
+
}
|
|
4642
|
+
|
|
4132
4643
|
// function that renders the HTML and CSS into the scope of the component
|
|
4133
4644
|
render() {
|
|
4134
4645
|
const classes = {
|
|
@@ -4140,9 +4651,10 @@ class AuroDropdownBib extends i$4 {
|
|
|
4140
4651
|
classes[`shape-${this.shape}`] = true;
|
|
4141
4652
|
|
|
4142
4653
|
return u$7`
|
|
4143
|
-
<
|
|
4654
|
+
<dialog class="${e$3(classes)}" part="bibContainer" role="${o(this.dialogRole)}" aria-labelledby="${o(this.dialogLabel ? 'dialogLabel' : undefined)}">
|
|
4655
|
+
${this.dialogLabel ? u$7`<span id="dialogLabel" class="util_displayHiddenVisually" aria-hidden="true">${this.dialogLabel}</span>` : ''}
|
|
4144
4656
|
<slot></slot>
|
|
4145
|
-
</
|
|
4657
|
+
</dialog>
|
|
4146
4658
|
`;
|
|
4147
4659
|
}
|
|
4148
4660
|
}
|
|
@@ -4151,7 +4663,7 @@ var shapeSizeCss$1 = i$7`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.
|
|
|
4151
4663
|
|
|
4152
4664
|
var colorCss$1$1 = i$7`:host(:not([layout*=classic])){--ds-auro-dropdown-trigger-border-color: transparent}:host(:not([disabled],[onDark])) .wrapper:focus-within,:host(:not([disabled],[onDark])) .wrapper:active,:host(:not([disabled],[appearance=inverse])) .wrapper:focus-within,:host(:not([disabled],[appearance=inverse])) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused, #01426a)}:host(:not([disabled],[onDark])) .wrapper:hover,:host(:not([disabled],[appearance=inverse])) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host(:not([ondark])) .wrapper,:host(:not([appearance=inverse])) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host(:not([onDark])[disabled]),:host(:not([appearance=inverse])[disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([onDark])[disabled]) #triggerLabel,:host(:not([appearance=inverse])[disabled]) #triggerLabel{cursor:default}:host(:not([ondark])[error]),:host(:not([appearance=inverse])[error]){--ds-auro-dropdown-trigger-border-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([disabled])[onDark]) .wrapper:focus-within,:host(:not([disabled])[onDark]) .wrapper:active,:host(:not([disabled])[appearance=inverse]) .wrapper:focus-within,:host(:not([disabled])[appearance=inverse]) .wrapper:active{--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-dropdown-trigger-outline-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host(:not([disabled])[onDark]) .wrapper:hover,:host(:not([disabled])[appearance=inverse]) .wrapper:hover{--ds-auro-dropdown-trigger-background-color: var(--ds-auro-dropdown-trigger-hover-background-color)}:host([onDark]) .label,:host([onDark]) .helpText,:host([appearance=inverse]) .label,:host([appearance=inverse]) .helpText{color:var(--ds-auro-dropdown-label-text-color)}:host([onDark]) .wrapper,:host([appearance=inverse]) .wrapper{border-color:var(--ds-auro-dropdown-trigger-border-color);background-color:var(--ds-auro-dropdown-trigger-background-color);color:var(--ds-auro-dropdown-trigger-text-color)}:host([onDark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-dropdown-trigger-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-dropdown-trigger-container-color: var(--ds-advanced-color-shared-background-inverse-disabled, rgba(255, 255, 255, 0.1))}:host([onDark][disabled]) #triggerLabel,:host([appearance=inverse][disabled]) #triggerLabel{cursor:default}:host([ondark][error]),:host([appearance=inverse][error]){--ds-auro-dropdown-trigger-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
|
|
4153
4665
|
|
|
4154
|
-
var styleCss$1$2 = i$7`:host{position:relative;display:block;text-align:left}
|
|
4666
|
+
var styleCss$1$2 = i$7`:host{position:relative;display:block;text-align:left}:host([open]){z-index:var(--depth-tooltip, 400)}.wrapper{display:flex;flex:1;flex-direction:row;align-items:center;justify-content:center;outline:none}.triggerContentWrapper{display:flex;overflow:hidden;width:100%;flex:1;align-items:center;justify-content:center;text-overflow:ellipsis;white-space:nowrap}:host([matchwidth]) #bibSizer{width:100%}`;
|
|
4155
4667
|
|
|
4156
4668
|
var classicColorCss$1 = i$7``;
|
|
4157
4669
|
|
|
@@ -4389,7 +4901,7 @@ let AuroHelpText$2 = class AuroHelpText extends i$4 {
|
|
|
4389
4901
|
}
|
|
4390
4902
|
};
|
|
4391
4903
|
|
|
4392
|
-
var formkitVersion$2 = '
|
|
4904
|
+
var formkitVersion$2 = '202603102257';
|
|
4393
4905
|
|
|
4394
4906
|
let AuroElement$2 = class AuroElement extends i$4 {
|
|
4395
4907
|
static get properties() {
|
|
@@ -4503,7 +5015,7 @@ let AuroElement$2 = class AuroElement extends i$4 {
|
|
|
4503
5015
|
* The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
|
|
4504
5016
|
* @customElement auro-dropdown
|
|
4505
5017
|
*
|
|
4506
|
-
* @slot - Default slot for the
|
|
5018
|
+
* @slot - Default slot for the dropdown bib content.
|
|
4507
5019
|
* @slot helpText - Defines the content of the helpText.
|
|
4508
5020
|
* @slot trigger - Defines the content of the trigger.
|
|
4509
5021
|
* @csspart trigger - The trigger content container.
|
|
@@ -4515,6 +5027,13 @@ let AuroElement$2 = class AuroElement extends i$4 {
|
|
|
4515
5027
|
* @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
|
|
4516
5028
|
*/
|
|
4517
5029
|
class AuroDropdown extends AuroElement$2 {
|
|
5030
|
+
static get shadowRootOptions() {
|
|
5031
|
+
return {
|
|
5032
|
+
...AuroElement$2.shadowRootOptions,
|
|
5033
|
+
delegatesFocus: true,
|
|
5034
|
+
};
|
|
5035
|
+
}
|
|
5036
|
+
|
|
4518
5037
|
constructor() {
|
|
4519
5038
|
super();
|
|
4520
5039
|
|
|
@@ -4580,15 +5099,6 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
4580
5099
|
this.shift = false;
|
|
4581
5100
|
this.autoPlacement = false;
|
|
4582
5101
|
|
|
4583
|
-
/**
|
|
4584
|
-
* @private
|
|
4585
|
-
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
4586
|
-
*/
|
|
4587
|
-
this.constructor.shadowRootOptions = {
|
|
4588
|
-
...i$4.shadowRootOptions,
|
|
4589
|
-
delegatesFocus: true,
|
|
4590
|
-
};
|
|
4591
|
-
|
|
4592
5102
|
/**
|
|
4593
5103
|
* @private
|
|
4594
5104
|
*/
|
|
@@ -4662,6 +5172,18 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
4662
5172
|
*/
|
|
4663
5173
|
show() {
|
|
4664
5174
|
this.floater.showBib();
|
|
5175
|
+
|
|
5176
|
+
// Open dialog synchronously so callers remain in the user gesture
|
|
5177
|
+
// chain. This is critical for mobile browsers (iOS Safari) to keep
|
|
5178
|
+
// the virtual keyboard open when transitioning from the trigger
|
|
5179
|
+
// input to an input inside the fullscreen dialog. Without this,
|
|
5180
|
+
// showModal() fires asynchronously via Lit's update cycle, which
|
|
5181
|
+
// falls outside the user activation window and causes iOS to
|
|
5182
|
+
// dismiss the keyboard.
|
|
5183
|
+
if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
|
|
5184
|
+
const useModal = !this.disableFocusTrap;
|
|
5185
|
+
this.bibElement.value.open(useModal);
|
|
5186
|
+
}
|
|
4665
5187
|
}
|
|
4666
5188
|
|
|
4667
5189
|
/**
|
|
@@ -4669,13 +5191,37 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
4669
5191
|
* If not, trigger element will get focus.
|
|
4670
5192
|
*/
|
|
4671
5193
|
focus() {
|
|
4672
|
-
if (this.isPopoverVisible && this.
|
|
4673
|
-
this.
|
|
5194
|
+
if (this.isPopoverVisible && this.bibContent) {
|
|
5195
|
+
const focusables = getFocusableElements(this.bibContent);
|
|
5196
|
+
if (focusables.length > 0) {
|
|
5197
|
+
focusables[0].focus();
|
|
5198
|
+
}
|
|
4674
5199
|
} else {
|
|
4675
5200
|
this.trigger.focus();
|
|
4676
5201
|
}
|
|
4677
5202
|
}
|
|
4678
5203
|
|
|
5204
|
+
/**
|
|
5205
|
+
* Sets the active descendant element for accessibility.
|
|
5206
|
+
* Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
|
|
5207
|
+
* This function is used in components that contain `auro-dropdown` to set the active descendant.
|
|
5208
|
+
* @private
|
|
5209
|
+
* @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
|
|
5210
|
+
* @returns {void}
|
|
5211
|
+
*/
|
|
5212
|
+
setActiveDescendant(element) {
|
|
5213
|
+
if (!this.trigger) {
|
|
5214
|
+
return;
|
|
5215
|
+
}
|
|
5216
|
+
|
|
5217
|
+
if (element) {
|
|
5218
|
+
this.trigger.ariaActiveDescendantElement = element;
|
|
5219
|
+
} else {
|
|
5220
|
+
this.trigger.ariaActiveDescendantElement = null;
|
|
5221
|
+
this.trigger.removeAttribute('aria-activedescendant');
|
|
5222
|
+
}
|
|
5223
|
+
}
|
|
5224
|
+
|
|
4679
5225
|
// function to define props used within the scope of this component
|
|
4680
5226
|
static get properties() {
|
|
4681
5227
|
return {
|
|
@@ -4933,6 +5479,16 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
4933
5479
|
*/
|
|
4934
5480
|
tabIndex: {
|
|
4935
5481
|
type: Number
|
|
5482
|
+
},
|
|
5483
|
+
|
|
5484
|
+
/**
|
|
5485
|
+
* Accessible label for the dropdown bib dialog element.
|
|
5486
|
+
* @private
|
|
5487
|
+
*/
|
|
5488
|
+
bibDialogLabel: {
|
|
5489
|
+
type: String,
|
|
5490
|
+
attribute: false,
|
|
5491
|
+
reflect: false
|
|
4936
5492
|
}
|
|
4937
5493
|
};
|
|
4938
5494
|
}
|
|
@@ -4984,7 +5540,10 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
4984
5540
|
|
|
4985
5541
|
disconnectedCallback() {
|
|
4986
5542
|
super.disconnectedCallback();
|
|
4987
|
-
this.floater
|
|
5543
|
+
if (this.floater) {
|
|
5544
|
+
this.floater.hideBib('disconnect');
|
|
5545
|
+
this.floater.disconnect();
|
|
5546
|
+
}
|
|
4988
5547
|
this.clearTriggerFocusEventBinding();
|
|
4989
5548
|
}
|
|
4990
5549
|
|
|
@@ -5006,11 +5565,22 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5006
5565
|
|
|
5007
5566
|
if (changedProperties.has('isPopoverVisible') && this.bibElement.value) {
|
|
5008
5567
|
if (this.isPopoverVisible) {
|
|
5009
|
-
|
|
5568
|
+
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
5569
|
+
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
5570
|
+
const useModal = this.isBibFullscreen && !this.disableFocusTrap;
|
|
5571
|
+
this.bibElement.value.open(useModal);
|
|
5010
5572
|
} else {
|
|
5011
|
-
this.bibElement.value.
|
|
5573
|
+
this.bibElement.value.close();
|
|
5012
5574
|
}
|
|
5013
5575
|
}
|
|
5576
|
+
|
|
5577
|
+
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
5578
|
+
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
5579
|
+
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
5580
|
+
const useModal = this.isBibFullscreen && !this.disableFocusTrap;
|
|
5581
|
+
this.bibElement.value.close();
|
|
5582
|
+
this.bibElement.value.open(useModal);
|
|
5583
|
+
}
|
|
5014
5584
|
}
|
|
5015
5585
|
|
|
5016
5586
|
/**
|
|
@@ -5028,11 +5598,28 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5028
5598
|
}
|
|
5029
5599
|
|
|
5030
5600
|
firstUpdated() {
|
|
5031
|
-
|
|
5032
5601
|
// Configure the floater to, this will generate the ID for the bib
|
|
5033
5602
|
this.floater.configure(this, 'auroDropdown');
|
|
5603
|
+
|
|
5604
|
+
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
5605
|
+
// creates a containing block for position:fixed descendants (the bib),
|
|
5606
|
+
// which clips the bib inside ancestor overflow contexts such as a
|
|
5607
|
+
// <dialog> element. Without it, the bib's position:fixed is relative
|
|
5608
|
+
// to the viewport, letting Floating UI's flip middleware detect
|
|
5609
|
+
// viewport boundaries and the bib escape overflow clipping.
|
|
5610
|
+
const origConfigureBibStrategy = this.floater.configureBibStrategy.bind(this.floater);
|
|
5611
|
+
this.floater.configureBibStrategy = (value) => {
|
|
5612
|
+
origConfigureBibStrategy(value);
|
|
5613
|
+
this.style.contain = '';
|
|
5614
|
+
};
|
|
5615
|
+
|
|
5034
5616
|
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
5035
5617
|
|
|
5618
|
+
// Handle ESC key from dialog's cancel event
|
|
5619
|
+
this.addEventListener('auro-bib-cancel', () => {
|
|
5620
|
+
this.floater.hideBib('keydown');
|
|
5621
|
+
});
|
|
5622
|
+
|
|
5036
5623
|
/**
|
|
5037
5624
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
5038
5625
|
* @event auroDropdown-idAdded
|
|
@@ -5040,9 +5627,9 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5040
5627
|
*/
|
|
5041
5628
|
this.dispatchEvent(new CustomEvent('auroDropdown-idAdded', {detail: {id: this.floater.element.id}}));
|
|
5042
5629
|
|
|
5043
|
-
// Set the bib ID locally
|
|
5630
|
+
// Set the bib ID locally for aria-controls (must be in the same shadow root as the trigger)
|
|
5044
5631
|
if (!this.triggerContentFocusable) {
|
|
5045
|
-
this.dropdownId = this.floater.element.id;
|
|
5632
|
+
this.dropdownId = this.floater.element.bib.id;
|
|
5046
5633
|
}
|
|
5047
5634
|
|
|
5048
5635
|
this.bibContent = this.floater.element.bib;
|
|
@@ -5102,21 +5689,20 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5102
5689
|
* @private
|
|
5103
5690
|
*/
|
|
5104
5691
|
updateFocusTrap() {
|
|
5105
|
-
// If the dropdown is open, create a focus trap and focus the first element
|
|
5106
5692
|
if (this.isPopoverVisible && !this.disableFocusTrap) {
|
|
5107
|
-
|
|
5108
|
-
|
|
5693
|
+
if (!this.isBibFullscreen) {
|
|
5694
|
+
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
5695
|
+
this.focusTrap = new FocusTrap(this.bibContent);
|
|
5696
|
+
this.focusTrap.focusFirstElement();
|
|
5697
|
+
}
|
|
5698
|
+
// Fullscreen: showModal() provides native focus trapping
|
|
5109
5699
|
return;
|
|
5110
5700
|
}
|
|
5111
5701
|
|
|
5112
|
-
|
|
5113
|
-
|
|
5114
|
-
|
|
5702
|
+
if (this.focusTrap) {
|
|
5703
|
+
this.focusTrap.disconnect();
|
|
5704
|
+
this.focusTrap = undefined;
|
|
5115
5705
|
}
|
|
5116
|
-
|
|
5117
|
-
// If the dropdown is not open, disconnect the focus trap if it exists
|
|
5118
|
-
this.focusTrap.disconnect();
|
|
5119
|
-
this.focusTrap = undefined;
|
|
5120
5706
|
}
|
|
5121
5707
|
|
|
5122
5708
|
/**
|
|
@@ -5315,7 +5901,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5315
5901
|
<div>
|
|
5316
5902
|
<div
|
|
5317
5903
|
id="trigger"
|
|
5318
|
-
class="${e$
|
|
5904
|
+
class="${e$3(this.commonWrapperClasses)}" part="wrapper"
|
|
5319
5905
|
tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
5320
5906
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
5321
5907
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
@@ -5332,18 +5918,19 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5332
5918
|
<div
|
|
5333
5919
|
id="showStateIcon"
|
|
5334
5920
|
class="chevron"
|
|
5335
|
-
part="chevron"
|
|
5921
|
+
part="chevron"
|
|
5922
|
+
aria-hidden="true">
|
|
5336
5923
|
<${this.iconTag}
|
|
5337
5924
|
category="interface"
|
|
5338
5925
|
name="${this.isPopoverVisible ? 'chevron-up' : `chevron-down`}"
|
|
5339
5926
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
5340
|
-
variant="${this.disabled ? 'disabled' : 'muted'}"
|
|
5341
|
-
>
|
|
5927
|
+
variant="${this.disabled ? 'disabled' : 'muted'}"
|
|
5928
|
+
ariaHidden="true">
|
|
5342
5929
|
</${this.iconTag}>
|
|
5343
5930
|
</div>
|
|
5344
5931
|
` : undefined }
|
|
5345
5932
|
</div>
|
|
5346
|
-
<div class="${e$
|
|
5933
|
+
<div class="${e$3(helpTextClasses)}">
|
|
5347
5934
|
<slot name="helpText"></slot>
|
|
5348
5935
|
</div>
|
|
5349
5936
|
<div id="bibSizer" part="size"></div>
|
|
@@ -5352,8 +5939,8 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5352
5939
|
shape="${this.shape}"
|
|
5353
5940
|
?data-show="${this.isPopoverVisible}"
|
|
5354
5941
|
?isfullscreen="${this.isBibFullscreen}"
|
|
5942
|
+
.dialogLabel="${this.bibDialogLabel}"
|
|
5355
5943
|
${n$2(this.bibElement)}
|
|
5356
|
-
popover="manual"
|
|
5357
5944
|
>
|
|
5358
5945
|
<div class="slotContent">
|
|
5359
5946
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
@@ -5446,7 +6033,7 @@ class AuroDropdown extends AuroElement$2 {
|
|
|
5446
6033
|
* Copyright 2017 Google LLC
|
|
5447
6034
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
5448
6035
|
*/
|
|
5449
|
-
const u$4=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c$3=e$
|
|
6036
|
+
const u$4=(e,s,t)=>{const r=new Map;for(let l=s;l<=t;l++)r.set(e[l],l);return r},c$3=e$4(class extends i$2{constructor(e){if(super(e),e.type!==t$1.CHILD)throw Error("repeat() can only be used in text expressions")}dt(e,s,t){let r;void 0===t?t=s:void 0!==s&&(r=s);const l=[],o=[];let i=0;for(const s of e)l[i]=r?r(s,i):i,o[i]=t(s,i),i++;return {values:o,keys:l}}render(e,s,t){return this.dt(e,s,t).values}update(s,[t,r,c]){const d=M$2(s),{values:p,keys:a}=this.dt(t,r,c);if(!Array.isArray(d))return this.ut=a,p;const h=this.ut??=[],v=[];let m,y,x=0,j=d.length-1,k=0,w=p.length-1;for(;x<=j&&k<=w;)if(null===d[x])x++;else if(null===d[j])j--;else if(h[x]===a[k])v[k]=u$6(d[x],p[k]),x++,k++;else if(h[j]===a[w])v[w]=u$6(d[j],p[w]),j--,w--;else if(h[x]===a[w])v[w]=u$6(d[x],p[w]),v$2(s,v[w+1],d[x]),x++,w--;else if(h[j]===a[k])v[k]=u$6(d[j],p[k]),v$2(s,d[x],d[j]),j--,k++;else if(void 0===m&&(m=u$4(a,k,w),y=u$4(h,x,j)),m.has(h[x]))if(m.has(h[j])){const e=y.get(a[k]),t=void 0!==e?d[e]:null;if(null===t){const e=v$2(s,d[x]);u$6(e,p[k]),v[k]=e;}else v[k]=u$6(t,p[k]),v$2(s,d[x],t),d[e]=null;k++;}else h$4(d[j]),j--;else h$4(d[x]),x++;for(;k<=w;){const e=v$2(s,v[w+1]);u$6(e,p[k]),v[k++]=e;}for(;x<=j;){const e=d[x++];null!==e&&h$4(e);}return this.ut=a,p$5(s,v),E}});
|
|
5450
6037
|
|
|
5451
6038
|
var shapeSizeCss = i$7`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:56px;max-height:56px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:58px;max-height:58px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:56px;max-height:56px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:54px;max-height:54px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-box-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-box-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-box-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-box-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-box-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-box-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-box-sm{min-height:32px;max-height:32px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-box-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-box-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-box-xs{min-height:20px;max-height:20px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-box-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-box-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:0 36px 36px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}`;
|
|
5452
6039
|
|
|
@@ -10274,7 +10861,7 @@ class AuroFormValidation {
|
|
|
10274
10861
|
}
|
|
10275
10862
|
}
|
|
10276
10863
|
|
|
10277
|
-
if (!hasValue && elem.required && elem.touched) {
|
|
10864
|
+
if (!hasValue && elem.required && (force || elem.touched)) {
|
|
10278
10865
|
elem.validity = 'valueMissing';
|
|
10279
10866
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
10280
10867
|
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
@@ -10298,7 +10885,7 @@ class AuroFormValidation {
|
|
|
10298
10885
|
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
10299
10886
|
|
|
10300
10887
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
10301
|
-
this.auroInputElements.forEach(input => input.validate());
|
|
10888
|
+
this.auroInputElements.forEach(input => input.validate(force));
|
|
10302
10889
|
|
|
10303
10890
|
// Reset element validity to the validity of the input
|
|
10304
10891
|
elem.validity = this.auroInputElements[0].validity;
|
|
@@ -10504,6 +11091,17 @@ let AuroElement$1 = class AuroElement extends i$4 {
|
|
|
10504
11091
|
*/
|
|
10505
11092
|
class BaseInput extends AuroElement$1 {
|
|
10506
11093
|
|
|
11094
|
+
// Delegate focus to the native <input> inside the shadow root so that
|
|
11095
|
+
// showModal()'s dialog focusing steps reach the input element.
|
|
11096
|
+
// This keeps the mobile virtual keyboard open when the fullscreen dialog
|
|
11097
|
+
// opens, because the browser sees an input-to-input focus transfer.
|
|
11098
|
+
static get shadowRootOptions() {
|
|
11099
|
+
return {
|
|
11100
|
+
...AuroElement$1.shadowRootOptions,
|
|
11101
|
+
delegatesFocus: true,
|
|
11102
|
+
};
|
|
11103
|
+
}
|
|
11104
|
+
|
|
10507
11105
|
constructor() {
|
|
10508
11106
|
super();
|
|
10509
11107
|
|
|
@@ -10521,6 +11119,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
10521
11119
|
this.icon = false;
|
|
10522
11120
|
this.disabled = false;
|
|
10523
11121
|
this.dvInputOnly = false;
|
|
11122
|
+
this.hideLabelVisually = false;
|
|
10524
11123
|
this.max = undefined;
|
|
10525
11124
|
this.maxLength = undefined;
|
|
10526
11125
|
this.min = undefined;
|
|
@@ -10628,6 +11227,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
10628
11227
|
reflect: true
|
|
10629
11228
|
},
|
|
10630
11229
|
|
|
11230
|
+
/**
|
|
11231
|
+
* The value for the aria-activedescendant attribute.
|
|
11232
|
+
* Points to the ID of the currently active/highlighted option in a listbox.
|
|
11233
|
+
*/
|
|
11234
|
+
a11yActivedescendant: {
|
|
11235
|
+
type: String,
|
|
11236
|
+
reflect: true
|
|
11237
|
+
},
|
|
11238
|
+
|
|
10631
11239
|
/**
|
|
10632
11240
|
* If set, the label will remain fixed in the active position.
|
|
10633
11241
|
*/
|
|
@@ -10734,6 +11342,16 @@ class BaseInput extends AuroElement$1 {
|
|
|
10734
11342
|
attribute: false
|
|
10735
11343
|
},
|
|
10736
11344
|
|
|
11345
|
+
/**
|
|
11346
|
+
* If set, the label will be hidden visually but still accessible to assistive technologies.
|
|
11347
|
+
* @private
|
|
11348
|
+
*/
|
|
11349
|
+
hideLabelVisually: {
|
|
11350
|
+
type: Boolean,
|
|
11351
|
+
reflect: true
|
|
11352
|
+
},
|
|
11353
|
+
|
|
11354
|
+
|
|
10737
11355
|
/**
|
|
10738
11356
|
* If set, will render an icon inside the input to the left of the value. Support is limited to auro-input instances with credit card format.
|
|
10739
11357
|
*/
|
|
@@ -11311,31 +11929,34 @@ class BaseInput extends AuroElement$1 {
|
|
|
11311
11929
|
// Process credit card type detection and formatting during input
|
|
11312
11930
|
if (this.type === 'credit-card') {
|
|
11313
11931
|
this.processCreditCard();
|
|
11314
|
-
|
|
11932
|
+
this.touched = true;
|
|
11933
|
+
this.validation.validate(this);
|
|
11934
|
+
} else {
|
|
11315
11935
|
|
|
11316
|
-
|
|
11317
|
-
|
|
11936
|
+
// Sets value property to value of element value (el.value).
|
|
11937
|
+
this.value = this.inputElement.value;
|
|
11318
11938
|
|
|
11319
|
-
|
|
11320
|
-
|
|
11939
|
+
// Determine if the value change was programmatic, including autofill.
|
|
11940
|
+
const inputWasProgrammatic = !this.matches(":focus") || event.isProgrammatic;
|
|
11321
11941
|
|
|
11322
|
-
|
|
11323
|
-
|
|
11324
|
-
|
|
11325
|
-
|
|
11326
|
-
|
|
11942
|
+
// Validation on input or programmatic value change (including autofill).
|
|
11943
|
+
if (this.validateOnInput || inputWasProgrammatic) {
|
|
11944
|
+
this.touched = true;
|
|
11945
|
+
this.validation.validate(this);
|
|
11946
|
+
}
|
|
11327
11947
|
|
|
11328
|
-
|
|
11329
|
-
|
|
11948
|
+
// Prevents cursor jumping in Safari.
|
|
11949
|
+
const { selectionStart } = this.inputElement;
|
|
11330
11950
|
|
|
11331
|
-
|
|
11332
|
-
|
|
11333
|
-
|
|
11334
|
-
|
|
11335
|
-
|
|
11336
|
-
|
|
11337
|
-
|
|
11338
|
-
|
|
11951
|
+
if (this.setSelectionInputTypes.includes(this.type)) {
|
|
11952
|
+
this.updateComplete.then(() => {
|
|
11953
|
+
try {
|
|
11954
|
+
this.inputElement.setSelectionRange(selectionStart, selectionStart);
|
|
11955
|
+
} catch (error) { // eslint-disable-line
|
|
11956
|
+
// do nothing
|
|
11957
|
+
}
|
|
11958
|
+
});
|
|
11959
|
+
}
|
|
11339
11960
|
}
|
|
11340
11961
|
}
|
|
11341
11962
|
|
|
@@ -11368,6 +11989,11 @@ class BaseInput extends AuroElement$1 {
|
|
|
11368
11989
|
this.inputElement.scrollLeft = 100;
|
|
11369
11990
|
|
|
11370
11991
|
if (!this.noValidate) {
|
|
11992
|
+
// For credit card inputs with mask, ensure value is synced from mask instance
|
|
11993
|
+
if (this.type === 'credit-card' && this.maskInstance) {
|
|
11994
|
+
this.value = this.maskInstance.value;
|
|
11995
|
+
}
|
|
11996
|
+
|
|
11371
11997
|
this.validation.validate(this);
|
|
11372
11998
|
}
|
|
11373
11999
|
}
|
|
@@ -11392,6 +12018,20 @@ class BaseInput extends AuroElement$1 {
|
|
|
11392
12018
|
return activeEl;
|
|
11393
12019
|
}
|
|
11394
12020
|
|
|
12021
|
+
/**
|
|
12022
|
+
* Sets the active descendant element for accessibility.
|
|
12023
|
+
* Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
|
|
12024
|
+
* This function is used in components that contain `auro-input` to set the active descendant.
|
|
12025
|
+
* @private
|
|
12026
|
+
* @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
|
|
12027
|
+
* @returns {void}
|
|
12028
|
+
*/
|
|
12029
|
+
setActiveDescendant(element) {
|
|
12030
|
+
if (this.inputElement) {
|
|
12031
|
+
this.inputElement.ariaActiveDescendantElement = element;
|
|
12032
|
+
}
|
|
12033
|
+
}
|
|
12034
|
+
|
|
11395
12035
|
/**
|
|
11396
12036
|
* Validates value.
|
|
11397
12037
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
@@ -11710,7 +12350,7 @@ let p$1$1 = class p{registerComponent(t,a){customElements.get(t)||customElements
|
|
|
11710
12350
|
`;let _$2 = class _ extends z$1$1{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p$1$1;}static get properties(){return {...z$1$1.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$1$1.styles,y$1$1,w$1$1,x$1$1]}static register(t="auro-icon"){p$1$1.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$2`
|
|
11711
12351
|
<div class="componentWrapper">
|
|
11712
12352
|
<div
|
|
11713
|
-
class="${e$
|
|
12353
|
+
class="${e$3({svgWrapper:true})}"
|
|
11714
12354
|
title="${o(this.title||void 0)}">
|
|
11715
12355
|
<span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
|
|
11716
12356
|
${this.customSvg?b$2`
|
|
@@ -11721,7 +12361,7 @@ let p$1$1 = class p{registerComponent(t,a){customElements.get(t)||customElements
|
|
|
11721
12361
|
</span>
|
|
11722
12362
|
</div>
|
|
11723
12363
|
|
|
11724
|
-
<div class="${e$
|
|
12364
|
+
<div class="${e$3(t)}" part="label">
|
|
11725
12365
|
<slot></slot>
|
|
11726
12366
|
</div>
|
|
11727
12367
|
</div>
|
|
@@ -11758,7 +12398,7 @@ let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[
|
|
|
11758
12398
|
aria-labelledby="${o(this.loading?void 0:this.currentAriaLabelledBy||void 0)}"
|
|
11759
12399
|
tabindex="${o(this.static?-1:l)}"
|
|
11760
12400
|
?autofocus="${this.autofocus}"
|
|
11761
|
-
class=${e$
|
|
12401
|
+
class=${e$3(s)}
|
|
11762
12402
|
?disabled="${this.disabled||this.loading}"
|
|
11763
12403
|
?onDark="${this.onDark}"
|
|
11764
12404
|
title="${o(this.title?this.title:void 0)}"
|
|
@@ -11778,8 +12418,8 @@ let l$1 = class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[
|
|
|
11778
12418
|
>
|
|
11779
12419
|
${o(this.loading?u$7`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>`:void 0)}
|
|
11780
12420
|
|
|
11781
|
-
<span class="${e$
|
|
11782
|
-
<span class="${e$
|
|
12421
|
+
<span class="${e$3(a)}" part="contentWrapper">
|
|
12422
|
+
<span class="${e$3(r)}" part="text">
|
|
11783
12423
|
<slot></slot>
|
|
11784
12424
|
</span>
|
|
11785
12425
|
</span>
|
|
@@ -12016,7 +12656,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$4 {
|
|
|
12016
12656
|
}
|
|
12017
12657
|
};
|
|
12018
12658
|
|
|
12019
|
-
var formkitVersion$1 = '
|
|
12659
|
+
var formkitVersion$1 = '202603102257';
|
|
12020
12660
|
|
|
12021
12661
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
12022
12662
|
// See LICENSE in the project root for license information.
|
|
@@ -12198,7 +12838,7 @@ class AuroInput extends BaseInput {
|
|
|
12198
12838
|
return {
|
|
12199
12839
|
'is-disabled': this.disabled,
|
|
12200
12840
|
'withValue': this.hasValue,
|
|
12201
|
-
'util_displayHiddenVisually': this.labelHidden,
|
|
12841
|
+
'util_displayHiddenVisually': this.labelHidden || this.hideLabelVisually,
|
|
12202
12842
|
[this.labelFontClass]: true,
|
|
12203
12843
|
};
|
|
12204
12844
|
}
|
|
@@ -12352,7 +12992,7 @@ class AuroInput extends BaseInput {
|
|
|
12352
12992
|
: this.commonInputClasses;
|
|
12353
12993
|
|
|
12354
12994
|
return u$7`
|
|
12355
|
-
<label for=${this.inputId} class="${e$
|
|
12995
|
+
<label for=${this.inputId} class="${e$3(this.commonLabelClasses)}" part="label">
|
|
12356
12996
|
<slot name="label">
|
|
12357
12997
|
${this.label}
|
|
12358
12998
|
</slot>
|
|
@@ -12370,6 +13010,7 @@ class AuroInput extends BaseInput {
|
|
|
12370
13010
|
?activeLabel="${this.activeLabel}"
|
|
12371
13011
|
?disabled="${this.disabled}"
|
|
12372
13012
|
?required="${this.required}"
|
|
13013
|
+
aria-activedescendant=${o(this.a11yActivedescendant)}
|
|
12373
13014
|
aria-controls=${o(this.a11yControls)}
|
|
12374
13015
|
aria-describedby="${this.uniqueId}"
|
|
12375
13016
|
aria-expanded=${o(this.a11yExpanded)}
|
|
@@ -12377,7 +13018,7 @@ class AuroInput extends BaseInput {
|
|
|
12377
13018
|
autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
|
|
12378
13019
|
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
12379
13020
|
autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
|
|
12380
|
-
class="${e$
|
|
13021
|
+
class="${e$3(inputOverrideClasses)}"
|
|
12381
13022
|
id="${this.inputId}"
|
|
12382
13023
|
inputmode="${o(this.inputmode ? this.inputmode : undefined)}"
|
|
12383
13024
|
lang="${o(this.lang)}"
|
|
@@ -12389,8 +13030,8 @@ class AuroInput extends BaseInput {
|
|
|
12389
13030
|
spellcheck="${o(this.spellcheck ? this.spellcheck : undefined)}"
|
|
12390
13031
|
type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
|
|
12391
13032
|
/>
|
|
12392
|
-
<div class="${e$
|
|
12393
|
-
<div class="${e$
|
|
13033
|
+
<div class="${e$3(displayValueClasses)}" aria-hidden="true" part="displayValue">
|
|
13034
|
+
<div class="${e$3(this.commonDisplayValueWrapperClasses)}">
|
|
12394
13035
|
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
|
|
12395
13036
|
</div>
|
|
12396
13037
|
</div>
|
|
@@ -12545,7 +13186,7 @@ class AuroInput extends BaseInput {
|
|
|
12545
13186
|
return u$7`
|
|
12546
13187
|
<div
|
|
12547
13188
|
@click="${this.handleClick}"
|
|
12548
|
-
class="${e$
|
|
13189
|
+
class="${e$3(classicClassMap)}"
|
|
12549
13190
|
part="wrapper">
|
|
12550
13191
|
<div part="accent-left" class="accents left">
|
|
12551
13192
|
${this.renderHtmlTypeIcon()}
|
|
@@ -12578,7 +13219,7 @@ class AuroInput extends BaseInput {
|
|
|
12578
13219
|
return u$7`
|
|
12579
13220
|
<div
|
|
12580
13221
|
@click="${this.handleClick}"
|
|
12581
|
-
class="${e$
|
|
13222
|
+
class="${e$3(this.commonWrapperClasses)}"
|
|
12582
13223
|
part="wrapper">
|
|
12583
13224
|
<div class="accents left">
|
|
12584
13225
|
${this.layout.includes('left') ? u$7`
|
|
@@ -12599,7 +13240,7 @@ class AuroInput extends BaseInput {
|
|
|
12599
13240
|
` : undefined}
|
|
12600
13241
|
</div>
|
|
12601
13242
|
</div>
|
|
12602
|
-
<div class="${e$
|
|
13243
|
+
<div class="${e$3(this.helpTextClasses)}" part="inputHelpText">
|
|
12603
13244
|
${this.renderHtmlHelpText()}
|
|
12604
13245
|
</div>
|
|
12605
13246
|
`;
|
|
@@ -12614,7 +13255,7 @@ class AuroInput extends BaseInput {
|
|
|
12614
13255
|
return u$7`
|
|
12615
13256
|
<div
|
|
12616
13257
|
@click="${this.handleClick}"
|
|
12617
|
-
class="${e$
|
|
13258
|
+
class="${e$3(this.commonWrapperClasses)}"
|
|
12618
13259
|
part="wrapper">
|
|
12619
13260
|
<div class="accents left">
|
|
12620
13261
|
${this.renderHtmlTypeIcon()}
|
|
@@ -12823,7 +13464,7 @@ class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),
|
|
|
12823
13464
|
aria-labelledby="${o(this.loading?void 0:this.currentAriaLabelledBy||void 0)}"
|
|
12824
13465
|
tabindex="${o(this.static?-1:l)}"
|
|
12825
13466
|
?autofocus="${this.autofocus}"
|
|
12826
|
-
class=${e$
|
|
13467
|
+
class=${e$3(s)}
|
|
12827
13468
|
?disabled="${this.disabled||this.loading}"
|
|
12828
13469
|
?onDark="${this.onDark}"
|
|
12829
13470
|
title="${o(this.title?this.title:void 0)}"
|
|
@@ -12843,8 +13484,8 @@ class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),
|
|
|
12843
13484
|
>
|
|
12844
13485
|
${o(this.loading?u$7`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>`:void 0)}
|
|
12845
13486
|
|
|
12846
|
-
<span class="${e$
|
|
12847
|
-
<span class="${e$
|
|
13487
|
+
<span class="${e$3(a)}" part="contentWrapper">
|
|
13488
|
+
<span class="${e$3(r)}" part="text">
|
|
12848
13489
|
<slot></slot>
|
|
12849
13490
|
</span>
|
|
12850
13491
|
</span>
|
|
@@ -12860,7 +13501,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
12860
13501
|
`;let _$1 = class _ extends z$2{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p$2;}static get properties(){return {...z$2.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$2.styles,y$2,w$2,x$2]}static register(t="auro-icon"){p$2.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$2`
|
|
12861
13502
|
<div class="componentWrapper">
|
|
12862
13503
|
<div
|
|
12863
|
-
class="${e$
|
|
13504
|
+
class="${e$3({svgWrapper:true})}"
|
|
12864
13505
|
title="${o(this.title||void 0)}">
|
|
12865
13506
|
<span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
|
|
12866
13507
|
${this.customSvg?b$2`
|
|
@@ -12871,7 +13512,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
12871
13512
|
</span>
|
|
12872
13513
|
</div>
|
|
12873
13514
|
|
|
12874
|
-
<div class="${e$
|
|
13515
|
+
<div class="${e$3(t)}" part="label">
|
|
12875
13516
|
<slot></slot>
|
|
12876
13517
|
</div>
|
|
12877
13518
|
</div>
|
|
@@ -12880,7 +13521,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
12880
13521
|
var iconVersion$1 = '9.1.2';
|
|
12881
13522
|
|
|
12882
13523
|
class r{registerComponent(e,s){customElements.get(e)||customElements.define(e,class extends s{});}closestElement(e,s=this,t=(s,a=s&&s.closest(e))=>s&&s!==document&&s!==window?a||t(s.getRootNode().host):null){return t(s)}handleComponentTagRename(e,s){const t=s.toLowerCase();e.tagName.toLowerCase()!==t&&e.setAttribute(t,true);}elementMatch(e,s){const t=s.toLowerCase();return e.tagName.toLowerCase()===t||e.hasAttribute(t)}getSlotText(e,s){const t=e.shadowRoot?.querySelector(`slot[name="${s}"]`);return (t?.assignedNodes({flatten:true})||[]).map(e=>e.textContent?.trim()).join(" ").trim()||null}}var n$1=i$7`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:block}:host .heading{margin-block:0}.util_stackMarginnone--bottom{margin-bottom:0}.util_stackMargin25--bottom{margin-bottom:var(--ds-size-25, .125rem)}.util_stackMargin50--bottom{margin-bottom:var(--ds-size-50, .25rem)}.util_stackMargin100--bottom{margin-bottom:var(--ds-size-100, .5rem)}.util_stackMargin150--bottom{margin-bottom:var(--ds-size-150, .75rem)}.util_stackMargin200--bottom{margin-bottom:var(--ds-size-200, 1rem)}.util_stackMargin300--bottom{margin-bottom:var(--ds-size-300, 1.5rem)}.util_stackMargin400--bottom{margin-bottom:var(--ds-size-400, 2rem)}.util_stackMargin600--bottom{margin-bottom:var(--ds-size-600, 3rem)}.util_stackMargin800--bottom{margin-bottom:var(--ds-size-800, 4rem)}.util_stackMarginnone--top{margin-top:0}.util_stackMargin25--top{margin-top:var(--ds-size-25, .125rem)}.util_stackMargin50--top{margin-top:var(--ds-size-50, .25rem)}.util_stackMargin100--top{margin-top:var(--ds-size-100, .5rem)}.util_stackMargin150--top{margin-top:var(--ds-size-150, .75rem)}.util_stackMargin200--top{margin-top:var(--ds-size-200, 1rem)}.util_stackMargin300--top{margin-top:var(--ds-size-300, 1.5rem)}.util_stackMargin400--top{margin-top:var(--ds-size-400, 2rem)}.util_stackMargin600--top{margin-top:var(--ds-size-600, 3rem)}.util_stackMargin800--top{margin-top:var(--ds-size-800, 4rem)}
|
|
12883
|
-
`;class c extends i$4{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.level=1,this.typography="heading",this.runtimeUtils=new r;}static get properties(){return {color:{type:String,reflect:true},display:{type:String,reflect:true},level:{type:Number,reflect:true,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},margin:{type:String,reflect:true},size:{type:String,reflect:true},typography:{type:String,reflect:true},visualLevel:{type:Number,reflect:true,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}}}}static get styles(){return [n$1]}static get displayClassMap(){return {800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){r.prototype.registerComponent(e,c);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header");}spacingDecision(e){if("both"===this.margin)switch(e){case "none":return "util_stackMarginnone--top util_stackMarginnone--bottom";case "25":return "util_stackMargin25--top util_stackMargin25--bottom";case "50":return "util_stackMargin50--top util_stackMargin50--bottom";case "100":return "util_stackMargin100--top util_stackMargin100--bottom";case "150":return "util_stackMargin150--top util_stackMargin150--bottom";case "200":return "util_stackMargin200--top util_stackMargin200--bottom";case "300":return "util_stackMargin300--top util_stackMargin300--bottom";case "400":return "util_stackMargin400--top util_stackMargin400--bottom";case "600":return "util_stackMargin600--top util_stackMargin600--bottom";case "800":return "util_stackMargin800--top util_stackMargin800--bottom";default:return ""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case "none":return `util_stackMarginnone--${this.margin}`;case "25":return `util_stackMargin25--${this.margin}`;case "50":return `util_stackMargin50--${this.margin}`;case "100":return `util_stackMargin100--${this.margin}`;case "150":return `util_stackMargin150--${this.margin}`;case "200":return `util_stackMargin200--${this.margin}`;case "300":return `util_stackMargin300--${this.margin}`;case "400":return `util_stackMargin400--${this.margin}`;case "600":return `util_stackMarginX600--${this.margin}`;case "800":return `util_stackMargin800--${this.margin}`;default:return ""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",r=this.spacingDecision(this.size),n=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],o$1={heading:true,[n]:true};if(r){r.split(" ").forEach(e=>{e.trim()&&(o$1[e.trim()]=true);});}const m=e$
|
|
13524
|
+
`;class c extends i$4{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.level=1,this.typography="heading",this.runtimeUtils=new r;}static get properties(){return {color:{type:String,reflect:true},display:{type:String,reflect:true},level:{type:Number,reflect:true,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}},margin:{type:String,reflect:true},size:{type:String,reflect:true},typography:{type:String,reflect:true},visualLevel:{type:Number,reflect:true,converter(e){const s=Number(e);return Number.isNaN(s)||s<1?1:s>6?6:s}}}}static get styles(){return [n$1]}static get displayClassMap(){return {800:"heading-xl",700:"heading-lg",600:"heading-md",500:"heading-sm",400:"heading-xs",300:"heading-2xs",heading:{1:"heading-xl",2:"heading-lg",3:"heading-md",4:"heading-sm",5:"heading-xs",6:"heading-2xs"},display:{1:"display-2xl",2:"display-xl",3:"display-lg",4:"display-md",5:"display-sm",6:"display-xs"}}}static register(e="auro-header"){r.prototype.registerComponent(e,c);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-header");}spacingDecision(e){if("both"===this.margin)switch(e){case "none":return "util_stackMarginnone--top util_stackMarginnone--bottom";case "25":return "util_stackMargin25--top util_stackMargin25--bottom";case "50":return "util_stackMargin50--top util_stackMargin50--bottom";case "100":return "util_stackMargin100--top util_stackMargin100--bottom";case "150":return "util_stackMargin150--top util_stackMargin150--bottom";case "200":return "util_stackMargin200--top util_stackMargin200--bottom";case "300":return "util_stackMargin300--top util_stackMargin300--bottom";case "400":return "util_stackMargin400--top util_stackMargin400--bottom";case "600":return "util_stackMargin600--top util_stackMargin600--bottom";case "800":return "util_stackMargin800--top util_stackMargin800--bottom";default:return ""}return this.spacingApplied(e)}spacingApplied(e){switch(e){case "none":return `util_stackMarginnone--${this.margin}`;case "25":return `util_stackMargin25--${this.margin}`;case "50":return `util_stackMargin50--${this.margin}`;case "100":return `util_stackMargin100--${this.margin}`;case "150":return `util_stackMargin150--${this.margin}`;case "200":return `util_stackMargin200--${this.margin}`;case "300":return `util_stackMargin300--${this.margin}`;case "400":return `util_stackMargin400--${this.margin}`;case "600":return `util_stackMarginX600--${this.margin}`;case "800":return `util_stackMargin800--${this.margin}`;default:return ""}}template(e){this.visualLevel||this.display||(this.visualLevel=this.level);const s=e||"1",r=this.spacingDecision(this.size),n=this.visualLevel?c.displayClassMap[this.typography][this.visualLevel]:c.displayClassMap[this.display],o$1={heading:true,[n]:true};if(r){r.split(" ").forEach(e=>{e.trim()&&(o$1[e.trim()]=true);});}const m=e$3(o$1),g=s$5(`h${s}`);return u$7`<${g} class="${m}" style="color: ${o(this.color?this.color:void 0)}"><slot></slot></${g}>`}render(){return this.template(this.level)}}
|
|
12884
13525
|
|
|
12885
13526
|
var headerVersion = '5.0.1';
|
|
12886
13527
|
|
|
@@ -12984,6 +13625,18 @@ class AuroBibtemplate extends i$4 {
|
|
|
12984
13625
|
this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
|
|
12985
13626
|
}
|
|
12986
13627
|
|
|
13628
|
+
/**
|
|
13629
|
+
* Focuses the close button inside the bibtemplate's shadow DOM.
|
|
13630
|
+
* Used by parent components to set initial focus when the fullscreen dialog opens.
|
|
13631
|
+
* @returns {void}
|
|
13632
|
+
*/
|
|
13633
|
+
focusCloseButton() {
|
|
13634
|
+
const closeBtn = this.shadowRoot.querySelector('#closeButton');
|
|
13635
|
+
if (closeBtn) {
|
|
13636
|
+
closeBtn.focus();
|
|
13637
|
+
}
|
|
13638
|
+
}
|
|
13639
|
+
|
|
12987
13640
|
onCloseButtonClick() {
|
|
12988
13641
|
this.dispatchEvent(new Event("close-click", { bubbles: true,
|
|
12989
13642
|
composed: true }));
|
|
@@ -13042,7 +13695,7 @@ class AuroBibtemplate extends i$4 {
|
|
|
13042
13695
|
}
|
|
13043
13696
|
}
|
|
13044
13697
|
|
|
13045
|
-
var formkitVersion = '
|
|
13698
|
+
var formkitVersion = '202603102257';
|
|
13046
13699
|
|
|
13047
13700
|
var styleCss$3 = i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}:host{display:block;text-align:left}:host [auro-dropdown]{--ds-auro-dropdown-trigger-background-color: transparent}:host #inputInBib::part(wrapper){box-shadow:none}:host #inputInBib::part(accent-left){display:none}:host([layout*=classic]) [auro-input]{width:100%}:host([layout*=classic]) [auro-input]::part(helpText){display:none}:host([layout*=classic]) #slotHolder{display:none}`;
|
|
13048
13701
|
|
|
@@ -13458,6 +14111,9 @@ class AuroCombobox extends AuroElement {
|
|
|
13458
14111
|
this.availableOptions = [];
|
|
13459
14112
|
this.dropdownId = undefined;
|
|
13460
14113
|
this.dropdownOpen = false;
|
|
14114
|
+
this.triggerExpandedState = false;
|
|
14115
|
+
this._expandedTimeout = null;
|
|
14116
|
+
this._inFullscreenTransition = false;
|
|
13461
14117
|
this.errorMessage = null;
|
|
13462
14118
|
this.isHiddenWhileLoading = false;
|
|
13463
14119
|
this.largeFullscreenHeadline = false;
|
|
@@ -13478,7 +14134,7 @@ class AuroCombobox extends AuroElement {
|
|
|
13478
14134
|
|
|
13479
14135
|
/**
|
|
13480
14136
|
* Defines whether the component will be on lighter or darker backgrounds.
|
|
13481
|
-
* @property {'default' | 'inverse'}
|
|
14137
|
+
* @property {'default' | 'inverse'} appearance - The visual appearance of the component.
|
|
13482
14138
|
* @default 'default'
|
|
13483
14139
|
*/
|
|
13484
14140
|
appearance: {
|
|
@@ -13814,6 +14470,18 @@ class AuroCombobox extends AuroElement {
|
|
|
13814
14470
|
reflect: false,
|
|
13815
14471
|
attribute: false
|
|
13816
14472
|
},
|
|
14473
|
+
|
|
14474
|
+
/**
|
|
14475
|
+
* Deferred aria-expanded state for the trigger input.
|
|
14476
|
+
* Delays the "true" transition so VoiceOver finishes its character echo
|
|
14477
|
+
* before announcing "expanded".
|
|
14478
|
+
* @private
|
|
14479
|
+
*/
|
|
14480
|
+
triggerExpandedState: {
|
|
14481
|
+
type: Boolean,
|
|
14482
|
+
reflect: false,
|
|
14483
|
+
attribute: false
|
|
14484
|
+
},
|
|
13817
14485
|
};
|
|
13818
14486
|
}
|
|
13819
14487
|
|
|
@@ -13911,6 +14579,8 @@ class AuroCombobox extends AuroElement {
|
|
|
13911
14579
|
} else if (!option.hasAttribute('persistent')) {
|
|
13912
14580
|
// Hide all other non-persistent options
|
|
13913
14581
|
option.setAttribute('hidden', '');
|
|
14582
|
+
option.removeAttribute('aria-setsize');
|
|
14583
|
+
option.removeAttribute('aria-posinset');
|
|
13914
14584
|
}
|
|
13915
14585
|
});
|
|
13916
14586
|
|
|
@@ -13977,6 +14647,15 @@ class AuroCombobox extends AuroElement {
|
|
|
13977
14647
|
this.availableOptions = [];
|
|
13978
14648
|
this.updateFilter();
|
|
13979
14649
|
|
|
14650
|
+
// Set aria-setsize/aria-posinset on each visible option so screen readers
|
|
14651
|
+
// can announce position even when the listbox context is broken by
|
|
14652
|
+
// shadow DOM boundaries in fullscreen dialog mode.
|
|
14653
|
+
const optionCount = this.availableOptions.length;
|
|
14654
|
+
this.availableOptions.forEach((option, index) => {
|
|
14655
|
+
option.setAttribute('aria-setsize', optionCount);
|
|
14656
|
+
option.setAttribute('aria-posinset', index + 1);
|
|
14657
|
+
});
|
|
14658
|
+
|
|
13980
14659
|
if (this.value && this.input.value && !this.menu.value) {
|
|
13981
14660
|
this.syncValuesAndStates();
|
|
13982
14661
|
}
|
|
@@ -14010,7 +14689,7 @@ class AuroCombobox extends AuroElement {
|
|
|
14010
14689
|
* @returns {void}
|
|
14011
14690
|
*/
|
|
14012
14691
|
showBib() {
|
|
14013
|
-
if (!this.input.value) {
|
|
14692
|
+
if (!this.input.value && !this.dropdown.isBibFullscreen) {
|
|
14014
14693
|
this.dropdown.hide();
|
|
14015
14694
|
return;
|
|
14016
14695
|
}
|
|
@@ -14033,6 +14712,10 @@ class AuroCombobox extends AuroElement {
|
|
|
14033
14712
|
configureDropdown() {
|
|
14034
14713
|
this.dropdown.a11yRole = "combobox";
|
|
14035
14714
|
|
|
14715
|
+
// Prevent dropdown from closing on focus loss since menu content is slotted
|
|
14716
|
+
// from combobox's light DOM and won't be detected by dropdown's contains() check.
|
|
14717
|
+
this.dropdown.noHideOnThisFocusLoss = true;
|
|
14718
|
+
|
|
14036
14719
|
// Listen for the ID to be added to the dropdown so we can capture it and use it for accessibility.
|
|
14037
14720
|
this.dropdown.addEventListener('auroDropdown-idAdded', (event) => {
|
|
14038
14721
|
this.dropdownId = event.detail.id;
|
|
@@ -14043,12 +14726,80 @@ class AuroCombobox extends AuroElement {
|
|
|
14043
14726
|
this.dropdownOpen = ev.detail.expanded;
|
|
14044
14727
|
this.updateMenuShapeSize();
|
|
14045
14728
|
|
|
14046
|
-
//
|
|
14047
|
-
|
|
14048
|
-
|
|
14049
|
-
|
|
14729
|
+
// Defer aria-expanded "true" so VoiceOver finishes character echo
|
|
14730
|
+
// before announcing "expanded". Set "false" immediately on close.
|
|
14731
|
+
clearTimeout(this._expandedTimeout);
|
|
14732
|
+
if (this.dropdownOpen) {
|
|
14733
|
+
const expandedDelay = 150;
|
|
14734
|
+
this._expandedTimeout = setTimeout(() => {
|
|
14735
|
+
this.triggerExpandedState = true;
|
|
14736
|
+
}, expandedDelay);
|
|
14737
|
+
} else {
|
|
14738
|
+
this.triggerExpandedState = false;
|
|
14739
|
+
}
|
|
14740
|
+
|
|
14741
|
+
// Clear aria-activedescendant when dropdown closes
|
|
14742
|
+
if (!this.dropdownOpen && this.input) {
|
|
14743
|
+
this.input.setActiveDescendant(null);
|
|
14744
|
+
this.optionActive = null;
|
|
14745
|
+
|
|
14746
|
+
// Remove the highlighted state from all menu options so re-opening
|
|
14747
|
+
// the dropdown doesn't show a stale highlight.
|
|
14748
|
+
if (this.options) {
|
|
14749
|
+
this.options.forEach((opt) => {
|
|
14750
|
+
opt.active = false;
|
|
14751
|
+
opt.classList.remove('active');
|
|
14752
|
+
});
|
|
14050
14753
|
}
|
|
14051
|
-
|
|
14754
|
+
|
|
14755
|
+
// Restore pointer events on the menu in case they were disabled
|
|
14756
|
+
// during fullscreen open to prevent touch pass-through.
|
|
14757
|
+
this.menu.style.pointerEvents = '';
|
|
14758
|
+
|
|
14759
|
+
restoreTriggerAfterClose(this.dropdown, this.input);
|
|
14760
|
+
}
|
|
14761
|
+
|
|
14762
|
+
if (this.dropdownOpen) {
|
|
14763
|
+
// Suppress or restore dialog semantics based on mode.
|
|
14764
|
+
// On desktop, VoiceOver verbosely announces "listbox inside of a dialog"
|
|
14765
|
+
// which is disruptive for combobox usage. Fullscreen needs dialog semantics.
|
|
14766
|
+
this.updateBibDialogRole();
|
|
14767
|
+
|
|
14768
|
+
if (this.dropdown.isBibFullscreen) {
|
|
14769
|
+
// Guard against spurious validation during the focus transition
|
|
14770
|
+
// from trigger to bib input. Setting trigger.inert = true removes
|
|
14771
|
+
// focus, which fires focusout on the child auro-input before the
|
|
14772
|
+
// bib input receives focus. That focusout triggers the input's own
|
|
14773
|
+
// validate(), which dispatches a composed auroFormElement-validated
|
|
14774
|
+
// event. Because composed events are retargetted at each shadow DOM
|
|
14775
|
+
// boundary, the event appears to originate from the combobox itself
|
|
14776
|
+
// and its listener unconditionally sets this.validity — causing
|
|
14777
|
+
// premature validation. This flag suppresses all validation paths
|
|
14778
|
+
// (focusout handler, handleInputValueChange, validate(), and the
|
|
14779
|
+
// auroFormElement-validated listener) until focus settles in the bib.
|
|
14780
|
+
this._inFullscreenTransition = true;
|
|
14781
|
+
|
|
14782
|
+
// Hide the trigger from assistive technology so VoiceOver cannot reach it
|
|
14783
|
+
// behind the fullscreen dialog
|
|
14784
|
+
this.dropdown.trigger.inert = true;
|
|
14785
|
+
|
|
14786
|
+
guardTouchPassthrough(this.menu);
|
|
14787
|
+
|
|
14788
|
+
// Wait for the bibtemplate to fully render across
|
|
14789
|
+
// multiple Lit update cycles before moving focus into the bib
|
|
14790
|
+
doubleRaf(() => {
|
|
14791
|
+
this.setInputFocus();
|
|
14792
|
+
this._inFullscreenTransition = false;
|
|
14793
|
+
});
|
|
14794
|
+
} else {
|
|
14795
|
+
// wait a frame in case the bib gets hidden immediately after showing because there is no value
|
|
14796
|
+
setTimeout(() => {
|
|
14797
|
+
if (this.componentHasFocus) {
|
|
14798
|
+
this.setInputFocus();
|
|
14799
|
+
}
|
|
14800
|
+
}, 0);
|
|
14801
|
+
}
|
|
14802
|
+
}
|
|
14052
14803
|
});
|
|
14053
14804
|
|
|
14054
14805
|
this.dropdown.addEventListener('auroDropdown-triggerClick', () => {
|
|
@@ -14059,6 +14810,12 @@ class AuroCombobox extends AuroElement {
|
|
|
14059
14810
|
this.bibtemplate = this.dropdown.querySelector(this.bibtemplateTag._$litStatic$);
|
|
14060
14811
|
this.inputInBib = this.bibtemplate.querySelector(this.inputTag._$litStatic$);
|
|
14061
14812
|
|
|
14813
|
+
// Pass label text to the dropdown bib for accessible dialog naming
|
|
14814
|
+
const labelElement = this.querySelector('[slot="label"]');
|
|
14815
|
+
if (labelElement) {
|
|
14816
|
+
this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
|
|
14817
|
+
}
|
|
14818
|
+
|
|
14062
14819
|
// Exposes the CSS parts from the bibtemplate for styling
|
|
14063
14820
|
this.bibtemplate.exposeCssParts();
|
|
14064
14821
|
|
|
@@ -14069,6 +14826,14 @@ class AuroCombobox extends AuroElement {
|
|
|
14069
14826
|
this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
|
|
14070
14827
|
// event when the strategy(bib mode) is changed between fullscreen and floating
|
|
14071
14828
|
this.updateMenuShapeSize();
|
|
14829
|
+
this.updateBibDialogRole();
|
|
14830
|
+
|
|
14831
|
+
// When switching to fullscreen while open, hide trigger from assistive technology
|
|
14832
|
+
if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
|
|
14833
|
+
this.dropdown.trigger.inert = true;
|
|
14834
|
+
} else if (!this.dropdown.isBibFullscreen) {
|
|
14835
|
+
this.dropdown.trigger.inert = false;
|
|
14836
|
+
}
|
|
14072
14837
|
|
|
14073
14838
|
setTimeout(() => {
|
|
14074
14839
|
this.setInputFocus();
|
|
@@ -14092,6 +14857,13 @@ class AuroCombobox extends AuroElement {
|
|
|
14092
14857
|
setInputFocus() {
|
|
14093
14858
|
if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
|
|
14094
14859
|
this.inputInBib.focus();
|
|
14860
|
+
|
|
14861
|
+
// Place cursor at end of existing text so the user can continue editing
|
|
14862
|
+
const nativeInput = this.inputInBib.inputElement;
|
|
14863
|
+
if (nativeInput && nativeInput.value) {
|
|
14864
|
+
const len = nativeInput.value.length;
|
|
14865
|
+
nativeInput.setSelectionRange(len, len);
|
|
14866
|
+
}
|
|
14095
14867
|
} else if (!this.input.componentHasFocus) {
|
|
14096
14868
|
const focusedEl = this.querySelector(":focus");
|
|
14097
14869
|
this.input.focus();
|
|
@@ -14103,6 +14875,22 @@ class AuroCombobox extends AuroElement {
|
|
|
14103
14875
|
}
|
|
14104
14876
|
}
|
|
14105
14877
|
|
|
14878
|
+
/**
|
|
14879
|
+
* Suppresses or restores dialog semantics on the bib's dialog element.
|
|
14880
|
+
* On desktop (non-fullscreen), VoiceOver verbosely announces "listbox inside
|
|
14881
|
+
* of a dialog" which disrupts combobox usage. Setting role="presentation"
|
|
14882
|
+
* suppresses this. In fullscreen mode, dialog semantics are restored.
|
|
14883
|
+
* @private
|
|
14884
|
+
*/
|
|
14885
|
+
updateBibDialogRole() {
|
|
14886
|
+
const bibEl = this.dropdown.bibElement && this.dropdown.bibElement.value;
|
|
14887
|
+
if (!bibEl) {
|
|
14888
|
+
return;
|
|
14889
|
+
}
|
|
14890
|
+
|
|
14891
|
+
bibEl.dialogRole = this.dropdown.isBibFullscreen ? undefined : 'presentation';
|
|
14892
|
+
}
|
|
14893
|
+
|
|
14106
14894
|
/**
|
|
14107
14895
|
* Update menu to default for fullscreen bib, otherwise to this.size and this.shape.
|
|
14108
14896
|
* @private
|
|
@@ -14188,6 +14976,14 @@ class AuroCombobox extends AuroElement {
|
|
|
14188
14976
|
setTimeout(() => {
|
|
14189
14977
|
this.hideBib();
|
|
14190
14978
|
}, 0);
|
|
14979
|
+
|
|
14980
|
+
// Announce the selection after the dropdown closes so it isn't
|
|
14981
|
+
// overridden by VoiceOver's "collapsed" announcement from aria-expanded.
|
|
14982
|
+
const selectedValue = event.detail.stringValue;
|
|
14983
|
+
const announcementDelay = 300;
|
|
14984
|
+
setTimeout(() => {
|
|
14985
|
+
announceToScreenReader(this.shadowRoot, `${selectedValue}, selected`);
|
|
14986
|
+
}, announcementDelay);
|
|
14191
14987
|
}
|
|
14192
14988
|
});
|
|
14193
14989
|
|
|
@@ -14198,10 +14994,28 @@ class AuroCombobox extends AuroElement {
|
|
|
14198
14994
|
this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
|
|
14199
14995
|
this.optionActive = evt.detail;
|
|
14200
14996
|
|
|
14997
|
+
if (this.input) {
|
|
14998
|
+
this.input.setActiveDescendant(this.optionActive);
|
|
14999
|
+
}
|
|
15000
|
+
|
|
15001
|
+
// Announce the active option for screen readers including position,
|
|
15002
|
+
// since shadow DOM boundaries prevent native reading of
|
|
15003
|
+
// aria-setsize/aria-posinset via aria-activedescendant.
|
|
15004
|
+
if (this.optionActive) {
|
|
15005
|
+
const optionText = this.optionActive.textContent.trim();
|
|
15006
|
+
const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
|
|
15007
|
+
const optionIndex = this.availableOptions.indexOf(this.optionActive) + 1;
|
|
15008
|
+
const optionCount = this.availableOptions.length;
|
|
15009
|
+
announceToScreenReader(this.shadowRoot, `${optionText}${selectedState}, ${optionIndex} of ${optionCount}`);
|
|
15010
|
+
}
|
|
15011
|
+
|
|
15012
|
+
// Check if user prefers reduced motion for accessibility
|
|
15013
|
+
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
15014
|
+
|
|
14201
15015
|
this.optionActive.scrollIntoView({
|
|
14202
15016
|
alignToTop: false,
|
|
14203
15017
|
block: "nearest",
|
|
14204
|
-
behavior: "smooth"
|
|
15018
|
+
behavior: prefersReducedMotion ? "auto" : "smooth"
|
|
14205
15019
|
});
|
|
14206
15020
|
});
|
|
14207
15021
|
|
|
@@ -14220,7 +15034,7 @@ class AuroCombobox extends AuroElement {
|
|
|
14220
15034
|
* Validate every time we remove focus from the combo box.
|
|
14221
15035
|
*/
|
|
14222
15036
|
this.addEventListener('focusout', () => {
|
|
14223
|
-
if (!this.componentHasFocus) {
|
|
15037
|
+
if (!this.componentHasFocus && !this._inFullscreenTransition) {
|
|
14224
15038
|
this.validate();
|
|
14225
15039
|
}
|
|
14226
15040
|
});
|
|
@@ -14256,8 +15070,33 @@ class AuroCombobox extends AuroElement {
|
|
|
14256
15070
|
* @returns {void}
|
|
14257
15071
|
*/
|
|
14258
15072
|
handleInputValueChange(event) {
|
|
15073
|
+
// When the event comes from the fullscreen bib input, sync the value to
|
|
15074
|
+
// the trigger input. Setting trigger.value triggers Lit's updated()
|
|
15075
|
+
// (async, microtask) which fires notifyValueChanged() → another 'input'
|
|
15076
|
+
// event from the trigger. The _syncingBibValue guard persists across the
|
|
15077
|
+
// async boundary and prevents that re-entrant event from running the
|
|
15078
|
+
// non-fullscreen path (which would call clear() → hideBib()).
|
|
15079
|
+
// When the event comes from the fullscreen bib input, sync the value to
|
|
15080
|
+
// the trigger and run filtering, but suppress the re-entrant input event
|
|
15081
|
+
// that the trigger fires (via Lit updated() → notifyValueChanged()) so
|
|
15082
|
+
// the non-fullscreen hide/clear logic doesn't close the dialog.
|
|
14259
15083
|
if (event.target === this.inputInBib) {
|
|
15084
|
+
this._syncingBibValue = true;
|
|
14260
15085
|
this.input.value = this.inputInBib.value;
|
|
15086
|
+
this.input.updateComplete.then(() => {
|
|
15087
|
+
this._syncingBibValue = false;
|
|
15088
|
+
});
|
|
15089
|
+
|
|
15090
|
+
// Run filtering inline — the re-entrant event won't reach this code.
|
|
15091
|
+
this.menu.matchWord = this.inputInBib.value;
|
|
15092
|
+
this.optionActive = null;
|
|
15093
|
+
this.handleMenuOptions();
|
|
15094
|
+
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
|
|
15095
|
+
return;
|
|
15096
|
+
}
|
|
15097
|
+
|
|
15098
|
+
// Ignore re-entrant input events caused by the bib→trigger sync above.
|
|
15099
|
+
if (this._syncingBibValue) {
|
|
14261
15100
|
return;
|
|
14262
15101
|
}
|
|
14263
15102
|
|
|
@@ -14271,8 +15110,11 @@ class AuroCombobox extends AuroElement {
|
|
|
14271
15110
|
}
|
|
14272
15111
|
this.handleMenuOptions();
|
|
14273
15112
|
|
|
14274
|
-
// Validate only if the value was set programmatically
|
|
14275
|
-
|
|
15113
|
+
// Validate only if the value was set programmatically (not during user
|
|
15114
|
+
// interaction). In fullscreen dialog mode, componentHasFocus returns false
|
|
15115
|
+
// because focus is inside the top-layer dialog, so also check
|
|
15116
|
+
// dropdownOpen and the fullscreen transition flag.
|
|
15117
|
+
if (!this.componentHasFocus && !this.dropdownOpen && !this._inFullscreenTransition) {
|
|
14276
15118
|
this.validate();
|
|
14277
15119
|
}
|
|
14278
15120
|
|
|
@@ -14287,6 +15129,22 @@ class AuroCombobox extends AuroElement {
|
|
|
14287
15129
|
this.hideBib();
|
|
14288
15130
|
}
|
|
14289
15131
|
|
|
15132
|
+
// iOS virtual keyboard retention: when in fullscreen mode, ensure the
|
|
15133
|
+
// dialog opens and the bib input is focused synchronously within the
|
|
15134
|
+
// input event (user gesture) chain. Without this, Lit's async update
|
|
15135
|
+
// cycle delays showModal() past the user activation window, causing
|
|
15136
|
+
// iOS Safari to dismiss the virtual keyboard when the fullscreen
|
|
15137
|
+
// dialog opens — the user then has to tap the input again to resume
|
|
15138
|
+
// typing.
|
|
15139
|
+
if (this.dropdown.isBibFullscreen && this.input.value && this.input.value.length > 0) {
|
|
15140
|
+
if (!this.dropdown.isPopoverVisible) {
|
|
15141
|
+
this.showBib();
|
|
15142
|
+
}
|
|
15143
|
+
if (this.dropdown.isPopoverVisible) {
|
|
15144
|
+
this.setInputFocus();
|
|
15145
|
+
}
|
|
15146
|
+
}
|
|
15147
|
+
|
|
14290
15148
|
this.dispatchEvent(new CustomEvent('inputValue', { detail: { value: this.inputValue } }));
|
|
14291
15149
|
}
|
|
14292
15150
|
|
|
@@ -14296,61 +15154,7 @@ class AuroCombobox extends AuroElement {
|
|
|
14296
15154
|
* @returns {void}
|
|
14297
15155
|
*/
|
|
14298
15156
|
configureCombobox() {
|
|
14299
|
-
this
|
|
14300
|
-
if (evt.key === 'Enter') {
|
|
14301
|
-
if (this.dropdown.isPopoverVisible && this.optionActive) {
|
|
14302
|
-
this.menu.makeSelection();
|
|
14303
|
-
|
|
14304
|
-
await this.updateComplete;
|
|
14305
|
-
|
|
14306
|
-
evt.preventDefault();
|
|
14307
|
-
evt.stopPropagation();
|
|
14308
|
-
this.setClearBtnFocus();
|
|
14309
|
-
} else {
|
|
14310
|
-
this.showBib();
|
|
14311
|
-
}
|
|
14312
|
-
}
|
|
14313
|
-
|
|
14314
|
-
if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
|
|
14315
|
-
if (this.dropdown.isBibFullscreen) {
|
|
14316
|
-
|
|
14317
|
-
// when focus is on the input, move focus back to close button with Tab key
|
|
14318
|
-
if (document.activeElement.shadowRoot.activeElement === this.inputInBib) {
|
|
14319
|
-
evt.preventDefault();
|
|
14320
|
-
this.dropdown.focus();
|
|
14321
|
-
}
|
|
14322
|
-
} else {
|
|
14323
|
-
if (this.menu.optionActive && this.menu.optionActive.value) {
|
|
14324
|
-
this.menu.value = this.menu.optionActive.value;
|
|
14325
|
-
}
|
|
14326
|
-
|
|
14327
|
-
setTimeout(() => {
|
|
14328
|
-
if (!this.componentHasFocus) {
|
|
14329
|
-
this.hideBib();
|
|
14330
|
-
}
|
|
14331
|
-
}, 0);
|
|
14332
|
-
}
|
|
14333
|
-
}
|
|
14334
|
-
|
|
14335
|
-
/**
|
|
14336
|
-
* Prevent moving the cursor position while navigating the menu options.
|
|
14337
|
-
*/
|
|
14338
|
-
if (evt.key === 'ArrowUp' || evt.key === 'ArrowDown') {
|
|
14339
|
-
if (this.availableOptions.length > 0) {
|
|
14340
|
-
this.showBib();
|
|
14341
|
-
}
|
|
14342
|
-
|
|
14343
|
-
if (this.dropdown.isPopoverVisible) {
|
|
14344
|
-
evt.preventDefault();
|
|
14345
|
-
|
|
14346
|
-
// navigate on menu only when the focus is on input
|
|
14347
|
-
if (!this.dropdown.isBibFullscreen || this.dropdown.isPopoverVisible) {
|
|
14348
|
-
const direction = evt.key.replace('Arrow', '').toLowerCase();
|
|
14349
|
-
this.menu.navigateOptions(direction);
|
|
14350
|
-
}
|
|
14351
|
-
}
|
|
14352
|
-
}
|
|
14353
|
-
});
|
|
15157
|
+
applyKeyboardStrategy(this, comboboxKeyboardStrategy);
|
|
14354
15158
|
|
|
14355
15159
|
this.addEventListener('focusin', () => {
|
|
14356
15160
|
this.touched = true;
|
|
@@ -14359,6 +15163,14 @@ class AuroCombobox extends AuroElement {
|
|
|
14359
15163
|
});
|
|
14360
15164
|
|
|
14361
15165
|
this.addEventListener('auroFormElement-validated', (evt) => {
|
|
15166
|
+
// During the fullscreen transition, child elements (auro-input) may fire
|
|
15167
|
+
// their own validation events when the trigger becomes inert and loses
|
|
15168
|
+
// focus. Those composed events bubble up through shadow DOM boundaries
|
|
15169
|
+
// and would incorrectly set combobox validity. Ignore them.
|
|
15170
|
+
if (this._inFullscreenTransition) {
|
|
15171
|
+
return;
|
|
15172
|
+
}
|
|
15173
|
+
|
|
14362
15174
|
this.input.validity = evt.detail.validity;
|
|
14363
15175
|
this.input.errorMessage = evt.detail.message;
|
|
14364
15176
|
this.validity = evt.detail.validity;
|
|
@@ -14385,6 +15197,11 @@ class AuroCombobox extends AuroElement {
|
|
|
14385
15197
|
}
|
|
14386
15198
|
}
|
|
14387
15199
|
|
|
15200
|
+
disconnectedCallback() {
|
|
15201
|
+
super.disconnectedCallback();
|
|
15202
|
+
this._inFullscreenTransition = false;
|
|
15203
|
+
}
|
|
15204
|
+
|
|
14388
15205
|
firstUpdated() {
|
|
14389
15206
|
// Add the tag name as an attribute if it is different than the component name
|
|
14390
15207
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-combobox');
|
|
@@ -14462,6 +15279,9 @@ class AuroCombobox extends AuroElement {
|
|
|
14462
15279
|
* @param {boolean} [force=false] - Whether to force validation.
|
|
14463
15280
|
*/
|
|
14464
15281
|
validate(force = false) {
|
|
15282
|
+
if (this._inFullscreenTransition) {
|
|
15283
|
+
return;
|
|
15284
|
+
}
|
|
14465
15285
|
this.validation.validate(this, force);
|
|
14466
15286
|
}
|
|
14467
15287
|
|
|
@@ -14515,7 +15335,13 @@ class AuroCombobox extends AuroElement {
|
|
|
14515
15335
|
}
|
|
14516
15336
|
|
|
14517
15337
|
if (changedProperties.has('availableOptions')) {
|
|
14518
|
-
|
|
15338
|
+
// dropdownOpen is set synchronously by the auroDropdown-toggled event
|
|
15339
|
+
// handler during showBib() → floater.showBib() → dispatchEventDropdownToggle(),
|
|
15340
|
+
// so it's already true by the time updated() runs. This prevents the else
|
|
15341
|
+
// branch from calling hideBib() when the dropdown was just opened but
|
|
15342
|
+
// :focus-within hasn't propagated through the top-layer dialog's nested
|
|
15343
|
+
// shadow DOM boundaries.
|
|
15344
|
+
if ((this.availableOptions.length > 0 && (this.componentHasFocus || this.dropdownOpen)) || this.menu.loading || (this.availableOptions.length === 0 && this.noMatchOption)) {
|
|
14519
15345
|
this.showBib();
|
|
14520
15346
|
} else {
|
|
14521
15347
|
this.hideBib();
|
|
@@ -14632,14 +15458,7 @@ class AuroCombobox extends AuroElement {
|
|
|
14632
15458
|
|
|
14633
15459
|
return u$7`
|
|
14634
15460
|
<div>
|
|
14635
|
-
<
|
|
14636
|
-
${this.optionActive && this.availableOptions.length > 0
|
|
14637
|
-
? u$7`
|
|
14638
|
-
${`${this.optionActive.textContent}, selected, ${this.availableOptions.indexOf(this.optionActive) + 1} of ${this.availableOptions.length}`}
|
|
14639
|
-
`
|
|
14640
|
-
: undefined
|
|
14641
|
-
}
|
|
14642
|
-
</div>
|
|
15461
|
+
<span id="srAnnouncement" class="util_displayHiddenVisually" aria-live="polite" role="status"></span>
|
|
14643
15462
|
<${this.dropdownTag}
|
|
14644
15463
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
14645
15464
|
.fullscreenBreakpoint="${this.fullscreenBreakpoint}"
|
|
@@ -14663,7 +15482,8 @@ class AuroCombobox extends AuroElement {
|
|
|
14663
15482
|
<${this.inputTag}
|
|
14664
15483
|
@input="${this.handleInputValueChange}"
|
|
14665
15484
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
14666
|
-
.
|
|
15485
|
+
.a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
|
|
15486
|
+
.a11yExpanded="${this.triggerExpandedState}"
|
|
14667
15487
|
.a11yControls="${this.dropdownId}"
|
|
14668
15488
|
.autocomplete="${this.autocomplete}"
|
|
14669
15489
|
.inputmode="${this.inputmode}"
|
|
@@ -14696,8 +15516,10 @@ class AuroCombobox extends AuroElement {
|
|
|
14696
15516
|
<slot @slotchange="${this.handleSlotChange}"></slot>
|
|
14697
15517
|
<${this.inputTag}
|
|
14698
15518
|
id="inputInBib"
|
|
15519
|
+
autofocus
|
|
14699
15520
|
@input="${this.handleInputValueChange}"
|
|
14700
|
-
.
|
|
15521
|
+
.a11yActivedescendant="${this.dropdownOpen && this.optionActive ? this.optionActive.id : undefined}"
|
|
15522
|
+
.a11yControls=${`${this.dropdownId}-floater-bib`}
|
|
14701
15523
|
.autocomplete="${this.autocomplete}"
|
|
14702
15524
|
.format="${this.format}"
|
|
14703
15525
|
.inputmode="${this.inputmode}"
|
|
@@ -14708,7 +15530,7 @@ class AuroCombobox extends AuroElement {
|
|
|
14708
15530
|
?icon="${this.triggerIcon}"
|
|
14709
15531
|
?required="${this.required}"
|
|
14710
15532
|
a11yRole="combobox"
|
|
14711
|
-
a11yExpanded="
|
|
15533
|
+
.a11yExpanded="${this.dropdownOpen}"
|
|
14712
15534
|
layout="classic"
|
|
14713
15535
|
noValidate="true"
|
|
14714
15536
|
shape="classic"
|
|
@@ -14721,14 +15543,14 @@ class AuroCombobox extends AuroElement {
|
|
|
14721
15543
|
<span slot="helpText">
|
|
14722
15544
|
${!this.validity || this.validity === 'valid'
|
|
14723
15545
|
? u$7`
|
|
14724
|
-
<${this.helpTextTag} class="${e$
|
|
15546
|
+
<${this.helpTextTag} class="${e$3(helpTextContentClasses)}" appearance="${this.onDark ? 'inverse' : this.appearance}"">
|
|
14725
15547
|
<p id="${this.uniqueId}" part="helpText">
|
|
14726
15548
|
<slot name="helpText"></slot>
|
|
14727
15549
|
</p>
|
|
14728
15550
|
</${this.helpTextTag}>
|
|
14729
15551
|
`
|
|
14730
15552
|
: u$7`
|
|
14731
|
-
<${this.helpTextTag} class="${e$
|
|
15553
|
+
<${this.helpTextTag} class="${e$3(errorTextContentClasses)}" error appearance="${this.onDark ? 'inverse' : this.appearance}"">
|
|
14732
15554
|
<p id="${this.uniqueId}" role="alert" aria-live="assertive" part="helpText">
|
|
14733
15555
|
${this.errorMessage}
|
|
14734
15556
|
</p>
|
|
@@ -14742,7 +15564,7 @@ class AuroCombobox extends AuroElement {
|
|
|
14742
15564
|
}
|
|
14743
15565
|
}
|
|
14744
15566
|
|
|
14745
|
-
var styleCss$1 = i$7`:focus:not(:focus-visible){outline:3px solid transparent}.body-default{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);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.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);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{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);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.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);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.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);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.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);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.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);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.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);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.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);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.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);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.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);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.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);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.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);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.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);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.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);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.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);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));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);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));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);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));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);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}:host{display:block;vertical-align:middle;line-height:0}:host .menuWrapper{box-sizing:border-box;display:flex;flex-direction:column;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;display:inline-block;margin-bottom:var(--ds-size-25, 0.125rem)}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]){overflow-y:auto}:host([root]) .menuWrapper.lg{padding:var(--ds-size-150, 0.75rem);gap:var(--ds-size-50, 0.25rem)}:host([root]) .menuWrapper.xl{padding:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}`;
|
|
15567
|
+
var styleCss$1 = i$7`:focus:not(:focus-visible){outline:3px solid transparent}.body-default{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);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.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);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{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);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.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);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.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);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.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);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.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);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.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);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.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);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.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);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.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);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.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);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.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);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.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);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.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);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.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);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));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);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));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);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));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);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}:host{display:block;vertical-align:middle;line-height:0}:host .menuWrapper{box-sizing:border-box;display:flex;flex-direction:column;width:100%;margin:0;padding:0}:host ::slotted(hr){box-sizing:content-box !important;height:0 !important;overflow:visible !important;margin:var(--ds-size-100, 0.5rem) 0 !important;border-width:0 !important;border-top-width:1px !important;border-top-style:solid !important}:host [loadingplaceholder].empty{opacity:0;position:absolute}:host [loadingplaceholder] slot[name=loadingIcon]{vertical-align:middle;display:inline-block;margin-bottom:var(--ds-size-25, 0.125rem)}:host [loadingplaceholder] slot[name=loadingIcon]::slotted(*){margin-right:var(--ds-size-150, 0.75rem)}:host([root]) .menuWrapper.lg{padding:var(--ds-size-150, 0.75rem);gap:var(--ds-size-50, 0.25rem)}:host([root]) .menuWrapper.xl{padding:var(--ds-size-200, 1rem);gap:var(--ds-size-100, 0.5rem)}`;
|
|
14746
15568
|
|
|
14747
15569
|
var colorCss$1 = i$7`:host ::slotted(hr){border-top-color:var(--ds-auro-menu-divider-color)}[loadingplaceholder] slot[name=loadingIcon]{color:var(--ds-auro-menu-loader-color)}[loadingplaceholder] slot[name=loadingText]{color:var(--ds-auro-menu-loader-text-color)}`;
|
|
14748
15570
|
|
|
@@ -14783,7 +15605,7 @@ class s{get value(){return this.o}set value(s){this.setValue(s);}setValue(s,t=fa
|
|
|
14783
15605
|
|
|
14784
15606
|
var styleCss = i$7`.body-default{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);font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.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);font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{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);font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.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);font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);font-size:var(--wcss-body-2xs-font-size, 0.625rem);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);font-weight:var(--wcss-display-2xl-weight, 300);line-height:var(--wcss-display-2xl-line-height, 1.3);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem))}.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);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);font-weight:var(--wcss-display-xl-weight, 300);line-height:var(--wcss-display-xl-line-height, 1.3);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem))}.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);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);font-weight:var(--wcss-display-lg-weight, 300);line-height:var(--wcss-display-lg-line-height, 1.3);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem))}.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);letter-spacing:var(--wcss-display-md-letter-spacing, 0);font-weight:var(--wcss-display-md-weight, 300);line-height:var(--wcss-display-md-line-height, 1.3);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem))}.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);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);font-weight:var(--wcss-display-sm-weight, 300);line-height:var(--wcss-display-sm-line-height, 1.3);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem))}.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);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);font-weight:var(--wcss-display-xs-weight, 300);line-height:var(--wcss-display-xs-line-height, 1.3);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem))}.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);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);font-weight:var(--wcss-heading-xl-weight, 300);line-height:var(--wcss-heading-xl-line-height, 1.3);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem))}.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);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);font-weight:var(--wcss-heading-lg-weight, 300);line-height:var(--wcss-heading-lg-line-height, 1.3);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem))}.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);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);font-weight:var(--wcss-heading-md-weight, 300);line-height:var(--wcss-heading-md-line-height, 1.3);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem))}.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);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);font-weight:var(--wcss-heading-sm-weight, 300);line-height:var(--wcss-heading-sm-line-height, 1.3);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem))}.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);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);font-weight:var(--wcss-heading-xs-weight, 450);line-height:var(--wcss-heading-xs-line-height, 1.3);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem))}.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);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);font-weight:var(--wcss-heading-2xs-weight, 450);line-height:var(--wcss-heading-2xs-line-height, 1.3);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem))}.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);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-2xl-weight, 450);line-height:var(--wcss-accent-2xl-line-height, 1);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));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);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);font-weight:var(--wcss-accent-xl-weight, 450);line-height:var(--wcss-accent-xl-line-height, 1.3);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);font-weight:var(--wcss-accent-lg-weight, 450);line-height:var(--wcss-accent-lg-line-height, 1.3);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));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);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);font-weight:var(--wcss-accent-md-weight, 500);line-height:var(--wcss-accent-md-line-height, 1.3);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);font-weight:var(--wcss-accent-sm-weight, 500);line-height:var(--wcss-accent-sm-line-height, 1.3);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));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);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-xs-weight, 500);line-height:var(--wcss-accent-xs-line-height, 1.3);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));text-transform:uppercase}.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);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);font-weight:var(--wcss-accent-2xs-weight, 450);line-height:var(--wcss-accent-2xs-line-height, 1.3);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));text-transform:uppercase}:host{cursor:pointer;user-select:none;text-overflow:ellipsis;max-width:100dvw}:host .wrapper{display:flex;align-items:center;padding-right:var(--ds-size-200, 1rem);padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem));padding-top:var(--ds-size-50, 0.25rem);padding-bottom:var(--ds-size-50, 0.25rem);border-radius:var(--ds-size-100, 0.5rem);-webkit-tap-highlight-color:transparent}:host .wrapper[class*=shape-box]{border-radius:unset}:host .wrapper[class*=shape-snowflake]{border-radius:unset;line-height:24px}:host .wrapper[class*=shape-pill]{border-radius:30px}:host .wrapper[class*=-lg]{padding-top:var(--ds-size-75, 0.375rem);padding-bottom:var(--ds-size-75, 0.375rem);padding-right:var(--ds-size-150, 0.75rem);line-height:26px}:host .wrapper[class*=-xl]{padding-top:var(--ds-size-100, 0.5rem);padding-bottom:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem);line-height:26px}:host slot{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-150, 0.75rem);margin-left:var(--ds-size-100, 0.5rem)}:host ::slotted(.nestingSpacer){display:inline-block;width:var(--ds-size-300, 1.5rem)}[slot=displayValue]{display:none}:host([loadingplaceholder]) .wrapper{padding-left:calc(var(--ds-size-150, 0.75rem) + var(--ds-size-300, 1.5rem) + var(--ds-size-100, 0.5rem))}:host([selected]) .wrapper{padding-left:0}:host([nocheckmark]) .wrapper{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-lg]{padding-left:var(--ds-size-150, 0.75rem)}:host([nocheckmark]) .wrapper[class*=-xl]{padding-left:var(--ds-size-200, 1rem)}:host([hidden]){display:none}:host([static]){pointer-events:none}:host([disabled]:hover){cursor:auto}:host([disabled]){user-select:none;pointer-events:none}`;
|
|
14785
15607
|
|
|
14786
|
-
var colorCss = i$7`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color, transparent);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color, transparent);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:hover)
|
|
15608
|
+
var colorCss = i$7`:host .wrapper{background-color:var(--ds-auro-menuoption-container-color, transparent);box-shadow:inset 0 0 0 1px var(--ds-auro-menuoption-container-border-color, transparent);color:var(--ds-auro-menuoption-text-color)}:host svg{fill:var(--ds-auro-menuoption-icon-color)}:host([disabled]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host(:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host(:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([selected]){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-menuoption-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([selected].active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}@media(hover: hover){:host([selected]:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd)}}:host([selected]:focus){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-subtle, #b4eff9);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}:host(:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host(:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}:host([selected]:focus.active){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}@media(hover: hover){:host([selected]:focus:hover){--ds-auro-menuoption-container-color: var(--ds-basic-color-surface-accent1-muted, #ebfafd);--ds-auro-menuoption-container-border-color: var(--ds-basic-color-border-brand, #00274a)}}`;
|
|
14787
15609
|
|
|
14788
15610
|
class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,class extends a{});}closestElement(t,a=this,e=(a,s=a&&a.closest(t))=>a&&a!==document&&a!==window?s||e(a.getRootNode().host):null){return e(a)}handleComponentTagRename(t,a){const e=a.toLowerCase();t.tagName.toLowerCase()!==e&&t.setAttribute(e,true);}elementMatch(t,a){const e=a.toLowerCase();return t.tagName.toLowerCase()===e||t.hasAttribute(e)}getSlotText(t,a){const e=t.shadowRoot?.querySelector(`slot[name="${a}"]`);return (e?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}var u='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="error__desc" class="ico_squareLarge" data-deprecated="true" role="img" style="min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor" viewBox="0 0 24 24" part="svg"><title/><desc id="error__desc">Error alert indicator.</desc><path d="m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583"/></svg>';class m extends i$4{static get properties(){return {hidden:{type:Boolean,reflect:true},hiddenVisually:{type:Boolean,reflect:true},hiddenAudible:{type:Boolean,reflect:true}}}hideAudible(t){return t?"true":"false"}}const g=new Map,f=(t,a={})=>{const e=a.responseParser||(t=>t.text());return g.has(t)||g.set(t,fetch(t).then(e)),g.get(t)};var w=i$7`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, .75rem))}:host{color:currentColor;vertical-align:middle;display:inline-block}svg{min-width:var(--ds-auro-icon-size, 1.5rem)!important;width:var(--ds-auro-icon-size, 1.5rem)!important;height:var(--ds-auro-icon-size, 1.5rem)!important}.componentWrapper{display:flex;line-height:var(--ds-auro-icon-size)}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.svgWrapper [part=svg]{display:flex}.labelWrapper{margin-left:var(--ds-size-50, .25rem)}.labelWrapper ::slotted(*){line-height:inherit!important}
|
|
14789
15611
|
`;class z extends m{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.onDark=false,this.appearance="default";}static get properties(){return {...m.properties,onDark:{type:Boolean,reflect:true},appearance:{type:String,reflect:true},svg:{attribute:false,reflect:true}}}static get styles(){return w}async fetchIcon(t,a){let e="";e="logos"===t?await f(`${this.uri}/${t}/${a}.svg`):await f(`${this.uri}/icons/${t}/${a}.svg`);return (new DOMParser).parseFromString(e,"text/html").body.querySelector("svg")}async firstUpdated(){try{if(!this.customSvg){const t=await this.fetchIcon(this.category,this.name);if(t)this.svg=t;else if(!t){const t=(new DOMParser).parseFromString(u,"text/html");this.svg=t.body.firstChild;}}}catch(t){this.svg=void 0;}}}i$7`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host{display:inline-block;--ds-auro-icon-size: 100%;width:100%;height:100%}:host .logo{color:var(--ds-auro-alaska-color)}:host([onDark]),:host([appearance=inverse]){--ds-auro-alaska-color: #FFF}
|
|
@@ -14792,7 +15614,7 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
14792
15614
|
`;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$2`
|
|
14793
15615
|
<div class="componentWrapper">
|
|
14794
15616
|
<div
|
|
14795
|
-
class="${e$
|
|
15617
|
+
class="${e$3({svgWrapper:true})}"
|
|
14796
15618
|
title="${o(this.title||void 0)}">
|
|
14797
15619
|
<span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
|
|
14798
15620
|
${this.customSvg?b$2`
|
|
@@ -14803,13 +15625,13 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
14803
15625
|
</span>
|
|
14804
15626
|
</div>
|
|
14805
15627
|
|
|
14806
|
-
<div class="${e$
|
|
15628
|
+
<div class="${e$3(t)}" part="label">
|
|
14807
15629
|
<slot></slot>
|
|
14808
15630
|
</div>
|
|
14809
15631
|
</div>
|
|
14810
15632
|
`}}
|
|
14811
15633
|
|
|
14812
|
-
var iconVersion = '9.1.
|
|
15634
|
+
var iconVersion = '9.1.2';
|
|
14813
15635
|
|
|
14814
15636
|
var checkmarkIcon = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"checkmark-sm__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"checkmark-sm__desc\">a small check mark.</desc><path d=\"M8.461 11.84a.625.625 0 1 0-.922.844l2.504 2.738c.247.27.674.27.922 0l5.496-6a.625.625 0 1 0-.922-.844l-5.035 5.496z\"/></svg>"};
|
|
14815
15637
|
|
|
@@ -14849,6 +15671,8 @@ function dispatchMenuEvent(element, eventName, detail = null) {
|
|
|
14849
15671
|
*
|
|
14850
15672
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
14851
15673
|
*/
|
|
15674
|
+
let menuOptionIdCounter = 0;
|
|
15675
|
+
|
|
14852
15676
|
class AuroMenuOption extends AuroElement {
|
|
14853
15677
|
|
|
14854
15678
|
/**
|
|
@@ -15031,6 +15855,12 @@ class AuroMenuOption extends AuroElement {
|
|
|
15031
15855
|
// Add the tag name as an attribute if it is different than the component name
|
|
15032
15856
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
|
|
15033
15857
|
|
|
15858
|
+
// Generate unique ID if not already set (required for aria-activedescendant)
|
|
15859
|
+
if (!this.id) {
|
|
15860
|
+
menuOptionIdCounter += 1;
|
|
15861
|
+
this.id = `menuoption-${menuOptionIdCounter}`;
|
|
15862
|
+
}
|
|
15863
|
+
|
|
15034
15864
|
this.setAttribute('role', 'option');
|
|
15035
15865
|
this.setAttribute('aria-selected', 'false');
|
|
15036
15866
|
|
|
@@ -15308,7 +16138,7 @@ class AuroMenuOption extends AuroElement {
|
|
|
15308
16138
|
xl: 'body-lg'
|
|
15309
16139
|
};
|
|
15310
16140
|
|
|
15311
|
-
const classes = e$
|
|
16141
|
+
const classes = e$3({
|
|
15312
16142
|
'wrapper': true,
|
|
15313
16143
|
[this.size ? fontClassMap[this.size] : 'body-sm']: true,
|
|
15314
16144
|
});
|
|
@@ -15935,7 +16765,7 @@ class MenuService {
|
|
|
15935
16765
|
|
|
15936
16766
|
const MenuContext = n('menu-context');
|
|
15937
16767
|
|
|
15938
|
-
/* eslint-disable no-underscore-dangle
|
|
16768
|
+
/* eslint-disable no-underscore-dangle */
|
|
15939
16769
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
15940
16770
|
// See LICENSE in the project root for license information.
|
|
15941
16771
|
|
|
@@ -15956,7 +16786,7 @@ const MenuContext = n('menu-context');
|
|
|
15956
16786
|
* @slot - Slot for insertion of menu options.
|
|
15957
16787
|
*/
|
|
15958
16788
|
|
|
15959
|
-
/* eslint-disable
|
|
16789
|
+
/* eslint-disable max-lines */
|
|
15960
16790
|
|
|
15961
16791
|
class AuroMenu extends AuroElement {
|
|
15962
16792
|
|
|
@@ -16413,6 +17243,11 @@ class AuroMenu extends AuroElement {
|
|
|
16413
17243
|
if (this.rootMenu) {
|
|
16414
17244
|
this.setAttribute('role', 'listbox');
|
|
16415
17245
|
this.setAttribute('root', '');
|
|
17246
|
+
|
|
17247
|
+
if (this.multiSelect) {
|
|
17248
|
+
this.setAttribute('aria-multiselectable', 'true');
|
|
17249
|
+
}
|
|
17250
|
+
|
|
16416
17251
|
this.handleNestedMenus(this);
|
|
16417
17252
|
}
|
|
16418
17253
|
}
|
|
@@ -16578,7 +17413,7 @@ class AuroMenu extends AuroElement {
|
|
|
16578
17413
|
* @private
|
|
16579
17414
|
*/
|
|
16580
17415
|
get wrapperClasses() {
|
|
16581
|
-
return e$
|
|
17416
|
+
return e$3({
|
|
16582
17417
|
'menuWrapper': true,
|
|
16583
17418
|
[this.size]: true,
|
|
16584
17419
|
});
|