blip-ds 1.248.0 → 1.248.2

package/dist/blip-ds/bds-avatar.entry.js

@@ -80,11 +80,12 @@ const BdsAvatar = class {
       if (this.color) {
         return this.color;
       }
-      else {
+      else if (letter) {
         const currentColor = colorLetter.find((item) => item.value === letter);
         return currentColor.color;
       }
     };
+    this.hasThumb = undefined;
     this.name = null;
     this.thumbnail = null;
     this.size = 'standard';
@@ -103,22 +104,33 @@ const BdsAvatar = class {
       this.bdsClickAvatar.emit();
     }
   }
+  componentWillRender() {
+    this.hasThumb = this.thumbnail ? (this.thumbnail.length !== 0 ? true : false) : false;
+  }
   render() {
     const arrayName = this.name ? this.name.split(' ') : [];
-    const firstName = arrayName.length ? arrayName.shift().charAt(0) : '';
-    const lastName = arrayName.length ? arrayName.pop().charAt(0) : '';
+    const firstName = arrayName.length ? arrayName.shift().charAt(0).toUpperCase() : '';
+    const lastName = arrayName.length ? arrayName.pop().charAt(0).toUpperCase() : '';
     this.selectTypoSize(this.size);
     const thumbnailStyle = {
       width: this.thumbSize + 'px',
       height: this.thumbSize + 'px',
-      backgroundImage: `url(${this.thumbnail})`,
+      backgroundImage: `url(${this.hasThumb ? this.thumbnail : null})`,
     };
     return (h(Host, null, h("div", { class: {
         avatar: true,
-        [`avatar__color--${this.avatarBgColor(firstName)}`]: true,
+        [`avatar__color--${this.name && !this.hasThumb
+          ? this.avatarBgColor(firstName)
+          : this.hasThumb && !this.name
+            ? 'surface'
+            : !this.name && !this.hasThumb
+              ? 'surface'
+              : this.name && this.hasThumb
+                ? this.avatarBgColor(firstName)
+                : null}`]: true,
         [`avatar__size--${this.size}`]: true,
         upload: this.upload,
-      }, "data-test": this.dataTest }, this.ellipsis ? (h("bds-typo", { margin: false, variant: this.typoSize, tag: "span" }, `+${this.ellipsis}`)) : this.thumbnail ? (this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick }, h("div", { class: "avatar__btn__img", style: thumbnailStyle }), h("div", { class: "avatar__btn__thumb" }, h("bds-icon", { class: "avatar__btn__thumb__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("div", { class: "avatar__btn__img", style: thumbnailStyle }))) : this.name ? (this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick }, h("bds-typo", { margin: false, class: "avatar__btn__text", variant: this.typoSize, tag: "span" }, firstName + lastName), h("div", { class: "avatar__btn__name" }, h("bds-icon", { class: "avatar__btn__name__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-typo", { margin: false, class: "avatar__text", variant: this.typoSize, tag: "span" }, firstName + lastName))) : this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick }, h("bds-icon", { class: "avatar__btn__icon", name: "user-default", theme: "outline", size: this.iconSize }), h("div", { class: "avatar__btn__empty" }, h("bds-icon", { class: "avatar__btn__empty__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-icon", { class: "avatar__icon", name: "user-default", theme: "outline", size: this.iconSize }))), this.upload && this.size !== 'micro' ? (h("div", { tabindex: "0", onClick: () => this.handleClickKey, class: "focus" })) : ('')));
+      }, "data-test": this.dataTest }, this.ellipsis ? (h("bds-typo", { margin: false, variant: this.typoSize, tag: "span" }, `+${this.ellipsis}`)) : this.thumbnail ? (this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick }, h("div", { class: "avatar__btn__img", style: thumbnailStyle }), h("div", { class: "avatar__btn__thumb" }, h("bds-icon", { class: "avatar__btn__thumb__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("div", { class: "avatar__btn__img", style: thumbnailStyle }))) : this.name ? (this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick }, h("bds-typo", { margin: false, class: "avatar__btn__text", variant: this.typoSize, tag: "span" }, firstName + lastName), h("div", { class: "avatar__btn__name" }, h("bds-icon", { class: "avatar__btn__name__icon", name: "upload", theme: "outline", size: this.iconSize })))) : (h("bds-typo", { margin: false, class: "avatar__text", variant: this.typoSize, tag: "span" }, firstName + lastName))) : this.upload && this.size !== 'micro' ? (h("div", { class: "avatar__btn", onClick: () => this.onUploadClick }, h("bds-icon", { class: "avatar__btn__icon", name: "user-default", theme: "outline", size: this.iconSize }), h("div", { class: "avatar__btn__empty" }, h("bds-icon", { class: "avatar__btn__empty__icon", name: "upload", theme: "outline", size: this.iconSize })))) : this.name === null && !this.hasThumb ? (h("bds-icon", { class: "avatar__icon", name: "user-default", theme: "outline", size: this.iconSize })) : ('')), this.upload && this.size !== 'micro' ? (h("div", { tabindex: "0", onClick: () => this.handleClickKey, class: "focus" })) : ('')));
   }
 };
 BdsAvatar.style = avatarCss;

package/dist/blip-ds/bds-avatar.system.entry.js

@@ -1 +1 @@
-System.register(["./index-241c9f42.system.js"],(function(a){"use strict";var t,e,i,o;return{setters:[function(a){t=a.r;e=a.e;i=a.h;o=a.f}],execute:function(){var r=[{value:"A",color:"system"},{value:"B",color:"success"},{value:"C",color:"warning"},{value:"D",color:"error"},{value:"E",color:"info"},{value:"F",color:"system"},{value:"G",color:"success"},{value:"H",color:"warning"},{value:"I",color:"error"},{value:"J",color:"info"},{value:"K",color:"system"},{value:"L",color:"success"},{value:"M",color:"warning"},{value:"N",color:"error"},{value:"O",color:"info"},{value:"P",color:"system"},{value:"Q",color:"success"},{value:"R",color:"warning"},{value:"S",color:"error"},{value:"T",color:"info"},{value:"U",color:"system"},{value:"V",color:"success"},{value:"X",color:"warning"},{value:"Y",color:"error"},{value:"W",color:"info"},{value:"Z",color:"system"}];var n=':host{position:relative;display:block}.avatar{border-radius:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%}.avatar__ellipsis{color:var(--color-surface-1, #ffffff)}.avatar__text{color:var(--color-content-din, #000)}.avatar__icon{color:var(--color-surface-1, #ffffff)}.avatar__btn{position:relative;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.avatar__btn__img{background-position:center;background-size:cover}.avatar__btn__text{color:var(--color-content-din, #000);opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__icon{color:var(--color-content-din, #000);opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer}.avatar__btn__thumb:before{content:"";position:absolute;inset:0;background-color:var(--color-content-default, #202c44);opacity:0;-webkit-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb__icon{color:var(--color-surface-1, #ffffff);opacity:0;-webkit-transition:all 0.5s;transition:all 0.5s}.avatar__btn__name{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__name__icon{color:var(--color-content-din, #000)}.avatar__btn__empty{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__empty__icon{color:var(--color-content-din, #000)}.avatar__size--micro{width:24px;height:24px}.avatar__size--extra-small{width:32px;height:32px;min-width:32px;min-height:32px}.avatar__size--small{width:40px;height:40px;min-width:40px;min-height:40px}.avatar__size--standard{width:56px;height:56px;min-width:56px;min-height:56px}.avatar__size--large{width:64px;height:64px;min-width:64px;min-height:64px}.avatar__size--extra-large{width:72px;height:72px;min-width:72px;min-height:72px}.avatar__color--system{background-color:var(--color-system, #b3d4ff)}.avatar__color--warning{background-color:var(--color-warning, #fff6a8)}.avatar__color--success{background-color:var(--color-success, #90e6bc)}.avatar__color--info{background-color:var(--color-info, #80e3eb)}.avatar__color--error{background-color:var(--color-error, #ffa5a5)}.avatar__color--surface{background-color:var(--color-surface-3, #e7edf4);color:var(--color-content-disable, #505f79)}.avatar:hover .avatar__btn__thumb:before{opacity:0.5}.avatar:hover .avatar__btn__thumb__icon{opacity:1}.avatar:hover .avatar__btn__text{opacity:0}.avatar:hover .avatar__btn__icon{opacity:0}.avatar:hover .avatar__btn__name{opacity:1}.avatar:hover .avatar__btn__empty{opacity:1}.focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid var(--color-focus, #c226fb);border-radius:4px;width:100%;height:100%;top:-4px;left:-4px;padding-right:4px;padding-bottom:4px;outline:none}';var s=a("bds_avatar",function(){function a(a){var i=this;t(this,a);this.bdsClickAvatar=e(this,"bdsClickAvatar",7);this.typoSize="fs-20";this.iconSize="large";this.thumbSize=56;this.selectTypoSize=function(a){switch(a){case"micro":i.typoSize="fs-12";i.iconSize="xx-small";i.thumbSize=24;break;case"extra-small":i.typoSize="fs-14";i.iconSize="x-small";i.thumbSize=32;break;case"small":i.typoSize="fs-16";i.iconSize="x-small";i.thumbSize=40;break;case"standard":i.typoSize="fs-20";i.iconSize="medium";i.thumbSize=56;break;case"large":i.typoSize="fs-24";i.iconSize="xxx-large";i.thumbSize=64;break;case"extra-large":i.typoSize="fs-32";i.iconSize="xxx-large";i.thumbSize=72;break;default:i.typoSize="fs-20";i.iconSize="medium";i.thumbSize=56}};this.avatarBgColor=function(a){if(i.color){return i.color}else{var t=r.find((function(t){return t.value===a}));return t.color}};this.name=null;this.thumbnail=null;this.size="standard";this.color=null;this.upload=false;this.ellipsis=null;this.dataTest=null}a.prototype.onUploadClick=function(a){a.preventDefault();this.bdsClickAvatar.emit(a)};a.prototype.handleClickKey=function(a){if((a.key==="Enter"||a.key===" ")&&this.upload){a.preventDefault();this.bdsClickAvatar.emit()}};a.prototype.render=function(){var a;var t=this;var e=this.name?this.name.split(" "):[];var r=e.length?e.shift().charAt(0):"";var n=e.length?e.pop().charAt(0):"";this.selectTypoSize(this.size);var s={width:this.thumbSize+"px",height:this.thumbSize+"px",backgroundImage:"url(".concat(this.thumbnail,")")};return i(o,null,i("div",{class:(a={avatar:true},a["avatar__color--".concat(this.avatarBgColor(r))]=true,a["avatar__size--".concat(this.size)]=true,a.upload=this.upload,a),"data-test":this.dataTest},this.ellipsis?i("bds-typo",{margin:false,variant:this.typoSize,tag:"span"},"+".concat(this.ellipsis)):this.thumbnail?this.upload&&this.size!=="micro"?i("div",{class:"avatar__btn",onClick:function(){return t.onUploadClick}},i("div",{class:"avatar__btn__img",style:s}),i("div",{class:"avatar__btn__thumb"},i("bds-icon",{class:"avatar__btn__thumb__icon",name:"upload",theme:"outline",size:this.iconSize}))):i("div",{class:"avatar__btn__img",style:s}):this.name?this.upload&&this.size!=="micro"?i("div",{class:"avatar__btn",onClick:function(){return t.onUploadClick}},i("bds-typo",{margin:false,class:"avatar__btn__text",variant:this.typoSize,tag:"span"},r+n),i("div",{class:"avatar__btn__name"},i("bds-icon",{class:"avatar__btn__name__icon",name:"upload",theme:"outline",size:this.iconSize}))):i("bds-typo",{margin:false,class:"avatar__text",variant:this.typoSize,tag:"span"},r+n):this.upload&&this.size!=="micro"?i("div",{class:"avatar__btn",onClick:function(){return t.onUploadClick}},i("bds-icon",{class:"avatar__btn__icon",name:"user-default",theme:"outline",size:this.iconSize}),i("div",{class:"avatar__btn__empty"},i("bds-icon",{class:"avatar__btn__empty__icon",name:"upload",theme:"outline",size:this.iconSize}))):i("bds-icon",{class:"avatar__icon",name:"user-default",theme:"outline",size:this.iconSize})),this.upload&&this.size!=="micro"?i("div",{tabindex:"0",onClick:function(){return t.handleClickKey},class:"focus"}):"")};return a}());s.style=n}}}));
+System.register(["./index-241c9f42.system.js"],(function(a){"use strict";var t,e,i,o;return{setters:[function(a){t=a.r;e=a.e;i=a.h;o=a.f}],execute:function(){var r=[{value:"A",color:"system"},{value:"B",color:"success"},{value:"C",color:"warning"},{value:"D",color:"error"},{value:"E",color:"info"},{value:"F",color:"system"},{value:"G",color:"success"},{value:"H",color:"warning"},{value:"I",color:"error"},{value:"J",color:"info"},{value:"K",color:"system"},{value:"L",color:"success"},{value:"M",color:"warning"},{value:"N",color:"error"},{value:"O",color:"info"},{value:"P",color:"system"},{value:"Q",color:"success"},{value:"R",color:"warning"},{value:"S",color:"error"},{value:"T",color:"info"},{value:"U",color:"system"},{value:"V",color:"success"},{value:"X",color:"warning"},{value:"Y",color:"error"},{value:"W",color:"info"},{value:"Z",color:"system"}];var s=':host{position:relative;display:block}.avatar{border-radius:40px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;overflow:hidden;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:100%}.avatar__ellipsis{color:var(--color-surface-1, #ffffff)}.avatar__text{color:var(--color-content-din, #000)}.avatar__icon{color:var(--color-surface-1, #ffffff)}.avatar__btn{position:relative;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}.avatar__btn__img{background-position:center;background-size:cover}.avatar__btn__text{color:var(--color-content-din, #000);opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__icon{color:var(--color-content-din, #000);opacity:1;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer}.avatar__btn__thumb:before{content:"";position:absolute;inset:0;background-color:var(--color-content-default, #202c44);opacity:0;-webkit-transition:all 0.5s;transition:all 0.5s}.avatar__btn__thumb__icon{color:var(--color-surface-1, #ffffff);opacity:0;-webkit-transition:all 0.5s;transition:all 0.5s}.avatar__btn__name{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__name__icon{color:var(--color-content-din, #000)}.avatar__btn__empty{position:absolute;width:100%;height:100%;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;top:0;left:0;cursor:pointer;opacity:0;-webkit-transition:all 0.5s;-moz-transition:all 0.5s;transition:all 0.5s}.avatar__btn__empty__icon{color:var(--color-content-din, #000)}.avatar__size--micro{width:24px;height:24px}.avatar__size--extra-small{width:32px;height:32px;min-width:32px;min-height:32px}.avatar__size--small{width:40px;height:40px;min-width:40px;min-height:40px}.avatar__size--standard{width:56px;height:56px;min-width:56px;min-height:56px}.avatar__size--large{width:64px;height:64px;min-width:64px;min-height:64px}.avatar__size--extra-large{width:72px;height:72px;min-width:72px;min-height:72px}.avatar__color--system{background-color:var(--color-system, #b3d4ff)}.avatar__color--warning{background-color:var(--color-warning, #fff6a8)}.avatar__color--success{background-color:var(--color-success, #90e6bc)}.avatar__color--info{background-color:var(--color-info, #80e3eb)}.avatar__color--error{background-color:var(--color-error, #ffa5a5)}.avatar__color--surface{background-color:var(--color-surface-3, #e7edf4);color:var(--color-content-disable, #505f79)}.avatar:hover .avatar__btn__thumb:before{opacity:0.5}.avatar:hover .avatar__btn__thumb__icon{opacity:1}.avatar:hover .avatar__btn__text{opacity:0}.avatar:hover .avatar__btn__icon{opacity:0}.avatar:hover .avatar__btn__name{opacity:1}.avatar:hover .avatar__btn__empty{opacity:1}.focus:focus-visible{display:-ms-flexbox;display:flex;position:absolute;border:2px solid var(--color-focus, #c226fb);border-radius:4px;width:100%;height:100%;top:-4px;left:-4px;padding-right:4px;padding-bottom:4px;outline:none}';var n=a("bds_avatar",function(){function a(a){var i=this;t(this,a);this.bdsClickAvatar=e(this,"bdsClickAvatar",7);this.typoSize="fs-20";this.iconSize="large";this.thumbSize=56;this.selectTypoSize=function(a){switch(a){case"micro":i.typoSize="fs-12";i.iconSize="xx-small";i.thumbSize=24;break;case"extra-small":i.typoSize="fs-14";i.iconSize="x-small";i.thumbSize=32;break;case"small":i.typoSize="fs-16";i.iconSize="x-small";i.thumbSize=40;break;case"standard":i.typoSize="fs-20";i.iconSize="medium";i.thumbSize=56;break;case"large":i.typoSize="fs-24";i.iconSize="xxx-large";i.thumbSize=64;break;case"extra-large":i.typoSize="fs-32";i.iconSize="xxx-large";i.thumbSize=72;break;default:i.typoSize="fs-20";i.iconSize="medium";i.thumbSize=56}};this.avatarBgColor=function(a){if(i.color){return i.color}else if(a){var t=r.find((function(t){return t.value===a}));return t.color}};this.hasThumb=undefined;this.name=null;this.thumbnail=null;this.size="standard";this.color=null;this.upload=false;this.ellipsis=null;this.dataTest=null}a.prototype.onUploadClick=function(a){a.preventDefault();this.bdsClickAvatar.emit(a)};a.prototype.handleClickKey=function(a){if((a.key==="Enter"||a.key===" ")&&this.upload){a.preventDefault();this.bdsClickAvatar.emit()}};a.prototype.componentWillRender=function(){this.hasThumb=this.thumbnail?this.thumbnail.length!==0?true:false:false};a.prototype.render=function(){var a;var t=this;var e=this.name?this.name.split(" "):[];var r=e.length?e.shift().charAt(0).toUpperCase():"";var s=e.length?e.pop().charAt(0).toUpperCase():"";this.selectTypoSize(this.size);var n={width:this.thumbSize+"px",height:this.thumbSize+"px",backgroundImage:"url(".concat(this.hasThumb?this.thumbnail:null,")")};return i(o,null,i("div",{class:(a={avatar:true},a["avatar__color--".concat(this.name&&!this.hasThumb?this.avatarBgColor(r):this.hasThumb&&!this.name?"surface":!this.name&&!this.hasThumb?"surface":this.name&&this.hasThumb?this.avatarBgColor(r):null)]=true,a["avatar__size--".concat(this.size)]=true,a.upload=this.upload,a),"data-test":this.dataTest},this.ellipsis?i("bds-typo",{margin:false,variant:this.typoSize,tag:"span"},"+".concat(this.ellipsis)):this.thumbnail?this.upload&&this.size!=="micro"?i("div",{class:"avatar__btn",onClick:function(){return t.onUploadClick}},i("div",{class:"avatar__btn__img",style:n}),i("div",{class:"avatar__btn__thumb"},i("bds-icon",{class:"avatar__btn__thumb__icon",name:"upload",theme:"outline",size:this.iconSize}))):i("div",{class:"avatar__btn__img",style:n}):this.name?this.upload&&this.size!=="micro"?i("div",{class:"avatar__btn",onClick:function(){return t.onUploadClick}},i("bds-typo",{margin:false,class:"avatar__btn__text",variant:this.typoSize,tag:"span"},r+s),i("div",{class:"avatar__btn__name"},i("bds-icon",{class:"avatar__btn__name__icon",name:"upload",theme:"outline",size:this.iconSize}))):i("bds-typo",{margin:false,class:"avatar__text",variant:this.typoSize,tag:"span"},r+s):this.upload&&this.size!=="micro"?i("div",{class:"avatar__btn",onClick:function(){return t.onUploadClick}},i("bds-icon",{class:"avatar__btn__icon",name:"user-default",theme:"outline",size:this.iconSize}),i("div",{class:"avatar__btn__empty"},i("bds-icon",{class:"avatar__btn__empty__icon",name:"upload",theme:"outline",size:this.iconSize}))):this.name===null&&!this.hasThumb?i("bds-icon",{class:"avatar__icon",name:"user-default",theme:"outline",size:this.iconSize}):""),this.upload&&this.size!=="micro"?i("div",{tabindex:"0",onClick:function(){return t.handleClickKey},class:"focus"}):"")};return a}());n.style=s}}}));

package/dist/blip-ds/bds-icon.entry.js

@@ -636,7 +636,7 @@ const getLogoName = (name) => {
   return `asset-logo-${name}`;
 };
 
-const iconCss = ":host{width:1em;height:1em;contain:strict;color:var(--color-content-default, #202c44);fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.icon-inner{max-width:100%;height:100%}.emoji-inner{max-width:100%;height:100%;display:-ms-flexbox;display:flex}:host(.bds-icon){display:inline-block}:host(.bds-icon) svg{fill:currentColor;width:100%;min-width:100%}:host(.bds-icon__size--brand){width:64px;min-width:64px;height:64px;max-height:64px;min-height:64px}:host(.bds-icon__size--xxx-large){width:40px;min-width:40px;height:40px;max-height:40px;min-height:40px}:host(.bds-icon__size--xx-large){width:36px;min-width:36px;height:36px;max-height:36px;min-height:36px}:host(.bds-icon__size--x-large){width:32px;min-width:32px;height:32px;max-height:32px;min-height:32px}:host(.bds-icon__size--large){width:28px;min-width:28px;height:28px;max-height:28px;min-height:28px}:host(.bds-icon__size--medium){width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px}:host(.bds-icon__size--small){width:20px;min-width:20px;height:20px;max-height:20px;min-height:20px}:host(.bds-icon__size--x-small){width:16px;min-width:16px;height:16px;max-height:16px;min-height:16px}:host(.bds-icon__size--xx-small){width:12px;min-width:12px;height:12px;max-height:12px;min-height:12px}";
+const iconCss = ":host{width:1em;height:1em;contain:strict;color:inherit, var(--color-content-default, #202c44);fill:currentColor;-webkit-box-sizing:content-box !important;box-sizing:content-box !important}.icon-inner{max-width:100%;height:100%}.emoji-inner{max-width:100%;height:100%;display:-ms-flexbox;display:flex}:host(.bds-icon){display:inline-block}:host(.bds-icon) svg{fill:currentColor;width:100%;min-width:100%}:host(.bds-icon__size--brand){width:64px;min-width:64px;height:64px;max-height:64px;min-height:64px}:host(.bds-icon__size--xxx-large){width:40px;min-width:40px;height:40px;max-height:40px;min-height:40px}:host(.bds-icon__size--xx-large){width:36px;min-width:36px;height:36px;max-height:36px;min-height:36px}:host(.bds-icon__size--x-large){width:32px;min-width:32px;height:32px;max-height:32px;min-height:32px}:host(.bds-icon__size--large){width:28px;min-width:28px;height:28px;max-height:28px;min-height:28px}:host(.bds-icon__size--medium){width:24px;min-width:24px;height:24px;max-height:24px;min-height:24px}:host(.bds-icon__size--small){width:20px;min-width:20px;height:20px;max-height:20px;min-height:20px}:host(.bds-icon__size--x-small){width:16px;min-width:16px;height:16px;max-height:16px;min-height:16px}:host(.bds-icon__size--xx-small){width:12px;min-width:12px;height:12px;max-height:12px;min-height:12px}";
 
 const Icon = class {
   constructor(hostRef) {