@nectary/components 0.42.1 → 0.44.0

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/file-drop/types.d.ts

@@ -44,7 +44,7 @@ export declare type TSinchFileDropReact = TSinchElementReact<TSinchFileDropEleme
     /** Placeholder */
     placeholder: string;
     /** Change value handler */
-    'on-change'?: (e: CustomEvent<File[]>) => void;
+    'on-change': (e: CustomEvent<File[]>) => void;
     /** Invalid handler */
-    'on-invalid'?: (e: CustomEvent<TSinchFileDropInvalidType>) => void;
+    'on-invalid': (e: CustomEvent<TSinchFileDropInvalidType>) => void;
 };

package/file-picker/types.d.ts

@@ -28,5 +28,5 @@ export declare type TSinchFilePickerReact = TSinchElementReact<TSinchFilePickerE
     /** Change value handler */
     'on-change': (e: CustomEvent<File[]>) => void;
     /** Invalid handler */
-    'on-invalid'?: (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
+    'on-invalid': (e: CustomEvent<TSinchFilePickerInvalidType>) => void;
 };

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 {};

package/icon-button/index.js

@@ -1,6 +1,6 @@
 import '../tooltip';
 import { defineCustomElement, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;contain:size;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500));--sinch-icon-button-shape-radius:var(--sinch-shape-radius-l)}button::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--sinch-icon-button-shape-radius);pointer-events:none;box-sizing:border-box;border:1px solid transparent;background-color:transparent;mix-blend-mode:multiply}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}}button:enabled:hover::before{background-color:#f1f2f4}button:enabled:active::before{background-color:#e3e6e8}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false])) #button{width:32px;height:32px;--sinch-icon-button-shape-radius:var(--sinch-shape-radius-m)}button>*{pointer-events:none}</style><sinch-tooltip id="tooltip"><button id="button"><slot name="icon"></slot></button></sinch-tooltip>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;align-items:center;justify-content:center;width:48px;height:48px;cursor:pointer;contain:size;--sinch-size-icon:24px;--sinch-color-icon:var(--sinch-icon-button-color, var(--sinch-color-stormy-500));--sinch-icon-button-shape-radius:var(--sinch-shape-radius-l)}button::before{content:"";position:absolute;left:0;top:0;width:100%;height:100%;border-radius:var(--sinch-icon-button-shape-radius);pointer-events:none;box-sizing:border-box;border:1px solid transparent;background-color:transparent;mix-blend-mode:multiply}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-icon-button-shape-radius) + 4px);pointer-events:none}}button:enabled:hover::before{background-color:#f1f2f4}button:enabled:active::before{background-color:#e3e6e8}button:disabled{background-color:transparent;cursor:initial;--sinch-color-spinner-bg:var(--sinch-color-snow-200);--sinch-color-spinner-fg:var(--sinch-color-stormy-200);--sinch-color-icon:var(--sinch-color-stormy-100)}:host([small]:not([small=false])) #button{width:32px;height:32px;--sinch-icon-button-shape-radius:var(--sinch-shape-radius-m)}button>*{pointer-events:none}</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-icon-button', class extends NectaryElement {

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@nectary/components",
-  "version": "0.42.1",
+  "version": "0.44.0",
   "files": [
     "theme.css",
     "theme/*.css",
-    "theme/fonts.json",
+    "theme/*.json",
     "**/*/*.js",
     "**/*/*.d.ts",
     "types.d.ts",

package/pop/index.js

@@ -1,6 +1,5 @@
 import dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement } from '../utils';
-import { Context, dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils';
 const templateHTML = '<style>:host{display:contents;position:relative}dialog{position:fixed;left:0;top:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#content{position:relative;z-index:1}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}#focus{display:none;position:absolute;width:0;height:0}</style><slot id="target" aria-haspopup="dialog" aria-expanded="false" name="target"></slot><div id="focus" tabindex="-1"></div><dialog id="dialog"><div id="content"><slot name="content"></slot></div><div id="target-open"><slot name="target-open"></slot></div></dialog>';
 import { assertOrientation, disableScroll, enableScroll, orientationValues } from './utils';
 const template = document.createElement('template');

package/popover/index.js

@@ -1,6 +1,5 @@
 import '../pop';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap } from '../utils';
-import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap, dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils';
 const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px}#content{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-m);box-shadow:var(--sinch-elevation-level-2);overflow:hidden}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-color-snow-100);stroke:var(--sinch-color-snow-500);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}:host([tip]) #content{box-shadow:none}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-elevation-level-2))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
 import { assertOrientation, getPopOrientation, orientationValues } from './utils';
 const TIP_SIZE = 16;

package/segment/index.js

@@ -1,7 +1,7 @@
 import '../title';
 import { getTitleLevelFromType } from '../title/utils';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:16px;width:100%;height:100%;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);box-shadow:var(--sinch-elevation-level-2);padding:8px 24px 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;--sinch-size-icon:32px}#caption{color:var(--sinch-color-text-default);min-width:1em}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px}#action.empty{display:none}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><sinch-title id="caption" level="3" type="m" ellipsis></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;gap:12px;width:100%;height:100%;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);box-shadow:var(--sinch-elevation-level-2);padding:8px 0 16px}#header{display:flex;flex-direction:row;align-items:center;height:48px;gap:8px;padding:0 24px;--sinch-size-icon:32px}#caption{color:var(--sinch-color-text-default);min-width:1em}#info{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto;align-self:stretch}#info.empty{display:none}#preview{flex:1;flex-basis:auto;height:48px;min-width:0;overflow:hidden;margin-left:24px}#preview.empty{display:none}#info.empty+#collapse{margin-left:auto}#collapse.empty{display:none}#preview:not(.empty)+#info.empty+#collapse:not(.empty),#preview:not(.empty)+#info:not(.empty){margin-left:24px}#content-wrapper{flex:1;min-height:0;overflow-y:auto;padding:4px 24px}#action{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;padding:0 24px}#action.empty{display:none}:host([collapsed]:not([collapsed=false])) :is(#content-wrapper,#action){display:none}:host([collapsed]:not([collapsed=false])) #wrapper{padding-bottom:8px}::slotted([slot=icon]){margin-right:8px}</style><div id="wrapper"><div id="header"><slot name="icon"></slot><sinch-title id="caption" level="3" type="m" ellipsis></sinch-title><div id="preview"><slot name="preview"></slot></div><div id="info"><slot name="info"></slot></div><div id="collapse"><slot name="collapse"></slot></div></div><div id="content-wrapper"><slot name="content"></slot></div><div id="action"><slot name="action"></slot></div></div>';
 import { assertSize, sizeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/segmented-icon-control/index.js

@@ -1,4 +1,4 @@
-import { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:row}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -69,9 +69,9 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
   };
   #onValueChange(csv) {
     if (this.multiple) {
-      const values = getCsvSet(csv);
+      const values = unpackCsv(csv);
       for (const $option of this.#$slot.assignedElements()) {
-        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {