@aurodesignsystem/auro-accordion 5.2.1 → 5.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/README.md +1 -1
- package/coverage/lcov-report/index.html +23 -113
- package/coverage/lcov-report/{auro-accordion-button.js.html → src/auro-accordion-button.js.html} +89 -20
- package/coverage/lcov-report/{auro-accordion-group.js.html → src/auro-accordion-group.js.html} +10 -10
- package/coverage/lcov-report/{auro-accordion.js.html → src/auro-accordion.js.html} +127 -52
- package/coverage/lcov-report/{iconVersion.js.html → src/iconVersion.js.html} +11 -11
- package/coverage/lcov-report/src/index.html +161 -0
- package/coverage/lcov-report/{color-css.js.html → src/styles/color-css.js.html} +11 -11
- package/coverage/lcov-report/src/styles/index.html +161 -0
- package/coverage/lcov-report/{style-button-css.js.html → src/styles/style-button-css.js.html} +11 -11
- package/coverage/lcov-report/src/styles/style-css.js.html +91 -0
- package/coverage/lcov-report/{tokens-css.js.html → src/styles/tokens-css.js.html} +11 -11
- package/coverage/lcov.info +214 -146
- package/demo/api.html +18 -10
- package/demo/api.md +6 -6
- package/demo/api.min.js +967 -175
- package/demo/index.html +17 -10
- package/demo/index.min.js +967 -175
- package/dist/auro-accordion__bundled.js +967 -175
- package/dist/{auro-accordion-button.d.ts → src/auro-accordion-button.d.ts} +2 -0
- package/dist/src/auro-accordion-button.d.ts.map +1 -0
- package/dist/src/auro-accordion-group.d.ts.map +1 -0
- package/dist/{auro-accordion.d.ts → src/auro-accordion.d.ts} +4 -4
- package/dist/src/auro-accordion.d.ts.map +1 -0
- package/dist/src/iconVersion.d.ts +3 -0
- package/dist/src/iconVersion.d.ts.map +1 -0
- package/dist/{color-css.d.ts.map → src/styles/color-css.d.ts.map} +1 -1
- package/dist/src/styles/style-button-css.d.ts.map +1 -0
- package/dist/{style-css.d.ts.map → src/styles/style-css.d.ts.map} +1 -1
- package/dist/{tokens-css.d.ts.map → src/styles/tokens-css.d.ts.map} +1 -1
- package/dist/test/auro-accordion-group.test.d.ts +2 -0
- package/dist/test/auro-accordion-group.test.d.ts.map +1 -0
- package/dist/test/auro-accordion.test.d.ts +2 -0
- package/dist/test/auro-accordion.test.d.ts.map +1 -0
- package/package.json +37 -36
- package/src/auro-accordion-button.js +25 -2
- package/src/auro-accordion.js +49 -24
- package/src/iconVersion.js +1 -1
- package/src/styles/color-css.js +2 -0
- package/src/styles/color.css +43 -0
- package/src/{color.scss → styles/color.scss} +11 -7
- package/src/styles/style-button-css.js +2 -0
- package/src/styles/style-button.css +61 -0
- package/src/{style-button.scss → styles/style-button.scss} +16 -11
- package/src/styles/style-css.js +2 -0
- package/src/styles/style.css +347 -0
- package/src/{style.scss → styles/style.scss} +19 -33
- package/src/styles/tokens-css.js +2 -0
- package/src/styles/tokens.css +7 -0
- package/src/{tokens.scss → styles/tokens.scss} +4 -4
- package/coverage/lcov-report/style-css.js.html +0 -91
- package/dist/auro-accordion-button.d.ts.map +0 -1
- package/dist/auro-accordion-group.d.ts.map +0 -1
- package/dist/auro-accordion.d.ts.map +0 -1
- package/dist/iconVersion.d.ts +0 -3
- package/dist/iconVersion.d.ts.map +0 -1
- package/dist/style-button-css.d.ts.map +0 -1
- package/src/color-css.js +0 -2
- package/src/color.css +0 -39
- package/src/style-button-css.js +0 -2
- package/src/style-button.css +0 -53
- package/src/style-css.js +0 -2
- package/src/style.css +0 -147
- package/src/tokens-css.js +0 -2
- package/src/tokens.css +0 -7
- /package/dist/{auro-accordion-group.d.ts → src/auro-accordion-group.d.ts} +0 -0
- /package/dist/{color-css.d.ts → src/styles/color-css.d.ts} +0 -0
- /package/dist/{style-button-css.d.ts → src/styles/style-button-css.d.ts} +0 -0
- /package/dist/{style-css.d.ts → src/styles/style-css.d.ts} +0 -0
- /package/dist/{tokens-css.d.ts → src/styles/tokens-css.d.ts} +0 -0
package/demo/api.min.js
CHANGED
|
@@ -15,46 +15,52 @@ function expandedExample() {
|
|
|
15
15
|
* Copyright 2019 Google LLC
|
|
16
16
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
17
17
|
*/
|
|
18
|
-
const t$2=globalThis,e$
|
|
18
|
+
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;
|
|
19
19
|
|
|
20
20
|
/**
|
|
21
21
|
* @license
|
|
22
22
|
* Copyright 2017 Google LLC
|
|
23
23
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
24
|
-
*/const{is:i$4,defineProperty:e$
|
|
24
|
+
*/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");
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
27
|
* @license
|
|
28
28
|
* Copyright 2017 Google LLC
|
|
29
29
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
30
30
|
*/
|
|
31
|
-
const t$1=globalThis,i$3=t$1.trustedTypes,s$2=i$3?i$3.createPolicy("lit-html",{createHTML:t=>t}):void 0,e$
|
|
31
|
+
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};
|
|
32
32
|
|
|
33
33
|
/**
|
|
34
34
|
* @license
|
|
35
35
|
* Copyright 2017 Google LLC
|
|
36
36
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
37
|
-
*/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$
|
|
37
|
+
*/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");
|
|
38
38
|
|
|
39
39
|
/**
|
|
40
40
|
* @license
|
|
41
41
|
* Copyright 2020 Google LLC
|
|
42
42
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
43
43
|
*/
|
|
44
|
-
const a=Symbol.for(""),o$
|
|
44
|
+
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);
|
|
45
45
|
|
|
46
46
|
/**
|
|
47
47
|
* @license
|
|
48
48
|
* Copyright 2017 Google LLC
|
|
49
49
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
50
50
|
*/
|
|
51
|
-
const t={ATTRIBUTE:1},e$
|
|
51
|
+
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)}}
|
|
52
52
|
|
|
53
53
|
/**
|
|
54
54
|
* @license
|
|
55
55
|
* Copyright 2018 Google LLC
|
|
56
56
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
57
|
-
*/const e=e$
|
|
57
|
+
*/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}});
|
|
58
|
+
|
|
59
|
+
/**
|
|
60
|
+
* @license
|
|
61
|
+
* Copyright 2017 Google LLC
|
|
62
|
+
* SPDX-License-Identifier: BSD-3-Clause
|
|
63
|
+
*/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);
|
|
58
64
|
|
|
59
65
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
60
66
|
// See LICENSE in the project root for license information.
|
|
@@ -63,7 +69,7 @@ const t={ATTRIBUTE:1},e$1=t=>(...e)=>({_$litDirective$:t,values:e});class i{cons
|
|
|
63
69
|
|
|
64
70
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
65
71
|
|
|
66
|
-
class AuroLibraryRuntimeUtils {
|
|
72
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
67
73
|
|
|
68
74
|
/* eslint-disable jsdoc/require-param */
|
|
69
75
|
|
|
@@ -124,7 +130,7 @@ class AuroLibraryRuntimeUtils {
|
|
|
124
130
|
|
|
125
131
|
return elemTag === tag || elem.hasAttribute(tag);
|
|
126
132
|
}
|
|
127
|
-
}
|
|
133
|
+
};
|
|
128
134
|
|
|
129
135
|
// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
130
136
|
// See LICENSE in the project root for license information.
|
|
@@ -149,7 +155,7 @@ class AuroAccordionGroup extends i$2 {
|
|
|
149
155
|
/**
|
|
150
156
|
* @private
|
|
151
157
|
*/
|
|
152
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
158
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
153
159
|
}
|
|
154
160
|
|
|
155
161
|
// This function is to define props used within the scope of this component
|
|
@@ -183,7 +189,7 @@ class AuroAccordionGroup extends i$2 {
|
|
|
183
189
|
*
|
|
184
190
|
*/
|
|
185
191
|
static register(name = "auro-accordion-group") {
|
|
186
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionGroup);
|
|
192
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroAccordionGroup);
|
|
187
193
|
}
|
|
188
194
|
|
|
189
195
|
firstUpdated() {
|
|
@@ -272,9 +278,474 @@ class AuroAccordionGroup extends i$2 {
|
|
|
272
278
|
}
|
|
273
279
|
}
|
|
274
280
|
|
|
275
|
-
var styleButtonCss = i$5`:focus:not(:focus-visible){outline:3px solid transparent}:host{border:unset;cursor:pointer}: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}:host .textSlot{display:flex;flex:1}:host([disabled]){cursor:not-allowed}: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]) .
|
|
281
|
+
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}: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}`;
|
|
282
|
+
|
|
283
|
+
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.5)}.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.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.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, 1)}.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.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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-xl{font-family:var(--wcss-accent-xl-family, "Good OT", 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", 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-md{font-family:var(--wcss-accent-md-family, "Good OT", 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", 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-xs{font-family:var(--wcss-accent-xs-family, "Good OT", 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", 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)}.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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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 1px 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}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%}`;
|
|
284
|
+
|
|
285
|
+
/**
|
|
286
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
287
|
+
*/
|
|
288
|
+
const _observers = new WeakMap();
|
|
289
|
+
|
|
290
|
+
/**
|
|
291
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
292
|
+
* Structure: {
|
|
293
|
+
* host: {
|
|
294
|
+
* matchers: Set<Function>,
|
|
295
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
296
|
+
* }
|
|
297
|
+
* }
|
|
298
|
+
*/
|
|
299
|
+
const _transportConfig = new WeakMap();
|
|
300
|
+
|
|
301
|
+
/**
|
|
302
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
303
|
+
*
|
|
304
|
+
* @param {Object} params - The parameters for the function.
|
|
305
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
306
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
307
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
308
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
309
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
310
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
311
|
+
*/
|
|
312
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
313
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
314
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
315
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
319
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
320
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
// Guard Clause: Ensure match is a function
|
|
324
|
+
if (typeof match !== 'function') {
|
|
325
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
329
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
330
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
331
|
+
}
|
|
332
|
+
|
|
333
|
+
// Register this transport and get cleanup function
|
|
334
|
+
return _registerTransport({
|
|
335
|
+
host,
|
|
336
|
+
target,
|
|
337
|
+
matcher: match,
|
|
338
|
+
removeOriginal
|
|
339
|
+
});
|
|
340
|
+
};
|
|
341
|
+
|
|
342
|
+
/**
|
|
343
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
344
|
+
*
|
|
345
|
+
* @param {Object} params - The parameters object.
|
|
346
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
347
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
348
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
349
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
350
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
351
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
352
|
+
* @private
|
|
353
|
+
*/
|
|
354
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
355
|
+
// Initialize config for this host if it doesn't exist
|
|
356
|
+
if (!_transportConfig.has(host)) {
|
|
357
|
+
_transportConfig.set(host, {
|
|
358
|
+
matchers: new Set(),
|
|
359
|
+
targets: new Map()
|
|
360
|
+
});
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
const config = _transportConfig.get(host);
|
|
364
|
+
|
|
365
|
+
// Add the matcher to the set of matchers for this host
|
|
366
|
+
config.matchers.add(matcher);
|
|
367
|
+
|
|
368
|
+
// Initialize target entry if it doesn't exist
|
|
369
|
+
if (!config.targets.has(target)) {
|
|
370
|
+
config.targets.set(target, new Map());
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
374
|
+
config.targets.get(target).set(matcher, {
|
|
375
|
+
removeOriginal,
|
|
376
|
+
currentAttributes: new Map()
|
|
377
|
+
});
|
|
378
|
+
|
|
379
|
+
// Perform initial attribute transport
|
|
380
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
381
|
+
|
|
382
|
+
// Attach observer
|
|
383
|
+
_attachObserver(host);
|
|
384
|
+
|
|
385
|
+
// Return cleanup function and utility functions
|
|
386
|
+
return {
|
|
387
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
388
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
389
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
390
|
+
}
|
|
391
|
+
};
|
|
392
|
+
|
|
393
|
+
/**
|
|
394
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
395
|
+
*
|
|
396
|
+
* @param {HTMLElement} host - The host element
|
|
397
|
+
* @param {HTMLElement} target - The target element
|
|
398
|
+
* @param {Function} matcher - The matcher function
|
|
399
|
+
* @private
|
|
400
|
+
*/
|
|
401
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
402
|
+
const config = _transportConfig.get(host);
|
|
403
|
+
if (!config) return;
|
|
404
|
+
|
|
405
|
+
// Remove this matcher from this target
|
|
406
|
+
const targetMatchers = config.targets.get(target);
|
|
407
|
+
if (targetMatchers) {
|
|
408
|
+
targetMatchers.delete(matcher);
|
|
409
|
+
|
|
410
|
+
// If this target has no more matchers, remove it
|
|
411
|
+
if (targetMatchers.size === 0) {
|
|
412
|
+
config.targets.delete(target);
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
// Check if this matcher is still used by any target
|
|
417
|
+
let matcherStillUsed = false;
|
|
418
|
+
for (const matcherMap of config.targets.values()) {
|
|
419
|
+
if (matcherMap.has(matcher)) {
|
|
420
|
+
matcherStillUsed = true;
|
|
421
|
+
break;
|
|
422
|
+
}
|
|
423
|
+
}
|
|
424
|
+
|
|
425
|
+
// If not used anymore, remove from matchers set
|
|
426
|
+
if (!matcherStillUsed) {
|
|
427
|
+
config.matchers.delete(matcher);
|
|
428
|
+
}
|
|
429
|
+
|
|
430
|
+
// If no more targets or matchers, detach observer
|
|
431
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
432
|
+
_detachObserver(host);
|
|
433
|
+
}
|
|
434
|
+
};
|
|
435
|
+
|
|
436
|
+
/**
|
|
437
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
438
|
+
*
|
|
439
|
+
* @param {Object} params - The parameters object.
|
|
440
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
441
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
442
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
443
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
444
|
+
* @returns {void}
|
|
445
|
+
* @private
|
|
446
|
+
*/
|
|
447
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
448
|
+
// Get a list of all matching attributes on the host element and their values
|
|
449
|
+
const matchingAttributes = host.getAttributeNames()
|
|
450
|
+
.filter(attr => matcher(attr))
|
|
451
|
+
.reduce((acc, attr) => {
|
|
452
|
+
acc[attr] = host.getAttribute(attr);
|
|
453
|
+
return acc;
|
|
454
|
+
}, {});
|
|
455
|
+
|
|
456
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
457
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
458
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
459
|
+
target.setAttribute(key, value);
|
|
460
|
+
if (removeOriginal) {
|
|
461
|
+
host.removeAttribute(key);
|
|
462
|
+
}
|
|
463
|
+
});
|
|
464
|
+
};
|
|
465
|
+
|
|
466
|
+
/**
|
|
467
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
468
|
+
*
|
|
469
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
470
|
+
* @returns {MutationObserver} The observer instance.
|
|
471
|
+
* @private
|
|
472
|
+
*/
|
|
473
|
+
const _attachObserver = (host) => {
|
|
474
|
+
// If an observer for this host already exists, return it
|
|
475
|
+
if (_observers.has(host)) {
|
|
476
|
+
return _observers.get(host);
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
// Create a new MutationObserver
|
|
480
|
+
const observer = new MutationObserver((mutations) => {
|
|
481
|
+
const config = _transportConfig.get(host);
|
|
482
|
+
if (!config) return;
|
|
483
|
+
|
|
484
|
+
// For each mutation affecting attributes
|
|
485
|
+
mutations
|
|
486
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
487
|
+
.forEach(mutation => {
|
|
488
|
+
const attributeName = mutation.attributeName;
|
|
489
|
+
|
|
490
|
+
// Find matchers that care about this attribute
|
|
491
|
+
for (const matcher of config.matchers) {
|
|
492
|
+
if (matcher(attributeName)) {
|
|
493
|
+
// For each target that uses this matcher
|
|
494
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
495
|
+
if (matcherConfigs.has(matcher)) {
|
|
496
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
497
|
+
_transportAttributes({
|
|
498
|
+
host,
|
|
499
|
+
target,
|
|
500
|
+
matcher,
|
|
501
|
+
removeOriginal
|
|
502
|
+
});
|
|
503
|
+
}
|
|
504
|
+
}
|
|
505
|
+
}
|
|
506
|
+
}
|
|
507
|
+
});
|
|
508
|
+
});
|
|
509
|
+
|
|
510
|
+
// Start observing attribute changes
|
|
511
|
+
observer.observe(host, { attributes: true });
|
|
512
|
+
|
|
513
|
+
// Store the observer
|
|
514
|
+
_observers.set(host, observer);
|
|
515
|
+
|
|
516
|
+
return observer;
|
|
517
|
+
};
|
|
518
|
+
|
|
519
|
+
/**
|
|
520
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
521
|
+
*
|
|
522
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
523
|
+
* @private
|
|
524
|
+
*/
|
|
525
|
+
const _detachObserver = (host) => {
|
|
526
|
+
if (_observers.has(host)) {
|
|
527
|
+
const observer = _observers.get(host);
|
|
528
|
+
observer.disconnect();
|
|
529
|
+
_observers.delete(host);
|
|
530
|
+
}
|
|
531
|
+
|
|
532
|
+
// Clean up the transport config as well
|
|
533
|
+
if (_transportConfig.has(host)) {
|
|
534
|
+
_transportConfig.delete(host);
|
|
535
|
+
}
|
|
536
|
+
};
|
|
537
|
+
|
|
538
|
+
/**
|
|
539
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
540
|
+
* @param {HTMLElement} host - The host element
|
|
541
|
+
* @param {HTMLElement} target - The target element
|
|
542
|
+
* @param {Function} matcher - The matcher function
|
|
543
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
544
|
+
* @private
|
|
545
|
+
*/
|
|
546
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
547
|
+
const config = _transportConfig.get(host);
|
|
548
|
+
if (!config) return undefined;
|
|
549
|
+
|
|
550
|
+
const targetMatchers = config.targets.get(target);
|
|
551
|
+
if (!targetMatchers) return undefined;
|
|
552
|
+
|
|
553
|
+
return targetMatchers.get(matcher);
|
|
554
|
+
};
|
|
555
|
+
|
|
556
|
+
/**
|
|
557
|
+
* Sets an observed attribute value
|
|
558
|
+
* @param {HTMLElement} host - The host element
|
|
559
|
+
* @param {HTMLElement} target - The target element
|
|
560
|
+
* @param {Function} matcher - The matcher function
|
|
561
|
+
* @param {string} key - The attribute name
|
|
562
|
+
* @param {string} value - The attribute value
|
|
563
|
+
* @private
|
|
564
|
+
*/
|
|
565
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
566
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
567
|
+
if (matcherConfig) {
|
|
568
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
569
|
+
}
|
|
570
|
+
};
|
|
571
|
+
|
|
572
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
573
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
574
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
575
|
+
return undefined;
|
|
576
|
+
};
|
|
577
|
+
|
|
578
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
579
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
580
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
581
|
+
return [];
|
|
582
|
+
};
|
|
583
|
+
|
|
584
|
+
const _matchers = {
|
|
585
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
586
|
+
'role': attr => attr.match(/^role$/)
|
|
587
|
+
};
|
|
588
|
+
|
|
589
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
590
|
+
return transportAttributes({
|
|
591
|
+
host,
|
|
592
|
+
target,
|
|
593
|
+
match: attr => {
|
|
594
|
+
for (const key in _matchers) {
|
|
595
|
+
if (_matchers[key](attr)) return true;
|
|
596
|
+
}
|
|
597
|
+
return false;
|
|
598
|
+
},
|
|
599
|
+
removeOriginal
|
|
600
|
+
});
|
|
601
|
+
};
|
|
602
|
+
|
|
603
|
+
let AuroElement$1 = class AuroElement extends i$2 {
|
|
604
|
+
|
|
605
|
+
/**
|
|
606
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
607
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
608
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
609
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
610
|
+
* @private
|
|
611
|
+
*/
|
|
612
|
+
attributeWatcher;
|
|
613
|
+
|
|
614
|
+
static get properties() {
|
|
615
|
+
return {
|
|
616
|
+
|
|
617
|
+
/**
|
|
618
|
+
* Defines the layout of an element.
|
|
619
|
+
* @default {'default'}
|
|
620
|
+
*/
|
|
621
|
+
layout: {
|
|
622
|
+
type: String,
|
|
623
|
+
attribute: "layout",
|
|
624
|
+
reflect: true
|
|
625
|
+
},
|
|
626
|
+
|
|
627
|
+
/**
|
|
628
|
+
* Defines the shape of an element.
|
|
629
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
630
|
+
* @default {'default'}
|
|
631
|
+
*/
|
|
632
|
+
shape: {
|
|
633
|
+
type: String,
|
|
634
|
+
attribute: "shape",
|
|
635
|
+
reflect: true
|
|
636
|
+
},
|
|
637
|
+
|
|
638
|
+
/**
|
|
639
|
+
* Defines the size of an element.
|
|
640
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
641
|
+
* @default {'md'}
|
|
642
|
+
*/
|
|
643
|
+
size: {
|
|
644
|
+
type: String,
|
|
645
|
+
attribute: "size",
|
|
646
|
+
reflect: true
|
|
647
|
+
},
|
|
648
|
+
|
|
649
|
+
/**
|
|
650
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
651
|
+
* @default {false}
|
|
652
|
+
*/
|
|
653
|
+
onDark: {
|
|
654
|
+
type: Boolean,
|
|
655
|
+
attribute: "ondark",
|
|
656
|
+
reflect: true
|
|
657
|
+
},
|
|
658
|
+
|
|
659
|
+
/**
|
|
660
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
661
|
+
* This is used to apply layout and shape classes dynamically.
|
|
662
|
+
* @type {HTMLElement|null}
|
|
663
|
+
* @default {null}
|
|
664
|
+
* @private
|
|
665
|
+
*/
|
|
666
|
+
wrapper: {
|
|
667
|
+
attribute: false,
|
|
668
|
+
reflect: false
|
|
669
|
+
}
|
|
670
|
+
};
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
|
|
674
|
+
|
|
675
|
+
resetShapeClasses() {
|
|
676
|
+
if (this.shape && this.size) {
|
|
677
|
+
|
|
678
|
+
if (this.wrapper) {
|
|
679
|
+
this.wrapper.classList.forEach((className) => {
|
|
680
|
+
if (className.startsWith('shape-')) {
|
|
681
|
+
this.wrapper.classList.remove(className);
|
|
682
|
+
}
|
|
683
|
+
});
|
|
684
|
+
|
|
685
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
686
|
+
}
|
|
687
|
+
}
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
resetLayoutClasses() {
|
|
691
|
+
if (this.layout) {
|
|
692
|
+
if (this.wrapper) {
|
|
693
|
+
this.wrapper.classList.forEach((className) => {
|
|
694
|
+
if (className.startsWith('layout-')) {
|
|
695
|
+
this.wrapper.classList.remove(className);
|
|
696
|
+
}
|
|
697
|
+
});
|
|
698
|
+
|
|
699
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
700
|
+
}
|
|
701
|
+
}
|
|
702
|
+
}
|
|
276
703
|
|
|
277
|
-
|
|
704
|
+
updateComponentArchitecture() {
|
|
705
|
+
this.resetLayoutClasses();
|
|
706
|
+
this.resetShapeClasses();
|
|
707
|
+
}
|
|
708
|
+
|
|
709
|
+
updated(changedProperties) {
|
|
710
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
711
|
+
this.updateComponentArchitecture();
|
|
712
|
+
}
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
firstUpdated() {
|
|
716
|
+
super.firstUpdated();
|
|
717
|
+
|
|
718
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
719
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
720
|
+
|
|
721
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
722
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
723
|
+
}
|
|
724
|
+
|
|
725
|
+
disconnectedCallback() {
|
|
726
|
+
super.disconnectedCallback();
|
|
727
|
+
|
|
728
|
+
// Cleanup the ARIA observer if it exists
|
|
729
|
+
if (this.attributeWatcher) {
|
|
730
|
+
this.attributeWatcher.cleanup();
|
|
731
|
+
this.attributeWatcher = null;
|
|
732
|
+
}
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
736
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
737
|
+
render() {
|
|
738
|
+
try {
|
|
739
|
+
return this.renderLayout();
|
|
740
|
+
} catch (error) {
|
|
741
|
+
// failed to get the defined layout
|
|
742
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
743
|
+
|
|
744
|
+
// fallback to the default layout
|
|
745
|
+
return this.getLayout('default');
|
|
746
|
+
}
|
|
747
|
+
}
|
|
748
|
+
};
|
|
278
749
|
|
|
279
750
|
/**
|
|
280
751
|
* @license
|
|
@@ -322,11 +793,83 @@ class AuroDependencyVersioning {
|
|
|
322
793
|
}
|
|
323
794
|
}
|
|
324
795
|
|
|
325
|
-
var colorCss$3 = 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{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-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-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=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[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-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-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-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=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}`;
|
|
796
|
+
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)}`;
|
|
797
|
+
|
|
798
|
+
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}`;
|
|
799
|
+
|
|
800
|
+
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}`;
|
|
801
|
+
|
|
802
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
803
|
+
// See LICENSE in the project root for license information.
|
|
804
|
+
|
|
805
|
+
// ---------------------------------------------------------------------
|
|
806
|
+
|
|
807
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
326
808
|
|
|
327
|
-
|
|
809
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
328
810
|
|
|
329
|
-
|
|
811
|
+
/* eslint-disable jsdoc/require-param */
|
|
812
|
+
|
|
813
|
+
/**
|
|
814
|
+
* This will register a new custom element with the browser.
|
|
815
|
+
* @param {String} name - The name of the custom element.
|
|
816
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
817
|
+
* @returns {void}
|
|
818
|
+
*/
|
|
819
|
+
registerComponent(name, componentClass) {
|
|
820
|
+
if (!customElements.get(name)) {
|
|
821
|
+
customElements.define(name, class extends componentClass {});
|
|
822
|
+
}
|
|
823
|
+
}
|
|
824
|
+
|
|
825
|
+
/**
|
|
826
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
827
|
+
* @returns {void}
|
|
828
|
+
*/
|
|
829
|
+
closestElement(
|
|
830
|
+
selector, // selector like in .closest()
|
|
831
|
+
base = this, // extra functionality to skip a parent
|
|
832
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
833
|
+
!el || el === document || el === window
|
|
834
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
835
|
+
: found
|
|
836
|
+
? found // found a selector INside this element
|
|
837
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
838
|
+
) {
|
|
839
|
+
return __Closest(base);
|
|
840
|
+
}
|
|
841
|
+
/* eslint-enable jsdoc/require-param */
|
|
842
|
+
|
|
843
|
+
/**
|
|
844
|
+
* 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.
|
|
845
|
+
* @param {Object} elem - The element to check.
|
|
846
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
847
|
+
* @returns {void}
|
|
848
|
+
*/
|
|
849
|
+
handleComponentTagRename(elem, tagName) {
|
|
850
|
+
const tag = tagName.toLowerCase();
|
|
851
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
852
|
+
|
|
853
|
+
if (elemTag !== tag) {
|
|
854
|
+
elem.setAttribute(tag, true);
|
|
855
|
+
}
|
|
856
|
+
}
|
|
857
|
+
|
|
858
|
+
/**
|
|
859
|
+
* Validates if an element is a specific Auro component.
|
|
860
|
+
* @param {Object} elem - The element to validate.
|
|
861
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
862
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
863
|
+
*/
|
|
864
|
+
elementMatch(elem, tagName) {
|
|
865
|
+
const tag = tagName.toLowerCase();
|
|
866
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
867
|
+
|
|
868
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
869
|
+
}
|
|
870
|
+
};
|
|
871
|
+
|
|
872
|
+
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.5)}.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.63)}.body-sm{font-size:var(--wcss-body-sm-font-size, 0.875rem);line-height:var(--wcss-body-sm-line-height, 1.25)}.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, 1)}.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.88)}.display-2xl{font-family:var(--wcss-display-2xl-family, "AS Circular", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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-xl{font-family:var(--wcss-accent-xl-family, "Good OT", 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", 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-md{font-family:var(--wcss-accent-md-family, "Good OT", 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", 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-xs{font-family:var(--wcss-accent-xs-family, "Good OT", 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", 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)}: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}}`;
|
|
330
873
|
|
|
331
874
|
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}`;
|
|
332
875
|
|
|
@@ -358,7 +901,7 @@ class AuroLoader extends i$2 {
|
|
|
358
901
|
/**
|
|
359
902
|
* @private
|
|
360
903
|
*/
|
|
361
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
904
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
362
905
|
|
|
363
906
|
this.orbit = false;
|
|
364
907
|
this.ringworm = false;
|
|
@@ -421,7 +964,7 @@ class AuroLoader extends i$2 {
|
|
|
421
964
|
*
|
|
422
965
|
*/
|
|
423
966
|
static register(name = "auro-loader") {
|
|
424
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroLoader);
|
|
967
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
|
|
425
968
|
}
|
|
426
969
|
|
|
427
970
|
firstUpdated() {
|
|
@@ -459,7 +1002,7 @@ class AuroLoader extends i$2 {
|
|
|
459
1002
|
<span part="element" class="loader node-${idx}"></span>
|
|
460
1003
|
`)}
|
|
461
1004
|
|
|
462
|
-
<div class="no-animation">Loading...</div>
|
|
1005
|
+
<div class="no-animation body-default">Loading...</div>
|
|
463
1006
|
|
|
464
1007
|
${this.ringworm ? x`
|
|
465
1008
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
@@ -471,46 +1014,32 @@ class AuroLoader extends i$2 {
|
|
|
471
1014
|
}
|
|
472
1015
|
}
|
|
473
1016
|
|
|
474
|
-
var loaderVersion = '5.
|
|
1017
|
+
var loaderVersion = '5.1.0';
|
|
475
1018
|
|
|
476
|
-
/* eslint-disable max-lines */
|
|
477
1019
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
478
1020
|
// See LICENSE in the project root for license information.
|
|
479
1021
|
|
|
480
1022
|
|
|
481
1023
|
/**
|
|
482
|
-
* @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
|
|
483
|
-
* @attr {Boolean} disabled - If set to true, button will become disabled and not allow for interactions
|
|
484
|
-
* @attr {Boolean} iconOnly - If set to true, the button will contain an icon with no additional content
|
|
485
|
-
* @attr {Boolean} loading - If set to true button text will be replaced with `auro-loader` and become disabled
|
|
486
|
-
* @attr {String} loadingText - 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.
|
|
487
|
-
* @attr {Boolean} onDark - Set value for on-dark version of auro-button
|
|
488
|
-
* @attr {Boolean} rounded - If set to true, the button will have a rounded shape
|
|
489
|
-
* @attr {Boolean} slim - Set value for slim version of auro-button
|
|
490
|
-
* @attr {Boolean} fluid - Alters the shape of the button to be full width of its parent container
|
|
491
|
-
* @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.
|
|
492
|
-
* @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.
|
|
493
|
-
* @attr {Boolean} ariaexpanded - Populates the `aria-expanded` attribute that indicates whether the element, or another grouping element it controls, is currently expanded or collapsed. This is an optional attribute for buttons.
|
|
494
|
-
* @attr {String} id - Set the unique ID of an element.
|
|
495
|
-
* @attr {String} title - Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
496
|
-
* @attr {String} type - The type of the button. Possible values are: `submit`, `reset`, `button`
|
|
497
|
-
* @attr {String} value - Defines the value associated with the button which is submitted with the form data.
|
|
498
|
-
* @attr {String} variant - Sets button variant option. Possible values are: `secondary`, `tertiary`
|
|
499
|
-
* @attr {Boolean} secondary - DEPRECATED
|
|
500
|
-
* @attr {Boolean} tertiary - DEPRECATED
|
|
501
|
-
* @prop {Boolean} ready - When false the component API should not be called.
|
|
502
|
-
* @event auroButton-ready - Notifies that the component has finished initializing.
|
|
503
1024
|
* @slot - Default slot for the text of the button.
|
|
504
|
-
* @slot icon - Slot to provide auro-icon for the button.
|
|
505
1025
|
* @csspart button - Apply CSS to HTML5 button.
|
|
506
1026
|
* @csspart loader - Apply CSS to auro-loader.
|
|
507
1027
|
* @csspart text - Apply CSS to text slot.
|
|
508
1028
|
* @csspart icon - Apply CSS to icon slot.
|
|
509
1029
|
*/
|
|
510
1030
|
|
|
511
|
-
|
|
1031
|
+
const ICON_ONLY_SHAPES = ['circle', 'square'];
|
|
512
1032
|
|
|
513
|
-
|
|
1033
|
+
/**
|
|
1034
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
1035
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
1036
|
+
* @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
|
|
1037
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
1038
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
1039
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
1040
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
1041
|
+
*/
|
|
1042
|
+
class AuroButton extends AuroElement$1 {
|
|
514
1043
|
|
|
515
1044
|
/**
|
|
516
1045
|
* Enables form association for this element.
|
|
@@ -523,19 +1052,20 @@ class AuroButton extends i$2 {
|
|
|
523
1052
|
|
|
524
1053
|
constructor() {
|
|
525
1054
|
super();
|
|
526
|
-
|
|
527
1055
|
this.autofocus = false;
|
|
528
1056
|
this.disabled = false;
|
|
529
|
-
this.iconOnly = false;
|
|
530
1057
|
this.loading = false;
|
|
1058
|
+
this.size = "md";
|
|
1059
|
+
this.shape = "rounded";
|
|
531
1060
|
this.onDark = false;
|
|
532
|
-
this.ready = false;
|
|
533
|
-
this.secondary = false;
|
|
534
|
-
this.tertiary = false;
|
|
535
|
-
this.rounded = false;
|
|
536
|
-
this.slim = false;
|
|
537
1061
|
this.fluid = false;
|
|
538
1062
|
this.loadingText = this.loadingText || 'Loading...';
|
|
1063
|
+
this.variant = 'primary';
|
|
1064
|
+
|
|
1065
|
+
/**
|
|
1066
|
+
* @private
|
|
1067
|
+
*/
|
|
1068
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
539
1069
|
|
|
540
1070
|
// Support for HTML5 forms
|
|
541
1071
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -556,90 +1086,157 @@ class AuroButton extends i$2 {
|
|
|
556
1086
|
* @private
|
|
557
1087
|
*/
|
|
558
1088
|
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
1089
|
+
|
|
1090
|
+
/**
|
|
1091
|
+
* @private
|
|
1092
|
+
*/
|
|
1093
|
+
this.buttonHref = undefined;
|
|
1094
|
+
|
|
1095
|
+
/**
|
|
1096
|
+
* @private
|
|
1097
|
+
*/
|
|
1098
|
+
this.buttonTarget = undefined;
|
|
1099
|
+
|
|
1100
|
+
/**
|
|
1101
|
+
* @private
|
|
1102
|
+
*/
|
|
1103
|
+
this.buttonRel = undefined;
|
|
559
1104
|
}
|
|
560
1105
|
|
|
561
1106
|
static get styles() {
|
|
562
1107
|
return [
|
|
563
1108
|
tokensCss$3,
|
|
564
1109
|
styleCssAuroButton,
|
|
565
|
-
colorCss$3
|
|
1110
|
+
colorCss$3,
|
|
1111
|
+
shapeSize
|
|
566
1112
|
];
|
|
567
1113
|
}
|
|
568
1114
|
|
|
569
1115
|
static get properties() {
|
|
570
1116
|
return {
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
secondary: {
|
|
1117
|
+
|
|
1118
|
+
...super.properties,
|
|
1119
|
+
|
|
1120
|
+
/**
|
|
1121
|
+
* Override layout since it isn't used in this component.
|
|
1122
|
+
* @private
|
|
1123
|
+
*/
|
|
1124
|
+
layout: {
|
|
580
1125
|
type: Boolean,
|
|
581
|
-
|
|
1126
|
+
attribute: false,
|
|
1127
|
+
reflect: false
|
|
582
1128
|
},
|
|
583
|
-
|
|
1129
|
+
|
|
1130
|
+
/**
|
|
1131
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
1132
|
+
*/
|
|
1133
|
+
autofocus: {
|
|
584
1134
|
type: Boolean,
|
|
585
1135
|
reflect: true
|
|
586
1136
|
},
|
|
587
|
-
|
|
1137
|
+
|
|
1138
|
+
/**
|
|
1139
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
1140
|
+
*/
|
|
1141
|
+
disabled: {
|
|
588
1142
|
type: Boolean,
|
|
589
1143
|
reflect: true
|
|
590
1144
|
},
|
|
591
|
-
|
|
1145
|
+
|
|
1146
|
+
/**
|
|
1147
|
+
* Alters the shape of the button to be full width of its parent container.
|
|
1148
|
+
*/
|
|
1149
|
+
fluid: {
|
|
592
1150
|
type: Boolean,
|
|
593
1151
|
reflect: true
|
|
594
1152
|
},
|
|
595
|
-
|
|
1153
|
+
|
|
1154
|
+
/**
|
|
1155
|
+
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
1156
|
+
*/
|
|
1157
|
+
loading: {
|
|
596
1158
|
type: Boolean,
|
|
597
1159
|
reflect: true
|
|
598
1160
|
},
|
|
599
|
-
|
|
1161
|
+
|
|
1162
|
+
/**
|
|
1163
|
+
* 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.
|
|
1164
|
+
*/
|
|
1165
|
+
loadingText: {
|
|
600
1166
|
type: String
|
|
601
1167
|
},
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
|
|
607
|
-
type:
|
|
1168
|
+
|
|
1169
|
+
/**
|
|
1170
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
1171
|
+
*/
|
|
1172
|
+
tIndex: {
|
|
1173
|
+
type: String,
|
|
608
1174
|
reflect: true
|
|
609
1175
|
},
|
|
610
|
-
|
|
611
|
-
|
|
612
|
-
|
|
1176
|
+
|
|
1177
|
+
/**
|
|
1178
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
1179
|
+
* Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
|
|
1180
|
+
* Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
|
|
1181
|
+
*/
|
|
1182
|
+
tabindex: {
|
|
1183
|
+
type: String,
|
|
1184
|
+
reflect: false
|
|
613
1185
|
},
|
|
614
|
-
|
|
1186
|
+
|
|
1187
|
+
/**
|
|
1188
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
1189
|
+
*/
|
|
1190
|
+
title: {
|
|
615
1191
|
type: String,
|
|
616
1192
|
reflect: true
|
|
617
1193
|
},
|
|
618
|
-
|
|
1194
|
+
|
|
1195
|
+
/**
|
|
1196
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
1197
|
+
*/
|
|
1198
|
+
type: {
|
|
619
1199
|
type: String,
|
|
620
1200
|
reflect: true
|
|
621
1201
|
},
|
|
622
|
-
|
|
623
|
-
|
|
1202
|
+
|
|
1203
|
+
/**
|
|
1204
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
1205
|
+
*/
|
|
1206
|
+
value: {
|
|
1207
|
+
type: String,
|
|
624
1208
|
reflect: true
|
|
625
1209
|
},
|
|
626
|
-
|
|
1210
|
+
|
|
1211
|
+
/**
|
|
1212
|
+
* Sets button variant option.
|
|
1213
|
+
* @default primary
|
|
1214
|
+
*/
|
|
1215
|
+
variant: {
|
|
627
1216
|
type: String,
|
|
628
1217
|
reflect: true
|
|
629
1218
|
},
|
|
630
|
-
|
|
1219
|
+
|
|
1220
|
+
/**
|
|
1221
|
+
* @private
|
|
1222
|
+
*/
|
|
1223
|
+
buttonHref: {
|
|
631
1224
|
type: String,
|
|
632
|
-
reflect: true
|
|
633
1225
|
},
|
|
634
|
-
|
|
1226
|
+
|
|
1227
|
+
/**
|
|
1228
|
+
* @private
|
|
1229
|
+
*/
|
|
1230
|
+
buttonTarget: {
|
|
635
1231
|
type: String,
|
|
636
|
-
reflect: true
|
|
637
1232
|
},
|
|
638
|
-
|
|
1233
|
+
|
|
1234
|
+
/**
|
|
1235
|
+
* @private
|
|
1236
|
+
*/
|
|
1237
|
+
buttonRel: {
|
|
639
1238
|
type: String,
|
|
640
|
-
reflect: true
|
|
641
1239
|
},
|
|
642
|
-
ready: { type: Boolean },
|
|
643
1240
|
};
|
|
644
1241
|
}
|
|
645
1242
|
|
|
@@ -652,7 +1249,7 @@ class AuroButton extends i$2 {
|
|
|
652
1249
|
*
|
|
653
1250
|
*/
|
|
654
1251
|
static register(name = "auro-button") {
|
|
655
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroButton);
|
|
1252
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroButton);
|
|
656
1253
|
}
|
|
657
1254
|
|
|
658
1255
|
/**
|
|
@@ -665,75 +1262,140 @@ class AuroButton extends i$2 {
|
|
|
665
1262
|
}
|
|
666
1263
|
|
|
667
1264
|
/**
|
|
668
|
-
*
|
|
1265
|
+
* Submits the form that this button is associated with.
|
|
669
1266
|
* @private
|
|
670
1267
|
* @returns {void}
|
|
671
1268
|
*/
|
|
672
|
-
|
|
673
|
-
this.
|
|
1269
|
+
surfaceSubmitEvent() {
|
|
1270
|
+
if (this.form) {
|
|
1271
|
+
this.form.requestSubmit();
|
|
1272
|
+
}
|
|
1273
|
+
}
|
|
674
1274
|
|
|
675
|
-
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
1275
|
+
/**
|
|
1276
|
+
* Returns the form element that this button is associated with.
|
|
1277
|
+
* @private
|
|
1278
|
+
* @returns {HTMLFormElement | null}
|
|
1279
|
+
*/
|
|
1280
|
+
get form() {
|
|
1281
|
+
return this.internals ? this.internals.form : null;
|
|
680
1282
|
}
|
|
681
1283
|
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
1284
|
+
/**
|
|
1285
|
+
* @private
|
|
1286
|
+
* @returns {Boolean}
|
|
1287
|
+
*/
|
|
1288
|
+
get showText() {
|
|
1289
|
+
return !ICON_ONLY_SHAPES.includes(this.shape);
|
|
1290
|
+
}
|
|
687
1291
|
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
1292
|
+
/**
|
|
1293
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
1294
|
+
* @returns {string | undefined}
|
|
1295
|
+
* @private
|
|
1296
|
+
*/
|
|
1297
|
+
get currentAriaLabel() {
|
|
1298
|
+
if (!this.attributeWatcher) return undefined;
|
|
1299
|
+
|
|
1300
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
1301
|
+
return ariaLabel || undefined;
|
|
691
1302
|
}
|
|
692
1303
|
|
|
693
|
-
|
|
694
|
-
|
|
1304
|
+
/**
|
|
1305
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
1306
|
+
* @returns {string | undefined}
|
|
1307
|
+
* @private
|
|
1308
|
+
*/
|
|
1309
|
+
get currentAriaLabelledBy() {
|
|
1310
|
+
if (!this.attributeWatcher) return undefined;
|
|
1311
|
+
|
|
1312
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
1313
|
+
return ariaLabelledBy || undefined;
|
|
695
1314
|
}
|
|
696
1315
|
|
|
697
1316
|
/**
|
|
698
|
-
*
|
|
1317
|
+
* Whether or not the button is set to an icon-only shape.
|
|
1318
|
+
* @returns {boolean} - True if the button is icon-only, false otherwise.
|
|
699
1319
|
* @private
|
|
700
|
-
* @returns {void}
|
|
701
1320
|
*/
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
this.form.requestSubmit();
|
|
705
|
-
}
|
|
1321
|
+
get iconOnly() {
|
|
1322
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
706
1323
|
}
|
|
707
1324
|
|
|
708
1325
|
/**
|
|
709
|
-
*
|
|
1326
|
+
* Gets a class name for the font size based on the button's size and shape.
|
|
1327
|
+
* @returns {string} - The font size class name.
|
|
710
1328
|
* @private
|
|
711
|
-
* @returns {HTMLFormElement | null}
|
|
712
1329
|
*/
|
|
713
|
-
|
|
714
|
-
|
|
1330
|
+
getFontSize() {
|
|
1331
|
+
|
|
1332
|
+
// Size map for standard buttons
|
|
1333
|
+
const standardButtonSizeMap = {
|
|
1334
|
+
xs: 'body-xs',
|
|
1335
|
+
sm: 'body-sm',
|
|
1336
|
+
md: 'body-default',
|
|
1337
|
+
lg: 'body-lg',
|
|
1338
|
+
xl: 'body-lg'
|
|
1339
|
+
};
|
|
1340
|
+
|
|
1341
|
+
// Size map for icon-only buttons
|
|
1342
|
+
const iconOnlyButtonSizeMap = {
|
|
1343
|
+
xs: 'heading-xs',
|
|
1344
|
+
sm: 'heading-sm',
|
|
1345
|
+
md: 'heading-sm',
|
|
1346
|
+
lg: 'heading-md',
|
|
1347
|
+
xl: 'heading-lg'
|
|
1348
|
+
};
|
|
1349
|
+
|
|
1350
|
+
// Determine which map to use based on the shape
|
|
1351
|
+
const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
|
|
1352
|
+
|
|
1353
|
+
// Return the font size based on the button size and shape
|
|
1354
|
+
return sizeMap[this.size] || 'body-default';
|
|
715
1355
|
}
|
|
716
1356
|
|
|
717
|
-
|
|
1357
|
+
firstUpdated() {
|
|
1358
|
+
super.firstUpdated();
|
|
1359
|
+
|
|
1360
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-button');
|
|
1361
|
+
}
|
|
1362
|
+
|
|
1363
|
+
/**
|
|
1364
|
+
* Renders the default layout for the button.
|
|
1365
|
+
* @returns {TemplateResult}
|
|
1366
|
+
* @private
|
|
1367
|
+
*/
|
|
1368
|
+
renderLayoutDefault() {
|
|
1369
|
+
|
|
1370
|
+
const fontSize = this.getFontSize();
|
|
1371
|
+
const tag = this.buttonHref ? i$1`a` : i$1`button`;
|
|
1372
|
+
const part = this.buttonHref ? 'link' : 'button';
|
|
1373
|
+
|
|
718
1374
|
const classes = {
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
'
|
|
1375
|
+
"auro-button": true,
|
|
1376
|
+
"inset": this.showText,
|
|
1377
|
+
wrapper: true,
|
|
1378
|
+
loading: this.loading,
|
|
1379
|
+
[`${fontSize}`]: true,
|
|
1380
|
+
|
|
1381
|
+
// These remove the default borders so we can handle focus borders ourselves
|
|
1382
|
+
'simple': !['secondary'].includes(this.variant),
|
|
1383
|
+
'thin': ['secondary'].includes(this.variant),
|
|
1384
|
+
};
|
|
1385
|
+
|
|
1386
|
+
const contentClasses = {
|
|
1387
|
+
"contentWrapper": true,
|
|
1388
|
+
"util_displayHiddenVisually": this.loading
|
|
727
1389
|
};
|
|
728
1390
|
|
|
729
1391
|
return u`
|
|
730
|
-
|
|
731
|
-
part="
|
|
732
|
-
aria-label="${o(this.loading ? this.loadingText : this.
|
|
733
|
-
aria-labelledby="${o(this.
|
|
734
|
-
|
|
1392
|
+
<${tag}
|
|
1393
|
+
part="${part}"
|
|
1394
|
+
aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
1395
|
+
aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
1396
|
+
tabindex="${o(this.tIndex || this.tabindex)}"
|
|
735
1397
|
?autofocus="${this.autofocus}"
|
|
736
|
-
class
|
|
1398
|
+
class=${e$1(classes)}
|
|
737
1399
|
?disabled="${this.disabled || this.loading}"
|
|
738
1400
|
?onDark="${this.onDark}"
|
|
739
1401
|
title="${o(this.title ? this.title : undefined)}"
|
|
@@ -742,21 +1404,29 @@ class AuroButton extends i$2 {
|
|
|
742
1404
|
variant="${o(this.variant ? this.variant : undefined)}"
|
|
743
1405
|
.value="${o(this.value ? this.value : undefined)}"
|
|
744
1406
|
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
1407
|
+
href="${o(this.buttonHref || undefined)}"
|
|
1408
|
+
target="${o(this.buttonTarget || undefined)}"
|
|
1409
|
+
rel="${o(this.buttonRel || undefined)}"
|
|
745
1410
|
>
|
|
746
1411
|
${o(this.loading ? u`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
747
1412
|
|
|
748
|
-
<span class="
|
|
1413
|
+
<span class="${e$1(contentClasses)}">
|
|
749
1414
|
<span class="textSlot" part="text">
|
|
750
|
-
|
|
751
|
-
</span>
|
|
752
|
-
|
|
753
|
-
<span part="icon">
|
|
754
|
-
<slot name="icon"></slot>
|
|
1415
|
+
<slot></slot>
|
|
755
1416
|
</span>
|
|
756
1417
|
</span>
|
|
757
|
-
|
|
1418
|
+
</${tag}>
|
|
758
1419
|
`;
|
|
759
1420
|
}
|
|
1421
|
+
|
|
1422
|
+
/**
|
|
1423
|
+
* Renders the layout of the button.
|
|
1424
|
+
* @returns {TemplateResult}
|
|
1425
|
+
* @private
|
|
1426
|
+
*/
|
|
1427
|
+
renderLayout() {
|
|
1428
|
+
return this.renderLayoutDefault();
|
|
1429
|
+
}
|
|
760
1430
|
}
|
|
761
1431
|
|
|
762
1432
|
// Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
@@ -775,6 +1445,16 @@ class AuroAccordionButton extends AuroButton {
|
|
|
775
1445
|
this.ariaexpanded = false;
|
|
776
1446
|
}
|
|
777
1447
|
|
|
1448
|
+
static get properties() {
|
|
1449
|
+
return {
|
|
1450
|
+
...super.properties,
|
|
1451
|
+
ariaexpanded: {
|
|
1452
|
+
type: Boolean,
|
|
1453
|
+
reflect: true
|
|
1454
|
+
}
|
|
1455
|
+
};
|
|
1456
|
+
}
|
|
1457
|
+
|
|
778
1458
|
static get styles() {
|
|
779
1459
|
return [
|
|
780
1460
|
styleCssAuroButton,
|
|
@@ -782,6 +1462,19 @@ class AuroAccordionButton extends AuroButton {
|
|
|
782
1462
|
];
|
|
783
1463
|
}
|
|
784
1464
|
|
|
1465
|
+
|
|
1466
|
+
// Sync aria-expanded changes
|
|
1467
|
+
updated(changedProperties) {
|
|
1468
|
+
super.updated(changedProperties);
|
|
1469
|
+
|
|
1470
|
+
if (changedProperties.has('ariaexpanded')) {
|
|
1471
|
+
const button = this.shadowRoot.querySelector('button');
|
|
1472
|
+
if (button) {
|
|
1473
|
+
button.setAttribute('aria-expanded', this.ariaexpanded ? 'true' : 'false');
|
|
1474
|
+
}
|
|
1475
|
+
}
|
|
1476
|
+
}
|
|
1477
|
+
|
|
785
1478
|
/**
|
|
786
1479
|
* This will register this element with the browser.
|
|
787
1480
|
* @param {string} [name="auro-accordion-button"] - The name of element that you want to register to.
|
|
@@ -791,7 +1484,7 @@ class AuroAccordionButton extends AuroButton {
|
|
|
791
1484
|
*
|
|
792
1485
|
*/
|
|
793
1486
|
static register(name = "auro-accordion-button") {
|
|
794
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordionButton);
|
|
1487
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroAccordionButton);
|
|
795
1488
|
}
|
|
796
1489
|
}
|
|
797
1490
|
|
|
@@ -947,7 +1640,77 @@ class BaseIcon extends AuroElement {
|
|
|
947
1640
|
|
|
948
1641
|
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)}`;
|
|
949
1642
|
|
|
950
|
-
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)}`;
|
|
1643
|
+
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)}`;
|
|
1644
|
+
|
|
1645
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
1646
|
+
// See LICENSE in the project root for license information.
|
|
1647
|
+
|
|
1648
|
+
// ---------------------------------------------------------------------
|
|
1649
|
+
|
|
1650
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
1651
|
+
|
|
1652
|
+
class AuroLibraryRuntimeUtils {
|
|
1653
|
+
|
|
1654
|
+
/* eslint-disable jsdoc/require-param */
|
|
1655
|
+
|
|
1656
|
+
/**
|
|
1657
|
+
* This will register a new custom element with the browser.
|
|
1658
|
+
* @param {String} name - The name of the custom element.
|
|
1659
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
1660
|
+
* @returns {void}
|
|
1661
|
+
*/
|
|
1662
|
+
registerComponent(name, componentClass) {
|
|
1663
|
+
if (!customElements.get(name)) {
|
|
1664
|
+
customElements.define(name, class extends componentClass {});
|
|
1665
|
+
}
|
|
1666
|
+
}
|
|
1667
|
+
|
|
1668
|
+
/**
|
|
1669
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
1670
|
+
* @returns {void}
|
|
1671
|
+
*/
|
|
1672
|
+
closestElement(
|
|
1673
|
+
selector, // selector like in .closest()
|
|
1674
|
+
base = this, // extra functionality to skip a parent
|
|
1675
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
1676
|
+
!el || el === document || el === window
|
|
1677
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
1678
|
+
: found
|
|
1679
|
+
? found // found a selector INside this element
|
|
1680
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
1681
|
+
) {
|
|
1682
|
+
return __Closest(base);
|
|
1683
|
+
}
|
|
1684
|
+
/* eslint-enable jsdoc/require-param */
|
|
1685
|
+
|
|
1686
|
+
/**
|
|
1687
|
+
* 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.
|
|
1688
|
+
* @param {Object} elem - The element to check.
|
|
1689
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
1690
|
+
* @returns {void}
|
|
1691
|
+
*/
|
|
1692
|
+
handleComponentTagRename(elem, tagName) {
|
|
1693
|
+
const tag = tagName.toLowerCase();
|
|
1694
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
1695
|
+
|
|
1696
|
+
if (elemTag !== tag) {
|
|
1697
|
+
elem.setAttribute(tag, true);
|
|
1698
|
+
}
|
|
1699
|
+
}
|
|
1700
|
+
|
|
1701
|
+
/**
|
|
1702
|
+
* Validates if an element is a specific Auro component.
|
|
1703
|
+
* @param {Object} elem - The element to validate.
|
|
1704
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
1705
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
1706
|
+
*/
|
|
1707
|
+
elementMatch(elem, tagName) {
|
|
1708
|
+
const tag = tagName.toLowerCase();
|
|
1709
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
1710
|
+
|
|
1711
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
1712
|
+
}
|
|
1713
|
+
}
|
|
951
1714
|
|
|
952
1715
|
// Copyright (c) 2025 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
953
1716
|
// See LICENSE in the project root for license information.
|
|
@@ -996,7 +1759,8 @@ class AuroIcon extends BaseIcon {
|
|
|
996
1759
|
* Allows custom color to be set.
|
|
997
1760
|
*/
|
|
998
1761
|
customColor: {
|
|
999
|
-
type: Boolean
|
|
1762
|
+
type: Boolean,
|
|
1763
|
+
reflect: true
|
|
1000
1764
|
},
|
|
1001
1765
|
|
|
1002
1766
|
/**
|
|
@@ -1071,8 +1835,12 @@ class AuroIcon extends BaseIcon {
|
|
|
1071
1835
|
async firstUpdated() {
|
|
1072
1836
|
await super.firstUpdated();
|
|
1073
1837
|
|
|
1074
|
-
|
|
1075
|
-
|
|
1838
|
+
/**
|
|
1839
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
1840
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
1841
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
1842
|
+
*/
|
|
1843
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
1076
1844
|
const svgDesc = this.svg.querySelector('desc');
|
|
1077
1845
|
|
|
1078
1846
|
if (svgDesc) {
|
|
@@ -1096,7 +1864,7 @@ class AuroIcon extends BaseIcon {
|
|
|
1096
1864
|
return x`
|
|
1097
1865
|
<div class="componentWrapper">
|
|
1098
1866
|
<div
|
|
1099
|
-
class="${e(svgClasses)}"
|
|
1867
|
+
class="${e$1(svgClasses)}"
|
|
1100
1868
|
title="${o(this.title || undefined)}">
|
|
1101
1869
|
<span aria-hidden="${o(this.ariaHidden || true)}" part="svg">
|
|
1102
1870
|
${this.customSvg ? x`
|
|
@@ -1108,7 +1876,7 @@ class AuroIcon extends BaseIcon {
|
|
|
1108
1876
|
</span>
|
|
1109
1877
|
</div>
|
|
1110
1878
|
|
|
1111
|
-
<div class="${e(labelClasses)}">
|
|
1879
|
+
<div class="${e$1(labelClasses)}">
|
|
1112
1880
|
<slot></slot>
|
|
1113
1881
|
</div>
|
|
1114
1882
|
</div>
|
|
@@ -1116,17 +1884,17 @@ class AuroIcon extends BaseIcon {
|
|
|
1116
1884
|
}
|
|
1117
1885
|
}
|
|
1118
1886
|
|
|
1119
|
-
var iconVersion = '8.
|
|
1887
|
+
var iconVersion = '8.1.1';
|
|
1120
1888
|
|
|
1121
1889
|
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>"};
|
|
1122
1890
|
|
|
1123
1891
|
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>"};
|
|
1124
1892
|
|
|
1125
|
-
var styleCss = i$5`: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);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, 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)}: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([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}`;
|
|
1893
|
+
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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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", 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}`;
|
|
1126
1894
|
|
|
1127
|
-
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,
|
|
1895
|
+
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)}`;
|
|
1128
1896
|
|
|
1129
|
-
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)}`;
|
|
1897
|
+
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)}`;
|
|
1130
1898
|
|
|
1131
1899
|
// Copyright (c) 2023 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
1132
1900
|
// See LICENSE in the project root for license information.
|
|
@@ -1178,7 +1946,7 @@ class AuroAccordion extends i$2 {
|
|
|
1178
1946
|
/**
|
|
1179
1947
|
* @private
|
|
1180
1948
|
*/
|
|
1181
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils();
|
|
1949
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
1182
1950
|
|
|
1183
1951
|
this.expanded = false;
|
|
1184
1952
|
}
|
|
@@ -1239,7 +2007,7 @@ class AuroAccordion extends i$2 {
|
|
|
1239
2007
|
*/
|
|
1240
2008
|
static register(name = "auro-accordion") {
|
|
1241
2009
|
const nameGroup = `${name}-group`;
|
|
1242
|
-
AuroLibraryRuntimeUtils.prototype.registerComponent(name, AuroAccordion);
|
|
2010
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroAccordion);
|
|
1243
2011
|
AuroAccordionGroup.register(nameGroup);
|
|
1244
2012
|
}
|
|
1245
2013
|
|
|
@@ -1248,19 +2016,37 @@ class AuroAccordion extends i$2 {
|
|
|
1248
2016
|
this.runtimeUtils.handleComponentTagRename(this, 'auro-accordion');
|
|
1249
2017
|
}
|
|
1250
2018
|
|
|
2019
|
+
updated(changedProperties) {
|
|
2020
|
+
// Update button when ariaexpanded changes
|
|
2021
|
+
if (changedProperties.has('expanded')) {
|
|
2022
|
+
const button = this.shadowRoot.querySelector('#accordionTrigger');
|
|
2023
|
+
if (button) {
|
|
2024
|
+
button.ariaexpanded = this.expanded;
|
|
2025
|
+
}
|
|
2026
|
+
}
|
|
2027
|
+
}
|
|
2028
|
+
|
|
1251
2029
|
/**
|
|
1252
|
-
*
|
|
2030
|
+
* Renders the chevron icons.
|
|
1253
2031
|
* @private
|
|
1254
|
-
* @
|
|
1255
|
-
* @returns {TemplateResult} - The html template for the icon.
|
|
2032
|
+
* @returns {TemplateResult} - The html template for the chevron icons.
|
|
1256
2033
|
*/
|
|
1257
|
-
|
|
1258
|
-
|
|
1259
|
-
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
|
|
1263
|
-
|
|
2034
|
+
renderChevronIcons() {
|
|
2035
|
+
if (this.chevron === 'none') {
|
|
2036
|
+
return E;
|
|
2037
|
+
}
|
|
2038
|
+
|
|
2039
|
+
const iconSvg = this.expanded ? chevronUp.svg : chevronDown.svg;
|
|
2040
|
+
|
|
2041
|
+
return u`
|
|
2042
|
+
<${this.iconTag}
|
|
2043
|
+
customSvg
|
|
2044
|
+
customColor
|
|
2045
|
+
?disabled="${this.disabled}"
|
|
2046
|
+
part="chevron">
|
|
2047
|
+
<div slot="svg">${o$1(iconSvg)}</div>
|
|
2048
|
+
</${this.iconTag}>
|
|
2049
|
+
`;
|
|
1264
2050
|
}
|
|
1265
2051
|
|
|
1266
2052
|
/**
|
|
@@ -1313,33 +2099,39 @@ class AuroAccordion extends i$2 {
|
|
|
1313
2099
|
const buttonClasses = {
|
|
1314
2100
|
"trigger": true,
|
|
1315
2101
|
"iconRight": this.getAttribute('chevron') === 'right',
|
|
2102
|
+
"iconNone": this.getAttribute('chevron') === 'none',
|
|
1316
2103
|
"sm": this.getAttribute('variant') === 'sm',
|
|
1317
2104
|
"lg": this.getAttribute('variant') === 'lg',
|
|
1318
2105
|
};
|
|
1319
2106
|
|
|
2107
|
+
const variantClassMap = {
|
|
2108
|
+
'sm': 'body-default',
|
|
2109
|
+
'lg': 'heading-xs'
|
|
2110
|
+
};
|
|
2111
|
+
|
|
2112
|
+
const triggerSlotClass = variantClassMap[this.variant] || 'heading-2xs';
|
|
2113
|
+
|
|
2114
|
+
// Generate unique ID & apply aria-controls
|
|
2115
|
+
const accordionContentId = `accordionContent-${this.buttonNameHash}`;
|
|
2116
|
+
|
|
1320
2117
|
return u`
|
|
1321
2118
|
<div class="componentWrapper" part="accordion">
|
|
1322
2119
|
<${this.buttonTag}
|
|
1323
2120
|
?fluid="${this.emphasis}"
|
|
1324
|
-
class="${e(buttonClasses)}"
|
|
2121
|
+
class="${e$1(buttonClasses)}"
|
|
1325
2122
|
id="accordionTrigger"
|
|
1326
|
-
aria-controls="
|
|
2123
|
+
aria-controls="${accordionContentId}"
|
|
1327
2124
|
?ariaexpanded="${this.expanded}"
|
|
1328
2125
|
?aria-disabled="${this.disabled}"
|
|
1329
2126
|
?disabled="${this.disabled}"
|
|
1330
2127
|
@click="${this.handleButtonClick}"
|
|
1331
2128
|
part="trigger">
|
|
1332
|
-
${this.chevron === '
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
</${this.iconTag}>
|
|
1336
|
-
<${this.iconTag} slot="icon" customSvg customColor ?hidden="${this.expanded}">
|
|
1337
|
-
${this.generateIconHtml(chevronDown.svg)}
|
|
1338
|
-
</${this.iconTag}>
|
|
1339
|
-
`}
|
|
1340
|
-
<slot name="trigger" part="triggerSlot"></slot>
|
|
2129
|
+
${this.chevron === 'right' ? E : this.renderChevronIcons()}
|
|
2130
|
+
<slot name="trigger" part="triggerSlot" class="${triggerSlotClass}"></slot>
|
|
2131
|
+
${this.chevron === 'right' ? this.renderChevronIcons() : E}
|
|
1341
2132
|
</${this.buttonTag}>
|
|
1342
|
-
|
|
2133
|
+
|
|
2134
|
+
<div class="content body-default" id="${accordionContentId}" aria-labelledby="accordionTrigger" inert="${!this.expanded || E}" part="content">
|
|
1343
2135
|
<div class="contentWrapper" part="contentWrapper">
|
|
1344
2136
|
<slot></slot>
|
|
1345
2137
|
</div>
|