@colletdev/core 0.1.3

package/src/elements/profile_menu.js

@@ -0,0 +1,213 @@
+// Custom behavior for <cx-profile-menu> — avatar trigger, dropdown menu, keyboard nav.
+//
+// The Rust component renders:
+//   <div data-profile-menu> — container
+//     <button data-floating-trigger aria-haspopup="menu" aria-expanded="false"> — avatar trigger
+//     <div role="menu" data-menu data-floating> — dropdown panel
+//       <button role="menuitem" data-item-id="{id}"> — menu items
+//       <button role="menuitemcheckbox" data-item-id="{id}" aria-checked> — checkbox items
+//       <button role="menuitemradio" data-item-id="{id}" aria-checked> — radio items
+//       <div role="separator"> — dividers
+//
+// This Custom Element wires up:
+//   - Click avatar to toggle menu open/close
+//   - Click menu item → cx-action event + close
+//   - Click checkbox/radio → toggle aria-checked + cx-change event (no close)
+//   - Click outside / focus exit → close
+//   - Keyboard: ArrowDown/Up nav, Home/End, Enter/Space activate, Escape closes
+//
+// Source: crates/wasm-api/src/profile_menu.rs
+
+export function defineCxProfileMenu(wasmFn, baseClass) {
+  class CxProfileMenu extends baseClass {
+    static observedAttributes = ['id', 'label', 'image', 'initials', 'shape', 'size', 'width', 'entries', 'disabled'];
+    static _booleanAttrs = new Set(['disabled']);
+    static _hostDisplay = 'inline-flex';
+
+    #outsideClick = null;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+      // ── Click delegation ──
+      shadow.addEventListener('click', (e) => {
+        // Trigger button: toggle menu
+        const trigger = e.target.closest('[data-floating-trigger]');
+        if (trigger && !this._props.disabled) {
+          if (this.#isOpen()) {
+            this.#closeMenu();
+          } else {
+            this.#openMenu();
+          }
+          return;
+        }
+
+        // Menu item click (regular menuitem): close and emit
+        const mi = e.target.closest('[role="menuitem"]');
+        if (mi && !mi.hasAttribute('aria-disabled')) {
+          const id = mi.getAttribute('data-item-id') || mi.textContent.trim();
+          this._emit('cx-action', { id });
+          this.#closeMenu();
+          return;
+        }
+
+        // Checkbox/radio items: toggle state but don't close
+        const mci = e.target.closest('[role="menuitemcheckbox"],[role="menuitemradio"]');
+        if (mci && !mci.hasAttribute('aria-disabled')) {
+          const checked = mci.getAttribute('aria-checked') === 'true';
+          mci.setAttribute('aria-checked', String(!checked));
+          this._emit('cx-change', {
+            id: mci.getAttribute('data-item-id') || mci.textContent.trim(),
+            checked: !checked,
+          });
+        }
+      });
+
+      // ── Keyboard navigation ──
+      shadow.addEventListener('keydown', (e) => {
+        const menuitem = e.target.closest('[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]');
+
+        // Escape: close menu
+        if (e.key === 'Escape' && this.#isOpen()) {
+          e.preventDefault();
+          this.#closeMenu();
+          return;
+        }
+
+        // Arrow keys on trigger
+        if (e.target.closest('[data-floating-trigger]') && (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ')) {
+          if (!this.#isOpen()) {
+            e.preventDefault();
+            this.#openMenu();
+            return;
+          }
+        }
+
+        if (!menuitem) return;
+
+        if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Home' || e.key === 'End') {
+          e.preventDefault();
+          const panel = shadow.querySelector('[data-menu]');
+          if (!panel) return;
+          const all = Array.from(panel.querySelectorAll(
+            '[role="menuitem"]:not([aria-disabled]),[role="menuitemcheckbox"]:not([aria-disabled]),[role="menuitemradio"]:not([aria-disabled])'
+          ));
+          const ci = all.indexOf(menuitem);
+          if (ci === -1) return;
+          let ni = ci;
+          if (e.key === 'ArrowDown') ni = (ci + 1) % all.length;
+          else if (e.key === 'ArrowUp') ni = (ci - 1 + all.length) % all.length;
+          else if (e.key === 'Home') ni = 0;
+          else if (e.key === 'End') ni = all.length - 1;
+          all[ni].focus();
+          return;
+        }
+
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          menuitem.click();
+        }
+      });
+
+      // ── Click outside → close (mousedown fires before click) ──
+      this.#outsideClick = (e) => {
+        if (this.#isOpen() && !this.contains(e.target) && !this._shadow.contains(e.target)) {
+          this.#closeMenu();
+        }
+      };
+      document.addEventListener('mousedown', this.#outsideClick);
+
+      // ── Focus exit → close ──
+      // Must check both light DOM and shadow DOM — Node.contains() doesn't cross shadow boundaries.
+      shadow.addEventListener('focusout', () => {
+        setTimeout(() => {
+          if (this.#isOpen()) {
+            const active = this._shadow.activeElement || document.activeElement;
+            if (!this.contains(active) && !this._shadow.contains(active) && active !== this) {
+              this.#closeMenu();
+            }
+          }
+        }, 0);
+      });
+      } // end _isInitialized guard
+
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      if (this.#outsideClick) {
+        document.removeEventListener('mousedown', this.#outsideClick);
+        this.#outsideClick = null;
+      }
+      super.disconnectedCallback();
+    }
+
+    // ── State via DOM (single source of truth) ──
+
+    #isOpen() {
+      const trigger = this._shadow.querySelector('[data-floating-trigger]');
+      return trigger ? trigger.getAttribute('aria-expanded') === 'true' : false;
+    }
+
+    #openMenu() {
+      const panel = this._shadow.querySelector('[data-menu]');
+      const trigger = this._shadow.querySelector('[data-floating-trigger]');
+      if (!panel || !trigger) return;
+
+      // Position with fixed coordinates — escapes overflow:auto/scroll clipping.
+      this._positionFloatingFixed(trigger, panel, { matchWidth: true });
+
+      panel.setAttribute('data-open', '');
+      panel.classList.remove('hidden');
+      panel.style.display = 'block';
+      panel.style.pointerEvents = 'auto';
+      panel.style.opacity = '1';
+      trigger.setAttribute('aria-expanded', 'true');
+
+      // Focus first non-disabled item
+      requestAnimationFrame(() => {
+        const first = panel.querySelector(
+          '[role="menuitem"]:not([aria-disabled]),[role="menuitemcheckbox"]:not([aria-disabled]),[role="menuitemradio"]:not([aria-disabled])'
+        );
+        if (first) first.focus();
+      });
+    }
+
+    #closeMenu() {
+      const panel = this._shadow.querySelector('[data-menu]');
+      const trigger = this._shadow.querySelector('[data-floating-trigger]');
+      if (panel) {
+        panel.removeAttribute('data-open');
+        panel.classList.add('hidden');
+        panel.style.display = '';
+        panel.style.pointerEvents = '';
+        panel.style.opacity = '';
+        this._resetFloatingFixed(panel);
+      }
+      if (trigger) {
+        trigger.setAttribute('aria-expanded', 'false');
+        trigger.focus();
+      }
+    }
+
+    // ── Public imperative API ──
+    open() { this.#openMenu(); }
+    close() { this.#closeMenu(); }
+
+    _doRender() {
+      try {
+        const wasOpen = this.#isOpen();
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+        if (wasOpen) this.#openMenu();
+      } catch (e) {
+        console.error('[cx-profile-menu]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-profile-menu', CxProfileMenu);
+  return CxProfileMenu;
+}

package/src/elements/progress.d.ts

@@ -0,0 +1,18 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/progress.rs
+
+export interface CxProgressAttributes {
+    id?: string;
+    label?: string;
+    value?: number;
+    valueText?: string;
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    shape?: 'rounded' | 'sharp' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-progress': HTMLElement & CxProgressAttributes;
+  }
+}

package/src/elements/progress.js

@@ -0,0 +1,31 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/progress.rs
+
+export function defineCxProgress(wasmFn, baseClass) {
+  class CxProgress extends baseClass {
+    static observedAttributes = ['id', 'label', 'value', 'value-text', 'intent', 'shape', 'size'];
+    static _booleanAttrs = new Set([]);
+    static _numericAttrs = new Set(['value']);
+    static _focusable = false;
+    static _hostDisplay = 'block';
+
+  set value(v) { this._setProp('value', v); }
+  get value() { return this._props.value; }
+
+    connectedCallback() {
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-progress]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-progress', CxProgress);
+  return CxProgress;
+}

package/src/elements/radio_group.d.ts

@@ -0,0 +1,22 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/radio_group.rs
+
+export interface CxRadioGroupAttributes {
+    name?: string;
+    legend: string;
+    options?: string;
+    shape?: 'round' | 'rounded';
+    orientation?: 'vertical' | 'horizontal';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    selected?: string;
+    disabled?: boolean;
+    required?: boolean;
+    helperText?: string;
+    error?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-radio-group': HTMLElement & CxRadioGroupAttributes;
+  }
+}

package/src/elements/radio_group.js

@@ -0,0 +1,70 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/radio_group.rs
+
+export function defineCxRadioGroup(wasmFn, baseClass) {
+  class CxRadioGroup extends baseClass {
+    static observedAttributes = ['name', 'legend', 'options', 'shape', 'orientation', 'size', 'selected', 'disabled', 'required', 'helper-text', 'error'];
+    static _booleanAttrs = new Set(['disabled', 'required']);
+
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        // Delegated event listeners — attach once on shadow root
+        this._shadow.addEventListener('input', (e) => {
+          if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') {
+            this._setFormValue(e.target.value);
+            this._emit('cx-input', { value: e.target.value });
+          }
+        });
+        this._shadow.addEventListener('change', (e) => {
+          if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA' || e.target.tagName === 'SELECT') {
+            this._emit('cx-change', { value: e.target.value });
+          }
+        });
+
+        // Forward focus events from inner interactive elements
+        this._shadow.addEventListener('focusin', (e) => {
+          this._emit('cx-focus', { relatedTarget: e.relatedTarget });
+        });
+        this._shadow.addEventListener('focusout', (e) => {
+          this._emit('cx-blur', { relatedTarget: e.relatedTarget });
+        });
+
+        // Forward keyboard events from inner interactive elements
+        this._shadow.addEventListener('keydown', (e) => {
+          this._emit('cx-keydown', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+        this._shadow.addEventListener('keyup', (e) => {
+          this._emit('cx-keyup', { key: e.key, code: e.code, shiftKey: e.shiftKey, ctrlKey: e.ctrlKey, altKey: e.altKey, metaKey: e.metaKey });
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    _doRender() {
+      try {
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      // Sync form value after render. Event delegation on shadow root
+      // avoids duplicate listeners (innerHTML replaces old DOM nodes,
+      // but shadow root persists — delegation handles new inputs).
+      const input = this._shadow.querySelector('input, textarea, select');
+      if (input) {
+        // Sync controlled value prop → internal input property.
+        // _injectHtml's focus-preservation restores the OLD typed value
+        // to maintain cursor position during re-renders. But when the
+        // value prop explicitly changes (e.g., clearing after submit),
+        // the controlled value must win.
+        if ('value' in this._props) input.value = this._props.value;
+        this._setFormValue(input.value || '');
+      }
+      } catch (e) {
+        console.error('[cx-radio-group]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-radio-group', CxRadioGroup);
+  return CxRadioGroup;
+}

package/src/elements/scrollbar.d.ts

@@ -0,0 +1,19 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/scrollbar.rs
+
+export interface CxScrollbarAttributes {
+    id?: string;
+    shape?: 'sharp' | 'rounded' | 'pill';
+    track?: 'with-track' | 'floating';
+    axis?: 'vertical' | 'horizontal' | 'both';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    height?: string;
+    content?: string;
+    label?: string;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-scrollbar': HTMLElement & CxScrollbarAttributes;
+  }
+}

package/src/elements/scrollbar.js

@@ -0,0 +1,299 @@
+// Custom behavior for <cx-scrollbar> — scroll tracking, thumb positioning, drag.
+//
+// Progressive enhancement:
+//   CSS-only: thumb visible at idle opacity (20%) with 30% height fallback
+//   JS-enhanced: precise thumb sizing, hide/show on scroll, drag support
+//
+// Sets data-scrollbar-ready on the container when behavior initializes.
+// CSS uses this to switch from visible-fallback to hide-until-scroll mode.
+//
+// Source: crates/wasm-api/src/scrollbar.rs
+
+export function defineCxScrollbar(wasmFn, baseClass) {
+  class CxScrollbar extends baseClass {
+    static observedAttributes = ['id', 'shape', 'track', 'axis', 'size', 'height', 'label'];
+    static _booleanAttrs = new Set([]);
+    static _focusable = false;
+    // Flex column + min-height:0 lets cx-scrollbar fill grid/flex cells.
+    // Without min-height:0, grid items default to min-height:auto and
+    // height:100% children inside Shadow DOM can't resolve the cell height.
+    static _hostDisplay = 'flex';
+    static _hostSheet = (() => {
+      if (typeof CSSStyleSheet === 'undefined') return null;
+      const s = new CSSStyleSheet();
+      s.replaceSync(':host { display: flex; flex-direction: column; min-height: 0; }');
+      return s;
+    })();
+
+    #sb = null;
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+      }
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      this.#cleanup();
+      super.disconnectedCallback();
+    }
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+      } catch (e) {
+        console.error('[cx-scrollbar] render:', e);
+        return;
+      }
+      // Init scrollbar behavior separately — errors here should not
+      // prevent the component from rendering its content.
+      try {
+        this.#initScrollbar();
+      } catch (e) {
+        console.error('[cx-scrollbar] init:', e);
+        // Attempt to set data-scrollbar-ready even on failure so CSS
+        // doesn't show a stale fallback thumb with no JS positioning.
+        const root = this._shadow.querySelector('[data-scrollbar]');
+        if (root) root.setAttribute('data-scrollbar-ready', '');
+      }
+    }
+
+    #initScrollbar() {
+      this.#cleanup();
+      const shadow = this._shadow;
+      const root = shadow.querySelector('[data-scrollbar]');
+      if (!root) return;
+
+      const vp = root.querySelector('[data-scrollbar-viewport]');
+      if (!vp) return;
+
+      const axis = root.getAttribute('data-scrollbar-axis') || 'y';
+      const isBoth = axis === 'both';
+
+      const sb = {
+        vp,
+        axis,
+        dragging: false,
+        hideTimer: 0,
+        tracks: [],
+        cleanups: [],
+        rafId: 0,
+      };
+      this.#sb = sb;
+
+      // Mark as JS-enhanced — CSS hides thumb when idle
+      root.setAttribute('data-scrollbar-ready', '');
+
+      // Build track entries
+      if (isBoth) {
+        this.#addTrack(root, sb, 'y',
+          root.querySelector('[data-scrollbar-track="y"]'),
+          root.querySelector('[data-scrollbar-thumb="y"]'));
+        this.#addTrack(root, sb, 'x',
+          root.querySelector('[data-scrollbar-track="x"]'),
+          root.querySelector('[data-scrollbar-thumb="x"]'));
+      } else {
+        this.#addTrack(root, sb, axis,
+          root.querySelector('[data-scrollbar-track]'),
+          root.querySelector('[data-scrollbar-thumb]'));
+      }
+
+      // Resize observer for content changes
+      if (typeof ResizeObserver !== 'undefined') {
+        const ro = new ResizeObserver(() => this.#updateAllThumbs(root, sb));
+        ro.observe(vp);
+        // For slotted content, observe assigned elements
+        const slot = vp.querySelector('slot');
+        if (slot) {
+          const assigned = slot.assignedElements();
+          if (assigned.length) ro.observe(assigned[0]);
+          slot.addEventListener('slotchange', () => {
+            const els = slot.assignedElements();
+            if (els.length) ro.observe(els[0]);
+            this.#updateAllThumbs(root, sb);
+          });
+        } else if (vp.firstElementChild) {
+          ro.observe(vp.firstElementChild);
+        }
+        sb.ro = ro;
+      }
+
+      // Scroll listener on viewport
+      const onScroll = () => this.#onScroll(root, sb);
+      vp.addEventListener('scroll', onScroll, { passive: true });
+      sb.cleanups.push(() => vp.removeEventListener('scroll', onScroll));
+
+      // Initial thumb calculation
+      this.#updateAllThumbs(root, sb);
+    }
+
+    #addTrack(root, sb, axisKey, track, thumb) {
+      if (!track || !thumb) return;
+      const isY = axisKey === 'y';
+      const entry = { track, thumb, isY };
+      sb.tracks.push(entry);
+
+      // Track hover
+      const enter = () => root.setAttribute('data-scroll-hover', '');
+      const leave = () => {
+        if (!sb.dragging) root.removeAttribute('data-scroll-hover');
+      };
+      track.addEventListener('mouseenter', enter);
+      track.addEventListener('mouseleave', leave);
+
+      // Thumb drag — mouse
+      const mouseDown = (e) => {
+        this.#startDrag(root, sb, entry, e.clientX, e.clientY, false);
+        e.preventDefault();
+      };
+      thumb.addEventListener('mousedown', mouseDown);
+
+      // Thumb drag — touch
+      const touchStart = (e) => {
+        if (e.touches.length === 1) {
+          this.#startDrag(root, sb, entry, e.touches[0].clientX, e.touches[0].clientY, true);
+          e.preventDefault();
+        }
+      };
+      thumb.addEventListener('touchstart', touchStart, { passive: false });
+
+      sb.cleanups.push(() => {
+        track.removeEventListener('mouseenter', enter);
+        track.removeEventListener('mouseleave', leave);
+        thumb.removeEventListener('mousedown', mouseDown);
+        thumb.removeEventListener('touchstart', touchStart);
+      });
+    }
+
+    #updateAllThumbs(root, sb) {
+      if (!sb) return;
+      for (const entry of sb.tracks) {
+        this.#updateThumb(sb, entry);
+      }
+    }
+
+    #updateThumb(sb, entry) {
+      if (!sb) return;
+      const vp = sb.vp;
+      const { thumb, isY } = entry;
+
+      const scrollSize = isY ? vp.scrollHeight : vp.scrollWidth;
+      const clientSize = isY ? vp.clientHeight : vp.clientWidth;
+
+      // No overflow — hide thumb entirely
+      if (scrollSize <= clientSize) {
+        thumb.style.display = 'none';
+        return;
+      }
+      thumb.style.display = '';
+
+      // Thumb size as percentage of track (minimum 10% for grabbability)
+      const ratio = clientSize / scrollSize;
+      const thumbPct = Math.max(ratio * 100, 10);
+
+      // Thumb position
+      const scrollPos = isY ? vp.scrollTop : vp.scrollLeft;
+      const maxScroll = scrollSize - clientSize;
+      const posPct = maxScroll > 0 ? (scrollPos / maxScroll) * (100 - thumbPct) : 0;
+
+      if (isY) {
+        thumb.style.top = posPct + '%';
+        thumb.style.height = thumbPct + '%';
+        thumb.style.left = '';
+        thumb.style.width = '';
+      } else {
+        thumb.style.left = posPct + '%';
+        thumb.style.width = thumbPct + '%';
+        thumb.style.top = '';
+        thumb.style.height = '';
+      }
+    }
+
+    #onScroll(root, sb) {
+      if (!sb) return;
+
+      root.setAttribute('data-scrolling', '');
+      clearTimeout(sb.hideTimer);
+      sb.hideTimer = setTimeout(() => {
+        if (!sb.dragging && !root.hasAttribute('data-scroll-hover')) {
+          root.removeAttribute('data-scrolling');
+        }
+      }, 1200);
+
+      if (sb.rafId) return;
+      sb.rafId = requestAnimationFrame(() => {
+        sb.rafId = 0;
+        this.#updateAllThumbs(root, sb);
+      });
+    }
+
+    #startDrag(root, sb, entry, startX, startY, isTouch) {
+      if (!sb) return;
+      sb.dragging = true;
+      root.setAttribute('data-scroll-active', '');
+
+      const { isY } = entry;
+      const startMouse = isY ? startY : startX;
+      const startScroll = isY ? sb.vp.scrollTop : sb.vp.scrollLeft;
+      const trackSize = isY ? entry.track.clientHeight : entry.track.clientWidth;
+      const scrollSize = isY ? sb.vp.scrollHeight : sb.vp.scrollWidth;
+      const clientSize = isY ? sb.vp.clientHeight : sb.vp.clientWidth;
+      const maxScroll = scrollSize - clientSize;
+
+      const onMove = (ev) => {
+        let pos;
+        if (isTouch) {
+          if (ev.touches.length === 0) return;
+          pos = isY ? ev.touches[0].clientY : ev.touches[0].clientX;
+        } else {
+          pos = isY ? ev.clientY : ev.clientX;
+        }
+        const delta = pos - startMouse;
+        const scrollDelta = (delta / trackSize) * scrollSize;
+        const newScroll = Math.max(0, Math.min(maxScroll, startScroll + scrollDelta));
+        if (isY) sb.vp.scrollTop = newScroll;
+        else sb.vp.scrollLeft = newScroll;
+      };
+
+      const onUp = () => {
+        sb.dragging = false;
+        root.removeAttribute('data-scroll-active');
+        if (!root.querySelector('[data-scrollbar-track]:hover')) {
+          root.removeAttribute('data-scroll-hover');
+        }
+        if (isTouch) {
+          document.removeEventListener('touchmove', onMove);
+          document.removeEventListener('touchend', onUp);
+          document.removeEventListener('touchcancel', onUp);
+        } else {
+          document.removeEventListener('mousemove', onMove);
+          document.removeEventListener('mouseup', onUp);
+        }
+      };
+
+      if (isTouch) {
+        document.addEventListener('touchmove', onMove, { passive: false });
+        document.addEventListener('touchend', onUp);
+        document.addEventListener('touchcancel', onUp);
+      } else {
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+      }
+    }
+
+    #cleanup() {
+      const sb = this.#sb;
+      if (!sb) return;
+      if (sb.ro) sb.ro.disconnect();
+      clearTimeout(sb.hideTimer);
+      for (const fn of sb.cleanups) fn();
+      this.#sb = null;
+    }
+  }
+
+  customElements.define('cx-scrollbar', CxScrollbar);
+  return CxScrollbar;
+}