@nectary/components 5.0.1 → 5.0.3

package/segment-collapse/index.js

@@ -2,7 +2,7 @@ import "../icon/index.js";
 import { updateExplicitBooleanAttribute, isAttrTrue, updateBooleanAttribute, getBooleanAttribute } 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\n    --sinch-global-size-icon: 32px;\n  }\n\n  #icon-dropdown {\n    display: block;\n    will-change: transform;\n    transform: rotate(180deg);\n  }\n\n  :host([value]:not([value="false"])) #icon-dropdown {\n    transform: rotate(0deg);\n  }\n</style>\n\n<sinch-button id="button" size="s">\n  <sinch-icon icons-version="2" name="fa-chevron-down"\n    id="icon-dropdown"\n    slot="icon"\n  ></sinch-icon>\n</sinch-button>\n';
+const templateHTML = '<style>:host{display:block;--sinch-global-size-icon:32px}#icon-dropdown{display:block;will-change:transform;transform:rotate(180deg)}:host([value]:not([value=false])) #icon-dropdown{transform:rotate(0)}</style><sinch-button id="button" size="s"><sinch-icon icons-version="2" name="fa-chevron-down" id="icon-dropdown" slot="icon"></sinch-icon></sinch-button>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SegmentCollapse extends NectaryElement {

package/segmented-control/index.js

@@ -2,7 +2,7 @@ import { updateAttribute, getAttribute, getBooleanAttribute, updateBooleanAttrib
 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  outline: none;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 0;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SegmentedControl extends NectaryElement {

package/segmented-control-option/index.js

@@ -1,7 +1,7 @@
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute } 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  outline: none;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 12px;\n  width: 100%;\n  height: 32px;\n  padding: 0 16px;\n  box-sizing: border-box;\n  color: var(--sinch-local-color-text);\n  background-color: var(--sinch-local-color-background);\n  cursor: pointer;\n\n  --sinch-local-color-text: var(--sinch-comp-segmented-control-color-default-text-initial);\n  --sinch-local-shape-radius: var(--sinch-comp-segmented-control-shape-radius);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-default-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-default-background-initial);\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-segmented-control-size-icon);\n}\n\n:host(:hover) {\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-default-background-hover);\n}\n\n:host(:first-child) #wrapper {\n  border-top-left-radius: var(--sinch-local-shape-radius);\n  border-bottom-left-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:last-child) #wrapper {\n  border-top-right-radius: var(--sinch-local-shape-radius);\n  border-bottom-right-radius: var(--sinch-local-shape-radius);\n}\n\n:host([data-checked]) #wrapper {\n  --sinch-local-color-text: var(--sinch-comp-segmented-control-color-checked-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-checked-icon-initial);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-checked-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-checked-background-initial);\n}\n\n:host([disabled]) #wrapper {\n  --sinch-local-color-text: var(--sinch-comp-segmented-control-color-disabled-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-disabled-icon-initial);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-disabled-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-disabled-background-initial);\n}\n\n#border {\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--sinch-local-color-border);\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n:host(:first-child) #border {\n  border-top-left-radius: var(--sinch-local-shape-radius);\n  border-bottom-left-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:last-child) #border {\n  border-top-right-radius: var(--sinch-local-shape-radius);\n  border-bottom-right-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:not(:first-child)) #border {\n  border-left-width: 0;\n}\n\n:host([data-checked]) #border {\n  border-width: 2px;\n}\n\n:host([data-checked]:not(:first-child)) #border {\n  left: -1px;\n}\n\n#outline {\n  display: none;\n  position: absolute;\n  inset: -3px;\n  border: 2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);\n  pointer-events: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n:host(:focus-visible) #outline {\n  display: block;\n}\n\n:host(:first-child) #outline {\n  border-top-left-radius: calc(var(--sinch-local-shape-radius) + 3px);\n  border-bottom-left-radius: calc(var(--sinch-local-shape-radius) + 3px);\n}\n\n:host(:last-child) #outline {\n  border-top-right-radius: calc(var(--sinch-local-shape-radius) + 3px);\n  border-bottom-right-radius: calc(var(--sinch-local-shape-radius) + 3px);\n}\n\n:host(:not(:first-child)) #outline {\n  left: -4px;\n}\n\n#content {\n  font: var(--sinch-comp-segmented-control-font-label);\n  flex-shrink: 1;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  pointer-events: none;\n}\n\n::slotted(*) {\n  display: block;\n  pointer-events: none;\n}\n</style>\n\n<div id="wrapper">\n  <slot name="icon"></slot>\n  <span id="content"></span>\n  <div id="border"></div>\n  <div id="outline"></div>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:12px;width:100%;height:32px;padding:0 16px;box-sizing:border-box;color:var(--sinch-local-color-text);background-color:var(--sinch-local-color-background);cursor:pointer;--sinch-local-color-text:var(--sinch-comp-segmented-control-color-default-text-initial);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon)}:host(:hover){--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-local-color-text:var(--sinch-comp-segmented-control-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}:host([disabled]) #wrapper{--sinch-local-color-text:var(--sinch-comp-segmented-control-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial)}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{border-left-width:0}:host([data-checked]) #border{border-width:2px}:host([data-checked]:not(:first-child)) #border{left:-1px}#outline{display:none;position:absolute;inset:-3px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);pointer-events:none;box-sizing:border-box;z-index:1}:host(:focus-visible) #outline{display:block}:host(:first-child) #outline{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #outline{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:not(:first-child)) #outline{left:-4px}#content{font:var(--sinch-comp-segmented-control-font-label);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;pointer-events:none}::slotted(*){display:block;pointer-events:none}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><div id="border"></div><div id="outline"></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SegmentedControlOption extends NectaryElement {

package/segmented-icon-control/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  outline: none;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  box-sizing: border-box;\n  position: relative;\n  z-index: 0;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;width:100%;box-sizing:border-box;position:relative;z-index:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SegmentedIconControl extends NectaryElement {

package/segmented-icon-control-option/index.js

@@ -1,7 +1,7 @@
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute } 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  outline: none;\n}\n\n#wrapper {\n  position: relative;\n  width: 56px;\n  height: 32px;\n  padding: 3px 16px;\n  box-sizing: border-box;\n  background-color: var(--sinch-local-color-background);\n  cursor: pointer;\n\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-segmented-control-size-icon);\n  --sinch-local-shape-radius: var(--sinch-comp-segmented-control-shape-radius);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-default-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-default-background-initial);\n}\n\n:host(:hover) {\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-default-background-hover);\n}\n\n:host(:first-child) #wrapper {\n  border-top-left-radius: var(--sinch-local-shape-radius);\n  border-bottom-left-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:last-child) #wrapper {\n  border-top-right-radius: var(--sinch-local-shape-radius);\n  border-bottom-right-radius: var(--sinch-local-shape-radius);\n}\n\n:host([data-checked]) #wrapper {\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-checked-icon-initial);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-checked-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-checked-background-initial);\n}\n\n:host([disabled]) #wrapper {\n  --sinch-global-color-icon: var(--sinch-comp-segmented-control-color-disabled-icon-initial);\n  --sinch-local-color-border: var(--sinch-comp-segmented-control-color-disabled-border-initial);\n  --sinch-local-color-background: var(--sinch-comp-segmented-control-color-disabled-background-initial);\n\n  cursor: initial;\n}\n\n#border {\n  position: absolute;\n  inset: 0;\n  border: 1px solid var(--sinch-local-color-border);\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n:host(:first-child) #border {\n  border-top-left-radius: var(--sinch-local-shape-radius);\n  border-bottom-left-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:last-child) #border {\n  border-top-right-radius: var(--sinch-local-shape-radius);\n  border-bottom-right-radius: var(--sinch-local-shape-radius);\n}\n\n:host(:not(:first-child)) #border {\n  border-left-width: 0;\n}\n\n:host([data-checked]) #border {\n  border-width: 2px;\n}\n\n:host([data-checked]:not(:first-child)) #border {\n  left: -1px;\n}\n\n#outline {\n  display: none;\n  position: absolute;\n  inset: -3px;\n  border: 2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);\n  pointer-events: none;\n  box-sizing: border-box;\n  z-index: 1;\n}\n\n:host(:focus-visible) #outline {\n  display: block;\n}\n\n:host(:first-child) #outline {\n  border-top-left-radius: calc(var(--sinch-local-shape-radius) + 3px);\n  border-bottom-left-radius: calc(var(--sinch-local-shape-radius) + 3px);\n}\n\n:host(:last-child) #outline {\n  border-top-right-radius: calc(var(--sinch-local-shape-radius) + 3px);\n  border-bottom-right-radius: calc(var(--sinch-local-shape-radius) + 3px);\n}\n\n:host(:not(:first-child)) #outline {\n  left: -4px;\n}\n\n::slotted(*) {\n  display: block;\n  pointer-events: none;\n}\n</style>\n\n<div id="wrapper">\n  <slot name="icon"></slot>\n  <div id="border"></div>\n  <div id="outline"></div>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;background-color:var(--sinch-local-color-background);cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial)}:host(:hover){--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial);cursor:initial}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{border-left-width:0}:host([data-checked]) #border{border-width:2px}:host([data-checked]:not(:first-child)) #border{left:-1px}#outline{display:none;position:absolute;inset:-3px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);pointer-events:none;box-sizing:border-box;z-index:1}:host(:focus-visible) #outline{display:block}:host(:first-child) #outline{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #outline{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:not(:first-child)) #outline{left:-4px}::slotted(*){display:block;pointer-events:none}</style><div id="wrapper"><slot name="icon"></slot><div id="border"></div><div id="outline"></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SegmentedIconControlOption extends NectaryElement {

package/select-button/index.js

@@ -5,7 +5,7 @@ import { isAttrEqual, updateAttribute, isAttrTrue, updateBooleanAttribute, getAt
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { sizeValues, DEFAULT_SIZE } from "../utils/size.js";
-const templateHTML = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n    cursor: pointer;\n  }\n\n  :host([disabled]) {\n    cursor: initial;\n  }\n\n  #wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: 8px;\n    box-sizing: border-box;\n    width: 100%;\n    height: var(--sinch-local-size);\n    padding: 0 8px 0 12px;\n    background-color:\n      var(\n        --sinch-comp-select-button-color-default-background-initial\n      );\n    border-radius: var(--sinch-local-shape-radius);\n\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-m);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-m);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-m\n      );\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-select-button-color-default-icon-initial\n      );\n  }\n\n  :host([data-size="l"]) > #wrapper {\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-l);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-l);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-l\n      );\n  }\n\n  :host([data-size="m"]) > #wrapper {\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-m);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-m);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-m\n      );\n  }\n\n  :host([data-size="s"]) > #wrapper {\n    --sinch-local-size: var(--sinch-comp-select-button-size-container-s);\n    --sinch-global-size-icon: var(--sinch-comp-select-button-size-icon-s);\n    --sinch-local-shape-radius:\n      var(\n        --sinch-comp-select-button-shape-radius-size-s\n      );\n  }\n\n  :host([data-size="l"]) #wrapper {\n    padding: 0 12px;\n  }\n\n  :host([data-size="m"]) #wrapper {\n    padding: 0 8px 0 12px;\n  }\n\n  :host([data-size="s"]) #wrapper {\n    padding: 0 4px 0 12px;\n  }\n\n  :host([disabled]) #wrapper {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-select-button-color-disabled-icon-initial\n      );\n  }\n\n  #text {\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-button-font-input);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-default-text-initial\n      );\n  }\n\n  #text:empty {\n    display: none;\n  }\n\n  #placeholder {\n    display: none;\n    flex: 1;\n    min-width: 0;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-button-font-placeholder);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-default-placeholder-initial\n      );\n  }\n\n  #text:empty + #placeholder {\n    display: block;\n  }\n\n  #border {\n    position: absolute;\n    border:\n      1px solid\n      var(--sinch-comp-select-button-color-default-border-initial);\n    border-radius: var(--sinch-local-shape-radius);\n    inset: 0;\n    pointer-events: none;\n  }\n\n  :host(:focus-visible) #border {\n    border-color: var(--sinch-comp-select-button-color-default-border-focus);\n    border-width: 2px;\n  }\n\n  :host([invalid]) #border {\n    border-color: var(--sinch-comp-select-button-color-invalid-border-initial);\n  }\n\n  :host([disabled]) #border {\n    border-color: var(--sinch-comp-select-button-color-disabled-border-initial);\n  }\n\n  :host([disabled]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-disabled-text-initial\n      );\n  }\n\n  /* stylelint-disable-next-line no-descending-specificity */\n  :host([disabled]) #placeholder {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-button-color-disabled-placeholder-initial\n      );\n  }\n\n  #left {\n    display: flex;\n    flex-direction: row;\n    align-self: stretch;\n    align-items: center;\n    gap: 4px;\n    margin-left: -4px;\n  }\n\n  #left.empty {\n    display: none;\n  }\n\n  #dropdown-icon {\n    margin-left: -4px;\n  }\n</style>\n\n<div id="wrapper" inert>\n  <div id="border"></div>\n  <div id="left">\n    <slot name="left"></slot>\n  </div>\n  <slot name="icon"></slot>\n  <sinch-text id="text" type="m" ellipsis></sinch-text>\n  <sinch-text id="placeholder" type="m" ellipsis></sinch-text>\n  <sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon>\n</div>\n';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon icons-version="2" name="fa-chevron-down" id="dropdown-icon"></sinch-icon></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SelectButton extends NectaryElement {

package/select-menu/index.js

@@ -10,7 +10,7 @@ import { debounceTimeout } from "../utils/debounce.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual } from "../utils/event-target.js";
 import { setFormValue, CSVToFormData } from "../utils/form.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  #listbox {\n    overflow-y: auto;\n    max-height: var(--sinch-comp-select-menu-font-max-height);\n  }\n\n  #search {\n    display: none;\n    margin: 10px;\n  }\n\n  #search.active {\n    display: block;\n  }\n\n  #search-clear:not(.active) {\n    display: none;\n  }\n\n  #not-found {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n    height: 30px;\n    margin-bottom: 10px;\n    pointer-events: none;\n    user-select: none;\n\n    --sinch-comp-text-font: var(--sinch-comp-select-menu-font-not-found-text);\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-select-menu-color-default-not-found-text-initial\n      );\n  }\n\n  #not-found:not(.active) {\n    display: none;\n  }\n\n  ::slotted(.hidden) {\n    display: none;\n  }\n\n  ::slotted(sinch-title) {\n    padding: 8px 16px;\n\n    --sinch-global-color-text: var(--sinch-comp-select-menu-color-default-title-initial);\n  }\n</style>\n\n<sinch-input id="search" size="s" placeholder="Search">\n  <sinch-icon icons-version="2" name="magnifying-glass"\n    id="icon-search"\n    slot="icon"\n  ></sinch-icon>\n  <sinch-button id="search-clear" slot="right">\n    <sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon>\n  </sinch-button>\n</sinch-input>\n<div id="not-found">\n  <sinch-text type="m">No results</sinch-text>\n</div>\n<div id="listbox" role="presentation">\n  <slot></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto;max-height:var(--sinch-comp-select-menu-font-max-height)}#search{display:none;margin:10px}#search.active{display:block}#search-clear:not(.active){display:none}#not-found{display:flex;align-items:center;justify-content:center;width:100%;height:30px;margin-bottom:10px;pointer-events:none;user-select:none;--sinch-comp-text-font:var(--sinch-comp-select-menu-font-not-found-text);--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-not-found-text-initial)}#not-found:not(.active){display:none}::slotted(.hidden){display:none}::slotted(sinch-title){padding:8px 16px;--sinch-global-color-text:var(--sinch-comp-select-menu-color-default-title-initial)}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon icons-version="2" name="magnifying-glass" id="icon-search" slot="icon"></sinch-icon><sinch-button id="search-clear" slot="right"><sinch-icon icons-version="2" name="fa-xmark" slot="icon"></sinch-icon></sinch-button></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const NUM_ITEMS_SEARCH = 7;
 const template = document.createElement("template");

package/select-menu-option/index.js

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

package/skeleton/index.js

@@ -1,7 +1,7 @@
 import { shouldReduceMotion, isAttrTrue, getCssVar, attrValueToInteger } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getUid } from "../utils/uid.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n    height: 100%;\n    box-sizing: border-box;\n    overflow: hidden;\n  }\n\n  :host([card]:not([card="false"])) > #wrapper {\n    padding: 16px;\n    background-color: var(--sinch-sys-color-surface-primary-default);\n    border-radius: var(--sinch-sys-shape-radius-l);\n    border: 1px solid var(--sinch-sys-color-border-subtle);\n  }\n\n  #shimmer {\n    position: absolute;\n    inset: 0;\n    background-image:\n      linear-gradient(\n        90deg,\n        transparent 0,\n        var(--sinch-sys-color-surface-tertiary-default) 100px,\n        transparent 200px\n      );\n    clip-path: url("#clip");\n  }\n\n  #svg {\n    display: block;\n    width: 0;\n    height: 0;\n  }\n</style>\n\n<svg id="svg">\n  <defs>\n    <clipPath id="clip"></clipPath>\n  </defs>\n</svg>\n<div id="wrapper">\n  <slot></slot>\n  <div id="shimmer"></div>\n</div>\n';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-sys-color-surface-primary-default);border-radius:var(--sinch-sys-shape-radius-l);border:1px solid var(--sinch-sys-color-border-subtle)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-sys-color-surface-tertiary-default) 100px,transparent 200px);clip-path:url("#clip")}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 const ANIMATION_DURATION = 2e3;

package/skeleton-item/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n    height: var(--sinch-sys-size-m);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-m);\n  }\n\n  :host([size="xs"]) {\n    height: var(--sinch-sys-size-xs);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-xs);\n  }\n\n  :host([size="s"]) {\n    height: var(--sinch-sys-size-s);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-s);\n  }\n\n  :host([size="m"]) {\n    height: var(--sinch-sys-size-m);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-m);\n  }\n\n  :host([size="l"]) {\n    height: var(--sinch-sys-size-l);\n\n    --sinch-local-shape-radius: var(--sinch-sys-shape-radius-l);\n  }\n\n  #content {\n    height: 100%;\n    background-color: var(--sinch-sys-color-border-subtle);\n    border-radius: var(--sinch-local-shape-radius);\n  }\n</style>\n\n<div id="content"></div>\n';
+const templateHTML = '<style>:host{display:block;height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size=xs]){height:var(--sinch-sys-size-xs);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-xs)}:host([size="s"]){height:var(--sinch-sys-size-s);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-s)}:host([size="m"]){height:var(--sinch-sys-size-m);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-m)}:host([size="l"]){height:var(--sinch-sys-size-l);--sinch-local-shape-radius:var(--sinch-sys-shape-radius-l)}#content{height:100%;background-color:var(--sinch-sys-color-border-subtle);border-radius:var(--sinch-local-shape-radius)}</style><div id="content"></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class SkeletonItem extends NectaryElement {

package/spinner/index.js

@@ -2,7 +2,7 @@ import { subscribeContext } from "../utils/context.js";
 import { updateAttribute, updateLiteralAttribute, getLiteralAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { sizeValues, DEFAULT_SIZE } from "../utils/size.js";
-const templateHTML = '<style>\n@keyframes spinner {\n  0% {\n    transform: rotate(0deg);\n  }\n\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n:host {\n  display: block;\n}\n\n:host([data-size="l"]) {\n  width: 50px;\n  height: 50px;\n  contain: strict;\n}\n\n:host([data-size="m"]) {\n  width: 24px;\n  height: 24px;\n  contain: strict;\n}\n\n:host([data-size="s"]) {\n  width: 16px;\n  height: 16px;\n  contain: strict;\n}\n\n#spinner-size-l,\n#spinner-size-m,\n#spinner-size-s {\n  display: none;\n  will-change: transform;\n}\n\n:host([data-size="l"]) > #spinner-size-l {\n  display: block;\n  animation: 1s linear infinite spinner;\n}\n\n:host([data-size="m"]) > #spinner-size-m {\n  display: block;\n  animation: 1s linear infinite spinner;\n}\n\n:host([data-size="s"]) > #spinner-size-s {\n  display: block;\n  animation: 1s linear infinite spinner;\n}\n\n.bg {\n  opacity: 0.3;\n  stroke: var(--sinch-global-color-icon, var(--sinch-sys-color-text-default));\n}\n\n.fg {\n  stroke: var(--sinch-global-color-icon, var(--sinch-sys-color-text-default));\n}\n</style>\n\n<svg id="spinner-size-l" width="50" height="50" fill="none">\n  <circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/>\n  <path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/>\n</svg>\n<svg id="spinner-size-m" width="24" height="24" fill="none">\n  <circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/>\n  <path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/>\n</svg>\n<svg id="spinner-size-s" width="16" height="16" fill="none">\n  <circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/>\n  <path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/>\n</svg>\n';
+const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}:host([data-size="l"]){width:50px;height:50px;contain:strict}:host([data-size="m"]){width:24px;height:24px;contain:strict}:host([data-size="s"]){width:16px;height:16px;contain:strict}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg> <svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg> <svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Spinner extends NectaryElement {

package/table/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = "<style>\n:host {\n  display: table;\n}\n</style>\n\n<slot></slot>\n";
+const templateHTML = "<style>:host{display:table}</style><slot></slot>";
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Table extends NectaryElement {

package/table-body/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = "<style>\n:host {\n  display: table-row-group;\n}\n</style>\n\n<slot></slot>\n";
+const templateHTML = "<style>:host{display:table-row-group}</style><slot></slot>";
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class TableBody extends NectaryElement {

package/table-cell/index.js

@@ -1,7 +1,7 @@
 import { updateLiteralAttribute, getLiteralAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { alignValues } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: table-cell;\n  vertical-align: top;\n  border-bottom: 1px solid var(--sinch-comp-table-color-cell-default-border-initial);\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  min-height: 48px;\n  box-sizing: border-box;\n  padding: 8px;\n}\n\n:host([align="end"]) #wrapper {\n  text-align: end;\n  align-items: flex-end;\n}\n\n:host([align="center"]) #wrapper {\n  text-align: center;\n  align-items: center;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-comp-table-color-cell-default-border-initial)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class TableCell extends NectaryElement {

package/table-head/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = "<style>\n:host {\n  display: table-header-group;\n}\n</style>\n\n<slot></slot>\n";
+const templateHTML = "<style>:host{display:table-header-group}</style><slot></slot>";
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class TableHead extends NectaryElement {

package/table-head-cell/index.js

@@ -2,7 +2,7 @@ import "../text/index.js";
 import { alignValues } from "../table-cell/utils.js";
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getAttribute, updateLiteralAttribute, getLiteralAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: table-cell;\n  border-bottom: 1px solid var(--sinch-comp-table-color-head-cell-default-border-initial);\n  vertical-align: middle;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  height: 100%;\n  padding: 8px;\n  box-sizing: border-box;\n\n  --sinch-global-color-icon: var(--sinch-comp-table-color-head-cell-default-icon-initial);\n}\n\n#text {\n  flex-shrink: 1;\n  min-width: 0;\n\n  --sinch-global-color-text: var(--sinch-comp-table-color-head-cell-default-text-initial);\n}\n\n#text:empty {\n  display: none;\n}\n\n:host([align="center"]) > #wrapper {\n  justify-content: center;\n}\n\n:host([align="end"]) > #wrapper {\n  justify-content: flex-end;\n}\n\n:host([fit]) {\n  /* 1px instead of 0, because of Safari */\n  width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <slot name="checkbox"></slot>\n  <slot name="left"></slot>\n  <sinch-text id="text" type="m"></sinch-text>\n  <slot name="tooltip"></slot>\n  <slot name="right"></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-comp-table-color-head-cell-default-border-initial);vertical-align:middle}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;--sinch-global-color-icon:var(--sinch-comp-table-color-head-cell-default-icon-initial)}#text{flex-shrink:1;min-width:0;--sinch-global-color-text:var(--sinch-comp-table-color-head-cell-default-text-initial)}#text:empty{display:none}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host([fit]){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><sinch-text id="text" type="m"></sinch-text><slot name="tooltip"></slot><slot name="right"></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class TableHeadCell extends NectaryElement {

package/table-row/index.js

@@ -1,6 +1,6 @@
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = "<style>\n:host {\n  display: table-row;\n  background-color: var(--sinch-comp-table-color-row-default-background-initial);\n}\n\n:host([selected]) {\n  background-color: var(--sinch-comp-table-color-row-checked-background-initial);\n}\n\n:host(:hover) {\n  background-color: var(--sinch-comp-table-color-row-default-background-hover);\n}\n\n:host([sticky]) ::slotted(sinch-table-head-cell) {\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background-color: var(--sinch-comp-table-color-row-default-background-sticky);\n}\n\n:host(:last-child) ::slotted(sinch-table-cell) {\n  border-bottom: none;\n}\n</style>\n\n<slot></slot>\n";
+const templateHTML = "<style>:host{display:table-row;background-color:var(--sinch-comp-table-color-row-default-background-initial)}:host([selected]){background-color:var(--sinch-comp-table-color-row-checked-background-initial)}:host(:hover){background-color:var(--sinch-comp-table-color-row-default-background-hover)}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-comp-table-color-row-default-background-sticky)}:host(:last-child) ::slotted(sinch-table-cell){border-bottom:none}</style><slot></slot>";
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class TableRow extends NectaryElement {

package/tabs/index.js

@@ -2,7 +2,7 @@ import { updateAttribute, getAttribute, getBooleanAttribute, updateBooleanAttrib
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  width: 100%;\n  height: 40px;\n  border-bottom: 1px solid var(--sinch-comp-tab-color-default-border-initial);\n  box-sizing: border-box;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-comp-tab-color-default-border-initial);box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Tabs extends NectaryElement {

package/tabs-icon-option/index.js

@@ -1,6 +1,6 @@
 import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute, isAttrEqual, isAttrTrue, updateExplicitBooleanAttribute } 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#button {\n  all: initial;\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 12px 16px 0;\n  box-sizing: border-box;\n  cursor: pointer;\n  background-color: var(--sinch-comp-tab-color-default-background-initial);\n  border-top-left-radius: var(--sinch-comp-tab-shape-radius);\n  border-top-right-radius: var(--sinch-comp-tab-shape-radius);\n  height: 39px;\n\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-tab-size-icon);\n}\n\n#button:hover {\n  background-color: var(--sinch-comp-tab-color-default-background-hover);\n}\n\n/* Outline */\n#button:focus-visible::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  bottom: -3px;\n  border: 2px solid var(--sinch-comp-tab-color-default-outline-focus);\n  border-top-left-radius: var(--sinch-comp-tab-shape-radius);\n  border-top-right-radius: var(--sinch-comp-tab-shape-radius);\n  pointer-events: none;\n}\n\n#button:disabled {\n  cursor: unset;\n  pointer-events: none;\n\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-disabled-icon-initial);\n}\n\n:host([data-checked]) #button {\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-checked-icon-initial);\n}\n\n/* Underline */\n:host([data-checked]) #button::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -1px;\n  pointer-events: none;\n  border-top: 2px solid var(--sinch-comp-tab-color-checked-border-initial);\n}\n\n::slotted(*) {\n  display: block;\n}\n</style>\n\n<sinch-tooltip id="tooltip">\n  <button id="button" tabindex="0">\n    <slot name="icon"></slot>\n  </button>\n</sinch-tooltip>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button" tabindex="0"><slot name="icon"></slot></button></sinch-tooltip>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class TabsIconOption extends NectaryElement {

package/tabs-option/index.js

@@ -1,7 +1,7 @@
 import "../text/index.js";
 import { isAttrEqual, isAttrTrue, updateBooleanAttribute, updateExplicitBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#button {\n  all: initial;\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  padding: 12px 16px;\n  box-sizing: border-box;\n  cursor: pointer;\n  background-color: var(--sinch-comp-tab-color-default-background-initial);\n  border-top-left-radius: var(--sinch-comp-tab-shape-radius);\n  border-top-right-radius: var(--sinch-comp-tab-shape-radius);\n  height: 39px;\n\n  --sinch-global-color-text: var(--sinch-comp-tab-color-default-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-tab-size-icon);\n}\n\n#button:hover {\n  background-color: var(--sinch-comp-tab-color-default-background-hover);\n}\n\n/* Outline */\n#button:focus-visible::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  bottom: -3px;\n  border: 2px solid var(--sinch-comp-tab-color-default-outline-focus);\n  border-top-left-radius: var(--sinch-comp-tab-shape-radius);\n  border-top-right-radius: var(--sinch-comp-tab-shape-radius);\n  pointer-events: none;\n}\n\n#button:disabled {\n  cursor: unset;\n  pointer-events: none;\n\n  --sinch-global-color-text: var(--sinch-comp-tab-color-disabled-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-disabled-icon-initial);\n}\n\n:host([data-checked]) #button {\n  --sinch-global-color-text: var(--sinch-comp-tab-color-checked-text-initial);\n  --sinch-global-color-icon: var(--sinch-comp-tab-color-checked-icon-initial);\n}\n\n/* Underline */\n:host([data-checked]) #button::before {\n  content: "";\n  position: absolute;\n  left: 0;\n  right: 0;\n  bottom: -1px;\n  pointer-events: none;\n  border-top: 2px solid var(--sinch-comp-tab-color-checked-border-initial);\n}\n\n#text {\n  flex-shrink: 1;\n  flex-basis: auto;\n  min-width: 0;\n\n  --sinch-comp-text-font: var(--sinch-comp-tab-font-label);\n}\n\n::slotted(*) {\n  display: block;\n}\n</style>\n\n<button id="button" tabindex="0">\n  <slot name="icon"></slot>\n  <sinch-text id="text" type="m" ellipsis></sinch-text>\n</button>\n';
+const templateHTML = '<style>:host{display:block}#button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:12px 16px;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-text:var(--sinch-comp-tab-color-default-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-global-color-text:var(--sinch-comp-tab-color-disabled-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-text:var(--sinch-comp-tab-color-checked-text-initial);--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block}</style><button id="button" tabindex="0"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class TabsOption extends NectaryElement {

package/tag/index.js

@@ -3,7 +3,7 @@ import "../tooltip/index.js";
 import { getAttribute, updateAttribute, getBooleanAttribute, updateBooleanAttribute, isAttrEqual, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getTagColorBg, getTagColorFg } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: inline-block;\n  vertical-align: middle;\n  outline: none;\n}\n\n:host([ellipsis]) {\n  display: inline;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  height: var(--sinch-comp-tag-size-container-m);\n  padding: 0 9px;\n  border-radius: var(--sinch-comp-tag-shape-radius);\n  background-color: var(--sinch-comp-tag-color-default-background);\n  box-sizing: border-box;\n  user-select: none;\n\n  --sinch-global-color-text: var(--sinch-comp-tag-color-default-foreground);\n  --sinch-global-color-icon: var(--sinch-comp-tag-color-default-foreground);\n  --sinch-global-size-icon: var(--sinch-comp-tag-size-icon-m);\n}\n\n:host([small]) #wrapper {\n  height: var(--sinch-comp-tag-size-container-s);\n  padding: 0 8px;\n\n  --sinch-global-size-icon: var(--sinch-comp-tag-size-icon-s);\n}\n\n#text {\n  flex: 1;\n\n  --sinch-comp-text-font: var(--sinch-comp-tag-font-size-m-label);\n}\n\n:host([small]) #text {\n  --sinch-comp-text-font: var(--sinch-comp-tag-font-size-s-label);\n}\n\n::slotted(*) {\n  margin-left: -4px;\n}\n\n</style>\n\n<sinch-tooltip id="tooltip" type="fast">\n  <div id="wrapper">\n    <slot name="icon"></slot>\n    <sinch-text id="text" type="s" ellipsis></sinch-text>\n  </div>\n</sinch-tooltip>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}:host([ellipsis]){display:inline}#wrapper{display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:var(--sinch-comp-tag-size-container-m);padding:0 9px;border-radius:var(--sinch-comp-tag-shape-radius);background-color:var(--sinch-comp-tag-color-default-background);box-sizing:border-box;user-select:none;--sinch-global-color-text:var(--sinch-comp-tag-color-default-foreground);--sinch-global-color-icon:var(--sinch-comp-tag-color-default-foreground);--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-m)}:host([small]) #wrapper{height:var(--sinch-comp-tag-size-container-s);padding:0 8px;--sinch-global-size-icon:var(--sinch-comp-tag-size-icon-s)}#text{flex:1;--sinch-comp-text-font:var(--sinch-comp-tag-font-size-m-label)}:host([small]) #text{--sinch-comp-text-font:var(--sinch-comp-tag-font-size-s-label)}::slotted(*){margin-left:-4px}</style><sinch-tooltip id="tooltip" type="fast"><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div></sinch-tooltip>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Tag extends NectaryElement {

package/text/index.js

@@ -1,7 +1,7 @@
 import { isAttrEqual, updateBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, getBooleanAttribute, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { typeValues } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    text-align: var(--sinch-comp-text-align);\n    display: block;\n    font: var(--sinch-comp-text-font);\n    color: var(--sinch-global-color-text, var(--sinch-sys-color-text-default));\n\n    --sinch-comp-text-font: var(--sinch-sys-font-body-m);\n    --sinch-comp-text-align: unset;\n  }\n\n  :host([inline]) {\n    display: inline;\n  }\n\n  :host([type="s"]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-s);\n  }\n\n  :host([type="xs"]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-xs);\n  }\n\n  :host([type="xxs"]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-xxs);\n  }\n\n  :host([type="m"][emphasized]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-emphasize);\n  }\n\n  :host([type="s"][emphasized]) {\n    --sinch-comp-text-font: var(--sinch-sys-font-body-emphasize-s);\n  }\n\n  :host([ellipsis]) {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n\n    --sinch-global-text-white-space: nowrap;\n  }\n</style>\n\n<slot></slot>';
+const templateHTML = '<style>:host{text-align:var(--sinch-comp-text-align);display:block;font:var(--sinch-comp-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));--sinch-comp-text-font:var(--sinch-sys-font-body-m);--sinch-comp-text-align:unset}:host([inline]){display:inline}:host([type="s"]){--sinch-comp-text-font:var(--sinch-sys-font-body-s)}:host([type=xs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xs)}:host([type=xxs]){--sinch-comp-text-font:var(--sinch-sys-font-body-xxs)}:host([type="m"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize)}:host([type="s"][emphasized]){--sinch-comp-text-font:var(--sinch-sys-font-body-emphasize-s)}:host([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Text extends NectaryElement {

package/textarea/index.js

@@ -5,7 +5,7 @@ import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { setFormValue } from "../utils/form.js";
 import { DEFAULT_SIZE } from "../utils/size.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  background-color: var(--sinch-comp-textarea-color-default-background-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  padding-right: 2px;\n  overflow: hidden;\n\n  --sinch-local-shape-radius: var(--sinch-comp-textarea-shape-radius);\n}\n\n#input {\n  all: initial;\n  display: block;\n  font: var(--sinch-comp-textarea-font-input);\n  color: var(--sinch-comp-textarea-color-default-text-initial);\n  resize: none;\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  padding: 8px 10px 8px 12px;\n  border: none;\n  box-sizing: border-box;\n}\n\n/* #input::-webkit-resizer {\n\n} */\n\n#input::placeholder {\n  color: var(--sinch-comp-textarea-color-default-text-placeholder);\n  opacity: 1;\n}\n\n#input:disabled {\n  color: var(--sinch-comp-textarea-color-disabled-text-initial);\n  -webkit-text-fill-color: var(--sinch-comp-textarea-color-disabled-text-initial);\n}\n\n#border {\n  position: absolute;\n  border: 1px solid var(--sinch-comp-textarea-color-default-border-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  inset: 0;\n  pointer-events: none;\n}\n\n:host([invalid]) #border {\n  border-color: var(--sinch-comp-textarea-color-invalid-border-initial);\n}\n\n#input:focus + #border {\n  border-color: var(--sinch-comp-textarea-color-default-border-focus);\n  border-width: 2px;\n}\n\n#input:disabled + #border {\n  border-color: var(--sinch-comp-textarea-color-disabled-border-initial);\n}\n\n#bottom {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 12px 4px 4px;\n}\n\n#bottom.empty {\n  display: none;\n}\n\n:host([resizable]) #bottom {\n  padding-right: calc(var(--sinch-comp-textarea-size-resize-handle) + 4px);\n}\n\n#resize-handle {\n  display: none;\n  position: absolute;\n  width: var(--sinch-comp-textarea-size-resize-handle);\n  height: var(--sinch-comp-textarea-size-resize-handle);\n  bottom: 0;\n  right: 0;\n  cursor: ns-resize;\n}\n\n:host([resizable]) #resize-handle {\n  display: block;\n}\n\n#resize-icon {\n  display: block;\n  pointer-events: none;\n  fill: var(--sinch-comp-textarea-color-default-border-initial);\n}\n</style>\n\n<div id="wrapper">\n  <textarea id="input"></textarea>\n  <div id="border"></div>\n  <div id="bottom">\n    <slot name="bottom"></slot>\n    <div id="resize-handle">\n      <svg id="resize-icon" width="16" height="16">\n        <path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/>\n      </svg>\n    </div>\n  </div>\n</div>\n';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-comp-textarea-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);padding-right:2px;overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input{all:initial;display:block;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);resize:none;white-space:pre-wrap;overflow-wrap:break-word;padding:8px 10px 8px 12px;border:none;box-sizing:border-box}#input::placeholder{color:var(--sinch-comp-textarea-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}#border{position:absolute;border:1px solid var(--sinch-comp-textarea-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([invalid]) #border{border-color:var(--sinch-comp-textarea-color-invalid-border-initial)}#input:focus+#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:12px 4px 4px}#bottom.empty{display:none}:host([resizable]) #bottom{padding-right:calc(var(--sinch-comp-textarea-size-resize-handle) + 4px)}#resize-handle{display:none;position:absolute;width:var(--sinch-comp-textarea-size-resize-handle);height:var(--sinch-comp-textarea-size-resize-handle);bottom:0;right:0;cursor:ns-resize}:host([resizable]) #resize-handle{display:block}#resize-icon{display:block;pointer-events:none;fill:var(--sinch-comp-textarea-color-default-border-initial)}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot><div id="resize-handle"><svg id="resize-icon" width="16" height="16"><path d="m14.833 4.724-9.61 9.61-.942-.944 9.61-9.609.942.943ZM15.443 10 10.5 14.943 9.557 14 14.5 9.057l.943.943Z"/></svg></div></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Textarea extends NectaryElement {

package/time-picker/index.js

@@ -6,7 +6,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { stringifyHourFace, stringifyMinute, parseTime, hourToIndex, stringifyHour, getNeedleRotationDeg, getShortestCssDeg, stringifyTime } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: column;\n    width: 248px;\n    padding: 16px;\n    box-sizing: border-box;\n    gap: 16px;\n  }\n\n  #header {\n    position: relative;\n    width: 100%;\n    height: 48px;\n    font: var(--sinch-comp-time-picker-header-font);\n    line-height: 48px;\n    user-select: none;\n    color: var(--sinch-comp-time-picker-header-color-default-text-initial);\n  }\n\n  #footer {\n    display: flex;\n    justify-content: center;\n    width: 100%;\n    height: 32px;\n  }\n\n  #picker {\n    position: relative;\n    width: 216px;\n    height: 216px;\n    border-radius: 50%;\n    box-sizing: border-box;\n    border:\n      1px solid\n      var(--sinch-comp-time-picker-watch-face-color-default-border-initial);\n    background-color:\n      var(\n        --sinch-comp-time-picker-watch-face-color-default-background-initial\n      );\n  }\n\n  #picker-hours,\n  #picker-minutes {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    border-radius: 50%;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  .digit-hour-12,\n  .digit-hour-24,\n  .digit-minute {\n    position: absolute;\n    width: 28px;\n    height: 28px;\n    text-align: center;\n    top: calc(50% - 14px);\n    left: calc(50% - 14px);\n    z-index: 1;\n    cursor: pointer;\n  }\n\n  .digit-hour-12 {\n    font: var(--sinch-comp-time-picker-digit-font-default-h12);\n    color: var(--sinch-comp-time-picker-digit-color-default-h12-initial);\n    line-height: 28px;\n  }\n\n  .digit-hour-12.selected {\n    font: var(--sinch-comp-time-picker-digit-font-checked-h12);\n    color: var(--sinch-comp-time-picker-digit-color-checked-h12-default);\n  }\n\n  .digit-hour-24 {\n    font: var(--sinch-comp-time-picker-digit-font-default-h24);\n    color: var(--sinch-comp-time-picker-digit-color-default-h24-initial);\n    line-height: 28px;\n  }\n\n  .digit-hour-24.selected {\n    font: var(--sinch-comp-time-picker-digit-font-checked-h24);\n    color: var(--sinch-comp-time-picker-digit-color-checked-h24-initial);\n  }\n\n  .digit-minute {\n    font: var(--sinch-comp-time-picker-digit-font-default-minutes);\n    color: var(--sinch-comp-time-picker-digit-color-default-minute-initial);\n    line-height: 28px;\n  }\n\n  .digit-minute.selected {\n    font: var(--sinch-comp-time-picker-digit-font-checked-minutes);\n    color: var(--sinch-comp-time-picker-digit-color-checked-minute-initial);\n  }\n\n  #picker-touch {\n    position: absolute;\n    left: 0;\n    top: 0;\n    width: 100%;\n    height: 100%;\n    cursor: pointer;\n    border-radius: 50%;\n  }\n\n  #needle-hour,\n  #needle-minute,\n  #picker-touch::after {\n    background-color:\n      var(\n        --sinch-comp-time-picker-needle-color-default-background-initial\n      );\n  }\n\n  #needle-hour,\n  #needle-minute {\n    position: absolute;\n    transform-origin: bottom center;\n    transform: rotate(0deg);\n    bottom: 50%;\n    height: 50px;\n    transition-duration: 0.25s;\n    transition-timing-function: ease-in-out;\n    transition-property: transform height;\n    z-index: 2;\n    outline: none;\n  }\n\n  @media (prefers-reduced-motion) {\n    #needle-hour,\n    #needle-minute {\n      transition: none;\n    }\n  }\n\n  #needle-hour {\n    width: 4px;\n    left: calc(50% - 2px);\n    border-radius: 2px;\n  }\n\n  #needle-minute {\n    width: 2px;\n    left: calc(50% - 1px);\n    border-radius: 1px;\n  }\n\n  #needle-hour:focus-visible,\n  #needle-minute:focus-visible {\n    background-color:\n      var(\n        --sinch-comp-time-picker-needle-color-default-background-focus\n      );\n  }\n\n  #needle-minute:not(.selected)::after {\n    content: "";\n    position: absolute;\n    transform: translateX(-50%);\n    left: 0;\n    top: -16px;\n    width: 4px;\n    height: 4px;\n    border-radius: 50%;\n    background-color:\n      var(\n        --sinch-comp-time-picker-digit-color-checked-minute-initial\n      );\n  }\n\n  #picker-touch::after {\n    content: "";\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  #header-hours,\n  #header-minutes {\n    position: absolute;\n    padding: 0 4px;\n    width: 50px;\n    outline: none;\n  }\n\n  #header-hours {\n    right: calc(50% + 8px);\n    text-align: right;\n  }\n\n  #header-minutes {\n    left: calc(50% + 8px);\n  }\n\n  #header-colon {\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n  }\n\n  #submit {\n    position: absolute;\n    right: 0;\n    top: 50%;\n    transform: translateY(-50%);\n  }\n\n  #submit-icon {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-time-picker-header-color-default-icon-initial\n      );\n  }\n\n  :host([ampm]) .digit-hour-24 {\n    display: none;\n  }\n\n  :host(:not([ampm])) #footer {\n    display: none;\n  }\n</style>\n\n<div id="wrapper">\n  <div id="header">\n    <div\n      id="header-hours"\n      role="meter"\n      aria-valuemin="0"\n      aria-valuemax="23"\n      aria-valuenow="0"\n      aria-valuetext="0"\n    >\n      <span>00</span>\n    </div>\n    <div id="header-colon">&colon;</div>\n    <div\n      id="header-minutes"\n      role="meter"\n      aria-valuemin="0"\n      aria-valuemax="59"\n      aria-valuenow="0"\n      aria-valuetext="0"\n    >\n      <span>00</span>\n    </div>\n    <sinch-button id="submit" size="s" aria-label="Submit">\n      <sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon>\n    </sinch-button>\n  </div>\n  <div id="picker" aria-hidden="true">\n    <div id="picker-hours"></div>\n    <div id="picker-minutes"></div>\n    <div id="picker-touch">\n      <div id="needle-hour" tabindex="0"></div>\n      <div id="needle-minute" tabindex="0"></div>\n    </div>\n  </div>\n  <div id="footer">\n    <sinch-segmented-control id="ampm">\n      <sinch-segmented-control-option\n        value="am"\n        text="AM"\n        aria-label="AM"\n      ></sinch-segmented-control-option>\n      <sinch-segmented-control-option\n        value="pm"\n        text="PM"\n        aria-label="PM"\n      ></sinch-segmented-control-option>\n    </sinch-segmented-control>\n  </div>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;width:248px;padding:16px;box-sizing:border-box;gap:16px}#header{position:relative;width:100%;height:48px;font:var(--sinch-comp-time-picker-header-font);line-height:48px;user-select:none;color:var(--sinch-comp-time-picker-header-color-default-text-initial)}#footer{display:flex;justify-content:center;width:100%;height:32px}#picker{position:relative;width:216px;height:216px;border-radius:50%;box-sizing:border-box;border:1px solid var(--sinch-comp-time-picker-watch-face-color-default-border-initial);background-color:var(--sinch-comp-time-picker-watch-face-color-default-background-initial)}#picker-hours,#picker-minutes{position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;pointer-events:none;user-select:none}.digit-hour-12,.digit-hour-24,.digit-minute{position:absolute;width:28px;height:28px;text-align:center;top:calc(50% - 14px);left:calc(50% - 14px);z-index:1;cursor:pointer}.digit-hour-12{font:var(--sinch-comp-time-picker-digit-font-default-h12);color:var(--sinch-comp-time-picker-digit-color-default-h12-initial);line-height:28px}.digit-hour-12.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h12);color:var(--sinch-comp-time-picker-digit-color-checked-h12-default)}.digit-hour-24{font:var(--sinch-comp-time-picker-digit-font-default-h24);color:var(--sinch-comp-time-picker-digit-color-default-h24-initial);line-height:28px}.digit-hour-24.selected{font:var(--sinch-comp-time-picker-digit-font-checked-h24);color:var(--sinch-comp-time-picker-digit-color-checked-h24-initial)}.digit-minute{font:var(--sinch-comp-time-picker-digit-font-default-minutes);color:var(--sinch-comp-time-picker-digit-color-default-minute-initial);line-height:28px}.digit-minute.selected{font:var(--sinch-comp-time-picker-digit-font-checked-minutes);color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch{position:absolute;left:0;top:0;width:100%;height:100%;cursor:pointer;border-radius:50%}#needle-hour,#needle-minute,#picker-touch::after{background-color:var(--sinch-comp-time-picker-needle-color-default-background-initial)}#needle-hour,#needle-minute{position:absolute;transform-origin:bottom center;transform:rotate(0);bottom:50%;height:50px;transition-duration:.25s;transition-timing-function:ease-in-out;transition-property:transform height;z-index:2;outline:0}@media (prefers-reduced-motion){#needle-hour,#needle-minute{transition:none}}#needle-hour{width:4px;left:calc(50% - 2px);border-radius:2px}#needle-minute{width:2px;left:calc(50% - 1px);border-radius:1px}#needle-hour:focus-visible,#needle-minute:focus-visible{background-color:var(--sinch-comp-time-picker-needle-color-default-background-focus)}#needle-minute:not(.selected)::after{content:"";position:absolute;transform:translateX(-50%);left:0;top:-16px;width:4px;height:4px;border-radius:50%;background-color:var(--sinch-comp-time-picker-digit-color-checked-minute-initial)}#picker-touch::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-radius:50%;transform:translate(-50%,-50%)}#header-hours,#header-minutes{position:absolute;padding:0 4px;width:50px;outline:0}#header-hours{right:calc(50% + 8px);text-align:right}#header-minutes{left:calc(50% + 8px)}#header-colon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}#submit{position:absolute;right:0;top:50%;transform:translateY(-50%)}#submit-icon{--sinch-global-color-icon:var(--sinch-comp-time-picker-header-color-default-icon-initial)}:host([ampm]) .digit-hour-24{display:none}:host(:not([ampm])) #footer{display:none}</style><div id="wrapper"><div id="header"><div id="header-hours" role="meter" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><div id="header-colon">&colon;</div><div id="header-minutes" role="meter" aria-valuemin="0" aria-valuemax="59" aria-valuenow="0" aria-valuetext="0"><span>00</span></div><sinch-button id="submit" size="s" aria-label="Submit"><sinch-icon icons-version="2" name="fa-check" id="icon-submit" slot="icon"></sinch-icon></sinch-button></div><div id="picker" aria-hidden="true"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0"></div><div id="needle-minute" tabindex="0"></div></div></div><div id="footer"><sinch-segmented-control id="ampm"><sinch-segmented-control-option value="am" text="AM" aria-label="AM"></sinch-segmented-control-option><sinch-segmented-control-option value="pm" text="PM" aria-label="PM"></sinch-segmented-control-option></sinch-segmented-control></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 const PICKER_RADIUS = 216 / 2;

package/title/index.js

@@ -1,7 +1,7 @@
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getAttribute, updateLiteralAttribute, getLiteralAttribute, getBooleanAttribute } 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  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-m);\n}\n\n:host([type="xl"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-xl);\n}\n\n:host([type="l"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-l);\n}\n\n:host([type="m"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-m);\n}\n\n:host([type="s"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-s);\n}\n\n:host([type="xs"]) {\n  --sinch-comp-title-font: var(--sinch-sys-font-desktop-title-xs);\n}\n\n#text {\n  letter-spacing: -2%;\n  color: var(--sinch-global-color-text, var(--sinch-sys-color-text-default));\n  font: var(--sinch-comp-title-font);\n}\n\n:host([ellipsis]) #text {\n  display: block;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n</style>\n\n<span id="text"></span>\n';
+const templateHTML = '<style>:host{display:block;--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type=xl]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xl)}:host([type="l"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-l)}:host([type="m"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type="s"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-s)}:host([type=xs]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xs)}#text{letter-spacing:-2%;color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));font:var(--sinch-comp-title-font)}:host([ellipsis]) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Title extends NectaryElement {

package/toast/index.js

@@ -4,7 +4,7 @@ import { updateAttribute, getLiteralAttribute, updateLiteralAttribute, getAttrib
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.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    align-items: center;\n    gap: 8px;\n    width: 328px;\n    max-width: 90vw;\n    padding: 16px;\n    box-sizing: border-box;\n    border-radius: var(--sinch-comp-toast-shape-radius);\n    box-shadow: var(--sinch-comp-toast-shadow);\n  }\n\n  :host([type="success"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-success-default-background);\n  }\n\n  :host([type="warn"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-warning-default-background);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-error-default-background);\n  }\n\n  :host([type="info"]) #wrapper {\n    background-color: var(--sinch-comp-toast-color-info-default-background);\n  }\n\n  #text {\n    padding: 4px 0 4px 4px;\n    flex: 1;\n    min-width: 0;\n    word-wrap: break-word;\n\n    --sinch-comp-text-font: var(--sinch-comp-toast-font-body);\n  }\n\n  :host([type="success"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-toast-color-success-default-text\n      );\n  }\n\n  :host([type="warn"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-toast-color-warning-default-text\n      );\n  }\n\n  :host([type="error"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-toast-color-error-default-text);\n  }\n\n  :host([type="info"]) #text {\n    --sinch-global-color-text: var(--sinch-comp-toast-color-info-default-text);\n  }\n\n  #icon {\n    align-self: flex-start;\n    margin: 4px 0;\n  }\n\n  #icon-info,\n  #icon-success,\n  #icon-warn,\n  #icon-error {\n    display: none;\n  }\n\n  #icon-success {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-toast-color-success-default-icon\n      );\n  }\n\n  #icon-warn {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-toast-color-warning-default-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-toast-color-error-default-icon);\n  }\n\n  #icon-info {\n    --sinch-global-color-icon: var(--sinch-comp-toast-color-info-default-icon);\n  }\n\n  :host([type="success"]) #icon-success,\n  :host([type="warn"]) #icon-warn,\n  :host([type="error"]) #icon-error,\n  :host([type="info"]) #icon-info {\n    display: block;\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="circle-check" id="icon-success"></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" size="m"></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;align-items:center;gap:8px;width:328px;max-width:90vw;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;word-wrap:break-word;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon icons-version="2" name="circle-info" id="icon-info"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></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" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
 const TIMEOUT = 5e3;
 const template = document.createElement("template");
 template.innerHTML = templateHTML;

package/toast-manager/index.js

@@ -4,7 +4,7 @@ import { shouldReduceMotion, getLiteralAttribute, updateLiteralAttribute, cloneN
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { originValues } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#items {\n  display: block;\n  width: 0;\n  height: 0;\n  visibility: hidden;\n  overflow: hidden;\n}\n\n#list {\n  display: flex;\n  flex-direction: column;\n  position: fixed;\n  z-index: 1;\n  bottom: 0;\n  right: 16px;\n}\n\n:host([origin="top-right"]) #list {\n  flex-direction: column-reverse;\n  bottom: unset;\n  top: 16px;\n}\n\n.item-wrapper {\n  height: 0;\n  opacity: 0;\n  position: relative;\n}\n\n.item-wrapper[data-deleting]::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n}\n</style>\n\n<slot id="items"></slot>\n<div id="list"></div>\n';
+const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;

package/toggle/index.js

@@ -1,7 +1,7 @@
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, getBooleanAttribute, 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: inline-block;\n  vertical-align: middle;\n  outline: none;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  gap: 8px;\n  width: 100%;\n  height: var(--sinch-local-size);\n  cursor: pointer;\n  user-select: none;\n\n  --sinch-local-size: 20px;\n}\n\n:host([small]) #wrapper {\n  --sinch-local-size: 16px;\n}\n\n:host([disabled]) #wrapper {\n  cursor: initial;\n}\n\n#knob-container {\n  position: relative;\n  width: 40px;\n  height: var(--sinch-local-size);\n  border-radius: calc(var(--sinch-local-size) * 0.5);\n  background-color: var(--sinch-comp-toggle-color-default-background-initial);\n  pointer-events: none;\n  transition: background-color 0.15s ease-in-out;\n}\n\n:host([small]) #knob-container {\n  width: 32px;\n  height: var(--sinch-local-size);\n}\n\n:host([checked]) #knob-container {\n  background-color: var(--sinch-comp-toggle-color-checked-background-initial);\n}\n\n:host([disabled]) #knob-container {\n  background-color: var(--sinch-comp-toggle-color-disabled-background-initial);\n}\n\n:host([checked][disabled]) #knob-container {\n  background-color: var(--sinch-comp-toggle-color-checked-disabled-background-initial);\n}\n\n#knob {\n  position: relative;\n  width: 16px;\n  height: 16px;\n  left: 2px;\n  top: 2px;\n  border-radius: 50%;\n  background-color: var(--sinch-comp-toggle-color-default-knob-background-initial);\n  box-shadow: var(--sinch-comp-toggle-shadow-knob-default);\n  transform: translateX(0);\n  transition: transform 0.15s ease-in-out;\n  will-change: transform;\n}\n\n:host([small]) #knob {\n  width: 12px;\n  height: 12px;\n}\n\n:host([disabled]) #knob-container > #knob {\n  box-shadow: var(--sinch-comp-toggle-shadow-knob-disabled);\n}\n\n:host([checked]) #knob-container > #knob {\n  transform: translateX(20px);\n}\n\n:host([small][checked]) #knob-container > #knob {\n  transform: translateX(16px);\n}\n\n/* Knob on-off labels */\n#knob::before,\n#knob::after {\n  font: var(--sinch-comp-toggle-font-size-m-inside-text);\n  color: var(--sinch-comp-toggle-color-default-text-inside-initial);\n  text-transform: uppercase;\n  position: absolute;\n  top: 0;\n  padding: 0 1px;\n  opacity: 0;\n  transition: opacity 0.15s ease-in-out;\n  user-select: none;\n}\n\n#knob::before {\n  content: "on";\n  right: 100%;\n}\n\n#knob::after {\n  content: "off";\n  left: 100%;\n}\n\n:host([labeled]:not([small]):not([checked])) #knob::after {\n  opacity: 1;\n}\n\n:host([labeled]:not([small])[checked]) #knob::before {\n  opacity: 1;\n}\n\n@media (prefers-reduced-motion) {\n  #knob-container,\n  #knob,\n  #knob::before,\n  #knob::after {\n    transition: none;\n  }\n}\n\n#outline {\n  display: none;\n  position: absolute;\n  left: -3px;\n  top: -3px;\n  right: -3px;\n  bottom: -3px;\n  border: 2px solid var(--sinch-comp-toggle-color-default-outline-focus);\n  border-radius: 17px;\n  pointer-events: none;\n}\n\n:host(:focus-visible) #outline {\n  display: block;\n}\n\n#label {\n  flex: 1;\n  min-width: 0;\n  align-self: center;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font: var(--sinch-comp-toggle-font-size-m-label);\n  color: var(--sinch-comp-toggle-color-default-label-initial);\n}\n\n#label:empty {\n  display: none;\n}\n\n:host([small]) #label {\n  font: var(--sinch-comp-toggle-font-size-s-label);\n}\n\n:host([disabled]) #label {\n  color: var(--sinch-comp-toggle-color-disabled-label-initial);\n}\n</style>\n\n<div id="wrapper">\n  <div id="knob-container">\n    <div id="outline"></div>\n    <div id="knob"></div>\n  </div>\n  <span id="label"></span>\n</div>\n';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;gap:8px;width:100%;height:var(--sinch-local-size);cursor:pointer;user-select:none;--sinch-local-size:20px}:host([small]) #wrapper{--sinch-local-size:16px}:host([disabled]) #wrapper{cursor:initial}#knob-container{position:relative;width:40px;height:var(--sinch-local-size);border-radius:calc(var(--sinch-local-size) * .5);background-color:var(--sinch-comp-toggle-color-default-background-initial);pointer-events:none;transition:background-color .15s ease-in-out}:host([small]) #knob-container{width:32px;height:var(--sinch-local-size)}:host([checked]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}:host([disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}:host([checked][disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;width:16px;height:16px;left:2px;top:2px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .15s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}:host([disabled]) #knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}:host([checked]) #knob-container>#knob{transform:translateX(20px)}:host([small][checked]) #knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;position:absolute;top:0;padding:0 1px;opacity:0;transition:opacity .15s ease-in-out;user-select:none}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small]):not([checked])) #knob::after{opacity:1}:host([labeled]:not([small])[checked]) #knob::before{opacity:1}@media (prefers-reduced-motion){#knob,#knob-container,#knob::after,#knob::before{transition:none}}#outline{display:none;position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:17px;pointer-events:none}:host(:focus-visible) #outline{display:block}#label{flex:1;min-width:0;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial)}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}:host([disabled]) #label{color:var(--sinch-comp-toggle-color-disabled-label-initial)}</style><div id="wrapper"><div id="knob-container"><div id="outline"></div><div id="knob"></div></div><span id="label"></span></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Toggle extends NectaryElement {