@aurodesignsystem-dev/auro-formkit 0.0.0-pr624.11 → 0.0.0-pr624.111
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 +1244 -95
- package/components/bibtemplate/dist/registered.js +1244 -95
- package/components/checkbox/README.md +1 -1
- package/components/checkbox/demo/api.html +16 -10
- package/components/checkbox/demo/api.md +54 -19
- package/components/checkbox/demo/api.min.js +70 -45
- package/components/checkbox/demo/index.html +16 -10
- package/components/checkbox/demo/index.md +2 -2
- package/components/checkbox/demo/index.min.js +70 -45
- 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 +6 -3
- package/components/checkbox/dist/index.js +69 -44
- package/components/checkbox/dist/registered.js +69 -44
- package/components/combobox/README.md +2 -0
- package/components/combobox/demo/api.html +16 -10
- package/components/combobox/demo/api.md +121 -8
- package/components/combobox/demo/api.min.js +3283 -963
- package/components/combobox/demo/index.html +16 -10
- package/components/combobox/demo/index.md +20 -34
- package/components/combobox/demo/index.min.js +3283 -963
- package/components/combobox/demo/readme.html +16 -9
- package/components/combobox/demo/readme.md +2 -0
- package/components/combobox/dist/auro-combobox.d.ts +59 -14
- package/components/combobox/dist/index.js +3024 -848
- package/components/combobox/dist/registered.js +3024 -848
- package/components/counter/demo/api.html +17 -10
- package/components/counter/demo/api.md +167 -21
- package/components/counter/demo/api.min.js +3428 -777
- package/components/counter/demo/index.html +17 -10
- package/components/counter/demo/index.md +191 -34
- package/components/counter/demo/index.min.js +3428 -777
- 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 +162 -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 +3427 -776
- package/components/counter/dist/registered.js +3427 -776
- package/components/datepicker/README.md +2 -1
- package/components/datepicker/demo/api.html +16 -10
- package/components/datepicker/demo/api.md +70 -28
- package/components/datepicker/demo/api.min.js +7082 -3165
- package/components/datepicker/demo/index.html +16 -10
- package/components/datepicker/demo/index.md +87 -8
- package/components/datepicker/demo/index.min.js +7082 -3165
- package/components/datepicker/demo/readme.html +16 -9
- package/components/datepicker/demo/readme.md +2 -1
- package/components/datepicker/dist/auro-datepicker.d.ts +152 -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 +14635 -10718
- package/components/datepicker/dist/popoverVersion.d.ts +1 -1
- package/components/datepicker/dist/registered.js +14635 -10718
- package/components/dropdown/demo/api.html +16 -10
- package/components/dropdown/demo/api.md +89 -281
- package/components/dropdown/demo/api.min.js +452 -271
- package/components/dropdown/demo/index.html +16 -10
- package/components/dropdown/demo/index.md +92 -362
- package/components/dropdown/demo/index.min.js +452 -271
- package/components/dropdown/demo/readme.html +16 -9
- package/components/dropdown/dist/auro-dropdown.d.ts +43 -82
- package/components/dropdown/dist/auro-dropdownBib.d.ts +14 -0
- package/components/dropdown/dist/index.js +451 -270
- package/components/dropdown/dist/registered.js +451 -270
- 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 +2 -4
- package/components/helptext/dist/registered.js +2 -4
- package/components/input/README.md +6 -2
- package/components/input/demo/api.html +16 -10
- package/components/input/demo/api.md +234 -136
- package/components/input/demo/api.min.js +1057 -299
- package/components/input/demo/index.html +16 -10
- package/components/input/demo/index.md +55 -32
- package/components/input/demo/index.min.js +1071 -313
- package/components/input/demo/readme.html +16 -9
- package/components/input/demo/readme.md +6 -2
- package/components/input/dist/auro-input.d.ts +36 -2
- package/components/input/dist/base-input.d.ts +47 -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 +1070 -312
- package/components/input/dist/registered.js +1070 -312
- 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 +303 -64
- package/components/menu/demo/index.html +16 -10
- package/components/menu/demo/index.min.js +303 -64
- 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 +288 -49
- package/components/menu/dist/registered.js +288 -49
- package/components/menu/dist/styles/default/tokens-css.d.ts +2 -0
- package/components/radio/demo/api.html +16 -10
- package/components/radio/demo/api.md +41 -9
- package/components/radio/demo/api.min.js +93 -95
- package/components/radio/demo/index.html +16 -10
- package/components/radio/demo/index.min.js +93 -95
- 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 +11 -12
- package/components/radio/dist/index.js +92 -94
- package/components/radio/dist/registered.js +92 -94
- package/components/select/README.md +1 -0
- package/components/select/demo/api.html +16 -10
- package/components/select/demo/api.js +0 -2
- package/components/select/demo/api.md +159 -125
- package/components/select/demo/api.min.js +2284 -729
- package/components/select/demo/index.html +17 -11
- package/components/select/demo/index.md +1074 -259
- package/components/select/demo/index.min.js +2286 -719
- package/components/select/demo/readme.html +16 -9
- package/components/select/demo/readme.md +1 -0
- package/components/select/dist/auro-select.d.ts +86 -25
- package/components/select/dist/index.js +2178 -755
- package/components/select/dist/registered.js +2178 -755
- 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/datepicker/dist/styles/{emphasized/style-css.d.ts → classic/color-css.d.ts} +0 -0
- /package/components/{input/dist/styles/default/input-css.d.ts → datepicker/dist/styles/classic/style-css.d.ts} +0 -0
- /package/components/{input/dist/styles/default/label-css.d.ts → datepicker/dist/styles/snowflake/color-css.d.ts} +0 -0
- /package/components/{input/dist/styles/input-css.d.ts → datepicker/dist/styles/snowflake/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}.wrapper:not(:focus-within):not(:hover) .notificationBtn.passwordBtn,.wrapper:not(:focus-within):not(:hover) .notification.clear{display:none}.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-
|
|
50
|
+
var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-container-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-advanced-color-state-error-inverse, #f9a4a8)}: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-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-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-
|
|
52
|
+
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--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-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-muted, #ccd2db);--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-advanced-color-state-error-inverse, #f9a4a8);--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;background-color:var(--ds-auro-input-container-color);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-advanced-color-state-error-inverse, #f9a4a8);--ds-auro-input-outline-color: var(--ds-advanced-color-state-error-inverse, #f9a4a8)}: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{transition:all 1ms linear;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{transition:all 1ms linear;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
|
+
// multiple input in one components (datepicker)
|
|
4847
|
+
// combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib.
|
|
4848
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
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,27 @@ 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 ariaLabel.clear - Sets aria-label on clear button for screenreader to read
|
|
5034
|
+
* @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
|
|
5035
|
+
* @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
|
|
5036
|
+
* @slot helpText - Sets the help text displayed below the input.
|
|
5014
5037
|
* @slot label - Sets the label text for the input.
|
|
5038
|
+
* @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
|
|
5039
|
+
* @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
|
|
5015
5040
|
*
|
|
5016
5041
|
* @csspart wrapper - Use for customizing the style of the root element
|
|
5017
5042
|
* @csspart label - Use for customizing the style of the label element
|
|
5018
5043
|
* @csspart helpText - Use for customizing the style of the helpText element
|
|
5044
|
+
* @csspart input - Use for customizing the style of the input element
|
|
5019
5045
|
* @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
|
|
5020
5046
|
* @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
|
|
5047
|
+
* @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
|
|
5048
|
+
* @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
|
|
5021
5049
|
* @event input - Event fires when the value of an `auro-input` has been changed.
|
|
5022
5050
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
|
|
5023
5051
|
*/
|
|
5024
5052
|
|
|
5025
|
-
class BaseInput extends AuroElement$
|
|
5053
|
+
class BaseInput extends AuroElement$2 {
|
|
5026
5054
|
|
|
5027
5055
|
constructor() {
|
|
5028
5056
|
super();
|
|
@@ -5039,9 +5067,22 @@ class BaseInput extends AuroElement$1 {
|
|
|
5039
5067
|
this.required = false;
|
|
5040
5068
|
this.setCustomValidityForType = undefined;
|
|
5041
5069
|
|
|
5070
|
+
/**
|
|
5071
|
+
* @private
|
|
5072
|
+
*/
|
|
5042
5073
|
this.layout = 'classic';
|
|
5074
|
+
|
|
5075
|
+
/**
|
|
5076
|
+
* @private
|
|
5077
|
+
*/
|
|
5043
5078
|
this.shape = 'classic';
|
|
5079
|
+
|
|
5080
|
+
/**
|
|
5081
|
+
* @private
|
|
5082
|
+
*/
|
|
5044
5083
|
this.size = 'lg';
|
|
5084
|
+
|
|
5085
|
+
this.privateDefaults();
|
|
5045
5086
|
}
|
|
5046
5087
|
|
|
5047
5088
|
/**
|
|
@@ -5115,7 +5156,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5115
5156
|
*/
|
|
5116
5157
|
a11yRole: {
|
|
5117
5158
|
type: String,
|
|
5118
|
-
attribute: true,
|
|
5119
5159
|
reflect: true
|
|
5120
5160
|
},
|
|
5121
5161
|
|
|
@@ -5124,7 +5164,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5124
5164
|
*/
|
|
5125
5165
|
a11yExpanded: {
|
|
5126
5166
|
type: Boolean,
|
|
5127
|
-
attribute: true,
|
|
5128
5167
|
reflect: true
|
|
5129
5168
|
},
|
|
5130
5169
|
|
|
@@ -5133,7 +5172,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5133
5172
|
*/
|
|
5134
5173
|
a11yControls: {
|
|
5135
5174
|
type: String,
|
|
5136
|
-
attribute: true,
|
|
5137
5175
|
reflect: true
|
|
5138
5176
|
},
|
|
5139
5177
|
|
|
@@ -5149,7 +5187,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5149
5187
|
* 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
5188
|
*/
|
|
5151
5189
|
autocapitalize: {
|
|
5152
|
-
type: String
|
|
5190
|
+
type: String,
|
|
5191
|
+
reflect: true
|
|
5153
5192
|
},
|
|
5154
5193
|
|
|
5155
5194
|
/**
|
|
@@ -5164,7 +5203,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5164
5203
|
* When set to `off`, stops iOS from auto-correcting words when typed into a text box.
|
|
5165
5204
|
*/
|
|
5166
5205
|
autocorrect: {
|
|
5167
|
-
type: String
|
|
5206
|
+
type: String,
|
|
5207
|
+
reflect: true
|
|
5168
5208
|
},
|
|
5169
5209
|
|
|
5170
5210
|
/**
|
|
@@ -5209,7 +5249,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5209
5249
|
/** Exposes inputmode attribute for input. */
|
|
5210
5250
|
inputmode: {
|
|
5211
5251
|
type: String,
|
|
5212
|
-
attribute: true,
|
|
5213
5252
|
reflect: true
|
|
5214
5253
|
},
|
|
5215
5254
|
|
|
@@ -5217,7 +5256,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5217
5256
|
* Defines the language of an element.
|
|
5218
5257
|
*/
|
|
5219
5258
|
lang: {
|
|
5220
|
-
type: String
|
|
5259
|
+
type: String,
|
|
5260
|
+
reflect: true
|
|
5221
5261
|
},
|
|
5222
5262
|
|
|
5223
5263
|
/**
|
|
@@ -5231,7 +5271,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5231
5271
|
* The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
|
|
5232
5272
|
*/
|
|
5233
5273
|
maxLength: {
|
|
5234
|
-
type: Number
|
|
5274
|
+
type: Number,
|
|
5275
|
+
reflect: true
|
|
5235
5276
|
},
|
|
5236
5277
|
|
|
5237
5278
|
/**
|
|
@@ -5245,14 +5286,25 @@ class BaseInput extends AuroElement$1 {
|
|
|
5245
5286
|
* 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
5287
|
*/
|
|
5247
5288
|
minLength: {
|
|
5248
|
-
type: Number
|
|
5289
|
+
type: Number,
|
|
5290
|
+
reflect: true
|
|
5249
5291
|
},
|
|
5250
5292
|
|
|
5251
5293
|
/**
|
|
5252
5294
|
* Populates the `name` attribute on the input.
|
|
5253
5295
|
*/
|
|
5254
5296
|
name: {
|
|
5255
|
-
type: String
|
|
5297
|
+
type: String,
|
|
5298
|
+
reflect: true
|
|
5299
|
+
},
|
|
5300
|
+
|
|
5301
|
+
/**
|
|
5302
|
+
* Sets styles for nested operation - removes borders, hides help + error text, and
|
|
5303
|
+
* hides accents.
|
|
5304
|
+
*/
|
|
5305
|
+
nested: {
|
|
5306
|
+
type: Boolean,
|
|
5307
|
+
reflect: true
|
|
5256
5308
|
},
|
|
5257
5309
|
|
|
5258
5310
|
/**
|
|
@@ -5280,10 +5332,11 @@ class BaseInput extends AuroElement$1 {
|
|
|
5280
5332
|
},
|
|
5281
5333
|
|
|
5282
5334
|
/**
|
|
5283
|
-
* Define custom placeholder text
|
|
5335
|
+
* Define custom placeholder text.
|
|
5284
5336
|
*/
|
|
5285
5337
|
placeholder: {
|
|
5286
|
-
type: String
|
|
5338
|
+
type: String,
|
|
5339
|
+
reflect: true
|
|
5287
5340
|
},
|
|
5288
5341
|
|
|
5289
5342
|
/**
|
|
@@ -5372,6 +5425,14 @@ class BaseInput extends AuroElement$1 {
|
|
|
5372
5425
|
type: String
|
|
5373
5426
|
},
|
|
5374
5427
|
|
|
5428
|
+
/**
|
|
5429
|
+
* Simple makes the input render without a border.
|
|
5430
|
+
*/
|
|
5431
|
+
simple: {
|
|
5432
|
+
type: Boolean,
|
|
5433
|
+
reflect: true
|
|
5434
|
+
},
|
|
5435
|
+
|
|
5375
5436
|
/**
|
|
5376
5437
|
* Custom help text message for email type validity.
|
|
5377
5438
|
*/
|
|
@@ -5383,7 +5444,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5383
5444
|
* 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
5445
|
*/
|
|
5385
5446
|
spellcheck: {
|
|
5386
|
-
type: String
|
|
5447
|
+
type: String,
|
|
5448
|
+
reflect: true
|
|
5387
5449
|
},
|
|
5388
5450
|
|
|
5389
5451
|
/**
|
|
@@ -5443,8 +5505,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5443
5505
|
connectedCallback() {
|
|
5444
5506
|
super.connectedCallback();
|
|
5445
5507
|
|
|
5446
|
-
this.privateDefaults();
|
|
5447
|
-
|
|
5448
5508
|
notifyOnLangChange(this);
|
|
5449
5509
|
}
|
|
5450
5510
|
|
|
@@ -5454,7 +5514,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
5454
5514
|
}
|
|
5455
5515
|
|
|
5456
5516
|
firstUpdated() {
|
|
5457
|
-
// clicking anywhere in the main wrapper will focus the input. Clicking the
|
|
5517
|
+
// clicking anywhere in the main wrapper will focus the input. Clicking the helpText or label will not focus the input.
|
|
5458
5518
|
this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
|
|
5459
5519
|
this.inputElement = this.renderRoot.querySelector('input');
|
|
5460
5520
|
this.labelElement = this.shadowRoot.querySelector('label');
|
|
@@ -5566,9 +5626,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5566
5626
|
if (!this.shadowRoot.contains(this.getActiveElement())) {
|
|
5567
5627
|
this.validation.validate(this);
|
|
5568
5628
|
}
|
|
5569
|
-
|
|
5570
|
-
this.notifyValueChanged();
|
|
5571
5629
|
}
|
|
5630
|
+
|
|
5631
|
+
this.notifyValueChanged();
|
|
5572
5632
|
}
|
|
5573
5633
|
|
|
5574
5634
|
if (changedProperties.has('error')) {
|
|
@@ -5678,7 +5738,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5678
5738
|
|
|
5679
5739
|
/**
|
|
5680
5740
|
* Function to set element focus.
|
|
5681
|
-
* @private
|
|
5682
5741
|
* @return {void}
|
|
5683
5742
|
*/
|
|
5684
5743
|
focus() {
|
|
@@ -5694,9 +5753,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5694
5753
|
this.inputElement.value = "";
|
|
5695
5754
|
this.value = "";
|
|
5696
5755
|
this.labelElement.classList.remove('inputElement-label--sticky');
|
|
5756
|
+
this.notifyValueChanged();
|
|
5697
5757
|
this.focus();
|
|
5698
5758
|
this.validation.validate(this);
|
|
5699
|
-
this.notifyValueChanged();
|
|
5700
5759
|
}
|
|
5701
5760
|
|
|
5702
5761
|
/**
|
|
@@ -5791,13 +5850,21 @@ class BaseInput extends AuroElement$1 {
|
|
|
5791
5850
|
}
|
|
5792
5851
|
|
|
5793
5852
|
/**
|
|
5794
|
-
* Resets component to initial state.
|
|
5853
|
+
* Resets component to initial state, including resetting the touched state and validity.
|
|
5795
5854
|
* @returns {void}
|
|
5796
5855
|
*/
|
|
5797
5856
|
reset() {
|
|
5857
|
+
this.value = undefined;
|
|
5798
5858
|
this.validation.reset(this);
|
|
5799
5859
|
}
|
|
5800
5860
|
|
|
5861
|
+
/**
|
|
5862
|
+
* Clears the input value.
|
|
5863
|
+
*/
|
|
5864
|
+
clear() {
|
|
5865
|
+
this.value = undefined;
|
|
5866
|
+
}
|
|
5867
|
+
|
|
5801
5868
|
/**
|
|
5802
5869
|
* Sets configuration data used elsewhere based on the `type` attribute.
|
|
5803
5870
|
* @private
|
|
@@ -5876,28 +5943,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
5876
5943
|
* @returns {void}
|
|
5877
5944
|
*/
|
|
5878
5945
|
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 = '';
|
|
5946
|
+
if (this.placeholder) {
|
|
5947
|
+
this.placeholderStr = this.placeholder;
|
|
5948
|
+
} else if (this.type === 'date') {
|
|
5949
|
+
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5895
5950
|
}
|
|
5896
5951
|
|
|
5897
5952
|
this.requestUpdate();
|
|
5898
5953
|
|
|
5899
|
-
|
|
5900
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5954
|
+
return this.placeholderStr;
|
|
5901
5955
|
}
|
|
5902
5956
|
|
|
5903
5957
|
/**
|
|
@@ -6110,7 +6164,7 @@ class AuroDependencyVersioning {
|
|
|
6110
6164
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
6111
6165
|
*/
|
|
6112
6166
|
|
|
6113
|
-
class AuroElement extends i$2 {
|
|
6167
|
+
let AuroElement$1 = class AuroElement extends i$2 {
|
|
6114
6168
|
|
|
6115
6169
|
// function to define props used within the scope of this component
|
|
6116
6170
|
static get properties() {
|
|
@@ -6134,7 +6188,7 @@ class AuroElement extends i$2 {
|
|
|
6134
6188
|
|
|
6135
6189
|
return 'false'
|
|
6136
6190
|
}
|
|
6137
|
-
}
|
|
6191
|
+
};
|
|
6138
6192
|
|
|
6139
6193
|
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
6194
|
|
|
@@ -6178,7 +6232,7 @@ var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
6178
6232
|
*/
|
|
6179
6233
|
|
|
6180
6234
|
// build the component class
|
|
6181
|
-
class BaseIcon extends AuroElement {
|
|
6235
|
+
class BaseIcon extends AuroElement$1 {
|
|
6182
6236
|
constructor() {
|
|
6183
6237
|
super();
|
|
6184
6238
|
this.onDark = false;
|
|
@@ -6261,7 +6315,7 @@ var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
|
|
|
6261
6315
|
|
|
6262
6316
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6263
6317
|
|
|
6264
|
-
let AuroLibraryRuntimeUtils$
|
|
6318
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
6265
6319
|
|
|
6266
6320
|
/* eslint-disable jsdoc/require-param */
|
|
6267
6321
|
|
|
@@ -6343,7 +6397,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6343
6397
|
*/
|
|
6344
6398
|
privateDefaults() {
|
|
6345
6399
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
6346
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6400
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
6347
6401
|
}
|
|
6348
6402
|
|
|
6349
6403
|
// function to define props used within the scope of this component
|
|
@@ -6371,7 +6425,8 @@ class AuroIcon extends BaseIcon {
|
|
|
6371
6425
|
* Allows custom color to be set.
|
|
6372
6426
|
*/
|
|
6373
6427
|
customColor: {
|
|
6374
|
-
type: Boolean
|
|
6428
|
+
type: Boolean,
|
|
6429
|
+
reflect: true
|
|
6375
6430
|
},
|
|
6376
6431
|
|
|
6377
6432
|
/**
|
|
@@ -6425,7 +6480,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6425
6480
|
*
|
|
6426
6481
|
*/
|
|
6427
6482
|
static register(name = "auro-icon") {
|
|
6428
|
-
AuroLibraryRuntimeUtils$
|
|
6483
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
|
|
6429
6484
|
}
|
|
6430
6485
|
|
|
6431
6486
|
connectedCallback() {
|
|
@@ -6446,8 +6501,12 @@ class AuroIcon extends BaseIcon {
|
|
|
6446
6501
|
async firstUpdated() {
|
|
6447
6502
|
await super.firstUpdated();
|
|
6448
6503
|
|
|
6449
|
-
|
|
6450
|
-
|
|
6504
|
+
/**
|
|
6505
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
6506
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
6507
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
6508
|
+
*/
|
|
6509
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
6451
6510
|
const svgDesc = this.svg.querySelector('desc');
|
|
6452
6511
|
|
|
6453
6512
|
if (svgDesc) {
|
|
@@ -6491,118 +6550,655 @@ class AuroIcon extends BaseIcon {
|
|
|
6491
6550
|
}
|
|
6492
6551
|
}
|
|
6493
6552
|
|
|
6494
|
-
var iconVersion = '8.0.
|
|
6553
|
+
var iconVersion = '8.0.4';
|
|
6495
6554
|
|
|
6496
|
-
|
|
6555
|
+
/**
|
|
6556
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
6557
|
+
*/
|
|
6558
|
+
const _observers = new WeakMap();
|
|
6497
6559
|
|
|
6498
|
-
|
|
6560
|
+
/**
|
|
6561
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
6562
|
+
* Structure: {
|
|
6563
|
+
* host: {
|
|
6564
|
+
* matchers: Set<Function>,
|
|
6565
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
6566
|
+
* }
|
|
6567
|
+
* }
|
|
6568
|
+
*/
|
|
6569
|
+
const _transportConfig = new WeakMap();
|
|
6499
6570
|
|
|
6500
|
-
|
|
6571
|
+
/**
|
|
6572
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
6573
|
+
*
|
|
6574
|
+
* @param {Object} params - The parameters for the function.
|
|
6575
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
6576
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6577
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
6578
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
6579
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
6580
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
6581
|
+
*/
|
|
6582
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
6583
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
6584
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
6585
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
6586
|
+
}
|
|
6501
6587
|
|
|
6502
|
-
|
|
6588
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
6589
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
6590
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
6591
|
+
}
|
|
6503
6592
|
|
|
6504
|
-
|
|
6593
|
+
// Guard Clause: Ensure match is a function
|
|
6594
|
+
if (typeof match !== 'function') {
|
|
6595
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
6596
|
+
}
|
|
6505
6597
|
|
|
6506
|
-
|
|
6598
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
6599
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
6600
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
6601
|
+
}
|
|
6602
|
+
|
|
6603
|
+
// Register this transport and get cleanup function
|
|
6604
|
+
return _registerTransport({
|
|
6605
|
+
host,
|
|
6606
|
+
target,
|
|
6607
|
+
matcher: match,
|
|
6608
|
+
removeOriginal
|
|
6609
|
+
});
|
|
6610
|
+
};
|
|
6507
6611
|
|
|
6508
|
-
|
|
6509
|
-
|
|
6612
|
+
/**
|
|
6613
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
6614
|
+
*
|
|
6615
|
+
* @param {Object} params - The parameters object.
|
|
6616
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
6617
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
6618
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
6619
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
6620
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
6621
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
6622
|
+
* @private
|
|
6623
|
+
*/
|
|
6624
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6625
|
+
// Initialize config for this host if it doesn't exist
|
|
6626
|
+
if (!_transportConfig.has(host)) {
|
|
6627
|
+
_transportConfig.set(host, {
|
|
6628
|
+
matchers: new Set(),
|
|
6629
|
+
targets: new Map()
|
|
6630
|
+
});
|
|
6631
|
+
}
|
|
6510
6632
|
|
|
6633
|
+
const config = _transportConfig.get(host);
|
|
6634
|
+
|
|
6635
|
+
// Add the matcher to the set of matchers for this host
|
|
6636
|
+
config.matchers.add(matcher);
|
|
6637
|
+
|
|
6638
|
+
// Initialize target entry if it doesn't exist
|
|
6639
|
+
if (!config.targets.has(target)) {
|
|
6640
|
+
config.targets.set(target, new Map());
|
|
6641
|
+
}
|
|
6642
|
+
|
|
6643
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
6644
|
+
config.targets.get(target).set(matcher, {
|
|
6645
|
+
removeOriginal,
|
|
6646
|
+
currentAttributes: new Map()
|
|
6647
|
+
});
|
|
6648
|
+
|
|
6649
|
+
// Perform initial attribute transport
|
|
6650
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
6651
|
+
|
|
6652
|
+
// Attach observer
|
|
6653
|
+
_attachObserver(host);
|
|
6654
|
+
|
|
6655
|
+
// Return cleanup function and utility functions
|
|
6656
|
+
return {
|
|
6657
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
6658
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
6659
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
6660
|
+
}
|
|
6661
|
+
};
|
|
6511
6662
|
|
|
6512
|
-
|
|
6513
|
-
|
|
6514
|
-
|
|
6663
|
+
/**
|
|
6664
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
6665
|
+
*
|
|
6666
|
+
* @param {HTMLElement} host - The host element
|
|
6667
|
+
* @param {HTMLElement} target - The target element
|
|
6668
|
+
* @param {Function} matcher - The matcher function
|
|
6669
|
+
* @private
|
|
6670
|
+
*/
|
|
6671
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
6672
|
+
const config = _transportConfig.get(host);
|
|
6673
|
+
if (!config) return;
|
|
6674
|
+
|
|
6675
|
+
// Remove this matcher from this target
|
|
6676
|
+
const targetMatchers = config.targets.get(target);
|
|
6677
|
+
if (targetMatchers) {
|
|
6678
|
+
targetMatchers.delete(matcher);
|
|
6679
|
+
|
|
6680
|
+
// If this target has no more matchers, remove it
|
|
6681
|
+
if (targetMatchers.size === 0) {
|
|
6682
|
+
config.targets.delete(target);
|
|
6683
|
+
}
|
|
6684
|
+
}
|
|
6685
|
+
|
|
6686
|
+
// Check if this matcher is still used by any target
|
|
6687
|
+
let matcherStillUsed = false;
|
|
6688
|
+
for (const matcherMap of config.targets.values()) {
|
|
6689
|
+
if (matcherMap.has(matcher)) {
|
|
6690
|
+
matcherStillUsed = true;
|
|
6691
|
+
break;
|
|
6692
|
+
}
|
|
6693
|
+
}
|
|
6694
|
+
|
|
6695
|
+
// If not used anymore, remove from matchers set
|
|
6696
|
+
if (!matcherStillUsed) {
|
|
6697
|
+
config.matchers.delete(matcher);
|
|
6698
|
+
}
|
|
6699
|
+
|
|
6700
|
+
// If no more targets or matchers, detach observer
|
|
6701
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
6702
|
+
_detachObserver(host);
|
|
6703
|
+
}
|
|
6704
|
+
};
|
|
6515
6705
|
|
|
6516
|
-
|
|
6517
|
-
|
|
6518
|
-
|
|
6519
|
-
|
|
6706
|
+
/**
|
|
6707
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
6708
|
+
*
|
|
6709
|
+
* @param {Object} params - The parameters object.
|
|
6710
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
6711
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6712
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
6713
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
6714
|
+
* @returns {void}
|
|
6715
|
+
* @private
|
|
6716
|
+
*/
|
|
6717
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6718
|
+
// Get a list of all matching attributes on the host element and their values
|
|
6719
|
+
const matchingAttributes = host.getAttributeNames()
|
|
6720
|
+
.filter(attr => matcher(attr))
|
|
6721
|
+
.reduce((acc, attr) => {
|
|
6722
|
+
acc[attr] = host.getAttribute(attr);
|
|
6723
|
+
return acc;
|
|
6724
|
+
}, {});
|
|
6725
|
+
|
|
6726
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
6727
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
6728
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
6729
|
+
target.setAttribute(key, value);
|
|
6730
|
+
if (removeOriginal) {
|
|
6731
|
+
host.removeAttribute(key);
|
|
6732
|
+
}
|
|
6733
|
+
});
|
|
6734
|
+
};
|
|
6520
6735
|
|
|
6521
|
-
|
|
6522
|
-
|
|
6523
|
-
|
|
6524
|
-
|
|
6736
|
+
/**
|
|
6737
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
6738
|
+
*
|
|
6739
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
6740
|
+
* @returns {MutationObserver} The observer instance.
|
|
6741
|
+
* @private
|
|
6742
|
+
*/
|
|
6743
|
+
const _attachObserver = (host) => {
|
|
6744
|
+
// If an observer for this host already exists, return it
|
|
6745
|
+
if (_observers.has(host)) {
|
|
6746
|
+
return _observers.get(host);
|
|
6747
|
+
}
|
|
6748
|
+
|
|
6749
|
+
// Create a new MutationObserver
|
|
6750
|
+
const observer = new MutationObserver((mutations) => {
|
|
6751
|
+
const config = _transportConfig.get(host);
|
|
6752
|
+
if (!config) return;
|
|
6753
|
+
|
|
6754
|
+
// For each mutation affecting attributes
|
|
6755
|
+
mutations
|
|
6756
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
6757
|
+
.forEach(mutation => {
|
|
6758
|
+
const attributeName = mutation.attributeName;
|
|
6759
|
+
|
|
6760
|
+
// Find matchers that care about this attribute
|
|
6761
|
+
for (const matcher of config.matchers) {
|
|
6762
|
+
if (matcher(attributeName)) {
|
|
6763
|
+
// For each target that uses this matcher
|
|
6764
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
6765
|
+
if (matcherConfigs.has(matcher)) {
|
|
6766
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
6767
|
+
_transportAttributes({
|
|
6768
|
+
host,
|
|
6769
|
+
target,
|
|
6770
|
+
matcher,
|
|
6771
|
+
removeOriginal
|
|
6772
|
+
});
|
|
6773
|
+
}
|
|
6774
|
+
}
|
|
6775
|
+
}
|
|
6776
|
+
}
|
|
6777
|
+
});
|
|
6778
|
+
});
|
|
6525
6779
|
|
|
6526
|
-
|
|
6527
|
-
|
|
6528
|
-
|
|
6529
|
-
|
|
6780
|
+
// Start observing attribute changes
|
|
6781
|
+
observer.observe(host, { attributes: true });
|
|
6782
|
+
|
|
6783
|
+
// Store the observer
|
|
6784
|
+
_observers.set(host, observer);
|
|
6785
|
+
|
|
6786
|
+
return observer;
|
|
6787
|
+
};
|
|
6530
6788
|
|
|
6531
|
-
|
|
6532
|
-
|
|
6533
|
-
|
|
6534
|
-
|
|
6789
|
+
/**
|
|
6790
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
6791
|
+
*
|
|
6792
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
6793
|
+
* @private
|
|
6794
|
+
*/
|
|
6795
|
+
const _detachObserver = (host) => {
|
|
6796
|
+
if (_observers.has(host)) {
|
|
6797
|
+
const observer = _observers.get(host);
|
|
6798
|
+
observer.disconnect();
|
|
6799
|
+
_observers.delete(host);
|
|
6800
|
+
}
|
|
6801
|
+
|
|
6802
|
+
// Clean up the transport config as well
|
|
6803
|
+
if (_transportConfig.has(host)) {
|
|
6804
|
+
_transportConfig.delete(host);
|
|
6805
|
+
}
|
|
6806
|
+
};
|
|
6535
6807
|
|
|
6536
|
-
|
|
6537
|
-
|
|
6538
|
-
|
|
6539
|
-
|
|
6808
|
+
/**
|
|
6809
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
6810
|
+
* @param {HTMLElement} host - The host element
|
|
6811
|
+
* @param {HTMLElement} target - The target element
|
|
6812
|
+
* @param {Function} matcher - The matcher function
|
|
6813
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
6814
|
+
* @private
|
|
6815
|
+
*/
|
|
6816
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
6817
|
+
const config = _transportConfig.get(host);
|
|
6818
|
+
if (!config) return undefined;
|
|
6819
|
+
|
|
6820
|
+
const targetMatchers = config.targets.get(target);
|
|
6821
|
+
if (!targetMatchers) return undefined;
|
|
6822
|
+
|
|
6823
|
+
return targetMatchers.get(matcher);
|
|
6824
|
+
};
|
|
6825
|
+
|
|
6826
|
+
/**
|
|
6827
|
+
* Sets an observed attribute value
|
|
6828
|
+
* @param {HTMLElement} host - The host element
|
|
6829
|
+
* @param {HTMLElement} target - The target element
|
|
6830
|
+
* @param {Function} matcher - The matcher function
|
|
6831
|
+
* @param {string} key - The attribute name
|
|
6832
|
+
* @param {string} value - The attribute value
|
|
6833
|
+
* @private
|
|
6834
|
+
*/
|
|
6835
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
6836
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6837
|
+
if (matcherConfig) {
|
|
6838
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
6540
6839
|
}
|
|
6840
|
+
};
|
|
6841
|
+
|
|
6842
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
6843
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6844
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
6845
|
+
return undefined;
|
|
6846
|
+
};
|
|
6847
|
+
|
|
6848
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
6849
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6850
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
6851
|
+
return [];
|
|
6852
|
+
};
|
|
6853
|
+
|
|
6854
|
+
const _matchers = {
|
|
6855
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
6856
|
+
'role': attr => attr.match(/^role$/)
|
|
6857
|
+
};
|
|
6858
|
+
|
|
6859
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
6860
|
+
return transportAttributes({
|
|
6861
|
+
host,
|
|
6862
|
+
target,
|
|
6863
|
+
match: attr => {
|
|
6864
|
+
for (const key in _matchers) {
|
|
6865
|
+
if (_matchers[key](attr)) return true;
|
|
6866
|
+
}
|
|
6867
|
+
return false;
|
|
6868
|
+
},
|
|
6869
|
+
removeOriginal
|
|
6870
|
+
});
|
|
6871
|
+
};
|
|
6872
|
+
|
|
6873
|
+
class AuroElement extends i$2 {
|
|
6874
|
+
|
|
6875
|
+
/**
|
|
6876
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
6877
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
6878
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
6879
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
6880
|
+
* @private
|
|
6881
|
+
*/
|
|
6882
|
+
attributeWatcher;
|
|
6541
6883
|
|
|
6542
|
-
// function to define props used within the scope of this component
|
|
6543
6884
|
static get properties() {
|
|
6544
6885
|
return {
|
|
6545
6886
|
|
|
6546
6887
|
/**
|
|
6547
|
-
*
|
|
6888
|
+
* Defines the layout of an element.
|
|
6889
|
+
* @default {'default'}
|
|
6548
6890
|
*/
|
|
6549
|
-
|
|
6550
|
-
type:
|
|
6891
|
+
layout: {
|
|
6892
|
+
type: String,
|
|
6893
|
+
attribute: "layout",
|
|
6551
6894
|
reflect: true
|
|
6552
6895
|
},
|
|
6553
|
-
|
|
6896
|
+
|
|
6554
6897
|
/**
|
|
6555
|
-
*
|
|
6898
|
+
* Defines the shape of an element.
|
|
6899
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
6900
|
+
* @default {'default'}
|
|
6556
6901
|
*/
|
|
6557
|
-
|
|
6558
|
-
type:
|
|
6902
|
+
shape: {
|
|
6903
|
+
type: String,
|
|
6904
|
+
attribute: "shape",
|
|
6559
6905
|
reflect: true
|
|
6560
6906
|
},
|
|
6561
6907
|
|
|
6562
6908
|
/**
|
|
6563
|
-
*
|
|
6909
|
+
* Defines the size of an element.
|
|
6910
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
6911
|
+
* @default {'md'}
|
|
6564
6912
|
*/
|
|
6565
|
-
|
|
6566
|
-
type:
|
|
6913
|
+
size: {
|
|
6914
|
+
type: String,
|
|
6915
|
+
attribute: "size",
|
|
6567
6916
|
reflect: true
|
|
6568
6917
|
},
|
|
6569
6918
|
|
|
6570
|
-
/**
|
|
6571
|
-
*
|
|
6919
|
+
/**
|
|
6920
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
6921
|
+
* @default {false}
|
|
6572
6922
|
*/
|
|
6573
|
-
|
|
6923
|
+
onDark: {
|
|
6574
6924
|
type: Boolean,
|
|
6925
|
+
attribute: "ondark",
|
|
6575
6926
|
reflect: true
|
|
6927
|
+
},
|
|
6928
|
+
|
|
6929
|
+
/**
|
|
6930
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
6931
|
+
* This is used to apply layout and shape classes dynamically.
|
|
6932
|
+
* @type {HTMLElement|null}
|
|
6933
|
+
* @default {null}
|
|
6934
|
+
* @private
|
|
6935
|
+
*/
|
|
6936
|
+
wrapper: {
|
|
6937
|
+
attribute: false,
|
|
6938
|
+
reflect: false
|
|
6576
6939
|
}
|
|
6577
6940
|
};
|
|
6578
6941
|
}
|
|
6579
6942
|
|
|
6580
|
-
|
|
6581
|
-
return [
|
|
6582
|
-
i$5`${styleCss$1}`,
|
|
6583
|
-
i$5`${colorCss$1}`,
|
|
6584
|
-
i$5`${tokensCss$1}`
|
|
6585
|
-
];
|
|
6586
|
-
}
|
|
6943
|
+
|
|
6587
6944
|
|
|
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
|
-
}
|
|
6945
|
+
resetShapeClasses() {
|
|
6946
|
+
if (this.shape && this.size) {
|
|
6599
6947
|
|
|
6600
|
-
|
|
6601
|
-
|
|
6602
|
-
|
|
6948
|
+
if (this.wrapper) {
|
|
6949
|
+
this.wrapper.classList.forEach((className) => {
|
|
6950
|
+
if (className.startsWith('shape-')) {
|
|
6951
|
+
this.wrapper.classList.remove(className);
|
|
6952
|
+
}
|
|
6953
|
+
});
|
|
6954
|
+
|
|
6955
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
6956
|
+
}
|
|
6957
|
+
}
|
|
6603
6958
|
}
|
|
6604
6959
|
|
|
6605
|
-
|
|
6960
|
+
resetLayoutClasses() {
|
|
6961
|
+
if (this.layout) {
|
|
6962
|
+
if (this.wrapper) {
|
|
6963
|
+
this.wrapper.classList.forEach((className) => {
|
|
6964
|
+
if (className.startsWith('layout-')) {
|
|
6965
|
+
this.wrapper.classList.remove(className);
|
|
6966
|
+
}
|
|
6967
|
+
});
|
|
6968
|
+
|
|
6969
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
6970
|
+
}
|
|
6971
|
+
}
|
|
6972
|
+
}
|
|
6973
|
+
|
|
6974
|
+
updateComponentArchitecture() {
|
|
6975
|
+
this.resetLayoutClasses();
|
|
6976
|
+
this.resetShapeClasses();
|
|
6977
|
+
}
|
|
6978
|
+
|
|
6979
|
+
updated(changedProperties) {
|
|
6980
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
6981
|
+
this.updateComponentArchitecture();
|
|
6982
|
+
}
|
|
6983
|
+
}
|
|
6984
|
+
|
|
6985
|
+
firstUpdated() {
|
|
6986
|
+
super.firstUpdated();
|
|
6987
|
+
|
|
6988
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
6989
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
6990
|
+
|
|
6991
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
6992
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
6993
|
+
}
|
|
6994
|
+
|
|
6995
|
+
disconnectedCallback() {
|
|
6996
|
+
super.disconnectedCallback();
|
|
6997
|
+
|
|
6998
|
+
// Cleanup the ARIA observer if it exists
|
|
6999
|
+
if (this.attributeWatcher) {
|
|
7000
|
+
this.attributeWatcher.cleanup();
|
|
7001
|
+
this.attributeWatcher = null;
|
|
7002
|
+
}
|
|
7003
|
+
}
|
|
7004
|
+
|
|
7005
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
7006
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
7007
|
+
render() {
|
|
7008
|
+
try {
|
|
7009
|
+
return this.renderLayout();
|
|
7010
|
+
} catch (error) {
|
|
7011
|
+
// failed to get the defined layout
|
|
7012
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
7013
|
+
|
|
7014
|
+
// fallback to the default layout
|
|
7015
|
+
return this.getLayout('default');
|
|
7016
|
+
}
|
|
7017
|
+
}
|
|
7018
|
+
}
|
|
7019
|
+
|
|
7020
|
+
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}`;
|
|
7021
|
+
|
|
7022
|
+
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)}`;
|
|
7023
|
+
|
|
7024
|
+
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}`;
|
|
7025
|
+
|
|
7026
|
+
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}`;
|
|
7027
|
+
|
|
7028
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
7029
|
+
// See LICENSE in the project root for license information.
|
|
7030
|
+
|
|
7031
|
+
// ---------------------------------------------------------------------
|
|
7032
|
+
|
|
7033
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
7034
|
+
|
|
7035
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
7036
|
+
|
|
7037
|
+
/* eslint-disable jsdoc/require-param */
|
|
7038
|
+
|
|
7039
|
+
/**
|
|
7040
|
+
* This will register a new custom element with the browser.
|
|
7041
|
+
* @param {String} name - The name of the custom element.
|
|
7042
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
7043
|
+
* @returns {void}
|
|
7044
|
+
*/
|
|
7045
|
+
registerComponent(name, componentClass) {
|
|
7046
|
+
if (!customElements.get(name)) {
|
|
7047
|
+
customElements.define(name, class extends componentClass {});
|
|
7048
|
+
}
|
|
7049
|
+
}
|
|
7050
|
+
|
|
7051
|
+
/**
|
|
7052
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
7053
|
+
* @returns {void}
|
|
7054
|
+
*/
|
|
7055
|
+
closestElement(
|
|
7056
|
+
selector, // selector like in .closest()
|
|
7057
|
+
base = this, // extra functionality to skip a parent
|
|
7058
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
7059
|
+
!el || el === document || el === window
|
|
7060
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
7061
|
+
: found
|
|
7062
|
+
? found // found a selector INside this element
|
|
7063
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
7064
|
+
) {
|
|
7065
|
+
return __Closest(base);
|
|
7066
|
+
}
|
|
7067
|
+
/* eslint-enable jsdoc/require-param */
|
|
7068
|
+
|
|
7069
|
+
/**
|
|
7070
|
+
* 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.
|
|
7071
|
+
* @param {Object} elem - The element to check.
|
|
7072
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
7073
|
+
* @returns {void}
|
|
7074
|
+
*/
|
|
7075
|
+
handleComponentTagRename(elem, tagName) {
|
|
7076
|
+
const tag = tagName.toLowerCase();
|
|
7077
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
7078
|
+
|
|
7079
|
+
if (elemTag !== tag) {
|
|
7080
|
+
elem.setAttribute(tag, true);
|
|
7081
|
+
}
|
|
7082
|
+
}
|
|
7083
|
+
|
|
7084
|
+
/**
|
|
7085
|
+
* Validates if an element is a specific Auro component.
|
|
7086
|
+
* @param {Object} elem - The element to validate.
|
|
7087
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
7088
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
7089
|
+
*/
|
|
7090
|
+
elementMatch(elem, tagName) {
|
|
7091
|
+
const tag = tagName.toLowerCase();
|
|
7092
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
7093
|
+
|
|
7094
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
7095
|
+
}
|
|
7096
|
+
};
|
|
7097
|
+
|
|
7098
|
+
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}}`;
|
|
7099
|
+
|
|
7100
|
+
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}`;
|
|
7101
|
+
|
|
7102
|
+
var tokensCss$1 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
7103
|
+
|
|
7104
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7105
|
+
// See LICENSE in the project root for license information.
|
|
7106
|
+
|
|
7107
|
+
|
|
7108
|
+
class AuroLoader extends i$2 {
|
|
7109
|
+
constructor() {
|
|
7110
|
+
super();
|
|
7111
|
+
|
|
7112
|
+
/**
|
|
7113
|
+
* @private
|
|
7114
|
+
*/
|
|
7115
|
+
this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
7116
|
+
|
|
7117
|
+
/**
|
|
7118
|
+
* @private
|
|
7119
|
+
*/
|
|
7120
|
+
this.mdCount = 3;
|
|
7121
|
+
|
|
7122
|
+
/**
|
|
7123
|
+
* @private
|
|
7124
|
+
*/
|
|
7125
|
+
this.smCount = 2;
|
|
7126
|
+
|
|
7127
|
+
/**
|
|
7128
|
+
* @private
|
|
7129
|
+
*/
|
|
7130
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
7131
|
+
|
|
7132
|
+
this.orbit = false;
|
|
7133
|
+
this.ringworm = false;
|
|
7134
|
+
this.laser = false;
|
|
7135
|
+
this.pulse = false;
|
|
7136
|
+
}
|
|
7137
|
+
|
|
7138
|
+
// function to define props used within the scope of this component
|
|
7139
|
+
static get properties() {
|
|
7140
|
+
return {
|
|
7141
|
+
|
|
7142
|
+
/**
|
|
7143
|
+
* Sets loader to laser type.
|
|
7144
|
+
*/
|
|
7145
|
+
laser: {
|
|
7146
|
+
type: Boolean,
|
|
7147
|
+
reflect: true
|
|
7148
|
+
},
|
|
7149
|
+
|
|
7150
|
+
/**
|
|
7151
|
+
* Sets loader to orbit type.
|
|
7152
|
+
*/
|
|
7153
|
+
orbit: {
|
|
7154
|
+
type: Boolean,
|
|
7155
|
+
reflect: true
|
|
7156
|
+
},
|
|
7157
|
+
|
|
7158
|
+
/**
|
|
7159
|
+
* Sets loader to pulse type.
|
|
7160
|
+
*/
|
|
7161
|
+
pulse: {
|
|
7162
|
+
type: Boolean,
|
|
7163
|
+
reflect: true
|
|
7164
|
+
},
|
|
7165
|
+
|
|
7166
|
+
/**
|
|
7167
|
+
* Sets loader to ringworm type.
|
|
7168
|
+
*/
|
|
7169
|
+
ringworm: {
|
|
7170
|
+
type: Boolean,
|
|
7171
|
+
reflect: true
|
|
7172
|
+
}
|
|
7173
|
+
};
|
|
7174
|
+
}
|
|
7175
|
+
|
|
7176
|
+
static get styles() {
|
|
7177
|
+
return [
|
|
7178
|
+
i$5`${styleCss$1}`,
|
|
7179
|
+
i$5`${colorCss$1}`,
|
|
7180
|
+
i$5`${tokensCss$1}`
|
|
7181
|
+
];
|
|
7182
|
+
}
|
|
7183
|
+
|
|
7184
|
+
/**
|
|
7185
|
+
* This will register this element with the browser.
|
|
7186
|
+
* @param {string} [name="auro-loader"] - The name of element that you want to register to.
|
|
7187
|
+
*
|
|
7188
|
+
* @example
|
|
7189
|
+
* AuroLoader.register("custom-loader") // this will register this element to <custom-loader/>
|
|
7190
|
+
*
|
|
7191
|
+
*/
|
|
7192
|
+
static register(name = "auro-loader") {
|
|
7193
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
|
|
7194
|
+
}
|
|
7195
|
+
|
|
7196
|
+
firstUpdated() {
|
|
7197
|
+
// Add the tag name as an attribute if it is different than the component name
|
|
7198
|
+
this.runtimeUtils.handleComponentTagRename(this, 'auro-loader');
|
|
7199
|
+
}
|
|
7200
|
+
|
|
7201
|
+
connectedCallback() {
|
|
6606
7202
|
super.connectedCallback();
|
|
6607
7203
|
}
|
|
6608
7204
|
|
|
@@ -6632,7 +7228,7 @@ class AuroLoader extends i$2 {
|
|
|
6632
7228
|
<span part="element" class="loader node-${idx}"></span>
|
|
6633
7229
|
`)}
|
|
6634
7230
|
|
|
6635
|
-
<div class="no-animation">Loading...</div>
|
|
7231
|
+
<div class="no-animation body-default">Loading...</div>
|
|
6636
7232
|
|
|
6637
7233
|
${this.ringworm ? x`
|
|
6638
7234
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
@@ -6644,25 +7240,32 @@ class AuroLoader extends i$2 {
|
|
|
6644
7240
|
}
|
|
6645
7241
|
}
|
|
6646
7242
|
|
|
6647
|
-
var loaderVersion = '5.
|
|
7243
|
+
var loaderVersion = '5.1.0';
|
|
6648
7244
|
|
|
6649
|
-
/* eslint-disable max-lines */
|
|
6650
7245
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6651
7246
|
// See LICENSE in the project root for license information.
|
|
6652
7247
|
|
|
6653
7248
|
|
|
6654
7249
|
/**
|
|
6655
7250
|
* @slot - Default slot for the text of the button.
|
|
6656
|
-
* @slot icon - Slot to provide auro-icon for the button.
|
|
6657
7251
|
* @csspart button - Apply CSS to HTML5 button.
|
|
6658
7252
|
* @csspart loader - Apply CSS to auro-loader.
|
|
6659
7253
|
* @csspart text - Apply CSS to text slot.
|
|
6660
7254
|
* @csspart icon - Apply CSS to icon slot.
|
|
6661
7255
|
*/
|
|
6662
7256
|
|
|
6663
|
-
|
|
7257
|
+
const ICON_ONLY_SHAPES = ['circle', 'square'];
|
|
6664
7258
|
|
|
6665
|
-
|
|
7259
|
+
/**
|
|
7260
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
7261
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
7262
|
+
* @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
|
|
7263
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
7264
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
7265
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
7266
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
7267
|
+
*/
|
|
7268
|
+
class AuroButton extends AuroElement {
|
|
6666
7269
|
|
|
6667
7270
|
/**
|
|
6668
7271
|
* Enables form association for this element.
|
|
@@ -6677,15 +7280,13 @@ class AuroButton extends i$2 {
|
|
|
6677
7280
|
super();
|
|
6678
7281
|
this.autofocus = false;
|
|
6679
7282
|
this.disabled = false;
|
|
6680
|
-
this.iconOnly = false;
|
|
6681
7283
|
this.loading = false;
|
|
7284
|
+
this.size = "md";
|
|
7285
|
+
this.shape = "rounded";
|
|
6682
7286
|
this.onDark = false;
|
|
6683
|
-
this.secondary = false;
|
|
6684
|
-
this.tertiary = false;
|
|
6685
|
-
this.rounded = false;
|
|
6686
|
-
this.slim = false;
|
|
6687
7287
|
this.fluid = false;
|
|
6688
7288
|
this.loadingText = this.loadingText || 'Loading...';
|
|
7289
|
+
this.variant = 'primary';
|
|
6689
7290
|
|
|
6690
7291
|
// Support for HTML5 forms
|
|
6691
7292
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -6706,49 +7307,59 @@ class AuroButton extends i$2 {
|
|
|
6706
7307
|
* @private
|
|
6707
7308
|
*/
|
|
6708
7309
|
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
7310
|
+
|
|
7311
|
+
/**
|
|
7312
|
+
* @private
|
|
7313
|
+
*/
|
|
7314
|
+
this.buttonHref = undefined;
|
|
7315
|
+
|
|
7316
|
+
/**
|
|
7317
|
+
* @private
|
|
7318
|
+
*/
|
|
7319
|
+
this.buttonTarget = undefined;
|
|
7320
|
+
|
|
7321
|
+
/**
|
|
7322
|
+
* @private
|
|
7323
|
+
*/
|
|
7324
|
+
this.buttonRel = undefined;
|
|
6709
7325
|
}
|
|
6710
7326
|
|
|
6711
7327
|
static get styles() {
|
|
6712
7328
|
return [
|
|
6713
7329
|
tokensCss$2,
|
|
6714
7330
|
styleCss$2,
|
|
6715
|
-
colorCss$2
|
|
7331
|
+
colorCss$2,
|
|
7332
|
+
shapeSize
|
|
6716
7333
|
];
|
|
6717
7334
|
}
|
|
6718
7335
|
|
|
6719
7336
|
static get properties() {
|
|
6720
7337
|
return {
|
|
6721
7338
|
|
|
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
|
-
},
|
|
7339
|
+
...super.properties,
|
|
6729
7340
|
|
|
6730
7341
|
/**
|
|
6731
|
-
*
|
|
7342
|
+
* Override layout since it isn't used in this component.
|
|
7343
|
+
* @private
|
|
6732
7344
|
*/
|
|
6733
|
-
|
|
7345
|
+
layout: {
|
|
6734
7346
|
type: Boolean,
|
|
6735
|
-
|
|
7347
|
+
attribute: false,
|
|
7348
|
+
reflect: false
|
|
6736
7349
|
},
|
|
6737
7350
|
|
|
6738
7351
|
/**
|
|
6739
|
-
*
|
|
6740
|
-
* @deprecated
|
|
7352
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6741
7353
|
*/
|
|
6742
|
-
|
|
7354
|
+
autofocus: {
|
|
6743
7355
|
type: Boolean,
|
|
6744
7356
|
reflect: true
|
|
6745
7357
|
},
|
|
6746
7358
|
|
|
6747
7359
|
/**
|
|
6748
|
-
*
|
|
6749
|
-
* @deprecated
|
|
7360
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
6750
7361
|
*/
|
|
6751
|
-
|
|
7362
|
+
disabled: {
|
|
6752
7363
|
type: Boolean,
|
|
6753
7364
|
reflect: true
|
|
6754
7365
|
},
|
|
@@ -6756,15 +7367,7 @@ class AuroButton extends i$2 {
|
|
|
6756
7367
|
/**
|
|
6757
7368
|
* Alters the shape of the button to be full width of its parent container.
|
|
6758
7369
|
*/
|
|
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: {
|
|
7370
|
+
fluid: {
|
|
6768
7371
|
type: Boolean,
|
|
6769
7372
|
reflect: true
|
|
6770
7373
|
},
|
|
@@ -6772,7 +7375,7 @@ class AuroButton extends i$2 {
|
|
|
6772
7375
|
/**
|
|
6773
7376
|
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
6774
7377
|
*/
|
|
6775
|
-
loading:
|
|
7378
|
+
loading: {
|
|
6776
7379
|
type: Boolean,
|
|
6777
7380
|
reflect: true
|
|
6778
7381
|
},
|
|
@@ -6780,36 +7383,12 @@ class AuroButton extends i$2 {
|
|
|
6780
7383
|
/**
|
|
6781
7384
|
* 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
7385
|
*/
|
|
6783
|
-
loadingText:
|
|
7386
|
+
loadingText: {
|
|
6784
7387
|
type: String
|
|
6785
7388
|
},
|
|
6786
7389
|
|
|
6787
7390
|
/**
|
|
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.
|
|
7391
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
6813
7392
|
*/
|
|
6814
7393
|
tIndex: {
|
|
6815
7394
|
type: String,
|
|
@@ -6817,75 +7396,68 @@ class AuroButton extends i$2 {
|
|
|
6817
7396
|
},
|
|
6818
7397
|
|
|
6819
7398
|
/**
|
|
6820
|
-
* Populates
|
|
7399
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
7400
|
+
* Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
|
|
7401
|
+
* Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
|
|
6821
7402
|
*/
|
|
6822
|
-
|
|
7403
|
+
tabindex: {
|
|
6823
7404
|
type: String,
|
|
6824
|
-
reflect:
|
|
7405
|
+
reflect: false
|
|
6825
7406
|
},
|
|
6826
7407
|
|
|
6827
7408
|
/**
|
|
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.
|
|
7409
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
6831
7410
|
*/
|
|
6832
|
-
|
|
7411
|
+
title: {
|
|
6833
7412
|
type: String,
|
|
6834
7413
|
reflect: true
|
|
6835
7414
|
},
|
|
6836
7415
|
|
|
6837
7416
|
/**
|
|
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.
|
|
7417
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
6841
7418
|
*/
|
|
6842
|
-
|
|
7419
|
+
type: {
|
|
6843
7420
|
type: String,
|
|
6844
7421
|
reflect: true
|
|
6845
7422
|
},
|
|
6846
7423
|
|
|
6847
7424
|
/**
|
|
6848
|
-
*
|
|
6849
|
-
* or another grouping element it controls, is currently expanded or collapsed.
|
|
6850
|
-
* This is an optional attribute for buttons.
|
|
7425
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
6851
7426
|
*/
|
|
6852
|
-
|
|
6853
|
-
type:
|
|
7427
|
+
value: {
|
|
7428
|
+
type: String,
|
|
6854
7429
|
reflect: true
|
|
6855
7430
|
},
|
|
6856
7431
|
|
|
6857
7432
|
/**
|
|
6858
|
-
* Sets
|
|
7433
|
+
* Sets button variant option.
|
|
7434
|
+
* @default primary
|
|
6859
7435
|
*/
|
|
6860
|
-
|
|
7436
|
+
variant: {
|
|
6861
7437
|
type: String,
|
|
6862
7438
|
reflect: true
|
|
6863
7439
|
},
|
|
6864
7440
|
|
|
6865
7441
|
/**
|
|
6866
|
-
*
|
|
7442
|
+
* @private
|
|
6867
7443
|
*/
|
|
6868
|
-
|
|
7444
|
+
buttonHref: {
|
|
6869
7445
|
type: String,
|
|
6870
|
-
reflect: true
|
|
6871
7446
|
},
|
|
6872
7447
|
|
|
6873
7448
|
/**
|
|
6874
|
-
*
|
|
7449
|
+
* @private
|
|
6875
7450
|
*/
|
|
6876
|
-
|
|
7451
|
+
buttonTarget: {
|
|
6877
7452
|
type: String,
|
|
6878
|
-
reflect: true
|
|
6879
7453
|
},
|
|
6880
7454
|
|
|
6881
7455
|
/**
|
|
6882
|
-
*
|
|
7456
|
+
* @private
|
|
6883
7457
|
*/
|
|
6884
|
-
|
|
7458
|
+
buttonRel: {
|
|
6885
7459
|
type: String,
|
|
6886
|
-
reflect: true
|
|
6887
7460
|
},
|
|
6888
|
-
ready: { type: Boolean },
|
|
6889
7461
|
};
|
|
6890
7462
|
}
|
|
6891
7463
|
|
|
@@ -6898,7 +7470,7 @@ class AuroButton extends i$2 {
|
|
|
6898
7470
|
*
|
|
6899
7471
|
*/
|
|
6900
7472
|
static register(name = "auro-button") {
|
|
6901
|
-
AuroLibraryRuntimeUtils$
|
|
7473
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
|
|
6902
7474
|
}
|
|
6903
7475
|
|
|
6904
7476
|
/**
|
|
@@ -6910,17 +7482,6 @@ class AuroButton extends i$2 {
|
|
|
6910
7482
|
this.renderRoot.querySelector('button').focus();
|
|
6911
7483
|
}
|
|
6912
7484
|
|
|
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
7485
|
/**
|
|
6925
7486
|
* Submits the form that this button is associated with.
|
|
6926
7487
|
* @private
|
|
@@ -6941,28 +7502,115 @@ class AuroButton extends i$2 {
|
|
|
6941
7502
|
return this.internals ? this.internals.form : null;
|
|
6942
7503
|
}
|
|
6943
7504
|
|
|
6944
|
-
|
|
7505
|
+
/**
|
|
7506
|
+
* @private
|
|
7507
|
+
* @returns {Boolean}
|
|
7508
|
+
*/
|
|
7509
|
+
get showText() {
|
|
7510
|
+
return !ICON_ONLY_SHAPES.includes(this.shape);
|
|
7511
|
+
}
|
|
7512
|
+
|
|
7513
|
+
/**
|
|
7514
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
7515
|
+
* @returns {string | undefined}
|
|
7516
|
+
* @private
|
|
7517
|
+
*/
|
|
7518
|
+
get currentAriaLabel() {
|
|
7519
|
+
if (!this.attributeWatcher) return undefined;
|
|
7520
|
+
|
|
7521
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
7522
|
+
return ariaLabel || undefined;
|
|
7523
|
+
}
|
|
7524
|
+
|
|
7525
|
+
/**
|
|
7526
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
7527
|
+
* @returns {string | undefined}
|
|
7528
|
+
* @private
|
|
7529
|
+
*/
|
|
7530
|
+
get currentAriaLabelledBy() {
|
|
7531
|
+
if (!this.attributeWatcher) return undefined;
|
|
7532
|
+
|
|
7533
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
7534
|
+
return ariaLabelledBy || undefined;
|
|
7535
|
+
}
|
|
7536
|
+
|
|
7537
|
+
/**
|
|
7538
|
+
* Whether or not the button is set to an icon-only shape.
|
|
7539
|
+
* @returns {boolean} - True if the button is icon-only, false otherwise.
|
|
7540
|
+
* @private
|
|
7541
|
+
*/
|
|
7542
|
+
get iconOnly() {
|
|
7543
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
7544
|
+
}
|
|
7545
|
+
|
|
7546
|
+
/**
|
|
7547
|
+
* Gets a class name for the font size based on the button's size and shape.
|
|
7548
|
+
* @returns {string} - The font size class name.
|
|
7549
|
+
* @private
|
|
7550
|
+
*/
|
|
7551
|
+
getFontSize() {
|
|
7552
|
+
|
|
7553
|
+
// Size map for standard buttons
|
|
7554
|
+
const standardButtonSizeMap = {
|
|
7555
|
+
xs: 'body-xs',
|
|
7556
|
+
sm: 'body-sm',
|
|
7557
|
+
md: 'body-default',
|
|
7558
|
+
lg: 'body-lg',
|
|
7559
|
+
xl: 'body-lg'
|
|
7560
|
+
};
|
|
7561
|
+
|
|
7562
|
+
// Size map for icon-only buttons
|
|
7563
|
+
const iconOnlyButtonSizeMap = {
|
|
7564
|
+
xs: 'heading-xs',
|
|
7565
|
+
sm: 'heading-sm',
|
|
7566
|
+
md: 'heading-sm',
|
|
7567
|
+
lg: 'heading-md',
|
|
7568
|
+
xl: 'heading-lg'
|
|
7569
|
+
};
|
|
7570
|
+
|
|
7571
|
+
// Determine which map to use based on the shape
|
|
7572
|
+
const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
|
|
7573
|
+
|
|
7574
|
+
// Return the font size based on the button size and shape
|
|
7575
|
+
return sizeMap[this.size] || 'body-default';
|
|
7576
|
+
}
|
|
7577
|
+
|
|
7578
|
+
/**
|
|
7579
|
+
* Renders the default layout for the button.
|
|
7580
|
+
* @returns {TemplateResult}
|
|
7581
|
+
* @private
|
|
7582
|
+
*/
|
|
7583
|
+
renderLayoutDefault() {
|
|
7584
|
+
|
|
7585
|
+
const fontSize = this.getFontSize();
|
|
7586
|
+
const tag = this.buttonHref ? i$1`a` : i$1`button`;
|
|
7587
|
+
const part = this.buttonHref ? 'link' : 'button';
|
|
7588
|
+
|
|
6945
7589
|
const classes = {
|
|
6946
|
-
|
|
6947
|
-
|
|
6948
|
-
|
|
6949
|
-
|
|
6950
|
-
|
|
6951
|
-
|
|
6952
|
-
|
|
6953
|
-
'
|
|
7590
|
+
"auro-button": true,
|
|
7591
|
+
"inset": this.showText,
|
|
7592
|
+
wrapper: true,
|
|
7593
|
+
loading: this.loading,
|
|
7594
|
+
[`${fontSize}`]: true,
|
|
7595
|
+
|
|
7596
|
+
// These remove the default borders so we can handle focus borders ourselves
|
|
7597
|
+
'simple': !['secondary'].includes(this.variant),
|
|
7598
|
+
'thin': ['secondary'].includes(this.variant),
|
|
7599
|
+
};
|
|
7600
|
+
|
|
7601
|
+
const contentClasses = {
|
|
7602
|
+
"contentWrapper": true,
|
|
7603
|
+
"util_displayHiddenVisually": this.loading
|
|
6954
7604
|
};
|
|
6955
7605
|
|
|
6956
7606
|
return u$2`
|
|
6957
|
-
|
|
6958
|
-
part="
|
|
6959
|
-
aria-
|
|
6960
|
-
aria-
|
|
6961
|
-
|
|
6962
|
-
aria-expanded="${o(this.ariaexpanded)}"
|
|
6963
|
-
tabIndex="${o(this.tIndex)}"
|
|
7607
|
+
<${tag}
|
|
7608
|
+
part="${part}"
|
|
7609
|
+
aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
7610
|
+
aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
7611
|
+
tabindex="${o(this.tIndex || this.tabindex)}"
|
|
6964
7612
|
?autofocus="${this.autofocus}"
|
|
6965
|
-
class
|
|
7613
|
+
class=${e(classes)}
|
|
6966
7614
|
?disabled="${this.disabled || this.loading}"
|
|
6967
7615
|
?onDark="${this.onDark}"
|
|
6968
7616
|
title="${o(this.title ? this.title : undefined)}"
|
|
@@ -6971,28 +7619,36 @@ class AuroButton extends i$2 {
|
|
|
6971
7619
|
variant="${o(this.variant ? this.variant : undefined)}"
|
|
6972
7620
|
.value="${o(this.value ? this.value : undefined)}"
|
|
6973
7621
|
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
7622
|
+
href="${o(this.buttonHref || undefined)}"
|
|
7623
|
+
target="${o(this.buttonTarget || undefined)}"
|
|
7624
|
+
rel="${o(this.buttonRel || undefined)}"
|
|
6974
7625
|
>
|
|
6975
7626
|
${o(this.loading ? u$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
6976
7627
|
|
|
6977
|
-
<span class="
|
|
7628
|
+
<span class="${e(contentClasses)}">
|
|
6978
7629
|
<span class="textSlot" part="text">
|
|
6979
|
-
|
|
6980
|
-
</span>
|
|
6981
|
-
|
|
6982
|
-
<span part="icon">
|
|
6983
|
-
<slot name="icon"></slot>
|
|
7630
|
+
<slot></slot>
|
|
6984
7631
|
</span>
|
|
6985
7632
|
</span>
|
|
6986
|
-
|
|
7633
|
+
</${tag}>
|
|
6987
7634
|
`;
|
|
6988
7635
|
}
|
|
7636
|
+
|
|
7637
|
+
/**
|
|
7638
|
+
* Renders the layout of the button.
|
|
7639
|
+
* @returns {TemplateResult}
|
|
7640
|
+
* @private
|
|
7641
|
+
*/
|
|
7642
|
+
renderLayout() {
|
|
7643
|
+
return this.renderLayoutDefault();
|
|
7644
|
+
}
|
|
6989
7645
|
}
|
|
6990
7646
|
|
|
6991
|
-
var buttonVersion = '
|
|
7647
|
+
var buttonVersion = '11.0.0';
|
|
6992
7648
|
|
|
6993
7649
|
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-advanced-color-state-error-inverse, #f9a4a8)}.helptext-wrapper{color:var(--ds-auro-helptext-color)}`;
|
|
6994
7650
|
|
|
6995
|
-
var styleCss = i$5`.
|
|
7651
|
+
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
7652
|
|
|
6997
7653
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
6998
7654
|
|
|
@@ -7072,8 +7728,6 @@ class AuroLibraryRuntimeUtils {
|
|
|
7072
7728
|
|
|
7073
7729
|
/**
|
|
7074
7730
|
* 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
7731
|
*/
|
|
7078
7732
|
class AuroHelpText extends i$2 {
|
|
7079
7733
|
|
|
@@ -7189,7 +7843,7 @@ class AuroHelpText extends i$2 {
|
|
|
7189
7843
|
// function that renders the HTML and CSS into the scope of the component
|
|
7190
7844
|
render() {
|
|
7191
7845
|
return x`
|
|
7192
|
-
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
7846
|
+
<div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
|
|
7193
7847
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
7194
7848
|
</div>
|
|
7195
7849
|
`;
|
|
@@ -7249,26 +7903,104 @@ class AuroInput extends BaseInput {
|
|
|
7249
7903
|
];
|
|
7250
7904
|
}
|
|
7251
7905
|
|
|
7906
|
+
/**
|
|
7907
|
+
* Determines if the HTML input element should be visually hidden.
|
|
7908
|
+
* Returns true when display value content exists without focus and has a value,
|
|
7909
|
+
* or when the input has no value, is not focused, and has no placeholder text.
|
|
7910
|
+
* @returns {boolean} - True if the input should be visually hidden, false otherwise.
|
|
7911
|
+
* @private
|
|
7912
|
+
*/
|
|
7913
|
+
get inputHidden() {
|
|
7914
|
+
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
|
|
7915
|
+
}
|
|
7916
|
+
|
|
7917
|
+
/**
|
|
7918
|
+
* Determines if the input should display in a state with no focus or value indication.
|
|
7919
|
+
* Returns true when the input has display content without focus and has a value,
|
|
7920
|
+
* or when the input has no value and is not focused.
|
|
7921
|
+
* @returns {boolean} - True if the input should show no focus or value state, false otherwise.
|
|
7922
|
+
* @private
|
|
7923
|
+
*/
|
|
7924
|
+
get noFocusOrValue() {
|
|
7925
|
+
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus);
|
|
7926
|
+
}
|
|
7927
|
+
|
|
7928
|
+
/**
|
|
7929
|
+
* Whether the label is being hidden currently based on state.
|
|
7930
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
7931
|
+
* @private
|
|
7932
|
+
*/
|
|
7933
|
+
get labelHidden() {
|
|
7934
|
+
return this.hasDisplayValueContent && !this.hasFocus && this.hasValue;
|
|
7935
|
+
}
|
|
7936
|
+
|
|
7937
|
+
/**
|
|
7938
|
+
* Returns the label font class based on layout and visibility state.
|
|
7939
|
+
* @private
|
|
7940
|
+
* @returns {string} - The font class for the label.
|
|
7941
|
+
*/
|
|
7942
|
+
get labelFontClass() {
|
|
7943
|
+
const isHidden = this.inputHidden;
|
|
7944
|
+
|
|
7945
|
+
if (this.layout.startsWith('emphasized')) {
|
|
7946
|
+
return this.noFocusOrValue ? 'accent-xl' : 'body-sm';
|
|
7947
|
+
}
|
|
7948
|
+
|
|
7949
|
+
if (this.layout === 'snowflake') {
|
|
7950
|
+
return isHidden ? 'body-lg' : 'body-xs';
|
|
7951
|
+
}
|
|
7952
|
+
|
|
7953
|
+
// classic layout (default)
|
|
7954
|
+
return isHidden ? 'body-default' : 'body-xs';
|
|
7955
|
+
}
|
|
7956
|
+
|
|
7957
|
+
/**
|
|
7958
|
+
* Returns the input font class based on layout and visibility state.
|
|
7959
|
+
* @private
|
|
7960
|
+
* @returns {string} - The font class for the input.
|
|
7961
|
+
*/
|
|
7962
|
+
get inputFontClass() {
|
|
7963
|
+
if (this.layout.startsWith('emphasized')) {
|
|
7964
|
+
return this.noFocusOrValue ? 'body-sm' : 'accent-xl';
|
|
7965
|
+
}
|
|
7966
|
+
|
|
7967
|
+
if (this.layout === 'snowflake') {
|
|
7968
|
+
// same for both hidden and visible
|
|
7969
|
+
return 'body-lg';
|
|
7970
|
+
}
|
|
7971
|
+
|
|
7972
|
+
// edge case for enabling visual overrides in datepicker
|
|
7973
|
+
if (this.layout === 'classic' && this.shape === 'snowflake') {
|
|
7974
|
+
return 'body-lg';
|
|
7975
|
+
}
|
|
7976
|
+
|
|
7977
|
+
// classic layout (default) - same for both hidden and visible
|
|
7978
|
+
return 'body-default';
|
|
7979
|
+
}
|
|
7980
|
+
|
|
7252
7981
|
/**
|
|
7253
7982
|
* Returns classmap configuration for html5 input labels in all layouts.
|
|
7254
7983
|
* @private
|
|
7255
|
-
* @returns {
|
|
7984
|
+
* @returns {Record<string, boolean>}
|
|
7256
7985
|
*/
|
|
7257
7986
|
get commonLabelClasses() {
|
|
7258
7987
|
return {
|
|
7259
|
-
'
|
|
7260
|
-
'
|
|
7988
|
+
'is-disabled': this.disabled,
|
|
7989
|
+
'withValue': this.hasValue,
|
|
7990
|
+
'util_displayHiddenVisually': this.labelHidden,
|
|
7991
|
+
[this.labelFontClass]: true,
|
|
7261
7992
|
};
|
|
7262
7993
|
}
|
|
7263
7994
|
|
|
7264
7995
|
/**
|
|
7265
7996
|
* Returns classmap configuration for html5 inputs in all layouts.
|
|
7266
7997
|
* @private
|
|
7267
|
-
* @returns {
|
|
7998
|
+
* @returns {Record<string, boolean>} - Returns classmap.
|
|
7268
7999
|
*/
|
|
7269
8000
|
get commonInputClasses() {
|
|
7270
8001
|
return {
|
|
7271
|
-
'util_displayHiddenVisually': this.
|
|
8002
|
+
'util_displayHiddenVisually': this.inputHidden,
|
|
8003
|
+
[this.inputFontClass]: true,
|
|
7272
8004
|
};
|
|
7273
8005
|
}
|
|
7274
8006
|
|
|
@@ -7279,8 +8011,7 @@ class AuroInput extends BaseInput {
|
|
|
7279
8011
|
*/
|
|
7280
8012
|
get legacyInputClasses() {
|
|
7281
8013
|
return {
|
|
7282
|
-
...this.commonInputClasses
|
|
7283
|
-
'util_displayHiddenVisually': !this.hasFocus && !this.value
|
|
8014
|
+
...this.commonInputClasses
|
|
7284
8015
|
};
|
|
7285
8016
|
}
|
|
7286
8017
|
|
|
@@ -7292,7 +8023,8 @@ class AuroInput extends BaseInput {
|
|
|
7292
8023
|
get commonWrapperClasses() {
|
|
7293
8024
|
return {
|
|
7294
8025
|
'wrapper': true,
|
|
7295
|
-
'
|
|
8026
|
+
'simple': this.simple,
|
|
8027
|
+
'withValue': this.hasValue,
|
|
7296
8028
|
'hasFocus': this.hasFocus
|
|
7297
8029
|
};
|
|
7298
8030
|
}
|
|
@@ -7319,7 +8051,7 @@ class AuroInput extends BaseInput {
|
|
|
7319
8051
|
*
|
|
7320
8052
|
*/
|
|
7321
8053
|
static register(name = "auro-input") {
|
|
7322
|
-
AuroLibraryRuntimeUtils$
|
|
8054
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroInput);
|
|
7323
8055
|
}
|
|
7324
8056
|
|
|
7325
8057
|
/**
|
|
@@ -7341,7 +8073,12 @@ class AuroInput extends BaseInput {
|
|
|
7341
8073
|
* @returns {void}
|
|
7342
8074
|
*/
|
|
7343
8075
|
checkDisplayValueSlotChange() {
|
|
7344
|
-
|
|
8076
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
8077
|
+
|
|
8078
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
8079
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
8080
|
+
nodes = nodes[0].assignedNodes();
|
|
8081
|
+
}
|
|
7345
8082
|
|
|
7346
8083
|
let hasContent = false;
|
|
7347
8084
|
|
|
@@ -7383,7 +8120,7 @@ class AuroInput extends BaseInput {
|
|
|
7383
8120
|
'displayValue': true,
|
|
7384
8121
|
'hasContent': this.hasDisplayValueContent,
|
|
7385
8122
|
'hasFocus': this.hasFocus,
|
|
7386
|
-
'withValue': this.
|
|
8123
|
+
'withValue': this.hasValue,
|
|
7387
8124
|
};
|
|
7388
8125
|
|
|
7389
8126
|
// Remove this when the classic layout is sunset.
|
|
@@ -7392,28 +8129,34 @@ class AuroInput extends BaseInput {
|
|
|
7392
8129
|
: this.commonInputClasses;
|
|
7393
8130
|
|
|
7394
8131
|
return u$2`
|
|
7395
|
-
<label for=${this.
|
|
8132
|
+
<label for=${this.inputId} class="${e(this.commonLabelClasses)}" part="label">
|
|
7396
8133
|
<slot name="label">
|
|
7397
8134
|
${this.label}
|
|
7398
8135
|
</slot>
|
|
8136
|
+
${this.required ? undefined : u$2`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7399
8137
|
</label>
|
|
8138
|
+
|
|
8139
|
+
<!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
|
|
7400
8140
|
<input
|
|
7401
8141
|
@blur="${this.handleBlur}"
|
|
7402
8142
|
@focusin="${this.handleFocusin}"
|
|
7403
8143
|
@focusout="${this.handleFocusout}"
|
|
7404
8144
|
@input="${this.handleInput}"
|
|
8145
|
+
.placeholder=${this.placeholderStr}
|
|
8146
|
+
.role=${this.a11yRole}
|
|
7405
8147
|
?activeLabel="${this.activeLabel}"
|
|
7406
8148
|
?disabled="${this.disabled}"
|
|
7407
8149
|
?required="${this.required}"
|
|
7408
|
-
|
|
8150
|
+
aria-controls=${o(this.a11yControls)}
|
|
7409
8151
|
aria-describedby="${this.uniqueId}"
|
|
8152
|
+
aria-expanded=${o(this.a11yExpanded)}
|
|
7410
8153
|
aria-invalid="${this.validity !== 'valid'}"
|
|
7411
|
-
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7412
8154
|
autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
|
|
8155
|
+
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7413
8156
|
autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
|
|
7414
8157
|
class="${e(inputOverrideClasses)}"
|
|
7415
8158
|
id="${this.inputId}"
|
|
7416
|
-
|
|
8159
|
+
inputmode="${o(this.inputmode ? this.inputmode : undefined)}"
|
|
7417
8160
|
lang="${o(this.lang)}"
|
|
7418
8161
|
maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
|
|
7419
8162
|
minlength="${o(this.minLength ? this.minLength : undefined)}"
|
|
@@ -7421,7 +8164,8 @@ class AuroInput extends BaseInput {
|
|
|
7421
8164
|
part="input"
|
|
7422
8165
|
pattern="${o(this.definePattern())}"
|
|
7423
8166
|
spellcheck="${o(this.spellcheck ? this.spellcheck : undefined)}"
|
|
7424
|
-
type="${this.type ===
|
|
8167
|
+
type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
|
|
8168
|
+
/>
|
|
7425
8169
|
<div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
|
|
7426
8170
|
<div class="displayValueWrapper">
|
|
7427
8171
|
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
|
|
@@ -7441,13 +8185,15 @@ class AuroInput extends BaseInput {
|
|
|
7441
8185
|
<${this.buttonTag}
|
|
7442
8186
|
@click="${this.handleClickClear}"
|
|
7443
8187
|
?onDark="${this.onDark}"
|
|
7444
|
-
aria-label="${i18n(this.lang, 'clearInput')}"
|
|
7445
8188
|
class="notificationBtn clearBtn"
|
|
7446
|
-
|
|
7447
|
-
|
|
8189
|
+
shape="circle"
|
|
8190
|
+
size="sm"
|
|
8191
|
+
variant="ghost">
|
|
8192
|
+
<span><slot name="ariaLabel.clear">Clear Input</slot></span>
|
|
7448
8193
|
<${this.iconTag}
|
|
8194
|
+
aria-hidden="true"
|
|
8195
|
+
?customColor="${this.onDark}"
|
|
7449
8196
|
category="interface"
|
|
7450
|
-
customColor
|
|
7451
8197
|
name="x-lg"
|
|
7452
8198
|
>
|
|
7453
8199
|
</${this.iconTag}>
|
|
@@ -7465,22 +8211,28 @@ class AuroInput extends BaseInput {
|
|
|
7465
8211
|
return u$2`
|
|
7466
8212
|
<div class="notification">
|
|
7467
8213
|
<${this.buttonTag}
|
|
7468
|
-
@click="${this.handleClickShowPassword}
|
|
8214
|
+
@click="${this.handleClickShowPassword}"
|
|
7469
8215
|
?onDark="${this.onDark}"
|
|
7470
|
-
aria-hidden="true"
|
|
7471
8216
|
class="notificationBtn passwordBtn"
|
|
7472
|
-
|
|
7473
|
-
|
|
8217
|
+
shape="circle"
|
|
8218
|
+
size="sm"
|
|
8219
|
+
variant="ghost">
|
|
8220
|
+
<span>
|
|
8221
|
+
${this.showPassword ? u$2`<slot name="ariaLabel.password.hide">Hide Password</slot>`
|
|
8222
|
+
: u$2`<slot name="ariaLabel.password.show">Show Password</slot>`}
|
|
8223
|
+
</span>
|
|
7474
8224
|
<${this.iconTag}
|
|
8225
|
+
?customColor="${this.onDark}"
|
|
8226
|
+
aria-hidden="true"
|
|
7475
8227
|
?hidden=${!this.showPassword}
|
|
7476
8228
|
category="interface"
|
|
7477
|
-
customColor
|
|
7478
8229
|
name="hide-password-stroke">
|
|
7479
8230
|
</${this.iconTag}>
|
|
7480
8231
|
<${this.iconTag}
|
|
8232
|
+
?customColor="${this.onDark}"
|
|
8233
|
+
aria-hidden="true"
|
|
7481
8234
|
?hidden=${this.showPassword}
|
|
7482
8235
|
category="interface"
|
|
7483
|
-
customColor
|
|
7484
8236
|
name="view-password-stroke">
|
|
7485
8237
|
</${this.iconTag}>
|
|
7486
8238
|
</${this.buttonTag}>
|
|
@@ -7539,7 +8291,7 @@ class AuroInput extends BaseInput {
|
|
|
7539
8291
|
? u$2`
|
|
7540
8292
|
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
7541
8293
|
<p id="${this.uniqueId}" part="helpText">
|
|
7542
|
-
<slot name="
|
|
8294
|
+
<slot name="helpText">${this.getHelpText()}</slot>
|
|
7543
8295
|
</p>
|
|
7544
8296
|
</${this.helpTextTag}>
|
|
7545
8297
|
`
|
|
@@ -7560,19 +8312,25 @@ class AuroInput extends BaseInput {
|
|
|
7560
8312
|
* @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
|
|
7561
8313
|
*/
|
|
7562
8314
|
renderLayoutClassic() {
|
|
8315
|
+
const classicClassMap = {
|
|
8316
|
+
...this.commonWrapperClasses,
|
|
8317
|
+
'thin': !this.simple
|
|
8318
|
+
};
|
|
8319
|
+
|
|
7563
8320
|
return u$2`
|
|
7564
8321
|
<div
|
|
7565
8322
|
@click="${this.handleClick}"
|
|
7566
|
-
class="${e(
|
|
8323
|
+
class="${e(classicClassMap)}"
|
|
7567
8324
|
part="wrapper">
|
|
7568
|
-
<div class="accents left">
|
|
8325
|
+
<div part="accent-left" class="accents left">
|
|
7569
8326
|
${this.renderHtmlTypeIcon()}
|
|
7570
8327
|
</div>
|
|
7571
8328
|
<div class="mainContent">
|
|
7572
8329
|
${this.renderHtmlInput(true)}
|
|
7573
8330
|
</div>
|
|
7574
|
-
<div class="accents right">
|
|
8331
|
+
<div part="accent-right" class="accents right">
|
|
7575
8332
|
${this.renderValidationErrorIconHtml()}
|
|
8333
|
+
${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
|
|
7576
8334
|
${this.hasValue ? u$2`
|
|
7577
8335
|
${!this.disabled && !this.readonly ? u$2`
|
|
7578
8336
|
${this.renderHtmlActionClear()}
|