@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
|
@@ -101,7 +101,7 @@ const t$3=globalThis,e$4=t$3.ShadowRoot&&(void 0===t$3.ShadyCSS||t$3.ShadyCSS.na
|
|
|
101
101
|
* @license
|
|
102
102
|
* Copyright 2017 Google LLC
|
|
103
103
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
104
|
-
*/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
|
|
104
|
+
*/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");
|
|
105
105
|
|
|
106
106
|
/**
|
|
107
107
|
* @license
|
|
@@ -116,25 +116,25 @@ const t$2=globalThis,i$3=t$2.trustedTypes,s$3=i$3?i$3.createPolicy("lit-html",{c
|
|
|
116
116
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
117
117
|
*/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");
|
|
118
118
|
|
|
119
|
-
var shapeSizeCss = i$5`.wrapper{overflow:hidden}.shape-classic-xl,.shape-classic-lg,.shape-classic-md,.shape-classic-sm,.shape-classic-xs{min-height:
|
|
119
|
+
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}`;
|
|
120
120
|
|
|
121
|
-
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}`;
|
|
121
|
+
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}`;
|
|
122
122
|
|
|
123
|
-
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}
|
|
123
|
+
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}`;
|
|
124
124
|
|
|
125
|
-
var colorBaseCss = i$5`.wrapper{border-color:var(--ds-auro-input-border-color);background-color:var(--ds-auro-input-
|
|
125
|
+
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)}`;
|
|
126
126
|
|
|
127
|
-
var tokensCss$4 = i$5`:host(:not([ondark])){--ds-auro-input-border-color: var(--ds-basic-color-border-bold, #585e67);--ds-auro-input-
|
|
127
|
+
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}`;
|
|
128
128
|
|
|
129
|
-
var classicStyleCss = i$5
|
|
129
|
+
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}`;
|
|
130
130
|
|
|
131
|
-
var classicColorCss = i$5`.layout-classic label{color:var(--ds-auro-input-label-text-color)}.layout-classic:focus-within{--ds-auro-input-
|
|
131
|
+
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)}`;
|
|
132
132
|
|
|
133
|
-
var emphasizedStyleCss = i$5`:host
|
|
133
|
+
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)}`;
|
|
134
134
|
|
|
135
135
|
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)}`;
|
|
136
136
|
|
|
137
|
-
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}`;
|
|
137
|
+
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}`;
|
|
138
138
|
|
|
139
139
|
/**
|
|
140
140
|
* @license
|
|
@@ -236,6 +236,8 @@ const stringsES = {
|
|
|
236
236
|
'dateMM': 'Ingrese una fecha completa en el formato MM',
|
|
237
237
|
'dateDD': 'Ingrese una fecha completa en el formato DD',
|
|
238
238
|
'clearInput': 'Borrar campo de entrada',
|
|
239
|
+
'showPassword': 'Mostrar contraseña',
|
|
240
|
+
'hidePassword': 'Ocultar contraseña'
|
|
239
241
|
};
|
|
240
242
|
|
|
241
243
|
const stringsEN = {
|
|
@@ -260,6 +262,8 @@ const stringsEN = {
|
|
|
260
262
|
'dateMM': 'Please enter a complete date in the format MM',
|
|
261
263
|
'dateDD': 'Please enter a complete date in the format DD',
|
|
262
264
|
'clearInput': 'Clear input field',
|
|
265
|
+
'showPassword': 'Show password',
|
|
266
|
+
'hidePassword': 'Hide password'
|
|
263
267
|
};
|
|
264
268
|
|
|
265
269
|
/**
|
|
@@ -4554,7 +4558,7 @@ const {
|
|
|
4554
4558
|
|
|
4555
4559
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
4556
4560
|
|
|
4557
|
-
let AuroLibraryRuntimeUtils$
|
|
4561
|
+
let AuroLibraryRuntimeUtils$3 = class AuroLibraryRuntimeUtils {
|
|
4558
4562
|
|
|
4559
4563
|
/* eslint-disable jsdoc/require-param */
|
|
4560
4564
|
|
|
@@ -4624,7 +4628,7 @@ let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
|
4624
4628
|
class AuroFormValidation {
|
|
4625
4629
|
|
|
4626
4630
|
constructor() {
|
|
4627
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
4631
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$3();
|
|
4628
4632
|
}
|
|
4629
4633
|
|
|
4630
4634
|
/**
|
|
@@ -4684,19 +4688,19 @@ class AuroFormValidation {
|
|
|
4684
4688
|
{
|
|
4685
4689
|
check: (e) => e.value?.length > 0 && e.value?.length < e.minLength,
|
|
4686
4690
|
validity: 'tooShort',
|
|
4687
|
-
message: e => e.setCustomValidityTooShort || e.setCustomValidity || ''
|
|
4691
|
+
message: e => e.getAttribute('setCustomValidityTooShort') || e.setCustomValidity || ''
|
|
4688
4692
|
},
|
|
4689
4693
|
{
|
|
4690
4694
|
check: (e) => e.value?.length > e.maxLength,
|
|
4691
4695
|
validity: 'tooLong',
|
|
4692
|
-
message: e => e.setCustomValidityTooLong || e.setCustomValidity || ''
|
|
4696
|
+
message: e => e.getAttribute('setCustomValidityTooLong') || e.setCustomValidity || ''
|
|
4693
4697
|
}
|
|
4694
4698
|
],
|
|
4695
4699
|
pattern: [
|
|
4696
4700
|
{
|
|
4697
4701
|
check: (e) => e.pattern && !new RegExp(`^${e.pattern}$`, 'u').test(e.value),
|
|
4698
4702
|
validity: 'patternMismatch',
|
|
4699
|
-
message: e => e.setCustomValidityPatternMismatch || e.setCustomValidity || ''
|
|
4703
|
+
message: e => e.getAttribute('setCustomValidityPatternMismatch') || e.setCustomValidity || ''
|
|
4700
4704
|
}
|
|
4701
4705
|
]
|
|
4702
4706
|
},
|
|
@@ -4843,13 +4847,24 @@ class AuroFormValidation {
|
|
|
4843
4847
|
this.getInputElements(elem);
|
|
4844
4848
|
this.getAuroInputs(elem);
|
|
4845
4849
|
|
|
4846
|
-
//
|
|
4850
|
+
// Check if validation should run
|
|
4847
4851
|
let validationShouldRun =
|
|
4852
|
+
|
|
4853
|
+
// If the validation was forced
|
|
4848
4854
|
force ||
|
|
4849
|
-
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
|
|
4855
|
+
|
|
4856
|
+
// If the validation should run on input
|
|
4857
|
+
elem.validateOnInput ||
|
|
4858
|
+
|
|
4859
|
+
// State-based checks
|
|
4860
|
+
(
|
|
4861
|
+
// Element is not currently focused
|
|
4862
|
+
!elem.contains(document.activeElement) && // native input is not focused directly
|
|
4863
|
+
!document.activeElement.shadowRoot?.contains(elem) && // native input is not focused in the shadow DOM of another component
|
|
4864
|
+
|
|
4865
|
+
// And element has been touched or is untouched but has a value
|
|
4866
|
+
( elem.touched || (!elem.touched && typeof elem.value !== "undefined") )
|
|
4867
|
+
);
|
|
4853
4868
|
|
|
4854
4869
|
if (elem.hasAttribute('error')) {
|
|
4855
4870
|
elem.validity = 'customError';
|
|
@@ -4891,10 +4906,10 @@ class AuroFormValidation {
|
|
|
4891
4906
|
if (!hasValue && elem.required && elem.touched) {
|
|
4892
4907
|
elem.validity = 'valueMissing';
|
|
4893
4908
|
elem.errorMessage = elem.setCustomValidityValueMissing || elem.setCustomValidity || '';
|
|
4894
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
4909
|
+
} else if (hasValue && this.runtimeUtils.elementMatch(elem, 'auro-input')) {
|
|
4895
4910
|
this.validateType(elem);
|
|
4896
4911
|
this.validateElementAttributes(elem);
|
|
4897
|
-
} else if (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group')) {
|
|
4912
|
+
} else if (hasValue && (this.runtimeUtils.elementMatch(elem, 'auro-counter') || this.runtimeUtils.elementMatch(elem, 'auro-counter-group'))) {
|
|
4898
4913
|
this.validateElementAttributes(elem);
|
|
4899
4914
|
}
|
|
4900
4915
|
}
|
|
@@ -4903,7 +4918,9 @@ class AuroFormValidation {
|
|
|
4903
4918
|
elem.validity = this.auroInputElements[0].validity;
|
|
4904
4919
|
elem.errorMessage = this.auroInputElements[0].errorMessage;
|
|
4905
4920
|
|
|
4906
|
-
|
|
4921
|
+
// multiple input in one components (datepicker)
|
|
4922
|
+
// combobox has 2 inputs but no need to check validity on the 2nd one which is in fullscreen bib.
|
|
4923
|
+
if (elem.validity === 'valid' && this.auroInputElements.length > 1 && !this.runtimeUtils.elementMatch(elem, 'auro-combobox')) {
|
|
4907
4924
|
elem.validity = this.auroInputElements[1].validity;
|
|
4908
4925
|
elem.errorMessage = this.auroInputElements[1].errorMessage;
|
|
4909
4926
|
}
|
|
@@ -4983,7 +5000,7 @@ class AuroFormValidation {
|
|
|
4983
5000
|
}
|
|
4984
5001
|
}
|
|
4985
5002
|
|
|
4986
|
-
let AuroElement$
|
|
5003
|
+
let AuroElement$2 = class AuroElement extends i$2 {
|
|
4987
5004
|
static get properties() {
|
|
4988
5005
|
return {
|
|
4989
5006
|
|
|
@@ -5018,19 +5035,22 @@ let AuroElement$1 = class AuroElement extends i$2 {
|
|
|
5018
5035
|
}
|
|
5019
5036
|
|
|
5020
5037
|
resetShapeClasses() {
|
|
5021
|
-
|
|
5022
|
-
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
5038
|
+
const wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
5023
5039
|
|
|
5024
|
-
|
|
5025
|
-
|
|
5026
|
-
|
|
5027
|
-
|
|
5028
|
-
|
|
5029
|
-
|
|
5040
|
+
if (wrapper) {
|
|
5041
|
+
wrapper.classList.forEach((className) => {
|
|
5042
|
+
if (className.startsWith('shape-')) {
|
|
5043
|
+
wrapper.classList.remove(className);
|
|
5044
|
+
}
|
|
5045
|
+
});
|
|
5030
5046
|
|
|
5047
|
+
if (this.shape && this.size) {
|
|
5031
5048
|
wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
5049
|
+
} else {
|
|
5050
|
+
wrapper.classList.add('shape-none');
|
|
5032
5051
|
}
|
|
5033
5052
|
}
|
|
5053
|
+
|
|
5034
5054
|
}
|
|
5035
5055
|
|
|
5036
5056
|
resetLayoutClasses() {
|
|
@@ -5085,19 +5105,27 @@ let AuroElement$1 = class AuroElement extends i$2 {
|
|
|
5085
5105
|
* @prop {string} id - The id global attribute defines an identifier (ID) which must be unique in the whole document.
|
|
5086
5106
|
* @attr id
|
|
5087
5107
|
*
|
|
5088
|
-
* @slot
|
|
5108
|
+
* @slot ariaLabel.clear - Sets aria-label on clear button for screenreader to read
|
|
5109
|
+
* @slot ariaLabel.password.show - Sets aria-label on password button to toggle on showing password
|
|
5110
|
+
* @slot ariaLabel.password.hide - Sets aria-label on password button to toggle off showing password
|
|
5111
|
+
* @slot helpText - Sets the help text displayed below the input.
|
|
5089
5112
|
* @slot label - Sets the label text for the input.
|
|
5113
|
+
* @slot {HTMLSlotElement} optionalLabel - Allows overriding the optional display text "(optional)", which appears next to the label.
|
|
5114
|
+
* @slot displayValue - Allows custom HTML content to display in place of the value when the input is not focused.
|
|
5090
5115
|
*
|
|
5091
5116
|
* @csspart wrapper - Use for customizing the style of the root element
|
|
5092
5117
|
* @csspart label - Use for customizing the style of the label element
|
|
5093
5118
|
* @csspart helpText - Use for customizing the style of the helpText element
|
|
5119
|
+
* @csspart input - Use for customizing the style of the input element
|
|
5094
5120
|
* @csspart accentIcon - Use for customizing the style of the accentIcon element (e.g. credit card icon, calendar icon)
|
|
5095
5121
|
* @csspart iconContainer - Use for customizing the style of the iconContainer (e.g. X icon for clearing input value)
|
|
5122
|
+
* @csspart accent-left - Use for customizing the style of the left accent element (e.g. padding, margin)
|
|
5123
|
+
* @csspart accent-right - Use for customizing the style of the right accent element (e.g. padding, margin)
|
|
5096
5124
|
* @event input - Event fires when the value of an `auro-input` has been changed.
|
|
5097
5125
|
* @event auroFormElement-validated - Notifies that the `validity` and `errorMessage` value has changed.
|
|
5098
5126
|
*/
|
|
5099
5127
|
|
|
5100
|
-
class BaseInput extends AuroElement$
|
|
5128
|
+
class BaseInput extends AuroElement$2 {
|
|
5101
5129
|
|
|
5102
5130
|
constructor() {
|
|
5103
5131
|
super();
|
|
@@ -5114,9 +5142,22 @@ class BaseInput extends AuroElement$1 {
|
|
|
5114
5142
|
this.required = false;
|
|
5115
5143
|
this.setCustomValidityForType = undefined;
|
|
5116
5144
|
|
|
5145
|
+
/**
|
|
5146
|
+
* @private
|
|
5147
|
+
*/
|
|
5117
5148
|
this.layout = 'classic';
|
|
5149
|
+
|
|
5150
|
+
/**
|
|
5151
|
+
* @private
|
|
5152
|
+
*/
|
|
5118
5153
|
this.shape = 'classic';
|
|
5154
|
+
|
|
5155
|
+
/**
|
|
5156
|
+
* @private
|
|
5157
|
+
*/
|
|
5119
5158
|
this.size = 'lg';
|
|
5159
|
+
|
|
5160
|
+
this.privateDefaults();
|
|
5120
5161
|
}
|
|
5121
5162
|
|
|
5122
5163
|
/**
|
|
@@ -5190,7 +5231,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5190
5231
|
*/
|
|
5191
5232
|
a11yRole: {
|
|
5192
5233
|
type: String,
|
|
5193
|
-
attribute: true,
|
|
5194
5234
|
reflect: true
|
|
5195
5235
|
},
|
|
5196
5236
|
|
|
@@ -5199,7 +5239,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5199
5239
|
*/
|
|
5200
5240
|
a11yExpanded: {
|
|
5201
5241
|
type: Boolean,
|
|
5202
|
-
attribute: true,
|
|
5203
5242
|
reflect: true
|
|
5204
5243
|
},
|
|
5205
5244
|
|
|
@@ -5208,7 +5247,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5208
5247
|
*/
|
|
5209
5248
|
a11yControls: {
|
|
5210
5249
|
type: String,
|
|
5211
|
-
attribute: true,
|
|
5212
5250
|
reflect: true
|
|
5213
5251
|
},
|
|
5214
5252
|
|
|
@@ -5224,7 +5262,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5224
5262
|
* 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].
|
|
5225
5263
|
*/
|
|
5226
5264
|
autocapitalize: {
|
|
5227
|
-
type: String
|
|
5265
|
+
type: String,
|
|
5266
|
+
reflect: true
|
|
5228
5267
|
},
|
|
5229
5268
|
|
|
5230
5269
|
/**
|
|
@@ -5239,7 +5278,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5239
5278
|
* When set to `off`, stops iOS from auto-correcting words when typed into a text box.
|
|
5240
5279
|
*/
|
|
5241
5280
|
autocorrect: {
|
|
5242
|
-
type: String
|
|
5281
|
+
type: String,
|
|
5282
|
+
reflect: true
|
|
5243
5283
|
},
|
|
5244
5284
|
|
|
5245
5285
|
/**
|
|
@@ -5284,7 +5324,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5284
5324
|
/** Exposes inputmode attribute for input. */
|
|
5285
5325
|
inputmode: {
|
|
5286
5326
|
type: String,
|
|
5287
|
-
attribute: true,
|
|
5288
5327
|
reflect: true
|
|
5289
5328
|
},
|
|
5290
5329
|
|
|
@@ -5292,7 +5331,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5292
5331
|
* Defines the language of an element.
|
|
5293
5332
|
*/
|
|
5294
5333
|
lang: {
|
|
5295
|
-
type: String
|
|
5334
|
+
type: String,
|
|
5335
|
+
reflect: true
|
|
5296
5336
|
},
|
|
5297
5337
|
|
|
5298
5338
|
/**
|
|
@@ -5306,7 +5346,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5306
5346
|
* The maximum number of characters the user can enter into the text input. This must be an integer value `0` or higher.
|
|
5307
5347
|
*/
|
|
5308
5348
|
maxLength: {
|
|
5309
|
-
type: Number
|
|
5349
|
+
type: Number,
|
|
5350
|
+
reflect: true
|
|
5310
5351
|
},
|
|
5311
5352
|
|
|
5312
5353
|
/**
|
|
@@ -5320,14 +5361,25 @@ class BaseInput extends AuroElement$1 {
|
|
|
5320
5361
|
* 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`.
|
|
5321
5362
|
*/
|
|
5322
5363
|
minLength: {
|
|
5323
|
-
type: Number
|
|
5364
|
+
type: Number,
|
|
5365
|
+
reflect: true
|
|
5324
5366
|
},
|
|
5325
5367
|
|
|
5326
5368
|
/**
|
|
5327
5369
|
* Populates the `name` attribute on the input.
|
|
5328
5370
|
*/
|
|
5329
5371
|
name: {
|
|
5330
|
-
type: String
|
|
5372
|
+
type: String,
|
|
5373
|
+
reflect: true
|
|
5374
|
+
},
|
|
5375
|
+
|
|
5376
|
+
/**
|
|
5377
|
+
* Sets styles for nested operation - removes borders, hides help + error text, and
|
|
5378
|
+
* hides accents.
|
|
5379
|
+
*/
|
|
5380
|
+
nested: {
|
|
5381
|
+
type: Boolean,
|
|
5382
|
+
reflect: true
|
|
5331
5383
|
},
|
|
5332
5384
|
|
|
5333
5385
|
/**
|
|
@@ -5355,10 +5407,11 @@ class BaseInput extends AuroElement$1 {
|
|
|
5355
5407
|
},
|
|
5356
5408
|
|
|
5357
5409
|
/**
|
|
5358
|
-
* Define custom placeholder text
|
|
5410
|
+
* Define custom placeholder text.
|
|
5359
5411
|
*/
|
|
5360
5412
|
placeholder: {
|
|
5361
|
-
type: String
|
|
5413
|
+
type: String,
|
|
5414
|
+
reflect: true
|
|
5362
5415
|
},
|
|
5363
5416
|
|
|
5364
5417
|
/**
|
|
@@ -5447,6 +5500,14 @@ class BaseInput extends AuroElement$1 {
|
|
|
5447
5500
|
type: String
|
|
5448
5501
|
},
|
|
5449
5502
|
|
|
5503
|
+
/**
|
|
5504
|
+
* Simple makes the input render without a border.
|
|
5505
|
+
*/
|
|
5506
|
+
simple: {
|
|
5507
|
+
type: Boolean,
|
|
5508
|
+
reflect: true
|
|
5509
|
+
},
|
|
5510
|
+
|
|
5450
5511
|
/**
|
|
5451
5512
|
* Custom help text message for email type validity.
|
|
5452
5513
|
*/
|
|
@@ -5458,7 +5519,8 @@ class BaseInput extends AuroElement$1 {
|
|
|
5458
5519
|
* 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`.
|
|
5459
5520
|
*/
|
|
5460
5521
|
spellcheck: {
|
|
5461
|
-
type: String
|
|
5522
|
+
type: String,
|
|
5523
|
+
reflect: true
|
|
5462
5524
|
},
|
|
5463
5525
|
|
|
5464
5526
|
/**
|
|
@@ -5518,8 +5580,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5518
5580
|
connectedCallback() {
|
|
5519
5581
|
super.connectedCallback();
|
|
5520
5582
|
|
|
5521
|
-
this.privateDefaults();
|
|
5522
|
-
|
|
5523
5583
|
notifyOnLangChange(this);
|
|
5524
5584
|
}
|
|
5525
5585
|
|
|
@@ -5529,7 +5589,7 @@ class BaseInput extends AuroElement$1 {
|
|
|
5529
5589
|
}
|
|
5530
5590
|
|
|
5531
5591
|
firstUpdated() {
|
|
5532
|
-
// clicking anywhere in the main wrapper will focus the input. Clicking the
|
|
5592
|
+
// clicking anywhere in the main wrapper will focus the input. Clicking the helpText or label will not focus the input.
|
|
5533
5593
|
this.wrapperElement = this.shadowRoot.querySelector('.wrapper');
|
|
5534
5594
|
this.inputElement = this.renderRoot.querySelector('input');
|
|
5535
5595
|
this.labelElement = this.shadowRoot.querySelector('label');
|
|
@@ -5641,9 +5701,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5641
5701
|
if (!this.shadowRoot.contains(this.getActiveElement())) {
|
|
5642
5702
|
this.validation.validate(this);
|
|
5643
5703
|
}
|
|
5644
|
-
|
|
5645
|
-
this.notifyValueChanged();
|
|
5646
5704
|
}
|
|
5705
|
+
|
|
5706
|
+
this.notifyValueChanged();
|
|
5647
5707
|
}
|
|
5648
5708
|
|
|
5649
5709
|
if (changedProperties.has('error')) {
|
|
@@ -5753,7 +5813,6 @@ class BaseInput extends AuroElement$1 {
|
|
|
5753
5813
|
|
|
5754
5814
|
/**
|
|
5755
5815
|
* Function to set element focus.
|
|
5756
|
-
* @private
|
|
5757
5816
|
* @return {void}
|
|
5758
5817
|
*/
|
|
5759
5818
|
focus() {
|
|
@@ -5769,9 +5828,9 @@ class BaseInput extends AuroElement$1 {
|
|
|
5769
5828
|
this.inputElement.value = "";
|
|
5770
5829
|
this.value = "";
|
|
5771
5830
|
this.labelElement.classList.remove('inputElement-label--sticky');
|
|
5831
|
+
this.notifyValueChanged();
|
|
5772
5832
|
this.focus();
|
|
5773
5833
|
this.validation.validate(this);
|
|
5774
|
-
this.notifyValueChanged();
|
|
5775
5834
|
}
|
|
5776
5835
|
|
|
5777
5836
|
/**
|
|
@@ -5866,13 +5925,21 @@ class BaseInput extends AuroElement$1 {
|
|
|
5866
5925
|
}
|
|
5867
5926
|
|
|
5868
5927
|
/**
|
|
5869
|
-
* Resets component to initial state.
|
|
5928
|
+
* Resets component to initial state, including resetting the touched state and validity.
|
|
5870
5929
|
* @returns {void}
|
|
5871
5930
|
*/
|
|
5872
5931
|
reset() {
|
|
5932
|
+
this.value = undefined;
|
|
5873
5933
|
this.validation.reset(this);
|
|
5874
5934
|
}
|
|
5875
5935
|
|
|
5936
|
+
/**
|
|
5937
|
+
* Clears the input value.
|
|
5938
|
+
*/
|
|
5939
|
+
clear() {
|
|
5940
|
+
this.value = undefined;
|
|
5941
|
+
}
|
|
5942
|
+
|
|
5876
5943
|
/**
|
|
5877
5944
|
* Sets configuration data used elsewhere based on the `type` attribute.
|
|
5878
5945
|
* @private
|
|
@@ -5951,28 +6018,15 @@ class BaseInput extends AuroElement$1 {
|
|
|
5951
6018
|
* @returns {void}
|
|
5952
6019
|
*/
|
|
5953
6020
|
getPlaceholder() {
|
|
5954
|
-
|
|
5955
|
-
|
|
5956
|
-
|
|
5957
|
-
|
|
5958
|
-
// console.warn(this.getActiveElement());
|
|
5959
|
-
|
|
5960
|
-
if (!isFocused) {
|
|
5961
|
-
if (this.placeholder) {
|
|
5962
|
-
this.placeholderStr = this.placeholder;
|
|
5963
|
-
// return this.placeholder;
|
|
5964
|
-
} else if (this.type === 'date') {
|
|
5965
|
-
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5966
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5967
|
-
}
|
|
5968
|
-
} else {
|
|
5969
|
-
this.placeholderStr = '';
|
|
6021
|
+
if (this.placeholder) {
|
|
6022
|
+
this.placeholderStr = this.placeholder;
|
|
6023
|
+
} else if (this.type === 'date') {
|
|
6024
|
+
this.placeholderStr = this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
5970
6025
|
}
|
|
5971
6026
|
|
|
5972
6027
|
this.requestUpdate();
|
|
5973
6028
|
|
|
5974
|
-
|
|
5975
|
-
// return this.format ? this.format.toUpperCase() : 'MM/DD/YYYY';
|
|
6029
|
+
return this.placeholderStr;
|
|
5976
6030
|
}
|
|
5977
6031
|
|
|
5978
6032
|
/**
|
|
@@ -6185,7 +6239,7 @@ class AuroDependencyVersioning {
|
|
|
6185
6239
|
* @attr {Boolean} hiddenAudible - If present, the component will be hidden from screen readers, but seen visually
|
|
6186
6240
|
*/
|
|
6187
6241
|
|
|
6188
|
-
class AuroElement extends i$2 {
|
|
6242
|
+
let AuroElement$1 = class AuroElement extends i$2 {
|
|
6189
6243
|
|
|
6190
6244
|
// function to define props used within the scope of this component
|
|
6191
6245
|
static get properties() {
|
|
@@ -6209,7 +6263,7 @@ class AuroElement extends i$2 {
|
|
|
6209
6263
|
|
|
6210
6264
|
return 'false'
|
|
6211
6265
|
}
|
|
6212
|
-
}
|
|
6266
|
+
};
|
|
6213
6267
|
|
|
6214
6268
|
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>"};
|
|
6215
6269
|
|
|
@@ -6253,7 +6307,7 @@ var styleCss$3 = i$5`:focus:not(:focus-visible){outline:3px solid transparent}.u
|
|
|
6253
6307
|
*/
|
|
6254
6308
|
|
|
6255
6309
|
// build the component class
|
|
6256
|
-
class BaseIcon extends AuroElement {
|
|
6310
|
+
class BaseIcon extends AuroElement$1 {
|
|
6257
6311
|
constructor() {
|
|
6258
6312
|
super();
|
|
6259
6313
|
this.onDark = false;
|
|
@@ -6336,7 +6390,7 @@ var colorCss$3 = i$5`:host{color:var(--ds-auro-icon-color)}:host([customColor]){
|
|
|
6336
6390
|
|
|
6337
6391
|
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
6338
6392
|
|
|
6339
|
-
let AuroLibraryRuntimeUtils$
|
|
6393
|
+
let AuroLibraryRuntimeUtils$2 = class AuroLibraryRuntimeUtils {
|
|
6340
6394
|
|
|
6341
6395
|
/* eslint-disable jsdoc/require-param */
|
|
6342
6396
|
|
|
@@ -6418,7 +6472,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6418
6472
|
*/
|
|
6419
6473
|
privateDefaults() {
|
|
6420
6474
|
this.uri = 'https://cdn.jsdelivr.net/npm/@alaskaairux/icons@latest/dist';
|
|
6421
|
-
this.runtimeUtils = new AuroLibraryRuntimeUtils$
|
|
6475
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$2();
|
|
6422
6476
|
}
|
|
6423
6477
|
|
|
6424
6478
|
// function to define props used within the scope of this component
|
|
@@ -6446,7 +6500,8 @@ class AuroIcon extends BaseIcon {
|
|
|
6446
6500
|
* Allows custom color to be set.
|
|
6447
6501
|
*/
|
|
6448
6502
|
customColor: {
|
|
6449
|
-
type: Boolean
|
|
6503
|
+
type: Boolean,
|
|
6504
|
+
reflect: true
|
|
6450
6505
|
},
|
|
6451
6506
|
|
|
6452
6507
|
/**
|
|
@@ -6500,7 +6555,7 @@ class AuroIcon extends BaseIcon {
|
|
|
6500
6555
|
*
|
|
6501
6556
|
*/
|
|
6502
6557
|
static register(name = "auro-icon") {
|
|
6503
|
-
AuroLibraryRuntimeUtils$
|
|
6558
|
+
AuroLibraryRuntimeUtils$2.prototype.registerComponent(name, AuroIcon);
|
|
6504
6559
|
}
|
|
6505
6560
|
|
|
6506
6561
|
connectedCallback() {
|
|
@@ -6521,8 +6576,12 @@ class AuroIcon extends BaseIcon {
|
|
|
6521
6576
|
async firstUpdated() {
|
|
6522
6577
|
await super.firstUpdated();
|
|
6523
6578
|
|
|
6524
|
-
|
|
6525
|
-
|
|
6579
|
+
/**
|
|
6580
|
+
* icons provide a description for screen readers. Icon only instances Auro-button
|
|
6581
|
+
* depend on this description to provide context for the user using a screen reader.
|
|
6582
|
+
* Removes the SVG description for screen reader if ariaHidden is set to true.
|
|
6583
|
+
*/
|
|
6584
|
+
if (this.hasAttribute('ariaHidden') && this.svg) {
|
|
6526
6585
|
const svgDesc = this.svg.querySelector('desc');
|
|
6527
6586
|
|
|
6528
6587
|
if (svgDesc) {
|
|
@@ -6566,99 +6625,636 @@ class AuroIcon extends BaseIcon {
|
|
|
6566
6625
|
}
|
|
6567
6626
|
}
|
|
6568
6627
|
|
|
6569
|
-
var iconVersion = '8.0.
|
|
6628
|
+
var iconVersion = '8.0.4';
|
|
6570
6629
|
|
|
6571
|
-
|
|
6630
|
+
/**
|
|
6631
|
+
* Private module-level WeakMap to hold MutationObservers for each host element.
|
|
6632
|
+
*/
|
|
6633
|
+
const _observers = new WeakMap();
|
|
6572
6634
|
|
|
6573
|
-
|
|
6635
|
+
/**
|
|
6636
|
+
* Private module-level WeakMap to hold attribute matchers and targets for each host element.
|
|
6637
|
+
* Structure: {
|
|
6638
|
+
* host: {
|
|
6639
|
+
* matchers: Set<Function>,
|
|
6640
|
+
* targets: Map<HTMLElement, Map<Function, {removeOriginal: boolean, currentAttributes: Map<string, string>}>>
|
|
6641
|
+
* }
|
|
6642
|
+
* }
|
|
6643
|
+
*/
|
|
6644
|
+
const _transportConfig = new WeakMap();
|
|
6574
6645
|
|
|
6575
|
-
|
|
6646
|
+
/**
|
|
6647
|
+
* Transfers all matching attributes from a host element to a target element and observes for future changes.
|
|
6648
|
+
*
|
|
6649
|
+
* @param {Object} params - The parameters for the function.
|
|
6650
|
+
* @param {HTMLElement} params.host - The host element from which attributes will be transported.
|
|
6651
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6652
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove the attributes from the host element.
|
|
6653
|
+
* @param {boolean} [params.observe=true] - Whether to attach a MutationObserver to the host element.
|
|
6654
|
+
* @returns {Function} A function to detach the observer when no longer needed.
|
|
6655
|
+
* @throws {TypeError} If the host or target parameters are not instances of HTMLElement.
|
|
6656
|
+
*/
|
|
6657
|
+
const transportAttributes = ({ host, target, match, removeOriginal = true }) => {
|
|
6658
|
+
// Guard Clause: Ensure host is valid HTMLElement instance
|
|
6659
|
+
if (typeof host !== 'object' || !(host instanceof HTMLElement)) {
|
|
6660
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "host" parameter must be an instance of HTMLElement.');
|
|
6661
|
+
}
|
|
6576
6662
|
|
|
6577
|
-
|
|
6663
|
+
// Guard Clause: Ensure target is valid HTMLElement instance
|
|
6664
|
+
if (typeof target !== 'object' || !(target instanceof HTMLElement)) {
|
|
6665
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "target" parameter must be an instance of HTMLElement.');
|
|
6666
|
+
}
|
|
6578
6667
|
|
|
6579
|
-
|
|
6668
|
+
// Guard Clause: Ensure match is a function
|
|
6669
|
+
if (typeof match !== 'function') {
|
|
6670
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "match" parameter must be a function.');
|
|
6671
|
+
}
|
|
6580
6672
|
|
|
6581
|
-
|
|
6673
|
+
// Guard Clause: Ensure removeOriginal is a boolean
|
|
6674
|
+
if (typeof removeOriginal !== 'boolean') {
|
|
6675
|
+
throw new TypeError('a11yUtilities.js | transportAttributes | The "removeOriginal" parameter must be a boolean.');
|
|
6676
|
+
}
|
|
6677
|
+
|
|
6678
|
+
// Register this transport and get cleanup function
|
|
6679
|
+
return _registerTransport({
|
|
6680
|
+
host,
|
|
6681
|
+
target,
|
|
6682
|
+
matcher: match,
|
|
6683
|
+
removeOriginal
|
|
6684
|
+
});
|
|
6685
|
+
};
|
|
6582
6686
|
|
|
6583
|
-
|
|
6584
|
-
|
|
6687
|
+
/**
|
|
6688
|
+
* Registers a matcher and target for a host element and attaches an observer if needed.
|
|
6689
|
+
*
|
|
6690
|
+
* @param {Object} params - The parameters object.
|
|
6691
|
+
* @param {HTMLElement} params.host - The host element to observe.
|
|
6692
|
+
* @param {HTMLElement} params.target - The target element to receive attributes.
|
|
6693
|
+
* @param {Function} params.matcher - Function that determines which attributes to transport.
|
|
6694
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes.
|
|
6695
|
+
* @param {boolean} [params.observe=true] - Whether to observe for attribute changes.
|
|
6696
|
+
* @returns {Function} Function to detach the specific matcher and target pairing.
|
|
6697
|
+
* @private
|
|
6698
|
+
*/
|
|
6699
|
+
const _registerTransport = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6700
|
+
// Initialize config for this host if it doesn't exist
|
|
6701
|
+
if (!_transportConfig.has(host)) {
|
|
6702
|
+
_transportConfig.set(host, {
|
|
6703
|
+
matchers: new Set(),
|
|
6704
|
+
targets: new Map()
|
|
6705
|
+
});
|
|
6706
|
+
}
|
|
6585
6707
|
|
|
6708
|
+
const config = _transportConfig.get(host);
|
|
6709
|
+
|
|
6710
|
+
// Add the matcher to the set of matchers for this host
|
|
6711
|
+
config.matchers.add(matcher);
|
|
6712
|
+
|
|
6713
|
+
// Initialize target entry if it doesn't exist
|
|
6714
|
+
if (!config.targets.has(target)) {
|
|
6715
|
+
config.targets.set(target, new Map());
|
|
6716
|
+
}
|
|
6717
|
+
|
|
6718
|
+
// Store the matcher with its removeOriginal setting for this target
|
|
6719
|
+
config.targets.get(target).set(matcher, {
|
|
6720
|
+
removeOriginal,
|
|
6721
|
+
currentAttributes: new Map()
|
|
6722
|
+
});
|
|
6723
|
+
|
|
6724
|
+
// Perform initial attribute transport
|
|
6725
|
+
_transportAttributes({ host, target, matcher, removeOriginal });
|
|
6726
|
+
|
|
6727
|
+
// Attach observer
|
|
6728
|
+
_attachObserver(host);
|
|
6729
|
+
|
|
6730
|
+
// Return cleanup function and utility functions
|
|
6731
|
+
return {
|
|
6732
|
+
cleanup: () => _cleanupTransport(host, target, matcher),
|
|
6733
|
+
getObservedAttributes: () => _getObservedAttributes(host, target, matcher),
|
|
6734
|
+
getObservedAttribute: (attr) => _getObservedAttribute(host, target, matcher, attr),
|
|
6735
|
+
}
|
|
6736
|
+
};
|
|
6586
6737
|
|
|
6587
|
-
|
|
6588
|
-
|
|
6589
|
-
|
|
6738
|
+
/**
|
|
6739
|
+
* Cleans up resources associated with a specific matcher and target for a host element.
|
|
6740
|
+
*
|
|
6741
|
+
* @param {HTMLElement} host - The host element
|
|
6742
|
+
* @param {HTMLElement} target - The target element
|
|
6743
|
+
* @param {Function} matcher - The matcher function
|
|
6744
|
+
* @private
|
|
6745
|
+
*/
|
|
6746
|
+
const _cleanupTransport = (host, target, matcher) => {
|
|
6747
|
+
const config = _transportConfig.get(host);
|
|
6748
|
+
if (!config) return;
|
|
6749
|
+
|
|
6750
|
+
// Remove this matcher from this target
|
|
6751
|
+
const targetMatchers = config.targets.get(target);
|
|
6752
|
+
if (targetMatchers) {
|
|
6753
|
+
targetMatchers.delete(matcher);
|
|
6754
|
+
|
|
6755
|
+
// If this target has no more matchers, remove it
|
|
6756
|
+
if (targetMatchers.size === 0) {
|
|
6757
|
+
config.targets.delete(target);
|
|
6758
|
+
}
|
|
6759
|
+
}
|
|
6760
|
+
|
|
6761
|
+
// Check if this matcher is still used by any target
|
|
6762
|
+
let matcherStillUsed = false;
|
|
6763
|
+
for (const matcherMap of config.targets.values()) {
|
|
6764
|
+
if (matcherMap.has(matcher)) {
|
|
6765
|
+
matcherStillUsed = true;
|
|
6766
|
+
break;
|
|
6767
|
+
}
|
|
6768
|
+
}
|
|
6769
|
+
|
|
6770
|
+
// If not used anymore, remove from matchers set
|
|
6771
|
+
if (!matcherStillUsed) {
|
|
6772
|
+
config.matchers.delete(matcher);
|
|
6773
|
+
}
|
|
6774
|
+
|
|
6775
|
+
// If no more targets or matchers, detach observer
|
|
6776
|
+
if (config.targets.size === 0 || config.matchers.size === 0) {
|
|
6777
|
+
_detachObserver(host);
|
|
6778
|
+
}
|
|
6779
|
+
};
|
|
6590
6780
|
|
|
6591
|
-
|
|
6592
|
-
|
|
6593
|
-
|
|
6594
|
-
|
|
6781
|
+
/**
|
|
6782
|
+
* Generic function to transport attributes from a host element to a target element.
|
|
6783
|
+
*
|
|
6784
|
+
* @param {Object} params - The parameters object.
|
|
6785
|
+
* @param {HTMLElement} params.host - The host element from which to transport attributes.
|
|
6786
|
+
* @param {HTMLElement} params.target - The target element to which attributes will be transported.
|
|
6787
|
+
* @param {Function} params.matcher - Function that takes an attribute name and returns true if it should be transported.
|
|
6788
|
+
* @param {boolean} [params.removeOriginal=true] - Whether to remove original attributes from host.
|
|
6789
|
+
* @returns {void}
|
|
6790
|
+
* @private
|
|
6791
|
+
*/
|
|
6792
|
+
const _transportAttributes = ({ host, target, matcher, removeOriginal = true }) => {
|
|
6793
|
+
// Get a list of all matching attributes on the host element and their values
|
|
6794
|
+
const matchingAttributes = host.getAttributeNames()
|
|
6795
|
+
.filter(attr => matcher(attr))
|
|
6796
|
+
.reduce((acc, attr) => {
|
|
6797
|
+
acc[attr] = host.getAttribute(attr);
|
|
6798
|
+
return acc;
|
|
6799
|
+
}, {});
|
|
6800
|
+
|
|
6801
|
+
// Move matching attributes to the target element, removing them from the host if removeOriginal is true
|
|
6802
|
+
Object.entries(matchingAttributes).forEach(([key, value]) => {
|
|
6803
|
+
_setObservedAttribute(host, target, matcher, key, value);
|
|
6804
|
+
target.setAttribute(key, value);
|
|
6805
|
+
if (removeOriginal) {
|
|
6806
|
+
host.removeAttribute(key);
|
|
6807
|
+
}
|
|
6808
|
+
});
|
|
6809
|
+
};
|
|
6595
6810
|
|
|
6596
|
-
|
|
6597
|
-
|
|
6598
|
-
|
|
6599
|
-
|
|
6811
|
+
/**
|
|
6812
|
+
* Attaches a MutationObserver to the host element to monitor attribute changes.
|
|
6813
|
+
*
|
|
6814
|
+
* @param {HTMLElement} host - The element to observe for attribute changes.
|
|
6815
|
+
* @returns {MutationObserver} The observer instance.
|
|
6816
|
+
* @private
|
|
6817
|
+
*/
|
|
6818
|
+
const _attachObserver = (host) => {
|
|
6819
|
+
// If an observer for this host already exists, return it
|
|
6820
|
+
if (_observers.has(host)) {
|
|
6821
|
+
return _observers.get(host);
|
|
6822
|
+
}
|
|
6823
|
+
|
|
6824
|
+
// Create a new MutationObserver
|
|
6825
|
+
const observer = new MutationObserver((mutations) => {
|
|
6826
|
+
const config = _transportConfig.get(host);
|
|
6827
|
+
if (!config) return;
|
|
6828
|
+
|
|
6829
|
+
// For each mutation affecting attributes
|
|
6830
|
+
mutations
|
|
6831
|
+
.filter(mutation => mutation.type === 'attributes')
|
|
6832
|
+
.forEach(mutation => {
|
|
6833
|
+
const attributeName = mutation.attributeName;
|
|
6834
|
+
|
|
6835
|
+
// Find matchers that care about this attribute
|
|
6836
|
+
for (const matcher of config.matchers) {
|
|
6837
|
+
if (matcher(attributeName)) {
|
|
6838
|
+
// For each target that uses this matcher
|
|
6839
|
+
for (const [target, matcherConfigs] of config.targets.entries()) {
|
|
6840
|
+
if (matcherConfigs.has(matcher)) {
|
|
6841
|
+
const { removeOriginal } = matcherConfigs.get(matcher);
|
|
6842
|
+
_transportAttributes({
|
|
6843
|
+
host,
|
|
6844
|
+
target,
|
|
6845
|
+
matcher,
|
|
6846
|
+
removeOriginal
|
|
6847
|
+
});
|
|
6848
|
+
}
|
|
6849
|
+
}
|
|
6850
|
+
}
|
|
6851
|
+
}
|
|
6852
|
+
});
|
|
6853
|
+
});
|
|
6600
6854
|
|
|
6601
|
-
|
|
6602
|
-
|
|
6603
|
-
|
|
6604
|
-
|
|
6855
|
+
// Start observing attribute changes
|
|
6856
|
+
observer.observe(host, { attributes: true });
|
|
6857
|
+
|
|
6858
|
+
// Store the observer
|
|
6859
|
+
_observers.set(host, observer);
|
|
6860
|
+
|
|
6861
|
+
return observer;
|
|
6862
|
+
};
|
|
6605
6863
|
|
|
6606
|
-
|
|
6607
|
-
|
|
6608
|
-
|
|
6609
|
-
|
|
6864
|
+
/**
|
|
6865
|
+
* Detaches and cleans up the MutationObserver for a given host element.
|
|
6866
|
+
*
|
|
6867
|
+
* @param {HTMLElement} host - The element whose observer should be detached.
|
|
6868
|
+
* @private
|
|
6869
|
+
*/
|
|
6870
|
+
const _detachObserver = (host) => {
|
|
6871
|
+
if (_observers.has(host)) {
|
|
6872
|
+
const observer = _observers.get(host);
|
|
6873
|
+
observer.disconnect();
|
|
6874
|
+
_observers.delete(host);
|
|
6875
|
+
}
|
|
6876
|
+
|
|
6877
|
+
// Clean up the transport config as well
|
|
6878
|
+
if (_transportConfig.has(host)) {
|
|
6879
|
+
_transportConfig.delete(host);
|
|
6880
|
+
}
|
|
6881
|
+
};
|
|
6610
6882
|
|
|
6611
|
-
|
|
6612
|
-
|
|
6613
|
-
|
|
6614
|
-
|
|
6883
|
+
/**
|
|
6884
|
+
* Gets the matcher configuration for a specific host, target, and matcher
|
|
6885
|
+
* @param {HTMLElement} host - The host element
|
|
6886
|
+
* @param {HTMLElement} target - The target element
|
|
6887
|
+
* @param {Function} matcher - The matcher function
|
|
6888
|
+
* @returns {Object|undefined} The matcher configuration if found
|
|
6889
|
+
* @private
|
|
6890
|
+
*/
|
|
6891
|
+
const _getMatcherConfig = (host, target, matcher) => {
|
|
6892
|
+
const config = _transportConfig.get(host);
|
|
6893
|
+
if (!config) return undefined;
|
|
6894
|
+
|
|
6895
|
+
const targetMatchers = config.targets.get(target);
|
|
6896
|
+
if (!targetMatchers) return undefined;
|
|
6897
|
+
|
|
6898
|
+
return targetMatchers.get(matcher);
|
|
6899
|
+
};
|
|
6900
|
+
|
|
6901
|
+
/**
|
|
6902
|
+
* Sets an observed attribute value
|
|
6903
|
+
* @param {HTMLElement} host - The host element
|
|
6904
|
+
* @param {HTMLElement} target - The target element
|
|
6905
|
+
* @param {Function} matcher - The matcher function
|
|
6906
|
+
* @param {string} key - The attribute name
|
|
6907
|
+
* @param {string} value - The attribute value
|
|
6908
|
+
* @private
|
|
6909
|
+
*/
|
|
6910
|
+
const _setObservedAttribute = (host, target, matcher, key, value) => {
|
|
6911
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6912
|
+
if (matcherConfig) {
|
|
6913
|
+
matcherConfig.currentAttributes.set(key, value);
|
|
6615
6914
|
}
|
|
6915
|
+
};
|
|
6916
|
+
|
|
6917
|
+
const _getObservedAttribute = (host, target, matcher, attr) => {
|
|
6918
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6919
|
+
if (matcherConfig) return matcherConfig.currentAttributes.get(attr);
|
|
6920
|
+
return undefined;
|
|
6921
|
+
};
|
|
6922
|
+
|
|
6923
|
+
const _getObservedAttributes = (host, target, matcher) => {
|
|
6924
|
+
const matcherConfig = _getMatcherConfig(host, target, matcher);
|
|
6925
|
+
if (matcherConfig) return Array.from(matcherConfig.currentAttributes.entries());
|
|
6926
|
+
return [];
|
|
6927
|
+
};
|
|
6928
|
+
|
|
6929
|
+
const _matchers = {
|
|
6930
|
+
'aria-': attr => attr.startsWith('aria-'),
|
|
6931
|
+
'role': attr => attr.match(/^role$/)
|
|
6932
|
+
};
|
|
6933
|
+
|
|
6934
|
+
const transportAllA11yAttributes = ({ host, target, removeOriginal = true }) => {
|
|
6935
|
+
return transportAttributes({
|
|
6936
|
+
host,
|
|
6937
|
+
target,
|
|
6938
|
+
match: attr => {
|
|
6939
|
+
for (const key in _matchers) {
|
|
6940
|
+
if (_matchers[key](attr)) return true;
|
|
6941
|
+
}
|
|
6942
|
+
return false;
|
|
6943
|
+
},
|
|
6944
|
+
removeOriginal
|
|
6945
|
+
});
|
|
6946
|
+
};
|
|
6947
|
+
|
|
6948
|
+
class AuroElement extends i$2 {
|
|
6949
|
+
|
|
6950
|
+
/**
|
|
6951
|
+
* @type {Object} return object from transportAttributes via a11yUtilities
|
|
6952
|
+
* @property {Function} cleanup - Function to clean up the attribute watcher.
|
|
6953
|
+
* @property {Function} getCurrentAttributes - Function to get the current attributes being watched and their values.
|
|
6954
|
+
* @property {Function} getObservedAttribute - Function to get the value of a specific observed attribute by name.
|
|
6955
|
+
* @private
|
|
6956
|
+
*/
|
|
6957
|
+
attributeWatcher;
|
|
6616
6958
|
|
|
6617
|
-
// function to define props used within the scope of this component
|
|
6618
6959
|
static get properties() {
|
|
6619
6960
|
return {
|
|
6620
6961
|
|
|
6621
6962
|
/**
|
|
6622
|
-
*
|
|
6963
|
+
* Defines the layout of an element.
|
|
6964
|
+
* @default {'default'}
|
|
6623
6965
|
*/
|
|
6624
|
-
|
|
6625
|
-
type:
|
|
6966
|
+
layout: {
|
|
6967
|
+
type: String,
|
|
6968
|
+
attribute: "layout",
|
|
6626
6969
|
reflect: true
|
|
6627
6970
|
},
|
|
6628
|
-
|
|
6971
|
+
|
|
6629
6972
|
/**
|
|
6630
|
-
*
|
|
6973
|
+
* Defines the shape of an element.
|
|
6974
|
+
* @property {'default', 'rounded', 'pill', 'circle'}
|
|
6975
|
+
* @default {'default'}
|
|
6631
6976
|
*/
|
|
6632
|
-
|
|
6633
|
-
type:
|
|
6977
|
+
shape: {
|
|
6978
|
+
type: String,
|
|
6979
|
+
attribute: "shape",
|
|
6634
6980
|
reflect: true
|
|
6635
6981
|
},
|
|
6636
6982
|
|
|
6637
6983
|
/**
|
|
6638
|
-
*
|
|
6984
|
+
* Defines the size of an element.
|
|
6985
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'}
|
|
6986
|
+
* @default {'md'}
|
|
6639
6987
|
*/
|
|
6640
|
-
|
|
6641
|
-
type:
|
|
6988
|
+
size: {
|
|
6989
|
+
type: String,
|
|
6990
|
+
attribute: "size",
|
|
6642
6991
|
reflect: true
|
|
6643
6992
|
},
|
|
6644
6993
|
|
|
6645
|
-
/**
|
|
6646
|
-
*
|
|
6994
|
+
/**
|
|
6995
|
+
* This Boolean attribute lets you specify that the element should be rendered in dark mode.
|
|
6996
|
+
* @default {false}
|
|
6647
6997
|
*/
|
|
6648
|
-
|
|
6998
|
+
onDark: {
|
|
6649
6999
|
type: Boolean,
|
|
7000
|
+
attribute: "ondark",
|
|
6650
7001
|
reflect: true
|
|
7002
|
+
},
|
|
7003
|
+
|
|
7004
|
+
/**
|
|
7005
|
+
* A reference to the wrapper element in the shadow DOM.
|
|
7006
|
+
* This is used to apply layout and shape classes dynamically.
|
|
7007
|
+
* @type {HTMLElement|null}
|
|
7008
|
+
* @default {null}
|
|
7009
|
+
* @private
|
|
7010
|
+
*/
|
|
7011
|
+
wrapper: {
|
|
7012
|
+
attribute: false,
|
|
7013
|
+
reflect: false
|
|
6651
7014
|
}
|
|
6652
7015
|
};
|
|
6653
7016
|
}
|
|
6654
7017
|
|
|
6655
|
-
|
|
6656
|
-
|
|
6657
|
-
|
|
6658
|
-
|
|
6659
|
-
|
|
6660
|
-
|
|
6661
|
-
|
|
7018
|
+
|
|
7019
|
+
|
|
7020
|
+
resetShapeClasses() {
|
|
7021
|
+
if (this.shape && this.size) {
|
|
7022
|
+
|
|
7023
|
+
if (this.wrapper) {
|
|
7024
|
+
this.wrapper.classList.forEach((className) => {
|
|
7025
|
+
if (className.startsWith('shape-')) {
|
|
7026
|
+
this.wrapper.classList.remove(className);
|
|
7027
|
+
}
|
|
7028
|
+
});
|
|
7029
|
+
|
|
7030
|
+
this.wrapper.classList.add(`shape-${this.shape.toLowerCase()}-${this.size.toLowerCase()}`);
|
|
7031
|
+
}
|
|
7032
|
+
}
|
|
7033
|
+
}
|
|
7034
|
+
|
|
7035
|
+
resetLayoutClasses() {
|
|
7036
|
+
if (this.layout) {
|
|
7037
|
+
if (this.wrapper) {
|
|
7038
|
+
this.wrapper.classList.forEach((className) => {
|
|
7039
|
+
if (className.startsWith('layout-')) {
|
|
7040
|
+
this.wrapper.classList.remove(className);
|
|
7041
|
+
}
|
|
7042
|
+
});
|
|
7043
|
+
|
|
7044
|
+
this.wrapper.classList.add(`layout-${this.layout.toLowerCase()}`);
|
|
7045
|
+
}
|
|
7046
|
+
}
|
|
7047
|
+
}
|
|
7048
|
+
|
|
7049
|
+
updateComponentArchitecture() {
|
|
7050
|
+
this.resetLayoutClasses();
|
|
7051
|
+
this.resetShapeClasses();
|
|
7052
|
+
}
|
|
7053
|
+
|
|
7054
|
+
updated(changedProperties) {
|
|
7055
|
+
if (changedProperties.has('layout') || changedProperties.has('shape') || changedProperties.has('size')) {
|
|
7056
|
+
this.updateComponentArchitecture();
|
|
7057
|
+
}
|
|
7058
|
+
}
|
|
7059
|
+
|
|
7060
|
+
firstUpdated() {
|
|
7061
|
+
super.firstUpdated();
|
|
7062
|
+
|
|
7063
|
+
// Set a reference to the wrapper element in the shadow DOM
|
|
7064
|
+
this.wrapper = this.shadowRoot.querySelector('.wrapper');
|
|
7065
|
+
|
|
7066
|
+
// Initialize the transportation of ARIA attributes to the target element and get the disconnect function for cleanup
|
|
7067
|
+
this.attributeWatcher = transportAllA11yAttributes({ host: this, target: this.shadowRoot.querySelector('.wrapper') });
|
|
7068
|
+
}
|
|
7069
|
+
|
|
7070
|
+
disconnectedCallback() {
|
|
7071
|
+
super.disconnectedCallback();
|
|
7072
|
+
|
|
7073
|
+
// Cleanup the ARIA observer if it exists
|
|
7074
|
+
if (this.attributeWatcher) {
|
|
7075
|
+
this.attributeWatcher.cleanup();
|
|
7076
|
+
this.attributeWatcher = null;
|
|
7077
|
+
}
|
|
7078
|
+
}
|
|
7079
|
+
|
|
7080
|
+
// Try to render the defined `this.layout` layout. If that fails, fall back to the default layout.
|
|
7081
|
+
// This will catch if an invalid layout value is passed in and render the default layout if so.
|
|
7082
|
+
render() {
|
|
7083
|
+
try {
|
|
7084
|
+
return this.renderLayout();
|
|
7085
|
+
} catch (error) {
|
|
7086
|
+
// failed to get the defined layout
|
|
7087
|
+
console.error('Failed to get the defined layout - using the default layout', error); // eslint-disable-line no-console
|
|
7088
|
+
|
|
7089
|
+
// fallback to the default layout
|
|
7090
|
+
return this.getLayout('default');
|
|
7091
|
+
}
|
|
7092
|
+
}
|
|
7093
|
+
}
|
|
7094
|
+
|
|
7095
|
+
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}`;
|
|
7096
|
+
|
|
7097
|
+
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)}`;
|
|
7098
|
+
|
|
7099
|
+
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}`;
|
|
7100
|
+
|
|
7101
|
+
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}`;
|
|
7102
|
+
|
|
7103
|
+
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
7104
|
+
// See LICENSE in the project root for license information.
|
|
7105
|
+
|
|
7106
|
+
// ---------------------------------------------------------------------
|
|
7107
|
+
|
|
7108
|
+
/* eslint-disable line-comment-position, no-inline-comments, no-confusing-arrow, no-nested-ternary, implicit-arrow-linebreak */
|
|
7109
|
+
|
|
7110
|
+
let AuroLibraryRuntimeUtils$1 = class AuroLibraryRuntimeUtils {
|
|
7111
|
+
|
|
7112
|
+
/* eslint-disable jsdoc/require-param */
|
|
7113
|
+
|
|
7114
|
+
/**
|
|
7115
|
+
* This will register a new custom element with the browser.
|
|
7116
|
+
* @param {String} name - The name of the custom element.
|
|
7117
|
+
* @param {Object} componentClass - The class to register as a custom element.
|
|
7118
|
+
* @returns {void}
|
|
7119
|
+
*/
|
|
7120
|
+
registerComponent(name, componentClass) {
|
|
7121
|
+
if (!customElements.get(name)) {
|
|
7122
|
+
customElements.define(name, class extends componentClass {});
|
|
7123
|
+
}
|
|
7124
|
+
}
|
|
7125
|
+
|
|
7126
|
+
/**
|
|
7127
|
+
* Finds and returns the closest HTML Element based on a selector.
|
|
7128
|
+
* @returns {void}
|
|
7129
|
+
*/
|
|
7130
|
+
closestElement(
|
|
7131
|
+
selector, // selector like in .closest()
|
|
7132
|
+
base = this, // extra functionality to skip a parent
|
|
7133
|
+
__Closest = (el, found = el && el.closest(selector)) =>
|
|
7134
|
+
!el || el === document || el === window
|
|
7135
|
+
? null // standard .closest() returns null for non-found selectors also
|
|
7136
|
+
: found
|
|
7137
|
+
? found // found a selector INside this element
|
|
7138
|
+
: __Closest(el.getRootNode().host) // recursion!! break out to parent DOM
|
|
7139
|
+
) {
|
|
7140
|
+
return __Closest(base);
|
|
7141
|
+
}
|
|
7142
|
+
/* eslint-enable jsdoc/require-param */
|
|
7143
|
+
|
|
7144
|
+
/**
|
|
7145
|
+
* 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.
|
|
7146
|
+
* @param {Object} elem - The element to check.
|
|
7147
|
+
* @param {String} tagName - The name of the Auro component to check for or add as an attribute.
|
|
7148
|
+
* @returns {void}
|
|
7149
|
+
*/
|
|
7150
|
+
handleComponentTagRename(elem, tagName) {
|
|
7151
|
+
const tag = tagName.toLowerCase();
|
|
7152
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
7153
|
+
|
|
7154
|
+
if (elemTag !== tag) {
|
|
7155
|
+
elem.setAttribute(tag, true);
|
|
7156
|
+
}
|
|
7157
|
+
}
|
|
7158
|
+
|
|
7159
|
+
/**
|
|
7160
|
+
* Validates if an element is a specific Auro component.
|
|
7161
|
+
* @param {Object} elem - The element to validate.
|
|
7162
|
+
* @param {String} tagName - The name of the Auro component to check against.
|
|
7163
|
+
* @returns {Boolean} - Returns true if the element is the specified Auro component.
|
|
7164
|
+
*/
|
|
7165
|
+
elementMatch(elem, tagName) {
|
|
7166
|
+
const tag = tagName.toLowerCase();
|
|
7167
|
+
const elemTag = elem.tagName.toLowerCase();
|
|
7168
|
+
|
|
7169
|
+
return elemTag === tag || elem.hasAttribute(tag);
|
|
7170
|
+
}
|
|
7171
|
+
};
|
|
7172
|
+
|
|
7173
|
+
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}}`;
|
|
7174
|
+
|
|
7175
|
+
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}`;
|
|
7176
|
+
|
|
7177
|
+
var tokensCss$1 = i$5`:host{--ds-auro-loader-background-color:currentcolor;--ds-auro-loader-border-color:currentcolor;--ds-auro-loader-color:currentcolor}`;
|
|
7178
|
+
|
|
7179
|
+
// Copyright (c) 2020 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
|
|
7180
|
+
// See LICENSE in the project root for license information.
|
|
7181
|
+
|
|
7182
|
+
|
|
7183
|
+
class AuroLoader extends i$2 {
|
|
7184
|
+
constructor() {
|
|
7185
|
+
super();
|
|
7186
|
+
|
|
7187
|
+
/**
|
|
7188
|
+
* @private
|
|
7189
|
+
*/
|
|
7190
|
+
this.keys = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
|
|
7191
|
+
|
|
7192
|
+
/**
|
|
7193
|
+
* @private
|
|
7194
|
+
*/
|
|
7195
|
+
this.mdCount = 3;
|
|
7196
|
+
|
|
7197
|
+
/**
|
|
7198
|
+
* @private
|
|
7199
|
+
*/
|
|
7200
|
+
this.smCount = 2;
|
|
7201
|
+
|
|
7202
|
+
/**
|
|
7203
|
+
* @private
|
|
7204
|
+
*/
|
|
7205
|
+
this.runtimeUtils = new AuroLibraryRuntimeUtils$1();
|
|
7206
|
+
|
|
7207
|
+
this.orbit = false;
|
|
7208
|
+
this.ringworm = false;
|
|
7209
|
+
this.laser = false;
|
|
7210
|
+
this.pulse = false;
|
|
7211
|
+
}
|
|
7212
|
+
|
|
7213
|
+
// function to define props used within the scope of this component
|
|
7214
|
+
static get properties() {
|
|
7215
|
+
return {
|
|
7216
|
+
|
|
7217
|
+
/**
|
|
7218
|
+
* Sets loader to laser type.
|
|
7219
|
+
*/
|
|
7220
|
+
laser: {
|
|
7221
|
+
type: Boolean,
|
|
7222
|
+
reflect: true
|
|
7223
|
+
},
|
|
7224
|
+
|
|
7225
|
+
/**
|
|
7226
|
+
* Sets loader to orbit type.
|
|
7227
|
+
*/
|
|
7228
|
+
orbit: {
|
|
7229
|
+
type: Boolean,
|
|
7230
|
+
reflect: true
|
|
7231
|
+
},
|
|
7232
|
+
|
|
7233
|
+
/**
|
|
7234
|
+
* Sets loader to pulse type.
|
|
7235
|
+
*/
|
|
7236
|
+
pulse: {
|
|
7237
|
+
type: Boolean,
|
|
7238
|
+
reflect: true
|
|
7239
|
+
},
|
|
7240
|
+
|
|
7241
|
+
/**
|
|
7242
|
+
* Sets loader to ringworm type.
|
|
7243
|
+
*/
|
|
7244
|
+
ringworm: {
|
|
7245
|
+
type: Boolean,
|
|
7246
|
+
reflect: true
|
|
7247
|
+
}
|
|
7248
|
+
};
|
|
7249
|
+
}
|
|
7250
|
+
|
|
7251
|
+
static get styles() {
|
|
7252
|
+
return [
|
|
7253
|
+
i$5`${styleCss$1}`,
|
|
7254
|
+
i$5`${colorCss$1}`,
|
|
7255
|
+
i$5`${tokensCss$1}`
|
|
7256
|
+
];
|
|
7257
|
+
}
|
|
6662
7258
|
|
|
6663
7259
|
/**
|
|
6664
7260
|
* This will register this element with the browser.
|
|
@@ -6669,7 +7265,7 @@ class AuroLoader extends i$2 {
|
|
|
6669
7265
|
*
|
|
6670
7266
|
*/
|
|
6671
7267
|
static register(name = "auro-loader") {
|
|
6672
|
-
AuroLibraryRuntimeUtils$
|
|
7268
|
+
AuroLibraryRuntimeUtils$1.prototype.registerComponent(name, AuroLoader);
|
|
6673
7269
|
}
|
|
6674
7270
|
|
|
6675
7271
|
firstUpdated() {
|
|
@@ -6707,7 +7303,7 @@ class AuroLoader extends i$2 {
|
|
|
6707
7303
|
<span part="element" class="loader node-${idx}"></span>
|
|
6708
7304
|
`)}
|
|
6709
7305
|
|
|
6710
|
-
<div class="no-animation">Loading...</div>
|
|
7306
|
+
<div class="no-animation body-default">Loading...</div>
|
|
6711
7307
|
|
|
6712
7308
|
${this.ringworm ? x`
|
|
6713
7309
|
<svg part="element" class="circular" viewBox="25 25 50 50">
|
|
@@ -6719,25 +7315,32 @@ class AuroLoader extends i$2 {
|
|
|
6719
7315
|
}
|
|
6720
7316
|
}
|
|
6721
7317
|
|
|
6722
|
-
var loaderVersion = '5.
|
|
7318
|
+
var loaderVersion = '5.1.0';
|
|
6723
7319
|
|
|
6724
|
-
/* eslint-disable max-lines */
|
|
6725
7320
|
// Copyright (c) Alaska Air. All right reserved. Licensed under the Apache-2.0 license
|
|
6726
7321
|
// See LICENSE in the project root for license information.
|
|
6727
7322
|
|
|
6728
7323
|
|
|
6729
7324
|
/**
|
|
6730
7325
|
* @slot - Default slot for the text of the button.
|
|
6731
|
-
* @slot icon - Slot to provide auro-icon for the button.
|
|
6732
7326
|
* @csspart button - Apply CSS to HTML5 button.
|
|
6733
7327
|
* @csspart loader - Apply CSS to auro-loader.
|
|
6734
7328
|
* @csspart text - Apply CSS to text slot.
|
|
6735
7329
|
* @csspart icon - Apply CSS to icon slot.
|
|
6736
7330
|
*/
|
|
6737
7331
|
|
|
6738
|
-
|
|
7332
|
+
const ICON_ONLY_SHAPES = ['circle', 'square'];
|
|
6739
7333
|
|
|
6740
|
-
|
|
7334
|
+
/**
|
|
7335
|
+
* AuroButton is a custom element that provides a styled, accessible button with support for various states and form association.
|
|
7336
|
+
* It is designed to be flexible, supporting loading states, icon slots, and integration with HTML5 forms.
|
|
7337
|
+
* @property {'default', 'rounded', 'pill', 'circle', 'square'} shape - Defines the shape of the button.
|
|
7338
|
+
* @property {'xs', 'sm', 'md', 'lg', 'xl'} size - Defines the size of the button.
|
|
7339
|
+
* @property {'primary', 'secondary', 'tertiary', 'ghost', 'flat'} variant - Sets the button variant.
|
|
7340
|
+
* @property {'submit', 'reset', 'button'} type - The type of button. Matches HTML5 Button Spec.
|
|
7341
|
+
* @property {boolean} onDark - Indicates if the button is rendered in dark mode.
|
|
7342
|
+
*/
|
|
7343
|
+
class AuroButton extends AuroElement {
|
|
6741
7344
|
|
|
6742
7345
|
/**
|
|
6743
7346
|
* Enables form association for this element.
|
|
@@ -6752,15 +7355,13 @@ class AuroButton extends i$2 {
|
|
|
6752
7355
|
super();
|
|
6753
7356
|
this.autofocus = false;
|
|
6754
7357
|
this.disabled = false;
|
|
6755
|
-
this.iconOnly = false;
|
|
6756
7358
|
this.loading = false;
|
|
7359
|
+
this.size = "md";
|
|
7360
|
+
this.shape = "rounded";
|
|
6757
7361
|
this.onDark = false;
|
|
6758
|
-
this.secondary = false;
|
|
6759
|
-
this.tertiary = false;
|
|
6760
|
-
this.rounded = false;
|
|
6761
|
-
this.slim = false;
|
|
6762
7362
|
this.fluid = false;
|
|
6763
7363
|
this.loadingText = this.loadingText || 'Loading...';
|
|
7364
|
+
this.variant = 'primary';
|
|
6764
7365
|
|
|
6765
7366
|
// Support for HTML5 forms
|
|
6766
7367
|
if (typeof this.attachInternals === 'function') {
|
|
@@ -6781,49 +7382,59 @@ class AuroButton extends i$2 {
|
|
|
6781
7382
|
* @private
|
|
6782
7383
|
*/
|
|
6783
7384
|
this.loaderTag = versioning.generateTag('auro-loader', loaderVersion, AuroLoader);
|
|
7385
|
+
|
|
7386
|
+
/**
|
|
7387
|
+
* @private
|
|
7388
|
+
*/
|
|
7389
|
+
this.buttonHref = undefined;
|
|
7390
|
+
|
|
7391
|
+
/**
|
|
7392
|
+
* @private
|
|
7393
|
+
*/
|
|
7394
|
+
this.buttonTarget = undefined;
|
|
7395
|
+
|
|
7396
|
+
/**
|
|
7397
|
+
* @private
|
|
7398
|
+
*/
|
|
7399
|
+
this.buttonRel = undefined;
|
|
6784
7400
|
}
|
|
6785
7401
|
|
|
6786
7402
|
static get styles() {
|
|
6787
7403
|
return [
|
|
6788
7404
|
tokensCss$2,
|
|
6789
7405
|
styleCss$2,
|
|
6790
|
-
colorCss$2
|
|
7406
|
+
colorCss$2,
|
|
7407
|
+
shapeSize
|
|
6791
7408
|
];
|
|
6792
7409
|
}
|
|
6793
7410
|
|
|
6794
7411
|
static get properties() {
|
|
6795
7412
|
return {
|
|
6796
7413
|
|
|
6797
|
-
|
|
6798
|
-
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6799
|
-
*/
|
|
6800
|
-
autofocus: {
|
|
6801
|
-
type: Boolean,
|
|
6802
|
-
reflect: true
|
|
6803
|
-
},
|
|
7414
|
+
...super.properties,
|
|
6804
7415
|
|
|
6805
7416
|
/**
|
|
6806
|
-
*
|
|
7417
|
+
* Override layout since it isn't used in this component.
|
|
7418
|
+
* @private
|
|
6807
7419
|
*/
|
|
6808
|
-
|
|
7420
|
+
layout: {
|
|
6809
7421
|
type: Boolean,
|
|
6810
|
-
|
|
7422
|
+
attribute: false,
|
|
7423
|
+
reflect: false
|
|
6811
7424
|
},
|
|
6812
7425
|
|
|
6813
7426
|
/**
|
|
6814
|
-
*
|
|
6815
|
-
* @deprecated
|
|
7427
|
+
* This Boolean attribute lets you specify that the button should have input focus when the page loads, unless overridden by the user.
|
|
6816
7428
|
*/
|
|
6817
|
-
|
|
7429
|
+
autofocus: {
|
|
6818
7430
|
type: Boolean,
|
|
6819
7431
|
reflect: true
|
|
6820
7432
|
},
|
|
6821
7433
|
|
|
6822
7434
|
/**
|
|
6823
|
-
*
|
|
6824
|
-
* @deprecated
|
|
7435
|
+
* If set to true, button will become disabled and not allow for interactions.
|
|
6825
7436
|
*/
|
|
6826
|
-
|
|
7437
|
+
disabled: {
|
|
6827
7438
|
type: Boolean,
|
|
6828
7439
|
reflect: true
|
|
6829
7440
|
},
|
|
@@ -6831,15 +7442,7 @@ class AuroButton extends i$2 {
|
|
|
6831
7442
|
/**
|
|
6832
7443
|
* Alters the shape of the button to be full width of its parent container.
|
|
6833
7444
|
*/
|
|
6834
|
-
fluid:
|
|
6835
|
-
type: Boolean,
|
|
6836
|
-
reflect: true
|
|
6837
|
-
},
|
|
6838
|
-
|
|
6839
|
-
/**
|
|
6840
|
-
* If set to true, the button will contain an icon with no additional content.
|
|
6841
|
-
*/
|
|
6842
|
-
iconOnly: {
|
|
7445
|
+
fluid: {
|
|
6843
7446
|
type: Boolean,
|
|
6844
7447
|
reflect: true
|
|
6845
7448
|
},
|
|
@@ -6847,7 +7450,7 @@ class AuroButton extends i$2 {
|
|
|
6847
7450
|
/**
|
|
6848
7451
|
* If set to true button text will be replaced with `auro-loader` and become disabled.
|
|
6849
7452
|
*/
|
|
6850
|
-
loading:
|
|
7453
|
+
loading: {
|
|
6851
7454
|
type: Boolean,
|
|
6852
7455
|
reflect: true
|
|
6853
7456
|
},
|
|
@@ -6855,36 +7458,12 @@ class AuroButton extends i$2 {
|
|
|
6855
7458
|
/**
|
|
6856
7459
|
* 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.
|
|
6857
7460
|
*/
|
|
6858
|
-
loadingText:
|
|
7461
|
+
loadingText: {
|
|
6859
7462
|
type: String
|
|
6860
7463
|
},
|
|
6861
7464
|
|
|
6862
7465
|
/**
|
|
6863
|
-
*
|
|
6864
|
-
*/
|
|
6865
|
-
onDark: {
|
|
6866
|
-
type: Boolean,
|
|
6867
|
-
reflect: true
|
|
6868
|
-
},
|
|
6869
|
-
|
|
6870
|
-
/**
|
|
6871
|
-
* If set to true, the button will have a rounded shape.
|
|
6872
|
-
*/
|
|
6873
|
-
rounded: {
|
|
6874
|
-
type: Boolean,
|
|
6875
|
-
reflect: true
|
|
6876
|
-
},
|
|
6877
|
-
|
|
6878
|
-
/**
|
|
6879
|
-
* Set value for slim version of auro-button.
|
|
6880
|
-
*/
|
|
6881
|
-
slim: {
|
|
6882
|
-
type: Boolean,
|
|
6883
|
-
reflect: true
|
|
6884
|
-
},
|
|
6885
|
-
|
|
6886
|
-
/**
|
|
6887
|
-
* Populates `tabIndex` to define the focusable sequence in keyboard navigation.
|
|
7466
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
6888
7467
|
*/
|
|
6889
7468
|
tIndex: {
|
|
6890
7469
|
type: String,
|
|
@@ -6892,75 +7471,68 @@ class AuroButton extends i$2 {
|
|
|
6892
7471
|
},
|
|
6893
7472
|
|
|
6894
7473
|
/**
|
|
6895
|
-
* Populates
|
|
7474
|
+
* Populates `tabindex` to define the focusable sequence in keyboard navigation.
|
|
7475
|
+
* Must be used with "." to ensure the host element does not retain a reference to the `tabindex` attribute.
|
|
7476
|
+
* Example: `<auro-button .tabindex="${this.disabled ? '-1' : '0'}"></auro-button>`.
|
|
6896
7477
|
*/
|
|
6897
|
-
|
|
7478
|
+
tabindex: {
|
|
6898
7479
|
type: String,
|
|
6899
|
-
reflect:
|
|
7480
|
+
reflect: false
|
|
6900
7481
|
},
|
|
6901
7482
|
|
|
6902
7483
|
/**
|
|
6903
|
-
*
|
|
6904
|
-
* Use it in cases where a text label is not visible on the screen.
|
|
6905
|
-
* If there is visible text labeling the element, use `aria-labelledby` instead.
|
|
7484
|
+
* Sets title attribute. The information is most often shown as a tooltip text when the mouse moves over the element.
|
|
6906
7485
|
*/
|
|
6907
|
-
|
|
7486
|
+
title: {
|
|
6908
7487
|
type: String,
|
|
6909
7488
|
reflect: true
|
|
6910
7489
|
},
|
|
6911
7490
|
|
|
6912
7491
|
/**
|
|
6913
|
-
*
|
|
6914
|
-
* and its value should be one or more element IDs, which refer to elements that have the text needed for labeling.
|
|
6915
|
-
* List multiple element IDs in a space delimited fashion.
|
|
7492
|
+
* The type of the button. Possible values are: `submit`, `reset`, `button`.
|
|
6916
7493
|
*/
|
|
6917
|
-
|
|
7494
|
+
type: {
|
|
6918
7495
|
type: String,
|
|
6919
7496
|
reflect: true
|
|
6920
7497
|
},
|
|
6921
7498
|
|
|
6922
7499
|
/**
|
|
6923
|
-
*
|
|
6924
|
-
* or another grouping element it controls, is currently expanded or collapsed.
|
|
6925
|
-
* This is an optional attribute for buttons.
|
|
7500
|
+
* Defines the value associated with the button which is submitted with the form data.
|
|
6926
7501
|
*/
|
|
6927
|
-
|
|
6928
|
-
type:
|
|
7502
|
+
value: {
|
|
7503
|
+
type: String,
|
|
6929
7504
|
reflect: true
|
|
6930
7505
|
},
|
|
6931
7506
|
|
|
6932
7507
|
/**
|
|
6933
|
-
* Sets
|
|
7508
|
+
* Sets button variant option.
|
|
7509
|
+
* @default primary
|
|
6934
7510
|
*/
|
|
6935
|
-
|
|
7511
|
+
variant: {
|
|
6936
7512
|
type: String,
|
|
6937
7513
|
reflect: true
|
|
6938
7514
|
},
|
|
6939
7515
|
|
|
6940
7516
|
/**
|
|
6941
|
-
*
|
|
7517
|
+
* @private
|
|
6942
7518
|
*/
|
|
6943
|
-
|
|
7519
|
+
buttonHref: {
|
|
6944
7520
|
type: String,
|
|
6945
|
-
reflect: true
|
|
6946
7521
|
},
|
|
6947
7522
|
|
|
6948
7523
|
/**
|
|
6949
|
-
*
|
|
7524
|
+
* @private
|
|
6950
7525
|
*/
|
|
6951
|
-
|
|
7526
|
+
buttonTarget: {
|
|
6952
7527
|
type: String,
|
|
6953
|
-
reflect: true
|
|
6954
7528
|
},
|
|
6955
7529
|
|
|
6956
7530
|
/**
|
|
6957
|
-
*
|
|
7531
|
+
* @private
|
|
6958
7532
|
*/
|
|
6959
|
-
|
|
7533
|
+
buttonRel: {
|
|
6960
7534
|
type: String,
|
|
6961
|
-
reflect: true
|
|
6962
7535
|
},
|
|
6963
|
-
ready: { type: Boolean },
|
|
6964
7536
|
};
|
|
6965
7537
|
}
|
|
6966
7538
|
|
|
@@ -6973,7 +7545,7 @@ class AuroButton extends i$2 {
|
|
|
6973
7545
|
*
|
|
6974
7546
|
*/
|
|
6975
7547
|
static register(name = "auro-button") {
|
|
6976
|
-
AuroLibraryRuntimeUtils$
|
|
7548
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroButton);
|
|
6977
7549
|
}
|
|
6978
7550
|
|
|
6979
7551
|
/**
|
|
@@ -6985,17 +7557,6 @@ class AuroButton extends i$2 {
|
|
|
6985
7557
|
this.renderRoot.querySelector('button').focus();
|
|
6986
7558
|
}
|
|
6987
7559
|
|
|
6988
|
-
updated() {
|
|
6989
|
-
// support the old `secondary` and `tertiary` attributes` that are deprecated
|
|
6990
|
-
if (this.secondary) {
|
|
6991
|
-
this.setAttribute('variant', 'secondary');
|
|
6992
|
-
}
|
|
6993
|
-
|
|
6994
|
-
if (this.tertiary) {
|
|
6995
|
-
this.setAttribute('variant', 'tertiary');
|
|
6996
|
-
}
|
|
6997
|
-
}
|
|
6998
|
-
|
|
6999
7560
|
/**
|
|
7000
7561
|
* Submits the form that this button is associated with.
|
|
7001
7562
|
* @private
|
|
@@ -7016,28 +7577,115 @@ class AuroButton extends i$2 {
|
|
|
7016
7577
|
return this.internals ? this.internals.form : null;
|
|
7017
7578
|
}
|
|
7018
7579
|
|
|
7019
|
-
|
|
7580
|
+
/**
|
|
7581
|
+
* @private
|
|
7582
|
+
* @returns {Boolean}
|
|
7583
|
+
*/
|
|
7584
|
+
get showText() {
|
|
7585
|
+
return !ICON_ONLY_SHAPES.includes(this.shape);
|
|
7586
|
+
}
|
|
7587
|
+
|
|
7588
|
+
/**
|
|
7589
|
+
* Returns the current value of the projected `aria-label` attribute or undefined if not set.
|
|
7590
|
+
* @returns {string | undefined}
|
|
7591
|
+
* @private
|
|
7592
|
+
*/
|
|
7593
|
+
get currentAriaLabel() {
|
|
7594
|
+
if (!this.attributeWatcher) return undefined;
|
|
7595
|
+
|
|
7596
|
+
const ariaLabel = this.attributeWatcher.getObservedAttribute("aria-label");
|
|
7597
|
+
return ariaLabel || undefined;
|
|
7598
|
+
}
|
|
7599
|
+
|
|
7600
|
+
/**
|
|
7601
|
+
* Returns the current value of the projected `aria-labelledby` attribute or undefined if not set.
|
|
7602
|
+
* @returns {string | undefined}
|
|
7603
|
+
* @private
|
|
7604
|
+
*/
|
|
7605
|
+
get currentAriaLabelledBy() {
|
|
7606
|
+
if (!this.attributeWatcher) return undefined;
|
|
7607
|
+
|
|
7608
|
+
const ariaLabelledBy = this.attributeWatcher.getObservedAttribute("aria-labelledby");
|
|
7609
|
+
return ariaLabelledBy || undefined;
|
|
7610
|
+
}
|
|
7611
|
+
|
|
7612
|
+
/**
|
|
7613
|
+
* Whether or not the button is set to an icon-only shape.
|
|
7614
|
+
* @returns {boolean} - True if the button is icon-only, false otherwise.
|
|
7615
|
+
* @private
|
|
7616
|
+
*/
|
|
7617
|
+
get iconOnly() {
|
|
7618
|
+
return ICON_ONLY_SHAPES.includes(this.shape);
|
|
7619
|
+
}
|
|
7620
|
+
|
|
7621
|
+
/**
|
|
7622
|
+
* Gets a class name for the font size based on the button's size and shape.
|
|
7623
|
+
* @returns {string} - The font size class name.
|
|
7624
|
+
* @private
|
|
7625
|
+
*/
|
|
7626
|
+
getFontSize() {
|
|
7627
|
+
|
|
7628
|
+
// Size map for standard buttons
|
|
7629
|
+
const standardButtonSizeMap = {
|
|
7630
|
+
xs: 'body-xs',
|
|
7631
|
+
sm: 'body-sm',
|
|
7632
|
+
md: 'body-default',
|
|
7633
|
+
lg: 'body-lg',
|
|
7634
|
+
xl: 'body-lg'
|
|
7635
|
+
};
|
|
7636
|
+
|
|
7637
|
+
// Size map for icon-only buttons
|
|
7638
|
+
const iconOnlyButtonSizeMap = {
|
|
7639
|
+
xs: 'heading-xs',
|
|
7640
|
+
sm: 'heading-sm',
|
|
7641
|
+
md: 'heading-sm',
|
|
7642
|
+
lg: 'heading-md',
|
|
7643
|
+
xl: 'heading-lg'
|
|
7644
|
+
};
|
|
7645
|
+
|
|
7646
|
+
// Determine which map to use based on the shape
|
|
7647
|
+
const sizeMap = this.iconOnly ? iconOnlyButtonSizeMap : standardButtonSizeMap;
|
|
7648
|
+
|
|
7649
|
+
// Return the font size based on the button size and shape
|
|
7650
|
+
return sizeMap[this.size] || 'body-default';
|
|
7651
|
+
}
|
|
7652
|
+
|
|
7653
|
+
/**
|
|
7654
|
+
* Renders the default layout for the button.
|
|
7655
|
+
* @returns {TemplateResult}
|
|
7656
|
+
* @private
|
|
7657
|
+
*/
|
|
7658
|
+
renderLayoutDefault() {
|
|
7659
|
+
|
|
7660
|
+
const fontSize = this.getFontSize();
|
|
7661
|
+
const tag = this.buttonHref ? i$1`a` : i$1`button`;
|
|
7662
|
+
const part = this.buttonHref ? 'link' : 'button';
|
|
7663
|
+
|
|
7020
7664
|
const classes = {
|
|
7021
|
-
|
|
7022
|
-
|
|
7023
|
-
|
|
7024
|
-
|
|
7025
|
-
|
|
7026
|
-
|
|
7027
|
-
|
|
7028
|
-
'
|
|
7665
|
+
"auro-button": true,
|
|
7666
|
+
"inset": this.showText,
|
|
7667
|
+
wrapper: true,
|
|
7668
|
+
loading: this.loading,
|
|
7669
|
+
[`${fontSize}`]: true,
|
|
7670
|
+
|
|
7671
|
+
// These remove the default borders so we can handle focus borders ourselves
|
|
7672
|
+
'simple': !['secondary'].includes(this.variant),
|
|
7673
|
+
'thin': ['secondary'].includes(this.variant),
|
|
7674
|
+
};
|
|
7675
|
+
|
|
7676
|
+
const contentClasses = {
|
|
7677
|
+
"contentWrapper": true,
|
|
7678
|
+
"util_displayHiddenVisually": this.loading
|
|
7029
7679
|
};
|
|
7030
7680
|
|
|
7031
7681
|
return u$2`
|
|
7032
|
-
|
|
7033
|
-
part="
|
|
7034
|
-
aria-
|
|
7035
|
-
aria-
|
|
7036
|
-
|
|
7037
|
-
aria-expanded="${o(this.ariaexpanded)}"
|
|
7038
|
-
tabIndex="${o(this.tIndex)}"
|
|
7682
|
+
<${tag}
|
|
7683
|
+
part="${part}"
|
|
7684
|
+
aria-label="${o(this.loading ? this.loadingText : this.currentAriaLabel || undefined)}"
|
|
7685
|
+
aria-labelledby="${o(this.loading ? undefined : this.currentAriaLabelledBy || undefined)}"
|
|
7686
|
+
tabindex="${o(this.tIndex || this.tabindex)}"
|
|
7039
7687
|
?autofocus="${this.autofocus}"
|
|
7040
|
-
class
|
|
7688
|
+
class=${e(classes)}
|
|
7041
7689
|
?disabled="${this.disabled || this.loading}"
|
|
7042
7690
|
?onDark="${this.onDark}"
|
|
7043
7691
|
title="${o(this.title ? this.title : undefined)}"
|
|
@@ -7046,28 +7694,36 @@ class AuroButton extends i$2 {
|
|
|
7046
7694
|
variant="${o(this.variant ? this.variant : undefined)}"
|
|
7047
7695
|
.value="${o(this.value ? this.value : undefined)}"
|
|
7048
7696
|
@click="${this.type === 'submit' ? this.surfaceSubmitEvent : undefined}"
|
|
7697
|
+
href="${o(this.buttonHref || undefined)}"
|
|
7698
|
+
target="${o(this.buttonTarget || undefined)}"
|
|
7699
|
+
rel="${o(this.buttonRel || undefined)}"
|
|
7049
7700
|
>
|
|
7050
7701
|
${o(this.loading ? u$2`<${this.loaderTag} pulse part="loader"></${this.loaderTag}>` : undefined)}
|
|
7051
7702
|
|
|
7052
|
-
<span class="
|
|
7703
|
+
<span class="${e(contentClasses)}">
|
|
7053
7704
|
<span class="textSlot" part="text">
|
|
7054
|
-
|
|
7055
|
-
</span>
|
|
7056
|
-
|
|
7057
|
-
<span part="icon">
|
|
7058
|
-
<slot name="icon"></slot>
|
|
7705
|
+
<slot></slot>
|
|
7059
7706
|
</span>
|
|
7060
7707
|
</span>
|
|
7061
|
-
|
|
7708
|
+
</${tag}>
|
|
7062
7709
|
`;
|
|
7063
7710
|
}
|
|
7711
|
+
|
|
7712
|
+
/**
|
|
7713
|
+
* Renders the layout of the button.
|
|
7714
|
+
* @returns {TemplateResult}
|
|
7715
|
+
* @private
|
|
7716
|
+
*/
|
|
7717
|
+
renderLayout() {
|
|
7718
|
+
return this.renderLayoutDefault();
|
|
7719
|
+
}
|
|
7064
7720
|
}
|
|
7065
7721
|
|
|
7066
|
-
var buttonVersion = '
|
|
7722
|
+
var buttonVersion = '11.0.0';
|
|
7067
7723
|
|
|
7068
7724
|
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)}`;
|
|
7069
7725
|
|
|
7070
|
-
var styleCss = i$5`.
|
|
7726
|
+
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}`;
|
|
7071
7727
|
|
|
7072
7728
|
var tokensCss = i$5`:host{--ds-auro-helptext-color: var(--ds-basic-color-texticon-muted, #676767)}`;
|
|
7073
7729
|
|
|
@@ -7147,8 +7803,6 @@ class AuroLibraryRuntimeUtils {
|
|
|
7147
7803
|
|
|
7148
7804
|
/**
|
|
7149
7805
|
* Displays help text or error messages within form elements - Internal Use Only.
|
|
7150
|
-
*
|
|
7151
|
-
* @attr { Boolean } large - If declared, make font-size to 1rem(16px).
|
|
7152
7806
|
*/
|
|
7153
7807
|
class AuroHelpText extends i$2 {
|
|
7154
7808
|
|
|
@@ -7264,7 +7918,7 @@ class AuroHelpText extends i$2 {
|
|
|
7264
7918
|
// function that renders the HTML and CSS into the scope of the component
|
|
7265
7919
|
render() {
|
|
7266
7920
|
return x`
|
|
7267
|
-
<div class="helptext-wrapper" ?visible="${this.hasTextContent}">
|
|
7921
|
+
<div class="helptext-wrapper body-xs" ?visible="${this.hasTextContent}">
|
|
7268
7922
|
<slot @slotchange=${this.handleSlotChange}></slot>
|
|
7269
7923
|
</div>
|
|
7270
7924
|
`;
|
|
@@ -7324,26 +7978,104 @@ class AuroInput extends BaseInput {
|
|
|
7324
7978
|
];
|
|
7325
7979
|
}
|
|
7326
7980
|
|
|
7981
|
+
/**
|
|
7982
|
+
* Determines if the HTML input element should be visually hidden.
|
|
7983
|
+
* Returns true when display value content exists without focus and has a value,
|
|
7984
|
+
* or when the input has no value, is not focused, and has no placeholder text.
|
|
7985
|
+
* @returns {boolean} - True if the input should be visually hidden, false otherwise.
|
|
7986
|
+
* @private
|
|
7987
|
+
*/
|
|
7988
|
+
get inputHidden() {
|
|
7989
|
+
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus && (!this.placeholder || this.placeholder === ''));
|
|
7990
|
+
}
|
|
7991
|
+
|
|
7992
|
+
/**
|
|
7993
|
+
* Determines if the input should display in a state with no focus or value indication.
|
|
7994
|
+
* Returns true when the input has display content without focus and has a value,
|
|
7995
|
+
* or when the input has no value and is not focused.
|
|
7996
|
+
* @returns {boolean} - True if the input should show no focus or value state, false otherwise.
|
|
7997
|
+
* @private
|
|
7998
|
+
*/
|
|
7999
|
+
get noFocusOrValue() {
|
|
8000
|
+
return (this.hasDisplayValueContent && !this.hasFocus && this.hasValue) || ((!this.value || this.value.length === 0) && !this.hasFocus);
|
|
8001
|
+
}
|
|
8002
|
+
|
|
8003
|
+
/**
|
|
8004
|
+
* Whether the label is being hidden currently based on state.
|
|
8005
|
+
* @returns {boolean} - Returns true if the label is hidden.
|
|
8006
|
+
* @private
|
|
8007
|
+
*/
|
|
8008
|
+
get labelHidden() {
|
|
8009
|
+
return this.hasDisplayValueContent && !this.hasFocus && this.hasValue;
|
|
8010
|
+
}
|
|
8011
|
+
|
|
8012
|
+
/**
|
|
8013
|
+
* Returns the label font class based on layout and visibility state.
|
|
8014
|
+
* @private
|
|
8015
|
+
* @returns {string} - The font class for the label.
|
|
8016
|
+
*/
|
|
8017
|
+
get labelFontClass() {
|
|
8018
|
+
const isHidden = this.inputHidden;
|
|
8019
|
+
|
|
8020
|
+
if (this.layout.startsWith('emphasized')) {
|
|
8021
|
+
return this.noFocusOrValue ? 'accent-xl' : 'body-sm';
|
|
8022
|
+
}
|
|
8023
|
+
|
|
8024
|
+
if (this.layout === 'snowflake') {
|
|
8025
|
+
return isHidden ? 'body-lg' : 'body-xs';
|
|
8026
|
+
}
|
|
8027
|
+
|
|
8028
|
+
// classic layout (default)
|
|
8029
|
+
return isHidden ? 'body-default' : 'body-xs';
|
|
8030
|
+
}
|
|
8031
|
+
|
|
8032
|
+
/**
|
|
8033
|
+
* Returns the input font class based on layout and visibility state.
|
|
8034
|
+
* @private
|
|
8035
|
+
* @returns {string} - The font class for the input.
|
|
8036
|
+
*/
|
|
8037
|
+
get inputFontClass() {
|
|
8038
|
+
if (this.layout.startsWith('emphasized')) {
|
|
8039
|
+
return this.noFocusOrValue ? 'body-sm' : 'accent-xl';
|
|
8040
|
+
}
|
|
8041
|
+
|
|
8042
|
+
if (this.layout === 'snowflake') {
|
|
8043
|
+
// same for both hidden and visible
|
|
8044
|
+
return 'body-lg';
|
|
8045
|
+
}
|
|
8046
|
+
|
|
8047
|
+
// edge case for enabling visual overrides in datepicker
|
|
8048
|
+
if (this.layout === 'classic' && this.shape === 'snowflake') {
|
|
8049
|
+
return 'body-lg';
|
|
8050
|
+
}
|
|
8051
|
+
|
|
8052
|
+
// classic layout (default) - same for both hidden and visible
|
|
8053
|
+
return 'body-default';
|
|
8054
|
+
}
|
|
8055
|
+
|
|
7327
8056
|
/**
|
|
7328
8057
|
* Returns classmap configuration for html5 input labels in all layouts.
|
|
7329
8058
|
* @private
|
|
7330
|
-
* @returns {
|
|
8059
|
+
* @returns {Record<string, boolean>}
|
|
7331
8060
|
*/
|
|
7332
8061
|
get commonLabelClasses() {
|
|
7333
8062
|
return {
|
|
7334
|
-
'
|
|
7335
|
-
'
|
|
8063
|
+
'is-disabled': this.disabled,
|
|
8064
|
+
'withValue': this.hasValue,
|
|
8065
|
+
'util_displayHiddenVisually': this.labelHidden,
|
|
8066
|
+
[this.labelFontClass]: true,
|
|
7336
8067
|
};
|
|
7337
8068
|
}
|
|
7338
8069
|
|
|
7339
8070
|
/**
|
|
7340
8071
|
* Returns classmap configuration for html5 inputs in all layouts.
|
|
7341
8072
|
* @private
|
|
7342
|
-
* @returns {
|
|
8073
|
+
* @returns {Record<string, boolean>} - Returns classmap.
|
|
7343
8074
|
*/
|
|
7344
8075
|
get commonInputClasses() {
|
|
7345
8076
|
return {
|
|
7346
|
-
'util_displayHiddenVisually': this.
|
|
8077
|
+
'util_displayHiddenVisually': this.inputHidden,
|
|
8078
|
+
[this.inputFontClass]: true,
|
|
7347
8079
|
};
|
|
7348
8080
|
}
|
|
7349
8081
|
|
|
@@ -7354,8 +8086,7 @@ class AuroInput extends BaseInput {
|
|
|
7354
8086
|
*/
|
|
7355
8087
|
get legacyInputClasses() {
|
|
7356
8088
|
return {
|
|
7357
|
-
...this.commonInputClasses
|
|
7358
|
-
'util_displayHiddenVisually': !this.hasFocus && !this.value
|
|
8089
|
+
...this.commonInputClasses
|
|
7359
8090
|
};
|
|
7360
8091
|
}
|
|
7361
8092
|
|
|
@@ -7367,7 +8098,8 @@ class AuroInput extends BaseInput {
|
|
|
7367
8098
|
get commonWrapperClasses() {
|
|
7368
8099
|
return {
|
|
7369
8100
|
'wrapper': true,
|
|
7370
|
-
'
|
|
8101
|
+
'simple': this.simple,
|
|
8102
|
+
'withValue': this.hasValue,
|
|
7371
8103
|
'hasFocus': this.hasFocus
|
|
7372
8104
|
};
|
|
7373
8105
|
}
|
|
@@ -7394,7 +8126,7 @@ class AuroInput extends BaseInput {
|
|
|
7394
8126
|
*
|
|
7395
8127
|
*/
|
|
7396
8128
|
static register(name = "auro-input") {
|
|
7397
|
-
AuroLibraryRuntimeUtils$
|
|
8129
|
+
AuroLibraryRuntimeUtils$3.prototype.registerComponent(name, AuroInput);
|
|
7398
8130
|
}
|
|
7399
8131
|
|
|
7400
8132
|
/**
|
|
@@ -7416,7 +8148,12 @@ class AuroInput extends BaseInput {
|
|
|
7416
8148
|
* @returns {void}
|
|
7417
8149
|
*/
|
|
7418
8150
|
checkDisplayValueSlotChange() {
|
|
7419
|
-
|
|
8151
|
+
let nodes = this.shadowRoot.querySelector('slot[name="displayValue"]').assignedNodes();
|
|
8152
|
+
|
|
8153
|
+
// Handle when DisplayValue is multi-level slot content (e.g. combobox passing displayValue to input)
|
|
8154
|
+
if (nodes[0].tagName === 'SLOT') {
|
|
8155
|
+
nodes = nodes[0].assignedNodes();
|
|
8156
|
+
}
|
|
7420
8157
|
|
|
7421
8158
|
let hasContent = false;
|
|
7422
8159
|
|
|
@@ -7458,7 +8195,7 @@ class AuroInput extends BaseInput {
|
|
|
7458
8195
|
'displayValue': true,
|
|
7459
8196
|
'hasContent': this.hasDisplayValueContent,
|
|
7460
8197
|
'hasFocus': this.hasFocus,
|
|
7461
|
-
'withValue': this.
|
|
8198
|
+
'withValue': this.hasValue,
|
|
7462
8199
|
};
|
|
7463
8200
|
|
|
7464
8201
|
// Remove this when the classic layout is sunset.
|
|
@@ -7467,28 +8204,34 @@ class AuroInput extends BaseInput {
|
|
|
7467
8204
|
: this.commonInputClasses;
|
|
7468
8205
|
|
|
7469
8206
|
return u$2`
|
|
7470
|
-
<label for=${this.
|
|
8207
|
+
<label for=${this.inputId} class="${e(this.commonLabelClasses)}" part="label">
|
|
7471
8208
|
<slot name="label">
|
|
7472
8209
|
${this.label}
|
|
7473
8210
|
</slot>
|
|
8211
|
+
${this.required ? undefined : u$2`<slot name="optionalLabel"> (optional)</slot>`}
|
|
7474
8212
|
</label>
|
|
8213
|
+
|
|
8214
|
+
<!-- Attributes are grouped into: basic attributes, event handlers, ARIA attributes, and input-specific attributes -->
|
|
7475
8215
|
<input
|
|
7476
8216
|
@blur="${this.handleBlur}"
|
|
7477
8217
|
@focusin="${this.handleFocusin}"
|
|
7478
8218
|
@focusout="${this.handleFocusout}"
|
|
7479
8219
|
@input="${this.handleInput}"
|
|
8220
|
+
.placeholder=${this.placeholderStr}
|
|
8221
|
+
.role=${this.a11yRole}
|
|
7480
8222
|
?activeLabel="${this.activeLabel}"
|
|
7481
8223
|
?disabled="${this.disabled}"
|
|
7482
8224
|
?required="${this.required}"
|
|
7483
|
-
|
|
8225
|
+
aria-controls=${o(this.a11yControls)}
|
|
7484
8226
|
aria-describedby="${this.uniqueId}"
|
|
8227
|
+
aria-expanded=${o(this.a11yExpanded)}
|
|
7485
8228
|
aria-invalid="${this.validity !== 'valid'}"
|
|
7486
|
-
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7487
8229
|
autocomplete="${o(this.autocomplete ? this.autocomplete : undefined)}"
|
|
8230
|
+
autocapitalize="${o(this.autocapitalize ? this.autocapitalize : undefined)}"
|
|
7488
8231
|
autocorrect="${o(this.autocorrect ? this.autocorrect : undefined)}"
|
|
7489
8232
|
class="${e(inputOverrideClasses)}"
|
|
7490
8233
|
id="${this.inputId}"
|
|
7491
|
-
|
|
8234
|
+
inputmode="${o(this.inputmode ? this.inputmode : undefined)}"
|
|
7492
8235
|
lang="${o(this.lang)}"
|
|
7493
8236
|
maxlength="${o(this.maxLength ? this.maxLength : undefined)}"
|
|
7494
8237
|
minlength="${o(this.minLength ? this.minLength : undefined)}"
|
|
@@ -7496,7 +8239,8 @@ class AuroInput extends BaseInput {
|
|
|
7496
8239
|
part="input"
|
|
7497
8240
|
pattern="${o(this.definePattern())}"
|
|
7498
8241
|
spellcheck="${o(this.spellcheck ? this.spellcheck : undefined)}"
|
|
7499
|
-
type="${this.type ===
|
|
8242
|
+
type="${this.type === "password" && this.showPassword ? "text" : this.getInputType(this.type)}"
|
|
8243
|
+
/>
|
|
7500
8244
|
<div class="${e(displayValueClasses)}" aria-hidden="true" part="displayValue">
|
|
7501
8245
|
<div class="displayValueWrapper">
|
|
7502
8246
|
<slot name="displayValue" @slotchange=${this.checkDisplayValueSlotChange}></slot>
|
|
@@ -7516,13 +8260,15 @@ class AuroInput extends BaseInput {
|
|
|
7516
8260
|
<${this.buttonTag}
|
|
7517
8261
|
@click="${this.handleClickClear}"
|
|
7518
8262
|
?onDark="${this.onDark}"
|
|
7519
|
-
aria-label="${i18n(this.lang, 'clearInput')}"
|
|
7520
8263
|
class="notificationBtn clearBtn"
|
|
7521
|
-
|
|
7522
|
-
|
|
8264
|
+
shape="circle"
|
|
8265
|
+
size="sm"
|
|
8266
|
+
variant="ghost">
|
|
8267
|
+
<span><slot name="ariaLabel.clear">Clear Input</slot></span>
|
|
7523
8268
|
<${this.iconTag}
|
|
8269
|
+
aria-hidden="true"
|
|
8270
|
+
?customColor="${this.onDark}"
|
|
7524
8271
|
category="interface"
|
|
7525
|
-
customColor
|
|
7526
8272
|
name="x-lg"
|
|
7527
8273
|
>
|
|
7528
8274
|
</${this.iconTag}>
|
|
@@ -7540,22 +8286,28 @@ class AuroInput extends BaseInput {
|
|
|
7540
8286
|
return u$2`
|
|
7541
8287
|
<div class="notification">
|
|
7542
8288
|
<${this.buttonTag}
|
|
7543
|
-
@click="${this.handleClickShowPassword}
|
|
8289
|
+
@click="${this.handleClickShowPassword}"
|
|
7544
8290
|
?onDark="${this.onDark}"
|
|
7545
|
-
aria-hidden="true"
|
|
7546
8291
|
class="notificationBtn passwordBtn"
|
|
7547
|
-
|
|
7548
|
-
|
|
8292
|
+
shape="circle"
|
|
8293
|
+
size="sm"
|
|
8294
|
+
variant="ghost">
|
|
8295
|
+
<span>
|
|
8296
|
+
${this.showPassword ? u$2`<slot name="ariaLabel.password.hide">Hide Password</slot>`
|
|
8297
|
+
: u$2`<slot name="ariaLabel.password.show">Show Password</slot>`}
|
|
8298
|
+
</span>
|
|
7549
8299
|
<${this.iconTag}
|
|
8300
|
+
?customColor="${this.onDark}"
|
|
8301
|
+
aria-hidden="true"
|
|
7550
8302
|
?hidden=${!this.showPassword}
|
|
7551
8303
|
category="interface"
|
|
7552
|
-
customColor
|
|
7553
8304
|
name="hide-password-stroke">
|
|
7554
8305
|
</${this.iconTag}>
|
|
7555
8306
|
<${this.iconTag}
|
|
8307
|
+
?customColor="${this.onDark}"
|
|
8308
|
+
aria-hidden="true"
|
|
7556
8309
|
?hidden=${this.showPassword}
|
|
7557
8310
|
category="interface"
|
|
7558
|
-
customColor
|
|
7559
8311
|
name="view-password-stroke">
|
|
7560
8312
|
</${this.iconTag}>
|
|
7561
8313
|
</${this.buttonTag}>
|
|
@@ -7614,7 +8366,7 @@ class AuroInput extends BaseInput {
|
|
|
7614
8366
|
? u$2`
|
|
7615
8367
|
<${this.helpTextTag} ?onDark="${this.onDark}">
|
|
7616
8368
|
<p id="${this.uniqueId}" part="helpText">
|
|
7617
|
-
<slot name="
|
|
8369
|
+
<slot name="helpText">${this.getHelpText()}</slot>
|
|
7618
8370
|
</p>
|
|
7619
8371
|
</${this.helpTextTag}>
|
|
7620
8372
|
`
|
|
@@ -7635,19 +8387,25 @@ class AuroInput extends BaseInput {
|
|
|
7635
8387
|
* @returns {import("lit").TemplateResult} - Returns HTML for the classic layout.
|
|
7636
8388
|
*/
|
|
7637
8389
|
renderLayoutClassic() {
|
|
8390
|
+
const classicClassMap = {
|
|
8391
|
+
...this.commonWrapperClasses,
|
|
8392
|
+
'thin': !this.simple
|
|
8393
|
+
};
|
|
8394
|
+
|
|
7638
8395
|
return u$2`
|
|
7639
8396
|
<div
|
|
7640
8397
|
@click="${this.handleClick}"
|
|
7641
|
-
class="${e(
|
|
8398
|
+
class="${e(classicClassMap)}"
|
|
7642
8399
|
part="wrapper">
|
|
7643
|
-
<div class="accents left">
|
|
8400
|
+
<div part="accent-left" class="accents left">
|
|
7644
8401
|
${this.renderHtmlTypeIcon()}
|
|
7645
8402
|
</div>
|
|
7646
8403
|
<div class="mainContent">
|
|
7647
8404
|
${this.renderHtmlInput(true)}
|
|
7648
8405
|
</div>
|
|
7649
|
-
<div class="accents right">
|
|
8406
|
+
<div part="accent-right" class="accents right">
|
|
7650
8407
|
${this.renderValidationErrorIconHtml()}
|
|
8408
|
+
${this.hasValue && this.type === 'password' ? this.renderHtmlNotificationPassword() : undefined}
|
|
7651
8409
|
${this.hasValue ? u$2`
|
|
7652
8410
|
${!this.disabled && !this.readonly ? u$2`
|
|
7653
8411
|
${this.renderHtmlActionClear()}
|