@astryxdesign/core 0.5.0 → 0.5.1-canary.f64186a

package/src/Toast/ToastViewport.test.tsx

@@ -12,8 +12,17 @@
  *   announcement flow changes, update these tests
  */
 
-import {describe, it, expect, vi, beforeAll, afterEach} from 'vitest';
 import {
+  describe,
+  it,
+  expect,
+  expectTypeOf,
+  vi,
+  beforeAll,
+  afterEach,
+} from 'vitest';
+import {
+  cleanup,
   render,
   screen,
   fireEvent,
@@ -22,7 +31,10 @@ import {
   within,
 } from '@testing-library/react';
 import React from 'react';
+import {readFileSync} from 'node:fs';
 import {type AnnounceFn, __resetLiveRegionsForTest} from '../hooks/useAnnounce';
+import {Button} from '../Button';
+import {Toast, type ToastProps} from './Toast';
 import {ToastViewport} from './ToastViewport';
 import {useToast} from './useToast';
 import type {ToastOptions} from './types';
@@ -59,6 +71,10 @@ beforeAll(() => {
     HTMLElement.prototype.showPopover = vi.fn();
     HTMLElement.prototype.hidePopover = vi.fn();
   }
+  if (typeof HTMLElement.prototype.setPointerCapture === 'undefined') {
+    HTMLElement.prototype.setPointerCapture = vi.fn();
+    HTMLElement.prototype.releasePointerCapture = vi.fn();
+  }
 });
 
 // Toast text is mirrored into the singleton live regions, which outlive each
@@ -66,6 +82,7 @@ beforeAll(() => {
 afterEach(() => {
   __resetLiveRegionsForTest();
   announceSpy.mockClear();
+  vi.unstubAllGlobals();
 });
 
 // Module-level constant default props (avoids unstable-default-props lint).
@@ -89,11 +106,34 @@ function ShowToastButton({
 const INFO_A: ToastOptions = {body: 'Toast A'};
 const INFO_B: ToastOptions = {body: 'Toast B'};
 const AUTO_TOAST: ToastOptions = {body: 'Auto toast', autoHideDuration: 3000};
+const SWIPE_TOAST: ToastOptions = {body: 'Swipe toast', isAutoHide: false};
+const LONG_TOAST_BODY =
+  'Arbeitsbereichsbenachrichtigungseinstellungen gespeichert';
 
 function renderViewport(children: React.ReactNode) {
   return render(<ToastViewport isTopLayer={false}>{children}</ToastViewport>);
 }
 
+function getToastWrapperByText(text: string): HTMLElement {
+  const visualToast = screen.getByText(text).closest('[data-type]');
+  if (!(visualToast instanceof HTMLElement)) {
+    throw new Error(`Toast visual for ${text} not found`);
+  }
+  const wrapper = visualToast.closest('[data-toast-id]');
+  if (!(wrapper instanceof HTMLElement)) {
+    throw new Error(`Toast wrapper for ${text} not found`);
+  }
+  return wrapper;
+}
+
+function getVisualToastByText(text: string): HTMLElement {
+  const visualToast = screen.getByText(text).closest('[data-type]');
+  if (!(visualToast instanceof HTMLElement)) {
+    throw new Error(`Toast visual for ${text} not found`);
+  }
+  return visualToast;
+}
+
 // Fire the transition-end that ToastViewport listens for to unmount an
 // exiting toast (jsdom does not run CSS transitions).
 function completeExit(toastId: string) {
@@ -105,6 +145,274 @@ function completeExit(toastId: string) {
   }
 }
 
+describe('Toast responsive layout', () => {
+  it('keeps placement on ToastViewport rather than exposing a non-positioning Toast prop', () => {
+    expectTypeOf<ToastProps>().not.toHaveProperty('position');
+    expectTypeOf<React.ComponentProps<typeof ToastViewport>>().toHaveProperty(
+      'position',
+    );
+  });
+
+  it('keeps real trailing controls on the first line while long body text wraps', () => {
+    renderViewport(
+      <ShowToastButton
+        options={{
+          body: LONG_TOAST_BODY,
+          isAutoHide: false,
+          endContent: (
+            <Button
+              label="Änderungen wiederherstellen"
+              variant="secondary"
+              size="lg"
+            />
+          ),
+        }}
+      />,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText('Trigger'));
+    });
+
+    const viewport = screen.getByRole('region', {name: 'Notifications'});
+    const body = within(viewport).getByText(LONG_TOAST_BODY);
+    const toast = body.closest('[data-type]') as HTMLElement;
+    const mediaWrapper = toast.firstElementChild as HTMLElement;
+    const layoutRow = mediaWrapper.firstElementChild as HTMLElement;
+    const endArea = body.nextElementSibling as HTMLElement;
+    const actionControl = endArea.firstElementChild as HTMLElement;
+    const dismissControl = within(endArea).getByRole('button', {
+      name: 'Dismiss notification',
+    });
+
+    expect(getComputedStyle(layoutRow).flexWrap).toBe('nowrap');
+    expect(getComputedStyle(layoutRow).alignItems).toBe('flex-start');
+    expect(getComputedStyle(body).minWidth).toBe('0');
+    expect(getComputedStyle(body).overflowWrap).toBe('anywhere');
+    expect(getComputedStyle(endArea).alignItems).toBe('center');
+    expect(getComputedStyle(endArea).height).toBe(
+      'calc(var(--text-body-size) * var(--text-body-leading))',
+    );
+    expect(getComputedStyle(actionControl).height).toBe(
+      'var(--size-element-lg)',
+    );
+    expect(getComputedStyle(dismissControl).height).toBe(
+      'var(--size-element-sm)',
+    );
+  });
+
+  it('uses the viewport as the inline constraint for edge placements', () => {
+    renderViewport(<ShowToastButton options={INFO_A} />);
+    act(() => {
+      fireEvent.click(screen.getByText('Trigger'));
+    });
+
+    const viewport = screen.getByRole('region', {name: 'Notifications'});
+
+    const style = getComputedStyle(viewport);
+    const viewportSource = readFileSync(
+      'packages/core/src/Toast/ToastViewport.tsx',
+      'utf8',
+    );
+    expect(viewportSource).not.toContain('100lvh - 100dvh');
+    expect(style.boxSizing).toBe('border-box');
+    expect(style.width).not.toBe('100%');
+    expect(style.paddingInlineEnd).not.toBe('0px');
+    expect(style.insetInlineStart).toBe('0');
+    expect(style.insetInlineEnd).toBe('0');
+  });
+
+  it('preserves custom start and end insets in LTR and RTL without forcing full width', () => {
+    const renderWithDirection = (direction: 'ltr' | 'rtl') =>
+      render(
+        <div dir={direction}>
+          <ToastViewport
+            isTopLayer={false}
+            inset={{bottom: 24, start: 24, end: 40}}>
+            <ShowToastButton options={INFO_A} />
+          </ToastViewport>
+        </div>,
+      );
+
+    renderWithDirection('ltr');
+    act(() => {
+      fireEvent.click(screen.getByText('Trigger'));
+    });
+    let viewport = screen.getByRole('region', {name: 'Notifications'});
+    expect(viewport.style.bottom).toBe('24px');
+    expect(viewport.style.insetInlineStart).toBe('24px');
+    expect(viewport.style.insetInlineEnd).toBe('40px');
+    expect(getComputedStyle(viewport).width).not.toBe('100%');
+
+    cleanup();
+    renderWithDirection('rtl');
+    act(() => {
+      fireEvent.click(screen.getByText('Trigger'));
+    });
+    viewport = screen.getByRole('region', {name: 'Notifications'});
+    expect(viewport.style.bottom).toBe('24px');
+    expect(viewport.style.insetInlineStart).toBe('24px');
+    expect(viewport.style.insetInlineEnd).toBe('40px');
+    expect(getComputedStyle(viewport).width).not.toBe('100%');
+  });
+});
+
+describe('ToastViewport placement', () => {
+  function renderPlacement({
+    position,
+    triggerLabel = 'Trigger',
+    body = 'Placed',
+  }: {
+    position?: React.ComponentProps<typeof ToastViewport>['position'];
+    triggerLabel?: string;
+    body?: string;
+  } = {}) {
+    const result = render(
+      <ToastViewport isTopLayer={false} position={position}>
+        <ShowToastButton
+          options={{body, isAutoHide: false}}
+          triggerLabel={triggerLabel}
+        />
+      </ToastViewport>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText(triggerLabel));
+    });
+    return {
+      ...result,
+      viewport: screen.getByRole('region', {name: 'Notifications'}),
+    };
+  }
+
+  it('defaults to bottomEnd with an end-aligned full-inline viewport', () => {
+    const {viewport} = renderPlacement();
+
+    expect(getComputedStyle(viewport).bottom).toBe('0px');
+    expect(getComputedStyle(viewport).alignItems).toBe('flex-end');
+    expect(getComputedStyle(viewport).width).not.toBe('100%');
+  });
+
+  it('maps explicit top and bottom placements to their configured edge', () => {
+    const top = renderPlacement({position: 'topEnd'});
+    expect(getComputedStyle(top.viewport).top).toBe('0px');
+    expect(getComputedStyle(top.viewport).alignItems).toBe('flex-end');
+    expect(getComputedStyle(top.viewport).flexDirection).toBe('column-reverse');
+    top.unmount();
+
+    const bottom = renderPlacement({
+      position: 'bottomStart',
+      triggerLabel: 'Bottom trigger',
+      body: 'Bottom start',
+    });
+    expect(getComputedStyle(bottom.viewport).bottom).toBe('0px');
+    expect(getComputedStyle(bottom.viewport).alignItems).toBe('flex-start');
+    bottom.unmount();
+  });
+});
+
+it('keeps newest toasts nearest the configured edge in wide stacks', () => {
+  render(
+    <>
+      <ToastViewport isTopLayer={false} position="bottomEnd" maxVisible={3}>
+        <ShowToastButton
+          options={{body: 'Bottom first', isAutoHide: false}}
+          triggerLabel="Bottom first"
+        />
+        <ShowToastButton
+          options={{body: 'Bottom second', isAutoHide: false}}
+          triggerLabel="Bottom second"
+        />
+        <ShowToastButton
+          options={{body: 'Bottom third', isAutoHide: false}}
+          triggerLabel="Bottom third"
+        />
+      </ToastViewport>
+      <ToastViewport isTopLayer={false} position="topEnd" maxVisible={3}>
+        <ShowToastButton
+          options={{body: 'Top first', isAutoHide: false}}
+          triggerLabel="Top first"
+        />
+        <ShowToastButton
+          options={{body: 'Top second', isAutoHide: false}}
+          triggerLabel="Top second"
+        />
+        <ShowToastButton
+          options={{body: 'Top third', isAutoHide: false}}
+          triggerLabel="Top third"
+        />
+      </ToastViewport>
+    </>,
+  );
+  for (const label of [
+    'Bottom first',
+    'Bottom second',
+    'Bottom third',
+    'Top first',
+    'Top second',
+    'Top third',
+  ]) {
+    act(() => {
+      fireEvent.click(screen.getByText(label));
+    });
+  }
+
+  const [bottom, top] = screen.getAllByRole('region', {
+    name: 'Notifications',
+  });
+  expect(getComputedStyle(bottom).flexDirection).toBe('column');
+  expect(
+    within(bottom)
+      .getAllByText(/Bottom/)
+      .map(el => el.textContent),
+  ).toEqual(['Bottom first', 'Bottom second', 'Bottom third']);
+  expect(getComputedStyle(top).flexDirection).toBe('column-reverse');
+  expect(
+    within(top)
+      .getAllByText(/Top/)
+      .map(el => el.textContent),
+  ).toEqual(['Top first', 'Top second', 'Top third']);
+});
+
+describe('ToastViewport visible limit', () => {
+  function renderMany(maxVisible?: number) {
+    render(
+      <ToastViewport isTopLayer={false} maxVisible={maxVisible}>
+        <ShowToastButton
+          options={{body: 'One', isAutoHide: false}}
+          triggerLabel="One"
+        />
+        <ShowToastButton
+          options={{body: 'Two', isAutoHide: false}}
+          triggerLabel="Two"
+        />
+        <ShowToastButton
+          options={{body: 'Three', isAutoHide: false}}
+          triggerLabel="Three"
+        />
+      </ToastViewport>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText('One'));
+      fireEvent.click(screen.getByText('Two'));
+      fireEvent.click(screen.getByText('Three'));
+    });
+    return screen.getByRole('region', {name: 'Notifications'});
+  }
+
+  it('keeps the five-toast default and supports an explicit one-visible cap', () => {
+    let viewport = renderMany();
+    expect(
+      within(viewport).getAllByRole('button', {name: 'Dismiss notification'}),
+    ).toHaveLength(3);
+
+    cleanup();
+    viewport = renderMany(1);
+    expect(
+      within(viewport).getAllByRole('button', {name: 'Dismiss notification'}),
+    ).toHaveLength(1);
+    expect(within(viewport).getByText('Three')).toBeInTheDocument();
+  });
+});
+
 describe('ToastViewport keyboard reach + focus', () => {
   it('F6 moves focus into the newest toast', () => {
     renderViewport(
@@ -252,14 +560,928 @@ describe('Toast blur timer pause', () => {
   });
 });
 
+describe('Toast native motion contract', () => {
+  function renderMotionToast(
+    position: React.ComponentProps<typeof ToastViewport>['position'],
+    body = `Motion ${position}`,
+    wrapper: (children: React.ReactNode) => React.ReactElement = children => (
+      <>{children}</>
+    ),
+  ) {
+    const result = render(
+      wrapper(
+        <ToastViewport isTopLayer={false} position={position} maxVisible={3}>
+          <ShowToastButton
+            options={{body, isAutoHide: false}}
+            triggerLabel={`Show ${position}`}
+          />
+        </ToastViewport>,
+      ),
+    );
+    act(() => {
+      fireEvent.click(screen.getByText(`Show ${position}`));
+    });
+    return {
+      ...result,
+      visualToast: getVisualToastByText(body),
+      wrapper: getToastWrapperByText(body),
+    };
+  }
+
+  const normalizeCssList = (value: string): string =>
+    value
+      .split(',')
+      .map(part => part.trim())
+      .join(', ');
+
+  const normalizeCssFunction = (value: string): string =>
+    value.replace(/,\s*/g, ', ');
+
+  it('uses tokenized transform and wrapper timing, with reduced motion kept eventful', () => {
+    const {visualToast, wrapper} = renderMotionToast('bottomEnd');
+    const toastStyle = getComputedStyle(visualToast);
+    const wrapperStyle = getComputedStyle(wrapper);
+
+    expect(normalizeCssFunction(toastStyle.transform)).toBe(
+      'translateY(var(--_toast-swipe-y, 0px)) scale(var(--_toast-swipe-scale, 1))',
+    );
+    expect(normalizeCssList(toastStyle.transitionProperty)).toBe(
+      'opacity, transform',
+    );
+    expect(toastStyle.transitionDuration).toBe('var(--duration-fast)');
+    expect(toastStyle.transitionTimingFunction).toBe('var(--ease-standard)');
+    expect(normalizeCssList(wrapperStyle.transitionProperty)).toBe(
+      'grid-template-rows, padding',
+    );
+    expect(wrapperStyle.transitionDuration).toBe('var(--duration-fast)');
+    expect(wrapperStyle.transitionTimingFunction).toBe('var(--ease-standard)');
+    expect(wrapperStyle.width).toBe('100%');
+    expect(wrapperStyle.maxWidth).toBe('400px');
+    expect(wrapperStyle.minWidth).toBe('0');
+    expect(
+      getComputedStyle(wrapper.firstElementChild as HTMLElement).minHeight,
+    ).toBe('0');
+    expect(
+      getComputedStyle(wrapper.firstElementChild as HTMLElement).overflow,
+    ).toBe('hidden');
+  });
+
+  it('keeps reduced motion transitions eventful for exit cleanup', () => {
+    const toastSource = readFileSync(
+      'packages/core/src/Toast/Toast.tsx',
+      'utf8',
+    );
+    const viewportSource = readFileSync(
+      'packages/core/src/Toast/ToastViewport.tsx',
+      'utf8',
+    );
+
+    expect(toastSource).toContain(
+      "'@media (prefers-reduced-motion: reduce)': '0.01ms'",
+    );
+    expect(viewportSource).toContain(
+      "'@media (prefers-reduced-motion: reduce)': '0.01ms'",
+    );
+  });
+
+  it('slides from the top or bottom edge without adding corner or scale motion', () => {
+    const bottom = renderMotionToast('bottomEnd');
+    expect(
+      getComputedStyle(bottom.wrapper).getPropertyValue('--_toast-slide-y'),
+    ).toBe('var(--spacing-2)');
+    bottom.unmount();
+
+    const top = renderMotionToast('topStart');
+    expect(
+      getComputedStyle(top.wrapper).getPropertyValue('--_toast-slide-y'),
+    ).toBe('calc(-1 * var(--spacing-2))');
+    top.unmount();
+
+    const toastSource = readFileSync(
+      'packages/core/src/Toast/Toast.tsx',
+      'utf8',
+    );
+    expect(toastSource).not.toContain('scale(0.98)');
+    expect(toastSource).not.toContain('transformOrigin');
+  });
+
+  it('uses an 8px inter-Toast gap without adding space at the viewport edge', () => {
+    renderViewport(
+      <>
+        <ShowToastButton options={INFO_A} triggerLabel="Show A" />
+        <ShowToastButton options={INFO_B} triggerLabel="Show B" />
+      </>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText('Show A'));
+      fireEvent.click(screen.getByText('Show B'));
+    });
+    const viewport = screen.getByRole('region', {name: 'Notifications'});
+    const wrappers = viewport.querySelectorAll<HTMLElement>('[data-toast-id]');
+
+    expect(getComputedStyle(wrappers[0]).paddingBottom).toBe(
+      'var(--spacing-2)',
+    );
+    expect(getComputedStyle(wrappers[1]).paddingBottom).toBe('0px');
+    expect(
+      normalizeCssFunction(getComputedStyle(viewport).paddingInlineEnd),
+    ).toBe('max(var(--spacing-4), env(safe-area-inset-right, 0px))');
+
+    cleanup();
+    render(
+      <ToastViewport isTopLayer={false} position="topEnd">
+        <ShowToastButton options={INFO_A} triggerLabel="Top A" />
+        <ShowToastButton options={INFO_B} triggerLabel="Top B" />
+      </ToastViewport>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText('Top A'));
+      fireEvent.click(screen.getByText('Top B'));
+    });
+    const topWrappers = screen
+      .getByRole('region', {name: 'Notifications'})
+      .querySelectorAll<HTMLElement>('[data-toast-id]');
+    expect(getComputedStyle(topWrappers[0]).paddingBottom).toBe('0px');
+    expect(getComputedStyle(topWrappers[1]).paddingBottom).toBe(
+      'var(--spacing-2)',
+    );
+  });
+
+  it('collapses a dismissed Toast before unmounting it', () => {
+    const {wrapper} = renderMotionToast('bottomEnd');
+    const id = wrapper.getAttribute('data-toast-id')!;
+    act(() => {
+      fireEvent.click(
+        within(wrapper).getByRole('button', {name: 'Dismiss notification'}),
+      );
+    });
+
+    expect(wrapper).toBeInTheDocument();
+    expect(getComputedStyle(wrapper).gridTemplateRows).toBe('0fr');
+    expect(getComputedStyle(wrapper).paddingBottom).toBe('0px');
+    act(() => {
+      completeExit(id);
+    });
+    expect(document.querySelector(`[data-toast-id="${id}"]`)).toBeNull();
+  });
+});
+
+describe('Toast swipe dismissal', () => {
+  function renderSwipeToast(
+    options: ToastOptions = SWIPE_TOAST,
+    position: React.ComponentProps<
+      typeof ToastViewport
+    >['position'] = 'bottomEnd',
+    bodyText = 'Swipe toast',
+    surfaceHeight = 80,
+  ) {
+    const onHide = vi.fn();
+    const result = render(
+      <ToastViewport isTopLayer={false} position={position}>
+        <ShowToastButton options={{...options, onHide}} />
+      </ToastViewport>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText('Trigger'));
+    });
+    const visualToast = screen
+      .getByText(bodyText)
+      .closest('[data-type]') as HTMLElement;
+    vi.spyOn(visualToast, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 0,
+      width: 400,
+      height: surfaceHeight,
+      top: 0,
+      right: 400,
+      bottom: surfaceHeight,
+      left: 0,
+      toJSON: () => ({}),
+    });
+    return {...result, visualToast, onHide};
+  }
+
+  it('dismisses on a pen swipe toward the configured block edge past the threshold', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 60,
+      });
+      fireEvent.pointerUp(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 60,
+      });
+    });
+
+    expect(visualToast.setPointerCapture).toHaveBeenCalledWith(7);
+    expect(visualToast.releasePointerCapture).toHaveBeenCalledWith(7);
+    expect(onHide).toHaveBeenCalledWith('manual');
+    expect(onHide).toHaveBeenCalledTimes(1);
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-exit-y')).toBe(
+      '120%',
+    );
+    expect(getComputedStyle(visualToast).transform).not.toContain('translateX');
+  });
+
+  it('dismisses a fast flick below the distance threshold', () => {
+    const now = vi
+      .spyOn(Date, 'now')
+      .mockReturnValueOnce(1_000)
+      .mockReturnValueOnce(1_020);
+    try {
+      const {visualToast, onHide} = renderSwipeToast(
+        SWIPE_TOAST,
+        'bottomEnd',
+        'Swipe toast',
+        400,
+      );
+
+      act(() => {
+        fireEvent.pointerDown(visualToast, {
+          pointerId: 8,
+          pointerType: 'pen',
+          button: 0,
+          clientX: 0,
+          clientY: 0,
+        });
+        fireEvent.pointerMove(visualToast, {
+          pointerId: 8,
+          pointerType: 'pen',
+          clientX: 0,
+          clientY: 60,
+        });
+        fireEvent.pointerUp(visualToast, {
+          pointerId: 8,
+          pointerType: 'pen',
+          clientX: 0,
+          clientY: 60,
+        });
+      });
+
+      expect(onHide).toHaveBeenCalledWith('manual');
+      expect(visualToast.style.getPropertyValue('--_toast-swipe-exit-y')).toBe(
+        '120%',
+      );
+    } finally {
+      now.mockRestore();
+    }
+  });
+
+  it('snaps back without dismissing after a short drag', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 24,
+      });
+      fireEvent.pointerUp(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 24,
+      });
+    });
+
+    expect(onHide).not.toHaveBeenCalled();
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe('');
+  });
+
+  it('fades and subtly scales only after accepted vertical edge swipe intent', () => {
+    const {visualToast} = renderSwipeToast();
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: -40,
+      });
+    });
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe('');
+    act(() => {
+      fireEvent.pointerCancel(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: -40,
+      });
+    });
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 8,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 8,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 40,
+      });
+    });
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('40px');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '0.800',
+    );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe(
+      '0.990',
+    );
+  });
+
+  it('does not fade for horizontal intent and resets swipe vars on pointercancel', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 80,
+        clientY: 20,
+      });
+    });
+    expect(onHide).not.toHaveBeenCalled();
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe('');
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 8,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 8,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 40,
+      });
+    });
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '0.800',
+    );
+    act(() => {
+      fireEvent.pointerCancel(visualToast, {
+        pointerId: 8,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 40,
+      });
+    });
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe('');
+  });
+
+  it('hands the opposite vertical direction back without moving the toast', () => {
+    const {visualToast, onHide} = renderSwipeToast(SWIPE_TOAST, 'bottomEnd');
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 100,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 40,
+      });
+      fireEvent.pointerUp(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 40,
+      });
+    });
+
+    expect(onHide).not.toHaveBeenCalled();
+  });
+
+  it('keeps bottom placement dismissing downward under RTL', () => {
+    const onHide = vi.fn();
+    render(
+      <div dir="rtl">
+        <ToastViewport isTopLayer={false} position="bottomStart">
+          <ShowToastButton options={{...SWIPE_TOAST, onHide}} />
+        </ToastViewport>
+      </div>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText('Trigger'));
+    });
+    const visualToast = screen
+      .getByText('Swipe toast')
+      .closest('[data-type]') as HTMLElement;
+    vi.spyOn(visualToast, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 0,
+      width: 400,
+      height: 80,
+      top: 0,
+      right: 400,
+      bottom: 80,
+      left: 0,
+      toJSON: () => ({}),
+    });
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 60,
+      });
+      fireEvent.pointerUp(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 60,
+      });
+    });
+
+    expect(onHide).toHaveBeenCalledWith('manual');
+  });
+
+  it('keeps top placement dismissing upward under RTL', () => {
+    const onHide = vi.fn();
+    render(
+      <div dir="rtl">
+        <ToastViewport isTopLayer={false} position="topEnd">
+          <ShowToastButton options={{...SWIPE_TOAST, onHide}} />
+        </ToastViewport>
+      </div>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText('Trigger'));
+    });
+    const visualToast = getVisualToastByText('Swipe toast');
+    vi.spyOn(visualToast, 'getBoundingClientRect').mockReturnValue({
+      x: 0,
+      y: 0,
+      width: 400,
+      height: 80,
+      top: 0,
+      right: 400,
+      bottom: 80,
+      left: 0,
+      toJSON: () => ({}),
+    });
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 100,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 40,
+      });
+      fireEvent.pointerUp(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 40,
+      });
+    });
+
+    expect(onHide).toHaveBeenCalledWith('manual');
+  });
+
+  it('sets swipe exit to a vertical throw with no horizontal drift', () => {
+    const {visualToast, onHide} = renderSwipeToast(
+      SWIPE_TOAST,
+      'topEnd',
+      'Swipe toast',
+    );
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 100,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 40,
+      });
+      fireEvent.pointerUp(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 0,
+        clientY: 40,
+      });
+    });
+
+    expect(onHide).toHaveBeenCalledWith('manual');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '0.700',
+    );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-scale')).toBe(
+      '0.985',
+    );
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-exit-y')).toBe(
+      'calc(-1 * 120%)',
+    );
+    expect(getComputedStyle(visualToast).transform).not.toContain('translateX');
+  });
+
+  it('allows native page scrolling until touch intent matches the dismiss edge', () => {
+    const {visualToast, onHide} = renderSwipeToast(
+      SWIPE_TOAST,
+      'topEnd',
+      'Swipe toast',
+    );
+    const touchEvent = (
+      type: 'touchstart' | 'touchmove' | 'touchend',
+      clientY: number,
+    ) => {
+      const event = new Event(type, {bubbles: true, cancelable: true});
+      const touch = {identifier: 31, clientX: 10, clientY};
+      Object.defineProperty(event, 'touches', {
+        value: type === 'touchend' ? [] : [touch],
+      });
+      Object.defineProperty(event, 'changedTouches', {value: [touch]});
+      visualToast.dispatchEvent(event);
+      return event;
+    };
+
+    act(() => {
+      touchEvent('touchstart', 100);
+    });
+    let move: Event;
+    act(() => {
+      move = touchEvent('touchmove', 140);
+    });
+    expect(move!.defaultPrevented).toBe(false);
+    expect(onHide).not.toHaveBeenCalled();
+
+    act(() => {
+      touchEvent('touchstart', 100);
+    });
+    Object.defineProperty(
+      (move = new Event('touchmove', {bubbles: true, cancelable: true})),
+      'changedTouches',
+      {value: [{identifier: 31, clientX: 80, clientY: 104}]},
+    );
+    act(() => {
+      visualToast.dispatchEvent(move);
+    });
+    expect(move.defaultPrevented).toBe(false);
+
+    act(() => {
+      touchEvent('touchstart', 100);
+    });
+    act(() => {
+      move = touchEvent('touchmove', 40);
+    });
+    expect(move!.defaultPrevented).toBe(true);
+    act(() => {
+      touchEvent('touchend', 40);
+    });
+    expect(onHide).toHaveBeenCalledWith('manual');
+  });
+
+  it('resets an accepted touch gesture on native touchcancel', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+    const touch = (type: 'touchstart' | 'touchmove', clientY: number) => {
+      const event = new Event(type, {bubbles: true, cancelable: true});
+      const point = {identifier: 44, clientX: 10, clientY};
+      Object.defineProperty(event, 'touches', {value: [point]});
+      Object.defineProperty(event, 'changedTouches', {value: [point]});
+      visualToast.dispatchEvent(event);
+      return event;
+    };
+
+    act(() => {
+      touch('touchstart', 0);
+    });
+    let move: Event;
+    act(() => {
+      move = touch('touchmove', 40);
+    });
+    expect(move!.defaultPrevented).toBe(true);
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('40px');
+
+    act(() => {
+      visualToast.dispatchEvent(
+        new Event('touchcancel', {bubbles: true, cancelable: true}),
+      );
+    });
+
+    expect(onHide).not.toHaveBeenCalled();
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-opacity')).toBe(
+      '',
+    );
+  });
+
+  it('removes native touch listeners when a Toast unmounts', () => {
+    const {visualToast, unmount} = renderSwipeToast();
+    const removeListener = vi.spyOn(visualToast, 'removeEventListener');
+
+    unmount();
+
+    for (const type of ['touchstart', 'touchmove', 'touchend', 'touchcancel']) {
+      expect(removeListener).toHaveBeenCalledWith(type, expect.any(Function));
+    }
+  });
+
+  it('resets safely on pointercancel and resumes the auto-hide timer', () => {
+    vi.useFakeTimers();
+    try {
+      const {visualToast, onHide} = renderSwipeToast({
+        body: 'Swipe toast',
+        autoHideDuration: 3000,
+      });
+
+      act(() => {
+        fireEvent.pointerDown(visualToast, {
+          pointerId: 7,
+          pointerType: 'pen',
+          button: 0,
+          clientX: 0,
+          clientY: 0,
+        });
+        fireEvent.pointerMove(visualToast, {
+          pointerId: 7,
+          pointerType: 'pen',
+          clientX: 0,
+          clientY: 40,
+        });
+        vi.advanceTimersByTime(10_000);
+      });
+      expect(onHide).not.toHaveBeenCalled();
+
+      act(() => {
+        fireEvent.pointerCancel(visualToast, {
+          pointerId: 7,
+          pointerType: 'pen',
+          clientX: 0,
+          clientY: 40,
+        });
+        vi.advanceTimersByTime(3_000);
+      });
+
+      expect(onHide).toHaveBeenCalledWith('auto');
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('keeps horizontal pan intent and mouse drag from dismissing', () => {
+    const {visualToast, onHide} = renderSwipeToast();
+
+    act(() => {
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        button: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 80,
+        clientY: 20,
+      });
+      fireEvent.pointerUp(visualToast, {
+        pointerId: 7,
+        pointerType: 'pen',
+        clientX: 220,
+        clientY: 80,
+      });
+      fireEvent.pointerDown(visualToast, {
+        pointerId: 8,
+        pointerType: 'mouse',
+        button: 0,
+        clientX: 0,
+        clientY: 0,
+      });
+      fireEvent.pointerMove(visualToast, {
+        pointerId: 8,
+        pointerType: 'mouse',
+        clientX: 220,
+        clientY: 0,
+      });
+      fireEvent.pointerUp(visualToast, {
+        pointerId: 8,
+        pointerType: 'mouse',
+        clientX: 220,
+        clientY: 0,
+      });
+    });
+
+    expect(onHide).not.toHaveBeenCalled();
+  });
+
+  it('does not start a swipe from interactive descendants', () => {
+    const onAction = vi.fn();
+    const {visualToast, onHide} = renderSwipeToast({
+      ...SWIPE_TOAST,
+      endContent: (
+        <>
+          <Button label="Undo" size="sm" onClick={onAction} />
+          <span role="switch" tabIndex={-1}>
+            Mode
+          </span>
+        </>
+      ),
+    });
+
+    const targets = [
+      screen.getByRole('button', {name: 'Undo'}),
+      screen.getByRole('switch', {name: 'Mode'}),
+    ];
+    targets.forEach((target, index) => {
+      const pointerId = 20 + index;
+      act(() => {
+        fireEvent.pointerDown(target, {
+          pointerId,
+          pointerType: 'pen',
+          button: 0,
+          clientX: 0,
+          clientY: 0,
+        });
+        fireEvent.pointerMove(target, {
+          pointerId,
+          pointerType: 'pen',
+          clientX: 0,
+          clientY: 80,
+        });
+        fireEvent.pointerUp(target, {
+          pointerId,
+          pointerType: 'pen',
+          clientX: 0,
+          clientY: 80,
+        });
+      });
+    });
+
+    expect(onHide).not.toHaveBeenCalled();
+    expect(visualToast.style.getPropertyValue('--_toast-swipe-y')).toBe('');
+    act(() => {
+      fireEvent.click(targets[0]);
+    });
+    expect(onAction).toHaveBeenCalledTimes(1);
+  });
+
+  it('keeps the visible dismiss button as a non-gesture alternative', () => {
+    const {onHide} = renderSwipeToast();
+
+    act(() => {
+      fireEvent.click(
+        screen.getByRole('button', {name: 'Dismiss notification'}),
+      );
+    });
+
+    expect(onHide).toHaveBeenCalledWith('manual');
+  });
+});
+
+describe('Toast live-region fallback semantics', () => {
+  it('keeps standalone info Toast content in a polite status region', () => {
+    render(
+      <Toast
+        type="info"
+        body="Saved"
+        isAutoHide={false}
+        autoHideDuration={5000}
+        onDismiss={() => {}}
+      />,
+    );
+
+    const visualToast = screen.getByText('Saved').closest('[data-type]');
+    expect(visualToast).toHaveAttribute('role', 'status');
+    expect(visualToast).toHaveAttribute('aria-live', 'polite');
+    expect(visualToast).toHaveAttribute('aria-atomic', 'true');
+  });
+
+  it('keeps standalone error Toast content in an assertive alert region', () => {
+    render(
+      <Toast
+        type="error"
+        body="Upload failed"
+        isAutoHide={false}
+        autoHideDuration={5000}
+        onDismiss={() => {}}
+      />,
+    );
+
+    const visualToast = screen
+      .getByText('Upload failed')
+      .closest('[data-type]');
+    expect(visualToast).toHaveAttribute('role', 'alert');
+    expect(visualToast).toHaveAttribute('aria-live', 'assertive');
+    expect(visualToast).toHaveAttribute('aria-atomic', 'true');
+  });
+});
+
 describe('ToastViewport region ARIA', () => {
-  it('exposes the notifications region without a prohibited aria-modal', () => {
+  it('does not expose an empty notifications landmark', () => {
+    renderViewport(<ShowToastButton />);
+    expect(
+      screen.queryByRole('region', {name: 'Notifications'}),
+    ).not.toBeInTheDocument();
+  });
+
+  it('exposes the notifications region without a prohibited aria-modal when a toast is visible', () => {
     renderViewport(<ShowToastButton />);
+    act(() => {
+      fireEvent.click(screen.getByText('Trigger'));
+    });
     const region = screen.getByRole('region', {name: 'Notifications'});
-    // aria-modal is only valid on role="dialog"/"alertdialog"; a region must
-    // not declare it (axe: aria-allowed-attr).
     expect(region).not.toHaveAttribute('aria-modal');
   });
+
+  it('does not duplicate the landmark for nested viewports', () => {
+    render(
+      <ToastViewport isTopLayer={false}>
+        <ToastViewport isTopLayer={false}>
+          <ShowToastButton options={INFO_A} />
+        </ToastViewport>
+      </ToastViewport>,
+    );
+    act(() => {
+      fireEvent.click(screen.getByText('Trigger'));
+    });
+    expect(screen.getAllByRole('region', {name: 'Notifications'})).toHaveLength(
+      1,
+    );
+  });
 });
 
 describe('toast announcements via singleton live regions', () => {
@@ -297,7 +1519,7 @@ describe('toast announcements via singleton live regions', () => {
     act(() => {
       fireEvent.click(screen.getByText('Show'));
     });
-    // Announced synchronously at dispatch, exactly once.
+    // Announced once when the toast is dispatched.
     expect(announceSpy).toHaveBeenCalledTimes(1);
     expect(announceSpy).toHaveBeenCalledWith(
       'Update ready Restart to apply',
@@ -337,9 +1559,8 @@ describe('toast announcements via singleton live regions', () => {
     act(() => {
       fireEvent.click(screen.getByText('Show'));
     });
-    // The announcement lives in the imperative dispatch path (addToast), not a
-    // render effect, so StrictMode's double render and double-invoked state
-    // updater cannot announce the same toast twice.
+    // Announcement happens in the event-driven dispatch path, so StrictMode's
+    // double render cannot announce the same toast twice.
     expect(announceSpy).toHaveBeenCalledTimes(1);
     expect(announceSpy).toHaveBeenCalledWith('Toast A', 'polite');
   });
@@ -485,4 +1706,209 @@ describe('toast timer lifecycle (#3589)', () => {
       vi.useRealTimers();
     }
   });
+
+  describe('renderContent', () => {
+    const CUSTOM: ToastOptions = {
+      body: 'Toast A',
+      renderContent: toast => (
+        <div data-testid="custom-content">
+          {toast.body}
+          {toast.endContent}
+          <Button label="Dismiss custom toast" onClick={toast.dismiss} />
+        </div>
+      ),
+    };
+
+    it('replaces the default layout for that toast', () => {
+      renderViewport(<ShowToastButton options={CUSTOM} triggerLabel="Show" />);
+      act(() => {
+        fireEvent.click(screen.getByText('Show'));
+      });
+      expect(screen.getByTestId('custom-content')).toHaveTextContent('Toast A');
+    });
+
+    it('keeps the default translated and themeable dismiss Button unchanged', () => {
+      const onHide = vi.fn();
+      renderViewport(
+        <ShowToastButton
+          options={{body: 'Plain', isAutoHide: false, onHide}}
+          triggerLabel="Show"
+        />,
+      );
+      act(() => {
+        fireEvent.click(screen.getByText('Show'));
+      });
+      const toast = screen.getByText('Plain').closest('.astryx-toast');
+      expect(toast).not.toBeNull();
+      const dismissButton = within(toast as HTMLElement).getByRole('button', {
+        name: 'Dismiss notification',
+      });
+      expect(dismissButton).toHaveClass('astryx-button');
+      act(() => {
+        fireEvent.click(dismissButton);
+      });
+      expect(onHide).toHaveBeenCalledTimes(1);
+      expect(onHide).toHaveBeenCalledWith('manual');
+    });
+
+    it('dismisses exactly once from a composed custom Button and reports manual', () => {
+      const onHide = vi.fn();
+      renderViewport(
+        <ShowToastButton options={{...CUSTOM, onHide}} triggerLabel="Show" />,
+      );
+      act(() => {
+        fireEvent.click(screen.getByText('Show'));
+      });
+      const dismissButton = within(
+        screen.getByTestId('custom-content'),
+      ).getByRole('button', {name: 'Dismiss custom toast'});
+      expect(dismissButton).toHaveClass('astryx-button');
+      act(() => {
+        fireEvent.click(dismissButton);
+      });
+      expect(onHide).toHaveBeenCalledTimes(1);
+      expect(onHide).toHaveBeenCalledWith('manual');
+    });
+
+    it('lets the dismiss callback travel through nested components', () => {
+      function NestedDismiss({dismiss}: {dismiss: () => void}) {
+        return <Button label="Nested dismiss" onClick={dismiss} />;
+      }
+
+      const onHide = vi.fn();
+      renderViewport(
+        <ShowToastButton
+          options={{
+            body: 'Nested',
+            isAutoHide: false,
+            onHide,
+            renderContent: ({body, dismiss}) => (
+              <div>
+                {body}
+                <NestedDismiss dismiss={dismiss} />
+              </div>
+            ),
+          }}
+          triggerLabel="Show"
+        />,
+      );
+      act(() => {
+        fireEvent.click(screen.getByText('Show'));
+      });
+      act(() => {
+        fireEvent.click(screen.getByRole('button', {name: 'Nested dismiss'}));
+      });
+      expect(onHide).toHaveBeenCalledTimes(1);
+      expect(onHide).toHaveBeenCalledWith('manual');
+    });
+
+    it('does not inject a dismiss control into custom content', () => {
+      renderViewport(
+        <ShowToastButton
+          options={{
+            body: 'Control-free',
+            type: 'error',
+            renderContent: ({body}) => (
+              <div data-testid="control-free-content">{body}</div>
+            ),
+          }}
+          triggerLabel="Show"
+        />,
+      );
+      act(() => {
+        fireEvent.click(screen.getByText('Show'));
+      });
+      const content = screen.getByTestId('control-free-content');
+      expect(content).toHaveTextContent('Control-free');
+      const toast = content.closest('.astryx-toast');
+      expect(toast).not.toBeNull();
+      expect(within(toast as HTMLElement).queryByRole('button')).toBeNull();
+    });
+
+    it('leaves a toast that did not ask for custom content alone', () => {
+      renderViewport(
+        <>
+          <ShowToastButton options={CUSTOM} triggerLabel="Custom" />
+          <ShowToastButton options={INFO_B} triggerLabel="Plain" />
+        </>,
+      );
+      act(() => {
+        fireEvent.click(screen.getByText('Custom'));
+        fireEvent.click(screen.getByText('Plain'));
+      });
+      const plain = screen.getByText('Toast B').closest('.astryx-toast');
+      expect(plain).not.toBeNull();
+      expect(
+        within(plain as HTMLElement).getByRole('button', {
+          name: 'Dismiss notification',
+        }),
+      ).toBeInTheDocument();
+      expect(
+        within(plain as HTMLElement).queryByTestId('custom-content'),
+      ).not.toBeInTheDocument();
+    });
+
+    it('hands endContent to the layout rather than dropping it', () => {
+      renderViewport(
+        <ShowToastButton
+          options={{
+            ...CUSTOM,
+            endContent: <button type="button">Undo</button>,
+          }}
+          triggerLabel="Show"
+        />,
+      );
+      act(() => {
+        fireEvent.click(screen.getByText('Show'));
+      });
+      expect(
+        within(screen.getByTestId('custom-content')).getByRole('button', {
+          name: 'Undo',
+        }),
+      ).toBeInTheDocument();
+    });
+
+    it('still auto-dismisses and exposes its resolved timing', () => {
+      vi.useFakeTimers();
+      try {
+        const seen: {isAutoHide: boolean; autoHideDuration: number}[] = [];
+        const onHide = vi.fn();
+        renderViewport(
+          <ShowToastButton
+            options={{
+              body: 'Fleeting',
+              autoHideDuration: 3000,
+              onHide,
+              renderContent: toast => {
+                seen.push({
+                  isAutoHide: toast.isAutoHide,
+                  autoHideDuration: toast.autoHideDuration,
+                });
+                return <div>{toast.body}</div>;
+              },
+            }}
+            triggerLabel="Show"
+          />,
+        );
+        act(() => {
+          fireEvent.click(screen.getByText('Show'));
+        });
+        expect(seen[0]).toEqual({isAutoHide: true, autoHideDuration: 3000});
+        act(() => {
+          vi.advanceTimersByTime(3000);
+        });
+        expect(onHide).toHaveBeenCalledWith('auto');
+      } finally {
+        vi.useRealTimers();
+      }
+    });
+
+    it('keeps announcing through the live region', () => {
+      renderViewport(<ShowToastButton options={CUSTOM} triggerLabel="Show" />);
+      act(() => {
+        fireEvent.click(screen.getByText('Show'));
+      });
+      expect(announceSpy).toHaveBeenCalledWith('Toast A', 'polite');
+    });
+  });
 });