@adia-ai/web-components 0.0.18 → 0.0.20

package/components/field/field.js

@@ -38,11 +38,21 @@ class AdiaField extends AdiaElement {
   static properties = {
     label:    { type: String,  default: '',    reflect: true },
     hint:     { type: String,  default: '',    reflect: true },
-    error:    { type: String,  default: '',    reflect: true },
     required: { type: Boolean, default: false, reflect: true },
     inline:   { type: Boolean, default: false, reflect: true },
   };
 
+  // The validation message lives on the child control (AdiaFormElement.error
+  // is the single source of truth — validity is a property of the value, not
+  // of the layout wrapper). field-ui mirrors the child's error string into
+  // its own [data-field-error] slot so the validation message renders below
+  // the control. See docs/specs/component-token-contract.md "Toggle state
+  // naming" / open decisions resolution log.
+  get error() {
+    const ctrl = this.#findControl();
+    return ctrl?.error ?? '';
+  }
+
   static template = () => null;
 
   #labelEl = null;
@@ -69,17 +79,22 @@ class AdiaField extends AdiaElement {
     this.#ensureHintElement();
     this.#ensureErrorElement();
     this.#bindForToControl();
+    this.#bindErrorListener();
     this.#labelEl?.addEventListener('click', this.#onLabelClick);
     this.#mo = new MutationObserver(() => {
       this.#bindForToControl();
+      this.#bindErrorListener();
       this.#wireAriaDescribedBy();
+      this.#syncErrorMessage();
     });
     this.#mo.observe(this, { childList: true });
+    this.#syncErrorMessage();
   }
 
   disconnected() {
     this.#mo?.disconnect();
     this.#mo = null;
+    this.#unbindErrorListener();
     this.#labelEl?.removeEventListener('click', this.#onLabelClick);
     this.#labelEl = null;
     this.#labelMark = null;
@@ -96,11 +111,44 @@ class AdiaField extends AdiaElement {
       this.#hintEl.textContent = this.hint || '';
       this.#hintEl.hidden = !this.hint || Boolean(this.error);
     }
-    if (this.#errorEl) {
-      this.#errorEl.textContent = this.error || '';
-      this.#errorEl.hidden = !this.error;
-    }
+    this.#syncErrorMessage();
+    this.#wireAriaDescribedBy();
+  }
+
+  // Mirror child.error → #errorEl. Called on render, MutationObserver
+  // changes, and the child's `invalid`/`change`/`input` events.
+  #syncErrorMessage() {
+    if (!this.#errorEl) return;
+    const msg = this.error;
+    this.#errorEl.textContent = msg || '';
+    this.#errorEl.hidden = !msg;
+  }
+
+  #onChildEvent = () => {
+    this.#syncErrorMessage();
     this.#wireAriaDescribedBy();
+  };
+
+  #boundErrorTarget = null;
+
+  #bindErrorListener() {
+    const ctrl = this.#findControl();
+    if (ctrl === this.#boundErrorTarget) return;
+    this.#unbindErrorListener();
+    if (!ctrl) return;
+    this.#boundErrorTarget = ctrl;
+    ctrl.addEventListener('invalid', this.#onChildEvent, true);
+    ctrl.addEventListener('change',  this.#onChildEvent);
+    ctrl.addEventListener('input',   this.#onChildEvent);
+  }
+
+  #unbindErrorListener() {
+    const ctrl = this.#boundErrorTarget;
+    if (!ctrl) return;
+    ctrl.removeEventListener('invalid', this.#onChildEvent, true);
+    ctrl.removeEventListener('change',  this.#onChildEvent);
+    ctrl.removeEventListener('input',   this.#onChildEvent);
+    this.#boundErrorTarget = null;
   }
 
   // ── Private ───────────────────────────────────────────────────────

package/components/field/field.yaml

@@ -28,14 +28,11 @@ props:
     type: string
     default: ""
     reflect: true
-  error:
-    description: >-
-      Validation error message rendered below the control in danger
-      style. Takes precedence over `hint` in the same row, and
-      carries role="alert" so screen readers announce changes.
-    type: string
-    default: ""
-    reflect: true
+  # `error` is mirrored from the slotted control's `error` property.
+  # AdiaFormElement.error is the source of truth; field-ui renders the
+  # message below the control in danger style, role="alert" so screen
+  # readers announce changes. There is no field-level error attribute —
+  # set the message on the control: `<field-ui><input-ui error="…"></input-ui></field-ui>`.
   required:
     description: >-
       Renders a "*" marker on the label. Does not itself enforce

package/components/heatmap/heatmap.css

@@ -14,14 +14,15 @@
     --heatmap-label:            var(--a-fg-subtle);
 
     /* ── Data ramp (5 buckets) ──
-       Sequential tint scale from the current accent family (OKLCH, theme-
-       aware via light-dark()). The `--a-{accent|success|warning|danger}-NN`
-       tokens are already even-spaced, so no color-mix is needed. */
-    --heatmap-bucket-0:         var(--a-accent-10);
-    --heatmap-bucket-1:         var(--a-accent-30);
-    --heatmap-bucket-2:         var(--a-accent-50);
-    --heatmap-bucket-3:         var(--a-accent-70);
-    --heatmap-bucket-4:         var(--a-accent-90);
+       Sequential tint scale, sourced from the L2 `--a-{family}-bucket-N`
+       semantic aliases (see styles/colors/semantics.css §BUCKETS). The
+       L2 layer handles light-dark() polarity so step 0 reads as
+       low-intensity in either scheme without per-component math. */
+    --heatmap-bucket-0:         var(--a-accent-bucket-0);
+    --heatmap-bucket-1:         var(--a-accent-bucket-1);
+    --heatmap-bucket-2:         var(--a-accent-bucket-2);
+    --heatmap-bucket-3:         var(--a-accent-bucket-3);
+    --heatmap-bucket-4:         var(--a-accent-bucket-4);
 
     /* ── Legend ── */
     --heatmap-legend-size:      var(--a-caption-size);
@@ -121,26 +122,34 @@
   /* ── Color-scheme variants (token overrides only) ── */
 
   :scope[color-scheme="success"] {
-    --heatmap-bucket-0: var(--a-success-10);
-    --heatmap-bucket-1: var(--a-success-30);
-    --heatmap-bucket-2: var(--a-success-50);
-    --heatmap-bucket-3: var(--a-success-70);
-    --heatmap-bucket-4: var(--a-success-90);
+    --heatmap-bucket-0: var(--a-success-bucket-0);
+    --heatmap-bucket-1: var(--a-success-bucket-1);
+    --heatmap-bucket-2: var(--a-success-bucket-2);
+    --heatmap-bucket-3: var(--a-success-bucket-3);
+    --heatmap-bucket-4: var(--a-success-bucket-4);
   }
 
   :scope[color-scheme="warning"] {
-    --heatmap-bucket-0: var(--a-warning-10);
-    --heatmap-bucket-1: var(--a-warning-30);
-    --heatmap-bucket-2: var(--a-warning-50);
-    --heatmap-bucket-3: var(--a-warning-70);
-    --heatmap-bucket-4: var(--a-warning-90);
+    --heatmap-bucket-0: var(--a-warning-bucket-0);
+    --heatmap-bucket-1: var(--a-warning-bucket-1);
+    --heatmap-bucket-2: var(--a-warning-bucket-2);
+    --heatmap-bucket-3: var(--a-warning-bucket-3);
+    --heatmap-bucket-4: var(--a-warning-bucket-4);
   }
 
   :scope[color-scheme="danger"] {
-    --heatmap-bucket-0: var(--a-danger-10);
-    --heatmap-bucket-1: var(--a-danger-30);
-    --heatmap-bucket-2: var(--a-danger-50);
-    --heatmap-bucket-3: var(--a-danger-70);
-    --heatmap-bucket-4: var(--a-danger-90);
+    --heatmap-bucket-0: var(--a-danger-bucket-0);
+    --heatmap-bucket-1: var(--a-danger-bucket-1);
+    --heatmap-bucket-2: var(--a-danger-bucket-2);
+    --heatmap-bucket-3: var(--a-danger-bucket-3);
+    --heatmap-bucket-4: var(--a-danger-bucket-4);
+  }
+
+  :scope[color-scheme="info"] {
+    --heatmap-bucket-0: var(--a-info-bucket-0);
+    --heatmap-bucket-1: var(--a-info-bucket-1);
+    --heatmap-bucket-2: var(--a-info-bucket-2);
+    --heatmap-bucket-3: var(--a-info-bucket-3);
+    --heatmap-bucket-4: var(--a-info-bucket-4);
   }
 }

package/components/input/input.js

@@ -16,7 +16,7 @@
  */
 
 import { AdiaFormElement } from '../../core/form.js';
-import { isIconName } from '../../core/icons.js';
+import { isIconName, whenIconRegistryReady } from '../../core/icons.js';
 
 const renderAffix = (v) => isIconName(v)
   ? `<icon-ui name="${v}"></icon-ui>`
@@ -86,6 +86,35 @@ class AdiaInput extends AdiaFormElement {
       this.#textEl.addEventListener('blur', this.#onBlur);
       this.#textEl.addEventListener('paste', this.#onPaste);
     }
+
+    // In non-Vite static deploys, the icon registry loads asynchronously
+    // after the manifest fetch resolves. If our prefix/suffix were checked
+    // by isIconName() during that window, kebab-case icon names like
+    // "magnifying-glass" got baked into the DOM as literal text. Re-evaluate
+    // once the registry is ready and promote text-rendered affixes to
+    // <icon-ui>. (No-op on Vite dev where the promise resolves synchronously.)
+    if (this.prefix || this.suffix) {
+      whenIconRegistryReady.then(() => this.#promoteAffixes());
+    }
+  }
+
+  #promoteAffixes() {
+    if (!this.isConnected) return;
+    for (const which of ['prefix', 'suffix']) {
+      const value = this[which];
+      if (!value) continue;
+      const slot = this.querySelector(`:scope [slot="${which}"]`);
+      if (!slot) continue;
+      // Already an <icon-ui> — nothing to do.
+      if (slot.querySelector(':scope > icon-ui')) continue;
+      // Was rendered as text and the value is now a known icon — replace.
+      if (isIconName(value)) {
+        slot.replaceChildren();
+        const icon = document.createElement('icon-ui');
+        icon.setAttribute('name', value);
+        slot.appendChild(icon);
+      }
+    }
   }
 
   render() {

package/components/kbd/kbd.a2ui.json

@@ -17,8 +17,12 @@
       "const": "Kbd"
     },
     "size": {
-      "description": "Size variant",
+      "description": "Sizing scale (compact tier — sm / md only).",
       "type": "string",
+      "enum": [
+        "sm",
+        "md"
+      ],
       "default": ""
     }
   },

package/components/kbd/kbd.yaml

@@ -9,9 +9,13 @@ version: 1
 description: Keyboard key cap. Purely decorative, content from innerHTML.
 props:
   size:
-    description: Size variant
+    description: Sizing scale (compact tier — sm / md only).
     type: string
     default: ""
+    enum:
+      - sm
+      - md
+    reflect: true
 events: {}
 slots:
   default:

package/components/menu/menu.css

@@ -1,16 +1,28 @@
 @scope (menu-ui) {
+  :where(:scope) {
+    --menu-popover-padding:    var(--a-space-1);
+    --menu-popover-border:     var(--a-border-subtle);
+    --menu-popover-radius:     var(--a-radius-lg);
+    --menu-popover-bg:         var(--a-bg-subtle);
+    --menu-popover-shadow:     var(--a-shadow-lg);
+    --menu-popover-min-width:  10rem;
+    --menu-popover-font-size:  var(--a-ui-size);
+    --menu-popover-fg:         var(--a-fg);
+  }
+
   :scope {
     box-sizing: border-box;
     display: inline-flex;
     position: relative;
   }
-}
 
-/* Items/dividers in Light DOM are hidden unless they've been adopted
-   into the popover on open. Popover API also hides the popover itself when closed. */
-menu-ui > menu-item-ui,
-menu-ui > menu-divider-ui {
-  display: none !important;
+  /* Items/dividers in Light DOM are hidden unless they've been adopted
+     into the popover on open. Popover API also hides the popover itself
+     when closed. */
+  :scope > menu-item-ui,
+  :scope > menu-divider-ui {
+    display: none;
+  }
 }
 
 /* ── Top-layer: cannot inherit component tokens ── */
@@ -41,10 +53,10 @@ menu-ui [data-menu-popover] {
     --menu-item-fg:             var(--a-fg-subtle);
     --menu-item-fg-hover:       var(--a-fg);
     --menu-item-bg-hover:       var(--a-bg-muted);
-    --menu-item-fg-disabled:    var(--a-fg-disabled, var(--a-fg-muted));
+    --menu-item-fg-disabled:    var(--a-fg-disabled);
     --menu-item-icon-fg:        var(--a-fg-muted);
     --menu-item-icon-fg-hover:  var(--a-fg);
-    --menu-item-icon-disabled:  var(--a-fg-disabled, var(--a-fg-muted));
+    --menu-item-icon-disabled:  var(--a-fg-disabled);
     --menu-item-danger-fg:      var(--a-danger-bg);
     --menu-item-danger-bg:      var(--a-danger-muted);
 

package/components/menu/menu.js

@@ -31,6 +31,7 @@ class AdiaMenu extends AdiaElement {
   #popover = null;
   #bound = false;
   #rafId = null;
+  #focusRaf = null;
 
   connected() {
     if (!this.#bound) {
@@ -86,7 +87,10 @@ class AdiaMenu extends AdiaElement {
     // Focus first enabled item (only when opened via keyboard).
     if (this.#openedByKeyboard) {
       this.#openedByKeyboard = false;
-      requestAnimationFrame(() => this.#focusItem(0));
+      this.#focusRaf = requestAnimationFrame(() => {
+        this.#focusRaf = null;
+        this.#focusItem(0);
+      });
     }
 
     this.#rafId = requestAnimationFrame(() => {
@@ -112,6 +116,10 @@ class AdiaMenu extends AdiaElement {
       cancelAnimationFrame(this.#rafId);
       this.#rafId = null;
     }
+    if (this.#focusRaf != null) {
+      cancelAnimationFrame(this.#focusRaf);
+      this.#focusRaf = null;
+    }
     document.removeEventListener('pointerdown', this.#onOutside);
     document.removeEventListener('keydown', this.#onDocKey, true);
   }

package/components/modal/modal.css

@@ -1,5 +1,10 @@
 /* ═══════════════════════════════════════════════════════════════
-   MODAL-N — Centered dialog overlay using native <dialog>.
+   MODAL-UI — Centered dialog overlay using native <dialog>.
+
+   <dialog> content stays in DOM tree → custom properties inherit
+   normally → all rules live INSIDE @scope (modal-ui), parity with
+   drawer-ui. See docs/specs/component-token-contract.md
+   §"Top-layer rules — when to keep them inside @scope".
    ═══════════════════════════════════════════════════════════════ */
 
 @scope (modal-ui) {
@@ -33,121 +38,109 @@
   :scope[size="sm"] { --modal-width: min(24rem, 90vw); }
   :scope[size="md"] { --modal-width: min(32rem, 90vw); }
   :scope[size="lg"] { --modal-width: min(48rem, 90vw); }
-}
-
-/* ═══════ Closed ═══════ */
-
-modal-ui > [slot="dialog"]:not([open]) { display: none; }
-
-/* ═══════ Full-viewport dialog shell ═══════ */
-
-modal-ui > [slot="dialog"][open] {
-  box-sizing: border-box;
-  position: fixed;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  max-width: none;
-  max-height: none;
-  margin: 0;
-  padding: 0;
-  border: none;
-  background: transparent;
-  overflow: clip;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* ═══════ Backdrop ═══════ */
-
-modal-ui > [slot="dialog"]::backdrop {
-  background: var(--modal-backdrop);
-  opacity: 0;
-  transition: opacity var(--modal-duration) var(--modal-easing);
-}
-modal-ui > [slot="dialog"][data-open]::backdrop { opacity: 1; }
-modal-ui > [slot="dialog"][data-closing]::backdrop { opacity: 0; }
-
-/* ── Top-layer: cannot inherit component tokens ── */
-
-/* ═══════ Content panel ═══════ */
-
-modal-ui > [slot="dialog"] > [slot="panel"] {
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: column;
-  width: var(--modal-width);
-  max-height: 85vh;
-  background: var(--modal-bg);
-  color: var(--modal-header-fg);
-  font-family: var(--a-font-family); /* top-layer: --a-* required */
-  border: 1px solid var(--modal-border);
-  border-radius: var(--modal-radius);
-  box-shadow: var(--modal-shadow);
-  overflow: hidden;
-  opacity: 0;
-  transform: scale(0.95);
-}
-
-/* ═══════ Open animation ═══════ */
-
-modal-ui > [slot="dialog"][data-open] > [slot="panel"] {
-  transition: transform var(--modal-duration) var(--modal-easing),
-              opacity var(--modal-duration) var(--modal-easing);
-  transform: scale(1);
-  opacity: 1;
-}
 
-/* ═══════ Close animation ═══════ */
+  /* ═══════ Closed ═══════ */
+  :scope > [slot="dialog"]:not([open]) { display: none; }
 
-modal-ui > [slot="dialog"][data-closing] > [slot="panel"] {
-  transition: transform var(--modal-duration) var(--modal-easing),
-              opacity var(--modal-duration) var(--modal-easing);
-  transform: scale(0.95);
-  opacity: 0;
-}
+  /* ═══════ Full-viewport dialog shell ═══════ */
+  :scope > [slot="dialog"][open] {
+    box-sizing: border-box;
+    position: fixed;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    max-width: none;
+    max-height: none;
+    margin: 0;
+    padding: 0;
+    border: none;
+    background: transparent;
+    overflow: clip;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-/* ═══════ Header ═══════ */
+  /* ═══════ Backdrop ═══════ */
+  :scope > [slot="dialog"]::backdrop {
+    background: var(--modal-backdrop);
+    opacity: 0;
+    transition: opacity var(--modal-duration) var(--modal-easing);
+  }
+  :scope > [slot="dialog"][data-open]::backdrop    { opacity: 1; }
+  :scope > [slot="dialog"][data-closing]::backdrop { opacity: 0; }
 
-modal-ui [slot="header"] {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--modal-pad-header) var(--modal-pad-body);
-  border-bottom: 1px solid var(--modal-border);
-  font-size: var(--modal-heading-size);
-  font-weight: var(--modal-heading-weight);
-  color: var(--modal-header-fg);
-  flex-shrink: 0;
-}
-modal-ui [slot="header"]::before {
-  content: attr(text);
-  flex: 1;
-}
+  /* ═══════ Content panel ═══════ */
+  :scope > [slot="dialog"] > [slot="panel"] {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: var(--modal-width);
+    max-height: 85vh;
+    background: var(--modal-bg);
+    color: var(--modal-header-fg);
+    font-family: var(--modal-font-family);
+    border: 1px solid var(--modal-border);
+    border-radius: var(--modal-radius);
+    box-shadow: var(--modal-shadow);
+    overflow: hidden;
+    opacity: 0;
+    transform: scale(0.95);
+  }
 
-/* ═══════ Close button (button-ui) ═══════ */
+  /* ═══════ Open animation ═══════ */
+  :scope > [slot="dialog"][data-open] > [slot="panel"] {
+    transition: transform var(--modal-duration) var(--modal-easing),
+                opacity var(--modal-duration) var(--modal-easing);
+    transform: scale(1);
+    opacity: 1;
+  }
 
-modal-ui [slot="close"] {
-  flex-shrink: 0;
-}
+  /* ═══════ Close animation ═══════ */
+  :scope > [slot="dialog"][data-closing] > [slot="panel"] {
+    transition: transform var(--modal-duration) var(--modal-easing),
+                opacity var(--modal-duration) var(--modal-easing);
+    transform: scale(0.95);
+    opacity: 0;
+  }
 
-/* ═══════ Body ═══════ */
+  /* ═══════ Header ═══════ */
+  :scope [slot="header"] {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: var(--modal-pad-header) var(--modal-pad-body);
+    border-bottom: 1px solid var(--modal-border);
+    font-size: var(--modal-heading-size);
+    font-weight: var(--modal-heading-weight);
+    color: var(--modal-header-fg);
+    flex-shrink: 0;
+  }
+  :scope [slot="header"]::before {
+    content: attr(text);
+    flex: 1;
+  }
 
-modal-ui [slot="body"] {
-  padding: var(--modal-pad-body);
-  flex: 1;
-  overflow: auto;
-}
+  /* ═══════ Close button (button-ui) ═══════ */
+  :scope [slot="close"] {
+    flex-shrink: 0;
+  }
 
-/* ═══════ Footer ═══════ */
+  /* ═══════ Body ═══════ */
+  :scope [slot="body"] {
+    padding: var(--modal-pad-body);
+    flex: 1;
+    overflow: auto;
+  }
 
-modal-ui [slot="footer"] {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: var(--a-space-2); /* top-layer: --a-* required */
-  padding: var(--modal-pad-footer) var(--modal-pad-body);
-  border-top: 1px solid var(--modal-border);
-  flex-shrink: 0;
+  /* ═══════ Footer ═══════ */
+  :scope [slot="footer"] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--modal-footer-gap);
+    padding: var(--modal-pad-footer) var(--modal-pad-body);
+    border-top: 1px solid var(--modal-border);
+    flex-shrink: 0;
+  }
 }

package/components/noodles/noodles.js

@@ -38,6 +38,7 @@ class AdiaNoodles extends AdiaElement {
   #bound = false;
   #dragState = null;
   #dragPath = null;
+  #dragCancel = null;
 
   // ── Public API ──────────────────────────────────────────────
 
@@ -124,6 +125,9 @@ class AdiaNoodles extends AdiaElement {
   }
 
   disconnected() {
+    // Flush any in-flight drag so per-port pointermove/up listeners + their
+    // closure references are released before the host detaches.
+    this.#dragCancel?.();
     this.#resizeObs?.disconnect();
     this.#mutationObs?.disconnect();
     if (this.#rafId) cancelAnimationFrame(this.#rafId);
@@ -385,9 +389,6 @@ class AdiaNoodles extends AdiaElement {
 
     const startPos = this.#getPortPosition(fromEl, fromSide);
 
-    this.#dragState = { fromEl, fromSide, startPos, pointerId: e.pointerId };
-    this.#dragPath = null;
-
     const onMove = (ev) => {
       if (!this.#dragState) return;
       const rect = this.getBoundingClientRect();
@@ -409,23 +410,39 @@ class AdiaNoodles extends AdiaElement {
     };
 
     const onUp = (ev) => {
-      dot.releasePointerCapture(ev.pointerId);
+      try { dot.releasePointerCapture(ev.pointerId); } catch (_) { /* already released */ }
       dot.removeAttribute('data-noodle-dragging');
       dot.removeEventListener('pointermove', onMove);
       dot.removeEventListener('pointerup', onUp);
 
-      // Check if dropped on a target port
-      const target = this.#findDropTarget(ev.clientX, ev.clientY, fromEl);
-      if (target) {
-        this.connect(fromEl, target.el, fromSide, target.side);
+      // Check if dropped on a target port (skip on synthetic disconnect cancel).
+      if (ev.type === 'pointerup' && ev.clientX !== undefined) {
+        const target = this.#findDropTarget(ev.clientX, ev.clientY, fromEl);
+        if (target) this.connect(fromEl, target.el, fromSide, target.side);
       }
 
       this.#clearDropTargets();
       this.#dragState = null;
       this.#dragPath = null;
+      this.#dragCancel = null;
       this.#scheduleUpdate();
     };
 
+    // Capture the handlers so `disconnected()` can flush a mid-drag drag
+    // by calling the same onUp tear-down without a synthetic event.
+    this.#dragCancel = () => {
+      this.#dragState = null;
+      dot.removeAttribute('data-noodle-dragging');
+      dot.removeEventListener('pointermove', onMove);
+      dot.removeEventListener('pointerup', onUp);
+      this.#clearDropTargets();
+      this.#dragPath = null;
+      this.#dragCancel = null;
+    };
+
+    this.#dragState = { fromEl, fromSide, startPos, pointerId: e.pointerId };
+    this.#dragPath = null;
+
     dot.addEventListener('pointermove', onMove);
     dot.addEventListener('pointerup', onUp);
   };