@nectary/components 5.42.5-rc.0 → 5.43.0

package/standalone.js

@@ -1,26 +1,89 @@
-import { s as setNectaryRegistry } from "./element.js";
-import "./standalone.d.js";
-import "./index2.js";
-import "./index.d7.js";
-import "./index.d9.js";
-import "./index.d10.js";
-import "./index.d11.js";
-import "./index.d12.js";
-import "./index3.js";
-import "./index.d13.js";
-import "./index.d14.js";
-import "./index.d3.js";
-import "./index.d15.js";
-import "./index.d16.js";
-import "./index.d2.js";
-import "./index4.js";
-import "./index.d5.js";
-import "./index.d17.js";
-import "./index.d18.js";
-import "./index.d4.js";
-import "./index.d8.js";
-import "./index.d.js";
-import "./index.js";
-import "./utils.js";
-import "./index.d6.js";
+import { setNectaryRegistry } from "./utils/element.js";
+import "./accordion-item/index.js";
+import "./accordion/index.js";
+import "./action-menu-option/index.js";
+import "./action-menu/index.js";
+import "./alert/index.js";
+import "./avatar/index.js";
+import "./badge/index.js";
+import "./button-group-item/index.js";
+import "./button-group/index.js";
+import "./button/index.js";
+import "./card-container/index.js";
+import "./card-v2-title/index.js";
+import "./card-v2/index.js";
+import "./checkbox/index.js";
+import "./chip/index.js";
+import "./code-tag/index.js";
+import "./color-menu-option/index.js";
+import "./color-menu/index.js";
+import "./color-swatch/index.js";
+import "./date-picker/index.js";
+import "./dialog/index.js";
+import "./emoji-picker/index.js";
+import "./emoji/index.js";
+import "./field/index.js";
+import "./field-v2/index.js";
+import "./file-drop/index.js";
+import "./file-picker/index.js";
+import "./file-status/index.js";
+import "./flag/index.js";
+import "./floating-panel/index.js";
+import "./floating-panel-button/index.js";
+import "./floating-panel-icon-button/index.js";
+import "./grid-item/index.js";
+import "./grid/index.js";
+import "./help-tooltip/index.js";
+import "./icon/index.js";
+import "./inline-alert/index.js";
+import "./input/index.js";
+import "./link/index.js";
+import "./list-item/index.js";
+import "./list/index.js";
+import "./pagination/index.js";
+import "./persistent-overlay/index.js";
+import "./pop/index.js";
+import "./popover/index.js";
+import "./progress-stepper-item-v2/index.js";
+import "./progress-stepper-item/index.js";
+import "./progress-stepper-v2/index.js";
+import "./progress-stepper/index.js";
+import "./progress/index.js";
+import "./radio-option/index.js";
+import "./radio/index.js";
+import "./rich-text/index.js";
+import "./rich-textarea/index.js";
+import "./rich-textarea-chip/index.js";
+import "./segment-collapse/index.js";
+import "./segmented-control-option/index.js";
+import "./segmented-control/index.js";
+import "./segmented-icon-control-option/index.js";
+import "./segmented-icon-control/index.js";
+import "./select-button/index.js";
+import "./select-menu-option/index.js";
+import "./select-menu/index.js";
+import "./sheet/index.js";
+import "./sheet-title/index.js";
+import "./skeleton-item/index.js";
+import "./skeleton/index.js";
+import "./spinner/index.js";
+import "./stop-events/index.js";
+import "./table-body/index.js";
+import "./table-cell/index.js";
+import "./table-head-cell/index.js";
+import "./table-head/index.js";
+import "./table-row/index.js";
+import "./table/index.js";
+import "./tabs-icon-option/index.js";
+import "./tabs-option/index.js";
+import "./tabs/index.js";
+import "./tag/index.js";
+import "./text/index.js";
+import "./textarea/index.js";
+import "./time-picker/index.js";
+import "./title/index.js";
+import "./toast-manager/index.js";
+import "./toast/index.js";
+import "./toggle/index.js";
+import "./tooltip/index.js";
 setNectaryRegistry(window.customElements);

package/stop-events/index.js

@@ -1,5 +1,5 @@
-import { u as unpackCsv } from "../csv.js";
-import { d as defineCustomElement } from "../element.js";
+import { unpackCsv } from "../utils/csv.js";
+import { defineCustomElement } from "../utils/element.js";
 class StopEvents extends HTMLElement {
   #controller = null;
   constructor() {

package/table/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-table");

package/table/index.js

@@ -1,4 +1,4 @@
-import { d as defineCustomElement, N as NectaryElement } from "../element.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
 const templateHTML = "<style>:host{display:table}</style><slot></slot>";
 const template = document.createElement("template");
 template.innerHTML = templateHTML;

package/table-body/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-table-body");

package/table-body/index.js

@@ -1,4 +1,4 @@
-import { d as defineCustomElement, N as NectaryElement } from "../element.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
 const templateHTML = "<style>:host{display:table-row-group}</style><slot></slot>";
 const template = document.createElement("template");
 template.innerHTML = templateHTML;

package/table-cell/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-table-cell");

package/table-cell/index.js

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

package/table-head/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-table-head");

package/table-head/index.js

@@ -1,4 +1,4 @@
-import { d as defineCustomElement, N as NectaryElement } from "../element.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
 const templateHTML = "<style>:host{display:table-header-group}</style><slot></slot>";
 const template = document.createElement("template");
 template.innerHTML = templateHTML;

package/table-head-cell/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-table-head-cell");

package/table-head-cell/index.js

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

package/table-row/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-table-row");

package/table-row/index.js

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

package/tabs/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-tabs");

package/tabs/index.js

@@ -1,9 +1,9 @@
-import { y as updateAttribute, i as getAttribute, j as getBooleanAttribute, z as updateBooleanAttribute } from "../dom.js";
-import { d as defineCustomElement, N as NectaryElement } from "../element.js";
-import { g as getRect } from "../rect.js";
-import { g as getReactEventHandler } from "../get-react-event-handler.js";
-import { a as getTargetByAttribute } from "../event-target.js";
-import { c as createKeyboardNavigation } from "../control-keyboard-navigation.js";
+import { updateAttribute, getAttribute, getBooleanAttribute, updateBooleanAttribute } from "../utils/dom.js";
+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";
+import { createKeyboardNavigation } from "../utils/control-keyboard-navigation.js";
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;width:100%;height:40px;border-bottom:1px solid var(--sinch-comp-tab-color-default-border-initial);box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;

package/tabs-icon-option/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-tabs-icon-option");

package/tabs-icon-option/index.js

@@ -1,6 +1,6 @@
-import { y as updateAttribute, i as getAttribute, z as updateBooleanAttribute, j as getBooleanAttribute, s as isAttrEqual, A as updateExplicitBooleanAttribute, t as isAttrTrue } from "../dom.js";
-import { d as defineCustomElement, N as NectaryElement } from "../element.js";
-import { i as isActivationKey } from "../control-keyboard-navigation.js";
+import { updateAttribute, getAttribute, updateBooleanAttribute, getBooleanAttribute, isAttrEqual, updateExplicitBooleanAttribute, isAttrTrue } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { isActivationKey } from "../utils/control-keyboard-navigation.js";
 const templateHTML = '<style>:host{display:block;outline:0}#button{all:initial;position:relative;display:flex;flex-direction:column;padding:12px 16px 0;box-sizing:border-box;cursor:pointer;background-color:var(--sinch-comp-tab-color-default-background-initial);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);height:39px;--sinch-global-color-icon:var(--sinch-comp-tab-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-tab-size-icon)}:host([disabled]) #button{cursor:unset;pointer-events:none;--sinch-global-color-icon:var(--sinch-comp-tab-color-disabled-icon-initial)}:host([data-checked]) #button{--sinch-global-color-icon:var(--sinch-comp-tab-color-checked-icon-initial)}:host([data-checked]) #button::before{content:"";position:absolute;left:0;right:0;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-comp-tab-color-checked-border-initial)}:host(:hover:not([disabled])) #button{background-color:var(--sinch-comp-tab-color-default-background-hover)}:host(:focus-visible) #button::after{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-comp-tab-color-default-outline-focus);border-top-left-radius:var(--sinch-comp-tab-shape-radius);border-top-right-radius:var(--sinch-comp-tab-shape-radius);pointer-events:none}::slotted(*){display:block;pointer-events:none}</style><sinch-tooltip id="tooltip"><div id="button"><slot name="icon"></slot></div></sinch-tooltip>';
 const template = document.createElement("template");
 template.innerHTML = templateHTML;

package/tabs-option/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-tabs-option");

package/tabs-option/index.js

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

package/tag/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-tag");

package/tag/index.js

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

package/text/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-text");

package/text/index.js

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

package/textarea/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-textarea");

package/textarea/index.js

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

package/time-picker/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-time-picker");

package/time-picker/index.js

@@ -1,10 +1,11 @@
-import "../index.d3.js";
-import "../index.d18.js";
-import { s as isAttrEqual, z as updateBooleanAttribute, y as updateAttribute, i as getAttribute, j as getBooleanAttribute, w as setClass, t as isAttrTrue } from "../dom.js";
-import { d as defineCustomElement, N as NectaryElement } from "../element.js";
-import { g as getRect } from "../rect.js";
-import { g as getReactEventHandler } from "../get-react-event-handler.js";
-import { s as stringifyHourFace, a as stringifyMinute, p as parseTime, h as hourToIndex, b as stringifyHour, g as getNeedleRotationDeg, c as getShortestCssDeg, d as stringifyTime } from "../utils28.js";
+import "../icon/index.js";
+import "../segmented-control/index.js";
+import "../segmented-control-option/index.js";
+import { isAttrEqual, updateBooleanAttribute, updateAttribute, getAttribute, getBooleanAttribute, setClass, isAttrTrue } from "../utils/dom.js";
+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>: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" role="group" aria-label="Time picker clock face"><div id="picker-hours"></div><div id="picker-minutes"></div><div id="picker-touch"><div id="needle-hour" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="23" aria-valuenow="0"></div><div id="needle-minute" tabindex="0" role="slider" aria-valuemin="0" aria-valuemax="59" aria-valuenow="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;

package/title/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-title");

package/title/index.js

@@ -1,6 +1,6 @@
-import { s as isAttrEqual, z as updateBooleanAttribute, t as isAttrTrue, y as updateAttribute, i as getAttribute, C as updateLiteralAttribute, o as getLiteralAttribute, j as getBooleanAttribute } from "../dom.js";
-import { d as defineCustomElement, N as NectaryElement } from "../element.js";
-import { t as typeValues } from "../utils4.js";
+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>: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;

package/toast/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-toast");

package/toast/index.js

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

package/toast/types.d.ts

@@ -13,8 +13,6 @@ export type TSinchToastEvents = {
     '-timeout'?: (e: CustomEvent<void>) => void;
 };
 export type TSinchToastStyle = {
-    '--sinch-comp-toast-width'?: string;
-    '--sinch-comp-toast-max-width'?: string;
     '--sinch-comp-toast-shape-radius'?: string;
     '--sinch-comp-toast-font-body'?: string;
     '--sinch-comp-toast-shadow'?: string;

package/toast-manager/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-toast-manager");

package/toast-manager/index.js

@@ -1,9 +1,10 @@
-import "../index.js";
-import "../index.d.js";
-import { o as originValues, T as Toast } from "../utils.js";
-import { x as shouldReduceMotion, o as getLiteralAttribute, C as updateLiteralAttribute, f as cloneNode } from "../dom.js";
-import { d as defineCustomElement, N as NectaryElement } from "../element.js";
-import { g as getRect } from "../rect.js";
+import "../title/index.js";
+import "../text/index.js";
+import { Toast } from "../toast/index.js";
+import { shouldReduceMotion, getLiteralAttribute, updateLiteralAttribute, cloneNode } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getRect } from "../utils/rect.js";
+import { originValues } from "./utils.js";
 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" role="status" aria-live="polite" aria-atomic="false"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;

package/toggle/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-toggle");

package/toggle/index.js

@@ -1,6 +1,6 @@
-import { s as isAttrEqual, z as updateBooleanAttribute, t as isAttrTrue, A as updateExplicitBooleanAttribute, j as getBooleanAttribute, y as updateAttribute, i as getAttribute } from "../dom.js";
-import { d as defineCustomElement, N as NectaryElement } from "../element.js";
-import { g as getReactEventHandler } from "../get-react-event-handler.js";
+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>: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;

package/tooltip/global/index.js

@@ -1,2 +1,2 @@
-import { d as defineCustomElement } from "../../element.js";
+import { defineCustomElement } from "../../utils/element.js";
 defineCustomElement("sinch-tooltip");

package/tooltip/index.d.ts

@@ -12,7 +12,7 @@ export declare class Tooltip extends NectaryElement {
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, _: string | null, newVal: string | null): void;
     get isOpenedControlled(): boolean | undefined;
-    get showOutsideViewport(): any;
+    get showOutsideViewport(): boolean;
     get text(): string;
     set text(value: string);
     get orientation(): TSinchTooltipOrientation;

package/tooltip/index.js

@@ -1,11 +1,12 @@
-import "../index.d.js";
-import "../index.d2.js";
-import { x as shouldReduceMotion, y as updateAttribute, z as updateBooleanAttribute, i as getAttribute, j as getBooleanAttribute, o as getLiteralAttribute, C as updateLiteralAttribute, m as getDeepActiveElement, g as composedContains, w as setClass } from "../dom.js";
-import { d as defineCustomElement, N as NectaryElement } from "../element.js";
-import { r as rectOverlap } from "../rect.js";
-import { g as getReactEventHandler } from "../get-react-event-handler.js";
-import { g as getPlacementContext, t as toLocalRect } from "../utils31.js";
-import { T as TooltipState, g as getPopOrientation, o as orientationValues, t as textAlignValues, a as typeValues } from "../utils32.js";
+import "../text/index.js";
+import "../pop/index.js";
+import { shouldReduceMotion, updateAttribute, updateBooleanAttribute, getAttribute, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, getDeepActiveElement, composedContains, setClass } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { rectOverlap } from "../utils/rect.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+import { getPlacementContext, toLocalRect } from "../utils/placement.js";
+import { TooltipState } from "./tooltip-state.js";
+import { getPopOrientation, orientationValues, textAlignValues, typeValues } from "./utils.js";
 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;

package/utils/component-names.d.ts

@@ -1,3 +1,3 @@
 export declare const BASE_COMPONENT_NAMES_LIST: readonly ["accordion-item", "accordion", "action-menu-option", "action-menu", "alert", "avatar", "badge", "button-group-item", "button-group", "button", "card-container", "card-v2-title", "card-v2", "checkbox", "chip", "code-tag", "color-menu-option", "color-menu", "color-swatch", "date-picker", "dialog", "emoji-picker", "emoji", "field", "field-v2", "file-drop", "file-picker", "file-status", "flag", "floating-panel", "floating-panel-button", "floating-panel-icon-button", "grid-item", "grid", "help-tooltip", "icon", "inline-alert", "input", "link", "list-item", "list", "pagination", "persistent-overlay", "pop", "popover", "progress-stepper-item-v2", "progress-stepper-item", "progress-stepper-v2", "progress-stepper", "progress", "radio-option", "radio", "rich-text", "rich-textarea", "rich-textarea-chip", "segment-collapse", "segmented-control-option", "segmented-control", "segmented-icon-control-option", "segmented-icon-control", "select-button", "select-menu-option", "select-menu", "sheet", "sheet-title", "skeleton-item", "skeleton", "spinner", "stop-events", "table-body", "table-cell", "table-head-cell", "table-head", "table-row", "table", "tabs-icon-option", "tabs-option", "tabs", "tag", "text", "textarea", "time-picker", "title", "toast-manager", "toast", "toggle", "tooltip"];
-export declare const BASE_COMPONENT_NAMES: Set<"chip" | "flag" | "link" | "tag" | "input" | "progress" | "toggle" | "title" | "popover" | "button" | "dialog" | "table" | "textarea" | "text" | "icon" | "emoji" | "alert" | "checkbox" | "tooltip" | "pop" | "radio" | "accordion" | "list" | "radio-option" | "accordion-item" | "action-menu-option" | "action-menu" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "field" | "field-v2" | "file-drop" | "file-picker" | "file-status" | "floating-panel" | "floating-panel-button" | "floating-panel-icon-button" | "grid-item" | "grid" | "help-tooltip" | "inline-alert" | "list-item" | "pagination" | "persistent-overlay" | "progress-stepper-item-v2" | "progress-stepper-item" | "progress-stepper-v2" | "progress-stepper" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "time-picker" | "toast-manager" | "toast">;
+export declare const BASE_COMPONENT_NAMES: Set<"pop" | "button" | "dialog" | "input" | "link" | "progress" | "table" | "textarea" | "title" | "popover" | "text" | "icon" | "chip" | "accordion-item" | "accordion" | "action-menu-option" | "action-menu" | "alert" | "avatar" | "badge" | "button-group-item" | "button-group" | "card-container" | "card-v2-title" | "card-v2" | "checkbox" | "code-tag" | "color-menu-option" | "color-menu" | "color-swatch" | "date-picker" | "emoji-picker" | "emoji" | "field" | "field-v2" | "file-drop" | "file-picker" | "file-status" | "flag" | "floating-panel" | "floating-panel-button" | "floating-panel-icon-button" | "grid-item" | "grid" | "help-tooltip" | "inline-alert" | "list-item" | "list" | "pagination" | "persistent-overlay" | "progress-stepper-item-v2" | "progress-stepper-item" | "progress-stepper-v2" | "progress-stepper" | "radio-option" | "radio" | "rich-text" | "rich-textarea" | "rich-textarea-chip" | "segment-collapse" | "segmented-control-option" | "segmented-control" | "segmented-icon-control-option" | "segmented-icon-control" | "select-button" | "select-menu-option" | "select-menu" | "sheet" | "sheet-title" | "skeleton-item" | "skeleton" | "spinner" | "stop-events" | "table-body" | "table-cell" | "table-head-cell" | "table-head" | "table-row" | "tabs-icon-option" | "tabs-option" | "tabs" | "tag" | "time-picker" | "toast-manager" | "toast" | "toggle" | "tooltip">;
 export type ComponentName = `sinch-${typeof BASE_COMPONENT_NAMES_LIST[number]}`;

package/utils/control-keyboard-navigation.d.ts

@@ -1,4 +1,4 @@
-export declare const isActivationKey: (key: string) => key is "Enter" | " ";
+export declare const isActivationKey: (key: string) => key is " " | "Enter";
 export declare function createKeyboardNavigation(): {
     navigateToNextOption(enabledOptions: Element[], forward: boolean): void;
     navigateToOption(enabledOptions: Element[], index: number): void;

package/utils/control-keyboard-navigation.js

@@ -1,5 +1,5 @@
-import { m as getDeepActiveElement } from "../dom.js";
-import { a as getTargetByAttribute } from "../event-target.js";
+import { getDeepActiveElement } from "./dom.js";
+import { getTargetByAttribute } from "./event-target.js";
 const isActivationKey = (key) => key === "Enter" || key === " ";
 function createKeyboardNavigation() {
   return {