@hanzogui/kitchen-sink 3.0.5

package/tests/ClickDuringEnter.animated.test.tsx

@@ -0,0 +1,174 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Tests that clicking to close while an enter animation is still playing
+ * doesn't cause a visual snap-back (the element shouldn't jump back to
+ * its enterStyle values before starting the exit animation).
+ *
+ * Bug: motion driver calls controls.stop() before the mid-flight capture,
+ * causing the WAAPI animation to cancel and the element to snap back to
+ * its pre-animation inline styles for one frame.
+ */
+
+test.beforeEach(async ({ page }, testInfo) => {
+  test.skip(
+    testInfo.project.name === 'animated-css',
+    'CSS transitions handle mid-flight interruption differently — this tests WAAPI behavior'
+  )
+  await setupPage(page, { name: 'ClickDuringEnterCase', type: 'useCase' })
+  await page.waitForTimeout(500)
+})
+
+test('no opacity snap-back when exit triggered during enter animation', async ({
+  page,
+}) => {
+  // start per-frame opacity sampling
+  await page.evaluate(() => {
+    ;(window as any).__opacityLog = [] as number[]
+    ;(window as any).__rafRunning = true
+    const track = () => {
+      if (!(window as any).__rafRunning) return
+      const el = document.querySelector('[data-testid="click-enter-target"]')
+      if (el) {
+        ;(window as any).__opacityLog.push(parseFloat(getComputedStyle(el).opacity))
+      }
+      requestAnimationFrame(track)
+    }
+    requestAnimationFrame(track)
+  })
+
+  // show element (starts enter animation: opacity 0 -> 1)
+  await page.getByTestId('click-enter-show').click()
+  // wait just enough for animation to start (50-100ms into a ~300ms animation)
+  await page.waitForTimeout(80)
+  // immediately hide (triggers exit while enter is mid-flight)
+  await page.getByTestId('click-enter-hide').click()
+  // wait for exit animation to complete
+  await page.waitForTimeout(1500)
+
+  // stop sampling
+  await page.evaluate(() => {
+    ;(window as any).__rafRunning = false
+  })
+
+  const frames: number[] = await page.evaluate(() => (window as any).__opacityLog)
+
+  // find the peak opacity (the highest opacity reached during enter)
+  const peakOpacity = Math.max(...frames)
+  const peakIndex = frames.indexOf(peakOpacity)
+
+  // after the peak, opacity should monotonically decrease (exit animation)
+  // but the bug causes a snap-back: opacity jumps DOWN then back UP then down
+  // detect this by looking for any frame after peak where opacity increases
+  // significantly compared to a previous lower value
+
+  // simpler check: look for any frame that drops significantly below its
+  // neighbors (a "dip" indicates snap-back)
+  let maxDip = 0
+  for (let i = 1; i < frames.length - 1; i++) {
+    const prev = frames[i - 1]
+    const curr = frames[i]
+    const next = frames[i + 1]
+    // a dip is when current is significantly lower than both neighbors
+    if (curr < prev && curr < next) {
+      const dip = Math.min(prev - curr, next - curr)
+      if (dip > maxDip) maxDip = dip
+    }
+  }
+
+  // also check for any opacity increase after exit begins
+  // find the first frame where opacity starts decreasing after the peak
+  let exitStartIndex = peakIndex
+  for (let i = peakIndex + 1; i < frames.length; i++) {
+    if (frames[i] < frames[i - 1] - 0.01) {
+      exitStartIndex = i
+      break
+    }
+  }
+
+  // after exit starts, look for any significant increase (snap-back indicator)
+  let maxIncrease = 0
+  for (let i = exitStartIndex + 1; i < frames.length; i++) {
+    const increase = frames[i] - frames[i - 1]
+    if (increase > maxIncrease) maxIncrease = increase
+  }
+
+  console.log('opacity frames:', JSON.stringify(frames.map((f) => +f.toFixed(3))))
+  console.log(`peak: ${peakOpacity.toFixed(3)} at frame ${peakIndex}`)
+  console.log(`max dip: ${maxDip.toFixed(3)}`)
+  console.log(`max increase after exit: ${maxIncrease.toFixed(3)}`)
+
+  // there should be no significant dip (snap-back)
+  // tolerance: 0.15 allows for minor animation interpolation variance
+  expect(
+    maxDip,
+    `Opacity had a snap-back dip of ${maxDip.toFixed(3)} - element jumped to enterStyle then back. Frames: ${JSON.stringify(frames.slice(0, 30).map((f) => +f.toFixed(2)))}`
+  ).toBeLessThan(0.15)
+
+  // there should be no significant increase after exit starts
+  expect(
+    maxIncrease,
+    `Opacity increased by ${maxIncrease.toFixed(3)} after exit started - indicates snap-back. Frames: ${JSON.stringify(frames.slice(0, 30).map((f) => +f.toFixed(2)))}`
+  ).toBeLessThan(0.15)
+})
+
+test('no transform snap-back when exit triggered during enter animation', async ({
+  page,
+}) => {
+  // start per-frame transform sampling
+  await page.evaluate(() => {
+    ;(window as any).__transformLog = [] as { y: number; scale: number }[]
+    ;(window as any).__rafRunning = true
+    const track = () => {
+      if (!(window as any).__rafRunning) return
+      const el = document.querySelector('[data-testid="click-enter-target"]')
+      if (el) {
+        const transform = getComputedStyle(el).transform
+        let y = 0
+        let scale = 1
+        if (transform && transform !== 'none') {
+          const matrix = new DOMMatrix(transform)
+          y = matrix.m42 // translateY
+          scale = matrix.a // scaleX (assuming uniform)
+        }
+        ;(window as any).__transformLog.push({ y, scale })
+      }
+      requestAnimationFrame(track)
+    }
+    requestAnimationFrame(track)
+  })
+
+  await page.getByTestId('click-enter-show').click()
+  await page.waitForTimeout(80)
+  await page.getByTestId('click-enter-hide').click()
+  await page.waitForTimeout(1500)
+
+  await page.evaluate(() => {
+    ;(window as any).__rafRunning = false
+  })
+
+  const frames: { y: number; scale: number }[] = await page.evaluate(
+    () => (window as any).__transformLog
+  )
+
+  // check for Y-position jumps (snap-back to enterStyle y: -10)
+  let maxYJump = 0
+  for (let i = 1; i < frames.length; i++) {
+    const jump = Math.abs(frames[i].y - frames[i - 1].y)
+    if (jump > maxYJump) maxYJump = jump
+  }
+
+  console.log(
+    'Y positions:',
+    JSON.stringify(frames.slice(0, 30).map((f) => +f.y.toFixed(2)))
+  )
+  console.log(`max Y jump: ${maxYJump.toFixed(2)}`)
+
+  // with smooth animation, max per-frame jump should be small
+  // a snap-back would show a jump of 5+ pixels in one frame
+  expect(
+    maxYJump,
+    `Y position jumped ${maxYJump.toFixed(1)}px in one frame - indicates snap-back to enterStyle`
+  ).toBeLessThan(5)
+})

package/tests/ColorTokenFallback.test.tsx

@@ -0,0 +1,45 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+import { TEST_IDS } from '../src/constants/test-ids'
+
+/**
+ * Tests for GitHub issue #3620: Theme switching broken after v1.132.15
+ *
+ * Color tokens should act as fallbacks - if a theme defines a value for the same key,
+ * the theme value should take precedence over the color token.
+ *
+ * The bug was that Object.assign(theme, colorTokens) was overwriting theme values
+ * with color token values instead of the other way around.
+ */
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ColorTokenFallback', type: 'useCase' })
+})
+
+test('theme value takes precedence over color token', async ({ page }) => {
+  // The light_ColorTokenTest theme defines customRed as #00ff00 (green)
+  // The color token customRed is #ff0000 (red)
+  // The theme value should win, so the background should be green
+  const square = page.locator(`#${TEST_IDS.colorTokenFallbackThemeValue}`)
+  await expect(square).toBeVisible()
+
+  const styles = await getStyles(square)
+  // rgb(0, 255, 0) is #00ff00 (green) - the theme value
+  // rgb(255, 0, 0) would be #ff0000 (red) - the color token value (wrong)
+  expect(styles.backgroundColor).toBe('rgb(0, 255, 0)')
+})
+
+test('color token is used as fallback when theme does not define it', async ({
+  page,
+}) => {
+  // The light_ColorTokenTest theme does NOT define customBlue
+  // The color token customBlue is #0000ff (blue)
+  // The color token should be used as a fallback
+  const square = page.locator(`#${TEST_IDS.colorTokenFallbackTokenValue}`)
+  await expect(square).toBeVisible()
+
+  const styles = await getStyles(square)
+  // rgb(0, 0, 255) is #0000ff (blue) - the color token fallback
+  expect(styles.backgroundColor).toBe('rgb(0, 0, 255)')
+})

package/tests/DOMNodeAPIs.test.tsx

@@ -0,0 +1,161 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+// integration tests for RN 0.82 DOM Node APIs via hanzo-gui component refs
+// verifies that View/Text/ScrollView/Input refs expose the full DOM node API surface
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'DOMNodeAPIs', type: 'useCase' })
+  // wait for results to render
+  await page.waitForSelector('#dom-node-results', { timeout: 5_000 })
+  await page.waitForFunction(
+    () => {
+      const results = document.getElementById('dom-node-results')
+      return results && results.children.length > 5
+    },
+    { timeout: 5_000, polling: 50 }
+  )
+})
+
+async function getResult(page, key: string): Promise<string> {
+  const el = page.locator(`[data-testid="result-${key}"]`)
+  const text = await el.textContent()
+  // format is "key=value"
+  return text?.split('=').slice(1).join('=') ?? ''
+}
+
+// tree traversal
+
+test('parentNode exists on child ref', async ({ page }) => {
+  expect(await getResult(page, 'parentNode-exists')).toBe('true')
+})
+
+test('parentElement exists on child ref', async ({ page }) => {
+  expect(await getResult(page, 'parentElement-exists')).toBe('true')
+})
+
+test('parent.contains(child) returns true', async ({ page }) => {
+  expect(await getResult(page, 'parent-contains-childA')).toBe('true')
+  expect(await getResult(page, 'parent-contains-childB')).toBe('true')
+})
+
+test('child.contains(parent) returns false', async ({ page }) => {
+  expect(await getResult(page, 'childA-contains-parent')).toBe('false')
+})
+
+test('hasChildNodes returns true', async ({ page }) => {
+  expect(await getResult(page, 'hasChildNodes')).toBe('true')
+})
+
+test('childNodes and children have length > 0', async ({ page }) => {
+  const childNodesLen = Number(await getResult(page, 'childNodes-length'))
+  const childrenLen = Number(await getResult(page, 'children-length'))
+  expect(childNodesLen).toBeGreaterThan(0)
+  expect(childrenLen).toBeGreaterThan(0)
+})
+
+test('firstChild and lastChild exist', async ({ page }) => {
+  expect(await getResult(page, 'firstChild-exists')).toBe('true')
+  expect(await getResult(page, 'lastChild-exists')).toBe('true')
+})
+
+test('firstElementChild and lastElementChild exist', async ({ page }) => {
+  expect(await getResult(page, 'firstElementChild-exists')).toBe('true')
+  expect(await getResult(page, 'lastElementChild-exists')).toBe('true')
+})
+
+// sibling traversal
+
+test('nextSibling and previousSibling work', async ({ page }) => {
+  expect(await getResult(page, 'childA-nextSibling-exists')).toBe('true')
+  expect(await getResult(page, 'childB-previousSibling-exists')).toBe('true')
+})
+
+test('nextElementSibling and previousElementSibling work', async ({ page }) => {
+  expect(await getResult(page, 'childA-nextElementSibling-exists')).toBe('true')
+  expect(await getResult(page, 'childB-previousElementSibling-exists')).toBe('true')
+})
+
+// getBoundingClientRect
+
+test('getBoundingClientRect returns full DOMRect', async ({ page }) => {
+  expect(await getResult(page, 'rect-has-width')).toBe('true')
+  expect(await getResult(page, 'rect-has-height')).toBe('true')
+  expect(await getResult(page, 'rect-has-x')).toBe('true')
+  expect(await getResult(page, 'rect-has-y')).toBe('true')
+  expect(await getResult(page, 'rect-has-top')).toBe('true')
+  expect(await getResult(page, 'rect-has-left')).toBe('true')
+  expect(await getResult(page, 'rect-has-right')).toBe('true')
+  expect(await getResult(page, 'rect-has-bottom')).toBe('true')
+})
+
+// document access
+
+test('ownerDocument exists and isConnected is true', async ({ page }) => {
+  expect(await getResult(page, 'ownerDocument-exists')).toBe('true')
+  expect(await getResult(page, 'isConnected')).toBe('true')
+})
+
+test('getElementById via ownerDocument works', async ({ page }) => {
+  expect(await getResult(page, 'getElementById-works')).toBe('true')
+})
+
+// compareDocumentPosition
+
+test('compareDocumentPosition indicates containment', async ({ page }) => {
+  expect(await getResult(page, 'compareDocumentPosition-contained')).toBe('true')
+})
+
+// node properties
+
+test('nodeType is 1 (ELEMENT_NODE)', async ({ page }) => {
+  expect(await getResult(page, 'parent-nodeType')).toBe('1')
+})
+
+test('nodeName exists', async ({ page }) => {
+  expect(await getResult(page, 'parent-nodeName-exists')).toBe('true')
+})
+
+// textContent
+
+test('textContent returns text from Text component', async ({ page }) => {
+  expect(await getResult(page, 'text-textContent')).toBe('hello dom')
+})
+
+// offset properties
+
+test('offsetWidth and offsetHeight are positive', async ({ page }) => {
+  expect(await getResult(page, 'offsetWidth-positive')).toBe('true')
+  expect(await getResult(page, 'offsetHeight-positive')).toBe('true')
+})
+
+test('offsetParent exists', async ({ page }) => {
+  expect(await getResult(page, 'offsetParent-exists')).toBe('true')
+})
+
+// client properties
+
+test('clientWidth and clientHeight are positive', async ({ page }) => {
+  expect(await getResult(page, 'clientWidth-positive')).toBe('true')
+  expect(await getResult(page, 'clientHeight-positive')).toBe('true')
+})
+
+// childElementCount
+
+test('childElementCount is > 0', async ({ page }) => {
+  const count = Number(await getResult(page, 'childElementCount'))
+  expect(count).toBeGreaterThan(0)
+})
+
+// getRootNode
+
+test('getRootNode returns a node', async ({ page }) => {
+  expect(await getResult(page, 'getRootNode-exists')).toBe('true')
+})
+
+// focus/blur
+
+test('focus and blur work on Input ref', async ({ page }) => {
+  expect(await getResult(page, 'focus-works')).toBe('true')
+  expect(await getResult(page, 'blur-works')).toBe('true')
+})

package/tests/DialogFocusScope.animated.test.tsx

@@ -0,0 +1,309 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.describe('Dialog Focus Scope', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'DialogFocusScopeCase', type: 'useCase' })
+  })
+
+  test('traps focus within dialog when modal', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Open the modal dialog
+    const trigger = page.getByTestId('modal-dialog-trigger')
+    await trigger.click()
+
+    // Wait for dialog to be visible
+    const dialogContent = page.getByTestId('modal-dialog-content')
+    await expect(dialogContent).toBeVisible({ timeout: 5000 })
+
+    // Focus should be on the first input
+    // Wait for focus trap to activate (no idle wait now)
+    await page.waitForTimeout(300)
+
+    const firstInput = dialogContent.getByTestId('first-input')
+    await expect(firstInput).toBeFocused()
+
+    // Tab through all focusable elements in order
+    await page.keyboard.press('Tab')
+    const secondInput = dialogContent.getByTestId('second-input')
+    await expect(secondInput).toBeFocused()
+
+    await page.keyboard.press('Tab')
+    const emailInput = dialogContent.getByTestId('email-input')
+    await expect(emailInput).toBeFocused()
+
+    await page.keyboard.press('Tab')
+    const countrySelect = dialogContent.getByTestId('country-select')
+    await expect(countrySelect).toBeFocused()
+
+    await page.keyboard.press('Tab')
+    const commentsTextarea = dialogContent.getByTestId('comments-textarea')
+    await expect(commentsTextarea).toBeFocused()
+
+    await page.keyboard.press('Tab')
+    const termsCheckbox = dialogContent.getByTestId('terms-checkbox')
+    await expect(termsCheckbox).toBeFocused()
+
+    await page.keyboard.press('Tab')
+    const cancelButton = dialogContent.getByTestId('cancel-button')
+    await expect(cancelButton).toBeFocused()
+
+    await page.keyboard.press('Tab')
+    const saveButton = dialogContent.getByTestId('save-button')
+    await expect(saveButton).toBeFocused()
+
+    // Tab should wrap back to first input (loop)
+    await page.keyboard.press('Tab')
+    await expect(firstInput).toBeFocused()
+
+    // Shift+Tab should go backwards and loop - from first input to last button
+    await page.keyboard.press('Shift+Tab')
+    await expect(saveButton).toBeFocused()
+
+    await page.keyboard.press('Shift+Tab')
+    await expect(cancelButton).toBeFocused()
+
+    // Close dialog with Escape key instead of clicking
+    await page.keyboard.press('Escape')
+    await expect(dialogContent).not.toBeVisible()
+
+    // Focus should return to trigger
+    await expect(trigger).toBeFocused()
+  })
+
+  test('does not trap focus when non-modal', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Open the non-modal dialog
+    const trigger = page.getByTestId('non-modal-dialog-trigger')
+    await trigger.click()
+
+    // Wait for dialog to be visible
+    const dialogContent = page.getByTestId('non-modal-dialog-content')
+    await expect(dialogContent).toBeVisible({ timeout: 5000 })
+
+    // Focus on the first input
+    const firstInput = dialogContent.getByTestId('first-input')
+    await firstInput.focus()
+    await expect(firstInput).toBeFocused()
+
+    // Tab should allow focus to leave the dialog
+    await page.keyboard.press('Tab')
+    await page.keyboard.press('Tab')
+    await page.keyboard.press('Tab')
+    await page.keyboard.press('Tab')
+    await page.keyboard.press('Tab') // Tab past all dialog elements
+
+    // Focus should have left the dialog
+    const focusedElement = await page.evaluate(() => document.activeElement?.tagName)
+    expect(focusedElement).toBeTruthy()
+
+    // Click outside should close non-modal dialog
+    await page.click('body', { position: { x: 10, y: 10 } })
+    await expect(dialogContent).not.toBeVisible()
+  })
+
+  test('modal dialogs prevent right-click dismiss but allow left-click dismiss', async ({
+    page,
+  }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Open a modal dialog
+    const trigger = page.getByTestId('modal-dialog-trigger')
+    await trigger.click()
+
+    const dialogContent = page.getByTestId('modal-dialog-content')
+    await expect(dialogContent).toBeVisible({ timeout: 5000 })
+
+    // Wait for auto-focus
+    await page.waitForTimeout(300)
+
+    // Try to right-click outside the dialog - should NOT close
+    const dialogBounds = await dialogContent.boundingBox()
+
+    if (dialogBounds) {
+      // Right-click to the left of the dialog (on overlay/backdrop)
+      await page.mouse.click(dialogBounds.x - 50, dialogBounds.y + 50, {
+        button: 'right',
+      })
+    }
+
+    // Wait a bit
+    await page.waitForTimeout(500)
+
+    // Modal dialogs prevent right-click dismiss
+    await expect(dialogContent).toBeVisible()
+
+    // Now try left-click - should close
+    if (dialogBounds) {
+      await page.mouse.click(dialogBounds.x - 50, dialogBounds.y + 50, { button: 'left' })
+    }
+
+    // Wait for dialog to close
+    await page.waitForTimeout(500)
+
+    // Dialog should be closed after left-click
+    await expect(dialogContent).not.toBeVisible()
+  })
+
+  test('auto-focuses first element on mount', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('modal-dialog-trigger')
+    await trigger.click()
+
+    const dialogContent = page.getByTestId('modal-dialog-content')
+    await expect(dialogContent).toBeVisible({ timeout: 5000 })
+
+    // Wait for auto-focus
+    await page.waitForTimeout(300)
+
+    // First input should be focused
+    const firstInput = dialogContent.getByTestId('first-input')
+    await expect(firstInput).toBeFocused()
+  })
+
+  test('returns focus to trigger on close', async ({ page }) => {
+    // note: test may be flaky if animations don't complete
+    // Manual testing shows the focus return works correctly
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('modal-dialog-trigger')
+    await trigger.click()
+
+    const dialogContent = page.getByTestId('modal-dialog-content')
+    await expect(dialogContent).toBeVisible({ timeout: 5000 })
+
+    // Wait for animations to complete
+    await page.waitForTimeout(500)
+
+    // Click cancel button via JavaScript (since it may be outside viewport in dialog scroll container)
+    await page.evaluate(() => {
+      const button = document.querySelector(
+        '[data-testid="cancel-button"]'
+      ) as HTMLElement
+      if (button) button.click()
+    })
+
+    // Wait for dialog to close with animation
+    await expect(dialogContent).not.toBeVisible({ timeout: 5000 })
+
+    // Focus should return to trigger
+    await expect(trigger).toBeFocused({ timeout: 5000 })
+  })
+
+  test('handles nested dialogs focus correctly', async ({ page }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Open parent dialog
+    const parentTrigger = page.getByTestId('parent-dialog-trigger')
+    await parentTrigger.click()
+
+    const parentDialog = page.getByTestId('parent-dialog-content')
+    await expect(parentDialog).toBeVisible({ timeout: 5000 })
+
+    // Open nested dialog
+    const nestedTrigger = parentDialog.getByTestId('nested-dialog-trigger')
+    await nestedTrigger.click()
+
+    const nestedDialog = page.getByTestId('nested-dialog-content')
+    await expect(nestedDialog).toBeVisible({ timeout: 5000 })
+
+    // Focus should be trapped in nested dialog
+    await page.waitForTimeout(300)
+    const nestedInput = nestedDialog.getByTestId('nested-input')
+    await expect(nestedInput).toBeFocused()
+
+    // Tab should stay within nested dialog
+    await page.keyboard.press('Tab')
+    const nestedButton = nestedDialog.getByTestId('nested-close-button')
+    await expect(nestedButton).toBeFocused()
+
+    await page.keyboard.press('Tab')
+    await expect(nestedInput).toBeFocused() // Should loop back
+
+    // Close nested dialog
+    await nestedButton.click()
+    await expect(nestedDialog).not.toBeVisible()
+
+    // Focus should return to nested trigger in parent dialog
+    await expect(nestedTrigger).toBeFocused()
+
+    // Close parent dialog
+    const parentClose = parentDialog.getByTestId('parent-close-button')
+    await parentClose.click()
+    await expect(parentDialog).not.toBeVisible()
+
+    // Focus should return to parent trigger
+    await expect(parentTrigger).toBeFocused()
+  })
+
+  test('nested dialog appears above parent dialog (z-index stacking)', async ({
+    page,
+  }) => {
+    await page.waitForLoadState('networkidle')
+
+    // Open parent dialog
+    const parentTrigger = page.getByTestId('parent-dialog-trigger')
+    await parentTrigger.click()
+
+    const parentDialog = page.getByTestId('parent-dialog-content')
+    await expect(parentDialog).toBeVisible({ timeout: 5000 })
+
+    // Open nested dialog
+    const nestedTrigger = parentDialog.getByTestId('nested-dialog-trigger')
+    await nestedTrigger.click()
+
+    const nestedDialog = page.getByTestId('nested-dialog-content')
+    await expect(nestedDialog).toBeVisible({ timeout: 5000 })
+
+    // Wait for animations to complete
+    await page.waitForTimeout(500)
+
+    // Get the z-index values of both dialog portal containers
+    // GuiRoot wraps portal content in Theme > span, so z-index is on the inner span
+    const zIndexInfo = await page.evaluate(() => {
+      const portals = document.querySelectorAll('span[style*="z-index"]')
+      const zIndices: number[] = []
+
+      portals.forEach((portal) => {
+        const style = window.getComputedStyle(portal)
+        const zIndex = parseInt(style.zIndex, 10)
+        if (!isNaN(zIndex)) {
+          zIndices.push(zIndex)
+        }
+      })
+
+      return zIndices.sort((a, b) => a - b)
+    })
+
+    // Should have at least 2 different z-index values
+    expect(zIndexInfo.length).toBeGreaterThanOrEqual(2)
+
+    // The nested dialog should have a higher z-index than the parent
+    // The last z-index should be higher than the first
+    const parentZIndex = zIndexInfo[0]
+    const nestedZIndex = zIndexInfo[zIndexInfo.length - 1]
+
+    expect(nestedZIndex).toBeGreaterThan(parentZIndex)
+
+    // Additionally verify that the nested dialog is visually on top by checking
+    // what element is at the center of the nested dialog
+    const nestedBounds = await nestedDialog.boundingBox()
+    if (nestedBounds) {
+      const centerX = nestedBounds.x + nestedBounds.width / 2
+      const centerY = nestedBounds.y + nestedBounds.height / 2
+
+      const elementAtPoint = await page.evaluate(
+        ({ x, y }) => {
+          const el = document.elementFromPoint(x, y)
+          return el?.closest('[data-testid="nested-dialog-content"]') !== null
+        },
+        { x: centerX, y: centerY }
+      )
+
+      expect(elementAtPoint).toBe(true)
+    }
+  })
+})