@colletdev/core 0.1.3

package/src/elements/sidebar.js

@@ -0,0 +1,322 @@
+// Custom behavior for <cx-sidebar> — nav item click, group toggle, mobile drawer.
+// Mirrors static/_behaviors/sidebar.js but operates inside shadow DOM.
+// Includes full drawer open/close for the mobile hamburger menu because the
+// Shadow DOM boundary prevents the separate dialog.js behavior from finding
+// the drawer via document.getElementById().
+// Source: crates/wasm-api/src/sidebar.rs
+
+// ─── Animation Constants (matches drawer.js design tokens) ───
+
+const OFF_SCREEN = {
+  right:  'translateX(100%)',
+  left:   'translateX(-100%)',
+  top:    'translateY(-100%)',
+  bottom: 'translateY(100%)',
+};
+
+const ENTER_DURATION = 400;
+const ENTER_EASING = 'cubic-bezier(0.2, 0, 0, 1)'; // --ease-snappy
+const EXIT_DURATION = 250;
+const EXIT_EASING = 'cubic-bezier(0.4, 0, 1, 1)';
+const BACKDROP_ENTER_DURATION = 300;
+const BACKDROP_EASING = 'ease-out';
+
+// ─── Static Stylesheet (dialog backdrop override) ───
+
+let _sheet;
+function getSheet() {
+  if (!_sheet) {
+    _sheet = new CSSStyleSheet();
+    _sheet.replaceSync([
+      'dialog[data-dialog]::backdrop {',
+      '  background: transparent !important;',
+      '  backdrop-filter: none !important;',
+      '  -webkit-backdrop-filter: none !important;',
+      '}',
+      '[data-dialog-panel] { position: relative; z-index: 1; }',
+    ].join('\n'));
+  }
+  return _sheet;
+}
+
+export function defineCxSidebar(wasmFn, baseClass) {
+  class CxSidebar extends baseClass {
+    static observedAttributes = ['id', 'label', 'groups', 'separators-after', 'side', 'state', 'shape', 'size'];
+    static _booleanAttrs = new Set([]);
+
+    connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+        const shadow = this._shadow;
+
+        // Adopt stylesheet for dialog ::backdrop override
+        const sheet = getSheet();
+        if (!shadow.adoptedStyleSheets.includes(sheet)) {
+          shadow.adoptedStyleSheets = [...shadow.adoptedStyleSheets, sheet];
+        }
+
+        // ─── Click Delegation ───
+        shadow.addEventListener('click', (e) => {
+          // Mobile hamburger trigger → open drawer
+          const dialogTrigger = e.target.closest('[data-dialog-trigger]');
+          if (dialogTrigger) {
+            const targetId = dialogTrigger.getAttribute('data-dialog-target');
+            if (targetId) {
+              const dialog = shadow.getElementById(targetId);
+              if (dialog) this.#openDrawer(dialog);
+            }
+            return;
+          }
+
+          // Drawer close button
+          if (e.target.closest('[data-dialog-close]')) {
+            this.#closeDrawer();
+            return;
+          }
+
+          // Drawer backdrop click (click on dialog element itself, not children)
+          const dialog = shadow.querySelector('dialog[data-dialog]');
+          if (dialog && dialog.open && e.target === dialog) {
+            this.#closeDrawer();
+            return;
+          }
+
+          // Nav item click
+          const item = e.target.closest('[data-sidebar-item]');
+          if (item && !item.hasAttribute('aria-disabled')) {
+            const label = item.getAttribute('data-sidebar-label') || '';
+            const href = item.getAttribute('href') || '';
+            // Mark active across both desktop and mobile nav
+            shadow.querySelectorAll('[data-sidebar-item]').forEach(el => {
+              el.removeAttribute('data-active');
+              el.removeAttribute('aria-current');
+            });
+            item.setAttribute('data-active', '');
+            item.setAttribute('aria-current', 'page');
+            this._emit('cx-navigate', { label, href });
+            // Close mobile drawer if open
+            this.#closeDrawer();
+            return;
+          }
+
+          // Collapsible group trigger
+          const groupTrigger = e.target.closest('[data-sidebar-group-trigger]');
+          if (groupTrigger) {
+            const expanded = groupTrigger.getAttribute('aria-expanded') === 'true';
+            const newExpanded = !expanded;
+            groupTrigger.setAttribute('aria-expanded', String(newExpanded));
+            const panelId = groupTrigger.getAttribute('aria-controls');
+            if (panelId) {
+              const panel = shadow.getElementById(panelId);
+              if (panel) {
+                if (newExpanded) {
+                  panel.removeAttribute('data-collapsed');
+                } else {
+                  panel.setAttribute('data-collapsed', '');
+                }
+              }
+            }
+            // Sync collapsed group IDs to _props for re-render survival
+            const collapsedIds = [];
+            shadow.querySelectorAll('[data-sidebar-group-trigger][aria-expanded="false"]').forEach(t => {
+              const label = t.textContent.trim();
+              if (label) collapsedIds.push(label);
+            });
+            this._props._collapsed_groups = collapsedIds.join(',');
+            return;
+          }
+
+          // Toggle sidebar state (expand/narrow)
+          const toggle = e.target.closest('[data-sidebar-toggle]');
+          if (toggle) {
+            const sidebar = shadow.querySelector('[data-sidebar]');
+            if (sidebar) {
+              const state = sidebar.getAttribute('data-sidebar-state') || 'expanded';
+              const next = state === 'expanded' ? 'narrow' : 'expanded';
+              sidebar.setAttribute('data-sidebar-state', next);
+              sidebar.style.setProperty('--sidebar-width', next === 'narrow' ? '4rem' : '16rem');
+              // Sync host prop — single source of truth for WASM re-renders.
+              this._props.state = next;
+              this._emit('cx-toggle', { state: next });
+            }
+            return;
+          }
+        });
+
+        // ─── Keyboard ───
+        shadow.addEventListener('keydown', (e) => {
+          if (e.key === 'Escape') {
+            // If drawer is open, close it first
+            const dialog = shadow.querySelector('dialog[data-dialog]');
+            if (dialog && dialog.open) {
+              e.preventDefault();
+              this.#closeDrawer();
+              return;
+            }
+            // Otherwise collapse open group
+            const group = e.target.closest('[data-sidebar-group]');
+            if (group) {
+              const btn = group.querySelector('[data-sidebar-group-trigger]');
+              if (btn && btn.getAttribute('aria-expanded') === 'true') {
+                btn.setAttribute('aria-expanded', 'false');
+                const panelId = btn.getAttribute('aria-controls');
+                if (panelId) {
+                  const panel = shadow.getElementById(panelId);
+                  if (panel) panel.setAttribute('data-collapsed', '');
+                }
+                // Sync collapsed group IDs to _props for re-render survival
+                const collapsedIds = [];
+                shadow.querySelectorAll('[data-sidebar-group-trigger][aria-expanded="false"]').forEach(t => {
+                  const label = t.textContent.trim();
+                  if (label) collapsedIds.push(label);
+                });
+                this._props._collapsed_groups = collapsedIds.join(',');
+                btn.focus();
+              }
+            }
+          }
+        });
+
+        // Prevent native dialog cancel (would close without animation)
+        shadow.addEventListener('cancel', (e) => {
+          e.preventDefault();
+          this.#closeDrawer();
+        });
+      } // end _isInitialized guard
+      super.connectedCallback();
+    }
+
+    disconnectedCallback() {
+      this._unlockScroll();
+      super.disconnectedCallback();
+    }
+
+    // ─── Overlay Management ───
+
+    #ensureOverlay(dialog) {
+      if (dialog.querySelector('[data-cx-overlay]')) return;
+      const el = document.createElement('div');
+      el.setAttribute('data-cx-overlay', '');
+      Object.assign(el.style, {
+        position: 'fixed',
+        inset: '0',
+        backgroundColor: 'oklch(0 0 0 / 0.3)',
+        backdropFilter: 'blur(4px)',
+        WebkitBackdropFilter: 'blur(4px)',
+        pointerEvents: 'none',
+        zIndex: '0',
+        opacity: '0',
+      });
+      dialog.prepend(el);
+    }
+
+    // ─── Open Drawer ───
+
+    #openDrawer(dialog) {
+      if (!dialog || dialog.open) return;
+
+      this.#ensureOverlay(dialog);
+      dialog.showModal();
+      this._lockScroll();
+
+      // rAF: dialog must be composited in top layer before animation
+      requestAnimationFrame(() => {
+        const panel = dialog.querySelector('[data-dialog-panel]');
+        const overlay = dialog.querySelector('[data-cx-overlay]');
+        const side = dialog.getAttribute('data-drawer') || 'left';
+        const offscreen = OFF_SCREEN[side] || OFF_SCREEN.left;
+        const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+
+        if (panel) {
+          panel.animate(
+            [{ transform: offscreen }, { transform: 'none' }],
+            { duration: reducedMotion ? 0 : ENTER_DURATION, easing: ENTER_EASING, fill: 'forwards' }
+          );
+        }
+
+        if (overlay) {
+          overlay.animate(
+            [{ opacity: 0 }, { opacity: 1 }],
+            { duration: reducedMotion ? 0 : BACKDROP_ENTER_DURATION, easing: BACKDROP_EASING, fill: 'forwards' }
+          );
+        }
+
+        dialog.setAttribute('data-open', '');
+      });
+    }
+
+    // ─── Close Drawer ───
+
+    #closeDrawer() {
+      const dialog = this._shadow.querySelector('dialog[data-dialog]');
+      if (!dialog || !dialog.open) return;
+      if (dialog.hasAttribute('data-closing')) return;
+
+      dialog.setAttribute('data-closing', '');
+      dialog.removeAttribute('data-open');
+
+      const panel = dialog.querySelector('[data-dialog-panel]');
+      const overlay = dialog.querySelector('[data-cx-overlay]');
+      const side = dialog.getAttribute('data-drawer') || 'left';
+      const offscreen = OFF_SCREEN[side] || OFF_SCREEN.left;
+      const reducedMotion = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+      const dur = reducedMotion ? 0 : EXIT_DURATION;
+
+      const cleanup = () => {
+        dialog.removeAttribute('data-closing');
+        dialog.close();
+        this._unlockScroll();
+        this._emit('cx-close', {});
+        // Return focus to hamburger trigger
+        const trigger = this._shadow.querySelector('[data-dialog-trigger]');
+        if (trigger) trigger.focus();
+      };
+
+      if (overlay) {
+        overlay.animate(
+          [{ opacity: 1 }, { opacity: 0 }],
+          { duration: dur, easing: EXIT_EASING, fill: 'forwards' }
+        );
+      }
+
+      if (panel) {
+        const anim = panel.animate(
+          [{ transform: 'none' }, { transform: offscreen }],
+          { duration: dur, easing: EXIT_EASING, fill: 'forwards' }
+        );
+        anim.finished.then(cleanup).catch(cleanup);
+      } else {
+        cleanup();
+      }
+    }
+
+    // ── Public imperative API ──
+    open() { this.#openDrawer(this._shadow.querySelector('dialog[data-dialog]')); }
+    close() { this.#closeDrawer(); }
+
+    // ─── Render ───
+
+    _doRender() {
+      try {
+        this._props.slotted = true;
+        const result = wasmFn(this._props);
+        this._injectHtml(result);
+
+        // Re-adopt stylesheet (may be stripped by base _scheduleRender)
+        const sheet = getSheet();
+        if (!this._shadow.adoptedStyleSheets.includes(sheet)) {
+          this._shadow.adoptedStyleSheets = [...this._shadow.adoptedStyleSheets, sheet];
+        }
+
+        // Inject overlay into drawer dialog (destroyed by innerHTML, re-created)
+        const dialog = this._shadow.querySelector('dialog[data-dialog]');
+        if (dialog) this.#ensureOverlay(dialog);
+      } catch (e) {
+        console.error('[cx-sidebar]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-sidebar', CxSidebar);
+  return CxSidebar;
+}

package/src/elements/skeleton.d.ts

@@ -0,0 +1,17 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/skeleton.rs
+
+export interface CxSkeletonAttributes {
+    id?: string;
+    variant?: 'text' | 'circle' | 'rectangular';
+    animation?: 'pulse' | 'wave';
+    label?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    lines?: number;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-skeleton': HTMLElement & CxSkeletonAttributes;
+  }
+}

package/src/elements/skeleton.js

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

package/src/elements/slider.d.ts

@@ -0,0 +1,28 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/slider.rs
+
+export interface CxSliderAttributes {
+    id?: string;
+    label?: string;
+    ariaLabel?: string;
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    orientation?: 'horizontal' | 'vertical';
+    shape?: 'sharp' | 'rounded' | 'pill';
+    intent?: 'neutral' | 'primary' | 'info' | 'success' | 'warning' | 'danger';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    showValue?: boolean;
+    valueText?: string;
+    helperText?: string;
+    errorText?: string;
+    disabled?: boolean;
+    unlabeled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-slider': HTMLElement & CxSliderAttributes;
+  }
+}

package/src/elements/slider.js

@@ -0,0 +1,93 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/slider.rs
+
+export function defineCxSlider(wasmFn, baseClass) {
+  class CxSlider extends baseClass {
+    static observedAttributes = ['id', 'label', 'aria-label', 'value', 'min', 'max', 'step', 'orientation', 'shape', 'intent', 'size', 'show-value', 'value-text', 'helper-text', 'error-text', 'disabled', 'unlabeled'];
+    static _booleanAttrs = new Set(['show-value', 'disabled', 'unlabeled']);
+    static _numericAttrs = new Set(['value', 'min', 'max', 'step']);
+
+
+    // Sync the fill bar (--slider-percent CSS var) + value display text
+    #syncVisual(input) {
+      if (!input) return;
+      const min = parseFloat(input.min) || 0;
+      const max = parseFloat(input.max) || 100;
+      const val = parseFloat(input.value) || 0;
+      const range = max - min;
+      const pct = range > 0 ? ((val - min) / range) * 100 : 0;
+      input.style.setProperty('--slider-percent', String(Math.max(0, Math.min(100, pct))));
+      // Update value display text
+      const display = this._shadow.querySelector('[data-slider-value]');
+      if (display) display.textContent = val % 1 === 0 ? String(val) : val.toFixed(2);
+    }
+
+    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 });
+            // Sync fill bar on every input change (drag, keyboard, click)
+            this.#syncVisual(e.target);
+          }
+        });
+        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();
+    }
+
+    // ── Public imperative API ──
+    focus() { const el = this._shadow.querySelector('input[type="range"]'); if (el) el.focus(); else super.focus(); }
+
+    _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 || '');
+      }
+      // Sync fill bar after render
+      const rangeInput = this._shadow.querySelector('input[type="range"], input[data-slider]');
+      this.#syncVisual(rangeInput);
+      } catch (e) {
+        console.error('[cx-slider]', e);
+      }
+    }
+  }
+
+  customElements.define('cx-slider', CxSlider);
+  return CxSlider;
+}

package/src/elements/speed_dial.d.ts

@@ -0,0 +1,23 @@
+// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Source: crates/wasm-api/src/speed_dial.rs
+
+export interface CxSpeedDialAttributes {
+    id: string;
+    icon: string;
+    ariaLabel?: string;
+    closeIcon?: string;
+    actions?: string;
+    variant?: 'filled' | 'outline' | 'ghost';
+    shape?: 'rounded' | 'pill';
+    size?: 'sm' | 'md' | 'lg';
+    direction?: 'up' | 'down' | 'left' | 'right';
+    backdrop?: boolean;
+    tooltips?: boolean;
+    disabled?: boolean;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'cx-speed-dial': HTMLElement & CxSpeedDialAttributes;
+  }
+}