@nectary/components 4.11.1 → 4.12.0

package/card-v2/index.js

@@ -1,17 +1,19 @@
-import { defineCustomElement, NectaryElement, updateBooleanAttribute, getReactEventHandler, getBooleanAttribute, updateAttribute, isAttrTrue, setClass } from '../utils';
-const templateHTML = '<style>:host{display:flex}.empty{display:none!important}#card{border-radius:var(--sinch-comp-card-v2-shape-radius);border:1px solid var(--sinch-comp-card-v2-color-default-border-initial);background-color:var(--sinch-comp-card-v2-color-default-background-initial);box-shadow:var(--sinch-comp-card-v2-shadow-initial);overflow:hidden;transition:.15s linear;display:flex;flex-direction:column;flex:1}#card-media{display:block;overflow:hidden}#body{display:flex;flex-direction:column;padding:16px;gap:8px;align-self:stretch;flex:1}#card-title{display:flex;flex-direction:row;align-items:center;gap:8px;align-self:stretch}#card-content{display:flex;gap:10px;align-self:stretch}#card-footer{display:flex;flex-direction:row;align-items:center;gap:16px;align-self:stretch;margin-top:auto}:host([selected]:not([selected=false])) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-initial);border-color:var(--sinch-comp-card-v2-color-selected-border-initial);cursor:pointer}:host([clickable]:not([clickable=false])) #card{cursor:pointer}:host([disabled]:not([disabled=false])) #card{box-shadow:var(--sinch-comp-card-v2-shadow-disabled);background-color:var(--sinch-comp-card-v2-color-default-background-disabled);border-color:var(--sinch-comp-card-v2-color-default-border-disabled);cursor:not-allowed}:host([clickable]:not([clickable=false]):is(:not([disabled]),[disabled=false]):hover) #card{background-color:var(--sinch-comp-card-v2-color-default-background-hover);border-color:var(--sinch-comp-card-v2-color-default-border-hover);box-shadow:var(--sinch-comp-card-v2-shadow-hover)}:host([clickable]:not([clickable=false]):is(:not([disabled]),[disabled=false]):active) #card{background-color:var(--sinch-comp-card-v2-color-default-background-active);border-color:var(--sinch-comp-card-v2-color-default-border-active);box-shadow:var(--sinch-comp-card-v2-shadow-active)}:host([selected]:not([selected=false]):is(:not([disabled]),[disabled=false]):hover) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-hover);border-color:var(--sinch-comp-card-v2-color-selected-border-hover)}:host([selected]:not([selected=false]):is(:not([disabled]),[disabled=false]):active) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-active);border-color:var(--sinch-comp-card-v2-color-selected-border-active)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) #card{background-color:var(--sinch-comp-card-v2-color-selected-background-disabled);border-color:var(--sinch-comp-card-v2-color-selected-border-disabled)}::slotted([slot=content]){max-width:100%;color:var(--sinch-comp-card-v2-color-default-description-initial);font-size:var(--sinch-comp-card-v2-font-description)}::slotted([slot=title]){max-width:100%}::slotted([slot=footer]){max-width:100%}:host([selected]:not([selected=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-selected-description-initial)}:host([disabled]:not([disabled=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-default-description-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) ::slotted([slot=content]){color:var(--sinch-comp-card-v2-color-selected-description-disabled)}</style><div id="card"><div id="card-media"><slot name="media"></slot></div><div id="body"><div id="card-title"><slot name="title"></slot></div><div id="card-content"><slot name="content"></slot></div><div id="card-footer"><slot name="footer"></slot></div></div></div>';
-const template = document.createElement('template');
+import { updateBooleanAttribute, updateAttribute, getBooleanAttribute, setClass, isAttrTrue } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+import { getReactEventHandler } from "../utils/get-react-event-handler.js";
+const templateHTML = '<style>\n:host {\n  display: flex;\n}\n\n.empty {\n  display: none !important;\n}\n\n#card {\n  border-radius: var(--sinch-comp-card-v2-shape-radius);\n  border: 1px solid var(--sinch-comp-card-v2-color-default-border-initial);\n  background-color: var(--sinch-comp-card-v2-color-default-background-initial);\n  box-shadow: var(--sinch-comp-card-v2-shadow-initial);\n  overflow: hidden;\n  transition: 0.15s linear;\n  display: flex;\n  flex-direction: column;\n  flex: 1;\n}\n\n#card-media {\n  display: block;\n  overflow: hidden;\n}\n\n#body {\n  display: flex;\n  flex-direction: column;\n  padding: 16px;\n  gap: 8px;\n  align-self: stretch;\n  flex: 1;\n}\n\n#card-title {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n}\n\n#card-content {\n  display: flex;\n  gap: 10px;\n  align-self: stretch;\n}\n\n#card-footer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  gap: 16px;\n  align-self: stretch;\n  margin-top: auto;\n}\n\n:host([selected]:not([selected="false"])) #card {\n  background-color: var(--sinch-comp-card-v2-color-selected-background-initial);\n  border-color: var(--sinch-comp-card-v2-color-selected-border-initial);\n  cursor: pointer;\n}\n\n:host([clickable]:not([clickable="false"])) #card {\n  cursor: pointer;\n}\n\n:host([disabled]:not([disabled="false"])) #card {\n  box-shadow: var(--sinch-comp-card-v2-shadow-disabled);\n  background-color: var(--sinch-comp-card-v2-color-default-background-disabled);\n  border-color: var(--sinch-comp-card-v2-color-default-border-disabled);\n  cursor: not-allowed;\n}\n\n:host([clickable]:not([clickable="false"]):is(:not([disabled]), [disabled="false"]):hover) #card {\n  background-color: var(--sinch-comp-card-v2-color-default-background-hover);\n  border-color: var(--sinch-comp-card-v2-color-default-border-hover);\n  box-shadow: var(--sinch-comp-card-v2-shadow-hover);\n}\n\n:host([clickable]:not([clickable="false"]):is(:not([disabled]), [disabled="false"]):active) #card {\n  background-color: var(--sinch-comp-card-v2-color-default-background-active);\n  border-color: var(--sinch-comp-card-v2-color-default-border-active);\n  box-shadow: var(--sinch-comp-card-v2-shadow-active);\n}\n\n:host([selected]:not([selected="false"]):is(:not([disabled]), [disabled="false"]):hover) #card {\n  background-color: var(--sinch-comp-card-v2-color-selected-background-hover);\n  border-color: var(--sinch-comp-card-v2-color-selected-border-hover);\n}\n\n:host([selected]:not([selected="false"]):is(:not([disabled]), [disabled="false"]):active) #card {\n  background-color: var(--sinch-comp-card-v2-color-selected-background-active);\n  border-color: var(--sinch-comp-card-v2-color-selected-border-active);\n}\n\n:host([selected]:not([selected="false"])[disabled]:not([disabled="false"])) #card {\n  background-color: var(--sinch-comp-card-v2-color-selected-background-disabled);\n  border-color: var(--sinch-comp-card-v2-color-selected-border-disabled);\n}\n\n::slotted([slot="content"]) {\n  max-width: 100%;\n  color: var(--sinch-comp-card-v2-color-default-description-initial);\n  font-size: var(--sinch-comp-card-v2-font-description);\n}\n\n::slotted([slot="title"]) {\n  max-width: 100%;\n}\n\n::slotted([slot="footer"]) {\n  max-width: 100%;\n}\n\n:host([selected]:not([selected="false"])) ::slotted([slot="content"]) {\n  color: var(--sinch-comp-card-v2-color-selected-description-initial);\n}\n\n:host([disabled]:not([disabled="false"])) ::slotted([slot="content"]) {\n  color: var(--sinch-comp-card-v2-color-default-description-disabled);\n}\n\n:host([selected]:not([selected="false"])[disabled]:not([disabled="false"])) ::slotted([slot="content"]) {\n  color: var(--sinch-comp-card-v2-color-selected-description-disabled);\n}\n\n</style>\n\n<div id="card">\n  <div id="card-media">\n    <slot name="media"></slot>\n  </div>\n  <div id="body">\n    <div id="card-title">\n      <slot name="title"></slot>\n    </div>\n    <div id="card-content">\n      <slot name="content"></slot>\n    </div>\n    <div id="card-footer">\n      <slot name="footer"></slot>\n    </div>\n  </div>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-const CLICK_EVENTS = ['click', '-click'];
-export class CardV2 extends NectaryElement {
+const CLICK_EVENTS = ["click", "-click"];
+class CardV2 extends NectaryElement {
   #$slots;
   #controller = null;
-  #clickEventListeners = (() => new Map())();
+  #clickEventListeners = /* @__PURE__ */ new Map();
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$slots = shadowRoot.querySelectorAll('slot');
+    this.#$slots = shadowRoot.querySelectorAll("slot");
   }
   connectedCallback() {
     super.connectedCallback();
@@ -23,8 +25,7 @@ export class CardV2 extends NectaryElement {
     this.#controller?.abort();
     this.#controller = null;
   }
-  addEventListener(type, listener, options) {
-    let isInitial = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  addEventListener(type, listener, options, isInitial = false) {
     super.addEventListener(type, listener, options);
     if (!isInitial && this.#isClickEvent(type)) {
       this.#handleClickListenerAdded(type, listener);
@@ -41,95 +42,96 @@ export class CardV2 extends NectaryElement {
   }
   #setupEventListeners() {
     this.#controller = new AbortController();
-    const options = {
-      signal: this.#controller.signal
-    };
-    const handleClick = e => {
+    const options = { signal: this.#controller.signal };
+    const handleClick = (e) => {
       if (this.disabled) {
         e.stopPropagation();
         e.preventDefault();
       } else {
-        this.dispatchEvent(new CustomEvent('-click'));
+        this.dispatchEvent(
+          new CustomEvent("-click")
+        );
       }
     };
-    const handleReactClick = e => {
-      getReactEventHandler(this, 'on-click')?.(e);
+    const handleReactClick = (e) => {
+      getReactEventHandler(this, "on-click")?.(e);
     };
-    this.addEventListener('click', handleClick, options, true);
-    this.addEventListener('-click', handleReactClick, options, true);
-    const handleSlotChange = slot => {
+    this.addEventListener("click", handleClick, options, true);
+    this.addEventListener("-click", handleReactClick, options, true);
+    const handleSlotChange = (slot) => {
       const isEmpty = slot.assignedNodes().length <= 0;
-      setClass(slot.parentElement, 'empty', isEmpty);
+      setClass(slot.parentElement, "empty", isEmpty);
     };
-    this.#$slots.forEach(slot => {
+    this.#$slots.forEach((slot) => {
       handleSlotChange(slot);
-      slot.addEventListener('slotchange', () => handleSlotChange(slot), options);
+      slot.addEventListener("slotchange", () => handleSlotChange(slot), options);
     });
   }
   #updateClickableState() {
-    const hasClickHandler = this.hasAttribute('onclick') || Boolean(getReactEventHandler(this, 'on-click'));
-    if (!this.hasAttribute('clickable') && hasClickHandler) {
-      updateBooleanAttribute(this, 'clickable', true);
+    const hasClickHandler = this.hasAttribute("onclick") === true || Boolean(getReactEventHandler(this, "on-click"));
+    if (this.hasAttribute("clickable") === false && hasClickHandler) {
+      updateBooleanAttribute(this, "clickable", true);
     }
   }
   #handleClickListenerAdded(type, listener) {
-    const listeners = this.#clickEventListeners.get(type) ?? new Set();
+    const listeners = this.#clickEventListeners.get(type) ?? /* @__PURE__ */ new Set();
     if (!listeners.has(listener)) {
       listeners.add(listener);
       this.#clickEventListeners.set(type, listeners);
     }
-    if (!this.hasAttribute('clickable')) {
-      updateBooleanAttribute(this, 'clickable', true);
+    if (this.hasAttribute("clickable") === false) {
+      updateBooleanAttribute(this, "clickable", true);
     }
   }
   #handleClickListenerRemoved(type, listener) {
     const listeners = this.#clickEventListeners.get(type);
     listeners?.delete(listener);
-    const hasListeners = Array.from(this.#clickEventListeners.values()).some(set => set.size > 0);
-    if (!hasListeners && this.getAttribute('clickable') === '') {
-      updateBooleanAttribute(this, 'clickable', false);
+    const hasListeners = Array.from(this.#clickEventListeners.values()).some((set) => set.size > 0);
+    if (!hasListeners && this.getAttribute("clickable") === "") {
+      updateBooleanAttribute(this, "clickable", false);
     }
   }
   static get observedAttributes() {
-    return ['clickable', 'disabled', 'selected'];
+    return ["clickable", "disabled", "selected"];
   }
   attributeChangedCallback(name, _oldVal, newVal) {
     switch (name) {
-      case 'clickable':
-        {
-          const isClickable = isAttrTrue(newVal);
-          if (isClickable) {
-            updateAttribute(this, 'role', 'button');
-            updateAttribute(this, 'tabindex', '0');
-          } else {
-            updateAttribute(this, 'role', null);
-            updateAttribute(this, 'tabindex', null);
-          }
-          break;
+      case "clickable": {
+        const isClickable = isAttrTrue(newVal);
+        if (isClickable) {
+          updateAttribute(this, "role", "button");
+          updateAttribute(this, "tabindex", "0");
+        } else {
+          updateAttribute(this, "role", null);
+          updateAttribute(this, "tabindex", null);
         }
-      case 'selected':
-      case 'disabled':
-        {
-          const bool = isAttrTrue(newVal);
-          const titleElement = this.querySelector('sinch-card-v2-title');
-          if (titleElement !== null) {
-            updateBooleanAttribute(titleElement, name, bool);
-          }
-          break;
+        break;
+      }
+      case "selected":
+      case "disabled": {
+        const bool = isAttrTrue(newVal);
+        const titleElement = this.querySelector("sinch-card-v2-title");
+        if (titleElement !== null) {
+          updateBooleanAttribute(titleElement, name, bool);
         }
+        break;
+      }
     }
   }
   get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+    return getBooleanAttribute(this, "disabled");
   }
   set disabled(value) {
-    updateBooleanAttribute(this, 'disabled', value);
+    updateBooleanAttribute(this, "disabled", value);
   }
   get selected() {
-    return getBooleanAttribute(this, 'selected');
+    return getBooleanAttribute(this, "selected");
   }
   set selected(value) {
-    updateBooleanAttribute(this, 'selected', value);
+    updateBooleanAttribute(this, "selected", value);
   }
 }
-defineCustomElement('sinch-card-v2', CardV2);
+defineCustomElement("sinch-card-v2", CardV2);
+export {
+  CardV2
+};

package/card-v2/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchCardV2Props = {
     /** Disabled */
     disabled?: boolean;
@@ -49,3 +49,23 @@ export type TSinchCardV2 = {
 };
 export type TSinchCardV2Element = NectaryComponentVanillaByType<TSinchCardV2>;
 export type TSinchCardV2React = NectaryComponentReactByType<TSinchCardV2>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-card-v2': TSinchCardV2;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card-v2': NectaryComponentVanilla<'sinch-card-v2'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card-v2': NectaryComponentReact<'sinch-card-v2'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-card-v2': NectaryComponentReact<'sinch-card-v2'>;
+        }
+    }
+}

package/card-v2/types.js

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

package/card-v2-title/global/index.d.ts

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

package/card-v2-title/global/index.js

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

package/card-v2-title/index.d.ts

@@ -1,6 +1,6 @@
 import { NectaryElement } from '../utils';
-import type { TSinchOrientation, TSinchCardTitle } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+import type { TSinchOrientation } from './types';
+export * from './types';
 export declare class CardV2Title extends NectaryElement {
     #private;
     constructor();
@@ -14,23 +14,3 @@ export declare class CardV2Title extends NectaryElement {
     set ellipsis(isEllipsis: boolean);
     get ellipsis(): boolean;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-card-v2-title': TSinchCardTitle;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-card-v2-title': NectaryComponentVanilla<'sinch-card-v2-title'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-card-v2-title': NectaryComponentReact<'sinch-card-v2-title'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-card-v2-title': NectaryComponentReact<'sinch-card-v2-title'>;
-        }
-    }
-}

package/card-v2-title/index.js

@@ -1,56 +1,58 @@
-import { defineCustomElement, getAttribute, updateAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute, isAttrTrue } from '../utils';
-const templateHTML = '<style>:host{display:block}#title{display:flex;align-items:center;flex-direction:row}#title-text{font:var(--sinch-comp-card-v2-font-title);color:var(--sinch-comp-card-v2-color-default-title-initial)}#title-icon{display:flex}:host([orientation=vertical]) #title{align-items:start;flex-direction:column}:host([disabled]:not([disabled=false])) #title-text{color:var(--sinch-comp-card-v2-color-default-title-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) #title-text{color:var(--sinch-comp-card-v2-color-selected-title-disabled)}::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-card-v2-size-icon);margin-right:8px;margin-bottom:0}:host([orientation=vertical]) ::slotted([slot=icon]){margin-right:0;margin-bottom:8px}:host([selected]:not([selected=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-selected-icon-initial)}:host([disabled]:not([disabled=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-default-icon-disabled)}:host([selected]:not([selected=false])[disabled]:not([disabled=false])) ::slotted([slot=icon]){--sinch-global-color-icon:var(--sinch-comp-card-v2-color-selected-icon-disabled)}</style><div id="title"><div id="title-icon"><slot name="icon"></slot></div><sinch-text id="title-text" type="m"></sinch-text></div>';
-const template = document.createElement('template');
+import { updateBooleanAttribute, getAttribute, updateAttribute, getBooleanAttribute, isAttrTrue } from "../utils/dom.js";
+import { defineCustomElement, NectaryElement } from "../utils/element.js";
+const templateHTML = '<style>\n:host {\n  display: block;\n}\n\n#title {\n  display: flex;\n  align-items: center;\n  flex-direction: row;\n}\n\n#title-text {\n  font: var(--sinch-comp-card-v2-font-title);\n  color: var(--sinch-comp-card-v2-color-default-title-initial);\n}\n\n#title-icon {\n  display: flex;\n}\n\n:host([orientation="vertical"]) #title {\n  align-items: start;\n  flex-direction: column;\n}\n\n:host([disabled]:not([disabled="false"])) #title-text {\n  color: var(--sinch-comp-card-v2-color-default-title-disabled);\n}\n\n:host([selected]:not([selected="false"])[disabled]:not([disabled="false"])) #title-text {\n  color: var(--sinch-comp-card-v2-color-selected-title-disabled);\n}\n\n::slotted([slot="icon"]) {\n  --sinch-global-color-icon: var(--sinch-comp-card-v2-color-default-icon-initial);\n  --sinch-global-size-icon: var(--sinch-comp-card-v2-size-icon);\n\n  margin-right: 8px;\n  margin-bottom: 0;\n}\n\n:host([orientation="vertical"]) ::slotted([slot="icon"]) {\n  margin-right: 0;\n  margin-bottom: 8px;\n}\n\n:host([selected]:not([selected="false"])) ::slotted([slot="icon"]) {\n  --sinch-global-color-icon: var(--sinch-comp-card-v2-color-selected-icon-initial);\n}\n\n:host([disabled]:not([disabled="false"])) ::slotted([slot="icon"]) {\n  --sinch-global-color-icon: var(--sinch-comp-card-v2-color-default-icon-disabled);\n}\n\n:host([selected]:not([selected="false"])[disabled]:not([disabled="false"])) ::slotted([slot="icon"]) {\n  --sinch-global-color-icon: var(--sinch-comp-card-v2-color-selected-icon-disabled);\n}\n\n</style>\n\n<div id="title">\n  <div id="title-icon">\n    <slot name="icon"></slot>\n  </div>\n  <sinch-text id="title-text" type="m"></sinch-text>\n</div>\n';
+const template = document.createElement("template");
 template.innerHTML = templateHTML;
-export class CardV2Title extends NectaryElement {
+class CardV2Title extends NectaryElement {
   #$text;
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#title-text');
+    this.#$text = shadowRoot.querySelector("#title-text");
   }
   connectedCallback() {
     super.connectedCallback();
-    if (!this.hasAttribute('orientation')) {
-      this.setAttribute('orientation', 'horizontal');
+    if (this.hasAttribute("orientation") === false) {
+      this.setAttribute("orientation", "horizontal");
     }
   }
   static get observedAttributes() {
-    return ['text', 'ellipsis'];
+    return ["text", "ellipsis"];
   }
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'ellipsis':
-        {
-          const bool = isAttrTrue(newVal);
-          updateBooleanAttribute(this.#$text, 'ellipsis', bool);
-          break;
-        }
+      case "text": {
+        this.#$text.textContent = newVal;
+        break;
+      }
+      case "ellipsis": {
+        const bool = isAttrTrue(newVal);
+        updateBooleanAttribute(this.#$text, "ellipsis", bool);
+        break;
+      }
     }
   }
   get text() {
-    return getAttribute(this, 'text', '');
+    return getAttribute(this, "text", "");
   }
   set text(value) {
-    updateAttribute(this, 'text', value);
+    updateAttribute(this, "text", value);
   }
   get orientation() {
-    return getAttribute(this, 'orientation', '');
+    return getAttribute(this, "orientation", "");
   }
   set orientation(value) {
-    updateAttribute(this, 'orientation', value);
+    updateAttribute(this, "orientation", value);
   }
   set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
+    updateBooleanAttribute(this, "ellipsis", isEllipsis);
   }
   get ellipsis() {
-    return getBooleanAttribute(this, 'ellipsis');
+    return getBooleanAttribute(this, "ellipsis");
   }
 }
-defineCustomElement('sinch-card-v2-title', CardV2Title);
+defineCustomElement("sinch-card-v2-title", CardV2Title);
+export {
+  CardV2Title
+};

package/card-v2-title/types.d.ts

@@ -1,4 +1,4 @@
-import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType, NectaryComponentReact, NectaryComponentVanilla } from '../types';
 export type TSinchOrientation = 'horizontal' | 'vertical';
 export type TSinchCardTitleProps = {
     /** Text */
@@ -30,3 +30,23 @@ export type TSinchCardTitle = {
 };
 export type TSinchCardTitleElement = NectaryComponentVanillaByType<TSinchCardTitle>;
 export type TSinchCardTitleReact = NectaryComponentReactByType<TSinchCardTitle>;
+declare global {
+    interface NectaryComponentMap {
+        'sinch-card-v2-title': TSinchCardTitle;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-card-v2-title': NectaryComponentVanilla<'sinch-card-v2-title'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-card-v2-title': NectaryComponentReact<'sinch-card-v2-title'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-card-v2-title': NectaryComponentReact<'sinch-card-v2-title'>;
+        }
+    }
+}

package/card-v2-title/types.js

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

package/checkbox/global/index.d.ts

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

package/checkbox/global/index.js

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

package/checkbox/index.d.ts

@@ -1,7 +1,6 @@
 import '../rich-text';
 import { NectaryElement } from '../utils';
-import type { TSinchCheckbox } from './types';
-import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export * from './types';
 export declare class Checkbox extends NectaryElement {
     #private;
     static formAssociated: boolean;
@@ -29,23 +28,3 @@ export declare class Checkbox extends NectaryElement {
     get text(): string | null;
     get focusable(): boolean;
 }
-declare global {
-    interface NectaryComponentMap {
-        'sinch-checkbox': TSinchCheckbox;
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-checkbox': NectaryComponentVanilla<'sinch-checkbox'>;
-    }
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-checkbox': NectaryComponentReact<'sinch-checkbox'>;
-        }
-    }
-}
-declare module 'react' {
-    namespace JSX {
-        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
-            'sinch-checkbox': NectaryComponentReact<'sinch-checkbox'>;
-        }
-    }
-}