@colletdev/core 0.1.3 → 0.1.4

package/custom-elements.json

@@ -2903,6 +2903,14 @@
               "default": "false",
               "fieldName": "show_prev_next"
             },
+            {
+              "name": "variant",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "variant"
+            },
             {
               "name": "prev-label",
               "type": {
@@ -2919,6 +2927,14 @@
               "default": "\"\"",
               "fieldName": "next_label"
             },
+            {
+              "name": "load-more-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\"",
+              "fieldName": "load_more_label"
+            },
             {
               "name": "page-size-options",
               "type": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colletdev/core",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Rust/WASM Custom Elements — 48 production-grade UI components",
   "type": "module",
   "main": "generated/index.js",
@@ -41,7 +41,14 @@
     "custom-elements.json"
   ],
   "customElements": "custom-elements.json",
-  "keywords": ["web-components", "custom-elements", "rust", "wasm", "ui", "design-system"],
+  "keywords": [
+    "web-components",
+    "custom-elements",
+    "rust",
+    "wasm",
+    "ui",
+    "design-system"
+  ],
   "author": "Dan",
   "license": "MIT",
   "sideEffects": false,

package/src/elements/chat_input.js

@@ -20,10 +20,11 @@ export function defineCxChatInput(wasmFn, baseClass) {
       if (!this._isInitialized) {
         this._markInitialized();
 
-        // Input event delegation for cx-input
+        // Input event delegation for cx-input + multiline detection
         this._shadow.addEventListener('input', (e) => {
           if (e.target.tagName === 'TEXTAREA') {
             this._emit('cx-input', { value: e.target.value });
+            this.#detectMultiline(e.target);
           }
         });
 
@@ -56,6 +57,33 @@ export function defineCxChatInput(wasmFn, baseClass) {
       super.connectedCallback();
     }
 
+    // ── Multiline Detection ──
+    // Toggles `data-multiline` on the container when textarea exceeds one row.
+    // CSS drives the pill→rounded morph via `data-[multiline]:rounded-2xl` and
+    // `group-data-[multiline]:` selectors on child elements.
+    #detectMultiline(textarea) {
+      const container = textarea.closest('[data-chat-input]');
+      if (!container) return;
+
+      // Store baseline height on first measure (single-line height).
+      if (!textarea._baseH) {
+        textarea._baseH = textarea.scrollHeight;
+      }
+
+      const hasNewline = textarea.value.includes('\n');
+      const hasOverflow = textarea._baseH ? textarea.scrollHeight > textarea._baseH + 2 : false;
+      const isMulti = hasNewline || hasOverflow;
+      const current = container.hasAttribute('data-multiline');
+
+      if (isMulti !== current) {
+        if (isMulti) {
+          container.setAttribute('data-multiline', '');
+        } else {
+          container.removeAttribute('data-multiline');
+        }
+      }
+    }
+
     // ── Public imperative API ──
     focus() {
       const el = this._shadow.querySelector('textarea');
@@ -64,9 +92,25 @@ export function defineCxChatInput(wasmFn, baseClass) {
 
     _doRender() {
       try {
+        // Preserve textarea value across re-renders (innerHTML replacement).
+        const prevTextarea = this._shadow.querySelector('textarea');
+        const savedValue = prevTextarea?.value || '';
+
         this._props.slotted = true;
         const result = wasmFn(this._props);
         this._injectHtml(result);
+
+        // Restore textarea value and re-measure multiline state.
+        const textarea = this._shadow.querySelector('textarea');
+        if (textarea && savedValue) {
+          textarea.value = savedValue;
+          requestAnimationFrame(() => this.#detectMultiline(textarea));
+        } else if (textarea) {
+          // First render: measure baseline height.
+          requestAnimationFrame(() => {
+            textarea._baseH = textarea.scrollHeight;
+          });
+        }
       } catch (e) {
         console.error('[cx-chat-input]', e);
       }

package/src/elements/pagination.d.ts

@@ -10,8 +10,10 @@ export interface CxPaginationAttributes {
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     showInfo?: boolean;
     showPrevNext?: boolean;
+    variant?: string;
     prevLabel?: string;
     nextLabel?: string;
+    loadMoreLabel?: string;
     pageSizeOptions?: string;
 }
 

package/src/elements/pagination.js

@@ -3,7 +3,7 @@
 
 export function defineCxPagination(wasmFn, baseClass) {
   class CxPagination extends baseClass {
-    static observedAttributes = ['id', 'current-page', 'page-size', 'total-items', 'label', 'size', 'show-info', 'show-prev-next', 'prev-label', 'next-label', 'page-size-options'];
+    static observedAttributes = ['id', 'current-page', 'page-size', 'total-items', 'label', 'size', 'show-info', 'show-prev-next', 'variant', 'prev-label', 'next-label', 'load-more-label', 'page-size-options'];
     static _booleanAttrs = new Set(['show-info', 'show-prev-next']);
     static _numericAttrs = new Set(['current-page', 'page-size', 'total-items']);
     static _hostDisplay = 'block';

package/src/runtime.js

@@ -231,6 +231,12 @@ const compatSheet = createSyncSheet([
   // Scoped to [data-check] so it doesn't break "hidden data-[open]:block" on dropdowns.
   '[data-check].hidden { display: none !important; }',
   '',
+  // Tailwind v4 press/scale compat: MicroInteraction::press() generates
+  // `transition-transform active:scale-[0.97]`. TW4 uses the individual CSS
+  // `scale` property (not `transform: scale(...)`). `transition: transform`
+  // won't animate it. This rule overrides the transition to target `scale`.
+  '.transition-transform { transition-property: scale !important; }',
+  '',
   // Ensure border-box in shadow DOM (Tailwind preflight may not load first)
   '*, *::before, *::after { box-sizing: border-box; }',
   '',