@nectary/components 0.39.0 → 0.40.0

package/tabs/index.js

@@ -1,16 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$slot, _onOptionKeyDown, _onSlotChange, _onOptionChange, _onValueChange, _dispatchChangeEvent, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _getEnabledRadioElements, _onChangeReactHandler;
-
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
 import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row;height:44px;width:100%;box-sizing:border-box}</style><div id="wrapper"><slot></slot></div>';
 
@@ -20,117 +7,29 @@ const findSelectedOption = elements => {
 
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _getEnabledRadioElements = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-tabs', class extends NectaryElement {
+  #$slot;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _getEnabledRadioElements);
-
-    _classPrivateMethodInitSpec(this, _getPrevOption);
-
-    _classPrivateMethodInitSpec(this, _getNextOption);
-
-    _classPrivateMethodInitSpec(this, _getLastOption);
-
-    _classPrivateMethodInitSpec(this, _getFirstOption);
-
-    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
-
-    _classPrivateMethodInitSpec(this, _onValueChange);
-
-    _classPrivateFieldInitSpec(this, _$slot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onOptionKeyDown, {
-      writable: true,
-      value: e => {
-        switch (e.code) {
-          case 'ArrowUp':
-          case 'ArrowLeft':
-            {
-              e.preventDefault();
-
-              const $option = _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this);
-
-              if ($option !== null) {
-                $option.focus();
-
-                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
-              }
-
-              break;
-            }
-
-          case 'ArrowDown':
-          case 'ArrowRight':
-            {
-              e.preventDefault();
-
-              const $option = _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this);
-
-              if ($option !== null) {
-                $option.focus();
-
-                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option.value);
-              }
-
-              break;
-            }
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onSlotChange, {
-      writable: true,
-      value: () => {
-        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onOptionChange, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, e.detail);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+    this.#$slot = shadowRoot.querySelector('slot');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tablist');
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$slot.addEventListener('keydown', this.#onOptionKeyDown);
+    this.#$slot.addEventListener('option-change', this.#onOptionChange);
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
+    this.addEventListener('-change', this.#onChangeReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$slot).removeEventListener('keydown', _classPrivateFieldGet(this, _onOptionKeyDown));
-
-    _classPrivateFieldGet(this, _$slot).removeEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
-
-    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$slot.removeEventListener('keydown', this.#onOptionKeyDown);
+    this.#$slot.removeEventListener('option-change', this.#onOptionChange);
+    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
   }
 
   static get observedAttributes() {
@@ -153,78 +52,117 @@ defineCustomElement('sinch-tabs', (_$slot = new WeakMap(), _onOptionKeyDown = ne
     switch (name) {
       case 'value':
         {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal);
-
+          this.#onValueChange(newVal);
           break;
         }
     }
   }
 
-}));
+  #onOptionKeyDown = e => {
+    switch (e.code) {
+      case 'ArrowUp':
+      case 'ArrowLeft':
+        {
+          e.preventDefault();
+          const $option = this.#getPrevOption();
+
+          if ($option !== null) {
+            $option.focus();
+            this.#dispatchChangeEvent($option.value);
+          }
 
-function _onValueChange2(value) {
-  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-    const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-    updateBooleanAttribute($option, 'checked', isChecked);
-  }
-}
-
-function _dispatchChangeEvent2(value) {
-  this.dispatchEvent(new CustomEvent('change', {
-    detail: value,
-    bubbles: true
-  }));
-  this.dispatchEvent(new CustomEvent('-change', {
-    detail: value
-  }));
-}
-
-function _getFirstOption2() {
-  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-    if ($option.disabled !== true) {
-      return $option;
+          break;
+        }
+
+      case 'ArrowDown':
+      case 'ArrowRight':
+        {
+          e.preventDefault();
+          const $option = this.#getNextOption();
+
+          if ($option !== null) {
+            $option.focus();
+            this.#dispatchChangeEvent($option.value);
+          }
+
+          break;
+        }
+    }
+  };
+  #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, 'checked', isChecked);
     }
   }
 
-  return null;
-}
+  #dispatchChangeEvent(value) {
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: value,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  }
 
-function _getLastOption2() {
-  for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements().reverse()) {
-    if ($option.disabled !== true) {
-      return $option;
+  #getFirstOption() {
+    for (const $option of this.#$slot.assignedElements()) {
+      if ($option.disabled !== true) {
+        return $option;
+      }
     }
+
+    return null;
   }
 
-  return null;
-}
+  #getLastOption() {
+    for (const $option of this.#$slot.assignedElements().reverse()) {
+      if ($option.disabled !== true) {
+        return $option;
+      }
+    }
 
-function _getNextOption2() {
-  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+    return null;
+  }
 
-  const $selectedOption = findSelectedOption($options);
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+  #getNextOption() {
+    const $options = this.#getEnabledRadioElements();
+    const $selectedOption = findSelectedOption($options);
+    const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
 
-  if (currentIndex < 0) {
-    return _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
-  }
+    if (currentIndex < 0) {
+      return this.#getFirstOption();
+    }
 
-  return $options[(currentIndex + 1) % $options.length];
-}
+    return $options[(currentIndex + 1) % $options.length];
+  }
 
-function _getPrevOption2() {
-  const $options = _classPrivateMethodGet(this, _getEnabledRadioElements, _getEnabledRadioElements2).call(this);
+  #getPrevOption() {
+    const $options = this.#getEnabledRadioElements();
+    const $selectedOption = findSelectedOption($options);
+    const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
 
-  const $selectedOption = findSelectedOption($options);
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+    if (currentIndex < 0) {
+      return this.#getLastOption();
+    }
 
-  if (currentIndex < 0) {
-    return _classPrivateMethodGet(this, _getLastOption, _getLastOption2).call(this);
+    return $options[(currentIndex - 1 + $options.length) % $options.length];
   }
 
-  return $options[(currentIndex - 1 + $options.length) % $options.length];
-}
+  #getEnabledRadioElements() {
+    return this.#$slot.assignedElements().filter(opt => opt.disabled !== true);
+  }
 
-function _getEnabledRadioElements2() {
-  return _classPrivateFieldGet(this, _$slot).assignedElements().filter(opt => opt.disabled !== true);
-}
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/tabs-option/index.js

@@ -1,57 +1,26 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$button, _$label, _onClick;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}:host()>*{pointer-events:none}#wrapper{display:flex;flex-direction:row;align-items:center;gap:12px;position:relative;width:100%;height:42px;padding:8px 20px;box-sizing:border-box;box-shadow:0 1px 0 0 var(--sinch-color-stormy-100);color:var(--sinch-color-stormy-500);background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#content{font:var(--sinch-font-title-s);flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host([checked]:not([checked=false])) #wrapper{box-shadow:0 2px 0 0 var(--sinch-color-stormy-500)}#button{all:initial;position:absolute;left:0;top:0;box-sizing:border-box;width:100%;height:100%;cursor:pointer}#button:disabled{cursor:unset}:host([disabled]:not([disabled=false])) #wrapper{color:var(--sinch-color-stormy-100);--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><label for="input" id="content"></label><button id="button" type="radio"/></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tabs-option', (_$button = new WeakMap(), _$label = new WeakMap(), _onClick = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-tabs-option', class extends NectaryElement {
+  #$button;
+  #$label;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$button, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        this.dispatchEvent(new CustomEvent('option-change', {
-          bubbles: true,
-          detail: this.value
-        }));
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#content'));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$label = shadowRoot.querySelector('#content');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tab');
-
-    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onClick));
+    this.#$button.addEventListener('click', this.#onClick);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onClick));
+    this.#$button.removeEventListener('click', this.#onClick);
   }
 
   static get observedAttributes() {
@@ -94,7 +63,7 @@ defineCustomElement('sinch-tabs-option', (_$button = new WeakMap(), _$label = ne
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
@@ -107,7 +76,7 @@ defineCustomElement('sinch-tabs-option', (_$button = new WeakMap(), _$label = ne
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$button).disabled = isDisabled;
+          this.#$button.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
@@ -115,11 +84,18 @@ defineCustomElement('sinch-tabs-option', (_$button = new WeakMap(), _$label = ne
   }
 
   focus() {
-    _classPrivateFieldGet(this, _$button).focus();
+    this.#$button.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$button).blur();
+    this.#$button.blur();
   }
 
-}));
+  #onClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      bubbles: true,
+      detail: this.value
+    }));
+  };
+});

package/tag/index.d.ts

@@ -1,4 +1,3 @@
-import '../icons/cancel';
 import '../text';
 import type { TSinchTagElement, TSinchTagReact } from './types';
 declare global {

package/tag/index.js

@@ -1,40 +1,31 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
-import '../icons/cancel';
 import '../text';
-import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:4px;width:100%;height:24px;padding:2px 8px;border-radius:12px;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-400);--sinch-size-icon:16px}:host([category=candy])>#wrapper{background-color:var(--sinch-color-candy-200)}:host([category=bolt])>#wrapper{background-color:var(--sinch-color-bolt-200)}:host([category=aqua])>#wrapper{background-color:var(--sinch-color-aqua-200)}:host([category=grass])>#wrapper{background-color:var(--sinch-color-grass-200)}:host([category=berry])>#wrapper{background-color:var(--sinch-color-berry-200)}:host([category=orange])>#wrapper{background-color:var(--sinch-color-orange-200)}:host([category=night])>#wrapper{background-color:var(--sinch-color-night-200)}:host([category=mud])>#wrapper{background-color:var(--sinch-color-mud-200)}:host([category=dirt])>#wrapper{background-color:var(--sinch-color-dirt-200)}:host([inverted]:not([inverted=false]))>#wrapper{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-snow-100)}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px;--sinch-size-icon:14px}#text{flex:1}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text><slot name="close"></slot></div>';
-import { assertCategoryValue, categoryValues } from './utils';
+import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass } from '../utils';
+import { assertColorNameValue, colorMap, colorNameValues, NO_COLOR } from '../utils/colors';
+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:24px;padding:0 12px;border-radius:12px;color:var(--sinch-color-text-default);box-sizing:border-box;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:16px}#wrapper.no-color{background-color:var(--sinch-color-snow-500)}#wrapper.inverted{color:var(--sinch-color-text-inverted);--sinch-color-icon:var(--sinch-color-snow-100)}#text{flex:1}:host([small]:not([small=false])) #wrapper{height:20px;border-radius:10px;padding:0 8px}::slotted(*){margin-left:-4px}:host([small]:not([small=false])) ::slotted(*){margin-left:-2px}</style><div id="wrapper"><slot name="icon"></slot><sinch-text id="text" type="xs" ellipsis></sinch-text></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-tag', class extends NectaryElement {
+  #$text;
+  #$wrapper;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    this.#$text = shadowRoot.querySelector('#text');
+  }
 
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+  connectedCallback() {
+    this.#updateColor();
   }
 
-  get category() {
-    return getLiteralAttribute(this, categoryValues, 'category', null);
+  get color() {
+    return getLiteralAttribute(this, colorNameValues, 'color', null);
   }
 
-  set category(value) {
-    updateLiteralAttribute(this, categoryValues, 'category', value);
+  set color(value) {
+    updateLiteralAttribute(this, colorNameValues, 'color', value);
   }
 
   get text() {
@@ -45,14 +36,6 @@ defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends NectaryE
     updateAttribute(this, 'text', value);
   }
 
-  get inverted() {
-    return getBooleanAttribute(this, 'inverted');
-  }
-
-  set inverted(isInverted) {
-    updateBooleanAttribute(this, 'inverted', isInverted);
-  }
-
   get small() {
     return getBooleanAttribute(this, 'small');
   }
@@ -62,23 +45,39 @@ defineCustomElement('sinch-tag', (_$text = new WeakMap(), class extends NectaryE
   }
 
   static get observedAttributes() {
-    return ['text', 'category'];
+    return ['text', 'color'];
   }
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
-      case 'category':
+      case 'color':
         {
-          assertCategoryValue(newVal);
+          assertColorNameValue(newVal);
+          this.#updateColor();
           break;
         }
 
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
     }
   }
 
-}));
+  #updateColor() {
+    const colorName = this.color ?? NO_COLOR;
+    const {
+      value,
+      isInverted
+    } = colorMap[colorName];
+
+    if (value !== NO_COLOR) {
+      this.#$wrapper.style.backgroundColor = `var(--sinch-color-${value})`;
+    }
+
+    setClass(this.#$wrapper, 'no-color', value === NO_COLOR);
+    setClass(this.#$wrapper, 'inverted', isInverted);
+  }
+
+});

package/tag/types.d.ts

@@ -1,18 +1,24 @@
 import type { TSinchElementReact } from '../types';
-export declare type TSinchTagCategory = 'candy' | 'bolt' | 'aqua' | 'grass' | 'berry' | 'orange' | 'night' | 'mud' | 'dirt';
+import type { TSinchColorName } from '../utils/colors';
 export declare type TSinchTagElement = HTMLElement & {
-    category: TSinchTagCategory | null;
+    /** Text */
     text: string;
-    inverted: boolean;
+    /** Color, gray by default */
+    color: TSinchColorName | null;
+    /** Small */
     small: boolean;
-    setAttribute(name: 'category', value: TSinchTagCategory): void;
+    /** Text */
     setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'inverted', value: ''): void;
+    /** Color, gray by default */
+    setAttribute(name: 'color', value: TSinchColorName): void;
+    /** Small */
     setAttribute(name: 'small', value: ''): void;
 };
 export declare type TSinchTagReact = TSinchElementReact<TSinchTagElement> & {
-    category?: TSinchTagCategory;
+    /** Text */
     text: string;
-    inverted?: boolean;
+    /** Color, gray by default */
+    color?: TSinchColorName;
+    /** Small */
     small?: boolean;
 };