@hanzogui/kitchen-sink 3.0.5

package/tests/ExitCompletion.animated.test.tsx

@@ -0,0 +1,425 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * EXIT COMPLETION INVARIANT TESTS
+ *
+ * Tests that sendExitComplete is called exactly once per exit cycle,
+ * at the correct time (after animations complete), and handles edge cases
+ * like rapid toggling, interruptions, and zero-duration animations.
+ *
+ * These tests catch bugs in exit completion tracking across all animation drivers.
+ */
+
+interface ExitTrackingData {
+  counts: Record<string, number>
+  times: Record<string, number[]>
+}
+
+async function getExitTrackingData(page: Page): Promise<ExitTrackingData> {
+  return page.evaluate(() => ({
+    counts: (window as any).__exitCompletionCounts || {},
+    times: (window as any).__exitCompletionTimes || {},
+  }))
+}
+
+async function resetExitTracking(page: Page): Promise<void> {
+  await page.evaluate(() => {
+    ;(window as any).__resetExitTracking?.()
+  })
+}
+
+async function waitForExitComplete(
+  page: Page,
+  scenarioId: string,
+  timeout = 2000
+): Promise<number> {
+  const startTime = Date.now()
+  while (Date.now() - startTime < timeout) {
+    const data = await getExitTrackingData(page)
+    if (data.counts[scenarioId] && data.counts[scenarioId] > 0) {
+      return data.counts[scenarioId]
+    }
+    await page.waitForTimeout(50)
+  }
+  // return count even if zero (timed out)
+  const data = await getExitTrackingData(page)
+  return data.counts[scenarioId] || 0
+}
+
+async function expectStableCompletionCount(
+  page: Page,
+  scenarioId: string,
+  expectedCount: number,
+  settleMs = 300
+): Promise<void> {
+  await page.waitForTimeout(settleMs)
+  const data = await getExitTrackingData(page)
+  expect(
+    data.counts[scenarioId] || 0,
+    `${scenarioId} should remain at ${expectedCount} completion(s)`
+  ).toBe(expectedCount)
+}
+
+async function elementExists(page: Page, testId: string): Promise<boolean> {
+  return page.evaluate((id) => !!document.querySelector(`[data-testid="${id}"]`), testId)
+}
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ExitCompletionCase', type: 'useCase' })
+  await page.waitForTimeout(500) // let initial render settle
+  await resetExitTracking(page)
+})
+
+test.describe('Basic Exit Completion', () => {
+  test('scenario 01: basic exit completes exactly once', async ({ page }) => {
+    await page.getByTestId('exit-01-trigger').click()
+
+    // wait for exit to complete
+    const count = await waitForExitComplete(page, '01-basic-exit')
+
+    expect(count, 'Exit should complete exactly once').toBe(1)
+    await expectStableCompletionCount(page, '01-basic-exit', 1, 400)
+    expect(await elementExists(page, 'exit-01-target'), 'Element should be gone').toBe(
+      false
+    )
+  })
+
+  test('scenario 02: zero duration exit completes exactly once', async ({ page }) => {
+    await page.getByTestId('exit-02-trigger').click()
+
+    // zero duration should still complete once
+    const count = await waitForExitComplete(page, '02-zero-duration', 500)
+
+    expect(count, 'Zero duration exit should complete exactly once').toBe(1)
+    await expectStableCompletionCount(page, '02-zero-duration', 1, 200)
+    expect(await elementExists(page, 'exit-02-target'), 'Element should be gone').toBe(
+      false
+    )
+  })
+
+  test('scenario 03: very short duration (30ms) completes exactly once', async ({
+    page,
+  }) => {
+    await page.getByTestId('exit-03-trigger').click()
+
+    const count = await waitForExitComplete(page, '03-short-duration', 2000)
+
+    expect(count, 'Short duration exit should complete exactly once').toBe(1)
+    await expectStableCompletionCount(page, '03-short-duration', 1, 400)
+    expect(await elementExists(page, 'exit-03-target'), 'Element should be gone').toBe(
+      false
+    )
+  })
+})
+
+test.describe('Duplicate Completion Guards', () => {
+  test('scenario 04: rapid toggle does not cause duplicate completions', async ({
+    page,
+  }) => {
+    // this test catches finding #4/#5: duplicate completions on re-renders
+    await page.getByTestId('exit-04-trigger').click()
+
+    // wait for the sequence to complete (off -> on -> off)
+    // CI can be slow, give plenty of time for animations
+    await page.waitForTimeout(1500)
+
+    const data = await getExitTrackingData(page)
+    const count = data.counts['04-rapid-toggle'] || 0
+
+    // first exit is interrupted; only final exit should complete
+    expect(count, 'Rapid toggle should complete exactly once for the final exit').toBe(1)
+    expect(await elementExists(page, 'exit-04-target'), 'Element should be gone').toBe(
+      false
+    )
+  })
+
+  test('scenario 05: re-renders during exit do not cause duplicate completions', async ({
+    page,
+  }) => {
+    // this test catches finding #4: flush restart causing duplicate completions
+    await page.getByTestId('exit-05-trigger').click()
+
+    // wait for exit + re-renders to complete
+    // CI can be slow, give plenty of time
+    await page.waitForTimeout(1500)
+
+    const data = await getExitTrackingData(page)
+    const count = data.counts['05-rerender-during-exit'] || 0
+
+    expect(count, 'Re-renders during exit should not cause duplicate completions').toBe(1)
+    expect(await elementExists(page, 'exit-05-target'), 'Element should be gone').toBe(
+      false
+    )
+  })
+
+  test('scenario 06: multiple children exiting fires completion once', async ({
+    page,
+  }) => {
+    await page.getByTestId('exit-06-trigger').click()
+
+    // wait for all 3 children to exit
+    await page.waitForTimeout(800)
+
+    const data = await getExitTrackingData(page)
+    const count = data.counts['06-multiple-children'] || 0
+
+    // AnimatePresence should fire onExitComplete once after ALL children exit
+    expect(count, 'Multiple children should trigger one completion').toBe(1)
+    expect(await elementExists(page, 'exit-06-target-1'), 'Child 1 should be gone').toBe(
+      false
+    )
+    expect(await elementExists(page, 'exit-06-target-2'), 'Child 2 should be gone').toBe(
+      false
+    )
+    expect(await elementExists(page, 'exit-06-target-3'), 'Child 3 should be gone').toBe(
+      false
+    )
+  })
+})
+
+test.describe('Timing Validation', () => {
+  test('scenario 07: long animation (500ms) completes after animation finishes', async ({
+    page,
+  }) => {
+    await page.getByTestId('exit-07-trigger').click()
+
+    const startTime = Date.now()
+    await waitForExitComplete(page, '07-long-animation', 2000)
+    const elapsed = Date.now() - startTime
+
+    const data = await getExitTrackingData(page)
+    const completionTime = data.times['07-long-animation']?.[0] || 0
+
+    // completion should happen after ~500ms, not immediately
+    // allow some tolerance for CI variance
+    expect(
+      completionTime,
+      'Exit should complete after animation (>350ms)'
+    ).toBeGreaterThan(350)
+    expect(data.counts['07-long-animation'], 'Should complete exactly once').toBe(1)
+  })
+
+  test('scenario 08: interrupted exit completes at most once', async ({ page }) => {
+    // this test catches finding #2: canceled animations counted as complete
+    await page.getByTestId('exit-08-trigger').click()
+
+    // wait for the full sequence: exit -> interrupt -> exit again
+    await page.waitForTimeout(1200)
+
+    const data = await getExitTrackingData(page)
+    const count = data.counts['08-interrupted'] || 0
+
+    // the interrupted exit should not count as complete:
+    // only the final successful exit should complete
+    expect(count, 'Interrupted exit should complete exactly once').toBe(1)
+
+    const completionTime = data.times['08-interrupted']?.[0] || 0
+    expect(
+      completionTime,
+      'Interrupted scenario should not complete early (final completion should be late)'
+    ).toBeGreaterThan(350)
+
+    // final state should be hidden
+    const status = await page.getByTestId('exit-08-status').textContent()
+    expect(status).toBe('hidden')
+  })
+
+  test('scenario 09: stress test with many cancel/restart cycles', async ({ page }) => {
+    await page.getByTestId('exit-09-trigger').click()
+
+    // wait for the stress test sequence to complete
+    await page.waitForTimeout(1500)
+
+    const data = await getExitTrackingData(page)
+    const count = data.counts['09-cancel-restart'] || 0
+
+    // all interim exits are interrupted; only the final exit should complete
+    expect(count, 'Stress test should complete exactly once').toBe(1)
+
+    // final state should be hidden
+    const status = await page.getByTestId('exit-09-status').textContent()
+    expect(status).toBe('hidden')
+  })
+})
+
+test.describe('Per-Property Exit', () => {
+  test('scenario 10: per-property exit waits for longest animation', async ({
+    page,
+  }, testInfo) => {
+    // motion driver can't differentiate transform sub-keys (scale becomes transform)
+    // so per-property timing for scale vs opacity doesn't work
+    const driver = (testInfo.project?.metadata as any)?.animationDriver
+    if (driver === 'motion') {
+      test.skip()
+      return
+    }
+
+    // this test catches finding #1: emitter-driven keys not tracked
+    // opacity=100ms, scale=500ms - should wait for scale
+    await page.getByTestId('exit-10-trigger').click()
+
+    await waitForExitComplete(page, '10-per-property', 2000)
+
+    const data = await getExitTrackingData(page)
+    const completionTime = data.times['10-per-property']?.[0] || 0
+
+    // should wait for the slow scale animation (500ms), not just opacity (100ms)
+    // allow tolerance for CI
+    expect(
+      completionTime,
+      'Per-property exit should wait for longest animation (>350ms)'
+    ).toBeGreaterThan(350)
+    expect(data.counts['10-per-property'], 'Should complete exactly once').toBe(1)
+    await expectStableCompletionCount(page, '10-per-property', 1, 350)
+  })
+
+  test('scenario 11: mixed duration exit completes after slowest property', async ({
+    page,
+  }, testInfo) => {
+    // motion driver can't differentiate transform sub-keys
+    const driver = (testInfo.project?.metadata as any)?.animationDriver
+    if (driver === 'motion') {
+      test.skip()
+      return
+    }
+
+    // opacity=100ms, scale/y=400ms
+    await page.getByTestId('exit-11-trigger').click()
+
+    await waitForExitComplete(page, '11-mixed-duration', 2000)
+
+    const data = await getExitTrackingData(page)
+    const completionTime = data.times['11-mixed-duration']?.[0] || 0
+
+    // should wait for 400ms animations, not 100ms opacity
+    expect(
+      completionTime,
+      'Mixed duration should wait for slowest property (>300ms)'
+    ).toBeGreaterThan(300)
+    expect(data.counts['11-mixed-duration'], 'Should complete exactly once').toBe(1)
+    await expectStableCompletionCount(page, '11-mixed-duration', 1, 350)
+  })
+})
+
+test.describe('Element removal timing', () => {
+  test('element should exist during exit animation', async ({ page }) => {
+    // native driver has timing issues on web - animations complete too quickly
+    const driver = (test.info().project?.metadata as any)?.animationDriver
+    test.skip(driver === 'native', 'native driver has animation timing issues on web')
+
+    // verify element stays in DOM during exit animation
+    await page.getByTestId('exit-07-trigger').click()
+
+    // immediately after triggering, element should still exist
+    await page.waitForTimeout(50)
+    expect(
+      await elementExists(page, 'exit-07-target'),
+      'Element should exist during exit animation'
+    ).toBe(true)
+
+    // at 200ms into 500ms animation, should still exist
+    await page.waitForTimeout(150)
+    expect(
+      await elementExists(page, 'exit-07-target'),
+      'Element should still exist at 200ms into 500ms animation'
+    ).toBe(true)
+
+    // after animation completes, should be gone
+    await page.waitForTimeout(500)
+    expect(
+      await elementExists(page, 'exit-07-target'),
+      'Element should be gone after animation completes'
+    ).toBe(false)
+  })
+})
+
+test.describe('AnimateOnly & Transform Sub-Keys', () => {
+  test('scenario 51: animateOnly excludes scale from pending set', async ({
+    page,
+  }, testInfo) => {
+    // this test uses CSS-style duration strings which only CSS driver supports
+    const driver = (testInfo.project?.metadata as any)?.animationDriver
+    if (driver !== 'css') {
+      test.skip()
+      return
+    }
+
+    // animateOnly=['opacity'] with scale=500ms, opacity=100ms
+    // should complete based on opacity timing (~100ms), not scale
+    await page.getByTestId('exit-51-trigger').click()
+
+    await waitForExitComplete(page, '51-animateonly-exclusion', 2000)
+
+    const data = await getExitTrackingData(page)
+    const completionTime = data.times['51-animateonly-exclusion']?.[0] || 0
+
+    // should complete after opacity (100ms) finishes, not wait for excluded scale (500ms)
+    // allow tolerance but should NOT wait 400-500ms
+    expect(
+      completionTime,
+      'AnimateOnly should exclude scale - complete around opacity time (not 400+ms)'
+    ).toBeLessThan(400)
+    expect(data.counts['51-animateonly-exclusion'], 'Should complete exactly once').toBe(
+      1
+    )
+    await expectStableCompletionCount(page, '51-animateonly-exclusion', 1, 350)
+    expect(await elementExists(page, 'exit-51-target'), 'Element should be gone').toBe(
+      false
+    )
+  })
+
+  test('scenario 53: transform sub-keys with different durations wait for longest', async ({
+    page,
+  }, testInfo) => {
+    // this test uses CSS-style duration strings ('100ms', '500ms') which only CSS driver supports
+    const driver = (testInfo.project?.metadata as any)?.animationDriver
+    if (driver !== 'css') {
+      test.skip()
+      return
+    }
+
+    // scale=100ms, y=500ms - should wait for y
+    await page.getByTestId('exit-53-trigger').click()
+
+    await waitForExitComplete(page, '53-transform-subkeys', 2000)
+
+    const data = await getExitTrackingData(page)
+    const completionTime = data.times['53-transform-subkeys']?.[0] || 0
+
+    // should wait for the slower y animation (500ms), not just scale (100ms)
+    expect(
+      completionTime,
+      'Transform sub-keys should wait for longest (y=500ms, should be >350ms)'
+    ).toBeGreaterThan(350)
+    expect(data.counts['53-transform-subkeys'], 'Should complete exactly once').toBe(1)
+    await expectStableCompletionCount(page, '53-transform-subkeys', 1, 350)
+    expect(await elementExists(page, 'exit-53-target'), 'Element should be gone').toBe(
+      false
+    )
+  })
+
+  test('scenario 55: zero animatable props completes immediately', async ({ page }) => {
+    // animateOnly=[] means nothing should animate, immediate completion
+    await page.getByTestId('exit-55-trigger').click()
+
+    const startTime = Date.now()
+    await waitForExitComplete(page, '55-zero-animatable', 1000)
+    const elapsed = Date.now() - startTime
+
+    const data = await getExitTrackingData(page)
+    const completionTime = data.times['55-zero-animatable']?.[0] || 0
+
+    // should complete almost immediately since no animations
+    // 300ms threshold to account for CI overhead (actual should be <10ms)
+    expect(
+      completionTime,
+      'Zero animatable props should complete immediately (<300ms)'
+    ).toBeLessThan(300)
+    expect(data.counts['55-zero-animatable'], 'Should complete exactly once').toBe(1)
+    await expectStableCompletionCount(page, '55-zero-animatable', 1, 200)
+    expect(await elementExists(page, 'exit-55-target'), 'Element should be gone').toBe(
+      false
+    )
+  })
+})

package/tests/ExitTimingCheck.animated.test.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test('exit animation holds element during tab switch', async ({ page }) => {
+  // native driver has hover/animation issues on web
+  const driver = (test.info().project?.metadata as any)?.animationDriver
+  test.skip(driver === 'native', 'native driver has element detection issues on web')
+
+  await setupPage(page, { name: 'TabHoverAnimationCase', type: 'useCase' })
+  await page.waitForTimeout(500)
+
+  await page.locator('[data-testid="tab-tab-a"]').hover()
+  await page.waitForTimeout(400)
+
+  const content = page.locator('[data-testid="slide-content"]')
+  expect(await content.count()).toBe(1)
+
+  await page.locator('[data-testid="tab-tab-d"]').hover()
+
+  await page.waitForTimeout(60)
+  const countAt60 = await content.count()
+
+  const elemsAt60 = await page.evaluate(() =>
+    Array.from(document.querySelectorAll('[data-testid="slide-content"]')).map((el) => ({
+      tab: (el as HTMLElement).dataset.tab,
+      opacity: getComputedStyle(el).opacity,
+    }))
+  )
+  console.log(`At 60ms - count: ${countAt60}, elements: ${JSON.stringify(elemsAt60)}`)
+
+  // If exit animation works: 2 elements (A exiting + D entering)
+  // If exit is immediate: 1 element (only D)
+  expect(countAt60).toBe(2)
+})

package/tests/FocusVisibleButton.test.tsx

@@ -0,0 +1,41 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'FocusVisibleButton', type: 'useCase' })
+})
+
+test(`button + focusVisibleStyle`, async ({ page }) => {
+  const button = page.locator('#focus-visible-button')
+
+  // Ensure the button is visible and ready
+  await button.waitFor({ state: 'visible' })
+
+  // Click the button first to ensure it's interactable, then focus via keyboard
+  await button.click()
+  await page.keyboard.press('Tab')
+  await page.keyboard.press('Shift+Tab')
+
+  // Wait for focus to be applied and styles to update
+  await page.waitForTimeout(100)
+
+  // Verify the button is focused
+  const isFocused = await button.evaluate((el) => {
+    return document.activeElement === el
+  })
+
+  expect(isFocused).toBe(true)
+
+  // Check if focus-visible pseudo-class is applied
+  const hasFocusVisible = await button.evaluate((el) => {
+    return el.matches(':focus-visible')
+  })
+
+  // Get computed styles
+  const styles = await button.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(hasFocusVisible).toBe(true)
+  expect(styles.borderWidth).toBe(`2px`)
+})

package/tests/FocusVisibleButtonPointerFocus.test.tsx

@@ -0,0 +1,23 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'FocusVisibleButtonPointer', type: 'useCase' })
+})
+
+test(`button + focusVisibleStyle + non keyboard focus`, async ({ page }) => {
+  const button = page.locator('#focus-visible-button')
+
+  const box = await button.boundingBox()
+  await page.mouse.move(box!.x + box!.width / 2, box!.y + box!.height / 2)
+  await page.mouse.down({
+    button: 'left',
+    clickCount: 1,
+  })
+
+  const styles = await button.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(styles.borderWidth).toBe(`1px`)
+})

package/tests/FocusVisibleButtonPointerFocusWithFocusStyle.test.tsx

@@ -0,0 +1,40 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'FocusVisibleButtonWithFocusStyle', type: 'useCase' })
+})
+
+test(`button + focusVisibleStyle + focusVisible`, async ({ page }) => {
+  const button = page.locator('#focus-visible-button')
+
+  const beforeFocusStyles = await button.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(beforeFocusStyles.borderWidth).toBe(`1px`)
+
+  await page.keyboard.press('Tab')
+
+  const stylesAfterKeyboardFocus = await button.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(stylesAfterKeyboardFocus.borderWidth).toBe(`3px`)
+
+  await button.blur()
+
+  const box = await button.boundingBox()
+  await page.mouse.move(box!.x + box!.width / 2, box!.y + box!.height / 2)
+  await page.mouse.down({
+    button: 'left',
+    clickCount: 1,
+  })
+  await page.mouse.up()
+
+  const stylesAfterMouseFocus = await button.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(stylesAfterMouseFocus.borderWidth).toBe(`2px`)
+})

package/tests/FocusWithinStyle.animated.test.tsx

@@ -0,0 +1,66 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'FocusWithinCase', type: 'useCase' })
+})
+
+test('animated focusWithinStyle applies on focus', async ({ page }, testInfo) => {
+  // native driver uses RN Animated API which can't animate CSS border colors on web
+  test.skip(
+    testInfo.project.name === 'animated-native',
+    'Native driver cannot animate CSS properties on web'
+  )
+  const input = page.locator('[data-testid="animated-input"]')
+  const parent = page.locator('[data-testid="animated-parent"]')
+
+  await input.waitFor({ state: 'visible' })
+  await input.focus()
+  // reanimated spring needs more time to settle than motion
+  await page.waitForTimeout(1500)
+
+  const borderColor = await parent.evaluate((el) => getComputedStyle(el).borderColor)
+  expect(borderColor).toBe('rgb(0, 128, 0)')
+})
+
+test('animated focusWithinStyle removes on blur', async ({ page }, testInfo) => {
+  test.skip(
+    testInfo.project.name === 'animated-native',
+    'Native driver cannot animate CSS properties on web'
+  )
+  const input = page.locator('[data-testid="animated-input"]')
+  const parent = page.locator('[data-testid="animated-parent"]')
+
+  await input.waitFor({ state: 'visible' })
+  await input.focus()
+  await page.waitForTimeout(1500)
+  await input.blur()
+  await page.waitForTimeout(1500)
+
+  const borderColor = await parent.evaluate((el) => getComputedStyle(el).borderColor)
+  expect(borderColor).not.toBe('rgb(0, 128, 0)')
+})
+
+test('animated focusWithinStyle does not cause React re-render (avoidReRenders)', async ({
+  page,
+}, testInfo) => {
+  // native driver doesn't support avoidReRenders
+  test.skip(
+    testInfo.project.name === 'animated-native',
+    'Native driver does not support avoidReRenders'
+  )
+
+  const input = page.locator('[data-testid="animated-input"]')
+  const renders = page.locator('[data-testid="animated-renders"]')
+
+  await input.waitFor({ state: 'visible' })
+  const before = await renders.textContent()
+
+  await input.focus()
+  await page.waitForTimeout(300)
+  await input.blur()
+  await page.waitForTimeout(300)
+
+  const after = await renders.textContent()
+  expect(after).toBe(before)
+})

package/tests/FocusWithinStyle.test.tsx

@@ -0,0 +1,60 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'FocusWithinCase', type: 'useCase' })
+})
+
+test('focusWithinStyle applies via direct prop', async ({ page }) => {
+  const input = page.locator('[data-testid="direct-input"]')
+  const parent = page.locator('[data-testid="direct-parent"]')
+
+  await input.waitFor({ state: 'visible' })
+  await input.focus()
+  await page.waitForTimeout(100)
+
+  const borderColor = await parent.evaluate((el) => getComputedStyle(el).borderColor)
+  expect(borderColor).toBe('rgb(255, 0, 0)')
+})
+
+test('focusWithinStyle applies via styled() component', async ({ page }) => {
+  const input = page.locator('[data-testid="styled-input"]')
+  const parent = page.locator('[data-testid="styled-parent"]')
+
+  await input.waitFor({ state: 'visible' })
+  await input.focus()
+  await page.waitForTimeout(100)
+
+  const borderColor = await parent.evaluate((el) => getComputedStyle(el).borderColor)
+  expect(borderColor).toBe('rgb(0, 0, 255)')
+})
+
+test('focusWithinStyle removes on blur', async ({ page }) => {
+  const input = page.locator('[data-testid="direct-input"]')
+  const parent = page.locator('[data-testid="direct-parent"]')
+
+  await input.waitFor({ state: 'visible' })
+  await input.focus()
+  await page.waitForTimeout(100)
+  await input.blur()
+  await page.waitForTimeout(100)
+
+  const borderColor = await parent.evaluate((el) => getComputedStyle(el).borderColor)
+  expect(borderColor).not.toBe('rgb(255, 0, 0)')
+})
+
+test('plain focusWithinStyle does not re-render parent', async ({ page }) => {
+  const input = page.locator('[data-testid="direct-input"]')
+  const renders = page.locator('[data-testid="direct-renders"]')
+
+  await input.waitFor({ state: 'visible' })
+  const before = await renders.textContent()
+
+  await input.focus()
+  await page.waitForTimeout(200)
+  await input.blur()
+  await page.waitForTimeout(200)
+
+  const after = await renders.textContent()
+  expect(after).toBe(before)
+})