@colletdev/core 0.1.7 → 0.1.9

package/custom-elements.json

@@ -5205,12 +5205,12 @@
               "fieldName": "id"
             },
             {
-              "name": "role",
+              "name": "text-role",
               "type": {
                 "text": "'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code'"
               },
               "default": "\"\"",
-              "fieldName": "role"
+              "fieldName": "text_role"
             },
             {
               "name": "align",

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.6';
+const PKG_VERSION = '0.1.8';
 
 // ─── 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.7",
+  "version": "0.1.9",
   "description": "Rust/WASM Custom Elements — 48 production-grade UI components",
   "type": "module",
   "main": "generated/index.js",

package/src/elements/code_block.js

@@ -1,4 +1,9 @@
-// Auto-generated by scripts/generate-elements.mjs — DO NOT EDIT
+// Custom behavior for <cx-code-block> — copy-to-clipboard with visual feedback.
+//
+// The Rust component renders a [data-copy-code] button in the titlebar
+// (Standard variant) or as a group-hover overlay (Minimal variant).
+// This Custom Element adds clipboard write + icon swap on click.
+//
 // Source: crates/wasm-api/src/code_block.rs
 
 export function defineCxCodeBlock(wasmFn, baseClass) {
@@ -7,8 +12,33 @@ export function defineCxCodeBlock(wasmFn, baseClass) {
     static _booleanAttrs = new Set(['line-numbers', 'copy-button', 'traffic-lights', 'slotted']);
     static _hostDisplay = 'block';
 
-
     connectedCallback() {
+      if (!this._isInitialized) {
+        this._markInitialized();
+
+        // Copy button click → clipboard write → icon swap feedback.
+        this._shadow.addEventListener('click', (e) => {
+          const copyBtn = e.target.closest('[data-copy-code]');
+          if (!copyBtn) return;
+
+          const codeEl = this._shadow.querySelector('[data-code-content]');
+          if (!codeEl) return;
+
+          const text = codeEl.textContent || '';
+          navigator.clipboard.writeText(text).then(() => {
+            const iconSpan = copyBtn.querySelector('span');
+            if (!iconSpan) return;
+            const original = iconSpan.innerHTML;
+            iconSpan.innerHTML = '<svg class="size-full" aria-hidden="true"><use href="#icon-check"></use></svg>';
+            copyBtn.setAttribute('aria-label', 'Copied!');
+            setTimeout(() => {
+              iconSpan.innerHTML = original;
+              copyBtn.setAttribute('aria-label', 'Copy code');
+            }, 2000);
+          });
+        });
+      } // end _isInitialized guard
+
       super.connectedCallback();
     }
 

package/src/elements/text.d.ts

@@ -3,7 +3,7 @@
 
 export interface CxTextAttributes {
     id?: string;
-    role?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
+    textRole?: 'display' | 'h1' | 'h2' | 'h3' | 'label-lg' | 'label-md' | 'label-sm' | 'body-lg' | 'body-md' | 'body-sm' | 'overline' | 'caption' | 'code';
     content?: string;
     align?: 'start' | 'center' | 'end';
     color?: 'primary' | 'inverse' | 'muted';

package/src/elements/text.js

@@ -3,7 +3,7 @@
 
 export function defineCxText(wasmFn, baseClass) {
   class CxText extends baseClass {
-    static observedAttributes = ['id', 'role', 'align', 'color', 'muted', 'strong', 'italic', 'underline', 'underline-strong', 'truncate', 'line-clamp', 'balance', 'prose', 'element-as'];
+    static observedAttributes = ['id', 'text-role', 'align', 'color', 'muted', 'strong', 'italic', 'underline', 'underline-strong', 'truncate', 'line-clamp', 'balance', 'prose', 'element-as'];
     static _booleanAttrs = new Set(['muted', 'strong', 'italic', 'underline', 'underline-strong', 'truncate', 'balance', 'prose']);
     static _numericAttrs = new Set(['line-clamp']);
     static _focusable = false;

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');
   }
 }