@nectary/components 5.0.2 → 5.0.4

package/time-picker/index.js

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

package/title/index.js

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

package/toast/index.js

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

package/toast-manager/index.js

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

package/toggle/index.js

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

package/tooltip/index.js

@@ -6,7 +6,7 @@ import { rectOverlap } from "../utils/rect.js";
 import { getReactEventHandler } from "../utils/get-react-event-handler.js";
 import { TooltipState } from "./tooltip-state.js";
 import { getPopOrientation, orientationValues, textAlignValues, typeValues } from "./utils.js";
-const templateHTML = '<style>\n  :host {\n    display: contents;\n  }\n\n  #content-wrapper {\n    padding-bottom: 8px;\n    filter: drop-shadow(var(--sinch-comp-tooltip-shadow));\n  }\n\n  :host([orientation="left"]) #content-wrapper {\n    padding-bottom: 0;\n    padding-right: 8px;\n  }\n\n  :host([orientation="right"]) #content-wrapper {\n    padding-bottom: 0;\n    padding-left: 8px;\n  }\n\n  :host([orientation^="bottom"]) #content-wrapper {\n    padding-bottom: 0;\n    padding-top: 8px;\n  }\n\n  #content {\n    position: relative;\n    display: block;\n    max-width: 300px;\n    padding: 2px 6px;\n    box-sizing: border-box;\n    background-color: var(--sinch-local-color-background);\n    border-radius: var(--sinch-comp-tooltip-shape-radius);\n    pointer-events: none;\n    opacity: 0;\n\n    --sinch-local-color-background: var(--sinch-comp-tooltip-color-background);\n    --sinch-global-color-text: var(--sinch-comp-tooltip-color-text);\n  }\n\n  #text {\n    word-break: break-word;\n    pointer-events: none;\n\n    --sinch-comp-text-font: var(--sinch-comp-tooltip-font-body);\n  }\n\n  #tip {\n    position: absolute;\n    left: 50%;\n    top: 100%;\n    transform: translateX(-50%) rotate(0);\n    transform-origin: top center;\n    fill: var(--sinch-local-color-background);\n    pointer-events: none;\n  }\n\n  #tip.hidden {\n    display: none;\n  }\n\n  :host([orientation="left"]) #tip {\n    transform: translateX(-50%) rotate(270deg);\n    top: 50%;\n    left: 100%;\n  }\n\n  :host([orientation="right"]) #tip {\n    transform: translateX(-50%) rotate(90deg);\n    top: 50%;\n    left: 0;\n  }\n\n  :host([orientation^="bottom"]) #tip {\n    transform: translateX(-50%) rotate(180deg);\n    top: 0;\n  }\n\n  :host([text-align="right"]) #text {\n    --sinch-comp-text-align: right;\n  }\n\n  :host([text-align="center"]) #text {\n    --sinch-comp-text-align: center;\n  }\n\n  :host([text-align="left"]) #text {\n    --sinch-comp-text-align: left;\n  }\n</style>\n\n<sinch-pop id="pop">\n  <slot id="target" slot="target"></slot>\n  <div id="content-wrapper" slot="content">\n    <div id="content">\n      <sinch-text id="text" type="s"></sinch-text>\n      <svg id="tip" width="8" height="4" aria-hidden="true">\n        <path d="m4 4 4-4h-8l4 4Z" />\n      </svg>\n    </div>\n  </div>\n</sinch-pop>';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 const TIP_SIZE = 8;
 const SHOW_DELAY_SLOW = 1e3;
 const SHOW_DELAY_FAST = 250;
@@ -277,9 +277,11 @@ class Tooltip extends NectaryElement {
   }
   #onShowReactHandler = () => {
     getReactEventHandler(this, "on-show")?.();
+    getReactEventHandler(this, "onShow")?.();
   };
   #onHideReactHandler = () => {
     getReactEventHandler(this, "on-hide")?.();
+    getReactEventHandler(this, "onHide")?.();
   };
 }
 defineCustomElement("sinch-tooltip", Tooltip);

package/types.d.ts

@@ -1,4 +1,4 @@
-import type { ReactifyEvents, WebComponentReactBaseProp, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners } from './utils/adapters';
+import type { ReactifyEvents, WebComponentReactBaseProp, SafeSelect, CamelCaseify, RemoveReadonly, SetAttributes, ExtendEventListeners, PatchReactEvents } from './utils/adapters';
 import type { CSSProperties } from 'react';
 export type TRect = {
     x: number;
@@ -7,7 +7,7 @@ export type TRect = {
     height: number;
 };
 export type NectaryComponentVanillaByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> = Omit<HTMLElement, 'addEventListener' | 'removeEventListener'> & ExtendEventListeners<Required<SafeSelect<T, 'events'>>> & SetAttributes<Required<RemoveReadonly<SafeSelect<T, 'props'>>>> & Required<CamelCaseify<SafeSelect<T, 'props'>>> & Required<SafeSelect<T, 'methods'>>;
-export type NectaryComponentReactByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> = WebComponentReactBaseProp<NectaryComponentVanillaByType<T>> & ReactifyEvents<SafeSelect<T, 'events'>> & RemoveReadonly<SafeSelect<T, 'props'>> & {
+export type NectaryComponentReactByType<T extends NectaryComponentMap[keyof NectaryComponentMap]> = PatchReactEvents<WebComponentReactBaseProp<NectaryComponentVanillaByType<T>>, ReactifyEvents<SafeSelect<T, 'events'>>> & RemoveReadonly<SafeSelect<T, 'props'>> & {
     style?: Partial<SafeSelect<T, 'style'>> & CSSProperties;
 };
 export type NectaryComponentVanilla<K extends keyof NectaryComponentMap> = NectaryComponentVanillaByType<NectaryComponentMap[K]>;

package/utils/adapters.d.ts

@@ -27,4 +27,5 @@ export type ReactifyEvents<T> = {
 export type WebComponentReactBaseProp<T = HTMLElement> = Omit<DetailedHTMLProps<HTMLAttributes<T>, T>, 'className' | 'style'> & {
     class?: string;
 };
+export type PatchReactEvents<T, Events> = Omit<T, keyof CamelCaseify<Events>> & Partial<CamelCaseify<Events>> & Partial<Events>;
 export {};