@antglobal/copilot-cards-web 0.0.20260915071159-dev.1 → 0.0.20260915071159-dev.5

package/dist/index.d.ts

@@ -107,7 +107,7 @@ declare function createResponsiveContext(isMobile: boolean, responsive?: Respons
  */
 
 interface RenderCardOptions extends WebActionContextOptions {
-    /** Disable the whole card using the existing project disabled appearance. Default false. */
+    /** Block whole-card interaction and add a configurable overlay without restyling nodes. Default false. */
     disabled?: boolean;
     /** Enable mobile component layout explicitly (default false). */
     isMobile?: boolean;

package/dist/index.js

@@ -713,30 +713,9 @@ function buildHeatmapOption(config) {
     };
 }
 
-const DISABLED_MARKER = 'data-copilot-card-disabled';
-function applyDisabledState(element, disabled) {
-    if (!disabled)
-        return;
-    element.setAttribute('data-disabled', 'true');
-    element.setAttribute(DISABLED_MARKER, 'true');
-    // Inline declarations work inside host ShadowRoots too. Use the shorthand
-    // to mask background images/gradients, matching the historical disabled state.
-    element.style.background = 'var(--card-disabled-background, #F5F5F5)';
-    element.style.color = 'var(--card-disabled-foreground, #C0C0C0)';
-    element.style.pointerEvents = 'none';
-    element.style.cursor = 'default';
-}
-function applyDisabledDescendants(element, disabled) {
-    if (!disabled)
-        return;
-    element.querySelectorAll('*').forEach((child) => {
-        child.setAttribute('data-disabled', 'true');
-    });
-}
-
 const controllers = new WeakMap();
 const interactionCleanups = new WeakMap();
-/** Cancel slot-owned gestures before capturing the disabled presentation. */
+/** Cancel slot-owned gestures before covering the card. */
 function registerCardDisableCleanup(element, cleanup) {
     let callbacks = interactionCleanups.get(element);
     if (!callbacks) {
@@ -762,15 +741,13 @@ const BLOCKED_EVENTS = [
     'compositionstart', 'compositionupdate', 'compositionend',
     'choice-request-change', 'choice-navigate',
 ];
-const TOUCH_EVENTS = ['pointerdown', 'pointerup', 'touchstart', 'touchend', 'mousedown', 'mouseup'];
+const TOUCH_EVENTS = ['pointerdown', 'pointerup', 'touchstart', 'touchend', 'mousedown', 'mouseup', 'wheel'];
 const TAB_TARGETS = [
     'a[href]', 'area[href]', 'button', 'input', 'select', 'textarea', 'summary',
     'iframe', 'object', 'embed', 'audio[controls]', 'video[controls]',
     '[tabindex]', '[contenteditable]:not([contenteditable="false"])',
 ].join(',');
-const VISUAL_ATTRIBUTES = ['data-disabled', 'data-copilot-card-disabled'];
-const ownsStyle = (name) => name === 'background' || name.startsWith('background-')
-    || name === 'color' || name === 'pointer-events' || name === 'cursor';
+const CARD_DISABLED_ATTRIBUTE = 'data-card-disabled';
 function restoreAttribute(element, name, value) {
     if (value === null)
         element.removeAttribute(name);
@@ -784,7 +761,9 @@ function createCardDisabledController(container, initiallyDisabled = false) {
     let updateDepth = 0;
     let applyingPresentation = false;
     let previousAriaDisabled = null;
-    let snapshots = [];
+    let previousDisabledMarker = null;
+    let overlay;
+    let mountStyles = [];
     let tabSnapshots = [];
     let tabObserver;
     const block = (event) => {
@@ -876,14 +855,39 @@ function createCardDisabledController(container, initiallyDisabled = false) {
     }
     function restorePresentation() {
         restoreTabNavigation();
-        for (const { element, attributes, styles } of snapshots) {
-            VISUAL_ATTRIBUTES.forEach((name, index) => restoreAttribute(element, name, attributes[index]));
-            if (styles) {
-                Array.from(element.style).filter(ownsStyle).forEach(name => element.style.removeProperty(name));
-                styles.forEach(([name, value, priority]) => element.style.setProperty(name, value, priority));
-            }
+        overlay?.remove();
+        for (const [name, value, priority] of mountStyles) {
+            if (value)
+                container.style.setProperty(name, value, priority);
+            else
+                container.style.removeProperty(name);
         }
-        snapshots = [];
+        mountStyles = [];
+    }
+    function coverCard() {
+        const root = container.firstElementChild;
+        if (!root)
+            return;
+        const style = container.ownerDocument.defaultView?.getComputedStyle(container);
+        const ownStyle = (name, value) => {
+            mountStyles.push([name, container.style.getPropertyValue(name), container.style.getPropertyPriority(name)]);
+            container.style.setProperty(name, value, 'important');
+        };
+        if (!style?.position || style.position === 'static')
+            ownStyle('position', 'relative');
+        // Keep the mask above card content without covering neighboring messages.
+        ownStyle('isolation', 'isolate');
+        overlay ?? (overlay = container.ownerDocument.createElement('div'));
+        overlay.setAttribute('data-card-disabled-overlay', '');
+        overlay.setAttribute('aria-hidden', 'true');
+        overlay.style.cssText = 'position:absolute;inset:0;z-index:2147483647;pointer-events:auto;cursor:default;'
+            + 'background:var(--card-disabled-overlay-background, rgba(255, 255, 255, 0.6));';
+        // A dedicated mount normally shares the root card's bounds. Respect a mount
+        // radius when provided, otherwise match the rendered card's rounded corners.
+        const rootStyle = container.ownerDocument.defaultView?.getComputedStyle(root);
+        overlay.style.borderRadius = style?.borderRadius && style.borderRadius !== '0px'
+            ? style.borderRadius : rootStyle?.borderRadius ?? '';
+        container.appendChild(overlay);
     }
     function applyPresentation() {
         if (!disabled || disposed || updateDepth > 0 || applyingPresentation)
@@ -891,27 +895,13 @@ function createCardDisabledController(container, initiallyDisabled = false) {
         applyingPresentation = true;
         try {
             // Blur/popup callbacks can synchronously update or toggle the card.
-            // Always snapshot its current underlying presentation, never our overlay.
+            // Reattach only after renderer updates and popup/gesture cleanup finish.
             restorePresentation();
             closeTransientUI(container);
             blurCardInput();
             if (!disabled || disposed)
                 return;
-            for (const element of container.querySelectorAll('*')) {
-                const isRoot = element.parentElement === container;
-                snapshots.push({
-                    element,
-                    attributes: VISUAL_ATTRIBUTES.map(name => element.getAttribute(name)),
-                    styles: isRoot ? Array.from(element.style).filter(ownsStyle)
-                        .map(name => [name, element.style.getPropertyValue(name), element.style.getPropertyPriority(name)]) : undefined,
-                });
-            }
-            for (const root of Array.from(container.children)) {
-                if (!(root instanceof HTMLElement))
-                    continue;
-                applyDisabledState(root, true);
-                applyDisabledDescendants(root, true);
-            }
+            coverCard();
             excludeFromTabNavigation(container);
         }
         finally {
@@ -946,7 +936,9 @@ function createCardDisabledController(container, initiallyDisabled = false) {
             epoch += 1;
             if (disabled) {
                 previousAriaDisabled = container.getAttribute('aria-disabled');
+                previousDisabledMarker = container.getAttribute(CARD_DISABLED_ATTRIBUTE);
                 container.setAttribute('aria-disabled', 'true');
+                container.setAttribute(CARD_DISABLED_ATTRIBUTE, 'true');
                 listen(true);
                 blurCardInput();
                 applyPresentation();
@@ -954,6 +946,7 @@ function createCardDisabledController(container, initiallyDisabled = false) {
             else {
                 restorePresentation();
                 restoreAttribute(container, 'aria-disabled', previousAriaDisabled);
+                restoreAttribute(container, CARD_DISABLED_ATTRIBUTE, previousDisabledMarker);
                 listen(false);
             }
         },
@@ -9661,6 +9654,27 @@ function createCardNodeAccess(container) {
     };
 }
 
+const DISABLED_MARKER = 'data-copilot-card-disabled';
+function applyDisabledState(element, disabled) {
+    if (!disabled)
+        return;
+    element.setAttribute('data-disabled', 'true');
+    element.setAttribute(DISABLED_MARKER, 'true');
+    // Inline declarations work inside host ShadowRoots too. Use the shorthand
+    // to mask background images/gradients, matching the historical disabled state.
+    element.style.background = 'var(--card-disabled-background, #F5F5F5)';
+    element.style.color = 'var(--card-disabled-foreground, #C0C0C0)';
+    element.style.pointerEvents = 'none';
+    element.style.cursor = 'default';
+}
+function applyDisabledDescendants(element, disabled) {
+    if (!disabled)
+        return;
+    element.querySelectorAll('*').forEach((child) => {
+        child.setAttribute('data-disabled', 'true');
+    });
+}
+
 const FORCE_REPLACE = Symbol('bound-force-replace');
 const REPEAT_APPEND = Symbol('bound-repeat-append');
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antglobal/copilot-cards-web",
-  "version": "0.0.20260915071159-dev.1",
+  "version": "0.0.20260915071159-dev.5",
   "description": "Web Component renderer for copilot bot card SDK — PC + Mobile + WebView unified rendering via Custom Elements",
   "type": "module",
   "module": "./dist/index.js",
@@ -28,7 +28,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@antglobal/copilot-cards-core": "0.0.20260915071159-dev.1",
+    "@antglobal/copilot-cards-core": "0.0.20260915071159-dev.5",
     "echarts": "^5.6.0",
     "marked": "^18.0.5",
     "tslib": "^2.8.1",