@aurodesignsystem/auro-dialog 4.1.1 → 4.2.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 +19 -2
- package/demo/api.md +12 -9
- package/demo/auro-dialog.min.js +3171 -309
- package/demo/index.md +7 -0
- package/dist/auro-dialog-CWkXz5VA.js +134 -0
- package/dist/index.d.ts +12 -3
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +7 -7
- package/dist/auro-dialog-BNnIwNXB.js +0 -128
package/demo/auro-dialog.min.js
CHANGED
|
@@ -1,9 +1,16 @@
|
|
|
1
1
|
function initBasicExample() {
|
|
2
|
+
if (initBasicExample._initialized) {
|
|
3
|
+
return;
|
|
4
|
+
}
|
|
2
5
|
const buttons = [
|
|
3
6
|
document.querySelector("#openBasic"),
|
|
4
7
|
document.querySelector("#closeBasic"),
|
|
5
8
|
];
|
|
6
9
|
const dialog = document.querySelector("#defaultDialog");
|
|
10
|
+
if (!buttons[0] || !buttons[1] || !dialog) {
|
|
11
|
+
return;
|
|
12
|
+
}
|
|
13
|
+
initBasicExample._initialized = true;
|
|
7
14
|
|
|
8
15
|
buttons.forEach((button) => {
|
|
9
16
|
button.addEventListener("click", () => {
|
|
@@ -117,7 +124,7 @@ const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.na
|
|
|
117
124
|
* Copyright 2017 Google LLC
|
|
118
125
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
119
126
|
*/
|
|
120
|
-
const t$1=globalThis,i$3=t$1.trustedTypes,s$2=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$3="?"+h$1,n$1=`<${o$3}>`,r=document,l$2=()=>r.createComment(""),c$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$1=Array.isArray,u$3=t=>a$1(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$2=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_=/>/g,m$2=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g$2=/"/g,$=/^(?:script|style|textarea|title)$/i,y$2=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$
|
|
127
|
+
const t$1=globalThis,i$3=t$1.trustedTypes,s$2=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h$1=`lit$${Math.random().toFixed(9).slice(2)}$`,o$3="?"+h$1,n$1=`<${o$3}>`,r=document,l$2=()=>r.createComment(""),c$1=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$1=Array.isArray,u$3=t=>a$1(t)||"function"==typeof t?.[Symbol.iterator],d$1="[ \t\n\f\r]",f$2=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_$1=/>/g,m$2=RegExp(`>|${d$1}(?:([^\\s"'>=/]+)(${d$1}*=${d$1}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$2=/'/g,g$2=/"/g,$=/^(?:script|style|textarea|title)$/i,y$2=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$1=y$2(1),T$1=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r.createTreeWalker(r,129);function P(t,i){if(!a$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$2?s$2.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$2;for(let i=0;i<s;i++){const s=t[i];let a,u,d=-1,y=0;for(;y<s.length&&(c.lastIndex=y,u=c.exec(s),null!==u);)y=c.lastIndex,c===f$2?"!--"===u[1]?c=v$1:void 0!==u[1]?c=_$1:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m$2):void 0!==u[3]&&(c=m$2):c===m$2?">"===u[0]?(c=r??f$2,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m$2:'"'===u[3]?g$2:p$2):c===g$2||c===p$2?c=m$2:c===v$1||c===_$1?c=f$2:(c=m$2,r=void 0);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$2?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$2+s.slice(d)+h$1+x):s+h$1+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};let N$1 = class N{constructor({strings:t,_$litType$:s},n){let r;this.parts=[];let c=0,a=0;const u=t.length-1,d=this.parts,[f,v]=V(t,s);if(this.el=N.createElement(f,n),C$1.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C$1.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$2)){const i=v[a++],s=r.getAttribute(t).split(h$1),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H$1:"?"===e[1]?I:"@"===e[1]?L:k$2}),r.removeAttribute(t);}else t.startsWith(h$1)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h$1),s=t.length-1;if(s>0){r.textContent=i$3?i$3.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$2()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$2());}}}else if(8===r.nodeType)if(r.data===o$3)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$1,t+1));)d.push({type:7,index:c}),t+=h$1.length-1;}c++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}};function S$1(t,i,s=t,e){if(i===T$1)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$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=S$1(t,h._$AS(t,i.values),h,e)),i}let M$2 = class M{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??r).importNode(i,true);C$1.currentNode=e;let h=C$1.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R$1(h,h.nextSibling,this,t):1===l.type?i=new l.ctor(h,l.name,l.strings,this,t):6===l.type&&(i=new z$2(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C$1.nextNode(),o++);}return C$1.currentNode=r,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 R$1 = class R{get _$AU(){return this._$AM?._$AU??this._$Cv}constructor(t,i,s,e){this.type=2,this._$AH=E,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=S$1(this,t,i),c$1(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T$1&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$3(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!==E&&c$1(this._$AH)?this._$AA.nextSibling.data=t:this.T(r.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=N$1.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M$2(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A$1.get(t.strings);return void 0===i&&A$1.set(t.strings,i=new N$1(t)),i}k(t){a$1(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 R(this.O(l$2()),this.O(l$2()),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,i){for(this._$AP?.(false,true,i);t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}};let k$2 = class k{get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}constructor(t,i,s,e,h){this.type=1,this._$AH=E,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=E;}_$AI(t,i=this,s,e){const h=this.strings;let o=false;if(void 0===h)t=S$1(this,t,i,0),o=!c$1(t)||t!==this._$AH&&t!==T$1,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S$1(this,e[s+n],i,n),r===T$1&&(r=this._$AH[n]),o||=!c$1(r)||r!==this._$AH[n],r===E?t=E:t!==E&&(t+=(r??"")+h[n+1]),this._$AH[n]=r;}o&&!e&&this.j(t);}j(t){t===E?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,t??"");}};let H$1 = class H extends k$2{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}};class I extends k$2{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k$2{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S$1(this,t,i,0)??E)===T$1)return;const s=this._$AH,e=t===E&&s!==E||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,h=t!==E&&(s===E||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);}}let z$2 = 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){S$1(this,t);}};const j=t$1.litHtmlPolyfillSupport;j?.(N$1,R$1),(t$1.litHtmlVersions??=[]).push("3.3.1");const B$1=(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 R$1(i.insertBefore(l$2(),t),t,void 0,s??{});}return h._$AI(t),h};
|
|
121
128
|
|
|
122
129
|
/**
|
|
123
130
|
* @license
|
|
@@ -138,12 +145,18 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});let i$1 = cl
|
|
|
138
145
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
139
146
|
*/const e=e$1(class extends i$1{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 T$1}});
|
|
140
147
|
|
|
148
|
+
/**
|
|
149
|
+
* @license
|
|
150
|
+
* Copyright 2018 Google LLC
|
|
151
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
152
|
+
*/const o$1=o=>o??E;
|
|
153
|
+
|
|
141
154
|
/**
|
|
142
155
|
* @license
|
|
143
156
|
* Copyright 2020 Google LLC
|
|
144
157
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
145
158
|
*/
|
|
146
|
-
const a=Symbol.for(""),o
|
|
159
|
+
const a=Symbol.for(""),o=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l$1=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o(i));)c+=s+r[++$],f=true;$!==a&&u.push(i),n.push(c),$++;}if($===a&&n.push(r[a]),f){const t=n.join("$$lit$$");void 0===(r=l$1.get(t))&&(n.raw=n,l$1.set(t,r=n)),e=u;}return t(r,...e)},u$2=n(x$1);
|
|
147
160
|
|
|
148
161
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
149
162
|
// See LICENSE in the project root for license information.
|
|
@@ -187,32 +200,32 @@ class AuroDependencyVersioning {
|
|
|
187
200
|
|
|
188
201
|
// Selectors for focusable elements
|
|
189
202
|
const FOCUSABLE_SELECTORS = [
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
203
|
+
"a[href]",
|
|
204
|
+
"button:not([disabled])",
|
|
205
|
+
"textarea:not([disabled])",
|
|
206
|
+
"input:not([disabled])",
|
|
207
|
+
"select:not([disabled])",
|
|
195
208
|
'[role="tab"]:not([disabled])',
|
|
196
209
|
'[role="link"]:not([disabled])',
|
|
197
210
|
'[role="button"]:not([disabled])',
|
|
198
211
|
'[tabindex]:not([tabindex="-1"])',
|
|
199
|
-
'[contenteditable]:not([contenteditable="false"])'
|
|
212
|
+
'[contenteditable]:not([contenteditable="false"])',
|
|
200
213
|
];
|
|
201
214
|
|
|
202
215
|
// List of custom components that are known to be focusable
|
|
203
216
|
const FOCUSABLE_COMPONENTS = [
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
'auro-menu',
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
217
|
+
"auro-checkbox",
|
|
218
|
+
"auro-radio",
|
|
219
|
+
"auro-dropdown",
|
|
220
|
+
"auro-button",
|
|
221
|
+
"auro-combobox",
|
|
222
|
+
"auro-input",
|
|
223
|
+
"auro-counter",
|
|
224
|
+
// 'auro-menu', // Auro menu is not focusable by default, it uses a different interaction model
|
|
225
|
+
"auro-select",
|
|
226
|
+
"auro-datepicker",
|
|
227
|
+
"auro-hyperlink",
|
|
228
|
+
"auro-accordion",
|
|
216
229
|
];
|
|
217
230
|
|
|
218
231
|
/**
|
|
@@ -226,21 +239,43 @@ function isFocusableComponent(element) {
|
|
|
226
239
|
const componentName = element.tagName.toLowerCase();
|
|
227
240
|
|
|
228
241
|
// Guard Clause: Element is a focusable component
|
|
229
|
-
if (
|
|
242
|
+
if (
|
|
243
|
+
!FOCUSABLE_COMPONENTS.some(
|
|
244
|
+
(name) => element.hasAttribute(name) || componentName === name,
|
|
245
|
+
)
|
|
246
|
+
)
|
|
247
|
+
return false;
|
|
230
248
|
|
|
231
249
|
// Guard Clause: Element is not disabled
|
|
232
|
-
if (element.hasAttribute(
|
|
250
|
+
if (element.hasAttribute("disabled")) return false;
|
|
233
251
|
|
|
234
252
|
// Guard Clause: The element is a hyperlink and has no href attribute
|
|
235
|
-
if (componentName.match("hyperlink") && !element.hasAttribute(
|
|
253
|
+
if (componentName.match("hyperlink") && !element.hasAttribute("href"))
|
|
254
|
+
return false;
|
|
236
255
|
|
|
237
256
|
// If all guard clauses pass, the element is a focusable component
|
|
238
257
|
return true;
|
|
239
258
|
}
|
|
240
259
|
|
|
260
|
+
/**
|
|
261
|
+
* Safely get a numeric tabindex for an element.
|
|
262
|
+
* Returns a number if the tabindex is a valid integer, otherwise null.
|
|
263
|
+
*
|
|
264
|
+
* @param {HTMLElement} element The element whose tabindex to read.
|
|
265
|
+
* @returns {?number} The numeric tabindex or null if missing/invalid.
|
|
266
|
+
*/
|
|
267
|
+
function getNumericTabIndex(element) {
|
|
268
|
+
const raw = element.getAttribute("tabindex");
|
|
269
|
+
if (raw == null) return null;
|
|
270
|
+
|
|
271
|
+
const value = Number.parseInt(raw, 10);
|
|
272
|
+
return Number.isNaN(value) ? null : value;
|
|
273
|
+
}
|
|
274
|
+
|
|
241
275
|
/**
|
|
242
276
|
* Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
|
|
243
277
|
* Returns a unique, ordered array of elements that can receive focus.
|
|
278
|
+
* Also sorts elements with tabindex first, preserving their order.
|
|
244
279
|
*
|
|
245
280
|
* @param {HTMLElement} container The container to search within
|
|
246
281
|
* @returns {Array<HTMLElement>} An array of focusable elements within the container.
|
|
@@ -274,14 +309,14 @@ function getFocusableElements(container) {
|
|
|
274
309
|
if (root.shadowRoot) {
|
|
275
310
|
// Process shadow DOM children in order
|
|
276
311
|
if (root.shadowRoot.children) {
|
|
277
|
-
Array.from(root.shadowRoot.children).forEach(child => {
|
|
312
|
+
Array.from(root.shadowRoot.children).forEach((child) => {
|
|
278
313
|
collectFocusableElements(child);
|
|
279
314
|
});
|
|
280
315
|
}
|
|
281
316
|
}
|
|
282
317
|
|
|
283
318
|
// Process slots and their assigned nodes in order
|
|
284
|
-
if (root.tagName ===
|
|
319
|
+
if (root.tagName === "SLOT") {
|
|
285
320
|
const assignedNodes = root.assignedNodes({ flatten: true });
|
|
286
321
|
for (const node of assignedNodes) {
|
|
287
322
|
collectFocusableElements(node);
|
|
@@ -289,7 +324,7 @@ function getFocusableElements(container) {
|
|
|
289
324
|
} else {
|
|
290
325
|
// Process light DOM children in order
|
|
291
326
|
if (root.children) {
|
|
292
|
-
Array.from(root.children).forEach(child => {
|
|
327
|
+
Array.from(root.children).forEach((child) => {
|
|
293
328
|
collectFocusableElements(child);
|
|
294
329
|
});
|
|
295
330
|
}
|
|
@@ -312,7 +347,37 @@ function getFocusableElements(container) {
|
|
|
312
347
|
}
|
|
313
348
|
}
|
|
314
349
|
|
|
315
|
-
|
|
350
|
+
// Move tab-indexed elements to the front while preserving their order
|
|
351
|
+
// This ensures that elements with tabindex are prioritized in the focus order
|
|
352
|
+
|
|
353
|
+
// First extract elements with valid positive tabindex
|
|
354
|
+
const elementsWithTabindex = uniqueElements.filter((el) => {
|
|
355
|
+
const tabindex = getNumericTabIndex(el);
|
|
356
|
+
return tabindex !== null && tabindex > 0;
|
|
357
|
+
});
|
|
358
|
+
|
|
359
|
+
// Sort these elements by their tabindex value
|
|
360
|
+
elementsWithTabindex.sort((a, b) => {
|
|
361
|
+
const aIndex = getNumericTabIndex(a) ?? 0;
|
|
362
|
+
const bIndex = getNumericTabIndex(b) ?? 0;
|
|
363
|
+
return aIndex - bIndex;
|
|
364
|
+
});
|
|
365
|
+
|
|
366
|
+
// Elements without tabindex (preserving their original order)
|
|
367
|
+
const elementsWithoutTabindex = uniqueElements.filter((el) => {
|
|
368
|
+
const tabindex = getNumericTabIndex(el);
|
|
369
|
+
|
|
370
|
+
// Elements without tabindex or with tabindex of 0 stay in DOM order
|
|
371
|
+
return tabindex === null || tabindex === 0;
|
|
372
|
+
});
|
|
373
|
+
|
|
374
|
+
// Combine both arrays with tabindex elements first
|
|
375
|
+
const tabIndexedUniqueElements = [
|
|
376
|
+
...elementsWithTabindex,
|
|
377
|
+
...elementsWithoutTabindex,
|
|
378
|
+
];
|
|
379
|
+
|
|
380
|
+
return tabIndexedUniqueElements;
|
|
316
381
|
}
|
|
317
382
|
|
|
318
383
|
/**
|
|
@@ -325,15 +390,17 @@ class FocusTrap {
|
|
|
325
390
|
* Initializes event listeners and prepares the container for focus management.
|
|
326
391
|
*
|
|
327
392
|
* @param {HTMLElement} container The DOM element to trap focus within.
|
|
393
|
+
* @param {boolean} [controlTabOrder=false] If true enables manual control of the tab order by the FocusTrap.
|
|
328
394
|
* @throws {Error} If the provided container is not a valid HTMLElement.
|
|
329
395
|
*/
|
|
330
|
-
constructor(container) {
|
|
396
|
+
constructor(container, controlTabOrder = false) {
|
|
331
397
|
if (!container || !(container instanceof HTMLElement)) {
|
|
332
398
|
throw new Error("FocusTrap requires a valid HTMLElement.");
|
|
333
399
|
}
|
|
334
400
|
|
|
335
401
|
this.container = container;
|
|
336
|
-
this.tabDirection =
|
|
402
|
+
this.tabDirection = "forward"; // or 'backward';
|
|
403
|
+
this.controlTabOrder = controlTabOrder;
|
|
337
404
|
|
|
338
405
|
this._init();
|
|
339
406
|
}
|
|
@@ -345,58 +412,119 @@ class FocusTrap {
|
|
|
345
412
|
* @private
|
|
346
413
|
*/
|
|
347
414
|
_init() {
|
|
348
|
-
|
|
349
415
|
// Add inert attribute to prevent focusing programmatically as well (if supported)
|
|
350
|
-
if (
|
|
416
|
+
if ("inert" in HTMLElement.prototype) {
|
|
351
417
|
this.container.inert = false; // Ensure the container isn't inert
|
|
352
|
-
this.container.setAttribute(
|
|
418
|
+
this.container.setAttribute("data-focus-trap-container", true); // Mark for identification
|
|
353
419
|
}
|
|
354
420
|
|
|
355
421
|
// Track tab direction
|
|
356
|
-
this.container.addEventListener(
|
|
422
|
+
this.container.addEventListener("keydown", this._onKeydown);
|
|
357
423
|
}
|
|
358
424
|
|
|
359
425
|
/**
|
|
360
|
-
*
|
|
361
|
-
*
|
|
362
|
-
*
|
|
363
|
-
* @param {KeyboardEvent} e The keyboard event triggered by user interaction.
|
|
426
|
+
* Gets an array of currently active (focused) elements in the document and shadow DOM.
|
|
427
|
+
* @returns {Array<HTMLElement>} An array of focusable elements within the container.
|
|
364
428
|
* @private
|
|
365
429
|
*/
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
430
|
+
_getActiveElements() {
|
|
431
|
+
// Get the active element(s) in the document and shadow root
|
|
432
|
+
// This will include the active element in the shadow DOM if it exists
|
|
433
|
+
// Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
|
|
434
|
+
let { activeElement } = document;
|
|
435
|
+
const actives = [activeElement];
|
|
436
|
+
while (activeElement?.shadowRoot?.activeElement) {
|
|
437
|
+
actives.push(activeElement.shadowRoot.activeElement);
|
|
438
|
+
activeElement = activeElement.shadowRoot.activeElement;
|
|
439
|
+
}
|
|
440
|
+
return actives;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
/**
|
|
444
|
+
* Gets the next focus index based on the current index and focusable elements.
|
|
445
|
+
* @param {number} currentIndex The current index of the focused element.
|
|
446
|
+
* @param {Array<HTMLElement>} focusables The array of focusable elements.
|
|
447
|
+
* @returns {number|null} The next focus index or null if not determined.
|
|
448
|
+
*/
|
|
449
|
+
_getNextFocusIndex(currentIndex, focusables, actives) {
|
|
450
|
+
if (this.controlTabOrder) {
|
|
451
|
+
// Calculate the new index based on the current index and tab direction
|
|
452
|
+
let newFocusIndex =
|
|
453
|
+
currentIndex + (this.tabDirection === "forward" ? 1 : -1);
|
|
454
|
+
|
|
455
|
+
// Wrap-around logic
|
|
456
|
+
if (newFocusIndex < 0) newFocusIndex = focusables.length - 1;
|
|
457
|
+
if (newFocusIndex >= focusables.length) newFocusIndex = 0;
|
|
458
|
+
|
|
459
|
+
// Early return with the new index
|
|
460
|
+
return newFocusIndex;
|
|
461
|
+
}
|
|
369
462
|
|
|
370
|
-
|
|
371
|
-
|
|
463
|
+
// Determine if we need to wrap
|
|
464
|
+
const atFirst =
|
|
465
|
+
actives.includes(focusables[0]) || actives.includes(this.container);
|
|
466
|
+
const atLast = actives.includes(focusables[focusables.length - 1]);
|
|
372
467
|
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
const actives = [activeElement];
|
|
378
|
-
while (activeElement?.shadowRoot?.activeElement) {
|
|
379
|
-
actives.push(activeElement.shadowRoot.activeElement);
|
|
380
|
-
activeElement = activeElement.shadowRoot.activeElement;
|
|
381
|
-
}
|
|
468
|
+
// Only wrap if at the ends
|
|
469
|
+
if (this.tabDirection === "backward" && atFirst) {
|
|
470
|
+
return focusables.length - 1;
|
|
471
|
+
}
|
|
382
472
|
|
|
383
|
-
|
|
384
|
-
|
|
473
|
+
if (this.tabDirection === "forward" && atLast) {
|
|
474
|
+
return 0;
|
|
475
|
+
}
|
|
385
476
|
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
? focusables.length - 1
|
|
390
|
-
: actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
|
|
391
|
-
? 0
|
|
392
|
-
: null;
|
|
477
|
+
// No wrap, so don't change focus, return early
|
|
478
|
+
return null;
|
|
479
|
+
}
|
|
393
480
|
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
481
|
+
/**
|
|
482
|
+
* Handles the Tab key press event to manage focus within the container.
|
|
483
|
+
* @param {KeyboardEvent} e The keyboard event triggered by the user.
|
|
484
|
+
* @returns {void}
|
|
485
|
+
*/
|
|
486
|
+
_handleTabKey(e) {
|
|
487
|
+
// Update the focusable elements
|
|
488
|
+
const focusables = this._getFocusableElements();
|
|
489
|
+
|
|
490
|
+
// If there are no focusable elements, exit
|
|
491
|
+
if (!focusables.length) return;
|
|
492
|
+
|
|
493
|
+
// Set the tab direction based on the key pressed
|
|
494
|
+
this.tabDirection = e.shiftKey ? "backward" : "forward";
|
|
495
|
+
|
|
496
|
+
// Get the active elements that are currently focused
|
|
497
|
+
const actives = this._getActiveElements();
|
|
498
|
+
|
|
499
|
+
// If we're at either end of the focusable elements, wrap around to the other end
|
|
500
|
+
let focusIndex = focusables.findIndex((el) => actives.includes(el));
|
|
501
|
+
|
|
502
|
+
// Fallback if we have no focused element
|
|
503
|
+
if (focusIndex === -1) focusIndex = 0;
|
|
504
|
+
|
|
505
|
+
// Get the next focus index based on the current focus index, tab direction, and controlTabOrder setting
|
|
506
|
+
// Is null if no new focus index is determined
|
|
507
|
+
const newFocusIndex = this._getNextFocusIndex(
|
|
508
|
+
focusIndex,
|
|
509
|
+
focusables,
|
|
510
|
+
actives,
|
|
511
|
+
);
|
|
512
|
+
|
|
513
|
+
// If we have a new focus index, set focus to that element
|
|
514
|
+
if (newFocusIndex !== null) {
|
|
515
|
+
e.preventDefault();
|
|
516
|
+
focusables[newFocusIndex].focus();
|
|
399
517
|
}
|
|
518
|
+
}
|
|
519
|
+
|
|
520
|
+
/**
|
|
521
|
+
* Catches the keydown event
|
|
522
|
+
* @param {KeyboardEvent} e The keyboard event triggered by user interaction.
|
|
523
|
+
* @private
|
|
524
|
+
*/
|
|
525
|
+
_onKeydown = (e) => {
|
|
526
|
+
// Handle tab
|
|
527
|
+
if (e.key === "Tab") this._handleTabKey(e);
|
|
400
528
|
};
|
|
401
529
|
|
|
402
530
|
/**
|
|
@@ -409,8 +537,8 @@ class FocusTrap {
|
|
|
409
537
|
_getFocusableElements() {
|
|
410
538
|
// Use the imported utility function to get focusable elements
|
|
411
539
|
const elements = getFocusableElements(this.container);
|
|
412
|
-
|
|
413
|
-
//
|
|
540
|
+
|
|
541
|
+
// Return the elements found
|
|
414
542
|
return elements;
|
|
415
543
|
}
|
|
416
544
|
|
|
@@ -437,173 +565,2818 @@ class FocusTrap {
|
|
|
437
565
|
* Call this method to clean up when the focus trap is no longer needed.
|
|
438
566
|
*/
|
|
439
567
|
disconnect() {
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
this.container.removeAttribute('data-focus-trap-container');
|
|
568
|
+
if (this.container.hasAttribute("data-focus-trap-container")) {
|
|
569
|
+
this.container.removeAttribute("data-focus-trap-container");
|
|
443
570
|
}
|
|
444
571
|
|
|
445
|
-
this.container.removeEventListener(
|
|
572
|
+
this.container.removeEventListener("keydown", this._onKeydown);
|
|
446
573
|
}
|
|
447
574
|
}
|
|
448
575
|
|
|
449
576
|
/**
|
|
450
|
-
*
|
|
451
|
-
*
|
|
452
|
-
|
|
453
|
-
*/const o=o=>o??E;
|
|
454
|
-
|
|
455
|
-
class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s$1,a){const r=this.generateElementName(o,s$1),i$1=i`${s(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i$1}}class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`);return (o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim()||null}}class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}}var c=i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
456
|
-
`,u$1=i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:1.5rem}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(2.55rem + var(--margin-xs) * 6);height:1.55rem}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:2.5rem}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:3.5rem}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:5.5rem}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
457
|
-
`,p$1=i$5`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}
|
|
458
|
-
`;class b extends i$2{constructor(){super(),this.keys=[0,1,2,3,4,5,6,7,8,9],this.mdCount=3,this.smCount=2,this.runtimeUtils=new h,this.orbit=false,this.ringworm=false,this.laser=false,this.pulse=false;}static get properties(){return {laser:{type:Boolean,reflect:true},orbit:{type:Boolean,reflect:true},pulse:{type:Boolean,reflect:true},ringworm:{type:Boolean,reflect:true}}}static get styles(){return [u$1,c,p$1]}static register(t="auro-loader"){h.prototype.registerComponent(t,b);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-loader");}connectedCallback(){super.connectedCallback();}defineTemplate(){let t=Array.from(Array(this.mdCount).keys());return this.orbit||this.laser?t=Array.from(Array(this.smCount).keys()):this.ringworm&&(t=Array.from(Array(0).keys())),t}render(){return x$2`
|
|
459
|
-
${this.defineTemplate().map(t=>x$2`
|
|
460
|
-
<span part="element" class="loader node-${t}"></span>
|
|
461
|
-
`)}
|
|
462
|
-
|
|
463
|
-
<div class="no-animation body-default">Loading...</div>
|
|
464
|
-
|
|
465
|
-
${this.ringworm?x$2`
|
|
466
|
-
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
467
|
-
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
468
|
-
</svg>`:""}
|
|
469
|
-
`}}const v=new WeakMap,m$1=new WeakMap,x$1=({host:t,target:e,matcher:o,removeOriginal:s=true})=>{m$1.has(t)||m$1.set(t,{matchers:new Set,targets:new Map});const a=m$1.get(t);return a.matchers.add(o),a.targets.has(e)||a.targets.set(e,new Map),a.targets.get(e).set(o,{removeOriginal:s,currentAttributes:new Map}),f$1({host:t,target:e,matcher:o,removeOriginal:s}),y$1(t),{cleanup:()=>g$1(t,e,o),getObservedAttributes:()=>A(t,e,o),getObservedAttribute:s=>S(t,e,o,s)}},g$1=(t,e,o)=>{const s=m$1.get(t);if(!s)return;const a=s.targets.get(e);a&&(a.delete(o),0===a.size&&s.targets.delete(e));let r=false;for(const t of s.targets.values())if(t.has(o)){r=true;break}r||s.matchers.delete(o),0!==s.targets.size&&0!==s.matchers.size||w$1(t);},f$1=({host:t,target:e,matcher:o,removeOriginal:s=true})=>{const a=t.getAttributeNames().filter(t=>o(t)).reduce((e,o)=>(e[o]=t.getAttribute(o),e),{});Object.entries(a).forEach(([a,r])=>{k$1(t,e,o,a,r),e.setAttribute(a,r),s&&t.removeAttribute(a);});},y$1=t=>{if(v.has(t))return v.get(t);const e=new MutationObserver(e=>{const o=m$1.get(t);o&&e.filter(t=>"attributes"===t.type).forEach(e=>{const s=e.attributeName;for(const e of o.matchers)if(e(s))for(const[s,a]of o.targets.entries())if(a.has(e)){const{removeOriginal:o}=a.get(e);f$1({host:t,target:s,matcher:e,removeOriginal:o});}});});return e.observe(t,{attributes:true}),v.set(t,e),e},w$1=t=>{if(v.has(t)){v.get(t).disconnect(),v.delete(t);}m$1.has(t)&&m$1.delete(t);},z$1=(t,e,o)=>{const s=m$1.get(t);if(!s)return;const a=s.targets.get(e);return a?a.get(o):void 0},k$1=(t,e,o,s,a)=>{const r=z$1(t,e,o);r&&r.currentAttributes.set(s,a);},S=(t,e,o,s)=>{const a=z$1(t,e,o);if(a)return a.currentAttributes.get(s)},A=(t,e,o)=>{const s=z$1(t,e,o);return s?Array.from(s.currentAttributes.entries()):[]},q={"aria-":t=>t.startsWith("aria-"),role:t=>t.match(/^role$/)},B=({host:t,target:e,removeOriginal:o=true})=>(({host:t,target:e,match:o,removeOriginal:s=true})=>{if("object"!=typeof t||!(t instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');if("object"!=typeof e||!(e instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');if("function"!=typeof o)throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');if("boolean"!=typeof s)throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');return x$1({host:t,target:e,matcher:o,removeOriginal:s})})({host:t,target:e,match:t=>{for(const e in q)if(q[e](t))return true;return false},removeOriginal:o});class C extends i$2{attributeWatcher;static get properties(){return {layout:{type:String,attribute:"layout",reflect:true},shape:{type:String,attribute:"shape",reflect:true},size:{type:String,attribute:"size",reflect:true},appearance:{type:String,reflect:true},onDark:{type:Boolean,attribute:"ondark",reflect:true},wrapper:{attribute:false,reflect:false}}}constructor(){super(),this.onDark=false,this.appearance="default";}resetShapeClasses(){this.shape&&this.size&&this.wrapper&&(this.wrapper.classList.forEach(t=>{t.startsWith("shape-")&&this.wrapper.classList.remove(t);}),this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`));}resetLayoutClasses(){this.layout&&this.wrapper&&(this.wrapper.classList.forEach(t=>{t.startsWith("layout-")&&this.wrapper.classList.remove(t);}),this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`));}updateComponentArchitecture(){this.resetLayoutClasses(),this.resetShapeClasses();}updated(t){(t.has("layout")||t.has("shape")||t.has("size"))&&this.updateComponentArchitecture();}firstUpdated(){super.firstUpdated(),this.wrapper=this.shadowRoot.querySelector(".wrapper"),this.attributeWatcher=B({host:this,target:this.shadowRoot.querySelector(".wrapper")});}disconnectedCallback(){super.disconnectedCallback(),this.attributeWatcher&&(this.attributeWatcher.cleanup(),this.attributeWatcher=null);}render(){try{return this.renderLayout()}catch(t){return console.error("Failed to get the defined layout - using the default layout",t),this.getLayout("default")}}}var U=i$5`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image),var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}:host(:focus-within) .auro-button{outline-color:var(--ds-auro-button-border-inset-color)}:host(:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-hover, #00274a)}:host([disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}:host([variant=secondary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text, #01426a)}:host([variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-hover, #00274a)}:host([variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=secondary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text, #01426a)}:host([variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-border-color: transparent}:host([variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=tertiary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text, #01426a)}:host([variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent}:host([variant=ghost]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=ghost][disabled]){--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:active:not(:disabled),:host([variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}:host([ondark]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}:host([ondark]:focus-within),:host([appearance=inverse]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=secondary]),:host([appearance=inverse][variant=secondary]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}:host([ondark][variant=secondary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=secondary]:focus-within),:host([appearance=inverse][variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=secondary][disabled]),:host([appearance=inverse][variant=secondary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}:host([ondark][variant=tertiary]),:host([appearance=inverse][variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}:host([ondark][variant=tertiary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=tertiary]:focus-within),:host([appearance=inverse][variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=tertiary][disabled]),:host([appearance=inverse][variant=tertiary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=ghost]),:host([appearance=inverse][variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}:host([ondark][variant=ghost]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent}:host([ondark][variant=ghost]:focus-within),:host([appearance=inverse][variant=ghost]:focus-within){border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=ghost][disabled]),:host([appearance=inverse][variant=ghost][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=flat]) .auro-button,:host([appearance=inverse][variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:active:not(:disabled),:host([ondark][variant=flat]) .auro-button:hover:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:active:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:disabled,:host([appearance=inverse][variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]:focus-within),:host([appearance=inverse][variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}
|
|
470
|
-
`,H=i$5`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-rounded-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-circle-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:50%;min-width:72px;max-width:72px;padding:0}.shape-circle-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-circle-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-circle-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-square-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px;min-width:72px;max-width:72px;padding:0}.shape-square-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-square-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-square-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px}.shape-pill-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px 0 0 28px}.shape-pill-left-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-left-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-left-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:0 28px 28px 0}.shape-pill-right-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-right-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-right-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-circle-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:50%;min-width:56px;max-width:56px;padding:0}.shape-circle-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-circle-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-circle-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-square-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px;min-width:56px;max-width:56px;padding:0}.shape-square-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-square-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-square-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-rounded-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-rounded-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px 0 0 24px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:0 24px 24px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-circle-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:50%;min-width:48px;max-width:48px;padding:0}.shape-circle-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-circle-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-circle-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-square-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px;min-width:48px;max-width:48px;padding:0}.shape-square-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-square-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-square-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-rounded-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-rounded-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px}.shape-pill-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px 0 0 18px}.shape-pill-left-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-left-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-left-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:0 18px 18px 0}.shape-pill-right-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-right-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-right-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-circle-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:50%;min-width:36px;max-width:36px;padding:0}.shape-circle-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-circle-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-circle-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-square-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px;min-width:36px;max-width:36px;padding:0}.shape-square-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-square-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-square-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:4px}.shape-rounded-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-rounded-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-rounded-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px}.shape-pill-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px 0 0 12px}.shape-pill-left-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-left-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-left-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:0 12px 12px 0}.shape-pill-right-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-right-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-right-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-circle-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:50%;min-width:24px;max-width:24px;padding:0}.shape-circle-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-circle-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-circle-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-square-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:6px;min-width:24px;max-width:24px;padding:0}.shape-square-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-square-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-square-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}
|
|
471
|
-
`,M=i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}.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}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([size=xs][shape=rounded]) ::slotted(auro-icon),:host([size=xs][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill]) ::slotted(auro-icon),:host([size=xs][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left]) ::slotted(auro-icon),:host([size=xs][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right]) ::slotted(auro-icon),:host([size=xs][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle]) ::slotted(auro-icon),:host([size=xs][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=flat]) .auro-button:focus,:host([size=xs][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square]) ::slotted(auro-icon),:host([size=xs][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=square][variant=secondary]) .auro-button:focus,:host([size=xs][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=flat]) .auro-button:focus,:host([size=xs][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=ghost]) .auro-button:focus,:host([size=xs][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded]) ::slotted(auro-icon),:host([size=sm][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill]) ::slotted(auro-icon),:host([size=sm][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left]) ::slotted(auro-icon),:host([size=sm][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right]) ::slotted(auro-icon),:host([size=sm][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle]) ::slotted(auro-icon),:host([size=sm][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus,:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=flat]) .auro-button:focus,:host([size=sm][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus,:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square]) ::slotted(auro-icon),:host([size=sm][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=square][variant=secondary]) .auro-button:focus,:host([size=sm][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=flat]) .auro-button:focus,:host([size=sm][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=ghost]) .auro-button:focus,:host([size=sm][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded]) ::slotted(auro-icon),:host([size=md][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill]) ::slotted(auro-icon),:host([size=md][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left]) ::slotted(auro-icon),:host([size=md][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right]) ::slotted(auro-icon),:host([size=md][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle]) ::slotted(auro-icon),:host([size=md][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=circle][variant=secondary]) .auro-button:focus,:host([size=md][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=flat]) .auro-button:focus,:host([size=md][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=ghost]) .auro-button:focus,:host([size=md][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square]) ::slotted(auro-icon),:host([size=md][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=square][variant=primary]) .auro-button:focus,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=primary]) .auro-button:focus:after,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=square][variant=secondary]) .auro-button:focus,:host([size=md][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=tertiary]) .auro-button:focus,:host([size=md][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=flat]) .auro-button:focus,:host([size=md][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=ghost]) .auro-button:focus,:host([size=md][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded]) ::slotted(auro-icon),:host([size=lg][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill]) ::slotted(auro-icon),:host([size=lg][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left]) ::slotted(auro-icon),:host([size=lg][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right]) ::slotted(auro-icon),:host([size=lg][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle]) ::slotted(auro-icon),:host([size=lg][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, .25rem))}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus,:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=flat]) .auro-button:focus,:host([size=lg][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus,:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square]) ::slotted(auro-icon),:host([size=lg][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, .25rem))}:host([size=lg][shape=square][variant=primary]) .auro-button:focus,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=square][variant=secondary]) .auro-button:focus,:host([size=lg][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=flat]) .auro-button:focus,:host([size=lg][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=ghost]) .auro-button:focus,:host([size=lg][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded]) ::slotted(auro-icon),:host([size=xl][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill]) ::slotted(auro-icon),:host([size=xl][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left]) ::slotted(auro-icon),:host([size=xl][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right]) ::slotted(auro-icon),:host([size=xl][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle]) ::slotted(auro-icon),:host([size=xl][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, .25rem))}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=flat]) .auro-button:focus,:host([size=xl][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square]) ::slotted(auro-icon),:host([size=xl][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, .25rem))}:host([size=xl][shape=square][variant=primary]) .auro-button:focus,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=square][variant=secondary]) .auro-button:focus,:host([size=xl][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=flat]) .auro-button:focus,:host([size=xl][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=ghost]) .auro-button:focus,:host([size=xl][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-150, .75rem)}:host([size=sm]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-200, 1rem)}:host([size=md]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-300, 1.5rem)}:host([size=lg]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-400, 2rem)}:host([size=xl]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-500, 2.5rem)}:host([shape=circle]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([shape=square]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}.textSlot{display:inline-flex;align-items:center;gap:var(--ds-size-100, .5rem)}.contentWrapper{font-size:0}slot{pointer-events:none}:host{display:inline-block;overflow:hidden}.auro-button{position:relative;cursor:pointer;padding:0 var(--ds-size-300, 1.5rem);padding-inline:unset;padding-block:unset;box-sizing:content-box;overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;outline:none;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, .5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding .3s ease-out}.auro-button:focus,.auro-button:focus-visible{outline:none}.auro-button:active{transform:scale(.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}:host([fluid]){display:block}:host([fluid]) .auro-button:not(.thin):not(.simple){width:calc(100% - 4px)}:host([fluid]) .auro-button.thin{width:calc(100% - 2px)}:host([fluid]) .auro-button.simple{width:100%}:host([static]) .auro-button{pointer-events:none;cursor:default;display:inline-flex}:host([static]) .auro-button .contentWrapper{display:inline-flex}
|
|
472
|
-
`,R=i$5`:host{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text, #ffffff)}
|
|
473
|
-
`;const N=["circle","square"];class T extends C{static get formAssociated(){return true}constructor(){super(),this.autofocus=false,this.disabled=false,this.loading=false,this.static=false,this.size="md",this.shape="rounded",this.fluid=false,this.loadingText=this.loadingText||"Loading...",this.variant="primary",this.runtimeUtils=new d,"function"==typeof this.attachInternals?this.internals=this.attachInternals():(this.internals=null,console.warn("This browser does not support form association features. Some form-related functionality may not work as expected. Consider using a polyfill or handling click events manually."));const t=new l;this.loaderTag=t.generateTag("auro-loader","6.0.0",b),this.buttonHref=void 0,this.buttonTarget=void 0,this.buttonRel=void 0;}static get styles(){return [R,M,U,H]}static get properties(){return {...C.properties,layout:{type:Boolean,attribute:false,reflect:false},autofocus:{type:Boolean,reflect:true},disabled:{type:Boolean,reflect:true},fluid:{type:Boolean,reflect:true},loading:{type:Boolean,reflect:true},loadingText:{type:String},tIndex:{type:String,reflect:true},tabindex:{type:String,reflect:false},title:{type:String,reflect:true},type:{type:String,reflect:true},value:{type:String,reflect:true},variant:{type:String,reflect:true},buttonHref:{type:String},buttonTarget:{type:String},buttonRel:{type:String},static:{type:Boolean,reflect:true},onHover:{attribute:"data-hover",type:Boolean,reflect:true},onActive:{attribute:"data-active",type:Boolean,reflect:true}}}static register(t="auro-button"){d.prototype.registerComponent(t,T);}focus(){this.renderRoot.querySelector("button").focus();}surfaceSubmitEvent(){this.form&&this.form.requestSubmit();}get form(){return this.internals?this.internals.form:null}get showText(){return !N.includes(this.shape)}get currentAriaLabel(){if(!this.attributeWatcher)return;return this.attributeWatcher.getObservedAttribute("aria-label")||void 0}get currentAriaLabelledBy(){if(!this.attributeWatcher)return;return this.attributeWatcher.getObservedAttribute("aria-labelledby")||void 0}get iconOnly(){return N.includes(this.shape)}getFontSize(){return (this.iconOnly?{xs:"heading-xs",sm:"heading-sm",md:"heading-sm",lg:"heading-md",xl:"heading-lg"}:{xs:"body-xs",sm:"body-sm",md:"body-default",lg:"body-lg",xl:"body-lg"})[this.size]||"body-default"}get _renderTag(){return this.static?i`span`:this.buttonHref?i`a`:i`button`}firstUpdated(){super.firstUpdated(),this.runtimeUtils.handleComponentTagRename(this,"auro-button");}generateAriaLabel(){return this.loading?this.runtimeUtils.getSlotText(this,"ariaLabel.loading")||this.loadingText:this.runtimeUtils.getSlotText(this,"ariaLabel")||this.currentAriaLabel}onPointerEvent(t){switch(t.type){case "pointerenter":this.onHover=true;break;case "pointerleave":this.onHover=false;break;case "pointerdown":this.onActive=true;break;case "pointerup":case "blur":this.onActive=false;}}renderLayoutDefault(){const t=this.getFontSize(),e$1=this.buttonHref?"link":"button",s={"auro-button":true,inset:this.showText,wrapper:true,loading:this.loading,simple:!["secondary"].includes(this.variant),thin:["secondary"].includes(this.variant)},a={contentWrapper:true,util_displayHiddenVisually:this.loading},r={textSlot:true,[t]:this.showText},l=this.tIndex||this.tabindex;return u$2`
|
|
474
|
-
<!-- Hidden slots for aria labels -->
|
|
475
|
-
<slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
476
|
-
<slot name="ariaLabel.loading" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
477
|
-
|
|
478
|
-
<${this._renderTag}
|
|
479
|
-
part="${e$1}"
|
|
480
|
-
aria-label="${o(this.generateAriaLabel())}"
|
|
481
|
-
aria-labelledby="${o(this.loading?void 0:this.currentAriaLabelledBy||void 0)}"
|
|
482
|
-
tabindex="${o(this.static?-1:l)}"
|
|
483
|
-
?autofocus="${this.autofocus}"
|
|
484
|
-
class=${e(s)}
|
|
485
|
-
?disabled="${this.disabled||this.loading}"
|
|
486
|
-
?onDark="${this.onDark}"
|
|
487
|
-
title="${o(this.title?this.title:void 0)}"
|
|
488
|
-
name="${o(this.name?this.name:void 0)}"
|
|
489
|
-
type="${o(this.type?this.type:void 0)}"
|
|
490
|
-
variant="${o(this.variant?this.variant:void 0)}"
|
|
491
|
-
.value="${o(this.value?this.value:void 0)}"
|
|
492
|
-
@click="${this.static||"submit"!==this.type?void 0:this.surfaceSubmitEvent}"
|
|
493
|
-
@pointerenter="${this.onPointerEvent}"
|
|
494
|
-
@pointerleave="${this.onPointerEvent}"
|
|
495
|
-
@pointerdown="${this.onPointerEvent}"
|
|
496
|
-
@pointerup="${this.onPointerEvent}"
|
|
497
|
-
@blur="${this.onPointerEvent}"
|
|
498
|
-
href="${o(this.buttonHref||void 0)}"
|
|
499
|
-
target="${o(this.buttonTarget||void 0)}"
|
|
500
|
-
rel="${o(this.buttonRel||void 0)}"
|
|
501
|
-
>
|
|
502
|
-
${o(this.loading?u$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>`:void 0)}
|
|
503
|
-
|
|
504
|
-
<span class="${e(a)}" part="contentWrapper">
|
|
505
|
-
<span class="${e(r)}" part="text">
|
|
506
|
-
<slot></slot>
|
|
507
|
-
</span>
|
|
508
|
-
</span>
|
|
509
|
-
</${this._renderTag}>
|
|
510
|
-
`}renderLayout(){return this.renderLayoutDefault()}}
|
|
511
|
-
|
|
512
|
-
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)}}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$2{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$5`: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}
|
|
513
|
-
`;class z extends m{constructor(){super(),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$5`.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}
|
|
514
|
-
`;var y=i$5`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
515
|
-
`;var k=i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
516
|
-
`;class x extends z{constructor(){super(),this.variant=void 0,this.privateDefaults();}privateDefaults(){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,k]}static register(t="auro-icon"){p.prototype.registerComponent(t,x);}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 x$2`
|
|
517
|
-
<div class="componentWrapper">
|
|
518
|
-
<div
|
|
519
|
-
class="${e({svgWrapper:true})}"
|
|
520
|
-
title="${o(this.title||void 0)}">
|
|
521
|
-
<span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
|
|
522
|
-
${this.customSvg?x$2`
|
|
523
|
-
<slot name="svg"></slot>
|
|
524
|
-
`:x$2`
|
|
525
|
-
${this.svg}
|
|
526
|
-
`}
|
|
527
|
-
</span>
|
|
528
|
-
</div>
|
|
529
|
-
|
|
530
|
-
<div class="${e(t)}" part="label">
|
|
531
|
-
<slot></slot>
|
|
532
|
-
</div>
|
|
533
|
-
</div>
|
|
534
|
-
`}}
|
|
535
|
-
|
|
536
|
-
var buttonVersion = '12.3.0';
|
|
537
|
-
|
|
538
|
-
var iconVersion = '9.1.1';
|
|
539
|
-
|
|
540
|
-
var colorCss = i$5`.dialogOverlay--open{background:var(--ds-auro-dialog-overlay-open-background-color)}.dialogOverlay--modal{background:var(--ds-auro-dialog-overlay-modal-background-color)}.dialog{background:var(--ds-auro-dialog-container-color);color:var(--ds-auro-dialog-text-color)}@media screen and (min-width:768px){.dialog{box-shadow:var(--ds-auro-dialog-boxshadow-color)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, .375rem);background-color:transparent}
|
|
541
|
-
`;
|
|
542
|
-
|
|
543
|
-
var styleCss = i$5`.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{--insetPaddingXl: 0 var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem);--insetPaddingXxl: 0 var(--ds-size-600, 3rem) var(--ds-size-600, 3rem) var(--ds-size-600, 3rem);--insetPaddingXxxl: 0 var(--ds-size-800, 4rem) var(--ds-size-800, 4rem) var(--ds-size-800, 4rem)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.dialogOverlay--open{z-index:var(--ds-depth-overlay);pointer-events:unset;transition:background .3s cubic-bezier(.4,0,.2,0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(.4,0,.5,0)}.dialog{position:fixed;z-index:-1;right:0;bottom:-100%;left:0;box-sizing:border-box;display:flex;flex-direction:column;visibility:hidden;overflow:visible;width:calc(100% - var(--insetPaddingXl) - var(--insetPaddingXl));max-height:90%;padding:var(--insetPaddingXl);opacity:0;border:0;transition:all .3s ease-in-out}.dialog--open{z-index:var(--ds-depth-modal, 300);visibility:visible;bottom:0;opacity:1}@media screen and (min-width:768px){.dialog{top:10%;bottom:unset;left:0;right:0;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);opacity:0;width:0;height:0;overflow:hidden}.dialog--open{opacity:1;width:calc(100% - var(--insetPaddingXxxl) - var(--insetPaddingXxxl));height:auto;overflow:visible}}@media screen and (min-width:1024px){.dialog{max-width:986px}}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem);margin-bottom:var(--ds-size-300, 1.5rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-header .heading{flex:1;margin-block:0}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain;margin:calc(-1 * var(--ds-size-100));padding:var(--ds-size-100)}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);bottom:unset;right:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);bottom:unset;right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width:768px){:host([sm]) .dialog{top:10%;bottom:unset;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width:1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width:768px){:host([md]) .dialog{top:10%;bottom:unset;max-width:70%;max-height:80%}}@media screen and (min-width:1024px){:host([md]) .dialog{top:10%;bottom:unset;max-width:986px}}@media screen and (min-width:768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}
|
|
544
|
-
`;
|
|
545
|
-
|
|
546
|
-
var styleUnformattedCss = i$5`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}
|
|
547
|
-
`;
|
|
548
|
-
|
|
549
|
-
var tokensCss = i$5`:host{--ds-auro-dialog-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, .2));--ds-auro-dialog-overlay-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-overlay-open-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
|
|
550
|
-
`;
|
|
551
|
-
|
|
552
|
-
// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
553
|
-
// See LICENSE in the project root for license information.
|
|
577
|
+
* Custom positioning reference element.
|
|
578
|
+
* @see https://floating-ui.com/docs/virtual-elements
|
|
579
|
+
*/
|
|
554
580
|
|
|
581
|
+
const sides = ['top', 'right', 'bottom', 'left'];
|
|
582
|
+
const alignments = ['start', 'end'];
|
|
583
|
+
const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
|
|
584
|
+
const min = Math.min;
|
|
585
|
+
const max = Math.max;
|
|
586
|
+
const round = Math.round;
|
|
587
|
+
const floor = Math.floor;
|
|
588
|
+
const createCoords = v => ({
|
|
589
|
+
x: v,
|
|
590
|
+
y: v
|
|
591
|
+
});
|
|
592
|
+
const oppositeSideMap = {
|
|
593
|
+
left: 'right',
|
|
594
|
+
right: 'left',
|
|
595
|
+
bottom: 'top',
|
|
596
|
+
top: 'bottom'
|
|
597
|
+
};
|
|
598
|
+
const oppositeAlignmentMap = {
|
|
599
|
+
start: 'end',
|
|
600
|
+
end: 'start'
|
|
601
|
+
};
|
|
602
|
+
function clamp(start, value, end) {
|
|
603
|
+
return max(start, min(value, end));
|
|
604
|
+
}
|
|
605
|
+
function evaluate(value, param) {
|
|
606
|
+
return typeof value === 'function' ? value(param) : value;
|
|
607
|
+
}
|
|
608
|
+
function getSide(placement) {
|
|
609
|
+
return placement.split('-')[0];
|
|
610
|
+
}
|
|
611
|
+
function getAlignment(placement) {
|
|
612
|
+
return placement.split('-')[1];
|
|
613
|
+
}
|
|
614
|
+
function getOppositeAxis(axis) {
|
|
615
|
+
return axis === 'x' ? 'y' : 'x';
|
|
616
|
+
}
|
|
617
|
+
function getAxisLength(axis) {
|
|
618
|
+
return axis === 'y' ? 'height' : 'width';
|
|
619
|
+
}
|
|
620
|
+
const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
|
|
621
|
+
function getSideAxis(placement) {
|
|
622
|
+
return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
|
|
623
|
+
}
|
|
624
|
+
function getAlignmentAxis(placement) {
|
|
625
|
+
return getOppositeAxis(getSideAxis(placement));
|
|
626
|
+
}
|
|
627
|
+
function getAlignmentSides(placement, rects, rtl) {
|
|
628
|
+
if (rtl === void 0) {
|
|
629
|
+
rtl = false;
|
|
630
|
+
}
|
|
631
|
+
const alignment = getAlignment(placement);
|
|
632
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
633
|
+
const length = getAxisLength(alignmentAxis);
|
|
634
|
+
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
635
|
+
if (rects.reference[length] > rects.floating[length]) {
|
|
636
|
+
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
637
|
+
}
|
|
638
|
+
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
639
|
+
}
|
|
640
|
+
function getExpandedPlacements(placement) {
|
|
641
|
+
const oppositePlacement = getOppositePlacement(placement);
|
|
642
|
+
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
643
|
+
}
|
|
644
|
+
function getOppositeAlignmentPlacement(placement) {
|
|
645
|
+
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
646
|
+
}
|
|
647
|
+
const lrPlacement = ['left', 'right'];
|
|
648
|
+
const rlPlacement = ['right', 'left'];
|
|
649
|
+
const tbPlacement = ['top', 'bottom'];
|
|
650
|
+
const btPlacement = ['bottom', 'top'];
|
|
651
|
+
function getSideList(side, isStart, rtl) {
|
|
652
|
+
switch (side) {
|
|
653
|
+
case 'top':
|
|
654
|
+
case 'bottom':
|
|
655
|
+
if (rtl) return isStart ? rlPlacement : lrPlacement;
|
|
656
|
+
return isStart ? lrPlacement : rlPlacement;
|
|
657
|
+
case 'left':
|
|
658
|
+
case 'right':
|
|
659
|
+
return isStart ? tbPlacement : btPlacement;
|
|
660
|
+
default:
|
|
661
|
+
return [];
|
|
662
|
+
}
|
|
663
|
+
}
|
|
664
|
+
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
665
|
+
const alignment = getAlignment(placement);
|
|
666
|
+
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
667
|
+
if (alignment) {
|
|
668
|
+
list = list.map(side => side + "-" + alignment);
|
|
669
|
+
if (flipAlignment) {
|
|
670
|
+
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
671
|
+
}
|
|
672
|
+
}
|
|
673
|
+
return list;
|
|
674
|
+
}
|
|
675
|
+
function getOppositePlacement(placement) {
|
|
676
|
+
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
|
677
|
+
}
|
|
678
|
+
function expandPaddingObject(padding) {
|
|
679
|
+
return {
|
|
680
|
+
top: 0,
|
|
681
|
+
right: 0,
|
|
682
|
+
bottom: 0,
|
|
683
|
+
left: 0,
|
|
684
|
+
...padding
|
|
685
|
+
};
|
|
686
|
+
}
|
|
687
|
+
function getPaddingObject(padding) {
|
|
688
|
+
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
689
|
+
top: padding,
|
|
690
|
+
right: padding,
|
|
691
|
+
bottom: padding,
|
|
692
|
+
left: padding
|
|
693
|
+
};
|
|
694
|
+
}
|
|
695
|
+
function rectToClientRect(rect) {
|
|
696
|
+
const {
|
|
697
|
+
x,
|
|
698
|
+
y,
|
|
699
|
+
width,
|
|
700
|
+
height
|
|
701
|
+
} = rect;
|
|
702
|
+
return {
|
|
703
|
+
width,
|
|
704
|
+
height,
|
|
705
|
+
top: y,
|
|
706
|
+
left: x,
|
|
707
|
+
right: x + width,
|
|
708
|
+
bottom: y + height,
|
|
709
|
+
x,
|
|
710
|
+
y
|
|
711
|
+
};
|
|
712
|
+
}
|
|
555
713
|
|
|
556
|
-
|
|
714
|
+
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
715
|
+
let {
|
|
716
|
+
reference,
|
|
717
|
+
floating
|
|
718
|
+
} = _ref;
|
|
719
|
+
const sideAxis = getSideAxis(placement);
|
|
720
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
721
|
+
const alignLength = getAxisLength(alignmentAxis);
|
|
722
|
+
const side = getSide(placement);
|
|
723
|
+
const isVertical = sideAxis === 'y';
|
|
724
|
+
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
725
|
+
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
726
|
+
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
727
|
+
let coords;
|
|
728
|
+
switch (side) {
|
|
729
|
+
case 'top':
|
|
730
|
+
coords = {
|
|
731
|
+
x: commonX,
|
|
732
|
+
y: reference.y - floating.height
|
|
733
|
+
};
|
|
734
|
+
break;
|
|
735
|
+
case 'bottom':
|
|
736
|
+
coords = {
|
|
737
|
+
x: commonX,
|
|
738
|
+
y: reference.y + reference.height
|
|
739
|
+
};
|
|
740
|
+
break;
|
|
741
|
+
case 'right':
|
|
742
|
+
coords = {
|
|
743
|
+
x: reference.x + reference.width,
|
|
744
|
+
y: commonY
|
|
745
|
+
};
|
|
746
|
+
break;
|
|
747
|
+
case 'left':
|
|
748
|
+
coords = {
|
|
749
|
+
x: reference.x - floating.width,
|
|
750
|
+
y: commonY
|
|
751
|
+
};
|
|
752
|
+
break;
|
|
753
|
+
default:
|
|
754
|
+
coords = {
|
|
755
|
+
x: reference.x,
|
|
756
|
+
y: reference.y
|
|
757
|
+
};
|
|
758
|
+
}
|
|
759
|
+
switch (getAlignment(placement)) {
|
|
760
|
+
case 'start':
|
|
761
|
+
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
762
|
+
break;
|
|
763
|
+
case 'end':
|
|
764
|
+
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
765
|
+
break;
|
|
766
|
+
}
|
|
767
|
+
return coords;
|
|
768
|
+
}
|
|
557
769
|
|
|
558
770
|
/**
|
|
559
|
-
*
|
|
560
|
-
*
|
|
561
|
-
*
|
|
562
|
-
*
|
|
563
|
-
*
|
|
564
|
-
* @csspart close-button - adjust position of the close X icon in the dialog window
|
|
565
|
-
* @csspart dialog-overlay - apply CSS on the overlay of the dialog
|
|
566
|
-
* @csspart dialog - apply CSS to the entire dialog
|
|
567
|
-
* @csspart dialog-header - apply CSS to the header of the dialog
|
|
568
|
-
* @csspart dialog-content - apply CSS to the content of the dialog
|
|
569
|
-
* @csspart dialog-footer - apply CSS to the footer of the dialog
|
|
771
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
772
|
+
* next to a given reference element.
|
|
773
|
+
*
|
|
774
|
+
* This export does not have any `platform` interface logic. You will need to
|
|
775
|
+
* write one for the platform you are using Floating UI with.
|
|
570
776
|
*/
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
777
|
+
const computePosition$1 = async (reference, floating, config) => {
|
|
778
|
+
const {
|
|
779
|
+
placement = 'bottom',
|
|
780
|
+
strategy = 'absolute',
|
|
781
|
+
middleware = [],
|
|
782
|
+
platform
|
|
783
|
+
} = config;
|
|
784
|
+
const validMiddleware = middleware.filter(Boolean);
|
|
785
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
786
|
+
let rects = await platform.getElementRects({
|
|
787
|
+
reference,
|
|
788
|
+
floating,
|
|
789
|
+
strategy
|
|
790
|
+
});
|
|
791
|
+
let {
|
|
792
|
+
x,
|
|
793
|
+
y
|
|
794
|
+
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
795
|
+
let statefulPlacement = placement;
|
|
796
|
+
let middlewareData = {};
|
|
797
|
+
let resetCount = 0;
|
|
798
|
+
for (let i = 0; i < validMiddleware.length; i++) {
|
|
799
|
+
const {
|
|
800
|
+
name,
|
|
801
|
+
fn
|
|
802
|
+
} = validMiddleware[i];
|
|
803
|
+
const {
|
|
804
|
+
x: nextX,
|
|
805
|
+
y: nextY,
|
|
806
|
+
data,
|
|
807
|
+
reset
|
|
808
|
+
} = await fn({
|
|
809
|
+
x,
|
|
810
|
+
y,
|
|
811
|
+
initialPlacement: placement,
|
|
812
|
+
placement: statefulPlacement,
|
|
813
|
+
strategy,
|
|
814
|
+
middlewareData,
|
|
815
|
+
rects,
|
|
816
|
+
platform,
|
|
817
|
+
elements: {
|
|
818
|
+
reference,
|
|
819
|
+
floating
|
|
820
|
+
}
|
|
821
|
+
});
|
|
822
|
+
x = nextX != null ? nextX : x;
|
|
823
|
+
y = nextY != null ? nextY : y;
|
|
824
|
+
middlewareData = {
|
|
825
|
+
...middlewareData,
|
|
826
|
+
[name]: {
|
|
827
|
+
...middlewareData[name],
|
|
828
|
+
...data
|
|
829
|
+
}
|
|
830
|
+
};
|
|
831
|
+
if (reset && resetCount <= 50) {
|
|
832
|
+
resetCount++;
|
|
833
|
+
if (typeof reset === 'object') {
|
|
834
|
+
if (reset.placement) {
|
|
835
|
+
statefulPlacement = reset.placement;
|
|
836
|
+
}
|
|
837
|
+
if (reset.rects) {
|
|
838
|
+
rects = reset.rects === true ? await platform.getElementRects({
|
|
839
|
+
reference,
|
|
840
|
+
floating,
|
|
841
|
+
strategy
|
|
842
|
+
}) : reset.rects;
|
|
843
|
+
}
|
|
844
|
+
({
|
|
845
|
+
x,
|
|
846
|
+
y
|
|
847
|
+
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
848
|
+
}
|
|
849
|
+
i = -1;
|
|
850
|
+
}
|
|
576
851
|
}
|
|
852
|
+
return {
|
|
853
|
+
x,
|
|
854
|
+
y,
|
|
855
|
+
placement: statefulPlacement,
|
|
856
|
+
strategy,
|
|
857
|
+
middlewareData
|
|
858
|
+
};
|
|
859
|
+
};
|
|
577
860
|
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
861
|
+
/**
|
|
862
|
+
* Resolves with an object of overflow side offsets that determine how much the
|
|
863
|
+
* element is overflowing a given clipping boundary on each side.
|
|
864
|
+
* - positive = overflowing the boundary by that number of pixels
|
|
865
|
+
* - negative = how many pixels left before it will overflow
|
|
866
|
+
* - 0 = lies flush with the boundary
|
|
867
|
+
* @see https://floating-ui.com/docs/detectOverflow
|
|
868
|
+
*/
|
|
869
|
+
async function detectOverflow(state, options) {
|
|
870
|
+
var _await$platform$isEle;
|
|
871
|
+
if (options === void 0) {
|
|
872
|
+
options = {};
|
|
873
|
+
}
|
|
874
|
+
const {
|
|
875
|
+
x,
|
|
876
|
+
y,
|
|
877
|
+
platform,
|
|
878
|
+
rects,
|
|
879
|
+
elements,
|
|
880
|
+
strategy
|
|
881
|
+
} = state;
|
|
882
|
+
const {
|
|
883
|
+
boundary = 'clippingAncestors',
|
|
884
|
+
rootBoundary = 'viewport',
|
|
885
|
+
elementContext = 'floating',
|
|
886
|
+
altBoundary = false,
|
|
887
|
+
padding = 0
|
|
888
|
+
} = evaluate(options, state);
|
|
889
|
+
const paddingObject = getPaddingObject(padding);
|
|
890
|
+
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
891
|
+
const element = elements[altBoundary ? altContext : elementContext];
|
|
892
|
+
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
893
|
+
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
894
|
+
boundary,
|
|
895
|
+
rootBoundary,
|
|
896
|
+
strategy
|
|
897
|
+
}));
|
|
898
|
+
const rect = elementContext === 'floating' ? {
|
|
899
|
+
x,
|
|
900
|
+
y,
|
|
901
|
+
width: rects.floating.width,
|
|
902
|
+
height: rects.floating.height
|
|
903
|
+
} : rects.reference;
|
|
904
|
+
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
905
|
+
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
906
|
+
x: 1,
|
|
907
|
+
y: 1
|
|
908
|
+
} : {
|
|
909
|
+
x: 1,
|
|
910
|
+
y: 1
|
|
911
|
+
};
|
|
912
|
+
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
913
|
+
elements,
|
|
914
|
+
rect,
|
|
915
|
+
offsetParent,
|
|
916
|
+
strategy
|
|
917
|
+
}) : rect);
|
|
918
|
+
return {
|
|
919
|
+
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
920
|
+
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
921
|
+
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
922
|
+
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
923
|
+
};
|
|
924
|
+
}
|
|
582
925
|
|
|
583
|
-
|
|
926
|
+
function getPlacementList(alignment, autoAlignment, allowedPlacements) {
|
|
927
|
+
const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
|
|
928
|
+
return allowedPlacementsSortedByAlignment.filter(placement => {
|
|
929
|
+
if (alignment) {
|
|
930
|
+
return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
|
|
931
|
+
}
|
|
932
|
+
return true;
|
|
933
|
+
});
|
|
934
|
+
}
|
|
935
|
+
/**
|
|
936
|
+
* Optimizes the visibility of the floating element by choosing the placement
|
|
937
|
+
* that has the most space available automatically, without needing to specify a
|
|
938
|
+
* preferred placement. Alternative to `flip`.
|
|
939
|
+
* @see https://floating-ui.com/docs/autoPlacement
|
|
940
|
+
*/
|
|
941
|
+
const autoPlacement$1 = function (options) {
|
|
942
|
+
if (options === void 0) {
|
|
943
|
+
options = {};
|
|
944
|
+
}
|
|
945
|
+
return {
|
|
946
|
+
name: 'autoPlacement',
|
|
947
|
+
options,
|
|
948
|
+
async fn(state) {
|
|
949
|
+
var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
|
|
950
|
+
const {
|
|
951
|
+
rects,
|
|
952
|
+
middlewareData,
|
|
953
|
+
placement,
|
|
954
|
+
platform,
|
|
955
|
+
elements
|
|
956
|
+
} = state;
|
|
957
|
+
const {
|
|
958
|
+
crossAxis = false,
|
|
959
|
+
alignment,
|
|
960
|
+
allowedPlacements = placements,
|
|
961
|
+
autoAlignment = true,
|
|
962
|
+
...detectOverflowOptions
|
|
963
|
+
} = evaluate(options, state);
|
|
964
|
+
const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
|
|
965
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
966
|
+
const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
|
|
967
|
+
const currentPlacement = placements$1[currentIndex];
|
|
968
|
+
if (currentPlacement == null) {
|
|
969
|
+
return {};
|
|
970
|
+
}
|
|
971
|
+
const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
|
|
972
|
+
|
|
973
|
+
// Make `computeCoords` start from the right place.
|
|
974
|
+
if (placement !== currentPlacement) {
|
|
975
|
+
return {
|
|
976
|
+
reset: {
|
|
977
|
+
placement: placements$1[0]
|
|
978
|
+
}
|
|
979
|
+
};
|
|
980
|
+
}
|
|
981
|
+
const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
|
|
982
|
+
const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
|
|
983
|
+
placement: currentPlacement,
|
|
984
|
+
overflows: currentOverflows
|
|
985
|
+
}];
|
|
986
|
+
const nextPlacement = placements$1[currentIndex + 1];
|
|
987
|
+
|
|
988
|
+
// There are more placements to check.
|
|
989
|
+
if (nextPlacement) {
|
|
990
|
+
return {
|
|
991
|
+
data: {
|
|
992
|
+
index: currentIndex + 1,
|
|
993
|
+
overflows: allOverflows
|
|
994
|
+
},
|
|
995
|
+
reset: {
|
|
996
|
+
placement: nextPlacement
|
|
997
|
+
}
|
|
998
|
+
};
|
|
999
|
+
}
|
|
1000
|
+
const placementsSortedByMostSpace = allOverflows.map(d => {
|
|
1001
|
+
const alignment = getAlignment(d.placement);
|
|
1002
|
+
return [d.placement, alignment && crossAxis ?
|
|
1003
|
+
// Check along the mainAxis and main crossAxis side.
|
|
1004
|
+
d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
|
|
1005
|
+
// Check only the mainAxis.
|
|
1006
|
+
d.overflows[0], d.overflows];
|
|
1007
|
+
}).sort((a, b) => a[1] - b[1]);
|
|
1008
|
+
const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
|
|
1009
|
+
// Aligned placements should not check their opposite crossAxis
|
|
1010
|
+
// side.
|
|
1011
|
+
getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
|
|
1012
|
+
const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
|
|
1013
|
+
if (resetPlacement !== placement) {
|
|
1014
|
+
return {
|
|
1015
|
+
data: {
|
|
1016
|
+
index: currentIndex + 1,
|
|
1017
|
+
overflows: allOverflows
|
|
1018
|
+
},
|
|
1019
|
+
reset: {
|
|
1020
|
+
placement: resetPlacement
|
|
1021
|
+
}
|
|
1022
|
+
};
|
|
1023
|
+
}
|
|
1024
|
+
return {};
|
|
1025
|
+
}
|
|
1026
|
+
};
|
|
1027
|
+
};
|
|
584
1028
|
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
|
|
591
|
-
|
|
592
|
-
|
|
1029
|
+
/**
|
|
1030
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
1031
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
1032
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
1033
|
+
* @see https://floating-ui.com/docs/flip
|
|
1034
|
+
*/
|
|
1035
|
+
const flip$1 = function (options) {
|
|
1036
|
+
if (options === void 0) {
|
|
1037
|
+
options = {};
|
|
1038
|
+
}
|
|
1039
|
+
return {
|
|
1040
|
+
name: 'flip',
|
|
1041
|
+
options,
|
|
1042
|
+
async fn(state) {
|
|
1043
|
+
var _middlewareData$arrow, _middlewareData$flip;
|
|
1044
|
+
const {
|
|
1045
|
+
placement,
|
|
1046
|
+
middlewareData,
|
|
1047
|
+
rects,
|
|
1048
|
+
initialPlacement,
|
|
1049
|
+
platform,
|
|
1050
|
+
elements
|
|
1051
|
+
} = state;
|
|
1052
|
+
const {
|
|
1053
|
+
mainAxis: checkMainAxis = true,
|
|
1054
|
+
crossAxis: checkCrossAxis = true,
|
|
1055
|
+
fallbackPlacements: specifiedFallbackPlacements,
|
|
1056
|
+
fallbackStrategy = 'bestFit',
|
|
1057
|
+
fallbackAxisSideDirection = 'none',
|
|
1058
|
+
flipAlignment = true,
|
|
1059
|
+
...detectOverflowOptions
|
|
1060
|
+
} = evaluate(options, state);
|
|
1061
|
+
|
|
1062
|
+
// If a reset by the arrow was caused due to an alignment offset being
|
|
1063
|
+
// added, we should skip any logic now since `flip()` has already done its
|
|
1064
|
+
// work.
|
|
1065
|
+
// https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
|
|
1066
|
+
if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
1067
|
+
return {};
|
|
1068
|
+
}
|
|
1069
|
+
const side = getSide(placement);
|
|
1070
|
+
const initialSideAxis = getSideAxis(initialPlacement);
|
|
1071
|
+
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
1072
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
1073
|
+
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
1074
|
+
const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
|
|
1075
|
+
if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
|
|
1076
|
+
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
1077
|
+
}
|
|
1078
|
+
const placements = [initialPlacement, ...fallbackPlacements];
|
|
1079
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
1080
|
+
const overflows = [];
|
|
1081
|
+
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
1082
|
+
if (checkMainAxis) {
|
|
1083
|
+
overflows.push(overflow[side]);
|
|
1084
|
+
}
|
|
1085
|
+
if (checkCrossAxis) {
|
|
1086
|
+
const sides = getAlignmentSides(placement, rects, rtl);
|
|
1087
|
+
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
1088
|
+
}
|
|
1089
|
+
overflowsData = [...overflowsData, {
|
|
1090
|
+
placement,
|
|
1091
|
+
overflows
|
|
1092
|
+
}];
|
|
1093
|
+
|
|
1094
|
+
// One or more sides is overflowing.
|
|
1095
|
+
if (!overflows.every(side => side <= 0)) {
|
|
1096
|
+
var _middlewareData$flip2, _overflowsData$filter;
|
|
1097
|
+
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
1098
|
+
const nextPlacement = placements[nextIndex];
|
|
1099
|
+
if (nextPlacement) {
|
|
1100
|
+
const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
|
|
1101
|
+
if (!ignoreCrossAxisOverflow ||
|
|
1102
|
+
// We leave the current main axis only if every placement on that axis
|
|
1103
|
+
// overflows the main axis.
|
|
1104
|
+
overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
|
|
1105
|
+
// Try next placement and re-run the lifecycle.
|
|
1106
|
+
return {
|
|
1107
|
+
data: {
|
|
1108
|
+
index: nextIndex,
|
|
1109
|
+
overflows: overflowsData
|
|
1110
|
+
},
|
|
1111
|
+
reset: {
|
|
1112
|
+
placement: nextPlacement
|
|
1113
|
+
}
|
|
1114
|
+
};
|
|
1115
|
+
}
|
|
1116
|
+
}
|
|
593
1117
|
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
1118
|
+
// First, find the candidates that fit on the mainAxis side of overflow,
|
|
1119
|
+
// then find the placement that fits the best on the main crossAxis side.
|
|
1120
|
+
let resetPlacement = (_overflowsData$filter = overflowsData.filter(d => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
|
|
1121
|
+
|
|
1122
|
+
// Otherwise fallback.
|
|
1123
|
+
if (!resetPlacement) {
|
|
1124
|
+
switch (fallbackStrategy) {
|
|
1125
|
+
case 'bestFit':
|
|
1126
|
+
{
|
|
1127
|
+
var _overflowsData$filter2;
|
|
1128
|
+
const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
|
|
1129
|
+
if (hasFallbackAxisSideDirection) {
|
|
1130
|
+
const currentSideAxis = getSideAxis(d.placement);
|
|
1131
|
+
return currentSideAxis === initialSideAxis ||
|
|
1132
|
+
// Create a bias to the `y` side axis due to horizontal
|
|
1133
|
+
// reading directions favoring greater width.
|
|
1134
|
+
currentSideAxis === 'y';
|
|
1135
|
+
}
|
|
1136
|
+
return true;
|
|
1137
|
+
}).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
|
|
1138
|
+
if (placement) {
|
|
1139
|
+
resetPlacement = placement;
|
|
1140
|
+
}
|
|
1141
|
+
break;
|
|
1142
|
+
}
|
|
1143
|
+
case 'initialPlacement':
|
|
1144
|
+
resetPlacement = initialPlacement;
|
|
1145
|
+
break;
|
|
1146
|
+
}
|
|
1147
|
+
}
|
|
1148
|
+
if (placement !== resetPlacement) {
|
|
1149
|
+
return {
|
|
1150
|
+
reset: {
|
|
1151
|
+
placement: resetPlacement
|
|
1152
|
+
}
|
|
1153
|
+
};
|
|
1154
|
+
}
|
|
1155
|
+
}
|
|
1156
|
+
return {};
|
|
1157
|
+
}
|
|
1158
|
+
};
|
|
1159
|
+
};
|
|
1160
|
+
|
|
1161
|
+
const originSides = /*#__PURE__*/new Set(['left', 'top']);
|
|
1162
|
+
|
|
1163
|
+
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
1164
|
+
// Derivable.
|
|
1165
|
+
|
|
1166
|
+
async function convertValueToCoords(state, options) {
|
|
1167
|
+
const {
|
|
1168
|
+
placement,
|
|
1169
|
+
platform,
|
|
1170
|
+
elements
|
|
1171
|
+
} = state;
|
|
1172
|
+
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
1173
|
+
const side = getSide(placement);
|
|
1174
|
+
const alignment = getAlignment(placement);
|
|
1175
|
+
const isVertical = getSideAxis(placement) === 'y';
|
|
1176
|
+
const mainAxisMulti = originSides.has(side) ? -1 : 1;
|
|
1177
|
+
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
1178
|
+
const rawValue = evaluate(options, state);
|
|
1179
|
+
|
|
1180
|
+
// eslint-disable-next-line prefer-const
|
|
1181
|
+
let {
|
|
1182
|
+
mainAxis,
|
|
1183
|
+
crossAxis,
|
|
1184
|
+
alignmentAxis
|
|
1185
|
+
} = typeof rawValue === 'number' ? {
|
|
1186
|
+
mainAxis: rawValue,
|
|
1187
|
+
crossAxis: 0,
|
|
1188
|
+
alignmentAxis: null
|
|
1189
|
+
} : {
|
|
1190
|
+
mainAxis: rawValue.mainAxis || 0,
|
|
1191
|
+
crossAxis: rawValue.crossAxis || 0,
|
|
1192
|
+
alignmentAxis: rawValue.alignmentAxis
|
|
1193
|
+
};
|
|
1194
|
+
if (alignment && typeof alignmentAxis === 'number') {
|
|
1195
|
+
crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
|
|
1196
|
+
}
|
|
1197
|
+
return isVertical ? {
|
|
1198
|
+
x: crossAxis * crossAxisMulti,
|
|
1199
|
+
y: mainAxis * mainAxisMulti
|
|
1200
|
+
} : {
|
|
1201
|
+
x: mainAxis * mainAxisMulti,
|
|
1202
|
+
y: crossAxis * crossAxisMulti
|
|
1203
|
+
};
|
|
1204
|
+
}
|
|
598
1205
|
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
1206
|
+
/**
|
|
1207
|
+
* Modifies the placement by translating the floating element along the
|
|
1208
|
+
* specified axes.
|
|
1209
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
1210
|
+
* object may be passed.
|
|
1211
|
+
* @see https://floating-ui.com/docs/offset
|
|
1212
|
+
*/
|
|
1213
|
+
const offset$1 = function (options) {
|
|
1214
|
+
if (options === void 0) {
|
|
1215
|
+
options = 0;
|
|
603
1216
|
}
|
|
1217
|
+
return {
|
|
1218
|
+
name: 'offset',
|
|
1219
|
+
options,
|
|
1220
|
+
async fn(state) {
|
|
1221
|
+
var _middlewareData$offse, _middlewareData$arrow;
|
|
1222
|
+
const {
|
|
1223
|
+
x,
|
|
1224
|
+
y,
|
|
1225
|
+
placement,
|
|
1226
|
+
middlewareData
|
|
1227
|
+
} = state;
|
|
1228
|
+
const diffCoords = await convertValueToCoords(state, options);
|
|
1229
|
+
|
|
1230
|
+
// If the placement is the same and the arrow caused an alignment offset
|
|
1231
|
+
// then we don't need to change the positioning coordinates.
|
|
1232
|
+
if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
|
|
1233
|
+
return {};
|
|
1234
|
+
}
|
|
1235
|
+
return {
|
|
1236
|
+
x: x + diffCoords.x,
|
|
1237
|
+
y: y + diffCoords.y,
|
|
1238
|
+
data: {
|
|
1239
|
+
...diffCoords,
|
|
1240
|
+
placement
|
|
1241
|
+
}
|
|
1242
|
+
};
|
|
1243
|
+
}
|
|
1244
|
+
};
|
|
1245
|
+
};
|
|
604
1246
|
|
|
605
|
-
|
|
606
|
-
|
|
1247
|
+
/**
|
|
1248
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
1249
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
1250
|
+
* @see https://floating-ui.com/docs/shift
|
|
1251
|
+
*/
|
|
1252
|
+
const shift$1 = function (options) {
|
|
1253
|
+
if (options === void 0) {
|
|
1254
|
+
options = {};
|
|
1255
|
+
}
|
|
1256
|
+
return {
|
|
1257
|
+
name: 'shift',
|
|
1258
|
+
options,
|
|
1259
|
+
async fn(state) {
|
|
1260
|
+
const {
|
|
1261
|
+
x,
|
|
1262
|
+
y,
|
|
1263
|
+
placement
|
|
1264
|
+
} = state;
|
|
1265
|
+
const {
|
|
1266
|
+
mainAxis: checkMainAxis = true,
|
|
1267
|
+
crossAxis: checkCrossAxis = false,
|
|
1268
|
+
limiter = {
|
|
1269
|
+
fn: _ref => {
|
|
1270
|
+
let {
|
|
1271
|
+
x,
|
|
1272
|
+
y
|
|
1273
|
+
} = _ref;
|
|
1274
|
+
return {
|
|
1275
|
+
x,
|
|
1276
|
+
y
|
|
1277
|
+
};
|
|
1278
|
+
}
|
|
1279
|
+
},
|
|
1280
|
+
...detectOverflowOptions
|
|
1281
|
+
} = evaluate(options, state);
|
|
1282
|
+
const coords = {
|
|
1283
|
+
x,
|
|
1284
|
+
y
|
|
1285
|
+
};
|
|
1286
|
+
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
1287
|
+
const crossAxis = getSideAxis(getSide(placement));
|
|
1288
|
+
const mainAxis = getOppositeAxis(crossAxis);
|
|
1289
|
+
let mainAxisCoord = coords[mainAxis];
|
|
1290
|
+
let crossAxisCoord = coords[crossAxis];
|
|
1291
|
+
if (checkMainAxis) {
|
|
1292
|
+
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
1293
|
+
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
1294
|
+
const min = mainAxisCoord + overflow[minSide];
|
|
1295
|
+
const max = mainAxisCoord - overflow[maxSide];
|
|
1296
|
+
mainAxisCoord = clamp(min, mainAxisCoord, max);
|
|
1297
|
+
}
|
|
1298
|
+
if (checkCrossAxis) {
|
|
1299
|
+
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
1300
|
+
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
1301
|
+
const min = crossAxisCoord + overflow[minSide];
|
|
1302
|
+
const max = crossAxisCoord - overflow[maxSide];
|
|
1303
|
+
crossAxisCoord = clamp(min, crossAxisCoord, max);
|
|
1304
|
+
}
|
|
1305
|
+
const limitedCoords = limiter.fn({
|
|
1306
|
+
...state,
|
|
1307
|
+
[mainAxis]: mainAxisCoord,
|
|
1308
|
+
[crossAxis]: crossAxisCoord
|
|
1309
|
+
});
|
|
1310
|
+
return {
|
|
1311
|
+
...limitedCoords,
|
|
1312
|
+
data: {
|
|
1313
|
+
x: limitedCoords.x - x,
|
|
1314
|
+
y: limitedCoords.y - y,
|
|
1315
|
+
enabled: {
|
|
1316
|
+
[mainAxis]: checkMainAxis,
|
|
1317
|
+
[crossAxis]: checkCrossAxis
|
|
1318
|
+
}
|
|
1319
|
+
}
|
|
1320
|
+
};
|
|
1321
|
+
}
|
|
1322
|
+
};
|
|
1323
|
+
};
|
|
1324
|
+
|
|
1325
|
+
function hasWindow() {
|
|
1326
|
+
return typeof window !== 'undefined';
|
|
1327
|
+
}
|
|
1328
|
+
function getNodeName(node) {
|
|
1329
|
+
if (isNode(node)) {
|
|
1330
|
+
return (node.nodeName || '').toLowerCase();
|
|
1331
|
+
}
|
|
1332
|
+
// Mocked nodes in testing environments may not be instances of Node. By
|
|
1333
|
+
// returning `#document` an infinite loop won't occur.
|
|
1334
|
+
// https://github.com/floating-ui/floating-ui/issues/2317
|
|
1335
|
+
return '#document';
|
|
1336
|
+
}
|
|
1337
|
+
function getWindow(node) {
|
|
1338
|
+
var _node$ownerDocument;
|
|
1339
|
+
return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
1340
|
+
}
|
|
1341
|
+
function getDocumentElement(node) {
|
|
1342
|
+
var _ref;
|
|
1343
|
+
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
1344
|
+
}
|
|
1345
|
+
function isNode(value) {
|
|
1346
|
+
if (!hasWindow()) {
|
|
1347
|
+
return false;
|
|
1348
|
+
}
|
|
1349
|
+
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
1350
|
+
}
|
|
1351
|
+
function isElement(value) {
|
|
1352
|
+
if (!hasWindow()) {
|
|
1353
|
+
return false;
|
|
1354
|
+
}
|
|
1355
|
+
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
1356
|
+
}
|
|
1357
|
+
function isHTMLElement(value) {
|
|
1358
|
+
if (!hasWindow()) {
|
|
1359
|
+
return false;
|
|
1360
|
+
}
|
|
1361
|
+
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
1362
|
+
}
|
|
1363
|
+
function isShadowRoot(value) {
|
|
1364
|
+
if (!hasWindow() || typeof ShadowRoot === 'undefined') {
|
|
1365
|
+
return false;
|
|
1366
|
+
}
|
|
1367
|
+
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
1368
|
+
}
|
|
1369
|
+
const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
|
|
1370
|
+
function isOverflowElement(element) {
|
|
1371
|
+
const {
|
|
1372
|
+
overflow,
|
|
1373
|
+
overflowX,
|
|
1374
|
+
overflowY,
|
|
1375
|
+
display
|
|
1376
|
+
} = getComputedStyle$1(element);
|
|
1377
|
+
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
|
|
1378
|
+
}
|
|
1379
|
+
const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
|
|
1380
|
+
function isTableElement(element) {
|
|
1381
|
+
return tableElements.has(getNodeName(element));
|
|
1382
|
+
}
|
|
1383
|
+
const topLayerSelectors = [':popover-open', ':modal'];
|
|
1384
|
+
function isTopLayer(element) {
|
|
1385
|
+
return topLayerSelectors.some(selector => {
|
|
1386
|
+
try {
|
|
1387
|
+
return element.matches(selector);
|
|
1388
|
+
} catch (_e) {
|
|
1389
|
+
return false;
|
|
1390
|
+
}
|
|
1391
|
+
});
|
|
1392
|
+
}
|
|
1393
|
+
const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
|
|
1394
|
+
const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
|
|
1395
|
+
const containValues = ['paint', 'layout', 'strict', 'content'];
|
|
1396
|
+
function isContainingBlock(elementOrCss) {
|
|
1397
|
+
const webkit = isWebKit();
|
|
1398
|
+
const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
|
|
1399
|
+
|
|
1400
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
1401
|
+
// https://drafts.csswg.org/css-transforms-2/#individual-transforms
|
|
1402
|
+
return transformProperties.some(value => css[value] ? css[value] !== 'none' : false) || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || willChangeValues.some(value => (css.willChange || '').includes(value)) || containValues.some(value => (css.contain || '').includes(value));
|
|
1403
|
+
}
|
|
1404
|
+
function getContainingBlock(element) {
|
|
1405
|
+
let currentNode = getParentNode(element);
|
|
1406
|
+
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
1407
|
+
if (isContainingBlock(currentNode)) {
|
|
1408
|
+
return currentNode;
|
|
1409
|
+
} else if (isTopLayer(currentNode)) {
|
|
1410
|
+
return null;
|
|
1411
|
+
}
|
|
1412
|
+
currentNode = getParentNode(currentNode);
|
|
1413
|
+
}
|
|
1414
|
+
return null;
|
|
1415
|
+
}
|
|
1416
|
+
function isWebKit() {
|
|
1417
|
+
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
|
1418
|
+
return CSS.supports('-webkit-backdrop-filter', 'none');
|
|
1419
|
+
}
|
|
1420
|
+
const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
|
|
1421
|
+
function isLastTraversableNode(node) {
|
|
1422
|
+
return lastTraversableNodeNames.has(getNodeName(node));
|
|
1423
|
+
}
|
|
1424
|
+
function getComputedStyle$1(element) {
|
|
1425
|
+
return getWindow(element).getComputedStyle(element);
|
|
1426
|
+
}
|
|
1427
|
+
function getNodeScroll(element) {
|
|
1428
|
+
if (isElement(element)) {
|
|
1429
|
+
return {
|
|
1430
|
+
scrollLeft: element.scrollLeft,
|
|
1431
|
+
scrollTop: element.scrollTop
|
|
1432
|
+
};
|
|
1433
|
+
}
|
|
1434
|
+
return {
|
|
1435
|
+
scrollLeft: element.scrollX,
|
|
1436
|
+
scrollTop: element.scrollY
|
|
1437
|
+
};
|
|
1438
|
+
}
|
|
1439
|
+
function getParentNode(node) {
|
|
1440
|
+
if (getNodeName(node) === 'html') {
|
|
1441
|
+
return node;
|
|
1442
|
+
}
|
|
1443
|
+
const result =
|
|
1444
|
+
// Step into the shadow DOM of the parent of a slotted node.
|
|
1445
|
+
node.assignedSlot ||
|
|
1446
|
+
// DOM Element detected.
|
|
1447
|
+
node.parentNode ||
|
|
1448
|
+
// ShadowRoot detected.
|
|
1449
|
+
isShadowRoot(node) && node.host ||
|
|
1450
|
+
// Fallback.
|
|
1451
|
+
getDocumentElement(node);
|
|
1452
|
+
return isShadowRoot(result) ? result.host : result;
|
|
1453
|
+
}
|
|
1454
|
+
function getNearestOverflowAncestor(node) {
|
|
1455
|
+
const parentNode = getParentNode(node);
|
|
1456
|
+
if (isLastTraversableNode(parentNode)) {
|
|
1457
|
+
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
1458
|
+
}
|
|
1459
|
+
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
1460
|
+
return parentNode;
|
|
1461
|
+
}
|
|
1462
|
+
return getNearestOverflowAncestor(parentNode);
|
|
1463
|
+
}
|
|
1464
|
+
function getOverflowAncestors(node, list, traverseIframes) {
|
|
1465
|
+
var _node$ownerDocument2;
|
|
1466
|
+
if (list === void 0) {
|
|
1467
|
+
list = [];
|
|
1468
|
+
}
|
|
1469
|
+
if (traverseIframes === void 0) {
|
|
1470
|
+
traverseIframes = true;
|
|
1471
|
+
}
|
|
1472
|
+
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
1473
|
+
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
1474
|
+
const win = getWindow(scrollableAncestor);
|
|
1475
|
+
if (isBody) {
|
|
1476
|
+
const frameElement = getFrameElement(win);
|
|
1477
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
|
|
1478
|
+
}
|
|
1479
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
|
|
1480
|
+
}
|
|
1481
|
+
function getFrameElement(win) {
|
|
1482
|
+
return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
|
|
1483
|
+
}
|
|
1484
|
+
|
|
1485
|
+
function getCssDimensions(element) {
|
|
1486
|
+
const css = getComputedStyle$1(element);
|
|
1487
|
+
// In testing environments, the `width` and `height` properties are empty
|
|
1488
|
+
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
1489
|
+
let width = parseFloat(css.width) || 0;
|
|
1490
|
+
let height = parseFloat(css.height) || 0;
|
|
1491
|
+
const hasOffset = isHTMLElement(element);
|
|
1492
|
+
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
1493
|
+
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
1494
|
+
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
1495
|
+
if (shouldFallback) {
|
|
1496
|
+
width = offsetWidth;
|
|
1497
|
+
height = offsetHeight;
|
|
1498
|
+
}
|
|
1499
|
+
return {
|
|
1500
|
+
width,
|
|
1501
|
+
height,
|
|
1502
|
+
$: shouldFallback
|
|
1503
|
+
};
|
|
1504
|
+
}
|
|
1505
|
+
|
|
1506
|
+
function unwrapElement(element) {
|
|
1507
|
+
return !isElement(element) ? element.contextElement : element;
|
|
1508
|
+
}
|
|
1509
|
+
|
|
1510
|
+
function getScale(element) {
|
|
1511
|
+
const domElement = unwrapElement(element);
|
|
1512
|
+
if (!isHTMLElement(domElement)) {
|
|
1513
|
+
return createCoords(1);
|
|
1514
|
+
}
|
|
1515
|
+
const rect = domElement.getBoundingClientRect();
|
|
1516
|
+
const {
|
|
1517
|
+
width,
|
|
1518
|
+
height,
|
|
1519
|
+
$
|
|
1520
|
+
} = getCssDimensions(domElement);
|
|
1521
|
+
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
1522
|
+
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
1523
|
+
|
|
1524
|
+
// 0, NaN, or Infinity should always fallback to 1.
|
|
1525
|
+
|
|
1526
|
+
if (!x || !Number.isFinite(x)) {
|
|
1527
|
+
x = 1;
|
|
1528
|
+
}
|
|
1529
|
+
if (!y || !Number.isFinite(y)) {
|
|
1530
|
+
y = 1;
|
|
1531
|
+
}
|
|
1532
|
+
return {
|
|
1533
|
+
x,
|
|
1534
|
+
y
|
|
1535
|
+
};
|
|
1536
|
+
}
|
|
1537
|
+
|
|
1538
|
+
const noOffsets = /*#__PURE__*/createCoords(0);
|
|
1539
|
+
function getVisualOffsets(element) {
|
|
1540
|
+
const win = getWindow(element);
|
|
1541
|
+
if (!isWebKit() || !win.visualViewport) {
|
|
1542
|
+
return noOffsets;
|
|
1543
|
+
}
|
|
1544
|
+
return {
|
|
1545
|
+
x: win.visualViewport.offsetLeft,
|
|
1546
|
+
y: win.visualViewport.offsetTop
|
|
1547
|
+
};
|
|
1548
|
+
}
|
|
1549
|
+
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
1550
|
+
if (isFixed === void 0) {
|
|
1551
|
+
isFixed = false;
|
|
1552
|
+
}
|
|
1553
|
+
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
1554
|
+
return false;
|
|
1555
|
+
}
|
|
1556
|
+
return isFixed;
|
|
1557
|
+
}
|
|
1558
|
+
|
|
1559
|
+
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
1560
|
+
if (includeScale === void 0) {
|
|
1561
|
+
includeScale = false;
|
|
1562
|
+
}
|
|
1563
|
+
if (isFixedStrategy === void 0) {
|
|
1564
|
+
isFixedStrategy = false;
|
|
1565
|
+
}
|
|
1566
|
+
const clientRect = element.getBoundingClientRect();
|
|
1567
|
+
const domElement = unwrapElement(element);
|
|
1568
|
+
let scale = createCoords(1);
|
|
1569
|
+
if (includeScale) {
|
|
1570
|
+
if (offsetParent) {
|
|
1571
|
+
if (isElement(offsetParent)) {
|
|
1572
|
+
scale = getScale(offsetParent);
|
|
1573
|
+
}
|
|
1574
|
+
} else {
|
|
1575
|
+
scale = getScale(element);
|
|
1576
|
+
}
|
|
1577
|
+
}
|
|
1578
|
+
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
1579
|
+
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
1580
|
+
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
1581
|
+
let width = clientRect.width / scale.x;
|
|
1582
|
+
let height = clientRect.height / scale.y;
|
|
1583
|
+
if (domElement) {
|
|
1584
|
+
const win = getWindow(domElement);
|
|
1585
|
+
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
1586
|
+
let currentWin = win;
|
|
1587
|
+
let currentIFrame = getFrameElement(currentWin);
|
|
1588
|
+
while (currentIFrame && offsetParent && offsetWin !== currentWin) {
|
|
1589
|
+
const iframeScale = getScale(currentIFrame);
|
|
1590
|
+
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
1591
|
+
const css = getComputedStyle$1(currentIFrame);
|
|
1592
|
+
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
1593
|
+
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
1594
|
+
x *= iframeScale.x;
|
|
1595
|
+
y *= iframeScale.y;
|
|
1596
|
+
width *= iframeScale.x;
|
|
1597
|
+
height *= iframeScale.y;
|
|
1598
|
+
x += left;
|
|
1599
|
+
y += top;
|
|
1600
|
+
currentWin = getWindow(currentIFrame);
|
|
1601
|
+
currentIFrame = getFrameElement(currentWin);
|
|
1602
|
+
}
|
|
1603
|
+
}
|
|
1604
|
+
return rectToClientRect({
|
|
1605
|
+
width,
|
|
1606
|
+
height,
|
|
1607
|
+
x,
|
|
1608
|
+
y
|
|
1609
|
+
});
|
|
1610
|
+
}
|
|
1611
|
+
|
|
1612
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
1613
|
+
// incorrect for RTL.
|
|
1614
|
+
function getWindowScrollBarX(element, rect) {
|
|
1615
|
+
const leftScroll = getNodeScroll(element).scrollLeft;
|
|
1616
|
+
if (!rect) {
|
|
1617
|
+
return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
|
|
1618
|
+
}
|
|
1619
|
+
return rect.left + leftScroll;
|
|
1620
|
+
}
|
|
1621
|
+
|
|
1622
|
+
function getHTMLOffset(documentElement, scroll) {
|
|
1623
|
+
const htmlRect = documentElement.getBoundingClientRect();
|
|
1624
|
+
const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
|
|
1625
|
+
const y = htmlRect.top + scroll.scrollTop;
|
|
1626
|
+
return {
|
|
1627
|
+
x,
|
|
1628
|
+
y
|
|
1629
|
+
};
|
|
1630
|
+
}
|
|
1631
|
+
|
|
1632
|
+
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
1633
|
+
let {
|
|
1634
|
+
elements,
|
|
1635
|
+
rect,
|
|
1636
|
+
offsetParent,
|
|
1637
|
+
strategy
|
|
1638
|
+
} = _ref;
|
|
1639
|
+
const isFixed = strategy === 'fixed';
|
|
1640
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
1641
|
+
const topLayer = elements ? isTopLayer(elements.floating) : false;
|
|
1642
|
+
if (offsetParent === documentElement || topLayer && isFixed) {
|
|
1643
|
+
return rect;
|
|
1644
|
+
}
|
|
1645
|
+
let scroll = {
|
|
1646
|
+
scrollLeft: 0,
|
|
1647
|
+
scrollTop: 0
|
|
1648
|
+
};
|
|
1649
|
+
let scale = createCoords(1);
|
|
1650
|
+
const offsets = createCoords(0);
|
|
1651
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
1652
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
1653
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
1654
|
+
scroll = getNodeScroll(offsetParent);
|
|
1655
|
+
}
|
|
1656
|
+
if (isHTMLElement(offsetParent)) {
|
|
1657
|
+
const offsetRect = getBoundingClientRect(offsetParent);
|
|
1658
|
+
scale = getScale(offsetParent);
|
|
1659
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1660
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1661
|
+
}
|
|
1662
|
+
}
|
|
1663
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
1664
|
+
return {
|
|
1665
|
+
width: rect.width * scale.x,
|
|
1666
|
+
height: rect.height * scale.y,
|
|
1667
|
+
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
|
|
1668
|
+
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
|
|
1669
|
+
};
|
|
1670
|
+
}
|
|
1671
|
+
|
|
1672
|
+
function getClientRects(element) {
|
|
1673
|
+
return Array.from(element.getClientRects());
|
|
1674
|
+
}
|
|
1675
|
+
|
|
1676
|
+
// Gets the entire size of the scrollable document area, even extending outside
|
|
1677
|
+
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
1678
|
+
function getDocumentRect(element) {
|
|
1679
|
+
const html = getDocumentElement(element);
|
|
1680
|
+
const scroll = getNodeScroll(element);
|
|
1681
|
+
const body = element.ownerDocument.body;
|
|
1682
|
+
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
1683
|
+
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
1684
|
+
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
1685
|
+
const y = -scroll.scrollTop;
|
|
1686
|
+
if (getComputedStyle$1(body).direction === 'rtl') {
|
|
1687
|
+
x += max(html.clientWidth, body.clientWidth) - width;
|
|
1688
|
+
}
|
|
1689
|
+
return {
|
|
1690
|
+
width,
|
|
1691
|
+
height,
|
|
1692
|
+
x,
|
|
1693
|
+
y
|
|
1694
|
+
};
|
|
1695
|
+
}
|
|
1696
|
+
|
|
1697
|
+
// Safety check: ensure the scrollbar space is reasonable in case this
|
|
1698
|
+
// calculation is affected by unusual styles.
|
|
1699
|
+
// Most scrollbars leave 15-18px of space.
|
|
1700
|
+
const SCROLLBAR_MAX = 25;
|
|
1701
|
+
function getViewportRect(element, strategy) {
|
|
1702
|
+
const win = getWindow(element);
|
|
1703
|
+
const html = getDocumentElement(element);
|
|
1704
|
+
const visualViewport = win.visualViewport;
|
|
1705
|
+
let width = html.clientWidth;
|
|
1706
|
+
let height = html.clientHeight;
|
|
1707
|
+
let x = 0;
|
|
1708
|
+
let y = 0;
|
|
1709
|
+
if (visualViewport) {
|
|
1710
|
+
width = visualViewport.width;
|
|
1711
|
+
height = visualViewport.height;
|
|
1712
|
+
const visualViewportBased = isWebKit();
|
|
1713
|
+
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
|
|
1714
|
+
x = visualViewport.offsetLeft;
|
|
1715
|
+
y = visualViewport.offsetTop;
|
|
1716
|
+
}
|
|
1717
|
+
}
|
|
1718
|
+
const windowScrollbarX = getWindowScrollBarX(html);
|
|
1719
|
+
// <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
|
|
1720
|
+
// visual width of the <html> but this is not considered in the size
|
|
1721
|
+
// of `html.clientWidth`.
|
|
1722
|
+
if (windowScrollbarX <= 0) {
|
|
1723
|
+
const doc = html.ownerDocument;
|
|
1724
|
+
const body = doc.body;
|
|
1725
|
+
const bodyStyles = getComputedStyle(body);
|
|
1726
|
+
const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
|
|
1727
|
+
const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
|
|
1728
|
+
if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
|
|
1729
|
+
width -= clippingStableScrollbarWidth;
|
|
1730
|
+
}
|
|
1731
|
+
} else if (windowScrollbarX <= SCROLLBAR_MAX) {
|
|
1732
|
+
// If the <body> scrollbar is on the left, the width needs to be extended
|
|
1733
|
+
// by the scrollbar amount so there isn't extra space on the right.
|
|
1734
|
+
width += windowScrollbarX;
|
|
1735
|
+
}
|
|
1736
|
+
return {
|
|
1737
|
+
width,
|
|
1738
|
+
height,
|
|
1739
|
+
x,
|
|
1740
|
+
y
|
|
1741
|
+
};
|
|
1742
|
+
}
|
|
1743
|
+
|
|
1744
|
+
const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
|
|
1745
|
+
// Returns the inner client rect, subtracting scrollbars if present.
|
|
1746
|
+
function getInnerBoundingClientRect(element, strategy) {
|
|
1747
|
+
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
1748
|
+
const top = clientRect.top + element.clientTop;
|
|
1749
|
+
const left = clientRect.left + element.clientLeft;
|
|
1750
|
+
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
1751
|
+
const width = element.clientWidth * scale.x;
|
|
1752
|
+
const height = element.clientHeight * scale.y;
|
|
1753
|
+
const x = left * scale.x;
|
|
1754
|
+
const y = top * scale.y;
|
|
1755
|
+
return {
|
|
1756
|
+
width,
|
|
1757
|
+
height,
|
|
1758
|
+
x,
|
|
1759
|
+
y
|
|
1760
|
+
};
|
|
1761
|
+
}
|
|
1762
|
+
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
1763
|
+
let rect;
|
|
1764
|
+
if (clippingAncestor === 'viewport') {
|
|
1765
|
+
rect = getViewportRect(element, strategy);
|
|
1766
|
+
} else if (clippingAncestor === 'document') {
|
|
1767
|
+
rect = getDocumentRect(getDocumentElement(element));
|
|
1768
|
+
} else if (isElement(clippingAncestor)) {
|
|
1769
|
+
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
1770
|
+
} else {
|
|
1771
|
+
const visualOffsets = getVisualOffsets(element);
|
|
1772
|
+
rect = {
|
|
1773
|
+
x: clippingAncestor.x - visualOffsets.x,
|
|
1774
|
+
y: clippingAncestor.y - visualOffsets.y,
|
|
1775
|
+
width: clippingAncestor.width,
|
|
1776
|
+
height: clippingAncestor.height
|
|
1777
|
+
};
|
|
1778
|
+
}
|
|
1779
|
+
return rectToClientRect(rect);
|
|
1780
|
+
}
|
|
1781
|
+
function hasFixedPositionAncestor(element, stopNode) {
|
|
1782
|
+
const parentNode = getParentNode(element);
|
|
1783
|
+
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
1784
|
+
return false;
|
|
1785
|
+
}
|
|
1786
|
+
return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
1787
|
+
}
|
|
1788
|
+
|
|
1789
|
+
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
1790
|
+
// clipping (or hiding) child elements. This returns all clipping ancestors
|
|
1791
|
+
// of the given element up the tree.
|
|
1792
|
+
function getClippingElementAncestors(element, cache) {
|
|
1793
|
+
const cachedResult = cache.get(element);
|
|
1794
|
+
if (cachedResult) {
|
|
1795
|
+
return cachedResult;
|
|
1796
|
+
}
|
|
1797
|
+
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
1798
|
+
let currentContainingBlockComputedStyle = null;
|
|
1799
|
+
const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
|
|
1800
|
+
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
1801
|
+
|
|
1802
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
1803
|
+
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
1804
|
+
const computedStyle = getComputedStyle$1(currentNode);
|
|
1805
|
+
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
1806
|
+
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
1807
|
+
currentContainingBlockComputedStyle = null;
|
|
1808
|
+
}
|
|
1809
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
1810
|
+
if (shouldDropCurrentNode) {
|
|
1811
|
+
// Drop non-containing blocks.
|
|
1812
|
+
result = result.filter(ancestor => ancestor !== currentNode);
|
|
1813
|
+
} else {
|
|
1814
|
+
// Record last containing block for next iteration.
|
|
1815
|
+
currentContainingBlockComputedStyle = computedStyle;
|
|
1816
|
+
}
|
|
1817
|
+
currentNode = getParentNode(currentNode);
|
|
1818
|
+
}
|
|
1819
|
+
cache.set(element, result);
|
|
1820
|
+
return result;
|
|
1821
|
+
}
|
|
1822
|
+
|
|
1823
|
+
// Gets the maximum area that the element is visible in due to any number of
|
|
1824
|
+
// clipping ancestors.
|
|
1825
|
+
function getClippingRect(_ref) {
|
|
1826
|
+
let {
|
|
1827
|
+
element,
|
|
1828
|
+
boundary,
|
|
1829
|
+
rootBoundary,
|
|
1830
|
+
strategy
|
|
1831
|
+
} = _ref;
|
|
1832
|
+
const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
1833
|
+
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
1834
|
+
const firstClippingAncestor = clippingAncestors[0];
|
|
1835
|
+
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
1836
|
+
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
1837
|
+
accRect.top = max(rect.top, accRect.top);
|
|
1838
|
+
accRect.right = min(rect.right, accRect.right);
|
|
1839
|
+
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
1840
|
+
accRect.left = max(rect.left, accRect.left);
|
|
1841
|
+
return accRect;
|
|
1842
|
+
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
1843
|
+
return {
|
|
1844
|
+
width: clippingRect.right - clippingRect.left,
|
|
1845
|
+
height: clippingRect.bottom - clippingRect.top,
|
|
1846
|
+
x: clippingRect.left,
|
|
1847
|
+
y: clippingRect.top
|
|
1848
|
+
};
|
|
1849
|
+
}
|
|
1850
|
+
|
|
1851
|
+
function getDimensions(element) {
|
|
1852
|
+
const {
|
|
1853
|
+
width,
|
|
1854
|
+
height
|
|
1855
|
+
} = getCssDimensions(element);
|
|
1856
|
+
return {
|
|
1857
|
+
width,
|
|
1858
|
+
height
|
|
1859
|
+
};
|
|
1860
|
+
}
|
|
1861
|
+
|
|
1862
|
+
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
1863
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
1864
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
1865
|
+
const isFixed = strategy === 'fixed';
|
|
1866
|
+
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
1867
|
+
let scroll = {
|
|
1868
|
+
scrollLeft: 0,
|
|
1869
|
+
scrollTop: 0
|
|
1870
|
+
};
|
|
1871
|
+
const offsets = createCoords(0);
|
|
1872
|
+
|
|
1873
|
+
// If the <body> scrollbar appears on the left (e.g. RTL systems). Use
|
|
1874
|
+
// Firefox with layout.scrollbar.side = 3 in about:config to test this.
|
|
1875
|
+
function setLeftRTLScrollbarOffset() {
|
|
1876
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
1877
|
+
}
|
|
1878
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
1879
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
1880
|
+
scroll = getNodeScroll(offsetParent);
|
|
1881
|
+
}
|
|
1882
|
+
if (isOffsetParentAnElement) {
|
|
1883
|
+
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
1884
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1885
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
1886
|
+
} else if (documentElement) {
|
|
1887
|
+
setLeftRTLScrollbarOffset();
|
|
1888
|
+
}
|
|
1889
|
+
}
|
|
1890
|
+
if (isFixed && !isOffsetParentAnElement && documentElement) {
|
|
1891
|
+
setLeftRTLScrollbarOffset();
|
|
1892
|
+
}
|
|
1893
|
+
const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
|
|
1894
|
+
const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
|
|
1895
|
+
const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
|
|
1896
|
+
return {
|
|
1897
|
+
x,
|
|
1898
|
+
y,
|
|
1899
|
+
width: rect.width,
|
|
1900
|
+
height: rect.height
|
|
1901
|
+
};
|
|
1902
|
+
}
|
|
1903
|
+
|
|
1904
|
+
function isStaticPositioned(element) {
|
|
1905
|
+
return getComputedStyle$1(element).position === 'static';
|
|
1906
|
+
}
|
|
1907
|
+
|
|
1908
|
+
function getTrueOffsetParent(element, polyfill) {
|
|
1909
|
+
if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
|
|
1910
|
+
return null;
|
|
1911
|
+
}
|
|
1912
|
+
if (polyfill) {
|
|
1913
|
+
return polyfill(element);
|
|
1914
|
+
}
|
|
1915
|
+
let rawOffsetParent = element.offsetParent;
|
|
1916
|
+
|
|
1917
|
+
// Firefox returns the <html> element as the offsetParent if it's non-static,
|
|
1918
|
+
// while Chrome and Safari return the <body> element. The <body> element must
|
|
1919
|
+
// be used to perform the correct calculations even if the <html> element is
|
|
1920
|
+
// non-static.
|
|
1921
|
+
if (getDocumentElement(element) === rawOffsetParent) {
|
|
1922
|
+
rawOffsetParent = rawOffsetParent.ownerDocument.body;
|
|
1923
|
+
}
|
|
1924
|
+
return rawOffsetParent;
|
|
1925
|
+
}
|
|
1926
|
+
|
|
1927
|
+
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
1928
|
+
// such as table ancestors and cross browser bugs.
|
|
1929
|
+
function getOffsetParent(element, polyfill) {
|
|
1930
|
+
const win = getWindow(element);
|
|
1931
|
+
if (isTopLayer(element)) {
|
|
1932
|
+
return win;
|
|
1933
|
+
}
|
|
1934
|
+
if (!isHTMLElement(element)) {
|
|
1935
|
+
let svgOffsetParent = getParentNode(element);
|
|
1936
|
+
while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
|
|
1937
|
+
if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
|
|
1938
|
+
return svgOffsetParent;
|
|
1939
|
+
}
|
|
1940
|
+
svgOffsetParent = getParentNode(svgOffsetParent);
|
|
1941
|
+
}
|
|
1942
|
+
return win;
|
|
1943
|
+
}
|
|
1944
|
+
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
1945
|
+
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
1946
|
+
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
1947
|
+
}
|
|
1948
|
+
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
1949
|
+
return win;
|
|
1950
|
+
}
|
|
1951
|
+
return offsetParent || getContainingBlock(element) || win;
|
|
1952
|
+
}
|
|
1953
|
+
|
|
1954
|
+
const getElementRects = async function (data) {
|
|
1955
|
+
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
1956
|
+
const getDimensionsFn = this.getDimensions;
|
|
1957
|
+
const floatingDimensions = await getDimensionsFn(data.floating);
|
|
1958
|
+
return {
|
|
1959
|
+
reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
|
|
1960
|
+
floating: {
|
|
1961
|
+
x: 0,
|
|
1962
|
+
y: 0,
|
|
1963
|
+
width: floatingDimensions.width,
|
|
1964
|
+
height: floatingDimensions.height
|
|
1965
|
+
}
|
|
1966
|
+
};
|
|
1967
|
+
};
|
|
1968
|
+
|
|
1969
|
+
function isRTL(element) {
|
|
1970
|
+
return getComputedStyle$1(element).direction === 'rtl';
|
|
1971
|
+
}
|
|
1972
|
+
|
|
1973
|
+
const platform = {
|
|
1974
|
+
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
1975
|
+
getDocumentElement,
|
|
1976
|
+
getClippingRect,
|
|
1977
|
+
getOffsetParent,
|
|
1978
|
+
getElementRects,
|
|
1979
|
+
getClientRects,
|
|
1980
|
+
getDimensions,
|
|
1981
|
+
getScale,
|
|
1982
|
+
isElement,
|
|
1983
|
+
isRTL
|
|
1984
|
+
};
|
|
1985
|
+
|
|
1986
|
+
function rectsAreEqual(a, b) {
|
|
1987
|
+
return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
|
|
1988
|
+
}
|
|
1989
|
+
|
|
1990
|
+
// https://samthor.au/2021/observing-dom/
|
|
1991
|
+
function observeMove(element, onMove) {
|
|
1992
|
+
let io = null;
|
|
1993
|
+
let timeoutId;
|
|
1994
|
+
const root = getDocumentElement(element);
|
|
1995
|
+
function cleanup() {
|
|
1996
|
+
var _io;
|
|
1997
|
+
clearTimeout(timeoutId);
|
|
1998
|
+
(_io = io) == null || _io.disconnect();
|
|
1999
|
+
io = null;
|
|
2000
|
+
}
|
|
2001
|
+
function refresh(skip, threshold) {
|
|
2002
|
+
if (skip === void 0) {
|
|
2003
|
+
skip = false;
|
|
2004
|
+
}
|
|
2005
|
+
if (threshold === void 0) {
|
|
2006
|
+
threshold = 1;
|
|
2007
|
+
}
|
|
2008
|
+
cleanup();
|
|
2009
|
+
const elementRectForRootMargin = element.getBoundingClientRect();
|
|
2010
|
+
const {
|
|
2011
|
+
left,
|
|
2012
|
+
top,
|
|
2013
|
+
width,
|
|
2014
|
+
height
|
|
2015
|
+
} = elementRectForRootMargin;
|
|
2016
|
+
if (!skip) {
|
|
2017
|
+
onMove();
|
|
2018
|
+
}
|
|
2019
|
+
if (!width || !height) {
|
|
2020
|
+
return;
|
|
2021
|
+
}
|
|
2022
|
+
const insetTop = floor(top);
|
|
2023
|
+
const insetRight = floor(root.clientWidth - (left + width));
|
|
2024
|
+
const insetBottom = floor(root.clientHeight - (top + height));
|
|
2025
|
+
const insetLeft = floor(left);
|
|
2026
|
+
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
2027
|
+
const options = {
|
|
2028
|
+
rootMargin,
|
|
2029
|
+
threshold: max(0, min(1, threshold)) || 1
|
|
2030
|
+
};
|
|
2031
|
+
let isFirstUpdate = true;
|
|
2032
|
+
function handleObserve(entries) {
|
|
2033
|
+
const ratio = entries[0].intersectionRatio;
|
|
2034
|
+
if (ratio !== threshold) {
|
|
2035
|
+
if (!isFirstUpdate) {
|
|
2036
|
+
return refresh();
|
|
2037
|
+
}
|
|
2038
|
+
if (!ratio) {
|
|
2039
|
+
// If the reference is clipped, the ratio is 0. Throttle the refresh
|
|
2040
|
+
// to prevent an infinite loop of updates.
|
|
2041
|
+
timeoutId = setTimeout(() => {
|
|
2042
|
+
refresh(false, 1e-7);
|
|
2043
|
+
}, 1000);
|
|
2044
|
+
} else {
|
|
2045
|
+
refresh(false, ratio);
|
|
2046
|
+
}
|
|
2047
|
+
}
|
|
2048
|
+
if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
|
|
2049
|
+
// It's possible that even though the ratio is reported as 1, the
|
|
2050
|
+
// element is not actually fully within the IntersectionObserver's root
|
|
2051
|
+
// area anymore. This can happen under performance constraints. This may
|
|
2052
|
+
// be a bug in the browser's IntersectionObserver implementation. To
|
|
2053
|
+
// work around this, we compare the element's bounding rect now with
|
|
2054
|
+
// what it was at the time we created the IntersectionObserver. If they
|
|
2055
|
+
// are not equal then the element moved, so we refresh.
|
|
2056
|
+
refresh();
|
|
2057
|
+
}
|
|
2058
|
+
isFirstUpdate = false;
|
|
2059
|
+
}
|
|
2060
|
+
|
|
2061
|
+
// Older browsers don't support a `document` as the root and will throw an
|
|
2062
|
+
// error.
|
|
2063
|
+
try {
|
|
2064
|
+
io = new IntersectionObserver(handleObserve, {
|
|
2065
|
+
...options,
|
|
2066
|
+
// Handle <iframe>s
|
|
2067
|
+
root: root.ownerDocument
|
|
2068
|
+
});
|
|
2069
|
+
} catch (_e) {
|
|
2070
|
+
io = new IntersectionObserver(handleObserve, options);
|
|
2071
|
+
}
|
|
2072
|
+
io.observe(element);
|
|
2073
|
+
}
|
|
2074
|
+
refresh(true);
|
|
2075
|
+
return cleanup;
|
|
2076
|
+
}
|
|
2077
|
+
|
|
2078
|
+
/**
|
|
2079
|
+
* Automatically updates the position of the floating element when necessary.
|
|
2080
|
+
* Should only be called when the floating element is mounted on the DOM or
|
|
2081
|
+
* visible on the screen.
|
|
2082
|
+
* @returns cleanup function that should be invoked when the floating element is
|
|
2083
|
+
* removed from the DOM or hidden from the screen.
|
|
2084
|
+
* @see https://floating-ui.com/docs/autoUpdate
|
|
2085
|
+
*/
|
|
2086
|
+
function autoUpdate(reference, floating, update, options) {
|
|
2087
|
+
if (options === void 0) {
|
|
2088
|
+
options = {};
|
|
2089
|
+
}
|
|
2090
|
+
const {
|
|
2091
|
+
ancestorScroll = true,
|
|
2092
|
+
ancestorResize = true,
|
|
2093
|
+
elementResize = typeof ResizeObserver === 'function',
|
|
2094
|
+
layoutShift = typeof IntersectionObserver === 'function',
|
|
2095
|
+
animationFrame = false
|
|
2096
|
+
} = options;
|
|
2097
|
+
const referenceEl = unwrapElement(reference);
|
|
2098
|
+
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
|
2099
|
+
ancestors.forEach(ancestor => {
|
|
2100
|
+
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
|
2101
|
+
passive: true
|
|
2102
|
+
});
|
|
2103
|
+
ancestorResize && ancestor.addEventListener('resize', update);
|
|
2104
|
+
});
|
|
2105
|
+
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
2106
|
+
let reobserveFrame = -1;
|
|
2107
|
+
let resizeObserver = null;
|
|
2108
|
+
if (elementResize) {
|
|
2109
|
+
resizeObserver = new ResizeObserver(_ref => {
|
|
2110
|
+
let [firstEntry] = _ref;
|
|
2111
|
+
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
2112
|
+
// Prevent update loops when using the `size` middleware.
|
|
2113
|
+
// https://github.com/floating-ui/floating-ui/issues/1740
|
|
2114
|
+
resizeObserver.unobserve(floating);
|
|
2115
|
+
cancelAnimationFrame(reobserveFrame);
|
|
2116
|
+
reobserveFrame = requestAnimationFrame(() => {
|
|
2117
|
+
var _resizeObserver;
|
|
2118
|
+
(_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
|
|
2119
|
+
});
|
|
2120
|
+
}
|
|
2121
|
+
update();
|
|
2122
|
+
});
|
|
2123
|
+
if (referenceEl && !animationFrame) {
|
|
2124
|
+
resizeObserver.observe(referenceEl);
|
|
2125
|
+
}
|
|
2126
|
+
resizeObserver.observe(floating);
|
|
2127
|
+
}
|
|
2128
|
+
let frameId;
|
|
2129
|
+
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
2130
|
+
if (animationFrame) {
|
|
2131
|
+
frameLoop();
|
|
2132
|
+
}
|
|
2133
|
+
function frameLoop() {
|
|
2134
|
+
const nextRefRect = getBoundingClientRect(reference);
|
|
2135
|
+
if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
|
|
2136
|
+
update();
|
|
2137
|
+
}
|
|
2138
|
+
prevRefRect = nextRefRect;
|
|
2139
|
+
frameId = requestAnimationFrame(frameLoop);
|
|
2140
|
+
}
|
|
2141
|
+
update();
|
|
2142
|
+
return () => {
|
|
2143
|
+
var _resizeObserver2;
|
|
2144
|
+
ancestors.forEach(ancestor => {
|
|
2145
|
+
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
2146
|
+
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
2147
|
+
});
|
|
2148
|
+
cleanupIo == null || cleanupIo();
|
|
2149
|
+
(_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
|
|
2150
|
+
resizeObserver = null;
|
|
2151
|
+
if (animationFrame) {
|
|
2152
|
+
cancelAnimationFrame(frameId);
|
|
2153
|
+
}
|
|
2154
|
+
};
|
|
2155
|
+
}
|
|
2156
|
+
|
|
2157
|
+
/**
|
|
2158
|
+
* Modifies the placement by translating the floating element along the
|
|
2159
|
+
* specified axes.
|
|
2160
|
+
* A number (shorthand for `mainAxis` or distance), or an axes configuration
|
|
2161
|
+
* object may be passed.
|
|
2162
|
+
* @see https://floating-ui.com/docs/offset
|
|
2163
|
+
*/
|
|
2164
|
+
const offset = offset$1;
|
|
2165
|
+
|
|
2166
|
+
/**
|
|
2167
|
+
* Optimizes the visibility of the floating element by choosing the placement
|
|
2168
|
+
* that has the most space available automatically, without needing to specify a
|
|
2169
|
+
* preferred placement. Alternative to `flip`.
|
|
2170
|
+
* @see https://floating-ui.com/docs/autoPlacement
|
|
2171
|
+
*/
|
|
2172
|
+
const autoPlacement = autoPlacement$1;
|
|
2173
|
+
|
|
2174
|
+
/**
|
|
2175
|
+
* Optimizes the visibility of the floating element by shifting it in order to
|
|
2176
|
+
* keep it in view when it will overflow the clipping boundary.
|
|
2177
|
+
* @see https://floating-ui.com/docs/shift
|
|
2178
|
+
*/
|
|
2179
|
+
const shift = shift$1;
|
|
2180
|
+
|
|
2181
|
+
/**
|
|
2182
|
+
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
2183
|
+
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
2184
|
+
* clipping boundary. Alternative to `autoPlacement`.
|
|
2185
|
+
* @see https://floating-ui.com/docs/flip
|
|
2186
|
+
*/
|
|
2187
|
+
const flip = flip$1;
|
|
2188
|
+
|
|
2189
|
+
/**
|
|
2190
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
2191
|
+
* next to a given reference element.
|
|
2192
|
+
*/
|
|
2193
|
+
const computePosition = (reference, floating, options) => {
|
|
2194
|
+
// This caches the expensive `getClippingElementAncestors` function so that
|
|
2195
|
+
// multiple lifecycle resets re-use the same result. It only lives for a
|
|
2196
|
+
// single call. If other functions become expensive, we can add them as well.
|
|
2197
|
+
const cache = new Map();
|
|
2198
|
+
const mergedOptions = {
|
|
2199
|
+
platform,
|
|
2200
|
+
...options
|
|
2201
|
+
};
|
|
2202
|
+
const platformWithCache = {
|
|
2203
|
+
...mergedOptions.platform,
|
|
2204
|
+
_c: cache
|
|
2205
|
+
};
|
|
2206
|
+
return computePosition$1(reference, floating, {
|
|
2207
|
+
...mergedOptions,
|
|
2208
|
+
platform: platformWithCache
|
|
2209
|
+
});
|
|
2210
|
+
};
|
|
2211
|
+
|
|
2212
|
+
/* eslint-disable line-comment-position, no-inline-comments */
|
|
2213
|
+
|
|
2214
|
+
|
|
2215
|
+
const MAX_CONFIGURATION_COUNT = 10;
|
|
2216
|
+
|
|
2217
|
+
class AuroFloatingUI {
|
|
2218
|
+
/**
|
|
2219
|
+
* @private
|
|
2220
|
+
*/
|
|
2221
|
+
static isMousePressed = false;
|
|
2222
|
+
|
|
2223
|
+
/**
|
|
2224
|
+
* @private
|
|
2225
|
+
*/
|
|
2226
|
+
static isMousePressHandlerInitialized = false;
|
|
2227
|
+
|
|
2228
|
+
/**
|
|
2229
|
+
* @private
|
|
2230
|
+
*/
|
|
2231
|
+
static setupMousePressChecker() {
|
|
2232
|
+
if (
|
|
2233
|
+
!AuroFloatingUI.isMousePressHandlerInitialized &&
|
|
2234
|
+
window &&
|
|
2235
|
+
window.addEventListener
|
|
2236
|
+
) {
|
|
2237
|
+
AuroFloatingUI.isMousePressHandlerInitialized = true;
|
|
2238
|
+
|
|
2239
|
+
// Track timeout for isMousePressed reset to avoid race conditions
|
|
2240
|
+
if (!AuroFloatingUI._mousePressedTimeout) {
|
|
2241
|
+
AuroFloatingUI._mousePressedTimeout = null;
|
|
2242
|
+
}
|
|
2243
|
+
const mouseEventGlobalHandler = (event) => {
|
|
2244
|
+
const isPressed = event.type === "mousedown";
|
|
2245
|
+
if (isPressed) {
|
|
2246
|
+
// Clear any pending timeout to prevent race condition
|
|
2247
|
+
if (AuroFloatingUI._mousePressedTimeout !== null) {
|
|
2248
|
+
clearTimeout(AuroFloatingUI._mousePressedTimeout);
|
|
2249
|
+
AuroFloatingUI._mousePressedTimeout = null;
|
|
2250
|
+
}
|
|
2251
|
+
if (!AuroFloatingUI.isMousePressed) {
|
|
2252
|
+
AuroFloatingUI.isMousePressed = true;
|
|
2253
|
+
}
|
|
2254
|
+
} else if (AuroFloatingUI.isMousePressed && !isPressed) {
|
|
2255
|
+
// Schedule reset and track timeout ID
|
|
2256
|
+
AuroFloatingUI._mousePressedTimeout = setTimeout(() => {
|
|
2257
|
+
AuroFloatingUI.isMousePressed = false;
|
|
2258
|
+
AuroFloatingUI._mousePressedTimeout = null;
|
|
2259
|
+
}, 0);
|
|
2260
|
+
}
|
|
2261
|
+
};
|
|
2262
|
+
|
|
2263
|
+
window.addEventListener("mousedown", mouseEventGlobalHandler);
|
|
2264
|
+
window.addEventListener("mouseup", mouseEventGlobalHandler);
|
|
2265
|
+
}
|
|
2266
|
+
}
|
|
2267
|
+
|
|
2268
|
+
static openingQueue = [];
|
|
2269
|
+
|
|
2270
|
+
/**
|
|
2271
|
+
* Returns the currently active floating UI instance that should be considered "on top".
|
|
2272
|
+
* Prefers any globally tracked expanded dropdown or floater, falling back to the last entry in the local opening queue.
|
|
2273
|
+
*
|
|
2274
|
+
* This getter first checks the global document references for a visible floating UI and returns it if found.
|
|
2275
|
+
* If the global reference is stale or not visible, it clears those references and instead returns the most recently opened instance from `openingQueue`, or `null` if none exist.
|
|
2276
|
+
*
|
|
2277
|
+
* Side effect: clears stale global refs so callers don't need a separate cleanup step.
|
|
2278
|
+
*/
|
|
2279
|
+
static get topOpeningFloatingUI() {
|
|
2280
|
+
const existedVisibleFloatingUI =
|
|
2281
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
2282
|
+
if (
|
|
2283
|
+
existedVisibleFloatingUI &&
|
|
2284
|
+
existedVisibleFloatingUI.element.isPopoverVisible
|
|
2285
|
+
) {
|
|
2286
|
+
return existedVisibleFloatingUI;
|
|
2287
|
+
}
|
|
2288
|
+
|
|
2289
|
+
// clear existedVisibleFloatingUI in case it's not flushed well when it hidden by other reasons (e.g. noToggle + click)
|
|
2290
|
+
document.expandedAuroFormkitDropdown = null;
|
|
2291
|
+
document.expandedAuroFloater = null;
|
|
2292
|
+
|
|
2293
|
+
return AuroFloatingUI.openingQueue.length > 0
|
|
2294
|
+
? AuroFloatingUI.openingQueue[AuroFloatingUI.openingQueue.length - 1]
|
|
2295
|
+
: null;
|
|
2296
|
+
}
|
|
2297
|
+
|
|
2298
|
+
constructor(element, behavior) {
|
|
2299
|
+
this.element = element;
|
|
2300
|
+
this.behavior = behavior;
|
|
2301
|
+
|
|
2302
|
+
// Store event listener references for cleanup
|
|
2303
|
+
this.focusHandler = null;
|
|
2304
|
+
this.clickHandler = null;
|
|
2305
|
+
this.keyDownHandler = null;
|
|
2306
|
+
this.touchHandler = null;
|
|
2307
|
+
|
|
2308
|
+
/**
|
|
2309
|
+
* @private
|
|
2310
|
+
*/
|
|
2311
|
+
this.enableKeyboardHandling = true;
|
|
2312
|
+
|
|
2313
|
+
/**
|
|
2314
|
+
* @private
|
|
2315
|
+
*/
|
|
2316
|
+
this.configureTrial = 0;
|
|
2317
|
+
|
|
2318
|
+
/**
|
|
2319
|
+
* @private
|
|
2320
|
+
*/
|
|
2321
|
+
this.eventPrefix = undefined;
|
|
2322
|
+
|
|
2323
|
+
/**
|
|
2324
|
+
* @private
|
|
2325
|
+
*/
|
|
2326
|
+
this.id = undefined;
|
|
2327
|
+
|
|
2328
|
+
/**
|
|
2329
|
+
* @private
|
|
2330
|
+
*/
|
|
2331
|
+
this.showing = false;
|
|
2332
|
+
|
|
2333
|
+
/**
|
|
2334
|
+
* @private
|
|
2335
|
+
*/
|
|
2336
|
+
this.strategy = undefined;
|
|
2337
|
+
}
|
|
2338
|
+
|
|
2339
|
+
/**
|
|
2340
|
+
* Mirrors the size of the bibSizer element to the bib content.
|
|
2341
|
+
* Copies the width, height, max-width, and max-height styles from the bibSizer element to the bib content container.
|
|
2342
|
+
* This ensures that the bib content has the same dimensions as the sizer element.
|
|
2343
|
+
*/
|
|
2344
|
+
mirrorSize() {
|
|
2345
|
+
const element = this.element;
|
|
2346
|
+
if (!element) {
|
|
2347
|
+
return;
|
|
2348
|
+
}
|
|
2349
|
+
|
|
2350
|
+
// mirror the boxsize from bibSizer
|
|
2351
|
+
if (element.bibSizer && element.matchWidth && element.bib?.shadowRoot) {
|
|
2352
|
+
const sizerStyle = window.getComputedStyle(element.bibSizer);
|
|
2353
|
+
const bibContent = element.bib.shadowRoot.querySelector(".container");
|
|
2354
|
+
if (!bibContent) {
|
|
2355
|
+
return;
|
|
2356
|
+
}
|
|
2357
|
+
|
|
2358
|
+
if (sizerStyle.width !== "0px") {
|
|
2359
|
+
bibContent.style.width = sizerStyle.width;
|
|
2360
|
+
}
|
|
2361
|
+
if (sizerStyle.height !== "0px") {
|
|
2362
|
+
bibContent.style.height = sizerStyle.height;
|
|
2363
|
+
}
|
|
2364
|
+
bibContent.style.maxWidth = sizerStyle.maxWidth;
|
|
2365
|
+
bibContent.style.maxHeight = sizerStyle.maxHeight;
|
|
2366
|
+
}
|
|
2367
|
+
}
|
|
2368
|
+
|
|
2369
|
+
/**
|
|
2370
|
+
* @private
|
|
2371
|
+
* Determines the positioning strategy based on the current viewport size and mobile breakpoint.
|
|
2372
|
+
*
|
|
2373
|
+
* This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint
|
|
2374
|
+
* defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'.
|
|
2375
|
+
*
|
|
2376
|
+
* @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
|
|
2377
|
+
*/
|
|
2378
|
+
getPositioningStrategy() {
|
|
2379
|
+
const element = this.element;
|
|
2380
|
+
if (!element) {
|
|
2381
|
+
return "floating";
|
|
2382
|
+
}
|
|
2383
|
+
|
|
2384
|
+
const breakpoint =
|
|
2385
|
+
element.bib?.mobileFullscreenBreakpoint ||
|
|
2386
|
+
element.floaterConfig?.fullscreenBreakpoint;
|
|
2387
|
+
switch (this.behavior) {
|
|
2388
|
+
case "tooltip":
|
|
2389
|
+
return "floating";
|
|
2390
|
+
case "dialog":
|
|
2391
|
+
case "drawer":
|
|
2392
|
+
if (breakpoint) {
|
|
2393
|
+
const smallerThanBreakpoint = window.matchMedia(
|
|
2394
|
+
`(max-width: ${breakpoint})`,
|
|
2395
|
+
).matches;
|
|
2396
|
+
|
|
2397
|
+
this.element.expanded = smallerThanBreakpoint;
|
|
2398
|
+
|
|
2399
|
+
if (this.element.nested) {
|
|
2400
|
+
return "cover";
|
|
2401
|
+
}
|
|
2402
|
+
return smallerThanBreakpoint || this.element.modal
|
|
2403
|
+
? "fullscreen"
|
|
2404
|
+
: "dialog";
|
|
2405
|
+
}
|
|
2406
|
+
return "dialog";
|
|
2407
|
+
case "dropdown":
|
|
2408
|
+
case undefined:
|
|
2409
|
+
case null:
|
|
2410
|
+
if (breakpoint) {
|
|
2411
|
+
const smallerThanBreakpoint = window.matchMedia(
|
|
2412
|
+
`(max-width: ${breakpoint})`,
|
|
2413
|
+
).matches;
|
|
2414
|
+
if (smallerThanBreakpoint) {
|
|
2415
|
+
return "fullscreen";
|
|
2416
|
+
}
|
|
2417
|
+
}
|
|
2418
|
+
return "floating";
|
|
2419
|
+
default:
|
|
2420
|
+
return this.behavior;
|
|
2421
|
+
}
|
|
2422
|
+
}
|
|
2423
|
+
|
|
2424
|
+
/**
|
|
2425
|
+
* @private
|
|
2426
|
+
* Positions the bib element based on the current configuration and positioning strategy.
|
|
2427
|
+
*
|
|
2428
|
+
* This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly.
|
|
2429
|
+
* It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element,
|
|
2430
|
+
* and applies the calculated position to the bib's style.
|
|
2431
|
+
*/
|
|
2432
|
+
position() {
|
|
2433
|
+
const element = this.element;
|
|
2434
|
+
if (!element) {
|
|
2435
|
+
return;
|
|
2436
|
+
}
|
|
2437
|
+
|
|
2438
|
+
const strategy = this.getPositioningStrategy();
|
|
2439
|
+
this.configureBibStrategy(strategy);
|
|
2440
|
+
|
|
2441
|
+
if (strategy === "floating") {
|
|
2442
|
+
if (!element.trigger || !element.bib) {
|
|
2443
|
+
return;
|
|
2444
|
+
}
|
|
2445
|
+
|
|
2446
|
+
this.mirrorSize();
|
|
2447
|
+
// Define the middlware for the floater configuration
|
|
2448
|
+
const middleware = [
|
|
2449
|
+
offset(element.floaterConfig?.offset || 0),
|
|
2450
|
+
...(element.floaterConfig?.shift ? [shift()] : []), // Add shift middleware if shift is enabled.
|
|
2451
|
+
...(element.floaterConfig?.flip ? [flip()] : []), // Add flip middleware if flip is enabled.
|
|
2452
|
+
...(element.floaterConfig?.autoPlacement ? [autoPlacement()] : []), // Add autoPlacement middleware if autoPlacement is enabled.
|
|
2453
|
+
];
|
|
2454
|
+
|
|
2455
|
+
// Compute the position of the bib
|
|
2456
|
+
computePosition(element.trigger, element.bib, {
|
|
2457
|
+
strategy: element.floaterConfig?.strategy || "fixed",
|
|
2458
|
+
placement: element.floaterConfig?.placement,
|
|
2459
|
+
middleware: middleware || [],
|
|
2460
|
+
}).then(({ x, y }) => {
|
|
2461
|
+
// eslint-disable-line id-length
|
|
2462
|
+
const currentElement = this.element;
|
|
2463
|
+
if (!currentElement?.bib) {
|
|
2464
|
+
return;
|
|
2465
|
+
}
|
|
2466
|
+
|
|
2467
|
+
Object.assign(currentElement.bib.style, {
|
|
2468
|
+
left: `${x}px`,
|
|
2469
|
+
top: `${y}px`,
|
|
2470
|
+
});
|
|
2471
|
+
});
|
|
2472
|
+
} else if (strategy === "cover") {
|
|
2473
|
+
if (!element.parentNode || !element.bib) {
|
|
2474
|
+
return;
|
|
2475
|
+
}
|
|
2476
|
+
|
|
2477
|
+
// Compute the position of the bib
|
|
2478
|
+
computePosition(element.parentNode, element.bib, {
|
|
2479
|
+
placement: "bottom-start",
|
|
2480
|
+
}).then(({ x, y }) => {
|
|
2481
|
+
// eslint-disable-line id-length
|
|
2482
|
+
const currentElement = this.element;
|
|
2483
|
+
if (!currentElement?.bib || !currentElement.parentNode) {
|
|
2484
|
+
return;
|
|
2485
|
+
}
|
|
2486
|
+
|
|
2487
|
+
Object.assign(currentElement.bib.style, {
|
|
2488
|
+
left: `${x}px`,
|
|
2489
|
+
top: `${y - currentElement.parentNode.offsetHeight}px`,
|
|
2490
|
+
width: `${currentElement.parentNode.offsetWidth}px`,
|
|
2491
|
+
height: `${currentElement.parentNode.offsetHeight}px`,
|
|
2492
|
+
});
|
|
2493
|
+
});
|
|
2494
|
+
}
|
|
2495
|
+
}
|
|
2496
|
+
|
|
2497
|
+
/**
|
|
2498
|
+
* @private
|
|
2499
|
+
* Controls whether to lock the scrolling for the document's body.
|
|
2500
|
+
* @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
|
|
2501
|
+
*/
|
|
2502
|
+
lockScroll(lock = true) {
|
|
2503
|
+
const element = this.element;
|
|
2504
|
+
|
|
2505
|
+
if (!element?.bib) {
|
|
2506
|
+
return;
|
|
2507
|
+
}
|
|
2508
|
+
|
|
2509
|
+
const dialog = (
|
|
2510
|
+
element.bib?.shadowRoot ||
|
|
2511
|
+
element.bib ||
|
|
2512
|
+
element
|
|
2513
|
+
).querySelector("dialog");
|
|
2514
|
+
if (dialog) {
|
|
2515
|
+
if (lock) {
|
|
2516
|
+
dialog.setAttribute("aria-modal", "true");
|
|
2517
|
+
} else {
|
|
2518
|
+
dialog.removeAttribute("aria-modal");
|
|
2519
|
+
}
|
|
2520
|
+
}
|
|
2521
|
+
|
|
2522
|
+
if (lock) {
|
|
2523
|
+
if (!this._scrollLocked) {
|
|
2524
|
+
this._scrollLocked = true;
|
|
2525
|
+
this._savedScrollY = window.scrollY;
|
|
2526
|
+
this._savedScrollStyles = {
|
|
2527
|
+
rootScrollbarGutter: document.documentElement.style.scrollbarGutter,
|
|
2528
|
+
rootOverflow: document.documentElement.style.overflow,
|
|
2529
|
+
bodyOverflow: document.body.style.overflow,
|
|
2530
|
+
bodyPosition: document.body.style.position,
|
|
2531
|
+
bodyTop: document.body.style.top,
|
|
2532
|
+
bodyWidth: document.body.style.width,
|
|
2533
|
+
bibTransform: element?.bib?.style.transform,
|
|
2534
|
+
};
|
|
2535
|
+
document.documentElement.style.scrollbarGutter = "stable";
|
|
2536
|
+
document.documentElement.style.overflow = "hidden";
|
|
2537
|
+
document.body.style.overflow = "hidden";
|
|
2538
|
+
|
|
2539
|
+
// position:fixed is the only way to block VoiceOver three-finger swipe,
|
|
2540
|
+
// which bypasses both overflow:hidden and touchmove preventDefault.
|
|
2541
|
+
document.body.style.position = "fixed";
|
|
2542
|
+
document.body.style.top = `-${this._savedScrollY}px`;
|
|
2543
|
+
document.body.style.width = "100%";
|
|
2544
|
+
|
|
2545
|
+
// Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
|
|
2546
|
+
if (element?.bib && window?.visualViewport?.offsetTop) {
|
|
2547
|
+
element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
|
|
2548
|
+
}
|
|
2549
|
+
|
|
2550
|
+
this.lockTouchScroll(true);
|
|
2551
|
+
}
|
|
2552
|
+
} else {
|
|
2553
|
+
if (this._scrollLocked) {
|
|
2554
|
+
document.documentElement.style.scrollbarGutter =
|
|
2555
|
+
this._savedScrollStyles?.rootScrollbarGutter ?? "";
|
|
2556
|
+
document.documentElement.style.overflow =
|
|
2557
|
+
this._savedScrollStyles?.rootOverflow ?? "";
|
|
2558
|
+
document.body.style.overflow =
|
|
2559
|
+
this._savedScrollStyles?.bodyOverflow ?? "";
|
|
2560
|
+
document.body.style.position =
|
|
2561
|
+
this._savedScrollStyles?.bodyPosition ?? "";
|
|
2562
|
+
document.body.style.top = this._savedScrollStyles?.bodyTop ?? "";
|
|
2563
|
+
document.body.style.width = this._savedScrollStyles?.bodyWidth ?? "";
|
|
2564
|
+
if (element?.bib) {
|
|
2565
|
+
element.bib.style.transform =
|
|
2566
|
+
this._savedScrollStyles?.bibTransform ?? "";
|
|
2567
|
+
}
|
|
2568
|
+
window.scrollTo(0, this._savedScrollY || 0);
|
|
2569
|
+
this._savedScrollY = undefined;
|
|
2570
|
+
this._savedScrollStyles = undefined;
|
|
2571
|
+
this._scrollLocked = false;
|
|
2572
|
+
|
|
2573
|
+
this.lockTouchScroll(false);
|
|
2574
|
+
}
|
|
2575
|
+
}
|
|
2576
|
+
}
|
|
2577
|
+
|
|
2578
|
+
/**
|
|
2579
|
+
* Locks page-level touch scroll while bib is open.
|
|
2580
|
+
* Walks composedPath() so scrollable children inside the dialog still scroll.
|
|
2581
|
+
* @private
|
|
2582
|
+
*/
|
|
2583
|
+
lockTouchScroll(lock = true) {
|
|
2584
|
+
if (lock) {
|
|
2585
|
+
if (this._boundTouchMoveHandler) {
|
|
2586
|
+
return;
|
|
2587
|
+
}
|
|
2588
|
+
this._boundTouchMoveHandler = (e) => {
|
|
2589
|
+
const path = e.composedPath();
|
|
2590
|
+
const insideScrollable = path.some(
|
|
2591
|
+
(el) =>
|
|
2592
|
+
el !== document &&
|
|
2593
|
+
el !== document.documentElement &&
|
|
2594
|
+
el !== document.body &&
|
|
2595
|
+
(el.scrollHeight > el.clientHeight ||
|
|
2596
|
+
el.scrollWidth > el.clientWidth),
|
|
2597
|
+
);
|
|
2598
|
+
if (!insideScrollable) {
|
|
2599
|
+
e.preventDefault();
|
|
2600
|
+
}
|
|
2601
|
+
};
|
|
2602
|
+
document.addEventListener("touchmove", this._boundTouchMoveHandler, {
|
|
2603
|
+
passive: false,
|
|
2604
|
+
});
|
|
2605
|
+
} else if (this._boundTouchMoveHandler) {
|
|
2606
|
+
document.removeEventListener("touchmove", this._boundTouchMoveHandler, {
|
|
2607
|
+
passive: false,
|
|
2608
|
+
});
|
|
2609
|
+
this._boundTouchMoveHandler = undefined;
|
|
2610
|
+
}
|
|
2611
|
+
}
|
|
2612
|
+
|
|
2613
|
+
/**
|
|
2614
|
+
* @private
|
|
2615
|
+
* Configures the bib element's display strategy.
|
|
2616
|
+
*
|
|
2617
|
+
* Sets the bib to fullscreen or floating mode based on the provided strategy.
|
|
2618
|
+
* Dispatches a 'strategy-change' event if the strategy changes.
|
|
2619
|
+
*
|
|
2620
|
+
* @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
|
|
2621
|
+
*/
|
|
2622
|
+
configureBibStrategy(value) {
|
|
2623
|
+
const element = this.element;
|
|
2624
|
+
if (!element?.bib) {
|
|
2625
|
+
return;
|
|
2626
|
+
}
|
|
2627
|
+
|
|
2628
|
+
if (value === "fullscreen" || value === "dialog") {
|
|
2629
|
+
element.isBibFullscreen = true;
|
|
2630
|
+
// reset the prev position
|
|
2631
|
+
element.bib.setAttribute("isfullscreen", "");
|
|
2632
|
+
element.bib.style.position = "fixed";
|
|
2633
|
+
element.bib.style.top = "0px";
|
|
2634
|
+
element.bib.style.left = "0px";
|
|
2635
|
+
element.bib.style.width = "";
|
|
2636
|
+
element.bib.style.height = "";
|
|
2637
|
+
element.style.contain = "";
|
|
2638
|
+
|
|
2639
|
+
// reset the size that was mirroring `size` css-part
|
|
2640
|
+
const bibContent = element.bib.shadowRoot?.querySelector(".container");
|
|
2641
|
+
if (bibContent) {
|
|
2642
|
+
bibContent.style.width = "";
|
|
2643
|
+
bibContent.style.height = "";
|
|
2644
|
+
bibContent.style.maxWidth = "";
|
|
2645
|
+
bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
|
|
2646
|
+
this.configureTrial = 0;
|
|
2647
|
+
} else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
|
|
2648
|
+
this.configureTrial += 1;
|
|
2649
|
+
|
|
2650
|
+
setTimeout(() => {
|
|
2651
|
+
this.configureBibStrategy(value);
|
|
2652
|
+
}, 0);
|
|
2653
|
+
}
|
|
2654
|
+
|
|
2655
|
+
if (element.isPopoverVisible) {
|
|
2656
|
+
this.lockScroll(value === "fullscreen");
|
|
2657
|
+
}
|
|
2658
|
+
} else {
|
|
2659
|
+
element.bib.style.position = "";
|
|
2660
|
+
element.bib.removeAttribute("isfullscreen");
|
|
2661
|
+
element.isBibFullscreen = false;
|
|
2662
|
+
element.style.contain = "layout";
|
|
2663
|
+
}
|
|
2664
|
+
|
|
2665
|
+
const isChanged = this.strategy && this.strategy !== value;
|
|
2666
|
+
this.strategy = value;
|
|
2667
|
+
if (isChanged) {
|
|
2668
|
+
const event = new CustomEvent(
|
|
2669
|
+
this.eventPrefix
|
|
2670
|
+
? `${this.eventPrefix}-strategy-change`
|
|
2671
|
+
: "strategy-change",
|
|
2672
|
+
{
|
|
2673
|
+
detail: {
|
|
2674
|
+
value,
|
|
2675
|
+
},
|
|
2676
|
+
composed: true,
|
|
2677
|
+
},
|
|
2678
|
+
);
|
|
2679
|
+
|
|
2680
|
+
element.dispatchEvent(event);
|
|
2681
|
+
}
|
|
2682
|
+
}
|
|
2683
|
+
|
|
2684
|
+
updateState() {
|
|
2685
|
+
const element = this.element;
|
|
2686
|
+
if (!element) {
|
|
2687
|
+
return;
|
|
2688
|
+
}
|
|
2689
|
+
|
|
2690
|
+
const isVisible = element.isPopoverVisible;
|
|
2691
|
+
if (!isVisible) {
|
|
2692
|
+
this.cleanupHideHandlers();
|
|
2693
|
+
try {
|
|
2694
|
+
element.cleanup?.();
|
|
2695
|
+
} catch (error) {
|
|
2696
|
+
// Do nothing
|
|
2697
|
+
}
|
|
2698
|
+
}
|
|
2699
|
+
}
|
|
2700
|
+
|
|
2701
|
+
/**
|
|
2702
|
+
* @private
|
|
2703
|
+
* getting called on 'blur' in trigger or `focusin` in document
|
|
2704
|
+
*
|
|
2705
|
+
* Hides the bib if focus moves outside of the trigger or bib, unless a 'noHideOnThisFocusLoss' flag is set.
|
|
2706
|
+
* This method checks if the currently active element is still within the trigger or bib.
|
|
2707
|
+
* If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
|
|
2708
|
+
*/
|
|
2709
|
+
handleFocusLoss() {
|
|
2710
|
+
const element = this.element;
|
|
2711
|
+
if (!element?.bib) {
|
|
2712
|
+
return;
|
|
2713
|
+
}
|
|
2714
|
+
|
|
2715
|
+
// if mouse is being pressed, skip and let click event to handle the action
|
|
2716
|
+
if (AuroFloatingUI.isMousePressed) {
|
|
2717
|
+
return;
|
|
2718
|
+
}
|
|
2719
|
+
|
|
2720
|
+
if (
|
|
2721
|
+
element.noHideOnThisFocusLoss ||
|
|
2722
|
+
element.hasAttribute("noHideOnThisFocusLoss")
|
|
2723
|
+
) {
|
|
2724
|
+
return;
|
|
2725
|
+
}
|
|
2726
|
+
|
|
2727
|
+
// if focus is still inside of trigger or bib, do not close
|
|
2728
|
+
if (element.matches(":focus") || element.matches(":focus-within")) {
|
|
2729
|
+
return;
|
|
2730
|
+
}
|
|
2731
|
+
|
|
2732
|
+
// if fullscreen bib is in fullscreen mode, do not close
|
|
2733
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
2734
|
+
return;
|
|
2735
|
+
}
|
|
2736
|
+
|
|
2737
|
+
this.hideBib("keydown");
|
|
2738
|
+
}
|
|
2739
|
+
|
|
2740
|
+
setupHideHandlers() {
|
|
2741
|
+
const element = this.element;
|
|
2742
|
+
if (!element) {
|
|
2743
|
+
return;
|
|
2744
|
+
}
|
|
2745
|
+
|
|
2746
|
+
// Define handlers & store references
|
|
2747
|
+
this.focusHandler = () => this.handleFocusLoss();
|
|
2748
|
+
|
|
2749
|
+
this.clickHandler = (evt) => {
|
|
2750
|
+
const element = this.element;
|
|
2751
|
+
if (!element?.bib) {
|
|
2752
|
+
return;
|
|
2753
|
+
}
|
|
2754
|
+
|
|
2755
|
+
// When the bib is fullscreen (modal dialog), don't close on outside
|
|
2756
|
+
// clicks. VoiceOver's synthetic click events inside a top-layer modal
|
|
2757
|
+
// <dialog> may not include the bib in composedPath(), causing false
|
|
2758
|
+
// positives. This mirrors the fullscreen guard in handleFocusLoss().
|
|
2759
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
2760
|
+
return;
|
|
2761
|
+
}
|
|
2762
|
+
|
|
2763
|
+
if (
|
|
2764
|
+
(!evt.composedPath().includes(element.trigger) &&
|
|
2765
|
+
!evt.composedPath().includes(element.bib)) ||
|
|
2766
|
+
(element.bib.backdrop &&
|
|
2767
|
+
evt.composedPath().includes(element.bib.backdrop))
|
|
2768
|
+
) {
|
|
2769
|
+
const existedVisibleFloatingUI =
|
|
2770
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
2771
|
+
|
|
2772
|
+
if (
|
|
2773
|
+
existedVisibleFloatingUI &&
|
|
2774
|
+
existedVisibleFloatingUI.element.isPopoverVisible
|
|
2775
|
+
) {
|
|
2776
|
+
// if something else is open, close that
|
|
2777
|
+
existedVisibleFloatingUI.hideBib();
|
|
2778
|
+
document.expandedAuroFormkitDropdown = null;
|
|
2779
|
+
document.expandedAuroFloater = this;
|
|
2780
|
+
} else {
|
|
2781
|
+
this.hideBib("click");
|
|
2782
|
+
}
|
|
2783
|
+
}
|
|
2784
|
+
};
|
|
2785
|
+
|
|
2786
|
+
// ESC key handler
|
|
2787
|
+
this.keyDownHandler = (evt) => {
|
|
2788
|
+
const element = this.element;
|
|
2789
|
+
if (!element) {
|
|
2790
|
+
return;
|
|
2791
|
+
}
|
|
2792
|
+
|
|
2793
|
+
if (evt.key === "Escape" && element.isPopoverVisible) {
|
|
2794
|
+
const existedVisibleFloatingUI =
|
|
2795
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
2796
|
+
if (
|
|
2797
|
+
existedVisibleFloatingUI &&
|
|
2798
|
+
existedVisibleFloatingUI !== this &&
|
|
2799
|
+
existedVisibleFloatingUI.element.isPopoverVisible
|
|
2800
|
+
) {
|
|
2801
|
+
// if something else is open, let it handle itself
|
|
2802
|
+
return;
|
|
2803
|
+
}
|
|
2804
|
+
this.hideBib("keydown");
|
|
2805
|
+
}
|
|
2806
|
+
};
|
|
2807
|
+
|
|
2808
|
+
if (this.behavior !== "drawer" && this.behavior !== "dialog") {
|
|
2809
|
+
// Add event listeners using the stored references
|
|
2810
|
+
document.addEventListener("focusin", this.focusHandler);
|
|
2811
|
+
}
|
|
2812
|
+
|
|
2813
|
+
if (this.enableKeyboardHandling) {
|
|
2814
|
+
document.addEventListener("keydown", this.keyDownHandler);
|
|
2815
|
+
}
|
|
2816
|
+
|
|
2817
|
+
// send this task to the end of queue to prevent conflicting
|
|
2818
|
+
// it conflicts if showBib gets call from a button that's not this.element.trigger
|
|
2819
|
+
setTimeout(() => {
|
|
2820
|
+
window.addEventListener("click", this.clickHandler);
|
|
2821
|
+
}, 0);
|
|
2822
|
+
|
|
2823
|
+
// iOS Safari does not fire `click` on non-interactive elements, so
|
|
2824
|
+
// tapping an inert backdrop never reaches the click handler above.
|
|
2825
|
+
// Mirror the same outside-tap logic with a passive touchstart listener.
|
|
2826
|
+
this.touchHandler = (evt) => {
|
|
2827
|
+
const element = this.element;
|
|
2828
|
+
if (!element?.bib) {
|
|
2829
|
+
return;
|
|
2830
|
+
}
|
|
2831
|
+
|
|
2832
|
+
// fullscreen (modal) dialog handles its own dismissal
|
|
2833
|
+
if (element.bib.hasAttribute("isfullscreen")) {
|
|
2834
|
+
return;
|
|
2835
|
+
}
|
|
2836
|
+
|
|
2837
|
+
const path = evt.composedPath();
|
|
2838
|
+
if (!path.includes(element.trigger) && !path.includes(element.bib)) {
|
|
2839
|
+
this.hideBib("click");
|
|
2840
|
+
}
|
|
2841
|
+
};
|
|
2842
|
+
|
|
2843
|
+
window.addEventListener("touchstart", this.touchHandler, { passive: true });
|
|
2844
|
+
}
|
|
2845
|
+
|
|
2846
|
+
cleanupHideHandlers() {
|
|
2847
|
+
// Remove event listeners if they exist
|
|
2848
|
+
|
|
2849
|
+
if (this.focusHandler) {
|
|
2850
|
+
document.removeEventListener("focusin", this.focusHandler);
|
|
2851
|
+
this.focusHandler = null;
|
|
2852
|
+
}
|
|
2853
|
+
|
|
2854
|
+
if (this.clickHandler) {
|
|
2855
|
+
window.removeEventListener("click", this.clickHandler);
|
|
2856
|
+
this.clickHandler = null;
|
|
2857
|
+
}
|
|
2858
|
+
|
|
2859
|
+
if (this.touchHandler) {
|
|
2860
|
+
window.removeEventListener("touchstart", this.touchHandler);
|
|
2861
|
+
this.touchHandler = null;
|
|
2862
|
+
}
|
|
2863
|
+
|
|
2864
|
+
if (this.keyDownHandler) {
|
|
2865
|
+
document.removeEventListener("keydown", this.keyDownHandler);
|
|
2866
|
+
this.keyDownHandler = null;
|
|
2867
|
+
}
|
|
2868
|
+
}
|
|
2869
|
+
|
|
2870
|
+
handleUpdate(changedProperties) {
|
|
2871
|
+
if (changedProperties.has("isPopoverVisible")) {
|
|
2872
|
+
this.updateState();
|
|
2873
|
+
}
|
|
2874
|
+
}
|
|
2875
|
+
|
|
2876
|
+
updateCurrentExpandedDropdown() {
|
|
2877
|
+
if (!this.element) {
|
|
2878
|
+
return;
|
|
2879
|
+
}
|
|
2880
|
+
|
|
2881
|
+
// Close any other dropdown that is already open
|
|
2882
|
+
const existedVisibleFloatingUI =
|
|
2883
|
+
document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
|
|
2884
|
+
if (
|
|
2885
|
+
existedVisibleFloatingUI &&
|
|
2886
|
+
existedVisibleFloatingUI !== this &&
|
|
2887
|
+
existedVisibleFloatingUI.element.isPopoverVisible &&
|
|
2888
|
+
existedVisibleFloatingUI.eventPrefix === this.eventPrefix
|
|
2889
|
+
) {
|
|
2890
|
+
existedVisibleFloatingUI.hideBib();
|
|
2891
|
+
}
|
|
2892
|
+
|
|
2893
|
+
document.expandedAuroFloater = this;
|
|
2894
|
+
}
|
|
2895
|
+
|
|
2896
|
+
showBib() {
|
|
2897
|
+
const element = this.element;
|
|
2898
|
+
if (!element) {
|
|
2899
|
+
return;
|
|
2900
|
+
}
|
|
2901
|
+
|
|
2902
|
+
if (!element.bib || (!element.trigger && !element.parentNode)) {
|
|
2903
|
+
return;
|
|
2904
|
+
}
|
|
2905
|
+
|
|
2906
|
+
if (!element.disabled && !this.showing) {
|
|
2907
|
+
this.updateCurrentExpandedDropdown();
|
|
2908
|
+
element.triggerChevron?.setAttribute("data-expanded", true);
|
|
2909
|
+
|
|
2910
|
+
// prevent double showing: isPopovervisible gets first and showBib gets called later
|
|
2911
|
+
if (!this.showing) {
|
|
2912
|
+
if (!element.modal) {
|
|
2913
|
+
this.setupHideHandlers();
|
|
2914
|
+
}
|
|
2915
|
+
this.showing = true;
|
|
2916
|
+
element.isPopoverVisible = true;
|
|
2917
|
+
this.position();
|
|
2918
|
+
this.dispatchEventDropdownToggle();
|
|
2919
|
+
}
|
|
2920
|
+
|
|
2921
|
+
// Setup auto update to handle resize and scroll
|
|
2922
|
+
element.cleanup = autoUpdate(
|
|
2923
|
+
element.trigger || element.parentNode,
|
|
2924
|
+
element.bib,
|
|
2925
|
+
() => {
|
|
2926
|
+
this.position();
|
|
2927
|
+
},
|
|
2928
|
+
);
|
|
2929
|
+
|
|
2930
|
+
const idx = AuroFloatingUI.openingQueue.indexOf(this);
|
|
2931
|
+
if (idx > -1) {
|
|
2932
|
+
AuroFloatingUI.openingQueue.splice(idx, 1);
|
|
2933
|
+
}
|
|
2934
|
+
AuroFloatingUI.openingQueue.push(this);
|
|
2935
|
+
}
|
|
2936
|
+
}
|
|
2937
|
+
|
|
2938
|
+
/**
|
|
2939
|
+
* Hides the floating UI element.
|
|
2940
|
+
* @param {String} eventType - The event type that triggered the hiding action.
|
|
2941
|
+
*/
|
|
2942
|
+
hideBib(eventType = "unknown") {
|
|
2943
|
+
const element = this.element;
|
|
2944
|
+
if (!element) {
|
|
2945
|
+
return;
|
|
2946
|
+
}
|
|
2947
|
+
|
|
2948
|
+
if (element.disabled) {
|
|
2949
|
+
return;
|
|
2950
|
+
}
|
|
2951
|
+
|
|
2952
|
+
// noToggle dropdowns should not close when the trigger is clicked (the
|
|
2953
|
+
// "toggle" behavior), but they CAN still close via other interactions like
|
|
2954
|
+
// Escape key or focus loss.
|
|
2955
|
+
if (element.noToggle && eventType === "click") {
|
|
2956
|
+
return;
|
|
2957
|
+
}
|
|
2958
|
+
|
|
2959
|
+
this.lockScroll(false);
|
|
2960
|
+
element.triggerChevron?.removeAttribute("data-expanded");
|
|
2961
|
+
|
|
2962
|
+
if (element.isPopoverVisible) {
|
|
2963
|
+
element.isPopoverVisible = false;
|
|
2964
|
+
}
|
|
2965
|
+
if (this.showing) {
|
|
2966
|
+
this.cleanupHideHandlers();
|
|
2967
|
+
this.showing = false;
|
|
2968
|
+
this.dispatchEventDropdownToggle(eventType);
|
|
2969
|
+
}
|
|
2970
|
+
|
|
2971
|
+
// Only clear the global reference if the bib was actually hidden.
|
|
2972
|
+
// Clearing it when hideBib is blocked (e.g. noToggle + click) corrupts
|
|
2973
|
+
// the singleton state so other dropdowns can't detect this one is still open.
|
|
2974
|
+
document.expandedAuroFloater = null;
|
|
2975
|
+
const idx = AuroFloatingUI.openingQueue.indexOf(this);
|
|
2976
|
+
if (idx > -1) {
|
|
2977
|
+
AuroFloatingUI.openingQueue.splice(idx, 1);
|
|
2978
|
+
}
|
|
2979
|
+
}
|
|
2980
|
+
|
|
2981
|
+
/**
|
|
2982
|
+
* @private
|
|
2983
|
+
* @returns {void} Dispatches event with an object showing the state of the dropdown.
|
|
2984
|
+
* @param {String} eventType - The event type that triggered the toggle action.
|
|
2985
|
+
*/
|
|
2986
|
+
dispatchEventDropdownToggle(eventType) {
|
|
2987
|
+
const element = this.element;
|
|
2988
|
+
if (!element) {
|
|
2989
|
+
return;
|
|
2990
|
+
}
|
|
2991
|
+
|
|
2992
|
+
const event = new CustomEvent(
|
|
2993
|
+
this.eventPrefix ? `${this.eventPrefix}-toggled` : "toggled",
|
|
2994
|
+
{
|
|
2995
|
+
detail: {
|
|
2996
|
+
expanded: this.showing,
|
|
2997
|
+
eventType: eventType || "unknown",
|
|
2998
|
+
},
|
|
2999
|
+
composed: true,
|
|
3000
|
+
},
|
|
3001
|
+
);
|
|
3002
|
+
|
|
3003
|
+
element.dispatchEvent(event);
|
|
3004
|
+
}
|
|
3005
|
+
|
|
3006
|
+
handleClick() {
|
|
3007
|
+
const element = this.element;
|
|
3008
|
+
if (!element) {
|
|
3009
|
+
return;
|
|
3010
|
+
}
|
|
3011
|
+
|
|
3012
|
+
if (element.isPopoverVisible) {
|
|
3013
|
+
this.hideBib("click");
|
|
3014
|
+
} else {
|
|
3015
|
+
this.showBib();
|
|
3016
|
+
}
|
|
3017
|
+
|
|
3018
|
+
const event = new CustomEvent(
|
|
3019
|
+
this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick",
|
|
3020
|
+
{
|
|
3021
|
+
composed: true,
|
|
3022
|
+
detail: {
|
|
3023
|
+
expanded: element.isPopoverVisible,
|
|
3024
|
+
},
|
|
3025
|
+
},
|
|
3026
|
+
);
|
|
3027
|
+
|
|
3028
|
+
element.dispatchEvent(event);
|
|
3029
|
+
}
|
|
3030
|
+
|
|
3031
|
+
handleEvent(event) {
|
|
3032
|
+
const element = this.element;
|
|
3033
|
+
if (!element || element.disableEventShow) {
|
|
3034
|
+
return;
|
|
3035
|
+
}
|
|
3036
|
+
|
|
3037
|
+
switch (event.type) {
|
|
3038
|
+
case "keydown": {
|
|
3039
|
+
// Support both Enter and Space keys for accessibility
|
|
3040
|
+
// Space is included as it's expected behavior for interactive elements
|
|
3041
|
+
|
|
3042
|
+
const origin = event.composedPath()[0];
|
|
3043
|
+
if (
|
|
3044
|
+
event.key === "Enter" ||
|
|
3045
|
+
(event.key === " " && (!origin || origin.tagName !== "INPUT"))
|
|
3046
|
+
) {
|
|
3047
|
+
event.preventDefault();
|
|
3048
|
+
this.handleClick();
|
|
3049
|
+
}
|
|
3050
|
+
break;
|
|
3051
|
+
}
|
|
3052
|
+
case "mouseenter":
|
|
3053
|
+
if (element.hoverToggle) {
|
|
3054
|
+
this.showBib();
|
|
3055
|
+
}
|
|
3056
|
+
break;
|
|
3057
|
+
case "mouseleave":
|
|
3058
|
+
if (element.hoverToggle) {
|
|
3059
|
+
this.hideBib("mouseleave");
|
|
3060
|
+
}
|
|
3061
|
+
break;
|
|
3062
|
+
case "focus":
|
|
3063
|
+
if (element.focusShow) {
|
|
3064
|
+
/*
|
|
3065
|
+
This needs to better handle clicking that gives focus -
|
|
3066
|
+
currently it shows and then immediately hides the bib
|
|
3067
|
+
*/
|
|
3068
|
+
this.showBib();
|
|
3069
|
+
}
|
|
3070
|
+
break;
|
|
3071
|
+
case "blur":
|
|
3072
|
+
// send this task 100ms later queue to
|
|
3073
|
+
// wait a frame in case focus moves within the floating element/bib
|
|
3074
|
+
setTimeout(() => this.handleFocusLoss(), 0);
|
|
3075
|
+
break;
|
|
3076
|
+
case "click":
|
|
3077
|
+
if (document.activeElement === document.body) {
|
|
3078
|
+
event.currentTarget.focus();
|
|
3079
|
+
}
|
|
3080
|
+
this.handleClick();
|
|
3081
|
+
break;
|
|
3082
|
+
// Do nothing
|
|
3083
|
+
}
|
|
3084
|
+
}
|
|
3085
|
+
|
|
3086
|
+
/**
|
|
3087
|
+
* Manages the tabIndex of the trigger element based on its focusability.
|
|
3088
|
+
*
|
|
3089
|
+
* If the trigger element or any of its children are inherently focusable, the tabIndex of the component is set to -1.
|
|
3090
|
+
* This prevents the component itself from being focusable when the trigger element already handles focus.
|
|
3091
|
+
*/
|
|
3092
|
+
handleTriggerTabIndex() {
|
|
3093
|
+
const element = this.element;
|
|
3094
|
+
if (!element) {
|
|
3095
|
+
return;
|
|
3096
|
+
}
|
|
3097
|
+
|
|
3098
|
+
const focusableElementSelectors = [
|
|
3099
|
+
"a",
|
|
3100
|
+
"button",
|
|
3101
|
+
'input:not([type="hidden"])',
|
|
3102
|
+
"select",
|
|
3103
|
+
"textarea",
|
|
3104
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
3105
|
+
"auro-button",
|
|
3106
|
+
"auro-input",
|
|
3107
|
+
"auro-hyperlink",
|
|
3108
|
+
];
|
|
3109
|
+
|
|
3110
|
+
const triggerNode = element.querySelectorAll('[slot="trigger"]')[0];
|
|
3111
|
+
if (!triggerNode) {
|
|
3112
|
+
return;
|
|
3113
|
+
}
|
|
3114
|
+
const triggerNodeTagName = triggerNode.tagName.toLowerCase();
|
|
3115
|
+
|
|
3116
|
+
focusableElementSelectors.forEach((selector) => {
|
|
3117
|
+
// Check if the trigger node element is focusable
|
|
3118
|
+
if (triggerNodeTagName === selector) {
|
|
3119
|
+
element.tabIndex = -1;
|
|
3120
|
+
return;
|
|
3121
|
+
}
|
|
3122
|
+
|
|
3123
|
+
// Check if any child is focusable
|
|
3124
|
+
if (triggerNode.querySelector(selector)) {
|
|
3125
|
+
element.tabIndex = -1;
|
|
3126
|
+
}
|
|
3127
|
+
});
|
|
3128
|
+
}
|
|
3129
|
+
|
|
3130
|
+
/**
|
|
3131
|
+
*
|
|
3132
|
+
* @param {*} eventPrefix
|
|
3133
|
+
*/
|
|
3134
|
+
regenerateBibId() {
|
|
3135
|
+
const element = this.element;
|
|
3136
|
+
if (!element) {
|
|
3137
|
+
return;
|
|
3138
|
+
}
|
|
3139
|
+
|
|
3140
|
+
this.id = element.getAttribute("id");
|
|
3141
|
+
if (!this.id) {
|
|
3142
|
+
this.id = window.crypto.randomUUID();
|
|
3143
|
+
element.setAttribute("id", this.id);
|
|
3144
|
+
}
|
|
3145
|
+
|
|
3146
|
+
element.bib?.setAttribute("id", `${this.id}-floater-bib`);
|
|
3147
|
+
}
|
|
3148
|
+
|
|
3149
|
+
configure(elem, eventPrefix, enableKeyboardHandling = true) {
|
|
3150
|
+
AuroFloatingUI.setupMousePressChecker();
|
|
3151
|
+
this.enableKeyboardHandling = enableKeyboardHandling;
|
|
3152
|
+
|
|
3153
|
+
this.eventPrefix = eventPrefix;
|
|
3154
|
+
if (this.element !== elem) {
|
|
3155
|
+
this.element = elem;
|
|
3156
|
+
}
|
|
3157
|
+
|
|
3158
|
+
const element = this.element;
|
|
3159
|
+
if (!element) {
|
|
3160
|
+
return;
|
|
3161
|
+
}
|
|
3162
|
+
|
|
3163
|
+
if (this.behavior !== element.behavior) {
|
|
3164
|
+
this.behavior = element.behavior;
|
|
3165
|
+
}
|
|
3166
|
+
|
|
3167
|
+
if (element.trigger) {
|
|
3168
|
+
this.disconnect();
|
|
3169
|
+
}
|
|
3170
|
+
element.trigger =
|
|
3171
|
+
element.triggerElement ||
|
|
3172
|
+
element.shadowRoot?.querySelector("#trigger") ||
|
|
3173
|
+
element.trigger;
|
|
3174
|
+
element.bib = element.shadowRoot?.querySelector("#bib") || element.bib;
|
|
3175
|
+
element.bibSizer = element.shadowRoot?.querySelector("#bibSizer");
|
|
3176
|
+
element.triggerChevron =
|
|
3177
|
+
element.shadowRoot?.querySelector("#showStateIcon");
|
|
3178
|
+
|
|
3179
|
+
if (element.floaterConfig) {
|
|
3180
|
+
element.hoverToggle = element.floaterConfig.hoverToggle;
|
|
3181
|
+
}
|
|
3182
|
+
|
|
3183
|
+
this.regenerateBibId();
|
|
3184
|
+
this.handleTriggerTabIndex();
|
|
3185
|
+
|
|
3186
|
+
this.handleEvent = this.handleEvent.bind(this);
|
|
3187
|
+
if (element.trigger) {
|
|
3188
|
+
if (this.enableKeyboardHandling) {
|
|
3189
|
+
element.trigger.addEventListener("keydown", this.handleEvent);
|
|
3190
|
+
}
|
|
3191
|
+
element.trigger.addEventListener("click", this.handleEvent);
|
|
3192
|
+
element.trigger.addEventListener("mouseenter", this.handleEvent);
|
|
3193
|
+
element.trigger.addEventListener("mouseleave", this.handleEvent);
|
|
3194
|
+
element.trigger.addEventListener("focus", this.handleEvent);
|
|
3195
|
+
element.trigger.addEventListener("blur", this.handleEvent);
|
|
3196
|
+
}
|
|
3197
|
+
}
|
|
3198
|
+
|
|
3199
|
+
disconnect() {
|
|
3200
|
+
this.cleanupHideHandlers();
|
|
3201
|
+
|
|
3202
|
+
const element = this.element;
|
|
3203
|
+
if (!element) {
|
|
3204
|
+
return;
|
|
3205
|
+
}
|
|
3206
|
+
|
|
3207
|
+
element.cleanup?.();
|
|
3208
|
+
|
|
3209
|
+
if (element.bib && element.shadowRoot) {
|
|
3210
|
+
element.shadowRoot.append(element.bib);
|
|
3211
|
+
}
|
|
3212
|
+
|
|
3213
|
+
// Remove event & keyboard listeners
|
|
3214
|
+
if (element.trigger) {
|
|
3215
|
+
element.trigger.removeEventListener("keydown", this.handleEvent);
|
|
3216
|
+
element.trigger.removeEventListener("click", this.handleEvent);
|
|
3217
|
+
element.trigger.removeEventListener("mouseenter", this.handleEvent);
|
|
3218
|
+
element.trigger.removeEventListener("mouseleave", this.handleEvent);
|
|
3219
|
+
element.trigger.removeEventListener("focus", this.handleEvent);
|
|
3220
|
+
element.trigger.removeEventListener("blur", this.handleEvent);
|
|
3221
|
+
}
|
|
3222
|
+
}
|
|
3223
|
+
}
|
|
3224
|
+
|
|
3225
|
+
class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s$1,a){const r=this.generateElementName(o,s$1),i$1=i`${s(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i$1}}class d{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}getSlotText(t,e){const o=t.shadowRoot?.querySelector(`slot[name="${e}"]`),s=(o?.assignedNodes({flatten:true})||[]).map(t=>t.textContent?.trim()).join(" ").trim();return s||null}}class h{registerComponent(t,e){customElements.get(t)||customElements.define(t,class extends e{});}closestElement(t,e=this,o=(e,s=e&&e.closest(t))=>e&&e!==document&&e!==window?s||o(e.getRootNode().host):null){return o(e)}handleComponentTagRename(t,e){const o=e.toLowerCase();t.tagName.toLowerCase()!==o&&t.setAttribute(o,true);}elementMatch(t,e){const o=e.toLowerCase();return t.tagName.toLowerCase()===o||t.hasAttribute(o)}}var c=i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]),:host([appearance=brand]){--ds-auro-loader-color: var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]),:host([appearance=inverse]){--ds-auro-loader-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color: transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color: currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color: currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}
|
|
3226
|
+
`,u$1=i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0;box-sizing:border-box}:host([xs]),:host([xs])>span{width:1.2rem;height:1.2rem}:host([sm]),:host([sm])>span{width:3rem;height:3rem}:host([md]),:host([md])>span{width:5rem;height:5rem}:host([lg]),:host([lg])>span{width:8rem;height:8rem}:host{--margin: .375rem;--margin-xs: .2rem;--margin-sm: .5rem;--margin-md: .75rem;--margin-lg: 1rem}:host([pulse]),:host([pulse])>span{position:relative}:host([pulse]){width:calc(3rem + var(--margin) * 6);height:calc(1rem + var(--margin) * 2)}:host([pulse])>span{width:1rem;height:1rem;margin:var(--margin);animation:pulse 1.5s ease infinite}:host([pulse][xs]){width:calc(1.95rem + var(--margin-xs) * 6);height:calc(.65rem + var(--margin-xs) * 2)}:host([pulse][xs])>span{margin:var(--margin-xs);width:.65rem;height:.65rem}:host([pulse][sm]){width:calc(6rem + var(--margin-sm) * 6);height:calc(2rem + var(--margin-sm) * 2)}:host([pulse][sm])>span{margin:var(--margin-sm);width:2rem;height:2rem}:host([pulse][md]){width:calc(9rem + var(--margin-md) * 6);height:calc(3rem + var(--margin-md) * 2)}:host([pulse][md])>span{margin:var(--margin-md);width:3rem;height:3rem}:host([pulse][lg]){width:calc(15rem + var(--margin-lg) * 6);height:calc(5rem + var(--margin-lg) * 2)}:host([pulse][lg])>span{margin:var(--margin-lg);width:5rem;height:5rem}:host([pulse])>span:nth-child(1){animation-delay:-.4s}:host([pulse])>span:nth-child(2){animation-delay:-.2s}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,to{opacity:.1;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}:host([orbit]),:host([orbit])>span{opacity:1}:host([orbit])>span{border-width:5px}:host([orbit])>span:nth-child(2){animation:orbit 2s linear infinite}:host([orbit][sm])>span{border-width:8px}:host([orbit][md])>span{border-width:13px}:host([orbit][lg])>span{border-width:21px}@keyframes orbit{0%{transform:rotate(0)}to{transform:rotate(360deg)}}:host([ringworm])>svg{animation:rotate 2s linear infinite;height:100%;width:100%;stroke:currentcolor;stroke-width:8}:host([ringworm]) .path{stroke-dashoffset:0;animation:ringworm 1.5s ease-in-out infinite;stroke-linecap:round}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}to{stroke-dasharray:89,200;stroke-dashoffset:-124px}}:host([laser]){position:static;width:100%;display:block;height:0;overflow:hidden;font-size:unset}:host([laser])>span{position:fixed;width:100%;height:.25rem;border-radius:0;z-index:100}:host([laser])>span:nth-child(1){border-color:currentcolor;opacity:.25}:host([laser])>span:nth-child(2){border-color:currentcolor;animation:laser 2s linear infinite;opacity:1;width:50%}:host([laser][sm])>span:nth-child(2){width:20%}:host([laser][md])>span:nth-child(2){width:30%}:host([laser][lg])>span:nth-child(2){width:50%;animation-duration:1.5s}:host([laser][xl])>span:nth-child(2){width:80%;animation-duration:1.5s}@keyframes laser{0%{left:-100%}to{left:110%}}:host>.no-animation{display:none}@media (prefers-reduced-motion: reduce){:host{display:flex;align-items:center;justify-content:center}:host>span{opacity:1}:host>.loader{display:none}:host>svg{display:none}:host>.no-animation{display:block}}
|
|
3227
|
+
`,p$1=i$5`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}
|
|
3228
|
+
`;class b extends i$2{constructor(){super(),this.appearance="default",this.keys=[0,1,2,3,4,5,6,7,8,9],this.mdCount=3,this.smCount=2,this.runtimeUtils=new h,this.orbit=false,this.ringworm=false,this.laser=false,this.pulse=false;}static get properties(){return {appearance:{type:String,reflect:true},laser:{type:Boolean,reflect:true},orbit:{type:Boolean,reflect:true},pulse:{type:Boolean,reflect:true},ringworm:{type:Boolean,reflect:true}}}static get styles(){return [u$1,c,p$1]}static register(t="auro-loader"){h.prototype.registerComponent(t,b);}firstUpdated(){this.runtimeUtils.handleComponentTagRename(this,"auro-loader");}connectedCallback(){super.connectedCallback();}defineTemplate(){let t=Array.from(Array(this.mdCount).keys());return this.orbit||this.laser?t=Array.from(Array(this.smCount).keys()):this.ringworm&&(t=Array.from(Array(0).keys())),t}render(){return x$1`
|
|
3229
|
+
${this.defineTemplate().map(t=>x$1`
|
|
3230
|
+
<span part="element" class="loader node-${t}"></span>
|
|
3231
|
+
`)}
|
|
3232
|
+
|
|
3233
|
+
<div class="no-animation body-default">Loading...</div>
|
|
3234
|
+
|
|
3235
|
+
${this.ringworm?x$1`
|
|
3236
|
+
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
3237
|
+
<circle class="path" cx="50" cy="50" r="20" fill="none"/>
|
|
3238
|
+
</svg>`:""}
|
|
3239
|
+
`}}const m$1=new WeakMap,v=new WeakMap,x=({host:t,target:e,matcher:o,removeOriginal:s=true})=>{v.has(t)||v.set(t,{matchers:new Set,targets:new Map});const a=v.get(t);return a.matchers.add(o),a.targets.has(e)||a.targets.set(e,new Map),a.targets.get(e).set(o,{removeOriginal:s,currentAttributes:new Map}),f$1({host:t,target:e,matcher:o,removeOriginal:s}),y$1(t),{cleanup:()=>g$1(t,e,o),getObservedAttributes:()=>A(t,e,o),getObservedAttribute:s=>S(t,e,o,s)}},g$1=(t,e,o)=>{const s=v.get(t);if(!s)return;const a=s.targets.get(e);a&&(a.delete(o),0===a.size&&s.targets.delete(e));let r=false;for(const t of s.targets.values())if(t.has(o)){r=true;break}r||s.matchers.delete(o),0!==s.targets.size&&0!==s.matchers.size||w$1(t);},f$1=({host:t,target:e,matcher:o,removeOriginal:s=true})=>{const a=t.getAttributeNames().filter(t=>o(t)).reduce((e,o)=>(e[o]=t.getAttribute(o),e),{});Object.entries(a).forEach(([a,r])=>{k$1(t,e,o,a,r),e.setAttribute(a,r),s&&t.removeAttribute(a);});},y$1=t=>{if(m$1.has(t))return m$1.get(t);const e=new MutationObserver(e=>{const o=v.get(t);o&&e.filter(t=>"attributes"===t.type).forEach(e=>{const s=e.attributeName;for(const e of o.matchers)if(e(s))for(const[s,a]of o.targets.entries())if(a.has(e)){const{removeOriginal:o}=a.get(e);f$1({host:t,target:s,matcher:e,removeOriginal:o});}});});return e.observe(t,{attributes:true}),m$1.set(t,e),e},w$1=t=>{if(m$1.has(t)){m$1.get(t).disconnect(),m$1.delete(t);}v.has(t)&&v.delete(t);},z$1=(t,e,o)=>{const s=v.get(t);if(!s)return;const a=s.targets.get(e);return a?a.get(o):void 0},k$1=(t,e,o,s,a)=>{const r=z$1(t,e,o);r&&r.currentAttributes.set(s,a);},S=(t,e,o,s)=>{const a=z$1(t,e,o);if(a)return a.currentAttributes.get(s)},A=(t,e,o)=>{const s=z$1(t,e,o);return s?Array.from(s.currentAttributes.entries()):[]},q={"aria-":t=>t.startsWith("aria-"),role:t=>t.match(/^role$/)},B=({host:t,target:e,removeOriginal:o=true})=>(({host:t,target:e,match:o,removeOriginal:s=true})=>{if("object"!=typeof t||!(t instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');if("object"!=typeof e||!(e instanceof HTMLElement))throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');if("function"!=typeof o)throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');if("boolean"!=typeof s)throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');return x({host:t,target:e,matcher:o,removeOriginal:s})})({host:t,target:e,match:t=>{for(const e in q)if(q[e](t))return true;return false},removeOriginal:o});class C extends i$2{attributeWatcher;static get properties(){return {layout:{type:String,attribute:"layout",reflect:true},shape:{type:String,attribute:"shape",reflect:true},size:{type:String,attribute:"size",reflect:true},appearance:{type:String,reflect:true},onDark:{type:Boolean,attribute:"ondark",reflect:true},wrapper:{attribute:false,reflect:false}}}constructor(){super(),this.onDark=false,this.appearance="default";}resetShapeClasses(){this.shape&&this.size&&this.wrapper&&(this.wrapper.classList.forEach(t=>{t.startsWith("shape-")&&this.wrapper.classList.remove(t);}),this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`));}resetLayoutClasses(){this.layout&&this.wrapper&&(this.wrapper.classList.forEach(t=>{t.startsWith("layout-")&&this.wrapper.classList.remove(t);}),this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`));}updateComponentArchitecture(){this.resetLayoutClasses(),this.resetShapeClasses();}updated(t){(t.has("layout")||t.has("shape")||t.has("size"))&&this.updateComponentArchitecture();}firstUpdated(){super.firstUpdated(),this.wrapper=this.shadowRoot.querySelector(".wrapper"),this.attributeWatcher=B({host:this,target:this.shadowRoot.querySelector(".wrapper")});}disconnectedCallback(){super.disconnectedCallback(),this.attributeWatcher&&(this.attributeWatcher.cleanup(),this.attributeWatcher=null);}render(){try{return this.renderLayout()}catch(t){return console.error("Failed to get the defined layout - using the default layout",t),this.getLayout("default")}}}var U=i$5`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image),var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}:host(:focus-within) .auro-button{outline-color:var(--ds-auro-button-border-inset-color)}:host(:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-hover, #00274a);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-hover, #00274a)}:host([disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-disabled, #acc9e2);--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-disabled, #acc9e2)}:host([variant=secondary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background, #ffffff);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text, #01426a)}:host([variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-hover, #f2f2f2);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-hover, #00274a);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-hover, #00274a)}:host([variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=secondary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-disabled, #f7f7f7);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-disabled, #cfe0ef);--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text, #01426a)}:host([variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, .1));--ds-auro-button-border-color: transparent}:host([variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=tertiary][disabled]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text, #01426a)}:host([variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, .05));--ds-auro-button-border-color: transparent}:host([variant=ghost]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([variant=ghost][disabled]){--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:active:not(:disabled),:host([variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}:host([variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}:host([ondark]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-hover, #ebf3f9);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-hover, #ebf3f9)}:host([ondark]:focus-within),:host([appearance=inverse]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}:host([ondark][disabled]),:host([appearance=inverse][disabled]){--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, .75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=secondary]),:host([appearance=inverse][variant=secondary]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff)}:host([ondark][variant=secondary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=secondary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-text-color: var(--ds-advanced-color-button-secondary-text-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=secondary]:focus-within),:host([appearance=inverse][variant=secondary]:focus-within){--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=secondary][disabled]),:host([appearance=inverse][variant=secondary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-button-border-color: var(--ds-advanced-color-button-secondary-border-inverse-disabled, #dddddd)}:host([ondark][variant=tertiary]),:host([appearance=inverse][variant=tertiary]){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-tertiary-text-inverse, #ffffff)}:host([ondark][variant=tertiary]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=tertiary]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, .1))}:host([ondark][variant=tertiary]:focus-within),:host([appearance=inverse][variant=tertiary]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=tertiary][disabled]),:host([appearance=inverse][variant=tertiary][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=ghost]),:host([appearance=inverse][variant=ghost]){--ds-auro-button-container-color: transparent;--ds-auro-button-container-image: transparent;--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff);--ds-auro-button-loader-color: var(--ds-advanced-color-button-ghost-text-inverse, #ffffff)}:host([ondark][variant=ghost]:not([disabled]):is([data-hover],[data-active])),:host([appearance=inverse][variant=ghost]:not([disabled]):is([data-hover],[data-active])){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, .05));--ds-auro-button-border-color: transparent}:host([ondark][variant=ghost]:focus-within),:host([appearance=inverse][variant=ghost]:focus-within){border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}:host([ondark][variant=ghost][disabled]),:host([appearance=inverse][variant=ghost][disabled]){--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([ondark][variant=flat]) .auro-button,:host([appearance=inverse][variant=flat]) .auro-button{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:active:not(:disabled),:host([ondark][variant=flat]) .auro-button:hover:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:active:not(:disabled),:host([appearance=inverse][variant=flat]) .auro-button:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]) .auro-button:disabled,:host([appearance=inverse][variant=flat]) .auro-button:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}:host([ondark][variant=flat]:focus-within),:host([appearance=inverse][variant=flat]:focus-within){--ds-auro-button-border-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}
|
|
3240
|
+
`,H=i$5`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-rounded-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-circle-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:50%;min-width:72px;max-width:72px;padding:0}.shape-circle-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-circle-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-circle-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-square-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px;min-width:72px;max-width:72px;padding:0}.shape-square-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-square-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-square-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px}.shape-pill-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px 0 0 28px}.shape-pill-left-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-left-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-left-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:0 28px 28px 0}.shape-pill-right-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-right-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-right-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-circle-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:50%;min-width:56px;max-width:56px;padding:0}.shape-circle-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-circle-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-circle-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-square-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px;min-width:56px;max-width:56px;padding:0}.shape-square-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-square-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-square-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-rounded-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-rounded-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px 0 0 24px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:0 24px 24px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-circle-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:50%;min-width:48px;max-width:48px;padding:0}.shape-circle-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-circle-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-circle-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-square-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px;min-width:48px;max-width:48px;padding:0}.shape-square-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-square-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-square-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-rounded-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-rounded-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px}.shape-pill-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px 0 0 18px}.shape-pill-left-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-left-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-left-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:0 18px 18px 0}.shape-pill-right-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-right-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-right-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-circle-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:50%;min-width:36px;max-width:36px;padding:0}.shape-circle-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-circle-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-circle-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-square-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px;min-width:36px;max-width:36px;padding:0}.shape-square-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-square-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-square-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:4px}.shape-rounded-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-rounded-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-rounded-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px}.shape-pill-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px 0 0 12px}.shape-pill-left-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-left-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-left-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:0 12px 12px 0}.shape-pill-right-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-right-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-right-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-circle-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:50%;min-width:24px;max-width:24px;padding:0}.shape-circle-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-circle-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-circle-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-square-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:6px;min-width:24px;max-width:24px;padding:0}.shape-square-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-square-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-square-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}
|
|
3241
|
+
`,M$1=i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}.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}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock{display:block}.util_displayFlex{display:flex}.util_displayHidden{display:none}.util_displayHiddenVisually{position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([size=xs][shape=rounded]) ::slotted(auro-icon),:host([size=xs][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xs][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill]) ::slotted(auro-icon),:host([size=xs][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left]) ::slotted(auro-icon),:host([size=xs][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right]) ::slotted(auro-icon),:host([size=xs][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-200, 1rem)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xs][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle]) ::slotted(auro-icon),:host([size=xs][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xs][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=flat]) .auro-button:focus,:host([size=xs][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xs][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square]) ::slotted(auro-icon),:host([size=xs][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xs][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xs][shape=square][variant=secondary]) .auro-button:focus,:host([size=xs][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 1px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xs][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=flat]) .auro-button:focus,:host([size=xs][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs][shape=square][variant=ghost]) .auro-button:focus,:host([size=xs][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded]) ::slotted(auro-icon),:host([size=sm][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=sm][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill]) ::slotted(auro-icon),:host([size=sm][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left]) ::slotted(auro-icon),:host([size=sm][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right]) ::slotted(auro-icon),:host([size=sm][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=sm][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle]) ::slotted(auro-icon),:host([size=sm][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus,:host([size=sm][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=flat]) .auro-button:focus,:host([size=sm][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus,:host([size=sm][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square]) ::slotted(auro-icon),:host([size=sm][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=primary]) .auro-button:focus:after,:host([size=sm][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=sm][shape=square][variant=secondary]) .auro-button:focus,:host([size=sm][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus,:host([size=sm][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=flat]) .auro-button:focus,:host([size=sm][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=sm][shape=square][variant=ghost]) .auro-button:focus,:host([size=sm][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded]) ::slotted(auro-icon),:host([size=md][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=md][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=md][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=md][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=md][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill]) ::slotted(auro-icon),:host([size=md][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left]) ::slotted(auro-icon),:host([size=md][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right]) ::slotted(auro-icon),:host([size=md][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=md][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=md][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=md][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle]) ::slotted(auro-icon),:host([size=md][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=md][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=circle][variant=secondary]) .auro-button:focus,:host([size=md][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=md][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=flat]) .auro-button:focus,:host([size=md][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=circle][variant=ghost]) .auro-button:focus,:host([size=md][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square]) ::slotted(auro-icon),:host([size=md][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=md][shape=square][variant=primary]) .auro-button:focus,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=primary]) .auro-button:focus:after,:host([size=md][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=md][shape=square][variant=secondary]) .auro-button:focus,:host([size=md][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=tertiary]) .auro-button:focus,:host([size=md][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=flat]) .auro-button:focus,:host([size=md][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=md][shape=square][variant=ghost]) .auro-button:focus,:host([size=md][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded]) ::slotted(auro-icon),:host([size=lg][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=lg][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill]) ::slotted(auro-icon),:host([size=lg][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left]) ::slotted(auro-icon),:host([size=lg][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right]) ::slotted(auro-icon),:host([size=lg][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=lg][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle]) ::slotted(auro-icon),:host([size=lg][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, .25rem))}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus,:host([size=lg][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=flat]) .auro-button:focus,:host([size=lg][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus,:host([size=lg][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square]) ::slotted(auro-icon),:host([size=lg][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, .25rem))}:host([size=lg][shape=square][variant=primary]) .auro-button:focus,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4.33px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=primary]) .auro-button:focus:after,:host([size=lg][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=lg][shape=square][variant=secondary]) .auro-button:focus,:host([size=lg][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus,:host([size=lg][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=flat]) .auro-button:focus,:host([size=lg][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=lg][shape=square][variant=ghost]) .auro-button:focus,:host([size=lg][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded]) ::slotted(auro-icon),:host([size=xl][shape=rounded]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=rounded][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=rounded][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus,:host([size=xl][shape=rounded][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill]) ::slotted(auro-icon),:host([size=xl][shape=pill]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left]) ::slotted(auro-icon),:host([size=xl][shape=pill-left]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-left][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-left][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right]) ::slotted(auro-icon),:host([size=xl][shape=pill-right]) ::slotted([auro-icon]){--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=pill-right][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus,:host([size=xl][shape=pill-right][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle]) ::slotted(auro-icon),:host([size=xl][shape=circle]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, .25rem))}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=circle][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus,:host([size=xl][shape=circle][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=circle][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=flat]) .auro-button:focus,:host([size=xl][shape=circle][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus,:host([size=xl][shape=circle][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square]) ::slotted(auro-icon),:host([size=xl][shape=square]) ::slotted([auro-icon]){--ds-auro-icon-size: calc(var(--ds-size-400, 2rem) + var(--ds-size-50, .25rem))}:host([size=xl][shape=square][variant=primary]) .auro-button:focus,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 5px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=primary]) .auro-button:focus:after,:host([size=xl][shape=square][variant=primary]) .auro-button:focus-visible:after{content:"";position:absolute;border-radius:inherit;box-sizing:content-box;top:0;left:0;width:calc(100% - 2px);height:calc(100% - 2px);border:1px solid var(--ds-auro-button-border-color)}:host([size=xl][shape=square][variant=secondary]) .auro-button:focus,:host([size=xl][shape=square][variant=secondary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 3px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus,:host([size=xl][shape=square][variant=tertiary]) .auro-button:focus-visible{box-shadow:inset 0 0 0 4px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=flat]) .auro-button:focus,:host([size=xl][shape=square][variant=flat]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xl][shape=square][variant=ghost]) .auro-button:focus,:host([size=xl][shape=square][variant=ghost]) .auro-button:focus-visible{box-shadow:inset 0 0 0 2px var(--ds-auro-button-border-inset-color)}:host([size=xs]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-150, .75rem)}:host([size=sm]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-200, 1rem)}:host([size=md]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-300, 1.5rem)}:host([size=lg]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-400, 2rem)}:host([size=xl]) .inset .contentWrapper{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-inline:var(--ds-size-500, 2.5rem)}:host([shape=circle]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([shape=square]) ::slotted(:not(auro-icon):not([auro-icon])){position:absolute;overflow:hidden;clip:rect(1px,1px,1px,1px);width:1px;height:1px;padding:0;border:0}:host([variant=flat]){display:inline-block}::slotted(svg){vertical-align:middle}.textSlot{display:inline-flex;align-items:center;gap:var(--ds-size-100, .5rem)}.contentWrapper{font-size:0}slot{pointer-events:none}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}:host{display:inline-block;overflow:hidden}.auro-button{position:relative;cursor:pointer;padding:0 var(--ds-size-300, 1.5rem);padding-inline:unset;padding-block:unset;box-sizing:content-box;overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;outline:none;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--ds-size-100, .5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding .3s ease-out}.auro-button:focus,.auro-button:focus-visible{outline:none}.auro-button:active{transform:scale(.95)}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}:host([fluid]){display:block}:host([fluid]) .auro-button:not(.thin):not(.simple){width:calc(100% - 4px)}:host([fluid]) .auro-button.thin{width:calc(100% - 2px)}:host([fluid]) .auro-button.simple{width:100%}:host([static]) .auro-button{pointer-events:none;cursor:default;display:inline-flex}:host([static]) .auro-button .contentWrapper{display:inline-flex}
|
|
3242
|
+
`,R=i$5`:host{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border, #01426a);--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text, #ffffff);--ds-auro-button-text-color: var(--ds-advanced-color-button-primary-text, #ffffff)}
|
|
3243
|
+
`;const N=["circle","square"];class T extends C{static get formAssociated(){return true}constructor(){super(),this.autofocus=false,this.disabled=false,this.loading=false,this.static=false,this.size="md",this.shape="rounded",this.fluid=false,this.loadingText=this.loadingText||"Loading...",this.variant="primary",this.runtimeUtils=new d,"function"==typeof this.attachInternals?this.internals=this.attachInternals():(this.internals=null,console.warn("This browser does not support form association features. Some form-related functionality may not work as expected. Consider using a polyfill or handling click events manually."));const t=new l;this.loaderTag=t.generateTag("auro-loader","6.1.0",b),this.buttonHref=void 0,this.buttonTarget=void 0,this.buttonRel=void 0;}static get styles(){return [R,M$1,U,H]}static get properties(){return {...C.properties,layout:{type:Boolean,attribute:false,reflect:false},autofocus:{type:Boolean,reflect:true},disabled:{type:Boolean,reflect:true},fluid:{type:Boolean,reflect:true},loading:{type:Boolean,reflect:true},loadingText:{type:String},tIndex:{type:String,reflect:true},tabindex:{type:String,reflect:false},title:{type:String,reflect:true},type:{type:String,reflect:true},value:{type:String,reflect:true},variant:{type:String,reflect:true},buttonHref:{type:String},buttonTarget:{type:String},buttonRel:{type:String},static:{type:Boolean,reflect:true},onHover:{attribute:"data-hover",type:Boolean,reflect:true},onActive:{attribute:"data-active",type:Boolean,reflect:true}}}static register(t="auro-button"){d.prototype.registerComponent(t,T);}focus(){this.renderRoot.querySelector("button").focus();}surfaceSubmitEvent(){this.form&&this.form.requestSubmit();}get form(){return this.internals?this.internals.form:null}get showText(){return !N.includes(this.shape)}get currentAriaLabel(){if(!this.attributeWatcher)return;return this.attributeWatcher.getObservedAttribute("aria-label")||void 0}get currentAriaLabelledBy(){if(!this.attributeWatcher)return;return this.attributeWatcher.getObservedAttribute("aria-labelledby")||void 0}get iconOnly(){return N.includes(this.shape)}getFontSize(){return (this.iconOnly?{xs:"heading-xs",sm:"heading-sm",md:"heading-sm",lg:"heading-md",xl:"heading-lg"}:{xs:"body-xs",sm:"body-sm",md:"body-default",lg:"body-lg",xl:"body-lg"})[this.size]||"body-default"}get _renderTag(){return this.static?i`span`:this.buttonHref?i`a`:i`button`}firstUpdated(){super.firstUpdated(),this.runtimeUtils.handleComponentTagRename(this,"auro-button");}generateAriaLabel(){return this.loading?this.runtimeUtils.getSlotText(this,"ariaLabel.loading")||this.loadingText:this.runtimeUtils.getSlotText(this,"ariaLabel")||this.currentAriaLabel}onPointerEvent(t){switch(t.type){case "pointerenter":this.onHover=true;break;case "pointerleave":this.onHover=false;break;case "pointerdown":this.onActive=true;break;case "pointerup":case "blur":this.onActive=false;}}renderLayoutDefault(){const t=this.getFontSize(),e$1=this.buttonHref?"link":"button",s={"auro-button":true,inset:this.showText,wrapper:true,loading:this.loading,simple:!["secondary"].includes(this.variant),thin:["secondary"].includes(this.variant)},a={contentWrapper:true,loading:this.loading},r={textSlot:true,[t]:this.showText},l=this.tIndex||this.tabindex;return u$2`
|
|
3244
|
+
<!-- Hidden slots for aria labels -->
|
|
3245
|
+
<slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
3246
|
+
<slot name="ariaLabel.loading" hidden @slotchange="${this.requestUpdate}"></slot>
|
|
3247
|
+
|
|
3248
|
+
<${this._renderTag}
|
|
3249
|
+
part="${e$1}"
|
|
3250
|
+
aria-label="${o$1(this.generateAriaLabel())}"
|
|
3251
|
+
aria-labelledby="${o$1(this.loading?void 0:this.currentAriaLabelledBy||void 0)}"
|
|
3252
|
+
tabindex="${o$1(this.static?-1:l)}"
|
|
3253
|
+
?autofocus="${this.autofocus}"
|
|
3254
|
+
class=${e(s)}
|
|
3255
|
+
?disabled="${this.disabled||this.loading}"
|
|
3256
|
+
?onDark="${this.onDark}"
|
|
3257
|
+
title="${o$1(this.title?this.title:void 0)}"
|
|
3258
|
+
name="${o$1(this.name?this.name:void 0)}"
|
|
3259
|
+
type="${o$1(this.type?this.type:void 0)}"
|
|
3260
|
+
variant="${o$1(this.variant?this.variant:void 0)}"
|
|
3261
|
+
.value="${o$1(this.value?this.value:void 0)}"
|
|
3262
|
+
@click="${this.static||"submit"!==this.type?void 0:this.surfaceSubmitEvent}"
|
|
3263
|
+
@pointerenter="${this.onPointerEvent}"
|
|
3264
|
+
@pointerleave="${this.onPointerEvent}"
|
|
3265
|
+
@pointerdown="${this.onPointerEvent}"
|
|
3266
|
+
@pointerup="${this.onPointerEvent}"
|
|
3267
|
+
@blur="${this.onPointerEvent}"
|
|
3268
|
+
href="${o$1(this.buttonHref||void 0)}"
|
|
3269
|
+
target="${o$1(this.buttonTarget||void 0)}"
|
|
3270
|
+
rel="${o$1(this.buttonRel||void 0)}"
|
|
3271
|
+
>
|
|
3272
|
+
${o$1(this.loading?u$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>`:void 0)}
|
|
3273
|
+
|
|
3274
|
+
<span class="${e(a)}" part="contentWrapper">
|
|
3275
|
+
<span class="${e(r)}" part="text">
|
|
3276
|
+
<slot></slot>
|
|
3277
|
+
</span>
|
|
3278
|
+
</span>
|
|
3279
|
+
</${this._renderTag}>
|
|
3280
|
+
`}renderLayout(){return this.renderLayoutDefault()}}
|
|
3281
|
+
|
|
3282
|
+
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>',g='<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" style="min-width:100%;height:auto;fill:currentColor" viewBox="0 0 142 138" part="svg"><title id="tail-DEFAULT__title">Airplane tail default image with light gray color</title><path fill="url(#paint0_linear_9225_2069)" fill-rule="evenodd" d="M124.093 14.665a3.26 3.26 0 0 1 3.208 3.829L101.097 119.85c-.47 1.087-2.211 3.398-5.692 3.471l-.106.001-80.65.013A659230 659230 0 0 1 99.08 17.412c1.214-1.497 3.275-2.722 5.372-2.747z" clip-rule="evenodd"/><defs><linearGradient id="paint0_linear_9225_2069" x1="114.823" x2="60.061" y1="14.665" y2="123.335" gradientUnits="userSpaceOnUse"><stop offset=".5" stop-color="#707984"/><stop offset=".5" stop-color="#646E7B"/></linearGradient></defs></svg>';class m extends i$2{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 f=new Map,w=(t,a={})=>{const e=a.responseParser||(t=>t.text());return f.has(t)||f.set(t,fetch(t).then(e)),f.get(t)};var z=i$5`: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}
|
|
3283
|
+
`;class y 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 z}async fetchIcon(t,a){let e="";e="logos"===t?await w(`${this.uri}/${t}/${a}.svg`):await w(`${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=this.name?.startsWith("tail-")?g:u;this.svg=(new DOMParser).parseFromString(t,"text/html").body.querySelector("svg");}}}catch(t){this.svg=void 0;}}}i$5`.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}
|
|
3284
|
+
`;var M=i$5`:host{--ds-auro-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color: #02426D;--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}
|
|
3285
|
+
`;var _=i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]),:host(:not([appearance=inverse])[variant=accent1]){--ds-auro-icon-color: var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]),:host(:not([appearance=inverse])[variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]),:host(:not([appearance=inverse])[variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]),:host(:not([appearance=inverse])[variant=statusDefault]){--ds-auro-icon-color: var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]),:host(:not([appearance=inverse])[variant=statusInfo]){--ds-auro-icon-color: var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]),:host(:not([appearance=inverse])[variant=statusSuccess]){--ds-auro-icon-color: var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]),:host(:not([appearance=inverse])[variant=statusWarning]){--ds-auro-icon-color: var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]),:host(:not([appearance=inverse])[variant=statusError]){--ds-auro-icon-color: var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]),:host(:not([appearance=inverse])[variant=statusInfoSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]),:host(:not([appearance=inverse])[variant=statusSuccessSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]),:host(:not([appearance=inverse])[variant=statusWarningSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]),:host(:not([appearance=inverse])[variant=statusErrorSubtle]){--ds-auro-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]),:host(:not([appearance=inverse])[variant=fareBasicEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]),:host(:not([appearance=inverse])[variant=fareBusiness]){--ds-auro-icon-color: var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]),:host(:not([appearance=inverse])[variant=fareEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]),:host(:not([appearance=inverse])[variant=fareFirst]){--ds-auro-icon-color: var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]),:host(:not([appearance=inverse])[variant=farePremiumEconomy]){--ds-auro-icon-color: var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]),:host(:not([appearance=inverse])[variant=tierOneWorldEmerald]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]),:host(:not([appearance=inverse])[variant=tierOneWorldSapphire]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]),:host(:not([appearance=inverse])[variant=tierOneWorldRuby]){--ds-auro-icon-color: var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]),:host([appearance=inverse]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]),:host([appearance=inverse][variant=disabled]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]),:host([appearance=inverse][variant=muted]){--ds-auro-icon-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]),:host([appearance=inverse][variant=statusError]){--ds-auro-icon-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}
|
|
3286
|
+
`;class k extends y{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 {...y.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 [y.styles,M,z,_]}static register(t="auro-icon"){p.prototype.registerComponent(t,k);}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 x$1`
|
|
3287
|
+
<div class="componentWrapper">
|
|
3288
|
+
<div
|
|
3289
|
+
class="${e({svgWrapper:true})}"
|
|
3290
|
+
title="${o$1(this.title||void 0)}">
|
|
3291
|
+
<span aria-hidden="${o$1(this.ariaHidden||true)}" part="svg">
|
|
3292
|
+
${this.customSvg?x$1`
|
|
3293
|
+
<slot name="svg"></slot>
|
|
3294
|
+
`:x$1`
|
|
3295
|
+
${this.svg}
|
|
3296
|
+
`}
|
|
3297
|
+
</span>
|
|
3298
|
+
</div>
|
|
3299
|
+
|
|
3300
|
+
<div class="${e(t)}" part="label">
|
|
3301
|
+
<slot></slot>
|
|
3302
|
+
</div>
|
|
3303
|
+
</div>
|
|
3304
|
+
`}}
|
|
3305
|
+
|
|
3306
|
+
var buttonVersion = "12.3.2";
|
|
3307
|
+
|
|
3308
|
+
var iconVersion = "9.2.0";
|
|
3309
|
+
|
|
3310
|
+
var colorCss = i$5`dialog.container .wrapper{background:var(--ds-auro-dialog-container-color);color:var(--ds-auro-dialog-text-color)}dialog.container::backdrop{background:var(--ds-auro-dialog-overlay-open-background-color)}dialog.container:not([popover])::backdrop{background:var(--ds-auro-dialog-overlay-modal-background-color)}@media screen and (min-width:768px){dialog.container{box-shadow:var(--ds-auro-dialog-boxshadow-color)}}.dialog-header--action{border:2px solid transparent;border-radius:var(--ds-border-radius, .375rem);background-color:transparent}
|
|
3311
|
+
`;
|
|
3312
|
+
|
|
3313
|
+
var styleCss = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);font-weight:var(--wcss-body-default-weight, );line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-default-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-default-emphasized{font-size:var(--wcss-body-default-emphasized-font-size, 1rem);font-weight:var(--wcss-body-default-emphasized-weight, );line-height:var(--wcss-body-default-emphasized-line-height, 1.5rem)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);font-weight:var(--wcss-body-lg-weight, );line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-lg,.body-lg-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg-emphasized{font-size:var(--wcss-body-lg-emphasized-font-size, 1.125rem);font-weight:var(--wcss-body-lg-emphasized-weight, );line-height:var(--wcss-body-lg-emphasized-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);font-weight:var(--wcss-body-sm-weight, );line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-sm-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-sm-emphasized{font-size:var(--wcss-body-sm-emphasized-font-size, .875rem);font-weight:var(--wcss-body-sm-emphasized-weight, );line-height:var(--wcss-body-sm-emphasized-line-height, 1.25rem)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);font-weight:var(--wcss-body-xs-weight, );line-height:var(--wcss-body-xs-line-height, 1rem)}.body-xs,.body-xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs-emphasized{font-size:var(--wcss-body-xs-emphasized-font-size, .75rem);font-weight:var(--wcss-body-xs-emphasized-weight, );line-height:var(--wcss-body-xs-emphasized-line-height, 1rem)}.body-2xs{font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-2xs-weight, );line-height:var(--wcss-body-2xs-line-height, .875rem)}.body-2xs,.body-2xs-emphasized{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-2xs-emphasized{font-size:var(--wcss-body-2xs-emphasized-font-size, .625rem);font-weight:var(--wcss-body-2xs-emphasized-weight, );line-height:var(--wcss-body-2xs-emphasized-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, 300);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, 300);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{--insetPaddingXl: 0 var(--ds-size-400, 2rem) var(--ds-size-400, 2rem) var(--ds-size-400, 2rem);--insetPaddingXxl: 0 var(--ds-size-600, 3rem) var(--ds-size-600, 3rem) var(--ds-size-600, 3rem);--insetPaddingXxxl: 0 var(--ds-size-800, 4rem) var(--ds-size-800, 4rem) var(--ds-size-800, 4rem)}[auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}.dialogOverlay{position:fixed;z-index:-1;bottom:0;left:0;width:100%;height:100%;pointer-events:none}.dialogOverlay--open{z-index:var(--ds-depth-overlay);pointer-events:unset;transition:background .3s cubic-bezier(.4,0,.2,0)}.dialogOverlay--modal{z-index:var(--ds-depth-overlay);transition:background .3s cubic-bezier(.4,0,.5,0)}.bib{position:fixed;inset:0;visibility:hidden;overflow:hidden}.bib dialog.container{display:inline-block;width:100%;max-width:none;height:100%;max-height:none;padding:0;border-width:medium;border-style:none;border-color:currentcolor;border-image:initial;margin:0;background-color:transparent;outline:none;transform:translateZ(0);overflow:hidden}:host([open]) .bib{visibility:visible}.dialog{position:fixed;z-index:-1;top:unset;right:0;bottom:-100%;left:0;box-sizing:border-box;display:flex;flex-direction:column;overflow:visible;width:calc(100% - var(--insetPaddingXl) - var(--insetPaddingXl));max-height:90%;padding:var(--insetPaddingXl);opacity:0;border:0;margin:0;max-width:none;transition:opacity .3s ease-in-out,visibility .3s ease-in-out,bottom .3s ease-in-out}.dialog--open{z-index:var(--ds-depth-modal, 300);visibility:visible;bottom:0;opacity:1}@media screen and (min-width:768px){.dialog{top:10%;bottom:unset;left:0;right:0;max-width:80%;max-height:80%;margin:auto;padding:var(--insetPaddingXxxl);opacity:0;width:calc(100% - var(--insetPaddingXxxl) - var(--insetPaddingXxxl));height:auto;overflow:visible}.dialog--open{opacity:1}}@media screen and (min-width:1024px){.dialog{max-width:986px}}.dialog-footer{padding-top:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){.dialog-footer ::slotted(*){display:flex;justify-content:flex-end}}.dialog-header{display:flex;align-items:flex-start;justify-content:space-between;padding-top:var(--ds-size-800, 4rem);margin-bottom:var(--ds-size-300, 1.5rem)}.dialog-header--action{margin:0;padding:0}.dialog-header--action:hover{cursor:pointer}.dialog-header .heading{flex:1;margin-block:0}.dialog-content{flex:1;overflow:auto;overscroll-behavior:contain;margin:calc(-1 * var(--ds-size-100));padding:var(--ds-size-100)}::slotted([slot=content]){position:relative}:host([unformatted]) .dialog-header--action{position:absolute;top:var(--ds-size-400, 2rem);bottom:unset;right:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){:host([unformatted]) .dialog-header--action{top:var(--ds-size-800, 4rem);bottom:unset;right:var(--ds-size-800, 4rem)}}:host([sm]) .dialog{max-height:30%}@media screen and (min-width:768px){:host([sm]) .dialog{top:10%;bottom:unset;max-width:40%;max-height:80%;padding:var(--insetPaddingXxl)}}@media screen and (min-width:1024px){:host([sm]) .dialog{max-width:740px}}:host([md]) .dialog{max-height:50%}@media screen and (min-width:768px){:host([md]) .dialog{top:10%;bottom:unset;max-width:70%;max-height:80%}}@media screen and (min-width:1024px){:host([md]) .dialog{top:10%;bottom:unset;max-width:986px}}@media screen and (min-width:768px){:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:80%}}:host([sm][lg]) .dialog,:host([md][lg]) .dialog{max-height:90%}:host([unformatted]) .dialog{padding:0}
|
|
3314
|
+
`;
|
|
3315
|
+
|
|
3316
|
+
var styleUnformattedCss = i$5`[unformatted] .unformattedWrapper{padding:var(--ds-size-400, 2rem)}@media screen and (min-width:768px){[unformatted] .unformattedWrapper{padding:var(--ds-size-800, 4rem);padding-top:var(--ds-size-400, 2rem)}}
|
|
3317
|
+
`;
|
|
3318
|
+
|
|
3319
|
+
var tokensCss = i$5`:host{--ds-auro-dialog-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-dialog-boxshadow-color: var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, .2));--ds-auro-dialog-overlay-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-overlay-open-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-dialog-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
|
|
3320
|
+
`;
|
|
3321
|
+
|
|
3322
|
+
// Copyright (c) 2024 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
3323
|
+
// See LICENSE in the project root for license information.
|
|
3324
|
+
|
|
3325
|
+
|
|
3326
|
+
const MOBILE_BREAKPOINT = '--ds-grid-breakpoint-md';
|
|
3327
|
+
/**
|
|
3328
|
+
* @slot header - Text to display as the header of the modal
|
|
3329
|
+
* @slot content - Injects content into the body of the modal
|
|
3330
|
+
* @slot footer - Used for action options, e.g. buttons
|
|
3331
|
+
* @slot ariaLabel.dialog.close - Text to describe the "x" icon close button for screen readers. Default: "Close".
|
|
3332
|
+
* @event toggle - Event fires when the element is closed
|
|
3333
|
+
* @csspart close-button - adjust position of the close X icon in the dialog window
|
|
3334
|
+
* @csspart dialog-overlay - DEPRECATED. Use `--ds-auro-dialog-overlay-modal-background-color` or `--ds-auro-dialog-overlay-open-background-color` for backdrop styling instead.
|
|
3335
|
+
* @csspart dialog - apply CSS to the entire dialog
|
|
3336
|
+
* @csspart dialog-header - apply CSS to the header of the dialog
|
|
3337
|
+
* @csspart dialog-content - apply CSS to the content of the dialog
|
|
3338
|
+
* @csspart dialog-footer - apply CSS to the footer of the dialog
|
|
3339
|
+
*/
|
|
3340
|
+
class ComponentBase extends i$2 {
|
|
3341
|
+
constructor() {
|
|
3342
|
+
super();
|
|
3343
|
+
|
|
3344
|
+
this._initializeDefaults();
|
|
3345
|
+
}
|
|
3346
|
+
|
|
3347
|
+
_initializeDefaults() {
|
|
3348
|
+
this.modal = false;
|
|
3349
|
+
this.unformatted = false;
|
|
3350
|
+
this.closeButtonAppearance = 'default';
|
|
3351
|
+
|
|
3352
|
+
this.isPopoverVisible = false;
|
|
3353
|
+
this.isBibFullscreen = false;
|
|
3354
|
+
this.floater = new AuroFloatingUI(this, 'dialog');
|
|
3355
|
+
|
|
3356
|
+
const versioning = new AuroDependencyVersioning();
|
|
3357
|
+
|
|
3358
|
+
/**
|
|
3359
|
+
* @private
|
|
3360
|
+
*/
|
|
3361
|
+
this.buttonTag = versioning.generateTag(
|
|
3362
|
+
"auro-button",
|
|
3363
|
+
buttonVersion,
|
|
3364
|
+
T,
|
|
3365
|
+
);
|
|
3366
|
+
|
|
3367
|
+
/**
|
|
3368
|
+
* @private
|
|
3369
|
+
*/
|
|
3370
|
+
this.iconTag = versioning.generateTag("auro-icon", iconVersion, k);
|
|
3371
|
+
|
|
3372
|
+
/**
|
|
3373
|
+
* @private
|
|
3374
|
+
*/
|
|
3375
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
3376
|
+
}
|
|
3377
|
+
|
|
3378
|
+
static get properties() {
|
|
3379
|
+
return {
|
|
607
3380
|
|
|
608
3381
|
/**
|
|
609
3382
|
* Defines whether the close button should be light colored for use on dark backgrounds.
|
|
@@ -649,7 +3422,17 @@ class ComponentBase extends i$2 {
|
|
|
649
3422
|
/**
|
|
650
3423
|
* Sets state of dialog to open.
|
|
651
3424
|
*/
|
|
652
|
-
|
|
3425
|
+
isPopoverVisible: {
|
|
3426
|
+
type: Boolean,
|
|
3427
|
+
reflect: true,
|
|
3428
|
+
attribute: 'open'
|
|
3429
|
+
},
|
|
3430
|
+
|
|
3431
|
+
/**
|
|
3432
|
+
* If true, the dialog bib is in fullscreen mode.
|
|
3433
|
+
* @private
|
|
3434
|
+
*/
|
|
3435
|
+
isBibFullscreen: {
|
|
653
3436
|
type: Boolean,
|
|
654
3437
|
reflect: true
|
|
655
3438
|
},
|
|
@@ -681,6 +3464,32 @@ class ComponentBase extends i$2 {
|
|
|
681
3464
|
};
|
|
682
3465
|
}
|
|
683
3466
|
|
|
3467
|
+
get open() {
|
|
3468
|
+
return this.isPopoverVisible;
|
|
3469
|
+
}
|
|
3470
|
+
|
|
3471
|
+
set open(value) {
|
|
3472
|
+
this.isPopoverVisible = Boolean(value);
|
|
3473
|
+
}
|
|
3474
|
+
|
|
3475
|
+
/**
|
|
3476
|
+
* @ignore
|
|
3477
|
+
*/
|
|
3478
|
+
get floaterConfig() {
|
|
3479
|
+
if (!ComponentBase._mobileBreakpointValue) {
|
|
3480
|
+
const docStyle = getComputedStyle(document.documentElement);
|
|
3481
|
+
ComponentBase._mobileBreakpointValue = docStyle.getPropertyValue(MOBILE_BREAKPOINT).trim();
|
|
3482
|
+
}
|
|
3483
|
+
return {
|
|
3484
|
+
prefix: 'auroDialog',
|
|
3485
|
+
fullscreenBreakpoint: ComponentBase._mobileBreakpointValue,
|
|
3486
|
+
};
|
|
3487
|
+
}
|
|
3488
|
+
|
|
3489
|
+
get behavior() {
|
|
3490
|
+
return 'dialog';
|
|
3491
|
+
}
|
|
3492
|
+
|
|
684
3493
|
firstUpdated() {
|
|
685
3494
|
// Add the tag name as an attribute if it is different than the component name
|
|
686
3495
|
this.runtimeUtils.handleComponentTagRename(this, "auro-dialog");
|
|
@@ -693,6 +3502,42 @@ class ComponentBase extends i$2 {
|
|
|
693
3502
|
if (!this.unformatted && slot.assignedNodes().length === 0) {
|
|
694
3503
|
slotWrapper.classList.remove("dialog-footer");
|
|
695
3504
|
}
|
|
3505
|
+
|
|
3506
|
+
this.floater.configure(this, this.floaterConfig.prefix);
|
|
3507
|
+
|
|
3508
|
+
// Forward FloatingUI toggle event to backward-compatible 'toggle' event
|
|
3509
|
+
this.addEventListener('auroDialog-toggled', (event) => {
|
|
3510
|
+
if (!event.detail.expanded) {
|
|
3511
|
+
this.dispatchToggleEvent();
|
|
3512
|
+
}
|
|
3513
|
+
});
|
|
3514
|
+
|
|
3515
|
+
// Always intercept the native ESC/cancel event so we can decide
|
|
3516
|
+
// whether to honour it based on `modal`. Re-dispatch via FloatingUI
|
|
3517
|
+
// for non-modal so the hide lifecycle runs correctly.
|
|
3518
|
+
this.dialog.addEventListener('cancel', (e) => {
|
|
3519
|
+
e.preventDefault();
|
|
3520
|
+
if (!this.modal) {
|
|
3521
|
+
this.hide();
|
|
3522
|
+
}
|
|
3523
|
+
});
|
|
3524
|
+
|
|
3525
|
+
// Clicks that land directly on the <dialog> element (not on a child) are
|
|
3526
|
+
// backdrop clicks. With the dialog in the top layer the ::backdrop sits above
|
|
3527
|
+
// the deprecated overlay div, so this listener replaces the overlay div's
|
|
3528
|
+
// click handler for backdrop-area interactions.
|
|
3529
|
+
this.dialog.addEventListener('click', (e) => {
|
|
3530
|
+
if (e.target !== this.dialog) {
|
|
3531
|
+
return;
|
|
3532
|
+
}
|
|
3533
|
+
if (this.modal) {
|
|
3534
|
+
return; // Modal drawers require an explicit action to close.
|
|
3535
|
+
}
|
|
3536
|
+
if (AuroFloatingUI.topOpeningFloatingUI !== this.floater) {
|
|
3537
|
+
return; // there is another floatingUI that is currently visible, so ignore backdrop clicks on this one
|
|
3538
|
+
}
|
|
3539
|
+
this.hide();
|
|
3540
|
+
});
|
|
696
3541
|
}
|
|
697
3542
|
|
|
698
3543
|
/**
|
|
@@ -701,24 +3546,32 @@ class ComponentBase extends i$2 {
|
|
|
701
3546
|
* @returns {void}
|
|
702
3547
|
*/
|
|
703
3548
|
updated(changedProperties) {
|
|
704
|
-
|
|
705
|
-
|
|
706
|
-
|
|
3549
|
+
this.floater.handleUpdate(changedProperties);
|
|
3550
|
+
|
|
3551
|
+
if (changedProperties.has('isPopoverVisible')) {
|
|
3552
|
+
if (this.isPopoverVisible) {
|
|
3553
|
+
if (!this.floater.showing) {
|
|
3554
|
+
this.show();
|
|
3555
|
+
}
|
|
707
3556
|
} else {
|
|
708
|
-
this.
|
|
3557
|
+
if (this.floater.showing) {
|
|
3558
|
+
this.hide();
|
|
3559
|
+
}
|
|
709
3560
|
}
|
|
710
3561
|
}
|
|
711
|
-
}
|
|
712
3562
|
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
window.addEventListener("keydown", this.keydownEventHandler);
|
|
3563
|
+
if (changedProperties.has('triggerElement')) {
|
|
3564
|
+
this.floater.configure(this, this.floaterConfig.prefix);
|
|
3565
|
+
}
|
|
717
3566
|
}
|
|
718
3567
|
|
|
719
3568
|
disconnectedCallback() {
|
|
720
3569
|
super.disconnectedCallback();
|
|
721
|
-
|
|
3570
|
+
if (this._hidePopoverTimerId) {
|
|
3571
|
+
clearTimeout(this._hidePopoverTimerId);
|
|
3572
|
+
this._hidePopoverTimerId = undefined;
|
|
3573
|
+
}
|
|
3574
|
+
this.floater.disconnect();
|
|
722
3575
|
}
|
|
723
3576
|
|
|
724
3577
|
/**
|
|
@@ -726,9 +3579,21 @@ class ComponentBase extends i$2 {
|
|
|
726
3579
|
* @returns {void}
|
|
727
3580
|
*/
|
|
728
3581
|
openDialog() {
|
|
729
|
-
this.defaultTrigger = document.activeElement;
|
|
3582
|
+
this.defaultTrigger = document.activeElement || this.triggerElement;
|
|
3583
|
+
|
|
3584
|
+
if (this._hidePopoverTimerId) {
|
|
3585
|
+
clearTimeout(this._hidePopoverTimerId);
|
|
3586
|
+
this._hidePopoverTimerId = undefined;
|
|
3587
|
+
}
|
|
3588
|
+
|
|
3589
|
+
if (this.modal) {
|
|
3590
|
+
this.dialog.showModal();
|
|
3591
|
+
} else {
|
|
3592
|
+
this.dialog.showPopover();
|
|
3593
|
+
}
|
|
730
3594
|
|
|
731
3595
|
this.focusTrap = new FocusTrap(this.dialog);
|
|
3596
|
+
// Focus is moved after the CSS open animation completes (see onDialogTransitionEnd).
|
|
732
3597
|
}
|
|
733
3598
|
|
|
734
3599
|
/**
|
|
@@ -736,7 +3601,7 @@ class ComponentBase extends i$2 {
|
|
|
736
3601
|
* @private
|
|
737
3602
|
*/
|
|
738
3603
|
onDialogTransitionEnd() {
|
|
739
|
-
if (this.
|
|
3604
|
+
if (this.isPopoverVisible && this.focusTrap) {
|
|
740
3605
|
this.focusTrap.focusFirstElement();
|
|
741
3606
|
}
|
|
742
3607
|
}
|
|
@@ -747,17 +3612,31 @@ class ComponentBase extends i$2 {
|
|
|
747
3612
|
*/
|
|
748
3613
|
closeDialog() {
|
|
749
3614
|
if (this.focusTrap) {
|
|
750
|
-
// If the dropdown is not open, disconnect the focus trap if it exists
|
|
751
3615
|
this.focusTrap.disconnect();
|
|
752
3616
|
this.focusTrap = undefined;
|
|
753
3617
|
}
|
|
754
3618
|
|
|
3619
|
+
if (this.modal) {
|
|
3620
|
+
// Dialog spec: close() immediately so the top-layer focus restriction is
|
|
3621
|
+
// lifted before we attempt to restore focus to the trigger.
|
|
3622
|
+
if (this.dialog?.open) {
|
|
3623
|
+
this.dialog.close();
|
|
3624
|
+
}
|
|
3625
|
+
} else {
|
|
3626
|
+
// Popover spec: delay hidePopover() so the dialog stays in the top layer
|
|
3627
|
+
// during the CSS close animation before leaving it.
|
|
3628
|
+
if (!this._hidePopoverTimerId) {
|
|
3629
|
+
this._hidePopoverTimerId = setTimeout(() => {
|
|
3630
|
+
this.dialog?.hidePopover?.();
|
|
3631
|
+
this._hidePopoverTimerId = undefined;
|
|
3632
|
+
}, 300);
|
|
3633
|
+
}
|
|
3634
|
+
}
|
|
3635
|
+
|
|
755
3636
|
if (this.defaultTrigger) {
|
|
756
3637
|
this.defaultTrigger.focus();
|
|
757
3638
|
this.defaultTrigger = undefined;
|
|
758
3639
|
}
|
|
759
|
-
|
|
760
|
-
this.dispatchToggleEvent();
|
|
761
3640
|
}
|
|
762
3641
|
|
|
763
3642
|
/**
|
|
@@ -765,11 +3644,11 @@ class ComponentBase extends i$2 {
|
|
|
765
3644
|
* @returns {void}
|
|
766
3645
|
*/
|
|
767
3646
|
dispatchToggleEvent() {
|
|
768
|
-
const toggleEvent = new Event("toggle", {
|
|
769
|
-
bubbles: true,
|
|
770
|
-
cancelable: false
|
|
3647
|
+
const toggleEvent = new Event("toggle", {
|
|
3648
|
+
bubbles: true,
|
|
3649
|
+
cancelable: false
|
|
771
3650
|
});
|
|
772
|
-
|
|
3651
|
+
|
|
773
3652
|
this.dispatchEvent(toggleEvent);
|
|
774
3653
|
}
|
|
775
3654
|
|
|
@@ -777,59 +3656,37 @@ class ComponentBase extends i$2 {
|
|
|
777
3656
|
* @private
|
|
778
3657
|
* @returns {void}
|
|
779
3658
|
*/
|
|
780
|
-
|
|
781
|
-
|
|
782
|
-
const dropdownComponents = [
|
|
783
|
-
...this.querySelectorAll(
|
|
784
|
-
"auro-combobox, [auro-combobox], auro-select, [auro-select], auro-datepicker, [auro-datepicker]",
|
|
785
|
-
),
|
|
786
|
-
];
|
|
787
|
-
const dropdowns = [
|
|
788
|
-
...this.querySelectorAll("auro-dropdown, [auro-dropdown]"),
|
|
789
|
-
...dropdownComponents.map((comp) => comp.dropdown),
|
|
790
|
-
];
|
|
791
|
-
|
|
792
|
-
const isAnyDropdownOpen = dropdowns.some(
|
|
793
|
-
(dropdown) => dropdown.isPopoverVisible,
|
|
794
|
-
);
|
|
795
|
-
if (!isAnyDropdownOpen) {
|
|
796
|
-
this.handleCloseButtonClick();
|
|
797
|
-
}
|
|
798
|
-
}
|
|
3659
|
+
handleCloseButtonClick() {
|
|
3660
|
+
this.hide();
|
|
799
3661
|
}
|
|
800
3662
|
|
|
801
3663
|
/**
|
|
3664
|
+
* Focus the dialog.
|
|
802
3665
|
* @private
|
|
803
3666
|
* @returns {void}
|
|
804
3667
|
*/
|
|
805
|
-
|
|
806
|
-
this.
|
|
3668
|
+
focus() {
|
|
3669
|
+
if (this.isPopoverVisible) {
|
|
3670
|
+
this.dialog.focus();
|
|
3671
|
+
}
|
|
807
3672
|
}
|
|
808
3673
|
|
|
809
3674
|
/**
|
|
810
|
-
*
|
|
811
|
-
* @param {KeyboardEvent} event - The keyboard event containing the key and keyCode.
|
|
3675
|
+
* Opens the dialog.
|
|
812
3676
|
* @returns {void}
|
|
813
3677
|
*/
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
!this.modal &&
|
|
818
|
-
(key === "Escape" || keyCode === ESCAPE_KEYCODE)
|
|
819
|
-
) {
|
|
820
|
-
this.open = false;
|
|
821
|
-
}
|
|
3678
|
+
show() {
|
|
3679
|
+
this.floater.showBib();
|
|
3680
|
+
this.openDialog();
|
|
822
3681
|
}
|
|
823
3682
|
|
|
824
3683
|
/**
|
|
825
|
-
*
|
|
826
|
-
* @private
|
|
3684
|
+
* Closes the dialog.
|
|
827
3685
|
* @returns {void}
|
|
828
3686
|
*/
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
}
|
|
3687
|
+
hide() {
|
|
3688
|
+
this.floater.hideBib();
|
|
3689
|
+
this.closeDialog();
|
|
833
3690
|
}
|
|
834
3691
|
|
|
835
3692
|
static get styles() {
|
|
@@ -863,50 +3720,57 @@ getCloseButton() {
|
|
|
863
3720
|
render() {
|
|
864
3721
|
const classes = {
|
|
865
3722
|
dialogOverlay: true,
|
|
866
|
-
"dialogOverlay--modal": this.modal && this.
|
|
867
|
-
"dialogOverlay--open": this.
|
|
868
|
-
util_displayHidden: !this.
|
|
3723
|
+
"dialogOverlay--modal": this.modal && this.isPopoverVisible,
|
|
3724
|
+
"dialogOverlay--open": this.isPopoverVisible,
|
|
3725
|
+
util_displayHidden: !this.isPopoverVisible,
|
|
869
3726
|
};
|
|
870
|
-
const
|
|
3727
|
+
const wrapperClasses = {
|
|
871
3728
|
dialog: true,
|
|
872
|
-
|
|
3729
|
+
wrapper: true,
|
|
3730
|
+
"dialog--open": this.isPopoverVisible,
|
|
873
3731
|
};
|
|
874
3732
|
|
|
875
3733
|
return u$2`
|
|
876
3734
|
<!-- Hidden slot for close button aria-label -->
|
|
877
3735
|
<slot name="ariaLabel.dialog.close" hidden @slotchange=${this.requestUpdate}></slot>
|
|
878
3736
|
|
|
879
|
-
|
|
880
|
-
|
|
881
|
-
<div
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
|
|
900
|
-
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
|
|
3737
|
+
<!-- @deprecated dialog-overlay: backdrop styling is now provided by ::backdrop on the dialog element.
|
|
3738
|
+
Retained for backward compatibility; part="dialog-overlay" remains available for custom CSS. -->
|
|
3739
|
+
<div class="${e(classes)}" id="dialog-overlay" part="dialog-overlay"></div>
|
|
3740
|
+
|
|
3741
|
+
<div id="bib" class="bib">
|
|
3742
|
+
<dialog
|
|
3743
|
+
id="dialog"
|
|
3744
|
+
popover="${o$1(this.modal ? undefined : 'manual')}"
|
|
3745
|
+
class="container"
|
|
3746
|
+
aria-labelledby="dialog-header"
|
|
3747
|
+
aria-describedby="dialog-content">
|
|
3748
|
+
<div class="${e(wrapperClasses)}"
|
|
3749
|
+
part="dialog"
|
|
3750
|
+
@transitionend="${this.onDialogTransitionEnd}">
|
|
3751
|
+
${
|
|
3752
|
+
this.unformatted
|
|
3753
|
+
? u$2`
|
|
3754
|
+
<slot name="content"></slot>
|
|
3755
|
+
${this.getCloseButton()}
|
|
3756
|
+
`
|
|
3757
|
+
: u$2`
|
|
3758
|
+
<div class="dialog-header" part="dialog-header">
|
|
3759
|
+
<h1 class="heading heading-lg util_stackMarginNone--top" id="dialog-header">
|
|
3760
|
+
<slot name="header">Default header...</slot>
|
|
3761
|
+
</h1>
|
|
3762
|
+
${this.getCloseButton()}
|
|
3763
|
+
</div>
|
|
3764
|
+
<div id="dialog-content" class="dialog-content body-default" part="dialog-content">
|
|
3765
|
+
<slot name="content"></slot>
|
|
3766
|
+
</div>
|
|
3767
|
+
<div class="dialog-footer" id="footerWrapper" part="dialog-footer">
|
|
3768
|
+
<slot name="footer" id="footer"></slot>
|
|
3769
|
+
</div>
|
|
3770
|
+
`
|
|
3771
|
+
}
|
|
904
3772
|
</div>
|
|
905
|
-
|
|
906
|
-
<slot name="footer" id="footer"></slot>
|
|
907
|
-
</div>
|
|
908
|
-
`
|
|
909
|
-
}
|
|
3773
|
+
</dialog>
|
|
910
3774
|
</div>
|
|
911
3775
|
`;
|
|
912
3776
|
}
|
|
@@ -925,8 +3789,6 @@ class AuroDialog extends ComponentBase {
|
|
|
925
3789
|
static get properties() {
|
|
926
3790
|
return {
|
|
927
3791
|
...ComponentBase.properties,
|
|
928
|
-
// use custom accessors on base class
|
|
929
|
-
open: Object.assign(ComponentBase.properties.open, { noAccessor: true }),
|
|
930
3792
|
};
|
|
931
3793
|
}
|
|
932
3794
|
|