@nectary/components 4.12.1 → 5.0.0

package/toast-manager/index.js

@@ -1,85 +1,96 @@
-import '../title';
-import '../text';
-import { cloneNode, defineCustomElement, getLiteralAttribute, getRect, NectaryElement, shouldReduceMotion, updateLiteralAttribute } from '../utils';
-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>';
-import { originValues } from './utils';
+import "../title/index.js";
+import "../text/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>\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 DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
-const template = document.createElement('template');
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class ToastManager extends NectaryElement {
+class ToastManager extends NectaryElement {
   #$slot;
   #$list;
-  #map = (() => new WeakMap())();
+  #map = /* @__PURE__ */ new WeakMap();
   #shouldReduceMotion;
-  #animations = (() => new Set())();
+  #animations = /* @__PURE__ */ new Set();
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$slot = shadowRoot.querySelector('slot');
-    this.#$list = shadowRoot.querySelector('#list');
+    this.#$slot = shadowRoot.querySelector("slot");
+    this.#$list = shadowRoot.querySelector("#list");
     this.#shouldReduceMotion = shouldReduceMotion();
   }
   connectedCallback() {
-    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
+    this.#$slot.addEventListener("slotchange", this.#onSlotChange);
   }
   disconnectedCallback() {
-    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
+    this.#$slot.removeEventListener("slotchange", this.#onSlotChange);
     this.#clear();
   }
   get origin() {
-    return getLiteralAttribute(this, originValues, 'origin', 'bottom-right');
+    return getLiteralAttribute(this, originValues, "origin", "bottom-right");
   }
   set origin(value) {
-    updateLiteralAttribute(this, originValues, 'origin', value);
+    updateLiteralAttribute(this, originValues, "origin", value);
   }
   get containerRect() {
     return getRect(this.#$list);
   }
   nthActionRect(nth) {
-    const item = this.#$list.children[nth]?.querySelector('[slot=action]');
+    const item = this.#$list.children[nth]?.querySelector("[slot=action]");
     return item != null ? getRect(item) : null;
   }
   nthCloseRect(nth) {
-    const item = this.#$list.children[nth]?.querySelector('[slot=close]');
+    const item = this.#$list.children[nth]?.querySelector("[slot=close]");
     return item != null ? getRect(item) : null;
   }
   #onAnimateAdd(item, index, height) {
     const duration = this.#shouldReduceMotion ? 0 : DURATION_ADD;
-    const addAnim = item.animate({
-      height: ['0', `${height + ITEMS_GAP}px`],
-      opacity: [0, 1]
-    }, {
-      delay: index * duration,
-      duration,
-      iterations: 1,
-      fill: 'forwards'
-    });
+    const addAnim = item.animate(
+      {
+        height: ["0", `${height + ITEMS_GAP}px`],
+        opacity: [0, 1]
+      },
+      {
+        delay: index * duration,
+        duration,
+        iterations: 1,
+        fill: "forwards"
+      }
+    );
     this.#storeAnimation(addAnim);
   }
   #onAnimateRemove(item, index) {
     const rect = item.getBoundingClientRect();
     const duration = this.#shouldReduceMotion ? 0 : DURATION_REMOVE;
-    const indexInQueue = item.hasAttribute('data-delete-now') ? 0 : index;
-    const heightAnim = item.animate({
-      height: [`${rect.height}px`, '0']
-    }, {
-      delay: duration + indexInQueue * duration,
-      duration,
-      iterations: 1,
-      fill: 'forwards'
-    });
-    const opacityAnim = item.animate({
-      opacity: [1, 0]
-    }, {
-      delay: indexInQueue * duration,
-      duration,
-      iterations: 1,
-      fill: 'forwards'
-    });
-    item.setAttribute('data-deleting', '');
+    const indexInQueue = item.hasAttribute("data-delete-now") ? 0 : index;
+    const heightAnim = item.animate(
+      {
+        height: [`${rect.height}px`, "0"]
+      },
+      {
+        delay: duration + indexInQueue * duration,
+        duration,
+        iterations: 1,
+        fill: "forwards"
+      }
+    );
+    const opacityAnim = item.animate(
+      {
+        opacity: [1, 0]
+      },
+      {
+        delay: indexInQueue * duration,
+        duration,
+        iterations: 1,
+        fill: "forwards"
+      }
+    );
+    item.setAttribute("data-deleting", "");
     this.#storeAnimation(heightAnim, () => item.remove());
     this.#storeAnimation(opacityAnim);
   }
@@ -88,7 +99,7 @@ export class ToastManager extends NectaryElement {
     const listItems = Array.from(this.#$list.children);
     let removeIndex = 0;
     for (const item of listItems) {
-      if (item.hasAttribute('data-deleting')) {
+      if (item.hasAttribute("data-deleting")) {
         ++removeIndex;
         continue;
       }
@@ -111,8 +122,8 @@ export class ToastManager extends NectaryElement {
       }
       const cloned = cloneNode(item, true);
       const rect = item.getBoundingClientRect();
-      const wrapper = document.createElement('div');
-      wrapper.className = 'item-wrapper';
+      const wrapper = document.createElement("div");
+      wrapper.className = "item-wrapper";
       wrapper.appendChild(cloned);
       this.#$list.appendChild(wrapper);
       this.#map.set(item, wrapper);
@@ -126,13 +137,13 @@ export class ToastManager extends NectaryElement {
     const onAnimEnd = () => {
       this.#animations.delete(anim);
       cb?.();
-      anim.removeEventListener('finish', onAnimEnd);
-      anim.removeEventListener('remove', onAnimEnd);
-      anim.removeEventListener('cancel', onAnimEnd);
+      anim.removeEventListener("finish", onAnimEnd);
+      anim.removeEventListener("remove", onAnimEnd);
+      anim.removeEventListener("cancel", onAnimEnd);
     };
-    anim.addEventListener('finish', onAnimEnd);
-    anim.addEventListener('remove', onAnimEnd);
-    anim.addEventListener('cancel', onAnimEnd);
+    anim.addEventListener("finish", onAnimEnd);
+    anim.addEventListener("remove", onAnimEnd);
+    anim.addEventListener("cancel", onAnimEnd);
     this.#animations.add(anim);
   }
   #clear() {
@@ -147,25 +158,28 @@ export class ToastManager extends NectaryElement {
     }
   }
   #subscribeChildren(item) {
-    item.querySelector('[slot=close]')?.addEventListener('-click', this.#onCloneCloseClick);
-    item.querySelector('[slot=action]')?.addEventListener('-click', this.#onCloneActionClick);
+    item.querySelector("[slot=close]")?.addEventListener("-click", this.#onCloneCloseClick);
+    item.querySelector("[slot=action]")?.addEventListener("-click", this.#onCloneActionClick);
   }
   #unsubscribeChildren(item) {
-    item.querySelector('[slot=close]')?.removeEventListener('-click', this.#onCloneCloseClick);
-    item.querySelector('[slot=action]')?.removeEventListener('-click', this.#onCloneActionClick);
+    item.querySelector("[slot=close]")?.removeEventListener("-click", this.#onCloneCloseClick);
+    item.querySelector("[slot=action]")?.removeEventListener("-click", this.#onCloneActionClick);
   }
-  #onCloneCloseClick = e => {
+  #onCloneCloseClick = (e) => {
     const item = e.target.parentElement?.parentElement;
     if (item != null) {
-      item.setAttribute('data-delete-now', '');
-      this.#map.get(item)?.querySelector('[slot=close]')?.dispatchEvent(new CustomEvent('-click'));
+      item.setAttribute("data-delete-now", "");
+      this.#map.get(item)?.querySelector("[slot=close]")?.dispatchEvent(new CustomEvent("-click"));
     }
   };
-  #onCloneActionClick = e => {
+  #onCloneActionClick = (e) => {
     const item = e.target.parentElement?.parentElement;
     if (item != null) {
-      this.#map.get(item)?.querySelector('[slot=action]')?.dispatchEvent(new CustomEvent('-click'));
+      this.#map.get(item)?.querySelector("[slot=action]")?.dispatchEvent(new CustomEvent("-click"));
     }
   };
 }
-defineCustomElement('sinch-toast-manager', ToastManager);
+defineCustomElement("sinch-toast-manager", ToastManager);
+export {
+  ToastManager
+};

package/toast-manager/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, TRect, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchToastManagerOrigin = 'top-right' | 'bottom-right';
 export type TSinchToastManagerProps = {
     origin?: TSinchToastManagerOrigin;
@@ -14,3 +14,23 @@ export type TSinchToastManager = {
 };
 export type TSinchToastManagerElement = NectaryComponentVanillaByType<TSinchToastManager>;
 export type TSinchToastManagerReact = NectaryComponentReactByType<TSinchToastManager>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-toast-manager': TSinchToastManager;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast-manager': NectaryComponentVanilla<'sinch-toast-manager'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast-manager': NectaryComponentReact<'sinch-toast-manager'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-toast-manager': NectaryComponentReact<'sinch-toast-manager'>;
+        }
+    }
+}

package/toast-manager/types.js

@@ -1 +1 @@
-export {};
+

package/toast-manager/utils.js

@@ -1 +1,4 @@
-export const originValues = ['bottom-right', 'top-right'];
+const originValues = ["bottom-right", "top-right"];
+export {
+  originValues
+};

package/toggle/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/toggle/global/index.js

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

package/toggle/index.d.ts

@@ -1,6 +1,5 @@
 import { NectaryElement } from '../utils';
-import type { TSinchToggle } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class Toggle extends NectaryElement {
     #private;
     constructor();
@@ -20,23 +19,3 @@ export declare class Toggle extends NectaryElement {
     get text(): string | null;
     get focusable(): boolean;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-toggle': TSinchToggle;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-toggle': NectaryComponentVanilla<'sinch-toggle'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-toggle': NectaryComponentReact<'sinch-toggle'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-toggle': NectaryComponentReact<'sinch-toggle'>;
-        }
-    }
-}

package/toggle/index.js

@@ -1,32 +1,30 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-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');
+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 template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class Toggle extends NectaryElement {
+class Toggle extends NectaryElement {
   #$label;
   #controller = null;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$label = shadowRoot.querySelector('#label');
+    this.#$label = shadowRoot.querySelector("#label");
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    const options = {
-      signal
-    };
-    this.setAttribute('role', 'checkbox');
-    this.addEventListener('click', this.#onClick, options);
-    this.addEventListener('keydown', this.#onKeydown, options);
-    this.addEventListener('focus', this.#onFocus, options);
-    this.addEventListener('blur', this.#onBlur, options);
-    this.addEventListener('-change', this.#onChangeReactHandler, options);
-    this.addEventListener('-focus', this.#onFocusReactHandler, options);
-    this.addEventListener('-blur', this.#onBlurReactHandler, options);
+    const { signal } = this.#controller;
+    const options = { signal };
+    this.setAttribute("role", "checkbox");
+    this.addEventListener("click", this.#onClick, options);
+    this.addEventListener("keydown", this.#onKeydown, options);
+    this.addEventListener("focus", this.#onFocus, options);
+    this.addEventListener("blur", this.#onBlur, options);
+    this.addEventListener("-change", this.#onChangeReactHandler, options);
+    this.addEventListener("-focus", this.#onFocusReactHandler, options);
+    this.addEventListener("-blur", this.#onBlurReactHandler, options);
     this.#updateTabIndex();
   }
   disconnectedCallback() {
@@ -34,70 +32,72 @@ export class Toggle extends NectaryElement {
     this.#controller = null;
   }
   static get observedAttributes() {
-    return ['checked', 'disabled', 'text', 'labeled', 'small'];
+    return [
+      "checked",
+      "disabled",
+      "text",
+      "labeled",
+      "small"
+    ];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     if (isAttrEqual(oldVal, newVal)) {
       return;
     }
     switch (name) {
-      case 'text':
-        {
-          this.#$label.textContent = newVal;
-          break;
-        }
-      case 'checked':
-        {
-          const isChecked = isAttrTrue(newVal);
-          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
-          updateBooleanAttribute(this, name, isChecked);
-          break;
-        }
-      case 'disabled':
-        {
-          const isDisabled = isAttrTrue(newVal);
-          this.#updateTabIndex();
-          updateExplicitBooleanAttribute(this, 'aria-disabled', isDisabled);
-          updateBooleanAttribute(this, name, isDisabled);
-          break;
-        }
-      case 'small':
-      case 'labeled':
-        {
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
-          break;
-        }
+      case "text": {
+        this.#$label.textContent = newVal;
+        break;
+      }
+      case "checked": {
+        const isChecked = isAttrTrue(newVal);
+        updateExplicitBooleanAttribute(this, "aria-checked", isChecked);
+        updateBooleanAttribute(this, name, isChecked);
+        break;
+      }
+      case "disabled": {
+        const isDisabled = isAttrTrue(newVal);
+        this.#updateTabIndex();
+        updateExplicitBooleanAttribute(this, "aria-disabled", isDisabled);
+        updateBooleanAttribute(this, name, isDisabled);
+        break;
+      }
+      case "small":
+      case "labeled": {
+        updateBooleanAttribute(this, name, isAttrTrue(newVal));
+        break;
+      }
     }
   }
   set checked(isChecked) {
-    updateBooleanAttribute(this, 'checked', isChecked);
+    updateBooleanAttribute(this, "checked", isChecked);
   }
   get checked() {
-    return getBooleanAttribute(this, 'checked');
+    return getBooleanAttribute(this, "checked");
   }
   set small(isSmall) {
-    updateBooleanAttribute(this, 'small', isSmall);
+    updateBooleanAttribute(this, "small", isSmall);
   }
   get small() {
-    return getBooleanAttribute(this, 'small');
+    return getBooleanAttribute(this, "small");
   }
   set labeled(isLabeled) {
-    updateBooleanAttribute(this, 'labeled', isLabeled);
+    updateBooleanAttribute(this, "labeled", isLabeled);
   }
   get labeled() {
-    return getBooleanAttribute(this, 'labeled');
+    return getBooleanAttribute(this, "labeled");
   }
   set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+    updateBooleanAttribute(this, "disabled", isDisabled);
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   get text() {
-    return getAttribute(this, 'text');
+    return getAttribute(this, "text");
   }
   get focusable() {
     return true;
@@ -106,37 +106,43 @@ export class Toggle extends NectaryElement {
     if (this.disabled) {
       return;
     }
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: !this.checked
-    }));
+    this.dispatchEvent(
+      new CustomEvent("-change", { detail: !this.checked })
+    );
   };
-  #onKeydown = e => {
+  #onKeydown = (e) => {
     switch (e.code) {
-      case 'Space':
-      case 'Enter':
-        {
-          e.preventDefault();
-          this.click();
-        }
+      case "Space":
+      case "Enter": {
+        e.preventDefault();
+        this.click();
+      }
     }
   };
   #updateTabIndex() {
     this.tabIndex = this.disabled ? -1 : 0;
   }
   #onFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
+    this.dispatchEvent(
+      new CustomEvent("-focus")
+    );
   };
   #onBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
+    this.dispatchEvent(
+      new CustomEvent("-blur")
+    );
   };
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
+  #onChangeReactHandler = (e) => {
+    getReactEventHandler(this, "on-change")?.(e);
   };
-  #onFocusReactHandler = e => {
-    getReactEventHandler(this, 'on-focus')?.(e);
+  #onFocusReactHandler = (e) => {
+    getReactEventHandler(this, "on-focus")?.(e);
   };
-  #onBlurReactHandler = e => {
-    getReactEventHandler(this, 'on-blur')?.(e);
+  #onBlurReactHandler = (e) => {
+    getReactEventHandler(this, "on-blur")?.(e);
   };
 }
-defineCustomElement('sinch-toggle', Toggle);
+defineCustomElement("sinch-toggle", Toggle);
+export {
+  Toggle
+};

package/toggle/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchToggleProps = {
     checked?: boolean;
     small?: boolean;
@@ -34,3 +34,23 @@ export type TSinchToggle = {
 };
 export type TSinchToggleElement = NectaryComponentVanillaByType<TSinchToggle>;
 export type TSinchToggleReact = NectaryComponentReactByType<TSinchToggle>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-toggle': TSinchToggle;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toggle': NectaryComponentVanilla<'sinch-toggle'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toggle': NectaryComponentReact<'sinch-toggle'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-toggle': NectaryComponentReact<'sinch-toggle'>;
+        }
+    }
+}

package/toggle/types.js

@@ -1 +1 @@
-export {};
+

package/tooltip/global/index.d.ts

@@ -0,0 +1 @@
+export * from '../types';

package/tooltip/global/index.js

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

package/tooltip/index.d.ts

@@ -1,8 +1,9 @@
 import '../text';
 import '../pop';
 import { NectaryElement } from '../utils';
-import type { TSinchTooltipOrientation, TSinchTooltipTextAlign, TSinchTooltipType, TSinchTooltip } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
+import type { TSinchTooltipOrientation, TSinchTooltipTextAlign, TSinchTooltipType } from './types';
+import type { TRect } from '../types';
+export * from './types';
 export declare class Tooltip extends NectaryElement {
     #private;
     constructor();
@@ -21,23 +22,3 @@ export declare class Tooltip extends NectaryElement {
     get footprintRect(): TRect;
     get tooltipRect(): TRect;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-tooltip': TSinchTooltip;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-tooltip': NectaryComponentVanilla<'sinch-tooltip'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-tooltip': NectaryComponentReact<'sinch-tooltip'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-tooltip': NectaryComponentReact<'sinch-tooltip'>;
-        }
-    }
-}