diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/stories/conversation-thread.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/stories/conversation-thread.stories.ts
index e817060d841..65311813fb2 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/stories/conversation-thread.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/conversation-thread/stories/conversation-thread.stories.ts
@@ -132,8 +132,10 @@ type DemoArtifact = {
   id: string;
   title: string;
   subtitle: string;
-  /** Image preview URL when the attachment is a visual file. */
+  /** Image or video preview URL when the attachment is a visual file. */
   thumbnailUrl?: string;
+  /** Renders `thumbnailUrl` as a muted, unplayed `<video>` (first-frame poster) instead of an `<img>`. */
+  isVideo?: boolean;
   objectUrl?: string;
   /** File-type label for non-image media tiles (for example, "PDF"). */
   badge?: string;
@@ -159,24 +161,41 @@ const getFileBadge = (fileName: string): string | undefined => {
 
 const renderDemoArtifactThumbnail = (
   artifact: DemoArtifact
-): ReturnType<typeof html> =>
-  artifact.thumbnailUrl
-    ? html`
-        <img
-          slot="thumbnail"
-          src=${artifact.thumbnailUrl}
-          alt=${artifact.title}
-          style="inline-size:100%;block-size:100%;object-fit:cover;"
-        />
-      `
-    : html`
-        <div
-          slot="thumbnail"
-          role="img"
-          aria-label=${artifact.title}
-          style="inline-size:100%;block-size:100%;background:#f3f3f3;"
-        ></div>
-      `;
+): ReturnType<typeof html> => {
+  if (artifact.thumbnailUrl && artifact.isVideo) {
+    return html`
+      <video
+        slot="thumbnail"
+        src=${artifact.thumbnailUrl}
+        aria-label=${artifact.title}
+        muted
+        playsinline
+        preload="metadata"
+        style="inline-size:100%;block-size:100%;object-fit:cover;"
+      ></video>
+    `;
+  }
+
+  if (artifact.thumbnailUrl) {
+    return html`
+      <img
+        slot="thumbnail"
+        src=${artifact.thumbnailUrl}
+        alt=${artifact.title}
+        style="inline-size:100%;block-size:100%;object-fit:cover;"
+      />
+    `;
+  }
+
+  return html`
+    <div
+      slot="thumbnail"
+      role="img"
+      aria-label=${artifact.title}
+      style="inline-size:100%;block-size:100%;background:#f3f3f3;"
+    ></div>
+  `;
+};
 
 type DemoTurn = {
   id: string;
@@ -254,12 +273,18 @@ class ConversationFullPatternDemo extends LitElement {
   private responseTimer: number | null = null;
   private responseTargetId: string | null = null;
   private lastPrompt = '';
+  /** Every object URL created via `appendFiles`, live for as long as this demo is mounted. */
+  private readonly objectUrls = new Set<string>();
 
   public override disconnectedCallback(): void {
     if (this.responseTimer !== null) {
       window.clearTimeout(this.responseTimer);
       this.responseTimer = null;
     }
+    for (const url of this.objectUrls) {
+      URL.revokeObjectURL(url);
+    }
+    this.objectUrls.clear();
     super.disconnectedCallback();
   }
 
@@ -306,11 +331,9 @@ class ConversationFullPatternDemo extends LitElement {
       (hasArtifacts ? this.artifacts.map((a) => a.title).join(', ') : '');
     this.responseTargetId = systemTurn.id;
     this.promptValue = '';
-    for (const artifact of this.artifacts) {
-      if (artifact.objectUrl) {
-        URL.revokeObjectURL(artifact.objectUrl);
-      }
-    }
+    // Do not revoke these artifacts' object URLs here: `userTurn.artifacts`
+    // above still references the same blob URLs for display in the sent
+    // message. They're revoked in `disconnectedCallback` instead.
     this.artifacts = [];
 
     this.responseTimer = window.setTimeout(() => {
@@ -377,7 +400,14 @@ class ConversationFullPatternDemo extends LitElement {
       const isImage =
         mimeType.startsWith('image/') ||
         /\.(png|jpe?g|gif|webp|bmp|svg|avif)$/.test(lowerName);
-      const objectUrl = isImage ? URL.createObjectURL(file) : undefined;
+      const isVideo =
+        mimeType.startsWith('video/') ||
+        /\.(mp4|webm|ogg|ogv|mov)$/.test(lowerName);
+      const objectUrl =
+        isImage || isVideo ? URL.createObjectURL(file) : undefined;
+      if (objectUrl) {
+        this.objectUrls.add(objectUrl);
+      }
       const sizeLabel =
         typeof file.size === 'number'
           ? `${Math.max(1, Math.round(file.size / 1024))} KB`
@@ -389,6 +419,7 @@ class ConversationFullPatternDemo extends LitElement {
         title: fileName,
         subtitle: sizeLabel,
         thumbnailUrl: objectUrl,
+        isVideo,
         objectUrl,
         badge: isImage ? undefined : getFileBadge(fileName),
       } satisfies DemoArtifact;
@@ -450,6 +481,7 @@ class ConversationFullPatternDemo extends LitElement {
     const removed = this.artifacts.find((item) => item.id === artifactId);
     if (removed?.objectUrl) {
       URL.revokeObjectURL(removed.objectUrl);
+      this.objectUrls.delete(removed.objectUrl);
     }
     this.artifacts = this.artifacts.filter((item) => item.id !== artifactId);
   };
@@ -470,18 +502,36 @@ class ConversationFullPatternDemo extends LitElement {
   private renderTurns() {
     return this.turns.map((turn) => {
       if (turn.role === 'user') {
+        const artifacts = turn.artifacts ?? [];
         return html`
-          ${(turn.artifacts ?? []).map(
-            (artifact) => html`
-              <swc-conversation-turn type="user">
-                <swc-user-message type="media">
-                  ${renderDemoArtifactThumbnail(artifact)}
-                  <span slot="title">${artifact.title}</span>
-                  <span slot="subtitle">${artifact.subtitle}</span>
-                </swc-user-message>
-              </swc-conversation-turn>
-            `
-          )}
+          ${artifacts.length > 0
+            ? html`
+                <swc-conversation-turn type="user">
+                  <swc-user-message type="attachments">
+                    ${artifacts.map(
+                      (artifact) => html`
+                        <swc-user-message-attachment type="media">
+                          ${renderDemoArtifactThumbnail(artifact)}
+                          ${artifact.badge
+                            ? html`
+                                <span slot="badge">${artifact.badge}</span>
+                              `
+                            : ''}
+                          ${artifacts.length === 1
+                            ? html`
+                                <span slot="title">${artifact.title}</span>
+                                <span slot="subtitle">
+                                  ${artifact.subtitle}
+                                </span>
+                              `
+                            : ''}
+                        </swc-user-message-attachment>
+                      `
+                    )}
+                  </swc-user-message>
+                </swc-conversation-turn>
+              `
+            : ''}
           ${turn.text
             ? html`
                 <swc-conversation-turn type="user">
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/pattern-overview.mdx b/2nd-gen/packages/swc/patterns/conversational-ai/pattern-overview.mdx
index 14f72e3d3b3..4fa81c7a8ca 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/pattern-overview.mdx
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/pattern-overview.mdx
@@ -174,7 +174,7 @@ A column-aligned slot for one participant. Set `type="user"` or `type="system"`
 
 #### `swc-user-message`
 
-The user's message bubble. Explicit `type="copy"`, `type="card"`, or `type="media"` controls the rendering for text, file attachments, and image attachments respectively.
+The user's message bubble. `type="copy"` renders plain text; `type="attachments"` accepts one or more `<swc-user-message-attachment>` children for file and image attachments, grouping and sizing them automatically (a single attachment gets a larger "hero" tile than a grouped one).
 
 <Canvas
   of={UserMessageStories.Content}
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/UserMessage.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/UserMessage.ts
index c6f26e7ecce..b4b66392280 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/UserMessage.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/UserMessage.ts
@@ -10,59 +10,320 @@
  * governing permissions and limitations under the License.
  */
 
-import { CSSResultArray, html, TemplateResult } from 'lit';
-import { property } from 'lit/decorators.js';
+import { CSSResultArray, html, PropertyValues, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { MutationController } from '@lit-labs/observers/mutation-controller.js';
 
+import { Chevron75Icon } from '@adobe/spectrum-wc/icon/elements/index.js';
 import { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';
 
+import '@adobe/spectrum-wc/components/icon/swc-icon.js';
+
+import { uniqueId } from '../../../utils/id.js';
+import { UserMessageAttachment } from './user-message-attachment/UserMessageAttachment.js';
+
 import styles from './user-message.css';
 
-export type UserMessageType = 'copy' | 'card' | 'media';
+export type UserMessageType = 'copy' | 'attachments';
+
+/** Grid tiles beyond this count collapse behind "Show all" by default. */
+const VISIBLE_MEDIA_COUNT = 4;
 
 /**
  * User-authored conversation bubble for conversational AI pattern exploration.
- * Default slot content is rendered only when `type="copy"` and ignored when
- * `type="card"` or `type="media"`.
+ * Default slot content is rendered only when `type="copy"` and ignored otherwise.
+ *
+ * `type="attachments"` accepts one or more `<swc-user-message-attachment>`
+ * children — a single attachment (media or card) is a common case, not a
+ * special one, and gets a larger "hero" tile size than a grouped attachment:
+ * `type="media"` attachments lay out in a 4-column grid — beyond
+ * {@link VISIBLE_MEDIA_COUNT}, the last visible tile gets a "View all (N)"
+ * scrim overlay instead of being grouped with a separate control — and
+ * `type="card"` attachments stack full-width, each in its own row, never
+ * merged into the grid's box. `swc-user-message` owns this grouping,
+ * disclosure, and hero-vs-grouped sizing; the attachment tiles are
+ * presentation-only.
  *
  * @element swc-user-message
  * @slot - Message copy content when `type="copy"`.
- * @slot thumbnail - Attachment preview when `type="card"` or `type="media"`.
- * @slot title - Attachment title when `type="card"` or `type="media"`.
- * @slot subtitle - Attachment subtitle when `type="card"` or `type="media"`.
+ * @slot - `<swc-user-message-attachment>` elements when `type="attachments"`.
+ * @fires swc-user-message-toggle - Dispatched when the "Show all/less" disclosure is toggled (`type="attachments"` only).
+ * Detail: `{ open: boolean }`
  */
 export class UserMessage extends SpectrumElement {
+  private readonly attachmentsPanelId = uniqueId('swc-user-message-panel');
+
   /**
    * Visual content type for the user message bubble.
    */
   @property({ type: String, reflect: true })
   public type: UserMessageType = 'copy';
 
+  /** Whether the attachments grid's "Show all" disclosure is open (`type="attachments"` only). */
+  @property({ type: Boolean, reflect: true })
+  public open = false;
+
+  /** Label for the overflow overlay on the last visible media tile (collapsed). */
+  @property({ type: String, attribute: 'show-all-label' })
+  public showAllLabel = 'View all';
+
+  /** Label for the disclosure button when expanded. */
+  @property({ type: String, attribute: 'show-less-label' })
+  public showLessLabel = 'Show less';
+
+  @state()
+  private _mediaCount = 0;
+
+  @state()
+  private _cardCount = 0;
+
+  @state()
+  private _hasMediaOverflow = false;
+
+  /**
+   * Number of grid columns actually needed (1-{@link VISIBLE_MEDIA_COUNT}).
+   * Keeps the grid's `fit-content` box shrink-wrapped to a partial single
+   * row (e.g. 3 tiles) instead of always reserving 4 columns' width.
+   */
+  @state()
+  private _mediaColumnCount = VISIBLE_MEDIA_COUNT;
+
   public static override get styles(): CSSResultArray {
     return [styles];
   }
 
+  public constructor() {
+    super();
+
+    new MutationController(this, {
+      config: {
+        attributes: true,
+        attributeFilter: ['type'],
+        childList: true,
+        subtree: true,
+      },
+      callback: () => {
+        this._routeAttachments();
+      },
+    });
+  }
+
+  public override connectedCallback(): void {
+    super.connectedCallback();
+    this._routeAttachments();
+  }
+
+  protected override willUpdate(changed: PropertyValues<this>): void {
+    if (changed.has('open')) {
+      this._routeAttachments();
+    }
+  }
+
+  private _isAttachmentElement(
+    element: Element
+  ): element is UserMessageAttachment {
+    return (
+      element instanceof UserMessageAttachment ||
+      element.localName === 'swc-user-message-attachment'
+    );
+  }
+
+  private _routeAttachments(): void {
+    if (this.type !== 'attachments') {
+      return;
+    }
+
+    const attachments = Array.from(this.children).filter(
+      (element): element is UserMessageAttachment =>
+        this._isAttachmentElement(element)
+    );
+    const mediaAttachments = attachments.filter(
+      (el) => el.getAttribute('type') !== 'card'
+    );
+    const cardAttachments = attachments.filter(
+      (el) => el.getAttribute('type') === 'card'
+    );
+    const hasOverflow = mediaAttachments.length > VISIBLE_MEDIA_COUNT;
+
+    for (const el of attachments) {
+      const targetSlot =
+        el.getAttribute('type') === 'card'
+          ? 'attachment-card'
+          : 'attachment-media';
+      if (el.getAttribute('slot') !== targetSlot) {
+        el.setAttribute('slot', targetSlot);
+      }
+    }
+
+    mediaAttachments.forEach((el, index) => {
+      el.hidden = hasOverflow && !this.open && index >= VISIBLE_MEDIA_COUNT;
+    });
+    this._alignMediaGrid(mediaAttachments, hasOverflow);
+
+    this._mediaCount = mediaAttachments.length;
+    this._cardCount = cardAttachments.length;
+    this._hasMediaOverflow = hasOverflow;
+  }
+
+  /**
+   * Explicitly places every visible tile in the grid (row/column) instead of
+   * leaving it to implicit auto-placement, for two reasons:
+   *
+   * 1. A trailing row shorter than {@link VISIBLE_MEDIA_COUNT} columns should
+   *    hug the end of the grid (empty cells on the start side), not the
+   *    start (default auto-placement fills from the start).
+   * 2. The "View all" overlay (`.swc-UserMessage-attachments-overflow`) is
+   *    explicitly positioned at row 1 / column {@link VISIBLE_MEDIA_COUNT}
+   *    so it can stack on top of the last visible tile. Per the CSS Grid
+   *    placement algorithm, explicitly-positioned items reserve their cell
+   *    *before* auto-placed items are laid out, so leaving the 4th tile to
+   *    auto-placement pushes it into row 2 instead of under the overlay.
+   *    Explicit placement here avoids that fight entirely.
+   */
+  private _alignMediaGrid(
+    mediaAttachments: UserMessageAttachment[],
+    hasOverflow: boolean
+  ): void {
+    const visible = mediaAttachments.filter(
+      (_el, index) =>
+        !(hasOverflow && !this.open && index >= VISIBLE_MEDIA_COUNT)
+    );
+    const total = visible.length;
+    const columnCount = Math.max(1, Math.min(total, VISIBLE_MEDIA_COUNT));
+    this._mediaColumnCount = columnCount;
+
+    mediaAttachments.forEach((el) => {
+      el.style.removeProperty('grid-row-start');
+      el.style.removeProperty('grid-column-start');
+    });
+
+    visible.forEach((el, index) => {
+      const row = Math.floor(index / VISIBLE_MEDIA_COUNT);
+      const isLastRow = row === Math.floor((total - 1) / VISIBLE_MEDIA_COUNT);
+      const itemsInThisRow = isLastRow
+        ? total - row * VISIBLE_MEDIA_COUNT
+        : VISIBLE_MEDIA_COUNT;
+      // Offset against the grid's actual column count (`columnCount`), not
+      // the constant VISIBLE_MEDIA_COUNT: when there's only a single row
+      // (total <= VISIBLE_MEDIA_COUNT) the container itself shrinks to fit
+      // that row exactly, so there's no leftover space to offset into —
+      // using the constant here would place items past the declared column
+      // count and force CSS Grid to fabricate an extra implicit column.
+      const columnOffset = isLastRow ? columnCount - itemsInThisRow : 0;
+      const posInRow = index - row * VISIBLE_MEDIA_COUNT;
+
+      el.style.gridRowStart = String(row + 1);
+      el.style.gridColumnStart = String(columnOffset + posInRow + 1);
+    });
+  }
+
+  private _handleAttachmentsToggle(): void {
+    this.open = !this.open;
+    this.dispatchEvent(
+      new CustomEvent('swc-user-message-toggle', {
+        bubbles: true,
+        composed: true,
+        detail: { open: this.open },
+      })
+    );
+  }
+
+  /**
+   * Scrim + pill overlay on the last visible media tile, shown only while
+   * collapsed. Uses `?hidden` (not a conditional template) so it stays in
+   * the DOM and fades out via CSS in step with the newly-revealed tiles
+   * fading in, instead of vanishing instantly while they fade in gradually.
+   */
+  private _renderMediaOverflow(): TemplateResult | '' {
+    if (!this._hasMediaOverflow) {
+      return '';
+    }
+
+    return html`
+      <button
+        type="button"
+        class="swc-UserMessage-attachments-overflow"
+        ?hidden=${this.open}
+        aria-expanded="false"
+        aria-controls=${this.attachmentsPanelId}
+        @click=${this._handleAttachmentsToggle}
+      >
+        <span class="swc-UserMessage-attachments-overflow-pill">
+          ${this.showAllLabel} (${this._mediaCount})
+        </span>
+      </button>
+    `;
+  }
+
+  /** "Show less" control below the grid, shown only while expanded. */
+  private _renderShowLessToggle(): TemplateResult | '' {
+    if (!this._hasMediaOverflow || !this.open) {
+      return '';
+    }
+
+    return html`
+      <button
+        type="button"
+        class="swc-UserMessage-attachments-toggle"
+        aria-expanded="true"
+        aria-controls=${this.attachmentsPanelId}
+        @click=${this._handleAttachmentsToggle}
+      >
+        ${this.showLessLabel}
+        <swc-icon
+          class="swc-UserMessage-attachments-chevron swc-UserMessage-attachments-chevron--down"
+          style="--swc-icon-inline-size:10px;--swc-icon-block-size:10px;"
+          aria-hidden="true"
+        >
+          ${Chevron75Icon()}
+        </swc-icon>
+      </button>
+    `;
+  }
+
+  private _renderAttachments(): TemplateResult {
+    // A single attachment (no siblings) gets the larger "hero" tile size
+    // instead of the smaller grouped-grid size (Figma spec: a lone media
+    // attachment is a 180×180 hero, a lone card attachment caps at 440px).
+    const isSingleMedia = this._mediaCount === 1 && this._cardCount === 0;
+    const isSingleCard = this._cardCount === 1 && this._mediaCount === 0;
+
+    return html`
+      <div id=${this.attachmentsPanelId} class="swc-UserMessage-attachments">
+        <div
+          class=${classMap({
+            'swc-UserMessage-attachments-media': true,
+            'swc-UserMessage-attachments-media--single': isSingleMedia,
+          })}
+          style="grid-template-columns: repeat(${this
+            ._mediaColumnCount}, var(--swc-user-message-attachment-media-size, 96px));"
+          ?hidden=${this._mediaCount === 0}
+        >
+          <slot name="attachment-media"></slot>
+          ${this._renderMediaOverflow()}
+        </div>
+        <div
+          class=${classMap({
+            'swc-UserMessage-attachments-files': true,
+            'swc-UserMessage-attachments-files--single': isSingleCard,
+          })}
+          ?hidden=${this._cardCount === 0}
+        >
+          <slot name="attachment-card"></slot>
+        </div>
+        ${this._renderShowLessToggle()}
+      </div>
+    `;
+  }
+
   protected override render(): TemplateResult {
-    return this.type === 'copy'
-      ? html`
-          <slot></slot>
-        `
-      : html`
-          <div
-            class="swc-UserMessage-attachment swc-UserMessage-attachment--${this
-              .type}"
-          >
-            <div class="swc-UserMessage-thumbnail">
-              <slot name="thumbnail"></slot>
-            </div>
-            <div class="swc-UserMessage-meta">
-              <div class="swc-UserMessage-title">
-                <slot name="title"></slot>
-              </div>
-              <div class="swc-UserMessage-subtitle">
-                <slot name="subtitle"></slot>
-              </div>
-            </div>
-          </div>
-        `;
+    if (this.type === 'copy') {
+      return html`
+        <slot></slot>
+      `;
+    }
+
+    return this._renderAttachments();
   }
 }
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/index.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/index.ts
index 28320b39c8d..0e95c093b7e 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/index.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/index.ts
@@ -9,4 +9,21 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+import { defineElement } from '@adobe/spectrum-wc-core/element/index.js';
+
+import './user-message-attachment/index.js';
+
+import { UserMessageAttachment } from './user-message-attachment/UserMessageAttachment.js';
+import { UserMessage } from './UserMessage.js';
+
 export * from './UserMessage.js';
+export * from './user-message-attachment/UserMessageAttachment.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'swc-user-message': UserMessage;
+    'swc-user-message-attachment': UserMessageAttachment;
+  }
+}
+
+defineElement('swc-user-message', UserMessage);
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/stories/user-message.stories.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/stories/user-message.stories.ts
index 1ba97d028f9..ad9da150e3f 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/stories/user-message.stories.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/stories/user-message.stories.ts
@@ -28,7 +28,7 @@ delete (argTypes as Record<string, unknown>).content;
 argTypes.type = {
   ...argTypes.type,
   control: { type: 'select' },
-  options: ['copy', 'card', 'media'],
+  options: ['copy', 'attachments'],
   table: {
     category: 'attributes',
     defaultValue: { summary: 'copy' },
@@ -77,10 +77,6 @@ export const Playground: Story = {
     type: 'copy',
     'default-slot':
       'Can you help me create a 45-minute presentation, with animations, for an executive update?',
-    'thumbnail-slot':
-      '<img src="https://placehold.co/180x180" alt="Placeholder" />',
-    'title-slot': 'Hilton commercial assets',
-    'subtitle-slot': '2026',
   },
   decorators: [withUserTurn],
   tags: ['dev'],
@@ -95,10 +91,6 @@ export const Overview: Story = {
     type: 'copy',
     'default-slot':
       'Can you help me create a 45-minute presentation, with animations, for an executive update?',
-    'thumbnail-slot':
-      '<img src="https://placehold.co/180x180" alt="Placeholder" />',
-    'title-slot': 'Hilton commercial assets',
-    'subtitle-slot': '2026',
   },
   decorators: [withUserTurn],
   tags: ['overview'],
@@ -136,39 +128,103 @@ export const Content: Story = {
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-conversation-turn type="user">
-          <swc-user-message type="card">
-            <div
-              slot="thumbnail"
-              style="inline-size:32px;block-size:32px;border-radius:3px;background:var(--swc-gray-200);flex-shrink:0;"
-              role="img"
-              aria-label="File"
-            ></div>
-            <span slot="title">Hilton commercial assets</span>
-            <span slot="subtitle">2026</span>
+          <swc-user-message type="attachments">
+            <swc-user-message-attachment type="card">
+              <div
+                slot="thumbnail"
+                style="inline-size:32px;block-size:32px;border-radius:3px;background:var(--swc-gray-200);flex-shrink:0;"
+                role="img"
+                aria-label="File"
+              ></div>
+              <span slot="title">Hilton commercial assets</span>
+              <span slot="subtitle">2026</span>
+            </swc-user-message-attachment>
           </swc-user-message>
         </swc-conversation-turn>
         <span class="swc-Detail swc-Detail--sizeS">Card</span>
       </div>
       <div style="display:flex;flex-direction:column;gap:8px;">
         <swc-conversation-turn type="user">
-          <swc-user-message type="media">
-            <div
-              slot="thumbnail"
-              style="background:linear-gradient(135deg,#a78bfa,#f472b6);"
-              role="img"
-              aria-label="Campaign preview"
-            ></div>
-            <span slot="title">Hilton commercial assets</span>
-            <span slot="subtitle">2026</span>
+          <swc-user-message type="attachments">
+            <swc-user-message-attachment type="media">
+              <div
+                slot="thumbnail"
+                style="background:linear-gradient(135deg,#a78bfa,#f472b6);"
+                role="img"
+                aria-label="Campaign preview"
+              ></div>
+              <span slot="title">Hilton commercial assets</span>
+              <span slot="subtitle">2026</span>
+            </swc-user-message-attachment>
           </swc-user-message>
         </swc-conversation-turn>
-        <span class="swc-Detail swc-Detail--sizeS">Media</span>
+        <span class="swc-Detail swc-Detail--sizeS">
+          Media (single attachment gets a larger hero tile)
+        </span>
       </div>
     </div>
   `,
   tags: ['options'],
 };
 
+const mediaAttachment = (src: string, alt: string) => html`
+  <swc-user-message-attachment type="media">
+    <img slot="thumbnail" src=${src} alt=${alt} />
+  </swc-user-message-attachment>
+`;
+
+export const Attachments: Story = {
+  render: () => html`
+    <swc-conversation-turn type="user">
+      <swc-user-message type="attachments">
+        ${mediaAttachment(
+          'https://picsum.photos/id/64/240/240',
+          'User portrait'
+        )}
+        ${mediaAttachment(
+          'https://picsum.photos/id/823/240/240',
+          'Team profile'
+        )}
+        ${mediaAttachment('https://picsum.photos/id/56/240/240', 'Texture')}
+        <swc-user-message-attachment type="card">
+          <div
+            slot="thumbnail"
+            style="inline-size:32px;block-size:32px;border-radius:3px;background:var(--swc-gray-200);"
+            role="img"
+            aria-label="Video file"
+          ></div>
+          <span slot="title">colorful-video-1770010806412.mp4</span>
+          <span slot="subtitle">18 MB</span>
+        </swc-user-message-attachment>
+      </swc-user-message>
+    </swc-conversation-turn>
+  `,
+  tags: ['options'],
+};
+
+// ──────────────────────────────
+//    BEHAVIORS STORIES
+// ──────────────────────────────
+
+export const AttachmentsDisclosure: Story = {
+  render: () => html`
+    <div style="min-block-size:300px;">
+      <swc-conversation-turn type="user">
+        <swc-user-message type="attachments">
+          ${mediaAttachment('https://picsum.photos/id/64/240/240', 'Photo 1')}
+          ${mediaAttachment('https://picsum.photos/id/823/240/240', 'Photo 2')}
+          ${mediaAttachment('https://picsum.photos/id/56/240/240', 'Photo 3')}
+          ${mediaAttachment('https://picsum.photos/id/65/240/240', 'Photo 4')}
+          ${mediaAttachment('https://picsum.photos/id/48/240/240', 'Photo 5')}
+          ${mediaAttachment('https://picsum.photos/id/28/240/240', 'Photo 6')}
+        </swc-user-message>
+      </swc-conversation-turn>
+    </div>
+  `,
+  tags: ['behaviors'],
+};
+AttachmentsDisclosure.storyName = 'Show all / show less';
+
 // ────────────────────────────────
 //    ACCESSIBILITY STORY
 // ────────────────────────────────
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/swc-user-message.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/swc-user-message.ts
index 33b2d8b287c..07a0d7a00bc 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/swc-user-message.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/swc-user-message.ts
@@ -11,6 +11,8 @@
  */
 import { defineElement } from '@adobe/spectrum-wc-core/element/index.js';
 
+import './user-message-attachment/index.js';
+
 import { UserMessage } from './UserMessage.js';
 
 declare global {
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.a11y.spec.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.a11y.spec.ts
index e96fa10ed77..f2f6eb0d1f5 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.a11y.spec.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.a11y.spec.ts
@@ -64,4 +64,17 @@ test.describe('UserMessage - ARIA Snapshots', () => {
       - text: Hilton commercial assets 2026
     `);
   });
+
+  test('should expose the show all disclosure and grouped attachments', async ({
+    page,
+  }) => {
+    const root = await gotoStory(
+      page,
+      'patterns-conversational-ai-user-message--attachments-disclosure',
+      'swc-user-message'
+    );
+    await expect(root).toMatchAriaSnapshot(`
+      - button "View all (6)" [expanded=false]
+    `);
+  });
 });
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.test.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.test.ts
index 6dc2b48cd51..90a0640ea95 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.test.ts
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/test/user-message.test.ts
@@ -19,6 +19,7 @@ import '../swc-user-message.js';
 
 import { getComponent, getComponents } from '../../../../utils/test-utils.js';
 import { meta, Overview } from '../stories/user-message.stories.js';
+import { UserMessageAttachment } from '../user-message-attachment/UserMessageAttachment.js';
 import { UserMessage } from '../UserMessage.js';
 
 export default {
@@ -55,46 +56,61 @@ export const TypeAndSlotTest: Story = {
     );
 
     await step(
-      'type reflects to the host and drives card structure',
+      'a single card attachment reflects "attachments" on the host and gets the hero row',
       async () => {
-        el.type = 'card';
+        el.type = 'attachments';
         el.innerHTML = `
-        <div
-          slot="thumbnail"
-          role="img"
-          aria-label="File preview"
-        ></div>
-        <span slot="title">Brand guidelines</span>
-        <span slot="subtitle">PDF</span>
+        <swc-user-message-attachment type="card">
+          <div slot="thumbnail" role="img" aria-label="File preview"></div>
+          <span slot="title">Brand guidelines</span>
+          <span slot="subtitle">PDF</span>
+        </swc-user-message-attachment>
       `;
         await el.updateComplete;
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        await el.updateComplete;
 
-        const title = el.shadowRoot?.querySelector('.swc-UserMessage-title');
-        const subtitle = el.shadowRoot?.querySelector(
-          '.swc-UserMessage-subtitle'
+        const attachment = el.querySelector<UserMessageAttachment>(
+          'swc-user-message-attachment'
+        )!;
+        await attachment.updateComplete;
+
+        const heroFilesBox = el.shadowRoot?.querySelector(
+          '.swc-UserMessage-attachments-files--single'
+        );
+        const title = attachment.shadowRoot?.querySelector(
+          '.swc-UserMessageAttachment-title'
         );
-        expect(el.getAttribute('type')).toBe('card');
+        const subtitle = attachment.shadowRoot?.querySelector(
+          '.swc-UserMessageAttachment-subtitle'
+        );
+        expect(el.getAttribute('type')).toBe('attachments');
+        expect(heroFilesBox).toBeTruthy();
         expect(title).toBeTruthy();
         expect(subtitle).toBeTruthy();
       }
     );
 
     await step(
-      'media type renders the media attachment container',
+      'a single media attachment gets the hero grid tile',
       async () => {
-        el.type = 'media';
+        el.type = 'attachments';
         el.innerHTML = `
-        <div slot="thumbnail" role="img" aria-label="Preview"></div>
-        <span slot="title">Preview image</span>
-        <span slot="subtitle">PNG</span>
+        <swc-user-message-attachment type="media">
+          <div slot="thumbnail" role="img" aria-label="Preview"></div>
+          <span slot="title">Preview image</span>
+          <span slot="subtitle">PNG</span>
+        </swc-user-message-attachment>
       `;
         await el.updateComplete;
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        await el.updateComplete;
 
-        const attachment = el.shadowRoot?.querySelector(
-          '.swc-UserMessage-attachment--media'
+        const heroMediaBox = el.shadowRoot?.querySelector(
+          '.swc-UserMessage-attachments-media--single'
         );
-        expect(el.getAttribute('type')).toBe('media');
-        expect(attachment).toBeTruthy();
+        expect(el.getAttribute('type')).toBe('attachments');
+        expect(heroMediaBox).toBeTruthy();
       }
     );
 
@@ -118,7 +134,7 @@ export const TypeAndSlotTest: Story = {
 };
 
 export const DefaultSlotHiddenForAttachmentTypesTest: Story = {
-  name: 'Default slot not used for card and media',
+  name: 'Default slot not used for attachments',
   ...Overview,
   play: async ({ canvasElement, step }) => {
     const el = await getComponent<UserMessage>(
@@ -126,34 +142,28 @@ export const DefaultSlotHiddenForAttachmentTypesTest: Story = {
       'swc-user-message'
     );
 
-    const attachmentMarkup = (label: string) => `
-        <p data-test-default-slotted>${label}</p>
-        <div slot="thumbnail" role="img" aria-label="Preview"></div>
-        <span slot="title">T</span>
-        <span slot="subtitle">S</span>
+    await step(
+      'type="attachments": no unnamed slot; unslotted children are not shown',
+      async () => {
+        el.type = 'attachments';
+        el.innerHTML = `
+        <p data-test-default-slotted>Default copy that must not appear in the bubble for attachments type.</p>
+        <swc-user-message-attachment type="media">
+          <div slot="thumbnail" role="img" aria-label="Preview"></div>
+        </swc-user-message-attachment>
       `;
+        await el.updateComplete;
 
-    for (const type of ['card', 'media'] as const) {
-      await step(
-        `type="${type}": no unnamed slot; default-slot children are not shown`,
-        async () => {
-          el.type = type;
-          el.innerHTML = attachmentMarkup(
-            'Default copy that must not appear in the bubble for attachment types.'
-          );
-          await el.updateComplete;
-
-          expect(el.shadowRoot?.querySelector('slot:not([name])')).toBeNull();
-
-          const leaked = el.querySelector<HTMLElement>(
-            '[data-test-default-slotted]'
-          );
-          expect(leaked).toBeTruthy();
-          const { width, height } = leaked!.getBoundingClientRect();
-          expect(width * height).toBe(0);
-        }
-      );
-    }
+        expect(el.shadowRoot?.querySelector('slot:not([name])')).toBeNull();
+
+        const leaked = el.querySelector<HTMLElement>(
+          '[data-test-default-slotted]'
+        );
+        expect(leaked).toBeTruthy();
+        const { width, height } = leaked!.getBoundingClientRect();
+        expect(width * height).toBe(0);
+      }
+    );
 
     await step(
       'type="copy" keeps an unnamed (default) slot in the shadow root',
@@ -170,6 +180,146 @@ export const DefaultSlotHiddenForAttachmentTypesTest: Story = {
   },
 };
 
+function attachmentsMarkup(mediaCount: number, cardCount: number): string {
+  const media = Array.from(
+    { length: mediaCount },
+    (_, index) => `
+      <swc-user-message-attachment type="media">
+        <div slot="thumbnail" role="img" aria-label="Photo ${index + 1}"></div>
+      </swc-user-message-attachment>
+    `
+  ).join('');
+
+  const cards = Array.from(
+    { length: cardCount },
+    (_, index) => `
+      <swc-user-message-attachment type="card">
+        <div slot="thumbnail" role="img" aria-label="File icon"></div>
+        <span slot="title">File ${index + 1}</span>
+        <span slot="subtitle">1 MB</span>
+      </swc-user-message-attachment>
+    `
+  ).join('');
+
+  return media + cards;
+}
+
+export const AttachmentsGroupingTest: Story = {
+  ...Overview,
+  play: async ({ canvasElement, step }) => {
+    const el = await getComponent<UserMessage>(
+      canvasElement,
+      'swc-user-message'
+    );
+
+    await step(
+      'media count at or below the visible limit renders no disclosure',
+      async () => {
+        el.type = 'attachments';
+        el.open = false;
+        el.innerHTML = attachmentsMarkup(4, 1);
+        await el.updateComplete;
+
+        const overflow = el.shadowRoot?.querySelector(
+          '.swc-UserMessage-attachments-overflow'
+        );
+        expect(overflow).toBeNull();
+        const toggle = el.shadowRoot?.querySelector(
+          '.swc-UserMessage-attachments-toggle'
+        );
+        expect(toggle).toBeNull();
+
+        const mediaChildren = Array.from(el.children).filter(
+          (child) => child.getAttribute('type') !== 'card'
+        );
+        const cardChildren = Array.from(el.children).filter(
+          (child) => child.getAttribute('type') === 'card'
+        );
+        expect(
+          mediaChildren.every((child) => !child.hasAttribute('hidden'))
+        ).toBe(true);
+        expect(
+          cardChildren.every((child) => !child.hasAttribute('hidden'))
+        ).toBe(true);
+        expect(
+          mediaChildren.every(
+            (child) => child.getAttribute('slot') === 'attachment-media'
+          )
+        ).toBe(true);
+        expect(
+          cardChildren.every(
+            (child) => child.getAttribute('slot') === 'attachment-card'
+          )
+        ).toBe(true);
+      }
+    );
+
+    await step(
+      'media count above the visible limit hides overflow tiles and shows the disclosure',
+      async () => {
+        el.type = 'attachments';
+        el.open = false;
+        el.innerHTML = attachmentsMarkup(6, 0);
+        await el.updateComplete;
+        await new Promise((resolve) => requestAnimationFrame(resolve));
+        await el.updateComplete;
+
+        const overflow = el.shadowRoot?.querySelector(
+          '.swc-UserMessage-attachments-overflow'
+        );
+        expect(overflow).toBeTruthy();
+        expect(overflow?.getAttribute('aria-expanded')).toBe('false');
+        expect(overflow?.textContent?.trim()).toContain('View all (6)');
+
+        const mediaChildren = Array.from(el.children);
+        expect(mediaChildren.slice(0, 4).some((child) => child.hidden)).toBe(
+          false
+        );
+        expect(mediaChildren.slice(4).every((child) => child.hidden)).toBe(
+          true
+        );
+      }
+    );
+
+    await step(
+      'clicking the disclosure reveals overflow tiles and fires the toggle event',
+      async () => {
+        let detail: { open: boolean } | undefined;
+        el.addEventListener(
+          'swc-user-message-toggle',
+          (event) => {
+            detail = (event as CustomEvent<{ open: boolean }>).detail;
+          },
+          { once: true }
+        );
+
+        const overflow = el.shadowRoot?.querySelector<HTMLButtonElement>(
+          '.swc-UserMessage-attachments-overflow'
+        );
+        overflow?.click();
+        await el.updateComplete;
+
+        expect(el.open).toBe(true);
+        expect(detail?.open).toBe(true);
+        // Stays in the DOM (fades out via CSS) rather than being removed.
+        expect(
+          el.shadowRoot?.querySelector('.swc-UserMessage-attachments-overflow')
+        ).not.toBeNull();
+        expect(overflow?.hidden).toBe(true);
+
+        const toggle = el.shadowRoot?.querySelector(
+          '.swc-UserMessage-attachments-toggle'
+        );
+        expect(toggle?.getAttribute('aria-expanded')).toBe('true');
+        expect(toggle?.textContent?.trim()).toContain('Show less');
+        expect(Array.from(el.children).every((child) => !child.hidden)).toBe(
+          true
+        );
+      }
+    );
+  },
+};
+
 const longSpacedCopy =
   'This is a deliberately long line of user copy that should wrap within a narrow column without horizontal overflow. '.repeat(
     3
@@ -193,15 +343,17 @@ export const LongTextWrapTest: Story = {
       style="max-inline-size: 640px; margin-block-start: 32px; padding-inline: 1px;"
     >
       <swc-conversation-turn type="user">
-        <swc-user-message type="card">
-          <div
-            slot="thumbnail"
-            style="inline-size:32px;block-size:32px;border-radius:3px;background:var(--swc-gray-200);"
-            role="img"
-            aria-label="File"
-          ></div>
-          <span slot="title">${longUnbrokenFileName}</span>
-          <span slot="subtitle">PDF</span>
+        <swc-user-message type="attachments">
+          <swc-user-message-attachment type="card">
+            <div
+              slot="thumbnail"
+              style="inline-size:32px;block-size:32px;border-radius:3px;background:var(--swc-gray-200);"
+              role="img"
+              aria-label="File"
+            ></div>
+            <span slot="title">${longUnbrokenFileName}</span>
+            <span slot="subtitle">PDF</span>
+          </swc-user-message-attachment>
         </swc-user-message>
       </swc-conversation-turn>
     </div>
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message-attachment/UserMessageAttachment.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message-attachment/UserMessageAttachment.ts
new file mode 100644
index 00000000000..c3c6c0c52a0
--- /dev/null
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message-attachment/UserMessageAttachment.ts
@@ -0,0 +1,171 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import { CSSResultArray, html, TemplateResult } from 'lit';
+import { property, queryAssignedElements } from 'lit/decorators.js';
+
+import { SpectrumElement } from '@adobe/spectrum-wc-core/element/index.js';
+
+import styles from './user-message-attachment.css';
+
+/**
+ * One attachment tile inside `<swc-user-message type="attachments">`.
+ *
+ * A deliberately minimal, presentation-only tile: no dismiss affordance, no
+ * actions slot. `swc-user-message` owns all grouping (media grid vs. stacked
+ * files), show-all/less disclosure, and layout; this component only renders
+ * its own thumbnail/title/subtitle/badge.
+ *
+ * @element swc-user-message-attachment
+ *
+ * @slot thumbnail - Shared visual slot for icon/thumbnail/preview image.
+ * @slot badge - Optional file-type badge rendered over `type="media"` previews (for example, "PDF").
+ * @slot title - Primary text label. For `type="media"`, omit on grouped grid tiles
+ * (matching the compose-time `swc-upload-artifact` strip's caption-less tiles); a
+ * single "hero" attachment typically includes one.
+ * @slot subtitle - Secondary text label. Same `type="media"` guidance as `title`.
+ */
+export class UserMessageAttachment extends SpectrumElement {
+  /** Visual treatment type for this attachment: `media` renders a grid tile, `card` renders a stacked row. */
+  @property({ type: String, reflect: true })
+  public type: 'card' | 'media' = 'media';
+
+  @queryAssignedElements({ slot: 'badge', flatten: true })
+  private _assignedBadge!: HTMLElement[];
+
+  @queryAssignedElements({ slot: 'title', flatten: true })
+  private _assignedTitle!: HTMLElement[];
+
+  @queryAssignedElements({ slot: 'subtitle', flatten: true })
+  private _assignedSubtitle!: HTMLElement[];
+
+  public static override get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  private _hasBadgeContent(): boolean {
+    return (this._assignedBadge?.length ?? 0) > 0;
+  }
+
+  private _hasMediaMetaContent(): boolean {
+    return (
+      (this._assignedTitle?.length ?? 0) > 0 ||
+      (this._assignedSubtitle?.length ?? 0) > 0
+    );
+  }
+
+  private _handleBadgeSlotChange(): void {
+    this.requestUpdate();
+  }
+
+  private _handleMediaMetaSlotChange(): void {
+    this.requestUpdate();
+  }
+
+  private _renderBadge(): TemplateResult {
+    if (!this._hasBadgeContent()) {
+      return html`
+        <slot
+          name="badge"
+          hidden
+          @slotchange=${this._handleBadgeSlotChange}
+        ></slot>
+      `;
+    }
+
+    return html`
+      <div class="swc-UserMessageAttachment-badge">
+        <slot name="badge" @slotchange=${this._handleBadgeSlotChange}></slot>
+      </div>
+    `;
+  }
+
+  /**
+   * Title/subtitle beneath the media square, shown only when slotted:
+   * grouped grid tiles are conventionally caption-less (matching the compose-time
+   * `swc-upload-artifact` strip), while a single "hero" attachment typically
+   * has one, same as `type="card"`.
+   */
+  private _renderMediaMeta(): TemplateResult {
+    if (!this._hasMediaMetaContent()) {
+      return html`
+        <slot
+          name="title"
+          hidden
+          @slotchange=${this._handleMediaMetaSlotChange}
+        ></slot>
+        <slot
+          name="subtitle"
+          hidden
+          @slotchange=${this._handleMediaMetaSlotChange}
+        ></slot>
+      `;
+    }
+
+    return html`
+      <div class="swc-UserMessageAttachment-meta">
+        <div class="swc-UserMessageAttachment-title">
+          <slot
+            name="title"
+            @slotchange=${this._handleMediaMetaSlotChange}
+          ></slot>
+        </div>
+        <div class="swc-UserMessageAttachment-subtitle">
+          <slot
+            name="subtitle"
+            @slotchange=${this._handleMediaMetaSlotChange}
+          ></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  private _renderMediaSurface(): TemplateResult {
+    return html`
+      <div class="swc-UserMessageAttachment-surface">
+        <div class="swc-UserMessageAttachment-thumbnail">
+          <slot name="thumbnail"></slot>
+        </div>
+        ${this._renderBadge()}
+      </div>
+      ${this._renderMediaMeta()}
+    `;
+  }
+
+  private _renderCardSurface(): TemplateResult {
+    return html`
+      <div class="swc-UserMessageAttachment-surface">
+        <div class="swc-UserMessageAttachment-thumbnail">
+          <slot name="thumbnail"></slot>
+        </div>
+        <div class="swc-UserMessageAttachment-meta">
+          <div class="swc-UserMessageAttachment-title">
+            <slot name="title"></slot>
+          </div>
+          <div class="swc-UserMessageAttachment-subtitle">
+            <slot name="subtitle"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  protected override render(): TemplateResult {
+    return html`
+      <div class="swc-UserMessageAttachment">
+        ${this.getAttribute('type') === 'card'
+          ? this._renderCardSurface()
+          : this._renderMediaSurface()}
+      </div>
+    `;
+  }
+}
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message-attachment/index.ts b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message-attachment/index.ts
new file mode 100644
index 00000000000..717e4bb34e6
--- /dev/null
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message-attachment/index.ts
@@ -0,0 +1,24 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { defineElement } from '@adobe/spectrum-wc-core/element/index.js';
+
+import { UserMessageAttachment } from './UserMessageAttachment.js';
+
+export * from './UserMessageAttachment.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'swc-user-message-attachment': UserMessageAttachment;
+  }
+}
+
+defineElement('swc-user-message-attachment', UserMessageAttachment);
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message-attachment/user-message-attachment.css b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message-attachment/user-message-attachment.css
new file mode 100644
index 00000000000..96b2e9afb8d
--- /dev/null
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message-attachment/user-message-attachment.css
@@ -0,0 +1,223 @@
+/**
+ * Copyright 2026 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+:host {
+  display: block;
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  transition-timing-function: ease;
+  transition-duration: token("animation-duration-100");
+  transition-property: opacity, display;
+  transition-behavior: allow-discrete;
+}
+
+@starting-style {
+  :host {
+    opacity: 0;
+  }
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.swc-UserMessageAttachment {
+  inline-size: 100%;
+  block-size: 100%;
+}
+
+.swc-UserMessageAttachment-meta {
+  display: flex;
+  flex-direction: column;
+  gap: token("spacing-50");
+  min-inline-size: 0;
+}
+
+.swc-UserMessageAttachment-title {
+  font-family: token("sans-serif-font");
+  font-size: token("font-size-100");
+  font-weight: token("bold-font-weight");
+  line-height: token("line-height-font-size-100");
+  color: token("gray-900");
+}
+
+.swc-UserMessageAttachment-subtitle {
+  font-family: token("sans-serif-font");
+  font-size: token("font-size-75");
+  font-weight: token("regular-font-weight");
+  line-height: token("line-height-font-size-75");
+  color: token("gray-800");
+}
+
+/* Card: stacked-row tile (icon/preview + title + subtitle). */
+:host([type="card"]) .swc-UserMessageAttachment-surface {
+  display: flex;
+  gap: token("spacing-300");
+  align-items: center;
+  min-block-size: var(--swc-user-message-attachment-card-min-block-size, 68px);
+  padding: token("spacing-300");
+  background: token("gray-50");
+  border: 1px solid transparent;
+  border-radius: token("corner-radius-medium-default");
+}
+
+:host([type="card"]) .swc-UserMessageAttachment-thumbnail {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+}
+
+:host([type="card"]) .swc-UserMessageAttachment-thumbnail ::slotted(*) {
+  box-sizing: border-box;
+  flex-shrink: 0;
+  inline-size: var(--swc-user-message-attachment-card-thumbnail-inline-size, 32px);
+  block-size: var(--swc-user-message-attachment-card-thumbnail-block-size, 32px);
+  background: token("gray-100");
+  border: 1px solid transparent;
+  border-radius: token("corner-radius-75");
+}
+
+:host([type="card"]) .swc-UserMessageAttachment-meta {
+  flex: 1;
+  align-items: flex-start;
+}
+
+:host([type="card"]) .swc-UserMessageAttachment-title,
+:host([type="card"]) .swc-UserMessageAttachment-subtitle {
+  inline-size: 100%;
+  min-inline-size: 0;
+  text-align: start;
+}
+
+:host([type="card"]) .swc-UserMessageAttachment-title ::slotted(*),
+:host([type="card"]) .swc-UserMessageAttachment-subtitle ::slotted(*) {
+  display: block;
+  min-inline-size: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Media: fixed-width square thumbnail + optional caption below (see
+ * `_renderMediaMeta`). The grid tracks in `swc-user-message`
+ * (`.swc-UserMessage-attachments-media`) are sized from this same custom
+ * property so the grid's `fit-content` box shrink-wraps to a well-defined
+ * width instead of stretching to fill the bubble. Block-size is `auto` (not
+ * matched to inline-size) so a captioned "hero" tile can grow taller than a
+ * plain square grid tile; the thumbnail itself stays square via
+ * `aspect-ratio` regardless. */
+:host([type="media"]) {
+  display: flex;
+  flex-direction: column;
+  gap: token("spacing-100");
+  inline-size: var(--swc-user-message-attachment-media-size, 96px);
+}
+
+:host([type="media"]) .swc-UserMessageAttachment-surface {
+  display: block;
+  position: relative;
+  flex-shrink: 0;
+  inline-size: 100%;
+  aspect-ratio: 1;
+  border-radius: token("corner-radius-medium-default");
+  overflow: hidden;
+}
+
+:host([type="media"]) .swc-UserMessageAttachment-thumbnail {
+  display: block;
+  position: relative;
+  inline-size: 100%;
+  block-size: 100%;
+  background: token("gray-100");
+  border: 1px solid transparent;
+  border-radius: token("corner-radius-medium-default");
+  overflow: hidden;
+}
+
+:host([type="media"]) .swc-UserMessageAttachment-thumbnail ::slotted(*) {
+  display: block;
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+:host([type="media"]) .swc-UserMessageAttachment-badge {
+  display: inline-flex;
+  position: absolute;
+  inset-block-end: token("spacing-50");
+  inset-inline-start: token("spacing-50");
+  z-index: 1;
+  align-items: center;
+  max-inline-size: calc(100% - (2 * token("spacing-50")));
+  min-block-size: 24px;
+  padding-block: token("spacing-75");
+  padding-inline: calc(token("spacing-75") + token("spacing-50") + token("corner-radius-75"));
+  font-family: token("sans-serif-font");
+  font-size: token("font-size-75");
+  font-weight: token("medium-font-weight");
+  line-height: token("line-height-font-size-75");
+  color: token("gray-25");
+  background: token("transparent-black-700");
+  border-radius: token("corner-radius-400");
+}
+
+:host([type="media"]) .swc-UserMessageAttachment-badge ::slotted(*) {
+  display: block;
+  min-inline-size: 0;
+  max-inline-size: 152px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host([type="media"]) .swc-UserMessageAttachment-meta {
+  display: flex;
+  flex-direction: column;
+  gap: token("spacing-50");
+  min-inline-size: 0;
+}
+
+:host([type="media"]) .swc-UserMessageAttachment-title,
+:host([type="media"]) .swc-UserMessageAttachment-subtitle {
+  inline-size: 100%;
+  min-inline-size: 0;
+  text-align: start;
+}
+
+:host([type="media"]) .swc-UserMessageAttachment-title ::slotted(*),
+:host([type="media"]) .swc-UserMessageAttachment-subtitle ::slotted(*) {
+  display: block;
+  min-inline-size: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+/* Declared last (not just once, near the base `:host` rule) so it wins the
+ * cascade regardless of source order: every `:host([type="..."])` rule above
+ * has the same specificity as `:host([hidden])`, and author `display` rules
+ * always beat the UA `[hidden] { display: none }` rule regardless of
+ * specificity — so whichever same-specificity rule is declared *later* wins,
+ * and any future `:host([type="..."])` block that sets its own `display`
+ * would otherwise silently re-break `swc-user-message`'s `el.hidden = true`
+ * on overflow tiles. Fades rather than abruptly popping in/out when the
+ * "Show all/less" disclosure toggles. */
+:host([hidden]) {
+  display: none;
+  opacity: 0;
+}
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.css b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.css
index bee1d8bf8d2..939b7566425 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.css
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.css
@@ -12,9 +12,11 @@
 
 /* Sizing per explicit user-message type sourced from Figma spec (node 5-2281), full-screen modality.
  *
- * copy  — fills available column width, capped at 536px (text reflows naturally)
- * card  — fixed 324px (content 292px = 324px − 2×16px padding), capped at 440px
- * media — shrinks to the fixed 180×180px inner card + 2×8px padding ≈ 196px square
+ * copy        — fills available column width, capped at 536px (text reflows naturally)
+ * attachments — shrink-wraps to its content; a single attachment gets a larger
+ *               "hero" tile (see `.swc-UserMessage-attachments-media--single`
+ *               and `.swc-UserMessage-attachments-files--single`) than a
+ *               grouped one
  *
  * The host IS the visible bubble so focus rings rendered by the parent
  * `swc-conversation-turn` hug its border box exactly.
@@ -42,135 +44,156 @@
   box-sizing: border-box;
 }
 
-/* Card: fixed 324px per Figma spec (content 292px = 324px − 2×16px padding). */
-:host([type="card"]) {
-  inline-size: 324px;
-  min-inline-size: 212px;
-  max-inline-size: 440px;
-  padding: var(--swc-user-message-card-padding, token("spacing-300"));
-}
-
-/* Image: shrinks to the fixed 180px inner card + 2×8px padding. */
-:host([type="media"]) {
+/* Attachments: fits its content; the media grid and each card row are
+ * independent boxes (see `.swc-UserMessage-attachments-media` and each
+ * `swc-user-message-attachment[type="card"]`'s own surface), never merged
+ * into one shared box. */
+:host([type="attachments"]) {
   inline-size: fit-content;
-  padding: var(--swc-user-message-media-padding, token("spacing-100"));
+  max-inline-size: 536px;
+  padding: 0;
+  background: transparent;
 }
 
-.swc-UserMessage-attachment {
+/* Attachments: 4-column media grid + full-width stacked file rows. */
+.swc-UserMessage-attachments {
   display: flex;
-  min-inline-size: 0;
-}
-
-.swc-UserMessage-attachment--card {
-  gap: var(--swc-user-message-attachment-card-gap, token("spacing-300"));
-  align-items: center;
-}
-
-/* Media inner card is fixed 180 × 180px, constrained by min/max (Figma spec). */
-.swc-UserMessage-attachment--media {
   flex-direction: column;
-  gap: var(--swc-user-message-attachment-media-gap, token("spacing-100"));
-  inline-size: 180px;
-  min-inline-size: 150px;
-  max-inline-size: 210px;
-  block-size: 180px;
-  min-block-size: 135px;
-}
-
-.swc-UserMessage-thumbnail {
-  min-inline-size: 0;
+  gap: token("spacing-200");
+}
+
+/* Its own box, independent of the card rows below (never a shared background).
+ * Fixed-size (not `1fr`) columns + `inline-size: fit-content` so the box
+ * shrink-wraps to however many tiles are actually present (1-4 per row)
+ * instead of always reserving a full 4-column width. Column *count* itself
+ * is also dynamic (set as an inline `grid-template-columns` by
+ * `swc-user-message`, since `repeat()`'s count argument must be a literal
+ * integer — a custom property doesn't substitute there): a fixed
+ * `repeat(4, ...)` would always reserve 4 columns' width even for e.g. 3
+ * tiles, which `fit-content` alone can't shrink past. This is the no-JS/
+ * initial-paint fallback. */
+.swc-UserMessage-attachments-media {
+  display: grid;
+  grid-template-columns: repeat(4, var(--swc-user-message-attachment-media-size, 96px));
+  gap: token("spacing-100");
+  inline-size: fit-content;
+  padding: token("spacing-100");
+  background: token("gray-50");
+  border-radius: token("corner-radius-large-default");
 }
 
-.swc-UserMessage-thumbnail ::slotted(*) {
-  display: block;
+.swc-UserMessage-attachments-media[hidden] {
+  display: none;
 }
 
-:host([type="card"]) .swc-UserMessage-thumbnail {
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
+/* A single media attachment (no siblings) is a 180×180 "hero" tile rather
+ * than the smaller grouped-grid size (Figma spec). Overriding the custom
+ * property here resizes both the grid track (above) and the tile itself
+ * (`swc-user-message-attachment`'s `:host([type="media"])`), since it
+ * inherits through the flattened tree into the slotted attachment. */
+.swc-UserMessage-attachments-media--single {
+  --swc-user-message-attachment-media-size: 180px;
 }
 
-:host([type="card"]) .swc-UserMessage-thumbnail ::slotted(*) {
-  flex-shrink: 0;
-  inline-size: 32px;
-  block-size: 32px;
-  border: 1px solid transparent;
-  border-radius: token("corner-radius-75");
-  object-fit: cover;
+/* Assigned nodes become direct grid items instead of the slot itself. */
+.swc-UserMessage-attachments-media slot {
+  display: contents;
 }
 
-/* Thumbnail fills the available vertical space, image covers it fully. */
-:host([type="media"]) .swc-UserMessage-thumbnail {
+/* Scrim + pill overlay on the last visible tile (4th column, 1st row) instead
+ * of a separate control below the grid; stretches to fill that grid cell so
+ * it exactly covers the tile underneath. `position: relative` + `z-index`
+ * are required, not cosmetic: the tile sharing this cell is slotted content,
+ * and the flattened tree paints it above later shadow-DOM siblings despite
+ * DOM order, so an explicit stacking context is the only reliable way to
+ * keep the scrim on top. */
+.swc-UserMessage-attachments-overflow {
+  display: flex;
   position: relative;
-  flex: 1 0 0;
-  inline-size: 100%;
-  min-block-size: 0;
-  background: token("gray-100");
-  border: 1px solid transparent;
-  border-radius: token("corner-radius-200");
-  overflow: hidden;
-}
-
-:host([type="media"]) .swc-UserMessage-thumbnail ::slotted(*) {
-  position: absolute;
-  inset: 0;
-  inline-size: 100%;
-  block-size: 100%;
-  object-fit: cover;
+  z-index: 1;
+  grid-row: 1;
+  grid-column: 4;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: token("spacing-100");
+  background: token("transparent-black-700");
+  border: none;
+  border-radius: token("corner-radius-medium-default");
+  cursor: pointer;
+  transition-timing-function: ease;
+  transition-duration: token("animation-duration-100");
+  transition-property: opacity, display;
+  transition-behavior: allow-discrete;
+}
+
+/* Fades out in step with the newly-revealed tiles fading in (see
+ * `user-message-attachment.css`), rather than vanishing instantly while
+ * they animate — matches `?hidden` binding in `_renderMediaOverflow`. */
+.swc-UserMessage-attachments-overflow[hidden] {
+  display: none;
+  opacity: 0;
+}
+
+@starting-style {
+  .swc-UserMessage-attachments-overflow {
+    opacity: 0;
+  }
+}
+
+.swc-UserMessage-attachments-overflow-pill {
+  padding-block: token("spacing-75");
+  padding-inline: token("spacing-200");
+  font-family: token("sans-serif-font");
+  font-size: token("font-size-75");
+  font-weight: token("medium-font-weight");
+  line-height: token("line-height-font-size-75");
+  color: token("gray-900");
+  white-space: nowrap;
+  background: token("gray-25");
+  border-radius: token("corner-radius-400");
 }
 
-.swc-UserMessage-meta {
+.swc-UserMessage-attachments-files {
   display: flex;
   flex-direction: column;
-  gap: var(--swc-user-message-meta-gap, token("spacing-50"));
-  min-inline-size: 0;
+  gap: token("spacing-100");
 }
 
-:host([type="card"]) .swc-UserMessage-meta {
-  flex: 1;
-  align-items: flex-start;
+/* A single card attachment (no siblings) is a 324px "hero" row (content
+ * 292px = 324px − 2×16px padding, capped 212-440px) rather than an
+ * unbounded full-width row (Figma spec). */
+.swc-UserMessage-attachments-files--single {
+  inline-size: 324px;
+  min-inline-size: 212px;
+  max-inline-size: 440px;
 }
 
-:host([type="media"]) .swc-UserMessage-meta {
-  inline-size: 100%;
+.swc-UserMessage-attachments-files[hidden] {
+  display: none;
 }
 
-.swc-UserMessage-title {
-  font-family: token("sans-serif-font");
-  font-size: token("font-size-100");
-  font-weight: token("bold-font-weight");
-  line-height: token("line-height-font-size-100");
-  color: token("gray-900");
+.swc-UserMessage-attachments-files slot {
+  display: contents;
 }
 
-.swc-UserMessage-subtitle {
+.swc-UserMessage-attachments-toggle {
+  display: inline-flex;
+  gap: token("spacing-75");
+  align-items: center;
+  padding: 0;
   font-family: token("sans-serif-font");
   font-size: token("font-size-75");
-  font-weight: token("regular-font-weight");
-  line-height: token("line-height-font-size-75");
+  font-weight: token("bold-font-weight");
   color: token("gray-800");
-  text-overflow: ellipsis;
+  background: transparent;
+  border: none;
+  cursor: pointer;
 }
 
-:host([type="card"]) .swc-UserMessage-title,
-:host([type="card"]) .swc-UserMessage-subtitle,
-:host([type="media"]) .swc-UserMessage-title {
-  inline-size: 100%;
-  min-inline-size: 0;
-  text-align: start;
+.swc-UserMessage-attachments-chevron {
+  transition: transform token("animation-duration-100") ease;
 }
 
-/* Long, unbroken tokens (e.g. filenames without spaces) break at any character
- * so the title wraps inside the meta column instead of overflowing the bubble. */
-:host([type="card"]) .swc-UserMessage-title ::slotted(*),
-:host([type="media"]) .swc-UserMessage-title ::slotted(*),
-:host([type="card"]) .swc-UserMessage-subtitle ::slotted(*),
-:host([type="media"]) .swc-UserMessage-subtitle ::slotted(*) {
-  display: block;
-  min-inline-size: 0;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+.swc-UserMessage-attachments-chevron--down {
+  transform: rotate(90deg);
 }
diff --git a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.mdx b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.mdx
index a6c97e542c7..68de737efb4 100644
--- a/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.mdx
+++ b/2nd-gen/packages/swc/patterns/conversational-ai/user-message/user-message.mdx
@@ -22,12 +22,29 @@ A user message consists of:
 
 Bubble sizing and padding are inferred from slotted content:
 
-- **Copy**: default text-only content with the bubble's default width and padding
-- **Card**: compact attachment layout with thumbnail, title, and subtitle
-- **Media**: larger preview-first attachment layout with metadata beneath the preview
+- **Copy** (`type="copy"`): default text-only content with the bubble's default width and padding
+- **Attachments** (`type="attachments"`): one or more `<swc-user-message-attachment>` children — a single attachment (media or card) renders at a larger "hero" size than a grouped one
 
 <Canvas of={UserMessageStories.Content} />
 
+### Attachments
+
+`type="attachments"` accepts one or more `<swc-user-message-attachment>` children in one bubble — a single attachment is a common case, not a special one:
+
+- **`type="media"`** attachments (images) lay out in a fixed 4-column grid; a lone media attachment gets a larger 180×180 hero tile instead of the smaller grouped-grid size
+- **`type="card"`** attachments (documents, video, other non-image files) stack full-width, one per row, beneath the grid; a lone card attachment gets a wider hero row (capped at 440px) instead of shrink-wrapping to the grid's width
+- `swc-user-message` groups attachments by their own `type`, regardless of the order they're slotted in
+
+<Canvas of={UserMessageStories.Attachments} />
+
+## Behaviors
+
+### Show all / show less
+
+When there are more than 4 media attachments, the extra tiles collapse behind a "View all (N)" scrim overlay on the last visible tile; expanding reveals every tile, still 4 per row, with a "Show less" control below the grid to collapse again. Card/file attachments are always fully shown. Toggling fires `swc-user-message-toggle` with `{ open: boolean }`.
+
+<Canvas of={UserMessageStories.AttachmentsDisclosure} />
+
 ## Accessibility
 
 ### Features
@@ -38,12 +55,12 @@ The `<swc-user-message>` element implements the following accessibility features
 
 - The bubble is rendered as a `<div>` acting as a visual container
 - `type="copy"` uses the default slot for message text
-- `type="card"` and `type="media"` use named slots for thumbnail, title, and subtitle
+- `type="attachments"` renders a `<button>` with `aria-expanded` and `aria-controls` for the show all/less disclosure (the "View all (N)" overlay while collapsed, the "Show less" control while expanded)
 
 ### Best practices
 
 - Ensure message text is descriptive and self-contained
-- For card and media attachments, ensure titles/subtitles and `aria-label`/`alt` text are present for previews
+- For `type="attachments"`, ensure every `swc-user-message-attachment` includes descriptive `title`/`subtitle` text or `alt` text on its thumbnail, since sighted users rely on the grid layout alone to distinguish tiles
 
 <Canvas of={UserMessageStories.Accessibility} />