@nectary/components 0.42.0 → 0.43.0

package/action-menu/index.js

@@ -1,6 +1,5 @@
 import { isSinchActionMenuOption } from '../action-menu-option/utils';
-import { attrValueToPixels, defineCustomElement, getBooleanAttribute, getIntegerAttribute, NectaryElement, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
-import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getBooleanAttribute, getIntegerAttribute, NectaryElement, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}</style><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
 const template = document.createElement('template');

package/card-container/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:24px;box-sizing:border-box;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);font:var(--sinch-font-body)}#scroll{overflow:auto;height:100%}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{height:100%;padding:20px 0;box-sizing:border-box;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-700);font:var(--sinch-font-body)}#scroll{overflow:auto;height:100%;box-sizing:border-box;padding:4px 24px}</style><div id="wrapper"><div id="scroll"><slot></slot></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-card-container', class extends NectaryElement {

package/color-menu/index.d.ts

@@ -1,14 +1,14 @@
 import '../color-swatch';
 import '../tooltip';
 import '../icons/check';
-import type { TSinchSelectMenuElement, TSinchSelectMenuReact } from './types';
+import type { TSinchColorMenuElement, TSinchColorMenuReact } from './types';
 declare global {
     namespace JSX {
         interface IntrinsicElements {
-            'sinch-color-menu': TSinchSelectMenuReact;
+            'sinch-color-menu': TSinchColorMenuReact;
         }
     }
     interface HTMLElementTagNameMap {
-        'sinch-color-menu': TSinchSelectMenuElement;
+        'sinch-color-menu': TSinchColorMenuElement;
     }
 }

package/color-menu/index.js

@@ -3,8 +3,7 @@ import '../tooltip';
 import '../icons/check';
 import { getSwatchColorFg } from '../color-swatch/utils';
 import { lightColorNames, darkColorNames, vibrantColorNames } from '../theme/colors';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
-import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+import { attrValueToPixels, defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, getCsvSet, getIntegerAttribute, getReactEventHandler, getRect, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateIntegerAttribute } from '../utils';
 const optionTemplateHTML = '<div class="option" role="option"><sinch-tooltip inverted class="tooltip"><div class="swatch-wrapper"><sinch-color-swatch class="swatch"></sinch-color-swatch><sinch-icon-check class="check"></sinch-icon-check></div></sinch-tooltip></div>';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{display:flex;flex-direction:row;flex-wrap:wrap;padding:4px 10px;overflow-y:auto}#listbox:empty{display:none}.option{padding:12px 6px;--sinch-color-icon:var(--sinch-color-stormy-500)}.swatch-wrapper{position:relative;cursor:pointer;width:32px;height:32px}.swatch-wrapper::after{content:"";position:absolute;width:34px;height:34px;inset:-3px;border:2px solid transparent;border-radius:50%;pointer-events:none}.option[data-selected]:not([data-checked]) .swatch-wrapper::after{border-color:var(--sinch-color-border-focus)}.check{display:none;position:absolute;left:4px;top:4px;pointer-events:none;--sinch-size-icon:24px}.option[data-checked] .check{display:block}</style><div id="listbox" role="presentation"></div>';
 import { getParentOption } from './utils';

package/color-menu/types.d.ts

@@ -1,5 +1,5 @@
 import type { TRect, TSinchElementReact } from '../types';
-export declare type TSinchSelectMenuElement = HTMLElement & {
+export declare type TSinchColorMenuElement = HTMLElement & {
     /** Value */
     value: string;
     /** How many rows to show and scroll the rest */
@@ -20,7 +20,7 @@ export declare type TSinchSelectMenuElement = HTMLElement & {
     /** How many cols to show and scroll the rest */
     setAttribute(name: 'cols', value: string): void;
 };
-export declare type TSinchSelectMenuReact = TSinchElementReact<TSinchSelectMenuElement> & {
+export declare type TSinchColorMenuReact = TSinchElementReact<TSinchColorMenuElement> & {
     /** Value */
     value: string;
     /** How many rows to show and scroll the rest */

package/dialog/index.js

@@ -1,10 +1,10 @@
-import dialogPolyfill from 'dialog-polyfill';
 import '../icon-button';
 import '../icons/close';
 import '../stop-events';
 import '../title';
+import dialogPolyfill from 'dialog-polyfill';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttrTrue, updateAttribute, getReactEventHandler, NectaryElement, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
+const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px 0;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:12px;padding:0 24px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh);padding:4px 24px}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:20px;padding:0 24px}#close{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-dialog', class extends NectaryElement {

package/emoji/index.d.ts

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

package/emoji/index.js

@@ -0,0 +1,47 @@
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents}#image{pointer-events:none;width:var(--sinch-size-icon,48px);height:var(--sinch-size-icon,48px)}</style><img id="image" src="" alt="" loading="lazy"/>';
+import { getEmojiUrl } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-emoji', class extends NectaryElement {
+  #$img;
+  #isConnected = false;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$img = shadowRoot.querySelector('#image');
+  }
+  connectedCallback() {
+    this.#isConnected = true;
+    this.#updateChar();
+  }
+  disconnectedCallback() {
+    this.#isConnected = false;
+  }
+  static get observedAttributes() {
+    return ['char'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'char':
+        {
+          this.#$img.alt = newVal ?? '';
+          this.#updateChar();
+          break;
+        }
+    }
+  }
+  set char(value) {
+    updateAttribute(this, 'char', value);
+  }
+  get char() {
+    return getAttribute(this, 'char', '');
+  }
+  #updateChar() {
+    if (!this.#isConnected) {
+      return;
+    }
+    this.#$img.src = getEmojiUrl(this, this.char);
+  }
+});

package/emoji/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchEmojiElement = HTMLElement & {
+    /** Emoji character */
+    char: string;
+    /** Emoji character */
+    setAttribute(name: 'char', value: string): void;
+};
+export declare type TSinchEmojiReact = TSinchElementReact<TSinchEmojiElement> & {
+    /** Emoji character */
+    char: string;
+};

package/emoji/types.js

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

package/emoji/utils.d.ts

@@ -0,0 +1 @@
+export declare const getEmojiUrl: (root: Element, char: string | null) => string;

package/emoji/utils.js

@@ -0,0 +1,46 @@
+import { getCssVar } from '../utils';
+const vs16RegExp = /\uFE0F/g;
+const zeroWidthJoiner = String.fromCharCode(0x200d);
+const removeVS16s = rawEmoji => rawEmoji.indexOf(zeroWidthJoiner) < 0 ? rawEmoji.replace(vs16RegExp, '') : rawEmoji;
+function toCodePoints(unicodeSurrogates) {
+  const points = [];
+  let char = 0;
+  let previous = 0;
+  let i = 0;
+  while (i < unicodeSurrogates.length) {
+    char = unicodeSurrogates.charCodeAt(i++);
+    if (previous !== 0) {
+      points.push((0x10000 + (previous - 0xd800 << 10) + (char - 0xdc00)).toString(16));
+      previous = 0;
+    } else if (char > 0xd800 && char <= 0xdbff) {
+      previous = char;
+    } else {
+      points.push(char.toString(16));
+    }
+  }
+  return points;
+}
+
+let emojiUrl = null;
+export const getEmojiUrl = (root, char) => {
+  if (char === null || char.length === 0) {
+    return '';
+  }
+
+  if (emojiUrl === null) {
+    emojiUrl = getCssVar(root, '--sinch-emoji-src-url');
+    if (emojiUrl !== null) {
+      emojiUrl = emojiUrl.replaceAll('"', '').trim();
+    }
+  }
+  if (emojiUrl === null) {
+    return '';
+  }
+  let codepoints = toCodePoints(removeVS16s(char)).join('-');
+
+  if (codepoints === '1f441-fe0f-200d-1f5e8-fe0f') {
+    codepoints = '1f441-200d-1f5e8';
+  }
+
+  return emojiUrl.replace('%s', codepoints);
+};

package/emoji-picker/index.d.ts

@@ -0,0 +1,28 @@
+import '../input';
+import '../icon-button';
+import '../color-swatch';
+import '../color-menu';
+import '../popover';
+import '../tabs';
+import '../tabs-icon-option';
+import '../emoji';
+import '../icons/search';
+import '../icons/sentiment-satisfied';
+import '../icons/emoji-people';
+import '../icons/emoji-nature';
+import '../icons/emoji-food-beverage';
+import '../icons/emoji-objects';
+import '../icons/emoji-transportation';
+import '../icons/emoji-events';
+import '../icons/emoji-symbols';
+import type { TSinchEmojiPickerElement, TSinchEmojiPickerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-emoji-picker': TSinchEmojiPickerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-emoji-picker': TSinchEmojiPickerElement;
+    }
+}

package/emoji-picker/index.js

@@ -0,0 +1,319 @@
+import '../input';
+import '../icon-button';
+import '../color-swatch';
+import '../color-menu';
+import '../popover';
+import '../tabs';
+import '../tabs-icon-option';
+import '../emoji';
+import '../icons/search';
+import '../icons/sentiment-satisfied';
+import '../icons/emoji-people';
+import '../icons/emoji-nature';
+import '../icons/emoji-food-beverage';
+import '../icons/emoji-objects';
+import '../icons/emoji-transportation';
+import '../icons/emoji-events';
+import '../icons/emoji-symbols';
+import { defineCustomElement, dispatchContextConnectEvent, dispatchContextDisconnectEvent, getAttribute, getBooleanAttribute, NectaryElement, updateAttribute, updateBooleanAttribute, getReactEventHandler, getRect } from '../utils';
+import dataJson from './data.json';
+const templateHTML = '<style>:host{display:block}#wrapper{width:384px;max-height:504px;display:flex;flex-direction:column;gap:8px;padding:12px 0}#toolbar{display:flex;gap:8px;padding:0 12px}#input{flex:1}#list-wrapper{overflow-y:auto;overflow-x:hidden;width:384px;box-sizing:border-box;scrollbar-gutter:stable}#list{display:flex;flex-wrap:wrap;gap:8px;padding:4px 12px 0;width:384px;box-sizing:border-box}</style><div id="wrapper"><div id="toolbar"><sinch-input id="input" aria-label="Search emojis"><sinch-icon-search slot="icon"></sinch-icon-search></sinch-input><sinch-popover id="skin-popover" orientation="bottom-left" aria-label="Emoji skin tone select"><sinch-icon-button id="skin-button" slot="target" aria-label="Select emoji skin tones"><sinch-color-swatch id="skin-swatch" slot="icon" name="skin-tone-0"></sinch-color-swatch></sinch-icon-button><sinch-color-menu id="skin-menu" slot="content" cols="1" value="skin-tone-0" colors="skin-tone-0,skin-tone-10,skin-tone-20,skin-tone-30,skin-tone-40,skin-tone-50" aria-label="Emoji skin tone menu"></sinch-color-menu></sinch-popover></div><sinch-tabs id="tabs" aria-label="Emoji groups"></sinch-tabs><div id="list-wrapper"><div id="list"></div></div></div>';
+const groupIconTagNames = ['sinch-icon-sentiment-satisfied', 'sinch-icon-emoji-people', 'sinch-icon-emoji-nature', 'sinch-icon-emoji-food-beverage', 'sinch-icon-emoji-transportation', 'sinch-icon-emoji-events', 'sinch-icon-emoji-objects', 'sinch-icon-emoji-symbols'];
+const groupLabels = ['Emotions', 'People', 'Animals and nature', 'Food and drinks', 'Travel and places', 'Sports and activities', 'Objects', 'Symbols and flags'];
+const data = dataJson;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-emoji-picker', class extends NectaryElement {
+  #$tabs;
+  #$input;
+  #$skinPopover;
+  #$skinMenu;
+  #$skinSwatch;
+  #$skinButton;
+  #$list;
+  #controller = null;
+  #$sh;
+  #currentSkinTone = 0;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$sh = shadowRoot;
+    this.#$tabs = shadowRoot.querySelector('#tabs');
+    this.#$input = shadowRoot.querySelector('#input');
+    this.#$skinPopover = shadowRoot.querySelector('#skin-popover');
+    this.#$skinMenu = shadowRoot.querySelector('#skin-menu');
+    this.#$skinSwatch = shadowRoot.querySelector('#skin-swatch');
+    this.#$skinButton = shadowRoot.querySelector('#skin-button');
+    this.#$list = shadowRoot.querySelector('#list');
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.#$tabs.addEventListener('-change', this.#onTabsChange, {
+      signal
+    });
+    this.#$input.addEventListener('-change', this.#onSearchChange, {
+      signal
+    });
+    this.addEventListener('keydown', this.#onListboxKeyDown, {
+      signal
+    });
+    this.addEventListener('-keydown', this.#onContexKeydown, {
+      signal
+    });
+    this.#$skinButton.addEventListener('-click', this.#onSkinButtonClick, {
+      signal
+    });
+    this.#$skinPopover.addEventListener('-close', this.#onSkinPopoverClose, {
+      signal
+    });
+    this.#$skinMenu.addEventListener('-change', this.#onSkinMenuChange, {
+      signal
+    });
+    this.#$list.addEventListener('click', this.#onListClick, {
+      signal
+    });
+    this.addEventListener('-change', this.#onChangeReactHandler, {
+      signal
+    });
+    this.addEventListener('-visibility', this.#onContextVisibility, {
+      signal
+    });
+    dispatchContextConnectEvent(this, 'keydown');
+    dispatchContextConnectEvent(this, 'visibility');
+    this.#updateTabs();
+    this.#updateEmojis();
+  }
+  disconnectedCallback() {
+    dispatchContextDisconnectEvent(this, 'keydown');
+    dispatchContextDisconnectEvent(this, 'visibility');
+    this.#controller.abort();
+  }
+  get skinToneButtonRect() {
+    return getRect(this.#$skinButton);
+  }
+  get searchInputRect() {
+    return getRect(this.#$input);
+  }
+  nthSkinToneRect(index) {
+    return this.#$skinMenu.nthItemRect(index);
+  }
+  nthTabRect(index) {
+    return this.#$tabs.nthOptionRect(index);
+  }
+  nthEmojiRect(index) {
+    const $el = this.#$list.children[index];
+    return $el != null ? getRect($el) : null;
+  }
+  #onListClick = e => {
+    const value = e.target.getAttribute('data-value');
+    if (value === null) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: value
+    }));
+  };
+  #onContexKeydown = e => {
+    this.#handleKeydown(e.detail);
+  };
+  #onContextVisibility = e => {
+    if (e.detail) {
+    } else {
+    }
+  };
+  #onListboxKeyDown = e => {
+    this.#handleKeydown(e);
+  };
+  #handleKeydown(e) {
+    switch (e.code) {
+      case 'Space':
+      case 'Enter':
+        {
+          break;
+        }
+      case 'ArrowUp':
+        {
+          e.preventDefault();
+          break;
+        }
+      case 'ArrowDown':
+        {
+          e.preventDefault();
+          break;
+        }
+    }
+  }
+  #onTabsChange = e => {
+    const value = e.detail;
+    updateAttribute(this.#$tabs, 'value', value);
+    updateAttribute(this.#$input, 'value', '');
+    this.#updateEmojis();
+  };
+  #onSearchChange = e => {
+    const value = e.detail;
+    this.#$input.value = value;
+    if (value.length < 3) {
+      return;
+    }
+    updateAttribute(this.#$tabs, 'value', '');
+    this.#updateSearchEmojis();
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  get focusable() {
+    return true;
+  }
+  #getDocumentRoot() {
+    return Reflect.has(this.#$sh, 'createElement') ? this.#$sh : document;
+  }
+  #updateTabs() {
+    const doc = this.#getDocumentRoot();
+    const tabsFragment = document.createDocumentFragment();
+    const activeTab = data[0].name;
+    for (let i = 0; i < data.length; i++) {
+      const group = data[i];
+      const tabOption = doc.createElement('sinch-tabs-icon-option');
+      const icon = doc.createElement(groupIconTagNames[i]);
+      icon.setAttribute('slot', 'icon');
+      tabOption.setAttribute('value', group.name);
+      tabOption.setAttribute('aria-label', groupLabels[i]);
+      tabOption.appendChild(icon);
+      tabsFragment.appendChild(tabOption);
+    }
+    this.#$tabs.replaceChildren(tabsFragment);
+    updateAttribute(this.#$tabs, 'value', activeTab);
+  }
+  *#iterateSearchEmojis(searchValue, skinTone) {
+    for (const group of data) {
+      for (const entry of group.emojis) {
+        if (entry.label.includes(searchValue)) {
+          const hasSkins = entry.skins != null;
+          if (skinTone === 0 || !hasSkins) {
+            yield entry;
+          } else if (hasSkins) {
+            for (const skin of entry.skins) {
+              if (skinTone === skin.tone || Array.isArray(skin.tone) && skin.tone.includes(skinTone)) {
+                yield skin;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  *#iterateGroupEmojis(group, skinTone) {
+    for (const entry of group.emojis) {
+      const hasSkins = entry.skins != null;
+      if (skinTone === 0 || !hasSkins) {
+        yield entry;
+      } else if (hasSkins) {
+        for (const skin of entry.skins) {
+          if (skinTone === skin.tone || Array.isArray(skin.tone) && skin.tone.includes(skinTone)) {
+            yield skin;
+          }
+        }
+      }
+    }
+  }
+  #updateSearchEmojis() {
+    const searchValue = this.#$input.value;
+    if (searchValue.length < 3) {
+      return;
+    }
+    const doc = this.#getDocumentRoot();
+    const fragment = document.createDocumentFragment();
+    for (const entry of this.#iterateSearchEmojis(searchValue, this.#currentSkinTone)) {
+      const el = this.#createEmojiElement(doc, entry);
+      fragment.appendChild(el);
+    }
+    this.#$list.replaceChildren(fragment);
+    this.#$list.scrollTo(0, 0);
+  }
+  #updateEmojis() {
+    if (this.#isSearchMode()) {
+      return;
+    }
+    const activeGroup = getAttribute(this.#$tabs, 'value');
+    const group = data.find(group => group.name === activeGroup);
+    if (group == null) {
+      return;
+    }
+    const doc = this.#getDocumentRoot();
+    const fragment = document.createDocumentFragment();
+    for (const entry of this.#iterateGroupEmojis(group, this.#currentSkinTone)) {
+      const el = this.#createEmojiElement(doc, entry);
+      fragment.appendChild(el);
+    }
+    this.#$list.replaceChildren(fragment);
+    this.#$list.scrollTo(0, 0);
+  }
+  #onSkinButtonClick = () => {
+    updateBooleanAttribute(this.#$skinPopover, 'open', !getBooleanAttribute(this.#$skinPopover, 'open'));
+  };
+  #onSkinPopoverClose = () => {
+    updateBooleanAttribute(this.#$skinPopover, 'open', false);
+  };
+  #onSkinMenuChange = e => {
+    this.#$skinSwatch.name = e.detail;
+    this.#$skinMenu.value = e.detail;
+    switch (e.detail) {
+      case 'skin-tone-0':
+        {
+          this.#currentSkinTone = 0;
+          break;
+        }
+      case 'skin-tone-10':
+        {
+          this.#currentSkinTone = 1;
+          break;
+        }
+      case 'skin-tone-20':
+        {
+          this.#currentSkinTone = 2;
+          break;
+        }
+      case 'skin-tone-30':
+        {
+          this.#currentSkinTone = 3;
+          break;
+        }
+      case 'skin-tone-40':
+        {
+          this.#currentSkinTone = 4;
+          break;
+        }
+      case 'skin-tone-50':
+        {
+          this.#currentSkinTone = 5;
+          break;
+        }
+    }
+    this.#onSkinPopoverClose();
+    if (this.#isSearchMode()) {
+      this.#updateSearchEmojis();
+    } else {
+      this.#updateEmojis();
+    }
+  };
+  #isSearchMode() {
+    const activeTab = getAttribute(this.#$tabs, 'value');
+    return activeTab === null || activeTab.length === 0;
+  }
+  #createEmojiElement(doc, emoji) {
+    const btn = doc.createElement('sinch-icon-button');
+    const el = doc.createElement('sinch-emoji');
+    el.setAttribute('slot', 'icon');
+    el.setAttribute('char', emoji.emoji);
+    el.setAttribute('label', emoji.label);
+    btn.setAttribute('aria-label', emoji.label);
+    btn.setAttribute('small', '');
+    btn.setAttribute('data-value', emoji.emoji);
+    btn.appendChild(el);
+    return btn;
+  }
+});

package/emoji-picker/types.d.ts

@@ -0,0 +1,25 @@
+import type { TRect, TSinchElementReact } from '../types';
+export declare type TEmoji = {
+    emoji: string;
+    code: string;
+    label: string;
+    skins?: TEmoji[];
+    tone: number | number[];
+};
+export declare type TEmojiGroup = {
+    name: string;
+    emojis: TEmoji[];
+};
+export declare type TSinchEmojiPickerElement = HTMLElement & {
+    readonly skinToneButtonRect: TRect;
+    readonly searchInputRect: TRect;
+    nthSkinToneRect(index: number): TRect | null;
+    nthTabRect(index: number): TRect | null;
+    nthEmojiRect(index: number): TRect | null;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+};
+export declare type TSinchEmojiPickerReact = TSinchElementReact<TSinchEmojiPickerElement> & {
+    /** Change value handler */
+    'on-change': (e: CustomEvent<string>) => void;
+};

package/emoji-picker/types.js

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

package/icon/index.d.ts

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

package/icon/index.js

@@ -0,0 +1,32 @@
+import { defineCustomElement, getAttribute, NectaryElement, updateAttribute } from '../utils';
+const templateHTML = '<style>:host{display:contents}#icon{display:inline-block;font-family:var(--sinch-icon-font-family);font-weight:var(--sinch-icon-font-weight);font-size:var(--sinch-size-icon, 24px);font-feature-settings:var(--sinch-icon-font-feature-settings);font-variation-settings:"FILL" 1;-webkit-font-smoothing:antialiased;line-height:1;white-space:nowrap;width:var(--sinch-size-icon,24px);height:var(--sinch-size-icon,24px);color:var(--sinch-color-icon,var(--sinch-color-text-default));user-select:none}</style><span id="icon" role="img"></span>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-icon', class extends NectaryElement {
+  #$icon;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$icon = shadowRoot.querySelector('#icon');
+  }
+  static get observedAttributes() {
+    return ['name'];
+  }
+  attributeChangedCallback(name, _, newVal) {
+    switch (name) {
+      case 'name':
+        {
+          this.#$icon.textContent = newVal;
+          updateAttribute(this.#$icon, 'aria-label', newVal);
+          break;
+        }
+    }
+  }
+  set name(value) {
+    updateAttribute(this, 'name', value);
+  }
+  get name() {
+    return getAttribute(this, 'name', '');
+  }
+});

package/icon/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchIconElement = HTMLElement & {
+    /** Icon name */
+    name: string;
+    /** Icon name */
+    setAttribute(name: 'name', value: string): void;
+};
+export declare type TSinchIconReact = TSinchElementReact<TSinchIconElement> & {
+    /** Icon name */
+    name: string;
+};

package/icon/types.js

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