@nectary/components 2.8.7 → 2.9.0

package/tabs/index.js

@@ -1,80 +0,0 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-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;
-defineCustomElement('sinch-tabs', class extends NectaryElement {
-  #$slot;
-  #controller = null;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$slot = shadowRoot.querySelector('slot');
-  }
-  connectedCallback() {
-    this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
-    this.setAttribute('role', 'tablist');
-    this.#$slot.addEventListener('option-change', this.#onOptionChange, {
-      signal
-    });
-    this.#$slot.addEventListener('slotchange', this.#onSlotChange, {
-      signal
-    });
-    this.addEventListener('-change', this.#onChangeReactHandler, {
-      signal
-    });
-  }
-  disconnectedCallback() {
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  static get observedAttributes() {
-    return ['value'];
-  }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'value':
-        {
-          this.#onValueChange(newVal);
-          break;
-        }
-    }
-  }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-  nthOptionRect(index) {
-    const $el = this.#$slot.assignedElements()[index];
-    if ($el != null) {
-      return getRect($el);
-    }
-    return null;
-  }
-  #onSlotChange = () => {
-    this.#onValueChange(this.value);
-  };
-  #onOptionChange = e => {
-    e.stopPropagation();
-    this.#dispatchChangeEvent(e.detail);
-  };
-  #onValueChange(value) {
-    for (const $option of this.#$slot.assignedElements()) {
-      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'data-checked', isChecked);
-    }
-  }
-  #dispatchChangeEvent(value) {
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: value
-    }));
-  }
-  #onChangeReactHandler = e => {
-    getReactEventHandler(this, 'on-change')?.(e);
-  };
-});

package/tabs/types.d.ts

@@ -1,18 +0,0 @@
-import type { TRect, TSinchElementReact } from '../types';
-export type TSinchTabsElement = HTMLElement & {
-    /** Value */
-    value: string;
-    nthOptionRect(index: number): TRect | null;
-    /** Change value event */
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-};
-export type TSinchTabsReact = TSinchElementReact<TSinchTabsElement> & {
-    /** Value */
-    value: string;
-    /** Label that is used for a11y */
-    'aria-label': string;
-    /** Change value event */
-    'on-change'?: (e: CustomEvent<string>) => void;
-};

package/tabs/types.js

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

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

@@ -1,11 +0,0 @@
-import type { TSinchTabsIconOptionElement, TSinchTabsIconOptionReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-tabs-icon-option': TSinchTabsIconOptionReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-tabs-icon-option': TSinchTabsIconOptionElement;
-    }
-}

package/tabs-icon-option/index.js

@@ -1,79 +0,0 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, 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;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)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::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}#button:disabled{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)}::slotted(*){display:block}</style><sinch-tooltip id="tooltip"><button id="button" tabindex="0"><slot name="icon"></slot></button></sinch-tooltip>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs-icon-option', class extends NectaryElement {
-  #$button;
-  #$tooltip;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: true
-    });
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector('#button');
-    this.#$tooltip = shadowRoot.querySelector('#tooltip');
-  }
-  connectedCallback() {
-    this.role = 'tab';
-    this.#$button.addEventListener('click', this.#onClick);
-  }
-  disconnectedCallback() {
-    this.#$button.removeEventListener('click', this.#onClick);
-  }
-  static get observedAttributes() {
-    return ['data-checked', 'disabled', 'aria-label'];
-  }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (isAttrEqual(oldVal, newVal)) {
-      return;
-    }
-    switch (name) {
-      case 'data-checked':
-        {
-          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
-          break;
-        }
-      case 'disabled':
-        {
-          const isDisabled = isAttrTrue(newVal);
-          this.#$button.disabled = isDisabled;
-          updateBooleanAttribute(this, name, isDisabled);
-          break;
-        }
-      case 'aria-label':
-        {
-          updateAttribute(this.#$tooltip, 'text', newVal);
-          break;
-        }
-    }
-  }
-  get focusable() {
-    return true;
-  }
-  focus() {
-    this.#$button.focus();
-  }
-  blur() {
-    this.#$button.blur();
-  }
-  #onClick = e => {
-    e.stopPropagation();
-    this.dispatchEvent(new CustomEvent('option-change', {
-      bubbles: true,
-      detail: this.value
-    }));
-  };
-});

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

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

package/tabs-icon-option/types.js

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

package/tabs-option/index.d.ts

@@ -1,12 +0,0 @@
-import '../text';
-import type { TSinchTabsOptionElement, TSinchTabsOptionReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-tabs-option': TSinchTabsOptionReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-tabs-option': TSinchTabsOptionElement;
-    }
-}

package/tabs-option/index.js

@@ -1,86 +0,0 @@
-import '../text';
-import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrEqual, 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;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)}#button:hover{background-color:var(--sinch-comp-tab-color-default-background-hover)}#button:focus-visible::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}#button:disabled{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)}#text{flex-shrink:1;flex-basis:auto;min-width:0;--sinch-comp-text-font:var(--sinch-comp-tab-font-label)}::slotted(*){display:block}</style><button id="button" tabindex="0"><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 {
-  #$button;
-  #$text;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow({
-      delegatesFocus: true
-    });
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$button = shadowRoot.querySelector('#button');
-    this.#$text = shadowRoot.querySelector('#text');
-  }
-  connectedCallback() {
-    this.role = 'tab';
-    this.#$button.addEventListener('click', this.#onClick);
-  }
-  disconnectedCallback() {
-    this.#$button.removeEventListener('click', this.#onClick);
-  }
-  static get observedAttributes() {
-    return ['data-checked', 'disabled', 'text'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (isAttrEqual(oldVal, newVal)) {
-      return;
-    }
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'data-checked':
-        {
-          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
-          break;
-        }
-      case 'disabled':
-        {
-          const isDisabled = isAttrTrue(newVal);
-          this.#$button.disabled = isDisabled;
-          updateBooleanAttribute(this, name, isDisabled);
-          break;
-        }
-    }
-  }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  get focusable() {
-    return true;
-  }
-  focus() {
-    this.#$button.focus();
-  }
-  blur() {
-    this.#$button.blur();
-  }
-  #onClick = e => {
-    e.stopPropagation();
-    this.dispatchEvent(new CustomEvent('option-change', {
-      bubbles: true,
-      detail: this.value
-    }));
-  };
-});

package/tabs-option/types.d.ts

@@ -1,25 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchTabsOptionElement = HTMLElement & {
-    /** Value */
-    value: string;
-    /** Text */
-    text: string;
-    /** Disabled */
-    disabled: boolean;
-    /** Value */
-    setAttribute(name: 'value', value: string): void;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Disabled */
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export type TSinchTabsOptionReact = TSinchElementReact<TSinchTabsOptionElement> & {
-    /** Value */
-    value: string;
-    /** Text */
-    text: string;
-    /** Label that is used for a11y */
-    'aria-label': string;
-    /** Disabled */
-    disabled?: boolean;
-};

package/tabs-option/types.js

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

package/tag/index.d.ts

@@ -1,12 +0,0 @@
-import '../text';
-import type { TSinchTagElement, TSinchTagReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-tag': TSinchTagReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-tag': TSinchTagElement;
-    }
-}

package/tag/index.js

@@ -1,84 +0,0 @@
-import '../text';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#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-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><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="s" ellipsis></sinch-text></div>';
-import { getTagColorBg, getTagColorFg } from './utils';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-tag', class extends NectaryElement {
-  #$text;
-  #$wrapper;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$wrapper = shadowRoot.querySelector('#wrapper');
-    this.#$text = shadowRoot.querySelector('#text');
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#updateColor();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-  }
-  get color() {
-    return getAttribute(this, 'color');
-  }
-  set color(value) {
-    updateAttribute(this, 'color', value);
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  get small() {
-    return getBooleanAttribute(this, 'small');
-  }
-  set small(isSmall) {
-    updateBooleanAttribute(this, 'small', isSmall);
-  }
-  static get observedAttributes() {
-    return ['text', 'color', 'small'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (isAttrEqual(oldVal, newVal)) {
-      return;
-    }
-    switch (name) {
-      case 'color':
-        {
-          this.#updateColor();
-          break;
-        }
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'small':
-        {
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
-          break;
-        }
-    }
-  }
-  #updateColor() {
-    if (!this.isDomConnected) {
-      return;
-    }
-    const colorName = this.color;
-    if (colorName !== null && colorName.length > 0) {
-      const bg = getTagColorBg(colorName);
-      const fg = getTagColorFg(colorName);
-      this.#$wrapper.style.setProperty('background-color', bg);
-      this.#$wrapper.style.setProperty('--sinch-global-color-text', fg);
-      this.#$wrapper.style.setProperty('--sinch-global-color-icon', fg);
-    } else {
-      this.#$wrapper.style.removeProperty('background-color');
-      this.#$wrapper.style.removeProperty('--sinch-global-color-text');
-      this.#$wrapper.style.removeProperty('--sinch-global-color-icon');
-    }
-  }
-});

package/tag/types.d.ts

@@ -1,23 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchTagElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Color, gray by default */
-    color: string | null;
-    /** Small */
-    small: boolean;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Color, gray by default */
-    setAttribute(name: 'color', value: string): void;
-    /** Small */
-    setAttribute(name: 'small', value: ''): void;
-};
-export type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
-    /** Text */
-    text: string;
-    /** Color, gray by default */
-    color?: string;
-    /** Small */
-    small?: boolean;
-};

package/tag/types.js

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

package/tag/utils.d.ts

@@ -1,2 +0,0 @@
-export declare const getTagColorBg: (id: string) => string;
-export declare const getTagColorFg: (id: string) => string;

package/tag/utils.js

@@ -1,6 +0,0 @@
-export const getTagColorBg = id => {
-  return `var(--sinch-comp-tag-color-${id}-background)`;
-};
-export const getTagColorFg = id => {
-  return `var(--sinch-comp-tag-color-${id}-foreground)`;
-};

package/text/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchTextElement, TSinchTextReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-text': TSinchTextReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-text': TSinchTextElement;
-    }
-}

package/text/index.js

@@ -1,64 +0,0 @@
-import { defineCustomElement, getBooleanAttribute, updateBooleanAttribute, NectaryElement, getLiteralAttribute, updateLiteralAttribute, isAttrTrue, isAttrEqual } from '../utils';
-const templateHTML = '<style>:host{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)}: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([ellipsis]){overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--sinch-global-text-white-space:nowrap}</style><slot></slot>';
-import { typeValues } from './utils';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-text', class extends NectaryElement {
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-  }
-  connectedCallback() {
-    this.#updateRole();
-  }
-  static get observedAttributes() {
-    return ['inline', 'ellipsis', 'emphasized'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (isAttrEqual(oldVal, newVal)) {
-      return;
-    }
-    switch (name) {
-      case 'inline':
-        {
-          this.#updateRole();
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
-          break;
-        }
-      case 'ellipsis':
-      case 'emphasized':
-        {
-          updateBooleanAttribute(this, name, isAttrTrue(newVal));
-          break;
-        }
-    }
-  }
-  get type() {
-    return getLiteralAttribute(this, typeValues, 'type');
-  }
-  set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
-  }
-  set inline(isInline) {
-    updateBooleanAttribute(this, 'inline', isInline);
-  }
-  get inline() {
-    return getBooleanAttribute(this, 'inline');
-  }
-  set ellipsis(isEllipsis) {
-    updateBooleanAttribute(this, 'ellipsis', isEllipsis);
-  }
-  get ellipsis() {
-    return getBooleanAttribute(this, 'ellipsis');
-  }
-  set emphasized(isEmphasized) {
-    updateBooleanAttribute(this, 'emphasized', isEmphasized);
-  }
-  get emphasized() {
-    return getBooleanAttribute(this, 'emphasized');
-  }
-  #updateRole() {
-    this.setAttribute('role', getBooleanAttribute(this, 'inline') ? 'text' : 'paragraph');
-  }
-});

package/text/types.d.ts

@@ -1,30 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export type TSinchTextType = 'm' | 's' | 'xs' | 'xxs';
-export type TSinchTextElement = HTMLElement & {
-    /** Type */
-    type: TSinchTextType;
-    /** Block (“paragraph”, default) or inline (“span”) */
-    inline: boolean;
-    /** Emphasized */
-    emphasized: boolean;
-    /** Cuts the long text with “…” ellipsis */
-    ellipsis: boolean;
-    /** Type */
-    setAttribute(name: 'type', value: TSinchTextType): void;
-    /** Block (“paragraph”, default) or inline (“span”) */
-    setAttribute(name: 'inline', value: ''): void;
-    /** Emphasized */
-    setAttribute(name: 'emphasized', value: ''): void;
-    /** Cuts the long text with “…” ellipsis */
-    setAttribute(name: 'ellipsis', value: ''): void;
-};
-export type TSinchTextReact = TSinchElementReact<TSinchTextElement> & {
-    /** Type */
-    type: TSinchTextType;
-    /** Block (“paragraph”, default) or inline (“span”) */
-    inline?: boolean;
-    /** Emphasized */
-    emphasized?: boolean;
-    /** Cuts the long text with “…” ellipsis */
-    ellipsis?: boolean;
-};

package/text/types.js

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

package/text/utils.d.ts

@@ -1,2 +0,0 @@
-import type { TSinchTextType } from './types';
-export declare const typeValues: readonly TSinchTextType[];

package/text/utils.js

@@ -1 +0,0 @@
-export const typeValues = ['m', 's', 'xs', 'xxs'];

package/textarea/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchTextareaElement, TSinchTextareaReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-textarea': TSinchTextareaReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-textarea': TSinchTextareaElement;
-    }
-}