@hanzogui/kitchen-sink 3.0.5

package/tests/PseudoTransition.animated.test.tsx

@@ -0,0 +1,319 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * PSEUDO TRANSITION TESTS
+ *
+ * Tests for the `transition` prop inside pseudo-style props (hoverStyle, pressStyle, etc.)
+ *
+ * CSS semantics:
+ * - Enter pseudo state (e.g., hover): use that pseudo's transition (200ms)
+ * - Exit pseudo state (e.g., unhover): use base transition (1000ms)
+ *
+ * These tests run across all animation drivers (css, native, reanimated, motion).
+ */
+
+async function getBackgroundColor(page: Page, testId: string): Promise<string> {
+  return page.evaluate((id) => {
+    const el = document.querySelector(`[data-testid="${id}"]`)
+    if (!el) return ''
+    return getComputedStyle(el).backgroundColor
+  }, testId)
+}
+
+async function getOpacity(page: Page, testId: string): Promise<number> {
+  return page.evaluate((id) => {
+    const el = document.querySelector(`[data-testid="${id}"]`)
+    if (!el) return -1
+    return Number.parseFloat(getComputedStyle(el).opacity)
+  }, testId)
+}
+
+function parseRgb(color: string): { r: number; g: number; b: number } | null {
+  const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+  if (!match) return null
+  return {
+    r: Number.parseInt(match[1], 10),
+    g: Number.parseInt(match[2], 10),
+    b: Number.parseInt(match[3], 10),
+  }
+}
+
+test.describe('Pseudo Transition Tests', () => {
+  test.beforeEach(async ({ page }) => {
+    const driver = (test.info().project?.metadata as any)?.animationDriver
+    test.skip(driver === 'native', 'native driver has issues on web')
+
+    await setupPage(page, {
+      name: 'PseudoTransitionCase',
+      type: 'useCase',
+    })
+    // wait for initial render
+    await page.waitForTimeout(500)
+  })
+
+  test('scenario 1: hoverStyle transition - fast enter (200ms), slow exit (1000ms)', async ({
+    page,
+  }) => {
+    const target = page.getByTestId('scenario-1-target')
+    const initialColor = await getBackgroundColor(page, 'scenario-1-target')
+
+    // hover to trigger enter animation (should be fast - 200ms)
+    await target.hover()
+
+    // wait for enter to complete
+    await page.waitForTimeout(350)
+    const hoverColor = await getBackgroundColor(page, 'scenario-1-target')
+    expect(hoverColor, 'Color should change on hover').not.toBe(initialColor)
+
+    // move mouse away to trigger exit animation (should be slow - 1000ms)
+    await page.mouse.move(0, 0)
+
+    // at 400ms, exit should still be in progress (1000ms animation)
+    await page.waitForTimeout(400)
+    const midExitColor = await getBackgroundColor(page, 'scenario-1-target')
+    const midExitRgb = parseRgb(midExitColor)
+    const hoverRgb = parseRgb(hoverColor)
+    const initialRgb = parseRgb(initialColor)
+
+    // check that exit is still in progress (color not yet back to initial)
+    if (midExitRgb && hoverRgb && initialRgb) {
+      expect(
+        midExitColor,
+        'At 400ms into 1000ms exit, color should not be fully reset'
+      ).not.toBe(initialColor)
+    }
+
+    // wait for full exit
+    await page.waitForTimeout(800)
+    const finalColor = await getBackgroundColor(page, 'scenario-1-target')
+    expect(finalColor, 'Color should return to initial').toBe(initialColor)
+  })
+
+  test('scenario 2: pressStyle transition - fast press (200ms), slow release (1000ms)', async ({
+    page,
+  }) => {
+    const target = page.getByTestId('scenario-2-target')
+    const initialColor = await getBackgroundColor(page, 'scenario-2-target')
+
+    // press to trigger enter animation
+    const box = await target.boundingBox()
+    if (!box) throw new Error('Target not found')
+
+    await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2)
+    await page.mouse.down()
+
+    // wait for press animation (200ms + buffer)
+    await page.waitForTimeout(350)
+    const pressColor = await getBackgroundColor(page, 'scenario-2-target')
+    expect(pressColor, 'Color should change on press').not.toBe(initialColor)
+
+    // release to trigger exit animation (should be slow - 1000ms)
+    await page.mouse.up()
+
+    // at 400ms, exit should still be in progress if using 1000ms base
+    await page.waitForTimeout(400)
+    const midReleaseColor = await getBackgroundColor(page, 'scenario-2-target')
+
+    // check exit is still in progress across drivers
+    const midRgb = parseRgb(midReleaseColor)
+    const pressRgb = parseRgb(pressColor)
+    const initRgb = parseRgb(initialColor)
+
+    if (midRgb && pressRgb && initRgb) {
+      expect(
+        midReleaseColor,
+        'At 400ms into 1000ms release, color should not be fully reset'
+      ).not.toBe(initialColor)
+    }
+
+    // wait for full exit
+    await page.waitForTimeout(800)
+    const finalColor = await getBackgroundColor(page, 'scenario-2-target')
+    expect(finalColor, 'Color should return to initial').toBe(initialColor)
+  })
+
+  test('scenario 6: opacity hover - fast fade in (200ms), slow fade out (1000ms)', async ({
+    page,
+  }) => {
+    // CSS driver now supports pseudo-class transitions via !important CSS rules
+
+    const target = page.getByTestId('scenario-6-target')
+    const initialOpacity = await getOpacity(page, 'scenario-6-target')
+    expect(initialOpacity, 'Initial opacity should be ~0.3').toBeCloseTo(0.3, 1)
+
+    // hover to trigger opacity increase
+    await target.hover()
+
+    // wait for enter to complete (200ms + buffer for springs)
+    await page.waitForTimeout(400)
+    const hoverOpacity = await getOpacity(page, 'scenario-6-target')
+    expect(hoverOpacity, 'Hover opacity should be > 0.6').toBeGreaterThan(0.6)
+
+    // move away to trigger opacity decrease (slow - 1000ms)
+    await page.mouse.move(0, 0)
+
+    // at 300ms, opacity should still be elevated if using 1000ms exit
+    await page.waitForTimeout(300)
+    const midExitOpacity = await getOpacity(page, 'scenario-6-target')
+
+    expect(
+      midExitOpacity,
+      'Opacity at 300ms of 1000ms exit should still be elevated'
+    ).toBeGreaterThan(0.4)
+
+    // wait for full exit
+    await page.waitForTimeout(800)
+    const finalOpacity = await getOpacity(page, 'scenario-6-target')
+    expect(finalOpacity, 'Final opacity should be ~0.3').toBeCloseTo(0.3, 1)
+  })
+
+  // BUG TEST: First pseudo interaction should use pseudo transition
+  // Regression test for: prevPseudoState not initialized, causing first hover to use base transition
+  test('first hover should use pseudo transition (not base)', async ({ page }) => {
+    const driver = (test.info().project?.metadata as any)?.animationDriver
+
+    const target = page.getByTestId('scenario-6-target')
+    const initialOpacity = await getOpacity(page, 'scenario-6-target')
+    expect(initialOpacity, 'Initial opacity should be ~0.3').toBeCloseTo(0.3, 1)
+
+    // FIRST hover - should use fast 200ms pseudo transition
+    await target.hover()
+
+    // at 350ms, a 200ms animation should be complete (extra buffer for springs)
+    await page.waitForTimeout(350)
+    const firstHoverOpacity = await getOpacity(page, 'scenario-6-target')
+
+    // if prevPseudoState wasn't initialized, this would use 1000ms base transition
+    // and opacity would still be low (~0.4-0.5). with proper 200ms, should be > 0.6
+    expect(
+      firstHoverOpacity,
+      `First hover should complete quickly with pseudo transition (got ${firstHoverOpacity}, driver: ${driver})`
+    ).toBeGreaterThan(0.6)
+  })
+
+  // BUG TEST: Exit should use base transition, not cached pseudo transition
+  // Regression test for: reanimated keeps pseudo config on exit instead of restoring base
+  test('exit should use base transition timing (not cached pseudo)', async ({ page }) => {
+    const driver = (test.info().project?.metadata as any)?.animationDriver
+
+    const target = page.getByTestId('scenario-6-target')
+
+    // hover to enter (fast 200ms) - wait longer for springs
+    await target.hover()
+    await page.waitForTimeout(400)
+    const hoverOpacity = await getOpacity(page, 'scenario-6-target')
+    expect(hoverOpacity, 'Should be at hover state').toBeGreaterThan(0.7)
+
+    // exit hover - should use SLOW 1000ms base transition
+    await page.mouse.move(0, 0)
+
+    // at 250ms into a 1000ms exit, should still be > 0.4
+    // if using cached 200ms pseudo transition, would already be near 0.3
+    await page.waitForTimeout(250)
+    const midExitOpacity = await getOpacity(page, 'scenario-6-target')
+
+    expect(
+      midExitOpacity,
+      `Exit at 250ms of 1000ms should still be > 0.4 (got ${midExitOpacity}, driver: ${driver})`
+    ).toBeGreaterThan(0.4)
+
+    // wait for exit to complete
+    await page.waitForTimeout(900)
+    const finalOpacity = await getOpacity(page, 'scenario-6-target')
+    expect(finalOpacity, 'Should return to initial').toBeCloseTo(0.3, 1)
+  })
+
+  test('scenario 6: repeated hover cycles keep slow exit timing (reanimated regression)', async ({
+    page,
+  }) => {
+    const driver = (test.info().project?.metadata as any)?.animationDriver
+    test.skip(
+      driver !== 'reanimated',
+      'Reanimated-specific config cache regression coverage'
+    )
+
+    const target = page.getByTestId('scenario-6-target')
+    const initialOpacity = await getOpacity(page, 'scenario-6-target')
+    expect(initialOpacity, 'Initial opacity should be ~0.3').toBeCloseTo(0.3, 1)
+
+    const runCycle = async () => {
+      await target.hover()
+      await page.waitForTimeout(350)
+      const hoveredOpacity = await getOpacity(page, 'scenario-6-target')
+      expect(
+        hoveredOpacity,
+        'Enter should move quickly toward hover opacity'
+      ).toBeGreaterThan(0.7)
+
+      await page.mouse.move(0, 0)
+      await page.waitForTimeout(300)
+      const midExitOpacity = await getOpacity(page, 'scenario-6-target')
+      expect(
+        midExitOpacity,
+        'Exit should still be in progress at 300ms (base 1000ms transition)'
+      ).toBeGreaterThan(0.5)
+
+      await page.waitForTimeout(900)
+      const finalOpacity = await getOpacity(page, 'scenario-6-target')
+      expect(finalOpacity, 'Cycle should return to base opacity').toBeCloseTo(0.3, 1)
+    }
+
+    await runCycle()
+    await runCycle()
+  })
+
+  test('scenario 4: group hover transition - fast enter (200ms)', async ({ page }) => {
+    const driver = (test.info().project?.metadata as any)?.animationDriver
+
+    const container = page.getByTestId('scenario-4-container')
+    const initialOpacity = await getOpacity(page, 'scenario-4-target')
+    expect(initialOpacity, 'Initial opacity should be ~0.3').toBeCloseTo(0.3, 1)
+
+    // hover over container to trigger group hover (should be fast - 200ms)
+    await container.hover()
+
+    // at 350ms, a 200ms animation should be complete (extra buffer for springs)
+    await page.waitForTimeout(350)
+    const hoverOpacity = await getOpacity(page, 'scenario-4-target')
+
+    // if using 200ms transition, opacity should be close to 1 (>0.8)
+    // if using 1000ms base transition incorrectly, would be ~0.5
+    expect(
+      hoverOpacity,
+      `Group hover enter should complete quickly with 200ms transition (got ${hoverOpacity}, driver: ${driver})`
+    ).toBeGreaterThan(0.8)
+  })
+
+  test('scenario 4: group hover transition - slow exit (1000ms base)', async ({
+    page,
+  }) => {
+    const container = page.getByTestId('scenario-4-container')
+    const initialOpacity = await getOpacity(page, 'scenario-4-target')
+    expect(initialOpacity, 'Initial opacity should be ~0.3').toBeCloseTo(0.3, 1)
+
+    // hover over container to trigger group hover
+    await container.hover()
+
+    // wait for hover state to be fully applied (use longer time for all drivers)
+    await page.waitForTimeout(1200)
+    const hoverOpacity = await getOpacity(page, 'scenario-4-target')
+    expect(hoverOpacity, 'Hover opacity should be ~1').toBeGreaterThan(0.9)
+
+    // move away to trigger exit (slow - 1000ms base transition)
+    await page.mouse.move(0, 0)
+
+    // KEY TEST: at 300ms into 1000ms linear exit, opacity should still be > 0.5
+    await page.waitForTimeout(300)
+    const midExitOpacity = await getOpacity(page, 'scenario-4-target')
+    expect(
+      midExitOpacity,
+      'Opacity should still be elevated during slow group-hover exit'
+    ).toBeGreaterThan(0.5)
+
+    // wait for full exit
+    await page.waitForTimeout(900)
+    const finalOpacity = await getOpacity(page, 'scenario-4-target')
+    expect(finalOpacity, 'Final opacity should be ~0.3').toBeCloseTo(0.3, 1)
+  })
+})

package/tests/RawAnimatedValue.test.tsx

@@ -0,0 +1,147 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Tests for raw Animated.Value with Animated.createAnimatedComponent
+ *
+ * This validates that react-native-web-lite properly handles AnimatedValue
+ * objects when passed as style props to Animated components.
+ */
+
+test.describe('Raw Animated.Value', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, {
+      name: 'RawAnimatedValueCase',
+      type: 'useCase',
+    })
+    await page.waitForTimeout(500)
+  })
+
+  test('initial state applies animated values correctly', async ({ page }) => {
+    const box = page.getByTestId('animated-box')
+
+    // initial values: opacity=0, scale=0.5, translateY=50, backgroundColor=red
+    const opacity = await box.evaluate((el) => getComputedStyle(el).opacity)
+    const transform = await box.evaluate((el) => getComputedStyle(el).transform)
+    const bgColor = await box.evaluate((el) => getComputedStyle(el).backgroundColor)
+
+    expect(opacity).toBe('0')
+    // matrix(scaleX, 0, 0, scaleY, translateX, translateY)
+    expect(transform).toContain('matrix')
+    expect(transform).toContain('0.5') // scale
+    expect(transform).toContain('50') // translateY
+    expect(bgColor).toBe('rgb(255, 0, 0)') // red
+  })
+
+  test('animate in changes values over time', async ({ page }) => {
+    const box = page.getByTestId('animated-box')
+    const trigger = page.getByTestId('animate-in-trigger')
+
+    // capture initial
+    const initialOpacity = await box.evaluate((el) =>
+      parseFloat(getComputedStyle(el).opacity)
+    )
+    expect(initialOpacity).toBe(0)
+
+    // click animate in
+    await trigger.click()
+
+    // wait a bit for animation to progress
+    await page.waitForTimeout(100)
+
+    // capture mid-animation value
+    const midOpacity = await box.evaluate((el) =>
+      parseFloat(getComputedStyle(el).opacity)
+    )
+
+    // wait for animation to complete
+    await page.waitForTimeout(400)
+
+    // capture final
+    const finalOpacity = await box.evaluate((el) =>
+      parseFloat(getComputedStyle(el).opacity)
+    )
+    const finalTransform = await box.evaluate((el) => getComputedStyle(el).transform)
+    const finalBgColor = await box.evaluate((el) => getComputedStyle(el).backgroundColor)
+
+    // final values should be: opacity=1, scale=1, translateY=0, backgroundColor=green
+    expect(finalOpacity).toBeCloseTo(1, 1)
+
+    // transform should be identity or close to it (scale=1, translateY=0)
+    // matrix(1, 0, 0, 1, 0, 0) or 'none'
+    if (finalTransform !== 'none') {
+      expect(finalTransform).toMatch(/matrix\(1,?\s*0,?\s*0,?\s*1,?\s*0,?\s*0\)/)
+    }
+
+    // backgroundColor should be green
+    expect(finalBgColor).toBe('rgb(0, 255, 0)')
+
+    // the mid-animation value should show progress (not jumped instantly)
+    // if animation is working, mid should be between 0 and 1
+    console.log(
+      `Animation progress: initial=${initialOpacity}, mid=${midOpacity}, final=${finalOpacity}`
+    )
+
+    // key test: animation should have progressed, not jumped
+    const animationProgressed = midOpacity > 0.05 && midOpacity < 0.95
+    expect(
+      animationProgressed || finalOpacity === 1,
+      `Animation should progress smoothly. mid=${midOpacity}`
+    ).toBe(true)
+  })
+
+  test('animate out returns to initial values', async ({ page }) => {
+    const box = page.getByTestId('animated-box')
+    const animateIn = page.getByTestId('animate-in-trigger')
+    const animateOut = page.getByTestId('animate-out-trigger')
+
+    // first animate in
+    await animateIn.click()
+    await page.waitForTimeout(400)
+
+    // verify we're at end state
+    let opacity = await box.evaluate((el) => parseFloat(getComputedStyle(el).opacity))
+    expect(opacity).toBeCloseTo(1, 1)
+
+    // now animate out
+    await animateOut.click()
+    await page.waitForTimeout(400)
+
+    // should be back to initial
+    opacity = await box.evaluate((el) => parseFloat(getComputedStyle(el).opacity))
+    const transform = await box.evaluate((el) => getComputedStyle(el).transform)
+    const bgColor = await box.evaluate((el) => getComputedStyle(el).backgroundColor)
+
+    expect(opacity).toBeCloseTo(0, 1)
+    expect(transform).toContain('0.5') // scale back to 0.5
+    expect(transform).toContain('50') // translateY back to 50
+    expect(bgColor).toBe('rgb(255, 0, 0)') // back to red
+  })
+
+  test('interpolated color animates correctly', async ({ page }) => {
+    const box = page.getByTestId('animated-box')
+    const trigger = page.getByTestId('animate-in-trigger')
+
+    // initial color is red
+    let bgColor = await box.evaluate((el) => getComputedStyle(el).backgroundColor)
+    expect(bgColor).toBe('rgb(255, 0, 0)')
+
+    // animate
+    await trigger.click()
+
+    // capture mid-animation color
+    await page.waitForTimeout(150)
+    const midColor = await box.evaluate((el) => getComputedStyle(el).backgroundColor)
+
+    // wait for completion
+    await page.waitForTimeout(300)
+    bgColor = await box.evaluate((el) => getComputedStyle(el).backgroundColor)
+
+    // final should be green
+    expect(bgColor).toBe('rgb(0, 255, 0)')
+
+    // mid color should be somewhere between red and green
+    // (not exactly red and not exactly green if interpolation works)
+    console.log(`Color interpolation: mid=${midColor}, final=${bgColor}`)
+  })
+})

package/tests/RemoveScroll.test.tsx

@@ -0,0 +1,223 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'RemoveScrollCase', type: 'useCase' })
+})
+
+/**
+ * helper: scroll, open select, wait for viewport
+ */
+async function scrollAndOpenSelect(page: Page, scrollY: number) {
+  if (scrollY > 0) {
+    await page.evaluate((y) => window.scrollTo(0, y), scrollY)
+    await page.waitForTimeout(100)
+    const actual = await page.evaluate(() => window.scrollY)
+    expect(actual).toBeGreaterThanOrEqual(scrollY - 2)
+  }
+
+  const trigger = page.getByTestId('rs-select-trigger')
+  await trigger.scrollIntoViewIfNeeded()
+  await trigger.click()
+
+  const viewport = page.getByTestId('rs-select-viewport')
+  await expect(viewport).toBeVisible({ timeout: 5000 })
+  await page.waitForTimeout(200)
+
+  return viewport
+}
+
+// --- positive: scroll position IS restored ---
+
+test.describe('scroll position restored after close', () => {
+  test('preserved when closing by selecting an item', async ({ page }) => {
+    await scrollAndOpenSelect(page, 500)
+    const preClose = await page.evaluate(() => window.scrollY)
+
+    const item = page.getByTestId('rs-select-apple')
+    await item.click()
+    await page.waitForTimeout(300)
+
+    const viewport = page.getByTestId('rs-select-viewport')
+    await expect(viewport).not.toBeVisible()
+
+    const postClose = await page.evaluate(() => window.scrollY)
+    expect(Math.abs(postClose - preClose)).toBeLessThanOrEqual(2)
+  })
+
+  test('preserved when closing by pressing Escape', async ({ page }) => {
+    await scrollAndOpenSelect(page, 500)
+    const preClose = await page.evaluate(() => window.scrollY)
+
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(300)
+
+    const viewport = page.getByTestId('rs-select-viewport')
+    await expect(viewport).not.toBeVisible()
+
+    const postClose = await page.evaluate(() => window.scrollY)
+    expect(Math.abs(postClose - preClose)).toBeLessThanOrEqual(2)
+  })
+
+  test('preserved when closing by clicking outside', async ({ page }) => {
+    await scrollAndOpenSelect(page, 500)
+    const preClose = await page.evaluate(() => window.scrollY)
+
+    // click far from the select content to dismiss
+    await page.mouse.click(10, 10)
+    await page.waitForTimeout(300)
+
+    const viewport = page.getByTestId('rs-select-viewport')
+    await expect(viewport).not.toBeVisible({ timeout: 5000 })
+
+    const postClose = await page.evaluate(() => window.scrollY)
+    expect(Math.abs(postClose - preClose)).toBeLessThanOrEqual(2)
+  })
+})
+
+// --- negative: things that should NOT happen ---
+
+test.describe('scroll lock prevents body scroll while open', () => {
+  test('overflow:hidden applied to html while Select is open', async ({ page }) => {
+    await scrollAndOpenSelect(page, 300)
+
+    const htmlOverflow = await page.evaluate(
+      () => getComputedStyle(document.documentElement).overflow
+    )
+    expect(htmlOverflow).toBe('hidden')
+
+    // close and verify released
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(300)
+
+    const afterOverflow = await page.evaluate(
+      () => getComputedStyle(document.documentElement).overflow
+    )
+    expect(afterOverflow).not.toBe('hidden')
+  })
+})
+
+test.describe('edge cases', () => {
+  test('no scroll jump when scrollY is 0', async ({ page }) => {
+    // already at top
+    await scrollAndOpenSelect(page, 0)
+
+    const item = page.getByTestId('rs-select-banana')
+    await item.click()
+    await page.waitForTimeout(300)
+
+    const postClose = await page.evaluate(() => window.scrollY)
+    // should still be at 0, no negative jump or weird offset
+    expect(postClose).toBe(0)
+  })
+
+  test('scroll position stable across multiple open/close cycles', async ({ page }) => {
+    await page.evaluate(() => window.scrollTo(0, 400))
+    await page.waitForTimeout(100)
+
+    for (let i = 0; i < 3; i++) {
+      const trigger = page.getByTestId('rs-select-trigger')
+      await trigger.scrollIntoViewIfNeeded()
+      await trigger.click()
+
+      const viewport = page.getByTestId('rs-select-viewport')
+      await expect(viewport).toBeVisible({ timeout: 5000 })
+      await page.waitForTimeout(200)
+
+      await page.keyboard.press('Escape')
+      await page.waitForTimeout(300)
+      await expect(viewport).not.toBeVisible()
+    }
+
+    const finalScroll = await page.evaluate(() => window.scrollY)
+    expect(Math.abs(finalScroll - 400)).toBeLessThanOrEqual(2)
+  })
+
+  test('selecting different items preserves scroll each time', async ({ page }) => {
+    const items = ['rs-select-apple', 'rs-select-banana', 'rs-select-orange']
+
+    for (const itemId of items) {
+      // re-scroll to target before each iteration
+      await page.evaluate(() => window.scrollTo(0, 600))
+      await page.waitForTimeout(200)
+
+      const trigger = page.getByTestId('rs-select-trigger')
+      // click trigger directly without scrollIntoViewIfNeeded
+      await trigger.click()
+
+      const viewport = page.getByTestId('rs-select-viewport')
+      await expect(viewport).toBeVisible({ timeout: 5000 })
+      await page.waitForTimeout(200)
+
+      // capture scroll position while select is open (scroll is locked here)
+      const whileOpen = await page.evaluate(() => window.scrollY)
+
+      const item = page.getByTestId(itemId)
+      await item.click()
+      await page.waitForTimeout(500)
+      await expect(viewport).not.toBeVisible()
+
+      const afterClose = await page.evaluate(() => window.scrollY)
+      // scroll should be restored to where it was when the select opened
+      expect(Math.abs(afterClose - whileOpen)).toBeLessThanOrEqual(2)
+    }
+  })
+})
+
+// --- mobile/touch device tests (chrome mobile emulation) ---
+
+test.describe('mobile touch device', () => {
+  test.use({
+    viewport: { width: 390, height: 844 },
+    hasTouch: true,
+    isMobile: true,
+  })
+
+  test('scroll position restored after selecting item on mobile', async ({ page }) => {
+    await page.evaluate(() => window.scrollTo(0, 400))
+    await page.waitForTimeout(100)
+
+    const trigger = page.getByTestId('rs-select-trigger')
+    await trigger.scrollIntoViewIfNeeded()
+    const preOpen = await page.evaluate(() => window.scrollY)
+    await trigger.click()
+
+    const viewport = page.getByTestId('rs-select-viewport')
+    await expect(viewport).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(200)
+
+    const item = page.getByTestId('rs-select-apple')
+    await item.click()
+    await page.waitForTimeout(300)
+    await expect(viewport).not.toBeVisible()
+
+    const postClose = await page.evaluate(() => window.scrollY)
+    expect(Math.abs(postClose - preOpen)).toBeLessThanOrEqual(2)
+  })
+
+  test('scroll lock active on mobile while Select open', async ({ page }) => {
+    await page.evaluate(() => window.scrollTo(0, 300))
+    await page.waitForTimeout(100)
+
+    const trigger = page.getByTestId('rs-select-trigger')
+    await trigger.scrollIntoViewIfNeeded()
+    await trigger.click()
+
+    const viewport = page.getByTestId('rs-select-viewport')
+    await expect(viewport).toBeVisible({ timeout: 5000 })
+    await page.waitForTimeout(200)
+
+    const htmlOverflow = await page.evaluate(
+      () => getComputedStyle(document.documentElement).overflow
+    )
+    expect(htmlOverflow).toBe('hidden')
+
+    await page.keyboard.press('Escape')
+    await page.waitForTimeout(300)
+
+    const afterOverflow = await page.evaluate(
+      () => getComputedStyle(document.documentElement).overflow
+    )
+    expect(afterOverflow).not.toBe('hidden')
+  })
+})