@nectary/components 5.0.2 → 5.0.4

package/radio-option/index.js

@@ -1,6 +1,6 @@
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, updateExplicitBooleanAttribute, getBooleanAttribute, updateAttribute, getAttribute } 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#wrapper {\n  display: flex;\n  flex-direction: row;\n  box-sizing: border-box;\n  width: 100%;\n  min-height: 24px;\n\n  --sinch-local-color-background: var(--sinch-comp-radio-color-default-background-initial);\n  --sinch-local-color-background-hover: var(--sinch-comp-radio-color-default-background-hover);\n  --sinch-local-color-background-active: var(--sinch-comp-radio-color-default-background-active);\n  --sinch-local-color-border: var(--sinch-comp-radio-color-default-border-initial);\n  --sinch-local-color-border-hover: var(--sinch-comp-radio-color-default-border-hover);\n  --sinch-local-color-border-active: var(--sinch-comp-radio-color-default-border-active);\n  --sinch-local-color-knob: var(--sinch-comp-radio-color-checked-knob-initial);\n  --sinch-local-color-knob-hover: var(--sinch-comp-radio-color-checked-knob-hover);\n  --sinch-local-color-knob-active: var(--sinch-comp-radio-color-checked-knob-active);\n  --sinch-local-color-text: var(--sinch-comp-radio-color-default-label-initial);\n}\n\n:host([data-invalid]) > #wrapper {\n  --sinch-local-color-border: var(--sinch-comp-radio-color-invalid-border-initial);\n  --sinch-local-color-border-hover: var(--sinch-comp-radio-color-invalid-border-hover);\n  --sinch-local-color-border-active: var(--sinch-comp-radio-color-invalid-border-active);\n  --sinch-local-color-text: var(--sinch-comp-radio-color-invalid-label-initial);\n}\n\n:host([checked]) > #wrapper {\n  --sinch-local-color-border: var(--sinch-comp-radio-color-checked-border-initial);\n  --sinch-local-color-border-hover: var(--sinch-comp-radio-color-checked-border-hover);\n  --sinch-local-color-border-active: var(--sinch-comp-radio-color-checked-border-active);\n}\n\n:host([disabled]) > #wrapper {\n  --sinch-local-color-background: var(--sinch-comp-radio-color-disabled-background-initial);\n  --sinch-local-color-border: var(--sinch-comp-radio-color-disabled-border-initial);\n  --sinch-local-color-text: var(--sinch-comp-radio-color-disabled-label-initial);\n}\n\n:host([disabled][checked]) > #wrapper {\n  --sinch-local-color-border: var(--sinch-comp-radio-color-checked-disabled-border-initial);\n  --sinch-local-color-knob: var(--sinch-comp-radio-color-checked-disabled-knob-initial);\n  --sinch-local-color-text: var(--sinch-comp-radio-color-checked-disabled-label-initial);\n}\n\n#input {\n  all: initial;\n  display: block;\n  width: 18px;\n  height: 18px;\n  cursor: pointer;\n}\n\n:host([disabled]) #input {\n  cursor: initial;\n}\n\n#input-wrapper {\n  position: relative;\n  width: 18px;\n  height: 18px;\n  align-self: flex-start;\n  margin-top: 3px;\n}\n\n/* Outline */\n#input::before {\n  content: "";\n  position: absolute;\n  inset: -3px;\n  border: 2px solid var(--sinch-comp-radio-color-default-outline-focus);\n  border-radius: 50%;\n  transition: opacity 0.1s linear;\n  opacity: 0;\n  box-sizing: border-box;\n  pointer-events: none;\n}\n\n:host(:focus-visible) #input::before {\n  opacity: 1;\n}\n\n/* Circle Border / Background */\n#input::after {\n  content: "";\n  position: absolute;\n  width: 18px;\n  height: 18px;\n  inset: 0;\n  margin: auto;\n  background-color: var(--sinch-local-color-background);\n  border: 1px solid var(--sinch-local-color-border);\n  border-radius: 50%;\n  box-sizing: border-box;\n  pointer-events: none;\n}\n\n:host(:hover:not([disabled])) #input::after {\n  background-color: var(--sinch-local-color-background-hover);\n  border-color: var(--sinch-local-color-border-hover);\n}\n\n:host(:active:not([disabled])) #input::after {\n  background-color: var(--sinch-local-color-background-active);\n  border-color: var(--sinch-local-color-border-active);\n}\n\n#knob {\n  position: absolute;\n  width: 10px;\n  height: 10px;\n  inset: 0;\n  margin: auto;\n  border-radius: 50%;\n  transition: opacity 0.1s linear;\n  opacity: 0;\n  background-color: var(--sinch-local-color-knob);\n  pointer-events: none;\n}\n\n:host([checked]) #knob {\n  opacity: 1;\n}\n\n:host(:hover:not([disabled])) #knob {\n  background-color: var(--sinch-local-color-knob-hover);\n}\n\n:host(:active:not([disabled])) #knob {\n  background-color: var(--sinch-local-color-knob-active);\n}\n\n@media (prefers-reduced-motion) {\n  #knob,\n  #input::before,\n  #input::after {\n    transition: none;\n  }\n}\n\n#label {\n  flex: 1;\n  align-self: center;\n  padding-left: 8px;\n  font: var(--sinch-comp-radio-font-label);\n  color: var(--sinch-local-color-text);\n  cursor: pointer;\n}\n\n#label:empty {\n  display: none;\n}\n\n:host([disabled]) #label {\n  cursor: initial;\n}\n\n</style>\n\n<div id="wrapper">\n  <div id="input-wrapper">\n    <div id="input"></div>\n    <div id="knob"></div>\n  </div>\n  <span id="label"></span>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;box-sizing:border-box;width:100%;min-height:24px;--sinch-local-color-background:var(--sinch-comp-radio-color-default-background-initial);--sinch-local-color-background-hover:var(--sinch-comp-radio-color-default-background-hover);--sinch-local-color-background-active:var(--sinch-comp-radio-color-default-background-active);--sinch-local-color-border:var(--sinch-comp-radio-color-default-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-default-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-default-border-active);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-knob-initial);--sinch-local-color-knob-hover:var(--sinch-comp-radio-color-checked-knob-hover);--sinch-local-color-knob-active:var(--sinch-comp-radio-color-checked-knob-active);--sinch-local-color-text:var(--sinch-comp-radio-color-default-label-initial)}:host([data-invalid])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-invalid-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-invalid-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-invalid-border-active);--sinch-local-color-text:var(--sinch-comp-radio-color-invalid-label-initial)}:host([checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-border-initial);--sinch-local-color-border-hover:var(--sinch-comp-radio-color-checked-border-hover);--sinch-local-color-border-active:var(--sinch-comp-radio-color-checked-border-active)}:host([disabled])>#wrapper{--sinch-local-color-background:var(--sinch-comp-radio-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-radio-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-disabled-label-initial)}:host([disabled][checked])>#wrapper{--sinch-local-color-border:var(--sinch-comp-radio-color-checked-disabled-border-initial);--sinch-local-color-knob:var(--sinch-comp-radio-color-checked-disabled-knob-initial);--sinch-local-color-text:var(--sinch-comp-radio-color-checked-disabled-label-initial)}#input{all:initial;display:block;width:18px;height:18px;cursor:pointer}:host([disabled]) #input{cursor:initial}#input-wrapper{position:relative;width:18px;height:18px;align-self:flex-start;margin-top:3px}#input::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-radio-color-default-outline-focus);border-radius:50%;transition:opacity .1s linear;opacity:0;box-sizing:border-box;pointer-events:none}:host(:focus-visible) #input::before{opacity:1}#input::after{content:"";position:absolute;width:18px;height:18px;inset:0;margin:auto;background-color:var(--sinch-local-color-background);border:1px solid var(--sinch-local-color-border);border-radius:50%;box-sizing:border-box;pointer-events:none}:host(:hover:not([disabled])) #input::after{background-color:var(--sinch-local-color-background-hover);border-color:var(--sinch-local-color-border-hover)}:host(:active:not([disabled])) #input::after{background-color:var(--sinch-local-color-background-active);border-color:var(--sinch-local-color-border-active)}#knob{position:absolute;width:10px;height:10px;inset:0;margin:auto;border-radius:50%;transition:opacity .1s linear;opacity:0;background-color:var(--sinch-local-color-knob);pointer-events:none}:host([checked]) #knob{opacity:1}:host(:hover:not([disabled])) #knob{background-color:var(--sinch-local-color-knob-hover)}:host(:active:not([disabled])) #knob{background-color:var(--sinch-local-color-knob-active)}@media (prefers-reduced-motion){#input::after,#input::before,#knob{transition:none}}#label{flex:1;align-self:center;padding-left:8px;font:var(--sinch-comp-radio-font-label);color:var(--sinch-local-color-text);cursor:pointer}#label:empty{display:none}:host([disabled]) #label{cursor:initial}</style><div id="wrapper"><div id="input-wrapper"><div id="input"></div><div id="knob"></div></div><span id="label"></span></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class RadioOption extends NectaryElement {

package/rich-text/index.js

@@ -7,7 +7,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { parseMarkdown } from "../utils/markdown.js";
 import { createParseVisitor, sizeValues } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-m);\n}\n\n:host([size="s"]) {\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-s);\n}\n\n:host([size="xs"]) {\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-xs);\n}\n\n:host([size="xxs"]) {\n  --sinch-comp-rich-text-font: var(--sinch-sys-font-body-xxs);\n}\n\n#wrapper {\n  font: var(--sinch-comp-rich-text-font);\n  color: var(--sinch-global-color-text, var(--sinch-sys-color-text-default));\n}\n\n.em1 {\n  font-style: italic;\n}\n\n.em2 {\n  font-weight: var(--sinch-ref-typography-font-weight-700);\n}\n\n.strikethrough {\n  text-decoration: line-through;\n}\n\n.link {\n  font: var(--sinch-comp-link-default-font-initial);\n  color: var(--sinch-comp-link-color-default-text-initial);\n  text-decoration: underline;\n}\n\n.link:hover {\n  color: var(--sinch-comp-link-color-default-text-hover);\n  text-decoration: none;\n}\n\n.code {\n  font: var(--sinch-comp-code-tag-font-text);\n  line-height: inherit;\n  font-size: inherit;\n  border: 1px solid var(--sinch-comp-code-tag-color-default-border-initial);\n  background-color: var(--sinch-comp-code-tag-color-default-background-initial);\n  padding: 0 0.25em;\n  border-radius: var(--sinch-comp-code-tag-shape-radius);\n}\n\n.emoji {\n  --sinch-global-size-icon: 1em;\n  --sinch-comp-emoji-vertical-align: -0.2em;\n}\n\n.p,\n.ul,\n.ol {\n  margin: 0;\n}\n\n.ul,\n.ol {\n  padding-left: 1.5em;\n}\n\n.p + .p,\n.p + .ul,\n.p + .ol,\n.ol + .p,\n.ul + .p {\n  margin-top: 0.5em;\n}\n\n.li > .p + .ul,\n.li > .p + .ol {\n  margin-top: 0;\n}\n</style>\n\n<div id="wrapper"></div>\n';
+const templateHTML = '<style>:host{display:block;--sinch-comp-rich-text-font:var(--sinch-sys-font-body-m)}:host([size="s"]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-s)}:host([size=xs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xs)}:host([size=xxs]){--sinch-comp-rich-text-font:var(--sinch-sys-font-body-xxs)}#wrapper{font:var(--sinch-comp-rich-text-font);color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default))}.em1{font-style:italic}.em2{font-weight:var(--sinch-ref-typography-font-weight-700)}.strikethrough{text-decoration:line-through}.link{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.link:hover{color:var(--sinch-comp-link-color-default-text-hover);text-decoration:none}.code{font:var(--sinch-comp-code-tag-font-text);line-height:inherit;font-size:inherit;border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.emoji{--sinch-global-size-icon:1em;--sinch-comp-emoji-vertical-align:-0.2em}.ol,.p,.ul{margin:0}.ol,.ul{padding-left:1.5em}.ol+.p,.p+.ol,.p+.p,.p+.ul,.ul+.p{margin-top:.5em}.li>.p+.ol,.li>.p+.ul{margin-top:0}</style><div id="wrapper"></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class RichText extends NectaryElement {
@@ -93,6 +93,7 @@ class RichText extends NectaryElement {
   }
   #onClickReactHandler = (e) => {
     getReactEventHandler(this, "on-element-click")?.(e);
+    getReactEventHandler(this, "onElementClick")?.(e);
   };
 }
 defineCustomElement("sinch-rich-text", RichText);

package/rich-textarea/index.js

@@ -5,7 +5,7 @@ import { isElementFocused } from "../utils/slot.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { parseMarkdown } from "../utils/markdown.js";
 import { createParseVisitor, getEndRange, formatList, handleEmojiMousedown, formatOutdent, formatIndent, formatInline, insertLink, insertText, insertLineBreak, deleteContentBackward, setBrowserCaret, serializeMarkdown, getSelectionInfo, isSelectionEqual, insertFromPaste, isEditorEmpty } from "./utils.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  overflow: hidden;\n\n  --sinch-local-shape-radius: var(--sinch-comp-textarea-shape-radius);\n}\n\n#input-wrapper {\n  position: relative;\n  padding: 8px 10px 8px 12px;\n  box-sizing: border-box;\n}\n\n#input {\n  font: var(--sinch-comp-textarea-font-input);\n  color: var(--sinch-comp-textarea-color-default-text-initial);\n  white-space: pre-wrap;\n  overflow-wrap: break-word;\n  border: none;\n  outline: none;\n}\n\n#placeholder {\n  display: none;\n  position: absolute;\n  left: 0;\n  top: 0;\n  font: var(--sinch-comp-textarea-font-input);\n  color: var(--sinch-comp-textarea-color-default-text-placeholder);\n  padding: 8px 10px 8px 12px;\n  pointer-events: none;\n  user-select: none;\n}\n\n#input.empty + #placeholder {\n  display: block;\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:host([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:host([disabled]) #border {\n  border-color: var(--sinch-comp-textarea-color-disabled-border-initial);\n}\n\n:host(:not([disabled])) #input-wrapper:focus-within ~ #border {\n  border-color: var(--sinch-comp-textarea-color-default-border-focus);\n  border-width: 2px;\n}\n\n.p,\n.oli,\n.uli {\n  margin: 0;\n}\n\n.oli.l0,\n.uli.l0 {\n  margin-left: 6px;\n}\n\n.oli.l1,\n.uli.l1 {\n  margin-left: 36px;\n}\n\n.oli.l2,\n.uli.l2 {\n  margin-left: 64px;\n}\n\n.oli.l3,\n.uli.l3 {\n  margin-left: 92px;\n}\n\n.oli.l4,\n.uli.l4 {\n  margin-left: 120px;\n}\n\n.uli.l0 {\n  counter-reset: list-0 list-1 list-2 list-3 list-4;\n}\n\n.uli.l1 {\n  counter-reset: list-1 list-2 list-3 list-4;\n}\n\n.uli.l2 {\n  counter-reset: list-2 list-3 list-4;\n}\n\n.uli.l3 {\n  counter-reset: list-3 list-4;\n}\n\n.uli.l4 {\n  counter-reset: list-4;\n}\n\n.oli.l0 {\n  counter-reset: list-1 list-2 list-3 list-4;\n}\n\n.oli.l1 {\n  counter-reset: list-2 list-3 list-4;\n}\n\n.oli.l2 {\n  counter-reset: list-3 list-4;\n}\n\n.oli.l3 {\n  counter-reset: list-4;\n}\n\n.oli.l0::before {\n  counter-increment: list-0;\n  content: counter(list-0, decimal) ". ";\n}\n\n.oli.l1::before {\n  counter-increment: list-1;\n  content: counter(list-1, lower-alpha) ". ";\n}\n\n.oli.l2::before {\n  counter-increment: list-2;\n  content: counter(list-2, lower-roman) ". ";\n}\n\n.oli.l3::before {\n  counter-increment: list-3;\n  content: counter(list-3, decimal) ". ";\n}\n\n.oli.l4::before {\n  counter-increment: list-4;\n  content: counter(list-4, lower-alpha) ". ";\n}\n\n.oli:first-of-type,\n.oli.block,\n.p + .oli {\n  counter-reset: list-0 list-1 list-2 list-3 list-4;\n}\n\n.uli::before {\n  content: "\\25CF";\n  display: inline-block;\n  width: 16px;\n}\n\n.uli.block,\n.oli.block,\n.uli + .p,\n.oli + .p,\n.p + .uli,\n.p + .oli {\n  margin-top: 0.5em;\n}\n\n.c {\n  font: var(--sinch-comp-code-tag-font-text);\n  font-size: inherit;\n  line-height: inherit;\n  color: var(--sinch-comp-code-tag-color-default-text-initial);\n  border: 1px solid var(--sinch-comp-code-tag-color-default-border-initial);\n  background-color: var(--sinch-comp-code-tag-color-default-background-initial);\n  padding: 0 0.25em;\n  border-radius: var(--sinch-comp-code-tag-shape-radius);\n}\n\n.l {\n  font: var(--sinch-comp-link-default-font-initial);\n  color: var(--sinch-comp-link-color-default-text-initial);\n  text-decoration: underline;\n}\n\n.i {\n  font-style: italic;\n}\n\n.b {\n  font-weight: bold;\n}\n\n.s {\n  text-decoration: line-through;\n}\n\n.e {\n  background-repeat: no-repeat;\n  background-position: 50% 50%;\n  background-size: contain;\n  width: 1em;\n  height: 1em;\n  vertical-align: -0.2em;\n}\n\n#top-wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 4px 4px 0;\n}\n\n#top-wrapper.empty {\n  display: none;\n}\n\n#bottom-wrapper {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  padding: 0 4px 4px;\n}\n\n#bottom-wrapper.empty {\n  display: none;\n}\n</style>\n\n<div id="wrapper">\n  <div id="top-wrapper">\n    <slot id="top" name="top"></slot>\n  </div>\n  <div id="input-wrapper">\n    <div\n      id="input"\n      contentEditable\n      suppressContentEditableWarning\n      autoCapitalize="false"\n      autoCorrect="false"\n      autoSave="false"\n      spellCheck="false"\n    >\n    </div>\n    <div id="placeholder"></div>\n  </div>\n  <div id="border"></div>\n  <div id="bottom-wrapper">\n    <slot id="bottom" name="bottom"></slot>\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);overflow:hidden;--sinch-local-shape-radius:var(--sinch-comp-textarea-shape-radius)}#input-wrapper{position:relative;padding:8px 10px 8px 12px;box-sizing:border-box}#input{font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-initial);white-space:pre-wrap;overflow-wrap:break-word;border:none;outline:0}#placeholder{display:none;position:absolute;left:0;top:0;font:var(--sinch-comp-textarea-font-input);color:var(--sinch-comp-textarea-color-default-text-placeholder);padding:8px 10px 8px 12px;pointer-events:none;user-select:none}#input.empty+#placeholder{display:block}#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)}:host([disabled]){color:var(--sinch-comp-textarea-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-textarea-color-disabled-text-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-textarea-color-disabled-border-initial)}:host(:not([disabled])) #input-wrapper:focus-within~#border{border-color:var(--sinch-comp-textarea-color-default-border-focus);border-width:2px}.oli,.p,.uli{margin:0}.oli.l0,.uli.l0{margin-left:6px}.oli.l1,.uli.l1{margin-left:36px}.oli.l2,.uli.l2{margin-left:64px}.oli.l3,.uli.l3{margin-left:92px}.oli.l4,.uli.l4{margin-left:120px}.uli.l0{counter-reset:list-0 list-1 list-2 list-3 list-4}.uli.l1{counter-reset:list-1 list-2 list-3 list-4}.uli.l2{counter-reset:list-2 list-3 list-4}.uli.l3{counter-reset:list-3 list-4}.uli.l4{counter-reset:list-4}.oli.l0{counter-reset:list-1 list-2 list-3 list-4}.oli.l1{counter-reset:list-2 list-3 list-4}.oli.l2{counter-reset:list-3 list-4}.oli.l3{counter-reset:list-4}.oli.l0::before{counter-increment:list-0;content:counter(list-0,decimal) ". "}.oli.l1::before{counter-increment:list-1;content:counter(list-1,lower-alpha) ". "}.oli.l2::before{counter-increment:list-2;content:counter(list-2,lower-roman) ". "}.oli.l3::before{counter-increment:list-3;content:counter(list-3,decimal) ". "}.oli.l4::before{counter-increment:list-4;content:counter(list-4,lower-alpha) ". "}.oli.block,.oli:first-of-type,.p+.oli{counter-reset:list-0 list-1 list-2 list-3 list-4}.uli::before{content:"\\25CF";display:inline-block;width:16px}.oli+.p,.oli.block,.p+.oli,.p+.uli,.uli+.p,.uli.block{margin-top:.5em}.c{font:var(--sinch-comp-code-tag-font-text);font-size:inherit;line-height:inherit;color:var(--sinch-comp-code-tag-color-default-text-initial);border:1px solid var(--sinch-comp-code-tag-color-default-border-initial);background-color:var(--sinch-comp-code-tag-color-default-background-initial);padding:0 .25em;border-radius:var(--sinch-comp-code-tag-shape-radius)}.l{font:var(--sinch-comp-link-default-font-initial);color:var(--sinch-comp-link-color-default-text-initial);text-decoration:underline}.i{font-style:italic}.b{font-weight:700}.s{text-decoration:line-through}.e{background-repeat:no-repeat;background-position:50% 50%;background-size:contain;width:1em;height:1em;vertical-align:-.2em}#top-wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;padding:4px 4px 0}#top-wrapper.empty{display:none}#bottom-wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;padding:0 4px 4px}#bottom-wrapper.empty{display:none}</style><div id="wrapper"><div id="top-wrapper"><slot id="top" name="top"></slot></div><div id="input-wrapper"><div id="input" contenteditable suppresscontenteditablewarning autocapitalize="false" autocorrect="false" autosave="false" spellcheck="false"></div><div id="placeholder"></div></div><div id="border"></div><div id="bottom-wrapper"><slot id="bottom" name="bottom"></slot></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 const SUPPORTS_SHADOW_SELECTION = typeof window.ShadowRoot.prototype.getSelection === "function";
@@ -455,6 +455,7 @@ class RichTextarea extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();
@@ -464,6 +465,7 @@ class RichTextarea extends NectaryElement {
   };
   #onSelectionReactHandler = (e) => {
     getReactEventHandler(this, "on-selection")?.(e);
+    getReactEventHandler(this, "onSelection")?.(e);
   };
 }
 defineCustomElement("sinch-rich-textarea", RichTextarea);

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 {
@@ -58,6 +58,7 @@ class SegmentCollapse extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segment-collapse", SegmentCollapse);

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 {
@@ -78,6 +78,7 @@ class SegmentedControl extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segmented-control", SegmentedControl);

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 {
@@ -95,6 +95,7 @@ class SegmentedIconControl extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-segmented-icon-control", SegmentedIconControl);

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");
@@ -445,9 +445,11 @@ class SelectMenu extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onSearchChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-search-change")?.(e);
+    getReactEventHandler(this, "onSearchChange")?.(e);
   };
 }
 defineCustomElement("sinch-select-menu", SelectMenu);

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 {
@@ -70,6 +70,7 @@ class Tabs extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-tabs", Tabs);

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 {
@@ -343,6 +343,7 @@ class Textarea extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();