@linktr.ee/messaging-react 4.4.3 → 4.4.4-rc-1788181757

package/src/components/LinkAttachment/LinkAttachment.test.tsx

@@ -89,32 +89,6 @@ describe('LinkAttachment.Received (link previews)', () => {
       WebkitLineClamp: '3',
     })
   })
-
-  it('renders the filled (primary) CTA when cta.variant is omitted', async () => {
-    renderWithProviders(
-      <LinkAttachment.Received
-        title="Welcome"
-        description="Add a personal welcome message"
-        cta={{ label: 'Add now', onClick: vi.fn() }}
-      />
-    )
-    const button = await screen.findByText('Add now')
-    expect(button.className).toContain('bg-[#121110]')
-    expect(button.className).toContain('text-white')
-  })
-
-  it('renders the subtle (secondary) CTA when cta.variant is "secondary"', async () => {
-    renderWithProviders(
-      <LinkAttachment.Received
-        title="Welcome"
-        description="Add a personal welcome message"
-        cta={{ label: 'Add now', onClick: vi.fn(), variant: 'secondary' }}
-      />
-    )
-    const button = await screen.findByText('Add now')
-    expect(button.className).toContain('bg-black/[0.06]')
-    expect(button.className).toContain('text-[#121110]')
-  })
 })
 
 describe('LinkAttachment.Sent', () => {
@@ -178,9 +152,11 @@ describe('LinkAttachment.Sent', () => {
       />
     )
     const button = await screen.findByText('Add now')
+    /* eslint-disable local/no-style-only-assertion -- legibility, not decoration: white-on-white is the bug this guards. */
     expect(button.className).toContain('bg-black/[0.06]')
     expect(button.className).toContain('text-[#121110]')
     expect(button.className).not.toContain('text-white')
+    /* eslint-enable local/no-style-only-assertion */
   })
 })
 
@@ -228,17 +204,21 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
     // The pale report colour and the vivid one both paint, on both sides — the
     // feature adds colour to every card with an image rather than half of them.
     for (const accentColor of [ACCENT, PALE_ACCENT]) {
-      const sent = renderWithProviders(
-        <LinkAttachment.Sent {...CARD_PROPS} accentColor={accentColor} />
-      )
-      expect(accentOf(await screen.findByRole('link'))).toBe(accentColor)
-      sent.unmount()
-
-      const received = renderWithProviders(
-        <LinkAttachment.Received {...CARD_PROPS} accentColor={accentColor} />
-      )
-      expect(accentOf(await screen.findByRole('link'))).toBe(accentColor)
-      received.unmount()
+      {
+        const view = renderWithProviders(
+          <LinkAttachment.Sent {...CARD_PROPS} accentColor={accentColor} />
+        )
+        expect(accentOf(await screen.findByRole('link'))).toBe(accentColor)
+        view.unmount()
+      }
+
+      {
+        const view = renderWithProviders(
+          <LinkAttachment.Received {...CARD_PROPS} accentColor={accentColor} />
+        )
+        expect(accentOf(await screen.findByRole('link'))).toBe(accentColor)
+        view.unmount()
+      }
     }
   })
 
@@ -291,7 +271,7 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
     // verifies the poster with a hidden probe `<img>`. Without that, this card
     // stayed accent-painted over a bare `bg-black` box, which is exactly the
     // claim-without-a-source the gate exists to prevent.
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <LinkAttachment.Sent
         {...CARD_PROPS}
         mimeType="video/mp4"
@@ -299,19 +279,19 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
         accentColor={ACCENT}
       />
     )
-    const shell = container.querySelector(
-      '[class*="select-none"]'
-    ) as HTMLElement
+    const shell = screen.getByTestId('link-card')
     expect(shell.style.getPropertyValue('--accent')).toBe(ACCENT)
-    expect(container.querySelector('video')).toHaveAttribute('poster')
+    expect(screen.getByTestId('card-thumbnail-video')).toHaveAttribute('poster')
 
-    fireEvent.error(container.querySelector('img') as HTMLImageElement)
+    fireEvent.error(screen.getByRole('img', { hidden: true }))
 
     expect(shell.style.getPropertyValue('--accent')).toBe('')
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#FFFFFF' })
     // The failed poster is dropped with the accent, so the player falls back to
     // its own first frame instead of retrying a 404.
-    expect(container.querySelector('video')).not.toHaveAttribute('poster')
+    expect(screen.getByTestId('card-thumbnail-video')).not.toHaveAttribute(
+      'poster'
+    )
   })
 
   it('leaves a playable audio card on its flat fill, and inks that fill dark', async () => {
@@ -328,10 +308,10 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       sourceUrl: 'https://cdn.example.com/clip.mp3',
     }
 
-    const { container, unmount } = renderWithProviders(
+    const { unmount } = renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} {...AUDIO} accentColor={ACCENT} />
     )
-    const sent = container.firstElementChild as HTMLElement
+    const sent = shellOf()
     expect(sent.style.getPropertyValue('--accent')).toBe('')
     expect(sent.className).toContain(AUDIO_BG_CLASS)
     expect(screen.getByText(CARD_PROPS.title)).toHaveStyle({ color: '#040403' })
@@ -372,11 +352,11 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
     // The extractor returns a bare hex often enough that dropping it would lose
     // the colour silently — `oklch(from 7008E7 …)` never resolves, so the
     // published `--accent` must carry the `#`.
-    const hashless = renderWithProviders(
+    const view = renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} accentColor="7008E7" />
     )
     expect(accentOf(await screen.findByRole('link'))).toBe('#7008E7')
-    hashless.unmount()
+    view.unmount()
 
     renderWithProviders(
       <LinkAttachment.Sent {...CARD_PROPS} accentColor={ACCENT} />
@@ -405,15 +385,17 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
         onDismiss={() => {}}
       />,
     ]) {
-      const { container, unmount } = renderWithProviders(card)
+      const { unmount } = renderWithProviders(card)
 
-      expect(container.querySelector('audio')).toBeNull()
+      expect(screen.queryByTestId('card-thumbnail-audio')).toBeNull()
       const busy = screen.getByLabelText('Loading link preview')
       expect(busy).toHaveAttribute('aria-busy', 'true')
       // The skeleton keeps its 250px box: the audio shell is intrinsic-height,
       // and a `flex-1` hero inside it would collapse to zero.
+      // eslint-disable-next-line local/no-style-only-assertion -- MES-1349: the reserved box is the contract; jsdom has no layout to observe it.
       expect(busy.className).toContain('h-[250px]')
-      expect(container.querySelectorAll('.animate-pulse')).toHaveLength(3)
+      expect(screen.getByTestId('card-thumbnail-skeleton')).toBeInTheDocument()
+      expect(screen.getAllByTestId('card-body-skeleton-bar')).toHaveLength(2)
 
       unmount()
     }
@@ -494,15 +476,13 @@ const VIDEO = {
 }
 const HERO = 'https://cdn.example.com/yoga.jpg'
 
-// Sent / Composer cards carry no test hook of their own; the shell is the
-// element that owns the card chrome classes.
-const shellOf = (container: HTMLElement) =>
-  container.querySelector('.messaging-link-card') as HTMLElement
+// Received cards carry their own hook; Sent/Composer fall back to the shell default.
+const shellOf = () => screen.getByTestId(/^link-(card|attachment)$/)
 
 describe('LinkAttachment.Composer chrome', () => {
   it('anchors the dismiss control to the hero on a featured card', () => {
     const onDismiss = vi.fn()
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <LinkAttachment.Composer
         title="Brie’s FAQ"
         thumbnailUrl={HERO}
@@ -510,9 +490,8 @@ describe('LinkAttachment.Composer chrome', () => {
       />
     )
     const dismiss = screen.getByLabelText('Dismiss attachment')
-    expect(dismiss.parentElement?.className).toContain('absolute right-3 top-3')
     // Sits inside the hero region, not the shell corner.
-    expect(container.querySelector('div.flex-1')?.contains(dismiss)).toBe(true)
+    expect(screen.getByTestId('card-thumbnail-hero')).toContainElement(dismiss)
     // 44x44 touch target without growing the 24px circle.
     expect(dismiss.className).toContain('before:-inset-[10px]')
     // Hover lifts the fill so the control is not identical to its rest state.
@@ -522,7 +501,7 @@ describe('LinkAttachment.Composer chrome', () => {
   })
 
   it('moves the dismiss control to the shell corner on a classic card', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <LinkAttachment.Composer
         title="Brie’s FAQ"
         thumbnailUrl={HERO}
@@ -530,26 +509,31 @@ describe('LinkAttachment.Composer chrome', () => {
         onDismiss={() => {}}
       />
     )
-    expect(container.querySelector('img')).toBeNull()
-    const shell = shellOf(container)
+    expect(screen.queryByRole('img', { hidden: true })).toBeNull()
+    const shell = shellOf()
     expect(shell.contains(screen.getByLabelText('Dismiss attachment'))).toBe(
       true
     )
     // Classic cards size to their content.
+    // eslint-disable-next-line local/no-style-only-assertion -- MES-1349: the reserved box is the contract; jsdom has no layout to observe it.
     expect(shell.className).not.toContain('h-[250px]')
     expect(shell.className).toContain('block')
   })
 
   it('defaults to the featured layout with its hero and fixed box', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <LinkAttachment.Composer title="Brie’s FAQ" thumbnailUrl={HERO} />
     )
-    expect(container.querySelector('img')?.getAttribute('src')).toBe(HERO)
-    expect(shellOf(container).className).toContain('h-[250px]')
+    expect(screen.getByRole('img', { hidden: true })).toHaveAttribute(
+      'src',
+      HERO
+    )
+    // eslint-disable-next-line local/no-style-only-assertion -- MES-1349: the reserved box is the contract; jsdom has no layout to observe it.
+    expect(shellOf().className).toContain('h-[250px]')
   })
 
   it('collapses an audio composer card to the player plus an inline dismiss', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <LinkAttachment.Composer
         title="My track"
         url="tr.ee/briemix"
@@ -557,15 +541,14 @@ describe('LinkAttachment.Composer chrome', () => {
         onDismiss={() => {}}
       />
     )
-    const shell = shellOf(container)
+    const shell = shellOf()
     expect(shell.className).toContain(AUDIO_BG_CLASS)
-    expect(container.querySelector('audio')).not.toBeNull()
+    expect(screen.getByTestId('card-thumbnail-audio')).toBeInTheDocument()
     // No chin on this path, so the URL line goes with it.
     expect(screen.queryByTestId('link-attachment-url')).toBeNull()
     const dismiss = screen.getByLabelText('Dismiss attachment')
     // Inline sibling of the native controls: no overlay halo on top of them.
     expect(dismiss.className).not.toContain('before:-inset-[10px]')
-    expect(dismiss.parentElement?.className).not.toContain('absolute')
   })
 
   it('lets the consumer name the dismiss control', () => {
@@ -661,10 +644,10 @@ describe('LinkAttachment interactivity contract', () => {
 
   it('ignores the Sent onClick when there is nothing to open', () => {
     const onClick = vi.fn()
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <LinkAttachment.Sent title="My Playlist" onClick={onClick} />
     )
-    const shell = shellOf(container)
+    const shell = shellOf()
     expect(shell.tagName).toBe('DIV')
     fireEvent.click(shell)
     expect(onClick).not.toHaveBeenCalled()
@@ -672,7 +655,7 @@ describe('LinkAttachment interactivity contract', () => {
 
   it('ignores the Sent onClick around playable media', () => {
     const onClick = vi.fn()
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <LinkAttachment.Sent
         title="Clip"
         url="tr.ee/briemix"
@@ -681,7 +664,7 @@ describe('LinkAttachment interactivity contract', () => {
         onClick={onClick}
       />
     )
-    const shell = shellOf(container)
+    const shell = shellOf()
     expect(shell.tagName).toBe('DIV')
     fireEvent.click(shell)
     expect(onClick).not.toHaveBeenCalled()
@@ -770,7 +753,7 @@ describe('LinkAttachment layout and surface', () => {
   ] as const)(
     'drops the %s hero and the fixed box for classic',
     (_side, Card) => {
-      const { container } = renderWithProviders(
+      renderWithProviders(
         <Card
           title="Brie’s FAQ"
           url="tr.ee/briemix"
@@ -778,8 +761,9 @@ describe('LinkAttachment layout and surface', () => {
           layout="classic"
         />
       )
-      expect(container.querySelector('img')).toBeNull()
-      const shell = shellOf(container)
+      expect(screen.queryByRole('img', { hidden: true })).toBeNull()
+      const shell = shellOf()
+      // eslint-disable-next-line local/no-style-only-assertion -- MES-1349: the reserved box is the contract; jsdom has no layout to observe it.
       expect(shell.className).not.toContain('h-[250px]')
       expect(shell.className).toContain('block')
     }
@@ -789,11 +773,15 @@ describe('LinkAttachment layout and surface', () => {
     ['Sent', LinkAttachment.Sent],
     ['Received', LinkAttachment.Received],
   ] as const)('locks the featured %s card to the 250px box', (_side, Card) => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <Card title="Brie’s FAQ" url="tr.ee/briemix" thumbnailUrl={HERO} />
     )
-    expect(container.querySelector('img')?.getAttribute('src')).toBe(HERO)
-    expect(shellOf(container).className).toContain('h-[250px]')
+    expect(screen.getByRole('img', { hidden: true })).toHaveAttribute(
+      'src',
+      HERO
+    )
+    // eslint-disable-next-line local/no-style-only-assertion -- MES-1349: the reserved box is the contract; jsdom has no layout to observe it.
+    expect(shellOf().className).toContain('h-[250px]')
   })
 
   it.each([
@@ -802,13 +790,14 @@ describe('LinkAttachment layout and surface', () => {
   ] as const)(
     'sizes the %s audio card to its content on the audio surface',
     (_side, Card) => {
-      const { container } = renderWithProviders(
+      renderWithProviders(
         <Card title="My track" url="tr.ee/briemix" {...AUDIO} />
       )
-      const shell = shellOf(container)
+      const shell = shellOf()
       expect(shell.className).toContain(AUDIO_BG_CLASS)
+      // eslint-disable-next-line local/no-style-only-assertion -- MES-1349: the reserved box is the contract; jsdom has no layout to observe it.
       expect(shell.className).not.toContain('h-[250px]')
-      expect(container.querySelector('audio')).not.toBeNull()
+      expect(screen.getByTestId('card-thumbnail-audio')).toBeInTheDocument()
     }
   )
 })

package/src/components/LinkAttachment/components/_shared/BubbleTail.test.tsx

@@ -23,6 +23,7 @@ describe('BubbleTail', () => {
       </BubbleTail>
     )
     const tail = screen.getByTestId('link-card-tail')
+    // eslint-disable-next-line local/no-style-only-assertion -- the tail is absolutely positioned: without `relative` here it anchors to some other ancestor.
     expect(tail.parentElement?.className).toBe('relative isolate w-fit')
     expect(tail.getAttribute('aria-hidden')).toBe('true')
     // The tail follows the card so it paints over the card's bottom edge.

package/src/components/LinkAttachment/components/_shared/CardBody.test.tsx

@@ -47,37 +47,6 @@ describe('CardBody', () => {
     expect(container).toBeEmptyDOMElement()
   })
 
-  it('dims the placeholder title but not a real one', () => {
-    renderWithProviders(
-      <CardBody variant="dark" placeholderTitle="Add a title" />
-    )
-    expect(screen.getByText('Add a title').className).toContain('text-white/30')
-
-    renderWithProviders(<CardBody variant="dark" title="Brie’s FAQ" />)
-    const title = screen.getByText('Brie’s FAQ')
-    expect(title.className).toContain('text-white')
-    expect(title.className).not.toContain('text-white/30')
-  })
-
-  it('inks the light variant against its pale surface', () => {
-    renderWithProviders(
-      <CardBody variant="light" title="Brie’s FAQ" url="tr.ee/a" />
-    )
-    expect(screen.getByText('Brie’s FAQ').className).toContain('text-black/90')
-    expect(screen.getByTestId('link-attachment-url').className).toContain(
-      'text-black/55'
-    )
-  })
-
-  it('inks the dark variant against its dark surface', () => {
-    renderWithProviders(
-      <CardBody variant="dark" title="Brie’s FAQ" url="tr.ee/a" />
-    )
-    expect(screen.getByTestId('link-attachment-url').className).toContain(
-      'text-white/55'
-    )
-  })
-
   it('replaces the variant ink with chinTextColor on every chin line', () => {
     renderWithProviders(
       <CardBody
@@ -94,7 +63,6 @@ describe('CardBody', () => {
 
     for (const node of [title, description, url]) {
       expect(node.style.color).toBe('rgb(4, 4, 3)')
-      expect(node.className).not.toContain('text-white')
     }
   })
 
@@ -135,21 +103,24 @@ describe('CardBody', () => {
   })
 
   it('renders the trimmed url footer, and drops it entirely for a cta', () => {
-    renderWithProviders(<CardBody variant="light" url="  tr.ee/briemix  " />)
-    expect(screen.getByTestId('link-attachment-url').textContent).toBe(
-      'tr.ee/briemix'
-    )
+    {
+      const view = renderWithProviders(
+        <CardBody variant="light" url="  tr.ee/briemix  " />
+      )
+      expect(screen.getByTestId('link-attachment-url').textContent).toBe(
+        'tr.ee/briemix'
+      )
+      view.unmount()
+    }
 
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CardBody
         variant="light"
         url="tr.ee/briemix"
         cta={{ label: 'View FAQs' }}
       />
     )
-    expect(
-      container.querySelector('[data-testid="link-attachment-url"]')
-    ).toBeNull()
+    expect(screen.queryByTestId('link-attachment-url')).toBeNull()
     expect(screen.getByText('View FAQs')).toBeInTheDocument()
   })
 
@@ -162,12 +133,14 @@ describe('CardBody', () => {
       />
     )
     // The audio strip is a light surface under a nominally dark card.
+    /* eslint-disable local/no-style-only-assertion -- legibility, not decoration: the wrong surface here is white-on-white. */
     expect(screen.getByText('Play').className).toContain('bg-black/[0.06]')
 
     renderWithProviders(
       <CardBody variant="dark" cta={{ label: 'View FAQs' }} />
     )
     expect(screen.getByText('View FAQs').className).toContain('bg-white')
+    /* eslint-enable local/no-style-only-assertion */
   })
 
   it('renders the app icon before the title and the trailing action beside it', () => {
@@ -181,13 +154,10 @@ describe('CardBody', () => {
     )
     const icon = screen.getByTestId('app-icon')
     const title = screen.getByText('Spotify')
-    expect(icon.parentElement?.className).toContain('shrink-0')
     expect(
       icon.compareDocumentPosition(title) & Node.DOCUMENT_POSITION_FOLLOWING
     ).toBeTruthy()
-    expect(screen.getByText('Edit').parentElement?.className).toContain(
-      'shrink-0'
-    )
+    expect(screen.getByText('Edit')).toBeInTheDocument()
   })
 
   it('omits the title row entirely when there is no title', () => {
@@ -201,28 +171,17 @@ describe('CardBody', () => {
     expect(screen.queryByTestId('app-icon')).not.toBeInTheDocument()
   })
 
-  it('renders two variant-aware skeleton bars instead of text while loading', () => {
-    const { container: dark } = renderWithProviders(
+  it('renders two skeleton bars instead of text while loading', () => {
+    renderWithProviders(
       <CardBody variant="dark" title="Brie’s FAQ" url="tr.ee/a" isLoading />
     )
     expect(screen.queryByText('Brie’s FAQ')).not.toBeInTheDocument()
     expect(screen.queryByTestId('link-attachment-url')).not.toBeInTheDocument()
 
-    const darkBars = dark.querySelectorAll('div.animate-pulse')
-    expect(darkBars).toHaveLength(2)
-    expect(darkBars[0].className).toContain('h-5 w-3/4')
-    expect(darkBars[1].className).toContain('h-4 w-1/2')
-    for (const bar of darkBars) {
-      expect(bar.className).toContain('rounded')
-      expect(bar.className).toContain('bg-white/25')
-      expect(bar.getAttribute('aria-hidden')).toBe('true')
-    }
-
-    const { container: light } = renderWithProviders(
-      <CardBody variant="light" isLoading />
-    )
-    for (const bar of light.querySelectorAll('div.animate-pulse')) {
-      expect(bar.className).toContain('bg-black/15')
+    const bars = screen.getAllByTestId('card-body-skeleton-bar')
+    expect(bars).toHaveLength(2)
+    for (const bar of bars) {
+      expect(bar).toHaveAttribute('aria-hidden', 'true')
     }
   })
 

package/src/components/LinkAttachment/components/_shared/CardBody.tsx

@@ -141,8 +141,16 @@ const CardBody: React.FC<CardBodyProps> = ({
       <div className="shrink-0 px-4 py-3">
         <div className="flex min-w-0 flex-col gap-[2px]">
           {/* Sized to the lines they stand in for: 14/20 title, 12/16 URL. */}
-          <div className={classNames('h-5 w-3/4', barClass)} aria-hidden />
-          <div className={classNames('h-4 w-1/2', barClass)} aria-hidden />
+          <div
+            data-testid="card-body-skeleton-bar"
+            className={classNames('h-5 w-3/4', barClass)}
+            aria-hidden
+          />
+          <div
+            data-testid="card-body-skeleton-bar"
+            className={classNames('h-4 w-1/2', barClass)}
+            aria-hidden
+          />
         </div>
       </div>
     )

package/src/components/LinkAttachment/components/_shared/CardCta.test.tsx

@@ -16,7 +16,6 @@ describe('CardCta', () => {
     expect(cta.getAttribute('href')).toBe('https://tr.ee/faq')
     expect(cta.getAttribute('target')).toBe('_blank')
     expect(cta.getAttribute('rel')).toBe('noopener noreferrer')
-    expect(cta.className).toContain('no-underline')
   })
 
   it('renders a button when the href is missing or unsafe', () => {
@@ -86,17 +85,9 @@ describe('CardCta', () => {
     }
   )
 
-  it('defaults to the filled primary emphasis', () => {
+  it('renders the label verbatim, without a wrapper span, by default', () => {
     renderWithProviders(<CardCta variant="light" cta={{ label: 'Act' }} />)
     const cta = screen.getByText('Act')
-    expect(cta.className).toContain('bg-[#121110] text-white')
-    expect(cta.className).not.toContain('bg-black/[0.06]')
-  })
-
-  it('spans its row by default and renders the label verbatim', () => {
-    renderWithProviders(<CardCta variant="light" cta={{ label: 'Act' }} />)
-    const cta = screen.getByText('Act')
-    expect(cta.className).toContain('w-full')
     expect(cta.querySelector('span')).toBeNull()
   })
 
@@ -108,16 +99,5 @@ describe('CardCta', () => {
     expect(label.tagName).toBe('SPAN')
     expect(label.className).toContain('min-w-0 truncate')
     expect(label.parentElement?.className).toContain('min-w-0')
-    expect(label.parentElement?.className).not.toContain('w-full')
-  })
-
-  it('offsets itself below the description unless the caller owns spacing', () => {
-    renderWithProviders(<CardCta variant="light" cta={{ label: 'Spaced' }} />)
-    expect(screen.getByText('Spaced').className).toContain('mt-2')
-
-    renderWithProviders(
-      <CardCta variant="light" cta={{ label: 'Standalone' }} standalone />
-    )
-    expect(screen.getByText('Standalone').className).not.toContain('mt-2')
   })
 })

package/src/components/LinkAttachment/components/_shared/CardShell.test.tsx

@@ -16,7 +16,6 @@ describe('CardShell', () => {
     )
     const shell = shellOf()
     expect(shell.tagName).toBe('DIV')
-    expect(shell.className).not.toContain('cursor-pointer')
     expect(shell.className).not.toContain('focus-ring')
     expect(shell.getAttribute('data-variant')).toBe('light')
   })
@@ -38,8 +37,6 @@ describe('CardShell', () => {
     expect(shell.getAttribute('href')).toBe('https://tr.ee/briemix')
     expect(shell.getAttribute('target')).toBe('_blank')
     expect(shell.getAttribute('rel')).toBe('noopener noreferrer')
-    expect(shell.className).toContain('cursor-pointer')
-    expect(shell.className).toContain('no-underline')
     expect(shell.className).toContain('focus-ring')
     fireEvent.click(shell)
     expect(onClick).toHaveBeenCalledTimes(1)
@@ -61,39 +58,10 @@ describe('CardShell', () => {
     expect(shell.tagName).toBe('BUTTON')
     expect(shell.getAttribute('type')).toBe('button')
     expect(shell.getAttribute('aria-label')).toBe('Open attachment preview')
-    // The button's own centring is overridden so the chin still reads left-aligned.
-    expect(shell.className).toContain('text-left')
     fireEvent.click(shell)
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
-  it('paints the variant bubble fill and lets bgClassName override it', () => {
-    const { unmount } = renderWithProviders(
-      <CardShell variant="dark" data-testid="shell">
-        body
-      </CardShell>
-    )
-    expect(shellOf().className).toContain('bg-[#1e2330]')
-    expect(shellOf().className).toContain('rounded-[20px]')
-    unmount()
-
-    renderWithProviders(
-      <CardShell variant="light" data-testid="light">
-        body
-      </CardShell>
-    )
-    expect(shellOf('light').className).toContain('bg-[#f1f0ee]')
-
-    renderWithProviders(
-      <CardShell variant="dark" bgClassName="bg-[#F2F3F4]" data-testid="audio">
-        body
-      </CardShell>
-    )
-    const audio = shellOf('audio')
-    expect(audio.className).toContain('bg-[#F2F3F4]')
-    expect(audio.className).not.toContain('bg-[#1e2330]')
-  })
-
   it('locks to the 250px column only when fixedHeight is set', () => {
     renderWithProviders(
       <CardShell variant="dark" fixedHeight data-testid="fixed">
@@ -109,6 +77,7 @@ describe('CardShell', () => {
       </CardShell>
     )
     expect(shellOf('intrinsic').className).toContain('block')
+    // eslint-disable-next-line local/no-style-only-assertion -- MES-1349: the reserved box is the contract; jsdom has no layout to observe it.
     expect(shellOf('intrinsic').className).not.toContain('h-[250px]')
   })
 
@@ -163,18 +132,23 @@ describe('CardShell', () => {
         body
       </CardShell>
     )
-    const corner = screen.getByText('Dismiss').parentElement
-    expect(corner?.className).toContain('absolute right-3 top-3')
-    expect(corner?.className).toContain('z-10')
+    const corner = screen.getByTestId('card-shell-top-right')
+    expect(corner).toContainElement(
+      screen.getByRole('button', { name: 'Dismiss' })
+    )
+    /* eslint-disable local/no-style-only-assertion -- an overlay control: in flow it would displace the hero, and without the stacking it stops being clickable. */
+    expect(corner.className).toContain('absolute right-3 top-3')
+    expect(corner.className).toContain('z-10')
+    /* eslint-enable local/no-style-only-assertion */
   })
 
   it('omits the corner wrapper when no topRight is provided', () => {
-    const { container } = renderWithProviders(
+    renderWithProviders(
       <CardShell variant="dark" data-testid="shell">
         body
       </CardShell>
     )
-    expect(container.querySelectorAll('div.absolute')).toHaveLength(0)
+    expect(screen.queryByTestId('card-shell-top-right')).not.toBeInTheDocument()
   })
 
   it.each([