@nectary/components 1.2.1 → 1.3.0

package/colors.json

@@ -73,9 +73,9 @@
   "colorCeltic700": "#003B7E",
   "colorCeltic400": "#2071CE",
   "colorCeltic200": "#D5E5F8",
-  "colorJasper700": "#882024",
-  "colorJasper400": "#D13D42",
-  "colorJasper200": "#FBD5D5",
+  "colorJasper700": "#B71C1C",
+  "colorJasper400": "#F44336",
+  "colorJasper200": "#FFCDD2",
   "colorPumpkin700": "#9C2E00",
   "colorPumpkin400": "#F35B1C",
   "colorPumpkin200": "#FFE8D6",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "files": [
     "**/*/*.css",
     "**/*/*.json",

package/select-menu/index.js

@@ -2,10 +2,10 @@ import '../input';
 import '../icon-button';
 import '../icon';
 import '../text';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, getCssVar } from '../utils';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateExplicitBooleanAttribute, updateIntegerAttribute, debounceTimeout, setClass, subscribeContext, getCssVar, hasClass } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#listbox{overflow-y:auto}#search{display:none;margin:10px}#search.active{display:block}#not-found{display:none;width:100%;height:30px;align-items:center;justify-content:center;margin-bottom:10px;color:var(--sinch-color-text-muted);pointer-events:none;user-select:none}#not-found.active{display:flex}::slotted(.hidden){display:none}</style><sinch-input id="search" size="s" placeholder="Search"><sinch-icon id="icon-search" slot="icon"></sinch-icon></sinch-input><div id="not-found"><sinch-text type="m">No results</sinch-text></div><div id="listbox" role="presentation"><slot></slot></div>';
 const ITEM_HEIGHT = 40;
-const NUM_ITEMS_SEARCH = 20;
+const NUM_ITEMS_SEARCH = 7;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-select-menu', class extends NectaryElement {
@@ -29,35 +29,23 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   }
   connectedCallback() {
     this.#controller = new AbortController();
-    const {
-      signal
-    } = this.#controller;
+    const options = {
+      signal: this.#controller.signal
+    };
     this.setAttribute('role', 'listbox');
     this.setAttribute('tabindex', '0');
-    this.addEventListener('keydown', this.#onListboxKeyDown, {
-      signal
-    });
-    this.addEventListener('blur', this.#onListboxBlur, {
-      signal
-    });
-    this.#$listbox.addEventListener('mousedown', this.#onListboxMousedown, {
-      signal
-    });
-    this.#$listbox.addEventListener('click', this.#onListboxClick, {
-      signal
-    });
-    this.#$search.addEventListener('-change', this.#onSearchChange, {
-      signal
-    });
-    this.#$optionSlot.addEventListener('slotchange', this.#onOptionSlotChange, {
-      signal
-    });
-    this.addEventListener('-change', this.#onChangeReactHandler, {
-      signal
-    });
-    subscribeContext(this, 'keydown', this.#onContextKeyDown, signal);
-    subscribeContext(this, 'visibility', this.#onContextVisibility, signal);
+    this.addEventListener('keydown', this.#onListboxKeyDown, options);
+    this.addEventListener('focus', this.#onFocus, options);
+    this.addEventListener('blur', this.#onListboxBlur, options);
+    this.#$listbox.addEventListener('mousedown', this.#onListboxMousedown, options);
+    this.#$listbox.addEventListener('click', this.#onListboxClick, options);
+    this.#$search.addEventListener('-change', this.#onSearchChange, options);
+    this.#$optionSlot.addEventListener('slotchange', this.#onOptionSlotChange, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    subscribeContext(this, 'keydown', this.#onContextKeyDown, this.#controller.signal);
+    subscribeContext(this, 'visibility', this.#onContextVisibility, this.#controller.signal);
     updateAttribute(this.#$iconSearch, 'name', getCssVar(this, '--sinch-select-menu-icon-search'));
+    this.#onOptionSlotChange();
   }
   disconnectedCallback() {
     this.#controller.abort();
@@ -66,24 +54,6 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   static get observedAttributes() {
     return ['value', 'rows', 'multiple'];
   }
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-  set rows(value) {
-    updateIntegerAttribute(this, 'rows', value);
-  }
-  get rows() {
-    return getIntegerAttribute(this, 'rows', null);
-  }
-  set multiple(isMultiple) {
-    updateBooleanAttribute(this, 'multiple', isMultiple);
-  }
-  get multiple() {
-    return getBooleanAttribute(this, 'multiple');
-  }
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
@@ -110,6 +80,33 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
         }
     }
   }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set rows(value) {
+    updateIntegerAttribute(this, 'rows', value);
+  }
+  get rows() {
+    return getIntegerAttribute(this, 'rows', null);
+  }
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+  get focusable() {
+    return true;
+  }
+  #onFocus = () => {
+    const isSearchActive = hasClass(this.#$search, 'active');
+    if (isSearchActive) {
+      this.#$search.focus();
+    }
+  };
   #onListboxMousedown = e => {
     const $elem = e.target;
     if (!getBooleanAttribute($elem, 'disabled')) {
@@ -147,6 +144,7 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #onContextVisibility = e => {
     if (e.detail) {
       this.#selectOption(this.#findCheckedOption());
+      this.#onFocus();
     } else {
       this.#selectOption(null);
     }
@@ -306,7 +304,4 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-  get focusable() {
-    return true;
-  }
 });

package/skeleton/index.d.ts

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

package/skeleton/index.js

@@ -0,0 +1,75 @@
+import { defineCustomElement, getUid, isAttrTrue, NectaryElement, shouldReduceMotion } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{position:relative;display:flex;flex-direction:column;gap:16px;height:100%;box-sizing:border-box;overflow:hidden}:host([card]:not([card=false]))>#wrapper{padding:16px;background-color:var(--sinch-color-snow-100);border-radius:var(--sinch-shape-radius-l);border:1px solid var(--sinch-color-snow-500)}#shimmer{position:absolute;inset:0;background-image:linear-gradient(90deg,transparent 0,var(--sinch-color-snow-400) 100px,transparent 200px);clip-path:url("#clip")}#svg{display:block;width:0;height:0}</style><svg id="svg"><defs><clipPath id="clip"></clipPath></defs></svg><div id="wrapper"><slot></slot><div id="shimmer"></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+const ANIMATION_DURATION = 2000;
+const BORDER_WIDTH = 1;
+defineCustomElement('sinch-skeleton', class extends NectaryElement {
+  #animation = null;
+  #shimmer;
+  #controller = null;
+  #clip;
+  #borderWidth = 0;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#shimmer = shadowRoot.querySelector('#shimmer');
+    this.#clip = shadowRoot.querySelector('#clip');
+  }
+  connectedCallback() {
+    const id = getUid();
+    this.#shimmer.style.setProperty('clip-path', `url(#${id})`);
+    this.#clip.setAttribute('id', id);
+    this.#controller = new AbortController();
+    if (!shouldReduceMotion()) {
+      this.addEventListener('skeleton-item-data', this.#onSkeletonItemData, {
+        signal: this.#controller.signal
+      });
+      this.#updateAnimation();
+    }
+  }
+  disconnectedCallback() {
+    this.#animation.cancel();
+    this.#animation = null;
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['card'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+    switch (name) {
+      case 'card':
+        {
+          this.#borderWidth = isAttrTrue(newVal) ? BORDER_WIDTH : 0;
+          break;
+        }
+    }
+  }
+  #updateAnimation() {
+    const bb = this.getBoundingClientRect();
+    const bgWidth = bb.width * 4;
+    this.#shimmer.style.setProperty('background-size', `${bgWidth}px`);
+    this.#animation = this.#shimmer.animate({
+      backgroundPosition: [`0px`, `${bgWidth}px`]
+    }, {
+      duration: ANIMATION_DURATION,
+      iterations: Infinity
+    });
+  }
+  #onSkeletonItemData = e => {
+    const bb = this.getBoundingClientRect();
+    const data = e.detail;
+    const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+    rect.setAttribute('x', (data.x - bb.x - this.#borderWidth).toString());
+    rect.setAttribute('y', (data.y - bb.y - this.#borderWidth).toString());
+    rect.setAttribute('width', data.width.toString());
+    rect.setAttribute('height', data.height.toString());
+    rect.setAttribute('rx', data.radius.toString());
+    this.#clip.appendChild(rect);
+  };
+});

package/skeleton/types.d.ts

@@ -0,0 +1,9 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchSkeletonElement = HTMLElement & {
+    /** Card like container */
+    setAttribute(name: 'card', value: ''): void;
+};
+export type TSinchSkeletonReact = TSinchElementReact<TSinchSkeletonElement> & {
+    /** Card like container */
+    card?: boolean;
+};

package/skeleton/types.js

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

package/skeleton-item/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchSkeletonItemElement, TSinchSkeletonItemReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-skeleton-item': TSinchSkeletonItemReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-skeleton-item': TSinchSkeletonItemElement;
+    }
+}

package/skeleton-item/index.js

@@ -0,0 +1,38 @@
+import { defineCustomElement, getCssVar, NectaryElement, attrValueToInteger, shouldReduceMotion } from '../utils';
+const templateHTML = '<style>:host{display:block;height:var(--sinch-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([size=xs]){height:var(--sinch-size-xs);--sinch-shape-radius:var(--sinch-shape-radius-xs)}:host([size="s"]){height:var(--sinch-size-s);--sinch-shape-radius:var(--sinch-shape-radius-s)}:host([size="m"]){height:var(--sinch-size-m);--sinch-shape-radius:var(--sinch-shape-radius-m)}:host([size="l"]){height:var(--sinch-size-l);--sinch-shape-radius:var(--sinch-shape-radius-l)}#content{height:100%;background-color:var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius)}</style><div id="content"></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-skeleton-item', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    if (!shouldReduceMotion()) {
+      requestAnimationFrame(() => {
+        const {
+          x,
+          y,
+          width,
+          height
+        } = this.getBoundingClientRect();
+        const radiusStr = getCssVar(this, '--sinch-shape-radius') ?? '0';
+        const radius = attrValueToInteger(radiusStr, {
+          min: 0,
+          defaultValue: 0
+        });
+        this.dispatchEvent(new CustomEvent('skeleton-item-data', {
+          bubbles: true,
+          detail: {
+            x,
+            y,
+            width,
+            height,
+            radius
+          }
+        }));
+      });
+    }
+  }
+});

package/skeleton-item/types.d.ts

@@ -0,0 +1,13 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { TSinchSizeEx } from '../utils/size';
+export type TSinchSkeletonItemBoundingBox = TRect & {
+    radius: number;
+};
+export type TSinchSkeletonItemElement = HTMLElement & {
+    /** Size */
+    setAttribute(name: 'size', value: TSinchSizeEx): void;
+};
+export type TSinchSkeletonItemReact = TSinchElementReact<TSinchSkeletonItemElement> & {
+    /** Size */
+    size?: TSinchSizeEx;
+};

package/skeleton-item/types.js

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

package/theme/chip.css

@@ -18,6 +18,8 @@
   --sinch-chip-color-light-violet-fg: var(--sinch-color-violet-700);
   --sinch-chip-color-light-yellow-bg: var(--sinch-color-bolt-200);
   --sinch-chip-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-chip-color-light-red-bg: var(--sinch-color-jasper-200);
+  --sinch-chip-color-light-red-fg: var(--sinch-color-jasper-700);
   --sinch-chip-color-dark-blue-bg: var(--sinch-color-night-700);
   --sinch-chip-color-dark-blue-fg: var(--sinch-color-night-200);
   --sinch-chip-color-dark-brown-bg: var(--sinch-color-mud-700);
@@ -34,6 +36,8 @@
   --sinch-chip-color-dark-violet-fg: var(--sinch-color-violet-200);
   --sinch-chip-color-dark-yellow-bg: var(--sinch-color-bolt-700);
   --sinch-chip-color-dark-yellow-fg: var(--sinch-color-bolt-200);
+  --sinch-chip-color-dark-red-bg: var(--sinch-color-jasper-700);
+  --sinch-chip-color-dark-red-fg: var(--sinch-color-jasper-200);
   --sinch-chip-color-blue-bg: var(--sinch-color-night-400);
   --sinch-chip-color-blue-fg: var(--sinch-color-snow-100);
   --sinch-chip-color-brown-bg: var(--sinch-color-mud-400);
@@ -50,6 +54,8 @@
   --sinch-chip-color-violet-fg: var(--sinch-color-stormy-500);
   --sinch-chip-color-yellow-bg: var(--sinch-color-bolt-400);
   --sinch-chip-color-yellow-fg: var(--sinch-color-stormy-500);
+  --sinch-chip-color-red-bg: var(--sinch-color-jasper-400);
+  --sinch-chip-color-red-fg: var(--sinch-color-stormy-500);
   --sinch-chip-color-celtic-bg: var(--sinch-color-feedback-info-bg);
   --sinch-chip-color-celtic-fg: var(--sinch-color-feedback-info-contrast);
   --sinch-chip-color-olive-bg: var(--sinch-color-feedback-success-bg);

package/theme/color-swatch.css

@@ -18,6 +18,8 @@
   --sinch-color-swatch-color-light-violet-fg: var(--sinch-color-violet-700);
   --sinch-color-swatch-color-light-yellow-bg: var(--sinch-color-bolt-200);
   --sinch-color-swatch-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-color-swatch-color-light-red-bg: var(--sinch-color-jasper-200);
+  --sinch-color-swatch-color-light-red-fg: var(--sinch-color-jasper-700);
   --sinch-color-swatch-color-dark-blue-bg: var(--sinch-color-night-700);
   --sinch-color-swatch-color-dark-blue-fg: var(--sinch-color-night-200);
   --sinch-color-swatch-color-dark-brown-bg: var(--sinch-color-mud-700);
@@ -34,6 +36,8 @@
   --sinch-color-swatch-color-dark-violet-fg: var(--sinch-color-violet-200);
   --sinch-color-swatch-color-dark-yellow-bg: var(--sinch-color-bolt-700);
   --sinch-color-swatch-color-dark-yellow-fg: var(--sinch-color-bolt-200);
+  --sinch-color-swatch-color-dark-red-bg: var(--sinch-color-jasper-700);
+  --sinch-color-swatch-color-dark-red-fg: var(--sinch-color-jasper-200);
   --sinch-color-swatch-color-blue-bg: var(--sinch-color-night-400);
   --sinch-color-swatch-color-blue-fg: var(--sinch-color-snow-100);
   --sinch-color-swatch-color-brown-bg: var(--sinch-color-mud-400);
@@ -50,6 +54,8 @@
   --sinch-color-swatch-color-violet-fg: var(--sinch-color-stormy-500);
   --sinch-color-swatch-color-yellow-bg: var(--sinch-color-bolt-400);
   --sinch-color-swatch-color-yellow-fg: var(--sinch-color-stormy-500);
+  --sinch-color-swatch-color-red-bg: var(--sinch-color-jasper-400);
+  --sinch-color-swatch-color-red-fg: var(--sinch-color-stormy-500);
   --sinch-color-swatch-color-skin-tone-0-bg: var(--sinch-color-skin-tone-0);
   --sinch-color-swatch-color-skin-tone-0-fg: var(--sinch-color-stormy-500);
   --sinch-color-swatch-color-skin-tone-10-bg: var(--sinch-color-skin-tone-10);

package/theme/colors.js

@@ -1,4 +1,4 @@
-export const lightColorNames = ['light-violet', 'light-blue', 'light-green', 'light-yellow', 'light-orange', 'light-pink', 'light-brown', 'light-gray'].join(',');
-export const darkColorNames = ['dark-violet', 'dark-blue', 'dark-green', 'dark-yellow', 'dark-orange', 'dark-pink', 'dark-brown', 'dark-gray'].join(',');
-export const vibrantColorNames = ['violet', 'blue', 'green', 'yellow', 'orange', 'pink', 'brown', 'gray'].join(',');
+export const lightColorNames = ['light-violet', 'light-blue', 'light-green', 'light-yellow', 'light-orange', 'light-red', 'light-pink', 'light-brown', 'light-gray'].join(',');
+export const darkColorNames = ['dark-violet', 'dark-blue', 'dark-green', 'dark-yellow', 'dark-orange', 'dark-red', 'dark-pink', 'dark-brown', 'dark-gray'].join(',');
+export const vibrantColorNames = ['violet', 'blue', 'green', 'yellow', 'orange', 'red', 'pink', 'brown', 'gray'].join(',');
 export const skinToneColorNames = ['skin-tone-0', 'skin-tone-10', 'skin-tone-20', 'skin-tone-30', 'skin-tone-40', 'skin-tone-50'].join(',');

package/theme/palette.css

@@ -74,9 +74,9 @@
   --sinch-color-celtic-700: #003B7E;
   --sinch-color-celtic-400: #2071CE;
   --sinch-color-celtic-200: #D5E5F8;
-  --sinch-color-jasper-700: #882024;
-  --sinch-color-jasper-400: #D13D42;
-  --sinch-color-jasper-200: #FBD5D5;
+  --sinch-color-jasper-700: #B71C1C;
+  --sinch-color-jasper-400: #F44336;
+  --sinch-color-jasper-200: #FFCDD2;
   --sinch-color-pumpkin-700: #9C2E00;
   --sinch-color-pumpkin-400: #F35B1C;
   --sinch-color-pumpkin-200: #FFE8D6;

package/theme/tag.css

@@ -18,6 +18,8 @@
   --sinch-tag-color-light-violet-fg: var(--sinch-color-violet-700);
   --sinch-tag-color-light-yellow-bg: var(--sinch-color-bolt-200);
   --sinch-tag-color-light-yellow-fg: var(--sinch-color-bolt-700);
+  --sinch-tag-color-light-red-bg: var(--sinch-color-jasper-200);
+  --sinch-tag-color-light-red-fg: var(--sinch-color-jasper-700);
   --sinch-tag-color-dark-blue-bg: var(--sinch-color-night-700);
   --sinch-tag-color-dark-blue-fg: var(--sinch-color-night-200);
   --sinch-tag-color-dark-brown-bg: var(--sinch-color-mud-700);
@@ -34,6 +36,8 @@
   --sinch-tag-color-dark-violet-fg: var(--sinch-color-violet-200);
   --sinch-tag-color-dark-yellow-bg: var(--sinch-color-bolt-700);
   --sinch-tag-color-dark-yellow-fg: var(--sinch-color-bolt-200);
+  --sinch-tag-color-dark-red-bg: var(--sinch-color-jasper-700);
+  --sinch-tag-color-dark-red-fg: var(--sinch-color-jasper-200);
   --sinch-tag-color-blue-bg: var(--sinch-color-night-400);
   --sinch-tag-color-blue-fg: var(--sinch-color-snow-100);
   --sinch-tag-color-brown-bg: var(--sinch-color-mud-400);
@@ -50,6 +54,8 @@
   --sinch-tag-color-violet-fg: var(--sinch-color-stormy-500);
   --sinch-tag-color-yellow-bg: var(--sinch-color-bolt-400);
   --sinch-tag-color-yellow-fg: var(--sinch-color-stormy-500);
+  --sinch-tag-color-red-bg: var(--sinch-color-jasper-400);
+  --sinch-tag-color-red-fg: var(--sinch-color-stormy-500);
   --sinch-tag-color-celtic-bg: var(--sinch-color-feedback-info-bg);
   --sinch-tag-color-celtic-fg: var(--sinch-color-feedback-info-contrast);
   --sinch-tag-color-olive-bg: var(--sinch-color-feedback-success-bg);

package/toast-manager/index.js

@@ -1,6 +1,6 @@
 import '../title';
 import '../text';
-import { cloneNode, defineCustomElement, getRect, NectaryElement } from '../utils';
+import { cloneNode, defineCustomElement, getRect, NectaryElement, shouldReduceMotion } from '../utils';
 const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
 const DURATION_ADD = 250;
 const DURATION_REMOVE = 250;
@@ -11,7 +11,7 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
   #$slot;
   #$list;
   #map = new WeakMap();
-  #shouldReduceMotion = false;
+  #shouldReduceMotion;
   #animations = new Set();
   constructor() {
     super();
@@ -19,10 +19,10 @@ defineCustomElement('sinch-toast-manager', class extends NectaryElement {
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$slot = shadowRoot.querySelector('slot');
     this.#$list = shadowRoot.querySelector('#list');
+    this.#shouldReduceMotion = shouldReduceMotion();
   }
   connectedCallback() {
     this.#$slot.addEventListener('slotchange', this.#onSlotChange);
-    this.#shouldReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   }
   disconnectedCallback() {
     this.#$slot.removeEventListener('slotchange', this.#onSlotChange);

package/tooltip/index.js

@@ -1,6 +1,6 @@
 import '../text';
 import '../pop';
-import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler } from '../utils';
+import { defineCustomElement, getBooleanAttribute, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler, shouldReduceMotion } from '../utils';
 const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-600);border-radius:var(--sinch-shape-radius-xs);pointer-events:none;opacity:0}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#text{word-break:break-word;pointer-events:none}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-color-snow-600);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}:host([inverted]:not([inverted=false])) #content{background-color:var(--sinch-color-stormy-500);color:var(--sinch-color-text-inverted)}:host([inverted]:not([inverted=false])) #tip{fill:var(--sinch-color-stormy-500)}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
 import { TooltipState } from './tooltip-state';
 import { assertOrientation, getPopOrientation, orientationValues } from './utils';
@@ -32,7 +32,7 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#$contentWrapper = shadowRoot.querySelector('#content-wrapper');
     this.#$tip = shadowRoot.querySelector('#tip');
     this.#$target = shadowRoot.querySelector('#target');
-    this.#shouldReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    this.#shouldReduceMotion = shouldReduceMotion();
     this.#tooltipState = new TooltipState({
       showDelay: SHOW_DELAY,
       hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,

package/utils/dom.d.ts

@@ -25,7 +25,9 @@ export declare function getIntegerAttribute($element: Element, attrName: string)
 export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: null): number | null;
 export declare function getIntegerAttribute($element: Element, attrName: string, defaultValue: number): number;
 export declare const setClass: (elem: Element, name: string, isSet: boolean) => void;
+export declare const hasClass: (elem: Element, name: string) => boolean;
 export declare const getCssVar: (element: Element, variableName: string) => string | null;
 export declare const getCssVars: (element: Element, variableNames: string[]) => (string | null)[];
 export declare const cloneNode: (el: Element, deep: boolean) => Element;
+export declare const shouldReduceMotion: () => boolean;
 export {};

package/utils/dom.js

@@ -122,6 +122,9 @@ export function getIntegerAttribute($element, attrName, defaultValue) {
 export const setClass = (elem, name, isSet) => {
   isSet ? elem.classList.add(name) : elem.classList.remove(name);
 };
+export const hasClass = (elem, name) => {
+  return elem.classList.contains(name);
+};
 export const getCssVar = (element, variableName) => {
   const result = getComputedStyle(element).getPropertyValue(variableName).trim();
   return result === '' ? null : result;
@@ -149,4 +152,5 @@ export const cloneNode = (el, deep) => {
     return cloned;
   }
   return el.cloneNode(deep);
-};
+};
+export const shouldReduceMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches;

package/utils/index.d.ts

@@ -9,3 +9,4 @@ export * from './debounce';
 export * from './get-react-event-handler';
 export * from './markdown';
 export * from './event-target';
+export * from './uid';

package/utils/index.js

@@ -8,4 +8,5 @@ export * from './throttle';
 export * from './debounce';
 export * from './get-react-event-handler';
 export * from './markdown';
-export * from './event-target';
+export * from './event-target';
+export * from './uid';

package/utils/uid.d.ts

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

package/utils/uid.js

@@ -0,0 +1,13 @@
+export const getUid = () => crypto.getRandomValues(new Uint8Array(21)).reduce((id, byte) => {
+  const nextByte = byte & 63;
+  if (nextByte < 36) {
+    return id + nextByte.toString(36);
+  }
+  if (nextByte < 62) {
+    return id + (nextByte - 26).toString(36).toUpperCase();
+  }
+  if (nextByte > 62) {
+    return `${id}-`;
+  }
+  return `${id}_`;
+}, '');