@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.9 → 0.0.0-pr624.90
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/components/bibtemplate/dist/auro-bibtemplate.d.ts +12 -2
- package/components/bibtemplate/dist/buttonVersion.d.ts +2 -0
- package/components/bibtemplate/dist/headerVersion.d.ts +1 -1
- package/components/bibtemplate/dist/iconVersion.d.ts +1 -1
- package/components/bibtemplate/dist/index.js +1241 -94
- package/components/bibtemplate/dist/registered.js +1241 -94
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.html +16 -10
- package/components/checkbox/demo/api.md +49 -15
- package/components/checkbox/demo/api.min.js +74 -46
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.md +2 -2
- package/components/checkbox/demo/index.min.js +74 -46
- package/components/checkbox/demo/readme.html +16 -9
- package/components/checkbox/demo/readme.md +1 -1
- package/components/checkbox/dist/auro-checkbox-group.d.ts +1 -1
- package/components/checkbox/dist/auro-checkbox.d.ts +3 -3
- package/components/checkbox/dist/index.js +73 -45
- package/components/checkbox/dist/registered.js +73 -45
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.md +115 -8
- package/components/combobox/demo/api.min.js +3305 -1002
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.md +8 -34
- package/components/combobox/demo/index.min.js +3305 -1002
- package/components/combobox/demo/readme.html +16 -9
- package/components/combobox/dist/auro-combobox.d.ts +57 -14
- package/components/combobox/dist/index.js +2992 -836
- package/components/combobox/dist/registered.js +2992 -836
- package/components/counter/demo/api.html +17 -10
- package/components/counter/demo/api.md +158 -21
- package/components/counter/demo/api.min.js +3417 -765
- package/components/counter/demo/index.html +17 -10
- package/components/counter/demo/index.md +185 -34
- package/components/counter/demo/index.min.js +3417 -765
- package/components/counter/demo/readme.html +16 -9
- package/components/counter/dist/auro-counter-button.d.ts +2 -0
- package/components/counter/dist/auro-counter-group.d.ts +161 -11
- package/components/counter/dist/auro-counter.d.ts +16 -0
- package/components/counter/dist/helptextVersion.d.ts +2 -0
- package/components/counter/dist/iconVersion.d.ts +1 -1
- package/components/counter/dist/index.js +3420 -768
- package/components/counter/dist/registered.js +3420 -768
- package/components/datepicker/README.md +1 -1
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/api.md +59 -28
- package/components/datepicker/demo/api.min.js +11956 -8070
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/index.md +75 -8
- package/components/datepicker/demo/index.min.js +11956 -8070
- package/components/datepicker/demo/readme.html +16 -9
- package/components/datepicker/demo/readme.md +1 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +151 -12
- package/components/datepicker/dist/buttonVersion.d.ts +1 -1
- package/components/datepicker/dist/iconVersion.d.ts +2 -0
- package/components/datepicker/dist/index.js +13802 -9916
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +13802 -9916
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/api.md +82 -275
- package/components/dropdown/demo/api.min.js +450 -261
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/index.md +92 -362
- package/components/dropdown/demo/index.min.js +450 -261
- package/components/dropdown/demo/readme.html +16 -9
- package/components/dropdown/dist/auro-dropdown.d.ts +43 -83
- package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
- package/components/dropdown/dist/index.js +449 -260
- package/components/dropdown/dist/registered.js +449 -260
- package/components/form/demo/api.html +16 -9
- package/components/form/demo/api.md +1 -1
- package/components/form/demo/api.min.js +3 -3
- package/components/form/demo/autocomplete.html +19 -3
- package/components/form/demo/index.html +16 -9
- package/components/form/demo/index.min.js +3 -3
- package/components/form/demo/readme.html +16 -9
- package/components/form/demo/working.html +19 -13
- package/components/form/dist/auro-form.d.ts +1 -1
- package/components/form/dist/index.js +2 -2
- package/components/form/dist/registered.js +2 -2
- package/components/helptext/dist/auro-helptext.d.ts +0 -2
- package/components/helptext/dist/index.js +3 -5
- package/components/helptext/dist/registered.js +3 -5
- package/components/input/README.md +5 -2
- package/components/input/demo/api.html +16 -10
- package/components/input/demo/api.md +226 -132
- package/components/input/demo/api.min.js +1034 -297
- package/components/input/demo/index.html +16 -10
- package/components/input/demo/index.md +48 -32
- package/components/input/demo/index.min.js +1048 -311
- package/components/input/demo/readme.html +16 -9
- package/components/input/demo/readme.md +5 -2
- package/components/input/dist/auro-input.d.ts +24 -0
- package/components/input/dist/base-input.d.ts +45 -11
- package/components/input/dist/buttonVersion.d.ts +1 -1
- package/components/input/dist/iconVersion.d.ts +1 -1
- package/components/input/dist/index.js +1047 -310
- package/components/input/dist/registered.js +1047 -310
- package/components/layoutElement/dist/index.js +11 -8
- package/components/layoutElement/dist/registered.js +97 -0
- package/components/menu/demo/api.html +17 -10
- package/components/menu/demo/api.md +65 -8
- package/components/menu/demo/api.min.js +305 -63
- package/components/menu/demo/index.html +16 -10
- package/components/menu/demo/index.min.js +305 -63
- package/components/menu/demo/readme.html +16 -9
- package/components/menu/dist/auro-menu.d.ts +53 -7
- package/components/menu/dist/auro-menuoption.d.ts +21 -3
- package/components/menu/dist/iconVersion.d.ts +1 -1
- package/components/menu/dist/index.js +290 -48
- package/components/menu/dist/registered.js +290 -48
- package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
- package/components/menu/dist/styles/shapeSize-css.d.ts +2 -0
- package/components/radio/demo/api.html +16 -10
- package/components/radio/demo/api.md +39 -9
- package/components/radio/demo/api.min.js +92 -96
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/index.min.js +92 -96
- package/components/radio/demo/readme.html +16 -9
- package/components/radio/dist/auro-radio-group.d.ts +1 -1
- package/components/radio/dist/auro-radio.d.ts +9 -12
- package/components/radio/dist/index.js +91 -95
- package/components/radio/dist/registered.js +91 -95
- package/components/select/demo/api.html +16 -10
- package/components/select/demo/api.js +0 -2
- package/components/select/demo/api.md +149 -122
- package/components/select/demo/api.min.js +2283 -736
- package/components/select/demo/index.html +17 -11
- package/components/select/demo/index.md +1066 -259
- package/components/select/demo/index.min.js +2284 -725
- package/components/select/demo/readme.html +16 -9
- package/components/select/dist/auro-select.d.ts +74 -25
- package/components/select/dist/index.js +2165 -753
- package/components/select/dist/registered.js +2165 -753
- package/package.json +31 -28
- /package/components/{datepicker/dist/styles/default/color-css.d.ts → counter/dist/styles/shapeSize-css.d.ts} +0 -0
- /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/classic}/color-css.d.ts +0 -0
- /package/components/datepicker/dist/styles/{emphasized → classic}/style-css.d.ts +0 -0
- /package/components/{dropdown/dist/styles/default/bibColors-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
- /package/components/{dropdown/dist/styles/default → datepicker/dist/styles/snowflake}/style-css.d.ts +0 -0
- /package/components/dropdown/dist/styles/{default/bibStyles-css.d.ts → classic/bibColors-css.d.ts} +0 -0
- /package/components/{input/dist/styles/default/input-css.d.ts → dropdown/dist/styles/classic/bibStyles-css.d.ts} +0 -0
- /package/components/{input/dist/styles/default/label-css.d.ts → dropdown/dist/styles/classic/color-css.d.ts} +0 -0
- /package/components/{input/dist/styles/input-css.d.ts → dropdown/dist/styles/classic/style-css.d.ts} +0 -0
- /package/components/{menu/dist/styles/color-menu-css.d.ts → dropdown/dist/styles/style-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{color-menuoption-css.d.ts → default/color-menu-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{style-menu-css.d.ts → default/color-menuoption-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{style-menuoption-css.d.ts → default/style-menu-css.d.ts} +0 -0
- /package/components/menu/dist/styles/{tokens-css.d.ts → default/style-menuoption-css.d.ts} +0 -0
|
@@ -26,7 +26,7 @@ const t$3=globalThis,e$4=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.na
|
|
|
26
26
|
* @license
|
|
27
27
|
* Copyright 2017 Google LLC
|
|
28
28
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
29
|
-
*/const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$2,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$2=globalThis,c$2=a$2.trustedTypes,l$2=c$2?c$2.emptyScript:"",p$2=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$4={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$4,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$3(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$2(t),...o$4(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$3(s));}else void 0!==s&&i.push(c$3(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$4).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$4;this._$Em=e
|
|
29
|
+
*/const{is:i$4,defineProperty:e$3,getOwnPropertyDescriptor:h$1,getOwnPropertyNames:r$2,getOwnPropertySymbols:o$4,getPrototypeOf:n$2}=Object,a$2=globalThis,c$2=a$2.trustedTypes,l$2=c$2?c$2.emptyScript:"",p$2=a$2.reactiveElementPolyfillSupport,d$1=(t,s)=>t,u$4={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$4,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$3(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$2(t),...o$4(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$3(s));}else void 0!==s&&i.push(c$3(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$4).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$4;this._$Em=e;const r=h.fromAttribute(s,t.type);this[e]=r??this._$Ej?.get(e)??r,this._$Em=null;}}requestUpdate(t,s,i){if(void 0!==t){const e=this.constructor,h=this[t];if(i??=e.getPropertyOptions(t),!((i.hasChanged??f$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$2?.({ReactiveElement:y$1}),(a$2.reactiveElementVersions??=[]).push("2.1.1");
|
|
30
30
|
|
|
31
31
|
/**
|
|
32
32
|
* @license
|
|
@@ -41,25 +41,25 @@ const t$2=globalThis,i$3=t$2.trustedTypes,s$3=i$3?i$3.createPolicy("lit-html",{c
|
|
|
41
41
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
42
42
|
*/const s$2=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$2.litElementHydrateSupport?.({LitElement:i$2});const o$2=s$2.litElementPolyfillSupport;o$2?.({LitElement:i$2});(s$2.litElementVersions??=[]).push("4.2.0");
|
|
43
43
|
|
|
44
|
-
var shapeSizeCss = i$5`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:
|
|
44
|
+
var shapeSizeCss = i$5`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:56px;max-height:56px;border-style:solid;border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}.shape-classic-xl.simple,.shape-classic-lg.simple,.shape-classic-md.simple,.shape-classic-sm.simple,.shape-classic-xs.simple{border-width:0px;min-height:58px;max-height:58px;background-color:unset;box-shadow:none}.shape-classic-xl.thin,.shape-classic-lg.thin,.shape-classic-md.thin,.shape-classic-sm.thin,.shape-classic-xs.thin{border-width:1px;min-height:56px;max-height:56px;background-color:unset}.shape-classic-xl.parentBorder,.shape-classic-lg.parentBorder,.shape-classic-md.parentBorder,.shape-classic-sm.parentBorder,.shape-classic-xs.parentBorder{border:0;box-shadow:unset;min-height:54px;max-height:54px}.shape-snowflake-xl,.shape-snowflake-lg,.shape-snowflake-md,.shape-snowflake-sm,.shape-snowflake-xs{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;border-radius:30px}.shape-snowflake-xl.simple,.shape-snowflake-lg.simple,.shape-snowflake-md.simple,.shape-snowflake-sm.simple,.shape-snowflake-xs.simple{border-width:0px;min-height:60px;max-height:60px;background-color:unset;box-shadow:none}.shape-snowflake-xl.thin,.shape-snowflake-lg.thin,.shape-snowflake-md.thin,.shape-snowflake-sm.thin,.shape-snowflake-xs.thin{border-width:1px;min-height:58px;max-height:58px;background-color:unset}.shape-snowflake-xl.parentBorder,.shape-snowflake-lg.parentBorder,.shape-snowflake-md.parentBorder,.shape-snowflake-sm.parentBorder,.shape-snowflake-xs.parentBorder{border:0;box-shadow:unset;min-height:56px;max-height:56px}.shape-box-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xl.simple{border-width:0px;min-height:72px;max-height:72px;background-color:unset;box-shadow:none}.shape-box-xl.thin{border-width:1px;min-height:70px;max-height:70px;background-color:unset}.shape-box-xl.parentBorder{border:0;box-shadow:unset;min-height:68px;max-height:68px}.shape-box-lg{min-height:52px;max-height:52px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-lg.simple{border-width:0px;min-height:56px;max-height:56px;background-color:unset;box-shadow:none}.shape-box-lg.thin{border-width:1px;min-height:54px;max-height:54px;background-color:unset}.shape-box-lg.parentBorder{border:0;box-shadow:unset;min-height:52px;max-height:52px}.shape-box-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-md.simple{border-width:0px;min-height:48px;max-height:48px;background-color:unset;box-shadow:none}.shape-box-md.thin{border-width:1px;min-height:46px;max-height:46px;background-color:unset}.shape-box-md.parentBorder{border:0;box-shadow:unset;min-height:44px;max-height:44px}.shape-box-sm{min-height:32px;max-height:32px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-sm.simple{border-width:0px;min-height:36px;max-height:36px;background-color:unset;box-shadow:none}.shape-box-sm.thin{border-width:1px;min-height:34px;max-height:34px;background-color:unset}.shape-box-sm.parentBorder{border:0;box-shadow:unset;min-height:32px;max-height:32px}.shape-box-xs{min-height:20px;max-height:20px;border-style:solid;border-width:2px;border-color:transparent}.shape-box-xs.simple{border-width:0px;min-height:24px;max-height:24px;background-color:unset;box-shadow:none}.shape-box-xs.thin{border-width:1px;min-height:22px;max-height:22px;background-color:unset}.shape-box-xs.parentBorder{border:0;box-shadow:unset;min-height:20px;max-height:20px}.shape-rounded-lg{min-height:56px;max-height:56px;border-style:solid;border-width:2px;border-color:transparent;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-xl{min-height:68px;max-height:68px;border-style:solid;border-width:2px;border-color:transparent;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;border-width:2px;border-color:transparent;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;border-width:2px;border-color:transparent;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-pill-md{min-height:44px;max-height:44px;border-style:solid;border-width:2px;border-color:transparent;border-radius:36px}.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;border-width:2px;border-color:transparent;border-radius:36px 0 0 36px}.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;border-width:2px;border-color:transparent;border-radius:0 36px 36px 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}`;
|
|
45
45
|
|
|
46
|
-
var styleCss$4 = i$5`.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}`;
|
|
46
|
+
var styleCss$4 = i$5`.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}.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-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{display:block}.wrapper{cursor:text}.helpTextClasses{cursor:default}input{overflow:clip !important;width:100%;padding:0;border:0;background:unset;outline:none;overflow-clip-margin:0 !important;text-overflow:ellipsis}input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.displayValue{display:none}.displayValue.hasContent:is(.withValue):not(.hasFocus){display:flex;align-items:center}.accents:not(.util_displayHidden){display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px}.notification{display:flex;align-items:center;justify-content:center}`;
|
|
47
47
|
|
|
48
|
-
var styleDefaultCss = i$5`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}
|
|
48
|
+
var styleDefaultCss = i$5`.layoutDefault .typeIcon,:host(:not([layout])) .typeIcon{display:flex;flex-direction:row;align-items:center}.layoutDefault .typeIcon [auro-icon],:host(:not([layout])) .typeIcon [auro-icon]{--ds-auro-icon-size: var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);margin-right:var(--ds-size-100, 0.5rem)}.layoutDefault .notificationIcons,:host(:not([layout])) .notificationIcons{display:flex;flex-direction:row;padding-right:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .typeIcon,:host(:not([layout])[bordered]) .typeIcon{padding-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .notificationIcons,:host(:not([layout])[bordered]) .notificationIcons{align-items:center}:host([class=layoutDefault][bordered]) .notification:not(:first-of-type),:host(:not([layout])[bordered]) .notification:not(:first-of-type){margin-left:var(--ds-size-100, 0.5rem)}:host([class=layoutDefault][bordered]) .alertNotification,:host(:not([layout])[bordered]) .alertNotification{width:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-300, 1.5rem) + var(--ds-size-25, 0.125rem))}:host([class=layoutDefault][bordered]) .passwordBtn,:host(:not([layout])[bordered]) .passwordBtn{width:calc(var(--ds-size-300, 1.5rem));height:calc(var(--ds-size-300, 1.5rem))}:host([class=layoutDefault][bordered]) .notificationBtn,:host(:not([layout])[bordered]) .notificationBtn{display:block;width:var(--ds-size-300, 1.5rem);height:var(--ds-size-300, 1.5rem);padding:0;border:0;background:unset;cursor:pointer}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon],:host(:not([layout])[bordered]) .notificationBtn [auro-icon]{display:block;height:var(--ds-size-300, 1.5rem);--ds-auro-icon-size: var(--ds-size-300, 1.5rem)}:host([class=layoutDefault][bordered]) .notificationBtn [auro-icon][hidden],:host(:not([layout])[bordered]) .notificationBtn [auro-icon][hidden]{display:none}:host([class=layoutDefault]:not([bordered])) .typeIcon,:host([class=layoutDefault]:not([bordered])) .notificationIcons,:host(:not([layout]):not([bordered])) .typeIcon,:host(:not([layout]):not([bordered])) .notificationIcons{align-items:flex-end;padding-bottom:var(--ds-size-50, 0.25rem)}:host([class=layoutDefault]:not([bordered])) .clearBtn,:host(:not([layout]):not([bordered])) .clearBtn{transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);overflow:hidden;width:0;opacity:0}.layoutDefault .wrapper:hover .clearBtn,.layoutDefault .wrapper:focus-within .clearBtn,:host(:not([layout])) .wrapper:hover .clearBtn,:host(:not([layout])) .wrapper:focus-within .clearBtn{width:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));height:calc(var(--ds-size-200, 1rem) + var(--ds-size-25, 0.125rem));opacity:1}:host([class=layoutDefault]:focus-within[type=password]) .notificationIcons[hasValue] .alertNotification,:host(:not([layout]):focus-within[type=password]) .notificationIcons[hasValue] .alertNotification{overflow:hidden;width:0;height:0;padding:0;margin:0;visibility:hidden}.layoutDefault input,:host(:not([layout])) input{border:unset}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{position:relative;overflow:hidden;border-style:solid}:host([class=layoutDefault]:not([bordered],[borderless])) .wrapper,:host(:not([layout]):not([bordered],[borderless])) .wrapper{border-width:1px 0}:host([class=layoutDefault][bordered]) .wrapper,:host(:not([layout])[bordered]) .wrapper{border-width:1px;border-radius:var(--ds-border-radius, 0.375rem)}:host([class=layoutDefault]:not([borderless])) .wrapper:focus-within:before,:host(:not([layout]):not([borderless])) .wrapper:focus-within:before{position:absolute;display:block;border-bottom-width:1px;border-bottom-style:solid;content:"";inset:0;pointer-events:none}:host([class=layoutDefault][validity]:not([validity=valid])) .wrapper:before,:host(:not([layout])[validity]:not([validity=valid])) .wrapper:before{border-bottom:0}:focus:not(:focus-visible){outline:3px solid transparent}.util_displayInline{display:inline}.util_displayInlineBlock{display:inline-block}.util_displayBlock,:host{display:block}.util_displayFlex{display:flex}.util_displayHidden,:host([hidden]:not(:focus):not(:active)){display:none}.util_displayHiddenVisually,:host([hiddenVisually]:not(:focus):not(:active)){position:absolute;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);width:1px;height:1px;padding:0;border:0}.layoutDefault :host,:host(:not([layout])) :host{position:relative;display:block}.layoutDefault .wrapper,:host(:not([layout])) .wrapper{display:flex;flex-direction:row}.layoutDefault .main,:host(:not([layout])) .main{display:flex;flex-direction:row;position:relative;flex:1}`;
|
|
49
49
|
|
|
50
|
-
var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}
|
|
50
|
+
var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-background-color);color:var(--ds-auro-input-text-color)}.wrapper label{color:var(--ds-auro-input-label-text-color)}.wrapper input{caret-color:var(--ds-auro-input-caret-color);color:var(--ds-auro-input-text-color)}.wrapper input::placeholder{color:var(--ds-auro-input-placeholder-text-color)}.wrapper input:focus::placeholder{color:var(--ds-auro-input-placeholder-text-color)}:host(:not([ondark])) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .wrapper:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff)}:host(:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26)}:host([ondark]:is([validity]:not([validity=valid]))) .wrapper{--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host(:not([ondark])[disabled]){--ds-auro-input-border-color: var(--ds-basic-color-border-subtle, #dddddd);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-disabled, #d0d0d0)}:host([ondark][disabled]){--ds-auro-input-border-color: var(--ds-advanced-color-button-primary-border-inverse-disabled, rgba(255, 255, 255, 0.75));--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse-disabled, #7e8894)}`;
|
|
51
51
|
|
|
52
|
-
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-
|
|
52
|
+
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-background-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-container-color: var(--ds-basic-color-surface-default, #ffffff);--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused, #01426a);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-muted, #676767);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-text-color: var(--ds-basic-color-texticon-default, #2a2a2a);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: transparent}:host([ondark]){--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-background-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-container-color: var(--ds-advanced-color-shared-background-inverse, rgba(255, 255, 255, 0.15));--ds-auro-input-caret-color: var(--ds-advanced-color-state-focused-inverse, #ffffff);--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-placeholder-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-text-color: var(--ds-basic-color-texticon-inverse, #ffffff);--ds-auro-input-error-icon-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: transparent}`;
|
|
53
53
|
|
|
54
|
-
var classicStyleCss = i$5
|
|
54
|
+
var classicStyleCss = i$5`:host([layout*=classic]) .wrapper{display:flex;flex-direction:row;box-shadow:inset 0 0 0 1px var(--ds-auro-input-outline-color)}:host([layout*=classic]) .mainContent{position:relative;display:flex;overflow:hidden;flex:1;flex-direction:column;justify-content:center;cursor:text}:host([layout*=classic]) .mainContent label{overflow:hidden;cursor:text;padding-block:var(--ds-size-50, 0.25rem);text-overflow:ellipsis;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1);white-space:nowrap}:host([layout*=classic]) .mainContent input{height:auto;transition:all .3s cubic-bezier(0.215, 0.61, 0.355, 1)}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) label{justify-self:flex-start}:host([layout*=classic]) .mainContent:has(input.util_displayHiddenVisually) input{height:0;padding-bottom:0}:host([layout*=classic]) .accents .typeIcon>*{margin-left:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.left{padding-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]) .accents.right{padding-left:var(--ds-size-100, 0.5rem);margin-right:var(--ds-size-100, 0.5rem)}:host([layout*=classic]).withValue{justify-content:flex-start}:host([layout*=classic]):focus-within{justify-content:flex-start}`;
|
|
55
55
|
|
|
56
|
-
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-
|
|
56
|
+
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host(:not([ondark])) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([ondark]) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error, #e31f26);--ds-auro-input-outline-color: var(--ds-basic-color-status-error, #e31f26)}:host([layout*=classic]:not([ondark]):is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-brand, #00274a);--ds-auro-input-outline-color: var(--ds-basic-color-border-brand, #00274a)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: var(--ds-basic-color-status-error-subtle, #fbc6c6);--ds-auro-input-outline-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}:host([layout*=classic][ondark]:is([validity]:not([validity=valid]))) .layout-classic:focus-within{--ds-auro-input-border-color: var(--ds-basic-color-border-inverse, #ffffff);--ds-auro-input-outline-color: var(--ds-basic-color-border-inverse, #ffffff)}`;
|
|
57
57
|
|
|
58
|
-
var emphasizedStyleCss = i$5`:host
|
|
58
|
+
var emphasizedStyleCss = i$5`:host([layout*=emphasized][shape*=pill]:not([layout*=right])) .leftIndent{margin-left:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}:host([layout*=emphasized][shape*=pill]:not([layout*=left]):not([layout*=right])) .rightIndent{margin-right:var(--ds-size-300, 1.5rem);width:calc(100% - var(--ds-size-300, 1.5rem))}.layout-emphasized,.layout-emphasized-left,.layout-emphasized-right{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-emphasized label,.layout-emphasized-left label,.layout-emphasized-right label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.layout-emphasized input,.layout-emphasized-left input,.layout-emphasized-right input{text-align:center}.layout-emphasized .mainContent,.layout-emphasized-left .mainContent,.layout-emphasized-right .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-emphasized .displayValue,.layout-emphasized-left .displayValue,.layout-emphasized-right .displayValue{display:none;width:100%}.layout-emphasized .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-left .displayValue.hasContent:is(.withValue):not(.hasFocus),.layout-emphasized-right .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-emphasized.withValue,.layout-emphasized-left.withValue,.layout-emphasized-right.withValue{justify-content:flex-start}.layout-emphasized.withValue label,.layout-emphasized-left.withValue label,.layout-emphasized-right.withValue label{display:block;width:100%;text-align:left}.layout-emphasized.withValue input,.layout-emphasized-left.withValue input,.layout-emphasized-right.withValue input{text-align:left;width:100%}.layout-emphasized:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-left:not(:focus-within):not(:is([validity]:not([validity=valid]))),.layout-emphasized-right:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{justify-content:flex-start}.layout-emphasized:focus-within label,.layout-emphasized-left:focus-within label,.layout-emphasized-right:focus-within label{display:block;width:100%;text-align:left}.layout-emphasized:focus-within input,.layout-emphasized-left:focus-within input,.layout-emphasized-right:focus-within input{text-align:left;width:100%}.layout-emphasized:focus-within .alertNotification,.layout-emphasized-left:focus-within .alertNotification,.layout-emphasized-right:focus-within .alertNotification{display:none}.layout-emphasized .accents.left,.layout-emphasized-left .accents.left,.layout-emphasized-right .accents.left{padding-left:var(--ds-size-300, 1.5rem)}.layout-emphasized .accents.right,.layout-emphasized-left .accents.right,.layout-emphasized-right .accents.right{padding-right:var(--ds-size-300, 1.5rem)}`;
|
|
59
59
|
|
|
60
60
|
var emphasizedColorCss = i$5`.layout-emphasized:focus-within,.layout-emphasized.withValue,.layout-emphasized-left:focus-within,.layout-emphasized-left.withValue,.layout-emphasized-right:focus-within,.layout-emphasized-right.withValue{--ds-auro-input-label-text-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}.layout-emphasized:focus-within,.layout-emphasized-left:focus-within,.layout-emphasized-right:focus-within{--auro-input-border-color: var(--ds-auro-input-border-color)}`;
|
|
61
61
|
|
|
62
|
-
var snowflakeStyleCss = i$5`:host([layout*=snowflake]) .leftIndent{margin-left:24px;width:calc(100% - 48px)}:host([layout*=snowflake]) .rightIndent{margin-right:24px;width:calc(100% - 48px)}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{font-size:var(--ds-text-body-size-xs);line-height:20px}.layout-snowflake input{text-align:center;font-size:18px;line-height:26px}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.layout-snowflake .displayValue{position:absolute;top:0;right:0;bottom:0;left:0;display:none}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{transform:translateY(-50%)}.layout-snowflake .accents{display:flex;flex-direction:row;justify-content:center;align-items:center}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:24px}.layout-snowflake .accents.left{padding-left:24px}.layout-snowflake .accents.right{padding-right:24px}.helpTextWrapper{text-align:center}`;
|
|
62
|
+
var snowflakeStyleCss = i$5`:root{--ds-advanced-color-button-flat-text: #676767;--ds-advanced-color-button-flat-text-disabled: #d0d0d0;--ds-advanced-color-button-flat-text-hover: #525252;--ds-advanced-color-button-flat-text-inverse: #ffffff;--ds-advanced-color-button-flat-text-inverse-disabled: #7e8894;--ds-advanced-color-button-flat-text-inverse-hover: #adadad;--ds-advanced-color-button-ghost-background-hover: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-ghost-background-inverse-hover: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-ghost-text: #01426a;--ds-advanced-color-button-ghost-text-disabled: #d0d0d0;--ds-advanced-color-button-ghost-text-inverse: #ffffff;--ds-advanced-color-button-ghost-text-inverse-disabled: #7e8894;--ds-advanced-color-button-primary-background: #01426a;--ds-advanced-color-button-primary-background-disabled: #acc9e2;--ds-advanced-color-button-primary-background-hover: #00274a;--ds-advanced-color-button-primary-background-inactive: #cfe0ef;--ds-advanced-color-button-primary-background-inactive-hover: #89b2d4;--ds-advanced-color-button-primary-background-inverse: #ffffff;--ds-advanced-color-button-primary-background-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-background-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-border: #01426a;--ds-advanced-color-button-primary-border-disabled: #acc9e2;--ds-advanced-color-button-primary-border-hover: #00274a;--ds-advanced-color-button-primary-border-inverse: #ffffff;--ds-advanced-color-button-primary-border-inverse-disabled: rgba(255, 255, 255, 0.75);--ds-advanced-color-button-primary-border-inverse-hover: #ebf3f9;--ds-advanced-color-button-primary-text: #ffffff;--ds-advanced-color-button-primary-text-disabled: #ffffff;--ds-advanced-color-button-primary-text-inverse: #01426a;--ds-advanced-color-button-secondary-background: #ffffff;--ds-advanced-color-button-secondary-background-disabled: #f7f7f7;--ds-advanced-color-button-secondary-background-hover: #f2f2f2;--ds-advanced-color-button-secondary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-secondary-border: #01426a;--ds-advanced-color-button-secondary-border-hover: #00274a;--ds-advanced-color-button-secondary-border-disabled: #cfe0ef;--ds-advanced-color-button-secondary-border-inverse: #ffffff;--ds-advanced-color-button-secondary-border-inverse-disabled: #dddddd;--ds-advanced-color-button-secondary-text: #01426a;--ds-advanced-color-button-secondary-text-hover: #00274a;--ds-advanced-color-button-secondary-text-inverse: #ffffff;--ds-advanced-color-button-tertiary-background: rgba(0, 0, 0, 0.05);--ds-advanced-color-button-tertiary-background-hover: rgba(0, 0, 0, 0.1);--ds-advanced-color-button-tertiary-background-inverse: rgba(255, 255, 255, 0.05);--ds-advanced-color-button-tertiary-background-inverse-hover: rgba(255, 255, 255, 0.1);--ds-advanced-color-button-tertiary-text: #01426a;--ds-advanced-color-button-tertiary-text-hover: #00274a;--ds-advanced-color-button-tertiary-text-inverse: #ffffff;--ds-advanced-color-accents-accent1: #b2d583;--ds-advanced-color-accents-accent1-bold: #92c450;--ds-advanced-color-accents-accent1-muted: #deedca;--ds-advanced-color-accents-accent2: #fad362;--ds-advanced-color-accents-accent2-bold: #f2ba14;--ds-advanced-color-accents-accent2-muted: #fde398;--ds-advanced-color-accents-accent3: #63beff;--ds-advanced-color-accents-accent3-bold: #0074ca;--ds-advanced-color-accents-accent3-muted: #aedeff;--ds-advanced-color-accents-accent4: #feb17a;--ds-advanced-color-accents-accent4-bold: #fb7f24;--ds-advanced-color-accents-accent4-muted: #ffe2cf;--ds-advanced-color-accents-transparency: rgba(0, 0, 0, 0.1);--ds-advanced-color-accents-transparency-inverse: rgba(255, 255, 255, 0.2);--ds-advanced-color-avatar-gradient-bottom: #cfe0ef;--ds-advanced-color-avatar-gradient-top: #6899c6;--ds-advanced-color-boolean-disabled-inverse: #7e8894;--ds-advanced-color-boolean-error: #e31f26;--ds-advanced-color-boolean-error-hover: #b1161c;--ds-advanced-color-boolean-error-inverse: #f9a4a8;--ds-advanced-color-boolean-error-inverse-hover: #f15f65;--ds-advanced-color-boolean-indicator: #ffffff;--ds-advanced-color-boolean-indicator-inverse: #00274a;--ds-advanced-color-boolean-isfalse: #ffffff;--ds-advanced-color-boolean-isfalse-border: #585e67;--ds-advanced-color-boolean-isfalse-border-inverse: #ffffff;--ds-advanced-color-boolean-isfalse-hover: #f2f2f2;--ds-advanced-color-boolean-isfalse-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-boolean-isfalse-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-boolean-istrue: #01426a;--ds-advanced-color-boolean-istrue-hover: #00274a;--ds-advanced-color-boolean-istrue-inverse: #ffffff;--ds-advanced-color-boolean-istrue-inverse-hover: rgba(255, 255, 255, 0.7);--ds-advanced-color-flightline-indicator: #00274a;--ds-advanced-color-flightline-line: #00274a;--ds-advanced-color-hyperlink-text: #2875b5;--ds-advanced-color-hyperlink-text-hover: #01426a;--ds-advanced-color-hyperlink-text-inverse: #ffffff;--ds-advanced-color-hyperlink-text-inverse-hover: #ebf3f9;--ds-advanced-color-shared-background: #ffffff;--ds-advanced-color-shared-background-inverse: rgba(255, 255, 255, 0.15);--ds-advanced-color-shared-background-inverse-disabled: rgba(255, 255, 255, 0.1);--ds-advanced-color-shared-background-inverse-hover: rgba(255, 255, 255, 0.2);--ds-advanced-color-shared-background-muted: #f7f7f7;--ds-advanced-color-shared-background-strong: #7e7e7e;--ds-advanced-color-shared-scrim: rgba(0, 0, 0, 0.5);--ds-advanced-color-shared-text-accent: #2875b5;--ds-advanced-color-skeleton-background: #f7f8fa;--ds-advanced-color-skeleton-wave: #e4e8ec;--ds-advanced-color-state-background-disabled: #dddddd;--ds-advanced-color-state-background-hover: #f2f2f2;--ds-advanced-color-state-background-inverse-disabled: #7e8894;--ds-advanced-color-state-error-inverse: #f9a4a8;--ds-advanced-color-state-focused: #01426a;--ds-advanced-color-state-focused-inverse: #ffffff;--ds-advanced-color-state-selected: #01426a;--ds-advanced-color-state-selected-hover: #00274a;--ds-basic-color-border-bold: #585e67;--ds-basic-color-border-brand: #00274a;--ds-basic-color-border-default: #959595;--ds-basic-color-border-divider: rgba(0, 0, 0, 0.15);--ds-basic-color-border-divider-inverse: rgba(255, 255, 255, 0.4);--ds-basic-color-border-inverse: #ffffff;--ds-basic-color-border-subtle: #dddddd;--ds-basic-color-brand-primary: #01426a;--ds-basic-color-brand-primary-bold: #00274a;--ds-basic-color-brand-primary-muted: #ebf3f9;--ds-basic-color-brand-primary-subtle: #2875b5;--ds-basic-color-brand-secondary: #5de3f7;--ds-basic-color-brand-secondary-bold: #18c3dd;--ds-basic-color-brand-secondary-muted: #ebfafd;--ds-basic-color-brand-secondary-subtle: #b4eff9;--ds-basic-color-brand-tertiary: #a3cd6a;--ds-basic-color-brand-tertiary-bold: #7daf3b;--ds-basic-color-brand-tertiary-muted: #eaf3dd;--ds-basic-color-brand-tertiary-subtle: #c9e1a7;--ds-basic-color-fare-basiceconomy: #97eaf8;--ds-basic-color-fare-business: #01426a;--ds-basic-color-fare-economy: #0074ca;--ds-basic-color-fare-first: #00274a;--ds-basic-color-fare-premiumeconomy: #005154;--ds-basic-color-page-background-default: #ebfafd;--ds-basic-color-page-background-utility: #ffffff;--ds-basic-color-status-default: #afb9c6;--ds-basic-color-status-error: #e31f26;--ds-basic-color-status-error-subtle: #fbc6c6;--ds-basic-color-status-info: #01426a;--ds-basic-color-status-info-subtle: #ebf3f9;--ds-basic-color-status-success: #447a1f;--ds-basic-color-status-success-subtle: #d6eac7;--ds-basic-color-status-warning: #fac200;--ds-basic-color-status-warning-subtle: #fff0b2;--ds-basic-color-surface-accent1: #5de3f7;--ds-basic-color-surface-accent1-muted: #ebfafd;--ds-basic-color-surface-accent1-subtle: #b4eff9;--ds-basic-color-surface-accent2: #a3cd6a;--ds-basic-color-surface-accent2-muted: #eaf3dd;--ds-basic-color-surface-default: #ffffff;--ds-basic-color-surface-inverse: #00274a;--ds-basic-color-surface-inverse-subtle: #2875b5;--ds-basic-color-surface-neutral-medium: #c5c5c5;--ds-basic-color-surface-neutral-subtle: #f7f7f7;--ds-basic-color-texticon-accent1: #265688;--ds-basic-color-texticon-default: #2a2a2a;--ds-basic-color-texticon-disabled: #d0d0d0;--ds-basic-color-texticon-inverse: #ffffff;--ds-basic-color-texticon-inverse-disabled: #7e8894;--ds-basic-color-texticon-inverse-muted: #ccd2db;--ds-basic-color-texticon-muted: #676767;--ds-basic-color-tier-program-loungetier-lounge: #01426a;--ds-basic-color-tier-program-loungetier-loungeplus: #53b390;--ds-basic-color-tier-program-loyaltytier-bronze: #d99f6d;--ds-basic-color-tier-program-loyaltytier-bronze-muted: #eed4be;--ds-basic-color-tier-program-loyaltytier-cobalt: #030772;--ds-basic-color-tier-program-loyaltytier-cobalt-muted: #a9b6d6;--ds-basic-color-tier-program-loyaltytier-copper: #cb7457;--ds-basic-color-tier-program-loyaltytier-copper-muted: #e7bfb1;--ds-basic-color-tier-program-loyaltytier-gold: #fbdc7a;--ds-basic-color-tier-program-loyaltytier-gold-muted: #fdefc4;--ds-basic-color-tier-program-loyaltytier-nickel: #abaab1;--ds-basic-color-tier-program-loyaltytier-nickel-muted: #e5e4e7;--ds-basic-color-tier-program-loyaltytier-platinum: #bcb8a4;--ds-basic-color-tier-program-loyaltytier-platinum-muted: #dad8cd;--ds-basic-color-tier-program-loyaltytier-silver: #e4e9ec;--ds-basic-color-tier-program-loyaltytier-silver-muted: #f9fafb;--ds-basic-color-tier-program-loyaltytier-titanium: #282828;--ds-basic-color-tier-program-loyaltytier-titanium-muted: #545454;--ds-basic-color-tier-program-oneworld-emerald: #139142;--ds-basic-color-tier-program-oneworld-ruby: #a41d4a;--ds-basic-color-tier-program-oneworld-sapphire: #015daa;--ds-basic-type-brand-family-primary: "AS Circular";--ds-basic-type-brand-family-secondary: "Good OT";--ds-basic-type-brand-line-height-primary: 1.3;--ds-basic-type-brand-line-height-secondary: 1;--ds-basic-type-brand-letter-spacing-primary: 0;--ds-basic-type-brand-letter-spacing-secondary: 0.05em;--ds-basic-type-brand-letter-spacing-tertiary: 0.10em;--ds-basic-type-family-accent: "Good OT", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-body: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-display: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-family-heading: "AS Circular", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--ds-basic-type-letter-spacing-accent: 0.05em;--ds-basic-type-letter-spacing-accent2: 0.10em;--ds-basic-type-letter-spacing-body: 0;--ds-basic-type-letter-spacing-display: 0;--ds-basic-type-letter-spacing-heading: 0;--ds-basic-type-line-height-accent: 1.3;--ds-basic-type-line-height-accent2: 1;--ds-basic-type-line-height-body: 1.63;--ds-basic-type-line-height-body2: 1.5;--ds-basic-type-line-height-body3: 1.25;--ds-basic-type-line-height-body4: 1;--ds-basic-type-line-height-body5: 0.88;--ds-basic-type-line-height-display: 1.3;--ds-basic-type-line-height-heading: 1.3;--ds-basic-type-weight-accent: 450;--ds-basic-type-weight-accent2: 500;--ds-basic-type-weight-body: 450;--ds-basic-type-weight-display: 300;--ds-basic-type-weight-heading: 300;--ds-basic-type-weight-heading2: 450}:host([layout*=snowflake]) .leftIndent{margin-left:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .rightIndent{margin-right:var(--ds-size-300, 1.5rem)}.layout-snowflake{display:flex;flex-direction:row;align-items:center;justify-content:center}.layout-snowflake label{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding-block-start:var(--ds-size-50, 0.25rem)}.layout-snowflake input{text-align:center}.layout-snowflake .mainContent{position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1;overflow:hidden}.layout-snowflake .displayValue{display:none;width:100%}.layout-snowflake .displayValue.hasContent:is(.withValue):not(.hasFocus){display:block}.layout-snowflake .displayValueWrapper{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%}.layout-snowflake.withValue{justify-content:flex-start}.layout-snowflake:not(:focus-within):not(:is([validity]:not([validity=valid]))){--ds-auro-input-border-color: transparent}.layout-snowflake:focus-within{justify-content:flex-start}.layout-snowflake:focus-within .alertNotification{display:none}.layout-snowflake .accents{width:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.left{padding-left:var(--ds-size-300, 1.5rem)}.layout-snowflake .accents.right{padding-right:var(--ds-size-300, 1.5rem)}:host([layout*=snowflake]) .helpTextWrapper{text-align:center}`;
|
|
63
63
|
|
|
64
64
|
/**
|
|
65
65
|
* @license
|
|
@@ -161,6 +161,8 @@ const stringsES = {
|
|
|
161
161
|
'dateMM': 'Ingrese una fecha completa en el formato MM',
|
|
162
162
|
'dateDD': 'Ingrese una fecha completa en el formato DD',
|
|
163
163
|
'clearInput': 'Borrar campo de entrada',
|
|
164
|
+
'showPassword': 'Mostrar contraseña',
|
|
165
|
+
'hidePassword': 'Ocultar contraseña'
|
|
164
166
|
};
|
|
165
167
|
|
|
166
168
|
const stringsEN = {
|
|
@@ -185,6 +187,8 @@ const stringsEN = {
|
|
|
185
187
|
'dateMM': 'Please enter a complete date in the format MM',
|
|
186
188
|
'dateDD': 'Please enter a complete date in the format DD',
|
|
187
189
|
'clearInput': 'Clear input field',
|
|
190
|
+
'showPassword': 'Show password',
|
|
191
|
+
'hidePassword': 'Hide password'
|
|
188
192
|
};
|
|
189
193
|
|
|
190
194
|
/**
|
|
@@ -4479,7 +4483,7 @@ const {
|
|
|
4479
4483
|
|
|
4480
4484
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
4481
4485
|
|
|
4482
|
-
let AuroLibraryRuntimeUtils$
|
|
4486
|
+
let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
4483
4487
|
|
|
4484
4488
|
/* eslint-disable jsdoc/require-param */
|
|
4485
4489
|
|
|
@@ -4549,7 +4553,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
|
4549
4553
|
class AuroFormValidation {
|
|
4550
4554
|
|
|
4551
4555
|
constructor() {
|
|
4552
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
4556
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
|
|
4553
4557
|
}
|
|
4554
4558
|
|
|
4555
4559
|
/**
|
|
@@ -4609,19 +4613,19 @@ class AuroFormValidation {
|
|
|
4609
4613
|
{
|
|
4610
4614
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
4611
4615
|
validity: 'tooShort',
|
|
4612
|
-
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
4616
|
+
message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
|
|
4613
4617
|
},
|
|
4614
4618
|
{
|
|
4615
4619
|
check: (e) => e.value?.length > e.maxLength,
|
|
4616
4620
|
validity: 'tooLong',
|
|
4617
|
-
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
4621
|
+
message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
|
|
4618
4622
|
}
|
|
4619
4623
|
],
|
|
4620
4624
|
pattern: [
|
|
4621
4625
|
{
|
|
4622
4626
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
4623
4627
|
validity: 'patternMismatch',
|
|
4624
|
-
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
4628
|
+
message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
|
|
4625
4629
|
}
|
|
4626
4630
|
]
|
|
4627
4631
|
},
|
|
@@ -4768,13 +4772,24 @@ class AuroFormValidation {
|
|
|
4768
4772
|
this.getInputElements(elem);
|
|
4769
4773
|
this.getAuroInputs(elem);
|
|
4770
4774
|
|
|
4771
|
-
//
|
|
4775
|
+
// Check if validation should run
|
|
4772
4776
|
let validationShouldRun =
|
|
4777
|
+
|
|
4778
|
+
// If the validation was forced
|
|
4773
4779
|
force ||
|
|
4774
|
-
|
|
4775
|
-
|
|
4776
|
-
|
|
4777
|
-
|
|
4780
|
+
|
|
4781
|
+
// If the validation should run on input
|
|
4782
|
+
elem.validateOnInput ||
|
|
4783
|
+
|
|
4784
|
+
// State-based checks
|
|
4785
|
+
(
|
|
4786
|
+
// Element is not currently focused
|
|
4787
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
4788
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
4789
|
+
|
|
4790
|
+
// And element has been touched or is untouched but has a value
|
|
4791
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
4792
|
+
);
|
|
4778
4793
|
|
|
4779
4794
|
if (elem.hasAttribute('error')) {
|
|
4780
4795
|
elem.validity = 'customError';
|
|
@@ -4816,10 +4831,10 @@ class AuroFormValidation {
|
|
|
4816
4831
|
if (!hasValue && elem.required && elem.touched) {
|
|
4817
4832
|
elem.validity = 'valueMissing';
|
|
4818
4833
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
4819
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
4834
|
+
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
4820
4835
|
this.validateType(elem);
|
|
4821
4836
|
this.validateElementAttributes(elem);
|
|
4822
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
4837
|
+
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
4823
4838
|
this.validateElementAttributes(elem);
|
|
4824
4839
|
}
|
|
4825
4840
|
}
|
|
@@ -4828,7 +4843,9 @@ class AuroFormValidation {
|
|
|
4828
4843
|
elem.validity = this.auroInputElements[0].validity;
|
|
4829
4844
|
elem.errorMessage = this.auroInputElements[0].errorMessage;
|
|
4830
4845
|
|
|
4831
|
-
|
|
4846
|
+
// combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib.
|
|
4847
|
+
// combobox's 2nd input will have noValidate set true.
|
|
4848
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.auroInputElements[1].noValidate) {
|
|
4832
4849
|
elem.validity = this.auroInputElements[1].validity;
|
|
4833
4850
|
elem.errorMessage = this.auroInputElements[1].errorMessage;
|
|
4834
4851
|
}
|
|
@@ -4908,7 +4925,7 @@ class AuroFormValidation {
|
|
|
4908
4925
|
}
|
|
4909
4926
|
}
|
|
4910
4927
|
|
|
4911
|
-
let AuroElement$
|
|
4928
|
+
let AuroElement$2 = class AuroElement extends i$2 {
|
|
4912
4929
|
static get properties() {
|
|
4913
4930
|
return {
|
|
4914
4931
|
|
|
@@ -4943,19 +4960,22 @@ let AuroElement$1 = class AuroElement extends i$2 {
|
|
|
4943
4960
|
}
|
|
4944
4961
|
|
|
4945
4962
|
resetShapeClasses() {
|
|
4946
|
-
|
|
4947
|
-
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
4963
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
4948
4964
|
|
|
4949
|
-
|
|
4950
|
-
|
|
4951
|
-
|
|
4952
|
-
|
|
4953
|
-
|
|
4954
|
-
|
|
4965
|
+
if (wrapper) {
|
|
4966
|
+
wrapper.classList.forEach((className) => {
|
|
4967
|
+
if (className.startsWith('shape-')) {
|
|
4968
|
+
wrapper.classList.remove(className);
|
|
4969
|
+
}
|
|
4970
|
+
});
|
|
4955
4971
|
|
|
4972
|
+
if (this.shape && this.size) {
|
|
4956
4973
|
wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
4974
|
+
} else {
|
|
4975
|
+
wrapper.classList.add('shape-none');
|
|
4957
4976
|
}
|
|
4958
4977
|
}
|
|
4978
|
+
|
|
4959
4979
|
}
|
|
4960
4980
|
|
|
4961
4981
|
resetLayoutClasses() {
|
|
@@ -5010,19 +5030,24 @@ let AuroElement$1 = class AuroElement extends i$2 {
|
|
|
5010
5030
|
* @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
5011
5031
|
* @attr id
|
|
5012
5032
|
*
|
|
5013
|
-
* @slot
|
|
5033
|
+
* @slot helpText - Sets the help text displayed below the input.
|
|
5014
5034
|
* @slot label - Sets the label text for the input.
|
|
5035
|
+
* @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
|
|
5036
|
+
* @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
|
|
5015
5037
|
*
|
|
5016
5038
|
* @csspart wrapper - Use for customizing the style of the root element
|
|
5017
5039
|
* @csspart label - Use for customizing the style of the label element
|
|
5018
5040
|
* @csspart helpText - Use for customizing the style of the helpText element
|
|
5041
|
+
* @csspart input - Use for customizing the style of the input element
|
|
5019
5042
|
* @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
|
|
5020
5043
|
* @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
|
|
5044
|
+
* @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
|
|
5045
|
+
* @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
|
|
5021
5046
|
* @event input - Event fires when the value of an `auro-input` has been changed.
|
|
5022
5047
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
|
|
5023
5048
|
*/
|
|
5024
5049
|
|
|
5025
|
-
class BaseInput extends AuroElement$
|
|
5050
|
+
class BaseInput extends AuroElement$2 {
|
|
5026
5051
|
|
|
5027
5052
|
constructor() {
|
|
5028
5053
|
super();
|
|
@@ -5039,9 +5064,22 @@ class BaseInput extends AuroElement$1 {
|
|
|
5039
5064
|
this.required = false;
|
|
5040
5065
|
this.setCustomValidityForType = undefined;
|
|
5041
5066
|
|
|
5067
|
+
/**
|
|
5068
|
+
* @private
|
|
5069
|
+
*/
|
|
5042
5070
|
this.layout = 'classic';
|
|
5071
|
+
|
|
5072
|
+
/**
|
|
5073
|
+
* @private
|
|
5074
|
+
*/
|
|
5043
5075
|
this.shape = 'classic';
|
|
5076
|
+
|
|
5077
|
+
/**
|
|
5078
|
+
* @private
|
|
5079
|
+
*/
|
|
5044
5080
|
this.size = 'lg';
|
|
5081
|
+
|
|
5082
|
+
this.privateDefaults();
|
|
5045
5083
|
}
|
|
5046
5084
|
|
|
5047
5085
|
/**
|
|
@@ -5115,7 +5153,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5115
5153
|
*/
|
|
5116
5154
|
a11yRole: {
|
|
5117
5155
|
type: String,
|
|
5118
|
-
attribute: true,
|
|
5119
5156
|
reflect: true
|
|
5120
5157
|
},
|
|
5121
5158
|
|
|
@@ -5124,7 +5161,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5124
5161
|
*/
|
|
5125
5162
|
a11yExpanded: {
|
|
5126
5163
|
type: Boolean,
|
|
5127
|
-
attribute: true,
|
|
5128
5164
|
reflect: true
|
|
5129
5165
|
},
|
|
5130
5166
|
|
|
@@ -5133,7 +5169,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5133
5169
|
*/
|
|
5134
5170
|
a11yControls: {
|
|
5135
5171
|
type: String,
|
|
5136
|
-
attribute: true,
|
|
5137
5172
|
reflect: true
|
|
5138
5173
|
},
|
|
5139
5174
|
|
|
@@ -5149,7 +5184,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5149
5184
|
* An enumerated attribute that controls whether and how text input is automatically capitalized as it is entered/edited by the user. [off/none, on/sentences, words, characters].
|
|
5150
5185
|
*/
|
|
5151
5186
|
autocapitalize: {
|
|
5152
|
-
type: String
|
|
5187
|
+
type: String,
|
|
5188
|
+
reflect: true
|
|
5153
5189
|
},
|
|
5154
5190
|
|
|
5155
5191
|
/**
|
|
@@ -5164,7 +5200,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5164
5200
|
* When set to `off`, stops iOS from auto-correcting words when typed into a text box.
|
|
5165
5201
|
*/
|
|
5166
5202
|
autocorrect: {
|
|
5167
|
-
type: String
|
|
5203
|
+
type: String,
|
|
5204
|
+
reflect: true
|
|
5168
5205
|
},
|
|
5169
5206
|
|
|
5170
5207
|
/**
|
|
@@ -5209,7 +5246,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5209
5246
|
/** Exposes inputmode attribute for input. */
|
|
5210
5247
|
inputmode: {
|
|
5211
5248
|
type: String,
|
|
5212
|
-
attribute: true,
|
|
5213
5249
|
reflect: true
|
|
5214
5250
|
},
|
|
5215
5251
|
|
|
@@ -5217,7 +5253,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5217
5253
|
* Defines the language of an element.
|
|
5218
5254
|
*/
|
|
5219
5255
|
lang: {
|
|
5220
|
-
type: String
|
|
5256
|
+
type: String,
|
|
5257
|
+
reflect: true
|
|
5221
5258
|
},
|
|
5222
5259
|
|
|
5223
5260
|
/**
|
|
@@ -5231,7 +5268,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5231
5268
|
* The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
|
|
5232
5269
|
*/
|
|
5233
5270
|
maxLength: {
|
|
5234
|
-
type: Number
|
|
5271
|
+
type: Number,
|
|
5272
|
+
reflect: true
|
|
5235
5273
|
},
|
|
5236
5274
|
|
|
5237
5275
|
/**
|
|
@@ -5245,14 +5283,25 @@ class BaseInput extends AuroElement$1 {
|
|
|
5245
5283
|
* The minimum number of characters the user can enter into the text input. This must be a non-negative integer value smaller than or equal to the value specified by `maxlength`.
|
|
5246
5284
|
*/
|
|
5247
5285
|
minLength: {
|
|
5248
|
-
type: Number
|
|
5286
|
+
type: Number,
|
|
5287
|
+
reflect: true
|
|
5249
5288
|
},
|
|
5250
5289
|
|
|
5251
5290
|
/**
|
|
5252
5291
|
* Populates the `name` attribute on the input.
|
|
5253
5292
|
*/
|
|
5254
5293
|
name: {
|
|
5255
|
-
type: String
|
|
5294
|
+
type: String,
|
|
5295
|
+
reflect: true
|
|
5296
|
+
},
|
|
5297
|
+
|
|
5298
|
+
/**
|
|
5299
|
+
* Sets styles for nested operation - removes borders, hides help + error text, and
|
|
5300
|
+
* hides accents.
|
|
5301
|
+
*/
|
|
5302
|
+
nested: {
|
|
5303
|
+
type: Boolean,
|
|
5304
|
+
reflect: true
|
|
5256
5305
|
},
|
|
5257
5306
|
|
|
5258
5307
|
/**
|
|
@@ -5280,10 +5329,11 @@ class BaseInput extends AuroElement$1 {
|
|
|
5280
5329
|
},
|
|
5281
5330
|
|
|
5282
5331
|
/**
|
|
5283
|
-
* Define custom placeholder text
|
|
5332
|
+
* Define custom placeholder text.
|
|
5284
5333
|
*/
|
|
5285
5334
|
placeholder: {
|
|
5286
|
-
type: String
|
|
5335
|
+
type: String,
|
|
5336
|
+
reflect: true
|
|
5287
5337
|
},
|
|
5288
5338
|
|
|
5289
5339
|
/**
|
|
@@ -5372,6 +5422,14 @@ class BaseInput extends AuroElement$1 {
|
|
|
5372
5422
|
type: String
|
|
5373
5423
|
},
|
|
5374
5424
|
|
|
5425
|
+
/**
|
|
5426
|
+
* Simple makes the input render without a border.
|
|
5427
|
+
*/
|
|
5428
|
+
simple: {
|
|
5429
|
+
type: Boolean,
|
|
5430
|
+
reflect: true
|
|
5431
|
+
},
|
|
5432
|
+
|
|
5375
5433
|
/**
|
|
5376
5434
|
* Custom help text message for email type validity.
|
|
5377
5435
|
*/
|
|
@@ -5383,7 +5441,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5383
5441
|
* An enumerated attribute defines whether the element may be checked for spelling errors. [true, false]. When set to `false` the attribute `autocorrect` is set to `off` and `autocapitalize` is set to `none`.
|
|
5384
5442
|
*/
|
|
5385
5443
|
spellcheck: {
|
|
5386
|
-
type: String
|
|
5444
|
+
type: String,
|
|
5445
|
+
reflect: true
|
|
5387
5446
|
},
|
|
5388
5447
|
|
|
5389
5448
|
/**
|
|
@@ -5398,7 +5457,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5398
5457
|
* Populates the `value` attribute on the input. Can also be read to retrieve the current value of the input.
|
|
5399
5458
|
*/
|
|
5400
5459
|
value: {
|
|
5401
|
-
type: String
|
|
5460
|
+
type: String,
|
|
5461
|
+
reflect: true
|
|
5402
5462
|
},
|
|
5403
5463
|
|
|
5404
5464
|
/**
|
|
@@ -5443,8 +5503,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5443
5503
|
connectedCallback() {
|
|
5444
5504
|
super.connectedCallback();
|
|
5445
5505
|
|
|
5446
|
-
this.privateDefaults();
|
|
5447
|
-
|
|
5448
5506
|
notifyOnLangChange(this);
|
|
5449
5507
|
}
|
|
5450
5508
|
|
|
@@ -5454,7 +5512,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
5454
5512
|
}
|
|
5455
5513
|
|
|
5456
5514
|
firstUpdated() {
|
|
5457
|
-
// clicking anywhere in the main wrapper will focus the input. Clicking the
|
|
5515
|
+
// clicking anywhere in the main wrapper will focus the input. Clicking the helpText or label will not focus the input.
|
|
5458
5516
|
this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
|
|
5459
5517
|
this.inputElement = this.renderRoot.querySelector('input');
|
|
5460
5518
|
this.labelElement = this.shadowRoot.querySelector('label');
|
|
@@ -5566,9 +5624,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5566
5624
|
if (!this.shadowRoot.contains(this.getActiveElement())) {
|
|
5567
5625
|
this.validation.validate(this);
|
|
5568
5626
|
}
|
|
5569
|
-
|
|
5570
|
-
this.notifyValueChanged();
|
|
5571
5627
|
}
|
|
5628
|
+
|
|
5629
|
+
this.notifyValueChanged();
|
|
5572
5630
|
}
|
|
5573
5631
|
|
|
5574
5632
|
if (changedProperties.has('error')) {
|
|
@@ -5678,7 +5736,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5678
5736
|
|
|
5679
5737
|
/**
|
|
5680
5738
|
* Function to set element focus.
|
|
5681
|
-
* @private
|
|
5682
5739
|
* @return {void}
|
|
5683
5740
|
*/
|
|
5684
5741
|
focus() {
|
|
@@ -5694,9 +5751,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5694
5751
|
this.inputElement.value = "";
|
|
5695
5752
|
this.value = "";
|
|
5696
5753
|
this.labelElement.classList.remove('inputElement-label--sticky');
|
|
5754
|
+
this.notifyValueChanged();
|
|
5697
5755
|
this.focus();
|
|
5698
5756
|
this.validation.validate(this);
|
|
5699
|
-
this.notifyValueChanged();
|
|
5700
5757
|
}
|
|
5701
5758
|
|
|
5702
5759
|
/**
|
|
@@ -5791,13 +5848,20 @@ class BaseInput extends AuroElement$1 {
|
|
|
5791
5848
|
}
|
|
5792
5849
|
|
|
5793
5850
|
/**
|
|
5794
|
-
* Resets component to initial state.
|
|
5851
|
+
* Resets component to initial state, including resetting the touched state and validity.
|
|
5795
5852
|
* @returns {void}
|
|
5796
5853
|
*/
|
|
5797
5854
|
reset() {
|
|
5798
5855
|
this.validation.reset(this);
|
|
5799
5856
|
}
|
|
5800
5857
|
|
|
5858
|
+
/**
|
|
5859
|
+
* Clears the input value.
|
|
5860
|
+
*/
|
|
5861
|
+
clear() {
|
|
5862
|
+
this.value = undefined;
|
|
5863
|
+
}
|
|
5864
|
+
|
|
5801
5865
|
/**
|
|
5802
5866
|
* Sets configuration data used elsewhere based on the `type` attribute.
|
|
5803
5867
|
* @private
|
|
@@ -5876,28 +5940,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
5876
5940
|
* @returns {void}
|
|
5877
5941
|
*/
|
|
5878
5942
|
getPlaceholder() {
|
|
5879
|
-
|
|
5880
|
-
|
|
5881
|
-
|
|
5882
|
-
|
|
5883
|
-
// console.warn(this.getActiveElement());
|
|
5884
|
-
|
|
5885
|
-
if (!isFocused) {
|
|
5886
|
-
if (this.placeholder) {
|
|
5887
|
-
this.placeholderStr = this.placeholder;
|
|
5888
|
-
// return this.placeholder;
|
|
5889
|
-
} else if (this.type === 'date') {
|
|
5890
|
-
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5891
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5892
|
-
}
|
|
5893
|
-
} else {
|
|
5894
|
-
this.placeholderStr = '';
|
|
5943
|
+
if (this.placeholder) {
|
|
5944
|
+
this.placeholderStr = this.placeholder;
|
|
5945
|
+
} else if (this.type === 'date') {
|
|
5946
|
+
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5895
5947
|
}
|
|
5896
5948
|
|
|
5897
5949
|
this.requestUpdate();
|
|
5898
5950
|
|
|
5899
|
-
|
|
5900
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5951
|
+
return this.placeholderStr;
|
|
5901
5952
|
}
|
|
5902
5953
|
|
|
5903
5954
|
/**
|
|
@@ -6110,7 +6161,7 @@ class AuroDependencyVersioning {
|
|
|
6110
6161
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
6111
6162
|
*/
|
|
6112
6163
|
|
|
6113
|
-
class AuroElement extends i$2 {
|
|
6164
|
+
let AuroElement$1 = class AuroElement extends i$2 {
|
|
6114
6165
|
|
|
6115
6166
|
// function to define props used within the scope of this component
|
|
6116
6167
|
static get properties() {
|
|
@@ -6134,7 +6185,7 @@ class AuroElement extends i$2 {
|
|
|
6134
6185
|
|
|
6135
6186
|
return 'false'
|
|
6136
6187
|
}
|
|
6137
|
-
}
|
|
6188
|
+
};
|
|
6138
6189
|
|
|
6139
6190
|
var error = {"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" aria-labelledby=\"error__desc\" class=\"ico_squareLarge\" data-deprecated=\"true\" role=\"img\" style=\"min-width:var(--auro-size-lg, var(--ds-size-300, 1.5rem));height:var(--auro-size-lg, var(--ds-size-300, 1.5rem));fill:currentColor\" viewBox=\"0 0 24 24\" part=\"svg\"><title/><desc id=\"error__desc\">Error alert indicator.</desc><path d=\"m13.047 5.599 6.786 11.586A1.207 1.207 0 0 1 18.786 19H5.214a1.207 1.207 0 0 1-1.047-1.815l6.786-11.586a1.214 1.214 0 0 1 2.094 0m-1.165.87a.23.23 0 0 0-.085.085L5.419 17.442a.232.232 0 0 0 .203.35h12.756a.234.234 0 0 0 .203-.35L12.203 6.554a.236.236 0 0 0-.321-.084M12 15.5a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5m-.024-6.22c.325 0 .589.261.589.583v4.434a.586.586 0 0 1-.589.583.586.586 0 0 1-.588-.583V9.863c0-.322.264-.583.588-.583\"/></svg>"};
|
|
6140
6191
|
|
|
@@ -6178,7 +6229,7 @@ var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
6178
6229
|
*/
|
|
6179
6230
|
|
|
6180
6231
|
// build the component class
|
|
6181
|
-
class BaseIcon extends AuroElement {
|
|
6232
|
+
class BaseIcon extends AuroElement$1 {
|
|
6182
6233
|
constructor() {
|
|
6183
6234
|
super();
|
|
6184
6235
|
this.onDark = false;
|
|
@@ -6261,7 +6312,7 @@ var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
|
|
|
6261
6312
|
|
|
6262
6313
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6263
6314
|
|
|
6264
|
-
let AuroLibraryRuntimeUtils$
|
|
6315
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
6265
6316
|
|
|
6266
6317
|
/* eslint-disable jsdoc/require-param */
|
|
6267
6318
|
|
|
@@ -6343,7 +6394,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6343
6394
|
*/
|
|
6344
6395
|
privateDefaults() {
|
|
6345
6396
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
6346
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6397
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
6347
6398
|
}
|
|
6348
6399
|
|
|
6349
6400
|
// function to define props used within the scope of this component
|
|
@@ -6425,7 +6476,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6425
6476
|
*
|
|
6426
6477
|
*/
|
|
6427
6478
|
static register(name = "auro-icon") {
|
|
6428
|
-
AuroLibraryRuntimeUtils$
|
|
6479
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
|
|
6429
6480
|
}
|
|
6430
6481
|
|
|
6431
6482
|
connectedCallback() {
|
|
@@ -6446,8 +6497,12 @@ class AuroIcon extends BaseIcon {
|
|
|
6446
6497
|
async firstUpdated() {
|
|
6447
6498
|
await super.firstUpdated();
|
|
6448
6499
|
|
|
6449
|
-
|
|
6450
|
-
|
|
6500
|
+
/**
|
|
6501
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
6502
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
6503
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
6504
|
+
*/
|
|
6505
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
6451
6506
|
const svgDesc = this.svg.querySelector('desc');
|
|
6452
6507
|
|
|
6453
6508
|
if (svgDesc) {
|
|
@@ -6491,118 +6546,655 @@ class AuroIcon extends BaseIcon {
|
|
|
6491
6546
|
}
|
|
6492
6547
|
}
|
|
6493
6548
|
|
|
6494
|
-
var iconVersion = '8.0.
|
|
6549
|
+
var iconVersion = '8.0.4';
|
|
6495
6550
|
|
|
6496
|
-
|
|
6551
|
+
/**
|
|
6552
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
6553
|
+
*/
|
|
6554
|
+
const _observers = new WeakMap();
|
|
6497
6555
|
|
|
6498
|
-
|
|
6556
|
+
/**
|
|
6557
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
6558
|
+
* Structure: {
|
|
6559
|
+
* host: {
|
|
6560
|
+
* matchers: Set<Function>,
|
|
6561
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
6562
|
+
* }
|
|
6563
|
+
* }
|
|
6564
|
+
*/
|
|
6565
|
+
const _transportConfig = new WeakMap();
|
|
6499
6566
|
|
|
6500
|
-
|
|
6567
|
+
/**
|
|
6568
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
6569
|
+
*
|
|
6570
|
+
* @param {Object} params - The parameters for the function.
|
|
6571
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
6572
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6573
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
6574
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
6575
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
6576
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
6577
|
+
*/
|
|
6578
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
6579
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
6580
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
6581
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
6582
|
+
}
|
|
6501
6583
|
|
|
6502
|
-
|
|
6584
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
6585
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
6586
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
6587
|
+
}
|
|
6503
6588
|
|
|
6504
|
-
|
|
6589
|
+
// Guard Clause: Ensure match is a function
|
|
6590
|
+
if (typeof match !== 'function') {
|
|
6591
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
6592
|
+
}
|
|
6505
6593
|
|
|
6506
|
-
|
|
6594
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
6595
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
6596
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
6597
|
+
}
|
|
6598
|
+
|
|
6599
|
+
// Register this transport and get cleanup function
|
|
6600
|
+
return _registerTransport({
|
|
6601
|
+
host,
|
|
6602
|
+
target,
|
|
6603
|
+
matcher: match,
|
|
6604
|
+
removeOriginal
|
|
6605
|
+
});
|
|
6606
|
+
};
|
|
6507
6607
|
|
|
6508
|
-
|
|
6509
|
-
|
|
6608
|
+
/**
|
|
6609
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
6610
|
+
*
|
|
6611
|
+
* @param {Object} params - The parameters object.
|
|
6612
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
6613
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
6614
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
6615
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
6616
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
6617
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
6618
|
+
* @private
|
|
6619
|
+
*/
|
|
6620
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6621
|
+
// Initialize config for this host if it doesn't exist
|
|
6622
|
+
if (!_transportConfig.has(host)) {
|
|
6623
|
+
_transportConfig.set(host, {
|
|
6624
|
+
matchers: new Set(),
|
|
6625
|
+
targets: new Map()
|
|
6626
|
+
});
|
|
6627
|
+
}
|
|
6510
6628
|
|
|
6629
|
+
const config = _transportConfig.get(host);
|
|
6630
|
+
|
|
6631
|
+
// Add the matcher to the set of matchers for this host
|
|
6632
|
+
config.matchers.add(matcher);
|
|
6633
|
+
|
|
6634
|
+
// Initialize target entry if it doesn't exist
|
|
6635
|
+
if (!config.targets.has(target)) {
|
|
6636
|
+
config.targets.set(target, new Map());
|
|
6637
|
+
}
|
|
6638
|
+
|
|
6639
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
6640
|
+
config.targets.get(target).set(matcher, {
|
|
6641
|
+
removeOriginal,
|
|
6642
|
+
currentAttributes: new Map()
|
|
6643
|
+
});
|
|
6644
|
+
|
|
6645
|
+
// Perform initial attribute transport
|
|
6646
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
6647
|
+
|
|
6648
|
+
// Attach observer
|
|
6649
|
+
_attachObserver(host);
|
|
6650
|
+
|
|
6651
|
+
// Return cleanup function and utility functions
|
|
6652
|
+
return {
|
|
6653
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
6654
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
6655
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
6656
|
+
}
|
|
6657
|
+
};
|
|
6511
6658
|
|
|
6512
|
-
|
|
6513
|
-
|
|
6514
|
-
|
|
6659
|
+
/**
|
|
6660
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
6661
|
+
*
|
|
6662
|
+
* @param {HTMLElement} host - The host element
|
|
6663
|
+
* @param {HTMLElement} target - The target element
|
|
6664
|
+
* @param {Function} matcher - The matcher function
|
|
6665
|
+
* @private
|
|
6666
|
+
*/
|
|
6667
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
6668
|
+
const config = _transportConfig.get(host);
|
|
6669
|
+
if (!config) return;
|
|
6670
|
+
|
|
6671
|
+
// Remove this matcher from this target
|
|
6672
|
+
const targetMatchers = config.targets.get(target);
|
|
6673
|
+
if (targetMatchers) {
|
|
6674
|
+
targetMatchers.delete(matcher);
|
|
6675
|
+
|
|
6676
|
+
// If this target has no more matchers, remove it
|
|
6677
|
+
if (targetMatchers.size === 0) {
|
|
6678
|
+
config.targets.delete(target);
|
|
6679
|
+
}
|
|
6680
|
+
}
|
|
6681
|
+
|
|
6682
|
+
// Check if this matcher is still used by any target
|
|
6683
|
+
let matcherStillUsed = false;
|
|
6684
|
+
for (const matcherMap of config.targets.values()) {
|
|
6685
|
+
if (matcherMap.has(matcher)) {
|
|
6686
|
+
matcherStillUsed = true;
|
|
6687
|
+
break;
|
|
6688
|
+
}
|
|
6689
|
+
}
|
|
6690
|
+
|
|
6691
|
+
// If not used anymore, remove from matchers set
|
|
6692
|
+
if (!matcherStillUsed) {
|
|
6693
|
+
config.matchers.delete(matcher);
|
|
6694
|
+
}
|
|
6695
|
+
|
|
6696
|
+
// If no more targets or matchers, detach observer
|
|
6697
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
6698
|
+
_detachObserver(host);
|
|
6699
|
+
}
|
|
6700
|
+
};
|
|
6515
6701
|
|
|
6516
|
-
|
|
6517
|
-
|
|
6518
|
-
|
|
6519
|
-
|
|
6702
|
+
/**
|
|
6703
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
6704
|
+
*
|
|
6705
|
+
* @param {Object} params - The parameters object.
|
|
6706
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
6707
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6708
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
6709
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
6710
|
+
* @returns {void}
|
|
6711
|
+
* @private
|
|
6712
|
+
*/
|
|
6713
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6714
|
+
// Get a list of all matching attributes on the host element and their values
|
|
6715
|
+
const matchingAttributes = host.getAttributeNames()
|
|
6716
|
+
.filter(attr => matcher(attr))
|
|
6717
|
+
.reduce((acc, attr) => {
|
|
6718
|
+
acc[attr] = host.getAttribute(attr);
|
|
6719
|
+
return acc;
|
|
6720
|
+
}, {});
|
|
6721
|
+
|
|
6722
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
6723
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
6724
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
6725
|
+
target.setAttribute(key, value);
|
|
6726
|
+
if (removeOriginal) {
|
|
6727
|
+
host.removeAttribute(key);
|
|
6728
|
+
}
|
|
6729
|
+
});
|
|
6730
|
+
};
|
|
6520
6731
|
|
|
6521
|
-
|
|
6522
|
-
|
|
6523
|
-
|
|
6524
|
-
|
|
6732
|
+
/**
|
|
6733
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
6734
|
+
*
|
|
6735
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
6736
|
+
* @returns {MutationObserver} The observer instance.
|
|
6737
|
+
* @private
|
|
6738
|
+
*/
|
|
6739
|
+
const _attachObserver = (host) => {
|
|
6740
|
+
// If an observer for this host already exists, return it
|
|
6741
|
+
if (_observers.has(host)) {
|
|
6742
|
+
return _observers.get(host);
|
|
6743
|
+
}
|
|
6744
|
+
|
|
6745
|
+
// Create a new MutationObserver
|
|
6746
|
+
const observer = new MutationObserver((mutations) => {
|
|
6747
|
+
const config = _transportConfig.get(host);
|
|
6748
|
+
if (!config) return;
|
|
6749
|
+
|
|
6750
|
+
// For each mutation affecting attributes
|
|
6751
|
+
mutations
|
|
6752
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
6753
|
+
.forEach(mutation => {
|
|
6754
|
+
const attributeName = mutation.attributeName;
|
|
6755
|
+
|
|
6756
|
+
// Find matchers that care about this attribute
|
|
6757
|
+
for (const matcher of config.matchers) {
|
|
6758
|
+
if (matcher(attributeName)) {
|
|
6759
|
+
// For each target that uses this matcher
|
|
6760
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
6761
|
+
if (matcherConfigs.has(matcher)) {
|
|
6762
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
6763
|
+
_transportAttributes({
|
|
6764
|
+
host,
|
|
6765
|
+
target,
|
|
6766
|
+
matcher,
|
|
6767
|
+
removeOriginal
|
|
6768
|
+
});
|
|
6769
|
+
}
|
|
6770
|
+
}
|
|
6771
|
+
}
|
|
6772
|
+
}
|
|
6773
|
+
});
|
|
6774
|
+
});
|
|
6525
6775
|
|
|
6526
|
-
|
|
6527
|
-
|
|
6528
|
-
|
|
6529
|
-
|
|
6776
|
+
// Start observing attribute changes
|
|
6777
|
+
observer.observe(host, { attributes: true });
|
|
6778
|
+
|
|
6779
|
+
// Store the observer
|
|
6780
|
+
_observers.set(host, observer);
|
|
6781
|
+
|
|
6782
|
+
return observer;
|
|
6783
|
+
};
|
|
6530
6784
|
|
|
6531
|
-
|
|
6532
|
-
|
|
6533
|
-
|
|
6534
|
-
|
|
6785
|
+
/**
|
|
6786
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
6787
|
+
*
|
|
6788
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
6789
|
+
* @private
|
|
6790
|
+
*/
|
|
6791
|
+
const _detachObserver = (host) => {
|
|
6792
|
+
if (_observers.has(host)) {
|
|
6793
|
+
const observer = _observers.get(host);
|
|
6794
|
+
observer.disconnect();
|
|
6795
|
+
_observers.delete(host);
|
|
6796
|
+
}
|
|
6797
|
+
|
|
6798
|
+
// Clean up the transport config as well
|
|
6799
|
+
if (_transportConfig.has(host)) {
|
|
6800
|
+
_transportConfig.delete(host);
|
|
6801
|
+
}
|
|
6802
|
+
};
|
|
6535
6803
|
|
|
6536
|
-
|
|
6537
|
-
|
|
6538
|
-
|
|
6539
|
-
|
|
6804
|
+
/**
|
|
6805
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
6806
|
+
* @param {HTMLElement} host - The host element
|
|
6807
|
+
* @param {HTMLElement} target - The target element
|
|
6808
|
+
* @param {Function} matcher - The matcher function
|
|
6809
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
6810
|
+
* @private
|
|
6811
|
+
*/
|
|
6812
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
6813
|
+
const config = _transportConfig.get(host);
|
|
6814
|
+
if (!config) return undefined;
|
|
6815
|
+
|
|
6816
|
+
const targetMatchers = config.targets.get(target);
|
|
6817
|
+
if (!targetMatchers) return undefined;
|
|
6818
|
+
|
|
6819
|
+
return targetMatchers.get(matcher);
|
|
6820
|
+
};
|
|
6821
|
+
|
|
6822
|
+
/**
|
|
6823
|
+
* Sets an observed attribute value
|
|
6824
|
+
* @param {HTMLElement} host - The host element
|
|
6825
|
+
* @param {HTMLElement} target - The target element
|
|
6826
|
+
* @param {Function} matcher - The matcher function
|
|
6827
|
+
* @param {string} key - The attribute name
|
|
6828
|
+
* @param {string} value - The attribute value
|
|
6829
|
+
* @private
|
|
6830
|
+
*/
|
|
6831
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
6832
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6833
|
+
if (matcherConfig) {
|
|
6834
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
6540
6835
|
}
|
|
6836
|
+
};
|
|
6837
|
+
|
|
6838
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
6839
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6840
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
6841
|
+
return undefined;
|
|
6842
|
+
};
|
|
6843
|
+
|
|
6844
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
6845
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6846
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
6847
|
+
return [];
|
|
6848
|
+
};
|
|
6849
|
+
|
|
6850
|
+
const _matchers = {
|
|
6851
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
6852
|
+
'role': attr => attr.match(/^role$/)
|
|
6853
|
+
};
|
|
6854
|
+
|
|
6855
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
6856
|
+
return transportAttributes({
|
|
6857
|
+
host,
|
|
6858
|
+
target,
|
|
6859
|
+
match: attr => {
|
|
6860
|
+
for (const key in _matchers) {
|
|
6861
|
+
if (_matchers[key](attr)) return true;
|
|
6862
|
+
}
|
|
6863
|
+
return false;
|
|
6864
|
+
},
|
|
6865
|
+
removeOriginal
|
|
6866
|
+
});
|
|
6867
|
+
};
|
|
6868
|
+
|
|
6869
|
+
class AuroElement extends i$2 {
|
|
6870
|
+
|
|
6871
|
+
/**
|
|
6872
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
6873
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
6874
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
6875
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
6876
|
+
* @private
|
|
6877
|
+
*/
|
|
6878
|
+
attributeWatcher;
|
|
6541
6879
|
|
|
6542
|
-
// function to define props used within the scope of this component
|
|
6543
6880
|
static get properties() {
|
|
6544
6881
|
return {
|
|
6545
6882
|
|
|
6546
6883
|
/**
|
|
6547
|
-
*
|
|
6884
|
+
* Defines the layout of an element.
|
|
6885
|
+
* @default {'default'}
|
|
6548
6886
|
*/
|
|
6549
|
-
|
|
6550
|
-
type:
|
|
6887
|
+
layout: {
|
|
6888
|
+
type: String,
|
|
6889
|
+
attribute: "layout",
|
|
6551
6890
|
reflect: true
|
|
6552
6891
|
},
|
|
6553
|
-
|
|
6892
|
+
|
|
6554
6893
|
/**
|
|
6555
|
-
*
|
|
6894
|
+
* Defines the shape of an element.
|
|
6895
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
6896
|
+
* @default {'default'}
|
|
6556
6897
|
*/
|
|
6557
|
-
|
|
6558
|
-
type:
|
|
6898
|
+
shape: {
|
|
6899
|
+
type: String,
|
|
6900
|
+
attribute: "shape",
|
|
6559
6901
|
reflect: true
|
|
6560
6902
|
},
|
|
6561
6903
|
|
|
6562
6904
|
/**
|
|
6563
|
-
*
|
|
6905
|
+
* Defines the size of an element.
|
|
6906
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
6907
|
+
* @default {'md'}
|
|
6564
6908
|
*/
|
|
6565
|
-
|
|
6566
|
-
type:
|
|
6909
|
+
size: {
|
|
6910
|
+
type: String,
|
|
6911
|
+
attribute: "size",
|
|
6567
6912
|
reflect: true
|
|
6568
6913
|
},
|
|
6569
6914
|
|
|
6570
|
-
/**
|
|
6571
|
-
*
|
|
6915
|
+
/**
|
|
6916
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
6917
|
+
* @default {false}
|
|
6572
6918
|
*/
|
|
6573
|
-
|
|
6919
|
+
onDark: {
|
|
6574
6920
|
type: Boolean,
|
|
6921
|
+
attribute: "ondark",
|
|
6575
6922
|
reflect: true
|
|
6923
|
+
},
|
|
6924
|
+
|
|
6925
|
+
/**
|
|
6926
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
6927
|
+
* This is used to apply layout and shape classes dynamically.
|
|
6928
|
+
* @type {HTMLElement|null}
|
|
6929
|
+
* @default {null}
|
|
6930
|
+
* @private
|
|
6931
|
+
*/
|
|
6932
|
+
wrapper: {
|
|
6933
|
+
attribute: false,
|
|
6934
|
+
reflect: false
|
|
6576
6935
|
}
|
|
6577
6936
|
};
|
|
6578
6937
|
}
|
|
6579
6938
|
|
|
6580
|
-
|
|
6581
|
-
return [
|
|
6582
|
-
i$5`${styleCss$1}`,
|
|
6583
|
-
i$5`${colorCss$1}`,
|
|
6584
|
-
i$5`${tokensCss$1}`
|
|
6585
|
-
];
|
|
6586
|
-
}
|
|
6939
|
+
|
|
6587
6940
|
|
|
6588
|
-
|
|
6589
|
-
|
|
6590
|
-
* @param {string} [name="auro-loader"] - The name of element that you want to register to.
|
|
6591
|
-
*
|
|
6592
|
-
* @example
|
|
6593
|
-
* AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
|
|
6594
|
-
*
|
|
6595
|
-
*/
|
|
6596
|
-
static register(name = "auro-loader") {
|
|
6597
|
-
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroLoader);
|
|
6598
|
-
}
|
|
6941
|
+
resetShapeClasses() {
|
|
6942
|
+
if (this.shape && this.size) {
|
|
6599
6943
|
|
|
6600
|
-
|
|
6601
|
-
|
|
6602
|
-
|
|
6944
|
+
if (this.wrapper) {
|
|
6945
|
+
this.wrapper.classList.forEach((className) => {
|
|
6946
|
+
if (className.startsWith('shape-')) {
|
|
6947
|
+
this.wrapper.classList.remove(className);
|
|
6948
|
+
}
|
|
6949
|
+
});
|
|
6950
|
+
|
|
6951
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
6952
|
+
}
|
|
6953
|
+
}
|
|
6603
6954
|
}
|
|
6604
6955
|
|
|
6605
|
-
|
|
6956
|
+
resetLayoutClasses() {
|
|
6957
|
+
if (this.layout) {
|
|
6958
|
+
if (this.wrapper) {
|
|
6959
|
+
this.wrapper.classList.forEach((className) => {
|
|
6960
|
+
if (className.startsWith('layout-')) {
|
|
6961
|
+
this.wrapper.classList.remove(className);
|
|
6962
|
+
}
|
|
6963
|
+
});
|
|
6964
|
+
|
|
6965
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
6966
|
+
}
|
|
6967
|
+
}
|
|
6968
|
+
}
|
|
6969
|
+
|
|
6970
|
+
updateComponentArchitecture() {
|
|
6971
|
+
this.resetLayoutClasses();
|
|
6972
|
+
this.resetShapeClasses();
|
|
6973
|
+
}
|
|
6974
|
+
|
|
6975
|
+
updated(changedProperties) {
|
|
6976
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
6977
|
+
this.updateComponentArchitecture();
|
|
6978
|
+
}
|
|
6979
|
+
}
|
|
6980
|
+
|
|
6981
|
+
firstUpdated() {
|
|
6982
|
+
super.firstUpdated();
|
|
6983
|
+
|
|
6984
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
6985
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
6986
|
+
|
|
6987
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
6988
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
6989
|
+
}
|
|
6990
|
+
|
|
6991
|
+
disconnectedCallback() {
|
|
6992
|
+
super.disconnectedCallback();
|
|
6993
|
+
|
|
6994
|
+
// Cleanup the ARIA observer if it exists
|
|
6995
|
+
if (this.attributeWatcher) {
|
|
6996
|
+
this.attributeWatcher.cleanup();
|
|
6997
|
+
this.attributeWatcher = null;
|
|
6998
|
+
}
|
|
6999
|
+
}
|
|
7000
|
+
|
|
7001
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
7002
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
7003
|
+
render() {
|
|
7004
|
+
try {
|
|
7005
|
+
return this.renderLayout();
|
|
7006
|
+
} catch (error) {
|
|
7007
|
+
// failed to get the defined layout
|
|
7008
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
7009
|
+
|
|
7010
|
+
// fallback to the default layout
|
|
7011
|
+
return this.getLayout('default');
|
|
7012
|
+
}
|
|
7013
|
+
}
|
|
7014
|
+
}
|
|
7015
|
+
|
|
7016
|
+
var styleCss$2 = 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{padding-inline:var(--ds-size-150, 0.75rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-150, 0.75rem)*2)}:host([size=sm]) .inset{padding-inline:var(--ds-size-200, 1rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-200, 1rem)*2)}:host([size=md]) .inset{padding-inline:var(--ds-size-300, 1.5rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-300, 1.5rem)*2)}:host([size=lg]) .inset{padding-inline:var(--ds-size-400, 2rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-400, 2rem)*2)}:host([size=xl]) .inset{padding-inline:var(--ds-size-500, 2.5rem)}:host([fluid]){display:block}:host([fluid]) .auro-button{width:calc(100% - var(--ds-size-500, 2.5rem)*2)}: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}`;
|
|
7017
|
+
|
|
7018
|
+
var colorCss$2 = 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)}`;
|
|
7019
|
+
|
|
7020
|
+
var tokensCss$2 = 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}`;
|
|
7021
|
+
|
|
7022
|
+
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}`;
|
|
7023
|
+
|
|
7024
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
7025
|
+
// See LICENSE in the project root for license information.
|
|
7026
|
+
|
|
7027
|
+
// ---------------------------------------------------------------------
|
|
7028
|
+
|
|
7029
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
7030
|
+
|
|
7031
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
7032
|
+
|
|
7033
|
+
/* eslint-disable jsdoc/require-param */
|
|
7034
|
+
|
|
7035
|
+
/**
|
|
7036
|
+
* This will register a new custom element with the browser.
|
|
7037
|
+
* @param {String} name - The name of the custom element.
|
|
7038
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
7039
|
+
* @returns {void}
|
|
7040
|
+
*/
|
|
7041
|
+
registerComponent(name, componentClass) {
|
|
7042
|
+
if (!customElements.get(name)) {
|
|
7043
|
+
customElements.define(name, class extends componentClass {});
|
|
7044
|
+
}
|
|
7045
|
+
}
|
|
7046
|
+
|
|
7047
|
+
/**
|
|
7048
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
7049
|
+
* @returns {void}
|
|
7050
|
+
*/
|
|
7051
|
+
closestElement(
|
|
7052
|
+
selector, // selector like in .closest()
|
|
7053
|
+
base = this, // extra functionality to skip a parent
|
|
7054
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
7055
|
+
!el || el === document || el === window
|
|
7056
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
7057
|
+
: found
|
|
7058
|
+
? found // found a selector INside this element
|
|
7059
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
7060
|
+
) {
|
|
7061
|
+
return __Closest(base);
|
|
7062
|
+
}
|
|
7063
|
+
/* eslint-enable jsdoc/require-param */
|
|
7064
|
+
|
|
7065
|
+
/**
|
|
7066
|
+
* 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.
|
|
7067
|
+
* @param {Object} elem - The element to check.
|
|
7068
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
7069
|
+
* @returns {void}
|
|
7070
|
+
*/
|
|
7071
|
+
handleComponentTagRename(elem, tagName) {
|
|
7072
|
+
const tag = tagName.toLowerCase();
|
|
7073
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
7074
|
+
|
|
7075
|
+
if (elemTag !== tag) {
|
|
7076
|
+
elem.setAttribute(tag, true);
|
|
7077
|
+
}
|
|
7078
|
+
}
|
|
7079
|
+
|
|
7080
|
+
/**
|
|
7081
|
+
* Validates if an element is a specific Auro component.
|
|
7082
|
+
* @param {Object} elem - The element to validate.
|
|
7083
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
7084
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
7085
|
+
*/
|
|
7086
|
+
elementMatch(elem, tagName) {
|
|
7087
|
+
const tag = tagName.toLowerCase();
|
|
7088
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
7089
|
+
|
|
7090
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
7091
|
+
}
|
|
7092
|
+
};
|
|
7093
|
+
|
|
7094
|
+
var styleCss$1 = 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}}`;
|
|
7095
|
+
|
|
7096
|
+
var colorCss$1 = 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}`;
|
|
7097
|
+
|
|
7098
|
+
var tokensCss$1 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
7099
|
+
|
|
7100
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7101
|
+
// See LICENSE in the project root for license information.
|
|
7102
|
+
|
|
7103
|
+
|
|
7104
|
+
class AuroLoader extends i$2 {
|
|
7105
|
+
constructor() {
|
|
7106
|
+
super();
|
|
7107
|
+
|
|
7108
|
+
/**
|
|
7109
|
+
* @private
|
|
7110
|
+
*/
|
|
7111
|
+
this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
7112
|
+
|
|
7113
|
+
/**
|
|
7114
|
+
* @private
|
|
7115
|
+
*/
|
|
7116
|
+
this.mdCount = 3;
|
|
7117
|
+
|
|
7118
|
+
/**
|
|
7119
|
+
* @private
|
|
7120
|
+
*/
|
|
7121
|
+
this.smCount = 2;
|
|
7122
|
+
|
|
7123
|
+
/**
|
|
7124
|
+
* @private
|
|
7125
|
+
*/
|
|
7126
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
7127
|
+
|
|
7128
|
+
this.orbit = false;
|
|
7129
|
+
this.ringworm = false;
|
|
7130
|
+
this.laser = false;
|
|
7131
|
+
this.pulse = false;
|
|
7132
|
+
}
|
|
7133
|
+
|
|
7134
|
+
// function to define props used within the scope of this component
|
|
7135
|
+
static get properties() {
|
|
7136
|
+
return {
|
|
7137
|
+
|
|
7138
|
+
/**
|
|
7139
|
+
* Sets loader to laser type.
|
|
7140
|
+
*/
|
|
7141
|
+
laser: {
|
|
7142
|
+
type: Boolean,
|
|
7143
|
+
reflect: true
|
|
7144
|
+
},
|
|
7145
|
+
|
|
7146
|
+
/**
|
|
7147
|
+
* Sets loader to orbit type.
|
|
7148
|
+
*/
|
|
7149
|
+
orbit: {
|
|
7150
|
+
type: Boolean,
|
|
7151
|
+
reflect: true
|
|
7152
|
+
},
|
|
7153
|
+
|
|
7154
|
+
/**
|
|
7155
|
+
* Sets loader to pulse type.
|
|
7156
|
+
*/
|
|
7157
|
+
pulse: {
|
|
7158
|
+
type: Boolean,
|
|
7159
|
+
reflect: true
|
|
7160
|
+
},
|
|
7161
|
+
|
|
7162
|
+
/**
|
|
7163
|
+
* Sets loader to ringworm type.
|
|
7164
|
+
*/
|
|
7165
|
+
ringworm: {
|
|
7166
|
+
type: Boolean,
|
|
7167
|
+
reflect: true
|
|
7168
|
+
}
|
|
7169
|
+
};
|
|
7170
|
+
}
|
|
7171
|
+
|
|
7172
|
+
static get styles() {
|
|
7173
|
+
return [
|
|
7174
|
+
i$5`${styleCss$1}`,
|
|
7175
|
+
i$5`${colorCss$1}`,
|
|
7176
|
+
i$5`${tokensCss$1}`
|
|
7177
|
+
];
|
|
7178
|
+
}
|
|
7179
|
+
|
|
7180
|
+
/**
|
|
7181
|
+
* This will register this element with the browser.
|
|
7182
|
+
* @param {string} [name="auro-loader"] - The name of element that you want to register to.
|
|
7183
|
+
*
|
|
7184
|
+
* @example
|
|
7185
|
+
* AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
|
|
7186
|
+
*
|
|
7187
|
+
*/
|
|
7188
|
+
static register(name = "auro-loader") {
|
|
7189
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
|
|
7190
|
+
}
|
|
7191
|
+
|
|
7192
|
+
firstUpdated() {
|
|
7193
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
7194
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
|
|
7195
|
+
}
|
|
7196
|
+
|
|
7197
|
+
connectedCallback() {
|
|
6606
7198
|
super.connectedCallback();
|
|
6607
7199
|
}
|
|
6608
7200
|
|
|
@@ -6632,7 +7224,7 @@ class AuroLoader extends i$2 {
|
|
|
6632
7224
|
<span part="element" class="loader node-${idx}"></span>
|
|
6633
7225
|
`)}
|
|
6634
7226
|
|
|
6635
|
-
<div class="no-animation">Loading...</div>
|
|
7227
|
+
<div class="no-animation body-default">Loading...</div>
|
|
6636
7228
|
|
|
6637
7229
|
${this.ringworm ? x`
|
|
6638
7230
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
@@ -6644,25 +7236,32 @@ class AuroLoader extends i$2 {
|
|
|
6644
7236
|
}
|
|
6645
7237
|
}
|
|
6646
7238
|
|
|
6647
|
-
var loaderVersion = '5.
|
|
7239
|
+
var loaderVersion = '5.1.0';
|
|
6648
7240
|
|
|
6649
|
-
/* eslint-disable max-lines */
|
|
6650
7241
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6651
7242
|
// See LICENSE in the project root for license information.
|
|
6652
7243
|
|
|
6653
7244
|
|
|
6654
7245
|
/**
|
|
6655
7246
|
* @slot - Default slot for the text of the button.
|
|
6656
|
-
* @slot icon - Slot to provide auro-icon for the button.
|
|
6657
7247
|
* @csspart button - Apply CSS to HTML5 button.
|
|
6658
7248
|
* @csspart loader - Apply CSS to auro-loader.
|
|
6659
7249
|
* @csspart text - Apply CSS to text slot.
|
|
6660
7250
|
* @csspart icon - Apply CSS to icon slot.
|
|
6661
7251
|
*/
|
|
6662
7252
|
|
|
6663
|
-
|
|
7253
|
+
const ICON_ONLY_SHAPES = ['circle', 'square'];
|
|
6664
7254
|
|
|
6665
|
-
|
|
7255
|
+
/**
|
|
7256
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
7257
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
7258
|
+
* @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
|
|
7259
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
7260
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
7261
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
7262
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
7263
|
+
*/
|
|
7264
|
+
class AuroButton extends AuroElement {
|
|
6666
7265
|
|
|
6667
7266
|
/**
|
|
6668
7267
|
* Enables form association for this element.
|
|
@@ -6677,15 +7276,13 @@ class AuroButton extends i$2 {
|
|
|
6677
7276
|
super();
|
|
6678
7277
|
this.autofocus = false;
|
|
6679
7278
|
this.disabled = false;
|
|
6680
|
-
this.iconOnly = false;
|
|
6681
7279
|
this.loading = false;
|
|
7280
|
+
this.size = "md";
|
|
7281
|
+
this.shape = "rounded";
|
|
6682
7282
|
this.onDark = false;
|
|
6683
|
-
this.secondary = false;
|
|
6684
|
-
this.tertiary = false;
|
|
6685
|
-
this.rounded = false;
|
|
6686
|
-
this.slim = false;
|
|
6687
7283
|
this.fluid = false;
|
|
6688
7284
|
this.loadingText = this.loadingText || 'Loading...';
|
|
7285
|
+
this.variant = 'primary';
|
|
6689
7286
|
|
|
6690
7287
|
// Support for HTML5 forms
|
|
6691
7288
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -6706,49 +7303,59 @@ class AuroButton extends i$2 {
|
|
|
6706
7303
|
* @private
|
|
6707
7304
|
*/
|
|
6708
7305
|
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
7306
|
+
|
|
7307
|
+
/**
|
|
7308
|
+
* @private
|
|
7309
|
+
*/
|
|
7310
|
+
this.buttonHref = undefined;
|
|
7311
|
+
|
|
7312
|
+
/**
|
|
7313
|
+
* @private
|
|
7314
|
+
*/
|
|
7315
|
+
this.buttonTarget = undefined;
|
|
7316
|
+
|
|
7317
|
+
/**
|
|
7318
|
+
* @private
|
|
7319
|
+
*/
|
|
7320
|
+
this.buttonRel = undefined;
|
|
6709
7321
|
}
|
|
6710
7322
|
|
|
6711
7323
|
static get styles() {
|
|
6712
7324
|
return [
|
|
6713
7325
|
tokensCss$2,
|
|
6714
7326
|
styleCss$2,
|
|
6715
|
-
colorCss$2
|
|
7327
|
+
colorCss$2,
|
|
7328
|
+
shapeSize
|
|
6716
7329
|
];
|
|
6717
7330
|
}
|
|
6718
7331
|
|
|
6719
7332
|
static get properties() {
|
|
6720
7333
|
return {
|
|
6721
7334
|
|
|
6722
|
-
|
|
6723
|
-
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6724
|
-
*/
|
|
6725
|
-
autofocus: {
|
|
6726
|
-
type: Boolean,
|
|
6727
|
-
reflect: true
|
|
6728
|
-
},
|
|
7335
|
+
...super.properties,
|
|
6729
7336
|
|
|
6730
7337
|
/**
|
|
6731
|
-
*
|
|
7338
|
+
* Override layout since it isn't used in this component.
|
|
7339
|
+
* @private
|
|
6732
7340
|
*/
|
|
6733
|
-
|
|
7341
|
+
layout: {
|
|
6734
7342
|
type: Boolean,
|
|
6735
|
-
|
|
7343
|
+
attribute: false,
|
|
7344
|
+
reflect: false
|
|
6736
7345
|
},
|
|
6737
7346
|
|
|
6738
7347
|
/**
|
|
6739
|
-
*
|
|
6740
|
-
* @deprecated
|
|
7348
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6741
7349
|
*/
|
|
6742
|
-
|
|
7350
|
+
autofocus: {
|
|
6743
7351
|
type: Boolean,
|
|
6744
7352
|
reflect: true
|
|
6745
7353
|
},
|
|
6746
7354
|
|
|
6747
7355
|
/**
|
|
6748
|
-
*
|
|
6749
|
-
* @deprecated
|
|
7356
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
6750
7357
|
*/
|
|
6751
|
-
|
|
7358
|
+
disabled: {
|
|
6752
7359
|
type: Boolean,
|
|
6753
7360
|
reflect: true
|
|
6754
7361
|
},
|
|
@@ -6756,15 +7363,7 @@ class AuroButton extends i$2 {
|
|
|
6756
7363
|
/**
|
|
6757
7364
|
* Alters the shape of the button to be full width of its parent container.
|
|
6758
7365
|
*/
|
|
6759
|
-
fluid:
|
|
6760
|
-
type: Boolean,
|
|
6761
|
-
reflect: true
|
|
6762
|
-
},
|
|
6763
|
-
|
|
6764
|
-
/**
|
|
6765
|
-
* If set to true, the button will contain an icon with no additional content.
|
|
6766
|
-
*/
|
|
6767
|
-
iconOnly: {
|
|
7366
|
+
fluid: {
|
|
6768
7367
|
type: Boolean,
|
|
6769
7368
|
reflect: true
|
|
6770
7369
|
},
|
|
@@ -6772,7 +7371,7 @@ class AuroButton extends i$2 {
|
|
|
6772
7371
|
/**
|
|
6773
7372
|
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
6774
7373
|
*/
|
|
6775
|
-
loading:
|
|
7374
|
+
loading: {
|
|
6776
7375
|
type: Boolean,
|
|
6777
7376
|
reflect: true
|
|
6778
7377
|
},
|
|
@@ -6780,36 +7379,12 @@ class AuroButton extends i$2 {
|
|
|
6780
7379
|
/**
|
|
6781
7380
|
* 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.
|
|
6782
7381
|
*/
|
|
6783
|
-
loadingText:
|
|
7382
|
+
loadingText: {
|
|
6784
7383
|
type: String
|
|
6785
7384
|
},
|
|
6786
7385
|
|
|
6787
7386
|
/**
|
|
6788
|
-
*
|
|
6789
|
-
*/
|
|
6790
|
-
onDark: {
|
|
6791
|
-
type: Boolean,
|
|
6792
|
-
reflect: true
|
|
6793
|
-
},
|
|
6794
|
-
|
|
6795
|
-
/**
|
|
6796
|
-
* If set to true, the button will have a rounded shape.
|
|
6797
|
-
*/
|
|
6798
|
-
rounded: {
|
|
6799
|
-
type: Boolean,
|
|
6800
|
-
reflect: true
|
|
6801
|
-
},
|
|
6802
|
-
|
|
6803
|
-
/**
|
|
6804
|
-
* Set value for slim version of auro-button.
|
|
6805
|
-
*/
|
|
6806
|
-
slim: {
|
|
6807
|
-
type: Boolean,
|
|
6808
|
-
reflect: true
|
|
6809
|
-
},
|
|
6810
|
-
|
|
6811
|
-
/**
|
|
6812
|
-
* Populates `tabIndex` to define the focusable sequence in keyboard navigation.
|
|
7387
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
6813
7388
|
*/
|
|
6814
7389
|
tIndex: {
|
|
6815
7390
|
type: String,
|
|
@@ -6817,75 +7392,68 @@ class AuroButton extends i$2 {
|
|
|
6817
7392
|
},
|
|
6818
7393
|
|
|
6819
7394
|
/**
|
|
6820
|
-
* Populates
|
|
7395
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
7396
|
+
* Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
|
|
7397
|
+
* Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
|
|
6821
7398
|
*/
|
|
6822
|
-
|
|
7399
|
+
tabindex: {
|
|
6823
7400
|
type: String,
|
|
6824
|
-
reflect:
|
|
7401
|
+
reflect: false
|
|
6825
7402
|
},
|
|
6826
7403
|
|
|
6827
7404
|
/**
|
|
6828
|
-
*
|
|
6829
|
-
* Use it in cases where a text label is not visible on the screen.
|
|
6830
|
-
* If there is visible text labeling the element, use `aria-labelledby` instead.
|
|
7405
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
6831
7406
|
*/
|
|
6832
|
-
|
|
7407
|
+
title: {
|
|
6833
7408
|
type: String,
|
|
6834
7409
|
reflect: true
|
|
6835
7410
|
},
|
|
6836
7411
|
|
|
6837
7412
|
/**
|
|
6838
|
-
*
|
|
6839
|
-
* and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
|
|
6840
|
-
* List multiple element IDs in a space delimited fashion.
|
|
7413
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
6841
7414
|
*/
|
|
6842
|
-
|
|
7415
|
+
type: {
|
|
6843
7416
|
type: String,
|
|
6844
7417
|
reflect: true
|
|
6845
7418
|
},
|
|
6846
7419
|
|
|
6847
7420
|
/**
|
|
6848
|
-
*
|
|
6849
|
-
* or another grouping element it controls, is currently expanded or collapsed.
|
|
6850
|
-
* This is an optional attribute for buttons.
|
|
7421
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
6851
7422
|
*/
|
|
6852
|
-
|
|
6853
|
-
type:
|
|
7423
|
+
value: {
|
|
7424
|
+
type: String,
|
|
6854
7425
|
reflect: true
|
|
6855
7426
|
},
|
|
6856
7427
|
|
|
6857
7428
|
/**
|
|
6858
|
-
* Sets
|
|
7429
|
+
* Sets button variant option.
|
|
7430
|
+
* @default primary
|
|
6859
7431
|
*/
|
|
6860
|
-
|
|
7432
|
+
variant: {
|
|
6861
7433
|
type: String,
|
|
6862
7434
|
reflect: true
|
|
6863
7435
|
},
|
|
6864
7436
|
|
|
6865
7437
|
/**
|
|
6866
|
-
*
|
|
7438
|
+
* @private
|
|
6867
7439
|
*/
|
|
6868
|
-
|
|
7440
|
+
buttonHref: {
|
|
6869
7441
|
type: String,
|
|
6870
|
-
reflect: true
|
|
6871
7442
|
},
|
|
6872
7443
|
|
|
6873
7444
|
/**
|
|
6874
|
-
*
|
|
7445
|
+
* @private
|
|
6875
7446
|
*/
|
|
6876
|
-
|
|
7447
|
+
buttonTarget: {
|
|
6877
7448
|
type: String,
|
|
6878
|
-
reflect: true
|
|
6879
7449
|
},
|
|
6880
7450
|
|
|
6881
7451
|
/**
|
|
6882
|
-
*
|
|
7452
|
+
* @private
|
|
6883
7453
|
*/
|
|
6884
|
-
|
|
7454
|
+
buttonRel: {
|
|
6885
7455
|
type: String,
|
|
6886
|
-
reflect: true
|
|
6887
7456
|
},
|
|
6888
|
-
ready: { type: Boolean },
|
|
6889
7457
|
};
|
|
6890
7458
|
}
|
|
6891
7459
|
|
|
@@ -6898,7 +7466,7 @@ class AuroButton extends i$2 {
|
|
|
6898
7466
|
*
|
|
6899
7467
|
*/
|
|
6900
7468
|
static register(name = "auro-button") {
|
|
6901
|
-
AuroLibraryRuntimeUtils$
|
|
7469
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
|
|
6902
7470
|
}
|
|
6903
7471
|
|
|
6904
7472
|
/**
|
|
@@ -6910,17 +7478,6 @@ class AuroButton extends i$2 {
|
|
|
6910
7478
|
this.renderRoot.querySelector('button').focus();
|
|
6911
7479
|
}
|
|
6912
7480
|
|
|
6913
|
-
updated() {
|
|
6914
|
-
// support the old `secondary` and `tertiary` attributes` that are deprecated
|
|
6915
|
-
if (this.secondary) {
|
|
6916
|
-
this.setAttribute('variant', 'secondary');
|
|
6917
|
-
}
|
|
6918
|
-
|
|
6919
|
-
if (this.tertiary) {
|
|
6920
|
-
this.setAttribute('variant', 'tertiary');
|
|
6921
|
-
}
|
|
6922
|
-
}
|
|
6923
|
-
|
|
6924
7481
|
/**
|
|
6925
7482
|
* Submits the form that this button is associated with.
|
|
6926
7483
|
* @private
|
|
@@ -6941,28 +7498,115 @@ class AuroButton extends i$2 {
|
|
|
6941
7498
|
return this.internals ? this.internals.form : null;
|
|
6942
7499
|
}
|
|
6943
7500
|
|
|
6944
|
-
|
|
7501
|
+
/**
|
|
7502
|
+
* @private
|
|
7503
|
+
* @returns {Boolean}
|
|
7504
|
+
*/
|
|
7505
|
+
get showText() {
|
|
7506
|
+
return !ICON_ONLY_SHAPES.includes(this.shape);
|
|
7507
|
+
}
|
|
7508
|
+
|
|
7509
|
+
/**
|
|
7510
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
7511
|
+
* @returns {string | undefined}
|
|
7512
|
+
* @private
|
|
7513
|
+
*/
|
|
7514
|
+
get currentAriaLabel() {
|
|
7515
|
+
if (!this.attributeWatcher) return undefined;
|
|
7516
|
+
|
|
7517
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
7518
|
+
return ariaLabel || undefined;
|
|
7519
|
+
}
|
|
7520
|
+
|
|
7521
|
+
/**
|
|
7522
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
7523
|
+
* @returns {string | undefined}
|
|
7524
|
+
* @private
|
|
7525
|
+
*/
|
|
7526
|
+
get currentAriaLabelledBy() {
|
|
7527
|
+
if (!this.attributeWatcher) return undefined;
|
|
7528
|
+
|
|
7529
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
7530
|
+
return ariaLabelledBy || undefined;
|
|
7531
|
+
}
|
|
7532
|
+
|
|
7533
|
+
/**
|
|
7534
|
+
* Whether or not the button is set to an icon-only shape.
|
|
7535
|
+
* @returns {boolean} - True if the button is icon-only, false otherwise.
|
|
7536
|
+
* @private
|
|
7537
|
+
*/
|
|
7538
|
+
get iconOnly() {
|
|
7539
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
7540
|
+
}
|
|
7541
|
+
|
|
7542
|
+
/**
|
|
7543
|
+
* Gets a class name for the font size based on the button's size and shape.
|
|
7544
|
+
* @returns {string} - The font size class name.
|
|
7545
|
+
* @private
|
|
7546
|
+
*/
|
|
7547
|
+
getFontSize() {
|
|
7548
|
+
|
|
7549
|
+
// Size map for standard buttons
|
|
7550
|
+
const standardButtonSizeMap = {
|
|
7551
|
+
xs: 'body-xs',
|
|
7552
|
+
sm: 'body-sm',
|
|
7553
|
+
md: 'body-default',
|
|
7554
|
+
lg: 'body-lg',
|
|
7555
|
+
xl: 'body-lg'
|
|
7556
|
+
};
|
|
7557
|
+
|
|
7558
|
+
// Size map for icon-only buttons
|
|
7559
|
+
const iconOnlyButtonSizeMap = {
|
|
7560
|
+
xs: 'heading-xs',
|
|
7561
|
+
sm: 'heading-sm',
|
|
7562
|
+
md: 'heading-sm',
|
|
7563
|
+
lg: 'heading-md',
|
|
7564
|
+
xl: 'heading-lg'
|
|
7565
|
+
};
|
|
7566
|
+
|
|
7567
|
+
// Determine which map to use based on the shape
|
|
7568
|
+
const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
|
|
7569
|
+
|
|
7570
|
+
// Return the font size based on the button size and shape
|
|
7571
|
+
return sizeMap[this.size] || 'body-default';
|
|
7572
|
+
}
|
|
7573
|
+
|
|
7574
|
+
/**
|
|
7575
|
+
* Renders the default layout for the button.
|
|
7576
|
+
* @returns {TemplateResult}
|
|
7577
|
+
* @private
|
|
7578
|
+
*/
|
|
7579
|
+
renderLayoutDefault() {
|
|
7580
|
+
|
|
7581
|
+
const fontSize = this.getFontSize();
|
|
7582
|
+
const tag = this.buttonHref ? i$1`a` : i$1`button`;
|
|
7583
|
+
const part = this.buttonHref ? 'link' : 'button';
|
|
7584
|
+
|
|
6945
7585
|
const classes = {
|
|
6946
|
-
|
|
6947
|
-
|
|
6948
|
-
|
|
6949
|
-
|
|
6950
|
-
|
|
6951
|
-
|
|
6952
|
-
|
|
6953
|
-
'
|
|
7586
|
+
"auro-button": true,
|
|
7587
|
+
"inset": this.showText,
|
|
7588
|
+
wrapper: true,
|
|
7589
|
+
loading: this.loading,
|
|
7590
|
+
[`${fontSize}`]: true,
|
|
7591
|
+
|
|
7592
|
+
// These remove the default borders so we can handle focus borders ourselves
|
|
7593
|
+
'simple': !['secondary'].includes(this.variant),
|
|
7594
|
+
'thin': ['secondary'].includes(this.variant),
|
|
7595
|
+
};
|
|
7596
|
+
|
|
7597
|
+
const contentClasses = {
|
|
7598
|
+
"contentWrapper": true,
|
|
7599
|
+
"util_displayHiddenVisually": this.loading
|
|
6954
7600
|
};
|
|
6955
7601
|
|
|
6956
7602
|
return u$2`
|
|
6957
|
-
|
|
6958
|
-
part="
|
|
6959
|
-
aria-
|
|
6960
|
-
aria-
|
|
6961
|
-
|
|
6962
|
-
aria-expanded="${o(this.ariaexpanded)}"
|
|
6963
|
-
tabIndex="${o(this.tIndex)}"
|
|
7603
|
+
<${tag}
|
|
7604
|
+
part="${part}"
|
|
7605
|
+
aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
7606
|
+
aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
7607
|
+
tabindex="${o(this.tIndex || this.tabindex)}"
|
|
6964
7608
|
?autofocus="${this.autofocus}"
|
|
6965
|
-
class
|
|
7609
|
+
class=${e(classes)}
|
|
6966
7610
|
?disabled="${this.disabled || this.loading}"
|
|
6967
7611
|
?onDark="${this.onDark}"
|
|
6968
7612
|
title="${o(this.title ? this.title : undefined)}"
|
|
@@ -6971,28 +7615,36 @@ class AuroButton extends i$2 {
|
|
|
6971
7615
|
variant="${o(this.variant ? this.variant : undefined)}"
|
|
6972
7616
|
.value="${o(this.value ? this.value : undefined)}"
|
|
6973
7617
|
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
7618
|
+
href="${o(this.buttonHref || undefined)}"
|
|
7619
|
+
target="${o(this.buttonTarget || undefined)}"
|
|
7620
|
+
rel="${o(this.buttonRel || undefined)}"
|
|
6974
7621
|
>
|
|
6975
7622
|
${o(this.loading ? u$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
6976
7623
|
|
|
6977
|
-
<span class="
|
|
7624
|
+
<span class="${e(contentClasses)}">
|
|
6978
7625
|
<span class="textSlot" part="text">
|
|
6979
|
-
|
|
6980
|
-
</span>
|
|
6981
|
-
|
|
6982
|
-
<span part="icon">
|
|
6983
|
-
<slot name="icon"></slot>
|
|
7626
|
+
<slot></slot>
|
|
6984
7627
|
</span>
|
|
6985
7628
|
</span>
|
|
6986
|
-
|
|
7629
|
+
</${tag}>
|
|
6987
7630
|
`;
|
|
6988
7631
|
}
|
|
7632
|
+
|
|
7633
|
+
/**
|
|
7634
|
+
* Renders the layout of the button.
|
|
7635
|
+
* @returns {TemplateResult}
|
|
7636
|
+
* @private
|
|
7637
|
+
*/
|
|
7638
|
+
renderLayout() {
|
|
7639
|
+
return this.renderLayoutDefault();
|
|
7640
|
+
}
|
|
6989
7641
|
}
|
|
6990
7642
|
|
|
6991
|
-
var buttonVersion = '
|
|
7643
|
+
var buttonVersion = '11.0.0';
|
|
6992
7644
|
|
|
6993
|
-
var colorCss = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-
|
|
7645
|
+
var colorCss = i$5`:host([error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error, #e31f26)}:host([onDark]){--ds-auro-helptext-color: var(--ds-basic-color-texticon-inverse-muted, #ccd2db)}:host([onDark][error]){--ds-auro-helptext-color: var(--ds-basic-color-status-error-subtle, #fbc6c6)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
6994
7646
|
|
|
6995
|
-
var styleCss = i$5`.
|
|
7647
|
+
var styleCss = 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-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{position:relative;display:block}.helptext-wrapper{display:none}.helptext-wrapper[visible]{display:block}::slotted(*:not(:empty)){margin-top:var(--ds-size-50, 0.25rem);margin-bottom:0}::slotted(p){margin-block:0}`;
|
|
6996
7648
|
|
|
6997
7649
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
6998
7650
|
|
|
@@ -7072,8 +7724,6 @@ class AuroLibraryRuntimeUtils {
|
|
|
7072
7724
|
|
|
7073
7725
|
/**
|
|
7074
7726
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
7075
|
-
*
|
|
7076
|
-
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
7077
7727
|
*/
|
|
7078
7728
|
class AuroHelpText extends i$2 {
|
|
7079
7729
|
|
|
@@ -7189,7 +7839,7 @@ class AuroHelpText extends i$2 {
|
|
|
7189
7839
|
// function that renders the HTML and CSS into the scope of the component
|
|
7190
7840
|
render() {
|
|
7191
7841
|
return x`
|
|
7192
|
-
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
7842
|
+
<div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
|
|
7193
7843
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
7194
7844
|
</div>
|
|
7195
7845
|
`;
|
|
@@ -7249,6 +7899,70 @@ class AuroInput extends BaseInput {
|
|
|
7249
7899
|
];
|
|
7250
7900
|
}
|
|
7251
7901
|
|
|
7902
|
+
/**
|
|
7903
|
+
* Whether the input is being hidden currently based on state.
|
|
7904
|
+
* @returns {boolean} - Returns true if the input is hidden.
|
|
7905
|
+
* @private
|
|
7906
|
+
*/
|
|
7907
|
+
get inputHidden() {
|
|
7908
|
+
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
|
|
7909
|
+
}
|
|
7910
|
+
|
|
7911
|
+
/**
|
|
7912
|
+
* Whether the label is being hidden currently based on state.
|
|
7913
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
7914
|
+
* @private
|
|
7915
|
+
*/
|
|
7916
|
+
get labelHidden() {
|
|
7917
|
+
return this.hasDisplayValueContent && !this.hasFocus && this.hasValue;
|
|
7918
|
+
}
|
|
7919
|
+
|
|
7920
|
+
/**
|
|
7921
|
+
* Returns the label font class based on layout and visibility state.
|
|
7922
|
+
* @private
|
|
7923
|
+
* @returns {string} - The font class for the label.
|
|
7924
|
+
*/
|
|
7925
|
+
get labelFontClass() {
|
|
7926
|
+
const isHidden = this.inputHidden;
|
|
7927
|
+
|
|
7928
|
+
if (this.layout.startsWith('emphasized')) {
|
|
7929
|
+
return isHidden ? 'accent-xl' : 'body-sm';
|
|
7930
|
+
}
|
|
7931
|
+
|
|
7932
|
+
if (this.layout === 'snowflake') {
|
|
7933
|
+
return isHidden ? 'body-lg' : 'body-xs';
|
|
7934
|
+
}
|
|
7935
|
+
|
|
7936
|
+
// classic layout (default)
|
|
7937
|
+
return isHidden ? 'body-default' : 'body-xs';
|
|
7938
|
+
}
|
|
7939
|
+
|
|
7940
|
+
/**
|
|
7941
|
+
* Returns the input font class based on layout and visibility state.
|
|
7942
|
+
* @private
|
|
7943
|
+
* @returns {string} - The font class for the input.
|
|
7944
|
+
*/
|
|
7945
|
+
get inputFontClass() {
|
|
7946
|
+
const isHidden = this.inputHidden;
|
|
7947
|
+
|
|
7948
|
+
if (this.layout.startsWith('emphasized')) {
|
|
7949
|
+
return isHidden ? 'body-sm' : 'accent-xl';
|
|
7950
|
+
}
|
|
7951
|
+
|
|
7952
|
+
if (this.layout === 'snowflake') {
|
|
7953
|
+
// same for both hidden and visible
|
|
7954
|
+
return 'body-lg';
|
|
7955
|
+
}
|
|
7956
|
+
|
|
7957
|
+
// edge case for enabling visual overrides in datepicker
|
|
7958
|
+
if (this.layout === 'classic' && this.shape === 'snowflake') {
|
|
7959
|
+
return 'body-lg';
|
|
7960
|
+
}
|
|
7961
|
+
|
|
7962
|
+
// classic layout (default) - same for both hidden and visible
|
|
7963
|
+
return 'body-default';
|
|
7964
|
+
}
|
|
7965
|
+
|
|
7252
7966
|
/**
|
|
7253
7967
|
* Returns classmap configuration for html5 input labels in all layouts.
|
|
7254
7968
|
* @private
|
|
@@ -7256,8 +7970,10 @@ class AuroInput extends BaseInput {
|
|
|
7256
7970
|
*/
|
|
7257
7971
|
get commonLabelClasses() {
|
|
7258
7972
|
return {
|
|
7259
|
-
'
|
|
7260
|
-
'
|
|
7973
|
+
'is-disabled': this.disabled,
|
|
7974
|
+
'withValue': this.hasValue,
|
|
7975
|
+
'util_displayHiddenVisually': this.labelHidden,
|
|
7976
|
+
[this.labelFontClass]: true,
|
|
7261
7977
|
};
|
|
7262
7978
|
}
|
|
7263
7979
|
|
|
@@ -7268,7 +7984,8 @@ class AuroInput extends BaseInput {
|
|
|
7268
7984
|
*/
|
|
7269
7985
|
get commonInputClasses() {
|
|
7270
7986
|
return {
|
|
7271
|
-
'util_displayHiddenVisually': this.
|
|
7987
|
+
'util_displayHiddenVisually': this.inputHidden,
|
|
7988
|
+
[this.inputFontClass]: true,
|
|
7272
7989
|
};
|
|
7273
7990
|
}
|
|
7274
7991
|
|
|
@@ -7279,8 +7996,7 @@ class AuroInput extends BaseInput {
|
|
|
7279
7996
|
*/
|
|
7280
7997
|
get legacyInputClasses() {
|
|
7281
7998
|
return {
|
|
7282
|
-
...this.commonInputClasses
|
|
7283
|
-
'util_displayHiddenVisually': !this.hasFocus && !this.value
|
|
7999
|
+
...this.commonInputClasses
|
|
7284
8000
|
};
|
|
7285
8001
|
}
|
|
7286
8002
|
|
|
@@ -7292,7 +8008,8 @@ class AuroInput extends BaseInput {
|
|
|
7292
8008
|
get commonWrapperClasses() {
|
|
7293
8009
|
return {
|
|
7294
8010
|
'wrapper': true,
|
|
7295
|
-
'
|
|
8011
|
+
'simple': this.simple,
|
|
8012
|
+
'withValue': this.hasValue,
|
|
7296
8013
|
'hasFocus': this.hasFocus
|
|
7297
8014
|
};
|
|
7298
8015
|
}
|
|
@@ -7319,7 +8036,7 @@ class AuroInput extends BaseInput {
|
|
|
7319
8036
|
*
|
|
7320
8037
|
*/
|
|
7321
8038
|
static register(name = "auro-input") {
|
|
7322
|
-
AuroLibraryRuntimeUtils$
|
|
8039
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroInput);
|
|
7323
8040
|
}
|
|
7324
8041
|
|
|
7325
8042
|
/**
|
|
@@ -7341,7 +8058,12 @@ class AuroInput extends BaseInput {
|
|
|
7341
8058
|
* @returns {void}
|
|
7342
8059
|
*/
|
|
7343
8060
|
checkDisplayValueSlotChange() {
|
|
7344
|
-
|
|
8061
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
8062
|
+
|
|
8063
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
8064
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
8065
|
+
nodes = nodes[0].assignedNodes();
|
|
8066
|
+
}
|
|
7345
8067
|
|
|
7346
8068
|
let hasContent = false;
|
|
7347
8069
|
|
|
@@ -7383,7 +8105,7 @@ class AuroInput extends BaseInput {
|
|
|
7383
8105
|
'displayValue': true,
|
|
7384
8106
|
'hasContent': this.hasDisplayValueContent,
|
|
7385
8107
|
'hasFocus': this.hasFocus,
|
|
7386
|
-
'withValue': this.
|
|
8108
|
+
'withValue': this.hasValue,
|
|
7387
8109
|
};
|
|
7388
8110
|
|
|
7389
8111
|
// Remove this when the classic layout is sunset.
|
|
@@ -7392,28 +8114,34 @@ class AuroInput extends BaseInput {
|
|
|
7392
8114
|
: this.commonInputClasses;
|
|
7393
8115
|
|
|
7394
8116
|
return u$2`
|
|
7395
|
-
<label for=${this.
|
|
8117
|
+
<label for=${this.inputId} class="${e(this.commonLabelClasses)}" part="label">
|
|
7396
8118
|
<slot name="label">
|
|
7397
8119
|
${this.label}
|
|
7398
8120
|
</slot>
|
|
8121
|
+
${this.required ? undefined : u$2`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7399
8122
|
</label>
|
|
8123
|
+
|
|
8124
|
+
<!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
|
|
7400
8125
|
<input
|
|
7401
8126
|
@blur="${this.handleBlur}"
|
|
7402
8127
|
@focusin="${this.handleFocusin}"
|
|
7403
8128
|
@focusout="${this.handleFocusout}"
|
|
7404
8129
|
@input="${this.handleInput}"
|
|
8130
|
+
.placeholder=${this.placeholderStr}
|
|
8131
|
+
.role=${this.a11yRole}
|
|
7405
8132
|
?activeLabel="${this.activeLabel}"
|
|
7406
8133
|
?disabled="${this.disabled}"
|
|
7407
8134
|
?required="${this.required}"
|
|
7408
|
-
|
|
8135
|
+
aria-controls=${o(this.a11yControls)}
|
|
7409
8136
|
aria-describedby="${this.uniqueId}"
|
|
8137
|
+
aria-expanded=${o(this.a11yExpanded)}
|
|
7410
8138
|
aria-invalid="${this.validity !== 'valid'}"
|
|
7411
|
-
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7412
8139
|
autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
|
|
8140
|
+
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7413
8141
|
autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
|
|
7414
8142
|
class="${e(inputOverrideClasses)}"
|
|
7415
8143
|
id="${this.inputId}"
|
|
7416
|
-
|
|
8144
|
+
inputmode="${o(this.inputmode ? this.inputmode : undefined)}"
|
|
7417
8145
|
lang="${o(this.lang)}"
|
|
7418
8146
|
maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
|
|
7419
8147
|
minlength="${o(this.minLength ? this.minLength : undefined)}"
|
|
@@ -7421,7 +8149,8 @@ class AuroInput extends BaseInput {
|
|
|
7421
8149
|
part="input"
|
|
7422
8150
|
pattern="${o(this.definePattern())}"
|
|
7423
8151
|
spellcheck="${o(this.spellcheck ? this.spellcheck : undefined)}"
|
|
7424
|
-
type="${this.type ===
|
|
8152
|
+
type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
|
|
8153
|
+
/>
|
|
7425
8154
|
<div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
|
|
7426
8155
|
<div class="displayValueWrapper">
|
|
7427
8156
|
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
|
|
@@ -7443,11 +8172,12 @@ class AuroInput extends BaseInput {
|
|
|
7443
8172
|
?onDark="${this.onDark}"
|
|
7444
8173
|
aria-label="${i18n(this.lang, 'clearInput')}"
|
|
7445
8174
|
class="notificationBtn clearBtn"
|
|
7446
|
-
|
|
7447
|
-
|
|
8175
|
+
shape="circle"
|
|
8176
|
+
size="sm"
|
|
8177
|
+
variant="ghost">
|
|
7448
8178
|
<${this.iconTag}
|
|
8179
|
+
?customColor="${this.onDark}"
|
|
7449
8180
|
category="interface"
|
|
7450
|
-
customColor
|
|
7451
8181
|
name="x-lg"
|
|
7452
8182
|
>
|
|
7453
8183
|
</${this.iconTag}>
|
|
@@ -7465,22 +8195,23 @@ class AuroInput extends BaseInput {
|
|
|
7465
8195
|
return u$2`
|
|
7466
8196
|
<div class="notification">
|
|
7467
8197
|
<${this.buttonTag}
|
|
7468
|
-
@click="${this.handleClickShowPassword}
|
|
8198
|
+
@click="${this.handleClickShowPassword}"
|
|
7469
8199
|
?onDark="${this.onDark}"
|
|
7470
|
-
aria-hidden="true"
|
|
7471
8200
|
class="notificationBtn passwordBtn"
|
|
7472
|
-
|
|
7473
|
-
|
|
8201
|
+
aria-label="${this.showPassword ? i18n(this.lang, "hidePassword") : i18n(this.lang, "showPassword")}"
|
|
8202
|
+
shape="circle"
|
|
8203
|
+
size="sm"
|
|
8204
|
+
variant="ghost">
|
|
7474
8205
|
<${this.iconTag}
|
|
8206
|
+
?customColor="${this.onDark}"
|
|
7475
8207
|
?hidden=${!this.showPassword}
|
|
7476
8208
|
category="interface"
|
|
7477
|
-
customColor
|
|
7478
8209
|
name="hide-password-stroke">
|
|
7479
8210
|
</${this.iconTag}>
|
|
7480
8211
|
<${this.iconTag}
|
|
8212
|
+
?customColor="${this.onDark}"
|
|
7481
8213
|
?hidden=${this.showPassword}
|
|
7482
8214
|
category="interface"
|
|
7483
|
-
customColor
|
|
7484
8215
|
name="view-password-stroke">
|
|
7485
8216
|
</${this.iconTag}>
|
|
7486
8217
|
</${this.buttonTag}>
|
|
@@ -7539,7 +8270,7 @@ class AuroInput extends BaseInput {
|
|
|
7539
8270
|
? u$2`
|
|
7540
8271
|
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
7541
8272
|
<p id="${this.uniqueId}" part="helpText">
|
|
7542
|
-
<slot name="
|
|
8273
|
+
<slot name="helpText">${this.getHelpText()}</slot>
|
|
7543
8274
|
</p>
|
|
7544
8275
|
</${this.helpTextTag}>
|
|
7545
8276
|
`
|
|
@@ -7560,19 +8291,25 @@ class AuroInput extends BaseInput {
|
|
|
7560
8291
|
* @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
|
|
7561
8292
|
*/
|
|
7562
8293
|
renderLayoutClassic() {
|
|
8294
|
+
const classicClassMap = {
|
|
8295
|
+
...this.commonWrapperClasses,
|
|
8296
|
+
'thin': !this.simple
|
|
8297
|
+
};
|
|
8298
|
+
|
|
7563
8299
|
return u$2`
|
|
7564
8300
|
<div
|
|
7565
8301
|
@click="${this.handleClick}"
|
|
7566
|
-
class="${e(
|
|
8302
|
+
class="${e(classicClassMap)}"
|
|
7567
8303
|
part="wrapper">
|
|
7568
|
-
<div class="accents left">
|
|
8304
|
+
<div part="accent-left" class="accents left">
|
|
7569
8305
|
${this.renderHtmlTypeIcon()}
|
|
7570
8306
|
</div>
|
|
7571
8307
|
<div class="mainContent">
|
|
7572
8308
|
${this.renderHtmlInput(true)}
|
|
7573
8309
|
</div>
|
|
7574
|
-
<div class="accents right">
|
|
8310
|
+
<div part="accent-right" class="accents right">
|
|
7575
8311
|
${this.renderValidationErrorIconHtml()}
|
|
8312
|
+
${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
|
|
7576
8313
|
${this.hasValue ? u$2`
|
|
7577
8314
|
${!this.disabled && !this.readonly ? u$2`
|
|
7578
8315
|
${this.renderHtmlActionClear()}
|