@open-mercato/ui 0.6.4-develop.4178.1.aad9ddaa95 → 0.6.4-develop.4210.1.d412061cfe

package/src/primitives/__tests__/drawer.test.tsx

@@ -0,0 +1,264 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render, fireEvent, screen } from '@testing-library/react'
+import {
+  Drawer,
+  DrawerTrigger,
+  DrawerContent,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerDescription,
+  DrawerBody,
+  DrawerFooter,
+  DrawerClose,
+} from '../drawer'
+
+function ExampleDrawer({
+  side,
+  hideCloseButton,
+  defaultOpen = true,
+}: {
+  side?: 'right' | 'left' | 'top' | 'bottom'
+  hideCloseButton?: boolean
+  defaultOpen?: boolean
+}) {
+  return (
+    <Drawer defaultOpen={defaultOpen}>
+      <DrawerTrigger>Open</DrawerTrigger>
+      <DrawerContent side={side} hideCloseButton={hideCloseButton}>
+        <DrawerHeader>
+          <DrawerTitle>Edit person</DrawerTitle>
+          <DrawerDescription>Update the person's contact info.</DrawerDescription>
+        </DrawerHeader>
+        <DrawerBody>
+          <p>Body content</p>
+        </DrawerBody>
+        <DrawerFooter>
+          <DrawerClose>Cancel</DrawerClose>
+          <button>Save</button>
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+describe('Drawer', () => {
+  it('renders trigger + content slots inside a Radix Dialog', () => {
+    const { container } = render(<ExampleDrawer />)
+    expect(document.querySelector('[data-slot="drawer-content"]')).not.toBeNull()
+    expect(document.querySelector('[data-slot="drawer-overlay"]')).not.toBeNull()
+    expect(document.querySelector('[data-slot="drawer-header"]')).not.toBeNull()
+    expect(document.querySelector('[data-slot="drawer-body"]')).not.toBeNull()
+    expect(document.querySelector('[data-slot="drawer-footer"]')).not.toBeNull()
+    expect(document.querySelector('[data-slot="drawer-title"]')).not.toBeNull()
+    expect(document.querySelector('[data-slot="drawer-description"]')).not.toBeNull()
+  })
+
+  it('opens on trigger click when controlled-default is closed', () => {
+    function ControlledDrawer() {
+      const [open, setOpen] = React.useState(false)
+      return (
+        <Drawer open={open} onOpenChange={setOpen}>
+          <DrawerTrigger>Open</DrawerTrigger>
+          <DrawerContent>
+            <DrawerHeader>
+              <DrawerTitle>Test</DrawerTitle>
+            </DrawerHeader>
+          </DrawerContent>
+        </Drawer>
+      )
+    }
+    const { container, getByText } = render(<ControlledDrawer />)
+    expect(document.querySelector('[data-slot="drawer-content"]')).toBeNull()
+    fireEvent.click(getByText('Open'))
+    expect(document.querySelector('[data-slot="drawer-content"]')).not.toBeNull()
+  })
+
+  it('marks the content with data-side="right" by default', () => {
+    const { container } = render(<ExampleDrawer />)
+    const content = document.querySelector('[data-slot="drawer-content"]') as HTMLElement
+    expect(content.getAttribute('data-side')).toBe('right')
+  })
+
+  it('applies right-side positioning classes + inner rounded corners by default', () => {
+    const { container } = render(<ExampleDrawer />)
+    const content = document.querySelector('[data-slot="drawer-content"]') as HTMLElement
+    expect(content.className).toContain('right-0')
+    expect(content.className).toContain('inset-y-0')
+    expect(content.className).toContain('max-w-md')
+    // Per Figma: inner edge rounded, no panel border on the seam.
+    expect(content.className).toContain('rounded-l-xl')
+    expect(content.className).not.toMatch(/\bborder-l\b/)
+  })
+
+  it('applies left-side classes (rounded right edge) when side="left"', () => {
+    const { container } = render(<ExampleDrawer side="left" />)
+    const content = document.querySelector('[data-slot="drawer-content"]') as HTMLElement
+    expect(content.className).toContain('left-0')
+    expect(content.className).toContain('inset-y-0')
+    expect(content.className).toContain('rounded-r-xl')
+    expect(content.className).not.toMatch(/\bborder-r\b/)
+    expect(content.getAttribute('data-side')).toBe('left')
+  })
+
+  it('applies top-side classes (rounded bottom edge) when side="top"', () => {
+    const { container } = render(<ExampleDrawer side="top" />)
+    const content = document.querySelector('[data-slot="drawer-content"]') as HTMLElement
+    expect(content.className).toContain('top-0')
+    expect(content.className).toContain('inset-x-0')
+    expect(content.className).toContain('rounded-b-xl')
+    expect(content.className).not.toMatch(/\bborder-b\b/)
+    expect(content.className).toContain('max-h-[80vh]')
+  })
+
+  it('applies bottom-side classes (rounded top edge) when side="bottom"', () => {
+    const { container } = render(<ExampleDrawer side="bottom" />)
+    const content = document.querySelector('[data-slot="drawer-content"]') as HTMLElement
+    expect(content.className).toContain('bottom-0')
+    expect(content.className).toContain('inset-x-0')
+    expect(content.className).toContain('rounded-t-xl')
+    expect(content.className).not.toMatch(/\bborder-t\b/)
+    expect(content.className).toContain('max-h-[80vh]')
+  })
+
+  it('renders the auto close button by default', () => {
+    const { container } = render(<ExampleDrawer />)
+    expect(document.querySelector('[data-slot="drawer-close-button"]')).not.toBeNull()
+  })
+
+  it('hides the auto close button when hideCloseButton=true', () => {
+    const { container } = render(<ExampleDrawer hideCloseButton />)
+    expect(document.querySelector('[data-slot="drawer-close-button"]')).toBeNull()
+  })
+
+  it('renders role="dialog" with aria-labelledby/describedby wiring from Title + Description', () => {
+    render(<ExampleDrawer />)
+    const dialog = screen.getByRole('dialog')
+    expect(dialog).toBeInTheDocument()
+    const labelledBy = dialog.getAttribute('aria-labelledby')
+    const describedBy = dialog.getAttribute('aria-describedby')
+    expect(labelledBy).toBeTruthy()
+    expect(describedBy).toBeTruthy()
+    expect(document.getElementById(labelledBy as string)?.textContent).toBe('Edit person')
+  })
+
+  it('closes when DrawerClose child is clicked', () => {
+    const { container, getByText } = render(<ExampleDrawer />)
+    expect(document.querySelector('[data-slot="drawer-content"]')).not.toBeNull()
+    fireEvent.click(getByText('Cancel'))
+    expect(document.querySelector('[data-slot="drawer-content"]')).toBeNull()
+  })
+
+  it('renders the header leading badge slot when `leading` is provided', () => {
+    render(
+      <Drawer defaultOpen>
+        <DrawerTrigger>Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader leading={<span data-testid="leading-icon">⏱</span>}>
+            <DrawerTitle>With leading</DrawerTitle>
+            <DrawerDescription>Optional description.</DrawerDescription>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>,
+    )
+    const badge = document.querySelector('[data-slot="drawer-header-leading"]') as HTMLElement
+    expect(badge).not.toBeNull()
+    expect(badge.querySelector('[data-testid="leading-icon"]')).not.toBeNull()
+    expect(badge.className).toContain('rounded-full')
+    expect(badge.className).toContain('size-10')
+    // Title + description still render inside the text block alongside the badge.
+    const text = document.querySelector('[data-slot="drawer-header-text"]') as HTMLElement
+    expect(text).not.toBeNull()
+    expect(text.textContent).toContain('With leading')
+    expect(text.textContent).toContain('Optional description.')
+  })
+
+  it('renders the header without a leading badge by default', () => {
+    render(<ExampleDrawer />)
+    expect(document.querySelector('[data-slot="drawer-header-leading"]')).toBeNull()
+    // Per Figma: no chrome border below the header.
+    const header = document.querySelector('[data-slot="drawer-header"]') as HTMLElement
+    expect(header.className).not.toMatch(/\bborder-b\b/)
+  })
+
+  it('renders the footer default layout with right-aligned trailing children and no top border', () => {
+    render(<ExampleDrawer />)
+    const footer = document.querySelector('[data-slot="drawer-footer"]') as HTMLElement
+    expect(footer.getAttribute('data-layout')).toBe('default')
+    expect(footer.className).not.toMatch(/\bborder-t\b/)
+    expect(document.querySelector('[data-slot="drawer-footer-leading"]')).toBeNull()
+    const trailing = document.querySelector('[data-slot="drawer-footer-trailing"]') as HTMLElement
+    expect(trailing).not.toBeNull()
+    // Without a leading slot the trailing group anchors itself to the right.
+    expect(trailing.className).toContain('ml-auto')
+  })
+
+  it('stretches children evenly when footer layout="equal"', () => {
+    render(
+      <Drawer defaultOpen>
+        <DrawerTrigger>Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>T</DrawerTitle>
+          </DrawerHeader>
+          <DrawerFooter layout="equal">
+            <DrawerClose>Cancel</DrawerClose>
+            <button>Continue</button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    )
+    const footer = document.querySelector('[data-slot="drawer-footer"]') as HTMLElement
+    expect(footer.getAttribute('data-layout')).toBe('equal')
+    // The `[&>*]:flex-1` selector lives in the class list so children
+    // stretch equally. There is no trailing wrapper in equal layout.
+    expect(footer.className).toContain('[&>*]:flex-1')
+    expect(document.querySelector('[data-slot="drawer-footer-trailing"]')).toBeNull()
+  })
+
+  it('renders a left-side leading slot in the footer when `leading` is provided', () => {
+    render(
+      <Drawer defaultOpen>
+        <DrawerTrigger>Open</DrawerTrigger>
+        <DrawerContent>
+          <DrawerHeader>
+            <DrawerTitle>T</DrawerTitle>
+          </DrawerHeader>
+          <DrawerFooter
+            leading={<label data-testid="dont-show">Don&apos;t show again</label>}
+          >
+            <DrawerClose>Cancel</DrawerClose>
+            <button>Continue</button>
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>,
+    )
+    const leading = document.querySelector('[data-slot="drawer-footer-leading"]') as HTMLElement
+    expect(leading).not.toBeNull()
+    expect(leading.className).toContain('mr-auto')
+    expect(leading.querySelector('[data-testid="dont-show"]')).not.toBeNull()
+    // When a leading slot is present the trailing wrapper drops `ml-auto`
+    // (the leading mr-auto already pushes them apart).
+    const trailing = document.querySelector('[data-slot="drawer-footer-trailing"]') as HTMLElement
+    expect(trailing).not.toBeNull()
+    expect(trailing.className).not.toMatch(/\bml-auto\b/)
+  })
+
+  it('forwards className to drawer-content without dropping side classes', () => {
+    const { container } = render(
+      <Drawer defaultOpen>
+        <DrawerTrigger>Open</DrawerTrigger>
+        <DrawerContent className="custom-class">
+          <DrawerHeader>
+            <DrawerTitle>Title</DrawerTitle>
+          </DrawerHeader>
+        </DrawerContent>
+      </Drawer>,
+    )
+    const content = document.querySelector('[data-slot="drawer-content"]') as HTMLElement
+    expect(content.className).toContain('custom-class')
+    expect(content.className).toContain('right-0')
+    expect(content.className).toContain('rounded-l-xl')
+  })
+})

package/src/primitives/__tests__/notification-feed.test.tsx

@@ -0,0 +1,303 @@
+/** @jest-environment jsdom */
+
+import * as React from 'react'
+import { render as rtlRender, fireEvent } from '@testing-library/react'
+import { I18nProvider } from '@open-mercato/shared/lib/i18n/context'
+
+// NotificationFeedItem uses useT() for the interactive aria-label fallback.
+// Use the `wrapper` option (instead of manually wrapping `ui`) so that
+// testing-library's `rerender` re-uses the same I18nProvider — otherwise
+// rerender bypasses the wrap and throws "useT must be used within I18nProvider".
+const Wrapper = ({ children }: { children: React.ReactNode }) => (
+  <I18nProvider locale="en" dict={{}}>{children}</I18nProvider>
+)
+const render: typeof rtlRender = (ui: React.ReactElement, options?: Parameters<typeof rtlRender>[1]) =>
+  rtlRender(ui, { wrapper: Wrapper, ...options })
+
+import {
+  NotificationFeed,
+  NotificationFeedHeader,
+  NotificationFeedList,
+  NotificationFeedItem,
+  NotificationFeedFooter,
+  NotificationFeedIconBadge,
+} from '../notification-feed'
+
+describe('NotificationFeed', () => {
+  it('renders the root card with data-slot markers and rounded shell', () => {
+    const { container } = render(
+      <NotificationFeed>
+        <NotificationFeedHeader title="Notifications" />
+        <NotificationFeedList>
+          <NotificationFeedItem title="New lead" />
+        </NotificationFeedList>
+      </NotificationFeed>,
+    )
+    const root = container.querySelector('[data-slot="notification-feed"]') as HTMLElement
+    expect(root).not.toBeNull()
+    expect(root.className).toContain('rounded-xl')
+    expect(root.className).toContain('border')
+    expect(container.querySelector('[data-slot="notification-feed-header"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="notification-feed-list"]')).not.toBeNull()
+    expect(container.querySelector('[data-slot="notification-feed-item"]')).not.toBeNull()
+  })
+
+  it('renders the header title + actions slot when both are provided', () => {
+    const { container } = render(
+      <NotificationFeed>
+        <NotificationFeedHeader title="Notifications">
+          <button data-testid="settings">⚙</button>
+        </NotificationFeedHeader>
+      </NotificationFeed>,
+    )
+    const title = container.querySelector('[data-slot="notification-feed-header-title"]') as HTMLElement
+    expect(title).not.toBeNull()
+    expect(title.textContent).toBe('Notifications')
+    const actions = container.querySelector(
+      '[data-slot="notification-feed-header-actions"]',
+    ) as HTMLElement
+    expect(actions).not.toBeNull()
+    expect(actions.querySelector('[data-testid="settings"]')).not.toBeNull()
+  })
+
+  it('renders item title + body + timestamp slots without any separator glyph', () => {
+    const { container } = render(
+      <NotificationFeed>
+        <NotificationFeedList>
+          <NotificationFeedItem
+            title="New Lead Generated"
+            body="John Smith submitted web form"
+            timestamp="10 minutes ago"
+          />
+        </NotificationFeedList>
+      </NotificationFeed>,
+    )
+    const item = container.querySelector('[data-slot="notification-feed-item"]') as HTMLElement
+    expect(item).not.toBeNull()
+    expect(item.textContent).toContain('New Lead Generated')
+    expect(item.textContent).toContain('John Smith submitted web form')
+    expect(item.textContent).toContain('10 minutes ago')
+    // No middle-dot or em-dash separator anywhere in the row.
+    expect(item.textContent).not.toContain('·')
+    expect(item.textContent).not.toContain('—')
+  })
+
+  it('renders the unread dot only when `unread` is true', () => {
+    const { container, rerender } = render(
+      <NotificationFeed>
+        <NotificationFeedList>
+          <NotificationFeedItem title="Read" />
+        </NotificationFeedList>
+      </NotificationFeed>,
+    )
+    expect(container.querySelector('[data-slot="notification-feed-item-unread-dot"]')).toBeNull()
+    expect(
+      container.querySelector('[data-slot="notification-feed-item"]')!.getAttribute('data-unread'),
+    ).toBeNull()
+
+    rerender(
+      <NotificationFeed>
+        <NotificationFeedList>
+          <NotificationFeedItem title="Unread" unread />
+        </NotificationFeedList>
+      </NotificationFeed>,
+    )
+    expect(
+      container.querySelector('[data-slot="notification-feed-item-unread-dot"]'),
+    ).not.toBeNull()
+    expect(
+      container.querySelector('[data-slot="notification-feed-item"]')!.getAttribute('data-unread'),
+    ).toBe('true')
+  })
+
+  it('renders the item icon + indented children slots when provided', () => {
+    const { container } = render(
+      <NotificationFeed>
+        <NotificationFeedList>
+          <NotificationFeedItem
+            title="With icon and children"
+            icon={<span data-testid="badge">B</span>}
+          >
+            <button data-testid="approve">Approve</button>
+          </NotificationFeedItem>
+        </NotificationFeedList>
+      </NotificationFeed>,
+    )
+    expect(container.querySelector('[data-slot="notification-feed-item-icon"]')).not.toBeNull()
+    expect(container.querySelector('[data-testid="badge"]')).not.toBeNull()
+    const childrenSlot = container.querySelector(
+      '[data-slot="notification-feed-item-children"]',
+    ) as HTMLElement
+    expect(childrenSlot).not.toBeNull()
+    expect(childrenSlot.querySelector('[data-testid="approve"]')).not.toBeNull()
+  })
+
+  it('renders item as a button when onClick is provided and fires on click + Enter + Space', () => {
+    const onClick = jest.fn()
+    const { container } = render(
+      <NotificationFeed>
+        <NotificationFeedList>
+          <NotificationFeedItem
+            title="Click me"
+            onClick={onClick}
+          />
+        </NotificationFeedList>
+      </NotificationFeed>,
+    )
+    const item = container.querySelector('[data-slot="notification-feed-item"]') as HTMLElement
+    expect(item.getAttribute('role')).toBe('button')
+    expect(item.getAttribute('tabIndex')).toBe('0')
+    expect(item.getAttribute('aria-label')).toBe('Click me')
+
+    fireEvent.click(item)
+    expect(onClick).toHaveBeenCalledTimes(1)
+
+    fireEvent.keyDown(item, { key: 'Enter' })
+    expect(onClick).toHaveBeenCalledTimes(2)
+
+    fireEvent.keyDown(item, { key: ' ' })
+    expect(onClick).toHaveBeenCalledTimes(3)
+
+    fireEvent.keyDown(item, { key: 'a' })
+    expect(onClick).toHaveBeenCalledTimes(3)
+  })
+
+  it('does NOT wrap the item as a button when onClick is omitted', () => {
+    const { container } = render(
+      <NotificationFeed>
+        <NotificationFeedList>
+          <NotificationFeedItem title="Non-clickable" />
+        </NotificationFeedList>
+      </NotificationFeed>,
+    )
+    const item = container.querySelector('[data-slot="notification-feed-item"]') as HTMLElement
+    expect(item.getAttribute('role')).toBeNull()
+    expect(item.getAttribute('tabIndex')).toBeNull()
+    expect(item.className).not.toMatch(/cursor-pointer/)
+  })
+
+  it('renders the actions slot when provided and prevents bubble click to row onClick', () => {
+    const onItemClick = jest.fn()
+    const onActionClick = jest.fn()
+    const { container } = render(
+      <NotificationFeed>
+        <NotificationFeedList>
+          <NotificationFeedItem
+            title="With actions"
+            onClick={onItemClick}
+            actions={
+              <button data-testid="kebab" onClick={onActionClick}>
+                ⋯
+              </button>
+            }
+          />
+        </NotificationFeedList>
+      </NotificationFeed>,
+    )
+    const actionsWrap = container.querySelector(
+      '[data-slot="notification-feed-item-actions"]',
+    ) as HTMLElement
+    expect(actionsWrap).not.toBeNull()
+    const kebab = container.querySelector('[data-testid="kebab"]') as HTMLButtonElement
+    fireEvent.click(kebab)
+    expect(onActionClick).toHaveBeenCalledTimes(1)
+    // Action click does NOT bubble up to the row's onClick — the slot
+    // wrapper explicitly stops propagation.
+    expect(onItemClick).not.toHaveBeenCalled()
+  })
+
+  it('renders the footer slot', () => {
+    const { container } = render(
+      <NotificationFeed>
+        <NotificationFeedList>
+          <NotificationFeedItem title="x" />
+        </NotificationFeedList>
+        <NotificationFeedFooter>
+          <button data-testid="archive-all">Archive all</button>
+        </NotificationFeedFooter>
+      </NotificationFeed>,
+    )
+    const footer = container.querySelector('[data-slot="notification-feed-footer"]') as HTMLElement
+    expect(footer).not.toBeNull()
+    expect(footer.querySelector('[data-testid="archive-all"]')).not.toBeNull()
+  })
+
+  it('IconBadge renders with the correct tone class per tone', () => {
+    const cases: Array<{
+      tone: 'indigo' | 'success' | 'warning' | 'error' | 'info' | 'brand' | 'neutral'
+      expectedClasses: string[]
+    }> = [
+      { tone: 'indigo', expectedClasses: ['bg-accent-indigo/10', 'text-accent-indigo'] },
+      { tone: 'success', expectedClasses: ['bg-status-success-icon/10', 'text-status-success-icon'] },
+      { tone: 'warning', expectedClasses: ['bg-status-warning-icon/10', 'text-status-warning-icon'] },
+      { tone: 'error', expectedClasses: ['bg-status-error-icon/10', 'text-status-error-icon'] },
+      { tone: 'info', expectedClasses: ['bg-status-info-icon/10', 'text-status-info-icon'] },
+      { tone: 'brand', expectedClasses: ['bg-brand-violet/10', 'text-brand-violet'] },
+      { tone: 'neutral', expectedClasses: ['bg-muted', 'text-muted-foreground'] },
+    ]
+    for (const { tone, expectedClasses } of cases) {
+      const { container, unmount } = render(
+        <NotificationFeedIconBadge tone={tone}>x</NotificationFeedIconBadge>,
+      )
+      const badge = container.querySelector(
+        '[data-slot="notification-feed-icon-badge"]',
+      ) as HTMLElement
+      expect(badge).not.toBeNull()
+      expect(badge.getAttribute('data-tone')).toBe(tone)
+      for (const cls of expectedClasses) {
+        expect(badge.className).toContain(cls)
+      }
+      unmount()
+    }
+  })
+
+  it('IconBadge defaults to tone="indigo" and size="default" (size-10)', () => {
+    const { container } = render(
+      <NotificationFeedIconBadge>x</NotificationFeedIconBadge>,
+    )
+    const badge = container.querySelector(
+      '[data-slot="notification-feed-icon-badge"]',
+    ) as HTMLElement
+    expect(badge.getAttribute('data-tone')).toBe('indigo')
+    expect(badge.className).toContain('bg-accent-indigo/10')
+    expect(badge.className).toContain('size-10')
+  })
+
+  it('IconBadge supports sm size (size-8)', () => {
+    const { container } = render(
+      <NotificationFeedIconBadge size="sm">x</NotificationFeedIconBadge>,
+    )
+    const badge = container.querySelector(
+      '[data-slot="notification-feed-icon-badge"]',
+    ) as HTMLElement
+    expect(badge.className).toContain('size-8')
+    expect(badge.className).not.toContain('size-10')
+  })
+
+  it('forwards className on each compound slot', () => {
+    const { container } = render(
+      <NotificationFeed className="root-custom">
+        <NotificationFeedHeader className="header-custom" title="t" />
+        <NotificationFeedList className="list-custom">
+          <NotificationFeedItem className="item-custom" title="x" />
+        </NotificationFeedList>
+        <NotificationFeedFooter className="footer-custom">x</NotificationFeedFooter>
+      </NotificationFeed>,
+    )
+    expect(container.querySelector('[data-slot="notification-feed"]')!.className).toContain(
+      'root-custom',
+    )
+    expect(container.querySelector('[data-slot="notification-feed-header"]')!.className).toContain(
+      'header-custom',
+    )
+    expect(container.querySelector('[data-slot="notification-feed-list"]')!.className).toContain(
+      'list-custom',
+    )
+    expect(container.querySelector('[data-slot="notification-feed-item"]')!.className).toContain(
+      'item-custom',
+    )
+    expect(container.querySelector('[data-slot="notification-feed-footer"]')!.className).toContain(
+      'footer-custom',
+    )
+  })
+})

package/src/primitives/__tests__/notification.test.tsx

@@ -29,12 +29,12 @@ describe('Notification primitive', () => {
     expect(screen.getByText('On the latest deal').tagName).toBe('P')
   })
 
-  it('description gets opacity-72 per Figma Notification reference', () => {
+  it('description gets opacity-70 (DS opacity scale; was opacity-72 in early v5, snapped to scale per .ai/ds-rules.md)', () => {
     const { container } = render(
       <Notification title="t" description="body" />,
     )
     const desc = container.querySelector('[data-slot="notification-description"]')
-    expect(desc).toHaveClass('opacity-72')
+    expect(desc).toHaveClass('opacity-70')
   })
 
   it('renders the timestamp slot when provided', () => {
@@ -116,4 +116,104 @@ describe('Notification primitive', () => {
     expect(ref.current).not.toBeNull()
     expect(ref.current?.getAttribute('data-slot')).toBe('notification')
   })
+
+  describe('autoDismissMs', () => {
+    beforeEach(() => {
+      jest.useFakeTimers()
+    })
+    afterEach(() => {
+      jest.runOnlyPendingTimers()
+      jest.useRealTimers()
+    })
+
+    it('fires onDismiss after the configured delay', () => {
+      const onDismiss = jest.fn()
+      render(
+        <Notification
+          title="Saved"
+          autoDismissMs={3000}
+          onDismiss={onDismiss}
+        />,
+      )
+      expect(onDismiss).not.toHaveBeenCalled()
+      jest.advanceTimersByTime(2999)
+      expect(onDismiss).not.toHaveBeenCalled()
+      jest.advanceTimersByTime(1)
+      expect(onDismiss).toHaveBeenCalledTimes(1)
+    })
+
+    it('does NOT fire onDismiss when autoDismissMs is undefined', () => {
+      const onDismiss = jest.fn()
+      render(<Notification title="Persistent" onDismiss={onDismiss} />)
+      jest.advanceTimersByTime(60000)
+      expect(onDismiss).not.toHaveBeenCalled()
+    })
+
+    it('does NOT fire onDismiss when autoDismissMs is 0', () => {
+      const onDismiss = jest.fn()
+      render(
+        <Notification title="t" autoDismissMs={0} onDismiss={onDismiss} />,
+      )
+      jest.advanceTimersByTime(10000)
+      expect(onDismiss).not.toHaveBeenCalled()
+    })
+
+    it('pauses the timer on hover and resumes (restarts) on mouse leave when pauseOnHover defaults to true', () => {
+      const onDismiss = jest.fn()
+      const { container } = render(
+        <Notification
+          title="Hover me"
+          autoDismissMs={3000}
+          onDismiss={onDismiss}
+        />,
+      )
+      const root = container.querySelector('[data-slot="notification"]') as HTMLElement
+      // Advance ~half the delay
+      jest.advanceTimersByTime(1500)
+      // Hover pauses the timer
+      fireEvent.mouseEnter(root)
+      expect(root.getAttribute('data-auto-dismiss-paused')).toBe('true')
+      jest.advanceTimersByTime(10000)
+      expect(onDismiss).not.toHaveBeenCalled()
+      // Leave restarts the timer from zero — full delay needed
+      fireEvent.mouseLeave(root)
+      expect(root.getAttribute('data-auto-dismiss-paused')).toBeNull()
+      jest.advanceTimersByTime(2999)
+      expect(onDismiss).not.toHaveBeenCalled()
+      jest.advanceTimersByTime(1)
+      expect(onDismiss).toHaveBeenCalledTimes(1)
+    })
+
+    it('honors pauseOnHover=false — timer keeps running on hover', () => {
+      const onDismiss = jest.fn()
+      const { container } = render(
+        <Notification
+          title="No pause"
+          autoDismissMs={2000}
+          pauseOnHover={false}
+          onDismiss={onDismiss}
+        />,
+      )
+      const root = container.querySelector('[data-slot="notification"]') as HTMLElement
+      fireEvent.mouseEnter(root)
+      expect(root.getAttribute('data-auto-dismiss-paused')).toBeNull()
+      jest.advanceTimersByTime(2000)
+      expect(onDismiss).toHaveBeenCalledTimes(1)
+    })
+
+    it('cancels the timer when autoDismissMs prop is removed (set to undefined)', () => {
+      const onDismiss = jest.fn()
+      const { rerender } = render(
+        <Notification
+          title="Cancel me"
+          autoDismissMs={3000}
+          onDismiss={onDismiss}
+        />,
+      )
+      jest.advanceTimersByTime(1000)
+      rerender(<Notification title="Cancel me" onDismiss={onDismiss} />)
+      jest.advanceTimersByTime(10000)
+      expect(onDismiss).not.toHaveBeenCalled()
+    })
+  })
 })