@happyvertical/smrt-ui 0.34.9 → 0.35.0

package/dist/components/layout/SummaryCard.svelte

@@ -5,6 +5,7 @@
  * Shows a label with a prominent value, optionally with a count badge
  * and link functionality.
  */
+import type { Snippet } from 'svelte';
 import { ripple } from '../../actions/ripple.js';
 import { Icon } from '../display/index.js';
 
@@ -19,8 +20,18 @@ export interface Props {
   highlight?: boolean;
   /** Make card clickable with href */
   href?: string;
-  /** Optional icon (name for Icon or SVG string) */
+  /** Optional icon name, rendered via the {@link Icon} component. */
   icon?: string;
+  /**
+   * Optional custom icon content, rendered as a Svelte snippet. Use this
+   * escape hatch for bespoke icon markup. It replaces the former raw-SVG
+   * **string** support, removed in #1591: SummaryCard no longer renders any
+   * consumer-supplied value via `{@html}` (an XSS sink). `iconContent` is
+   * rendered as a snippet, so the trust boundary moves to the consumer — the
+   * snippet's contents are whatever the consumer authors. When both
+   * `iconContent` and `icon` are provided, `iconContent` wins.
+   */
+  iconContent?: Snippet;
   /** Value color variant */
   variant?: 'default' | 'success' | 'warning' | 'danger';
 }
@@ -32,6 +43,7 @@ const {
   highlight = false,
   href,
   icon,
+  iconContent,
   variant = 'default',
 }: Props = $props();
 
@@ -48,10 +60,16 @@ const valueColorClass = $derived.by(() => {
       return 'color-default';
   }
 });
-
-const isSvg = $derived(icon?.startsWith('<svg'));
 </script>
 
+{#snippet cardIcon()}
+  {#if iconContent}
+    <span class="card-icon">{@render iconContent()}</span>
+  {:else if icon}
+    <span class="card-icon"><Icon name={icon} size={24} /></span>
+  {/if}
+{/snippet}
+
 {#if href}
   <a 
     class="summary-card" 
@@ -60,15 +78,7 @@ const isSvg = $derived(icon?.startsWith('<svg'));
     {href}
     use:ripple
   >
-    {#if icon}
-      <span class="card-icon">
-        {#if isSvg}
-          {@html icon}
-        {:else}
-          <Icon name={icon} size={24} />
-        {/if}
-      </span>
-    {/if}
+    {@render cardIcon()}
     <div class="card-content">
       <span class="card-label">
         {label}
@@ -84,15 +94,7 @@ const isSvg = $derived(icon?.startsWith('<svg'));
   </a>
 {:else}
   <div class="summary-card" class:highlight>
-    {#if icon}
-      <span class="card-icon">
-        {#if isSvg}
-          {@html icon}
-        {:else}
-          <Icon name={icon} size={24} />
-        {/if}
-      </span>
-    {/if}
+    {@render cardIcon()}
     <div class="card-content">
       <span class="card-label">
         {label}

package/dist/components/layout/SummaryCard.svelte.d.ts

@@ -1,3 +1,10 @@
+/**
+ * SummaryCard - Statistic/summary display card refactored for Material 3
+ *
+ * Shows a label with a prominent value, optionally with a count badge
+ * and link functionality.
+ */
+import type { Snippet } from 'svelte';
 export interface Props {
     /** Card label */
     label: string;
@@ -9,8 +16,18 @@ export interface Props {
     highlight?: boolean;
     /** Make card clickable with href */
     href?: string;
-    /** Optional icon (name for Icon or SVG string) */
+    /** Optional icon name, rendered via the {@link Icon} component. */
     icon?: string;
+    /**
+     * Optional custom icon content, rendered as a Svelte snippet. Use this
+     * escape hatch for bespoke icon markup. It replaces the former raw-SVG
+     * **string** support, removed in #1591: SummaryCard no longer renders any
+     * consumer-supplied value via `{@html}` (an XSS sink). `iconContent` is
+     * rendered as a snippet, so the trust boundary moves to the consumer — the
+     * snippet's contents are whatever the consumer authors. When both
+     * `iconContent` and `icon` are provided, `iconContent` wins.
+     */
+    iconContent?: Snippet;
     /** Value color variant */
     variant?: 'default' | 'success' | 'warning' | 'danger';
 }

package/dist/components/layout/SummaryCard.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SummaryCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SummaryCard.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kDAAkD;IAClD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;CACxD;AAoFD,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"SummaryCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SummaryCard.svelte.ts"],"names":[],"mappings":"AAGA;;;;;GAKG;AACH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKtC,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,+BAA+B;IAC/B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mEAAmE;IACnE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,0BAA0B;IAC1B,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;CACxD;AA4ED,QAAA,MAAM,WAAW,2CAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/layout/__tests__/SummaryCard.test.js

@@ -6,6 +6,7 @@
  * axe-clean output across a couple of states.
  */
 import { render, screen } from '@testing-library/svelte';
+import { createRawSnippet } from 'svelte';
 import { describe, expect, it } from 'vitest';
 import { expectNoA11yViolations } from '../../../test-support/a11y';
 import SummaryCard from '../SummaryCard.svelte';
@@ -37,15 +38,36 @@ describe('SummaryCard', () => {
         });
         expect(container.querySelector('.card-count')).toBeNull();
     });
-    it('renders a raw SVG icon when icon starts with <svg', () => {
+    it('renders an icon via the Icon component when icon is a known name', () => {
+        const { container } = render(SummaryCard, {
+            // `search` is a real Icon preset, so the rendered <path> must carry a
+            // non-empty `d` — proving the icon-name path actually resolved (an
+            // unknown name would still render an <svg> but with an empty path).
+            props: { label: 'Visitors', value: 99, icon: 'search' },
+        });
+        const iconPath = container.querySelector('.card-icon svg path');
+        expect(iconPath?.getAttribute('d')).toBeTruthy();
+    });
+    it('does NOT inject a raw SVG string as markup (no {@html} sink) — #1591', () => {
         const { container } = render(SummaryCard, {
             props: {
                 label: 'Visitors',
                 value: 99,
-                icon: '<svg data-testid="svg-icon" viewBox="0 0 24 24"></svg>',
+                // A would-be XSS payload: the string is forwarded to <Icon name>, never
+                // rendered as HTML, so the attacker-controlled element must be absent.
+                icon: '<svg data-evil="1" viewBox="0 0 24 24"></svg>',
             },
         });
-        expect(container.querySelector('.card-icon svg')).not.toBeNull();
+        expect(container.querySelector('svg[data-evil]')).toBeNull();
+    });
+    it('renders custom icon markup via the iconContent snippet', () => {
+        const iconContent = createRawSnippet(() => ({
+            render: () => '<span data-testid="custom-icon">★</span>',
+        }));
+        const { container } = render(SummaryCard, {
+            props: { label: 'Starred', value: 1, iconContent },
+        });
+        expect(container.querySelector('.card-icon [data-testid="custom-icon"]')).not.toBeNull();
     });
     it('renders as a clickable link when href is provided', () => {
         render(SummaryCard, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@happyvertical/smrt-ui",
-  "version": "0.34.9",
+  "version": "0.35.0",
   "description": "Domain-agnostic Svelte 5 UI runtime for SMRT: primitives, i18n client, theme system, and module UI registry",
   "type": "module",
   "main": "./dist/index.js",
@@ -114,7 +114,7 @@
   },
   "dependencies": {
     "esm-env": "^1.2.2",
-    "@happyvertical/smrt-types": "0.34.9"
+    "@happyvertical/smrt-types": "0.35.0"
   },
   "peerDependencies": {
     "svelte": "^5.18.2"