@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
|
@@ -59,25 +59,36 @@ function resetStateExample() {
|
|
|
59
59
|
});
|
|
60
60
|
}
|
|
61
61
|
|
|
62
|
+
function updateActiveOptionExample() {
|
|
63
|
+
const select = document.getElementById('updateActiveOptionExample');
|
|
64
|
+
const dropdown = select.dropdown;
|
|
65
|
+
|
|
66
|
+
dropdown.addEventListener('auroDropdown-toggled', () => {
|
|
67
|
+
if (dropdown.isPopoverVisible) {
|
|
68
|
+
select.updateActiveOption(2); // Set the active option to the third item (index 2)
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
|
|
62
73
|
/**
|
|
63
74
|
* @license
|
|
64
75
|
* Copyright 2019 Google LLC
|
|
65
76
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
66
77
|
*/
|
|
67
|
-
const t$2=globalThis,e$
|
|
78
|
+
const t$2=globalThis,e$7=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$7=Symbol(),o$7=new WeakMap;let n$7 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$7)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$7),i$6=(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$7)},S$2=(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$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$5=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;
|
|
68
79
|
|
|
69
80
|
/**
|
|
70
81
|
* @license
|
|
71
82
|
* Copyright 2017 Google LLC
|
|
72
83
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
73
|
-
*/const{is:i$5,defineProperty:e$
|
|
84
|
+
*/const{is:i$5,defineProperty:e$6,getOwnPropertyDescriptor:h$4,getOwnPropertyNames:r$4,getOwnPropertySymbols:o$6,getPrototypeOf:n$6}=Object,a$2=globalThis,c$4=a$2.trustedTypes,l$3=c$4?c$4.emptyScript:"",p$5=a$2.reactiveElementPolyfillSupport,d$2=(t,s)=>t,u$6={toAttribute(t,s){switch(s){case Boolean:t=t?l$3: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$6=(t,s)=>!i$5(t,s),b$2={attribute:true,type:String,converter:u$6,reflect:false,useDefault:false,hasChanged:f$6};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;let y$5 = 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$2){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$4(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$2}static _$Ei(){if(this.hasOwnProperty(d$2("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$2("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$2("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$5(s));}else void 0!==s&&i.push(c$5(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$2(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$6).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$6;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$6)(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$5.elementStyles=[],y$5.shadowRootOptions={mode:"open"},y$5[d$2("elementProperties")]=new Map,y$5[d$2("finalized")]=new Map,p$5?.({ReactiveElement:y$5}),(a$2.reactiveElementVersions??=[]).push("2.1.2");
|
|
74
85
|
|
|
75
86
|
/**
|
|
76
87
|
* @license
|
|
77
88
|
* Copyright 2017 Google LLC
|
|
78
89
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
79
90
|
*/
|
|
80
|
-
const t$1=globalThis,i$4=t=>t,s$6=t$1.trustedTypes,e$
|
|
91
|
+
const t$1=globalThis,i$4=t=>t,s$6=t$1.trustedTypes,e$5=s$6?s$6.createPolicy("lit-html",{createHTML:t=>t}):void 0,h$3="$lit$",o$5=`lit$${Math.random().toFixed(9).slice(2)}$`,n$5="?"+o$5,r$3=`<${n$5}>`,l$2=document,c$3=()=>l$2.createComment(""),a$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,u$5=Array.isArray,d$1=t=>u$5(t)||"function"==typeof t?.[Symbol.iterator],f$5="[ \t\n\f\r]",v$1=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,_$3=/-->/g,m$4=/>/g,p$4=RegExp(`>|${f$5}(?:([^\\s"'>=/]+)(${f$5}*=${f$5}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),g$4=/'/g,$=/"/g,y$4=/^(?:script|style|textarea|title)$/i,x$4=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),b$1=x$4(1),E=Symbol.for("lit-noChange"),A$1=Symbol.for("lit-nothing"),C$1=new WeakMap,P=l$2.createTreeWalker(l$2,129);function V(t,i){if(!u$5(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==e$5?e$5.createHTML(i):i}const N$1=(t,i)=>{const s=t.length-1,e=[];let n,l=2===i?"<svg>":3===i?"<math>":"",c=v$1;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$1?"!--"===u[1]?c=_$3:void 0!==u[1]?c=m$4:void 0!==u[2]?(y$4.test(u[2])&&(n=RegExp("</"+u[2],"g")),c=p$4):void 0!==u[3]&&(c=p$4):c===p$4?">"===u[0]?(c=n??v$1,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?p$4:'"'===u[3]?$:g$4):c===$||c===g$4?c=p$4:c===_$3||c===m$4?c=v$1:(c=p$4,n=void 0);const x=c===p$4&&t[i+1].startsWith("/>")?" ":"";l+=c===v$1?s+r$3:d>=0?(e.push(a),s.slice(0,d)+h$3+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$1 = class S{constructor({strings:t,_$litType$:i},e){let r;this.parts=[];let l=0,a=0;const u=t.length-1,d=this.parts,[f,v]=N$1(t,i);if(this.el=S.createElement(f,e),P.currentNode=this.el.content,2===i||3===i){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=P.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(h$3)){const i=v[a++],s=r.getAttribute(t).split(o$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$4:H$1}),r.removeAttribute(t);}else t.startsWith(o$5)&&(d.push({type:6,index:l}),r.removeAttribute(t));if(y$4.test(r.tagName)){const t=r.textContent.split(o$5),i=t.length-1;if(i>0){r.textContent=s$6?s$6.emptyScript:"";for(let s=0;s<i;s++)r.append(t[s],c$3()),P.nextNode(),d.push({type:2,index:++l});r.append(t[i],c$3());}}}else if(8===r.nodeType)if(r.data===n$5)d.push({type:2,index:l});else {let t=-1;for(;-1!==(t=r.data.indexOf(o$5,t+1));)d.push({type:7,index:l}),t+=o$5.length-1;}l++;}}static createElement(t,i){const s=l$2.createElement("template");return s.innerHTML=t,s}};function M$1(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$1(t,h._$AS(t,i.values),h,e)),i}let R$1 = class R{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??l$2).importNode(i,true);P.currentNode=e;let h=P.nextNode(),o=0,n=0,r=s[0];for(;void 0!==r;){if(o===r.index){let i;2===r.type?i=new k$1(h,h.nextSibling,this,t):1===r.type?i=new r.ctor(h,r.name,r.strings,this,t):6===r.type&&(i=new Z(h,this,t)),this._$AV.push(i),r=s[++n];}o!==r?.index&&(h=P.nextNode(),o++);}return P.currentNode=l$2,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}};let k$1 = class k{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=A$1,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$1(this,t,i),a$1(t)?t===A$1||null==t||""===t?(this._$AH!==A$1&&this._$AR(),this._$AH=A$1):t!==this._$AH&&t!==E&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):d$1(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==A$1&&a$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(l$2.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=S$1.createElement(V(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new R$1(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=C$1.get(t.strings);return void 0===i&&C$1.set(t.strings,i=new S$1(t)),i}k(t){u$5(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new k(this.O(c$3()),this.O(c$3()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,s){for(this._$AP?.(false,true,s);t!==this._$AB;){const s=i$4(t).nextSibling;i$4(t).remove(),t=s;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let H$1 = 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$1,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$1;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=M$1(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$1(this,e[s+n],i,n),r===E&&(r=this._$AH[n]),o||=!a$1(r)||r!==this._$AH[n],r===A$1?t=A$1:t!==A$1&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===A$1?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};class I extends H$1{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===A$1?void 0:t;}}class L extends H$1{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==A$1);}}let z$4 = class z extends H$1{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=M$1(this,t,i,0)??A$1)===E)return;const s=this._$AH,e=t===A$1&&s!==A$1||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==A$1&&(s===A$1||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$1(this,t);}}const B$1=t$1.litHtmlPolyfillSupport;B$1?.(S$1,k$1),(t$1.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$1(i.insertBefore(c$3(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
81
92
|
|
|
82
93
|
/**
|
|
83
94
|
* @license
|
|
@@ -90,13 +101,13 @@ const t$1=globalThis,i$4=t=>t,s$6=t$1.trustedTypes,e$4=s$6?s$6.createPolicy("lit
|
|
|
90
101
|
* Copyright 2017 Google LLC
|
|
91
102
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
92
103
|
*/
|
|
93
|
-
const t={ATTRIBUTE:1,CHILD:2},e$
|
|
104
|
+
const t={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)}};
|
|
94
105
|
|
|
95
106
|
/**
|
|
96
107
|
* @license
|
|
97
108
|
* Copyright 2018 Google LLC
|
|
98
109
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
99
|
-
*/const e$
|
|
110
|
+
*/const e$3=e$4(class extends i$2{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.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}});
|
|
100
111
|
|
|
101
112
|
/**
|
|
102
113
|
* @license
|
|
@@ -1052,7 +1063,7 @@ class AuroFormValidation {
|
|
|
1052
1063
|
}
|
|
1053
1064
|
}
|
|
1054
1065
|
|
|
1055
|
-
if (!hasValue && elem.required && elem.touched) {
|
|
1066
|
+
if (!hasValue && elem.required && (force || elem.touched)) {
|
|
1056
1067
|
elem.validity = 'valueMissing';
|
|
1057
1068
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
1058
1069
|
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
@@ -1076,7 +1087,7 @@ class AuroFormValidation {
|
|
|
1076
1087
|
if (!isCombobox || isCombobox && !elem.persistInput) {
|
|
1077
1088
|
|
|
1078
1089
|
// run validation on all inputs since we're going to use them to set the validity of this component
|
|
1079
|
-
this.auroInputElements.forEach(input => input.validate());
|
|
1090
|
+
this.auroInputElements.forEach(input => input.validate(force));
|
|
1080
1091
|
|
|
1081
1092
|
// Reset element validity to the validity of the input
|
|
1082
1093
|
elem.validity = this.auroInputElements[0].validity;
|
|
@@ -1167,6 +1178,177 @@ class AuroFormValidation {
|
|
|
1167
1178
|
}
|
|
1168
1179
|
}
|
|
1169
1180
|
|
|
1181
|
+
/**
|
|
1182
|
+
* Announces text to screen readers via an `aria-live` region inside the given shadow root.
|
|
1183
|
+
*
|
|
1184
|
+
* Expects the shadow root to contain an element with `id="srAnnouncement"`.
|
|
1185
|
+
* The text is cleared and re-set inside a `requestAnimationFrame` so that
|
|
1186
|
+
* repeated identical announcements still fire, and is cleared again after
|
|
1187
|
+
* {@link ANNOUNCEMENT_DURATION_MS} so VoiceOver cannot swipe to stale text.
|
|
1188
|
+
*
|
|
1189
|
+
* @param {ShadowRoot} shadowRoot - The shadow root containing the live region.
|
|
1190
|
+
* @param {string} text - The text to announce.
|
|
1191
|
+
*/
|
|
1192
|
+
|
|
1193
|
+
const ANNOUNCEMENT_DURATION_MS = 1000;
|
|
1194
|
+
|
|
1195
|
+
function announceToScreenReader(shadowRoot, text) {
|
|
1196
|
+
const liveRegion = shadowRoot.querySelector('#srAnnouncement');
|
|
1197
|
+
if (liveRegion) {
|
|
1198
|
+
// Clear and re-set to ensure the announcement fires even with same text
|
|
1199
|
+
liveRegion.textContent = '';
|
|
1200
|
+
requestAnimationFrame(() => {
|
|
1201
|
+
liveRegion.textContent = text;
|
|
1202
|
+
|
|
1203
|
+
// Clear after the announcement so VoiceOver cannot swipe to stale text
|
|
1204
|
+
setTimeout(() => {
|
|
1205
|
+
liveRegion.textContent = '';
|
|
1206
|
+
}, ANNOUNCEMENT_DURATION_MS);
|
|
1207
|
+
});
|
|
1208
|
+
}
|
|
1209
|
+
}
|
|
1210
|
+
|
|
1211
|
+
/**
|
|
1212
|
+
* Schedules a callback after two animation frames.
|
|
1213
|
+
*
|
|
1214
|
+
* Used when opening a fullscreen dialog to wait for the dialog to render
|
|
1215
|
+
* (first frame) and then for a Lit update cycle to complete (second frame)
|
|
1216
|
+
* before performing an action like focusing the close button.
|
|
1217
|
+
*
|
|
1218
|
+
* @param {Function} fn - The callback to execute after two animation frames.
|
|
1219
|
+
*/
|
|
1220
|
+
function doubleRaf(fn) {
|
|
1221
|
+
requestAnimationFrame(() => {
|
|
1222
|
+
requestAnimationFrame(fn);
|
|
1223
|
+
});
|
|
1224
|
+
}
|
|
1225
|
+
|
|
1226
|
+
/**
|
|
1227
|
+
* Prevents touch pass-through when a fullscreen dialog opens on a touch device.
|
|
1228
|
+
*
|
|
1229
|
+
* On coarse-pointer devices (phones / tablets), the tap that opens the
|
|
1230
|
+
* fullscreen dialog can "pass through" to content beneath the finger —
|
|
1231
|
+
* the touchstart opens the dialog, but the finger is still on the screen,
|
|
1232
|
+
* so the subsequent touchend / click lands on whatever element sits at
|
|
1233
|
+
* those coordinates (e.g. a menu option or calendar cell), selecting it
|
|
1234
|
+
* unintentionally. This does NOT happen with mouse clicks because
|
|
1235
|
+
* showModal() promotes the dialog to the top layer synchronously and the
|
|
1236
|
+
* click has already completed.
|
|
1237
|
+
*
|
|
1238
|
+
* Guard: only activates on devices whose primary input is coarse.
|
|
1239
|
+
* Laptops with a touchscreen report `pointer: fine` (trackpad / mouse is
|
|
1240
|
+
* primary) so they are unaffected. Re-enables on the next touchstart,
|
|
1241
|
+
* which is the user's first deliberate gesture inside the dialog.
|
|
1242
|
+
*
|
|
1243
|
+
* @param {HTMLElement} element - The element to disable pointer events on
|
|
1244
|
+
* (e.g. the menu or calendar wrapper).
|
|
1245
|
+
*/
|
|
1246
|
+
function guardTouchPassthrough(element) {
|
|
1247
|
+
if (!element || !window.matchMedia('(pointer: coarse)').matches) return;
|
|
1248
|
+
|
|
1249
|
+
element.style.pointerEvents = 'none';
|
|
1250
|
+
document.addEventListener('touchstart', () => {
|
|
1251
|
+
element.style.pointerEvents = '';
|
|
1252
|
+
}, { once: true });
|
|
1253
|
+
}
|
|
1254
|
+
|
|
1255
|
+
/**
|
|
1256
|
+
* Restores the dropdown trigger after a fullscreen dialog closes.
|
|
1257
|
+
*
|
|
1258
|
+
* Removes the `inert` attribute from the trigger so it is accessible again,
|
|
1259
|
+
* and restores focus to the given target after one animation frame. The rAF
|
|
1260
|
+
* delay lets Lit's microtask update cycle call `dialog.close()` first —
|
|
1261
|
+
* without it the browser's native dialog focus restoration can conflict.
|
|
1262
|
+
*
|
|
1263
|
+
* The focus is only applied if the dropdown is still closed at the time the
|
|
1264
|
+
* rAF fires, guarding against a rapid close-then-reopen race.
|
|
1265
|
+
*
|
|
1266
|
+
* @param {HTMLElement} dropdown - The `auro-dropdown` element.
|
|
1267
|
+
* @param {HTMLElement} focusTarget - The element to focus (e.g. trigger or input).
|
|
1268
|
+
*/
|
|
1269
|
+
function restoreTriggerAfterClose(dropdown, focusTarget) {
|
|
1270
|
+
dropdown.trigger.inert = false;
|
|
1271
|
+
|
|
1272
|
+
if (dropdown.isBibFullscreen) {
|
|
1273
|
+
requestAnimationFrame(() => {
|
|
1274
|
+
if (!dropdown.isPopoverVisible) {
|
|
1275
|
+
focusTarget.focus();
|
|
1276
|
+
}
|
|
1277
|
+
});
|
|
1278
|
+
}
|
|
1279
|
+
}
|
|
1280
|
+
|
|
1281
|
+
/**
|
|
1282
|
+
* @license
|
|
1283
|
+
* Copyright 2017 Google LLC
|
|
1284
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
1285
|
+
*/let e$2 = class e extends i$2{constructor(i){if(super(i),this.it=A$1,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===A$1||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;
|
|
1286
|
+
|
|
1287
|
+
/**
|
|
1288
|
+
* Wires up a keydown listener that dispatches to strategy[evt.key] or strategy.default.
|
|
1289
|
+
* Handles both sync and async handlers.
|
|
1290
|
+
* @param {HTMLElement} component - The component to attach the listener to.
|
|
1291
|
+
* @param {Object} strategy - Map of key names to handler functions.
|
|
1292
|
+
*/
|
|
1293
|
+
function applyKeyboardStrategy(component, strategy) {
|
|
1294
|
+
component.addEventListener('keydown', async (evt) => {
|
|
1295
|
+
const handler = strategy[evt.key] || strategy.default;
|
|
1296
|
+
if (handler) {
|
|
1297
|
+
await handler(component, evt);
|
|
1298
|
+
}
|
|
1299
|
+
});
|
|
1300
|
+
}
|
|
1301
|
+
|
|
1302
|
+
/**
|
|
1303
|
+
* Shared arrow navigation. Calls menu.navigateOptions(direction) if visible.
|
|
1304
|
+
* Optionally opens dropdown via showFn when closed.
|
|
1305
|
+
* @param {HTMLElement} component - The component with dropdown and menu references.
|
|
1306
|
+
* @param {string} direction - 'up' or 'down'.
|
|
1307
|
+
* @param {Object} [options] - Optional config.
|
|
1308
|
+
* @param {Function} [options.showFn] - Called to open the dropdown when closed.
|
|
1309
|
+
*/
|
|
1310
|
+
function navigateArrow(component, direction, options = {}) {
|
|
1311
|
+
if (component.dropdown.isPopoverVisible) {
|
|
1312
|
+
component.menu.navigateOptions(direction);
|
|
1313
|
+
} else if (options.showFn) {
|
|
1314
|
+
options.showFn();
|
|
1315
|
+
}
|
|
1316
|
+
}
|
|
1317
|
+
|
|
1318
|
+
const selectKeyboardStrategy = {
|
|
1319
|
+
ArrowUp(component, evt) {
|
|
1320
|
+
evt.preventDefault();
|
|
1321
|
+
navigateArrow(component, 'up', { showFn: () => component.dropdown.show() });
|
|
1322
|
+
},
|
|
1323
|
+
|
|
1324
|
+
ArrowDown(component, evt) {
|
|
1325
|
+
evt.preventDefault();
|
|
1326
|
+
navigateArrow(component, 'down', { showFn: () => component.dropdown.show() });
|
|
1327
|
+
},
|
|
1328
|
+
|
|
1329
|
+
Enter(component, evt) {
|
|
1330
|
+
evt.preventDefault();
|
|
1331
|
+
component.menu.makeSelection();
|
|
1332
|
+
},
|
|
1333
|
+
|
|
1334
|
+
Tab(component) {
|
|
1335
|
+
if (!component.dropdown.isPopoverVisible) {
|
|
1336
|
+
return;
|
|
1337
|
+
}
|
|
1338
|
+
|
|
1339
|
+
// Tab selects the focused option and closes the popup per the
|
|
1340
|
+
// WAI-ARIA APG select-only combobox / listbox pattern.
|
|
1341
|
+
if (component.optionActive && !component.multiSelect) {
|
|
1342
|
+
component.menu.makeSelection();
|
|
1343
|
+
}
|
|
1344
|
+
component.dropdown.hide();
|
|
1345
|
+
},
|
|
1346
|
+
|
|
1347
|
+
default(component, evt) {
|
|
1348
|
+
component.updateActiveOptionBasedOnKey(evt.key);
|
|
1349
|
+
},
|
|
1350
|
+
};
|
|
1351
|
+
|
|
1170
1352
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1171
1353
|
// See LICENSE in the project root for license information.
|
|
1172
1354
|
|
|
@@ -1223,7 +1405,7 @@ let AuroDependencyVersioning$2 = class AuroDependencyVersioning {
|
|
|
1223
1405
|
* @license
|
|
1224
1406
|
* Copyright 2020 Google LLC
|
|
1225
1407
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
1226
|
-
*/const e$1=()=>new h$1;let h$1 = class h{};const o$1=new WeakMap,n$2=e$
|
|
1408
|
+
*/const e$1=()=>new h$1;let h$1 = class h{};const o$1=new WeakMap,n$2=e$4(class extends f$4{render(i){return A$1}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$1}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);}});
|
|
1227
1409
|
|
|
1228
1410
|
/**
|
|
1229
1411
|
* @license
|
|
@@ -2958,11 +3140,9 @@ const computePosition = (reference, floating, options) => {
|
|
|
2958
3140
|
/* eslint-disable line-comment-position, no-inline-comments */
|
|
2959
3141
|
|
|
2960
3142
|
|
|
2961
|
-
|
|
2962
3143
|
const MAX_CONFIGURATION_COUNT = 10;
|
|
2963
3144
|
|
|
2964
3145
|
class AuroFloatingUI {
|
|
2965
|
-
|
|
2966
3146
|
/**
|
|
2967
3147
|
* @private
|
|
2968
3148
|
*/
|
|
@@ -2977,7 +3157,11 @@ class AuroFloatingUI {
|
|
|
2977
3157
|
* @private
|
|
2978
3158
|
*/
|
|
2979
3159
|
static setupMousePressChecker() {
|
|
2980
|
-
if (
|
|
3160
|
+
if (
|
|
3161
|
+
!AuroFloatingUI.isMousePressHandlerInitialized &&
|
|
3162
|
+
window &&
|
|
3163
|
+
window.addEventListener
|
|
3164
|
+
) {
|
|
2981
3165
|
AuroFloatingUI.isMousePressHandlerInitialized = true;
|
|
2982
3166
|
|
|
2983
3167
|
// Track timeout for isMousePressed reset to avoid race conditions
|
|
@@ -2985,7 +3169,7 @@ class AuroFloatingUI {
|
|
|
2985
3169
|
AuroFloatingUI._mousePressedTimeout = null;
|
|
2986
3170
|
}
|
|
2987
3171
|
const mouseEventGlobalHandler = (event) => {
|
|
2988
|
-
const isPressed = event.type ===
|
|
3172
|
+
const isPressed = event.type === "mousedown";
|
|
2989
3173
|
if (isPressed) {
|
|
2990
3174
|
// Clear any pending timeout to prevent race condition
|
|
2991
3175
|
if (AuroFloatingUI._mousePressedTimeout !== null) {
|
|
@@ -3004,8 +3188,8 @@ class AuroFloatingUI {
|
|
|
3004
3188
|
}
|
|
3005
3189
|
};
|
|
3006
3190
|
|
|
3007
|
-
window.addEventListener(
|
|
3008
|
-
window.addEventListener(
|
|
3191
|
+
window.addEventListener("mousedown", mouseEventGlobalHandler);
|
|
3192
|
+
window.addEventListener("mouseup", mouseEventGlobalHandler);
|
|
3009
3193
|
}
|
|
3010
3194
|
}
|
|
3011
3195
|
|
|
@@ -3053,11 +3237,12 @@ class AuroFloatingUI {
|
|
|
3053
3237
|
// mirror the boxsize from bibSizer
|
|
3054
3238
|
if (this.element.bibSizer && this.element.matchWidth) {
|
|
3055
3239
|
const sizerStyle = window.getComputedStyle(this.element.bibSizer);
|
|
3056
|
-
const bibContent =
|
|
3057
|
-
|
|
3240
|
+
const bibContent =
|
|
3241
|
+
this.element.bib.shadowRoot.querySelector(".container");
|
|
3242
|
+
if (sizerStyle.width !== "0px") {
|
|
3058
3243
|
bibContent.style.width = sizerStyle.width;
|
|
3059
3244
|
}
|
|
3060
|
-
if (sizerStyle.height !==
|
|
3245
|
+
if (sizerStyle.height !== "0px") {
|
|
3061
3246
|
bibContent.style.height = sizerStyle.height;
|
|
3062
3247
|
}
|
|
3063
3248
|
bibContent.style.maxWidth = sizerStyle.maxWidth;
|
|
@@ -3075,28 +3260,34 @@ class AuroFloatingUI {
|
|
|
3075
3260
|
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
3076
3261
|
*/
|
|
3077
3262
|
getPositioningStrategy() {
|
|
3078
|
-
const breakpoint =
|
|
3263
|
+
const breakpoint =
|
|
3264
|
+
this.element.bib.mobileFullscreenBreakpoint ||
|
|
3265
|
+
this.element.floaterConfig?.fullscreenBreakpoint;
|
|
3079
3266
|
switch (this.behavior) {
|
|
3080
3267
|
case "tooltip":
|
|
3081
3268
|
return "floating";
|
|
3082
3269
|
case "dialog":
|
|
3083
3270
|
case "drawer":
|
|
3084
3271
|
if (breakpoint) {
|
|
3085
|
-
const smallerThanBreakpoint = window.matchMedia(
|
|
3272
|
+
const smallerThanBreakpoint = window.matchMedia(
|
|
3273
|
+
`(max-width: ${breakpoint})`,
|
|
3274
|
+
).matches;
|
|
3086
3275
|
|
|
3087
3276
|
this.element.expanded = smallerThanBreakpoint;
|
|
3088
3277
|
}
|
|
3089
3278
|
if (this.element.nested) {
|
|
3090
3279
|
return "cover";
|
|
3091
3280
|
}
|
|
3092
|
-
return
|
|
3281
|
+
return "fullscreen";
|
|
3093
3282
|
case "dropdown":
|
|
3094
3283
|
case undefined:
|
|
3095
3284
|
case null:
|
|
3096
3285
|
if (breakpoint) {
|
|
3097
|
-
const smallerThanBreakpoint = window.matchMedia(
|
|
3286
|
+
const smallerThanBreakpoint = window.matchMedia(
|
|
3287
|
+
`(max-width: ${breakpoint})`,
|
|
3288
|
+
).matches;
|
|
3098
3289
|
if (smallerThanBreakpoint) {
|
|
3099
|
-
return
|
|
3290
|
+
return "fullscreen";
|
|
3100
3291
|
}
|
|
3101
3292
|
}
|
|
3102
3293
|
return "floating";
|
|
@@ -3117,37 +3308,39 @@ class AuroFloatingUI {
|
|
|
3117
3308
|
const strategy = this.getPositioningStrategy();
|
|
3118
3309
|
this.configureBibStrategy(strategy);
|
|
3119
3310
|
|
|
3120
|
-
if (strategy ===
|
|
3311
|
+
if (strategy === "floating") {
|
|
3121
3312
|
this.mirrorSize();
|
|
3122
3313
|
// Define the middlware for the floater configuration
|
|
3123
3314
|
const middleware = [
|
|
3124
3315
|
offset(this.element.floaterConfig?.offset || 0),
|
|
3125
|
-
...this.element.floaterConfig?.shift ? [shift()] : [], // Add shift middleware if shift is enabled.
|
|
3126
|
-
...this.element.floaterConfig?.flip ? [flip()] : [], // Add flip middleware if flip is enabled.
|
|
3127
|
-
...this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : [], // Add autoPlacement middleware if autoPlacement is enabled.
|
|
3316
|
+
...(this.element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
3317
|
+
...(this.element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
3318
|
+
...(this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
3128
3319
|
];
|
|
3129
3320
|
|
|
3130
3321
|
// Compute the position of the bib
|
|
3131
3322
|
computePosition(this.element.trigger, this.element.bib, {
|
|
3132
|
-
strategy: this.element.floaterConfig?.strategy ||
|
|
3323
|
+
strategy: this.element.floaterConfig?.strategy || "fixed",
|
|
3133
3324
|
placement: this.element.floaterConfig?.placement,
|
|
3134
|
-
middleware: middleware || []
|
|
3135
|
-
}).then(({ x, y }) => {
|
|
3325
|
+
middleware: middleware || [],
|
|
3326
|
+
}).then(({ x, y }) => {
|
|
3327
|
+
// eslint-disable-line id-length
|
|
3136
3328
|
Object.assign(this.element.bib.style, {
|
|
3137
3329
|
left: `${x}px`,
|
|
3138
3330
|
top: `${y}px`,
|
|
3139
3331
|
});
|
|
3140
3332
|
});
|
|
3141
|
-
} else if (strategy ===
|
|
3333
|
+
} else if (strategy === "cover") {
|
|
3142
3334
|
// Compute the position of the bib
|
|
3143
3335
|
computePosition(this.element.parentNode, this.element.bib, {
|
|
3144
|
-
placement:
|
|
3145
|
-
}).then(({ x, y }) => {
|
|
3336
|
+
placement: "bottom-start",
|
|
3337
|
+
}).then(({ x, y }) => {
|
|
3338
|
+
// eslint-disable-line id-length
|
|
3146
3339
|
Object.assign(this.element.bib.style, {
|
|
3147
3340
|
left: `${x}px`,
|
|
3148
3341
|
top: `${y - this.element.parentNode.offsetHeight}px`,
|
|
3149
3342
|
width: `${this.element.parentNode.offsetWidth}px`,
|
|
3150
|
-
height: `${this.element.parentNode.offsetHeight}px
|
|
3343
|
+
height: `${this.element.parentNode.offsetHeight}px`,
|
|
3151
3344
|
});
|
|
3152
3345
|
});
|
|
3153
3346
|
}
|
|
@@ -3160,12 +3353,12 @@ class AuroFloatingUI {
|
|
|
3160
3353
|
*/
|
|
3161
3354
|
lockScroll(lock = true) {
|
|
3162
3355
|
if (lock) {
|
|
3163
|
-
document.body.style.overflow =
|
|
3356
|
+
document.body.style.overflow = "hidden"; // hide body's scrollbar
|
|
3164
3357
|
|
|
3165
3358
|
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
3166
3359
|
this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
3167
3360
|
} else {
|
|
3168
|
-
document.body.style.overflow =
|
|
3361
|
+
document.body.style.overflow = "";
|
|
3169
3362
|
}
|
|
3170
3363
|
}
|
|
3171
3364
|
|
|
@@ -3179,23 +3372,24 @@ class AuroFloatingUI {
|
|
|
3179
3372
|
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
3180
3373
|
*/
|
|
3181
3374
|
configureBibStrategy(value) {
|
|
3182
|
-
if (value ===
|
|
3375
|
+
if (value === "fullscreen") {
|
|
3183
3376
|
this.element.isBibFullscreen = true;
|
|
3184
3377
|
// reset the prev position
|
|
3185
|
-
this.element.bib.setAttribute(
|
|
3186
|
-
this.element.bib.style.position =
|
|
3378
|
+
this.element.bib.setAttribute("isfullscreen", "");
|
|
3379
|
+
this.element.bib.style.position = "fixed";
|
|
3187
3380
|
this.element.bib.style.top = "0px";
|
|
3188
3381
|
this.element.bib.style.left = "0px";
|
|
3189
|
-
this.element.bib.style.width =
|
|
3190
|
-
this.element.bib.style.height =
|
|
3191
|
-
this.element.style.contain =
|
|
3382
|
+
this.element.bib.style.width = "";
|
|
3383
|
+
this.element.bib.style.height = "";
|
|
3384
|
+
this.element.style.contain = "";
|
|
3192
3385
|
|
|
3193
3386
|
// reset the size that was mirroring `size` css-part
|
|
3194
|
-
const bibContent =
|
|
3387
|
+
const bibContent =
|
|
3388
|
+
this.element.bib.shadowRoot.querySelector(".container");
|
|
3195
3389
|
if (bibContent) {
|
|
3196
|
-
bibContent.style.width =
|
|
3197
|
-
bibContent.style.height =
|
|
3198
|
-
bibContent.style.maxWidth =
|
|
3390
|
+
bibContent.style.width = "";
|
|
3391
|
+
bibContent.style.height = "";
|
|
3392
|
+
bibContent.style.maxWidth = "";
|
|
3199
3393
|
bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
|
|
3200
3394
|
this.configureTrial = 0;
|
|
3201
3395
|
} else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
|
|
@@ -3210,21 +3404,26 @@ class AuroFloatingUI {
|
|
|
3210
3404
|
this.lockScroll(true);
|
|
3211
3405
|
}
|
|
3212
3406
|
} else {
|
|
3213
|
-
this.element.bib.style.position =
|
|
3214
|
-
this.element.bib.removeAttribute(
|
|
3407
|
+
this.element.bib.style.position = "";
|
|
3408
|
+
this.element.bib.removeAttribute("isfullscreen");
|
|
3215
3409
|
this.element.isBibFullscreen = false;
|
|
3216
|
-
this.element.style.contain =
|
|
3410
|
+
this.element.style.contain = "layout";
|
|
3217
3411
|
}
|
|
3218
3412
|
|
|
3219
3413
|
const isChanged = this.strategy && this.strategy !== value;
|
|
3220
3414
|
this.strategy = value;
|
|
3221
3415
|
if (isChanged) {
|
|
3222
|
-
const event = new CustomEvent(
|
|
3223
|
-
|
|
3224
|
-
|
|
3416
|
+
const event = new CustomEvent(
|
|
3417
|
+
this.eventPrefix
|
|
3418
|
+
? `${this.eventPrefix}-strategy-change`
|
|
3419
|
+
: "strategy-change",
|
|
3420
|
+
{
|
|
3421
|
+
detail: {
|
|
3422
|
+
value,
|
|
3423
|
+
},
|
|
3424
|
+
composed: true,
|
|
3225
3425
|
},
|
|
3226
|
-
|
|
3227
|
-
});
|
|
3426
|
+
);
|
|
3228
3427
|
|
|
3229
3428
|
this.element.dispatchEvent(event);
|
|
3230
3429
|
}
|
|
@@ -3256,19 +3455,24 @@ class AuroFloatingUI {
|
|
|
3256
3455
|
return;
|
|
3257
3456
|
}
|
|
3258
3457
|
|
|
3259
|
-
if (
|
|
3260
|
-
this.element.
|
|
3458
|
+
if (
|
|
3459
|
+
this.element.noHideOnThisFocusLoss ||
|
|
3460
|
+
this.element.hasAttribute("noHideOnThisFocusLoss")
|
|
3461
|
+
) {
|
|
3261
3462
|
return;
|
|
3262
3463
|
}
|
|
3263
3464
|
|
|
3264
3465
|
const { activeElement } = document;
|
|
3265
3466
|
// if focus is still inside of trigger or bib, do not close
|
|
3266
|
-
if (
|
|
3467
|
+
if (
|
|
3468
|
+
this.element.contains(activeElement) ||
|
|
3469
|
+
this.element.bib?.contains(activeElement)
|
|
3470
|
+
) {
|
|
3267
3471
|
return;
|
|
3268
3472
|
}
|
|
3269
3473
|
|
|
3270
3474
|
// if fullscreen bib is in fullscreen mode, do not close
|
|
3271
|
-
if (this.element.bib.hasAttribute(
|
|
3475
|
+
if (this.element.bib.hasAttribute("isfullscreen")) {
|
|
3272
3476
|
return;
|
|
3273
3477
|
}
|
|
3274
3478
|
|
|
@@ -3280,12 +3484,27 @@ class AuroFloatingUI {
|
|
|
3280
3484
|
this.focusHandler = () => this.handleFocusLoss();
|
|
3281
3485
|
|
|
3282
3486
|
this.clickHandler = (evt) => {
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3487
|
+
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
3488
|
+
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
3489
|
+
// <dialog> may not include the bib in composedPath(), causing false
|
|
3490
|
+
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
3491
|
+
if (this.element.bib && this.element.bib.hasAttribute("isfullscreen")) {
|
|
3492
|
+
return;
|
|
3493
|
+
}
|
|
3287
3494
|
|
|
3288
|
-
|
|
3495
|
+
if (
|
|
3496
|
+
(!evt.composedPath().includes(this.element.trigger) &&
|
|
3497
|
+
!evt.composedPath().includes(this.element.bib)) ||
|
|
3498
|
+
(this.element.bib.backdrop &&
|
|
3499
|
+
evt.composedPath().includes(this.element.bib.backdrop))
|
|
3500
|
+
) {
|
|
3501
|
+
const existedVisibleFloatingUI =
|
|
3502
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3503
|
+
|
|
3504
|
+
if (
|
|
3505
|
+
existedVisibleFloatingUI &&
|
|
3506
|
+
existedVisibleFloatingUI.element.isPopoverVisible
|
|
3507
|
+
) {
|
|
3289
3508
|
// if something else is open, close that
|
|
3290
3509
|
existedVisibleFloatingUI.hideBib();
|
|
3291
3510
|
document.expandedAuroFormkitDropdown = null;
|
|
@@ -3298,9 +3517,14 @@ class AuroFloatingUI {
|
|
|
3298
3517
|
|
|
3299
3518
|
// ESC key handler
|
|
3300
3519
|
this.keyDownHandler = (evt) => {
|
|
3301
|
-
if (evt.key ===
|
|
3302
|
-
const existedVisibleFloatingUI =
|
|
3303
|
-
|
|
3520
|
+
if (evt.key === "Escape" && this.element.isPopoverVisible) {
|
|
3521
|
+
const existedVisibleFloatingUI =
|
|
3522
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3523
|
+
if (
|
|
3524
|
+
existedVisibleFloatingUI &&
|
|
3525
|
+
existedVisibleFloatingUI !== this &&
|
|
3526
|
+
existedVisibleFloatingUI.element.isPopoverVisible
|
|
3527
|
+
) {
|
|
3304
3528
|
// if something else is open, let it handle itself
|
|
3305
3529
|
return;
|
|
3306
3530
|
}
|
|
@@ -3308,17 +3532,17 @@ class AuroFloatingUI {
|
|
|
3308
3532
|
}
|
|
3309
3533
|
};
|
|
3310
3534
|
|
|
3311
|
-
if (this.behavior !==
|
|
3535
|
+
if (this.behavior !== "drawer" && this.behavior !== "dialog") {
|
|
3312
3536
|
// Add event listeners using the stored references
|
|
3313
|
-
document.addEventListener(
|
|
3537
|
+
document.addEventListener("focusin", this.focusHandler);
|
|
3314
3538
|
}
|
|
3315
3539
|
|
|
3316
|
-
document.addEventListener(
|
|
3540
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
3317
3541
|
|
|
3318
3542
|
// send this task to the end of queue to prevent conflicting
|
|
3319
3543
|
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
3320
3544
|
setTimeout(() => {
|
|
3321
|
-
window.addEventListener(
|
|
3545
|
+
window.addEventListener("click", this.clickHandler);
|
|
3322
3546
|
}, 0);
|
|
3323
3547
|
}
|
|
3324
3548
|
|
|
@@ -3326,34 +3550,38 @@ class AuroFloatingUI {
|
|
|
3326
3550
|
// Remove event listeners if they exist
|
|
3327
3551
|
|
|
3328
3552
|
if (this.focusHandler) {
|
|
3329
|
-
document.removeEventListener(
|
|
3553
|
+
document.removeEventListener("focusin", this.focusHandler);
|
|
3330
3554
|
this.focusHandler = null;
|
|
3331
3555
|
}
|
|
3332
3556
|
|
|
3333
3557
|
if (this.clickHandler) {
|
|
3334
|
-
window.removeEventListener(
|
|
3558
|
+
window.removeEventListener("click", this.clickHandler);
|
|
3335
3559
|
this.clickHandler = null;
|
|
3336
3560
|
}
|
|
3337
3561
|
|
|
3338
3562
|
if (this.keyDownHandler) {
|
|
3339
|
-
document.removeEventListener(
|
|
3563
|
+
document.removeEventListener("keydown", this.keyDownHandler);
|
|
3340
3564
|
this.keyDownHandler = null;
|
|
3341
3565
|
}
|
|
3342
3566
|
}
|
|
3343
3567
|
|
|
3344
3568
|
handleUpdate(changedProperties) {
|
|
3345
|
-
if (changedProperties.has(
|
|
3569
|
+
if (changedProperties.has("isPopoverVisible")) {
|
|
3346
3570
|
this.updateState();
|
|
3347
3571
|
}
|
|
3348
3572
|
}
|
|
3349
3573
|
|
|
3350
3574
|
updateCurrentExpandedDropdown() {
|
|
3351
3575
|
// Close any other dropdown that is already open
|
|
3352
|
-
const existedVisibleFloatingUI =
|
|
3353
|
-
|
|
3576
|
+
const existedVisibleFloatingUI =
|
|
3577
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
3578
|
+
if (
|
|
3579
|
+
existedVisibleFloatingUI &&
|
|
3580
|
+
existedVisibleFloatingUI !== this &&
|
|
3354
3581
|
existedVisibleFloatingUI.element.isPopoverVisible &&
|
|
3355
|
-
|
|
3356
|
-
|
|
3582
|
+
existedVisibleFloatingUI.eventPrefix === this.eventPrefix
|
|
3583
|
+
) {
|
|
3584
|
+
existedVisibleFloatingUI.hideBib();
|
|
3357
3585
|
}
|
|
3358
3586
|
|
|
3359
3587
|
document.expandedAuroFloater = this;
|
|
@@ -3362,7 +3590,7 @@ class AuroFloatingUI {
|
|
|
3362
3590
|
showBib() {
|
|
3363
3591
|
if (!this.element.disabled && !this.showing) {
|
|
3364
3592
|
this.updateCurrentExpandedDropdown();
|
|
3365
|
-
this.element.triggerChevron?.setAttribute(
|
|
3593
|
+
this.element.triggerChevron?.setAttribute("data-expanded", true);
|
|
3366
3594
|
|
|
3367
3595
|
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
3368
3596
|
if (!this.showing) {
|
|
@@ -3376,9 +3604,13 @@ class AuroFloatingUI {
|
|
|
3376
3604
|
}
|
|
3377
3605
|
|
|
3378
3606
|
// Setup auto update to handle resize and scroll
|
|
3379
|
-
this.element.cleanup = autoUpdate(
|
|
3380
|
-
this.
|
|
3381
|
-
|
|
3607
|
+
this.element.cleanup = autoUpdate(
|
|
3608
|
+
this.element.trigger || this.element.parentNode,
|
|
3609
|
+
this.element.bib,
|
|
3610
|
+
() => {
|
|
3611
|
+
this.position();
|
|
3612
|
+
},
|
|
3613
|
+
);
|
|
3382
3614
|
}
|
|
3383
3615
|
}
|
|
3384
3616
|
|
|
@@ -3389,7 +3621,7 @@ class AuroFloatingUI {
|
|
|
3389
3621
|
hideBib(eventType = "unknown") {
|
|
3390
3622
|
if (!this.element.disabled && !this.element.noToggle) {
|
|
3391
3623
|
this.lockScroll(false);
|
|
3392
|
-
this.element.triggerChevron?.removeAttribute(
|
|
3624
|
+
this.element.triggerChevron?.removeAttribute("data-expanded");
|
|
3393
3625
|
|
|
3394
3626
|
if (this.element.isPopoverVisible) {
|
|
3395
3627
|
this.element.isPopoverVisible = false;
|
|
@@ -3409,13 +3641,16 @@ class AuroFloatingUI {
|
|
|
3409
3641
|
* @param {String} eventType - The event type that triggered the toggle action.
|
|
3410
3642
|
*/
|
|
3411
3643
|
dispatchEventDropdownToggle(eventType) {
|
|
3412
|
-
const event = new CustomEvent(
|
|
3413
|
-
|
|
3414
|
-
|
|
3415
|
-
|
|
3644
|
+
const event = new CustomEvent(
|
|
3645
|
+
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
3646
|
+
{
|
|
3647
|
+
detail: {
|
|
3648
|
+
expanded: this.showing,
|
|
3649
|
+
eventType: eventType || "unknown",
|
|
3650
|
+
},
|
|
3651
|
+
composed: true,
|
|
3416
3652
|
},
|
|
3417
|
-
|
|
3418
|
-
});
|
|
3653
|
+
);
|
|
3419
3654
|
|
|
3420
3655
|
this.element.dispatchEvent(event);
|
|
3421
3656
|
}
|
|
@@ -3427,12 +3662,15 @@ class AuroFloatingUI {
|
|
|
3427
3662
|
this.showBib();
|
|
3428
3663
|
}
|
|
3429
3664
|
|
|
3430
|
-
const event = new CustomEvent(
|
|
3431
|
-
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
|
|
3665
|
+
const event = new CustomEvent(
|
|
3666
|
+
this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick",
|
|
3667
|
+
{
|
|
3668
|
+
composed: true,
|
|
3669
|
+
detail: {
|
|
3670
|
+
expanded: this.element.isPopoverVisible,
|
|
3671
|
+
},
|
|
3672
|
+
},
|
|
3673
|
+
);
|
|
3436
3674
|
|
|
3437
3675
|
this.element.dispatchEvent(event);
|
|
3438
3676
|
}
|
|
@@ -3440,30 +3678,32 @@ class AuroFloatingUI {
|
|
|
3440
3678
|
handleEvent(event) {
|
|
3441
3679
|
if (!this.element.disableEventShow) {
|
|
3442
3680
|
switch (event.type) {
|
|
3443
|
-
case
|
|
3681
|
+
case "keydown": {
|
|
3444
3682
|
// Support both Enter and Space keys for accessibility
|
|
3445
3683
|
// Space is included as it's expected behavior for interactive elements
|
|
3446
3684
|
|
|
3447
3685
|
const origin = event.composedPath()[0];
|
|
3448
|
-
if (
|
|
3449
|
-
|
|
3686
|
+
if (
|
|
3687
|
+
event.key === "Enter" ||
|
|
3688
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
3689
|
+
) {
|
|
3450
3690
|
event.preventDefault();
|
|
3451
3691
|
this.handleClick();
|
|
3452
3692
|
}
|
|
3453
3693
|
break;
|
|
3454
|
-
|
|
3694
|
+
}
|
|
3695
|
+
case "mouseenter":
|
|
3455
3696
|
if (this.element.hoverToggle) {
|
|
3456
3697
|
this.showBib();
|
|
3457
3698
|
}
|
|
3458
3699
|
break;
|
|
3459
|
-
case
|
|
3700
|
+
case "mouseleave":
|
|
3460
3701
|
if (this.element.hoverToggle) {
|
|
3461
3702
|
this.hideBib("mouseleave");
|
|
3462
3703
|
}
|
|
3463
3704
|
break;
|
|
3464
|
-
case
|
|
3705
|
+
case "focus":
|
|
3465
3706
|
if (this.element.focusShow) {
|
|
3466
|
-
|
|
3467
3707
|
/*
|
|
3468
3708
|
This needs to better handle clicking that gives focus -
|
|
3469
3709
|
currently it shows and then immediately hides the bib
|
|
@@ -3471,12 +3711,12 @@ class AuroFloatingUI {
|
|
|
3471
3711
|
this.showBib();
|
|
3472
3712
|
}
|
|
3473
3713
|
break;
|
|
3474
|
-
case
|
|
3714
|
+
case "blur":
|
|
3475
3715
|
// send this task 100ms later queue to
|
|
3476
3716
|
// wait a frame in case focus moves within the floating element/bib
|
|
3477
3717
|
setTimeout(() => this.handleFocusLoss(), 0);
|
|
3478
3718
|
break;
|
|
3479
|
-
case
|
|
3719
|
+
case "click":
|
|
3480
3720
|
if (document.activeElement === document.body) {
|
|
3481
3721
|
event.currentTarget.focus();
|
|
3482
3722
|
}
|
|
@@ -3495,15 +3735,15 @@ class AuroFloatingUI {
|
|
|
3495
3735
|
*/
|
|
3496
3736
|
handleTriggerTabIndex() {
|
|
3497
3737
|
const focusableElementSelectors = [
|
|
3498
|
-
|
|
3499
|
-
|
|
3738
|
+
"a",
|
|
3739
|
+
"button",
|
|
3500
3740
|
'input:not([type="hidden"])',
|
|
3501
|
-
|
|
3502
|
-
|
|
3741
|
+
"select",
|
|
3742
|
+
"textarea",
|
|
3503
3743
|
'[tabindex]:not([tabindex="-1"])',
|
|
3504
|
-
|
|
3505
|
-
|
|
3506
|
-
|
|
3744
|
+
"auro-button",
|
|
3745
|
+
"auro-input",
|
|
3746
|
+
"auro-hyperlink",
|
|
3507
3747
|
];
|
|
3508
3748
|
|
|
3509
3749
|
const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
|
|
@@ -3531,10 +3771,10 @@ class AuroFloatingUI {
|
|
|
3531
3771
|
* @param {*} eventPrefix
|
|
3532
3772
|
*/
|
|
3533
3773
|
regenerateBibId() {
|
|
3534
|
-
this.id = this.element.getAttribute(
|
|
3774
|
+
this.id = this.element.getAttribute("id");
|
|
3535
3775
|
if (!this.id) {
|
|
3536
3776
|
this.id = window.crypto.randomUUID();
|
|
3537
|
-
this.element.setAttribute(
|
|
3777
|
+
this.element.setAttribute("id", this.id);
|
|
3538
3778
|
}
|
|
3539
3779
|
|
|
3540
3780
|
this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
|
|
@@ -3555,11 +3795,15 @@ class AuroFloatingUI {
|
|
|
3555
3795
|
if (this.element.trigger) {
|
|
3556
3796
|
this.disconnect();
|
|
3557
3797
|
}
|
|
3558
|
-
this.element.trigger =
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3798
|
+
this.element.trigger =
|
|
3799
|
+
this.element.triggerElement ||
|
|
3800
|
+
this.element.shadowRoot.querySelector("#trigger") ||
|
|
3801
|
+
this.element.trigger;
|
|
3802
|
+
this.element.bib =
|
|
3803
|
+
this.element.shadowRoot.querySelector("#bib") || this.element.bib;
|
|
3804
|
+
this.element.bibSizer = this.element.shadowRoot.querySelector("#bibSizer");
|
|
3805
|
+
this.element.triggerChevron =
|
|
3806
|
+
this.element.shadowRoot.querySelector("#showStateIcon");
|
|
3563
3807
|
|
|
3564
3808
|
if (this.element.floaterConfig) {
|
|
3565
3809
|
this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
|
|
@@ -3570,12 +3814,12 @@ class AuroFloatingUI {
|
|
|
3570
3814
|
|
|
3571
3815
|
this.handleEvent = this.handleEvent.bind(this);
|
|
3572
3816
|
if (this.element.trigger) {
|
|
3573
|
-
this.element.trigger.addEventListener(
|
|
3574
|
-
this.element.trigger.addEventListener(
|
|
3575
|
-
this.element.trigger.addEventListener(
|
|
3576
|
-
this.element.trigger.addEventListener(
|
|
3577
|
-
this.element.trigger.addEventListener(
|
|
3578
|
-
this.element.trigger.addEventListener(
|
|
3817
|
+
this.element.trigger.addEventListener("keydown", this.handleEvent);
|
|
3818
|
+
this.element.trigger.addEventListener("click", this.handleEvent);
|
|
3819
|
+
this.element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
3820
|
+
this.element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
3821
|
+
this.element.trigger.addEventListener("focus", this.handleEvent);
|
|
3822
|
+
this.element.trigger.addEventListener("blur", this.handleEvent);
|
|
3579
3823
|
}
|
|
3580
3824
|
}
|
|
3581
3825
|
|
|
@@ -3590,12 +3834,18 @@ class AuroFloatingUI {
|
|
|
3590
3834
|
|
|
3591
3835
|
// Remove event & keyboard listeners
|
|
3592
3836
|
if (this.element?.trigger) {
|
|
3593
|
-
this.element.trigger.removeEventListener(
|
|
3594
|
-
this.element.trigger.removeEventListener(
|
|
3595
|
-
this.element.trigger.removeEventListener(
|
|
3596
|
-
|
|
3597
|
-
|
|
3598
|
-
|
|
3837
|
+
this.element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
3838
|
+
this.element.trigger.removeEventListener("click", this.handleEvent);
|
|
3839
|
+
this.element.trigger.removeEventListener(
|
|
3840
|
+
"mouseenter",
|
|
3841
|
+
this.handleEvent,
|
|
3842
|
+
);
|
|
3843
|
+
this.element.trigger.removeEventListener(
|
|
3844
|
+
"mouseleave",
|
|
3845
|
+
this.handleEvent,
|
|
3846
|
+
);
|
|
3847
|
+
this.element.trigger.removeEventListener("focus", this.handleEvent);
|
|
3848
|
+
this.element.trigger.removeEventListener("blur", this.handleEvent);
|
|
3599
3849
|
}
|
|
3600
3850
|
}
|
|
3601
3851
|
}
|
|
@@ -4023,7 +4273,7 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
4023
4273
|
`;let _$2 = class _ extends z$3{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p$3;}static get properties(){return {...z$3.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$3.styles,y$3,w$3,x$3]}static register(t="auro-icon"){p$3.prototype.registerComponent(t,_);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return b$1`
|
|
4024
4274
|
<div class="componentWrapper">
|
|
4025
4275
|
<div
|
|
4026
|
-
class="${e$
|
|
4276
|
+
class="${e$3({svgWrapper:true})}"
|
|
4027
4277
|
title="${o(this.title||void 0)}">
|
|
4028
4278
|
<span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
|
|
4029
4279
|
${this.customSvg?b$1`
|
|
@@ -4034,7 +4284,7 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
4034
4284
|
</span>
|
|
4035
4285
|
</div>
|
|
4036
4286
|
|
|
4037
|
-
<div class="${e$
|
|
4287
|
+
<div class="${e$3(t)}" part="label">
|
|
4038
4288
|
<slot></slot>
|
|
4039
4289
|
</div>
|
|
4040
4290
|
</div>
|
|
@@ -4042,7 +4292,7 @@ let p$3 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
4042
4292
|
|
|
4043
4293
|
var iconVersion$2 = '9.1.2';
|
|
4044
4294
|
|
|
4045
|
-
var styleCss$2$1 = i$6`: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}
|
|
4295
|
+
var styleCss$2$1 = i$6`: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}`;
|
|
4046
4296
|
|
|
4047
4297
|
var colorCss$2$1 = i$6`.container{background-color:var(--ds-auro-dropdownbib-container-color);box-shadow:var(--ds-auro-dropdownbib-boxshadow-color);color:var(--ds-auro-dropdownbib-text-color)}`;
|
|
4048
4298
|
|
|
@@ -4050,6 +4300,8 @@ var tokensCss$1$1 = i$6`:host(:not([ondark])),:host(:not([appearance=inverse])){
|
|
|
4050
4300
|
|
|
4051
4301
|
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
4052
4302
|
// See LICENSE in the project root for license information.
|
|
4303
|
+
/* eslint-disable max-lines */
|
|
4304
|
+
// ---------------------------------------------------------------------
|
|
4053
4305
|
|
|
4054
4306
|
|
|
4055
4307
|
const DESIGN_TOKEN_BREAKPOINT_PREFIX = '--ds-grid-breakpoint-';
|
|
@@ -4144,6 +4396,28 @@ class AuroDropdownBib extends i$3 {
|
|
|
4144
4396
|
shape: {
|
|
4145
4397
|
type: String,
|
|
4146
4398
|
reflect: true
|
|
4399
|
+
},
|
|
4400
|
+
|
|
4401
|
+
/**
|
|
4402
|
+
* Accessible label for the dialog element, used when displayed as a modal.
|
|
4403
|
+
* Applied via aria-labelledby on a visually hidden element rather than
|
|
4404
|
+
* aria-label because iOS VoiceOver does not reliably read aria-label
|
|
4405
|
+
* on <dialog> elements.
|
|
4406
|
+
* @private
|
|
4407
|
+
*/
|
|
4408
|
+
dialogLabel: {
|
|
4409
|
+
type: String
|
|
4410
|
+
},
|
|
4411
|
+
|
|
4412
|
+
/**
|
|
4413
|
+
* Overrides the native role of the dialog element.
|
|
4414
|
+
* For example, set to `"presentation"` on desktop combobox to prevent
|
|
4415
|
+
* VoiceOver from announcing "listbox inside of a dialog".
|
|
4416
|
+
* When `undefined`, the dialog keeps its native role.
|
|
4417
|
+
* @private
|
|
4418
|
+
*/
|
|
4419
|
+
dialogRole: {
|
|
4420
|
+
type: String
|
|
4147
4421
|
}
|
|
4148
4422
|
};
|
|
4149
4423
|
}
|
|
@@ -4211,7 +4485,10 @@ class AuroDropdownBib extends i$3 {
|
|
|
4211
4485
|
firstUpdated(changedProperties) {
|
|
4212
4486
|
super.firstUpdated(changedProperties);
|
|
4213
4487
|
|
|
4214
|
-
|
|
4488
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4489
|
+
this._setupCancelHandler(dialog);
|
|
4490
|
+
this._setupKeyboardBridge(dialog);
|
|
4491
|
+
|
|
4215
4492
|
this.dispatchEvent(new CustomEvent('auro-dropdownbib-connected', {
|
|
4216
4493
|
bubbles: true,
|
|
4217
4494
|
composed: true,
|
|
@@ -4221,6 +4498,189 @@ class AuroDropdownBib extends i$3 {
|
|
|
4221
4498
|
}));
|
|
4222
4499
|
}
|
|
4223
4500
|
|
|
4501
|
+
/**
|
|
4502
|
+
* Forwards the dialog's native `cancel` event (fired on ESC) as
|
|
4503
|
+
* an `auro-bib-cancel` custom event so parent components can close.
|
|
4504
|
+
* @param {HTMLDialogElement} dialog
|
|
4505
|
+
* @private
|
|
4506
|
+
*/
|
|
4507
|
+
_setupCancelHandler(dialog) {
|
|
4508
|
+
dialog.addEventListener('cancel', (event) => {
|
|
4509
|
+
event.preventDefault();
|
|
4510
|
+
this.dispatchEvent(new CustomEvent('auro-bib-cancel', {
|
|
4511
|
+
bubbles: true,
|
|
4512
|
+
composed: true
|
|
4513
|
+
}));
|
|
4514
|
+
});
|
|
4515
|
+
}
|
|
4516
|
+
|
|
4517
|
+
/**
|
|
4518
|
+
* showModal() creates a closed focus scope — keyboard events inside
|
|
4519
|
+
* the dialog's shadow DOM do NOT bubble out to the combobox/select
|
|
4520
|
+
* keydown handlers in the parent shadow DOM. This handler bridges
|
|
4521
|
+
* that gap by re-dispatching navigation keys so they cross the
|
|
4522
|
+
* shadow boundary and reach the menu navigation logic in the parent
|
|
4523
|
+
* component.
|
|
4524
|
+
*
|
|
4525
|
+
* The trade-off: intercepting these keys means native keyboard
|
|
4526
|
+
* behaviors that would normally "just work" must be manually
|
|
4527
|
+
* re-implemented here:
|
|
4528
|
+
*
|
|
4529
|
+
* - Enter on buttons: Custom elements (auro-button) don't get the
|
|
4530
|
+
* native Enter→click that <button> provides, so we call .click()
|
|
4531
|
+
* directly when Enter is pressed on a button-like element.
|
|
4532
|
+
*
|
|
4533
|
+
* - Tab: Intercepted and re-dispatched so parent components
|
|
4534
|
+
* (select/combobox) can select the active option and close the
|
|
4535
|
+
* dialog. The <dialog> provides containment and isolation
|
|
4536
|
+
* (inert background, VoiceOver focus trapping, top layer), while
|
|
4537
|
+
* the content inside is a role="listbox" navigated via
|
|
4538
|
+
* aria-activedescendant (options are not focusable). Tab keyboard
|
|
4539
|
+
* behavior follows listbox conventions (select + close) because
|
|
4540
|
+
* the dialog's native Tab trap only cycles between the close
|
|
4541
|
+
* button and browser chrome.
|
|
4542
|
+
*
|
|
4543
|
+
* - Escape: The native <dialog> fires a `cancel` event on ESC
|
|
4544
|
+
* (handled by _setupCancelHandler), so the re-dispatched Escape
|
|
4545
|
+
* is a secondary path for parent components that also listen for
|
|
4546
|
+
* Escape keydown.
|
|
4547
|
+
*
|
|
4548
|
+
* @param {HTMLDialogElement} dialog
|
|
4549
|
+
* @private
|
|
4550
|
+
*/
|
|
4551
|
+
_setupKeyboardBridge(dialog) {
|
|
4552
|
+
const navKeys = new Set([
|
|
4553
|
+
'ArrowUp',
|
|
4554
|
+
'ArrowDown',
|
|
4555
|
+
'Enter',
|
|
4556
|
+
'Escape',
|
|
4557
|
+
'Tab'
|
|
4558
|
+
]);
|
|
4559
|
+
|
|
4560
|
+
dialog.addEventListener('keydown', (event) => {
|
|
4561
|
+
if (!navKeys.has(event.key)) {
|
|
4562
|
+
return;
|
|
4563
|
+
}
|
|
4564
|
+
|
|
4565
|
+
// Custom elements (auro-button) don't get the native Enter→click
|
|
4566
|
+
// behavior that <button> has. Find the button in the composed path
|
|
4567
|
+
// and click it directly.
|
|
4568
|
+
if (event.key === 'Enter') {
|
|
4569
|
+
const buttonSelector = 'button, [role="button"], auro-button, [auro-button]';
|
|
4570
|
+
const btn = event.composedPath().find((el) => el.matches && el.matches(buttonSelector));
|
|
4571
|
+
if (btn) {
|
|
4572
|
+
event.preventDefault();
|
|
4573
|
+
event.stopPropagation();
|
|
4574
|
+
btn.click();
|
|
4575
|
+
return;
|
|
4576
|
+
}
|
|
4577
|
+
}
|
|
4578
|
+
|
|
4579
|
+
event.preventDefault();
|
|
4580
|
+
event.stopPropagation();
|
|
4581
|
+
const newEvent = new KeyboardEvent('keydown', {
|
|
4582
|
+
key: event.key,
|
|
4583
|
+
code: event.code,
|
|
4584
|
+
shiftKey: event.shiftKey,
|
|
4585
|
+
altKey: event.altKey,
|
|
4586
|
+
ctrlKey: event.ctrlKey,
|
|
4587
|
+
metaKey: event.metaKey,
|
|
4588
|
+
bubbles: true,
|
|
4589
|
+
composed: true,
|
|
4590
|
+
cancelable: true
|
|
4591
|
+
});
|
|
4592
|
+
this.dispatchEvent(newEvent);
|
|
4593
|
+
});
|
|
4594
|
+
}
|
|
4595
|
+
|
|
4596
|
+
/**
|
|
4597
|
+
* Blocks touch-driven page scroll while a fullscreen modal dialog is open.
|
|
4598
|
+
*
|
|
4599
|
+
* The showModal() function places the dialog in the browser's **top layer**,
|
|
4600
|
+
* which is a separate rendering layer above the normal DOM. On mobile, the
|
|
4601
|
+
* compositor processes visual-viewport panning before top-layer touch
|
|
4602
|
+
* handling. This means the entire viewport — including the top-layer dialog
|
|
4603
|
+
* — can be panned by a touch gesture, causing the page behind the dialog to
|
|
4604
|
+
* scroll into view. To prevent this, we add a touchmove listener that cancels
|
|
4605
|
+
* the event if the touch started outside the dialog or any scrollable child within it.
|
|
4606
|
+
*
|
|
4607
|
+
* @private
|
|
4608
|
+
*/
|
|
4609
|
+
_lockTouchScroll() {
|
|
4610
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4611
|
+
|
|
4612
|
+
this._touchMoveHandler = (event) => {
|
|
4613
|
+
// Walk the composed path (which crosses shadow DOM boundaries) to
|
|
4614
|
+
// check whether the touch started inside a scrollable element that
|
|
4615
|
+
// lives within the dialog. If so, allow the scroll.
|
|
4616
|
+
for (const el of event.composedPath()) {
|
|
4617
|
+
if (el === dialog) {
|
|
4618
|
+
// Reached the dialog boundary without finding a scrollable child.
|
|
4619
|
+
break;
|
|
4620
|
+
}
|
|
4621
|
+
if (el instanceof HTMLElement && el.scrollHeight > el.clientHeight) {
|
|
4622
|
+
const { overflowY } = getComputedStyle(el);
|
|
4623
|
+
if (overflowY === 'auto' || overflowY === 'scroll') {
|
|
4624
|
+
return;
|
|
4625
|
+
}
|
|
4626
|
+
}
|
|
4627
|
+
}
|
|
4628
|
+
|
|
4629
|
+
event.preventDefault();
|
|
4630
|
+
};
|
|
4631
|
+
|
|
4632
|
+
document.addEventListener('touchmove', this._touchMoveHandler, { passive: false });
|
|
4633
|
+
}
|
|
4634
|
+
|
|
4635
|
+
/**
|
|
4636
|
+
* Removes the touchmove listener added by _lockTouchScroll().
|
|
4637
|
+
* @private
|
|
4638
|
+
*/
|
|
4639
|
+
_unlockTouchScroll() {
|
|
4640
|
+
if (this._touchMoveHandler) {
|
|
4641
|
+
document.removeEventListener('touchmove', this._touchMoveHandler);
|
|
4642
|
+
this._touchMoveHandler = undefined;
|
|
4643
|
+
}
|
|
4644
|
+
}
|
|
4645
|
+
|
|
4646
|
+
open(modal = true) {
|
|
4647
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4648
|
+
if (dialog && !dialog.open) {
|
|
4649
|
+
if (modal) {
|
|
4650
|
+
// Prevent showModal() from scrolling the page to bring the dialog
|
|
4651
|
+
// into view. Locking overflow on <html> blocks the viewport scroll
|
|
4652
|
+
// that browsers perform natively; we release it immediately after
|
|
4653
|
+
// so it doesn't interfere with the modal's focus management.
|
|
4654
|
+
const { documentElement } = document;
|
|
4655
|
+
const prevOverflow = documentElement.style.overflow;
|
|
4656
|
+
documentElement.style.overflow = 'hidden';
|
|
4657
|
+
|
|
4658
|
+
dialog.showModal();
|
|
4659
|
+
|
|
4660
|
+
documentElement.style.overflow = prevOverflow;
|
|
4661
|
+
|
|
4662
|
+
this._lockTouchScroll();
|
|
4663
|
+
|
|
4664
|
+
} else {
|
|
4665
|
+
// Use setAttribute instead of dialog.show() to avoid the dialog
|
|
4666
|
+
// focusing steps which steal focus from the trigger and cause
|
|
4667
|
+
// the floater's handleFocusLoss() to immediately hide the bib.
|
|
4668
|
+
dialog.setAttribute('open', '');
|
|
4669
|
+
}
|
|
4670
|
+
}
|
|
4671
|
+
}
|
|
4672
|
+
|
|
4673
|
+
/**
|
|
4674
|
+
* Closes the dialog.
|
|
4675
|
+
*/
|
|
4676
|
+
close() {
|
|
4677
|
+
const dialog = this.shadowRoot.querySelector('dialog');
|
|
4678
|
+
if (dialog && dialog.open) {
|
|
4679
|
+
this._unlockTouchScroll();
|
|
4680
|
+
dialog.close();
|
|
4681
|
+
}
|
|
4682
|
+
}
|
|
4683
|
+
|
|
4224
4684
|
// function that renders the HTML and CSS into the scope of the component
|
|
4225
4685
|
render() {
|
|
4226
4686
|
const classes = {
|
|
@@ -4232,9 +4692,10 @@ class AuroDropdownBib extends i$3 {
|
|
|
4232
4692
|
classes[`shape-${this.shape}`] = true;
|
|
4233
4693
|
|
|
4234
4694
|
return u$4`
|
|
4235
|
-
<
|
|
4695
|
+
<dialog class="${e$3(classes)}" part="bibContainer" role="${o(this.dialogRole)}" aria-labelledby="${o(this.dialogLabel ? 'dialogLabel' : undefined)}">
|
|
4696
|
+
${this.dialogLabel ? u$4`<span id="dialogLabel" class="util_displayHiddenVisually" aria-hidden="true">${this.dialogLabel}</span>` : ''}
|
|
4236
4697
|
<slot></slot>
|
|
4237
|
-
</
|
|
4698
|
+
</dialog>
|
|
4238
4699
|
`;
|
|
4239
4700
|
}
|
|
4240
4701
|
}
|
|
@@ -4243,7 +4704,7 @@ var shapeSizeCss = i$6`.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.sh
|
|
|
4243
4704
|
|
|
4244
4705
|
var colorCss$1$1 = i$6`: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)}`;
|
|
4245
4706
|
|
|
4246
|
-
var styleCss$1$1 = i$6`:host{position:relative;display:block;text-align:left}
|
|
4707
|
+
var styleCss$1$1 = i$6`: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%}`;
|
|
4247
4708
|
|
|
4248
4709
|
var classicColorCss = i$6``;
|
|
4249
4710
|
|
|
@@ -4481,7 +4942,7 @@ let AuroHelpText$1 = class AuroHelpText extends i$3 {
|
|
|
4481
4942
|
}
|
|
4482
4943
|
};
|
|
4483
4944
|
|
|
4484
|
-
var formkitVersion$1 = '
|
|
4945
|
+
var formkitVersion$1 = '202603102257';
|
|
4485
4946
|
|
|
4486
4947
|
class AuroElement extends i$3 {
|
|
4487
4948
|
static get properties() {
|
|
@@ -4595,7 +5056,7 @@ class AuroElement extends i$3 {
|
|
|
4595
5056
|
* The `auro-dropdown` element provides a way to place content in a bib that can be toggled.
|
|
4596
5057
|
* @customElement auro-dropdown
|
|
4597
5058
|
*
|
|
4598
|
-
* @slot - Default slot for the
|
|
5059
|
+
* @slot - Default slot for the dropdown bib content.
|
|
4599
5060
|
* @slot helpText - Defines the content of the helpText.
|
|
4600
5061
|
* @slot trigger - Defines the content of the trigger.
|
|
4601
5062
|
* @csspart trigger - The trigger content container.
|
|
@@ -4607,6 +5068,13 @@ class AuroElement extends i$3 {
|
|
|
4607
5068
|
* @event auroDropdown-idAdded - Notifies consumers that the unique ID for the dropdown bib has been generated.
|
|
4608
5069
|
*/
|
|
4609
5070
|
class AuroDropdown extends AuroElement {
|
|
5071
|
+
static get shadowRootOptions() {
|
|
5072
|
+
return {
|
|
5073
|
+
...AuroElement.shadowRootOptions,
|
|
5074
|
+
delegatesFocus: true,
|
|
5075
|
+
};
|
|
5076
|
+
}
|
|
5077
|
+
|
|
4610
5078
|
constructor() {
|
|
4611
5079
|
super();
|
|
4612
5080
|
|
|
@@ -4672,15 +5140,6 @@ class AuroDropdown extends AuroElement {
|
|
|
4672
5140
|
this.shift = false;
|
|
4673
5141
|
this.autoPlacement = false;
|
|
4674
5142
|
|
|
4675
|
-
/**
|
|
4676
|
-
* @private
|
|
4677
|
-
* @property {boolean} delegatesFocus - Whether the shadow root delegates focus.
|
|
4678
|
-
*/
|
|
4679
|
-
this.constructor.shadowRootOptions = {
|
|
4680
|
-
...i$3.shadowRootOptions,
|
|
4681
|
-
delegatesFocus: true,
|
|
4682
|
-
};
|
|
4683
|
-
|
|
4684
5143
|
/**
|
|
4685
5144
|
* @private
|
|
4686
5145
|
*/
|
|
@@ -4754,6 +5213,18 @@ class AuroDropdown extends AuroElement {
|
|
|
4754
5213
|
*/
|
|
4755
5214
|
show() {
|
|
4756
5215
|
this.floater.showBib();
|
|
5216
|
+
|
|
5217
|
+
// Open dialog synchronously so callers remain in the user gesture
|
|
5218
|
+
// chain. This is critical for mobile browsers (iOS Safari) to keep
|
|
5219
|
+
// the virtual keyboard open when transitioning from the trigger
|
|
5220
|
+
// input to an input inside the fullscreen dialog. Without this,
|
|
5221
|
+
// showModal() fires asynchronously via Lit's update cycle, which
|
|
5222
|
+
// falls outside the user activation window and causes iOS to
|
|
5223
|
+
// dismiss the keyboard.
|
|
5224
|
+
if (this.isBibFullscreen && this.bibElement && this.bibElement.value) {
|
|
5225
|
+
const useModal = !this.disableFocusTrap;
|
|
5226
|
+
this.bibElement.value.open(useModal);
|
|
5227
|
+
}
|
|
4757
5228
|
}
|
|
4758
5229
|
|
|
4759
5230
|
/**
|
|
@@ -4761,13 +5232,37 @@ class AuroDropdown extends AuroElement {
|
|
|
4761
5232
|
* If not, trigger element will get focus.
|
|
4762
5233
|
*/
|
|
4763
5234
|
focus() {
|
|
4764
|
-
if (this.isPopoverVisible && this.
|
|
4765
|
-
this.
|
|
5235
|
+
if (this.isPopoverVisible && this.bibContent) {
|
|
5236
|
+
const focusables = getFocusableElements(this.bibContent);
|
|
5237
|
+
if (focusables.length > 0) {
|
|
5238
|
+
focusables[0].focus();
|
|
5239
|
+
}
|
|
4766
5240
|
} else {
|
|
4767
5241
|
this.trigger.focus();
|
|
4768
5242
|
}
|
|
4769
5243
|
}
|
|
4770
5244
|
|
|
5245
|
+
/**
|
|
5246
|
+
* Sets the active descendant element for accessibility.
|
|
5247
|
+
* Uses ariaActiveDescendantElement to cross shadow DOM boundaries.
|
|
5248
|
+
* This function is used in components that contain `auro-dropdown` to set the active descendant.
|
|
5249
|
+
* @private
|
|
5250
|
+
* @param {HTMLElement|null} element - The element to set as the active descendant, or null to clear.
|
|
5251
|
+
* @returns {void}
|
|
5252
|
+
*/
|
|
5253
|
+
setActiveDescendant(element) {
|
|
5254
|
+
if (!this.trigger) {
|
|
5255
|
+
return;
|
|
5256
|
+
}
|
|
5257
|
+
|
|
5258
|
+
if (element) {
|
|
5259
|
+
this.trigger.ariaActiveDescendantElement = element;
|
|
5260
|
+
} else {
|
|
5261
|
+
this.trigger.ariaActiveDescendantElement = null;
|
|
5262
|
+
this.trigger.removeAttribute('aria-activedescendant');
|
|
5263
|
+
}
|
|
5264
|
+
}
|
|
5265
|
+
|
|
4771
5266
|
// function to define props used within the scope of this component
|
|
4772
5267
|
static get properties() {
|
|
4773
5268
|
return {
|
|
@@ -5025,6 +5520,16 @@ class AuroDropdown extends AuroElement {
|
|
|
5025
5520
|
*/
|
|
5026
5521
|
tabIndex: {
|
|
5027
5522
|
type: Number
|
|
5523
|
+
},
|
|
5524
|
+
|
|
5525
|
+
/**
|
|
5526
|
+
* Accessible label for the dropdown bib dialog element.
|
|
5527
|
+
* @private
|
|
5528
|
+
*/
|
|
5529
|
+
bibDialogLabel: {
|
|
5530
|
+
type: String,
|
|
5531
|
+
attribute: false,
|
|
5532
|
+
reflect: false
|
|
5028
5533
|
}
|
|
5029
5534
|
};
|
|
5030
5535
|
}
|
|
@@ -5076,7 +5581,10 @@ class AuroDropdown extends AuroElement {
|
|
|
5076
5581
|
|
|
5077
5582
|
disconnectedCallback() {
|
|
5078
5583
|
super.disconnectedCallback();
|
|
5079
|
-
this.floater
|
|
5584
|
+
if (this.floater) {
|
|
5585
|
+
this.floater.hideBib('disconnect');
|
|
5586
|
+
this.floater.disconnect();
|
|
5587
|
+
}
|
|
5080
5588
|
this.clearTriggerFocusEventBinding();
|
|
5081
5589
|
}
|
|
5082
5590
|
|
|
@@ -5098,11 +5606,22 @@ class AuroDropdown extends AuroElement {
|
|
|
5098
5606
|
|
|
5099
5607
|
if (changedProperties.has('isPopoverVisible') && this.bibElement.value) {
|
|
5100
5608
|
if (this.isPopoverVisible) {
|
|
5101
|
-
|
|
5609
|
+
// Fullscreen: use showModal() for native accessibility (inert outside, focus trap)
|
|
5610
|
+
// Desktop: use show() for Floating UI positioning + FocusTrap for focus management
|
|
5611
|
+
const useModal = this.isBibFullscreen && !this.disableFocusTrap;
|
|
5612
|
+
this.bibElement.value.open(useModal);
|
|
5102
5613
|
} else {
|
|
5103
|
-
this.bibElement.value.
|
|
5614
|
+
this.bibElement.value.close();
|
|
5104
5615
|
}
|
|
5105
5616
|
}
|
|
5617
|
+
|
|
5618
|
+
// When fullscreen strategy changes while open, re-open dialog with correct mode
|
|
5619
|
+
// (e.g. resizing from desktop → mobile while dropdown is open)
|
|
5620
|
+
if (changedProperties.has('isBibFullscreen') && this.isPopoverVisible && this.bibElement.value) {
|
|
5621
|
+
const useModal = this.isBibFullscreen && !this.disableFocusTrap;
|
|
5622
|
+
this.bibElement.value.close();
|
|
5623
|
+
this.bibElement.value.open(useModal);
|
|
5624
|
+
}
|
|
5106
5625
|
}
|
|
5107
5626
|
|
|
5108
5627
|
/**
|
|
@@ -5120,11 +5639,28 @@ class AuroDropdown extends AuroElement {
|
|
|
5120
5639
|
}
|
|
5121
5640
|
|
|
5122
5641
|
firstUpdated() {
|
|
5123
|
-
|
|
5124
5642
|
// Configure the floater to, this will generate the ID for the bib
|
|
5125
5643
|
this.floater.configure(this, 'auroDropdown');
|
|
5644
|
+
|
|
5645
|
+
// Prevent `contain: layout` on the dropdown host. Layout containment
|
|
5646
|
+
// creates a containing block for position:fixed descendants (the bib),
|
|
5647
|
+
// which clips the bib inside ancestor overflow contexts such as a
|
|
5648
|
+
// <dialog> element. Without it, the bib's position:fixed is relative
|
|
5649
|
+
// to the viewport, letting Floating UI's flip middleware detect
|
|
5650
|
+
// viewport boundaries and the bib escape overflow clipping.
|
|
5651
|
+
const origConfigureBibStrategy = this.floater.configureBibStrategy.bind(this.floater);
|
|
5652
|
+
this.floater.configureBibStrategy = (value) => {
|
|
5653
|
+
origConfigureBibStrategy(value);
|
|
5654
|
+
this.style.contain = '';
|
|
5655
|
+
};
|
|
5656
|
+
|
|
5126
5657
|
this.addEventListener('auroDropdown-toggled', this.handleDropdownToggle);
|
|
5127
5658
|
|
|
5659
|
+
// Handle ESC key from dialog's cancel event
|
|
5660
|
+
this.addEventListener('auro-bib-cancel', () => {
|
|
5661
|
+
this.floater.hideBib('keydown');
|
|
5662
|
+
});
|
|
5663
|
+
|
|
5128
5664
|
/**
|
|
5129
5665
|
* @description Let subscribers know that the dropdown ID ha been generated and added.
|
|
5130
5666
|
* @event auroDropdown-idAdded
|
|
@@ -5132,9 +5668,9 @@ class AuroDropdown extends AuroElement {
|
|
|
5132
5668
|
*/
|
|
5133
5669
|
this.dispatchEvent(new CustomEvent('auroDropdown-idAdded', {detail: {id: this.floater.element.id}}));
|
|
5134
5670
|
|
|
5135
|
-
// Set the bib ID locally
|
|
5671
|
+
// Set the bib ID locally for aria-controls (must be in the same shadow root as the trigger)
|
|
5136
5672
|
if (!this.triggerContentFocusable) {
|
|
5137
|
-
this.dropdownId = this.floater.element.id;
|
|
5673
|
+
this.dropdownId = this.floater.element.bib.id;
|
|
5138
5674
|
}
|
|
5139
5675
|
|
|
5140
5676
|
this.bibContent = this.floater.element.bib;
|
|
@@ -5194,21 +5730,20 @@ class AuroDropdown extends AuroElement {
|
|
|
5194
5730
|
* @private
|
|
5195
5731
|
*/
|
|
5196
5732
|
updateFocusTrap() {
|
|
5197
|
-
// If the dropdown is open, create a focus trap and focus the first element
|
|
5198
5733
|
if (this.isPopoverVisible && !this.disableFocusTrap) {
|
|
5199
|
-
|
|
5200
|
-
|
|
5734
|
+
if (!this.isBibFullscreen) {
|
|
5735
|
+
// Desktop: show() doesn't trap focus, so use FocusTrap
|
|
5736
|
+
this.focusTrap = new FocusTrap(this.bibContent);
|
|
5737
|
+
this.focusTrap.focusFirstElement();
|
|
5738
|
+
}
|
|
5739
|
+
// Fullscreen: showModal() provides native focus trapping
|
|
5201
5740
|
return;
|
|
5202
5741
|
}
|
|
5203
5742
|
|
|
5204
|
-
|
|
5205
|
-
|
|
5206
|
-
|
|
5743
|
+
if (this.focusTrap) {
|
|
5744
|
+
this.focusTrap.disconnect();
|
|
5745
|
+
this.focusTrap = undefined;
|
|
5207
5746
|
}
|
|
5208
|
-
|
|
5209
|
-
// If the dropdown is not open, disconnect the focus trap if it exists
|
|
5210
|
-
this.focusTrap.disconnect();
|
|
5211
|
-
this.focusTrap = undefined;
|
|
5212
5747
|
}
|
|
5213
5748
|
|
|
5214
5749
|
/**
|
|
@@ -5407,7 +5942,7 @@ class AuroDropdown extends AuroElement {
|
|
|
5407
5942
|
<div>
|
|
5408
5943
|
<div
|
|
5409
5944
|
id="trigger"
|
|
5410
|
-
class="${e$
|
|
5945
|
+
class="${e$3(this.commonWrapperClasses)}" part="wrapper"
|
|
5411
5946
|
tabindex="${o(this.triggerContentFocusable ? undefined : this.tabIndex)}"
|
|
5412
5947
|
role="${o(this.triggerContentFocusable ? undefined : this.a11yRole)}"
|
|
5413
5948
|
aria-expanded="${o(this.a11yRole === 'button' || this.triggerContentFocusable ? undefined : this.isPopoverVisible)}"
|
|
@@ -5424,18 +5959,19 @@ class AuroDropdown extends AuroElement {
|
|
|
5424
5959
|
<div
|
|
5425
5960
|
id="showStateIcon"
|
|
5426
5961
|
class="chevron"
|
|
5427
|
-
part="chevron"
|
|
5962
|
+
part="chevron"
|
|
5963
|
+
aria-hidden="true">
|
|
5428
5964
|
<${this.iconTag}
|
|
5429
5965
|
category="interface"
|
|
5430
5966
|
name="${this.isPopoverVisible ? 'chevron-up' : `chevron-down`}"
|
|
5431
5967
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
5432
|
-
variant="${this.disabled ? 'disabled' : 'muted'}"
|
|
5433
|
-
>
|
|
5968
|
+
variant="${this.disabled ? 'disabled' : 'muted'}"
|
|
5969
|
+
ariaHidden="true">
|
|
5434
5970
|
</${this.iconTag}>
|
|
5435
5971
|
</div>
|
|
5436
5972
|
` : undefined }
|
|
5437
5973
|
</div>
|
|
5438
|
-
<div class="${e$
|
|
5974
|
+
<div class="${e$3(helpTextClasses)}">
|
|
5439
5975
|
<slot name="helpText"></slot>
|
|
5440
5976
|
</div>
|
|
5441
5977
|
<div id="bibSizer" part="size"></div>
|
|
@@ -5444,8 +5980,8 @@ class AuroDropdown extends AuroElement {
|
|
|
5444
5980
|
shape="${this.shape}"
|
|
5445
5981
|
?data-show="${this.isPopoverVisible}"
|
|
5446
5982
|
?isfullscreen="${this.isBibFullscreen}"
|
|
5983
|
+
.dialogLabel="${this.bibDialogLabel}"
|
|
5447
5984
|
${n$2(this.bibElement)}
|
|
5448
|
-
popover="manual"
|
|
5449
5985
|
>
|
|
5450
5986
|
<div class="slotContent">
|
|
5451
5987
|
<slot @slotchange="${this.handleDefaultSlot}"></slot>
|
|
@@ -5691,7 +6227,7 @@ class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),
|
|
|
5691
6227
|
aria-labelledby="${o(this.loading?void 0:this.currentAriaLabelledBy||void 0)}"
|
|
5692
6228
|
tabindex="${o(this.static?-1:l)}"
|
|
5693
6229
|
?autofocus="${this.autofocus}"
|
|
5694
|
-
class=${e$
|
|
6230
|
+
class=${e$3(s)}
|
|
5695
6231
|
?disabled="${this.disabled||this.loading}"
|
|
5696
6232
|
?onDark="${this.onDark}"
|
|
5697
6233
|
title="${o(this.title?this.title:void 0)}"
|
|
@@ -5711,8 +6247,8 @@ class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),
|
|
|
5711
6247
|
>
|
|
5712
6248
|
${o(this.loading?u$4`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>`:void 0)}
|
|
5713
6249
|
|
|
5714
|
-
<span class="${e$
|
|
5715
|
-
<span class="${e$
|
|
6250
|
+
<span class="${e$3(a)}" part="contentWrapper">
|
|
6251
|
+
<span class="${e$3(r)}" part="text">
|
|
5716
6252
|
<slot></slot>
|
|
5717
6253
|
</span>
|
|
5718
6254
|
</span>
|
|
@@ -5728,7 +6264,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
5728
6264
|
`;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$1`
|
|
5729
6265
|
<div class="componentWrapper">
|
|
5730
6266
|
<div
|
|
5731
|
-
class="${e$
|
|
6267
|
+
class="${e$3({svgWrapper:true})}"
|
|
5732
6268
|
title="${o(this.title||void 0)}">
|
|
5733
6269
|
<span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
|
|
5734
6270
|
${this.customSvg?b$1`
|
|
@@ -5739,7 +6275,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
5739
6275
|
</span>
|
|
5740
6276
|
</div>
|
|
5741
6277
|
|
|
5742
|
-
<div class="${e$
|
|
6278
|
+
<div class="${e$3(t)}" part="label">
|
|
5743
6279
|
<slot></slot>
|
|
5744
6280
|
</div>
|
|
5745
6281
|
</div>
|
|
@@ -5748,7 +6284,7 @@ let p$2 = class p{registerComponent(t,a){customElements.get(t)||customElements.d
|
|
|
5748
6284
|
var iconVersion$1 = '9.1.2';
|
|
5749
6285
|
|
|
5750
6286
|
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$6`.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)}
|
|
5751
|
-
`;class c extends i$3{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$
|
|
6287
|
+
`;class c extends i$3{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$4(`h${s}`);return u$4`<${g} class="${m}" style="color: ${o(this.color?this.color:void 0)}"><slot></slot></${g}>`}render(){return this.template(this.level)}}
|
|
5752
6288
|
|
|
5753
6289
|
var headerVersion = '5.0.1';
|
|
5754
6290
|
|
|
@@ -5852,6 +6388,18 @@ class AuroBibtemplate extends i$3 {
|
|
|
5852
6388
|
this.removeEventListener('touchmove', this.preventBodyScroll, { passive: false });
|
|
5853
6389
|
}
|
|
5854
6390
|
|
|
6391
|
+
/**
|
|
6392
|
+
* Focuses the close button inside the bibtemplate's shadow DOM.
|
|
6393
|
+
* Used by parent components to set initial focus when the fullscreen dialog opens.
|
|
6394
|
+
* @returns {void}
|
|
6395
|
+
*/
|
|
6396
|
+
focusCloseButton() {
|
|
6397
|
+
const closeBtn = this.shadowRoot.querySelector('#closeButton');
|
|
6398
|
+
if (closeBtn) {
|
|
6399
|
+
closeBtn.focus();
|
|
6400
|
+
}
|
|
6401
|
+
}
|
|
6402
|
+
|
|
5855
6403
|
onCloseButtonClick() {
|
|
5856
6404
|
this.dispatchEvent(new Event("close-click", { bubbles: true,
|
|
5857
6405
|
composed: true }));
|
|
@@ -6138,7 +6686,7 @@ class AuroHelpText extends i$3 {
|
|
|
6138
6686
|
}
|
|
6139
6687
|
}
|
|
6140
6688
|
|
|
6141
|
-
var formkitVersion = '
|
|
6689
|
+
var formkitVersion = '202603102257';
|
|
6142
6690
|
|
|
6143
6691
|
var styleCss$2 = i$6`.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}[auro-dropdown]{--ds-auro-dropdown-trigger-border-color: var(--ds-auro-select-border-color);--ds-auro-dropdown-trigger-background-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-container-color: var(--ds-auro-select-background-color);--ds-auro-dropdown-trigger-outline-color: var(--ds-auro-select-outline-color)}:host{display:inline-block;text-align:left;vertical-align:top}:host([layout*=emphasized]) [auro-dropdown],:host([layout*=snowflake]) [auro-dropdown]{--ds-auro-select-border-color: transparent}:host([layout*=emphasized]) .mainContent,:host([layout*=snowflake]) .mainContent{text-align:center}.mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;align-items:center;justify-content:center}.valueContainer [slot=displayValue]{display:none}.accents{display:flex;flex-direction:row;align-items:center;justify-content:center}::slotted([slot=typeIcon]){margin-right:var(--ds-size-100, 0.5rem)}.displayValue{display:block}.displayValue:not(.force){display:none}.displayValue:not(.force).hasContent:is(.withValue):not(.hasFocus){display:block}.triggerContent{display:flex;width:100%;align-items:center;justify-content:center}:host([layout*=emphasized]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem) 0 var(--ds-size-200, 1rem)}:host([layout*=snowflake]) label{padding-block:var(--ds-size-25, 0.125rem)}:host([layout*=classic]) .triggerContent{padding:0 var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .mainContent{align-items:start}:host([layout*=classic]) label{overflow:hidden;cursor:text;text-overflow:ellipsis;white-space:nowrap}:host([layout*=classic]) .value{height:auto}label{color:var(--ds-auro-select-label-text-color)}:host(:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-select-outline-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}:host([ondark]:is([validity]:not([validity=valid]))) [auro-dropdown],:host([appearance=inverse]:is([validity]:not([validity=valid]))) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-select-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-dropdown-helptext-text-color: var(--ds-basic-color-texticon-inverse, #ffffff)}#slotHolder{display:none}:host([fluid]){width:100%}:host([disabled]){pointer-events:none;user-select:none}:host([disabled]:not([ondark])) [auro-dropdown],:host([disabled]:not([appearance=inverse])) [auro-dropdown]{--ds-auro-select-border-color: var(--ds-basic-color-border-subtle, #dddddd)}:host(:not([layout*=classic])[disabled][ondark]) [auro-dropdown],:host(:not([layout*=classic])[disabled][appearance=inverse]) [auro-dropdown]{--ds-auro-select-border-color: transparent}`;
|
|
6144
6692
|
|
|
@@ -6658,28 +7206,76 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6658
7206
|
configureDropdown() {
|
|
6659
7207
|
this.dropdown = this.shadowRoot.querySelector(this.dropdownTag._$litStatic$);
|
|
6660
7208
|
|
|
7209
|
+
// Prevent dropdown from closing on focus loss since menu content is slotted
|
|
7210
|
+
// from select's light DOM and won't be detected by dropdown's contains() check.
|
|
7211
|
+
// Select handles Tab key closing explicitly, ESC via dialog cancel, and
|
|
7212
|
+
// click outside works correctly via composedPath().
|
|
7213
|
+
this.dropdown.noHideOnThisFocusLoss = true;
|
|
7214
|
+
|
|
7215
|
+
|
|
6661
7216
|
this.dropdown.addEventListener('auroDropdown-toggled', () => {
|
|
6662
7217
|
this.isPopoverVisible = this.dropdown.isPopoverVisible;
|
|
6663
7218
|
|
|
7219
|
+
// Clear aria-activedescendant when dropdown closes
|
|
7220
|
+
if (!this.dropdown.isPopoverVisible) {
|
|
7221
|
+
this.dropdown.setActiveDescendant(null);
|
|
7222
|
+
this.optionActive = null;
|
|
7223
|
+
|
|
7224
|
+
restoreTriggerAfterClose(this.dropdown, this.dropdown.trigger);
|
|
7225
|
+
}
|
|
7226
|
+
|
|
6664
7227
|
if (this.dropdown.isPopoverVisible) {
|
|
6665
7228
|
this.updateMenuShapeSize();
|
|
6666
|
-
// wait til the bib gets fully rendered
|
|
6667
|
-
setTimeout(() => {
|
|
6668
|
-
if (this.dropdown.isBibFullscreen) {
|
|
6669
|
-
// trigger holds the focus since menu is not a focusable element.
|
|
6670
|
-
this.dropdown.trigger.focus();
|
|
6671
7229
|
|
|
6672
|
-
|
|
6673
|
-
|
|
6674
|
-
|
|
7230
|
+
if (this.dropdown.isBibFullscreen) {
|
|
7231
|
+
// Hide the trigger from assistive technology so VoiceOver cannot reach it
|
|
7232
|
+
// behind the fullscreen dialog
|
|
7233
|
+
this.dropdown.trigger.inert = true;
|
|
7234
|
+
|
|
7235
|
+
guardTouchPassthrough(this.menu);
|
|
7236
|
+
|
|
7237
|
+
// Wait for the bibtemplate to fully render (close button) across
|
|
7238
|
+
// multiple Lit update cycles before moving focus into the bib
|
|
7239
|
+
doubleRaf(() => {
|
|
7240
|
+
this.bibtemplate.focusCloseButton();
|
|
7241
|
+
|
|
7242
|
+
// If there's a selected option, highlight it (per W3C APG combobox-select-only pattern)
|
|
7243
|
+
// No selection → no highlight
|
|
7244
|
+
if (this.optionSelected && !Array.isArray(this.optionSelected)) {
|
|
7245
|
+
this.menu.updateActiveOption(this.optionSelected);
|
|
7246
|
+
} else if (this.multiSelect && Array.isArray(this.optionSelected) && this.optionSelected.length > 0) {
|
|
7247
|
+
this.menu.updateActiveOption(this.optionSelected[0]);
|
|
6675
7248
|
}
|
|
6676
|
-
|
|
6677
|
-
|
|
7249
|
+
|
|
7250
|
+
// Scroll the selected option into view when dropdown opens
|
|
7251
|
+
this.scrollSelectedOptionIntoView();
|
|
7252
|
+
});
|
|
7253
|
+
} else {
|
|
7254
|
+
// wait til the bib gets fully rendered
|
|
7255
|
+
setTimeout(() => {
|
|
7256
|
+
// Keep focus on trigger so aria-activedescendant announces menu options
|
|
7257
|
+
this.dropdown.trigger.focus();
|
|
7258
|
+
|
|
7259
|
+
// Scroll the selected option into view when dropdown opens
|
|
7260
|
+
this.scrollSelectedOptionIntoView();
|
|
7261
|
+
});
|
|
7262
|
+
}
|
|
6678
7263
|
}
|
|
6679
7264
|
});
|
|
6680
7265
|
|
|
6681
7266
|
this.dropdown.addEventListener('auroDropdown-strategy-change', () => {
|
|
6682
7267
|
this.updateMenuShapeSize();
|
|
7268
|
+
|
|
7269
|
+
// When switching to fullscreen while open, focus the close button
|
|
7270
|
+
// so it's not stuck on the trigger behind the dialog
|
|
7271
|
+
if (this.dropdown.isBibFullscreen && this.dropdown.isPopoverVisible) {
|
|
7272
|
+
this.dropdown.trigger.inert = true;
|
|
7273
|
+
doubleRaf(() => {
|
|
7274
|
+
this.bibtemplate.focusCloseButton();
|
|
7275
|
+
});
|
|
7276
|
+
} else if (!this.dropdown.isBibFullscreen) {
|
|
7277
|
+
this.dropdown.trigger.inert = false;
|
|
7278
|
+
}
|
|
6683
7279
|
});
|
|
6684
7280
|
|
|
6685
7281
|
// setting up bibtemplate
|
|
@@ -6689,6 +7285,12 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6689
7285
|
this.dropdown.dropdownWidth = this.customBibWidth;
|
|
6690
7286
|
}
|
|
6691
7287
|
|
|
7288
|
+
// Pass label text to the dropdown bib for accessible dialog naming
|
|
7289
|
+
const labelElement = this.querySelector('span[slot="label"]');
|
|
7290
|
+
if (labelElement) {
|
|
7291
|
+
this.dropdown.bibDialogLabel = labelElement.textContent.trim() || undefined;
|
|
7292
|
+
}
|
|
7293
|
+
|
|
6692
7294
|
// Exposes the CSS parts from the dropdown for styling
|
|
6693
7295
|
this.dropdown.exposeCssParts();
|
|
6694
7296
|
}
|
|
@@ -6790,6 +7392,23 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6790
7392
|
}
|
|
6791
7393
|
}
|
|
6792
7394
|
|
|
7395
|
+
/**
|
|
7396
|
+
* Sets aria-setsize and aria-posinset on each menu option so screen readers
|
|
7397
|
+
* can announce position even when the listbox context is broken by
|
|
7398
|
+
* shadow DOM boundaries.
|
|
7399
|
+
* @private
|
|
7400
|
+
* @returns {void}
|
|
7401
|
+
*/
|
|
7402
|
+
updateOptionPositions() {
|
|
7403
|
+
if (!this.menu || !this.menu.options) return;
|
|
7404
|
+
const visibleOptions = this.menu.options;
|
|
7405
|
+
const count = visibleOptions.length;
|
|
7406
|
+
visibleOptions.forEach((option, index) => {
|
|
7407
|
+
option.setAttribute('aria-setsize', count);
|
|
7408
|
+
option.setAttribute('aria-posinset', index + 1);
|
|
7409
|
+
});
|
|
7410
|
+
}
|
|
7411
|
+
|
|
6793
7412
|
/**
|
|
6794
7413
|
* Binds all behavior needed to the menu after rendering.
|
|
6795
7414
|
* @private
|
|
@@ -6811,13 +7430,38 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6811
7430
|
this.updateMenuShapeSize();
|
|
6812
7431
|
this.setMenuValue(this.value);
|
|
6813
7432
|
|
|
7433
|
+
// Set accessible name on the menu for screen readers based on the label slot content
|
|
7434
|
+
const labelElement = this.querySelector('[slot="label"]');
|
|
7435
|
+
if (labelElement) {
|
|
7436
|
+
this.menu.setAttribute('aria-label', labelElement.textContent.trim());
|
|
7437
|
+
}
|
|
7438
|
+
|
|
6814
7439
|
if (this.multiSelect) {
|
|
6815
7440
|
this.menu.multiSelect = this.multiSelect;
|
|
6816
7441
|
}
|
|
6817
7442
|
|
|
6818
7443
|
this.options = this.menu.options;
|
|
6819
|
-
this.
|
|
7444
|
+
this.updateOptionPositions();
|
|
6820
7445
|
this.menu.addEventListener("auroMenu-loadingChange", (event) => this.handleMenuLoadingChange(event));
|
|
7446
|
+
|
|
7447
|
+
this.menu.addEventListener('auroMenu-activatedOption', (evt) => {
|
|
7448
|
+
this.optionActive = evt.detail;
|
|
7449
|
+
|
|
7450
|
+
if (this.dropdown) {
|
|
7451
|
+
this.dropdown.setActiveDescendant(this.optionActive);
|
|
7452
|
+
}
|
|
7453
|
+
|
|
7454
|
+
// Announce the active option for screen readers
|
|
7455
|
+
if (this.optionActive) {
|
|
7456
|
+
const optionText = this.optionActive.textContent.trim();
|
|
7457
|
+
const selectedState = this.optionActive.hasAttribute('selected') ? ', selected' : ', not selected';
|
|
7458
|
+
announceToScreenReader(this.shadowRoot, `${optionText}${selectedState}`);
|
|
7459
|
+
}
|
|
7460
|
+
|
|
7461
|
+
if (this.dropdown.isPopoverVisible) {
|
|
7462
|
+
this.scrollActiveOptionIntoView();
|
|
7463
|
+
}
|
|
7464
|
+
});
|
|
6821
7465
|
this.menu.addEventListener('auroMenu-selectedOption', (event) => {
|
|
6822
7466
|
|
|
6823
7467
|
// Update the displayed value
|
|
@@ -6830,6 +7474,14 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6830
7474
|
if (this.dropdown.isPopoverVisible) {
|
|
6831
7475
|
this.dropdown.hide();
|
|
6832
7476
|
}
|
|
7477
|
+
|
|
7478
|
+
// Announce the selection after the dropdown closes so it isn't
|
|
7479
|
+
// overridden by VoiceOver's "collapsed" announcement from aria-expanded.
|
|
7480
|
+
const selectedValue = event.detail.stringValue;
|
|
7481
|
+
const announcementDelay = 300;
|
|
7482
|
+
setTimeout(() => {
|
|
7483
|
+
announceToScreenReader(this.shadowRoot, `${selectedValue}, selected`);
|
|
7484
|
+
}, announcementDelay);
|
|
6833
7485
|
});
|
|
6834
7486
|
}
|
|
6835
7487
|
|
|
@@ -6841,66 +7493,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6841
7493
|
configureSelect() {
|
|
6842
7494
|
this.nativeSelect = this.shadowRoot.querySelector('select');
|
|
6843
7495
|
|
|
6844
|
-
this
|
|
6845
|
-
|
|
6846
|
-
// when the focus is on trigger not on close button
|
|
6847
|
-
if (this.dropdown.shadowRoot.activeElement === this.dropdown.trigger) {
|
|
6848
|
-
if (evt.key === 'ArrowUp') {
|
|
6849
|
-
evt.preventDefault();
|
|
6850
|
-
|
|
6851
|
-
this.dropdown.show();
|
|
6852
|
-
|
|
6853
|
-
if (this.dropdown.isPopoverVisible) {
|
|
6854
|
-
this.menu.navigateOptions('up');
|
|
6855
|
-
}
|
|
6856
|
-
|
|
6857
|
-
return;
|
|
6858
|
-
}
|
|
6859
|
-
|
|
6860
|
-
if (evt.key === 'ArrowDown') {
|
|
6861
|
-
evt.preventDefault();
|
|
6862
|
-
|
|
6863
|
-
this.dropdown.show();
|
|
6864
|
-
|
|
6865
|
-
if (this.dropdown.isPopoverVisible) {
|
|
6866
|
-
this.menu.navigateOptions('down');
|
|
6867
|
-
}
|
|
6868
|
-
|
|
6869
|
-
return;
|
|
6870
|
-
}
|
|
6871
|
-
|
|
6872
|
-
if (evt.key === 'Enter') {
|
|
6873
|
-
if (!this.dropdown.isPopoverVisible) {
|
|
6874
|
-
evt.preventDefault();
|
|
6875
|
-
this.menu.makeSelection();
|
|
6876
|
-
}
|
|
6877
|
-
|
|
6878
|
-
return;
|
|
6879
|
-
}
|
|
6880
|
-
}
|
|
6881
|
-
|
|
6882
|
-
if (evt.key === 'Tab' && this.dropdown.isPopoverVisible) {
|
|
6883
|
-
if (this.dropdown.isBibFullscreen) {
|
|
6884
|
-
evt.preventDefault();
|
|
6885
|
-
|
|
6886
|
-
// when the focus is on trigger not on close button
|
|
6887
|
-
if (this.dropdown.shadowRoot.activeElement === this.dropdown.trigger) {
|
|
6888
|
-
// `dropdown.focus` will move focus to the first focusable element in bib when it's open,
|
|
6889
|
-
// when bib it not open, it will focus onto trigger.
|
|
6890
|
-
this.dropdown.focus();
|
|
6891
|
-
} else {
|
|
6892
|
-
// when close button has the focus, move focus back to the trigger
|
|
6893
|
-
this.dropdown.trigger.focus();
|
|
6894
|
-
}
|
|
6895
|
-
} else {
|
|
6896
|
-
this.dropdown.hide();
|
|
6897
|
-
}
|
|
6898
|
-
return;
|
|
6899
|
-
}
|
|
6900
|
-
|
|
6901
|
-
// Handle all other key presses by updating the active option based on the key pressed
|
|
6902
|
-
this.updateActiveOptionBasedOnKey(evt.key);
|
|
6903
|
-
});
|
|
7496
|
+
applyKeyboardStrategy(this, selectKeyboardStrategy);
|
|
6904
7497
|
|
|
6905
7498
|
this.addEventListener('focusin', this.handleFocusin);
|
|
6906
7499
|
|
|
@@ -6910,6 +7503,16 @@ class AuroSelect extends AuroElement$1 {
|
|
|
6910
7503
|
});
|
|
6911
7504
|
}
|
|
6912
7505
|
|
|
7506
|
+
/**
|
|
7507
|
+
* Updates the active option in the menu.
|
|
7508
|
+
* @param {number} index - Index of the option to make active.
|
|
7509
|
+
*/
|
|
7510
|
+
updateActiveOption(index) {
|
|
7511
|
+
if (this.menu) {
|
|
7512
|
+
this.menu.index = index;
|
|
7513
|
+
}
|
|
7514
|
+
}
|
|
7515
|
+
|
|
6913
7516
|
/**
|
|
6914
7517
|
* Updates the active option in the menu based on keyboard input.
|
|
6915
7518
|
* @private
|
|
@@ -7073,6 +7676,48 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7073
7676
|
this.menu.value = value;
|
|
7074
7677
|
}
|
|
7075
7678
|
|
|
7679
|
+
/**
|
|
7680
|
+
* Scrolls the currently active option into view.
|
|
7681
|
+
* Respects user's motion preferences for accessibility.
|
|
7682
|
+
* @private
|
|
7683
|
+
*/
|
|
7684
|
+
scrollActiveOptionIntoView() {
|
|
7685
|
+
if (!this.menu || !this.menu.optionActive) return;
|
|
7686
|
+
|
|
7687
|
+
// Check if user prefers reduced motion for accessibility
|
|
7688
|
+
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
7689
|
+
|
|
7690
|
+
this.menu.optionActive.scrollIntoView({
|
|
7691
|
+
alignToTop: false,
|
|
7692
|
+
block: "nearest",
|
|
7693
|
+
behavior: prefersReducedMotion ? "auto" : "smooth"
|
|
7694
|
+
});
|
|
7695
|
+
}
|
|
7696
|
+
|
|
7697
|
+
/**
|
|
7698
|
+
* Scrolls the currently selected option into view.
|
|
7699
|
+
* Respects user's motion preferences for accessibility.
|
|
7700
|
+
* @private
|
|
7701
|
+
*/
|
|
7702
|
+
scrollSelectedOptionIntoView() {
|
|
7703
|
+
if (!this.menu || !this.menu.optionSelected) return;
|
|
7704
|
+
|
|
7705
|
+
const selectedOption = this.multiSelect && Array.isArray(this.menu.optionSelected)
|
|
7706
|
+
? this.menu.optionSelected[0]
|
|
7707
|
+
: this.menu.optionSelected;
|
|
7708
|
+
|
|
7709
|
+
if (selectedOption) {
|
|
7710
|
+
// Check if user prefers reduced motion for accessibility
|
|
7711
|
+
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
|
7712
|
+
|
|
7713
|
+
selectedOption.scrollIntoView({
|
|
7714
|
+
alignToTop: true,
|
|
7715
|
+
block: "start",
|
|
7716
|
+
behavior: prefersReducedMotion ? "auto" : "smooth"
|
|
7717
|
+
});
|
|
7718
|
+
}
|
|
7719
|
+
}
|
|
7720
|
+
|
|
7076
7721
|
updated(changedProperties) {
|
|
7077
7722
|
if (changedProperties.has('multiSelect') && !changedProperties.has('value')) {
|
|
7078
7723
|
this.clearSelection();
|
|
@@ -7084,7 +7729,9 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7084
7729
|
this._updateNativeSelect();
|
|
7085
7730
|
this.validate();
|
|
7086
7731
|
this.hideBib();
|
|
7087
|
-
this.
|
|
7732
|
+
if (this.dropdown && this.dropdown.trigger) {
|
|
7733
|
+
this.dropdown.trigger.focus();
|
|
7734
|
+
}
|
|
7088
7735
|
|
|
7089
7736
|
// LEGACY EVENT
|
|
7090
7737
|
this.dispatchEvent(new CustomEvent('auroSelect-valueSet', {
|
|
@@ -7133,6 +7780,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7133
7780
|
* @returns {void}
|
|
7134
7781
|
*/
|
|
7135
7782
|
reset() {
|
|
7783
|
+
this.menu.reset();
|
|
7136
7784
|
this.validation.reset(this);
|
|
7137
7785
|
}
|
|
7138
7786
|
|
|
@@ -7282,7 +7930,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7282
7930
|
</div>
|
|
7283
7931
|
<${this.dropdownTag}
|
|
7284
7932
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
7285
|
-
a11yRole
|
|
7933
|
+
.a11yRole=${"combobox"}
|
|
7286
7934
|
?autoPlacement="${this.autoPlacement}"
|
|
7287
7935
|
?error="${this.validity !== undefined && this.validity !== 'valid'}"
|
|
7288
7936
|
?matchWidth="${this.matchWidth}"
|
|
@@ -7297,28 +7945,27 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7297
7945
|
part="dropdown"
|
|
7298
7946
|
shape="${this.shape}"
|
|
7299
7947
|
size="${this.size}">
|
|
7300
|
-
<div slot="trigger"
|
|
7948
|
+
<div slot="trigger" id="triggerFocus" class="triggerContent">
|
|
7301
7949
|
<div class="accents left">
|
|
7302
7950
|
<slot name="typeIcon"></slot>
|
|
7303
7951
|
</div>
|
|
7304
7952
|
<div class="mainContent">
|
|
7305
|
-
<div class="${e$
|
|
7306
|
-
<
|
|
7953
|
+
<div class="${e$3(valueContainerClasses)}">
|
|
7954
|
+
<span id="dropdownLabel" class="${e$3(this.commonLabelClasses)}">
|
|
7307
7955
|
<slot name="label"></slot>
|
|
7308
7956
|
${this.required ? undefined : u$4`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7309
|
-
</
|
|
7957
|
+
</span>
|
|
7310
7958
|
<div class="value" id="value"></div>
|
|
7311
|
-
<div id="placeholder" class="${e$
|
|
7959
|
+
<div id="placeholder" class="${e$3(placeholderClass)}">
|
|
7312
7960
|
${this.placeholder}
|
|
7313
7961
|
</div>
|
|
7314
7962
|
</div>
|
|
7315
|
-
<div class="${e$
|
|
7963
|
+
<div class="${e$3(displayValueClasses)}" aria-hidden="true" part="displayValue">
|
|
7316
7964
|
<slot name="displayValue"></slot>
|
|
7317
7965
|
</div>
|
|
7318
7966
|
</div>
|
|
7319
7967
|
<div class="accents right"></div>
|
|
7320
7968
|
</div>
|
|
7321
|
-
<div class="menuWrapper"></div>
|
|
7322
7969
|
<${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
|
|
7323
7970
|
<slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
|
|
7324
7971
|
<slot></slot>
|
|
@@ -7362,6 +8009,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7362
8009
|
</div>
|
|
7363
8010
|
<${this.dropdownTag}
|
|
7364
8011
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
8012
|
+
.a11yRole=${"combobox"}
|
|
7365
8013
|
?autoPlacement="${this.autoPlacement}"
|
|
7366
8014
|
?error="${this.validity !== undefined && this.validity !== 'valid'}"
|
|
7367
8015
|
?matchWidth="${this.matchWidth}"
|
|
@@ -7375,28 +8023,27 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7375
8023
|
part="dropdown"
|
|
7376
8024
|
shape="${this.shape}"
|
|
7377
8025
|
size="${this.size}">
|
|
7378
|
-
<div slot="trigger"
|
|
8026
|
+
<div slot="trigger" id="triggerFocus" class="triggerContent">
|
|
7379
8027
|
<div class="accents left">
|
|
7380
8028
|
<slot name="typeIcon"></slot>
|
|
7381
8029
|
</div>
|
|
7382
8030
|
<div class="mainContent">
|
|
7383
|
-
<div class="${e$
|
|
7384
|
-
<
|
|
8031
|
+
<div class="${e$3(valueContainerClasses)}">
|
|
8032
|
+
<span id="dropdownLabel" class="${e$3(this.commonLabelClasses)}">
|
|
7385
8033
|
<slot name="label"></slot>
|
|
7386
8034
|
${this.required ? undefined : u$4`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7387
|
-
</
|
|
8035
|
+
</span>
|
|
7388
8036
|
<div class="value body-default" id="value"></div>
|
|
7389
|
-
<div id="placeholder" class="${e$
|
|
8037
|
+
<div id="placeholder" class="${e$3(placeholderClass)}">
|
|
7390
8038
|
${this.placeholder}
|
|
7391
8039
|
</div>
|
|
7392
8040
|
</div>
|
|
7393
|
-
<div class="${e$
|
|
8041
|
+
<div class="${e$3(displayValueClasses)}" aria-hidden="true" part="displayValue">
|
|
7394
8042
|
<slot name="displayValue"></slot>
|
|
7395
8043
|
</div>
|
|
7396
8044
|
</div>
|
|
7397
8045
|
<div class="accents right"></div>
|
|
7398
8046
|
</div>
|
|
7399
|
-
<div class="menuWrapper"></div>
|
|
7400
8047
|
<${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
|
|
7401
8048
|
<slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
|
|
7402
8049
|
<slot></slot>
|
|
@@ -7406,6 +8053,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7406
8053
|
</div>
|
|
7407
8054
|
</${this.dropdownTag}>
|
|
7408
8055
|
${this.renderNativeSelect()}
|
|
8056
|
+
<span id="srAnnouncement" class="util_displayHiddenVisually" aria-live="polite" role="status"></span>
|
|
7409
8057
|
</div>
|
|
7410
8058
|
`;
|
|
7411
8059
|
}
|
|
@@ -7446,6 +8094,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7446
8094
|
</div>
|
|
7447
8095
|
<${this.dropdownTag}
|
|
7448
8096
|
appearance="${this.onDark ? 'inverse' : this.appearance}"
|
|
8097
|
+
.a11yRole=${"combobox"}
|
|
7449
8098
|
?autoPlacement="${this.autoPlacement}"
|
|
7450
8099
|
?error="${this.validity !== undefined && this.validity !== 'valid'}"
|
|
7451
8100
|
?matchWidth="${!this.flexMenuWidth}"
|
|
@@ -7459,28 +8108,27 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7459
8108
|
part="dropdown"
|
|
7460
8109
|
shape="${this.shape}"
|
|
7461
8110
|
size="${this.size}">
|
|
7462
|
-
<div slot="trigger"
|
|
8111
|
+
<div slot="trigger" id="triggerFocus" class="triggerContent">
|
|
7463
8112
|
<div class="accents left">
|
|
7464
8113
|
<slot name="typeIcon"></slot>
|
|
7465
8114
|
</div>
|
|
7466
8115
|
<div class="mainContent">
|
|
7467
|
-
<div class="${e$
|
|
7468
|
-
<
|
|
8116
|
+
<div class="${e$3(valueContainerClasses)}">
|
|
8117
|
+
<span id="dropdownLabel" class="${e$3(this.commonLabelClasses)}">
|
|
7469
8118
|
<slot name="label"></slot>
|
|
7470
8119
|
${this.required ? undefined : u$4`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7471
|
-
</
|
|
7472
|
-
<div class="${e$
|
|
7473
|
-
<div id="placeholder" class="${e$
|
|
8120
|
+
</span>
|
|
8121
|
+
<div class="${e$3(valueClasses)}" id="value"></div>
|
|
8122
|
+
<div id="placeholder" class="${e$3(placeholderClass)}">
|
|
7474
8123
|
${this.placeholder}
|
|
7475
8124
|
</div>
|
|
7476
8125
|
</div>
|
|
7477
|
-
<div class="${e$
|
|
8126
|
+
<div class="${e$3(displayValueClasses)}" aria-hidden="true" part="displayValue">
|
|
7478
8127
|
<slot name="displayValue"></slot>
|
|
7479
8128
|
</div>
|
|
7480
8129
|
</div>
|
|
7481
8130
|
<div class="accents right"></div>
|
|
7482
8131
|
</div>
|
|
7483
|
-
<div class="menuWrapper"></div>
|
|
7484
8132
|
<${this.bibtemplateTag} ?large="${this.largeFullscreenHeadline}" @close-click="${this.hideBib}">
|
|
7485
8133
|
<slot name="ariaLabel.bib.close" slot="ariaLabel.close">Close</slot>
|
|
7486
8134
|
<slot></slot>
|
|
@@ -7490,6 +8138,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7490
8138
|
</div>
|
|
7491
8139
|
</${this.dropdownTag}>
|
|
7492
8140
|
${this.renderNativeSelect()}
|
|
8141
|
+
<span id="srAnnouncement" class="util_displayHiddenVisually" aria-live="polite" role="status"></span>
|
|
7493
8142
|
</div>
|
|
7494
8143
|
`;
|
|
7495
8144
|
}
|
|
@@ -7525,7 +8174,7 @@ class AuroSelect extends AuroElement$1 {
|
|
|
7525
8174
|
// aria-hidden="${this.hideAudible(this.hiddenAudible)}"
|
|
7526
8175
|
}
|
|
7527
8176
|
|
|
7528
|
-
var styleCss$1 = i$6`: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)}`;
|
|
8177
|
+
var styleCss$1 = i$6`: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)}`;
|
|
7529
8178
|
|
|
7530
8179
|
var colorCss$1 = i$6`: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)}`;
|
|
7531
8180
|
|
|
@@ -7566,7 +8215,7 @@ class s{get value(){return this.o}set value(s){this.setValue(s);}setValue(s,t=fa
|
|
|
7566
8215
|
|
|
7567
8216
|
var styleCss = i$6`.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}`;
|
|
7568
8217
|
|
|
7569
|
-
var colorCss = i$6`: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)
|
|
8218
|
+
var colorCss = i$6`: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)}}`;
|
|
7570
8219
|
|
|
7571
8220
|
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$3{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$6`: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}
|
|
7572
8221
|
`;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$6`.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}
|
|
@@ -7575,7 +8224,7 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
7575
8224
|
`;class _ extends z{constructor(){super(),this._initializeDefaults();}_initializeDefaults(){this.variant=void 0,this.uri="https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist",this.runtimeUtils=new p;}static get properties(){return {...z.properties,ariaHidden:{type:String,reflect:true},category:{type:String,reflect:true},customColor:{type:Boolean,reflect:true},customSvg:{type:Boolean},label:{type:Boolean,reflect:true},name:{type:String,reflect:true},variant:{type:String,reflect:true}}}static get styles(){return [z.styles,y,w,x]}static register(t="auro-icon"){p.prototype.registerComponent(t,_);}connectedCallback(){super.connectedCallback(),this.runtimeUtils.handleComponentTagRename(this,"auro-icon");}exposeCssParts(){this.setAttribute("exportparts","svg:iconSvg");}async firstUpdated(){if(await super.firstUpdated(),this.hasAttribute("ariaHidden")&&this.svg){const t=this.svg.querySelector("desc");t&&(t.remove(),this.svg.removeAttribute("aria-labelledby"));}}render(){const t={labelWrapper:true,util_displayHiddenVisually:!this.label};return b$1`
|
|
7576
8225
|
<div class="componentWrapper">
|
|
7577
8226
|
<div
|
|
7578
|
-
class="${e$
|
|
8227
|
+
class="${e$3({svgWrapper:true})}"
|
|
7579
8228
|
title="${o(this.title||void 0)}">
|
|
7580
8229
|
<span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
|
|
7581
8230
|
${this.customSvg?b$1`
|
|
@@ -7586,13 +8235,13 @@ class p{registerComponent(t,a){customElements.get(t)||customElements.define(t,cl
|
|
|
7586
8235
|
</span>
|
|
7587
8236
|
</div>
|
|
7588
8237
|
|
|
7589
|
-
<div class="${e$
|
|
8238
|
+
<div class="${e$3(t)}" part="label">
|
|
7590
8239
|
<slot></slot>
|
|
7591
8240
|
</div>
|
|
7592
8241
|
</div>
|
|
7593
8242
|
`}}
|
|
7594
8243
|
|
|
7595
|
-
var iconVersion = '9.1.
|
|
8244
|
+
var iconVersion = '9.1.2';
|
|
7596
8245
|
|
|
7597
8246
|
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>"};
|
|
7598
8247
|
|
|
@@ -7632,6 +8281,8 @@ function dispatchMenuEvent(element, eventName, detail = null) {
|
|
|
7632
8281
|
*
|
|
7633
8282
|
* @event auroMenuOption-mouseover - Notifies that this option has been hovered over.
|
|
7634
8283
|
*/
|
|
8284
|
+
let menuOptionIdCounter = 0;
|
|
8285
|
+
|
|
7635
8286
|
class AuroMenuOption extends AuroElement$1 {
|
|
7636
8287
|
|
|
7637
8288
|
/**
|
|
@@ -7814,6 +8465,12 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
7814
8465
|
// Add the tag name as an attribute if it is different than the component name
|
|
7815
8466
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-menuoption');
|
|
7816
8467
|
|
|
8468
|
+
// Generate unique ID if not already set (required for aria-activedescendant)
|
|
8469
|
+
if (!this.id) {
|
|
8470
|
+
menuOptionIdCounter += 1;
|
|
8471
|
+
this.id = `menuoption-${menuOptionIdCounter}`;
|
|
8472
|
+
}
|
|
8473
|
+
|
|
7817
8474
|
this.setAttribute('role', 'option');
|
|
7818
8475
|
this.setAttribute('aria-selected', 'false');
|
|
7819
8476
|
|
|
@@ -8091,7 +8748,7 @@ class AuroMenuOption extends AuroElement$1 {
|
|
|
8091
8748
|
xl: 'body-lg'
|
|
8092
8749
|
};
|
|
8093
8750
|
|
|
8094
|
-
const classes = e$
|
|
8751
|
+
const classes = e$3({
|
|
8095
8752
|
'wrapper': true,
|
|
8096
8753
|
[this.size ? fontClassMap[this.size] : 'body-sm']: true,
|
|
8097
8754
|
});
|
|
@@ -8718,7 +9375,7 @@ class MenuService {
|
|
|
8718
9375
|
|
|
8719
9376
|
const MenuContext = n('menu-context');
|
|
8720
9377
|
|
|
8721
|
-
/* eslint-disable no-underscore-dangle
|
|
9378
|
+
/* eslint-disable no-underscore-dangle */
|
|
8722
9379
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
8723
9380
|
// See LICENSE in the project root for license information.
|
|
8724
9381
|
|
|
@@ -8739,7 +9396,7 @@ const MenuContext = n('menu-context');
|
|
|
8739
9396
|
* @slot - Slot for insertion of menu options.
|
|
8740
9397
|
*/
|
|
8741
9398
|
|
|
8742
|
-
/* eslint-disable
|
|
9399
|
+
/* eslint-disable max-lines */
|
|
8743
9400
|
|
|
8744
9401
|
class AuroMenu extends AuroElement$1 {
|
|
8745
9402
|
|
|
@@ -9196,6 +9853,11 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9196
9853
|
if (this.rootMenu) {
|
|
9197
9854
|
this.setAttribute('role', 'listbox');
|
|
9198
9855
|
this.setAttribute('root', '');
|
|
9856
|
+
|
|
9857
|
+
if (this.multiSelect) {
|
|
9858
|
+
this.setAttribute('aria-multiselectable', 'true');
|
|
9859
|
+
}
|
|
9860
|
+
|
|
9199
9861
|
this.handleNestedMenus(this);
|
|
9200
9862
|
}
|
|
9201
9863
|
}
|
|
@@ -9361,7 +10023,7 @@ class AuroMenu extends AuroElement$1 {
|
|
|
9361
10023
|
* @private
|
|
9362
10024
|
*/
|
|
9363
10025
|
get wrapperClasses() {
|
|
9364
|
-
return e$
|
|
10026
|
+
return e$3({
|
|
9365
10027
|
'menuWrapper': true,
|
|
9366
10028
|
[this.size]: true,
|
|
9367
10029
|
});
|
|
@@ -9414,6 +10076,7 @@ function initExamples(initCount) {
|
|
|
9414
10076
|
valueAlertExample();
|
|
9415
10077
|
inDialogExample();
|
|
9416
10078
|
resetStateExample();
|
|
10079
|
+
updateActiveOptionExample();
|
|
9417
10080
|
// auroMenuLoadingExample();
|
|
9418
10081
|
} catch (err) {
|
|
9419
10082
|
if (initCount <= 20) {
|