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