@nectary/components 5.0.2 → 5.0.4

package/accordion/index.js

@@ -3,7 +3,7 @@ import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttrib
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getTargetByAttribute } from "../utils/event-target.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n}\n\n::slotted(sinch-accordion-item) {\n  flex-shrink: 1;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}::slotted(sinch-accordion-item){flex-shrink:1}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Accordion extends NectaryElement {
@@ -85,6 +85,7 @@ class Accordion extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-accordion", Accordion);

package/accordion-item/index.js

@@ -4,7 +4,7 @@ import "../title/index.js";
 import { isAttrEqual, updateExplicitBooleanAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { statusValues } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n    outline: none;\n    min-height: 48px;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: column;\n    position: relative;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n    border-bottom:\n      1px solid\n      var(--sinch-comp-accordion-color-default-border-initial);\n  }\n\n  :host(:last-child) > #wrapper {\n    border-bottom: none;\n  }\n\n  #button {\n    all: initial;\n    display: flex;\n    position: relative;\n    align-items: center;\n    gap: 8px;\n    box-sizing: border-box;\n    width: 100%;\n    height: 48px;\n    padding: 0 4px 0 8px;\n    cursor: pointer;\n\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-accordion-color-default-icon-initial\n      );\n    --sinch-global-size-icon: var(--sinch-comp-accordion-size-icon);\n  }\n\n  #button > * {\n    pointer-events: none;\n  }\n\n  #button:disabled {\n    cursor: initial;\n\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-accordion-color-disabled-icon-initial\n      );\n  }\n\n  #button:focus-visible::after {\n    content: "";\n    position: absolute;\n    inset: 0;\n    border: 2px solid var(--sinch-comp-accordion-color-default-outline-focus);\n    pointer-events: none;\n  }\n\n  #status-wrapper {\n    display: none;\n    width: 18px;\n    height: 24px;\n    padding: 8px 8px 8px 2px;\n    box-sizing: border-box;\n  }\n\n  #status {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n  }\n\n  :host([status]:not([status=""])) #status-wrapper {\n    display: block;\n  }\n\n  :host([status="success"]) #status {\n    background-color: var(--sinch-comp-accordion-color-default-status-success);\n  }\n\n  :host([status="warn"]) #status {\n    background-color: var(--sinch-comp-accordion-color-default-status-warning);\n  }\n\n  :host([status="error"]) #status {\n    background-color: var(--sinch-comp-accordion-color-default-status-error);\n  }\n\n  :host([status="info"]) #status {\n    background-color: var(--sinch-comp-accordion-color-default-status-info);\n  }\n\n  #title {\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-title-font: var(--sinch-comp-accordion-font-title);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-accordion-color-default-title-initial\n      );\n  }\n\n  #button:disabled > #title {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-accordion-color-disabled-title-initial\n      );\n  }\n\n  #content {\n    display: none;\n    overflow-y: auto;\n    flex-shrink: 1;\n    min-height: 0;\n    padding: 0 8px 12px;\n  }\n\n  #dropdown-icon {\n    transform: rotate(0deg);\n    will-change: transform;\n    transition: transform 0.25s ease-in-out;\n  }\n\n  #button[aria-expanded="true"] > #dropdown-icon {\n    transform: rotate(180deg);\n  }\n\n  #button[aria-expanded="true"] + #content {\n    display: block;\n  }\n\n  #optional {\n    --sinch-comp-text-font: var(--sinch-comp-accordion-font-optional-text);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-accordion-color-default-optional-text-initial\n      );\n  }\n\n  #button:disabled > #optional {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-accordion-color-disabled-optional-text-initial\n      );\n  }\n</style>\n\n<div id="wrapper">\n  <button id="button" aria-controls="content" aria-expanded="false">\n    <div id="status-wrapper">\n      <div id="status"></div>\n    </div>\n    <slot name="icon"></slot>\n    <sinch-title id="title" level="3" type="m" ellipsis></sinch-title>\n    <sinch-text id="optional" type="m"></sinch-text>\n    <sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon>\n  </button>\n  <div id="content" role="region" aria-labelledby="button">\n    <slot name="content"></slot>\n  </div>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-comp-accordion-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}#button{all:initial;display:flex;position:relative;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:0 4px 0 8px;cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-accordion-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-accordion-size-icon)}#button>*{pointer-events:none}#button:disabled{cursor:initial;--sinch-global-color-icon:var(--sinch-comp-accordion-color-disabled-icon-initial)}#button:focus-visible::after{content:"";position:absolute;inset:0;border:2px solid var(--sinch-comp-accordion-color-default-outline-focus);pointer-events:none}#status-wrapper{display:none;width:18px;height:24px;padding:8px 8px 8px 2px;box-sizing:border-box}#status{width:8px;height:8px;border-radius:50%}:host([status]:not([status=""])) #status-wrapper{display:block}:host([status=success]) #status{background-color:var(--sinch-comp-accordion-color-default-status-success)}:host([status=warn]) #status{background-color:var(--sinch-comp-accordion-color-default-status-warning)}:host([status=error]) #status{background-color:var(--sinch-comp-accordion-color-default-status-error)}:host([status=info]) #status{background-color:var(--sinch-comp-accordion-color-default-status-info)}#title{flex:1;min-width:0;--sinch-comp-title-font:var(--sinch-comp-accordion-font-title);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-title-initial)}#button:disabled>#title{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-title-initial)}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 12px}#dropdown-icon{transform:rotate(0);will-change:transform;transition:transform .25s ease-in-out}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{--sinch-comp-text-font:var(--sinch-comp-accordion-font-optional-text);--sinch-global-color-text:var(--sinch-comp-accordion-color-default-optional-text-initial)}#button:disabled>#optional{--sinch-global-color-text:var(--sinch-comp-accordion-color-disabled-optional-text-initial)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><div id="status-wrapper"><div id="status"></div></div><slot name="icon"></slot><sinch-title id="title" level="3" type="m" ellipsis></sinch-title><sinch-text id="optional" type="m"></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class AccordionItem extends NectaryElement {

package/action-menu/index.js

@@ -2,7 +2,7 @@ import { isSinchActionMenuOption } from "../action-menu-option/utils.js";
 import { subscribeContext } from "../utils/context.js";
 import { attrValueToPixels, updateIntegerAttribute, getIntegerAttribute, getBooleanAttribute, updateBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#listbox {\n  overflow-y: auto;\n}\n</style>\n\n<div id="listbox" role="presentation">\n  <slot></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement("template");
 template.innerHTML = templateHTML;

package/action-menu-option/index.js

@@ -2,7 +2,7 @@ import "../text/index.js";
 import { isAttrEqual, getBooleanAttribute, updateExplicitBooleanAttribute, isAttrTrue, updateBooleanAttribute, updateAttribute, getAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  cursor: pointer;\n}\n\n:host([disabled]) {\n  cursor: initial;\n}\n\n#wrapper {\n  all: initial;\n  display: flex;\n  position: relative;\n  box-sizing: border-box;\n  height: 40px;\n  width: 100%;\n  padding: 8px 16px;\n  align-items: center;\n  gap: 10px;\n  user-select: none;\n  background-color: var(--sinch-comp-action-menu-color-default-background-initial);\n\n  --sinch-global-color-text: var(--sinch-comp-action-menu-color-default-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-action-menu-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-action-menu-size-icon);\n}\n\n:host([data-selected]) > #wrapper {\n  background-color: var(--sinch-comp-action-menu-color-default-background-selected);\n}\n\n:host(:hover) > #wrapper {\n  background-color: var(--sinch-comp-action-menu-color-default-background-hover);\n}\n\n:host([disabled]) > #wrapper {\n  pointer-events: none;\n  background-color: var(--sinch-comp-action-menu-color-disabled-background-initial);\n\n  --sinch-global-color-text: var(--sinch-comp-action-menu-color-disabled-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-action-menu-color-disabled-icon-initial);\n}\n\n#content {\n  flex: 1;\n  min-width: 0;\n\n  --sinch-comp-text-font: var(--sinch-comp-action-menu-font-option);\n}\n\n::slotted(*) {\n  margin-left: -6px;\n}\n</style>\n\n<div id="wrapper" inert>\n  <slot name="icon"></slot>\n  <sinch-text id="content" type="m" ellipsis></sinch-text>\n</div>\n';
+const templateHTML = '<style>:host{display:block;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{all:initial;display:flex;position:relative;box-sizing:border-box;height:40px;width:100%;padding:8px 16px;align-items:center;gap:10px;user-select:none;background-color:var(--sinch-comp-action-menu-color-default-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-action-menu-size-icon)}:host([data-selected])>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-selected)}:host(:hover)>#wrapper{background-color:var(--sinch-comp-action-menu-color-default-background-hover)}:host([disabled])>#wrapper{pointer-events:none;background-color:var(--sinch-comp-action-menu-color-disabled-background-initial);--sinch-global-color-text:var(--sinch-comp-action-menu-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-action-menu-color-disabled-icon-initial)}#content{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-action-menu-font-option)}::slotted(*){margin-left:-6px}</style><div id="wrapper" inert><slot name="icon"></slot><sinch-text id="content" type="m" ellipsis></sinch-text></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class ActionMenuOption extends NectaryElement {

package/alert/index.js

@@ -4,7 +4,7 @@ import "../text/index.js";
 import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { typeValues } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    gap: 8px;\n    align-items: center;\n    padding: 8px 16px;\n    box-sizing: border-box;\n    width: 100%;\n    min-height: 48px;\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-warning-default-background);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-error-default-background);\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color: var(--sinch-comp-alert-color-info-default-background);\n  }\n\n  #icon-info,\n  #icon-warn,\n  #icon-error {\n    display: none;\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-alert-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-alert-color-error-default-icon);\n  }\n\n  #icon-info {\n    --sinch-global-color-icon: var(--sinch-comp-alert-color-info-default-icon);\n  }\n\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\n  }\n\n  #text {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-rich-text-font: var(--sinch-comp-alert-font-body);\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-alert-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-alert-color-error-default-text);\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-alert-color-info-default-text);\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon>\n  <sinch-icon icons-version="2" name="triangle-exclamation"\n    id="icon-warn"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <sinch-rich-text id="text"></sinch-rich-text>\n  <slot name="action"></slot>\n  <slot name="close"></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;gap:8px;align-items:center;padding:8px 16px;box-sizing:border-box;width:100%;min-height:48px}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-alert-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-alert-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-alert-color-info-default-background)}#icon-error,#icon-info,#icon-warn{display:none}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-alert-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-alert-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-alert-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=warn]) #icon-warn{display:block}#text{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;--sinch-comp-rich-text-font:var(--sinch-comp-alert-font-body)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-alert-color-info-default-text)}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-warn"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><sinch-rich-text id="text"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Alert extends NectaryElement {

package/avatar/index.js

@@ -2,7 +2,7 @@ import { getAttribute, updateAttribute, getLiteralAttribute, updateLiteralAttrib
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { DEFAULT_SIZE, sizeValues } from "../utils/size.js";
 import { statusValues, getAvatarColorBg, getAvatarColorFg } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n  }\n\n  #wrapper {\n    position: relative;\n    width: var(--sinch-local-size);\n    height: var(--sinch-local-size);\n    border-radius: var(--sinch-comp-avatar-shape-radius);\n\n    --sinch-local-size: var(--sinch-comp-avatar-size-m);\n  }\n\n  :host([size="l"]) #wrapper {\n    --sinch-local-size: var(--sinch-comp-avatar-size-l);\n  }\n\n  :host([size="s"]) #wrapper {\n    --sinch-local-size: var(--sinch-comp-avatar-size-s);\n  }\n\n  #text {\n    display: block;\n    width: 100%;\n    height: 100%;\n    font: var(--sinch-comp-avatar-container-font-size-m-text);\n    line-height: calc(var(--sinch-local-size) - 2px);\n    text-transform: uppercase;\n    text-align: center;\n  }\n\n  :host([size="l"]) #text {\n    font: var(--sinch-comp-avatar-container-font-size-l-text);\n    line-height: calc(var(--sinch-local-size) - 2px);\n  }\n\n  :host([size="s"]) #text {\n    font: var(--sinch-comp-avatar-container-font-size-s-text);\n    line-height: calc(var(--sinch-local-size) - 2px);\n  }\n\n  #circle {\n    position: relative;\n    width: calc(100% - 2px);\n    height: calc(100% - 2px);\n    left: 1px;\n    top: 1px;\n    border-radius: 50%;\n    /* stylelint-disable-next-line property-no-vendor-prefix */\n    -webkit-mask: linear-gradient(#fff, #000);\n    mask: linear-gradient(#fff, #000);\n    background-color: var(--sinch-comp-avatar-container-color-default-background);\n    color: var(--sinch-comp-avatar-container-color-default-foreground);\n  }\n\n  #image {\n    display: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n\n  :host([src]:not([src=""])) #image {\n    display: block;\n  }\n\n  #person {\n    display: none;\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    fill: var(--sinch-comp-avatar-container-color-default-foreground);\n  }\n\n  :host(:not([src]):is(:not([alt]), [alt=""])) #person {\n    display: block;\n  }\n\n  #status-wrapper {\n    position: absolute;\n    left: calc(85% - 5px);\n    top: calc(85% - 5px);\n    width: 10px;\n    height: 10px;\n    padding: 1px;\n    box-sizing: border-box;\n    border-radius: 50%;\n    background-color: var(--sinch-comp-avatar-status-color-border);\n    display: none;\n    pointer-events: none;\n  }\n\n  #status {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n  }\n\n  :host([status="online"]) #status-wrapper,\n  :host([status="away"]) #status-wrapper,\n  :host([status="busy"]) #status-wrapper,\n  :host([status="offline"]) #status-wrapper {\n    display: block;\n  }\n\n  :host([status="online"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-online-default-background);\n  }\n\n  :host([status="away"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-away-default-background);\n  }\n\n  :host([status="busy"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-busy-default-background);\n  }\n\n  :host([status="offline"]) #status {\n    background-color: var(--sinch-comp-avatar-status-color-offline-default-background);\n  }\n</style>\n\n<div id="wrapper">\n  <div id="circle">\n    <span id="text"></span>\n    <img id="image" alt="" />\n    <svg id="person" viewBox="0 0 40 40" fill="none">\n      <path\n        d="M29.451 15.785a9.451 9.451 0 1 1-18.902 0 9.452 9.452 0 0 1 18.902 0ZM4.734 40.5c.119-7.085 5.899-12.792 13.012-12.792h4.508c7.113 0 12.893 5.707 13.012 12.792H4.734Z" />\n    </svg>\n  </div>\n  <div id="status-wrapper">\n    <div id="status"></div>\n  </div>\n</div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:var(--sinch-local-size);height:var(--sinch-local-size);border-radius:var(--sinch-comp-avatar-shape-radius);--sinch-local-size:var(--sinch-comp-avatar-size-m)}:host([size="l"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-l)}:host([size="s"]) #wrapper{--sinch-local-size:var(--sinch-comp-avatar-size-s)}#text{display:block;width:100%;height:100%;font:var(--sinch-comp-avatar-container-font-size-m-text);line-height:calc(var(--sinch-local-size) - 2px);text-transform:uppercase;text-align:center}:host([size="l"]) #text{font:var(--sinch-comp-avatar-container-font-size-l-text);line-height:calc(var(--sinch-local-size) - 2px)}:host([size="s"]) #text{font:var(--sinch-comp-avatar-container-font-size-s-text);line-height:calc(var(--sinch-local-size) - 2px)}#circle{position:relative;width:calc(100% - 2px);height:calc(100% - 2px);left:1px;top:1px;border-radius:50%;-webkit-mask:linear-gradient(#fff,#000);mask:linear-gradient(#fff,#000);background-color:var(--sinch-comp-avatar-container-color-default-background);color:var(--sinch-comp-avatar-container-color-default-foreground)}#image{display:none;position:absolute;left:0;top:0;width:100%;height:100%;object-fit:contain}:host([src]:not([src=""])) #image{display:block}#person{display:none;position:absolute;left:0;top:0;width:100%;height:100%;fill:var(--sinch-comp-avatar-container-color-default-foreground)}:host(:not([src]):is(:not([alt]),[alt=""])) #person{display:block}#status-wrapper{position:absolute;left:calc(85% - 5px);top:calc(85% - 5px);width:10px;height:10px;padding:1px;box-sizing:border-box;border-radius:50%;background-color:var(--sinch-comp-avatar-status-color-border);display:none;pointer-events:none}#status{width:8px;height:8px;border-radius:50%}:host([status=away]) #status-wrapper,:host([status=busy]) #status-wrapper,:host([status=offline]) #status-wrapper,:host([status=online]) #status-wrapper{display:block}:host([status=online]) #status{background-color:var(--sinch-comp-avatar-status-color-online-default-background)}:host([status=away]) #status{background-color:var(--sinch-comp-avatar-status-color-away-default-background)}:host([status=busy]) #status{background-color:var(--sinch-comp-avatar-status-color-busy-default-background)}:host([status=offline]) #status{background-color:var(--sinch-comp-avatar-status-color-offline-default-background)}</style><div id="wrapper"><div id="circle"><span id="text"></span> <img id="image" alt=""> <svg id="person" viewBox="0 0 40 40" fill="none"><path d="M29.451 15.785a9.451 9.451 0 1 1-18.902 0 9.452 9.452 0 0 1 18.902 0ZM4.734 40.5c.119-7.085 5.899-12.792 13.012-12.792h4.508c7.113 0 12.893 5.707 13.012 12.792H4.734Z"/></svg></div><div id="status-wrapper"><div id="status"></div></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Avatar extends NectaryElement {

package/badge/index.js

@@ -3,7 +3,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { DEFAULT_SIZE, sizeValues } from "../utils/size.js";
 import { modeValues } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: inline-flex;\n  flex-direction: column;\n  position: relative;\n}\n\n#badge-wrapper {\n  position: absolute;\n  left: 0;\n  top: 0;\n  width: fit-content;\n  border-radius: var(--sinch-comp-badge-shape-radius);\n  padding: 1px;\n  pointer-events: none;\n  background-color: var(--sinch-comp-badge-color-border);\n}\n\n#badge {\n  box-sizing: border-box;\n  color: var(--sinch-comp-badge-color-text);\n  background-color: var(--sinch-comp-badge-color-background);\n  width: 20px;\n  height: 20px;\n  border-radius: var(--sinch-comp-badge-shape-radius);\n}\n\n#badge.long {\n  width: fit-content;\n  padding: 0 5px;\n}\n\n#text {\n  display: block;\n  width: 100%;\n  height: 100%;\n  text-align: center;\n  font: var(--sinch-comp-badge-font-size-l);\n  line-height: 20px;\n  text-rendering: optimizelegibility;\n}\n\n:host([size="m"]) #badge-wrapper {\n  left: calc(100% - 8px);\n  top: -8px;\n}\n\n:host([size="m"]) #badge {\n  width: 14px;\n  height: 14px;\n}\n\n:host([size="m"]) #badge.long {\n  width: fit-content;\n  padding: 0 3px;\n}\n\n:host([size="m"]) #text {\n  font: var(--sinch-comp-badge-font-size-m);\n  line-height: 14px;\n}\n\n:host([size="s"]) #badge {\n  width: 8px;\n  height: 8px;\n  padding: 0;\n}\n\n:host([size="s"]) #text {\n  display: none;\n}\n\n:host([hidden]) #badge-wrapper {\n  display: none;\n}\n</style>\n\n<slot id="slot"></slot>\n<div id="badge-wrapper">\n  <div id="badge">\n    <span id="text"></span>\n  </div>\n</div>\n';
+const templateHTML = '<style>:host{display:inline-flex;flex-direction:column;position:relative}#badge-wrapper{position:absolute;left:0;top:0;width:fit-content;border-radius:var(--sinch-comp-badge-shape-radius);padding:1px;pointer-events:none;background-color:var(--sinch-comp-badge-color-border)}#badge{box-sizing:border-box;color:var(--sinch-comp-badge-color-text);background-color:var(--sinch-comp-badge-color-background);width:20px;height:20px;border-radius:var(--sinch-comp-badge-shape-radius)}#badge.long{width:fit-content;padding:0 5px}#text{display:block;width:100%;height:100%;text-align:center;font:var(--sinch-comp-badge-font-size-l);line-height:20px;text-rendering:optimizelegibility}:host([size="m"]) #badge-wrapper{left:calc(100% - 8px);top:-8px}:host([size="m"]) #badge{width:14px;height:14px}:host([size="m"]) #badge.long{width:fit-content;padding:0 3px}:host([size="m"]) #text{font:var(--sinch-comp-badge-font-size-m);line-height:14px}:host([size="s"]) #badge{width:8px;height:8px;padding:0}:host([size="s"]) #text{display:none}:host([hidden]) #badge-wrapper{display:none}</style><slot id="slot"></slot><div id="badge-wrapper"><div id="badge"><span id="text"></span></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Badge extends NectaryElement {