@aurodesignsystem/auro-accordion 4.1.0 → 4.2.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.
package/demo/api.min.js CHANGED
@@ -1,15 +1,3 @@
1
- import { css, LitElement, nothing, html as html$1 } from 'lit';
2
- import { html } from 'lit/static-html.js';
3
- import { classMap } from 'lit/directives/class-map.js';
4
- import * as AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
5
- import AuroLibraryRuntimeUtils__default from '@aurodesignsystem/auro-library/scripts/utils/runtimeUtils.mjs';
6
- import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
7
- import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
8
- import chevronUp from '@alaskaairux/icons/dist/icons/interface/chevron-up.mjs';
9
- import chevronDown from '@alaskaairux/icons/dist/icons/interface/chevron-down.mjs';
10
- import styleCssAuroButton from '@aurodesignsystem/auro-button/src/style-css.js';
11
- import { AuroButton } from '@aurodesignsystem/auro-button/src/auro-button.js';
12
-
13
1
  function expandedExample() {
14
2
  const expandedExampleElem = document.querySelector('#auroaccordionExpandedExample');
15
3
 
@@ -22,13 +10,529 @@ function expandedExample() {
22
10
  });
23
11
  }
24
12
 
25
- var iconVersion = '5.0.2';
13
+ /**
14
+ * @license
15
+ * Copyright 2019 Google LLC
16
+ * SPDX-License-Identifier: BSD-3-Clause
17
+ */
18
+ const t$2=globalThis,e$4=t$2.ShadowRoot&&(void 0===t$2.ShadyCSS||t$2.ShadyCSS.nativeShadow)&&"adoptedStyleSheets"in Document.prototype&&"replace"in CSSStyleSheet.prototype,s$2=Symbol(),o$4=new WeakMap;let n$3 = class n{constructor(t,e,o){if(this._$cssResult$=!0,o!==s$2)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$4&&void 0===t){const e=void 0!==s&&1===s.length;e&&(t=o$4.get(s)),void 0===t&&((this.o=t=new CSSStyleSheet).replaceSync(this.cssText),e&&o$4.set(s,t));}return t}toString(){return this.cssText}};const r$3=t=>new n$3("string"==typeof t?t:t+"",void 0,s$2),i$5=(t,...e)=>{const o=1===t.length?t[0]:e.reduce(((e,s,o)=>e+(t=>{if(!0===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$2)},S$1=(s,o)=>{if(e$4)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$4?t=>t:t=>t instanceof CSSStyleSheet?(t=>{let e="";for(const s of t.cssRules)e+=s.cssText;return r$3(e)})(t):t;
19
+
20
+ /**
21
+ * @license
22
+ * Copyright 2017 Google LLC
23
+ * SPDX-License-Identifier: BSD-3-Clause
24
+ */const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:r$2,getOwnPropertyNames:h$1,getOwnPropertySymbols:o$3,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),y$1={attribute:!0,type:String,converter:u$2,reflect:!1,hasChanged:f$1};Symbol.metadata??=Symbol("metadata"),a$2.litPropertyMetadata??=new WeakMap;class b 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=y$1){if(s.state&&(s.attribute=!1),this._$Ei(),this.elementProperties.set(t,s),!s.noAccessor){const i=Symbol(),r=this.getPropertyDescriptor(t,i,s);void 0!==r&&e$3(this.prototype,t,r);}}static getPropertyDescriptor(t,s,i){const{get:e,set:h}=r$2(this.prototype,t)??{get(){return this[s]},set(t){this[s]=t;}};return {get(){return e?.call(this)},set(s){const r=e?.call(this);h.call(this,s),this.requestUpdate(t,r,i);},configurable:!0,enumerable:!0}}static getPropertyOptions(t){return this.elementProperties.get(t)??y$1}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=!0,this._$Ei(),this.hasOwnProperty(d$1("properties"))){const t=this.properties,s=[...h$1(t),...o$3(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 !1===i?void 0:"string"==typeof i?i:"string"==typeof t?t.toLowerCase():void 0}constructor(){super(),this._$Ep=void 0,this.isUpdatePending=!1,this.hasUpdated=!1,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(!0),this._$EO?.forEach((t=>t.hostConnected?.()));}enableUpdating(t){}disconnectedCallback(){this._$EO?.forEach((t=>t.hostDisconnected?.()));}attributeChangedCallback(t,s,i){this._$AK(t,i);}_$EC(t,s){const i=this.constructor.elementProperties.get(t),e=this.constructor._$Eu(t,i);if(void 0!==e&&!0===i.reflect){const r=(void 0!==i.converter?.toAttribute?i.converter:u$2).toAttribute(s,i.type);this._$Em=t,null==r?this.removeAttribute(e):this.setAttribute(e,r),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),r="function"==typeof t.converter?{fromAttribute:t.converter}:void 0!==t.converter?.fromAttribute?t.converter:u$2;this._$Em=e,this[e]=r.fromAttribute(s,t.type),this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){if(i??=this.constructor.getPropertyOptions(t),!(i.hasChanged??f$1)(this[t],s))return;this.P(t,s,i);}!1===this.isUpdatePending&&(this._$ES=this._$ET());}P(t,s,i){this._$AL.has(t)||this._$AL.set(t,s),!0===i.reflect&&this._$Em!==t&&(this._$Ej??=new Set).add(t);}async _$ET(){this.isUpdatePending=!0;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)!0!==i.wrapped||this._$AL.has(s)||void 0===this[s]||this.P(s,this[s],i);}let t=!1;const s=this._$AL;try{t=this.shouldUpdate(s),t?(this.willUpdate(s),this._$EO?.forEach((t=>t.hostUpdate?.())),this.update(s)):this._$EU();}catch(s){throw t=!1,this._$EU(),s}t&&this._$AE(s);}willUpdate(t){}_$AE(t){this._$EO?.forEach((t=>t.hostUpdated?.())),this.hasUpdated||(this.hasUpdated=!0,this.firstUpdated(t)),this.updated(t);}_$EU(){this._$AL=new Map,this.isUpdatePending=!1;}get updateComplete(){return this.getUpdateComplete()}getUpdateComplete(){return this._$ES}shouldUpdate(t){return !0}update(t){this._$Ej&&=this._$Ej.forEach((t=>this._$EC(t,this[t]))),this._$EU();}updated(t){}firstUpdated(t){}}b.elementStyles=[],b.shadowRootOptions={mode:"open"},b[d$1("elementProperties")]=new Map,b[d$1("finalized")]=new Map,p$1?.({ReactiveElement:b}),(a$2.reactiveElementVersions??=[]).push("2.0.4");
25
+
26
+ /**
27
+ * @license
28
+ * Copyright 2017 Google LLC
29
+ * SPDX-License-Identifier: BSD-3-Clause
30
+ */
31
+ const t$1=globalThis,i$3=t$1.trustedTypes,s$1=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$2="$lit$",h=`lit$${Math.random().toFixed(9).slice(2)}$`,o$2="?"+h,n$1=`<${o$2}>`,r$1=document,l$1=()=>r$1.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$1.createTreeWalker(r$1,129);function P(t,i){if(!a$1(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return void 0!==s$1?s$1.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$2+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$2)){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$2)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$1.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?.(!1),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$1).importNode(i,!0);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$1,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??!0;}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$1.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?.(!1,!0,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=!1;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.2.1");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};
32
+
33
+ /**
34
+ * @license
35
+ * Copyright 2017 Google LLC
36
+ * SPDX-License-Identifier: BSD-3-Clause
37
+ */class r extends b{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 s=this.render();this.hasUpdated||(this.renderOptions.isConnected=this.isConnected),super.update(t),this._$Do=B(s,this.renderRoot,this.renderOptions);}connectedCallback(){super.connectedCallback(),this._$Do?.setConnected(!0);}disconnectedCallback(){super.disconnectedCallback(),this._$Do?.setConnected(!1);}render(){return T}}r._$litElement$=!0,r["finalized"]=!0,globalThis.litElementHydrateSupport?.({LitElement:r});const i$2=globalThis.litElementPolyfillSupport;i$2?.({LitElement:r});(globalThis.litElementVersions??=[]).push("4.1.1");
38
+
39
+ /**
40
+ * @license
41
+ * Copyright 2020 Google LLC
42
+ * SPDX-License-Identifier: BSD-3-Clause
43
+ */
44
+ const a=Symbol.for(""),o$1=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=!1;for(;$<a;){for(c=r[$];$<a&&void 0!==(i=e[$],s=o$1(i));)c+=s+r[++$],f=!0;$!==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);
45
+
46
+ /**
47
+ * @license
48
+ * Copyright 2017 Google LLC
49
+ * SPDX-License-Identifier: BSD-3-Clause
50
+ */
51
+ const t={ATTRIBUTE:1,CHILD:2,PROPERTY:3,BOOLEAN_ATTRIBUTE:4,EVENT:5,ELEMENT:6},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{constructor(t){}get _$AU(){return this._$AM._$AU}_$AT(t,e,i){this._$Ct=t,this._$AM=e,this._$Ci=i;}_$AS(t,e){return this.update(t,e)}update(t,e){return this.render(...e)}}
52
+
53
+ /**
54
+ * @license
55
+ * Copyright 2018 Google LLC
56
+ * SPDX-License-Identifier: BSD-3-Clause
57
+ */const e=e$1(class extends i{constructor(t$1){if(super(t$1),t$1.type!==t.ATTRIBUTE||"class"!==t$1.name||t$1.strings?.length>2)throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.")}render(t){return " "+Object.keys(t).filter((s=>t[s])).join(" ")+" "}update(s,[i]){if(void 0===this.st){this.st=new Set,void 0!==s.strings&&(this.nt=new Set(s.strings.join(" ").split(/\s/).filter((t=>""!==t))));for(const t in i)i[t]&&!this.nt?.has(t)&&this.st.add(t);return this.render(i)}const r=s.element.classList;for(const t of this.st)t in i||(r.remove(t),this.st.delete(t));for(const t in i){const s=!!i[t];s===this.st.has(t)||this.nt?.has(t)||(s?(r.add(t),this.st.add(t)):(r.remove(t),this.st.delete(t)));}return T}});
58
+
59
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
60
+ // See LICENSE in the project root for license information.
61
+
62
+ // ---------------------------------------------------------------------
63
+
64
+ /* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
65
+
66
+ class AuroLibraryRuntimeUtils {
67
+
68
+ /* eslint-disable jsdoc/require-param */
69
+
70
+ /**
71
+ * This will register a new custom element with the browser.
72
+ * @param {String} name - The name of the custom element.
73
+ * @param {Object} componentClass - The class to register as a custom element.
74
+ * @returns {void}
75
+ */
76
+ registerComponent(name, componentClass) {
77
+ if (!customElements.get(name)) {
78
+ customElements.define(name, class extends componentClass {});
79
+ }
80
+ }
81
+
82
+ /**
83
+ * Finds and returns the closest HTML Element based on a selector.
84
+ * @returns {void}
85
+ */
86
+ closestElement(
87
+ selector, // selector like in .closest()
88
+ base = this, // extra functionality to skip a parent
89
+ __Closest = (el, found = el && el.closest(selector)) =>
90
+ !el || el === document || el === window
91
+ ? null // standard .closest() returns null for non-found selectors also
92
+ : found
93
+ ? found // found a selector INside this element
94
+ : __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
95
+ ) {
96
+ return __Closest(base);
97
+ }
98
+ /* eslint-enable jsdoc/require-param */
99
+
100
+ /**
101
+ * 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.
102
+ * @param {Object} elem - The element to check.
103
+ * @param {String} tagName - The name of the Auro component to check for or add as an attribute.
104
+ * @returns {void}
105
+ */
106
+ handleComponentTagRename(elem, tagName) {
107
+ const tag = tagName.toLowerCase();
108
+ const elemTag = elem.tagName.toLowerCase();
109
+
110
+ if (elemTag !== tag) {
111
+ elem.setAttribute(tag, true);
112
+ }
113
+ }
114
+
115
+ /**
116
+ * Validates if an element is a specific Auro component.
117
+ * @param {Object} elem - The element to validate.
118
+ * @param {String} tagName - The name of the Auro component to check against.
119
+ * @returns {Boolean} - Returns true if the element is the specified Auro component.
120
+ */
121
+ elementMatch(elem, tagName) {
122
+ const tag = tagName.toLowerCase();
123
+ const elemTag = elem.tagName.toLowerCase();
124
+
125
+ return elemTag === tag || elem.hasAttribute(tag);
126
+ }
127
+ }
128
+
129
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
130
+ // See LICENSE in the project root for license information.
131
+
132
+
133
+ class AuroDependencyVersioning {
134
+
135
+ /**
136
+ * Generates a unique string to be used for child auro element naming.
137
+ * @private
138
+ * @param {string} baseName - Defines the first part of the unique element name.
139
+ * @param {string} version - Version of the component that will be appended to the baseName.
140
+ * @returns {string} - Unique string to be used for naming.
141
+ */
142
+ generateElementName(baseName, version) {
143
+ let result = baseName;
144
+
145
+ result += '-';
146
+ result += version.replace(/[.]/g, '_');
147
+
148
+ return result;
149
+ }
150
+
151
+ /**
152
+ * Generates a unique string to be used for child auro element naming.
153
+ * @param {string} baseName - Defines the first part of the unique element name.
154
+ * @param {string} version - Version of the component that will be appended to the baseName.
155
+ * @returns {string} - Unique string to be used for naming.
156
+ */
157
+ generateTag(baseName, version, tagClass) {
158
+ const elementName = this.generateElementName(baseName, version);
159
+ const tag = i$1`${s(elementName)}`;
160
+
161
+ if (!customElements.get(elementName)) {
162
+ customElements.define(elementName, class extends tagClass {});
163
+ }
164
+
165
+ return tag;
166
+ }
167
+ }
168
+
169
+ /**
170
+ * @license
171
+ * Copyright 2018 Google LLC
172
+ * SPDX-License-Identifier: BSD-3-Clause
173
+ */const o=o=>o??E;
174
+
175
+ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
176
+ // See LICENSE in the project root for license information.
177
+
178
+
179
+ /**
180
+ * @attr {Boolean} hidden - If present, the component will be hidden both visually and from screen readers
181
+ * @attr {Boolean} hiddenVisually - If present, the component will be hidden visually, but still read by screen readers
182
+ * @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
183
+ */
184
+
185
+ class AuroElement extends r {
186
+
187
+ // function to define props used within the scope of this component
188
+ static get properties() {
189
+ return {
190
+ hidden: { type: Boolean,
191
+ reflect: true },
192
+ hiddenVisually: { type: Boolean,
193
+ reflect: true },
194
+ hiddenAudible: { type: Boolean,
195
+ reflect: true },
196
+ };
197
+ }
198
+
199
+ /**
200
+ * @private Function that determines state of aria-hidden
201
+ */
202
+ hideAudible(value) {
203
+ if (value) {
204
+ return 'true'
205
+ }
206
+
207
+ return 'false'
208
+ }
209
+ }
210
+
211
+ 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>"};
212
+
213
+ /* eslint-disable no-underscore-dangle, jsdoc/no-undefined-types, jsdoc/require-param-description */
214
+
215
+ const _fetchMap = new Map();
216
+
217
+ /**
218
+ * A callback to parse Response body.
219
+ *
220
+ * @callback ResponseParser
221
+ * @param {Fetch.Response} response
222
+ * @returns {Promise}
223
+ */
224
+
225
+ /**
226
+ * A minimal in-memory map to de-duplicate Fetch API media requests.
227
+ *
228
+ * @param {String} uri
229
+ * @param {Object} [options={}]
230
+ * @param {ResponseParser} [options.responseParser=(response) => response.text()]
231
+ * @returns {Promise}
232
+ */
233
+ const cacheFetch = (uri, options = {}) => {
234
+ const responseParser = options.responseParser || ((response) => response.text());
235
+ if (!_fetchMap.has(uri)) {
236
+ _fetchMap.set(uri, fetch(uri).then(responseParser));
237
+ }
238
+ return _fetchMap.get(uri);
239
+ };
240
+
241
+ var styleCss$2 = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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}:host .logo{color:var(--ds-color-brand-midnight-400, #01426a)}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}.label{display:flex;align-items:flex-start}.label svg{margin:0 var(--ds-size-50, 0.25rem)}.labelContainer{line-height:1.8}`;
242
+
243
+ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
244
+ // See LICENSE in the project root for license information.
245
+
246
+
247
+ // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
248
+ /**
249
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-icon
250
+ * @slot - Hidden from visibility, used for a11y if icon description is needed
251
+ */
252
+
253
+ // build the component class
254
+ class BaseIcon extends AuroElement {
255
+ constructor() {
256
+ super();
257
+ this.onDark = false;
258
+ }
259
+
260
+ // function to define props used within the scope of this component
261
+ static get properties() {
262
+ return {
263
+ ...super.properties,
264
+ onDark: {
265
+ type: Boolean,
266
+ reflect: true
267
+ },
268
+
269
+ /**
270
+ * @private
271
+ */
272
+ svg: {
273
+ attribute: false,
274
+ reflect: true
275
+ }
276
+ };
277
+ }
278
+
279
+ static get styles() {
280
+ return i$5`
281
+ ${styleCss$2}
282
+ `;
283
+ }
284
+
285
+ /**
286
+ * Async function to fetch requested icon from npm CDN.
287
+ * @private
288
+ * @param {string} category - Icon category.
289
+ * @param {string} name - Icon name.
290
+ * @returns {SVGElement} DOM - Ready HTML to be appended.
291
+ */
292
+ async fetchIcon(category, name) {
293
+ let iconHTML = '';
294
+
295
+ if (category === 'logos') {
296
+ iconHTML = await cacheFetch(`${this.uri}/${category}/${name}.svg`);
297
+ } else {
298
+ iconHTML = await cacheFetch(`${this.uri}/icons/${category}/${name}.svg`);
299
+ }
300
+
301
+ const dom = new DOMParser().parseFromString(iconHTML, 'text/html');
302
+
303
+ return dom.body.querySelector('svg');
304
+ }
305
+
306
+ // lifecycle function
307
+ async firstUpdated() {
308
+ if (!this.customSvg) {
309
+ const svg = await this.fetchIcon(this.category, this.name);
310
+
311
+ if (svg) {
312
+ this.svg = svg;
313
+ } else if (!svg) {
314
+ const penDOM = new DOMParser().parseFromString(error.svg, 'text/html');
315
+
316
+ this.svg = penDOM.body.firstChild;
317
+ }
318
+ }
319
+ }
320
+ }
321
+
322
+ var tokensCss$3 = i$5`:host{--ds-auro-icon-color: var(--ds-color-icon-primary-default, $ds-color-icon-primary-default);--ds-auro-icon-size: var(--ds-size-300, $ds-size-300)}`;
323
+
324
+ var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){color:inherit}:host(:not([onDark])[accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-default, #a2c270)}:host(:not([onDark])[disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-default, #adadad)}:host(:not([onDark])[emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-default, #2a2a2a)}:host(:not([onDark])[error]){--ds-auro-icon-color: var(--ds-color-icon-error-default, #cc1816)}:host(:not([onDark])[info]){--ds-auro-icon-color: var(--ds-color-icon-info-default, #326aa5)}:host(:not([onDark])[secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-default, #7e8894)}:host(:not([onDark])[subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-default, #a0c9f1)}:host(:not([onDark])[success]){--ds-auro-icon-color: var(--ds-color-icon-success-default, #40a080)}:host(:not([onDark])[tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-default, #afb9c6)}:host(:not([onDark])[warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-default, #c49432)}:host([onDark]){--ds-auro-icon-color: var(--ds-color-icon-primary-inverse, #f7f7f7)}:host([onDark][accent]){--ds-auro-icon-color: var(--ds-color-icon-accent-inverse, #badd81)}:host([onDark][disabled]){--ds-auro-icon-color: var(--ds-color-icon-ui-primary-disabled-inverse, #7e7e7e)}:host([onDark][emphasis]){--ds-auro-icon-color: var(--ds-color-icon-emphasis-inverse, #ffffff)}:host([onDark][error]){--ds-auro-icon-color: var(--ds-color-icon-error-inverse, #f9aca6)}:host([onDark][info]){--ds-auro-icon-color: var(--ds-color-icon-info-inverse, #89b2d4)}:host([onDark][secondary]){--ds-auro-icon-color: var(--ds-color-icon-secondary-inverse, #ccd2db)}:host([onDark][subtle]){--ds-auro-icon-color: var(--ds-color-icon-subtle-inverse, #326aa5)}:host([onDark][success]){--ds-auro-icon-color: var(--ds-color-icon-success-inverse, #8eceb9)}:host([onDark][tertiary]){--ds-auro-icon-color: var(--ds-color-icon-tertiary-inverse, #939fad)}:host([onDark][warning]){--ds-auro-icon-color: var(--ds-color-icon-warning-inverse, #f2c153)}`;
325
+
326
+ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
327
+ // See LICENSE in the project root for license information.
26
328
 
27
- var styleCss = css`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:flex;flex-direction:row;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);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{height:var(--ds-size-300, 1.5rem);width: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;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-200, 1rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50, 0.25rem)}:host([alignRight]) .componentWrapper{display:flex;flex-direction:column;align-items:flex-end}:host([fluid]) .trigger{width:100%}:host([grouped]) .componentWrapper{border-width:1px;border-style:solid}: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;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]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
28
329
 
29
- var colorCss = css`: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(:focus){--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-focus-default, #7e7e7e)}:host(:hover){--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-hover-default, #525252)}:host([grouped]) .componentWrapper{border-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-color-border-active-default, #0074c8)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}: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-color-border-active-default, #0074c8)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}`;
330
+ // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
331
+ /**
332
+ * auro-icon provides users a way to use the Auro Icons by simply passing in the category and name.
333
+ *
334
+ * @attr {String} category - The category of the icon you are looking for. See https://auro.alaskaair.com/icons/usage.
335
+ * @attr {String} name - The name of the icon you are looking for without the file extension. See https://auro.alaskaair.com/icons/usage
336
+ * @attr {Boolean} customColor - Removes primary selector.
337
+ * @attr {Boolean} customSvg - When true, auro-icon will render a custom SVG inside the default slot.
338
+ * @attr {Boolean} label - Exposes content in slot as icon label.
339
+ * @attr {Boolean} primary - DEPRECATED: Sets the icon to use the baseline primary icon style.
340
+ * @attr {Boolean} accent - Sets the icon to use the accent style.
341
+ * @attr {Boolean} emphasis - Sets the icon to use the emphasis style.
342
+ * @attr {Boolean} disabled - Sets the icon to use the disabled style.
343
+ * @attr {Boolean} error - Sets the icon to use the error style.
344
+ * @attr {Boolean} info - Sets the icon to use the info style.
345
+ * @attr {Boolean} secondary - Sets the icon to use the secondary style.
346
+ * @attr {Boolean} tertiary - Sets the icon to use the tertiary style.
347
+ * @attr {Boolean} subtle - Sets the icon to use the subtle style.
348
+ * @attr {Boolean} success - Sets the icon to use the success style.
349
+ * @attr {Boolean} warning - Sets the icon to use the warning style.
350
+ * @attr {String} ariaHidden - Set aria-hidden value. Default is `true`. Option is `false`.
351
+ * @attr {String} uri - Set the uri for CDN used when fetching icons
352
+ * @slot - Hidden from visibility, used for a11y if icon description is needed.
353
+ * @slot svg - Used for custom SVG content.
354
+ */
30
355
 
31
- var tokensCss = css`:host{--ds-auro-accordion-content-border-color: transparent;--ds-auro-accordion-group-border-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-accordion-trigger-border-color: transparent;--ds-auro-accordion-trigger-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-default-default, #7e7e7e)}`;
356
+ // build the component class
357
+ class AuroIcon extends BaseIcon {
358
+ constructor() {
359
+ super();
360
+
361
+ this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
362
+
363
+ this.privateDefaults();
364
+ }
365
+
366
+ /**
367
+ * Internal Defaults.
368
+ * @private
369
+ * @returns {void}
370
+ */
371
+ privateDefaults() {
372
+ this.accent = false;
373
+ this.customColor = false;
374
+ this.customSvg = false;
375
+ this.disabled = false;
376
+ this.emphasis = false;
377
+ this.error = false;
378
+ this.info = false;
379
+ this.label = false;
380
+ this.primary = false;
381
+ this.secondary = false;
382
+ this.subtle = false;
383
+ this.success = false;
384
+ this.tertiary = false;
385
+ this.warning = false;
386
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
387
+ }
388
+
389
+ // function to define props used within the scope of this component
390
+ static get properties() {
391
+ return {
392
+ ...super.properties,
393
+ accent: {
394
+ type: Boolean,
395
+ reflect: true
396
+ },
397
+ ariaHidden: {
398
+ type: String,
399
+ reflect: true
400
+ },
401
+ category: {
402
+ type: String,
403
+ reflect: true
404
+ },
405
+ customColor: {
406
+ type: Boolean
407
+ },
408
+ customSvg: {
409
+ type: Boolean
410
+ },
411
+ disabled: {
412
+ type: Boolean,
413
+ reflect: true
414
+ },
415
+ emphasis: {
416
+ type: Boolean,
417
+ reflect: true
418
+ },
419
+ error: {
420
+ type: Boolean,
421
+ reflect: true
422
+ },
423
+ info: {
424
+ type: Boolean,
425
+ reflect: true
426
+ },
427
+ label: {
428
+ type: Boolean,
429
+ reflect: true
430
+ },
431
+ name: {
432
+ type: String,
433
+ reflect: true
434
+ },
435
+ primary: {
436
+ type: Boolean,
437
+ reflect: true
438
+ },
439
+ secondary: {
440
+ type: Boolean,
441
+ reflect: true
442
+ },
443
+ subtle: {
444
+ type: Boolean,
445
+ reflect: true
446
+ },
447
+ success: {
448
+ type: Boolean,
449
+ reflect: true
450
+ },
451
+ tertiary: {
452
+ type: Boolean,
453
+ reflect: true
454
+ },
455
+ uri: {
456
+ type: String
457
+ },
458
+ warning: {
459
+ type: Boolean,
460
+ reflect: true
461
+ }
462
+ };
463
+ }
464
+
465
+ static get styles() {
466
+ return [
467
+ super.styles,
468
+ i$5`${tokensCss$3}`,
469
+ i$5`${styleCss$2}`,
470
+ i$5`${colorCss$3}`
471
+ ];
472
+ }
473
+
474
+ /**
475
+ * This will register this element with the browser.
476
+ * @param {string} [name="auro-icon"] - The name of element that you want to register to.
477
+ *
478
+ * @example
479
+ * AuroIcon.register("custom-icon") // this will register this element to <custom-icon/>
480
+ *
481
+ */
482
+ static register(name = "auro-icon") {
483
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroIcon);
484
+ }
485
+
486
+ connectedCallback() {
487
+ super.connectedCallback();
488
+
489
+ // Add the tag name as an attribute if it is different than the component name
490
+ this.runtimeUtils.handleComponentTagRename(this, 'auro-icon');
491
+ }
492
+
493
+ // function that renders the HTML and CSS into the scope of the component
494
+ render() {
495
+ const a11y = {
496
+ 'labelContainer': true,
497
+ 'util_displayHiddenVisually': !this.label
498
+ };
499
+
500
+ const classes = {
501
+ 'label': this.label
502
+ };
503
+
504
+ return x`
505
+ <div
506
+ class="${e(classes)}"
507
+ title="${o(this.title || undefined)}">
508
+ <span aria-hidden="${o(this.ariaHidden ? this.ariaHidden : true)}" part="svg">
509
+ ${this.customSvg ? x`
510
+ <slot name="svg"></slot>
511
+ ` : x`
512
+ ${this.svg}
513
+ `
514
+ }
515
+ </span>
516
+
517
+ <div class="${e(a11y)}">
518
+ <slot></slot>
519
+ </div>
520
+ </div>
521
+ `;
522
+ }
523
+ }
524
+
525
+ var iconVersion = '6.0.2';
526
+
527
+ var chevronUp = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; up.","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":"chevron-up","category":"interface","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>"};
528
+
529
+ var chevronDown = {"role":"img","color":"currentColor","title":"","desc":"Directional indicator; down.","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":"chevron-down","category":"interface","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>"};
530
+
531
+ var styleCss$1 = i$5`:host{interpolate-size:allow-keywords}:host .trigger{position:relative;cursor:pointer;display:flex;flex-direction:row;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);font-size:var(--ds-text-heading-300-size, 1.125rem)}:host .iconWrapper{height:var(--ds-size-300, 1.5rem);margin-top:-2px}:host [auro-icon]{--ds-auro-icon-size: var(--ds-size-300,$ds-size-300)}:host [auro-icon][hidden]{display:none}:host .content{width:100%;transition:all .5s ease-in-out;transition-property:height;font-size:var(--ds-text-body-size-default, 1rem)}:host .componentWrapper{height:100%;overflow:hidden}:host .contentWrapper{padding-left:var(--ds-size-400, 2rem);padding-bottom:var(--ds-size-300, 1.5rem);padding-right:var(--ds-size-200, 1rem)}:host(:focus) .trigger{border-width:1px;border-style:solid}:host([chevron=right]) ::slotted([slot=trigger]){padding-left:0;padding-right:var(--ds-size-50, 0.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(: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;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]:not([expanded]):hover) .trigger{text-decoration:unset}:host([variant=sm]) ::slotted([slot=trigger]){font-size:var(--ds-text-body-size-default, 1rem)}:host([variant=lg]) ::slotted([slot=trigger]){font-size:var(--ds-text-heading-400-size, 1.25rem)}:host([chevron=none]) ::slotted([slot=trigger]),:host([chevron=none]) .contentWrapper{padding-left:unset}`;
532
+
533
+ var colorCss$2 = 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(:focus){--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-focus-default, #7e7e7e)}:host(:hover){--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-hover-default, #525252)}: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-color-border-active-default, #0074c8)}:host([emphasis]) .trigger:focus{--ds-auro-accordion-trigger-border-color: var(--ds-color-border-active-default, #0074c8)}: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-color-border-active-default, #0074c8)}:host([emphasis][expanded]) .content{--ds-auro-accordion-content-border-color: var(--ds-color-border-subtle-default, #f0f7fd)}`;
534
+
535
+ var tokensCss$2 = i$5`:host{--ds-auro-accordion-content-border-color: transparent;--ds-auro-accordion-group-border-color: var(--ds-color-border-divider-default, rgba(0, 0, 0, 0.12));--ds-auro-accordion-trigger-border-color: transparent;--ds-auro-accordion-trigger-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-accordion-trigger-icon-color: var(--ds-color-icon-ui-secondary-default-default, #7e7e7e)}`;
32
536
 
33
537
  // Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
34
538
  // See LICENSE in the project root for license information.
@@ -55,7 +559,7 @@ var tokensCss = css`:host{--ds-auro-accordion-content-border-color: transparent;
55
559
  */
56
560
 
57
561
  // build the component class
58
- class AuroAccordion extends LitElement {
562
+ class AuroAccordion extends r {
59
563
  constructor() {
60
564
  super();
61
565
 
@@ -69,7 +573,7 @@ class AuroAccordion extends LitElement {
69
573
  /**
70
574
  * @private
71
575
  */
72
- this.runtimeUtils = new AuroLibraryRuntimeUtils__default();
576
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
73
577
 
74
578
  this.expanded = false;
75
579
  }
@@ -110,9 +614,9 @@ class AuroAccordion extends LitElement {
110
614
 
111
615
  static get styles() {
112
616
  return [
113
- colorCss,
114
- styleCss,
115
- tokensCss
617
+ colorCss$2,
618
+ styleCss$1,
619
+ tokensCss$2
116
620
  ];
117
621
  }
118
622
 
@@ -125,7 +629,7 @@ class AuroAccordion extends LitElement {
125
629
  *
126
630
  */
127
631
  static register(name = "auro-accordion") {
128
- AuroLibraryRuntimeUtils__default.prototype.registerComponent(name, AuroAccordion);
632
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordion);
129
633
  }
130
634
 
131
635
  firstUpdated() {
@@ -145,7 +649,7 @@ class AuroAccordion extends LitElement {
145
649
 
146
650
  svg.setAttribute('slot', 'svg');
147
651
 
148
- return html`${svg}`;
652
+ return u`${svg}`;
149
653
  }
150
654
 
151
655
  /**
@@ -172,25 +676,25 @@ class AuroAccordion extends LitElement {
172
676
  "lg": this.getAttribute('variant') === 'lg',
173
677
  };
174
678
 
175
- return html`
679
+ return u`
176
680
  <div class="componentWrapper" part="accordion">
177
681
  <auro-accordion-button
178
682
  ?fluid="${this.emphasis}"
179
- class="${classMap(buttonClasses)}"
683
+ class="${e(buttonClasses)}"
180
684
  id="accordionTrigger"
181
685
  aria-controls="accordionContent"
182
686
  aria-expanded="${this.expanded}"
183
687
  @click="${this.toggle}"
184
688
  part="trigger">
185
- <${this.iconTag} slot="icon" customSvg customSize customColor ?hidden="${!this.expanded}">
689
+ <${this.iconTag} slot="icon" customSvg customColor ?hidden="${!this.expanded}">
186
690
  ${this.generateIconHtml(chevronUp.svg)}
187
691
  </${this.iconTag}>
188
- <${this.iconTag} slot="icon" customSvg customSize customColor ?hidden="${this.expanded}">
692
+ <${this.iconTag} slot="icon" customSvg customColor ?hidden="${this.expanded}">
189
693
  ${this.generateIconHtml(chevronDown.svg)}
190
694
  </${this.iconTag}>
191
695
  <slot name="trigger" part="triggerSlot"></slot>
192
696
  </auro-accordion-button>
193
- <div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || nothing}" part="content">
697
+ <div class="content" id="accordionContent" aria-labelledby="accordionTrigger" inert="${!this.expanded || E}" part="content">
194
698
  <div class="contentWrapper" part="contentWrapper">
195
699
  <slot></slot>
196
700
  </div>
@@ -215,14 +719,14 @@ class AuroAccordion extends LitElement {
215
719
  */
216
720
 
217
721
  // build the component class
218
- class AuroAccordionGroup extends LitElement {
722
+ class AuroAccordionGroup extends r {
219
723
  constructor() {
220
724
  super();
221
725
 
222
726
  /**
223
727
  * @private
224
728
  */
225
- this.runtimeUtils = new AuroLibraryRuntimeUtils__default();
729
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
226
730
  }
227
731
 
228
732
  // This function is to define props used within the scope of this component
@@ -252,7 +756,7 @@ class AuroAccordionGroup extends LitElement {
252
756
  *
253
757
  */
254
758
  static register(name = "auro-accordion-group") {
255
- AuroLibraryRuntimeUtils__default.prototype.registerComponent(name, AuroAccordionGroup);
759
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionGroup);
256
760
  }
257
761
 
258
762
  firstUpdated() {
@@ -316,7 +820,7 @@ class AuroAccordionGroup extends LitElement {
316
820
 
317
821
  // function that renders the HTML and CSS into the scope of the component
318
822
  render() {
319
- return html$1`
823
+ return x`
320
824
  <div>
321
825
  <slot @slotchange="${this.handleSlotContentChange}"></slot>
322
826
  </div>
@@ -324,7 +828,396 @@ class AuroAccordionGroup extends LitElement {
324
828
  }
325
829
  }
326
830
 
327
- var styleButtonCss = css`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .auro-button{all:unset;width:100%;padding:var(--ds-size-200, 1rem) 0;cursor:pointer;pointer-events:none}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host(.sm) .auro-button{padding:var(--ds-size-100, 0.5rem) 0}:host(.lg) .auro-button{padding:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)) 0}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
831
+ var styleButtonCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset}:host .auro-button{all:unset;width:100%;padding:var(--ds-size-200, 1rem) 0;cursor:pointer;pointer-events:none}:host .auro-button:after{border-color:transparent}:host .contentWrapper{display:flex;flex-direction:row-reverse}:host .textSlot{display:flex;flex:1}:host(.sm) .auro-button{padding:var(--ds-size-100, 0.5rem) 0}:host(.lg) .auro-button{padding:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem)) 0}:host([fluid]) .contentWrapper{width:100%}:host(.iconRight) .contentWrapper{display:flex;flex-direction:row}`;
832
+
833
+ var styleCssAuroButton = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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}:host([fluid]) .auro-button,:host([fluid=true]) .auro-button{min-width:auto;width:100%}:host([variant=flat]){display:inline-block;height:var(--ds-size-300, 1.5rem);width:var(--ds-size-300, 1.5rem)}:host([variant=flat]) .auro-button{height:100%;width:100%}::slotted(svg){vertical-align:middle}slot{pointer-events:none}.auro-button{position:relative;padding:0 var(--ds-size-300, 1.5rem);cursor:pointer;border-width:1px;border-style:solid;border-radius:var(--ds-border-radius, 0.375rem);font-family:var(--ds-font-family-default, "AS Circular", Helvetica Neue, Arial, sans-serif);font-size:var(--ds-text-body-size-default, 1rem);font-weight:var(--ds-text-body-default-weight, 500);overflow:hidden;text-overflow:ellipsis;user-select:none;white-space:nowrap;min-height:var(--ds-size-600, 3rem);max-height:var(--ds-size-600, 3rem);display:inline-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}.auro-button:active{transform:scale(0.95)}.auro-button:focus-visible:not([variant=secondary]):not([variant=tertiary]):not([variant=flat]):after{display:block;content:"";height:calc(100% - 2px);width:calc(100% - 2px);position:absolute;top:1px;left:1px;border-radius:4px;border-style:solid;border-width:2px}.auro-button:focus-visible[variant=secondary]:after,.auro-button:focus-visible[variant=tertiary]:after{display:block;content:"";height:100%;width:100%;position:absolute;top:0;left:0;border-radius:var(--ds-border-radius, 0.375rem);border-style:solid;border-width:2px}.auro-button.loading{cursor:not-allowed}.auro-button.loading *:not([auro-loader]){visibility:hidden}@media screen and (min-width: 576px){.auro-button{min-width:8.75rem;width:auto}}.auro-button:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=secondary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button[variant=flat]{height:unset;width:unset;min-height:unset;max-height:unset;min-width:unset;max-width:unset;border:0;border-radius:unset;gap:unset;padding:unset}.auro-button[onDark]:disabled{cursor:not-allowed;transform:unset}.auro-button[onDark][variant=secondary]:disabled{cursor:not-allowed;transform:unset}@media(hover: hover){.auro-button[onDark][variant=tertiary]:active,.auro-button[onDark][variant=tertiary]:hover{box-shadow:none}}.auro-button[onDark][variant=tertiary]:active{box-shadow:none}.auro-button[onDark][variant=tertiary]:disabled{cursor:not-allowed;transform:unset}.auro-button--slim{padding:var(--ds-size-100, 0.5rem) var(--ds-size-200, 1rem);font-size:var(--ds-text-body-size-sm, 0.875rem);min-width:unset;min-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem));max-height:calc(var(--ds-size-500, 2.5rem) - var(--ds-size-50, 0.25rem))}.auro-button--iconOnly{padding:0 var(--ds-size-100, 0.5rem);border-radius:100px;min-width:unset;height:var(--ds-size-600, 3rem);width:var(--ds-size-500, 2.5rem)}.auro-button--iconOnly ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}.auro-button--iconOnlySlim{padding:0 var(--ds-size-50, 0.25rem);height:calc(var(--ds-size-400, 2rem) + var(--ds-size-50, 0.25rem));width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-50, 0.25rem))}.auro-button--iconOnlySlim ::slotted(auro-icon){width:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-50, 0.25rem))}.auro-button--rounded{border-radius:100px;box-shadow:var(--ds-elevation-300, 0px 0px 15px rgba(0, 0, 0, 0.2));height:var(--ds-size-500, 2.5rem);min-width:unset;transition:all 300ms ease-out}.auro-button--rounded ::slotted(auro-icon){width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem)}:host([rounded]) .textSlot{transition:opacity 300ms ease-in;opacity:1}:host([rounded][iconOnly]) .textSlot{opacity:0}:host([rounded][iconOnly]) .textWrapper{display:none}:host([rounded][iconOnly]) .auro-button{min-width:unset;padding:unset;width:var(--ds-size-600, 3rem)}[auro-loader]{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);pointer-events:none}`;
834
+
835
+ var colorCss$1 = i$5`[auro-loader]{color:var(--ds-auro-button-loader-color)}.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:after{border-color:var(--ds-auro-button-border-inset-color)}.auro-button:not([ondark]):active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-default, #225296);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-default, #225296)}.auro-button:not([ondark])[disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-default, #a0c9f1)}@media(hover: hover){.auro-button:not([ondark]):active:not(:disabled),.auro-button:not([ondark]):hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-default, #193d73);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-default, #ffffff);--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.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-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-default, #193d73);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-default, #2c67b5)}.auro-button:not([ondark])[variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-default, #f0f7fd);--ds-auro-button-border-color: var(--ds-color-border-ui-active-default, #225296);--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-default, #f7f7f7);--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-default, #adadad);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-default, #2c67b5)}@media(hover: hover){.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-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-default, rgba(0, 0, 0, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-default, #193d73)}}.auro-button:not([ondark])[variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-default, #2c67b5)}.auro-button:not([ondark])[variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-default, rgba(0, 0, 0, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-default, #225296)}.auro-button:not([ondark])[variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-default, rgba(0, 0, 0, 0.03));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-default, #adadad)}.auro-button:not([ondark])[variant=flat]{color:var(--ds-color-icon-ui-secondary-default-default);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button:not([ondark])[variant=flat]:active:not(:disabled),.auro-button:not([ondark])[variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-default);background-color:transparent;background-image:none;border-color:transparent}}.auro-button:not([ondark])[variant=flat]:disabled{color:var(--ds-color-icon-ui-secondary-disabled-default);background-color:transparent;background-image:none;border-color:transparent}.auro-button[ondark]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-primary-default, #2a2a2a);--ds-auro-button-loader-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark]:active:not(:disabled),.auro-button[ondark]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-hover-inverse, #a8e9f7)}}.auro-button[ondark]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-active-inverse, #6ad5ef)}.auro-button[ondark][disabled]{--ds-auro-button-container-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-disabled-inverse, #275b72);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e);--ds-auro-button-border-color: var(--ds-color-container-ui-primary-disabled-inverse, #275b72)}.auro-button[ondark][variant=secondary]{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-default-inverse, rgba(255, 255, 255, 0.03));--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=secondary]:hover{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-hover-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-hover-inverse, #a8e9f7);--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=secondary]:focus-visible{--ds-auro-button-border-inset-color: var(--ds-color-border-ui-focus-inverse, #56bbde)}.auro-button[ondark][variant=secondary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: var(--ds-color-border-ui-active-inverse, #6ad5ef);--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=secondary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-secondary-disabled-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: var(--ds-color-border-ui-disabled-inverse, #7e7e7e);--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=tertiary]{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-default-inverse, rgba(255, 255, 255, 0.12));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-default-inverse, #56bbde)}@media(hover: hover){.auro-button[ondark][variant=tertiary]:active:not(:disabled),.auro-button[ondark][variant=tertiary]:hover:not(:disabled){--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-hover-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-hover-inverse, #a8e9f7)}}.auro-button[ondark][variant=tertiary]:focus-visible{--ds-auro-button-border-color: var(--ds-color-border-ui-default-inverse, #56bbde);--ds-auro-button-border-inset-color: var(--ds-color-border-ui-default-inverse, #56bbde)}.auro-button[ondark][variant=tertiary]:active{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-active-inverse, rgba(255, 255, 255, 0.06));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-active-inverse, #6ad5ef)}.auro-button[ondark][variant=tertiary]:disabled{--ds-auro-button-container-color: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-container-image: var(--ds-color-container-ui-tertiary-disabled-inverse, rgba(255, 255, 255, 0.25));--ds-auro-button-border-color: transparent;--ds-auro-button-text-color: var(--ds-color-text-ui-disabled-inverse, #7e7e7e)}.auro-button[ondark][variant=flat]{color:var(--ds-color-icon-ui-secondary-default-inverse);background-color:transparent;background-image:none;border-color:transparent}@media(hover: hover){.auro-button[ondark][variant=flat]:active:not(:disabled),.auro-button[ondark][variant=flat]:hover:not(:disabled){color:var(--ds-color-icon-ui-secondary-hover-inverse);background-color:transparent;background-image:none;border-color:transparent}}.auro-button[ondark][variant=flat]:disabled{color:var(--ds-color-icon-ui-disabled-default);background-color:transparent;background-image:none;border-color:transparent}`;
836
+
837
+ var tokensCss$1 = i$5`:host{--ds-auro-button-border-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-border-inset-color: var(--ds-color-border-emphasis-inverse, #f2f7fb);--ds-auro-button-container-color: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-container-image: var(--ds-color-container-ui-primary-default-default, #2c67b5);--ds-auro-button-loader-color: var(--ds-color-utility-navy-default, #265688);--ds-auro-button-text-color: var(--ds-color-text-primary-inverse, #ffffff);--ds-auro-button-tap-color: transparent}`;
838
+
839
+ var styleCss = i$5`*,*:before,*:after{box-sizing:border-box}@media(prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}*:focus-visible{outline:0}*:focus-visible{outline:0}: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;font-size:1rem}:host>span{opacity:1}:host>.loader{display:none}:host>.no-animation{display:block}}`;
840
+
841
+ var colorCss = 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-color-utility-navy-default, #265688)}:host([ondark]){--ds-auro-loader-color: var(--ds-color-utility-cyan-inverse, #a8e9f7)}:host([white]){--ds-auro-loader-color: var(--ds-color-utility-neutral-inverse, #ccd2db)}: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}`;
842
+
843
+ var tokensCss = i$5`:host{--ds-auro-loader-background-color: currentcolor;--ds-auro-loader-border-color: currentcolor;--ds-auro-loader-color: currentcolor}`;
844
+
845
+ // Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
846
+ // See LICENSE in the project root for license information.
847
+
848
+
849
+ // See https://git.io/JJ6SJ for "How to document your components using JSDoc"
850
+ /**
851
+ * The auro-loader element is an easy to use animated loader component.
852
+ *
853
+ * @attr {Boolean} pulse - sets loader type
854
+ * @attr {Boolean} ringworm - sets loader type
855
+ * @attr {Boolean} laser - sets loader type
856
+ * @attr {Boolean} orbit - sets loader type
857
+ * @attr {Boolean} white - sets color of loader to white
858
+ * @attr {Boolean} ondark - sets color of loader to auro-color-ui-default-on-dark
859
+ * @attr {Boolean} onlight - sets color of loader to auro-color-ui-default-on-light
860
+ * @attr {Boolean} xs - sets size to extra small
861
+ * @attr {Boolean} sm - sets size to small
862
+ * @attr {Boolean} md - sets size to medium
863
+ * @attr {Boolean} lg - sets size to large
864
+ * @csspart element - apply style to adjust speed of animation
865
+ */
866
+
867
+ // build the component class
868
+ class AuroLoader extends r {
869
+ constructor() {
870
+ super();
871
+
872
+ /**
873
+ * @private
874
+ */
875
+ this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
876
+
877
+ /**
878
+ * @private
879
+ */
880
+ this.mdCount = 3;
881
+
882
+ /**
883
+ * @private
884
+ */
885
+ this.smCount = 2;
886
+
887
+ /**
888
+ * @private
889
+ */
890
+ this.runtimeUtils = new AuroLibraryRuntimeUtils();
891
+
892
+ this.orbit = false;
893
+ this.ringworm = false;
894
+ this.laser = false;
895
+ this.pulse = false;
896
+ }
897
+
898
+ // function to define props used within the scope of this component
899
+ static get properties() {
900
+ return {
901
+ pulse: {
902
+ type: Boolean,
903
+ reflect: true
904
+ },
905
+ orbit: {
906
+ type: Boolean,
907
+ reflect: true
908
+ },
909
+ ringworm: {
910
+ type: Boolean,
911
+ reflect: true
912
+ },
913
+ laser: {
914
+ type: Boolean,
915
+ reflect: true
916
+ }
917
+ };
918
+ }
919
+
920
+ static get styles() {
921
+ return [
922
+ i$5`${styleCss}`,
923
+ i$5`${colorCss}`,
924
+ i$5`${tokensCss}`
925
+ ];
926
+ }
927
+
928
+ /**
929
+ * This will register this element with the browser.
930
+ * @param {string} [name="auro-loader"] - The name of element that you want to register to.
931
+ *
932
+ * @example
933
+ * AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
934
+ *
935
+ */
936
+ static register(name = "auro-loader") {
937
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
938
+ }
939
+
940
+ firstUpdated() {
941
+ // Add the tag name as an attribute if it is different than the component name
942
+ this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
943
+ }
944
+
945
+ connectedCallback() {
946
+ super.connectedCallback();
947
+ }
948
+
949
+ /**
950
+ * @private
951
+ * @returns {Array} Numbered array for template map.
952
+ */
953
+ defineTemplate() {
954
+ let nodes = Array.from(Array(this.mdCount).keys());
955
+
956
+ if (this.orbit || this.laser) {
957
+ nodes = Array.from(Array(this.smCount).keys());
958
+ } else if (this.ringworm) {
959
+ nodes = Array.from(Array(0).keys());
960
+ }
961
+
962
+ return nodes;
963
+ }
964
+
965
+ // When using auroElement, use the following attribute and function when hiding content from screen readers.
966
+ // aria-hidden="${this.hideAudible(this.hiddenAudible)}"
967
+
968
+ // function that renders the HTML and CSS into the scope of the component
969
+ render() {
970
+ return x`
971
+ ${this.defineTemplate().map((idx) => x`
972
+ <span part="element" class="loader node-${idx}"></span>
973
+ `)}
974
+
975
+ <div class="no-animation">Loading...</div>
976
+
977
+ ${this.ringworm ? x`
978
+ <svg part="element" class="circular" viewBox="25 25 50 50">
979
+ <circle class="path" cx="50" cy="50" r="20" fill="none"/>
980
+ </svg>`
981
+ : ``
982
+ }
983
+ `;
984
+ }
985
+ }
986
+
987
+ var loaderVersion = '3.1.1';
988
+
989
+ // Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
990
+ // See LICENSE in the project root for license information.
991
+
992
+
993
+ /**
994
+ * @attr {Boolean} autofocus - This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user
995
+ * @attr {Boolean} disabled - If set to true button will become disabled and not allow for interactions
996
+ * @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
997
+ * @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
998
+ * @attr {Boolean} onDark - Set value for on-dark version of auro-button
999
+ * @attr {Boolean} rounded - If set to true, the button will have a rounded shape
1000
+ * @attr {Boolean} slim - Set value for slim version of auro-button
1001
+ * @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
1002
+ * @attr {String} arialabel - Populates the `aria-label` attribute that is used to define a string that labels the current element. Use it in cases where a text label is not visible on the screen. If there is visible text labeling the element, use `aria-labelledby` instead.
1003
+ * @attr {String} arialabelledby - Populates the `aria-labelledby` attribute that establishes relationships between objects and their label(s), and its value should be one or more element IDs, which refer to elements that have the text needed for labeling. List multiple element IDs in a space delimited fashion.
1004
+ * @attr {String} id - Set the unique ID of an element.
1005
+ * @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
1006
+ * @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
1007
+ * @attr {String} value - Defines the value associated with the button which is submitted with the form data.
1008
+ * @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary`
1009
+ * @attr {Boolean} secondary - DEPRECATED
1010
+ * @attr {Boolean} tertiary - DEPRECATED
1011
+ * @prop {Boolean} ready - When false the component API should not be called.
1012
+ * @event auroButton-ready - Notifies that the component has finished initializing.
1013
+ * @slot - Default slot for the text of the button.
1014
+ * @slot icon - Slot to provide auro-icon for the button.
1015
+ * @csspart button - Apply CSS to HTML5 button.
1016
+ * @csspart loader - Apply CSS to auro-loader.
1017
+ * @csspart text - Apply CSS to text slot.
1018
+ * @csspart icon - Apply CSS to icon slot.
1019
+ */
1020
+
1021
+ /* eslint-disable lit/no-invalid-html, lit/binding-positions */
1022
+
1023
+ class AuroButton extends r {
1024
+
1025
+ constructor() {
1026
+ super();
1027
+ this.autofocus = false;
1028
+ this.disabled = false;
1029
+ this.iconOnly = false;
1030
+ this.loading = false;
1031
+ this.onDark = false;
1032
+ this.ready = false;
1033
+ this.secondary = false;
1034
+ this.tertiary = false;
1035
+ this.rounded = false;
1036
+ this.slim = false;
1037
+ this.fluid = false;
1038
+
1039
+ /**
1040
+ * Generate unique names for dependency components.
1041
+ */
1042
+ const versioning = new AuroDependencyVersioning();
1043
+
1044
+ /**
1045
+ * @private
1046
+ */
1047
+ this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
1048
+ }
1049
+
1050
+ static get styles() {
1051
+ return [
1052
+ tokensCss$1,
1053
+ styleCssAuroButton,
1054
+ colorCss$1
1055
+ ];
1056
+ }
1057
+
1058
+ static get properties() {
1059
+ return {
1060
+ autofocus: {
1061
+ type: Boolean,
1062
+ reflect: true
1063
+ },
1064
+ disabled: {
1065
+ type: Boolean,
1066
+ reflect: true
1067
+ },
1068
+ secondary: {
1069
+ type: Boolean,
1070
+ reflect: true
1071
+ },
1072
+ tertiary: {
1073
+ type: Boolean,
1074
+ reflect: true
1075
+ },
1076
+ fluid: {
1077
+ type: Boolean,
1078
+ reflect: true
1079
+ },
1080
+ iconOnly: {
1081
+ type: Boolean,
1082
+ reflect: true
1083
+ },
1084
+ loading: {
1085
+ type: Boolean,
1086
+ reflect: true
1087
+ },
1088
+ onDark: {
1089
+ type: Boolean,
1090
+ reflect: true
1091
+ },
1092
+ rounded: {
1093
+ type: Boolean,
1094
+ reflect: true
1095
+ },
1096
+ slim: {
1097
+ type: Boolean,
1098
+ reflect: true
1099
+ },
1100
+ arialabel: {
1101
+ type: String,
1102
+ reflect: true
1103
+ },
1104
+ arialabelledby: {
1105
+ type: String,
1106
+ reflect: true
1107
+ },
1108
+ title: {
1109
+ type: String,
1110
+ reflect: true
1111
+ },
1112
+ type: {
1113
+ type: String,
1114
+ reflect: true
1115
+ },
1116
+ value: {
1117
+ type: String,
1118
+ reflect: true
1119
+ },
1120
+ variant: {
1121
+ type: String,
1122
+ reflect: true
1123
+ },
1124
+ ready: { type: Boolean },
1125
+ };
1126
+ }
1127
+
1128
+ /**
1129
+ * This will register this element with the browser.
1130
+ * @param {string} [name="auro-button"] - The name of element that you want to register to.
1131
+ *
1132
+ * @example
1133
+ * AuroButton.register("custom-button") // this will register this element to <custom-button/>
1134
+ *
1135
+ */
1136
+ static register(name = "auro-button") {
1137
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
1138
+ }
1139
+
1140
+ /**
1141
+ * Internal method to apply focus to the HTML5 button.
1142
+ * @private
1143
+ * @returns {void}
1144
+ */
1145
+ focus() {
1146
+ this.renderRoot.querySelector('button').focus();
1147
+ }
1148
+
1149
+ /**
1150
+ * Marks the component as ready and sends event.
1151
+ * @private
1152
+ * @returns {void}
1153
+ */
1154
+ notifyReady() {
1155
+ this.ready = true;
1156
+
1157
+ this.dispatchEvent(new CustomEvent('auroButton-ready', {
1158
+ bubbles: true,
1159
+ cancelable: false,
1160
+ composed: true,
1161
+ }));
1162
+ }
1163
+
1164
+ updated() {
1165
+ // support the old `secondary` and `tertiary` attributes` that are deprecated
1166
+ if (this.secondary) {
1167
+ this.setAttribute('variant', 'secondary');
1168
+ }
1169
+
1170
+ if (this.tertiary) {
1171
+ this.setAttribute('variant', 'tertiary');
1172
+ }
1173
+ }
1174
+
1175
+ firstUpdated() {
1176
+ this.notifyReady();
1177
+ }
1178
+
1179
+ render() {
1180
+ const classes = {
1181
+ 'util_insetLg--squish': true,
1182
+ 'auro-button': true,
1183
+ 'auro-button--rounded': this.rounded,
1184
+ 'auro-button--slim': this.slim,
1185
+ 'auro-button--iconOnly': this.iconOnly,
1186
+ 'auro-button--iconOnlySlim': this.iconOnly && this.slim,
1187
+ 'loading': this.loading
1188
+ };
1189
+
1190
+ return u`
1191
+ <button
1192
+ part="button"
1193
+ aria-label="${o(this.arialabel ? this.arialabel : undefined)}"
1194
+ aria-labelledby="${o(this.arialabelledby ? this.arialabelledby : undefined)}"
1195
+ ?autofocus="${this.autofocus}"
1196
+ class="${e(classes)}"
1197
+ ?disabled="${this.disabled || this.loading}"
1198
+ ?onDark="${this.onDark}"
1199
+ title="${o(this.title ? this.title : undefined)}"
1200
+ name="${o(this.name ? this.name : undefined)}"
1201
+ type="${o(this.type ? this.type : undefined)}"
1202
+ variant="${o(this.variant ? this.variant : undefined)}"
1203
+ .value="${o(this.value ? this.value : undefined)}"
1204
+ @click="${() => {}}"
1205
+ >
1206
+ ${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
1207
+
1208
+ <span class="contentWrapper">
1209
+ <span class="textSlot" part="text">
1210
+ ${this.iconOnly ? undefined : u`<slot></slot>`}
1211
+ </span>
1212
+
1213
+ <span part="icon">
1214
+ <slot name="icon"></slot>
1215
+ </span>
1216
+ </span>
1217
+ </button>
1218
+ `;
1219
+ }
1220
+ }
328
1221
 
329
1222
  // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
330
1223
  // See LICENSE in the project root for license information.
@@ -348,7 +1241,7 @@ class AuroAccordionButton extends AuroButton {
348
1241
  *
349
1242
  */
350
1243
  static register(name = "auro-accordion-button") {
351
- AuroLibraryRuntimeUtils.default.prototype.registerComponent(name, AuroAccordionButton);
1244
+ AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionButton);
352
1245
  }
353
1246
  }
354
1247