@linktr.ee/messaging-react 4.4.3-rc-1788166409 → 4.4.3-rc-1788170348

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linktr.ee/messaging-react",
-  "version": "4.4.3-rc-1788166409",
+  "version": "4.4.3-rc-1788170348",
   "description": "React messaging components built on messaging-core for web applications",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,8 +50,8 @@
     "chromatic:local": "yarn storybook:build && chromatic"
   },
   "dependencies": {
-    "@linktr.ee/messaging-core": "2.6.0-rc-1788166409",
-    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1788166409",
+    "@linktr.ee/messaging-core": "2.6.0-rc-1788170348",
+    "@linktr.ee/messaging-taxonomy": "0.11.0-rc-1788170348",
     "@phosphor-icons/react": "^2.1.10"
   },
   "devDependencies": {

package/src/components/AttachmentCard/MediaPlayer.test.tsx

@@ -262,7 +262,7 @@ describe('MediaPlayer', () => {
     expect(container.querySelector('.animate-spin')).toBeNull()
   })
 
-  it('seeks with keyboard and pointer input and expands the scrubber on hover', () => {
+  it('seeks with keyboard and pointer input and reveals the scrubber thumb on hover', () => {
     const { container } = renderWithProviders(
       <MediaPlayer source={SOURCE} mimeType="video/mp4" controls showProgress />
     )
@@ -272,7 +272,6 @@ describe('MediaPlayer', () => {
       value: 100,
     })
     const slider = screen.getByRole('slider', { name: 'Playback position' })
-    const track = slider.firstElementChild as HTMLElement
     const thumb = slider.lastElementChild as HTMLElement
     vi.spyOn(slider, 'getBoundingClientRect').mockReturnValue({
       left: 100,
@@ -286,18 +285,15 @@ describe('MediaPlayer', () => {
       toJSON: () => ({}),
     })
 
-    expect(track).toHaveClass('h-1')
     expect(thumb).toHaveClass('scale-0', 'opacity-0')
     fireEvent.mouseEnter(slider)
-    expect(track).toHaveClass('h-1.5')
     expect(thumb).toHaveClass('scale-100', 'opacity-100')
     fireEvent.mouseLeave(slider)
-    expect(track).toHaveClass('h-1')
+    expect(thumb).toHaveClass('scale-0', 'opacity-0')
 
     fireEvent.mouseDown(slider, { clientX: 150 })
     expect(slider).toHaveAttribute('aria-valuenow', '25')
     expect(video.currentTime).toBe(25)
-    expect(track).toHaveClass('h-1.5')
     expect(thumb).toHaveClass('scale-100', 'opacity-100')
 
     fireEvent.mouseUp(window, { clientX: 150 })

package/src/components/AttachmentCard/Thumbnail.test.tsx

@@ -147,28 +147,15 @@ describe('AttachmentThumbnail', () => {
   })
 
   it('renders a document icon placeholder without a thumbnail', () => {
-    {
-      const view = renderWithProviders(
-        <AttachmentThumbnail
-          mimeType="application/pdf"
-          variant="dark"
-          title="PDF"
-        />
-      )
-      const darkIcon = view.container.querySelector('svg') as SVGElement
-      expect(darkIcon).toHaveClass('size-12', 'text-white/20')
-      expect(view.container.firstElementChild).toHaveClass('bg-white/10')
-      view.unmount()
-    }
-
-    {
-      const view = renderWithProviders(
-        <AttachmentThumbnail mimeType="application/pdf" variant="light" />
-      )
-      const lightIcon = view.container.querySelector('svg') as SVGElement
-      expect(lightIcon).toHaveClass('size-12', 'text-black/20')
-      expect(view.container.firstElementChild).toHaveClass('bg-black/5')
-    }
+    const { container } = renderWithProviders(
+      <AttachmentThumbnail
+        mimeType="application/pdf"
+        variant="dark"
+        title="PDF"
+      />
+    )
+    expect(container.querySelector('img')).toBeNull()
+    expect(container.querySelector('svg')).toBeInTheDocument()
   })
 
   it('renders the poster-only branch with variant-specific shell and alt fallback', () => {
@@ -214,10 +201,6 @@ describe('AttachmentThumbnail', () => {
       />
     )
     expect(container.querySelector('img')).toBeNull()
-    expect(container.querySelector('svg')).toHaveClass(
-      'size-12',
-      'text-black/20'
-    )
-    expect(container.firstElementChild).toHaveClass('bg-black/5')
+    expect(container.querySelector('svg')).toBeInTheDocument()
   })
 })

package/src/components/AttachmentCard/index.test.tsx

@@ -8,37 +8,7 @@ import AttachmentCard from './index'
 const thumbnail = <div data-testid="thumbnail">thumbnail</div>
 
 describe('AttachmentCard', () => {
-  it('applies the dark and light root surfaces and type icon colors', () => {
-    {
-      const view = renderWithProviders(
-        <AttachmentCard
-          variant="dark"
-          thumbnail={thumbnail}
-          mimeType="application/pdf"
-          title="Dark file"
-        />
-      )
-      expect(screen.getByText('Dark file')).toBeInTheDocument()
-      expect(view.container.firstElementChild).toHaveClass('bg-[#1e2330]')
-      expect(view.container.querySelector('svg')).toHaveClass('text-white/55')
-      view.unmount()
-    }
-
-    {
-      const view = renderWithProviders(
-        <AttachmentCard
-          variant="light"
-          thumbnail={thumbnail}
-          mimeType="application/pdf"
-          title="Light file"
-        />
-      )
-      expect(view.container.firstElementChild).toHaveClass('bg-white')
-      expect(view.container.querySelector('svg')).toHaveClass('text-black/55')
-    }
-  })
-
-  it('uses the dark placeholder title and dims it when title is absent', () => {
+  it('renders the dark placeholder title when no title is supplied', () => {
     renderWithProviders(
       <AttachmentCard
         variant="dark"
@@ -47,7 +17,7 @@ describe('AttachmentCard', () => {
         placeholderTitle="Waiting for title"
       />
     )
-    expect(screen.getByText('Waiting for title')).toHaveClass('text-white/30')
+    expect(screen.getByText('Waiting for title')).toBeInTheDocument()
   })
 
   it('does not render a light title for missing or whitespace-only values', () => {
@@ -71,7 +41,7 @@ describe('AttachmentCard', () => {
     expect(screen.queryByText('   ')).toBeNull()
   })
 
-  it('uses an undimmed title class when a dark title is provided', () => {
+  it('renders the supplied dark title instead of the placeholder', () => {
     renderWithProviders(
       <AttachmentCard
         variant="dark"
@@ -80,8 +50,8 @@ describe('AttachmentCard', () => {
         title="Named file"
       />
     )
-    expect(screen.getByText('Named file')).toHaveClass('text-white')
-    expect(screen.getByText('Named file')).not.toHaveClass('text-white/30')
+    expect(screen.getByText('Named file')).toBeInTheDocument()
+    expect(screen.queryByText('Attachment title')).toBeNull()
   })
 
   it('renders detail only for non-empty values', () => {

package/src/components/Avatar/Avatar.test.tsx

@@ -153,10 +153,8 @@ describe('Avatar', () => {
       <Avatar id="" name="Alice" className="custom-avatar" />
     )
     const root = container.firstElementChild
-    const ring = container.querySelector('[data-testid="avatar-ring"]')
 
-    expect(root).toHaveClass('relative', 'flex-shrink-0', 'custom-avatar')
-    expect(ring).toHaveClass('h-full', 'w-full', 'bg-transparent')
+    expect(root).toHaveClass('custom-avatar')
     expect(root).toHaveStyle({
       backgroundColor: '#FFD1DD',
       width: '40px',

package/src/components/ChannelList/CustomChannelPreview.test.tsx

@@ -87,7 +87,7 @@ describe('CustomChannelPreview', () => {
     defaultProps.onChannelSelect.mockClear()
   })
 
-  it('applies selected and unselected row styling from context', () => {
+  it('drops the hover affordance on the selected row only', () => {
     const channel = createMockChannel([])
     const otherChannel = createMockChannel([])
     otherChannel.id = 'channel-2'
@@ -105,7 +105,6 @@ describe('CustomChannelPreview', () => {
     )
 
     let row = screen.getByRole('button')
-    expect(row).toHaveClass('bg-black/[0.04]')
     expect(row).not.toHaveClass('hover:bg-black/[0.02]')
 
     rerender(
@@ -121,7 +120,6 @@ describe('CustomChannelPreview', () => {
     )
 
     row = screen.getByRole('button')
-    expect(row).not.toHaveClass('bg-black/[0.04]')
     expect(row).toHaveClass('hover:bg-black/[0.02]')
 
     rerender(

package/src/components/ChannelView.test.tsx

@@ -284,12 +284,6 @@ describe('ChannelView', () => {
     const button = screen.getByRole('button', {
       name: /view details for linker/i,
     })
-    expect(button).toHaveClass(
-      'appearance-none',
-      'border-0',
-      'bg-transparent',
-      'flex-col'
-    )
 
     const avatars = screen.getAllByTestId('avatar')
     expect(avatars.length).toBeGreaterThanOrEqual(1)

package/src/components/CustomLinkPreviewList/CustomLinkPreviewList.test.tsx

@@ -40,6 +40,7 @@ describe('CustomLinkPreviewList', () => {
 
     const shell = screen.getByLabelText(LOADING_LABEL)
     expect(shell).toHaveAttribute('aria-busy', 'true')
+    // eslint-disable-next-line local/no-style-only-assertion -- MES-1349: the reserved 250px is the regression itself, and jsdom has no layout to observe the snap-open.
     expect(shell.className).toContain('h-[250px]')
     // Hero placeholder + the two chin bars: without the hero there are two.
     expect(container.querySelectorAll('.animate-pulse')).toHaveLength(3)

package/src/components/CustomMessageInput/CustomMessageInput.test.tsx

@@ -378,6 +378,7 @@ describe('CustomMessageInput', () => {
       expect(
         card.querySelector('.messaging-composer-previews')
       ).not.toHaveClass('min-h-0')
+      // eslint-disable-next-line local/no-style-only-assertion -- MES-1037: the row not being shrink-0 is part of the single-scroll contract in this component's doc comment, and jsdom has no layout to observe the squeeze it prevents.
       expect(card.querySelector('.messaging-composer-row')).not.toHaveClass(
         'shrink-0'
       )
@@ -487,6 +488,7 @@ describe('CustomMessageInput', () => {
       // card scrolls far enough for the button to ride up to the top of the
       // row, a staged preview otherwise meets it flush. Asserted together so
       // they cannot drift apart.
+      // eslint-disable-next-line local/no-style-only-assertion -- the point is that these three offsets match; sticky resolution isn't observable in jsdom.
       expect(screen.getByTestId('send-button').parentElement).toHaveClass(
         'sticky',
         'bottom-2',

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 */
   })
 })
 
@@ -416,6 +392,7 @@ describe('LinkAttachment accent chin (MES-1349, MES-1388)', () => {
       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)
 
@@ -514,7 +491,6 @@ 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)
     // 44x44 touch target without growing the 24px circle.
@@ -540,6 +516,7 @@ describe('LinkAttachment.Composer chrome', () => {
       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')
   })
@@ -552,6 +529,7 @@ describe('LinkAttachment.Composer chrome', () => {
       '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(container).className).toContain('h-[250px]')
   })
 
@@ -572,7 +550,6 @@ describe('LinkAttachment.Composer chrome', () => {
     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', () => {
@@ -787,6 +764,7 @@ describe('LinkAttachment layout and surface', () => {
       )
       expect(screen.queryByRole('img', { hidden: true })).toBeNull()
       const shell = shellOf(container)
+      // 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')
     }
@@ -803,6 +781,7 @@ describe('LinkAttachment layout and surface', () => {
       '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(container).className).toContain('h-[250px]')
   })
 
@@ -817,6 +796,7 @@ describe('LinkAttachment layout and surface', () => {
       )
       const shell = shellOf(container)
       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()
     }

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')
     }
   })
 
@@ -165,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', () => {
@@ -184,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', () => {
@@ -204,7 +171,7 @@ describe('CardBody', () => {
     expect(screen.queryByTestId('app-icon')).not.toBeInTheDocument()
   })
 
-  it('renders two variant-aware skeleton bars instead of text while loading', () => {
+  it('renders two skeleton bars instead of text while loading', () => {
     const { container: dark } = renderWithProviders(
       <CardBody variant="dark" title="Brie’s FAQ" url="tr.ee/a" isLoading />
     )
@@ -213,20 +180,9 @@ describe('CardBody', () => {
 
     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')
-    }
   })
 
   it('renders the skeleton even when there is nothing else to show', () => {

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]')
   })
 
@@ -164,8 +133,10 @@ describe('CardShell', () => {
       </CardShell>
     )
     const corner = screen.getByText('Dismiss').parentElement
+    /* 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', () => {

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

@@ -100,9 +100,6 @@ describe('CardThumbnail', () => {
     expect(video?.getAttribute('poster')).toBe(IMAGE_SRC)
     expect(video?.hasAttribute('controls')).toBe(true)
     expect(video?.getAttribute('preload')).toBe('metadata')
-    expect(container.querySelector('div.flex-1')?.className).toContain(
-      'bg-black'
-    )
   })
 
   it('probes the video poster with a hidden image that reports failures', () => {
@@ -183,42 +180,24 @@ describe('CardThumbnail', () => {
     expect(onImageError).toHaveBeenCalledTimes(1)
   })
 
-  it('shows a variant-aware type-icon placeholder without a thumbnail', () => {
-    const { container: dark } = renderWithProviders(
+  it('shows a type-icon placeholder instead of an image without a thumbnail', () => {
+    const { container } = renderWithProviders(
       <CardThumbnail variant="dark" mimeType="application/pdf" />
     )
-    expect(dark.querySelectorAll('img')).toHaveLength(0)
-    const darkPlaceholder = dark.querySelector('div.items-center')
-    expect(darkPlaceholder?.className).toContain('bg-white/10')
-    expect(darkPlaceholder?.querySelector('svg')?.getAttribute('class')).toBe(
-      'size-16 text-white/25'
-    )
-
-    const { container: light } = renderWithProviders(
-      <CardThumbnail variant="light" />
-    )
-    const lightPlaceholder = light.querySelector('div.items-center')
-    expect(lightPlaceholder?.className).toContain('bg-black/5')
-    expect(lightPlaceholder?.querySelector('svg')?.getAttribute('class')).toBe(
-      'size-16 text-black/25'
-    )
+    expect(container.querySelectorAll('img')).toHaveLength(0)
+    expect(
+      container.querySelector('div.items-center')?.querySelector('svg')
+    ).toBeInTheDocument()
   })
 
-  it('pulses a variant-aware block while loading, ignoring the thumbnail', () => {
-    const { container: dark } = renderWithProviders(
+  it('pulses a placeholder block while loading, ignoring the thumbnail', () => {
+    const { container } = renderWithProviders(
       <CardThumbnail variant="dark" thumbnailUrl={IMAGE_SRC} isLoading />
     )
-    expect(dark.querySelectorAll('img')).toHaveLength(0)
-    const bar = dark.querySelector('div.animate-pulse')
-    expect(bar?.className).toContain('bg-white/10')
+    expect(container.querySelectorAll('img')).toHaveLength(0)
+    const bar = container.querySelector('div.animate-pulse')
+    expect(bar).toBeInTheDocument()
     expect(bar?.getAttribute('aria-hidden')).toBe('true')
-
-    const { container: light } = renderWithProviders(
-      <CardThumbnail variant="light" isLoading />
-    )
-    expect(light.querySelector('div.animate-pulse')?.className).toContain(
-      'bg-black/5'
-    )
   })
 
   it('pins the corner slots and omits their wrappers when unused', () => {
@@ -229,12 +208,14 @@ describe('CardThumbnail', () => {
         topRight={<span>right</span>}
       />
     )
+    /* eslint-disable local/no-style-only-assertion -- overlay slots: in flow they would displace the hero instead of sitting over it. */
     expect(screen.getByText('left').parentElement?.className).toContain(
       'absolute left-3 top-3'
     )
     expect(screen.getByText('right').parentElement?.className).toContain(
       'absolute right-3 top-3'
     )
+    /* eslint-enable local/no-style-only-assertion */
 
     const { container } = renderWithProviders(<CardThumbnail variant="dark" />)
     expect(container.querySelectorAll('div.absolute')).toHaveLength(0)

package/src/components/MessageAttachment/MessageAttachment.test.tsx

@@ -370,6 +370,7 @@ describe('MessageAttachment.Bubble geometry overrides', () => {
         filename="file.zip"
       />
     )
+    // eslint-disable-next-line local/no-style-only-assertion -- the override contract above, not the values: an appended radius silently loses to the corner table.
     expect(screen.getByTestId('file-attachment')).toHaveClass(
       'w-[280px]',
       'px-2',
@@ -383,6 +384,7 @@ describe('MessageAttachment.Bubble geometry overrides', () => {
       <MessageAttachment.Image.Sent src="https://cdn.example.com/photo.jpg" />
     )
     const bubble = screen.getByTestId('image-attachment')
+    // eslint-disable-next-line local/no-style-only-assertion -- the override contract above, not the values: an appended radius silently loses to the corner table.
     expect(bubble).toHaveClass('w-fit', 'p-0.5', 'rounded-[20px]')
     expect(bubble.className).not.toMatch(
       /w-\[280px\]|px-2|py-2|rounded-tl-\[18px\]/

package/src/components/MessageBubble/MessageBubble.test.tsx

@@ -71,6 +71,5 @@ describe('MessageBubble', () => {
     )
     const bubble = screen.getByText('wide').parentElement as HTMLElement
     expect(bubble.classList.contains('w-fit')).toBe(true)
-    expect(bubble.className).toContain('max-w-[520px]')
   })
 })

package/src/components/RichCard/RichCard.test.tsx

@@ -185,6 +185,7 @@ describe('RichCard', () => {
       />
     )
     const card = await screen.findByTestId('rich-card')
+    // eslint-disable-next-line local/no-style-only-assertion -- MES-1349: not reserving the fixed box is the contract; jsdom has no layout to observe it.
     expect(card.className).not.toContain('h-[250px]')
   })
 
@@ -222,30 +223,6 @@ describe('RichCard', () => {
     expect(onClick).toHaveBeenCalledTimes(1)
   })
 
-  it('stacks a primary footer full-width and lays a secondary footer inline', async () => {
-    const { rerender } = renderWithProviders(
-      <RichCard.Received
-        title="Card"
-        images={[HERO]}
-        actions={[{ label: 'Set up welcome message', variant: 'primary' }]}
-      />
-    )
-    // Primary → stacked, full-width button.
-    expect(await screen.findByText('Set up welcome message')).toHaveClass(
-      'w-full'
-    )
-
-    rerender(
-      <RichCard.Received
-        title="Card"
-        images={[HERO]}
-        actions={[{ label: 'Shop now', href: 'tr.ee/x', variant: 'secondary' }]}
-      />
-    )
-    // Secondary → inline, content-width button (no w-full).
-    expect(screen.getByText('Shop now').closest('a')).not.toHaveClass('w-full')
-  })
-
   it('lays a secondary chin out as a row: copy left, action right', async () => {
     const { rerender } = renderWithProviders(
       <RichCard.Received