@nectary/components 1.2.2 → 1.3.1

package/package.json

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

package/pop/index.js

@@ -1,5 +1,5 @@
 import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame, isElementFocused, updateIntegerAttribute, getIntegerAttribute, getFirstFocusableElement, getFirstSlotElement, Context, subscribeContext, isTargetEqual } 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}#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" name="target" aria-haspopup="dialog" aria-expanded="false"></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>';
+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}#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" name="target" aria-haspopup="dialog" aria-expanded="false"></slot><div id="focus"></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content"><slot name="content"></slot></div></dialog>';
 import { assertOrientation, disableScroll, enableScroll, orientationValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
@@ -153,13 +153,13 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
     if (!this.isConnected || this.#isOpen()) {
       return;
     }
-    this.#$targetSlot.addEventListener('blur', this.#stopEventPropagation, true);
-    this.#$focus.style.setProperty('display', 'block');
-    this.#$focus.addEventListener('focus', this.#captureRelatedActiveElement);
+    this.#$targetSlot.addEventListener('blur', this.#captureActiveElement, true);
+    this.#$focus.setAttribute('tabindex', '-1');
+    this.#$focus.style.display = 'block';
     this.#$focus.focus();
-    this.#$focus.removeEventListener('focus', this.#captureRelatedActiveElement);
-    this.#$focus.style.removeProperty('display');
-    this.#$targetSlot.removeEventListener('blur', this.#stopEventPropagation, true);
+    this.#$targetSlot.removeEventListener('blur', this.#captureActiveElement, true);
+    this.#$focus.removeAttribute('tabindex');
+    this.#$focus.removeAttribute('style');
     this.#$dialog.showModal();
     this.#$target.setAttribute('aria-expanded', 'true');
     this.#updateOrientation();
@@ -336,10 +336,6 @@ defineCustomElement('sinch-pop', class extends NectaryElement {
   #dispatchCloseEvent() {
     this.dispatchEvent(new CustomEvent('-close'));
   }
-  #captureRelatedActiveElement = e => {
-    e.stopPropagation();
-    this.#targetActiveElement = e.relatedTarget;
-  };
   #captureActiveElement = e => {
     e.stopPropagation();
     this.#targetActiveElement = e.target;

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/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,13 +1,13 @@
 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';
 const TIP_SIZE = 8;
 const SHOW_DELAY = 1000;
 const HIDE_DELAY = 0;
-const ANIMATION_DURATION = 50;
+const ANIMATION_DURATION = 100;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-tooltip', class extends NectaryElement {
@@ -32,12 +32,13 @@ 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,
       hideAnimationDuration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
-      onShow: this.#onStateShow,
+      onShowStart: this.#onStateShowStart,
+      onShowEnd: this.#onStateShowEnd,
       onHideStart: this.#onStateHideStart,
       onHideEnd: this.#onStateHideEnd
     });
@@ -108,29 +109,27 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     }
   }
   #onMouseDown = () => {
-    this.#tooltipState.interrupt();
-    this.#unsubscribeScroll();
+    this.#tooltipState.destroy();
   };
   #onPopClose = () => {
     this.#tooltipState.destroy();
-    this.#unsubscribeScroll();
   };
   #onMouseEnter = () => {
     this.#tooltipState.show();
-    this.#subscribeScroll();
-    this.#subscribeMouseLeaveEvents();
   };
   #onMouseLeave = e => {
     if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
       this.#tooltipState.hide();
-      this.#unsubscribeScroll();
     }
   };
   #onScroll = () => {
     this.#tooltipState.destroy();
-    this.#unsubscribeScroll();
   };
-  #onStateShow = () => {
+  #onStateShowStart = () => {
+    this.#subscribeScroll();
+    this.#subscribeMouseLeaveEvents();
+  };
+  #onStateShowEnd = () => {
     this.#dispatchShowEvent();
     updateBooleanAttribute(this.#$pop, 'open', true);
     requestAnimationFrame(this.#updateTipOrientation);
@@ -152,11 +151,14 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     this.#animation.play();
   };
   #onStateHideEnd = () => {
-    this.#animation.finish();
+    if (this.#isOpen()) {
+      this.#animation.finish();
+      this.#dispatchHideEvent();
+      updateBooleanAttribute(this.#$pop, 'open', false);
+    }
     this.#resetTipOrientation();
-    updateBooleanAttribute(this.#$pop, 'open', false);
-    this.#dispatchHideEvent();
     this.#unsubscribeMouseLeaveEvents();
+    this.#unsubscribeScroll();
   };
   #resetTipOrientation() {
     this.#$tip.style.top = '';
@@ -187,17 +189,16 @@ defineCustomElement('sinch-tooltip', class extends NectaryElement {
     if (!this.isConnected) {
       return;
     }
-    const value = this.text;
-    this.#$tooltipText.textContent = value;
-    if (value.length === 0) {
+    const text = this.text;
+    this.#$tooltipText.textContent = text;
+    if (text.length === 0) {
       if (this.#isSubscribed) {
         this.#tooltipState.destroy();
         this.#unsubscribeMouseEnterEvent();
-        this.#unsubscribeMouseLeaveEvents();
       }
-      return;
+    } else {
+      this.#subscribeMouseEnterEvent();
     }
-    this.#subscribeMouseEnterEvent();
   }
   #subscribeMouseEnterEvent() {
     if (!this.isConnected || this.#isSubscribed) {

package/tooltip/tooltip-state.d.ts

@@ -2,7 +2,8 @@ type TTooltipStateOptions = {
     showDelay: number;
     hideDelay: number;
     hideAnimationDuration: number;
-    onShow(): void;
+    onShowStart(): void;
+    onShowEnd(): void;
     onHideStart(): void;
     onHideEnd(): void;
 };

package/tooltip/tooltip-state.js

@@ -1,119 +1,121 @@
 export class TooltipState {
   #timerId = null;
-  #state = 'initial';
+  #state = 'hide';
   #options;
   constructor(options) {
     this.#options = options;
   }
   show() {
+    console.log('-> show');
     switch (this.#state) {
-      case 'initial':
-        {
-          this.#delayShow();
-          break;
-        }
-      case 'hide-delay':
+      case 'hide':
         {
-          this.#cancelStateChange('show');
+          this.#switchToHideToShow();
           break;
         }
-      case 'hide':
+      case 'show-to-hide':
         {
-          this.#cancelStateChange();
-          this.#onShow();
+          this.#switchToState('show');
           break;
         }
     }
   }
   hide() {
+    console.log('-> hide');
     switch (this.#state) {
-      case 'show-delay':
+      case 'hide-to-show':
         {
-          this.#cancelStateChange('initial');
+          this.#onHideAnimationEnd();
           break;
         }
       case 'show':
         {
-          this.#delayHide();
+          this.#switchToShowToHide();
           break;
         }
     }
   }
   interrupt() {
+    console.log('-> interrupt');
     switch (this.#state) {
-      case 'show-delay':
+      case 'hide-to-show':
         {
-          this.#cancelStateChange('initial');
+          this.#onHideAnimationEnd();
           break;
         }
       case 'show':
         {
-          this.#onHideStart();
+          this.#switchToShowToHide(true, false);
           break;
         }
-      case 'hide-delay':
+      case 'show-to-hide':
         {
-          this.#cancelStateChange();
-          this.#onHideStart();
+          this.#switchToShowToHide(true, false);
           break;
         }
     }
   }
   destroy() {
+    console.log('-> destroy');
     switch (this.#state) {
-      case 'show-delay':
+      case 'hide-to-show':
         {
-          this.#cancelStateChange('initial');
+          this.#onHideAnimationEnd();
           break;
         }
       case 'show':
         {
-          this.#onHideStart(true);
+          this.#switchToShowToHide(true, true);
           break;
         }
-      case 'hide-delay':
+      case 'show-to-hide':
         {
-          this.#cancelStateChange();
-          this.#onHideStart(true);
+          this.#switchToShowToHide(true, true);
           break;
         }
       case 'hide':
         {
-          this.#cancelStateChange();
-          this.#onHideEnd();
+          this.#onHideAnimationEnd();
           break;
         }
     }
   }
-  #delayShow() {
-    this.#state = 'show-delay';
-    this.#timerId = window.setTimeout(this.#onShow, this.#options.showDelay);
+  #switchToHideToShow() {
+    this.#switchToState('hide-to-show');
+    this.#options.onShowStart();
+    if (this.#options.showDelay === 0) {
+      this.#onSwitchToShow();
+    } else {
+      this.#timerId = window.setTimeout(this.#onSwitchToShow, this.#options.showDelay);
+    }
   }
-  #delayHide() {
-    this.#state = 'hide-delay';
-    this.#timerId = window.setTimeout(this.#onHideStart, this.#options.hideDelay);
+  #switchToShowToHide(skipDelay, skipHideAnimation) {
+    this.#switchToState('show-to-hide');
+    if (skipDelay === true || this.#options.hideDelay === 0) {
+      this.#onShowToHideEnd(skipHideAnimation);
+    } else {
+      this.#timerId = window.setTimeout(this.#onShowToHideEnd, this.#options.hideDelay);
+    }
   }
-  #onShow = () => {
-    this.#state = 'show';
-    this.#options.onShow();
+  #onSwitchToShow = () => {
+    this.#switchToState('show');
+    this.#options.onShowEnd();
   };
-  #onHideStart = isImmediate => {
-    this.#state = 'hide';
+  #onShowToHideEnd = skipHideAnimation => {
+    this.#switchToState('hide');
     this.#options.onHideStart();
-    if (isImmediate === true || this.#options.hideAnimationDuration === 0) {
-      this.#onHideEnd();
+    if (skipHideAnimation === true || this.#options.hideAnimationDuration === 0) {
+      this.#onHideAnimationEnd();
     } else {
-      this.#timerId = window.setTimeout(this.#onHideEnd, this.#options.hideAnimationDuration);
+      this.#timerId = window.setTimeout(this.#onHideAnimationEnd, this.#options.hideAnimationDuration);
     }
   };
-  #onHideEnd = () => {
-    this.#state = 'initial';
+  #onHideAnimationEnd = () => {
+    this.#switchToState('hide');
     this.#options.onHideEnd();
   };
-  #cancelStateChange(nextState) {
-    if (nextState != null) {
-      this.#state = nextState;
-    }
+  #switchToState(nextState) {
+    this.#state = nextState;
     if (this.#timerId !== null) {
       clearTimeout(this.#timerId);
       this.#timerId = null;

package/utils/dom.d.ts

@@ -29,4 +29,5 @@ 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

@@ -152,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}_`;
+}, '');