@aurodesignsystem-dev/auro-accordion 0.0.0-pr190.0 → 0.0.0-pr200.1

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.
Files changed (134) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/NOTICE +2 -0
  3. package/README.md +25 -59
  4. package/demo/api.html +1 -1
  5. package/demo/api.js +2 -1
  6. package/demo/api.md +13 -7
  7. package/demo/api.min.js +16 -2028
  8. package/demo/auro-accordion.min.js +727 -0
  9. package/demo/index.js +12 -14
  10. package/demo/index.min.js +13 -2024
  11. package/dist/auro-accordion-B6aPKaGa.js +113 -0
  12. package/dist/index.d.ts +121 -0
  13. package/dist/index.js +1 -0
  14. package/dist/registered.js +1 -0
  15. package/package.json +44 -134
  16. package/.husky/commit-msg +0 -1
  17. package/.husky/pre-commit +0 -1
  18. package/.vscode/settings.json +0 -8
  19. package/apiExamples/accordionGroup.html +0 -47
  20. package/apiExamples/accordionGroupLg.html +0 -47
  21. package/apiExamples/accordionGroupSm.html +0 -47
  22. package/apiExamples/alignChevronRight.html +0 -15
  23. package/apiExamples/alignRight.html +0 -15
  24. package/apiExamples/basic.html +0 -15
  25. package/apiExamples/chevronNone.html +0 -15
  26. package/apiExamples/chevronRight.html +0 -15
  27. package/apiExamples/custom.html +0 -15
  28. package/apiExamples/customGroup.html +0 -47
  29. package/apiExamples/disabled.html +0 -15
  30. package/apiExamples/disabledGroup.html +0 -47
  31. package/apiExamples/emphasis.html +0 -47
  32. package/apiExamples/expanded.html +0 -17
  33. package/apiExamples/expanded.js +0 -11
  34. package/apiExamples/noToggleExpanded.html +0 -47
  35. package/coverage/lcov-report/auro-accordion-group.js.html +0 -472
  36. package/coverage/lcov-report/auro-accordion.js.html +0 -664
  37. package/coverage/lcov-report/base.css +0 -224
  38. package/coverage/lcov-report/block-navigation.js +0 -87
  39. package/coverage/lcov-report/color-css.js.html +0 -91
  40. package/coverage/lcov-report/favicon.png +0 -0
  41. package/coverage/lcov-report/iconVersion.js.html +0 -85
  42. package/coverage/lcov-report/index.html +0 -131
  43. package/coverage/lcov-report/prettify.css +0 -1
  44. package/coverage/lcov-report/prettify.js +0 -2
  45. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  46. package/coverage/lcov-report/sorter.js +0 -196
  47. package/coverage/lcov-report/src/auro-accordion-button.js.html +0 -283
  48. package/coverage/lcov-report/src/auro-accordion-group.js.html +0 -538
  49. package/coverage/lcov-report/src/auro-accordion.js.html +0 -895
  50. package/coverage/lcov-report/src/iconVersion.js.html +0 -85
  51. package/coverage/lcov-report/src/index.html +0 -161
  52. package/coverage/lcov-report/src/styles/color-css.js.html +0 -91
  53. package/coverage/lcov-report/src/styles/index.html +0 -161
  54. package/coverage/lcov-report/src/styles/style-button-css.js.html +0 -91
  55. package/coverage/lcov-report/src/styles/style-css.js.html +0 -91
  56. package/coverage/lcov-report/src/styles/tokens-css.js.html +0 -91
  57. package/coverage/lcov-report/style-css.js.html +0 -91
  58. package/coverage/lcov-report/tokens-css.js.html +0 -91
  59. package/coverage/lcov.info +0 -682
  60. package/dist/auro-accordion-button.d.ts +0 -17
  61. package/dist/auro-accordion-button.d.ts.map +0 -1
  62. package/dist/auro-accordion-group.d.ts +0 -61
  63. package/dist/auro-accordion-group.d.ts.map +0 -1
  64. package/dist/auro-accordion.d.ts +0 -106
  65. package/dist/auro-accordion.d.ts.map +0 -1
  66. package/dist/auro-accordion__bundled.js +0 -2023
  67. package/dist/color-css.d.ts +0 -3
  68. package/dist/color-css.d.ts.map +0 -1
  69. package/dist/iconVersion.d.ts +0 -3
  70. package/dist/iconVersion.d.ts.map +0 -1
  71. package/dist/src/auro-accordion-button.d.ts +0 -19
  72. package/dist/src/auro-accordion-button.d.ts.map +0 -1
  73. package/dist/src/auro-accordion-group.d.ts +0 -61
  74. package/dist/src/auro-accordion-group.d.ts.map +0 -1
  75. package/dist/src/auro-accordion.d.ts +0 -106
  76. package/dist/src/auro-accordion.d.ts.map +0 -1
  77. package/dist/src/color-css.d.ts +0 -3
  78. package/dist/src/color-css.d.ts.map +0 -1
  79. package/dist/src/iconVersion.d.ts +0 -3
  80. package/dist/src/iconVersion.d.ts.map +0 -1
  81. package/dist/src/style-button-css.d.ts +0 -3
  82. package/dist/src/style-button-css.d.ts.map +0 -1
  83. package/dist/src/style-css.d.ts +0 -3
  84. package/dist/src/style-css.d.ts.map +0 -1
  85. package/dist/src/styles/color-css.d.ts +0 -3
  86. package/dist/src/styles/color-css.d.ts.map +0 -1
  87. package/dist/src/styles/style-button-css.d.ts +0 -3
  88. package/dist/src/styles/style-button-css.d.ts.map +0 -1
  89. package/dist/src/styles/style-css.d.ts +0 -3
  90. package/dist/src/styles/style-css.d.ts.map +0 -1
  91. package/dist/src/styles/tokens-css.d.ts +0 -3
  92. package/dist/src/styles/tokens-css.d.ts.map +0 -1
  93. package/dist/src/tokens-css.d.ts +0 -3
  94. package/dist/src/tokens-css.d.ts.map +0 -1
  95. package/dist/style-button-css.d.ts +0 -3
  96. package/dist/style-button-css.d.ts.map +0 -1
  97. package/dist/style-css.d.ts +0 -3
  98. package/dist/style-css.d.ts.map +0 -1
  99. package/dist/test/auro-accordion-group.test.d.ts +0 -2
  100. package/dist/test/auro-accordion-group.test.d.ts.map +0 -1
  101. package/dist/test/auro-accordion.test.d.ts +0 -2
  102. package/dist/test/auro-accordion.test.d.ts.map +0 -1
  103. package/dist/tokens-css.d.ts +0 -3
  104. package/dist/tokens-css.d.ts.map +0 -1
  105. package/index.js +0 -3
  106. package/packageScripts/postinstall.mjs +0 -28
  107. package/scripts/version.mjs +0 -3
  108. package/scripts/wca/auro-accordion.js +0 -12
  109. package/src/auro-accordion-button.js +0 -66
  110. package/src/auro-accordion-group.js +0 -151
  111. package/src/auro-accordion.js +0 -270
  112. package/src/color-css.js +0 -2
  113. package/src/color.css +0 -39
  114. package/src/iconVersion.js +0 -1
  115. package/src/style-button-css.js +0 -2
  116. package/src/style-button.css +0 -53
  117. package/src/style-css.js +0 -2
  118. package/src/style.css +0 -147
  119. package/src/styles/color-css.js +0 -2
  120. package/src/styles/color.css +0 -43
  121. package/src/styles/color.scss +0 -75
  122. package/src/styles/style-button-css.js +0 -2
  123. package/src/styles/style-button.css +0 -63
  124. package/src/styles/style-button.scss +0 -86
  125. package/src/styles/style-css.js +0 -2
  126. package/src/styles/style.css +0 -347
  127. package/src/styles/style.scss +0 -200
  128. package/src/styles/tokens-css.js +0 -2
  129. package/src/styles/tokens.css +0 -7
  130. package/src/styles/tokens.scss +0 -9
  131. package/src/tokens-css.js +0 -2
  132. package/src/tokens.css +0 -7
  133. package/test/auro-accordion-group.test.js +0 -230
  134. package/test/auro-accordion.test.js +0 -104
package/demo/index.min.js CHANGED
@@ -1,2034 +1,23 @@
1
- /**
2
- * @license
3
- * Copyright 2019 Google LLC
4
- * SPDX-License-Identifier: BSD-3-Clause
5
- */
6
- const t$2=globalThis,e$5=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$3=Symbol(),o$6=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=true,o!==s$3)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$5&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$6.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$6.set(s,t));}return t}toString(){return this.cssText}};const r$2=t=>new n$3("string"==typeof t?t:t+"",void 0,s$3),i$5=(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$3(o,t,s$3)},S$1=(s,o)=>{if(e$5)s.adoptedStyleSheets=o.map((t=>t instanceof CSSStyleSheet?t:t.styleSheet));else for(const e of o){const o=document.createElement("style"),n=t$2.litNonce;void 0!==n&&o.setAttribute("nonce",n),o.textContent=e.cssText,s.appendChild(o);}},c$2=e$5?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$2(e)})(t):t;
7
-
8
- /**
9
- * @license
10
- * Copyright 2017 Google LLC
11
- * SPDX-License-Identifier: BSD-3-Clause
12
- */const{is:i$4,defineProperty:e$4,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$1,getOwnPropertySymbols:o$5,getPrototypeOf:n$2}=Object,a$2=globalThis,c$1=a$2.trustedTypes,l$2=c$1?c$1.emptyScript:"",p$1=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$2={toAttribute(t,s){switch(s){case Boolean:t=t?l$2:null;break;case Object:case Array:t=null==t?t:JSON.stringify(t);}return t},fromAttribute(t,s){let i=t;switch(s){case Boolean:i=null!==t;break;case Number:i=null===t?null:Number(t);break;case Object:case Array:try{i=JSON.parse(t);}catch(t){i=null;}}return i}},f$1=(t,s)=>!i$4(t,s),b={attribute:true,type:String,converter:u$2,reflect:false,useDefault:false,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;let y$1 = class y extends HTMLElement{static addInitializer(t){this._$Ei(),(this.l??=[]).push(t);}static get observedAttributes(){return this.finalize(),this._$Eh&&[...this._$Eh.keys()]}static createProperty(t,s=b){if(s.state&&(s.attribute=false),this._$Ei(),this.prototype.hasOwnProperty(t)&&((s=Object.create(s)).wrapped=true),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),h=this.getPropertyDescriptor(t,i,s);void 0!==h&&e$4(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}static _$Ei(){if(this.hasOwnProperty(d$1("elementProperties")))return;const t=n$2(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$1(t),...o$5(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,this[e]=h.fromAttribute(s,t.type)??this._$Ej?.get(e)??null,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$1)(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$1.elementStyles=[],y$1.shadowRootOptions={mode:"open"},y$1[d$1("elementProperties")]=new Map,y$1[d$1("finalized")]=new Map,p$1?.({ReactiveElement:y$1}),(a$2.reactiveElementVersions??=[]).push("2.1.0");
13
-
14
- /**
15
- * @license
16
- * Copyright 2017 Google LLC
17
- * SPDX-License-Identifier: BSD-3-Clause
18
- */
19
- const t$1=globalThis,i$3=t$1.trustedTypes,s$2=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$3="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$4="?"+h,n$1=`<${o$4}>`,r=document,l$1=()=>r.createComment(""),c=t=>null===t||"object"!=typeof t&&"function"!=typeof t,a$1=Array.isArray,u$1=t=>a$1(t)||"function"==typeof t?.[Symbol.iterator],d="[ \t\n\f\r]",f=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,v=/-->/g,_=/>/g,m=RegExp(`>|${d}(?:([^\\s"'>=/]+)(${d}*=${d}*(?:[^ \t\n\f\r"'\`<>=]|("|')|))|$)`,"g"),p=/'/g,g=/"/g,$=/^(?:script|style|textarea|title)$/i,y=t=>(i,...s)=>({_$litType$:t,strings:i,values:s}),x=y(1),T=Symbol.for("lit-noChange"),E=Symbol.for("lit-nothing"),A=new WeakMap,C=r.createTreeWalker(r,129);function P(t,i){if(!a$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$2?s$2.createHTML(i):i}const V=(t,i)=>{const s=t.length-1,o=[];let r,l=2===i?"<svg>":3===i?"<math>":"",c=f;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?"!--"===u[1]?c=v:void 0!==u[1]?c=_:void 0!==u[2]?($.test(u[2])&&(r=RegExp("</"+u[2],"g")),c=m):void 0!==u[3]&&(c=m):c===m?">"===u[0]?(c=r??f,d=-1):void 0===u[1]?d=-2:(d=c.lastIndex-u[2].length,a=u[1],c=void 0===u[3]?m:'"'===u[3]?g:p):c===g||c===p?c=m:c===v||c===_?c=f:(c=m,r=void 0);const x=c===m&&t[i+1].startsWith("/>")?" ":"";l+=c===f?s+n$1:d>=0?(o.push(a),s.slice(0,d)+e$3+s.slice(d)+h+x):s+h+(-2===d?i:x);}return [P(t,l+(t[s]||"<?>")+(2===i?"</svg>":3===i?"</math>":"")),o]};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.currentNode=this.el.content,2===s||3===s){const t=this.el.content.firstChild;t.replaceWith(...t.childNodes);}for(;null!==(r=C.nextNode())&&d.length<u;){if(1===r.nodeType){if(r.hasAttributes())for(const t of r.getAttributeNames())if(t.endsWith(e$3)){const i=v[a++],s=r.getAttribute(t).split(h),e=/([.?@])?(.*)/.exec(i);d.push({type:1,index:c,name:e[2],strings:s,ctor:"."===e[1]?H:"?"===e[1]?I:"@"===e[1]?L:k}),r.removeAttribute(t);}else t.startsWith(h)&&(d.push({type:6,index:c}),r.removeAttribute(t));if($.test(r.tagName)){const t=r.textContent.split(h),s=t.length-1;if(s>0){r.textContent=i$3?i$3.emptyScript:"";for(let i=0;i<s;i++)r.append(t[i],l$1()),C.nextNode(),d.push({type:2,index:++c});r.append(t[s],l$1());}}}else if(8===r.nodeType)if(r.data===o$4)d.push({type:2,index:c});else {let t=-1;for(;-1!==(t=r.data.indexOf(h,t+1));)d.push({type:7,index:c}),t+=h.length-1;}c++;}}static createElement(t,i){const s=r.createElement("template");return s.innerHTML=t,s}}function S(t,i,s=t,e){if(i===T)return i;let h=void 0!==e?s._$Co?.[e]:s._$Cl;const o=c(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(t,h._$AS(t,i.values),h,e)),i}class M{constructor(t,i){this._$AV=[],this._$AN=void 0,this._$AD=t,this._$AM=i;}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}u(t){const{el:{content:i},parts:s}=this._$AD,e=(t?.creationScope??r).importNode(i,true);C.currentNode=e;let h=C.nextNode(),o=0,n=0,l=s[0];for(;void 0!==l;){if(o===l.index){let i;2===l.type?i=new R(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(h,this,t)),this._$AV.push(i),l=s[++n];}o!==l?.index&&(h=C.nextNode(),o++);}return C.currentNode=r,e}p(t){let i=0;for(const s of this._$AV) void 0!==s&&(void 0!==s.strings?(s._$AI(t,s,i),i+=s.strings.length-2):s._$AI(t[i])),i++;}}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(this,t,i),c(t)?t===E||null==t||""===t?(this._$AH!==E&&this._$AR(),this._$AH=E):t!==this._$AH&&t!==T&&this._(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):u$1(t)?this.k(t):this._(t);}O(t){return this._$AA.parentNode.insertBefore(t,this._$AB)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t));}_(t){this._$AH!==E&&c(this._$AH)?this._$AA.nextSibling.data=t:this.T(r.createTextNode(t)),this._$AH=t;}$(t){const{values:i,_$litType$:s}=t,e="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=N.createElement(P(s.h,s.h[0]),this.options)),s);if(this._$AH?._$AD===e)this._$AH.p(i);else {const t=new M(e,this),s=t.u(this.options);t.p(i),this.T(s),this._$AH=t;}}_$AC(t){let i=A.get(t.strings);return void 0===i&&A.set(t.strings,i=new N(t)),i}k(t){a$1(this._$AH)||(this._$AH=[],this._$AR());const i=this._$AH;let s,e=0;for(const h of t)e===i.length?i.push(s=new R(this.O(l$1()),this.O(l$1()),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&&t!==this._$AB;){const i=t.nextSibling;t.remove(),t=i;}}setConnected(t){ void 0===this._$AM&&(this._$Cv=t,this._$AP?.(t));}}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(this,t,i,0),o=!c(t)||t!==this._$AH&&t!==T,o&&(this._$AH=t);else {const e=t;let n,r;for(t=h[0],n=0;n<h.length-1;n++)r=S(this,e[s+n],i,n),r===T&&(r=this._$AH[n]),o||=!c(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??"");}}class H extends k{constructor(){super(...arguments),this.type=3;}j(t){this.element[this.name]=t===E?void 0:t;}}class I extends k{constructor(){super(...arguments),this.type=4;}j(t){this.element.toggleAttribute(this.name,!!t&&t!==E);}}class L extends k{constructor(t,i,s,e,h){super(t,i,s,e,h),this.type=5;}_$AI(t,i=this){if((t=S(this,t,i,0)??E)===T)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);}}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(this,t);}}const j=t$1.litHtmlPolyfillSupport;j?.(N,R),(t$1.litHtmlVersions??=[]).push("3.3.0");const B=(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(i.insertBefore(l$1(),t),t,void 0,s??{});}return h._$AI(t),h};
20
-
21
- /**
22
- * @license
23
- * Copyright 2017 Google LLC
24
- * SPDX-License-Identifier: BSD-3-Clause
25
- */const s$1=globalThis;let i$2 = class i extends y$1{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(r,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(true);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(false);}render(){return T}};i$2._$litElement$=true,i$2["finalized"]=true,s$1.litElementHydrateSupport?.({LitElement:i$2});const o$3=s$1.litElementPolyfillSupport;o$3?.({LitElement:i$2});(s$1.litElementVersions??=[]).push("4.2.0");
26
-
27
- /**
28
- * @license
29
- * Copyright 2020 Google LLC
30
- * SPDX-License-Identifier: BSD-3-Clause
31
- */
32
- const a=Symbol.for(""),o$2=t=>{if(t?.r===a)return t?._$litStatic$},s=t=>({_$litStatic$:t,r:a}),i$1=(t,...r)=>({_$litStatic$:r.reduce(((r,e,a)=>r+(t=>{if(void 0!==t._$litStatic$)return t._$litStatic$;throw Error(`Value passed to 'literal' function must be a 'literal' result: ${t}. Use 'unsafeStatic' to pass non-literal values, but\n take care to ensure page security.`)})(e)+t[a+1]),t[0]),r:a}),l=new Map,n=t=>(r,...e)=>{const a=e.length;let s,i;const n=[],u=[];let c,$=0,f=false;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$2(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.get(t))&&(n.raw=n,l.set(t,r=n)),e=u;}return t(r,...e)},u=n(x);
33
-
34
- /**
35
- * @license
36
- * Copyright 2017 Google LLC
37
- * SPDX-License-Identifier: BSD-3-Clause
38
- */
39
- const t={ATTRIBUTE:1,CHILD:2},e$2=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)}}
40
-
41
- /**
42
- * @license
43
- * Copyright 2018 Google LLC
44
- * SPDX-License-Identifier: BSD-3-Clause
45
- */const e$1=e$2(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}});
46
-
47
- /**
48
- * @license
49
- * Copyright 2017 Google LLC
50
- * SPDX-License-Identifier: BSD-3-Clause
51
- */class e extends i{constructor(i){if(super(i),this.it=E,i.type!==t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(r){if(r===E||null==r)return this._t=void 0,this.it=r;if(r===T)return r;if("string"!=typeof r)throw Error(this.constructor.directiveName+"() called with a non-string value");if(r===this.it)return this._t;this.it=r;const s=[r];return s.raw=s,this._t={_$litType$:this.constructor.resultType,strings:s,values:[]}}}e.directiveName="unsafeHTML",e.resultType=1;const o$1=e$2(e);
52
-
53
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
54
- // See LICENSE in the project root for license information.
55
-
56
- // ---------------------------------------------------------------------
57
-
58
- /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
59
-
60
- class AuroLibraryRuntimeUtils {
61
-
62
- /* eslint-disable jsdoc/require-param */
63
-
64
- /**
65
- * This will register a new custom element with the browser.
66
- * @param {String} name - The name of the custom element.
67
- * @param {Object} componentClass - The class to register as a custom element.
68
- * @returns {void}
69
- */
70
- registerComponent(name, componentClass) {
71
- if (!customElements.get(name)) {
72
- customElements.define(name, class extends componentClass {});
73
- }
74
- }
75
-
76
- /**
77
- * Finds and returns the closest HTML Element based on a selector.
78
- * @returns {void}
79
- */
80
- closestElement(
81
- selector, // selector like in .closest()
82
- base = this, // extra functionality to skip a parent
83
- __Closest = (el, found = el && el.closest(selector)) =>
84
- !el || el === document || el === window
85
- ? null // standard .closest() returns null for non-found selectors also
86
- : found
87
- ? found // found a selector INside this element
88
- : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
89
- ) {
90
- return __Closest(base);
91
- }
92
- /* eslint-enable jsdoc/require-param */
93
-
94
- /**
95
- * 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.
96
- * @param {Object} elem - The element to check.
97
- * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
98
- * @returns {void}
99
- */
100
- handleComponentTagRename(elem, tagName) {
101
- const tag = tagName.toLowerCase();
102
- const elemTag = elem.tagName.toLowerCase();
103
-
104
- if (elemTag !== tag) {
105
- elem.setAttribute(tag, true);
106
- }
107
- }
108
-
109
- /**
110
- * Validates if an element is a specific Auro component.
111
- * @param {Object} elem - The element to validate.
112
- * @param {String} tagName - The name of the Auro component to check against.
113
- * @returns {Boolean} - Returns true if the element is the specified Auro component.
114
- */
115
- elementMatch(elem, tagName) {
116
- const tag = tagName.toLowerCase();
117
- const elemTag = elem.tagName.toLowerCase();
118
-
119
- return elemTag === tag || elem.hasAttribute(tag);
120
- }
121
- }
122
-
123
- // Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
124
- // See LICENSE in the project root for license information.
125
-
126
-
127
- // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
128
- /**
129
- * Auro-accordion provides users a way to have collapsible content on a page.
130
- * Use auro-accordion-group if you want to have auto closing accordion components when others are selected.
131
- *
132
- * @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
133
- * @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
134
- * @attr {Boolean} disabled - If set, the whole accordion inside the group are disabled and have reduced opacity.
135
- * @attr {Boolean} noToggleExpanded - If set, multiple accordions can be open at the same time.
136
- */
137
-
138
- // build the component class
139
- class AuroAccordionGroup extends i$2 {
140
- constructor() {
141
- super();
142
-
143
- /**
144
- * @private
145
- */
146
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
147
- }
148
-
149
- // This function is to define props used within the scope of this component
150
- // Be sure to review https://lit.dev/docs/components/properties/
151
- // to understand how to use reflected attributes with your property settings.
152
- static get properties() {
153
- return {
154
- // ...super.properties,
155
-
156
- emphasis: {
157
- type: Boolean,
158
- reflect: true
159
- },
160
- variant: {
161
- type: String,
162
- reflect: true
163
- },
164
- disabled: {
165
- type: Boolean,
166
- reflect: true
167
- }
168
- };
169
- }
170
-
171
- /**
172
- * This will register this element with the browser.
173
- * @param {string} [name="auro-accordion-group"] - The name of element that you want to register to.
174
- *
175
- * @example
176
- * AuroAccordionGroup.register("custom-accordion-button") // this will register this element to <custom-accordion-group/>
177
- *
178
- */
179
- static register(name = "auro-accordion-group") {
180
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionGroup);
181
- }
182
-
183
- firstUpdated() {
184
- // Add the tag name as an attribute if it is different than the component name
185
- this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion-group');
186
- }
187
-
188
- updated(changedProperties) {
189
- if (changedProperties.has('disabled')) {
190
- this.updateDisabledState();
191
- }
192
- }
193
-
194
- /**
195
- * Updates the disabled state of all child <auro-accordion> elements
196
- * to match the disabled state of the <auro-accordion-group> element.
197
- */
198
- updateDisabledState() {
199
- const accordions = this.querySelectorAll('auro-accordion');
200
- accordions.forEach((accordion) => {
201
- accordion.disabled = this.disabled;
202
- });
203
- }
204
-
205
- handleSlotContentChange() {
206
- this.addEventListener('toggleExpanded', this.handleToggleExpanded);
207
-
208
- this.handleItems();
209
-
210
- this.items.forEach((item) => {
211
- if (this.hasAttribute('emphasis')) {
212
- item.setAttribute('chevron', 'right');
213
- item.emphasis = true;
214
- }
215
-
216
- if (this.hasAttribute('variant') && this.getAttribute('variant') === 'sm') {
217
- item.setAttribute('variant', 'sm');
218
- }
219
-
220
- if (this.hasAttribute('variant') && this.getAttribute('variant') === 'lg') {
221
- item.setAttribute('variant', 'lg');
222
- }
223
-
224
- item.grouped = true;
225
- });
226
- }
227
-
228
- /**
229
- * Internal function to toggle any expanded panels if it is not the one selected.
230
- * @private
231
- * @param {object} event - Standard event parameter.
232
- */
233
- handleToggleExpanded(event) {
234
- if (!this.hasAttribute('noToggleExpanded')) {
235
- this.items.forEach((item) => {
236
- if (item !== event.target && item.expanded) {
237
- item.expanded = false;
238
- }
239
- });
240
-
241
- this.scrollIntoView({
242
- behavior: "smooth",
243
- block: "nearest",
244
- });
245
- }
246
- }
247
-
248
- /**
249
- * Internal function to add all accordions into an array.
250
- * @private
251
- */
252
- handleItems() {
253
- const groupTagName = this.tagName.toLowerCase();
254
- const accordionTagName = groupTagName.substring(0, groupTagName.indexOf('-group'));
255
-
256
- this.items = Array.from(this.querySelectorAll(accordionTagName));
257
- }
258
-
259
- // function that renders the HTML and CSS into the scope of the component
260
- render() {
261
- return x`
262
- <div>
263
- <slot @slotchange="${this.handleSlotContentChange}"></slot>
264
- </div>
265
- `;
266
- }
267
- }
268
-
269
- var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset;cursor:pointer;overflow:visible}:host .auro-button{all:unset;width:100%;padding:var(--ds-size-200, 1rem) var(--trigger-padding-right, 0) var(--ds-size-200, 1rem) var(--trigger-padding-left, 0);box-sizing:border-box}:host .auro-button:focus,:host .auro-button:focus-visible,:host .auro-button:focus-within{outline:0}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse;margin-left:0 !important;margin-right:0 !important}:host .textSlot{display:flex;flex:1;gap:0;align-items:center}:host([disabled]){cursor:not-allowed;text-decoration:none !important}:host([disabled]) .auro-button{pointer-events:none}:host(.sm) .auro-button{padding-top:var(--ds-size-150, 0.75rem);padding-bottom:var(--ds-size-150, 0.75rem)}:host(.lg) .auro-button{padding-top:var(--ds-size-250, 1.25rem);padding-bottom:var(--ds-size-250, 1.25rem)}:host([fluid]) .textSlot{width:100%}:host(.iconRight) .textSlot{display:flex;flex-direction:row;justify-content:space-between}`;
270
-
271
- var styleCssAuroButton = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_insetNone{padding:0}.util_insetXxxs{padding:.125rem}.util_insetXxxs--stretch{padding:.25rem .125rem}.util_insetXxxs--squish{padding:0 .125rem}.util_insetXxs{padding:.25rem}.util_insetXxs--stretch{padding:.375rem .25rem}.util_insetXxs--squish{padding:.125rem .25rem}.util_insetXs{padding:.5rem}.util_insetXs--stretch{padding:.75rem .5rem}.util_insetXs--squish{padding:.25rem .5rem}.util_insetSm{padding:.75rem}.util_insetSm--stretch{padding:1.125rem .75rem}.util_insetSm--squish{padding:.375rem .75rem}.util_insetMd{padding:1rem}.util_insetMd--stretch{padding:1.5rem 1rem}.util_insetMd--squish{padding:.5rem 1rem}.util_insetLg{padding:1.5rem}.util_insetLg--stretch{padding:2.25rem 1.5rem}.util_insetLg--squish{padding:.75rem 1.5rem}.util_insetXl{padding:2rem}.util_insetXl--stretch{padding:3rem 2rem}.util_insetXl--squish{padding:1rem 2rem}.util_insetXxl{padding:3rem}.util_insetXxl--stretch{padding:4.5rem 3rem}.util_insetXxl--squish{padding:1.5rem 3rem}.util_insetXxxl{padding:4rem}.util_insetXxxl--stretch{padding:6rem 4rem}.util_insetXxxl--squish{padding:2rem 4rem}.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.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, 0.5rem);margin:0;-webkit-touch-callout:none;-webkit-user-select:none;transition:padding 300ms ease-out}.auro-button:focus,.auro-button:focus-visible{outline:none}.auro-button:active{transform:scale(0.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}`;
272
-
273
- /**
274
- * Private module-level WeakMap to hold MutationObservers for each host element.
275
- */
276
- const _observers = new WeakMap();
277
-
278
- /**
279
- * Private module-level WeakMap to hold attribute matchers and targets for each host element.
280
- * Structure: {
281
- * host: {
282
- * matchers: Set<Function>,
283
- * targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
284
- * }
285
- * }
286
- */
287
- const _transportConfig = new WeakMap();
288
-
289
- /**
290
- * Transfers all matching attributes from a host element to a target element and observes for future changes.
291
- *
292
- * @param {Object} params - The parameters for the function.
293
- * @param {HTMLElement} params.host - The host element from which attributes will be transported.
294
- * @param {HTMLElement} params.target - The target element to which attributes will be transported.
295
- * @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
296
- * @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
297
- * @returns {Function} A function to detach the observer when no longer needed.
298
- * @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
299
- */
300
- const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
301
- // Guard Clause: Ensure host is valid HTMLElement instance
302
- if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
303
- throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
304
- }
305
-
306
- // Guard Clause: Ensure target is valid HTMLElement instance
307
- if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
308
- throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
309
- }
310
-
311
- // Guard Clause: Ensure match is a function
312
- if (typeof match !== 'function') {
313
- throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
314
- }
315
-
316
- // Guard Clause: Ensure removeOriginal is a boolean
317
- if (typeof removeOriginal !== 'boolean') {
318
- throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
319
- }
320
-
321
- // Register this transport and get cleanup function
322
- return _registerTransport({
323
- host,
324
- target,
325
- matcher: match,
326
- removeOriginal
327
- });
328
- };
329
-
330
- /**
331
- * Registers a matcher and target for a host element and attaches an observer if needed.
332
- *
333
- * @param {Object} params - The parameters object.
334
- * @param {HTMLElement} params.host - The host element to observe.
335
- * @param {HTMLElement} params.target - The target element to receive attributes.
336
- * @param {Function} params.matcher - Function that determines which attributes to transport.
337
- * @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
338
- * @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
339
- * @returns {Function} Function to detach the specific matcher and target pairing.
340
- * @private
341
- */
342
- const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
343
- // Initialize config for this host if it doesn't exist
344
- if (!_transportConfig.has(host)) {
345
- _transportConfig.set(host, {
346
- matchers: new Set(),
347
- targets: new Map()
348
- });
349
- }
350
-
351
- const config = _transportConfig.get(host);
352
-
353
- // Add the matcher to the set of matchers for this host
354
- config.matchers.add(matcher);
355
-
356
- // Initialize target entry if it doesn't exist
357
- if (!config.targets.has(target)) {
358
- config.targets.set(target, new Map());
359
- }
360
-
361
- // Store the matcher with its removeOriginal setting for this target
362
- config.targets.get(target).set(matcher, {
363
- removeOriginal,
364
- currentAttributes: new Map()
365
- });
366
-
367
- // Perform initial attribute transport
368
- _transportAttributes({ host, target, matcher, removeOriginal });
369
-
370
- // Attach observer
371
- _attachObserver(host);
372
-
373
- // Return cleanup function and utility functions
374
- return {
375
- cleanup: () => _cleanupTransport(host, target, matcher),
376
- getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
377
- getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
378
- }
379
- };
380
-
381
- /**
382
- * Cleans up resources associated with a specific matcher and target for a host element.
383
- *
384
- * @param {HTMLElement} host - The host element
385
- * @param {HTMLElement} target - The target element
386
- * @param {Function} matcher - The matcher function
387
- * @private
388
- */
389
- const _cleanupTransport = (host, target, matcher) => {
390
- const config = _transportConfig.get(host);
391
- if (!config) return;
392
-
393
- // Remove this matcher from this target
394
- const targetMatchers = config.targets.get(target);
395
- if (targetMatchers) {
396
- targetMatchers.delete(matcher);
397
-
398
- // If this target has no more matchers, remove it
399
- if (targetMatchers.size === 0) {
400
- config.targets.delete(target);
401
- }
402
- }
403
-
404
- // Check if this matcher is still used by any target
405
- let matcherStillUsed = false;
406
- for (const matcherMap of config.targets.values()) {
407
- if (matcherMap.has(matcher)) {
408
- matcherStillUsed = true;
409
- break;
410
- }
411
- }
412
-
413
- // If not used anymore, remove from matchers set
414
- if (!matcherStillUsed) {
415
- config.matchers.delete(matcher);
416
- }
417
-
418
- // If no more targets or matchers, detach observer
419
- if (config.targets.size === 0 || config.matchers.size === 0) {
420
- _detachObserver(host);
421
- }
422
- };
423
-
424
- /**
425
- * Generic function to transport attributes from a host element to a target element.
426
- *
427
- * @param {Object} params - The parameters object.
428
- * @param {HTMLElement} params.host - The host element from which to transport attributes.
429
- * @param {HTMLElement} params.target - The target element to which attributes will be transported.
430
- * @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
431
- * @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
432
- * @returns {void}
433
- * @private
434
- */
435
- const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
436
- // Get a list of all matching attributes on the host element and their values
437
- const matchingAttributes = host.getAttributeNames()
438
- .filter(attr => matcher(attr))
439
- .reduce((acc, attr) => {
440
- acc[attr] = host.getAttribute(attr);
441
- return acc;
442
- }, {});
443
-
444
- // Move matching attributes to the target element, removing them from the host if removeOriginal is true
445
- Object.entries(matchingAttributes).forEach(([key, value]) => {
446
- _setObservedAttribute(host, target, matcher, key, value);
447
- target.setAttribute(key, value);
448
- if (removeOriginal) {
449
- host.removeAttribute(key);
450
- }
451
- });
452
- };
453
-
454
- /**
455
- * Attaches a MutationObserver to the host element to monitor attribute changes.
456
- *
457
- * @param {HTMLElement} host - The element to observe for attribute changes.
458
- * @returns {MutationObserver} The observer instance.
459
- * @private
460
- */
461
- const _attachObserver = (host) => {
462
- // If an observer for this host already exists, return it
463
- if (_observers.has(host)) {
464
- return _observers.get(host);
465
- }
466
-
467
- // Create a new MutationObserver
468
- const observer = new MutationObserver((mutations) => {
469
- const config = _transportConfig.get(host);
470
- if (!config) return;
471
-
472
- // For each mutation affecting attributes
473
- mutations
474
- .filter(mutation => mutation.type === 'attributes')
475
- .forEach(mutation => {
476
- const attributeName = mutation.attributeName;
477
-
478
- // Find matchers that care about this attribute
479
- for (const matcher of config.matchers) {
480
- if (matcher(attributeName)) {
481
- // For each target that uses this matcher
482
- for (const [target, matcherConfigs] of config.targets.entries()) {
483
- if (matcherConfigs.has(matcher)) {
484
- const { removeOriginal } = matcherConfigs.get(matcher);
485
- _transportAttributes({
486
- host,
487
- target,
488
- matcher,
489
- removeOriginal
490
- });
491
- }
492
- }
493
- }
494
- }
495
- });
496
- });
497
-
498
- // Start observing attribute changes
499
- observer.observe(host, { attributes: true });
500
-
501
- // Store the observer
502
- _observers.set(host, observer);
503
-
504
- return observer;
505
- };
506
-
507
- /**
508
- * Detaches and cleans up the MutationObserver for a given host element.
509
- *
510
- * @param {HTMLElement} host - The element whose observer should be detached.
511
- * @private
512
- */
513
- const _detachObserver = (host) => {
514
- if (_observers.has(host)) {
515
- const observer = _observers.get(host);
516
- observer.disconnect();
517
- _observers.delete(host);
518
- }
519
-
520
- // Clean up the transport config as well
521
- if (_transportConfig.has(host)) {
522
- _transportConfig.delete(host);
523
- }
524
- };
525
-
526
- /**
527
- * Gets the matcher configuration for a specific host, target, and matcher
528
- * @param {HTMLElement} host - The host element
529
- * @param {HTMLElement} target - The target element
530
- * @param {Function} matcher - The matcher function
531
- * @returns {Object|undefined} The matcher configuration if found
532
- * @private
533
- */
534
- const _getMatcherConfig = (host, target, matcher) => {
535
- const config = _transportConfig.get(host);
536
- if (!config) return undefined;
537
-
538
- const targetMatchers = config.targets.get(target);
539
- if (!targetMatchers) return undefined;
540
-
541
- return targetMatchers.get(matcher);
542
- };
543
-
544
- /**
545
- * Sets an observed attribute value
546
- * @param {HTMLElement} host - The host element
547
- * @param {HTMLElement} target - The target element
548
- * @param {Function} matcher - The matcher function
549
- * @param {string} key - The attribute name
550
- * @param {string} value - The attribute value
551
- * @private
552
- */
553
- const _setObservedAttribute = (host, target, matcher, key, value) => {
554
- const matcherConfig = _getMatcherConfig(host, target, matcher);
555
- if (matcherConfig) {
556
- matcherConfig.currentAttributes.set(key, value);
557
- }
558
- };
559
-
560
- const _getObservedAttribute = (host, target, matcher, attr) => {
561
- const matcherConfig = _getMatcherConfig(host, target, matcher);
562
- if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
563
- return undefined;
564
- };
565
-
566
- const _getObservedAttributes = (host, target, matcher) => {
567
- const matcherConfig = _getMatcherConfig(host, target, matcher);
568
- if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
569
- return [];
570
- };
571
-
572
- const _matchers = {
573
- 'aria-': attr => attr.startsWith('aria-'),
574
- 'role': attr => attr.match(/^role$/)
575
- };
576
-
577
- const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
578
- return transportAttributes({
579
- host,
580
- target,
581
- match: attr => {
582
- for (const key in _matchers) {
583
- if (_matchers[key](attr)) return true;
584
- }
585
- return false;
586
- },
587
- removeOriginal
588
- });
589
- };
590
-
591
- let AuroElement$1 = class AuroElement extends i$2 {
592
-
593
- /**
594
- * @type {Object} return object from transportAttributes via a11yUtilities
595
- * @property {Function} cleanup - Function to clean up the attribute watcher.
596
- * @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
597
- * @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
598
- * @private
599
- */
600
- attributeWatcher;
601
-
602
- static get properties() {
603
- return {
604
-
605
- /**
606
- * Defines the layout of an element.
607
- * @default {'default'}
608
- */
609
- layout: {
610
- type: String,
611
- attribute: "layout",
612
- reflect: true
613
- },
614
-
615
- /**
616
- * Defines the shape of an element.
617
- * @property {'default', 'rounded', 'pill', 'circle'}
618
- * @default {'default'}
619
- */
620
- shape: {
621
- type: String,
622
- attribute: "shape",
623
- reflect: true
624
- },
625
-
626
- /**
627
- * Defines the size of an element.
628
- * @property {'xs', 'sm', 'md', 'lg', 'xl'}
629
- * @default {'md'}
630
- */
631
- size: {
632
- type: String,
633
- attribute: "size",
634
- reflect: true
635
- },
636
-
637
- /**
638
- * This Boolean attribute lets you specify that the element should be rendered in dark mode.
639
- * @default {false}
640
- */
641
- onDark: {
642
- type: Boolean,
643
- attribute: "ondark",
644
- reflect: true
645
- },
646
-
647
- /**
648
- * A reference to the wrapper element in the shadow DOM.
649
- * This is used to apply layout and shape classes dynamically.
650
- * @type {HTMLElement|null}
651
- * @default {null}
652
- * @private
653
- */
654
- wrapper: {
655
- attribute: false,
656
- reflect: false
657
- }
658
- };
659
- }
660
-
661
-
662
-
663
- resetShapeClasses() {
664
- if (this.shape && this.size) {
665
-
666
- if (this.wrapper) {
667
- this.wrapper.classList.forEach((className) => {
668
- if (className.startsWith('shape-')) {
669
- this.wrapper.classList.remove(className);
670
- }
671
- });
672
-
673
- this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
674
- }
675
- }
676
- }
677
-
678
- resetLayoutClasses() {
679
- if (this.layout) {
680
- if (this.wrapper) {
681
- this.wrapper.classList.forEach((className) => {
682
- if (className.startsWith('layout-')) {
683
- this.wrapper.classList.remove(className);
684
- }
685
- });
686
-
687
- this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
688
- }
689
- }
690
- }
691
-
692
- updateComponentArchitecture() {
693
- this.resetLayoutClasses();
694
- this.resetShapeClasses();
695
- }
696
-
697
- updated(changedProperties) {
698
- if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
699
- this.updateComponentArchitecture();
700
- }
701
- }
702
-
703
- firstUpdated() {
704
- super.firstUpdated();
705
-
706
- // Set a reference to the wrapper element in the shadow DOM
707
- this.wrapper = this.shadowRoot.querySelector('.wrapper');
708
-
709
- // Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
710
- this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
711
- }
712
-
713
- disconnectedCallback() {
714
- super.disconnectedCallback();
715
-
716
- // Cleanup the ARIA observer if it exists
717
- if (this.attributeWatcher) {
718
- this.attributeWatcher.cleanup();
719
- this.attributeWatcher = null;
720
- }
721
- }
722
-
723
- // Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
724
- // This will catch if an invalid layout value is passed in and render the default layout if so.
725
- render() {
726
- try {
727
- return this.renderLayout();
728
- } catch (error) {
729
- // failed to get the defined layout
730
- console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
731
-
732
- // fallback to the default layout
733
- return this.getLayout('default');
734
- }
735
- }
736
- };
737
-
738
- /**
739
- * @license
740
- * Copyright 2018 Google LLC
741
- * SPDX-License-Identifier: BSD-3-Clause
742
- */const o=o=>o??E;
743
-
744
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
745
- // See LICENSE in the project root for license information.
746
-
747
-
748
- class AuroDependencyVersioning {
749
-
750
- /**
751
- * Generates a unique string to be used for child auro element naming.
752
- * @private
753
- * @param {string} baseName - Defines the first part of the unique element name.
754
- * @param {string} version - Version of the component that will be appended to the baseName.
755
- * @returns {string} - Unique string to be used for naming.
756
- */
757
- generateElementName(baseName, version) {
758
- let result = baseName;
759
-
760
- result += '-';
761
- result += version.replace(/[.]/g, '_');
762
-
763
- return result;
764
- }
765
-
766
- /**
767
- * Generates a unique string to be used for child auro element naming.
768
- * @param {string} baseName - Defines the first part of the unique element name.
769
- * @param {string} version - Version of the component that will be appended to the baseName.
770
- * @returns {string} - Unique string to be used for naming.
771
- */
772
- generateTag(baseName, version, tagClass) {
773
- const elementName = this.generateElementName(baseName, version);
774
- const tag = i$1`${s(elementName)}`;
775
-
776
- if (!customElements.get(elementName)) {
777
- customElements.define(elementName, class extends tagClass {});
778
- }
779
-
780
- return tag;
781
- }
782
- }
783
-
784
- var colorCss$3 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color, #ffffff)}.auro-button{-webkit-tap-highlight-color:var(--ds-auro-button-tap-color);color:var(--ds-auro-button-text-color);background-color:var(--ds-auro-button-container-color);background-image:linear-gradient(var(--ds-auro-button-container-image), var(--ds-auro-button-container-image));border-color:var(--ds-auro-button-border-color)}.auro-button:not([variant=secondary]):not([variant=tertiary]):focus-visible{outline-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--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)}.auro-button:not([ondark]):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)}.auro-button:not([ondark])[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)}.auro-button:not([ondark])[variant=secondary]:active:not(:disabled),.auro-button:not([ondark])[variant=secondary]:hover:not(:disabled){--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)}.auro-button:not([ondark])[variant=secondary]:focus,.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button:not([ondark])[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)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background, rgba(0, 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)}.auro-button:not([ondark])[variant=tertiary]:active:not(:disabled),.auro-button:not([ondark])[variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-hover, rgba(0, 0, 0, 0.1));--ds-auro-button-border-color: transparent}.auro-button:not([ondark])[variant=tertiary]:focus,.auro-button:not([ondark])[variant=tertiary]:focus-visible{--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)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[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)}.auro-button:not([ondark])[variant=ghost]:active:not(:disabled),.auro-button:not([ondark])[variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-hover, rgba(0, 0, 0, 0.05));--ds-auro-button-border-color: transparent}.auro-button:not([ondark])[variant=ghost]:focus,.auro-button:not([ondark])[variant=ghost]:focus-visible{border-color:transparent;--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)}.auro-button:not([ondark])[variant=ghost]:disabled{--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-advanced-color-button-flat-text, #676767);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-hover, #525252);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-disabled, #d0d0d0);background-color:transparent;background-image:none;border-color:transparent}.auro-button:not([ondark])[variant=flat]:focus,.auro-button:not([ondark])[variant=flat]:focus-visible{--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)}.auro-button[ondark]{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-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-text-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a);--ds-auro-button-loader-color: var(--ds-advanced-color-button-primary-text-inverse, #01426a)}.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--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)}.auro-button[ondark]:focus,.auro-button[ondark]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused, #01426a)}.auro-button[ondark]:disabled{--ds-auro-button-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-color: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-container-image: var(--ds-advanced-color-button-primary-background-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][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)}.auro-button[ondark][variant=secondary]:active:not(:disabled),.auro-button[ondark][variant=secondary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-secondary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=secondary]:focus,.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][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)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse, rgba(255, 255, 255, 0.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)}.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1));--ds-auro-button-container-image: var(--ds-advanced-color-button-tertiary-background-inverse-hover, rgba(255, 255, 255, 0.1))}.auro-button[ondark][variant=tertiary]:focus,.auro-button[ondark][variant=tertiary]:focus-visible{--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)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][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)}.auro-button[ondark][variant=ghost]:active:not(:disabled),.auro-button[ondark][variant=ghost]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-container-image: var(--ds-advanced-color-button-ghost-background-inverse-hover, rgba(255, 255, 255, 0.05));--ds-auro-button-border-color: transparent}.auro-button[ondark][variant=ghost]:focus,.auro-button[ondark][variant=ghost]:focus-visible{border-color:transparent;--ds-auro-button-border-inset-color: var(--ds-advanced-color-state-focused-inverse, #ffffff)}.auro-button[ondark][variant=ghost]:disabled{--ds-auro-button-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}.auro-button[ondark][variant=flat]{color:var(--ds-advanced-color-button-flat-text-inverse, #ffffff);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-advanced-color-button-flat-text-inverse-hover, #adadad);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-advanced-color-button-flat-text-inverse-disabled, #7e8894);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark][variant=flat]:focus,.auro-button[ondark][variant=flat]:focus-visible{--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)}`;
785
-
786
- var tokensCss$3 = i$5`:host(:not([onDark])){--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);--ds-auro-button-tap-color: transparent}:host([onDark]){--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);--ds-auro-button-tap-color: transparent}`;
787
-
788
- var shapeSize = i$5`.shape-rounded-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-rounded-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-rounded-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px}.shape-pill-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-left-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:36px 0 0 36px}.shape-pill-left-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-left-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-left-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-pill-right-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:0 36px 36px 0}.shape-pill-right-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-pill-right-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-pill-right-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-circle-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:50%;min-width:72px;max-width:72px;padding:0}.shape-circle-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-circle-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-circle-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-square-xl{min-height:68px;max-height:68px;border-style:solid;overflow:hidden;border-radius:6px;min-width:72px;max-width:72px;padding:0}.shape-square-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-square-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-square-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-rounded-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-rounded-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-rounded-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px}.shape-pill-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-left-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:28px 0 0 28px}.shape-pill-left-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-left-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-left-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-pill-right-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:0 28px 28px 0}.shape-pill-right-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-pill-right-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-pill-right-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-circle-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:50%;min-width:56px;max-width:56px;padding:0}.shape-circle-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-circle-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-circle-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-square-lg{min-height:52px;max-height:52px;border-style:solid;overflow:hidden;border-radius:6px;min-width:56px;max-width:56px;padding:0}.shape-square-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-square-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-square-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-rounded-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-rounded-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-rounded-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px}.shape-pill-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-left-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:24px 0 0 24px}.shape-pill-left-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-left-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-left-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-pill-right-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:0 24px 24px 0}.shape-pill-right-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-pill-right-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-pill-right-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-circle-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:50%;min-width:48px;max-width:48px;padding:0}.shape-circle-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-circle-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-circle-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-square-md{min-height:44px;max-height:44px;border-style:solid;overflow:hidden;border-radius:6px;min-width:48px;max-width:48px;padding:0}.shape-square-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-square-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-square-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-rounded-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px}.shape-rounded-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-rounded-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-rounded-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px}.shape-pill-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-left-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:18px 0 0 18px}.shape-pill-left-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-left-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-left-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-pill-right-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:0 18px 18px 0}.shape-pill-right-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-pill-right-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-pill-right-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-circle-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:50%;min-width:36px;max-width:36px;padding:0}.shape-circle-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-circle-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-circle-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-square-sm{min-height:32px;max-height:32px;border-style:solid;overflow:hidden;border-radius:6px;min-width:36px;max-width:36px;padding:0}.shape-square-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-square-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-square-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-rounded-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:4px}.shape-rounded-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-rounded-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-rounded-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px}.shape-pill-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-left-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:12px 0 0 12px}.shape-pill-left-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-left-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-left-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-pill-right-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:0 12px 12px 0}.shape-pill-right-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-pill-right-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-pill-right-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-circle-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:50%;min-width:24px;max-width:24px;padding:0}.shape-circle-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-circle-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-circle-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-square-xs{min-height:20px;max-height:20px;border-style:solid;overflow:hidden;border-radius:6px;min-width:24px;max-width:24px;padding:0}.shape-square-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-square-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-square-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}`;
789
-
790
- var styleCss$2 = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}: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:0.375rem;--margin-xs:0.2rem;--margin-sm:0.5rem;--margin-md:0.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:-400ms}:host([pulse])>span:nth-child(2){animation-delay:-200ms}:host([pulse])>span:nth-child(3){animation-delay:0ms}@keyframes pulse{0%,100%{opacity:.1;transform:scale(0.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(0deg)}100%{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{100%{transform:rotate(360deg)}}@keyframes ringworm{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:89,200;stroke-dashoffset:-35px}100%{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%}100%{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}}`;
791
-
792
- var colorCss$2 = i$5`:host{color:var(--ds-auro-loader-color)}:host>span{background-color:var(--ds-auro-loader-background-color);border-color:var(--ds-auro-loader-border-color)}:host([onlight]){--ds-auro-loader-color:var(--ds-basic-color-brand-primary, #01426a)}:host([ondark]){--ds-auro-loader-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([orbit])>span{--ds-auro-loader-background-color:transparent}:host([orbit])>span:nth-child(1){--ds-auro-loader-border-color:currentcolor;opacity:.25}:host([orbit])>span:nth-child(2){--ds-auro-loader-border-color:currentcolor;border-right-color:transparent;border-bottom-color:transparent;border-left-color:transparent}`;
793
-
794
- var tokensCss$2 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
795
-
796
- // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
797
- // See LICENSE in the project root for license information.
798
-
799
-
800
- class AuroLoader extends i$2 {
801
- constructor() {
802
- super();
803
-
804
- /**
805
- * @private
806
- */
807
- this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
808
-
809
- /**
810
- * @private
811
- */
812
- this.mdCount = 3;
813
-
814
- /**
815
- * @private
816
- */
817
- this.smCount = 2;
818
-
819
- /**
820
- * @private
821
- */
822
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
823
-
824
- this.orbit = false;
825
- this.ringworm = false;
826
- this.laser = false;
827
- this.pulse = false;
828
- }
829
-
830
- // function to define props used within the scope of this component
831
- static get properties() {
832
- return {
833
-
834
- /**
835
- * Sets loader to laser type.
836
- */
837
- laser: {
838
- type: Boolean,
839
- reflect: true
840
- },
841
-
842
- /**
843
- * Sets loader to orbit type.
844
- */
845
- orbit: {
846
- type: Boolean,
847
- reflect: true
848
- },
849
-
850
- /**
851
- * Sets loader to pulse type.
852
- */
853
- pulse: {
854
- type: Boolean,
855
- reflect: true
856
- },
857
-
858
- /**
859
- * Sets loader to ringworm type.
860
- */
861
- ringworm: {
862
- type: Boolean,
863
- reflect: true
864
- }
865
- };
866
- }
867
-
868
- static get styles() {
869
- return [
870
- i$5`${styleCss$2}`,
871
- i$5`${colorCss$2}`,
872
- i$5`${tokensCss$2}`
873
- ];
874
- }
875
-
876
- /**
877
- * This will register this element with the browser.
878
- * @param {string} [name="auro-loader"] - The name of element that you want to register to.
879
- *
880
- * @example
881
- * AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
882
- *
883
- */
884
- static register(name = "auro-loader") {
885
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
886
- }
887
-
888
- firstUpdated() {
889
- // Add the tag name as an attribute if it is different than the component name
890
- this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
891
- }
892
-
893
- connectedCallback() {
894
- super.connectedCallback();
895
- }
896
-
897
- /**
898
- * @private
899
- * @returns {Array} Numbered array for template map.
900
- */
901
- defineTemplate() {
902
- let nodes = Array.from(Array(this.mdCount).keys());
903
-
904
- if (this.orbit || this.laser) {
905
- nodes = Array.from(Array(this.smCount).keys());
906
- } else if (this.ringworm) {
907
- nodes = Array.from(Array(0).keys());
908
- }
909
-
910
- return nodes;
911
- }
912
-
913
- // When using auroElement, use the following attribute and function when hiding content from screen readers.
914
- // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
915
-
916
- // function that renders the HTML and CSS into the scope of the component
917
- render() {
918
- return x`
919
- ${this.defineTemplate().map((idx) => x`
920
- <span part="element" class="loader node-${idx}"></span>
921
- `)}
922
-
923
- <div class="no-animation body-default">Loading...</div>
924
-
925
- ${this.ringworm ? x`
926
- <svg part="element" class="circular" viewBox="25 25 50 50">
927
- <circle class="path" cx="50" cy="50" r="20" fill="none"/>
928
- </svg>`
929
- : ``
930
- }
931
- `;
932
- }
933
- }
934
-
935
- var loaderVersion = '5.1.2';
936
-
937
- // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
938
- // See LICENSE in the project root for license information.
939
-
940
-
941
- /**
942
- * @slot - Default slot for the text of the button.
943
- * @csspart button - Apply CSS to HTML5 button.
944
- * @csspart loader - Apply CSS to auro-loader.
945
- * @csspart text - Apply CSS to text slot.
946
- * @csspart icon - Apply CSS to icon slot.
947
- */
948
-
949
- const ICON_ONLY_SHAPES = ['circle', 'square'];
950
-
951
- /**
952
- * AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
953
- * It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
954
- * @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
955
- * @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
956
- * @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
957
- * @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
958
- * @property {boolean} onDark - Indicates if the button is rendered in dark mode.
959
- */
960
- class AuroButton extends AuroElement$1 {
961
-
962
- /**
963
- * Enables form association for this element.
964
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
965
- * @returns {boolean} - Returns true to enable form association.
966
- */
967
- static get formAssociated() {
968
- return true;
969
- }
970
-
971
- constructor() {
972
- super();
973
- this.autofocus = false;
974
- this.disabled = false;
975
- this.loading = false;
976
- this.static = false;
977
- this.size = "md";
978
- this.shape = "rounded";
979
- this.onDark = false;
980
- this.fluid = false;
981
- this.loadingText = this.loadingText || 'Loading...';
982
- this.variant = 'primary';
983
-
984
- /**
985
- * @private
986
- */
987
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
988
-
989
- // Support for HTML5 forms
990
- if (typeof this.attachInternals === 'function') {
991
- this.internals = this.attachInternals();
992
- } else {
993
- this.internals = null;
994
-
995
- // eslint-disable-next-line no-console
996
- 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.');
997
- }
998
-
999
- /**
1000
- * Generate unique names for dependency components.
1001
- */
1002
- const versioning = new AuroDependencyVersioning();
1003
-
1004
- /**
1005
- * @private
1006
- */
1007
- this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
1008
-
1009
- /**
1010
- * @private
1011
- */
1012
- this.buttonHref = undefined;
1013
-
1014
- /**
1015
- * @private
1016
- */
1017
- this.buttonTarget = undefined;
1018
-
1019
- /**
1020
- * @private
1021
- */
1022
- this.buttonRel = undefined;
1023
- }
1024
-
1025
- static get styles() {
1026
- return [
1027
- tokensCss$3,
1028
- styleCssAuroButton,
1029
- colorCss$3,
1030
- shapeSize
1031
- ];
1032
- }
1033
-
1034
- static get properties() {
1035
- return {
1036
-
1037
- ...super.properties,
1038
-
1039
- /**
1040
- * Override layout since it isn't used in this component.
1041
- * @private
1042
- */
1043
- layout: {
1044
- type: Boolean,
1045
- attribute: false,
1046
- reflect: false
1047
- },
1048
-
1049
- /**
1050
- * This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
1051
- */
1052
- autofocus: {
1053
- type: Boolean,
1054
- reflect: true
1055
- },
1056
-
1057
- /**
1058
- * If set to true, button will become disabled and not allow for interactions.
1059
- */
1060
- disabled: {
1061
- type: Boolean,
1062
- reflect: true
1063
- },
1064
-
1065
- /**
1066
- * Alters the shape of the button to be full width of its parent container.
1067
- */
1068
- fluid: {
1069
- type: Boolean,
1070
- reflect: true
1071
- },
1072
-
1073
- /**
1074
- * If set to true button text will be replaced with `auro-loader` and become disabled.
1075
- */
1076
- loading: {
1077
- type: Boolean,
1078
- reflect: true
1079
- },
1080
-
1081
- /**
1082
- * Sets custom loading text for the `aria-label` on a button in loading state. If not set, the default value of "Loading..." will be used.
1083
- */
1084
- loadingText: {
1085
- type: String
1086
- },
1087
-
1088
- /**
1089
- * Populates `tabindex` to define the focusable sequence in keyboard navigation.
1090
- */
1091
- tIndex: {
1092
- type: String,
1093
- reflect: true
1094
- },
1095
-
1096
- /**
1097
- * Populates `tabindex` to define the focusable sequence in keyboard navigation.
1098
- * Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
1099
- * Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
1100
- */
1101
- tabindex: {
1102
- type: String,
1103
- reflect: false
1104
- },
1105
-
1106
- /**
1107
- * Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
1108
- */
1109
- title: {
1110
- type: String,
1111
- reflect: true
1112
- },
1113
-
1114
- /**
1115
- * The type of the button. Possible values are: `submit`, `reset`, `button`.
1116
- */
1117
- type: {
1118
- type: String,
1119
- reflect: true
1120
- },
1121
-
1122
- /**
1123
- * Defines the value associated with the button which is submitted with the form data.
1124
- */
1125
- value: {
1126
- type: String,
1127
- reflect: true
1128
- },
1129
-
1130
- /**
1131
- * Sets button variant option.
1132
- * @default primary
1133
- */
1134
- variant: {
1135
- type: String,
1136
- reflect: true
1137
- },
1138
-
1139
- /**
1140
- * @private
1141
- */
1142
- buttonHref: {
1143
- type: String,
1144
- },
1145
-
1146
- /**
1147
- * @private
1148
- */
1149
- buttonTarget: {
1150
- type: String,
1151
- },
1152
-
1153
- /**
1154
- * @private
1155
- */
1156
- buttonRel: {
1157
- type: String,
1158
- },
1159
-
1160
- /**
1161
- * If true, the button will be static and not respond to user interactions.
1162
- */
1163
- static: {
1164
- type: Boolean,
1165
- reflect: true
1166
- }
1167
- };
1168
- }
1169
-
1170
- /**
1171
- * This will register this element with the browser.
1172
- * @param {string} [name="auro-button"] - The name of element that you want to register to.
1173
- *
1174
- * @example
1175
- * AuroButton.register("custom-button") // this will register this element to <custom-button/>
1176
- *
1177
- */
1178
- static register(name = "auro-button") {
1179
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
1180
- }
1181
-
1182
- /**
1183
- * Internal method to apply focus to the HTML5 button.
1184
- * @private
1185
- * @returns {void}
1186
- */
1187
- focus() {
1188
- this.renderRoot.querySelector('button').focus();
1189
- }
1190
-
1191
- /**
1192
- * Submits the form that this button is associated with.
1193
- * @private
1194
- * @returns {void}
1195
- */
1196
- surfaceSubmitEvent() {
1197
- if (this.form) {
1198
- this.form.requestSubmit();
1199
- }
1200
- }
1201
-
1202
- /**
1203
- * Returns the form element that this button is associated with.
1204
- * @private
1205
- * @returns {HTMLFormElement | null}
1206
- */
1207
- get form() {
1208
- return this.internals ? this.internals.form : null;
1209
- }
1210
-
1211
- /**
1212
- * @private
1213
- * @returns {Boolean}
1214
- */
1215
- get showText() {
1216
- return !ICON_ONLY_SHAPES.includes(this.shape);
1217
- }
1218
-
1219
- /**
1220
- * Returns the current value of the projected `aria-label` attribute or undefined if not set.
1221
- * @returns {string | undefined}
1222
- * @private
1223
- */
1224
- get currentAriaLabel() {
1225
- if (!this.attributeWatcher) return undefined;
1226
-
1227
- const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
1228
- return ariaLabel || undefined;
1229
- }
1230
-
1231
- /**
1232
- * Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
1233
- * @returns {string | undefined}
1234
- * @private
1235
- */
1236
- get currentAriaLabelledBy() {
1237
- if (!this.attributeWatcher) return undefined;
1238
-
1239
- const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
1240
- return ariaLabelledBy || undefined;
1241
- }
1242
-
1243
- /**
1244
- * Whether or not the button is set to an icon-only shape.
1245
- * @returns {boolean} - True if the button is icon-only, false otherwise.
1246
- * @private
1247
- */
1248
- get iconOnly() {
1249
- return ICON_ONLY_SHAPES.includes(this.shape);
1250
- }
1251
-
1252
- /**
1253
- * Gets a class name for the font size based on the button's size and shape.
1254
- * @returns {string} - The font size class name.
1255
- * @private
1256
- */
1257
- getFontSize() {
1258
-
1259
- // Size map for standard buttons
1260
- const standardButtonSizeMap = {
1261
- xs: 'body-xs',
1262
- sm: 'body-sm',
1263
- md: 'body-default',
1264
- lg: 'body-lg',
1265
- xl: 'body-lg'
1266
- };
1267
-
1268
- // Size map for icon-only buttons
1269
- const iconOnlyButtonSizeMap = {
1270
- xs: 'heading-xs',
1271
- sm: 'heading-sm',
1272
- md: 'heading-sm',
1273
- lg: 'heading-md',
1274
- xl: 'heading-lg'
1275
- };
1276
-
1277
- // Determine which map to use based on the shape
1278
- const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
1279
-
1280
- // Return the font size based on the button size and shape
1281
- return sizeMap[this.size] || 'body-default';
1282
- }
1283
-
1284
- /**
1285
- * Renders the tag for the component.
1286
- * @returns {TemplateResult}
1287
- * @private
1288
- */
1289
- get _renderTag() {
1290
- if (this.static) return i$1`span`;
1291
-
1292
- return this.buttonHref ? i$1`a` : i$1`button`;
1293
- }
1294
-
1295
- firstUpdated() {
1296
- super.firstUpdated();
1297
-
1298
- this.runtimeUtils.handleComponentTagRename(this, 'auro-button');
1299
- }
1300
-
1301
- /**
1302
- * Renders the default layout for the button.
1303
- * @returns {TemplateResult}
1304
- * @private
1305
- */
1306
- renderLayoutDefault() {
1307
-
1308
- const fontSize = this.getFontSize();
1309
- const part = this.buttonHref ? 'link' : 'button';
1310
-
1311
- const classes = {
1312
- "auro-button": true,
1313
- "inset": this.showText,
1314
- wrapper: true,
1315
- loading: this.loading,
1316
-
1317
- // These remove the default borders so we can handle focus borders ourselves
1318
- 'simple': !['secondary'].includes(this.variant),
1319
- 'thin': ['secondary'].includes(this.variant),
1320
- };
1321
-
1322
- const contentClasses = {
1323
- "contentWrapper": true,
1324
- "util_displayHiddenVisually": this.loading
1325
- };
1326
-
1327
- // Type classes should not be applied to the wrapper to avoid affecting icons
1328
- const textSlotClasses = {
1329
- textSlot: true,
1330
- [fontSize]: this.showText
1331
- };
1332
-
1333
- const tabindex = this.tIndex || this.tabindex;
1334
-
1335
- return u`
1336
- <${this._renderTag}
1337
- part="${part}"
1338
- aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
1339
- aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
1340
- tabindex="${o(this.static ? -1 : tabindex)}"
1341
- ?autofocus="${this.autofocus}"
1342
- class=${e$1(classes)}
1343
- ?disabled="${this.disabled || this.loading}"
1344
- ?onDark="${this.onDark}"
1345
- title="${o(this.title ? this.title : undefined)}"
1346
- name="${o(this.name ? this.name : undefined)}"
1347
- type="${o(this.type ? this.type : undefined)}"
1348
- variant="${o(this.variant ? this.variant : undefined)}"
1349
- .value="${o(this.value ? this.value : undefined)}"
1350
- @click="${!this.static && this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
1351
- href="${o(this.buttonHref || undefined)}"
1352
- target="${o(this.buttonTarget || undefined)}"
1353
- rel="${o(this.buttonRel || undefined)}"
1354
- >
1355
- ${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
1356
-
1357
- <span class="${e$1(contentClasses)}">
1358
- <span class="${e$1(textSlotClasses)}" part="text">
1359
- <slot></slot>
1360
- </span>
1361
- </span>
1362
- </${this._renderTag}>
1363
- `;
1364
- }
1365
-
1366
- /**
1367
- * Renders the layout of the button.
1368
- * @returns {TemplateResult}
1369
- * @private
1370
- */
1371
- renderLayout() {
1372
- return this.renderLayoutDefault();
1373
- }
1374
- }
1375
-
1376
- // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1377
- // See LICENSE in the project root for license information.
1378
-
1379
-
1380
- /**
1381
- * Auro-accordion-button is the trigger element for Auro-accordion.
1382
- */
1383
-
1384
- // build the component class
1385
- class AuroAccordionButton extends AuroButton {
1386
- constructor() {
1387
- super();
1388
-
1389
- this.ariaexpanded = false;
1390
- }
1391
-
1392
- static get properties() {
1393
- return {
1394
- ...super.properties,
1395
- ariaexpanded: {
1396
- type: Boolean,
1397
- reflect: true
1398
- }
1399
- };
1400
- }
1401
-
1402
- static get styles() {
1403
- return [
1404
- styleCssAuroButton,
1405
- styleButtonCss
1406
- ];
1407
- }
1408
-
1409
-
1410
- // Sync aria-expanded changes
1411
- updated(changedProperties) {
1412
- super.updated(changedProperties);
1413
-
1414
- if (changedProperties.has('ariaexpanded')) {
1415
- const button = this.shadowRoot.querySelector('button');
1416
- if (button) {
1417
- button.setAttribute('aria-expanded', this.ariaexpanded ? 'true' : 'false');
1418
- }
1419
- }
1420
- }
1421
-
1422
- /**
1423
- * This will register this element with the browser.
1424
- * @param {string} [name="auro-accordion-button"] - The name of element that you want to register to.
1425
- *
1426
- * @example
1427
- * AuroAccordionButton.register("custom-accordion-button") // this will register this element to <custom-accordion-button/>
1428
- *
1429
- */
1430
- static register(name = "auro-accordion-button") {
1431
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionButton);
1432
- }
1433
- }
1434
-
1435
- // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1436
- // See LICENSE in the project root for license information.
1437
-
1438
-
1439
- /**
1440
- * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
1441
- * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
1442
- * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
1443
- */
1444
-
1445
- class AuroElement extends i$2 {
1446
-
1447
- // function to define props used within the scope of this component
1448
- static get properties() {
1449
- return {
1450
- hidden: { type: Boolean,
1451
- reflect: true },
1452
- hiddenVisually: { type: Boolean,
1453
- reflect: true },
1454
- hiddenAudible: { type: Boolean,
1455
- reflect: true },
1456
- };
1457
- }
1458
-
1459
- /**
1460
- * @private Function that determines state of aria-hidden
1461
- */
1462
- hideAudible(value) {
1463
- if (value) {
1464
- return 'true'
1465
- }
1466
-
1467
- return 'false'
1468
- }
1469
- }
1470
-
1471
- var error = {"role":"img","color":"currentColor","title":"","desc":"Error alert indicator.","width":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","height":"var(--auro-size-lg, var(--ds-size-300, 1.5rem))","xmlns":"http://www.w3.org/2000/svg","xmlns_xlink":"http://www.w3.org/1999/xlink","viewBox":"0 0 24 24","path":"/icons","style":"ico_squareLarge","type":"icon","name":"error","category":"alert","deprecated":true,"svg":"<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>"};
1472
-
1473
- /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
1474
-
1475
- const _fetchMap = new Map();
1476
-
1477
- /**
1478
- * A callback to parse Response body.
1479
- *
1480
- * @callback ResponseParser
1481
- * @param {Fetch.Response} response
1482
- * @returns {Promise}
1483
- */
1484
-
1485
- /**
1486
- * A minimal in-memory map to de-duplicate Fetch API media requests.
1487
- *
1488
- * @param {String} uri
1489
- * @param {Object} [options={}]
1490
- * @param {ResponseParser} [options.responseParser=(response) => response.text()]
1491
- * @returns {Promise}
1492
- */
1493
- const cacheFetch = (uri, options = {}) => {
1494
- const responseParser = options.responseParser || ((response) => response.text());
1495
- if (!_fetchMap.has(uri)) {
1496
- _fetchMap.set(uri, fetch(uri).then(responseParser));
1497
- }
1498
- return _fetchMap.get(uri);
1499
- };
1500
-
1501
- var styleCss$1 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.ico_squareLarge{fill:currentColor;height:var(--auro-size-lg, var(--ds-size-300, 1.5rem))}.ico_squareSmall{fill:currentColor;height:.6rem}.ico_squareMed{fill:currentColor;height:var(--auro-size-md, var(--ds-size-200, 1rem))}.ico_squareSml{fill:currentColor;height:var(--auro-size-sm, var(--ds-size-150, 0.75rem))}:host{color:currentColor;vertical-align:middle;line-height:1;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}.svgWrapper{height:var(--ds-auro-icon-size);width:var(--ds-auro-icon-size)}.labelWrapper{margin-left:var(--ds-size-50, 0.25rem);line-height:1.8}`;
1502
-
1503
- // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1504
- // See LICENSE in the project root for license information.
1505
-
1506
-
1507
- // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
1508
- /**
1509
- * @slot - Hidden from visibility, used for a11y if icon description is needed
1510
- */
1511
-
1512
- // build the component class
1513
- class BaseIcon extends AuroElement {
1514
- constructor() {
1515
- super();
1516
- this.onDark = false;
1517
- }
1518
-
1519
- // function to define props used within the scope of this component
1520
- static get properties() {
1521
- return {
1522
- ...super.properties,
1523
-
1524
- /**
1525
- * Set value for on-dark version of auro-icon.
1526
- */
1527
- onDark: {
1528
- type: Boolean,
1529
- reflect: true
1530
- },
1531
-
1532
- /**
1533
- * @private
1534
- */
1535
- svg: {
1536
- attribute: false,
1537
- reflect: true
1538
- }
1539
- };
1540
- }
1541
-
1542
- static get styles() {
1543
- return i$5`
1544
- ${styleCss$1}
1545
- `;
1546
- }
1547
-
1548
- /**
1549
- * Async function to fetch requested icon from npm CDN.
1550
- * @private
1551
- * @param {string} category - Icon category.
1552
- * @param {string} name - Icon name.
1553
- * @returns {SVGElement} DOM - Ready HTML to be appended.
1554
- */
1555
- async fetchIcon(category, name) {
1556
- let iconHTML = '';
1557
-
1558
- if (category === 'logos') {
1559
- iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
1560
- } else {
1561
- iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
1562
- }
1563
-
1564
- const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
1565
-
1566
- return dom.body.querySelector('svg');
1567
- }
1568
-
1569
- // lifecycle function
1570
- async firstUpdated() {
1571
- try {
1572
- if (!this.customSvg) {
1573
- const svg = await this.fetchIcon(this.category, this.name);
1574
-
1575
- if (svg) {
1576
- this.svg = svg;
1577
- } else if (!svg) {
1578
- const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
1579
-
1580
- this.svg = penDOM.body.firstChild;
1581
- }
1582
- }
1583
- // eslint-disable-next-line no-unused-vars
1584
- } catch (err) {
1585
- this.svg = undefined;
1586
- }
1587
- }
1588
- }
1589
-
1590
- var tokensCss$1 = i$5`:host{--ds-auro-icon-color:var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-alaska-color:#02426D;--ds-auro-icon-size:var(--ds-size-300, 1.5rem)}`;
1591
-
1592
- var colorCss$1 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[variant=accent1]){--ds-auro-icon-color:var(--ds-basic-color-texticon-accent1, #265688)}:host(:not([onDark])[variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:not([onDark])[variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-muted, #676767)}:host(:not([onDark])[variant=statusDefault]){--ds-auro-icon-color:var(--ds-basic-color-status-default, #afb9c6)}:host(:not([onDark])[variant=statusInfo]){--ds-auro-icon-color:var(--ds-basic-color-status-info, #01426a)}:host(:not([onDark])[variant=statusSuccess]){--ds-auro-icon-color:var(--ds-basic-color-status-success, #447a1f)}:host(:not([onDark])[variant=statusWarning]){--ds-auro-icon-color:var(--ds-basic-color-status-warning, #fac200)}:host(:not([onDark])[variant=statusError]){--ds-auro-icon-color:var(--ds-basic-color-status-error, #e31f26)}:host(:not([onDark])[variant=statusInfoSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-info-subtle, #ebf3f9)}:host(:not([onDark])[variant=statusSuccessSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-success-subtle, #d6eac7)}:host(:not([onDark])[variant=statusWarningSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-warning-subtle, #fff0b2)}:host(:not([onDark])[variant=statusErrorSubtle]){--ds-auro-icon-color:var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([onDark])[variant=fareBasicEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-basiceconomy, #97eaf8)}:host(:not([onDark])[variant=fareBusiness]){--ds-auro-icon-color:var(--ds-basic-color-fare-business, #01426a)}:host(:not([onDark])[variant=fareEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-economy, #0074ca)}:host(:not([onDark])[variant=fareFirst]){--ds-auro-icon-color:var(--ds-basic-color-fare-first, #00274a)}:host(:not([onDark])[variant=farePremiumEconomy]){--ds-auro-icon-color:var(--ds-basic-color-fare-premiumeconomy, #005154)}:host(:not([onDark])[variant=tierOneWorldEmerald]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-emerald, #139142)}:host(:not([onDark])[variant=tierOneWorldSapphire]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-sapphire, #015daa)}:host(:not([onDark])[variant=tierOneWorldRuby]){--ds-auro-icon-color:var(--ds-basic-color-tier-program-oneworld-ruby, #a41d4a)}:host([onDark]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse, #ffffff)}:host([onDark][variant=disabled]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}:host([onDark][variant=muted]){--ds-auro-icon-color:var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][variant=statusError]){--ds-auro-icon-color:var(--ds-advanced-color-state-error-inverse, #f9a4a8)}`;
1593
-
1594
- // Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1595
- // See LICENSE in the project root for license information.
1596
-
1597
-
1598
- class AuroIcon extends BaseIcon {
1599
- constructor() {
1600
- super();
1601
-
1602
- this.variant = undefined;
1603
- this.privateDefaults();
1604
- }
1605
-
1606
- /**
1607
- * Internal Defaults.
1608
- * @private
1609
- * @returns {void}
1610
- */
1611
- privateDefaults() {
1612
- this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
1613
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
1614
- }
1615
-
1616
- // function to define props used within the scope of this component
1617
- static get properties() {
1618
- return {
1619
- ...super.properties,
1620
-
1621
- /**
1622
- * Set aria-hidden value. Default is `true`. Option is `false`.
1623
- */
1624
- ariaHidden: {
1625
- type: String,
1626
- reflect: true
1627
- },
1628
-
1629
- /**
1630
- * The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
1631
- */
1632
- category: {
1633
- type: String,
1634
- reflect: true
1635
- },
1636
-
1637
- /**
1638
- * Allows custom color to be set.
1639
- */
1640
- customColor: {
1641
- type: Boolean,
1642
- reflect: true
1643
- },
1644
-
1645
- /**
1646
- * When true, auro-icon will render a custom SVG inside the default slot.
1647
- */
1648
- customSvg: {
1649
- type: Boolean
1650
- },
1651
-
1652
- /**
1653
- * Exposes content in slot as icon label.
1654
- */
1655
- label: {
1656
- type: Boolean,
1657
- reflect: true
1658
- },
1659
-
1660
- /**
1661
- * The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage.
1662
- */
1663
- name: {
1664
- type: String,
1665
- reflect: true
1666
- },
1667
-
1668
- /**
1669
- * The style of the icon. The accepted variants are `accent1`, `disabled`, `muted`, `statusDefault`, `statusInfo`, `statusSuccess`, `statusWarning`, `statusError`, `statusInfoSubtle`, `statusSuccessSubtle`, `statusWarningSubtle`, `statusErrorSubtle`, `fareBasicEconomy`, `fareBusiness`, `fareEconomy`, `fareFirst`, `farePremiumEconomy`, `tierOneWorldEmerald`, `tierOneWorldSapphire`, `tierOneWorldRuby`.
1670
- */
1671
- variant: {
1672
- type: String,
1673
- reflect: true
1674
- }
1675
- };
1676
- }
1677
-
1678
- static get styles() {
1679
- return [
1680
- super.styles,
1681
- i$5`${tokensCss$1}`,
1682
- i$5`${styleCss$1}`,
1683
- i$5`${colorCss$1}`
1684
- ];
1685
- }
1686
-
1687
- /**
1688
- * This will register this element with the browser.
1689
- * @param {string} [name="auro-icon"] - The name of element that you want to register to.
1690
- *
1691
- * @example
1692
- * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
1693
- *
1694
- */
1695
- static register(name = "auro-icon") {
1696
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
1697
- }
1698
-
1699
- connectedCallback() {
1700
- super.connectedCallback();
1701
-
1702
- // Add the tag name as an attribute if it is different than the component name
1703
- this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
1704
- }
1705
-
1706
- /**
1707
- * @private
1708
- * @returns {void} Exposes CSS parts for styling from parent components.
1709
- */
1710
- exposeCssParts() {
1711
- this.setAttribute('exportparts', 'svg:iconSvg');
1712
- }
1713
-
1714
- async firstUpdated() {
1715
- await super.firstUpdated();
1716
-
1717
- /**
1718
- * icons provide a description for screen readers. Icon only instances Auro-button
1719
- * depend on this description to provide context for the user using a screen reader.
1720
- * Removes the SVG description for screen reader if ariaHidden is set to true.
1721
- */
1722
- if (this.hasAttribute('ariaHidden') && this.svg) {
1723
- const svgDesc = this.svg.querySelector('desc');
1724
-
1725
- if (svgDesc) {
1726
- svgDesc.remove();
1727
- this.svg.removeAttribute('aria-labelledby');
1728
- }
1729
- }
1730
- }
1731
-
1732
- // function that renders the HTML and CSS into the scope of the component
1733
- render() {
1734
- const labelClasses = {
1735
- 'labelWrapper': true,
1736
- 'util_displayHiddenVisually': !this.label
1737
- };
1738
-
1739
- const svgClasses = {
1740
- 'svgWrapper': true,
1741
- };
1742
-
1743
- return x`
1744
- <div class="componentWrapper">
1745
- <div
1746
- class="${e$1(svgClasses)}"
1747
- title="${o(this.title || undefined)}">
1748
- <span aria-hidden="${o(this.ariaHidden || true)}" part="svg">
1749
- ${this.customSvg ? x`
1750
- <slot name="svg"></slot>
1751
- ` : x`
1752
- ${this.svg}
1753
- `
1754
- }
1755
- </span>
1756
- </div>
1757
-
1758
- <div class="${e$1(labelClasses)}">
1759
- <slot></slot>
1760
- </div>
1761
- </div>
1762
- `;
1763
- }
1764
- }
1765
-
1766
- var iconVersion = '8.1.4';
1767
-
1768
- var chevronUp = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-up__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-up__desc\">Directional indicator; up.</desc><path d=\"m17.603 14.343-.073.084a.75.75 0 0 1-.976.073l-.084-.073L12 9.957l-4.47 4.47a.75.75 0 0 1-.976.073l-.084-.073a.75.75 0 0 1-.073-.976l.073-.085 4.823-4.823a1 1 0 0 1 1.414 0l4.823 4.823a.75.75 0 0 1 .073.977\"/></svg>"};
1769
-
1770
- var chevronDown = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"chevron-down__desc\" class=\"ico_squareLarge\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"chevron-down__desc\">Directional indicator; down.</desc><path d=\"m6.397 9.554.073-.084a.75.75 0 0 1 .976-.073l.084.073L12 13.939l4.47-4.47a.75.75 0 0 1 .976-.072l.084.073a.75.75 0 0 1 .073.976l-.073.084L13.061 15l-.354.354a1 1 0 0 1-1.414 0L10.939 15l-4.47-4.47a.75.75 0 0 1-.072-.976l.073-.084z\"/></svg>"};
1771
-
1772
- var styleCss = i$5`.body-default{font-size:var(--wcss-body-default-font-size, 1rem);line-height:var(--wcss-body-default-line-height, 1.5rem)}.body-default,.body-lg{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-lg{font-size:var(--wcss-body-lg-font-size, 1.125rem);line-height:var(--wcss-body-lg-line-height, 1.625rem)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25rem)}.body-sm,.body-xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0)}.body-xs{font-size:var(--wcss-body-xs-font-size, 0.75rem);line-height:var(--wcss-body-xs-line-height, 1rem)}.body-2xs{font-family:var(--wcss-body-family, "AS Circular"),system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--wcss-body-2xs-font-size, 0.625rem);font-weight:var(--wcss-body-weight, 450);letter-spacing:var(--wcss-body-letter-spacing, 0);line-height:var(--wcss-body-2xs-line-height, 0.875rem)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular"),var(--wcss-display-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-2xl-font-size, clamp(3.5rem, 6vw, 5.375rem));font-weight:var(--wcss-display-2xl-weight, 300);letter-spacing:var(--wcss-display-2xl-letter-spacing, 0);line-height:var(--wcss-display-2xl-line-height, 1.3)}.display-xl{font-family:var(--wcss-display-xl-family, "AS Circular"),var(--wcss-display-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xl-font-size, clamp(3rem, 5.3333333333vw, 4.5rem));font-weight:var(--wcss-display-xl-weight, 300);letter-spacing:var(--wcss-display-xl-letter-spacing, 0);line-height:var(--wcss-display-xl-line-height, 1.3)}.display-lg{font-family:var(--wcss-display-lg-family, "AS Circular"),var(--wcss-display-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-lg-font-size, clamp(2.75rem, 4.6666666667vw, 4rem));font-weight:var(--wcss-display-lg-weight, 300);letter-spacing:var(--wcss-display-lg-letter-spacing, 0);line-height:var(--wcss-display-lg-line-height, 1.3)}.display-md{font-family:var(--wcss-display-md-family, "AS Circular"),var(--wcss-display-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-md-font-size, clamp(2.5rem, 4vw, 3.5rem));font-weight:var(--wcss-display-md-weight, 300);letter-spacing:var(--wcss-display-md-letter-spacing, 0);line-height:var(--wcss-display-md-line-height, 1.3)}.display-sm{font-family:var(--wcss-display-sm-family, "AS Circular"),var(--wcss-display-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-sm-font-size, clamp(2rem, 3.6666666667vw, 3rem));font-weight:var(--wcss-display-sm-weight, 300);letter-spacing:var(--wcss-display-sm-letter-spacing, 0);line-height:var(--wcss-display-sm-line-height, 1.3)}.display-xs{font-family:var(--wcss-display-xs-family, "AS Circular"),var(--wcss-display-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-display-xs-font-size, clamp(1.75rem, 3vw, 2.375rem));font-weight:var(--wcss-display-xs-weight, 300);letter-spacing:var(--wcss-display-xs-letter-spacing, 0);line-height:var(--wcss-display-xs-line-height, 1.3)}.heading-xl{font-family:var(--wcss-heading-xl-family, "AS Circular"),var(--wcss-heading-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xl-font-size, clamp(2rem, 3vw, 2.5rem));font-weight:var(--wcss-heading-xl-weight, 300);letter-spacing:var(--wcss-heading-xl-letter-spacing, 0);line-height:var(--wcss-heading-xl-line-height, 1.3)}.heading-lg{font-family:var(--wcss-heading-lg-family, "AS Circular"),var(--wcss-heading-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-lg-font-size, clamp(1.75rem, 2.6666666667vw, 2.25rem));font-weight:var(--wcss-heading-lg-weight, 300);letter-spacing:var(--wcss-heading-lg-letter-spacing, 0);line-height:var(--wcss-heading-lg-line-height, 1.3)}.heading-md{font-family:var(--wcss-heading-md-family, "AS Circular"),var(--wcss-heading-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-md-font-size, clamp(1.625rem, 2.3333333333vw, 1.75rem));font-weight:var(--wcss-heading-md-weight, 300);letter-spacing:var(--wcss-heading-md-letter-spacing, 0);line-height:var(--wcss-heading-md-line-height, 1.3)}.heading-sm{font-family:var(--wcss-heading-sm-family, "AS Circular"),var(--wcss-heading-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-sm-font-size, clamp(1.375rem, 2vw, 1.5rem));font-weight:var(--wcss-heading-sm-weight, 300);letter-spacing:var(--wcss-heading-sm-letter-spacing, 0);line-height:var(--wcss-heading-sm-line-height, 1.3)}.heading-xs{font-family:var(--wcss-heading-xs-family, "AS Circular"),var(--wcss-heading-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-xs-font-size, clamp(1.25rem, 1.6666666667vw, 1.25rem));font-weight:var(--wcss-heading-xs-weight, 450);letter-spacing:var(--wcss-heading-xs-letter-spacing, 0);line-height:var(--wcss-heading-xs-line-height, 1.3)}.heading-2xs{font-family:var(--wcss-heading-2xs-family, "AS Circular"),var(--wcss-heading-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-heading-2xs-font-size, clamp(1.125rem, 1.5vw, 1.125rem));font-weight:var(--wcss-heading-2xs-weight, 450);letter-spacing:var(--wcss-heading-2xs-letter-spacing, 0);line-height:var(--wcss-heading-2xs-line-height, 1.3)}.accent-2xl{font-family:var(--wcss-accent-2xl-family, "Good OT"),var(--wcss-accent-2xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xl-font-size, clamp(2rem, 3.1666666667vw, 2.375rem));font-weight:var(--wcss-accent-2xl-weight, 450);letter-spacing:var(--wcss-accent-2xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-2xl-line-height, 1)}.accent-2xl,.accent-xl{text-transform:uppercase}.accent-xl{font-family:var(--wcss-accent-xl-family, "Good OT"),var(--wcss-accent-xl-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xl-font-size, clamp(1.625rem, 2.3333333333vw, 2rem));font-weight:var(--wcss-accent-xl-weight, 450);letter-spacing:var(--wcss-accent-xl-letter-spacing, 0.05em);line-height:var(--wcss-accent-xl-line-height, 1.3)}.accent-lg{font-family:var(--wcss-accent-lg-family, "Good OT"),var(--wcss-accent-lg-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-lg-font-size, clamp(1.5rem, 2.1666666667vw, 1.75rem));font-weight:var(--wcss-accent-lg-weight, 450);letter-spacing:var(--wcss-accent-lg-letter-spacing, 0.05em);line-height:var(--wcss-accent-lg-line-height, 1.3)}.accent-lg,.accent-md{text-transform:uppercase}.accent-md{font-family:var(--wcss-accent-md-family, "Good OT"),var(--wcss-accent-md-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-md-font-size, clamp(1.375rem, 1.8333333333vw, 1.5rem));font-weight:var(--wcss-accent-md-weight, 500);letter-spacing:var(--wcss-accent-md-letter-spacing, 0.05em);line-height:var(--wcss-accent-md-line-height, 1.3)}.accent-sm{font-family:var(--wcss-accent-sm-family, "Good OT"),var(--wcss-accent-sm-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-sm-font-size, clamp(1.125rem, 1.5vw, 1.25rem));font-weight:var(--wcss-accent-sm-weight, 500);letter-spacing:var(--wcss-accent-sm-letter-spacing, 0.05em);line-height:var(--wcss-accent-sm-line-height, 1.3)}.accent-sm,.accent-xs{text-transform:uppercase}.accent-xs{font-family:var(--wcss-accent-xs-family, "Good OT"),var(--wcss-accent-xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-xs-font-size, clamp(1rem, 1.3333333333vw, 1rem));font-weight:var(--wcss-accent-xs-weight, 500);letter-spacing:var(--wcss-accent-xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-xs-line-height, 1.3)}.accent-2xs{font-family:var(--wcss-accent-2xs-family, "Good OT"),var(--wcss-accent-2xs-family-fallback, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);font-size:var(--wcss-accent-2xs-font-size, clamp(0.875rem, 1.1666666667vw, 0.875rem));font-weight:var(--wcss-accent-2xs-weight, 450);letter-spacing:var(--wcss-accent-2xs-letter-spacing, 0.1em);line-height:var(--wcss-accent-2xs-line-height, 1.3);text-transform:uppercase}:host{interpolate-size:allow-keywords;--webkit-fill: -webkit-fill-available}:host .trigger{position:relative;display:inline-block;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem)}:host .trigger:hover{text-decoration:underline}:host ::slotted([slot=trigger]){padding-left:var(--ds-size-100, 0.5rem);padding-right:var(--ds-size-200, 1rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-100, 0.5rem)}:host([chevron=right]) .contentWrapper{padding-left:var(--ds-size-400, 2rem)}:host([chevron=right]:not([emphasis])) ::slotted([slot=trigger]){padding-left:var(--ds-size-250, 1.25rem)}:host([chevron=right]:not([emphasis])) .contentWrapper{padding-left:var(--ds-size-250, 1.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-bottom-width:1px;border-bottom-style:solid}:host([grouped][chevron=right]:not([alignright])) .trigger{width:var(--webkit-fill, 100%);--trigger-padding-right: var(--ds-size-200, 1rem)}:host(:not([expanded])) .content,:host([expanded=false]) .content{height:0 !important}:host([expanded]) .content{height:auto}:host([emphasis]) .trigger{border-style:solid;border-width:1px;border-left-width:2px;--trigger-padding-left: var(--ds-size-200, 1rem)}:host([emphasis]) .trigger:before{display:block;position:absolute;top:-1px;left:-2px;width:1px;height:calc(100% + 2px);content:"";border-left-style:solid;border-left-width:2px}:host([emphasis]) .trigger:focus{border-left-width:1px;margin-left:1px}:host([emphasis]) .content{border-left-width:2px;border-left-style:solid;padding:unset}:host([emphasis]) .contentWrapper{padding-left:var(--ds-size-200, 1rem)}:host([emphasis]) .iconWrapper{padding-right:var(--ds-size-200, 1rem)}:host([emphasis][variant=lg]) .trigger,:host([emphasis][variant=lg]) .contentWrapper{padding-left:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}:host([emphasis]:not([expanded]):hover) .trigger{text-decoration:unset}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
1773
-
1774
- var colorCss = i$5`:host .trigger{color:var(--ds-auro-accordion-trigger-color);border-color:var(--ds-auro-accordion-trigger-border-color)}:host [auro-icon]{color:var(--ds-auro-accordion-trigger-icon-color)}:host([disabled]){--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-disabled, v.$ds-basic-color-texticon-disabled)}:host([disabled]) [auro-icon]{color:var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host(:focus){--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([grouped]) .componentWrapper{border-bottom-color:var(--ds-auro-accordion-group-border-color)}:host([emphasis]) .trigger:before{border-color:var(--ds-auro-accordion-trigger-border-color)}:host([emphasis]) .trigger:focus:before,:host([emphasis]) .trigger:hover:before{--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-focused, #01426a)}:host([emphasis]) .content{border-left-color:var(--ds-auro-accordion-content-border-color)}:host([emphasis][expanded]) .trigger:before{--ds-auro-accordion-trigger-border-color: var(--ds-advanced-color-state-selected, #01426a)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color: var(--ds-basic-color-border-subtle, #dddddd)}`;
1775
-
1776
- var tokensCss = i$5`:host{--ds-auro-accordion-content-border-color: transparent;--ds-auro-accordion-group-border-color: var(--ds-basic-color-border-divider, rgba(0, 0, 0, 0.15));--ds-auro-accordion-trigger-border-color: transparent;--ds-auro-accordion-trigger-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color: var(--ds-basic-color-texticon-default, #2a2a2a)}`;
1777
-
1778
- // Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
1779
- // See LICENSE in the project root for license information.
1780
-
1781
-
1782
- // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
1783
- /**
1784
- * Auro-accordion provides users a way to have collapsible content on a page.
1785
- * Use auro-accordion-group if you want to have auto closing accordion components when others are selected.
1786
- *
1787
- * @attr {Boolean} alignRight - If set, the trigger content will align right.
1788
- * @attr {Boolean} expanded - If set, the accordion is expanded.
1789
- * @attr {Boolean} emphasis - If set, emphasis styles will be applied to the auro-accordions.
1790
- * @attr {Boolean} grouped - Attribute will be set on accordion when it appears in an accordion group.
1791
- * @attr {Boolean} disabled - If set, the accordion is disabled and have reduced opacity.
1792
- * @attr {String} chevron - Sets chevron variant option. Possible values are: `none`, `right`.
1793
- * @attr {String} variant - Sets accordion variant option. Possible values are: `sm`, `lg`.
1794
- * @slot - Default slot for the accordion content.
1795
- * @slot trigger - Defines the content of the trigger element.
1796
- * @csspart accordion - Apply CSS to Accordion wrapper.
1797
- * @csspart trigger - Apply CSS to trigger element.
1798
- * @csspart chevron - Apply CSS to chevron icon.
1799
- * @csspart content - Apply CSS to the accordion content.
1800
- * @event toggleExpanded - Notifies that the accordion has been expanded or closed.
1801
- */
1802
-
1803
- // build the component class
1804
- class AuroAccordion extends i$2 {
1805
- constructor() {
1806
- super();
1807
-
1808
- const versioning = new AuroDependencyVersioning();
1809
-
1810
- /**
1811
- * @private
1812
- */
1813
- this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
1814
-
1815
- /**
1816
- * @private
1817
- */
1818
- this.buttonNameHash = this.generateRandomLetters(4); //eslint-disable-line
1819
-
1820
- /**
1821
- * @private
1822
- */
1823
- this.buttonTag = versioning.generateTag('auro-accordion-button', this.buttonNameHash, AuroAccordionButton);
1824
-
1825
- /**
1826
- * @private
1827
- */
1828
- this.runtimeUtils = new AuroLibraryRuntimeUtils();
1829
-
1830
- this.expanded = false;
1831
- }
1832
-
1833
- // This function is to define props used within the scope of this component
1834
- // Be sure to review https://lit.dev/docs/components/properties/
1835
- // to understand how to use reflected attributes with your property settings.
1836
- static get properties() {
1837
- return {
1838
- // ...super.properties,
1839
-
1840
- alignRight: {
1841
- type: Boolean,
1842
- reflect: true,
1843
- },
1844
- expanded: {
1845
- type: Boolean,
1846
- reflect: true,
1847
- },
1848
- emphasis: {
1849
- type: Boolean,
1850
- reflect: true
1851
- },
1852
- grouped: {
1853
- type: Boolean,
1854
- reflect: true
1855
- },
1856
- chevron: {
1857
- type: String,
1858
- reflect: true
1859
- },
1860
- variant: {
1861
- type: String,
1862
- reflect: true
1863
- },
1864
- disabled: {
1865
- type: Boolean,
1866
- reflect: true
1867
- }
1868
- };
1869
- }
1870
-
1871
- static get styles() {
1872
- return [
1873
- colorCss,
1874
- styleCss,
1875
- tokensCss
1876
- ];
1877
- }
1878
-
1879
- /**
1880
- * This will register this element with the browser.
1881
- * @param {string} [name="auro-accordion"] - The name of element that you want to register to.
1882
- *
1883
- * @example
1884
- * AuroAccordion.register("custom-accordion") // this will register this element to <custom-accordion/>
1885
- *
1886
- */
1887
- static register(name = "auro-accordion") {
1888
- const nameGroup = `${name}-group`;
1889
- AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordion);
1890
- AuroAccordionGroup.register(nameGroup);
1891
- }
1892
-
1893
- firstUpdated() {
1894
- // Add the tag name as an attribute if it is different than the component name
1895
- this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion');
1896
- }
1897
-
1898
- updated(changedProperties) {
1899
- // Update button when ariaexpanded changes
1900
- if (changedProperties.has('expanded')) {
1901
- const button = this.shadowRoot.querySelector('#accordionTrigger');
1902
- if (button) {
1903
- button.ariaexpanded = this.expanded;
1904
- }
1905
- }
1906
- }
1907
-
1908
- /**
1909
- * Renders the chevron icons.
1910
- * @private
1911
- * @returns {TemplateResult} - The html template for the chevron icons.
1912
- */
1913
- renderChevronIcons() {
1914
- if (this.chevron === 'none') {
1915
- return E;
1916
- }
1917
-
1918
- const iconSvg = this.expanded ? chevronUp.svg : chevronDown.svg;
1919
-
1920
- return u`
1921
- <${this.iconTag}
1922
- customSvg
1923
- customColor
1924
- ?disabled="${this.disabled}"
1925
- part="chevron">
1926
- <div slot="svg">${o$1(iconSvg)}</div>
1927
- </${this.iconTag}>
1928
- `;
1929
- }
1930
-
1931
- /**
1932
- * Generates a random string of letters.
1933
- * @private
1934
- * @param {number} length - The number of characters to generate in the string.
1935
- * @returns {string} - The generated string.
1936
- */
1937
- generateRandomLetters(length) {
1938
- let result = '';
1939
- const characters = 'abcdefghijklmnopqrstuvwxyz';
1940
- const charactersLength = characters.length;
1941
- for (let index = 0; index < length; index += 1) {
1942
- result += characters.charAt(Math.floor(Math.random() * charactersLength));
1943
- }
1944
-
1945
- return result;
1946
- }
1947
-
1948
- /**
1949
- * Toggles the visibility of the accordion content.
1950
- */
1951
- toggle() {
1952
- this.expanded = !this.expanded;
1953
-
1954
- this.dispatchEvent(new CustomEvent('toggleExpanded', {
1955
- bubbles: true,
1956
- composed: true,
1957
- detail: {
1958
- expanded: this.expanded
1959
- }
1960
- }));
1961
- }
1962
-
1963
- /**
1964
- * Toggles the visibility of the accordion content when button gets clicked.
1965
- * @private
1966
- * @param {Event} event - The event object.
1967
- */
1968
- handleButtonClick(event) {
1969
- if (this.disabled) {
1970
- event.preventDefault();
1971
- return;
1972
- }
1973
- this.toggle();
1974
- }
1975
-
1976
- // function that renders the HTML and CSS into the scope of the component
1977
- render() {
1978
- const buttonClasses = {
1979
- "trigger": true,
1980
- "iconRight": this.getAttribute('chevron') === 'right',
1981
- "iconNone": this.getAttribute('chevron') === 'none',
1982
- "sm": this.getAttribute('variant') === 'sm',
1983
- "lg": this.getAttribute('variant') === 'lg',
1984
- };
1985
-
1986
- const variantClassMap = {
1987
- 'sm': 'body-default',
1988
- 'lg': 'heading-xs'
1989
- };
1990
-
1991
- const triggerSlotClass = variantClassMap[this.variant] || 'heading-2xs';
1992
-
1993
- // Generate unique ID & apply aria-controls
1994
- const accordionContentId = `accordionContent-${this.buttonNameHash}`;
1995
-
1996
- return u`
1997
- <div class="componentWrapper" part="accordion">
1998
- <${this.buttonTag}
1999
- ?fluid="${this.emphasis}"
2000
- class="${e$1(buttonClasses)}"
2001
- id="accordionTrigger"
2002
- aria-controls="${accordionContentId}"
2003
- ?ariaexpanded="${this.expanded}"
2004
- ?aria-disabled="${this.disabled}"
2005
- ?disabled="${this.disabled}"
2006
- @click="${this.handleButtonClick}"
2007
- part="trigger">
2008
- ${this.chevron === 'right' ? E : this.renderChevronIcons()}
2009
- <slot name="trigger" part="triggerSlot" class="${triggerSlotClass}"></slot>
2010
- ${this.chevron === 'right' ? this.renderChevronIcons() : E}
2011
- </${this.buttonTag}>
2012
-
2013
- <div class="content body-default" id="${accordionContentId}" aria-labelledby="accordionTrigger" inert="${!this.expanded || E}" part="content">
2014
- <div class="contentWrapper" part="contentWrapper">
2015
- <slot></slot>
2016
- </div>
2017
- </div>
2018
- </div>
2019
- `;
2020
- }
2021
- }
1
+ import { A as AuroAccordion, a as AuroAccordionGroup, b as AuroAccordionButton } from './auro-accordion.min.js';
2022
2
 
2023
3
  AuroAccordion.register();
2024
4
  AuroAccordionGroup.register();
2025
5
  AuroAccordionButton.register();
2026
6
 
2027
- AuroAccordion.register('custom-accordion');
2028
- AuroAccordionGroup.register('custom-accordion-group');
2029
- AuroAccordionButton.register('custom-accordion-button');
7
+ AuroAccordion.register("custom-accordion");
8
+ AuroAccordionGroup.register("custom-accordion-group");
9
+ AuroAccordionButton.register("custom-accordion-button");
2030
10
 
2031
11
  function initExamples(initCount) {
12
+ // biome-ignore lint/style/noParameterAssign: recursion, just for demos
13
+ initCount = initCount || 0;
14
+
15
+ if (initCount <= 20) {
16
+ // setTimeout handles issue where content is sometimes loaded after the functions get called
17
+ setTimeout(() => {
18
+ initExamples(initCount + 1);
19
+ }, 100);
20
+ }
2032
21
  }
2033
22
 
2034
23
  export { initExamples };