@aurodesignsystem-dev/auro-drawer 0.0.0-pr131.7 → 0.0.0-pr131.9

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.
@@ -1,3696 +0,0 @@
1
- function initBasicExample() {
2
- const buttons = [
3
- document.querySelector("#openBasic"),
4
- document.querySelector("#closeBasic"),
5
- ];
6
- const drawer = document.querySelector("#defaultDrawer");
7
-
8
- drawer.triggerElement = buttons[0];
9
- buttons[1].addEventListener("click", () => {
10
- drawer.removeAttribute("open");
11
- });
12
- }
13
-
14
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
15
- // See LICENSE in the project root for license information.
16
-
17
- // ---------------------------------------------------------------------
18
-
19
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
20
-
21
- class AuroLibraryRuntimeUtils {
22
-
23
- /* eslint-disable jsdoc/require-param */
24
-
25
- /**
26
- * This will register a new custom element with the browser.
27
- * @param {String} name - The name of the custom element.
28
- * @param {Object} componentClass - The class to register as a custom element.
29
- * @returns {void}
30
- */
31
- registerComponent(name, componentClass) {
32
- if (!customElements.get(name)) {
33
- customElements.define(name, class extends componentClass {});
34
- }
35
- }
36
-
37
- /**
38
- * Finds and returns the closest HTML Element based on a selector.
39
- * @returns {void}
40
- */
41
- closestElement(
42
- selector, // selector like in .closest()
43
- base = this, // extra functionality to skip a parent
44
- __Closest = (el, found = el && el.closest(selector)) =>
45
- !el || el === document || el === window
46
- ? null // standard .closest() returns null for non-found selectors also
47
- : found
48
- ? found // found a selector INside this element
49
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
50
- ) {
51
- return __Closest(base);
52
- }
53
- /* eslint-enable jsdoc/require-param */
54
-
55
- /**
56
- * If the element passed is registered with a different tag name than what is passed in, the tag name is added as an attribute to the element.
57
- * @param {Object} elem - The element to check.
58
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
59
- * @returns {void}
60
- */
61
- handleComponentTagRename(elem, tagName) {
62
- const tag = tagName.toLowerCase();
63
- const elemTag = elem.tagName.toLowerCase();
64
-
65
- if (elemTag !== tag) {
66
- elem.setAttribute(tag, true);
67
- }
68
- }
69
-
70
- /**
71
- * Validates if an element is a specific Auro component.
72
- * @param {Object} elem - The element to validate.
73
- * @param {String} tagName - The name of the Auro component to check against.
74
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
75
- */
76
- elementMatch(elem, tagName) {
77
- const tag = tagName.toLowerCase();
78
- const elemTag = elem.tagName.toLowerCase();
79
-
80
- return elemTag === tag || elem.hasAttribute(tag);
81
- }
82
-
83
- /**
84
- * Gets the text content of a named slot.
85
- * @returns {String}
86
- * @private
87
- */
88
- getSlotText(elem, name) {
89
- const slot = elem.shadowRoot?.querySelector(`slot[name="${name}"]`);
90
- const nodes = slot?.assignedNodes({ flatten: true }) || [];
91
- const text = nodes.map(n => n.textContent?.trim()).join(' ').trim();
92
-
93
- return text || null;
94
- }
95
- }
96
-
97
- /**
98
- * @license
99
- * Copyright 2017 Google LLC
100
- * SPDX-License-Identifier: BSD-3-Clause
101
- */
102
- const t$2=globalThis,i$5=t$2.trustedTypes,s$3=i$5?i$5.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$4="$lit$",h$2=`lit$${Math.random().toFixed(9).slice(2)}$`,o$5="?"+h$2,n$3=`<${o$5}>`,r$2=document,l$3=()=>r$2.createComment(""),c$3=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$2=Array.isArray,u$4=t=>a$2(t)||"function"==typeof t?.[Symbol.iterator],d$2="[ \t\n\f\r]",f$3=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v$1=/-->/g,_=/>/g,m$2=RegExp(`>|${d$2}(?:([^\\s"'>=/]+)(${d$2}*=${d$2}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p$3=/'/g,g$2=/"/g,$=/^(?:script|style|textarea|title)$/i,y$3=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x$2=y$3(1),T$1=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A$1=new WeakMap,C$1=r$2.createTreeWalker(r$2,129);function P(t,i){if(!a$2(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$3?s$3.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f$3;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$3?"!--"===u[1]?c=v$1:void 0!==u[1]?c=_: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$3,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$3):c===g$2||c===p$3?c=m$2:c===v$1||c===_?c=f$3:(c=m$2,r=void 0);const x=c===m$2&&t[i+1].startsWith("/>")?" ":"";l+=c===f$3?s+n$3:d>=0?(o.push(a),s.slice(0,d)+e$4+s.slice(d)+h$2+x):s+h$2+(-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$4)){const i=v[a++],s=r.getAttribute(t).split(h$2),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$2)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h$2),s=t.length-1;if(s>0){r.textContent=i$5?i$5.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$3()),C$1.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$3());}}}else if(8===r.nodeType)if(r.data===o$5)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h$2,t+1));)d.push({type:7,index:c}),t+=h$2.length-1;}c++;}}static createElement(t,i){const s=r$2.createElement("template");return s.innerHTML=t,s}};function S$2(t,i,s=t,e){if(i===T$1)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c$3(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$2(t,h._$AS(t,i.values),h,e)),i}let M$1 = 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$2).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$2,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}};let 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$2(this,t,i),c$3(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$4(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$3(this._$AH)?this._$AA.nextSibling.data=t:this.T(r$2.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=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$1(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$2(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$3()),this.O(l$3()),this,this.options)):s=i[e],s._$AI(h),e++;e<i.length&&(this._$AR(s&&s._$AB.nextSibling,e),i.length=e);}_$AR(t=this._$AA.nextSibling,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$2(this,t,i,0),o=!c$3(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$2(this,e[s+n],i,n),r===T$1&&(r=this._$AH[n]),o||=!c$3(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$2(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$2(this,t);}};const j=t$2.litHtmlPolyfillSupport;j?.(N$1,R$1),(t$2.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$3(),t),t,void 0,s??{});}return h._$AI(t),h};
103
-
104
- /**
105
- * @license
106
- * Copyright 2020 Google LLC
107
- * SPDX-License-Identifier: BSD-3-Clause
108
- */
109
- const a$1=Symbol.for(""),o$4=t=>{if(t?.r===a$1)return t?._$litStatic$},s$2=t=>({_$litStatic$:t,r:a$1}),i$4=(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$1}),l$2=new Map,n$2=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$4(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$2.get(t))&&(n.raw=n,l$2.set(t,r=n)),e=u;}return t(r,...e)},u$3=n$2(x$2);
110
-
111
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
112
- // See LICENSE in the project root for license information.
113
-
114
-
115
- class AuroDependencyVersioning {
116
-
117
- /**
118
- * Generates a unique string to be used for child auro element naming.
119
- * @private
120
- * @param {string} baseName - Defines the first part of the unique element name.
121
- * @param {string} version - Version of the component that will be appended to the baseName.
122
- * @returns {string} - Unique string to be used for naming.
123
- */
124
- generateElementName(baseName, version) {
125
- let result = baseName;
126
-
127
- result += '-';
128
- result += version.replace(/[.]/g, '_');
129
-
130
- return result;
131
- }
132
-
133
- /**
134
- * Generates a unique string to be used for child auro element naming.
135
- * @param {string} baseName - Defines the first part of the unique element name.
136
- * @param {string} version - Version of the component that will be appended to the baseName.
137
- * @returns {string} - Unique string to be used for naming.
138
- */
139
- generateTag(baseName, version, tagClass) {
140
- const elementName = this.generateElementName(baseName, version);
141
- const tag = i$4`${s$2(elementName)}`;
142
-
143
- if (!customElements.get(elementName)) {
144
- customElements.define(elementName, class extends tagClass {});
145
- }
146
-
147
- return tag;
148
- }
149
- }
150
-
151
- /**
152
- * Custom positioning reference element.
153
- * @see https://floating-ui.com/docs/virtual-elements
154
- */
155
-
156
- const sides = ['top', 'right', 'bottom', 'left'];
157
- const alignments = ['start', 'end'];
158
- const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
159
- const min = Math.min;
160
- const max = Math.max;
161
- const round = Math.round;
162
- const floor = Math.floor;
163
- const createCoords = v => ({
164
- x: v,
165
- y: v
166
- });
167
- const oppositeSideMap = {
168
- left: 'right',
169
- right: 'left',
170
- bottom: 'top',
171
- top: 'bottom'
172
- };
173
- const oppositeAlignmentMap = {
174
- start: 'end',
175
- end: 'start'
176
- };
177
- function clamp(start, value, end) {
178
- return max(start, min(value, end));
179
- }
180
- function evaluate(value, param) {
181
- return typeof value === 'function' ? value(param) : value;
182
- }
183
- function getSide(placement) {
184
- return placement.split('-')[0];
185
- }
186
- function getAlignment(placement) {
187
- return placement.split('-')[1];
188
- }
189
- function getOppositeAxis(axis) {
190
- return axis === 'x' ? 'y' : 'x';
191
- }
192
- function getAxisLength(axis) {
193
- return axis === 'y' ? 'height' : 'width';
194
- }
195
- const yAxisSides = /*#__PURE__*/new Set(['top', 'bottom']);
196
- function getSideAxis(placement) {
197
- return yAxisSides.has(getSide(placement)) ? 'y' : 'x';
198
- }
199
- function getAlignmentAxis(placement) {
200
- return getOppositeAxis(getSideAxis(placement));
201
- }
202
- function getAlignmentSides(placement, rects, rtl) {
203
- if (rtl === void 0) {
204
- rtl = false;
205
- }
206
- const alignment = getAlignment(placement);
207
- const alignmentAxis = getAlignmentAxis(placement);
208
- const length = getAxisLength(alignmentAxis);
209
- let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
210
- if (rects.reference[length] > rects.floating[length]) {
211
- mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
212
- }
213
- return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
214
- }
215
- function getExpandedPlacements(placement) {
216
- const oppositePlacement = getOppositePlacement(placement);
217
- return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
218
- }
219
- function getOppositeAlignmentPlacement(placement) {
220
- return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
221
- }
222
- const lrPlacement = ['left', 'right'];
223
- const rlPlacement = ['right', 'left'];
224
- const tbPlacement = ['top', 'bottom'];
225
- const btPlacement = ['bottom', 'top'];
226
- function getSideList(side, isStart, rtl) {
227
- switch (side) {
228
- case 'top':
229
- case 'bottom':
230
- if (rtl) return isStart ? rlPlacement : lrPlacement;
231
- return isStart ? lrPlacement : rlPlacement;
232
- case 'left':
233
- case 'right':
234
- return isStart ? tbPlacement : btPlacement;
235
- default:
236
- return [];
237
- }
238
- }
239
- function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
240
- const alignment = getAlignment(placement);
241
- let list = getSideList(getSide(placement), direction === 'start', rtl);
242
- if (alignment) {
243
- list = list.map(side => side + "-" + alignment);
244
- if (flipAlignment) {
245
- list = list.concat(list.map(getOppositeAlignmentPlacement));
246
- }
247
- }
248
- return list;
249
- }
250
- function getOppositePlacement(placement) {
251
- return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
252
- }
253
- function expandPaddingObject(padding) {
254
- return {
255
- top: 0,
256
- right: 0,
257
- bottom: 0,
258
- left: 0,
259
- ...padding
260
- };
261
- }
262
- function getPaddingObject(padding) {
263
- return typeof padding !== 'number' ? expandPaddingObject(padding) : {
264
- top: padding,
265
- right: padding,
266
- bottom: padding,
267
- left: padding
268
- };
269
- }
270
- function rectToClientRect(rect) {
271
- const {
272
- x,
273
- y,
274
- width,
275
- height
276
- } = rect;
277
- return {
278
- width,
279
- height,
280
- top: y,
281
- left: x,
282
- right: x + width,
283
- bottom: y + height,
284
- x,
285
- y
286
- };
287
- }
288
-
289
- function computeCoordsFromPlacement(_ref, placement, rtl) {
290
- let {
291
- reference,
292
- floating
293
- } = _ref;
294
- const sideAxis = getSideAxis(placement);
295
- const alignmentAxis = getAlignmentAxis(placement);
296
- const alignLength = getAxisLength(alignmentAxis);
297
- const side = getSide(placement);
298
- const isVertical = sideAxis === 'y';
299
- const commonX = reference.x + reference.width / 2 - floating.width / 2;
300
- const commonY = reference.y + reference.height / 2 - floating.height / 2;
301
- const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
302
- let coords;
303
- switch (side) {
304
- case 'top':
305
- coords = {
306
- x: commonX,
307
- y: reference.y - floating.height
308
- };
309
- break;
310
- case 'bottom':
311
- coords = {
312
- x: commonX,
313
- y: reference.y + reference.height
314
- };
315
- break;
316
- case 'right':
317
- coords = {
318
- x: reference.x + reference.width,
319
- y: commonY
320
- };
321
- break;
322
- case 'left':
323
- coords = {
324
- x: reference.x - floating.width,
325
- y: commonY
326
- };
327
- break;
328
- default:
329
- coords = {
330
- x: reference.x,
331
- y: reference.y
332
- };
333
- }
334
- switch (getAlignment(placement)) {
335
- case 'start':
336
- coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
337
- break;
338
- case 'end':
339
- coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
340
- break;
341
- }
342
- return coords;
343
- }
344
-
345
- /**
346
- * Computes the `x` and `y` coordinates that will place the floating element
347
- * next to a given reference element.
348
- *
349
- * This export does not have any `platform` interface logic. You will need to
350
- * write one for the platform you are using Floating UI with.
351
- */
352
- const computePosition$1 = async (reference, floating, config) => {
353
- const {
354
- placement = 'bottom',
355
- strategy = 'absolute',
356
- middleware = [],
357
- platform
358
- } = config;
359
- const validMiddleware = middleware.filter(Boolean);
360
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
361
- let rects = await platform.getElementRects({
362
- reference,
363
- floating,
364
- strategy
365
- });
366
- let {
367
- x,
368
- y
369
- } = computeCoordsFromPlacement(rects, placement, rtl);
370
- let statefulPlacement = placement;
371
- let middlewareData = {};
372
- let resetCount = 0;
373
- for (let i = 0; i < validMiddleware.length; i++) {
374
- const {
375
- name,
376
- fn
377
- } = validMiddleware[i];
378
- const {
379
- x: nextX,
380
- y: nextY,
381
- data,
382
- reset
383
- } = await fn({
384
- x,
385
- y,
386
- initialPlacement: placement,
387
- placement: statefulPlacement,
388
- strategy,
389
- middlewareData,
390
- rects,
391
- platform,
392
- elements: {
393
- reference,
394
- floating
395
- }
396
- });
397
- x = nextX != null ? nextX : x;
398
- y = nextY != null ? nextY : y;
399
- middlewareData = {
400
- ...middlewareData,
401
- [name]: {
402
- ...middlewareData[name],
403
- ...data
404
- }
405
- };
406
- if (reset && resetCount <= 50) {
407
- resetCount++;
408
- if (typeof reset === 'object') {
409
- if (reset.placement) {
410
- statefulPlacement = reset.placement;
411
- }
412
- if (reset.rects) {
413
- rects = reset.rects === true ? await platform.getElementRects({
414
- reference,
415
- floating,
416
- strategy
417
- }) : reset.rects;
418
- }
419
- ({
420
- x,
421
- y
422
- } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
423
- }
424
- i = -1;
425
- }
426
- }
427
- return {
428
- x,
429
- y,
430
- placement: statefulPlacement,
431
- strategy,
432
- middlewareData
433
- };
434
- };
435
-
436
- /**
437
- * Resolves with an object of overflow side offsets that determine how much the
438
- * element is overflowing a given clipping boundary on each side.
439
- * - positive = overflowing the boundary by that number of pixels
440
- * - negative = how many pixels left before it will overflow
441
- * - 0 = lies flush with the boundary
442
- * @see https://floating-ui.com/docs/detectOverflow
443
- */
444
- async function detectOverflow(state, options) {
445
- var _await$platform$isEle;
446
- if (options === void 0) {
447
- options = {};
448
- }
449
- const {
450
- x,
451
- y,
452
- platform,
453
- rects,
454
- elements,
455
- strategy
456
- } = state;
457
- const {
458
- boundary = 'clippingAncestors',
459
- rootBoundary = 'viewport',
460
- elementContext = 'floating',
461
- altBoundary = false,
462
- padding = 0
463
- } = evaluate(options, state);
464
- const paddingObject = getPaddingObject(padding);
465
- const altContext = elementContext === 'floating' ? 'reference' : 'floating';
466
- const element = elements[altBoundary ? altContext : elementContext];
467
- const clippingClientRect = rectToClientRect(await platform.getClippingRect({
468
- 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))),
469
- boundary,
470
- rootBoundary,
471
- strategy
472
- }));
473
- const rect = elementContext === 'floating' ? {
474
- x,
475
- y,
476
- width: rects.floating.width,
477
- height: rects.floating.height
478
- } : rects.reference;
479
- const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
480
- const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
481
- x: 1,
482
- y: 1
483
- } : {
484
- x: 1,
485
- y: 1
486
- };
487
- const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
488
- elements,
489
- rect,
490
- offsetParent,
491
- strategy
492
- }) : rect);
493
- return {
494
- top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
495
- bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
496
- left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
497
- right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
498
- };
499
- }
500
-
501
- function getPlacementList(alignment, autoAlignment, allowedPlacements) {
502
- const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
503
- return allowedPlacementsSortedByAlignment.filter(placement => {
504
- if (alignment) {
505
- return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
506
- }
507
- return true;
508
- });
509
- }
510
- /**
511
- * Optimizes the visibility of the floating element by choosing the placement
512
- * that has the most space available automatically, without needing to specify a
513
- * preferred placement. Alternative to `flip`.
514
- * @see https://floating-ui.com/docs/autoPlacement
515
- */
516
- const autoPlacement$1 = function (options) {
517
- if (options === void 0) {
518
- options = {};
519
- }
520
- return {
521
- name: 'autoPlacement',
522
- options,
523
- async fn(state) {
524
- var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
525
- const {
526
- rects,
527
- middlewareData,
528
- placement,
529
- platform,
530
- elements
531
- } = state;
532
- const {
533
- crossAxis = false,
534
- alignment,
535
- allowedPlacements = placements,
536
- autoAlignment = true,
537
- ...detectOverflowOptions
538
- } = evaluate(options, state);
539
- const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
540
- const overflow = await detectOverflow(state, detectOverflowOptions);
541
- const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
542
- const currentPlacement = placements$1[currentIndex];
543
- if (currentPlacement == null) {
544
- return {};
545
- }
546
- const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
547
-
548
- // Make `computeCoords` start from the right place.
549
- if (placement !== currentPlacement) {
550
- return {
551
- reset: {
552
- placement: placements$1[0]
553
- }
554
- };
555
- }
556
- const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
557
- const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
558
- placement: currentPlacement,
559
- overflows: currentOverflows
560
- }];
561
- const nextPlacement = placements$1[currentIndex + 1];
562
-
563
- // There are more placements to check.
564
- if (nextPlacement) {
565
- return {
566
- data: {
567
- index: currentIndex + 1,
568
- overflows: allOverflows
569
- },
570
- reset: {
571
- placement: nextPlacement
572
- }
573
- };
574
- }
575
- const placementsSortedByMostSpace = allOverflows.map(d => {
576
- const alignment = getAlignment(d.placement);
577
- return [d.placement, alignment && crossAxis ?
578
- // Check along the mainAxis and main crossAxis side.
579
- d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
580
- // Check only the mainAxis.
581
- d.overflows[0], d.overflows];
582
- }).sort((a, b) => a[1] - b[1]);
583
- const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
584
- // Aligned placements should not check their opposite crossAxis
585
- // side.
586
- getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
587
- const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
588
- if (resetPlacement !== placement) {
589
- return {
590
- data: {
591
- index: currentIndex + 1,
592
- overflows: allOverflows
593
- },
594
- reset: {
595
- placement: resetPlacement
596
- }
597
- };
598
- }
599
- return {};
600
- }
601
- };
602
- };
603
-
604
- /**
605
- * Optimizes the visibility of the floating element by flipping the `placement`
606
- * in order to keep it in view when the preferred placement(s) will overflow the
607
- * clipping boundary. Alternative to `autoPlacement`.
608
- * @see https://floating-ui.com/docs/flip
609
- */
610
- const flip$1 = function (options) {
611
- if (options === void 0) {
612
- options = {};
613
- }
614
- return {
615
- name: 'flip',
616
- options,
617
- async fn(state) {
618
- var _middlewareData$arrow, _middlewareData$flip;
619
- const {
620
- placement,
621
- middlewareData,
622
- rects,
623
- initialPlacement,
624
- platform,
625
- elements
626
- } = state;
627
- const {
628
- mainAxis: checkMainAxis = true,
629
- crossAxis: checkCrossAxis = true,
630
- fallbackPlacements: specifiedFallbackPlacements,
631
- fallbackStrategy = 'bestFit',
632
- fallbackAxisSideDirection = 'none',
633
- flipAlignment = true,
634
- ...detectOverflowOptions
635
- } = evaluate(options, state);
636
-
637
- // If a reset by the arrow was caused due to an alignment offset being
638
- // added, we should skip any logic now since `flip()` has already done its
639
- // work.
640
- // https://github.com/floating-ui/floating-ui/issues/2549#issuecomment-1719601643
641
- if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
642
- return {};
643
- }
644
- const side = getSide(placement);
645
- const initialSideAxis = getSideAxis(initialPlacement);
646
- const isBasePlacement = getSide(initialPlacement) === initialPlacement;
647
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
648
- const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
649
- const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
650
- if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
651
- fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
652
- }
653
- const placements = [initialPlacement, ...fallbackPlacements];
654
- const overflow = await detectOverflow(state, detectOverflowOptions);
655
- const overflows = [];
656
- let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
657
- if (checkMainAxis) {
658
- overflows.push(overflow[side]);
659
- }
660
- if (checkCrossAxis) {
661
- const sides = getAlignmentSides(placement, rects, rtl);
662
- overflows.push(overflow[sides[0]], overflow[sides[1]]);
663
- }
664
- overflowsData = [...overflowsData, {
665
- placement,
666
- overflows
667
- }];
668
-
669
- // One or more sides is overflowing.
670
- if (!overflows.every(side => side <= 0)) {
671
- var _middlewareData$flip2, _overflowsData$filter;
672
- const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
673
- const nextPlacement = placements[nextIndex];
674
- if (nextPlacement) {
675
- const ignoreCrossAxisOverflow = checkCrossAxis === 'alignment' ? initialSideAxis !== getSideAxis(nextPlacement) : false;
676
- if (!ignoreCrossAxisOverflow ||
677
- // We leave the current main axis only if every placement on that axis
678
- // overflows the main axis.
679
- overflowsData.every(d => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
680
- // Try next placement and re-run the lifecycle.
681
- return {
682
- data: {
683
- index: nextIndex,
684
- overflows: overflowsData
685
- },
686
- reset: {
687
- placement: nextPlacement
688
- }
689
- };
690
- }
691
- }
692
-
693
- // First, find the candidates that fit on the mainAxis side of overflow,
694
- // then find the placement that fits the best on the main crossAxis side.
695
- 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;
696
-
697
- // Otherwise fallback.
698
- if (!resetPlacement) {
699
- switch (fallbackStrategy) {
700
- case 'bestFit':
701
- {
702
- var _overflowsData$filter2;
703
- const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
704
- if (hasFallbackAxisSideDirection) {
705
- const currentSideAxis = getSideAxis(d.placement);
706
- return currentSideAxis === initialSideAxis ||
707
- // Create a bias to the `y` side axis due to horizontal
708
- // reading directions favoring greater width.
709
- currentSideAxis === 'y';
710
- }
711
- return true;
712
- }).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];
713
- if (placement) {
714
- resetPlacement = placement;
715
- }
716
- break;
717
- }
718
- case 'initialPlacement':
719
- resetPlacement = initialPlacement;
720
- break;
721
- }
722
- }
723
- if (placement !== resetPlacement) {
724
- return {
725
- reset: {
726
- placement: resetPlacement
727
- }
728
- };
729
- }
730
- }
731
- return {};
732
- }
733
- };
734
- };
735
-
736
- const originSides = /*#__PURE__*/new Set(['left', 'top']);
737
-
738
- // For type backwards-compatibility, the `OffsetOptions` type was also
739
- // Derivable.
740
-
741
- async function convertValueToCoords(state, options) {
742
- const {
743
- placement,
744
- platform,
745
- elements
746
- } = state;
747
- const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
748
- const side = getSide(placement);
749
- const alignment = getAlignment(placement);
750
- const isVertical = getSideAxis(placement) === 'y';
751
- const mainAxisMulti = originSides.has(side) ? -1 : 1;
752
- const crossAxisMulti = rtl && isVertical ? -1 : 1;
753
- const rawValue = evaluate(options, state);
754
-
755
- // eslint-disable-next-line prefer-const
756
- let {
757
- mainAxis,
758
- crossAxis,
759
- alignmentAxis
760
- } = typeof rawValue === 'number' ? {
761
- mainAxis: rawValue,
762
- crossAxis: 0,
763
- alignmentAxis: null
764
- } : {
765
- mainAxis: rawValue.mainAxis || 0,
766
- crossAxis: rawValue.crossAxis || 0,
767
- alignmentAxis: rawValue.alignmentAxis
768
- };
769
- if (alignment && typeof alignmentAxis === 'number') {
770
- crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
771
- }
772
- return isVertical ? {
773
- x: crossAxis * crossAxisMulti,
774
- y: mainAxis * mainAxisMulti
775
- } : {
776
- x: mainAxis * mainAxisMulti,
777
- y: crossAxis * crossAxisMulti
778
- };
779
- }
780
-
781
- /**
782
- * Modifies the placement by translating the floating element along the
783
- * specified axes.
784
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
785
- * object may be passed.
786
- * @see https://floating-ui.com/docs/offset
787
- */
788
- const offset$1 = function (options) {
789
- if (options === void 0) {
790
- options = 0;
791
- }
792
- return {
793
- name: 'offset',
794
- options,
795
- async fn(state) {
796
- var _middlewareData$offse, _middlewareData$arrow;
797
- const {
798
- x,
799
- y,
800
- placement,
801
- middlewareData
802
- } = state;
803
- const diffCoords = await convertValueToCoords(state, options);
804
-
805
- // If the placement is the same and the arrow caused an alignment offset
806
- // then we don't need to change the positioning coordinates.
807
- if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
808
- return {};
809
- }
810
- return {
811
- x: x + diffCoords.x,
812
- y: y + diffCoords.y,
813
- data: {
814
- ...diffCoords,
815
- placement
816
- }
817
- };
818
- }
819
- };
820
- };
821
-
822
- /**
823
- * Optimizes the visibility of the floating element by shifting it in order to
824
- * keep it in view when it will overflow the clipping boundary.
825
- * @see https://floating-ui.com/docs/shift
826
- */
827
- const shift$1 = function (options) {
828
- if (options === void 0) {
829
- options = {};
830
- }
831
- return {
832
- name: 'shift',
833
- options,
834
- async fn(state) {
835
- const {
836
- x,
837
- y,
838
- placement
839
- } = state;
840
- const {
841
- mainAxis: checkMainAxis = true,
842
- crossAxis: checkCrossAxis = false,
843
- limiter = {
844
- fn: _ref => {
845
- let {
846
- x,
847
- y
848
- } = _ref;
849
- return {
850
- x,
851
- y
852
- };
853
- }
854
- },
855
- ...detectOverflowOptions
856
- } = evaluate(options, state);
857
- const coords = {
858
- x,
859
- y
860
- };
861
- const overflow = await detectOverflow(state, detectOverflowOptions);
862
- const crossAxis = getSideAxis(getSide(placement));
863
- const mainAxis = getOppositeAxis(crossAxis);
864
- let mainAxisCoord = coords[mainAxis];
865
- let crossAxisCoord = coords[crossAxis];
866
- if (checkMainAxis) {
867
- const minSide = mainAxis === 'y' ? 'top' : 'left';
868
- const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
869
- const min = mainAxisCoord + overflow[minSide];
870
- const max = mainAxisCoord - overflow[maxSide];
871
- mainAxisCoord = clamp(min, mainAxisCoord, max);
872
- }
873
- if (checkCrossAxis) {
874
- const minSide = crossAxis === 'y' ? 'top' : 'left';
875
- const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
876
- const min = crossAxisCoord + overflow[minSide];
877
- const max = crossAxisCoord - overflow[maxSide];
878
- crossAxisCoord = clamp(min, crossAxisCoord, max);
879
- }
880
- const limitedCoords = limiter.fn({
881
- ...state,
882
- [mainAxis]: mainAxisCoord,
883
- [crossAxis]: crossAxisCoord
884
- });
885
- return {
886
- ...limitedCoords,
887
- data: {
888
- x: limitedCoords.x - x,
889
- y: limitedCoords.y - y,
890
- enabled: {
891
- [mainAxis]: checkMainAxis,
892
- [crossAxis]: checkCrossAxis
893
- }
894
- }
895
- };
896
- }
897
- };
898
- };
899
-
900
- function hasWindow() {
901
- return typeof window !== 'undefined';
902
- }
903
- function getNodeName(node) {
904
- if (isNode(node)) {
905
- return (node.nodeName || '').toLowerCase();
906
- }
907
- // Mocked nodes in testing environments may not be instances of Node. By
908
- // returning `#document` an infinite loop won't occur.
909
- // https://github.com/floating-ui/floating-ui/issues/2317
910
- return '#document';
911
- }
912
- function getWindow(node) {
913
- var _node$ownerDocument;
914
- return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
915
- }
916
- function getDocumentElement(node) {
917
- var _ref;
918
- return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
919
- }
920
- function isNode(value) {
921
- if (!hasWindow()) {
922
- return false;
923
- }
924
- return value instanceof Node || value instanceof getWindow(value).Node;
925
- }
926
- function isElement(value) {
927
- if (!hasWindow()) {
928
- return false;
929
- }
930
- return value instanceof Element || value instanceof getWindow(value).Element;
931
- }
932
- function isHTMLElement(value) {
933
- if (!hasWindow()) {
934
- return false;
935
- }
936
- return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
937
- }
938
- function isShadowRoot(value) {
939
- if (!hasWindow() || typeof ShadowRoot === 'undefined') {
940
- return false;
941
- }
942
- return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
943
- }
944
- const invalidOverflowDisplayValues = /*#__PURE__*/new Set(['inline', 'contents']);
945
- function isOverflowElement(element) {
946
- const {
947
- overflow,
948
- overflowX,
949
- overflowY,
950
- display
951
- } = getComputedStyle$1(element);
952
- return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
953
- }
954
- const tableElements = /*#__PURE__*/new Set(['table', 'td', 'th']);
955
- function isTableElement(element) {
956
- return tableElements.has(getNodeName(element));
957
- }
958
- const topLayerSelectors = [':popover-open', ':modal'];
959
- function isTopLayer(element) {
960
- return topLayerSelectors.some(selector => {
961
- try {
962
- return element.matches(selector);
963
- } catch (_e) {
964
- return false;
965
- }
966
- });
967
- }
968
- const transformProperties = ['transform', 'translate', 'scale', 'rotate', 'perspective'];
969
- const willChangeValues = ['transform', 'translate', 'scale', 'rotate', 'perspective', 'filter'];
970
- const containValues = ['paint', 'layout', 'strict', 'content'];
971
- function isContainingBlock(elementOrCss) {
972
- const webkit = isWebKit();
973
- const css = isElement(elementOrCss) ? getComputedStyle$1(elementOrCss) : elementOrCss;
974
-
975
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
976
- // https://drafts.csswg.org/css-transforms-2/#individual-transforms
977
- 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));
978
- }
979
- function getContainingBlock(element) {
980
- let currentNode = getParentNode(element);
981
- while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
982
- if (isContainingBlock(currentNode)) {
983
- return currentNode;
984
- } else if (isTopLayer(currentNode)) {
985
- return null;
986
- }
987
- currentNode = getParentNode(currentNode);
988
- }
989
- return null;
990
- }
991
- function isWebKit() {
992
- if (typeof CSS === 'undefined' || !CSS.supports) return false;
993
- return CSS.supports('-webkit-backdrop-filter', 'none');
994
- }
995
- const lastTraversableNodeNames = /*#__PURE__*/new Set(['html', 'body', '#document']);
996
- function isLastTraversableNode(node) {
997
- return lastTraversableNodeNames.has(getNodeName(node));
998
- }
999
- function getComputedStyle$1(element) {
1000
- return getWindow(element).getComputedStyle(element);
1001
- }
1002
- function getNodeScroll(element) {
1003
- if (isElement(element)) {
1004
- return {
1005
- scrollLeft: element.scrollLeft,
1006
- scrollTop: element.scrollTop
1007
- };
1008
- }
1009
- return {
1010
- scrollLeft: element.scrollX,
1011
- scrollTop: element.scrollY
1012
- };
1013
- }
1014
- function getParentNode(node) {
1015
- if (getNodeName(node) === 'html') {
1016
- return node;
1017
- }
1018
- const result =
1019
- // Step into the shadow DOM of the parent of a slotted node.
1020
- node.assignedSlot ||
1021
- // DOM Element detected.
1022
- node.parentNode ||
1023
- // ShadowRoot detected.
1024
- isShadowRoot(node) && node.host ||
1025
- // Fallback.
1026
- getDocumentElement(node);
1027
- return isShadowRoot(result) ? result.host : result;
1028
- }
1029
- function getNearestOverflowAncestor(node) {
1030
- const parentNode = getParentNode(node);
1031
- if (isLastTraversableNode(parentNode)) {
1032
- return node.ownerDocument ? node.ownerDocument.body : node.body;
1033
- }
1034
- if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
1035
- return parentNode;
1036
- }
1037
- return getNearestOverflowAncestor(parentNode);
1038
- }
1039
- function getOverflowAncestors(node, list, traverseIframes) {
1040
- var _node$ownerDocument2;
1041
- if (list === void 0) {
1042
- list = [];
1043
- }
1044
- if (traverseIframes === void 0) {
1045
- traverseIframes = true;
1046
- }
1047
- const scrollableAncestor = getNearestOverflowAncestor(node);
1048
- const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
1049
- const win = getWindow(scrollableAncestor);
1050
- if (isBody) {
1051
- const frameElement = getFrameElement(win);
1052
- return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
1053
- }
1054
- return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
1055
- }
1056
- function getFrameElement(win) {
1057
- return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
1058
- }
1059
-
1060
- function getCssDimensions(element) {
1061
- const css = getComputedStyle$1(element);
1062
- // In testing environments, the `width` and `height` properties are empty
1063
- // strings for SVG elements, returning NaN. Fallback to `0` in this case.
1064
- let width = parseFloat(css.width) || 0;
1065
- let height = parseFloat(css.height) || 0;
1066
- const hasOffset = isHTMLElement(element);
1067
- const offsetWidth = hasOffset ? element.offsetWidth : width;
1068
- const offsetHeight = hasOffset ? element.offsetHeight : height;
1069
- const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
1070
- if (shouldFallback) {
1071
- width = offsetWidth;
1072
- height = offsetHeight;
1073
- }
1074
- return {
1075
- width,
1076
- height,
1077
- $: shouldFallback
1078
- };
1079
- }
1080
-
1081
- function unwrapElement(element) {
1082
- return !isElement(element) ? element.contextElement : element;
1083
- }
1084
-
1085
- function getScale(element) {
1086
- const domElement = unwrapElement(element);
1087
- if (!isHTMLElement(domElement)) {
1088
- return createCoords(1);
1089
- }
1090
- const rect = domElement.getBoundingClientRect();
1091
- const {
1092
- width,
1093
- height,
1094
- $
1095
- } = getCssDimensions(domElement);
1096
- let x = ($ ? round(rect.width) : rect.width) / width;
1097
- let y = ($ ? round(rect.height) : rect.height) / height;
1098
-
1099
- // 0, NaN, or Infinity should always fallback to 1.
1100
-
1101
- if (!x || !Number.isFinite(x)) {
1102
- x = 1;
1103
- }
1104
- if (!y || !Number.isFinite(y)) {
1105
- y = 1;
1106
- }
1107
- return {
1108
- x,
1109
- y
1110
- };
1111
- }
1112
-
1113
- const noOffsets = /*#__PURE__*/createCoords(0);
1114
- function getVisualOffsets(element) {
1115
- const win = getWindow(element);
1116
- if (!isWebKit() || !win.visualViewport) {
1117
- return noOffsets;
1118
- }
1119
- return {
1120
- x: win.visualViewport.offsetLeft,
1121
- y: win.visualViewport.offsetTop
1122
- };
1123
- }
1124
- function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
1125
- if (isFixed === void 0) {
1126
- isFixed = false;
1127
- }
1128
- if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
1129
- return false;
1130
- }
1131
- return isFixed;
1132
- }
1133
-
1134
- function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
1135
- if (includeScale === void 0) {
1136
- includeScale = false;
1137
- }
1138
- if (isFixedStrategy === void 0) {
1139
- isFixedStrategy = false;
1140
- }
1141
- const clientRect = element.getBoundingClientRect();
1142
- const domElement = unwrapElement(element);
1143
- let scale = createCoords(1);
1144
- if (includeScale) {
1145
- if (offsetParent) {
1146
- if (isElement(offsetParent)) {
1147
- scale = getScale(offsetParent);
1148
- }
1149
- } else {
1150
- scale = getScale(element);
1151
- }
1152
- }
1153
- const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
1154
- let x = (clientRect.left + visualOffsets.x) / scale.x;
1155
- let y = (clientRect.top + visualOffsets.y) / scale.y;
1156
- let width = clientRect.width / scale.x;
1157
- let height = clientRect.height / scale.y;
1158
- if (domElement) {
1159
- const win = getWindow(domElement);
1160
- const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
1161
- let currentWin = win;
1162
- let currentIFrame = getFrameElement(currentWin);
1163
- while (currentIFrame && offsetParent && offsetWin !== currentWin) {
1164
- const iframeScale = getScale(currentIFrame);
1165
- const iframeRect = currentIFrame.getBoundingClientRect();
1166
- const css = getComputedStyle$1(currentIFrame);
1167
- const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
1168
- const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
1169
- x *= iframeScale.x;
1170
- y *= iframeScale.y;
1171
- width *= iframeScale.x;
1172
- height *= iframeScale.y;
1173
- x += left;
1174
- y += top;
1175
- currentWin = getWindow(currentIFrame);
1176
- currentIFrame = getFrameElement(currentWin);
1177
- }
1178
- }
1179
- return rectToClientRect({
1180
- width,
1181
- height,
1182
- x,
1183
- y
1184
- });
1185
- }
1186
-
1187
- // If <html> has a CSS width greater than the viewport, then this will be
1188
- // incorrect for RTL.
1189
- function getWindowScrollBarX(element, rect) {
1190
- const leftScroll = getNodeScroll(element).scrollLeft;
1191
- if (!rect) {
1192
- return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
1193
- }
1194
- return rect.left + leftScroll;
1195
- }
1196
-
1197
- function getHTMLOffset(documentElement, scroll) {
1198
- const htmlRect = documentElement.getBoundingClientRect();
1199
- const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
1200
- const y = htmlRect.top + scroll.scrollTop;
1201
- return {
1202
- x,
1203
- y
1204
- };
1205
- }
1206
-
1207
- function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
1208
- let {
1209
- elements,
1210
- rect,
1211
- offsetParent,
1212
- strategy
1213
- } = _ref;
1214
- const isFixed = strategy === 'fixed';
1215
- const documentElement = getDocumentElement(offsetParent);
1216
- const topLayer = elements ? isTopLayer(elements.floating) : false;
1217
- if (offsetParent === documentElement || topLayer && isFixed) {
1218
- return rect;
1219
- }
1220
- let scroll = {
1221
- scrollLeft: 0,
1222
- scrollTop: 0
1223
- };
1224
- let scale = createCoords(1);
1225
- const offsets = createCoords(0);
1226
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1227
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1228
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1229
- scroll = getNodeScroll(offsetParent);
1230
- }
1231
- if (isHTMLElement(offsetParent)) {
1232
- const offsetRect = getBoundingClientRect(offsetParent);
1233
- scale = getScale(offsetParent);
1234
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1235
- offsets.y = offsetRect.y + offsetParent.clientTop;
1236
- }
1237
- }
1238
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1239
- return {
1240
- width: rect.width * scale.x,
1241
- height: rect.height * scale.y,
1242
- x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
1243
- y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
1244
- };
1245
- }
1246
-
1247
- function getClientRects(element) {
1248
- return Array.from(element.getClientRects());
1249
- }
1250
-
1251
- // Gets the entire size of the scrollable document area, even extending outside
1252
- // of the `<html>` and `<body>` rect bounds if horizontally scrollable.
1253
- function getDocumentRect(element) {
1254
- const html = getDocumentElement(element);
1255
- const scroll = getNodeScroll(element);
1256
- const body = element.ownerDocument.body;
1257
- const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
1258
- const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
1259
- let x = -scroll.scrollLeft + getWindowScrollBarX(element);
1260
- const y = -scroll.scrollTop;
1261
- if (getComputedStyle$1(body).direction === 'rtl') {
1262
- x += max(html.clientWidth, body.clientWidth) - width;
1263
- }
1264
- return {
1265
- width,
1266
- height,
1267
- x,
1268
- y
1269
- };
1270
- }
1271
-
1272
- // Safety check: ensure the scrollbar space is reasonable in case this
1273
- // calculation is affected by unusual styles.
1274
- // Most scrollbars leave 15-18px of space.
1275
- const SCROLLBAR_MAX = 25;
1276
- function getViewportRect(element, strategy) {
1277
- const win = getWindow(element);
1278
- const html = getDocumentElement(element);
1279
- const visualViewport = win.visualViewport;
1280
- let width = html.clientWidth;
1281
- let height = html.clientHeight;
1282
- let x = 0;
1283
- let y = 0;
1284
- if (visualViewport) {
1285
- width = visualViewport.width;
1286
- height = visualViewport.height;
1287
- const visualViewportBased = isWebKit();
1288
- if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
1289
- x = visualViewport.offsetLeft;
1290
- y = visualViewport.offsetTop;
1291
- }
1292
- }
1293
- const windowScrollbarX = getWindowScrollBarX(html);
1294
- // <html> `overflow: hidden` + `scrollbar-gutter: stable` reduces the
1295
- // visual width of the <html> but this is not considered in the size
1296
- // of `html.clientWidth`.
1297
- if (windowScrollbarX <= 0) {
1298
- const doc = html.ownerDocument;
1299
- const body = doc.body;
1300
- const bodyStyles = getComputedStyle(body);
1301
- const bodyMarginInline = doc.compatMode === 'CSS1Compat' ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
1302
- const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
1303
- if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
1304
- width -= clippingStableScrollbarWidth;
1305
- }
1306
- } else if (windowScrollbarX <= SCROLLBAR_MAX) {
1307
- // If the <body> scrollbar is on the left, the width needs to be extended
1308
- // by the scrollbar amount so there isn't extra space on the right.
1309
- width += windowScrollbarX;
1310
- }
1311
- return {
1312
- width,
1313
- height,
1314
- x,
1315
- y
1316
- };
1317
- }
1318
-
1319
- const absoluteOrFixed = /*#__PURE__*/new Set(['absolute', 'fixed']);
1320
- // Returns the inner client rect, subtracting scrollbars if present.
1321
- function getInnerBoundingClientRect(element, strategy) {
1322
- const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
1323
- const top = clientRect.top + element.clientTop;
1324
- const left = clientRect.left + element.clientLeft;
1325
- const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
1326
- const width = element.clientWidth * scale.x;
1327
- const height = element.clientHeight * scale.y;
1328
- const x = left * scale.x;
1329
- const y = top * scale.y;
1330
- return {
1331
- width,
1332
- height,
1333
- x,
1334
- y
1335
- };
1336
- }
1337
- function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
1338
- let rect;
1339
- if (clippingAncestor === 'viewport') {
1340
- rect = getViewportRect(element, strategy);
1341
- } else if (clippingAncestor === 'document') {
1342
- rect = getDocumentRect(getDocumentElement(element));
1343
- } else if (isElement(clippingAncestor)) {
1344
- rect = getInnerBoundingClientRect(clippingAncestor, strategy);
1345
- } else {
1346
- const visualOffsets = getVisualOffsets(element);
1347
- rect = {
1348
- x: clippingAncestor.x - visualOffsets.x,
1349
- y: clippingAncestor.y - visualOffsets.y,
1350
- width: clippingAncestor.width,
1351
- height: clippingAncestor.height
1352
- };
1353
- }
1354
- return rectToClientRect(rect);
1355
- }
1356
- function hasFixedPositionAncestor(element, stopNode) {
1357
- const parentNode = getParentNode(element);
1358
- if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
1359
- return false;
1360
- }
1361
- return getComputedStyle$1(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
1362
- }
1363
-
1364
- // A "clipping ancestor" is an `overflow` element with the characteristic of
1365
- // clipping (or hiding) child elements. This returns all clipping ancestors
1366
- // of the given element up the tree.
1367
- function getClippingElementAncestors(element, cache) {
1368
- const cachedResult = cache.get(element);
1369
- if (cachedResult) {
1370
- return cachedResult;
1371
- }
1372
- let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
1373
- let currentContainingBlockComputedStyle = null;
1374
- const elementIsFixed = getComputedStyle$1(element).position === 'fixed';
1375
- let currentNode = elementIsFixed ? getParentNode(element) : element;
1376
-
1377
- // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
1378
- while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
1379
- const computedStyle = getComputedStyle$1(currentNode);
1380
- const currentNodeIsContaining = isContainingBlock(currentNode);
1381
- if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
1382
- currentContainingBlockComputedStyle = null;
1383
- }
1384
- const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
1385
- if (shouldDropCurrentNode) {
1386
- // Drop non-containing blocks.
1387
- result = result.filter(ancestor => ancestor !== currentNode);
1388
- } else {
1389
- // Record last containing block for next iteration.
1390
- currentContainingBlockComputedStyle = computedStyle;
1391
- }
1392
- currentNode = getParentNode(currentNode);
1393
- }
1394
- cache.set(element, result);
1395
- return result;
1396
- }
1397
-
1398
- // Gets the maximum area that the element is visible in due to any number of
1399
- // clipping ancestors.
1400
- function getClippingRect(_ref) {
1401
- let {
1402
- element,
1403
- boundary,
1404
- rootBoundary,
1405
- strategy
1406
- } = _ref;
1407
- const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
1408
- const clippingAncestors = [...elementClippingAncestors, rootBoundary];
1409
- const firstClippingAncestor = clippingAncestors[0];
1410
- const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
1411
- const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
1412
- accRect.top = max(rect.top, accRect.top);
1413
- accRect.right = min(rect.right, accRect.right);
1414
- accRect.bottom = min(rect.bottom, accRect.bottom);
1415
- accRect.left = max(rect.left, accRect.left);
1416
- return accRect;
1417
- }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
1418
- return {
1419
- width: clippingRect.right - clippingRect.left,
1420
- height: clippingRect.bottom - clippingRect.top,
1421
- x: clippingRect.left,
1422
- y: clippingRect.top
1423
- };
1424
- }
1425
-
1426
- function getDimensions(element) {
1427
- const {
1428
- width,
1429
- height
1430
- } = getCssDimensions(element);
1431
- return {
1432
- width,
1433
- height
1434
- };
1435
- }
1436
-
1437
- function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1438
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1439
- const documentElement = getDocumentElement(offsetParent);
1440
- const isFixed = strategy === 'fixed';
1441
- const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
1442
- let scroll = {
1443
- scrollLeft: 0,
1444
- scrollTop: 0
1445
- };
1446
- const offsets = createCoords(0);
1447
-
1448
- // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1449
- // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1450
- function setLeftRTLScrollbarOffset() {
1451
- offsets.x = getWindowScrollBarX(documentElement);
1452
- }
1453
- if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1454
- if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1455
- scroll = getNodeScroll(offsetParent);
1456
- }
1457
- if (isOffsetParentAnElement) {
1458
- const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
1459
- offsets.x = offsetRect.x + offsetParent.clientLeft;
1460
- offsets.y = offsetRect.y + offsetParent.clientTop;
1461
- } else if (documentElement) {
1462
- setLeftRTLScrollbarOffset();
1463
- }
1464
- }
1465
- if (isFixed && !isOffsetParentAnElement && documentElement) {
1466
- setLeftRTLScrollbarOffset();
1467
- }
1468
- const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
1469
- const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
1470
- const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
1471
- return {
1472
- x,
1473
- y,
1474
- width: rect.width,
1475
- height: rect.height
1476
- };
1477
- }
1478
-
1479
- function isStaticPositioned(element) {
1480
- return getComputedStyle$1(element).position === 'static';
1481
- }
1482
-
1483
- function getTrueOffsetParent(element, polyfill) {
1484
- if (!isHTMLElement(element) || getComputedStyle$1(element).position === 'fixed') {
1485
- return null;
1486
- }
1487
- if (polyfill) {
1488
- return polyfill(element);
1489
- }
1490
- let rawOffsetParent = element.offsetParent;
1491
-
1492
- // Firefox returns the <html> element as the offsetParent if it's non-static,
1493
- // while Chrome and Safari return the <body> element. The <body> element must
1494
- // be used to perform the correct calculations even if the <html> element is
1495
- // non-static.
1496
- if (getDocumentElement(element) === rawOffsetParent) {
1497
- rawOffsetParent = rawOffsetParent.ownerDocument.body;
1498
- }
1499
- return rawOffsetParent;
1500
- }
1501
-
1502
- // Gets the closest ancestor positioned element. Handles some edge cases,
1503
- // such as table ancestors and cross browser bugs.
1504
- function getOffsetParent(element, polyfill) {
1505
- const win = getWindow(element);
1506
- if (isTopLayer(element)) {
1507
- return win;
1508
- }
1509
- if (!isHTMLElement(element)) {
1510
- let svgOffsetParent = getParentNode(element);
1511
- while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
1512
- if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
1513
- return svgOffsetParent;
1514
- }
1515
- svgOffsetParent = getParentNode(svgOffsetParent);
1516
- }
1517
- return win;
1518
- }
1519
- let offsetParent = getTrueOffsetParent(element, polyfill);
1520
- while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
1521
- offsetParent = getTrueOffsetParent(offsetParent, polyfill);
1522
- }
1523
- if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
1524
- return win;
1525
- }
1526
- return offsetParent || getContainingBlock(element) || win;
1527
- }
1528
-
1529
- const getElementRects = async function (data) {
1530
- const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
1531
- const getDimensionsFn = this.getDimensions;
1532
- const floatingDimensions = await getDimensionsFn(data.floating);
1533
- return {
1534
- reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
1535
- floating: {
1536
- x: 0,
1537
- y: 0,
1538
- width: floatingDimensions.width,
1539
- height: floatingDimensions.height
1540
- }
1541
- };
1542
- };
1543
-
1544
- function isRTL(element) {
1545
- return getComputedStyle$1(element).direction === 'rtl';
1546
- }
1547
-
1548
- const platform = {
1549
- convertOffsetParentRelativeRectToViewportRelativeRect,
1550
- getDocumentElement,
1551
- getClippingRect,
1552
- getOffsetParent,
1553
- getElementRects,
1554
- getClientRects,
1555
- getDimensions,
1556
- getScale,
1557
- isElement,
1558
- isRTL
1559
- };
1560
-
1561
- function rectsAreEqual(a, b) {
1562
- return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
1563
- }
1564
-
1565
- // https://samthor.au/2021/observing-dom/
1566
- function observeMove(element, onMove) {
1567
- let io = null;
1568
- let timeoutId;
1569
- const root = getDocumentElement(element);
1570
- function cleanup() {
1571
- var _io;
1572
- clearTimeout(timeoutId);
1573
- (_io = io) == null || _io.disconnect();
1574
- io = null;
1575
- }
1576
- function refresh(skip, threshold) {
1577
- if (skip === void 0) {
1578
- skip = false;
1579
- }
1580
- if (threshold === void 0) {
1581
- threshold = 1;
1582
- }
1583
- cleanup();
1584
- const elementRectForRootMargin = element.getBoundingClientRect();
1585
- const {
1586
- left,
1587
- top,
1588
- width,
1589
- height
1590
- } = elementRectForRootMargin;
1591
- if (!skip) {
1592
- onMove();
1593
- }
1594
- if (!width || !height) {
1595
- return;
1596
- }
1597
- const insetTop = floor(top);
1598
- const insetRight = floor(root.clientWidth - (left + width));
1599
- const insetBottom = floor(root.clientHeight - (top + height));
1600
- const insetLeft = floor(left);
1601
- const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
1602
- const options = {
1603
- rootMargin,
1604
- threshold: max(0, min(1, threshold)) || 1
1605
- };
1606
- let isFirstUpdate = true;
1607
- function handleObserve(entries) {
1608
- const ratio = entries[0].intersectionRatio;
1609
- if (ratio !== threshold) {
1610
- if (!isFirstUpdate) {
1611
- return refresh();
1612
- }
1613
- if (!ratio) {
1614
- // If the reference is clipped, the ratio is 0. Throttle the refresh
1615
- // to prevent an infinite loop of updates.
1616
- timeoutId = setTimeout(() => {
1617
- refresh(false, 1e-7);
1618
- }, 1000);
1619
- } else {
1620
- refresh(false, ratio);
1621
- }
1622
- }
1623
- if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
1624
- // It's possible that even though the ratio is reported as 1, the
1625
- // element is not actually fully within the IntersectionObserver's root
1626
- // area anymore. This can happen under performance constraints. This may
1627
- // be a bug in the browser's IntersectionObserver implementation. To
1628
- // work around this, we compare the element's bounding rect now with
1629
- // what it was at the time we created the IntersectionObserver. If they
1630
- // are not equal then the element moved, so we refresh.
1631
- refresh();
1632
- }
1633
- isFirstUpdate = false;
1634
- }
1635
-
1636
- // Older browsers don't support a `document` as the root and will throw an
1637
- // error.
1638
- try {
1639
- io = new IntersectionObserver(handleObserve, {
1640
- ...options,
1641
- // Handle <iframe>s
1642
- root: root.ownerDocument
1643
- });
1644
- } catch (_e) {
1645
- io = new IntersectionObserver(handleObserve, options);
1646
- }
1647
- io.observe(element);
1648
- }
1649
- refresh(true);
1650
- return cleanup;
1651
- }
1652
-
1653
- /**
1654
- * Automatically updates the position of the floating element when necessary.
1655
- * Should only be called when the floating element is mounted on the DOM or
1656
- * visible on the screen.
1657
- * @returns cleanup function that should be invoked when the floating element is
1658
- * removed from the DOM or hidden from the screen.
1659
- * @see https://floating-ui.com/docs/autoUpdate
1660
- */
1661
- function autoUpdate(reference, floating, update, options) {
1662
- if (options === void 0) {
1663
- options = {};
1664
- }
1665
- const {
1666
- ancestorScroll = true,
1667
- ancestorResize = true,
1668
- elementResize = typeof ResizeObserver === 'function',
1669
- layoutShift = typeof IntersectionObserver === 'function',
1670
- animationFrame = false
1671
- } = options;
1672
- const referenceEl = unwrapElement(reference);
1673
- const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
1674
- ancestors.forEach(ancestor => {
1675
- ancestorScroll && ancestor.addEventListener('scroll', update, {
1676
- passive: true
1677
- });
1678
- ancestorResize && ancestor.addEventListener('resize', update);
1679
- });
1680
- const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
1681
- let reobserveFrame = -1;
1682
- let resizeObserver = null;
1683
- if (elementResize) {
1684
- resizeObserver = new ResizeObserver(_ref => {
1685
- let [firstEntry] = _ref;
1686
- if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
1687
- // Prevent update loops when using the `size` middleware.
1688
- // https://github.com/floating-ui/floating-ui/issues/1740
1689
- resizeObserver.unobserve(floating);
1690
- cancelAnimationFrame(reobserveFrame);
1691
- reobserveFrame = requestAnimationFrame(() => {
1692
- var _resizeObserver;
1693
- (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
1694
- });
1695
- }
1696
- update();
1697
- });
1698
- if (referenceEl && !animationFrame) {
1699
- resizeObserver.observe(referenceEl);
1700
- }
1701
- resizeObserver.observe(floating);
1702
- }
1703
- let frameId;
1704
- let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
1705
- if (animationFrame) {
1706
- frameLoop();
1707
- }
1708
- function frameLoop() {
1709
- const nextRefRect = getBoundingClientRect(reference);
1710
- if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
1711
- update();
1712
- }
1713
- prevRefRect = nextRefRect;
1714
- frameId = requestAnimationFrame(frameLoop);
1715
- }
1716
- update();
1717
- return () => {
1718
- var _resizeObserver2;
1719
- ancestors.forEach(ancestor => {
1720
- ancestorScroll && ancestor.removeEventListener('scroll', update);
1721
- ancestorResize && ancestor.removeEventListener('resize', update);
1722
- });
1723
- cleanupIo == null || cleanupIo();
1724
- (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
1725
- resizeObserver = null;
1726
- if (animationFrame) {
1727
- cancelAnimationFrame(frameId);
1728
- }
1729
- };
1730
- }
1731
-
1732
- /**
1733
- * Modifies the placement by translating the floating element along the
1734
- * specified axes.
1735
- * A number (shorthand for `mainAxis` or distance), or an axes configuration
1736
- * object may be passed.
1737
- * @see https://floating-ui.com/docs/offset
1738
- */
1739
- const offset = offset$1;
1740
-
1741
- /**
1742
- * Optimizes the visibility of the floating element by choosing the placement
1743
- * that has the most space available automatically, without needing to specify a
1744
- * preferred placement. Alternative to `flip`.
1745
- * @see https://floating-ui.com/docs/autoPlacement
1746
- */
1747
- const autoPlacement = autoPlacement$1;
1748
-
1749
- /**
1750
- * Optimizes the visibility of the floating element by shifting it in order to
1751
- * keep it in view when it will overflow the clipping boundary.
1752
- * @see https://floating-ui.com/docs/shift
1753
- */
1754
- const shift = shift$1;
1755
-
1756
- /**
1757
- * Optimizes the visibility of the floating element by flipping the `placement`
1758
- * in order to keep it in view when the preferred placement(s) will overflow the
1759
- * clipping boundary. Alternative to `autoPlacement`.
1760
- * @see https://floating-ui.com/docs/flip
1761
- */
1762
- const flip = flip$1;
1763
-
1764
- /**
1765
- * Computes the `x` and `y` coordinates that will place the floating element
1766
- * next to a given reference element.
1767
- */
1768
- const computePosition = (reference, floating, options) => {
1769
- // This caches the expensive `getClippingElementAncestors` function so that
1770
- // multiple lifecycle resets re-use the same result. It only lives for a
1771
- // single call. If other functions become expensive, we can add them as well.
1772
- const cache = new Map();
1773
- const mergedOptions = {
1774
- platform,
1775
- ...options
1776
- };
1777
- const platformWithCache = {
1778
- ...mergedOptions.platform,
1779
- _c: cache
1780
- };
1781
- return computePosition$1(reference, floating, {
1782
- ...mergedOptions,
1783
- platform: platformWithCache
1784
- });
1785
- };
1786
-
1787
- /* eslint-disable line-comment-position, no-inline-comments */
1788
-
1789
-
1790
-
1791
- const MAX_CONFIGURATION_COUNT = 10;
1792
-
1793
- class AuroFloatingUI {
1794
-
1795
- /**
1796
- * @private
1797
- */
1798
- static isMousePressed = false;
1799
-
1800
- /**
1801
- * @private
1802
- */
1803
- static isMousePressHandlerInitialized = false;
1804
-
1805
- /**
1806
- * @private
1807
- */
1808
- static setupMousePressChecker() {
1809
- if (!AuroFloatingUI.isMousePressHandlerInitialized && window && window.addEventListener) {
1810
- AuroFloatingUI.isMousePressHandlerInitialized = true;
1811
-
1812
- // Track timeout for isMousePressed reset to avoid race conditions
1813
- if (!AuroFloatingUI._mousePressedTimeout) {
1814
- AuroFloatingUI._mousePressedTimeout = null;
1815
- }
1816
- const mouseEventGlobalHandler = (event) => {
1817
- const isPressed = event.type === 'mousedown';
1818
- if (isPressed) {
1819
- // Clear any pending timeout to prevent race condition
1820
- if (AuroFloatingUI._mousePressedTimeout !== null) {
1821
- clearTimeout(AuroFloatingUI._mousePressedTimeout);
1822
- AuroFloatingUI._mousePressedTimeout = null;
1823
- }
1824
- if (!AuroFloatingUI.isMousePressed) {
1825
- AuroFloatingUI.isMousePressed = true;
1826
- }
1827
- } else if (AuroFloatingUI.isMousePressed && !isPressed) {
1828
- // Schedule reset and track timeout ID
1829
- AuroFloatingUI._mousePressedTimeout = setTimeout(() => {
1830
- AuroFloatingUI.isMousePressed = false;
1831
- AuroFloatingUI._mousePressedTimeout = null;
1832
- }, 0);
1833
- }
1834
- };
1835
-
1836
- window.addEventListener('mousedown', mouseEventGlobalHandler);
1837
- window.addEventListener('mouseup', mouseEventGlobalHandler);
1838
- }
1839
- }
1840
-
1841
- constructor(element, behavior) {
1842
- this.element = element;
1843
- this.behavior = behavior;
1844
-
1845
- // Store event listener references for cleanup
1846
- this.focusHandler = null;
1847
- this.clickHandler = null;
1848
- this.keyDownHandler = null;
1849
-
1850
- /**
1851
- * @private
1852
- */
1853
- this.configureTrial = 0;
1854
-
1855
- /**
1856
- * @private
1857
- */
1858
- this.eventPrefix = undefined;
1859
-
1860
- /**
1861
- * @private
1862
- */
1863
- this.id = undefined;
1864
-
1865
- /**
1866
- * @private
1867
- */
1868
- this.showing = false;
1869
-
1870
- /**
1871
- * @private
1872
- */
1873
- this.strategy = undefined;
1874
- }
1875
-
1876
- /**
1877
- * Mirrors the size of the bibSizer element to the bib content.
1878
- * Copies the width, height, max-width, and max-height styles from the bibSizer element to the bib content container.
1879
- * This ensures that the bib content has the same dimensions as the sizer element.
1880
- */
1881
- mirrorSize() {
1882
- // mirror the boxsize from bibSizer
1883
- if (this.element.bibSizer && this.element.matchWidth) {
1884
- const sizerStyle = window.getComputedStyle(this.element.bibSizer);
1885
- const bibContent = this.element.bib.shadowRoot.querySelector(".container");
1886
- if (sizerStyle.width !== '0px') {
1887
- bibContent.style.width = sizerStyle.width;
1888
- }
1889
- if (sizerStyle.height !== '0px') {
1890
- bibContent.style.height = sizerStyle.height;
1891
- }
1892
- bibContent.style.maxWidth = sizerStyle.maxWidth;
1893
- bibContent.style.maxHeight = sizerStyle.maxHeight;
1894
- }
1895
- }
1896
-
1897
- /**
1898
- * @private
1899
- * Determines the positioning strategy based on the current viewport size and mobile breakpoint.
1900
- *
1901
- * This method checks if the current viewport width is less than or equal to the specified mobile fullscreen breakpoint
1902
- * defined in the bib element. If it is, the strategy is set to 'fullscreen'; otherwise, it defaults to 'floating'.
1903
- *
1904
- * @returns {String} The positioning strategy, one of 'fullscreen', 'floating', 'cover'.
1905
- */
1906
- getPositioningStrategy() {
1907
- const breakpoint = this.element.bib.mobileFullscreenBreakpoint || this.element.floaterConfig?.fullscreenBreakpoint;
1908
- switch (this.behavior) {
1909
- case "tooltip":
1910
- return "floating";
1911
- case "dialog":
1912
- case "drawer":
1913
- if (breakpoint) {
1914
- const smallerThanBreakpoint = window.matchMedia(`(max-width: ${breakpoint})`).matches;
1915
-
1916
- this.element.expanded = smallerThanBreakpoint;
1917
- }
1918
- if (this.element.nested) {
1919
- return "cover";
1920
- }
1921
- return 'fullscreen';
1922
- case "dropdown":
1923
- case undefined:
1924
- case null:
1925
- if (breakpoint) {
1926
- const smallerThanBreakpoint = window.matchMedia(`(max-width: ${breakpoint})`).matches;
1927
- if (smallerThanBreakpoint) {
1928
- return 'fullscreen';
1929
- }
1930
- }
1931
- return "floating";
1932
- default:
1933
- return this.behavior;
1934
- }
1935
- }
1936
-
1937
- /**
1938
- * @private
1939
- * Positions the bib element based on the current configuration and positioning strategy.
1940
- *
1941
- * This method determines the appropriate positioning strategy (fullscreen or not) and configures the bib accordingly.
1942
- * It also sets up middleware for the floater configuration, computes the position of the bib relative to the trigger element,
1943
- * and applies the calculated position to the bib's style.
1944
- */
1945
- position() {
1946
- const strategy = this.getPositioningStrategy();
1947
- this.configureBibStrategy(strategy);
1948
-
1949
- if (strategy === 'floating') {
1950
- this.mirrorSize();
1951
- // Define the middlware for the floater configuration
1952
- const middleware = [
1953
- offset(this.element.floaterConfig?.offset || 0),
1954
- ...this.element.floaterConfig?.shift ? [shift()] : [], // Add shift middleware if shift is enabled.
1955
- ...this.element.floaterConfig?.flip ? [flip()] : [], // Add flip middleware if flip is enabled.
1956
- ...this.element.floaterConfig?.autoPlacement ? [autoPlacement()] : [], // Add autoPlacement middleware if autoPlacement is enabled.
1957
- ];
1958
-
1959
- // Compute the position of the bib
1960
- computePosition(this.element.trigger, this.element.bib, {
1961
- strategy: this.element.floaterConfig?.strategy || 'fixed',
1962
- placement: this.element.floaterConfig?.placement,
1963
- middleware: middleware || []
1964
- }).then(({ x, y }) => { // eslint-disable-line id-length
1965
- Object.assign(this.element.bib.style, {
1966
- left: `${x}px`,
1967
- top: `${y}px`,
1968
- });
1969
- });
1970
- } else if (strategy === 'cover') {
1971
- // Compute the position of the bib
1972
- computePosition(this.element.parentNode, this.element.bib, {
1973
- placement: 'bottom-start'
1974
- }).then(({ x, y }) => { // eslint-disable-line id-length
1975
- Object.assign(this.element.bib.style, {
1976
- left: `${x}px`,
1977
- top: `${y - this.element.parentNode.offsetHeight}px`,
1978
- width: `${this.element.parentNode.offsetWidth}px`,
1979
- height: `${this.element.parentNode.offsetHeight}px`
1980
- });
1981
- });
1982
- }
1983
- }
1984
-
1985
- /**
1986
- * @private
1987
- * Controls whether to lock the scrolling for the document's body.
1988
- * @param {Boolean} lock - If true, locks the body's scrolling functionlity; otherwise, unlock.
1989
- */
1990
- lockScroll(lock = true) {
1991
- if (lock) {
1992
- document.body.style.overflow = 'hidden'; // hide body's scrollbar
1993
-
1994
- // Move `bib` by the amount the viewport is shifted to stay aligned in fullscreen.
1995
- this.element.bib.style.transform = `translateY(${window?.visualViewport?.offsetTop}px)`;
1996
- } else {
1997
- document.body.style.overflow = '';
1998
- }
1999
- }
2000
-
2001
- /**
2002
- * @private
2003
- * Configures the bib element's display strategy.
2004
- *
2005
- * Sets the bib to fullscreen or floating mode based on the provided strategy.
2006
- * Dispatches a 'strategy-change' event if the strategy changes.
2007
- *
2008
- * @param {string} strategy - The positioning strategy ('fullscreen' or 'floating').
2009
- */
2010
- configureBibStrategy(value) {
2011
- if (value === 'fullscreen') {
2012
- this.element.isBibFullscreen = true;
2013
- // reset the prev position
2014
- this.element.bib.setAttribute('isfullscreen', "");
2015
- this.element.bib.style.position = 'fixed';
2016
- this.element.bib.style.top = "0px";
2017
- this.element.bib.style.left = "0px";
2018
- this.element.bib.style.width = '';
2019
- this.element.bib.style.height = '';
2020
- this.element.style.contain = '';
2021
-
2022
- // reset the size that was mirroring `size` css-part
2023
- const bibContent = this.element.bib.shadowRoot.querySelector(".container");
2024
- if (bibContent) {
2025
- bibContent.style.width = '';
2026
- bibContent.style.height = '';
2027
- bibContent.style.maxWidth = '';
2028
- bibContent.style.maxHeight = `${window?.visualViewport?.height}px`;
2029
- this.configureTrial = 0;
2030
- } else if (this.configureTrial < MAX_CONFIGURATION_COUNT) {
2031
- this.configureTrial += 1;
2032
-
2033
- setTimeout(() => {
2034
- this.configureBibStrategy(value);
2035
- }, 0);
2036
- }
2037
-
2038
- if (this.element.isPopoverVisible) {
2039
- this.lockScroll(true);
2040
- }
2041
- } else {
2042
- this.element.bib.style.position = '';
2043
- this.element.bib.removeAttribute('isfullscreen');
2044
- this.element.isBibFullscreen = false;
2045
- this.element.style.contain = 'layout';
2046
- }
2047
-
2048
- const isChanged = this.strategy && this.strategy !== value;
2049
- this.strategy = value;
2050
- if (isChanged) {
2051
- const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-strategy-change` : 'strategy-change', {
2052
- detail: {
2053
- value,
2054
- },
2055
- composed: true
2056
- });
2057
-
2058
- this.element.dispatchEvent(event);
2059
- }
2060
- }
2061
-
2062
- updateState() {
2063
- const isVisible = this.element.isPopoverVisible;
2064
- if (!isVisible) {
2065
- this.cleanupHideHandlers();
2066
- try {
2067
- this.element.cleanup?.();
2068
- } catch (error) {
2069
- // Do nothing
2070
- }
2071
- }
2072
- }
2073
-
2074
- /**
2075
- * @private
2076
- * getting called on 'blur' in trigger or `focusin` in document
2077
- *
2078
- * Hides the bib if focus moves outside of the trigger or bib, unless a 'noHideOnThisFocusLoss' flag is set.
2079
- * This method checks if the currently active element is still within the trigger or bib.
2080
- * If not, and if the bib isn't in fullscreen mode with focus lost, it hides the bib.
2081
- */
2082
- handleFocusLoss() {
2083
- // if mouse is being pressed, skip and let click event to handle the action
2084
- if (AuroFloatingUI.isMousePressed) {
2085
- return;
2086
- }
2087
-
2088
- if (this.element.noHideOnThisFocusLoss ||
2089
- this.element.hasAttribute('noHideOnThisFocusLoss')) {
2090
- return;
2091
- }
2092
-
2093
- const { activeElement } = document;
2094
- // if focus is still inside of trigger or bib, do not close
2095
- if (this.element.contains(activeElement) || this.element.bib?.contains(activeElement)) {
2096
- return;
2097
- }
2098
-
2099
- // if fullscreen bib is in fullscreen mode, do not close
2100
- if (this.element.bib.hasAttribute('isfullscreen')) {
2101
- return;
2102
- }
2103
-
2104
- this.hideBib("keydown");
2105
- }
2106
-
2107
- setupHideHandlers() {
2108
- // Define handlers & store references
2109
- this.focusHandler = () => this.handleFocusLoss();
2110
-
2111
- this.clickHandler = (evt) => {
2112
- if ((!evt.composedPath().includes(this.element.trigger) &&
2113
- !evt.composedPath().includes(this.element.bib)) ||
2114
- (this.element.bib.backdrop && evt.composedPath().includes(this.element.bib.backdrop))) {
2115
- const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
2116
-
2117
- if (existedVisibleFloatingUI && existedVisibleFloatingUI.element.isPopoverVisible) {
2118
- // if something else is open, close that
2119
- existedVisibleFloatingUI.hideBib();
2120
- document.expandedAuroFormkitDropdown = null;
2121
- document.expandedAuroFloater = this;
2122
- } else {
2123
- this.hideBib("click");
2124
- }
2125
- }
2126
- };
2127
-
2128
- // ESC key handler
2129
- this.keyDownHandler = (evt) => {
2130
- if (evt.key === 'Escape' && this.element.isPopoverVisible) {
2131
- const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
2132
- if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this && existedVisibleFloatingUI.element.isPopoverVisible) {
2133
- // if something else is open, let it handle itself
2134
- return;
2135
- }
2136
- this.hideBib("keydown");
2137
- }
2138
- };
2139
-
2140
- if (this.behavior !== 'drawer' && this.behavior !== 'dialog') {
2141
- // Add event listeners using the stored references
2142
- document.addEventListener('focusin', this.focusHandler);
2143
- }
2144
-
2145
- document.addEventListener('keydown', this.keyDownHandler);
2146
-
2147
- // send this task to the end of queue to prevent conflicting
2148
- // it conflicts if showBib gets call from a button that's not this.element.trigger
2149
- setTimeout(() => {
2150
- window.addEventListener('click', this.clickHandler);
2151
- }, 0);
2152
- }
2153
-
2154
- cleanupHideHandlers() {
2155
- // Remove event listeners if they exist
2156
-
2157
- if (this.focusHandler) {
2158
- document.removeEventListener('focusin', this.focusHandler);
2159
- this.focusHandler = null;
2160
- }
2161
-
2162
- if (this.clickHandler) {
2163
- window.removeEventListener('click', this.clickHandler);
2164
- this.clickHandler = null;
2165
- }
2166
-
2167
- if (this.keyDownHandler) {
2168
- document.removeEventListener('keydown', this.keyDownHandler);
2169
- this.keyDownHandler = null;
2170
- }
2171
- }
2172
-
2173
- handleUpdate(changedProperties) {
2174
- if (changedProperties.has('isPopoverVisible')) {
2175
- this.updateState();
2176
- }
2177
- }
2178
-
2179
- updateCurrentExpandedDropdown() {
2180
- // Close any other dropdown that is already open
2181
- const existedVisibleFloatingUI = document.expandedAuroFormkitDropdown || document.expandedAuroFloater;
2182
- if (existedVisibleFloatingUI && existedVisibleFloatingUI !== this &&
2183
- existedVisibleFloatingUI.element.isPopoverVisible &&
2184
- document.expandedAuroFloater.eventPrefix === this.eventPrefix) {
2185
- document.expandedAuroFloater.hideBib();
2186
- }
2187
-
2188
- document.expandedAuroFloater = this;
2189
- }
2190
-
2191
- showBib() {
2192
- if (!this.element.disabled && !this.showing) {
2193
- this.updateCurrentExpandedDropdown();
2194
- this.element.triggerChevron?.setAttribute('data-expanded', true);
2195
-
2196
- // prevent double showing: isPopovervisible gets first and showBib gets called later
2197
- if (!this.showing) {
2198
- if (!this.element.modal) {
2199
- this.setupHideHandlers();
2200
- }
2201
- this.showing = true;
2202
- this.element.isPopoverVisible = true;
2203
- this.position();
2204
- this.dispatchEventDropdownToggle();
2205
- }
2206
-
2207
- // Setup auto update to handle resize and scroll
2208
- this.element.cleanup = autoUpdate(this.element.trigger || this.element.parentNode, this.element.bib, () => {
2209
- this.position();
2210
- });
2211
- }
2212
- }
2213
-
2214
- /**
2215
- * Hides the floating UI element.
2216
- * @param {String} eventType - The event type that triggered the hiding action.
2217
- */
2218
- hideBib(eventType = "unknown") {
2219
- if (!this.element.disabled && !this.element.noToggle) {
2220
- this.lockScroll(false);
2221
- this.element.triggerChevron?.removeAttribute('data-expanded');
2222
-
2223
- if (this.element.isPopoverVisible) {
2224
- this.element.isPopoverVisible = false;
2225
- }
2226
- if (this.showing) {
2227
- this.cleanupHideHandlers();
2228
- this.showing = false;
2229
- this.dispatchEventDropdownToggle(eventType);
2230
- }
2231
- }
2232
- document.expandedAuroFloater = null;
2233
- }
2234
-
2235
- /**
2236
- * @private
2237
- * @returns {void} Dispatches event with an object showing the state of the dropdown.
2238
- * @param {String} eventType - The event type that triggered the toggle action.
2239
- */
2240
- dispatchEventDropdownToggle(eventType) {
2241
- const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-toggled` : 'toggled', {
2242
- detail: {
2243
- expanded: this.showing,
2244
- eventType: eventType || "unknown",
2245
- },
2246
- composed: true
2247
- });
2248
-
2249
- this.element.dispatchEvent(event);
2250
- }
2251
-
2252
- handleClick() {
2253
- if (this.element.isPopoverVisible) {
2254
- this.hideBib("click");
2255
- } else {
2256
- this.showBib();
2257
- }
2258
-
2259
- const event = new CustomEvent(this.eventPrefix ? `${this.eventPrefix}-triggerClick` : "triggerClick", {
2260
- composed: true,
2261
- detail: {
2262
- expanded: this.element.isPopoverVisible
2263
- }
2264
- });
2265
-
2266
- this.element.dispatchEvent(event);
2267
- }
2268
-
2269
- handleEvent(event) {
2270
- if (!this.element.disableEventShow) {
2271
- switch (event.type) {
2272
- case 'keydown':
2273
- // Support both Enter and Space keys for accessibility
2274
- // Space is included as it's expected behavior for interactive elements
2275
-
2276
- const origin = event.composedPath()[0];
2277
- if (event.key === 'Enter' || event.key === ' ' && (!origin || origin.tagName !== "INPUT")) {
2278
-
2279
- event.preventDefault();
2280
- this.handleClick();
2281
- }
2282
- break;
2283
- case 'mouseenter':
2284
- if (this.element.hoverToggle) {
2285
- this.showBib();
2286
- }
2287
- break;
2288
- case 'mouseleave':
2289
- if (this.element.hoverToggle) {
2290
- this.hideBib("mouseleave");
2291
- }
2292
- break;
2293
- case 'focus':
2294
- if (this.element.focusShow) {
2295
-
2296
- /*
2297
- This needs to better handle clicking that gives focus -
2298
- currently it shows and then immediately hides the bib
2299
- */
2300
- this.showBib();
2301
- }
2302
- break;
2303
- case 'blur':
2304
- // send this task 100ms later queue to
2305
- // wait a frame in case focus moves within the floating element/bib
2306
- setTimeout(() => this.handleFocusLoss(), 0);
2307
- break;
2308
- case 'click':
2309
- if (document.activeElement === document.body) {
2310
- event.currentTarget.focus();
2311
- }
2312
- this.handleClick();
2313
- break;
2314
- // Do nothing
2315
- }
2316
- }
2317
- }
2318
-
2319
- /**
2320
- * Manages the tabIndex of the trigger element based on its focusability.
2321
- *
2322
- * If the trigger element or any of its children are inherently focusable, the tabIndex of the component is set to -1.
2323
- * This prevents the component itself from being focusable when the trigger element already handles focus.
2324
- */
2325
- handleTriggerTabIndex() {
2326
- const focusableElementSelectors = [
2327
- 'a',
2328
- 'button',
2329
- 'input:not([type="hidden"])',
2330
- 'select',
2331
- 'textarea',
2332
- '[tabindex]:not([tabindex="-1"])',
2333
- 'auro-button',
2334
- 'auro-input',
2335
- 'auro-hyperlink'
2336
- ];
2337
-
2338
- const triggerNode = this.element.querySelectorAll('[slot="trigger"]')[0];
2339
- if (!triggerNode) {
2340
- return;
2341
- }
2342
- const triggerNodeTagName = triggerNode.tagName.toLowerCase();
2343
-
2344
- focusableElementSelectors.forEach((selector) => {
2345
- // Check if the trigger node element is focusable
2346
- if (triggerNodeTagName === selector) {
2347
- this.element.tabIndex = -1;
2348
- return;
2349
- }
2350
-
2351
- // Check if any child is focusable
2352
- if (triggerNode.querySelector(selector)) {
2353
- this.element.tabIndex = -1;
2354
- }
2355
- });
2356
- }
2357
-
2358
- /**
2359
- *
2360
- * @param {*} eventPrefix
2361
- */
2362
- regenerateBibId() {
2363
- this.id = this.element.getAttribute('id');
2364
- if (!this.id) {
2365
- this.id = window.crypto.randomUUID();
2366
- this.element.setAttribute('id', this.id);
2367
- }
2368
-
2369
- this.element.bib.setAttribute("id", `${this.id}-floater-bib`);
2370
- }
2371
-
2372
- configure(elem, eventPrefix) {
2373
- AuroFloatingUI.setupMousePressChecker();
2374
-
2375
- this.eventPrefix = eventPrefix;
2376
- if (this.element !== elem) {
2377
- this.element = elem;
2378
- }
2379
-
2380
- if (this.behavior !== this.element.behavior) {
2381
- this.behavior = this.element.behavior;
2382
- }
2383
-
2384
- if (this.element.trigger) {
2385
- this.disconnect();
2386
- }
2387
- this.element.trigger = this.element.triggerElement || this.element.shadowRoot.querySelector('#trigger') || this.element.trigger;
2388
- this.element.bib = this.element.shadowRoot.querySelector('#bib') || this.element.bib;
2389
- this.element.bibSizer = this.element.shadowRoot.querySelector('#bibSizer');
2390
- this.element.triggerChevron = this.element.shadowRoot.querySelector('#showStateIcon');
2391
-
2392
-
2393
- if (this.element.floaterConfig) {
2394
- this.element.hoverToggle = this.element.floaterConfig.hoverToggle;
2395
- }
2396
-
2397
- this.regenerateBibId();
2398
- this.handleTriggerTabIndex();
2399
-
2400
- this.handleEvent = this.handleEvent.bind(this);
2401
- if (this.element.trigger) {
2402
- this.element.trigger.addEventListener('keydown', this.handleEvent);
2403
- this.element.trigger.addEventListener('click', this.handleEvent);
2404
- this.element.trigger.addEventListener('mouseenter', this.handleEvent);
2405
- this.element.trigger.addEventListener('mouseleave', this.handleEvent);
2406
- this.element.trigger.addEventListener('focus', this.handleEvent);
2407
- this.element.trigger.addEventListener('blur', this.handleEvent);
2408
- }
2409
- }
2410
-
2411
- disconnect() {
2412
- this.cleanupHideHandlers();
2413
- if (this.element) {
2414
- this.element.cleanup?.();
2415
-
2416
- if (this.element.bib) {
2417
- this.element.shadowRoot.append(this.element.bib);
2418
- }
2419
-
2420
- // Remove event & keyboard listeners
2421
- if (this.element?.trigger) {
2422
- this.element.trigger.removeEventListener('keydown', this.handleEvent);
2423
- this.element.trigger.removeEventListener('click', this.handleEvent);
2424
- this.element.trigger.removeEventListener('mouseenter', this.handleEvent);
2425
- this.element.trigger.removeEventListener('mouseleave', this.handleEvent);
2426
- this.element.trigger.removeEventListener('focus', this.handleEvent);
2427
- this.element.trigger.removeEventListener('blur', this.handleEvent);
2428
- }
2429
- }
2430
- }
2431
- }
2432
-
2433
- /**
2434
- * @license
2435
- * Copyright 2019 Google LLC
2436
- * SPDX-License-Identifier: BSD-3-Clause
2437
- */
2438
- const t$1=globalThis,e$3=t$1.ShadowRoot&&(void 0===t$1.ShadyCSS||t$1.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$1=Symbol(),o$3=new WeakMap;let n$1 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$1)throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");this.cssText=t,this.t=e;}get styleSheet(){let t=this.o;const s=this.t;if(e$3&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$3.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$3.set(s,t));}return t}toString(){return this.cssText}};const r$1=t=>new n$1("string"==typeof t?t:t+"",void 0,s$1),i$3=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(true===t._$cssResult$)return t.cssText;if("number"==typeof t)return t;throw Error("Value passed to 'css' function must be a 'css' function result: "+t+". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.")})(s)+t[o+1]),t[0]);return new n$1(o,t,s$1)},S$1=(s,o)=>{if(e$3)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$1.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$3?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$1(e)})(t):t;
2439
-
2440
- /**
2441
- * @license
2442
- * Copyright 2017 Google LLC
2443
- * SPDX-License-Identifier: BSD-3-Clause
2444
- */const{is:i$2,defineProperty:e$2,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r,getOwnPropertySymbols:o$2,getPrototypeOf:n}=Object,a=globalThis,c$1=a.trustedTypes,l$1=c$1?c$1.emptyScript:"",p$2=a.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$2={toAttribute(t,s){switch(s){case Boolean:t=t?l$1:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$2=(t,s)=>!i$2(t,s),b$1={attribute:true,type:String,converter:u$2,reflect:false,useDefault:false,hasChanged:f$2};Symbol.metadata??=Symbol("metadata"),a.litPropertyMetadata??=new WeakMap;let y$2 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b$1){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$2(this.prototype,t,h);}}static getPropertyDescriptor(t,s,i){const{get:e,set:r}=h$1(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get:e,set(s){const h=e?.call(this);r?.call(this,s),this.requestUpdate(t,h,i);},configurable:true,enumerable:true}}static getPropertyOptions(t){return this.elementProperties.get(t)??b$1}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n(this);t.finalize(),void 0!==t.l&&(this.l=[...t.l]),this.elementProperties=new Map(t.elementProperties);}static finalize(){if(this.hasOwnProperty(d$1("finalized")))return;if(this.finalized=true,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...r(t),...o$2(t)];for(const i of s)this.createProperty(i,t[i]);}const t=this[Symbol.metadata];if(null!==t){const s=litPropertyMetadata.get(t);if(void 0!==s)for(const[t,i]of s)this.elementProperties.set(t,i);}this._$Eh=new Map;for(const[t,s]of this.elementProperties){const i=this._$Eu(t,s);void 0!==i&&this._$Eh.set(i,t);}this.elementStyles=this.finalizeStyles(this.styles);}static finalizeStyles(s){const i=[];if(Array.isArray(s)){const e=new Set(s.flat(1/0).reverse());for(const s of e)i.unshift(c$2(s));}else void 0!==s&&i.push(c$2(s));return i}static _$Eu(t,s){const i=s.attribute;return false===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=false,this.hasUpdated=false,this._$Em=null,this._$Ev();}_$Ev(){this._$ES=new Promise((t=>this.enableUpdating=t)),this._$AL=new Map,this._$E_(),this.requestUpdate(),this.constructor.l?.forEach((t=>t(this)));}addController(t){(this._$EO??=new Set).add(t),void 0!==this.renderRoot&&this.isConnected&&t.hostConnected?.();}removeController(t){this._$EO?.delete(t);}_$E_(){const t=new Map,s=this.constructor.elementProperties;for(const i of s.keys())this.hasOwnProperty(i)&&(t.set(i,this[i]),delete this[i]);t.size>0&&(this._$Ep=t);}createRenderRoot(){const t=this.shadowRoot??this.attachShadow(this.constructor.shadowRootOptions);return S$1(t,this.constructor.elementStyles),t}connectedCallback(){this.renderRoot??=this.createRenderRoot(),this.enableUpdating(true),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$ET(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&true===i.reflect){const h=(void 0!==i.converter?.toAttribute?i.converter:u$2).toAttribute(s,i.type);this._$Em=t,null==h?this.removeAttribute(e):this.setAttribute(e,h),this._$Em=null;}}_$AK(t,s){const i=this.constructor,e=i._$Eh.get(t);if(void 0!==e&&this._$Em!==e){const t=i.getPropertyOptions(e),h="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$2;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f$2)(h,s)||i.useDefault&&i.reflect&&h===this._$Ej?.get(t)&&!this.hasAttribute(e._$Eu(t,i))))return;this.C(t,s,i);} false===this.isUpdatePending&&(this._$ES=this._$EP());}C(t,s,{useDefault:i,reflect:e,wrapped:h},r){i&&!(this._$Ej??=new Map).has(t)&&(this._$Ej.set(t,r??s??this[t]),true!==h||void 0!==r)||(this._$AL.has(t)||(this.hasUpdated||i||(s=void 0),this._$AL.set(t,s)),true===e&&this._$Em!==t&&(this._$Eq??=new Set).add(t));}async _$EP(){this.isUpdatePending=true;try{await this._$ES;}catch(t){Promise.reject(t);}const t=this.scheduleUpdate();return null!=t&&await t,!this.isUpdatePending}scheduleUpdate(){return this.performUpdate()}performUpdate(){if(!this.isUpdatePending)return;if(!this.hasUpdated){if(this.renderRoot??=this.createRenderRoot(),this._$Ep){for(const[t,s]of this._$Ep)this[t]=s;this._$Ep=void 0;}const t=this.constructor.elementProperties;if(t.size>0)for(const[s,i]of t){const{wrapped:t}=i,e=this[s];true!==t||this._$AL.has(s)||void 0===e||this.C(s,void 0,i,e);}}let t=false;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EM();}catch(s){throw t=false,this._$EM(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=true,this.firstUpdated(t)),this.updated(t);}_$EM(){this._$AL=new Map,this.isUpdatePending=false;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return true}update(t){this._$Eq&&=this._$Eq.forEach((t=>this._$ET(t,this[t]))),this._$EM();}updated(t){}firstUpdated(t){}};y$2.elementStyles=[],y$2.shadowRootOptions={mode:"open"},y$2[d$1("elementProperties")]=new Map,y$2[d$1("finalized")]=new Map,p$2?.({ReactiveElement:y$2}),(a.reactiveElementVersions??=[]).push("2.1.1");
2445
-
2446
- /**
2447
- * @license
2448
- * Copyright 2017 Google LLC
2449
- * SPDX-License-Identifier: BSD-3-Clause
2450
- */const s=globalThis;let i$1 = class i extends y$2{constructor(){super(...arguments),this.renderOptions={host:this},this._$Do=void 0;}createRenderRoot(){const t=super.createRenderRoot();return this.renderOptions.renderBefore??=t.firstChild,t}update(t){const r=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B$1(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T$1}};i$1._$litElement$=true,i$1["finalized"]=true,s.litElementHydrateSupport?.({LitElement:i$1});const o$1=s.litElementPolyfillSupport;o$1?.({LitElement:i$1});(s.litElementVersions??=[]).push("4.2.1");
2451
-
2452
- var colorCss$1 = i$3`:host([onbackdrop]) .backdrop{background:var(--ds-auro-floater-backdrop-modal-background-color)}::slotted(*){background:var(--ds-auro-floater-container-background-color);color:var(--ds-auro-floater-container-text-color)}
2453
- `;
2454
-
2455
- var styleCss$1 = i$3`:host{position:absolute;z-index:var(--ds-depth-overlay, 200);display:none;flex-direction:column;opacity:0;transition:opacity .3s ease-in-out,display .3s;transition-behavior:allow-discrete;will-change:opacity}.util_displayHiddenVisually{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}dialog.container{background-color:transparent;max-width:none;max-height:none;padding:0;border:none;margin:0;outline:none;transform:translateZ(0);display:inline-block;width:100%;height:100%}dialog.container::backdrop{background:var(--auro-drawer-backdrop-background, transparent);backdrop-filter:var(--auro-drawer-backdrop-filter, none);opacity:var(--auro-drawer-backdrop-opacity, 1);transition:var(--auro-drawer-backdrop-transition, opacity .3s ease)}dialog.container .backdrop{position:fixed;inset:0;pointer-events:none}dialog.container ::slotted(:only-child){z-index:var(--ds-depth-modal, 300);box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15))}:host([data-show]){display:block;opacity:1}@starting-style{:host([data-show]){opacity:0}}:host([data-show][modal]){pointer-events:initial}:host([isfullscreen]){width:100%;height:100%}:host([isfullscreen]) dialog.container{overflow:auto;width:100%;height:100%}
2456
- `;
2457
-
2458
- var tokensCss$1 = i$3`:host{--ds-auro-floater-backdrop-modal-background-color: var(--ds-advanced-color-shared-scrim, rgba(0, 0, 0, .5));--ds-auro-floater-container-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-floater-container-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
2459
- `;
2460
-
2461
- /**
2462
- * @internal
2463
- */
2464
- class AuroFloaterBib extends i$1 {
2465
- static get properties() {
2466
- return {
2467
- /**
2468
- * Text used to label the dialog for screen readers via aria-labelledby.
2469
- */
2470
- bibLabel: {
2471
- type: String,
2472
- },
2473
- };
2474
- }
2475
-
2476
- static get styles() {
2477
- return [colorCss$1, styleCss$1, tokensCss$1];
2478
- }
2479
-
2480
- firstUpdated() {
2481
- AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(
2482
- this,
2483
- "auro-floater-bib",
2484
- );
2485
-
2486
- this.dialog = this.shadowRoot.querySelector("dialog");
2487
-
2488
- // Always prevent native dialog close on Escape; re-dispatch as a composed
2489
- // event so AuroDrawer can decide whether to honour it based on `modal`.
2490
- this.dialog.addEventListener("cancel", (e) => {
2491
- e.preventDefault();
2492
- this.dispatchEvent(
2493
- new Event("dialog-cancel", { bubbles: true, composed: true }),
2494
- );
2495
- });
2496
-
2497
- // Re-dispatch keydown events that stopped at the dialog boundary so that
2498
- // slotted consumer keyboard handlers outside the shadow DOM still receive them.
2499
- this.dialog.addEventListener("keydown", (e) => {
2500
- if (e.target !== this.dialog) {
2501
- return;
2502
- }
2503
- this.dialog.dispatchEvent(
2504
- new KeyboardEvent(e.type, { ...e, bubbles: true, composed: true }),
2505
- );
2506
- });
2507
-
2508
- // Clicks on the empty dialog area (outside the drawer panel) target the
2509
- // dialog element directly; clicks inside the panel bubble up from a child.
2510
- this.dialog.addEventListener("click", (e) => {
2511
- if (e.target === this.dialog) {
2512
- this.dispatchEvent(
2513
- new Event("dialog-backdrop-click", { bubbles: true, composed: true }),
2514
- );
2515
- }
2516
- });
2517
- }
2518
-
2519
- render() {
2520
- return u$3`
2521
- <dialog class="container" aria-labelledby="dialogLabel">
2522
- <span id="dialogLabel" class="util_displayHiddenVisually" aria-hidden="true">${this.bibLabel || ""}</span>
2523
- <div class="backdrop" part="backdrop"></div>
2524
- <slot></slot>
2525
- </dialog>
2526
- `;
2527
- }
2528
- }
2529
-
2530
- var drawerVersion = '0.0.0';
2531
-
2532
- // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
2533
- // See LICENSE in the project root for license information.
2534
-
2535
-
2536
- // Lazy-initialized once from the design-system token; shared across all instances.
2537
- let mobileBreakpointValue;
2538
-
2539
- function getMobileBreakpoint() {
2540
- if (!mobileBreakpointValue) {
2541
- const raw = getComputedStyle(document.documentElement).getPropertyValue(
2542
- "--ds-grid-breakpoint-md",
2543
- );
2544
- mobileBreakpointValue = Number(raw.replace("px", "").trim()) || 768;
2545
- }
2546
- return mobileBreakpointValue;
2547
- }
2548
-
2549
- /**
2550
- * @internal
2551
- */
2552
- class AuroFloater extends i$1 {
2553
- constructor(behavior) {
2554
- super();
2555
-
2556
- /**
2557
- * @private
2558
- */
2559
- this.behavior = behavior;
2560
-
2561
- /**
2562
- * @private
2563
- */
2564
- this.floater = undefined;
2565
-
2566
- const tagPrefix = `${this.floaterConfig.prefix.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`)}-bib`;
2567
-
2568
- /**
2569
- * @private
2570
- */
2571
- this.floaterBibTag = AuroDependencyVersioning.prototype.generateTag(
2572
- tagPrefix,
2573
- drawerVersion,
2574
- AuroFloaterBib,
2575
- );
2576
-
2577
- /** @private */
2578
- this._savedScrollY = undefined;
2579
- /** @private */
2580
- this._scrollLocked = false;
2581
- /** @private */
2582
- this._boundTouchMoveHandler = undefined;
2583
- /** @private */
2584
- this._boundResizeHandler = undefined;
2585
- }
2586
-
2587
- /**
2588
- * @ignore
2589
- * The configuration for floaingUI.
2590
- * @returns {object} Floater configuration object.
2591
- */
2592
- get floaterConfig() {
2593
- return {
2594
- prefix: "auroFloater",
2595
- };
2596
- }
2597
-
2598
- // function to define props used within the scope of this component
2599
- static get properties() {
2600
- return {
2601
- /**
2602
- * @private
2603
- * Sets state of drawer to open.
2604
- * @default false
2605
- */
2606
- isPopoverVisible: {
2607
- attribute: "open",
2608
- type: Boolean,
2609
- reflect: true,
2610
- },
2611
-
2612
- /**
2613
- * @private
2614
- * The element to focus when the drawer is closed.
2615
- */
2616
- triggerElement: {
2617
- attribute: false,
2618
- },
2619
- };
2620
- }
2621
-
2622
- firstUpdated() {
2623
- this.floater = new AuroFloatingUI(this, this.behavior);
2624
-
2625
- this.floater.configure(this, this.floaterConfig.prefix);
2626
-
2627
- // Handle Escape key via native dialog cancel event.
2628
- // Always preventDefault in the bib; here we decide whether to actually close.
2629
- this.bib.addEventListener("dialog-cancel", () => {
2630
- if (this.modal) {
2631
- return; // Modal drawers ignore Escape.
2632
- }
2633
- this.hide();
2634
- });
2635
-
2636
- // Handle backdrop clicks — close unless this is a modal drawer.
2637
- this.bib.addEventListener("dialog-backdrop-click", () => {
2638
- if (this.modal) {
2639
- return; // Modal drawers require an explicit action to close.
2640
- }
2641
- this.hide();
2642
- });
2643
- }
2644
-
2645
- disconnectedCallback() {
2646
- if (this.floater) {
2647
- this.hide("disconnect");
2648
- }
2649
- this._restorePageScroll();
2650
- this._unlockTouchScroll();
2651
- this._stopResizeWatch();
2652
- }
2653
-
2654
- updated(changedProperties) {
2655
- this.floater.handleUpdate(changedProperties);
2656
-
2657
- if (changedProperties.has("triggerElement")) {
2658
- this.floater.configure(this, this.floaterConfig.prefix);
2659
- }
2660
-
2661
- if (changedProperties.has("isPopoverVisible")) {
2662
- if (this.isPopoverVisible) {
2663
- this.show();
2664
- } else {
2665
- this.hide();
2666
- }
2667
- }
2668
- }
2669
-
2670
- /**
2671
- * Opens the native dialog inside the bib.
2672
- *
2673
- * - `modal && !nested`: `showModal()` for native focus containment and top-layer
2674
- * rendering. Page scroll and touch scroll are locked on mobile for the duration.
2675
- * - `nested` or `!modal`: `setAttribute('open','')` to keep positional CSS intact
2676
- * and allow free keyboard flow to background content (WCAG 2.1.2).
2677
- */
2678
- async show() {
2679
- this.floater.showBib();
2680
- if (!this.bib?.dialog) {
2681
- await this.bib?.updateComplete;
2682
- }
2683
- if (!this.bib?.dialog) {
2684
- return;
2685
- }
2686
-
2687
- const nested = this.nested ?? false;
2688
- const modal = this.modal ?? false;
2689
-
2690
- if (nested || !modal) {
2691
- this.bib.dialog.setAttribute("popover", "manual");
2692
- this.bib.dialog.showPopover();
2693
- this._startResizeWatch();
2694
- } else {
2695
- if (document.body.offsetWidth < getMobileBreakpoint()) {
2696
- this._lockTouchScroll();
2697
- this._lockPageScroll();
2698
- }
2699
- this.bib.dialog.showModal();
2700
- }
2701
- }
2702
-
2703
- /**
2704
- * Closes the native dialog and releases all scroll locks.
2705
- */
2706
- hide(eventType = undefined) {
2707
- this._restorePageScroll();
2708
- this._unlockTouchScroll();
2709
- this._stopResizeWatch();
2710
-
2711
- if (this.bib?.dialog?.open) {
2712
- setTimeout(() => {
2713
- this.bib.dialog.close();
2714
- }, 300);
2715
- }
2716
- this.floater.hideBib(eventType);
2717
-
2718
- if (eventType === "disconnect") {
2719
- this.floater.disconnect();
2720
- }
2721
- }
2722
-
2723
- /**
2724
- * Applies the position:fixed page-scroll lock (mobile only).
2725
- * Requires `this._savedScrollY` to be set before calling.
2726
- * @private
2727
- */
2728
- _lockPageScroll() {
2729
- this._savedScrollY = window.scrollY;
2730
- document.body.style.position = "fixed";
2731
- document.body.style.top = `-${this._savedScrollY}px`;
2732
- document.body.style.width = "100%";
2733
- document.body.style.overflow = "hidden";
2734
- document.documentElement.style.overflow = "hidden";
2735
- this._scrollLocked = true;
2736
- }
2737
-
2738
- /**
2739
- * Restores page scroll locked by `_lockPageScroll`.
2740
- * Safe to call multiple times — no-ops when no lock is active.
2741
- * @private
2742
- */
2743
- _restorePageScroll() {
2744
- if (this._scrollLocked) {
2745
- document.body.style.position = "";
2746
- document.body.style.top = "";
2747
- document.body.style.width = "";
2748
- document.body.style.overflow = "";
2749
- document.documentElement.style.overflow = "";
2750
- window.scrollTo(0, this._savedScrollY || 0);
2751
- this._savedScrollY = undefined;
2752
- this._scrollLocked = false;
2753
- }
2754
- }
2755
-
2756
- /**
2757
- * Locks page-level touch scroll while the drawer is open.
2758
- * Walks composedPath() so scrollable children inside the dialog still scroll.
2759
- * @private
2760
- */
2761
- _lockTouchScroll() {
2762
- if (this._boundTouchMoveHandler) {
2763
- return;
2764
- }
2765
- this._boundTouchMoveHandler = (e) => {
2766
- const path = e.composedPath();
2767
- const insideScrollable = path.some(
2768
- (el) => el !== document && el.scrollHeight > el.clientHeight,
2769
- );
2770
- if (!insideScrollable) {
2771
- e.preventDefault();
2772
- }
2773
- };
2774
- document.addEventListener("touchmove", this._boundTouchMoveHandler, {
2775
- passive: false,
2776
- });
2777
- }
2778
-
2779
- /**
2780
- * Removes the touch-scroll lock.
2781
- * @private
2782
- */
2783
- _unlockTouchScroll() {
2784
- if (this._boundTouchMoveHandler) {
2785
- document.removeEventListener("touchmove", this._boundTouchMoveHandler, {
2786
- passive: false,
2787
- });
2788
- this._boundTouchMoveHandler = undefined;
2789
- }
2790
- }
2791
-
2792
- /**
2793
- * Watches viewport width while the drawer is open and toggles the scroll
2794
- * lock if the user crosses the mobile breakpoint (e.g. orientation change).
2795
- * @private
2796
- */
2797
- _startResizeWatch() {
2798
- if (this._boundResizeHandler) {
2799
- return;
2800
- }
2801
- this._boundResizeHandler = () => {
2802
- if (document.body.offsetWidth < getMobileBreakpoint()) {
2803
- if (!this._scrollLocked) {
2804
- this._lockPageScroll();
2805
- this._lockTouchScroll();
2806
- }
2807
- } else {
2808
- this._restorePageScroll();
2809
- this._unlockTouchScroll();
2810
- }
2811
- };
2812
- window.addEventListener("resize", this._boundResizeHandler);
2813
- }
2814
-
2815
- /**
2816
- * Removes the resize listener added by `_startResizeWatch`.
2817
- * @private
2818
- */
2819
- _stopResizeWatch() {
2820
- if (this._boundResizeHandler) {
2821
- window.removeEventListener("resize", this._boundResizeHandler);
2822
- this._boundResizeHandler = undefined;
2823
- }
2824
- }
2825
-
2826
- render() {
2827
- return u$3`
2828
- <${this.floaterBibTag} id="bib"
2829
- ?data-show=${this.isPopoverVisible}
2830
- ?onBackdrop="${this.floaterConfig.backdrop}">
2831
- <slot></slot>
2832
- </${this.floaterBibTag}>
2833
- `;
2834
- }
2835
- }
2836
-
2837
- /**
2838
- * @license
2839
- * Copyright 2017 Google LLC
2840
- * SPDX-License-Identifier: BSD-3-Clause
2841
- */
2842
- const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
2843
-
2844
- /**
2845
- * @license
2846
- * Copyright 2018 Google LLC
2847
- * SPDX-License-Identifier: BSD-3-Clause
2848
- */const e=e$1(class extends i{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}});
2849
-
2850
- /**
2851
- * @license
2852
- * Copyright 2018 Google LLC
2853
- * SPDX-License-Identifier: BSD-3-Clause
2854
- */const o=o=>o??E;
2855
-
2856
- class l{generateElementName(t,e){let o=t;return o+="-",o+=e.replace(/[.]/g,"_"),o}generateTag(o,s,a){const r=this.generateElementName(o,s),i=i$4`${s$2(r)}`;return customElements.get(r)||customElements.define(r,class extends a{}),i}}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$3`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--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}
2857
- `,u$1=i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:focus:not(:focus-visible){outline:3px solid transparent}:host,:host>span{position:relative}:host{width:2rem;height:2rem;display:inline-block;font-size:0}:host>span{position:absolute;display:inline-block;float:none;top:0;left:0;width:2rem;height:2rem;border-radius:100%;border-style:solid;border-width:0}: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}}
2858
- `,p$1=i$3`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}
2859
- `;class b extends i$1{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`
2860
- ${this.defineTemplate().map(t=>x$2`
2861
- <span part="element" class="loader node-${t}"></span>
2862
- `)}
2863
-
2864
- <div class="no-animation body-default">Loading...</div>
2865
-
2866
- ${this.ringworm?x$2`
2867
- <svg part="element" class="circular" viewBox="25 25 50 50">
2868
- <circle class="path" cx="50" cy="50" r="20" fill="none"/>
2869
- </svg>`:""}
2870
- `}}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$1{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$3`[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)}
2871
- `,H=i$3`.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}
2872
- `,M=i$3`: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}
2873
- `,R=i$3`: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)}
2874
- `;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$4`span`:this.buttonHref?i$4`a`:i$4`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$3`
2875
- <!-- Hidden slots for aria labels -->
2876
- <slot name="ariaLabel" hidden @slotchange="${this.requestUpdate}"></slot>
2877
- <slot name="ariaLabel.loading" hidden @slotchange="${this.requestUpdate}"></slot>
2878
-
2879
- <${this._renderTag}
2880
- part="${e$1}"
2881
- aria-label="${o(this.generateAriaLabel())}"
2882
- aria-labelledby="${o(this.loading?void 0:this.currentAriaLabelledBy||void 0)}"
2883
- tabindex="${o(this.static?-1:l)}"
2884
- ?autofocus="${this.autofocus}"
2885
- class=${e(s)}
2886
- ?disabled="${this.disabled||this.loading}"
2887
- ?onDark="${this.onDark}"
2888
- title="${o(this.title?this.title:void 0)}"
2889
- name="${o(this.name?this.name:void 0)}"
2890
- type="${o(this.type?this.type:void 0)}"
2891
- variant="${o(this.variant?this.variant:void 0)}"
2892
- .value="${o(this.value?this.value:void 0)}"
2893
- @click="${this.static||"submit"!==this.type?void 0:this.surfaceSubmitEvent}"
2894
- @pointerenter="${this.onPointerEvent}"
2895
- @pointerleave="${this.onPointerEvent}"
2896
- @pointerdown="${this.onPointerEvent}"
2897
- @pointerup="${this.onPointerEvent}"
2898
- @blur="${this.onPointerEvent}"
2899
- href="${o(this.buttonHref||void 0)}"
2900
- target="${o(this.buttonTarget||void 0)}"
2901
- rel="${o(this.buttonRel||void 0)}"
2902
- >
2903
- ${o(this.loading?u$3`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>`:void 0)}
2904
-
2905
- <span class="${e(a)}" part="contentWrapper">
2906
- <span class="${e(r)}" part="text">
2907
- <slot></slot>
2908
- </span>
2909
- </span>
2910
- </${this._renderTag}>
2911
- `}renderLayout(){return this.renderLayoutDefault()}}
2912
-
2913
- 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$1{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$3`: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}
2914
- `;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$3`.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}
2915
- `;var y=i$3`: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)}
2916
- `;var k=i$3`: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)}
2917
- `;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`
2918
- <div class="componentWrapper">
2919
- <div
2920
- class="${e({svgWrapper:true})}"
2921
- title="${o(this.title||void 0)}">
2922
- <span aria-hidden="${o(this.ariaHidden||true)}" part="svg">
2923
- ${this.customSvg?x$2`
2924
- <slot name="svg"></slot>
2925
- `:x$2`
2926
- ${this.svg}
2927
- `}
2928
- </span>
2929
- </div>
2930
-
2931
- <div class="${e(t)}" part="label">
2932
- <slot></slot>
2933
- </div>
2934
- </div>
2935
- `}}
2936
-
2937
- // Selectors for focusable elements
2938
- const FOCUSABLE_SELECTORS = [
2939
- 'a[href]',
2940
- 'button:not([disabled])',
2941
- 'textarea:not([disabled])',
2942
- 'input:not([disabled])',
2943
- 'select:not([disabled])',
2944
- '[role="tab"]:not([disabled])',
2945
- '[role="link"]:not([disabled])',
2946
- '[role="button"]:not([disabled])',
2947
- '[tabindex]:not([tabindex="-1"])',
2948
- '[contenteditable]:not([contenteditable="false"])'
2949
- ];
2950
-
2951
- // List of custom components that are known to be focusable
2952
- const FOCUSABLE_COMPONENTS = [
2953
- 'auro-checkbox',
2954
- 'auro-radio',
2955
- 'auro-dropdown',
2956
- 'auro-button',
2957
- 'auro-combobox',
2958
- 'auro-input',
2959
- 'auro-counter',
2960
- 'auro-menu',
2961
- 'auro-select',
2962
- 'auro-datepicker',
2963
- 'auro-hyperlink',
2964
- 'auro-accordion',
2965
- ];
2966
-
2967
- /**
2968
- * Determines if a given element is a custom focusable component.
2969
- * Returns true if the element matches a known focusable component and is not disabled.
2970
- *
2971
- * @param {HTMLElement} element The element to check for focusability.
2972
- * @returns {boolean} True if the element is a focusable custom component, false otherwise.
2973
- */
2974
- function isFocusableComponent(element) {
2975
- const componentName = element.tagName.toLowerCase();
2976
-
2977
- // Guard Clause: Element is a focusable component
2978
- if (!FOCUSABLE_COMPONENTS.some((name) => element.hasAttribute(name) || componentName === name)) return false;
2979
-
2980
- // Guard Clause: Element is not disabled
2981
- if (element.hasAttribute('disabled')) return false;
2982
-
2983
- // Guard Clause: The element is a hyperlink and has no href attribute
2984
- if (componentName.match("hyperlink") && !element.hasAttribute('href')) return false;
2985
-
2986
- // If all guard clauses pass, the element is a focusable component
2987
- return true;
2988
- }
2989
-
2990
- /**
2991
- * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
2992
- * Returns a unique, ordered array of elements that can receive focus.
2993
- *
2994
- * @param {HTMLElement} container The container to search within
2995
- * @returns {Array<HTMLElement>} An array of focusable elements within the container.
2996
- */
2997
- function getFocusableElements(container) {
2998
- // Get elements in DOM order by walking the tree
2999
- const orderedFocusableElements = [];
3000
-
3001
- // Define a recursive function to collect focusable elements in DOM order
3002
- const collectFocusableElements = (root) => {
3003
- // Check if current element is focusable
3004
- if (root.nodeType === Node.ELEMENT_NODE) {
3005
- // Check if this is a custom component that is focusable
3006
- const isComponentFocusable = isFocusableComponent(root);
3007
-
3008
- if (isComponentFocusable) {
3009
- // Add the component itself as a focusable element and don't traverse its shadow DOM
3010
- orderedFocusableElements.push(root);
3011
- return; // Skip traversing inside this component
3012
- }
3013
-
3014
- // Check if the element itself matches any selector
3015
- for (const selector of FOCUSABLE_SELECTORS) {
3016
- if (root.matches?.(selector)) {
3017
- orderedFocusableElements.push(root);
3018
- break; // Once we know it's focusable, no need to check other selectors
3019
- }
3020
- }
3021
-
3022
- // Process shadow DOM only for non-Auro components
3023
- if (root.shadowRoot) {
3024
- // Process shadow DOM children in order
3025
- if (root.shadowRoot.children) {
3026
- Array.from(root.shadowRoot.children).forEach(child => {
3027
- collectFocusableElements(child);
3028
- });
3029
- }
3030
- }
3031
-
3032
- // Process slots and their assigned nodes in order
3033
- if (root.tagName === 'SLOT') {
3034
- const assignedNodes = root.assignedNodes({ flatten: true });
3035
- for (const node of assignedNodes) {
3036
- collectFocusableElements(node);
3037
- }
3038
- } else {
3039
- // Process light DOM children in order
3040
- if (root.children) {
3041
- Array.from(root.children).forEach(child => {
3042
- collectFocusableElements(child);
3043
- });
3044
- }
3045
- }
3046
- }
3047
- };
3048
-
3049
- // Start the traversal from the container
3050
- collectFocusableElements(container);
3051
-
3052
- // Remove duplicates that might have been collected through different paths
3053
- // while preserving order
3054
- const uniqueElements = [];
3055
- const seen = new Set();
3056
-
3057
- for (const element of orderedFocusableElements) {
3058
- if (!seen.has(element)) {
3059
- seen.add(element);
3060
- uniqueElements.push(element);
3061
- }
3062
- }
3063
-
3064
- return uniqueElements;
3065
- }
3066
-
3067
- /**
3068
- * FocusTrap manages keyboard focus within a specified container element, ensuring that focus does not leave the container when tabbing.
3069
- * It is commonly used for modal dialogs or overlays to improve accessibility by trapping focus within interactive UI components.
3070
- */
3071
- class FocusTrap {
3072
- /**
3073
- * Creates a new FocusTrap instance for the given container element.
3074
- * Initializes event listeners and prepares the container for focus management.
3075
- *
3076
- * @param {HTMLElement} container The DOM element to trap focus within.
3077
- * @throws {Error} If the provided container is not a valid HTMLElement.
3078
- */
3079
- constructor(container) {
3080
- if (!container || !(container instanceof HTMLElement)) {
3081
- throw new Error("FocusTrap requires a valid HTMLElement.");
3082
- }
3083
-
3084
- this.container = container;
3085
- this.tabDirection = 'forward'; // or 'backward'
3086
-
3087
- this._init();
3088
- }
3089
-
3090
- /**
3091
- * Initializes the focus trap by setting up event listeners and attributes on the container.
3092
- * Prepares the container for focus management, including support for shadow DOM and inert attributes.
3093
- *
3094
- * @private
3095
- */
3096
- _init() {
3097
-
3098
- // Add inert attribute to prevent focusing programmatically as well (if supported)
3099
- if ('inert' in HTMLElement.prototype) {
3100
- this.container.inert = false; // Ensure the container isn't inert
3101
- this.container.setAttribute('data-focus-trap-container', true); // Mark for identification
3102
- }
3103
-
3104
- // Track tab direction
3105
- this.container.addEventListener('keydown', this._onKeydown);
3106
- }
3107
-
3108
- /**
3109
- * Handles keydown events to manage tab navigation within the container.
3110
- * Ensures that focus wraps around when reaching the first or last focusable element.
3111
- *
3112
- * @param {KeyboardEvent} e The keyboard event triggered by user interaction.
3113
- * @private
3114
- */
3115
- _onKeydown = (e) => {
3116
-
3117
- if (e.key === 'Tab') {
3118
-
3119
- // Set the tab direction based on the key pressed
3120
- this.tabDirection = e.shiftKey ? 'backward' : 'forward';
3121
-
3122
- // Get the active element(s) in the document and shadow root
3123
- // This will include the active element in the shadow DOM if it exists
3124
- // Active element may be inside the shadow DOM depending on delegatesFocus, so we need to check both
3125
- let activeElement = document.activeElement;
3126
- const actives = [activeElement];
3127
- while (activeElement?.shadowRoot?.activeElement) {
3128
- actives.push(activeElement.shadowRoot.activeElement);
3129
- activeElement = activeElement.shadowRoot.activeElement;
3130
- }
3131
-
3132
- // Update the focusable elements
3133
- const focusables = this._getFocusableElements();
3134
-
3135
- // If we're at either end of the focusable elements, wrap around to the other end
3136
- const focusIndex =
3137
- (actives.includes(focusables[0]) || actives.includes(this.container)) && this.tabDirection === 'backward'
3138
- ? focusables.length - 1
3139
- : actives.includes(focusables[focusables.length - 1]) && this.tabDirection === 'forward'
3140
- ? 0
3141
- : null;
3142
-
3143
- if (focusIndex !== null) {
3144
- focusables[focusIndex].focus();
3145
- e.preventDefault(); // Prevent default tab behavior
3146
- e.stopPropagation(); // Stop the event from bubbling up
3147
- }
3148
- }
3149
- };
3150
-
3151
- /**
3152
- * Retrieves all focusable elements within the container in DOM order, including those in shadow DOM and slots.
3153
- * Returns a unique, ordered array of elements that can receive focus.
3154
- *
3155
- * @returns {Array<HTMLElement>} An array of focusable elements within the container.
3156
- * @private
3157
- */
3158
- _getFocusableElements() {
3159
- // Use the imported utility function to get focusable elements
3160
- const elements = getFocusableElements(this.container);
3161
-
3162
- // Filter out any elements with the 'focus-bookend' class
3163
- return elements;
3164
- }
3165
-
3166
- /**
3167
- * Moves focus to the first focusable element within the container.
3168
- * Useful for setting initial focus when activating the focus trap.
3169
- */
3170
- focusFirstElement() {
3171
- const focusables = this._getFocusableElements();
3172
- if (focusables.length) focusables[0].focus();
3173
- }
3174
-
3175
- /**
3176
- * Moves focus to the last focusable element within the container.
3177
- * Useful for setting focus when deactivating or cycling focus in reverse.
3178
- */
3179
- focusLastElement() {
3180
- const focusables = this._getFocusableElements();
3181
- if (focusables.length) focusables[focusables.length - 1].focus();
3182
- }
3183
-
3184
- /**
3185
- * Removes event listeners and attributes added by the focus trap.
3186
- * Call this method to clean up when the focus trap is no longer needed.
3187
- */
3188
- disconnect() {
3189
-
3190
- if (this.container.hasAttribute('data-focus-trap-container')) {
3191
- this.container.removeAttribute('data-focus-trap-container');
3192
- }
3193
-
3194
- this.container.removeEventListener('keydown', this._onKeydown);
3195
- }
3196
- }
3197
-
3198
- var buttonVersion = '12.3.0';
3199
-
3200
- var iconVersion = '9.1.1';
3201
-
3202
- var colorCss = i$3`.wrapper{background:var(--ds-auro-drawer-container-color)}::slotted(*){color:var(--ds-auro-drawer-text-color)}
3203
- `;
3204
-
3205
- var styleCss = i$3`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, .875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, .75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, .625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, .875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, .05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, .05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, .05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, .05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, .05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, .1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(.875rem, 1.1666666667vw, .875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, .1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{display:contents;--insetPaddingXl: var(--ds-size-400, 2rem);--insetPaddingXxl: var(--ds-size-600, 3rem);--insetPaddingXxxl: var(--ds-size-800, 4rem)}:host .wrapper{position:absolute;overflow:auto;width:100%;height:100%;box-sizing:border-box;transition:transform;box-shadow:var(--ds-elevation-200, 0px 0px 10px rgba(0, 0, 0, .15));will-change:transform}:host .header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ds-size-200, 1rem)}:host .footer{display:flex;align-items:flex-start;justify-content:flex-end;margin-top:var(--insetPaddingXl)}:host .heading{margin-block-start:0}:host(:not([unformatted])) .wrapper{padding:var(--insetPaddingXl)}@media screen and (min-width: 1024px){:host(:not([unformatted])) .wrapper{padding:var(--insetPaddingXxxl)}}#closeButton{margin-left:auto}#closeButton:hover{cursor:pointer}#closeButton .util_displayHiddenVisually{position:absolute;overflow:hidden;width:1px;height:1px;padding:0;border:0;clip:rect(1px,1px,1px,1px)}:host([placement=right]) .wrapper,:host([placement=left]) .wrapper{max-width:90%}:host([placement=right]),:host([placement=left]){overflow-x:hidden}:host([placement=top]),:host([placement=bottom]){width:100%}:host([placement=top]) .wrapper,:host([placement=bottom]) .wrapper{max-height:90%}:host([placement=right]) .wrapper{right:100%}:host([visible][placement=right]) .wrapper{animation:slideInFromRight .3s forwards;animation-delay:.05s}:host([closing][placement=right]) .wrapper{animation:slideOutToRight .3s forwards}@keyframes slideInFromRight{0%{transform:translate(100%);right:0}to{transform:translateZ(0);right:0}}@keyframes slideOutToRight{0%{transform:translateZ(0);right:0}to{transform:translate(100%);right:0}}:host([placement=left]) .wrapper{left:-100%}:host([visible][placement=left]) .wrapper{animation:slideInFromLeft .3s forwards;animation-delay:.05s}:host([closing][placement=left]) .wrapper{animation:slideOutToLeft .3s forwards}@keyframes slideInFromLeft{0%{transform:translate(-100%);left:0}to{transform:translateZ(0);left:0}}@keyframes slideOutToLeft{0%{transform:translateZ(0);left:0}to{transform:translate(-100%);left:0}}:host([placement=top]) .wrapper{top:-100%}:host([visible][placement=top]) .wrapper{animation:slideInFromTop .3s forwards;animation-delay:.05s}:host([closing][placement=top]) .wrapper{animation:slideOutToTop .3s forwards}@keyframes slideInFromTop{0%{transform:translateY(-100%);top:0}to{transform:translateZ(0);top:0}}@keyframes slideOutToTop{0%{transform:translateZ(0);top:0}to{transform:translateY(-100%);top:0}}:host([placement=bottom]) .wrapper{bottom:100%}:host([visible][placement=bottom]) .wrapper{animation:slideInFromBottom .3s forwards;animation-delay:.05s}:host([closing][placement=bottom]) .wrapper{animation:slideOutToBottom .3s forwards}@keyframes slideInFromBottom{0%{transform:translateY(100%);bottom:0}to{transform:translateZ(0);bottom:0}}@keyframes slideOutToBottom{0%{transform:translateZ(0);bottom:0}to{transform:translateY(100%);bottom:0}}@media screen and (min-width: 768px){:host([size=sm][placement=left]) .wrapper,:host([size=sm][placement=right]) .wrapper{max-width:40%}}@media screen and (min-width: 1024px){:host([size=sm][placement=left]) .drawer,:host([size=sm][placement=right]) .drawer{max-width:740px}}@media screen and (min-width: 768px){:host([size=md][placement=left]) .wrapper,:host([size=md][placement=right]) .wrapper{max-width:70%}}@media screen and (min-width: 1024px){:host([size=md][placement=left]) .wrapper,:host([size=md][placement=right]) .wrapper{max-width:986px}}:host([size=sm][placement=top]:not([stretch])) .wrapper,:host([size=sm][placement=bottom]:not([stretch])) .wrapper{max-height:30%}:host([size=md][placement=top]:not([stretch])) .wrapper,:host([size=md][placement=bottom]:not([stretch])) .wrapper{max-height:50%}:host([stretch]) .wrapper{max-width:100%;max-height:100%}
3206
- `;
3207
-
3208
- var tokensCss = i$3`:host{--ds-auro-drawer-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-drawer-text-color: var(--ds-basic-color-texticon-default, #2a2a2a)}
3209
- `;
3210
-
3211
- /**
3212
- * @internal
3213
- */
3214
- class AuroDrawerContent extends i$1 {
3215
- constructor() {
3216
- super();
3217
-
3218
- this.closeButtonAppearance = 'default';
3219
-
3220
- /**
3221
- * @private
3222
- */
3223
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
3224
-
3225
- /*
3226
- * @private
3227
- */
3228
- this.buttonTag = AuroDependencyVersioning.prototype.generateTag(
3229
- "auro-button",
3230
- buttonVersion,
3231
- T,
3232
- );
3233
-
3234
- /**
3235
- * @private
3236
- */
3237
- this.iconTag = AuroDependencyVersioning.prototype.generateTag(
3238
- "auro-icon",
3239
- iconVersion,
3240
- x,
3241
- );
3242
-
3243
- /**
3244
- * @private
3245
- */
3246
- this.prevActiveElement = undefined;
3247
- }
3248
-
3249
- static get properties() {
3250
- return {
3251
- /**
3252
- * Defines whether the close button should be light colored for use on dark backgrounds.
3253
- * @property {'default', 'inverse'}
3254
- * @default 'default'
3255
- */
3256
- closeButtonAppearance: {
3257
- type: String,
3258
- attribute: 'close-button-appearance',
3259
- reflect: true
3260
- },
3261
-
3262
- modal: {
3263
- type: Boolean,
3264
- reflect: true
3265
- },
3266
-
3267
- onDark: {
3268
- type: Boolean,
3269
- reflect: true
3270
- },
3271
-
3272
- unformatted: {
3273
- type: Boolean,
3274
- reflect: true
3275
- },
3276
-
3277
- visible: {
3278
- type: Boolean,
3279
- reflect: true
3280
- },
3281
-
3282
- closing: {
3283
- type: Boolean,
3284
- reflect: true
3285
- }
3286
- };
3287
- }
3288
-
3289
- static get styles() {
3290
- return [colorCss, tokensCss, styleCss];
3291
- }
3292
-
3293
- handleCloseButtonClick() {
3294
- this.dispatchEvent(new CustomEvent("close-click"));
3295
- }
3296
-
3297
- updated(changedProperties) {
3298
- if (changedProperties.has("visible")) {
3299
- if (this.visible) {
3300
- // Reset CSS animation so it replays each time the drawer opens
3301
- const wrapper = this.shadowRoot.querySelector('.wrapper');
3302
- if (wrapper) {
3303
- wrapper.style.animation = 'none';
3304
- // Force reflow to restart the animation
3305
- void wrapper.offsetHeight; // eslint-disable-line no-void
3306
- wrapper.style.animation = '';
3307
- }
3308
-
3309
- if (!this.focusTrap) {
3310
- this.focusTrap = new FocusTrap(this);
3311
- }
3312
- this.prevActiveElement = this.triggerElement || document.activeElement;
3313
- // Move focus to the first focusable element inside the drawer.
3314
- // rAF lets showModal()'s native focus assignment settle before we override.
3315
- requestAnimationFrame(() => {
3316
- this.focusTrap?.focusFirstElement();
3317
- });
3318
- } else {
3319
- // Native dialog.close() fires after a 300ms delay (see auro-floater-bib hideDialog).
3320
- // Defer focus restoration so it runs after the dialog releases focus.
3321
- const target = this.prevActiveElement;
3322
- this.prevActiveElement = undefined;
3323
- setTimeout(() => target?.focus(), 350);
3324
-
3325
- if (this.focusTrap) {
3326
- this.focusTrap.disconnect();
3327
- this.focusTrap = null;
3328
- }
3329
- }
3330
- }
3331
-
3332
- if (changedProperties.has("closing") && this.closing) {
3333
- // Reset closing state after animation completes
3334
- setTimeout(() => {
3335
- this.closing = false;
3336
- }, 300);
3337
- }
3338
- }
3339
-
3340
- render() {
3341
- return u$3`
3342
- <!-- Hidden slot for close button aria-label -->
3343
- <slot name="ariaLabel.drawer.close" hidden @slotchange=${this.requestUpdate}></slot>
3344
-
3345
- <div class="wrapper" tabindex="-1" part="drawer-wrapper">
3346
- ${
3347
- this.unformatted
3348
- ? ""
3349
- : u$3`
3350
- <div class="header-row">
3351
- <h1 class="heading heading-lg util_stackMarginNone--top" id="drawer-header" part="drawer-header">
3352
- <slot name="header"></slot>
3353
- </h1>
3354
- ${
3355
- this.modal
3356
- ? ""
3357
- : u$3`
3358
- <div id="closeButton" @click="${this.handleCloseButtonClick}">
3359
- <slot name="close">
3360
- <${this.buttonTag}
3361
- part="close-button"
3362
- variant="ghost"
3363
- shape="circle"
3364
- size="sm"
3365
- aria-label="${this.runtimeUtils.getSlotText(this, 'ariaLabel.drawer.close') || 'Close'}"
3366
- appearance="${this.onDark ? 'inverse' : this.closeButtonAppearance}">
3367
- <${this.iconTag} ?customColor="${this.onDark || this.closeButtonAppearance === 'inverse'}" category="interface" name="x-lg"></${this.iconTag}>
3368
- </${this.buttonTag}>
3369
- </slot>
3370
- </div>
3371
- `
3372
- }
3373
- </div>
3374
- `
3375
- }
3376
- <div part="drawer-content" class="content body-default">
3377
- <slot></slot>
3378
- <slot name="content"></slot>
3379
- </div>
3380
- ${
3381
- this.unformatted
3382
- ? ""
3383
- : u$3`
3384
- <div part="drawer-footer" class="footer" id="footerWrapper">
3385
- <slot name="footer" id="footer"></slot>
3386
- </div>
3387
- `
3388
- }
3389
- </div>
3390
- `;
3391
- }
3392
- }
3393
-
3394
- // define the name of the custom component
3395
- if (!customElements.get("auro-drawer-content")) {
3396
- customElements.define("auro-drawer-content", AuroDrawerContent);
3397
- }
3398
-
3399
- const DESIGN_TOKEN_BREAKPOINT_PREFIX = "--ds-grid-breakpoint-";
3400
- const DESIGN_TOKEN_BREAKPOINT_OPTIONS = ["lg", "md", "sm", "xs"];
3401
-
3402
- /**
3403
- * Parses a design token to get its pixel value.
3404
- * Returns the pixel value of the design token or undefined if the token is invalid.
3405
- * @param {string} value - `lg`, `md`, `sm`, or `xs`.
3406
- * @returns {string | undefined} The pixel value of the design token or undefined if invalid.
3407
- */
3408
- function parseBreakpointToken(value) {
3409
- // verify the defined breakpoint is valid and exit out if not
3410
- const validatedValue = DESIGN_TOKEN_BREAKPOINT_OPTIONS.includes(value)
3411
- ? value
3412
- : undefined;
3413
- if (!validatedValue) {
3414
- return undefined;
3415
- }
3416
- // get the pixel value for the defined breakpoint
3417
- const docStyle = getComputedStyle(document.documentElement);
3418
- return docStyle.getPropertyValue(DESIGN_TOKEN_BREAKPOINT_PREFIX + value);
3419
- }
3420
-
3421
- // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
3422
- // See LICENSE in the project root for license information.
3423
-
3424
-
3425
- const CONFIG = {
3426
- backdrop: true,
3427
- prefix: "auroDrawer",
3428
- };
3429
-
3430
- /**
3431
- * The `auro-drawer` element provides users a way to implement an expandable drawer component.
3432
- * @customElement auro-drawer
3433
- *
3434
- * @slot - Default slot for the body content in drawer.
3435
- * @slot header - Text to display as the header of the modal.
3436
- * @slot footer - Used for action options, e.g. buttons.
3437
- * @slot close - Used to replace the close button.
3438
- * @slot ariaLabel.drawer.close - Text to describe the "x" icon close button for screen readers. Default: "Close".
3439
- *
3440
- * @fires auroDrawer-toggled - Event fired when the drawer is toggled open or closed.
3441
- *
3442
- * @csspart {deprecated} drawer-backdrop - DEPRECATED - To migrate to the token approach, set `display: none` on this part and use the `--auro-drawer-backdrop-*` CSS custom properties instead.
3443
- * @csspart drawer-wrapper - to style the content wrapper.
3444
- * @csspart drawer-header - to style the header.
3445
- * @csspart drawer-content - to style the container of the drawer content.
3446
- * @csspart drawer-footer - to style the footer.
3447
- * @csspart close-button - to style the close button.
3448
- *
3449
- * @cssprop [--auro-drawer-backdrop-background=transparent] - Background of the `::backdrop` pseudo-element. In modal/backdrop mode the component sets this to the design-system scrim token; consumers can override it.
3450
- * @cssprop [--auro-drawer-backdrop-filter=none] - `backdrop-filter` applied to the `::backdrop` pseudo-element (e.g. `blur(4px)`).
3451
- * @cssprop [--auro-drawer-backdrop-opacity=1] - Opacity of the `::backdrop` pseudo-element.
3452
- * @cssprop [--auro-drawer-backdrop-transition=opacity 0.3s ease] - Transition applied to the `::backdrop` pseudo-element (e.g. `opacity 0.3s ease`).
3453
- */
3454
- class AuroDrawer extends AuroFloater {
3455
- constructor() {
3456
- super("drawer");
3457
-
3458
- this._initializeDefaults();
3459
- }
3460
-
3461
- _initializeDefaults() {
3462
- this.closeButtonAppearance = "default";
3463
- this.placement = "right";
3464
- this.size = "lg";
3465
- this.fullscreenBreakpoint = "sm";
3466
-
3467
- /**
3468
- * @private
3469
- */
3470
- this.drawerBib = undefined;
3471
- }
3472
-
3473
- // when `carryDown` is true, the value of the property will be passed down to `this.drawerBib` in `updated` cycle.
3474
- static get properties() {
3475
- return {
3476
- ...AuroFloater.properties,
3477
-
3478
- /**
3479
- * Defines whether the close button should be light colored for use on dark backgrounds.
3480
- * @property {'default', 'inverse'}
3481
- * @default 'default'
3482
- */
3483
- closeButtonAppearance: {
3484
- type: String,
3485
- attribute: "close-button-appearance",
3486
- carryDown: true,
3487
- reflect: true,
3488
- },
3489
-
3490
- /**
3491
- * Defines the screen size breakpoint, at which the drawer switches to fullscreen mode on mobile.
3492
- * When expanded, the drawer will automatically display in fullscreen mode if the screen size is equal to or smaller than the selected breakpoint.
3493
- * @type {'lg' | 'md' | 'sm' | 'xs'}
3494
- * @default 'sm'
3495
- */
3496
- fullscreenBreakpoint: {
3497
- type: String,
3498
- reflect: true,
3499
- },
3500
-
3501
- /**
3502
- * Modal drawer restricts the user to take an action (no default close actions).
3503
- */
3504
- modal: {
3505
- type: Boolean,
3506
- carryDown: true,
3507
- reflect: true,
3508
- },
3509
-
3510
- /**
3511
- * Sets the anchor placement for the bib. If true, bib will open based off its parent size and position.
3512
- */
3513
- nested: {
3514
- type: Boolean,
3515
- reflect: true,
3516
- },
3517
-
3518
- /**
3519
- * DEPRECATED - use `closeButtonAppearance` instead.
3520
- */
3521
- onDark: {
3522
- type: Boolean,
3523
- carryDown: true,
3524
- reflect: true,
3525
- },
3526
-
3527
- /**
3528
- * Sets the placement of drawer bib.
3529
- * @type {'right' | 'left' | 'top' | 'bottom'}
3530
- * @default 'right'
3531
- */
3532
- placement: {
3533
- type: String,
3534
- carryDown: true,
3535
- },
3536
-
3537
- /**
3538
- * Sets the size of drawer bib.
3539
- * @type {'sm' | 'md' | 'lg'}
3540
- * @default 'lg'
3541
- */
3542
- size: {
3543
- type: String,
3544
- carryDown: true,
3545
- },
3546
-
3547
- /**
3548
- * Unformatted drawer window, edge-to-edge fill for content.
3549
- */
3550
- unformatted: {
3551
- type: Boolean,
3552
- carryDown: true,
3553
- reflect: true,
3554
- },
3555
- };
3556
- }
3557
-
3558
- /**
3559
- * This will register this element with the browser.
3560
- * @param {string} [name="auro-drawer"] - The name of the element that you want to register.
3561
- *
3562
- * @example
3563
- * AuroDrawer.register("custom-drawer") // this will register this element to <custom-drawer/>
3564
- *
3565
- */
3566
- static register(name = "auro-drawer") {
3567
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroDrawer);
3568
- }
3569
-
3570
- /**
3571
- * @ignore
3572
- */
3573
- get floaterConfig() {
3574
- return {
3575
- ...super.floaterConfig,
3576
- ...CONFIG,
3577
- placement: this.placement,
3578
- fullscreenBreakpoint: parseBreakpointToken(this.fullscreenBreakpoint),
3579
- };
3580
- }
3581
-
3582
- /**
3583
- * Sets the expanded state of the drawer.
3584
- * Called by floatingUI.
3585
- * @ignore
3586
- * @param {boolean} value - Whether the drawer is expanded.
3587
- */
3588
- set expanded(value) {
3589
- if (value) {
3590
- this.drawerBib.setAttribute("stretch", "");
3591
- } else {
3592
- this.drawerBib.removeAttribute("stretch");
3593
- }
3594
- }
3595
-
3596
- /**
3597
- * Gets the expanded state of the drawer.
3598
- * @ignore
3599
- * @returns {boolean} Whether the drawer is expanded.
3600
- */
3601
- get expanded() {
3602
- return this.drawerBib.hasAttribute("stretch");
3603
- }
3604
-
3605
- firstUpdated() {
3606
- super.firstUpdated();
3607
-
3608
- AuroLibraryRuntimeUtils.prototype.handleComponentTagRename(
3609
- this,
3610
- "auro-drawer",
3611
- );
3612
-
3613
- this.drawerBib = document.createElement("auro-drawer-content");
3614
- this.drawerBib.triggerElement = this.triggerElement;
3615
- this.drawerBib.addEventListener("close-click", () => {
3616
- this.hide();
3617
- });
3618
- this.append(this.drawerBib);
3619
-
3620
- this.bib.setAttribute("exportparts", "backdrop:drawer-backdrop");
3621
-
3622
- this.setupAria();
3623
- }
3624
-
3625
- /**
3626
- * @private
3627
- */
3628
- setupAria() {
3629
- if (this.triggerElement) {
3630
- this.triggerElement.setAttribute("aria-haspopup", "dialog");
3631
- this.triggerElement.setAttribute(
3632
- "aria-controls",
3633
- this.bib.getAttribute("id"),
3634
- );
3635
-
3636
- // Use bibLabel + aria-labelledby on the <dialog> instead of aria-label
3637
- // directly — iOS VoiceOver does not reliably read aria-label on <dialog>.
3638
- this.bib.bibLabel = this.triggerElement.textContent.trim();
3639
- }
3640
- // role="dialog" and aria-modal are provided natively by the <dialog> element;
3641
- // do not set them manually here.
3642
- }
3643
-
3644
- /**
3645
- * @private
3646
- * Updates an attribute on the drawer template element.
3647
- * @param {string} attribute - The name of the attribute to update.
3648
- * @param {string | boolean} value - The value to set the attribute to.
3649
- */
3650
- updateDrawerBibAttribute(attribute, value) {
3651
- if (typeof value === "boolean" || typeof value === "undefined") {
3652
- if (value) {
3653
- this.drawerBib.setAttribute(attribute, "");
3654
- } else {
3655
- this.drawerBib.removeAttribute(attribute);
3656
- }
3657
- } else {
3658
- this.drawerBib.setAttribute(attribute, value);
3659
- }
3660
- }
3661
-
3662
- updated(changedProperties) {
3663
- super.updated(changedProperties);
3664
-
3665
- [...this.children].forEach((slot) => {
3666
- if (slot !== this.drawerBib) {
3667
- this.drawerBib.append(slot);
3668
- }
3669
- });
3670
-
3671
- [...changedProperties.entries()].forEach(([entry]) => {
3672
- if (AuroDrawer.properties[entry].carryDown) {
3673
- this.updateDrawerBibAttribute(
3674
- AuroDrawer.properties[entry].attribute || entry,
3675
- this[entry],
3676
- );
3677
- }
3678
- });
3679
-
3680
- if (changedProperties.has("isPopoverVisible")) {
3681
- this.drawerBib.visible = this.isPopoverVisible;
3682
- if (!this.isPopoverVisible) {
3683
- this.drawerBib.closing = true;
3684
- }
3685
- }
3686
-
3687
- if (changedProperties.has("triggerElement")) {
3688
- if (this.drawerBib) {
3689
- this.drawerBib.triggerElement = this.triggerElement;
3690
- }
3691
- this.setupAria();
3692
- }
3693
- }
3694
- }
3695
-
3696
- export { AuroDrawer as A, initBasicExample as i };