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

package/dist/index.d.ts

@@ -1295,7 +1295,7 @@ interface ChoiceListProps {
     indicatorStyle?: Record<string, any>;
     /** Style merged into selected indicators */
     selectedIndicatorStyle?: Record<string, any>;
-    /** Checked mark used by multiple mode; defaults to built-in `check_bold` */
+    /** Selected mark override; single mode keeps its radio dot when omitted, while multiple mode defaults to `check_bold` */
     checkedIcon?: ChoiceIndicatorIcon;
 }
 interface ChoiceIndicatorIcon {
@@ -1323,7 +1323,7 @@ interface ChoiceItemProps {
     indicatorStyle?: Record<string, any>;
     /** Per-item selected indicator style */
     selectedIndicatorStyle?: Record<string, any>;
-    /** Per-item checked mark override */
+    /** Per-item selected mark override; also replaces the single-select radio dot */
     checkedIcon?: ChoiceIndicatorIcon;
 }
 interface PasscodeInputProps {

package/dist/index.js

@@ -706,6 +706,7 @@ function buildHeatmapOption(config) {
  */
 // ─── Slot Layout Constants ──────────────────────────────────────
 const SLOT_LAYOUT = {
+    FLEX: 'flex',
     COLUMNS: 'columns',
     GRID: 'grid',
     HORIZONTAL_SCROLL: 'horizontalScroll',
@@ -716,6 +717,30 @@ const SLOT_LAYOUT = {
     TABLE: 'table',
     CHART: 'chart',
 };
+// ─── Dispatcher ─────────────────────────────────────────────────
+/**
+ * Apply host-level layout styles based on the slot key.
+ * Called from renderDefault BEFORE props.style so explicit styles can override.
+ * Layouts that require wrapper DOM continue to render in renderSlotLayout.
+ */
+function applySlotBaseStyle(container, props) {
+    const flex = props.slots?.[SLOT_LAYOUT.FLEX];
+    if (!flex || typeof flex !== 'object')
+        return;
+    const config = flex.config && typeof flex.config === 'object' ? flex.config : {};
+    container.style.display = 'flex';
+    container.style.flexDirection = config.direction ?? 'column';
+    container.style.alignItems = config.align ?? 'flex-start';
+    container.style.justifyContent = config.justify ?? 'flex-start';
+    container.style.flexWrap = config.wrap ?? 'nowrap';
+    container.style.gap = resolveFlexGap(config.gap);
+}
+function resolveFlexGap(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return `${value}px`;
+    }
+    return typeof value === 'string' && value.length > 0 ? value : '0px';
+}
 /**
  * Render children into a container using the slot layout strategy.
  * Returns true if a special layout was applied (children already appended).
@@ -2336,6 +2361,30 @@ function sanitizeIconHtml(icon) {
     walk(tpl.content);
     return tpl.innerHTML;
 }
+function escapeIconAttribute(value) {
+    return value
+        .replace(/&/g, '&')
+        .replace(/"/g, '"')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+}
+function isDirectImageUrl(icon) {
+    const normalized = icon.replace(/[\s\x00-\x1f]/g, '').toLowerCase();
+    return /^(?:https?:\/\/|\/\/|data:image\/)/.test(normalized)
+        || /^(?:\.{0,2}\/).+\.(?:avif|gif|jpe?g|png|svg|webp)(?:[?#].*)?$/i.test(icon);
+}
+/**
+ * Button.icon historically accepts sanitized HTML or text. A direct image URL
+ * is a common shorthand, so convert only recognizable image URLs to markup and
+ * leave inline SVG, <img> HTML, emoji, and other text on the existing path.
+ */
+function renderButtonIcon(icon) {
+    const value = String(icon ?? '').trim();
+    if (isDirectImageUrl(value)) {
+        return `<img class="card-btn-url-icon" src="${escapeIconAttribute(value)}" alt="" aria-hidden="true" />`;
+    }
+    return sanitizeIconHtml(value);
+}
 class CardButton extends BaseElement {
     render() {
         if (!this.shadowRoot || !this._node)
@@ -2490,12 +2539,18 @@ class CardButton extends BaseElement {
           width: 1em;
           height: 1em;
         }
+        .card-btn-url-icon {
+          display: block;
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
       </style>
       <button
         class="card-btn ${variant} ${isMobile ? 'card-mobile' : 'card-desktop'}"
         ${disabled ? 'disabled' : ''}
         style="${inlineStyle}"
-      ><span class="card-btn-content">${icon ? `<span class="card-btn-icon">${sanitizeIconHtml(String(icon))}</span>` : ''}${displayText}</span></button>
+      ><span class="card-btn-content">${icon ? `<span class="card-btn-icon">${renderButtonIcon(icon)}</span>` : ''}${displayText}</span></button>
     `);
     }
 }
@@ -7013,11 +7068,12 @@ class CardChoiceItem extends BaseElement {
             ...(selected ? selectedIndicatorStyle || {} : {}),
         }, isExpressionResultStyle);
         const indicatorRole = selectionMode === 'single' ? 'radio' : 'checkbox';
-        const resolvedCheckedIcon = checkedIcon ?? listCheckedIcon ?? {
+        const configuredCheckedIcon = checkedIcon ?? listCheckedIcon;
+        const resolvedCheckedIcon = configuredCheckedIcon ?? {
             name: 'check_bold',
             size: 12,
         };
-        const checkedMark = selectionMode === 'multiple'
+        const checkedMark = selectionMode === 'multiple' || configuredCheckedIcon
             ? `<span class="choice-icon" aria-hidden="true">${renderIconContent(resolvedCheckedIcon)}</span>`
             : '<span class="radio-dot" aria-hidden="true"></span>';
         this.setAttribute('data-selected', String(selected));
@@ -7656,6 +7712,8 @@ function renderDefault(node, props, isMobile, responsive) {
     div.className = `card-element card-${node.type.toLowerCase()} ${isMobile ? 'card-mobile' : 'card-desktop'}`;
     div.setAttribute('data-card-id', node.id);
     div.setAttribute('data-card-type', node.type);
+    // Apply slot base styles FIRST (so props.style can override)
+    applySlotBaseStyle(div, props);
     if (props.style && typeof props.style === 'object') {
         const resolvedStyle = buildStyleString(props.isExpressionResultStyle
             ? props.style

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antglobal/copilot-cards-web",
-  "version": "0.0.20260806095059-dev.1",
+  "version": "0.0.20260811080429-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.20260806095059-dev.1",
+    "@antglobal/copilot-cards-core": "0.0.20260811080429-dev.5",
     "echarts": "^5.6.0",
     "marked": "^18.0.5",
     "tslib": "^2.8.1",