@hanzogui/kitchen-sink 3.0.5

package/tests/SheetSnapPointsFit.animated.test.tsx

@@ -0,0 +1,259 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'SheetSnapPointsFitCase', type: 'useCase' })
+})
+
+test.describe('Sheet snapPointsMode="fit"', () => {
+  test('standalone sheet with fit mode opens and closes without issues', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('standalone-fit-trigger')
+    const frame = page.getByTestId('standalone-fit-frame')
+    const closeButton = page.getByTestId('standalone-fit-close')
+
+    // Initial state - sheet should not be visible
+    await expect(trigger).toBeVisible()
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+
+    // Open the sheet
+    await trigger.click()
+
+    // Wait for sheet to be visible
+    await expect(frame).toBeVisible({ timeout: 5000 })
+
+    // Close the sheet
+    await closeButton.click()
+
+    // Wait for animation to complete
+    await page.waitForTimeout(500)
+
+    // Sheet should not be visible
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+  })
+
+  test('standalone sheet with percent mode opens and closes without issues', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('standalone-percent-trigger')
+    const frame = page.getByTestId('standalone-percent-frame')
+    const closeButton = page.getByTestId('standalone-percent-close')
+
+    await expect(trigger).toBeVisible()
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+
+    await closeButton.click()
+    await page.waitForTimeout(500)
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+  })
+
+  test('standalone sheet with constant mode opens and closes without issues', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('standalone-constant-trigger')
+    const frame = page.getByTestId('standalone-constant-frame')
+    const closeButton = page.getByTestId('standalone-constant-close')
+
+    await expect(trigger).toBeVisible()
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+
+    await closeButton.click()
+    await page.waitForTimeout(500)
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+  })
+
+  test('rapid open/close interactions work correctly', async ({ page }) => {
+    const trigger = page.getByTestId('rapid-toggle-trigger')
+    const frame = page.getByTestId('rapid-frame')
+    const closeButton = page.getByTestId('rapid-close')
+
+    await expect(trigger).toBeVisible()
+
+    // Open the sheet
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+
+    // Close and reopen rapidly a few times using the close button
+    for (let i = 0; i < 3; i++) {
+      await closeButton.click()
+      await page.waitForTimeout(300) // Wait for close animation
+      await trigger.click()
+      await expect(frame).toBeVisible({ timeout: 5000 })
+    }
+
+    // Final close
+    await closeButton.click()
+    await page.waitForTimeout(500)
+
+    // Sheet should be closed now
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+  })
+
+  test('dynamic content changes while sheet is open', async ({ page }) => {
+    const trigger = page.getByTestId('dynamic-content-trigger')
+    const frame = page.getByTestId('dynamic-content-frame')
+    const closeButton = page.getByTestId('dynamic-content-close')
+    const sizeText = page.getByTestId('dynamic-content-size')
+    const smallButton = page.getByTestId('dynamic-content-small')
+    const mediumButton = page.getByTestId('dynamic-content-medium')
+    const largeButton = page.getByTestId('dynamic-content-large')
+
+    // Open the sheet
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+
+    // Initial size should be small
+    await expect(sizeText).toContainText('small')
+
+    // Get initial frame height
+    const initialBox = await frame.boundingBox()
+    const initialHeight = initialBox?.height ?? 0
+
+    // Change to medium content
+    await mediumButton.click()
+    await expect(sizeText).toContainText('medium')
+    await page.waitForTimeout(300) // Wait for resize animation
+
+    // Get medium frame height - should be larger
+    const mediumBox = await frame.boundingBox()
+    const mediumHeight = mediumBox?.height ?? 0
+    expect(mediumHeight).toBeGreaterThan(initialHeight)
+
+    // Change to large content
+    await largeButton.click()
+    await expect(sizeText).toContainText('large')
+    await page.waitForTimeout(300)
+
+    // Get large frame height - should be even larger
+    const largeBox = await frame.boundingBox()
+    const largeHeight = largeBox?.height ?? 0
+    expect(largeHeight).toBeGreaterThan(mediumHeight)
+
+    // Change back to small
+    await smallButton.click()
+    await expect(sizeText).toContainText('small')
+    await page.waitForTimeout(300)
+
+    // Close the sheet - this is the key test for the white flash fix
+    // The sheet should close from its current height without flashing to full viewport
+    await closeButton.click()
+    await page.waitForTimeout(500)
+
+    // Sheet should be closed
+    await expect(frame).not.toBeInViewport({ ratio: 0.5 })
+  })
+
+  test('sheet closes without white flash - frame height stays stable during close', async ({
+    page,
+  }) => {
+    const trigger = page.getByTestId('standalone-fit-trigger')
+    const frame = page.getByTestId('standalone-fit-frame')
+    const closeButton = page.getByTestId('standalone-fit-close')
+
+    // Open the sheet
+    await trigger.click()
+    await expect(frame).toBeVisible({ timeout: 5000 })
+
+    // Get the frame height when open
+    const openBox = await frame.boundingBox()
+    const openHeight = openBox?.height ?? 0
+
+    // The height should be reasonable (not full viewport)
+    // For a fit mode sheet with minimal content, it should be less than half viewport
+    const viewportSize = page.viewportSize()
+    const viewportHeight = viewportSize?.height ?? 768
+    expect(openHeight).toBeLessThan(viewportHeight * 0.6)
+
+    // Close the sheet and check that height doesn't spike
+    await closeButton.click()
+
+    // Monitor frame height during close animation
+    // The fix prevents the frame from expanding to full viewport during close
+    let maxHeightDuringClose = openHeight
+    for (let i = 0; i < 5; i++) {
+      await page.waitForTimeout(100)
+      const box = await frame.boundingBox()
+      if (box) {
+        maxHeightDuringClose = Math.max(maxHeightDuringClose, box.height)
+      }
+    }
+
+    // The max height during close should not be significantly larger than when open
+    // This verifies the fix for the white flash issue (expanding to full viewport)
+    // Allow some tolerance for animation overshoot
+    expect(maxHeightDuringClose).toBeLessThan(openHeight * 1.5)
+  })
+})
+
+test.describe('Adapted Dialog Sheet', () => {
+  // TODO: This test is flaky in CI - the adaptation may not trigger reliably at 500px
+  // The core functionality is tested by other Sheet tests
+  test.skip('dialog adapts to sheet on small screens and closes properly', async ({
+    page,
+  }) => {
+    // Set viewport to small size to trigger adaptation
+    await page.setViewportSize({ width: 500, height: 800 })
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('adapted-dialog-trigger')
+    const sheetFrame = page.getByTestId('adapted-sheet-frame')
+    const dialogContent = page.getByTestId('adapted-dialog-content')
+
+    await expect(trigger).toBeVisible()
+
+    // Open - should show as sheet on small viewport
+    await trigger.click()
+    await page.waitForTimeout(500)
+
+    // On small viewport, should be adapted to sheet
+    const isSheetVisible = await sheetFrame.isVisible()
+    const isDialogVisible = await dialogContent.isVisible()
+
+    // At least one should be visible (either adapted sheet or dialog)
+    expect(isSheetVisible || isDialogVisible).toBe(true)
+
+    // Close via close button (works in both sheet and dialog mode via Adapt.Contents)
+    const closeButton = page.getByTestId('adapted-dialog-close')
+    await closeButton.click()
+    await page.waitForTimeout(500)
+
+    // Should be closed - sheet frame should not be in viewport
+    // Note: dialogContent may still be in DOM but the sheet frame should be off-screen
+    await expect(sheetFrame).not.toBeInViewport({ ratio: 0.5 })
+  })
+
+  test('dialog shows as dialog on large screens', async ({ page }) => {
+    // Set viewport to large size - no adaptation
+    await page.setViewportSize({ width: 1200, height: 800 })
+    await page.reload()
+    await page.waitForLoadState('networkidle')
+
+    const trigger = page.getByTestId('adapted-dialog-trigger')
+    const dialogContent = page.getByTestId('adapted-dialog-content')
+    const closeButton = page.getByTestId('adapted-dialog-close')
+
+    await expect(trigger).toBeVisible()
+
+    // Open - should show as dialog on large viewport
+    await trigger.click()
+    await page.waitForTimeout(500)
+
+    // Dialog content should be visible
+    await expect(dialogContent).toBeVisible()
+
+    // Close
+    await closeButton.click()
+    await page.waitForTimeout(500)
+
+    // Should be closed
+    await expect(dialogContent).not.toBeVisible()
+  })
+})

package/tests/ShorthandVariables.test.tsx

@@ -0,0 +1,44 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'ShorthandVariables', type: 'useCase' })
+})
+
+test(`boxShadow with $variable resolves correctly`, async ({ page }) => {
+  const element = page.locator('#boxshadow-var')
+  const styles = await getStyles(element)
+
+  // Should have boxShadow with resolved color (not containing $)
+  expect(styles.boxShadow).toBeDefined()
+  expect(styles.boxShadow).not.toContain('$')
+  expect(styles.boxShadow).toContain('0px 0px 10px')
+})
+
+test(`boxShadow with multiple $variables resolves correctly`, async ({ page }) => {
+  const element = page.locator('#boxshadow-multi')
+  const styles = await getStyles(element)
+
+  // Should have boxShadow with multiple shadows, both colors resolved
+  expect(styles.boxShadow).toBeDefined()
+  expect(styles.boxShadow).not.toContain('$')
+  expect(styles.boxShadow).toContain(',') // Multiple shadows separated by comma
+})
+
+test(`border with $variable resolves correctly`, async ({ page }) => {
+  const element = page.locator('#border-var')
+  const styles = await getStyles(element)
+
+  // border expands to individual props, check one of them
+  expect(styles.borderTopColor || styles.borderColor).toBeDefined()
+  expect(styles.borderTopWidth || styles.borderWidth).toBeDefined()
+})
+
+test(`boxShadow without variables passes through unchanged`, async ({ page }) => {
+  const element = page.locator('#boxshadow-plain')
+  const styles = await getStyles(element)
+
+  expect(styles.boxShadow).toBe('rgba(0, 0, 0, 0.2) 0px 0px 10px 0px')
+})

package/tests/SpinnerCustomColors.test.tsx

@@ -0,0 +1,67 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'SpinnerCustomColors', type: 'useCase' })
+})
+
+test('custom color tokens are applied to spinners', async ({ page }) => {
+  // Test custom red spinner - check the circle element's stroke
+  const redSpinnerStyle = page.locator('#spinner-custom-red circle').first()
+  const redSpinnerStroke = (await getStyles(redSpinnerStyle)).stroke
+  expect(redSpinnerStroke).toBe('rgb(255, 0, 0)')
+
+  // Test custom blue spinner
+  const blueSpinnerStyle = page.locator('#spinner-custom-blue circle').first()
+  const blueSpinnerStroke = (await getStyles(blueSpinnerStyle)).stroke
+  expect(blueSpinnerStroke).toBe('rgb(0, 0, 255)')
+
+  // Test custom green spinner
+  const greenSpinnerStyle = page.locator('#spinner-custom-green circle').first()
+  const greenSpinnerStroke = (await getStyles(greenSpinnerStyle)).stroke
+  expect(greenSpinnerStroke).toBe('rgb(0, 255, 0)')
+
+  // Test testsomethingdifferent custom color
+  const testDifferentStyle = page.locator('#spinner-test-different circle').first()
+  const testDifferentStroke = (await getStyles(testDifferentStyle)).stroke
+  expect(testDifferentStroke).toBe('rgb(255, 0, 0)') // testsomethingdifferent is also red (#ff0000)
+})
+
+test('custom color tokens are available in themes', async ({ page }) => {
+  // Verify that custom colors are used through CSS variables
+  const customColorVariables = await page.evaluate(() => {
+    // Check that the CSS variables exist and have correct values
+    const rootStyles = window.getComputedStyle(document.documentElement)
+    return {
+      customRed: rootStyles.getPropertyValue('--c-color-customRed').trim(),
+      customBlue: rootStyles.getPropertyValue('--c-color-customBlue').trim(),
+      customGreen: rootStyles.getPropertyValue('--c-color-customGreen').trim(),
+    }
+  })
+
+  // Verify CSS variables exist
+  expect(customColorVariables.customRed).toBe('#ff0000')
+  expect(customColorVariables.customBlue).toBe('#0000ff')
+  expect(customColorVariables.customGreen).toBe('#00ff00')
+})
+
+test('custom color tokens have correct CSS variables', async ({ page }) => {
+  // Check that CSS variables are created for custom colors
+  const cssVariables = await page.evaluate(() => {
+    const rootStyles = window.getComputedStyle(document.documentElement)
+    return {
+      customRed: rootStyles.getPropertyValue('--c-color-customRed').trim(),
+      customBlue: rootStyles.getPropertyValue('--c-color-customBlue').trim(),
+      customGreen: rootStyles.getPropertyValue('--c-color-customGreen').trim(),
+      testDifferent: rootStyles
+        .getPropertyValue('--c-color-testsomethingdifferent')
+        .trim(),
+    }
+  })
+
+  expect(cssVariables.customRed).toBe('#ff0000')
+  expect(cssVariables.customBlue).toBe('#0000ff')
+  expect(cssVariables.customGreen).toBe('#00ff00')
+  expect(cssVariables.testDifferent).toBe('#ff0000')
+})

package/tests/StackZIndex.test.tsx

@@ -0,0 +1,51 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StackZIndex', type: 'useCase' })
+})
+
+// find the portal wrapper's z-index by looking for the ancestor with
+// position:fixed + inline z-index (portal wrappers use inline styles)
+function makeGetZIndexOf(page: any) {
+  return async function getZIndexOf(selector: string) {
+    return await page.locator(selector).evaluate((el: Element) => {
+      let current: Element | null = el
+      while (current && current instanceof HTMLElement) {
+        if (current.style.position === 'fixed' && current.style.zIndex) {
+          return Number.parseInt(current.style.zIndex, 10)
+        }
+        current = current.parentElement
+      }
+      throw new Error(`no portal z-index found`)
+    })
+  }
+}
+
+test(`dialogs and portals stack their z-index automatically`, async ({ page }) => {
+  const getZIndexOf = makeGetZIndexOf(page)
+
+  const [a, b, c] = await Promise.all([
+    getZIndexOf('#bottom-popover'),
+    getZIndexOf('#middle-dialog'),
+    getZIndexOf('#top-popover'),
+  ])
+
+  expect(c).toBeGreaterThan(b)
+  expect(b).toBeGreaterThan(a)
+})
+
+test(`harcoded z-index overrides stacking z-index`, async ({ page }) => {
+  const getZIndexOf = makeGetZIndexOf(page)
+
+  const [a, b, c] = await Promise.all([
+    getZIndexOf('#hardcoded-popover'),
+    getZIndexOf('#hardcoded-dialog'),
+    getZIndexOf('#above-hardcoded-dialog'),
+  ])
+
+  expect(a).toBe(200_000)
+  expect(b).toBe(300_000)
+  expect(c).toBe(300_001)
+})

package/tests/StressPagePerf.test.tsx

@@ -0,0 +1,76 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Performance profiling test for the StressPage.
+ *
+ * Measures render time of a diverse page with ~200+ Hanzo GUI components.
+ * Captures both wall-clock render time (performance.mark/measure) and
+ * internal @hanzogui/timer breakdown (getSplitStyles, createComponent checkpoints).
+ *
+ * Run:
+ *   npx playwright test tests/StressPagePerf.test.tsx --project=default
+ */
+
+const RUNS = 10
+
+test('StressPage render profiling', async ({ page }) => {
+  const times: number[] = []
+  let lastBreakdown: Record<string, number> | null = null
+
+  for (let i = 0; i < RUNS; i++) {
+    await setupPage(page, {
+      name: 'StressPage',
+      type: 'useCase',
+      searchParams: { profile: 'true' },
+    })
+
+    await page.waitForFunction(() => (window as any).__PERF_RESULT__, {
+      timeout: 10_000,
+    })
+
+    const result = await page.evaluate(() => (window as any).__PERF_RESULT__)
+    times.push(result.renderMs)
+    if (result.breakdown) {
+      lastBreakdown = result.breakdown
+    }
+  }
+
+  const sorted = [...times].sort((a, b) => a - b)
+  const median = sorted[Math.floor(sorted.length / 2)]
+  const mean = Math.round((times.reduce((a, b) => a + b, 0) / times.length) * 10) / 10
+  const min = sorted[0]
+  const max = sorted[sorted.length - 1]
+  const trimmed = sorted.slice(1, -1)
+  const trimmedMean =
+    Math.round((trimmed.reduce((a, b) => a + b, 0) / trimmed.length) * 10) / 10
+
+  console.log(`\n=== StressPage Render Profile (${RUNS} runs) ===`)
+  console.log(`  All: ${times.map((t) => t.toFixed(1) + 'ms').join(', ')}`)
+  console.log(`  Mean: ${mean}ms | Trimmed Mean: ${trimmedMean}ms | Median: ${median}ms`)
+  console.log(`  Min: ${min}ms | Max: ${max}ms`)
+
+  if (lastBreakdown) {
+    console.log(`\n  --- Internal Breakdown (last run) ---`)
+    let propTotal = 0
+    const entries = Object.entries(lastBreakdown).filter(([k]) => !k.endsWith('(ignore)'))
+    const phases: [string, number][] = []
+    for (const [label, totalMs] of entries) {
+      if (label.startsWith('before-prop-')) {
+        propTotal += totalMs
+      } else {
+        phases.push([label, totalMs])
+      }
+    }
+    phases.push(['before-prop-* (all props)', propTotal])
+    phases.sort((a, b) => b[1] - a[1])
+    for (const [label, totalMs] of phases) {
+      if (totalMs < 0.05) continue
+      console.log(`  ${label.padStart(35)} | ${totalMs.toFixed(1)}ms`)
+    }
+  }
+
+  console.log(`================================================\n`)
+
+  expect(median).toBeGreaterThan(0)
+})

package/tests/StylePlatform.test.tsx

@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StylePlatform', type: 'useCase' })
+})
+
+test(`styles: $platform-web styles work`, async ({ page }) => {
+  const view = page.locator('#style-platform')
+
+  const styles = await view.evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(styles.marginTop).toBe(`10px`)
+  expect(styles.marginBottom).toBe(`10px`)
+  expect(styles.backgroundColor).toBe(`rgb(255, 0, 0)`)
+  expect(styles.overflowY).toBe(`scroll`)
+})
+
+test(`styles: $platform-web hoverStyle works`, async ({ page }) => {
+  const view = page.locator('#style-platform-hover')
+
+  // Before hover: should be blue (base backgroundColor)
+  const baseStyles = await view.evaluate((el) => {
+    return window.getComputedStyle(el).backgroundColor
+  })
+  expect(baseStyles).toBe(`rgb(0, 0, 255)`)
+
+  // Hover: should be green ($platform-web hoverStyle overrides base hoverStyle)
+  await view.hover()
+  await page.waitForTimeout(100)
+
+  const hoverStyles = await view.evaluate((el) => {
+    return window.getComputedStyle(el).backgroundColor
+  })
+  expect(hoverStyles).toBe(`rgb(0, 128, 0)`)
+})

package/tests/StyleProp.test.tsx

@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyleProp', type: 'useCase' })
+})
+
+test(`style prop flattens`, async ({ page }) => {
+  expect((await getStyles(page.getByTestId('style-prop').first())).background).toBe(
+    `rgba(0, 0, 0, 0) radial-gradient(rgb(143, 143, 143), rgba(0, 0, 0, 0) 70%) repeat scroll 0% 0% / auto padding-box border-box`
+  )
+})
+
+test(`className prop flattens`, async ({ page }) => {
+  expect((await getStyles(page.getByTestId('class-name').first())).backgroundColor).toBe(
+    `rgb(255, 0, 0)`
+  )
+})

package/tests/StyledAnchor.test.tsx

@@ -0,0 +1,17 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledAnchor', type: 'useCase' })
+})
+
+test(`styled anchor passes non-styled attributes through`, async ({ page }) => {
+  const anchor = page.getByTestId('test-anchor')
+  expect(await anchor.getAttribute('target')).toBe('_blank')
+  expect(await anchor.getAttribute('href')).toBe('https://gui.hanzo.ai/test-link')
+
+  const anchor2 = page.getByTestId('test-anchor2')
+  expect(await anchor2.getAttribute('target')).toBe('_blank')
+  expect(await anchor2.getAttribute('href')).toBe('https://gui.hanzo.ai/test-link')
+})

package/tests/StyledButtonTheme.test.tsx

@@ -0,0 +1,22 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledButtonTheme', type: 'useCase' })
+})
+
+test(`button + styled + styleable + theme works`, async ({ page }) => {
+  const styles = await page.locator('#test').evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  // Green theme background from themeDev (desaturated green)
+  expect(styles.backgroundColor).toBe(`rgb(219, 235, 224)`)
+
+  const styles2 = await page.locator('#test2').evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  expect(styles2.backgroundColor).toBe(`rgb(0, 0, 0)`)
+})

package/tests/StyledButtonVariantPseudo.test.tsx

@@ -0,0 +1,20 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getHoverStyle, getPressStyle } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledButtonVariantPseudo', type: 'useCase' })
+})
+
+test(`hover HOC + variant + pseudos work`, async ({ page }) => {
+  const button = page.locator('button#test')
+  const hoverStyles = await getHoverStyle(button)
+  expect(hoverStyles.backgroundColor).toBe(`rgb(0, 128, 0)`)
+})
+
+test(`press HOC + variant + pseudos work`, async ({ page }) => {
+  const button = page.locator('button')
+  const pressStyles = await getPressStyle(button, { delay: 3000 })
+  expect(pressStyles.backgroundColor).toBe(`rgb(255, 0, 0)`)
+})

package/tests/StyledButtonVariantPseudoMerge.animated.test.tsx

@@ -0,0 +1,33 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getPressStyle } from './utils'
+
+// These tests only run with CSS driver
+test.beforeEach(async ({ page }, testInfo) => {
+  const driver = (testInfo.project?.metadata as any)?.animationDriver
+  test.skip(driver !== 'css', `skipping for ${driver} driver`)
+
+  await setupPage(page, { name: 'StyledButtonVariantPseudoMerge', type: 'useCase' })
+})
+
+test(`pseudo + variant with pseudo should merge`, async ({ page }) => {
+  const button = page.locator('button#test')
+  const pressStyles = await getPressStyle(button, { delay: 3000 })
+  expect(pressStyles.backgroundColor).toBe(`rgb(255, 0, 0)`)
+  expect(pressStyles.transform).toBe(`matrix(0.5, 0, 0, 0.5, 0, 0)`)
+})
+
+test(`animation + pseudo + variant with pseudo should merge`, async ({ page }) => {
+  const button = page.locator('#animated')
+  const pressStyles = await getPressStyle(button, { delay: 3000 })
+  expect(pressStyles.backgroundColor).toBe(`rgb(255, 0, 0)`)
+  expect(pressStyles.transform).toBe(`matrix(0.5, 0, 0, 0.5, 0, 0)`)
+})
+
+test(`styled without variants HOC of HOC + pseudo`, async ({ page }) => {
+  const button = page.locator('#double-styled')
+  const pressStyles = await getPressStyle(button, { delay: 3000 })
+  expect(pressStyles.backgroundColor).toBe(`rgb(255, 0, 0)`)
+  expect(pressStyles.transform).toBe(`matrix(0.5, 0, 0, 0.5, 0, 0)`)
+})

package/tests/StyledCheckboxTheme.test.tsx

@@ -0,0 +1,16 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'StyledCheckboxTheme', type: 'useCase' })
+})
+
+test(`theme passes through .styleable HOC`, async ({ page }) => {
+  const styles = await page.locator('button[role=checkbox]').evaluate((el) => {
+    return window.getComputedStyle(el)
+  })
+
+  // Green theme background from themeDev
+  expect(styles.backgroundColor).toBe(`rgb(232, 242, 235)`)
+})