@nectary/components 5.0.2 → 5.0.4

package/field/index.js

@@ -1,7 +1,7 @@
 import { getAttribute, setClass, isAttrEqual, updateBooleanAttribute, isAttrTrue, updateAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getFirstSlotElement } from "../utils/slot.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n}\n\n#top,\n#bottom {\n  display: flex;\n  align-items: baseline;\n}\n\n#top {\n  height: 24px;\n  margin-bottom: 2px;\n}\n\n#top.empty {\n  display: none;\n}\n\n#label,\n#optional,\n#additional,\n#invalid {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n#label {\n  font: var(--sinch-comp-field-font-label);\n  color: var(--sinch-comp-field-color-default-label-initial);\n}\n\n#optional {\n  flex: 1;\n  font: var(--sinch-comp-field-font-optional);\n  color: var(--sinch-comp-field-color-default-optional-initial);\n  text-align: right;\n}\n\n#additional {\n  flex: 1;\n  text-align: right;\n  font: var(--sinch-comp-field-font-additional);\n  color: var(--sinch-comp-field-color-default-additional-initial);\n  line-height: 20px;\n  margin-top: 2px;\n}\n\n#additional:empty {\n  display: none;\n}\n\n#invalid {\n  font: var(--sinch-comp-field-font-invalid);\n  color: var(--sinch-comp-field-color-invalid-text-initial);\n  line-height: 20px;\n  margin-top: 2px;\n}\n\n#invalid:empty {\n  display: none;\n}\n\n#tooltip {\n  align-self: center;\n  margin: 0 8px;\n  display: flex;\n}\n\n#tooltip.empty {\n  display: none;\n}\n\n:host([disabled]) #label {\n  color: var(--sinch-comp-field-color-disabled-label-initial);\n}\n\n:host([disabled]) #additional {\n  color: var(--sinch-comp-field-color-disabled-additional-initial);\n}\n\n:host([disabled]) #optional {\n  color: var(--sinch-comp-field-color-disabled-optional-initial);\n}\n\n</style>\n\n<div id="wrapper">\n  <div id="top">\n    <label id="label" for="input"></label>\n    <div id="tooltip">\n      <slot name="tooltip"></slot>\n    </div>\n    <span id="optional"></span>\n  </div>\n  <slot name="input"></slot>\n  <div id="bottom">\n    <div id="invalid"></div>\n    <div id="additional"></div>\n  </div>\n</div>\n';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px}#top.empty{display:none}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-comp-field-font-label);color:var(--sinch-comp-field-color-default-label-initial)}#optional{flex:1;font:var(--sinch-comp-field-font-optional);color:var(--sinch-comp-field-color-default-optional-initial);text-align:right}#additional{flex:1;text-align:right;font:var(--sinch-comp-field-font-additional);color:var(--sinch-comp-field-color-default-additional-initial);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-comp-field-font-invalid);color:var(--sinch-comp-field-color-invalid-text-initial);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]) #label{color:var(--sinch-comp-field-color-disabled-label-initial)}:host([disabled]) #additional{color:var(--sinch-comp-field-color-disabled-additional-initial)}:host([disabled]) #optional{color:var(--sinch-comp-field-color-disabled-optional-initial)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Field extends NectaryElement {

package/file-drop/index.js

@@ -4,7 +4,7 @@ import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, getBo
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { areItemsAccepted, areFilesAccepted, doFilesSatisfySize } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-content: center;\n  gap: 8px;\n  min-height: 148px;\n  min-width: 148px;\n  box-sizing: border-box;\n  padding: 16px;\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  background-color: var(--sinch-comp-file-drop-color-default-background-initial);\n}\n\n/* Border */\n#wrapper::after {\n  content: "";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 1px dashed var(--sinch-comp-file-drop-color-default-border-initial);\n  border-radius: var(--sinch-comp-file-drop-shape-radius);\n  pointer-events: none;\n}\n\n#placeholder {\n  align-self: center;\n  text-align: center;\n\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-initial);\n  --sinch-comp-text-font: var(--sinch-comp-file-drop-font-placeholder);\n}\n\n:host([invalid]) #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-initial);\n}\n\n:host([invalid]) #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-initial);\n  border-width: 1px;\n}\n\n#wrapper.drop::after {\n  pointer-events: all;\n}\n\n#wrapper.drop.valid {\n  background-color: var(--sinch-comp-file-drop-color-default-background-active);\n}\n\n#wrapper.drop.valid::after {\n  border-color: var(--sinch-comp-file-drop-color-default-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.valid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-default-placeholder-active);\n}\n\n#wrapper.drop.invalid {\n  background-color: var(--sinch-comp-file-drop-color-invalid-background-active);\n}\n\n#wrapper.drop.invalid::after {\n  border-color: var(--sinch-comp-file-drop-color-invalid-border-active);\n  border-width: 2px;\n}\n\n#wrapper.drop.invalid > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-invalid-placeholder-active);\n}\n\n:host([disabled]) > #wrapper > #placeholder {\n  --sinch-global-color-text: var(--sinch-comp-file-drop-color-disabled-placeholder-initial);\n}\n\n:host([disabled]) > #wrapper {\n  background-color: var(--sinch-comp-file-drop-color-disabled-background-initial);\n}\n\n:host([disabled]) > #wrapper::after {\n  border-color: var(--sinch-comp-file-drop-color-disabled-border-initial);\n  border-width: 1px;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text>\n  <sinch-file-picker id="file-picker">\n    <slot></slot>\n  </sinch-file-picker>\n</div>\n';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-content:center;gap:8px;min-height:148px;min-width:148px;box-sizing:border-box;padding:16px;border-radius:var(--sinch-comp-file-drop-shape-radius);background-color:var(--sinch-comp-file-drop-color-default-background-initial)}#wrapper::after{content:"";position:absolute;top:0;left:0;right:0;bottom:0;border:1px dashed var(--sinch-comp-file-drop-color-default-border-initial);border-radius:var(--sinch-comp-file-drop-shape-radius);pointer-events:none}#placeholder{align-self:center;text-align:center;--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-initial);--sinch-comp-text-font:var(--sinch-comp-file-drop-font-placeholder)}:host([invalid]) #wrapper{background-color:var(--sinch-comp-file-drop-color-invalid-background-initial)}:host([invalid]) #wrapper::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-initial);border-width:1px}#wrapper.drop::after{pointer-events:all}#wrapper.drop.valid{background-color:var(--sinch-comp-file-drop-color-default-background-active)}#wrapper.drop.valid::after{border-color:var(--sinch-comp-file-drop-color-default-border-active);border-width:2px}#wrapper.drop.valid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-default-placeholder-active)}#wrapper.drop.invalid{background-color:var(--sinch-comp-file-drop-color-invalid-background-active)}#wrapper.drop.invalid::after{border-color:var(--sinch-comp-file-drop-color-invalid-border-active);border-width:2px}#wrapper.drop.invalid>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-invalid-placeholder-active)}:host([disabled])>#wrapper>#placeholder{--sinch-global-color-text:var(--sinch-comp-file-drop-color-disabled-placeholder-initial)}:host([disabled])>#wrapper{background-color:var(--sinch-comp-file-drop-color-disabled-background-initial)}:host([disabled])>#wrapper::after{border-color:var(--sinch-comp-file-drop-color-disabled-border-initial);border-width:1px}</style><div id="wrapper"><sinch-text id="placeholder" type="m" aria-hidden="true"></sinch-text><sinch-file-picker id="file-picker"><slot></slot></sinch-file-picker></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class FileDrop extends NectaryElement {
@@ -192,9 +192,11 @@ class FileDrop extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onInvalidReactHandler = (e) => {
     getReactEventHandler(this, "on-invalid")?.(e);
+    getReactEventHandler(this, "onInvalid")?.(e);
   };
   #dispatchChangeEvent(files) {
     this.dispatchEvent(

package/file-picker/index.js

@@ -2,7 +2,7 @@ import { updateAttribute, isAttrEqual, updateBooleanAttribute, isAttrTrue, getBo
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { doFilesSatisfySize } from "./utils.js";
-const templateHTML = "<style>\n:host {\n  display: inline-block;\n}\n\n::slotted(*) {\n  display: block;\n}\n</style>\n\n<slot></slot>\n";
+const templateHTML = "<style>:host{display:inline-block}::slotted(*){display:block}</style><slot></slot>";
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class FilePicker extends NectaryElement {
@@ -95,9 +95,11 @@ class FilePicker extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onInvalidReactHandler = (e) => {
     getReactEventHandler(this, "on-invalid")?.(e);
+    getReactEventHandler(this, "onInvalid")?.(e);
   };
 }
 defineCustomElement("sinch-file-picker", FilePicker);

package/file-status/index.js

@@ -4,7 +4,7 @@ import "../text/index.js";
 import { getLiteralAttribute, updateLiteralAttribute, getAttribute, updateAttribute, updateBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { typeValues } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n  }\n\n  #wrapper {\n    display: flex;\n    flex-direction: row;\n    align-items: flex-start;\n    padding: 12px 16px;\n    box-sizing: border-box;\n    min-height: 48px;\n    min-width: 148px;\n    border-radius: var(--sinch-comp-file-status-shape-radius);\n  }\n\n  :host([type="error"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-error-background);\n  }\n\n  :host([type="success"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-success-background);\n  }\n\n  :host([type="pending"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-pending-background);\n  }\n\n  :host([type="progress"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-progress-background);\n  }\n\n  :host([type="loading"]) #wrapper {\n    background-color: var(--sinch-comp-file-status-color-loading-background);\n  }\n\n  #content-wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n    flex: 1;\n    min-width: 0;\n    min-height: 24px;\n    margin-left: 16px;\n  }\n\n  :host([type="error"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-error-text);\n  }\n\n  :host([type="success"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-success-text);\n  }\n\n  :host([type="pending"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-pending-text);\n  }\n\n  :host([type="progress"]) #filename {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-file-status-color-progress-text\n      );\n  }\n\n  :host([type="loading"]) #filename {\n    --sinch-global-color-text: var(--sinch-comp-file-status-color-loading-text);\n  }\n\n  #action {\n    display: flex;\n    gap: 4px;\n    height: 32px;\n    margin-top: -4px;\n    margin-bottom: -4px;\n  }\n\n  #icon-pending,\n  #icon-progress,\n  #icon-success,\n  #icon-error,\n  #icon-loading {\n    display: none;\n  }\n\n  #icon-pending {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-pending-icon);\n  }\n\n  #icon-success {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-success-icon);\n  }\n\n  #icon-progress {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-file-status-color-progress-icon\n      );\n  }\n\n  #icon-error {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-error-icon);\n  }\n\n  #icon-loading {\n    --sinch-global-color-icon: var(--sinch-comp-file-status-color-loading-icon);\n  }\n\n  :host([type="success"]) #icon-success,\n  :host([type="progress"]) #icon-progress,\n  :host([type="error"]) #icon-error,\n  :host([type="pending"]) #icon-pending,\n  :host([type="loading"]) #icon-loading {\n    display: block;\n  }\n</style>\n\n<div id="wrapper">\n  <sinch-spinner id="icon-loading" size="m"></sinch-spinner>\n  <sinch-icon icons-version="2" name="fa-clipboard-question"\n    id="icon-pending"\n  ></sinch-icon>\n  <sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon>\n  <sinch-icon icons-version="2" name="fa-file-lines" id="icon-progress"></sinch-icon>\n  <sinch-icon icons-version="2" name="octagon-exclamation"\n    id="icon-error"\n  ></sinch-icon>\n  <div id="content-wrapper">\n    <sinch-text id="filename" type="m" ellipsis></sinch-text>\n    <slot name="content"></slot>\n  </div>\n  <div id="action">\n    <slot name="action"></slot>\n  </div>\n</div>\n';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:flex-start;padding:12px 16px;box-sizing:border-box;min-height:48px;min-width:148px;border-radius:var(--sinch-comp-file-status-shape-radius)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-file-status-color-error-background)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-file-status-color-success-background)}:host([type=pending]) #wrapper{background-color:var(--sinch-comp-file-status-color-pending-background)}:host([type=progress]) #wrapper{background-color:var(--sinch-comp-file-status-color-progress-background)}:host([type=loading]) #wrapper{background-color:var(--sinch-comp-file-status-color-loading-background)}#content-wrapper{display:flex;flex-direction:column;gap:8px;flex:1;min-width:0;min-height:24px;margin-left:16px}:host([type=error]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-error-text)}:host([type=success]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-success-text)}:host([type=pending]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-pending-text)}:host([type=progress]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-progress-text)}:host([type=loading]) #filename{--sinch-global-color-text:var(--sinch-comp-file-status-color-loading-text)}#action{display:flex;gap:4px;height:32px;margin-top:-4px;margin-bottom:-4px}#icon-error,#icon-loading,#icon-pending,#icon-progress,#icon-success{display:none}#icon-pending{--sinch-global-color-icon:var(--sinch-comp-file-status-color-pending-icon)}#icon-success{--sinch-global-color-icon:var(--sinch-comp-file-status-color-success-icon)}#icon-progress{--sinch-global-color-icon:var(--sinch-comp-file-status-color-progress-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-file-status-color-error-icon)}#icon-loading{--sinch-global-color-icon:var(--sinch-comp-file-status-color-loading-icon)}:host([type=error]) #icon-error,:host([type=loading]) #icon-loading,:host([type=pending]) #icon-pending,:host([type=progress]) #icon-progress,:host([type=success]) #icon-success{display:block}</style><div id="wrapper"><sinch-spinner id="icon-loading" size="m"></sinch-spinner><sinch-icon icons-version="2" name="fa-clipboard-question" id="icon-pending"></sinch-icon><sinch-icon icons-version="2" name="circle-check" id="icon-success"></sinch-icon><sinch-icon icons-version="2" name="fa-file-lines" id="icon-progress"></sinch-icon><sinch-icon icons-version="2" name="octagon-exclamation" id="icon-error"></sinch-icon><div id="content-wrapper"><sinch-text id="filename" type="m" ellipsis></sinch-text><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class FileStatus extends NectaryElement {

package/flag/index.js

@@ -1,7 +1,7 @@
 import { updateAttribute, getAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getFlagUrl } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: contents;\n}\n\n#image {\n  pointer-events: none;\n  width: var(--sinch-global-size-icon, 48px);\n  height: var(--sinch-global-size-icon, 48px);\n  object-fit: contain;\n}\n</style>\n\n<img id="image" src="" alt="" loading="lazy"/>\n';
+const templateHTML = '<style>:host{display:contents}#image{pointer-events:none;width:var(--sinch-global-size-icon,48px);height:var(--sinch-global-size-icon,48px);object-fit:contain}</style><img id="image" src="" alt="" loading="lazy">';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Flag extends NectaryElement {

package/grid/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: grid;\n  grid-template-columns: repeat(var(--sinch-comp-grid-columns-xl), minmax(0, 1fr));\n  grid-column-gap: var(--sinch-comp-grid-gutter-xl);\n  grid-row-gap: var(--sinch-comp-grid-gutter-xl);\n  padding: var(--sinch-comp-grid-margin-xl);\n}\n\n/* L */\n@media only screen and (max-width: 1439px) {\n  :host {\n    grid-template-columns: repeat(var(--sinch-comp-grid-columns-l), minmax(0, 1fr));\n    grid-column-gap: var(--sinch-comp-grid-gutter-l);\n    grid-row-gap: var(--sinch-comp-grid-gutter-l);\n    padding: var(--sinch-comp-grid-margin-l);\n  }\n}\n\n/* M */\n@media only screen and (max-width: 1023px) {\n  :host {\n    grid-template-columns: repeat(var(--sinch-comp-grid-columns-m), minmax(0, 1fr));\n    grid-column-gap: var(--sinch-comp-grid-gutter-m);\n    grid-row-gap: var(--sinch-comp-grid-gutter-m);\n    padding: var(--sinch-comp-grid-margin-m);\n  }\n}\n\n/* S */\n@media only screen and (max-width: 767px) {\n  :host {\n    grid-template-columns: repeat(var(--sinch-comp-grid-columns-s), minmax(0, 1fr));\n    grid-column-gap: var(--sinch-comp-grid-gutter-s);\n    grid-row-gap: var(--sinch-comp-grid-gutter-s);\n    padding: var(--sinch-comp-grid-margin-s);\n  }\n}\n</style>\n\n<slot name="item"></slot>\n';
+const templateHTML = '<style>:host{display:grid;grid-template-columns:repeat(var(--sinch-comp-grid-columns-xl),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-xl);grid-row-gap:var(--sinch-comp-grid-gutter-xl);padding:var(--sinch-comp-grid-margin-xl)}@media only screen and (max-width:1439px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-l),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-l);grid-row-gap:var(--sinch-comp-grid-gutter-l);padding:var(--sinch-comp-grid-margin-l)}}@media only screen and (max-width:1023px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-m),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-m);grid-row-gap:var(--sinch-comp-grid-gutter-m);padding:var(--sinch-comp-grid-margin-m)}}@media only screen and (max-width:767px){:host{grid-template-columns:repeat(var(--sinch-comp-grid-columns-s),minmax(0,1fr));grid-column-gap:var(--sinch-comp-grid-gutter-s);grid-row-gap:var(--sinch-comp-grid-gutter-s);padding:var(--sinch-comp-grid-margin-s)}}</style><slot name="item"></slot>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Grid extends NectaryElement {

package/grid-item/index.js

@@ -1,6 +1,6 @@
 import { getIntegerAttribute, updateIntegerAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  grid-column: span 12;\n}\n\n:host([xl="2"]) {\n  grid-column: span 2;\n}\n\n:host([xl="3"]) {\n  grid-column: span 3;\n}\n\n:host([xl="4"]) {\n  grid-column: span 4;\n}\n\n:host([xl="5"]) {\n  grid-column: span 5;\n}\n\n:host([xl="6"]) {\n  grid-column: span 6;\n}\n\n:host([xl="7"]) {\n  grid-column: span 7;\n}\n\n:host([xl="8"]) {\n  grid-column: span 8;\n}\n\n:host([xl="9"]) {\n  grid-column: span 9;\n}\n\n:host([xl="10"]) {\n  grid-column: span 10;\n}\n\n:host([xl="11"]) {\n  grid-column: span 11;\n}\n\n:host([xl="12"]) {\n  grid-column: span 12;\n}\n\n@media only screen and (max-width: 1439px) {\n  :host {\n    grid-column: span 12;\n  }\n\n  :host([l="2"]) {\n    grid-column: span 2;\n  }\n\n  :host([l="3"]) {\n    grid-column: span 3;\n  }\n\n  :host([l="4"]) {\n    grid-column: span 4;\n  }\n\n  :host([l="5"]) {\n    grid-column: span 5;\n  }\n\n  :host([l="6"]) {\n    grid-column: span 6;\n  }\n\n  :host([l="7"]) {\n    grid-column: span 7;\n  }\n\n  :host([l="8"]) {\n    grid-column: span 8;\n  }\n\n  :host([l="9"]) {\n    grid-column: span 9;\n  }\n\n  :host([l="10"]) {\n    grid-column: span 10;\n  }\n\n  :host([l="11"]) {\n    grid-column: span 11;\n  }\n\n  :host([l="12"]) {\n    grid-column: span 12;\n  }\n}\n\n@media only screen and (max-width: 1023px) {\n  :host {\n    grid-column: span 8;\n  }\n\n  :host([m="2"]) {\n    grid-column: span 2;\n  }\n\n  :host([m="3"]) {\n    grid-column: span 3;\n  }\n\n  :host([m="4"]) {\n    grid-column: span 4;\n  }\n\n  :host([m="5"]) {\n    grid-column: span 5;\n  }\n\n  :host([m="6"]) {\n    grid-column: span 6;\n  }\n\n  :host([m="7"]) {\n    grid-column: span 7;\n  }\n\n  :host([m="8"]) {\n    grid-column: span 8;\n  }\n}\n\n@media only screen and (max-width: 767px) {\n  :host {\n    grid-column: span 4;\n  }\n\n  :host([s="2"]) {\n    grid-column: span 2;\n  }\n\n  :host([s="3"]) {\n    grid-column: span 3;\n  }\n\n  :host([s="4"]) {\n    grid-column: span 4;\n  }\n}\n</style>\n\n<slot name="content"></slot>\n';
+const templateHTML = '<style>:host{display:block;grid-column:span 12}:host([xl="2"]){grid-column:span 2}:host([xl="3"]){grid-column:span 3}:host([xl="4"]){grid-column:span 4}:host([xl="5"]){grid-column:span 5}:host([xl="6"]){grid-column:span 6}:host([xl="7"]){grid-column:span 7}:host([xl="8"]){grid-column:span 8}:host([xl="9"]){grid-column:span 9}:host([xl="10"]){grid-column:span 10}:host([xl="11"]){grid-column:span 11}:host([xl="12"]){grid-column:span 12}@media only screen and (max-width:1439px){:host{grid-column:span 12}:host([l="2"]){grid-column:span 2}:host([l="3"]){grid-column:span 3}:host([l="4"]){grid-column:span 4}:host([l="5"]){grid-column:span 5}:host([l="6"]){grid-column:span 6}:host([l="7"]){grid-column:span 7}:host([l="8"]){grid-column:span 8}:host([l="9"]){grid-column:span 9}:host([l="10"]){grid-column:span 10}:host([l="11"]){grid-column:span 11}:host([l="12"]){grid-column:span 12}}@media only screen and (max-width:1023px){:host{grid-column:span 8}:host([m="2"]){grid-column:span 2}:host([m="3"]){grid-column:span 3}:host([m="4"]){grid-column:span 4}:host([m="5"]){grid-column:span 5}:host([m="6"]){grid-column:span 6}:host([m="7"]){grid-column:span 7}:host([m="8"]){grid-column:span 8}}@media only screen and (max-width:767px){:host{grid-column:span 4}:host([s="2"]){grid-column:span 2}:host([s="3"]){grid-column:span 3}:host([s="4"]){grid-column:span 4}}</style><slot name="content"></slot>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class GridItem extends NectaryElement {

package/help-tooltip/index.js

@@ -3,7 +3,7 @@ import "../icon/index.js";
 import { updateAttribute, getAttribute, getIntegerAttribute, updateIntegerAttribute } 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: contents;\n  }\n\n  #icon {\n    --sinch-global-size-icon: 18px;\n  }\n</style>\n\n<sinch-tooltip type="fast">\n  <sinch-icon icons-version="2" name="circle-question" id="icon"></sinch-icon>\n</sinch-tooltip>\n';
+const templateHTML = '<style>:host{display:contents}#icon{--sinch-global-size-icon:18px}</style><sinch-tooltip type="fast"><sinch-icon icons-version="2" name="circle-question" id="icon"></sinch-icon></sinch-tooltip>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class HelpTooltip extends NectaryElement {
@@ -67,9 +67,11 @@ class HelpTooltip extends NectaryElement {
   };
   #onTooltipShowReactHandler = () => {
     getReactEventHandler(this, "on-show")?.();
+    getReactEventHandler(this, "onShow")?.();
   };
   #onTooltipHideReactHandler = () => {
     getReactEventHandler(this, "on-hide")?.();
+    getReactEventHandler(this, "onHide")?.();
   };
 }
 defineCustomElement("sinch-help-tooltip", HelpTooltip);

package/icon/index.js

@@ -1,6 +1,6 @@
 import { getAttribute, updateAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: inline-block;\n}\n\n#icon {\n  display: block;\n  font-weight: var(--sinch-comp-icon-font-weight);\n  font-size: var(--sinch-global-size-icon, 24px);\n  -webkit-font-smoothing: antialiased;\n  line-height: 1;\n  white-space: nowrap;\n  width: var(--sinch-global-size-icon, 24px);\n  height: var(--sinch-global-size-icon, 24px);\n  color: var(--sinch-global-color-icon, var(--sinch-sys-color-text-default));\n  user-select: none;\n  font-family: var(--sinch-comp-icon-font-family);\n  font-feature-settings: var(--sinch-comp-icon-font-feature-settings);\n}\n\n#icon.zero-to-d {\n  font-family: var(--sinch-comp-icon-font-family-zero-to-d);\n}\n\n#icon.e-to-o {\n  font-family: var(--sinch-comp-icon-font-family-e-to-o);\n}\n\n#icon.p-to-z {\n  font-family: var(--sinch-comp-icon-font-family-p-to-z);\n}\n</style>\n\n<span id="icon" role="img"></span>\n';
+const templateHTML = '<style>:host{display:inline-block}#icon{display:block;font-weight:var(--sinch-comp-icon-font-weight);font-size:var(--sinch-global-size-icon, 24px);-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-global-size-icon,24px);height:var(--sinch-global-size-icon,24px);color:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default));user-select:none;font-family:var(--sinch-comp-icon-font-family);font-feature-settings:var(--sinch-comp-icon-font-feature-settings)}#icon.zero-to-d{font-family:var(--sinch-comp-icon-font-family-zero-to-d)}#icon.e-to-o{font-family:var(--sinch-comp-icon-font-family-e-to-o)}#icon.p-to-z{font-family:var(--sinch-comp-icon-font-family-p-to-z)}</style><span id="icon" role="img"></span>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Icon extends NectaryElement {

package/inline-alert/index.js

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

package/input/index.js

@@ -6,7 +6,7 @@ import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { setFormValue, requestSubmitForm } from "../utils/form.js";
 import { sizeValues, DEFAULT_SIZE } from "../utils/size.js";
 import { splitValueAndMask, inputTypes, beginMaskedComposition, endMaskedComposition, deleteContentForward, deleteContentBackward, insertFromPaste, insertText, getMergedValueSliced, getMaskSymbols } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  all: initial;\n  display: inline-block;\n  vertical-align: middle;\n}\n\n#wrapper {\n  position: relative;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  box-sizing: border-box;\n  border-radius: var(--sinch-local-shape-radius);\n  width: 100%;\n  height: var(--sinch-local-size);\n  background-color: var(--sinch-comp-input-color-default-background-initial);\n\n  /* Default values */\n  --sinch-local-size: var(--sinch-comp-input-size-container-m);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-m);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-m);\n}\n\n:host([data-size="l"]) > #wrapper {\n  --sinch-local-size: var(--sinch-comp-input-size-container-l);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-l);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-l);\n}\n\n:host([data-size="m"]) > #wrapper {\n  --sinch-local-size: var(--sinch-comp-input-size-container-m);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-m);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-m);\n}\n\n:host([data-size="s"]) > #wrapper {\n  --sinch-local-size: var(--sinch-comp-input-size-container-s);\n  --sinch-global-size-icon: var(--sinch-comp-input-size-icon-s);\n  --sinch-local-shape-radius: var(--sinch-comp-input-shape-radius-size-s);\n}\n\n#input-wrapper {\n  position: relative;\n  flex: 1;\n  flex-basis: 0;\n  min-width: 0;\n  align-self: stretch;\n}\n\n#input {\n  all: initial;\n  width: 100%;\n  height: 100%;\n  padding: 0 12px;\n  box-sizing: border-box;\n  font: var(--sinch-comp-input-font-input);\n  color: var(--sinch-comp-input-color-default-text-initial);\n}\n\n#input::placeholder {\n  font: var(--sinch-comp-input-font-placeholder) !important;\n  color: var(--sinch-comp-input-color-default-text-placeholder);\n  opacity: 1;\n}\n\n#input:disabled {\n  color: var(--sinch-comp-input-color-disabled-text-initial);\n  -webkit-text-fill-color: var(--sinch-comp-input-color-disabled-text-initial);\n}\n\n#input-mask {\n  display: none;\n  position: absolute;\n  inset: 0;\n  padding: 0 12px;\n  pointer-events: none;\n  color: var(--sinch-comp-input-color-default-text-placeholder);\n  white-space: pre;\n  height: fit-content;\n  margin: auto 0;\n  overflow: hidden;\n}\n\n#border {\n  position: absolute;\n  border: 1px solid var(--sinch-comp-input-color-default-border-initial);\n  border-radius: var(--sinch-local-shape-radius);\n  inset: 0;\n  pointer-events: none;\n}\n\n:host([disabled]) #border {\n  border-color: var(--sinch-comp-input-color-disabled-border-initial);\n}\n\n#input-wrapper:focus-within + #border {\n  border-color: var(--sinch-comp-input-color-default-border-focus);\n  border-width: 2px;\n}\n\n:host([mask]) #input,\n#input-mask {\n  font: var(--sinch-sys-font-body-monospace-m);\n}\n\n:host([mask]) #input-mask {\n  display: block;\n}\n\n:host([invalid]:not([disabled])) #input-wrapper:not(:focus-within) + #border {\n  border-color: var(--sinch-comp-input-color-invalid-border-initial);\n}\n\n#input[type="password"]:not(:placeholder-shown) {\n  font-size: 1.5em;\n  letter-spacing: 0.1em;\n}\n\n#icon-wrapper {\n  position: relative;\n  height: 100%;\n}\n\n#icon {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  left: 12px;\n  top: 0;\n  bottom: 0;\n  pointer-events: none;\n\n  --sinch-global-color-icon: var(--sinch-comp-input-color-default-icon-initial);\n}\n\n:host([disabled]) #icon {\n  --sinch-global-color-icon: var(--sinch-comp-input-color-disabled-icon-initial);\n}\n\n#icon-wrapper.empty {\n  display: none;\n}\n\n#icon-wrapper.empty ~ #input-wrapper > #input,\n#icon-wrapper.empty ~ #input-wrapper > #input-mask {\n  padding-left: 12px;\n}\n\n#icon-wrapper:not(.empty) ~ #input-wrapper > #input,\n#icon-wrapper:not(.empty) ~ #input-wrapper > #input-mask {\n  padding-left: calc(var(--sinch-global-size-icon) + 20px);\n}\n\n#right {\n  display: flex;\n  flex-direction: row;\n  align-self: stretch;\n  align-items: center;\n  gap: 4px;\n  padding-right: 4px;\n}\n\n#right.empty {\n  display: none;\n}\n\n#left {\n  display: flex;\n  flex-direction: row;\n  align-self: stretch;\n  align-items: center;\n  gap: 4px;\n  padding-left: 4px;\n}\n\n#left.empty {\n  display: none;\n}\n</style>\n\n<div id="wrapper">\n  <div id="left">\n    <slot name="left"></slot>\n  </div>\n  <div id="icon-wrapper">\n    <div id="icon">\n      <slot name="icon"></slot>\n    </div>\n  </div>\n  <div id="input-wrapper">\n    <div id="input-mask"></div>\n    <input id="input" type="text"/>\n  </div>\n  <div id="border"></div>\n  <div id="right">\n    <slot name="right"></slot>\n  </div>\n</div>\n';
+const templateHTML = '<style>:host{all:initial;display:inline-block;vertical-align:middle}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-local-shape-radius);width:100%;height:var(--sinch-local-size);background-color:var(--sinch-comp-input-color-default-background-initial);--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-l);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-m);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-input-size-container-s);--sinch-global-size-icon:var(--sinch-comp-input-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-input-shape-radius-size-s)}#input-wrapper{position:relative;flex:1;flex-basis:0;min-width:0;align-self:stretch}#input{all:initial;width:100%;height:100%;padding:0 12px;box-sizing:border-box;font:var(--sinch-comp-input-font-input);color:var(--sinch-comp-input-color-default-text-initial)}#input::placeholder{font:var(--sinch-comp-input-font-placeholder)!important;color:var(--sinch-comp-input-color-default-text-placeholder);opacity:1}#input:disabled{color:var(--sinch-comp-input-color-disabled-text-initial);-webkit-text-fill-color:var(--sinch-comp-input-color-disabled-text-initial)}#input-mask{display:none;position:absolute;inset:0;padding:0 12px;pointer-events:none;color:var(--sinch-comp-input-color-default-text-placeholder);white-space:pre;height:fit-content;margin:auto 0;overflow:hidden}#border{position:absolute;border:1px solid var(--sinch-comp-input-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host([disabled]) #border{border-color:var(--sinch-comp-input-color-disabled-border-initial)}#input-wrapper:focus-within+#border{border-color:var(--sinch-comp-input-color-default-border-focus);border-width:2px}#input-mask,:host([mask]) #input{font:var(--sinch-sys-font-body-monospace-m)}:host([mask]) #input-mask{display:block}:host([invalid]:not([disabled])) #input-wrapper:not(:focus-within)+#border{border-color:var(--sinch-comp-input-color-invalid-border-initial)}#input[type=password]:not(:placeholder-shown){font-size:1.5em;letter-spacing:.1em}#icon-wrapper{position:relative;height:100%}#icon{position:absolute;display:flex;align-items:center;left:12px;top:0;bottom:0;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-input-color-default-icon-initial)}:host([disabled]) #icon{--sinch-global-color-icon:var(--sinch-comp-input-color-disabled-icon-initial)}#icon-wrapper.empty{display:none}#icon-wrapper.empty~#input-wrapper>#input,#icon-wrapper.empty~#input-wrapper>#input-mask{padding-left:12px}#icon-wrapper:not(.empty)~#input-wrapper>#input,#icon-wrapper:not(.empty)~#input-wrapper>#input-mask{padding-left:calc(var(--sinch-global-size-icon) + 20px)}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:4px}#right.empty{display:none}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-left:4px}#left.empty{display:none}</style><div id="wrapper"><div id="left"><slot name="left"></slot></div><div id="icon-wrapper"><div id="icon"><slot name="icon"></slot></div></div><div id="input-wrapper"><div id="input-mask"></div><input id="input" type="text"></div><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Input extends NectaryElement {
@@ -666,6 +666,7 @@ class Input extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   #onFocusReactHandler = () => {
     getReactEventHandler(this, "on-focus")?.();

package/link/index.js

@@ -2,7 +2,7 @@ import "../icon/index.js";
 import { isAttrEqual, updateAttribute, updateBooleanAttribute, isAttrTrue, 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: inline;\n  }\n\n  a {\n    font: var(--sinch-comp-link-default-font-initial);\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: var(--sinch-comp-link-default-text-decoration-initial);\n    color: var(--sinch-comp-link-color-default-text-initial);\n    border-radius: 0.5em;\n    white-space: nowrap;\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-default-icon-initial);\n  }\n\n  a:hover {\n    text-decoration: var(--sinch-comp-link-default-text-decoration-hover);\n    color: var(--sinch-comp-link-color-default-text-hover);\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-default-icon-hover);\n  }\n\n  a:focus-visible {\n    outline: 2px solid var(--sinch-comp-link-color-default-outline-focus);\n    outline-offset: 2px;\n  }\n\n  :host([standalone]) {\n    display: block;\n  }\n\n  :host([standalone]) a {\n    display: block;\n    font: var(--sinch-comp-link-standalone-font-initial);\n    font-size: inherit;\n    line-height: inherit;\n    text-decoration: none;\n    width: fit-content;\n  }\n\n  #external-icon,\n  #standalone-icon {\n    display: none;\n    height: 1em;\n  }\n\n  #icon-prefix {\n    display: none;\n    margin-left: -0.25em;\n  }\n\n  :host([external]:not([standalone])) #external-icon {\n    display: inline-block;\n    margin-left: 0.25em;\n    vertical-align: -0.2em;\n\n    --sinch-global-size-icon: 1em;\n  }\n\n  :host([standalone][external]) #external-icon {\n    display: inline-block;\n    vertical-align: -0.4em;\n\n    --sinch-global-size-icon: 1.5em;\n  }\n\n  :host([standalone]) #icon-prefix {\n    display: inline;\n  }\n\n  :host([standalone]:not([external])) #standalone-icon {\n    display: inline-block;\n    vertical-align: -0.4em;\n\n    --sinch-global-size-icon: 1.5em;\n  }\n\n  :host([disabled]) a {\n    color: var(--sinch-comp-link-color-disabled-text-initial);\n    pointer-events: none;\n    cursor: initial;\n    text-decoration: var(--sinch-comp-link-default-text-decoration-disabled);\n\n    --sinch-global-color-icon: var(--sinch-comp-link-color-disabled-icon-initial);\n  }\n\n  #content {\n    white-space: var(--sinch-global-text-white-space, normal);\n  }\n</style>\n\n<a referrerpolicy="no-referer" aria-hidden="true">\n  <span id="content"></span>\n  <span id="icon-prefix">&nbsp;</span>\n  <sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon>\n  <sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon>\n</a>\n';
+const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-comp-link-default-font-initial);font-size:inherit;line-height:inherit;text-decoration:var(--sinch-comp-link-default-text-decoration-initial);color:var(--sinch-comp-link-color-default-text-initial);border-radius:.5em;white-space:nowrap;--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-initial)}a:hover{text-decoration:var(--sinch-comp-link-default-text-decoration-hover);color:var(--sinch-comp-link-color-default-text-hover);--sinch-global-color-icon:var(--sinch-comp-link-color-default-icon-hover)}a:focus-visible{outline:2px solid var(--sinch-comp-link-color-default-outline-focus);outline-offset:2px}:host([standalone]){display:block}:host([standalone]) a{display:block;font:var(--sinch-comp-link-standalone-font-initial);font-size:inherit;line-height:inherit;text-decoration:none;width:fit-content}#external-icon,#standalone-icon{display:none;height:1em}#icon-prefix{display:none;margin-left:-.25em}:host([external]:not([standalone])) #external-icon{display:inline-block;margin-left:.25em;vertical-align:-.2em;--sinch-global-size-icon:1em}:host([standalone][external]) #external-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([standalone]) #icon-prefix{display:inline}:host([standalone]:not([external])) #standalone-icon{display:inline-block;vertical-align:-.4em;--sinch-global-size-icon:1.5em}:host([disabled]) a{color:var(--sinch-comp-link-color-disabled-text-initial);pointer-events:none;cursor:initial;text-decoration:var(--sinch-comp-link-default-text-decoration-disabled);--sinch-global-color-icon:var(--sinch-comp-link-color-disabled-icon-initial)}#content{white-space:var(--sinch-global-text-white-space,normal)}</style><a referrerpolicy="no-referer" aria-hidden="true"><span id="content"></span> <span id="icon-prefix">&nbsp;</span><sinch-icon icons-version="2" name="fa-arrow-up-right" id="external-icon"></sinch-icon><sinch-icon icons-version="2" name="fa-arrow-right" id="standalone-icon"></sinch-icon></a>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Link extends NectaryElement {

package/list/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  height: 100%;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  width: 100%;\n  height: 100%;\n  overflow-y: auto;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:block;height:100%}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%;overflow-y:auto}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class List extends NectaryElement {

package/list-item/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n  outline: none;\n}\n\n#wrapper {\n  width: 100%;\n  height: 100%;\n  box-sizing: border-box;\n  overflow: hidden;\n  padding: 8px 0;\n  background-color: var(--sinch-comp-list-color-default-background-initial);\n  border-bottom: 1px solid var(--sinch-comp-list-color-default-border-initial);\n}\n\n:host(:last-child) > #wrapper {\n  border-bottom: none;\n}\n\n:host(:hover) > #wrapper {\n  background-color: var(--sinch-comp-list-color-default-background-hover);\n}\n</style>\n\n<div id="wrapper">\n  <slot name="content"></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;background-color:var(--sinch-comp-list-color-default-background-initial);border-bottom:1px solid var(--sinch-comp-list-color-default-border-initial)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-comp-list-color-default-background-hover)}</style><div id="wrapper"><slot name="content"></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class ListItem extends NectaryElement {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "5.0.2",
+  "version": "5.0.4",
   "files": [
     "**/*/*.css",
     "**/*/*.json",
@@ -19,12 +19,12 @@
     "access": "public"
   },
   "scripts": {
-    "build": "rm -rf utils/shared && cp -r ../shared utils/shared && vite build && vite build --mode bundle && npx tsc --declaration --emitDeclarationOnly && npx tsx ../scripts/tsc-alias.ts --alias '@nectary/shared=./utils/shared'",
+    "build": "rm -rf utils/shared && cp -r ../shared utils/shared && npx tsx ../scripts/minify-html.ts && vite build && vite build --mode bundle && npx tsc --declaration --emitDeclarationOnly && npx tsx ../scripts/tsc-alias.ts --alias '@nectary/shared=./utils/shared'",
     "dev": "vite build --watch"
   },
   "dependencies": {
     "@babel/runtime": "^7.22.15",
-    "@nectary/assets": "3.0.0"
+    "@nectary/assets": "3.0.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.22.15",

package/pagination/index.js

@@ -4,7 +4,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual, getTargetIndexInParent } from "../utils/event-target.js";
-const templateHTML = '<style>\n  :host {\n    display: inline-block;\n    vertical-align: middle;\n    outline: none;\n  }\n\n  #wrapper {\n    display: flex;\n    justify-content: center;\n    gap: 8px;\n    width: 100%;\n    height: var(--sinch-local-size);\n\n    --sinch-local-size: 24px;\n  }\n\n  button {\n    all: initial;\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-width: var(--sinch-local-size);\n    height: var(--sinch-local-size);\n    cursor: pointer;\n    border-radius: var(--sinch-comp-pagination-shape-radius);\n    user-select: none;\n\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-pagination-color-default-icon-default\n      );\n  }\n\n  button:focus-visible::before {\n    content: "";\n    position: absolute;\n    inset: -3px;\n    border: 2px solid var(--sinch-comp-pagination-color-default-outline-focus);\n    border-radius: calc(var(--sinch-comp-pagination-shape-radius) + 3px);\n    pointer-events: none;\n  }\n\n  button:disabled {\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-pagination-color-disabled-icon-initial\n      );\n\n    cursor: initial;\n  }\n\n  button:enabled:hover {\n    background-color:\n      var(\n        --sinch-comp-pagination-color-default-background-hover\n      );\n  }\n\n  button > * {\n    display: block;\n    overflow: hidden;\n    pointer-events: none;\n  }\n\n  .page {\n    font: var(--sinch-comp-pagination-font-default-page-number);\n    color: var(--sinch-comp-pagination-color-default-text-initial);\n    background-color:\n      var(\n        --sinch-comp-pagination-color-default-background-initial\n      );\n    padding: 0 4px;\n    box-sizing: border-box;\n  }\n\n  .page.dots > span {\n    display: none;\n  }\n\n  .page.dots::after {\n    content: "...";\n  }\n\n  .page.active {\n    font: var(--sinch-comp-pagination-font-checked-page-number);\n    background-color:\n      var(\n        --sinch-comp-pagination-color-checked-background-initial\n      );\n    pointer-events: none;\n    cursor: initial;\n  }\n\n  .page.active:hover {\n    background-color:\n      var(\n        --sinch-comp-pagination-color-checked-background-hover\n      );\n  }\n\n  .page.hidden {\n    display: none;\n  }\n\n  #left,\n  #right {\n    --sinch-icon-size: 24px;\n  }\n</style>\n\n<div id="wrapper">\n  <button id="left">\n    <sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon>\n  </button>\n  <button class="page"><span>1</span></button>\n  <button class="page active"><span>2</span></button>\n  <button class="page"><span>3</span></button>\n  <button class="page"><span>4</span></button>\n  <button class="page"><span>5</span></button>\n  <button class="page dots"><span>6</span></button>\n  <button class="page"><span>20</span></button>\n  <button id="right">\n    <sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon>\n  </button>\n</div>\n';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{display:flex;justify-content:center;gap:8px;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}button{all:initial;position:relative;display:flex;justify-content:center;align-items:center;min-width:var(--sinch-local-size);height:var(--sinch-local-size);cursor:pointer;border-radius:var(--sinch-comp-pagination-shape-radius);user-select:none;--sinch-global-color-icon:var(--sinch-comp-pagination-color-default-icon-default)}button:focus-visible::before{content:"";position:absolute;inset:-3px;border:2px solid var(--sinch-comp-pagination-color-default-outline-focus);border-radius:calc(var(--sinch-comp-pagination-shape-radius) + 3px);pointer-events:none}button:disabled{--sinch-global-color-icon:var(--sinch-comp-pagination-color-disabled-icon-initial);cursor:initial}button:enabled:hover{background-color:var(--sinch-comp-pagination-color-default-background-hover)}button>*{display:block;overflow:hidden;pointer-events:none}.page{font:var(--sinch-comp-pagination-font-default-page-number);color:var(--sinch-comp-pagination-color-default-text-initial);background-color:var(--sinch-comp-pagination-color-default-background-initial);padding:0 4px;box-sizing:border-box}.page.dots>span{display:none}.page.dots::after{content:"..."}.page.active{font:var(--sinch-comp-pagination-font-checked-page-number);background-color:var(--sinch-comp-pagination-color-checked-background-initial);pointer-events:none;cursor:initial}.page.active:hover{background-color:var(--sinch-comp-pagination-color-checked-background-hover)}.page.hidden{display:none}#left,#right{--sinch-icon-size:24px}</style><div id="wrapper"><button id="left"><sinch-icon icons-version="2" name="fa-angle-left" id="icon-left"></sinch-icon></button> <button class="page"><span>1</span></button> <button class="page active"><span>2</span></button> <button class="page"><span>3</span></button> <button class="page"><span>4</span></button> <button class="page"><span>5</span></button> <button class="page dots"><span>6</span></button> <button class="page"><span>20</span></button> <button id="right"><sinch-icon icons-version="2" name="fa-angle-right" id="icon-right"></sinch-icon></button></div>';
 const NUM_BUTTONS = 7;
 const MIDDLE_BTN_INDEX = Math.floor(NUM_BUTTONS / 2);
 const FIRST_BTN_INDEX = 0;
@@ -137,6 +137,7 @@ class Pagination extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
   get focusable() {
     return true;

package/persistent-overlay/index.js

@@ -2,7 +2,7 @@ import "../dialog/index.js";
 import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute, isAttrTrue } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
-const templateHTML = '<style>\n  #persisted-dialog {\n    --sinch-dialog-close-button-display: none;\n  }\n\n  ::slotted(*) {\n    display: block;\n  }\n</style>\n\n<sinch-dialog id="persisted-dialog">\n  <div slot="icon"><slot id="icon" name="icon"></slot></div>\n  <div slot="content"><slot name="content"></slot></div>\n  <div slot="buttons"><slot name="buttons"></slot></div>\n</sinch-dialog>\n';
+const templateHTML = '<style>#persisted-dialog{--sinch-dialog-close-button-display:none}::slotted(*){display:block}</style><sinch-dialog id="persisted-dialog"><div slot="icon"><slot id="icon" name="icon"></slot></div><div slot="content"><slot name="content"></slot></div><div slot="buttons"><slot name="buttons"></slot></div></sinch-dialog>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 function isVisible(elementStyle) {
@@ -92,6 +92,7 @@ class PersistentOverlay extends NectaryElement {
   }
   #onVisibilityAlteredReactHandler = (e) => {
     getReactEventHandler(this, "on-visibility-altered")?.(e);
+    getReactEventHandler(this, "onVisibilityAltered")?.(e);
   };
 }
 defineCustomElement("sinch-persistent-overlay", PersistentOverlay);

package/pop/index.js

@@ -7,7 +7,7 @@ import { throttleAnimationFrame } from "../utils/throttle.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { isTargetEqual } from "../utils/event-target.js";
 import { orientationValues, disableOverscroll, enableOverscroll } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: contents;\n  position: relative;\n}\n\ndialog {\n  position: fixed;\n  left: 0;\n  top: 0;\n  margin: 0;\n  outline: none;\n  padding: 0;\n  border: none;\n  box-sizing: border-box;\n  max-width: unset;\n  max-height: unset;\n  z-index: 1;\n  background: none;\n  overflow: visible;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog::backdrop {\n  background-color: transparent;\n}\n\n#content {\n  position: relative;\n  z-index: 1;\n}\n\n#target-open {\n  display: flex;\n  flex-direction: column;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n\n#focus {\n  display: none;\n  position: absolute;\n  width: 0;\n  height: 0;\n}\n</style>\n\n<slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot>\n<div id="focus"></div>\n<dialog id="dialog">\n  <div id="target-open">\n    <slot name="target-open"></slot>\n  </div>\n  <div id="content">\n    <slot name="content"></slot>\n  </div>\n</dialog>\n';
+const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Pop extends NectaryElement {
@@ -379,6 +379,7 @@ class Pop extends NectaryElement {
   };
   #onCloseReactHandler = (e) => {
     getReactEventHandler(this, "on-close")?.(e);
+    getReactEventHandler(this, "onClose")?.(e);
   };
   #dispatchCloseEvent() {
     this.dispatchEvent(

package/popover/index.js

@@ -5,7 +5,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { rectOverlap } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getPopOrientation, orientationValues } from "./utils.js";
-const templateHTML = '<style>\n:host {\n  display: contents;\n}\n\n#content-wrapper {\n  position: relative;\n  padding-top: 4px;\n  width: fit-content;\n  min-width: 100%;\n}\n\n:host([tip]) #content-wrapper {\n  padding-top: 12px;\n  filter: drop-shadow(var(--sinch-comp-popover-shadow));\n}\n\n:host([orientation^="top"]) #content-wrapper {\n  padding-top: 0;\n  padding-bottom: 4px;\n}\n\n:host([orientation^="top"][tip]) #content-wrapper {\n  padding-top: 0;\n  padding-bottom: 12px;\n}\n\n#content {\n  background-color: var(--sinch-comp-popover-color-default-background-initial);\n  border: 1px solid var(--sinch-comp-popover-color-default-border-initial);\n  border-radius: var(--sinch-comp-popover-shape-radius);\n  box-shadow: var(--sinch-comp-popover-shadow);\n  overflow: hidden;\n}\n\n:host([tip]) #content {\n  box-shadow: none;\n}\n\n#tip {\n  position: absolute;\n  left: 50%;\n  top: 13px;\n  transform: translateX(-50%) rotate(180deg);\n  transform-origin: top center;\n  fill: var(--sinch-comp-popover-color-default-background-initial);\n  stroke: var(--sinch-comp-popover-color-default-border-initial);\n  stroke-linecap: square;\n  pointer-events: none;\n  display: none;\n}\n\n:host([orientation^="top"]) #tip {\n  transform: translateX(-50%) rotate(0deg);\n  top: calc(100% - 13px);\n}\n\n:host([tip]) #tip:not(.hidden) {\n  display: block;\n}\n</style>\n\n<sinch-pop id="pop" inset="4">\n  <slot name="target" slot="target"></slot>\n  <div id="content-wrapper" slot="content">\n    <div id="content">\n      <slot name="content"></slot>\n    </div>\n    <svg id="tip" width="16" height="9" aria-hidden="true">\n      <path d="m0 0 8 8 8 -8"/>\n    </svg>\n  </div>\n</sinch-pop>\n';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px;width:fit-content;min-width:100%}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-comp-popover-shadow))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}#content{background-color:var(--sinch-comp-popover-color-default-background-initial);border:1px solid var(--sinch-comp-popover-color-default-border-initial);border-radius:var(--sinch-comp-popover-shape-radius);box-shadow:var(--sinch-comp-popover-shadow);overflow:hidden}:host([tip]) #content{box-shadow:none}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-comp-popover-color-default-background-initial);stroke:var(--sinch-comp-popover-color-default-border-initial);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 const TIP_SIZE = 16;
 const template = document.createElement("template");
 template.innerHTML = templateHTML;

package/progress/index.js

@@ -1,7 +1,7 @@
 import "../text/index.js";
 import { isAttrEqual, updateBooleanAttribute, isAttrTrue, attrValueToInteger, getIntegerAttribute, updateAttribute, 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  align-items: center;\n  height: 24px;\n}\n\n#progress,\n#bar {\n  height: 8px;\n  border-radius: 4px;\n}\n\n#progress {\n  background-color: var(--sinch-comp-progress-color-default-background-initial);\n  flex: 1;\n  min-width: 0;\n}\n\n#bar {\n  background-color: var(--sinch-comp-progress-color-default-bar-initial);\n  width: 0;\n}\n\n#text {\n  display: none;\n  width: 46px;\n\n  --sinch-global-color-text: var(--sinch-comp-progress-color-default-text-initial);\n}\n\n:host([detailed]) #text {\n  display: block;\n}\n</style>\n\n<div id="wrapper">\n  <sinch-text id="text" type="m"></sinch-text>\n  <div id="progress">\n    <div id="bar"></div>\n  </div>\n</div>\n';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-comp-progress-color-default-background-initial);flex:1;min-width:0}#bar{background-color:var(--sinch-comp-progress-color-default-bar-initial);width:0}#text{display:none;width:46px;--sinch-global-color-text:var(--sinch-comp-progress-color-default-text-initial)}:host([detailed]) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Progress extends NectaryElement {

package/progress-stepper/index.js

@@ -4,7 +4,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getRect } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getTargetByAttribute } from "../utils/event-target.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  width: 100%;\n}\n\n::slotted(sinch-progress-stepper-item) {\n  flex: 1;\n  min-width: 0;\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%}::slotted(sinch-progress-stepper-item){flex:1;min-width:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class ProgressStepper extends NectaryElement {
@@ -197,6 +197,7 @@ class ProgressStepper extends NectaryElement {
   };
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-progress-stepper", ProgressStepper);

package/progress-stepper-item/index.js

@@ -3,7 +3,7 @@ import "../text/index.js";
 import { isAttrEqual, updateExplicitBooleanAttribute, updateBooleanAttribute, isAttrTrue, updateAttribute, getAttribute, getBooleanAttribute } from "../utils/dom.js";
 import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { ATTR_PROGRESS_STEPPER_ITEM_STATUS, ATTR_PROGRESS_STEPPER_ITEM_CHECKED, ATTR_PROGRESS_STEPPER_ITEM_ACTIVE_DESCENDANT, isProgressStepperItemActiveDescendant, isProgressStepperItemActive } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: block;\n    outline: none;\n  }\n\n  #button {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    width: 100%;\n    height: 100%;\n    padding: 8px 4px 4px;\n    box-sizing: border-box;\n    cursor: pointer;\n    border-radius: var(--sinch-comp-progress-stepper-step-shape-radius);\n  }\n\n  :host([data-status="inactive"]) > #button {\n    cursor: not-allowed;\n  }\n\n  :host([data-status="incomplete"]:hover) > #button {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-background-hover\n      );\n  }\n\n  :host([data-status="complete"]:hover) > #button {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-background-hover\n      );\n  }\n\n  :host([data-status="invalid"]:hover) > #button {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-background-hover\n      );\n  }\n\n  #outline {\n    position: absolute;\n    inset: -2px;\n    border:\n      2px solid\n      var(--sinch-comp-progress-stepper-step-color-outline-focus);\n    border-radius:\n      calc(\n        var(--sinch-comp-progress-stepper-step-shape-radius) + 2px\n      );\n    pointer-events: none;\n    opacity: 0;\n  }\n\n  :host(:focus-visible) #outline {\n    opacity: 1;\n  }\n\n  #text {\n    flex-shrink: 1;\n    flex-basis: auto;\n    min-width: 0;\n    transform: translate(0, 0);\n    will-change: transform;\n    transition: transform 0.25s ease-out;\n    padding-right: 24px;\n  }\n\n  :host([data-status="incomplete"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-incomplete-label\n      );\n  }\n\n  :host([data-status="complete"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-complete-label\n      );\n  }\n\n  :host([data-status="inactive"]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-inactive-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-inactive-label\n      );\n  }\n\n  :host([invalid]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-invalid-label\n      );\n\n    transform: translate(24px, 0);\n  }\n\n  :host([data-status="incomplete"][data-checked]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-current-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-incomplete-current-label\n      );\n  }\n\n  :host([data-status="complete"][data-checked]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-current-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-complete-current-label\n      );\n  }\n\n  :host([invalid][data-checked]) #text {\n    --sinch-global-color-text:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-label-default\n      );\n    --sinch-comp-text-font:\n      var(\n        --sinch-comp-progress-stepper-step-font-invalid-current-label\n      );\n  }\n\n  #icon-error {\n    position: absolute;\n    left: 0;\n    top: 4px;\n    pointer-events: none;\n    opacity: 0;\n    transition: opacity 0.25s ease-in-out;\n\n    --sinch-global-color-icon:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-icon-default\n      );\n    --sinch-global-size-icon: 16px;\n  }\n\n  :host([invalid]) #icon-error {\n    opacity: 1;\n  }\n\n  #progress {\n    height: 8px;\n    border-radius: 4px;\n    transition: background-color 0.25s ease-in-out;\n  }\n\n  :host([data-status="incomplete"]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-progress-background\n      );\n  }\n\n  :host([data-status="complete"]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-progress-background\n      );\n  }\n\n  :host([data-status="inactive"]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-inactive-progress-background\n      );\n  }\n\n  :host([invalid]) #progress {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-invalid-progress-background\n      );\n  }\n\n  #bar {\n    width: 8px;\n    height: 8px;\n    border-radius: 4px;\n    opacity: 0;\n    transition: width 0.25s ease-in-out, opacity 0.25s ease-in-out;\n  }\n\n  :host([data-status="incomplete"]) #bar {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-incomplete-progress-bar\n      );\n  }\n\n  :host([data-status="complete"]) #bar {\n    background-color:\n      var(\n        --sinch-comp-progress-stepper-step-color-complete-progress-bar\n      );\n    width: 100%;\n  }\n\n  :host([data-status="incomplete"]:not([invalid])) #bar,\n  :host([data-status="complete"]:not([invalid])) #bar {\n    opacity: 1;\n  }\n\n  #label-bar {\n    position: relative;\n  }\n</style>\n\n<div id="button">\n  <div id="progress">\n    <div id="bar"></div>\n  </div>\n  <div id="label-bar">\n    <sinch-icon icons-version="2" name="triangle-exclamation"\n      id="icon-error"\n      aria-hidden="true"\n    ></sinch-icon>\n    <sinch-text id="text" type="m"></sinch-text>\n  </div>\n  <div id="outline"></div>\n</div>\n';
+const templateHTML = '<style>:host{display:block;outline:0}#button{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;height:100%;padding:8px 4px 4px;box-sizing:border-box;cursor:pointer;border-radius:var(--sinch-comp-progress-stepper-step-shape-radius)}:host([data-status=inactive])>#button{cursor:not-allowed}:host([data-status=incomplete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-background-hover)}:host([data-status=complete]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-complete-background-hover)}:host([data-status=invalid]:hover)>#button{background-color:var(--sinch-comp-progress-stepper-step-color-invalid-background-hover)}#outline{position:absolute;inset:-2px;border:2px solid var(--sinch-comp-progress-stepper-step-color-outline-focus);border-radius:calc(var(--sinch-comp-progress-stepper-step-shape-radius) + 2px);pointer-events:none;opacity:0}:host(:focus-visible) #outline{opacity:1}#text{flex-shrink:1;flex-basis:auto;min-width:0;transform:translate(0,0);will-change:transform;transition:transform .25s ease-out;padding-right:24px}:host([data-status=incomplete]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-incomplete-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-incomplete-label)}:host([data-status=complete]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-complete-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-complete-label)}:host([data-status=inactive]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-inactive-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-inactive-label)}:host([invalid]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-invalid-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-invalid-label);transform:translate(24px,0)}:host([data-status=incomplete][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-incomplete-current-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-incomplete-current-label)}:host([data-status=complete][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-complete-current-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-complete-current-label)}:host([invalid][data-checked]) #text{--sinch-global-color-text:var(--sinch-comp-progress-stepper-step-color-invalid-label-default);--sinch-comp-text-font:var(--sinch-comp-progress-stepper-step-font-invalid-current-label)}#icon-error{position:absolute;left:0;top:4px;pointer-events:none;opacity:0;transition:opacity .25s ease-in-out;--sinch-global-color-icon:var(--sinch-comp-progress-stepper-step-color-invalid-icon-default);--sinch-global-size-icon:16px}:host([invalid]) #icon-error{opacity:1}#progress{height:8px;border-radius:4px;transition:background-color .25s ease-in-out}:host([data-status=incomplete]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-progress-background)}:host([data-status=complete]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-complete-progress-background)}:host([data-status=inactive]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-inactive-progress-background)}:host([invalid]) #progress{background-color:var(--sinch-comp-progress-stepper-step-color-invalid-progress-background)}#bar{width:8px;height:8px;border-radius:4px;opacity:0;transition:width .25s ease-in-out,opacity .25s ease-in-out}:host([data-status=incomplete]) #bar{background-color:var(--sinch-comp-progress-stepper-step-color-incomplete-progress-bar)}:host([data-status=complete]) #bar{background-color:var(--sinch-comp-progress-stepper-step-color-complete-progress-bar);width:100%}:host([data-status=complete]:not([invalid])) #bar,:host([data-status=incomplete]:not([invalid])) #bar{opacity:1}#label-bar{position:relative}</style><div id="button"><div id="progress"><div id="bar"></div></div><div id="label-bar"><sinch-icon icons-version="2" name="triangle-exclamation" id="icon-error" aria-hidden="true"></sinch-icon><sinch-text id="text" type="m"></sinch-text></div><div id="outline"></div></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class ProgressStepperItem extends NectaryElement {

package/radio/index.js

@@ -3,7 +3,7 @@ import { defineCustomElement, NectaryElement } from "../utils/element.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { getTargetByAttribute } from "../utils/event-target.js";
 import { setFormValue } from "../utils/form.js";
-const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#wrapper {\n  display: flex;\n  flex-direction: var(--sinch-comp-radio-direction, column);\n  gap: var(--sinch-comp-radio-gap, 8px);\n  box-sizing: border-box;\n  width: 100%;\n}\n</style>\n\n<div id="wrapper">\n  <slot></slot>\n</div>\n';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:var(--sinch-comp-radio-direction,column);gap:var(--sinch-comp-radio-gap,8px);box-sizing:border-box;width:100%}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;
 class Radio extends NectaryElement {
@@ -188,6 +188,7 @@ class Radio extends NectaryElement {
   }
   #onChangeReactHandler = (e) => {
     getReactEventHandler(this, "on-change")?.(e);
+    getReactEventHandler(this, "onChange")?.(e);
   };
 }
 defineCustomElement("sinch-radio", Radio);