@nectary/components 0.48.1 → 0.49.0

package/tabs/types.d.ts

@@ -1,6 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchTabsElement = HTMLElement & {
+export type TSinchTabsElement = HTMLElement & {
     /** Value */
     value: string;
     nthOptionRect(index: number): TRect | null;
@@ -9,7 +9,7 @@ export declare type TSinchTabsElement = HTMLElement & {
     /** Value */
     setAttribute(name: 'value', value: string): void;
 };
-export declare type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
+export type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
     /** Value */
     value: string;
     /** Label that is used for a11y */

package/tabs-icon-option/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-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;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:40px;--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-checked]) #button{--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}#button:disabled{cursor:unset;pointer-events:none;--sinch-color-icon:var(--sinch-color-border-default)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip" inverted><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
+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;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:40px;--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;--sinch-color-icon:var(--sinch-color-border-default)}:host([data-checked]) #button{--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip" inverted><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {

package/tabs-icon-option/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchTabsIconOptionElement = HTMLElement & {
+export type TSinchTabsIconOptionElement = HTMLElement & {
     /** Value */
     value: string;
     /** Disabled */
@@ -9,7 +9,7 @@ export declare type TSinchTabsIconOptionElement = HTMLElement & {
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchTabsIconOptionReact = TSinchElementReact<TSinchTabsIconOptionElement> & {
+export type TSinchTabsIconOptionReact = TSinchElementReact<TSinchTabsIconOptionElement> & {
     /** Value */
     value: string;
     /** Label that is used for a11y */

package/tabs-option/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#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;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:40px;color:var(--sinch-color-stormy-300);--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-checked]) #button{color:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}#button:disabled{cursor:unset;pointer-events:none;color:var(--sinch-color-border-default);--sinch-color-icon:var(--sinch-color-border-default)}#text{flex-shrink:1;flex-basis:auto;min-width:0}::slotted(*){display:block}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
+const templateHTML = '<style>:host{display:block}#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;border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);height:40px;color:var(--sinch-color-stormy-300);--sinch-color-icon:var(--sinch-color-stormy-300);--sinch-size-icon:16px}#button:hover{background-color:var(--sinch-color-tropical-100)}#button:focus-visible::before{content:"";position:absolute;inset:0;bottom:-3px;border:2px solid var(--sinch-color-border-focus);border-top-left-radius:var(--sinch-shape-radius-l);border-top-right-radius:var(--sinch-shape-radius-l);pointer-events:none}#button:disabled{cursor:unset;pointer-events:none;color:var(--sinch-color-border-default);--sinch-color-icon:var(--sinch-color-border-default)}:host([data-checked]) #button{color:var(--sinch-color-tropical-500);--sinch-color-icon:var(--sinch-color-tropical-500)}:host([data-checked]) #button::after{content:"";position:absolute;left:4px;right:4px;bottom:-1px;pointer-events:none;border-top:2px solid var(--sinch-color-tropical-500)}#text{flex-shrink:1;flex-basis:auto;min-width:0}::slotted(*){display:block}</style><button id="button"><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tabs-option', class extends NectaryElement {

package/tabs-option/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchTabsOptionElement = HTMLElement & {
+export type TSinchTabsOptionElement = HTMLElement & {
     /** Value */
     value: string;
     /** Text */
@@ -13,7 +13,7 @@ export declare type TSinchTabsOptionElement = HTMLElement & {
     /** Disabled */
     setAttribute(name: 'disabled', value: ''): void;
 };
-export declare type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
+export type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
     /** Value */
     value: string;
     /** Text */

package/tag/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchTagElement = HTMLElement & {
+export type TSinchTagElement = HTMLElement & {
     /** Text */
     text: string;
     /** Color, gray by default */
@@ -13,7 +13,7 @@ export declare type TSinchTagElement = HTMLElement & {
     /** Small */
     setAttribute(name: 'small', value: ''): void;
 };
-export declare type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
+export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
     /** Text */
     text: string;
     /** Color, gray by default */

package/text/index.js

@@ -1,6 +1,6 @@
 import '../icons/cancel';
 import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue } from '../utils';
-const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m)}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}:host([ellipsis]:not([ellipsis=false])){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-text-white-space:nowrap}</style><slot></slot>';
+const templateHTML = '<style>:host{display:block;font:var(--sinch-font-text-m);font-style:inherit;font-weight:inherit;text-decoration:inherit}:host([inline]:not([inline=false])){display:inline}:host([type="s"]){font:var(--sinch-font-text-s)}:host([type=xs]){font:var(--sinch-font-text-xs)}:host([type=xxs]){font:var(--sinch-font-text-xxs)}:host([emphasized]:not([emphasized=false])){font-weight:var(--sinch-font-weight-emphasized)}:host([ellipsis]:not([ellipsis=false])){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-text-white-space:nowrap}</style><slot></slot>';
 import { assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -12,9 +12,7 @@ defineCustomElement('sinch-text', class extends NectaryElement {
   }
   connectedCallback() {
     this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
-
   }
-
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
   }

package/text/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchTextType = 'm' | 's' | 'xs' | 'xxs';
-export declare type TSinchTextElement = HTMLElement & {
+export type TSinchTextType = 'm' | 's' | 'xs' | 'xxs';
+export type TSinchTextElement = HTMLElement & {
     type: TSinchTextType;
     inline: boolean;
     emphasized: boolean;
@@ -10,7 +10,7 @@ export declare type TSinchTextElement = HTMLElement & {
     setAttribute(name: 'emphasized', value: ''): void;
     setAttribute(name: 'ellipsis', value: ''): void;
 };
-export declare type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
+export type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
     type: TSinchTextType;
     inline?: boolean;
     emphasized?: boolean;

package/text/utils.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchTextType } from './types';
 export declare const typeValues: readonly TSinchTextType[];
-declare type TAssertType = (value: string | null) => asserts value is TSinchTextType;
+type TAssertType = (value: string | null) => asserts value is TSinchTextType;
 export declare const assertType: TAssertType;
 export {};

package/text/utils.js

@@ -1,6 +1,6 @@
 export const typeValues = ['m', 's', 'xs', 'xxs'];
 export const assertType = value => {
   if (value === null || !typeValues.includes(value)) {
-    throw new Error(`sinch-title: invalid type attribute: ${value}`);
+    throw new Error(`sinch-text: invalid "type" attribute: "${value}"`);
   }
 };

package/textarea/index.js

@@ -1,6 +1,6 @@
 import { Context, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 import { DEFAULT_SIZE } from '../utils/size';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-input-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius);padding-right:2px;padding-bottom:2px;overflow:hidden}#input{all:initial;display:block;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);resize:none;white-space:pre-wrap;padding:8px 10px 8px 12px}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#input:disabled{color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}:host([invalid]:not([invalid=false])) #border{border-color:var(--sinch-color-text-invalid)}#input:focus+#border{border-color:var(--sinch-color-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 10px 10px 12px}#bottom.empty{display:none}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;--sinch-size:var(--sinch-size-m);--sinch-size-icon:var(--sinch-input-icon-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;box-sizing:border-box;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius);padding-right:2px;padding-bottom:2px;overflow:hidden}#input{all:initial;display:block;font:var(--sinch-font-text-m);color:var(--sinch-color-text-default);resize:none;white-space:pre-wrap;padding:8px 10px 8px 12px}#input::placeholder{font:var(--sinch-font-text-m);color:var(--sinch-color-text-muted);opacity:1}#input:disabled{color:var(--sinch-color-text-disabled);-webkit-text-fill-color:var(--sinch-color-text-disabled)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}:host([resizable]:not([resizable=false])) #input{resize:vertical}#border{position:absolute;border:1px solid var(--sinch-color-border-dark);border-radius:var(--sinch-shape-radius);inset:0;pointer-events:none}:host([invalid]:not([invalid=false])) #border{border-color:var(--sinch-color-text-invalid)}#input:focus+#border{border-color:var(--sinch-color-border-focus);border-width:2px}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#bottom{display:flex;flex-direction:row;align-items:center;gap:8px;padding:8px 10px 10px 12px}#bottom.empty{display:none}</style><div id="wrapper"><textarea id="input"></textarea><div id="border"></div><div id="bottom"><slot name="bottom"></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-textarea', class extends NectaryElement {

package/textarea/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchTextareaElement = HTMLElement & {
+export type TSinchTextareaElement = HTMLElement & {
     /** Value */
     value: string;
     /** Text that appears in the text field when it has no value set */
@@ -35,7 +35,7 @@ export declare type TSinchTextareaElement = HTMLElement & {
     /** Whether the text field is resizable */
     setAttribute(name: 'resizable', value: ''): void;
 };
-export declare type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
+export type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
     /** Value */
     value: string;
     /** Text that appears in the text field when it has no value set */

package/theme/fonts.css

@@ -31,6 +31,39 @@
     url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff") format("woff");
 }
 
+@font-face {
+  font-family: "DM Sans";
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+  src:
+    local("DMSans-Italic"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400-italic.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-400-italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+  src:
+    local("DMSans-MediumItalic"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500-italic.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-500-italic.woff") format("woff");
+}
+
+@font-face {
+  font-family: "DM Sans";
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+  src:
+    local("DMSans-BoldItalic"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700-italic.woff2") format("woff2"),
+    url("https://d2vu40klajma73.cloudfront.net/DM-Sans-700-italic.woff") format("woff");
+}
+
 @font-face {
   font-family: "DM Mono";
   font-weight: 400;

package/theme/fonts.json

@@ -32,6 +32,39 @@
       "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700.woff"
     }
   },
+  {
+    "family": "DM Sans",
+    "weight": 400,
+    "style": "italic",
+    "display": "swap",
+    "src": {
+      "local": "DMSans-Italic",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400-italic.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-400-italic.woff"
+    }
+  },
+  {
+    "family": "DM Sans",
+    "weight": 500,
+    "style": "italic",
+    "display": "swap",
+    "src": {
+      "local": "DMSans-MediumItalic",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500-italic.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-500-italic.woff"
+    }
+  },
+  {
+    "family": "DM Sans",
+    "weight": 700,
+    "style": "italic",
+    "display": "swap",
+    "src": {
+      "local": "DMSans-BoldItalic",
+      "woff2": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700-italic.woff2",
+      "woff": "https://d2vu40klajma73.cloudfront.net/DM-Sans-700-italic.woff"
+    }
+  },
   {
     "family": "DM Mono",
     "weight": 400,

package/tile-control/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchTileControlElement = HTMLElement & {
+export type TSinchTileControlElement = HTMLElement & {
     /** Value */
     value: string;
     /** Small */
@@ -20,7 +20,7 @@ export declare type TSinchTileControlElement = HTMLElement & {
     /** Number of columns from 1 to 8 */
     setAttribute(name: 'cols', value: string): void;
 };
-export declare type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement> & {
+export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement> & {
     /** Value */
     value: string;
     /** Multiple */

package/tile-control-option/types.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchTileControlOptionElement = HTMLElement & {
+export type TSinchTileControlOptionElement = HTMLElement & {
     /** Value */
     value: string;
     /** Text content */
@@ -21,7 +21,7 @@ export declare type TSinchTileControlOptionElement = HTMLElement & {
     /** Small */
     setAttribute(name: 'small', value: ''): void;
 };
-export declare type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlOptionElement> & {
+export type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlOptionElement> & {
     /** Value */
     value: string;
     /** Text content */

package/time-picker/index.js

@@ -53,7 +53,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     const HOUR_12_DIGIT_RADIUS = HOUR_12_RADIUS + HOUR_12_DIGIT_SIZE / 2;
     const HOUR_24_DIGIT_RADIUS = HOUR_24_RADIUS + HOUR_24_DIGIT_SIZE / 2;
     const hours12Frag = document.createDocumentFragment();
-
     for (let i = 0; i < 12; i++) {
       const rad = Math.PI / 6 * (i - 3);
       const el = document.createElement('div');
@@ -66,7 +65,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
       hours12Frag.appendChild(el);
     }
     this.#$pickerHours.appendChild(hours12Frag);
-
     const hours24Frag = document.createDocumentFragment();
     for (let i = 12; i < 24; i++) {
       const rad = Math.PI / 6 * (i - 3);
@@ -80,7 +78,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
       hours24Frag.appendChild(el);
     }
     this.#$pickerHours.appendChild(hours24Frag);
-
     const minutesFrag = document.createDocumentFragment();
     for (let i = 0; i < 60; i += 5) {
       const rad = Math.PI / 30 * (i - 15);
@@ -207,7 +204,6 @@ defineCustomElement('sinch-time-picker', class extends NectaryElement {
     if (dy < 0) {
       cssDeg += 180;
     }
-
     const rowIndex = len > MINUTE_RADIUS ? 0 : len > HOUR_12_RADIUS ? 1 : 2;
     return [cssDeg, rowIndex];
   }

package/time-picker/types.d.ts

@@ -1,6 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchTimePickerElement = HTMLElement & {
+export type TSinchTimePickerElement = HTMLElement & {
     /** Time value in ISO 8601 format */
     value: string;
     /** AM/PM 12-hour clock system, `false` by default */
@@ -21,7 +21,7 @@ export declare type TSinchTimePickerElement = HTMLElement & {
     /** Submit button label that is used for a11y */
     setAttribute(name: 'submit-aria-label', value: string): void;
 };
-export declare type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement> & {
+export type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement> & {
     /** Time value in ISO 8601 format */
     value: string;
     /** AM/PM 12-hour clock system, `false` by default */

package/title/index.js

@@ -14,9 +14,7 @@ defineCustomElement('sinch-title', class extends NectaryElement {
   }
   connectedCallback() {
     this.setAttribute('role', 'heading');
-
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }

package/title/types.d.ts

@@ -1,7 +1,7 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchTitleType = 'xl' | 'l' | 'm' | 's' | 'xs';
-export declare type TSinchTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
-export declare type TSinchTitleElement = HTMLElement & {
+export type TSinchTitleType = 'xl' | 'l' | 'm' | 's' | 'xs';
+export type TSinchTitleLevel = '1' | '2' | '3' | '4' | '5' | '6';
+export type TSinchTitleElement = HTMLElement & {
     text: string;
     type: TSinchTitleType;
     level: TSinchTitleLevel;
@@ -11,7 +11,7 @@ export declare type TSinchTitleElement = HTMLElement & {
     setAttribute(name: 'level', value: TSinchTitleLevel): void;
     setAttribute(name: 'ellipsis', value: ''): void;
 };
-export declare type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
+export type TSinchTitleReact = TSinchElementReact<TSinchTitleElement> & {
     text: string;
     type: TSinchTitleType;
     level: TSinchTitleLevel;

package/title/utils.d.ts

@@ -1,9 +1,10 @@
 import type { TSinchTitleLevel, TSinchTitleType } from './types';
 export declare const typeValues: readonly TSinchTitleType[];
 export declare const levelValues: readonly TSinchTitleLevel[];
-declare type TAssertLevel = (value: string | null) => asserts value is TSinchTitleLevel;
+type TAssertLevel = (value: string | null) => asserts value is TSinchTitleLevel;
 export declare const assertLevel: TAssertLevel;
-declare type TAssertType = (value: string | null) => asserts value is TSinchTitleType;
+type TAssertType = (value: string | null) => asserts value is TSinchTitleType;
 export declare const assertType: TAssertType;
 export declare const getTitleLevelFromType: (type: TSinchTitleType) => TSinchTitleLevel;
+export declare const getTitleTypeFromLevel: (level: TSinchTitleLevel) => TSinchTitleType;
 export {};

package/title/utils.js

@@ -25,4 +25,21 @@ export const getTitleLevelFromType = type => {
     default:
       throw new Error(`sinch-title: invalid type value: ${type}`);
   }
+};
+export const getTitleTypeFromLevel = level => {
+  switch (level) {
+    case '1':
+      return 'xl';
+    case '2':
+      return 'l';
+    case '3':
+      return 'm';
+    case '4':
+      return 's';
+    case '5':
+    case '6':
+      return 'xs';
+    default:
+      throw new Error(`sinch-title: invalid level value: ${level}`);
+  }
 };

package/toast/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchToastType = 'info' | 'warn' | 'error' | 'success';
-export declare type TSinchToastElement = HTMLElement & {
+export type TSinchToastType = 'info' | 'warn' | 'error' | 'success';
+export type TSinchToastElement = HTMLElement & {
     /** Type */
     type: TSinchToastType;
     /** Text */
@@ -16,7 +16,7 @@ export declare type TSinchToastElement = HTMLElement & {
     /** Persistent, i.e. doesn't automatically dissapear after 5s */
     setAttribute(name: 'persistent', value: ''): void;
 };
-export declare type TSinchToastReact = TSinchElementReact<TSinchToastElement> & {
+export type TSinchToastReact = TSinchElementReact<TSinchToastElement> & {
     /** Type */
     type: TSinchToastType;
     /** Text */

package/toast/utils.d.ts

@@ -1,5 +1,5 @@
 import type { TSinchToastType } from './types';
 export declare const typeValues: readonly TSinchToastType[];
-declare type TAssertType = (value: string | null) => asserts value is TSinchToastType;
+type TAssertType = (value: string | null) => asserts value is TSinchToastType;
 export declare const assertType: TAssertType;
 export {};

package/toast-manager/index.js

@@ -101,7 +101,6 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
       this.#onAnimateRemove(item, removeIndex);
       ++removeIndex;
     }
-
     let addIndex = 0;
     for (const item of slotItems) {
       if (this.#map.has(item)) {

package/toast-manager/types.d.ts

@@ -1,7 +1,7 @@
 import type { TRect, TSinchElementReact } from '../types';
-export declare type TSinchToastManagerElement = HTMLElement & {
+export type TSinchToastManagerElement = HTMLElement & {
     readonly containerRect: TRect;
     nthActionRect: (nth: number) => TRect | null;
     nthCloseRect: (nth: number) => TRect | null;
 };
-export declare type TSinchToastManagerReact = TSinchElementReact<TSinchToastManagerElement> & {};
+export type TSinchToastManagerReact = TSinchElementReact<TSinchToastManagerElement> & {};

package/toggle/types.d.ts

@@ -1,6 +1,6 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
-export declare type TSinchToggleElement = HTMLElement & {
+export type TSinchToggleElement = HTMLElement & {
     checked: boolean;
     small: boolean;
     labeled: boolean;
@@ -14,7 +14,7 @@ export declare type TSinchToggleElement = HTMLElement & {
     setAttribute(name: 'disabled', value: ''): void;
     setAttribute(name: 'text', value: string): void;
 };
-export declare type TSinchToggleReact = TSinchElementReact<TSinchToggleElement> & {
+export type TSinchToggleReact = TSinchElementReact<TSinchToggleElement> & {
     checked?: boolean;
     small?: boolean;
     labeled?: boolean;

package/tooltip/tooltip-state.d.ts

@@ -1,4 +1,4 @@
-declare type TTooltipStateOptions = {
+type TTooltipStateOptions = {
     showDelay: number;
     hideDelay: number;
     hideAnimationDuration: number;

package/tooltip/types.d.ts

@@ -1,6 +1,6 @@
 import type { TRect, TSinchElementReact } from '../types';
-export declare type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-export declare type TSinchTooltipElement = HTMLElement & {
+export type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export type TSinchTooltipElement = HTMLElement & {
     /** Text */
     text: string;
     /** @deprecated */
@@ -24,7 +24,7 @@ export declare type TSinchTooltipElement = HTMLElement & {
     /** Orientation, where it *points to* from origin */
     setAttribute(name: 'orientation', value: TSinchTooltipOrientation): void;
 };
-export declare type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
+export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
     /** Text */
     text: string;
     /** @deprecated */

package/tooltip/utils.d.ts

@@ -1,7 +1,7 @@
-import type { TSinchPopOrientation } from '../pop/types';
 import type { TSinchTooltipOrientation } from './types';
+import type { TSinchPopOrientation } from '../pop/types';
 export declare const orientationValues: readonly TSinchTooltipOrientation[];
 export declare const getPopOrientation: (orientation: TSinchTooltipOrientation) => TSinchPopOrientation;
-declare type TAssertOrientation = (value: string | null) => asserts value is TSinchTooltipOrientation;
+type TAssertOrientation = (value: string | null) => asserts value is TSinchTooltipOrientation;
 export declare const assertOrientation: TAssertOrientation;
 export {};

package/utils/context.d.ts

@@ -1,11 +1,11 @@
-export declare type TContextName = 'visibility' | 'keydown' | 'size';
-export declare type TContextKeydown = {
+export type TContextName = 'visibility' | 'keydown' | 'size';
+export type TContextKeydown = {
     code: string;
     preventDefault: () => void;
 };
-export declare type TContextVisibility = boolean;
-export declare type TContextSize = string;
-declare type TContextDataType = {
+export type TContextVisibility = boolean;
+export type TContextSize = string;
+type TContextDataType = {
     visibility: TContextVisibility;
     keydown: TContextKeydown;
     size: TContextSize;

package/utils/context.js

@@ -69,7 +69,6 @@ export const subscribeContext = ($el, name, cb, signal) => {
       detail: $el
     }));
   });
-
   $el.addEventListener(contextNameToEventMap[name], cb, {
     signal
   });

package/utils/countries.d.ts

@@ -1,4 +1,4 @@
-export declare type TSinchCountry = {
+export type TSinchCountry = {
     name: string;
     phoneCode: string;
 };

package/utils/dom.d.ts

@@ -11,7 +11,7 @@ export declare function getLiteralAttribute<T extends readonly string[]>($elemen
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: null): T[number] | null;
 export declare function getLiteralAttribute<T extends readonly string[]>($element: Element, literals: T, attrName: string, defaultValue: T[number]): T[number];
 export declare const clampNumber: (value: number, min: number, max: number) => number;
-declare type IntegerOptions = {
+type IntegerOptions = {
     min?: number;
     max?: number;
     defaultValue?: number | null;

package/utils/index.d.ts

@@ -7,3 +7,4 @@ export * from './slot';
 export * from './throttle';
 export * from './debounce';
 export * from './get-react-event-handler';
+export * from './markdown';

package/utils/index.js

@@ -6,4 +6,5 @@ export * from './rect';
 export * from './slot';
 export * from './throttle';
 export * from './debounce';
-export * from './get-react-event-handler';
+export * from './get-react-event-handler';
+export * from './markdown';

package/utils/markdown.d.ts

@@ -0,0 +1 @@
+export declare const parseMarkdown: (md: string) => string;