@colletdev/core 0.1.6 → 0.1.8

package/generated/index.js

@@ -23,7 +23,7 @@
 import { initWasm, loadSharedStyles, loadInlineSharedStyles, loadMotionStyles, loadInlineMotionStyles, injectTokensToHead, injectFoucPrevention, CxElement, CxFormElement } from '../src/runtime.js';
 
 // Package version — used for CDN fallback URL
-const PKG_VERSION = '0.1.5';
+const PKG_VERSION = '0.1.7';
 
 // ─── Lazy WASM + CSS ───
 // WASM glue and CSS strings are NOT imported at module level.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colletdev/core",
-  "version": "0.1.6",
+  "version": "0.1.8",
   "description": "Rust/WASM Custom Elements — 48 production-grade UI components",
   "type": "module",
   "main": "generated/index.js",

package/src/runtime.js

@@ -694,23 +694,38 @@ export class CxElement extends HTMLElementBase {
     const rect = trigger.getBoundingClientRect();
     const gap = opts?.gap ?? 4;
     const vh = window.innerHeight;
+    const vw = window.innerWidth;
     const below = vh - rect.bottom - gap;
     const above = rect.top - gap;
     const openAbove = below < 120 && above > below;
 
     panel.style.position = 'fixed';
     panel.style.zIndex = '50';
-    panel.style.left = rect.left + 'px';
+
+    // Width: match trigger or use min-width
     if (opts?.matchWidth) panel.style.width = rect.width + 'px';
     else panel.style.minWidth = rect.width + 'px';
 
+    // Horizontal: clamp left edge so panel doesn't overflow right viewport edge.
+    // Also prevent negative left (overflow left edge).
+    const panelWidth = opts?.matchWidth ? rect.width : Math.max(rect.width, panel.offsetWidth || 200);
+    let left = rect.left;
+    if (left + panelWidth > vw - 8) left = Math.max(8, vw - panelWidth - 8);
+    if (left < 8) left = 8;
+    panel.style.left = left + 'px';
+
+    // Vertical: position above or below with max-height constraint.
+    // Reserves 8px margin from viewport edge so panels never touch the edge.
     if (openAbove) {
       panel.style.top = '';
       panel.style.bottom = (vh - rect.top + gap) + 'px';
+      panel.style.maxHeight = (above - 8) + 'px';
     } else {
       panel.style.top = (rect.bottom + gap) + 'px';
       panel.style.bottom = '';
+      panel.style.maxHeight = (below - 8) + 'px';
     }
+    panel.style.overflowY = 'auto';
 
     panel.setAttribute('data-placement', openAbove ? 'top' : 'bottom');
     return openAbove ? 'top' : 'bottom';
@@ -726,6 +741,8 @@ export class CxElement extends HTMLElementBase {
     panel.style.bottom = '';
     panel.style.width = '';
     panel.style.minWidth = '';
+    panel.style.maxHeight = '';
+    panel.style.overflowY = '';
     panel.removeAttribute('data-placement');
   }
 }
@@ -785,9 +802,11 @@ export class CxFormElement extends CxElement {
   get value() { return this.getAttribute?.('value') ?? ''; }
   set value(v) { if (v == null) this.removeAttribute('value'); else this.setAttribute('value', String(v)); }
   get disabled() { return this.hasAttribute('disabled'); }
-  set disabled(v) { if (v) this.setAttribute('disabled', ''); else this.removeAttribute('disabled'); }
+  // React 19 sets boolean DOM properties directly (element.disabled = "").
+  // Empty string "" is falsy — must check explicitly for false/null/undefined.
+  set disabled(v) { if (v === false || v == null) this.removeAttribute('disabled'); else this.setAttribute('disabled', ''); }
   get required() { return this.hasAttribute('required'); }
-  set required(v) { if (v) this.setAttribute('required', ''); else this.removeAttribute('required'); }
+  set required(v) { if (v === false || v == null) this.removeAttribute('required'); else this.setAttribute('required', ''); }
   get validity() { return this.#internals?.validity ?? null; }
   get validationMessage() { return this.#internals?.validationMessage ?? ''; }
   get willValidate() { return this.#internals?.willValidate ?? false; }