@hanzogui/kitchen-sink 3.0.5

package/tests/TransformMediaQueryMerge.test.tsx

@@ -0,0 +1,104 @@
+import { expect, test } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * Regression tests for transform media query merging bug
+ *
+ * Bug: When a media query sets transform props like `x`, it should OVERWRITE
+ * the base value, not be CUMULATIVE (added together).
+ *
+ * Example:
+ * - Base: x={-100}
+ * - $sm: { x: 50 }
+ * - Expected at $sm: x = 50 (overwrite)
+ * - Bug behavior: x = -50 (cumulative: -100 + 50)
+ */
+
+test.describe('Transform Media Query Merge', () => {
+  test.beforeEach(async ({ page }) => {
+    await setupPage(page, { name: 'TransformMediaQueryMerge', type: 'useCase' })
+  })
+
+  // Helper to extract translateX from transform
+  async function getTranslateX(page: any, testId: string): Promise<number> {
+    return page.evaluate((id: string) => {
+      const el = document.querySelector(`[data-testid="${id}"]`)
+      if (!el) return NaN
+      const transform = getComputedStyle(el).transform
+      if (transform === 'none') return 0
+
+      // Handle matrix(a, b, c, d, tx, ty) format
+      const matrixMatch = transform.match(/matrix\(([^)]+)\)/)
+      if (matrixMatch) {
+        const values = matrixMatch[1].split(',').map((v: string) => parseFloat(v.trim()))
+        return values[4] || 0
+      }
+      return 0
+    }, testId)
+  }
+
+  test('base transform values apply at large viewport', async ({ page }) => {
+    await page.setViewportSize({ width: 1200, height: 800 })
+    await page.waitForTimeout(300)
+
+    // Test 1: styled() component with x=-100 base
+    const x1 = await getTranslateX(page, 'test1')
+    expect(x1, 'styled component base x=-100').toBeCloseTo(-100, 0)
+
+    // Test 3: runtime prop with x=-75 base
+    const x3 = await getTranslateX(page, 'test3')
+    expect(x3, 'runtime prop base x=-75').toBeCloseTo(-75, 0)
+  })
+
+  test('media query x OVERWRITES base value (not cumulative)', async ({ page }) => {
+    // Set viewport to $sm breakpoint
+    await page.setViewportSize({ width: 600, height: 800 })
+    await page.waitForTimeout(300)
+
+    // Test 1: styled() with base x=-100, $sm: x=50
+    // If cumulative (bug): x = -100 + 50 = -50
+    // If overwrite (correct): x = 50
+    const x1 = await getTranslateX(page, 'test1')
+    expect(x1, 'styled $sm x should OVERWRITE to 50, not cumulate to -50').toBeCloseTo(
+      50,
+      0
+    )
+  })
+
+  test('runtime prop media query x OVERWRITES base value', async ({ page }) => {
+    await page.setViewportSize({ width: 600, height: 800 })
+    await page.waitForTimeout(300)
+
+    // Test 3: runtime prop with base x=-75, $sm: x=75
+    // If cumulative (bug): x = -75 + 75 = 0
+    // If overwrite (correct): x = 75
+    const x3 = await getTranslateX(page, 'test3')
+    expect(x3, 'runtime $sm x should OVERWRITE to 75, not cumulate to 0').toBeCloseTo(
+      75,
+      0
+    )
+  })
+
+  test('viewport resize updates transform correctly', async ({ page }) => {
+    // Start large - should have base value
+    await page.setViewportSize({ width: 1200, height: 800 })
+    await page.waitForTimeout(300)
+
+    let x1 = await getTranslateX(page, 'test1')
+    expect(x1, 'large viewport: x=-100').toBeCloseTo(-100, 0)
+
+    // Resize to small - should overwrite to media query value
+    await page.setViewportSize({ width: 600, height: 800 })
+    await page.waitForTimeout(300)
+
+    x1 = await getTranslateX(page, 'test1')
+    expect(x1, 'small viewport: x should be 50 (overwrite)').toBeCloseTo(50, 0)
+
+    // Resize back to large - should return to base value
+    await page.setViewportSize({ width: 1200, height: 800 })
+    await page.waitForTimeout(300)
+
+    x1 = await getTranslateX(page, 'test1')
+    expect(x1, 'back to large: x=-100').toBeCloseTo(-100, 0)
+  })
+})

package/tests/TransitionEnterExit.animated.test.tsx

@@ -0,0 +1,311 @@
+import { expect, test, type Page } from '@playwright/test'
+import { setupPage } from './test-utils'
+
+/**
+ * ENTER/EXIT TRANSITION TESTS
+ *
+ * Tests the transition prop's enter/exit-specific animations using timing animations.
+ * Supports syntax like: transition={{ enter: '500ms', exit: '100ms' }}
+ *
+ * These tests run across all animation drivers (css, native, reanimated, motion).
+ */
+
+const TOLERANCE = 0.2
+
+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)
+}
+
+async function elementExists(page: Page, testId: string): Promise<boolean> {
+  return page.evaluate((id) => !!document.querySelector(`[data-testid="${id}"]`), testId)
+}
+
+function isIntermediate(
+  value: number,
+  start: number,
+  end: number,
+  tolerance = TOLERANCE
+): boolean {
+  const notAtStart = Math.abs(value - start) > tolerance
+  const notAtEnd = Math.abs(value - end) > tolerance
+  const min = Math.min(start, end)
+  const max = Math.max(start, end)
+  const inRange = value >= min - tolerance && value <= max + tolerance
+  return notAtStart && notAtEnd && inRange
+}
+
+// works in ci, flaky on local
+test.fixme('Enter/Exit Transition Props', () => {
+  test.beforeEach(async ({ page }) => {
+    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: 'AnimationComprehensiveCase',
+      type: 'useCase',
+    })
+    // wait for initial render and any enter animations to complete
+    // use longer timeout for CI environments which can be slower
+    await page.waitForTimeout(1500)
+  })
+
+  test('scenario 42: different enter/exit transitions - enter uses slow animation', async ({
+    page,
+  }) => {
+    expect(await elementExists(page, 'scenario-42-target'), 'Initially visible').toBe(
+      true
+    )
+    // wait for initial enter animation to complete (500ms animation + settling time)
+    await page.waitForFunction(
+      (testId) => {
+        const el = document.querySelector(`[data-testid="${testId}"]`)
+        return el && Number.parseFloat(getComputedStyle(el).opacity) >= 0.95
+      },
+      'scenario-42-target',
+      { timeout: 3000 }
+    )
+    expect(await getOpacity(page, 'scenario-42-target'), 'Initial opacity').toBeCloseTo(
+      1,
+      1
+    )
+
+    // hide then show to test enter animation (enter=500ms)
+    await page.getByTestId('scenario-42-trigger').click()
+    await page.waitForTimeout(300) // exit=100ms + buffer
+
+    expect(await elementExists(page, 'scenario-42-target'), 'Hidden').toBe(false)
+
+    await page.getByTestId('scenario-42-trigger').click()
+    await page.waitForTimeout(50)
+    expect(await elementExists(page, 'scenario-42-target'), 'Should appear').toBe(true)
+
+    await page.waitForTimeout(150)
+    const midEnterOpacity = await getOpacity(page, 'scenario-42-target')
+
+    expect(
+      isIntermediate(midEnterOpacity, 0, 1),
+      `Mid-enter opacity (${midEnterOpacity.toFixed(2)}) should be intermediate at 200ms into 500ms`
+    ).toBe(true)
+
+    await page.waitForTimeout(500)
+    expect(await getOpacity(page, 'scenario-42-target'), 'Final opacity').toBeCloseTo(
+      1,
+      1
+    )
+  })
+
+  test('scenario 42: different enter/exit transitions - exit uses fast animation', async ({
+    page,
+  }) => {
+    expect(await elementExists(page, 'scenario-42-target'), 'Initially visible').toBe(
+      true
+    )
+
+    // trigger exit (exit=100ms - fast)
+    await page.getByTestId('scenario-42-trigger').click()
+    await page.waitForTimeout(300) // 100ms + buffer
+
+    expect(await elementExists(page, 'scenario-42-target'), 'Gone after fast exit').toBe(
+      false
+    )
+  })
+
+  test('scenario 43: enter-only transition - enter uses specified, exit uses default', async ({
+    page,
+  }) => {
+    // enter=500ms, exit uses default=100ms
+    expect(await elementExists(page, 'scenario-43-target'), 'Initially visible').toBe(
+      true
+    )
+
+    // hide - uses default=100ms (fast)
+    await page.getByTestId('scenario-43-trigger').click()
+    await page.waitForTimeout(300)
+    expect(await elementExists(page, 'scenario-43-target'), 'Hidden').toBe(false)
+
+    // show - uses enter=500ms (slow)
+    await page.getByTestId('scenario-43-trigger').click()
+    await page.waitForTimeout(200)
+    const midOpacity = await getOpacity(page, 'scenario-43-target')
+
+    expect(
+      isIntermediate(midOpacity, 0, 1),
+      `Enter opacity (${midOpacity.toFixed(2)}) should be intermediate at 200ms into 500ms`
+    ).toBe(true)
+
+    await page.waitForTimeout(500)
+    expect(await getOpacity(page, 'scenario-43-target'), 'Final').toBeCloseTo(1, 1)
+  })
+
+  test('scenario 44: exit-only transition - exit uses specified 500ms (slow)', async ({
+    page,
+  }) => {
+    // exit=500ms, enter uses default=100ms
+    expect(await elementExists(page, 'scenario-44-target'), 'Initially visible').toBe(
+      true
+    )
+
+    // trigger exit - uses 500ms (slow)
+    await page.getByTestId('scenario-44-trigger').click()
+
+    // at 200ms into a 500ms animation, should still be in progress
+    await page.waitForTimeout(200)
+
+    expect(
+      await elementExists(page, 'scenario-44-target'),
+      'Still exists during 500ms exit'
+    ).toBe(true)
+    const midOpacity = await getOpacity(page, 'scenario-44-target')
+
+    // with 500ms exit, opacity should still be intermediate at 200ms
+    expect(
+      isIntermediate(midOpacity, 1, 0),
+      `Mid-exit opacity (${midOpacity.toFixed(2)}) should be intermediate at 200ms into 500ms`
+    ).toBe(true)
+
+    // wait for completion (500ms + buffer)
+    await page.waitForTimeout(500)
+    expect(await elementExists(page, 'scenario-44-target'), 'Gone after 500ms exit').toBe(
+      false
+    )
+  })
+
+  test('scenario 45: enter/exit/default - property changes use default animation', async ({
+    page,
+  }) => {
+    // enter=300ms, exit=100ms, default=500ms for property changes
+    expect(await elementExists(page, 'scenario-45-target'), 'Initially visible').toBe(
+      true
+    )
+    const initialOpacity = await getOpacity(page, 'scenario-45-target')
+    expect(initialOpacity, 'Initial opacity').toBeCloseTo(1, 1)
+
+    // click prop button to change opacity (not enter/exit, so uses default=500ms)
+    await page.getByTestId('scenario-45-trigger-prop').click()
+
+    // at 150ms into 500ms animation, should be animating (not yet at final 0.5)
+    await page.waitForTimeout(150)
+    const midOpacity = await getOpacity(page, 'scenario-45-target')
+
+    // should still be above final value since animation takes 500ms
+    expect(
+      midOpacity,
+      `Mid opacity (${midOpacity.toFixed(2)}) should still be above 0.6`
+    ).toBeGreaterThan(0.6)
+
+    // wait for completion (500ms animation + buffer)
+    await page.waitForTimeout(500)
+    expect(await getOpacity(page, 'scenario-45-target'), 'Final opacity').toBeCloseTo(
+      0.5,
+      1
+    )
+  })
+
+  test('scenario 46: enter/exit with per-property config - opacity uses its own animation', async ({
+    page,
+  }) => {
+    // enter=300ms for scale, exit=100ms for scale, but opacity always=500ms
+    // hide first
+    await page.getByTestId('scenario-46-trigger').click()
+    await page.waitForTimeout(700) // opacity=500ms + buffer
+
+    expect(await elementExists(page, 'scenario-46-target'), 'Hidden').toBe(false)
+
+    // show - opacity should use 500ms even though enter=300ms for other props
+    await page.getByTestId('scenario-46-trigger').click()
+    await page.waitForTimeout(200)
+
+    const midOpacity = await getOpacity(page, 'scenario-46-target')
+
+    // at 200ms into 500ms opacity animation, should be intermediate
+    expect(
+      isIntermediate(midOpacity, 0, 1),
+      `Mid-enter opacity (${midOpacity.toFixed(2)}) should be intermediate at 200ms into 500ms`
+    ).toBe(true)
+
+    await page.waitForTimeout(500)
+    expect(await getOpacity(page, 'scenario-46-target'), 'Final').toBeCloseTo(1, 1)
+  })
+
+  test('scenario 47: enter/exit with delay - animations start after delay', async ({
+    page,
+  }) => {
+    // enter=300ms, exit=100ms, delay=200ms
+    // hide first to test enter animation with delay
+    await page.getByTestId('scenario-47-trigger').click()
+    await page.waitForTimeout(600) // 200ms delay + 100ms exit + buffer
+
+    expect(await elementExists(page, 'scenario-47-target'), 'Hidden').toBe(false)
+
+    // show - should have 200ms delay before enter animation starts
+    await page.getByTestId('scenario-47-trigger').click()
+
+    // element appears but at 100ms (during delay), should still be at enterStyle values
+    await page.waitForTimeout(100)
+    expect(
+      await elementExists(page, 'scenario-47-target'),
+      'Should appear immediately'
+    ).toBe(true)
+
+    const duringDelayOpacity = await getOpacity(page, 'scenario-47-target')
+    // during 200ms delay, opacity should be near 0 (enterStyle)
+    expect(duringDelayOpacity, 'During delay, should be at enterStyle').toBeLessThan(0.3)
+
+    // after delay + some animation time (200ms delay + ~150ms into 300ms animation)
+    await page.waitForTimeout(250)
+    const afterDelayOpacity = await getOpacity(page, 'scenario-47-target')
+    // should be animating or completed by now
+    expect(afterDelayOpacity, 'After delay, should be animating').toBeGreaterThan(0.3)
+
+    // wait for full completion
+    await page.waitForTimeout(500)
+    expect(await getOpacity(page, 'scenario-47-target'), 'Final').toBeCloseTo(1, 1)
+  })
+
+  test('enter animation timing differs from exit timing', async ({ page }) => {
+    // scenario 42 uses enter=500ms, exit=100ms
+    const startTime = Date.now()
+
+    // trigger exit
+    await page.getByTestId('scenario-42-trigger').click()
+
+    // wait for element to disappear
+    await page.waitForFunction(
+      (testId) => !document.querySelector(`[data-testid="${testId}"]`),
+      'scenario-42-target',
+      { timeout: 5000 }
+    )
+
+    const exitDuration = Date.now() - startTime
+
+    // exit should be fast (100ms + overhead)
+    expect(exitDuration, 'Exit should be fast').toBeLessThan(500)
+
+    // now trigger enter
+    const enterStart = Date.now()
+    await page.getByTestId('scenario-42-trigger').click()
+
+    // wait for element to fully appear
+    await page.waitForTimeout(100)
+    await page.waitForFunction(
+      (testId) => {
+        const el = document.querySelector(`[data-testid="${testId}"]`)
+        if (!el) return false
+        return Number.parseFloat(getComputedStyle(el).opacity) > 0.9
+      },
+      'scenario-42-target',
+      { timeout: 5000 }
+    )
+
+    const enterDuration = Date.now() - enterStart
+
+    // enter should be slower than exit
+    expect(enterDuration, 'Enter should be slower than exit').toBeGreaterThan(
+      exitDuration
+    )
+  })
+})

package/tests/UseTheme.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: 'UseTheme', type: 'useCase' })
+})
+
+test(`useTheme() returns right values`, async ({ page }) => {
+  expect(await page.locator('#theme-get').innerText()).toBe(`var(--background)`)
+  // themeDev uses hsla format
+  expect(await page.locator('#theme-val').innerText()).toBe(`hsla(0, 0%, 100%, 1)`)
+  expect(await page.locator('#token-get').innerText()).toBe(`var(--blue1)`)
+  // Updated for Radix v3 hex format
+  expect(await page.locator('#token-val').innerText()).toBe(`#fbfdff`)
+})

package/tests/V5ThemeBuilderOutput.test.tsx

@@ -0,0 +1,164 @@
+import { expect, test } from '@playwright/test'
+import { TEST_IDS } from '../src/constants/test-ids'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+/**
+ * Tests for the v5 theme builder output, covering the documented accent usage patterns:
+ *
+ * 1. <Theme name="accent"> - theme-builder.mdx, how-to-upgrade.mdx
+ * 2. <Button theme="accent"> - config-v5.mdx, ButtonDemo.tsx
+ * 3. $accentBackground / $accentColor - config-v5.mdx
+ * 4. $accent1-$accent12 raw tokens
+ */
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, {
+    name: 'V5ThemeBuilderOutput',
+    type: 'useCase',
+    searchParams: { generatedV5: 'true' },
+  })
+})
+
+// --- <Theme name="accent"> ---
+
+test('<Theme name="accent"> $background differs from base $background', async ({
+  page,
+}) => {
+  const baseEl = page.getByTestId(TEST_IDS.baseBackground)
+  const accentEl = page.getByTestId(TEST_IDS.accentThemeBackground)
+
+  await expect(baseEl).toBeVisible()
+  await expect(accentEl).toBeVisible()
+
+  const baseStyles = await getStyles(baseEl)
+  const accentStyles = await getStyles(accentEl)
+
+  // The accent theme should produce a visually different background from the base theme
+  expect(accentStyles.backgroundColor).not.toBe(baseStyles.backgroundColor)
+})
+
+test('<Theme name="accent"> $background is not gray (has color)', async ({ page }) => {
+  const accentEl = page.getByTestId(TEST_IDS.accentThemeBackground)
+  await expect(accentEl).toBeVisible()
+
+  const styles = await getStyles(accentEl)
+
+  // The generated theme has a purple accent (hue 250). Verify it's not a pure gray.
+  // In a gray color, r === g === b. A colored accent will have channel differences.
+  const match = styles.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+  expect(match).toBeTruthy()
+
+  if (match) {
+    const [, r, g, b] = match.map(Number)
+    const isGray = r === g && g === b
+    expect(isGray).toBe(false)
+  }
+})
+
+test('<Theme name="accent"> $color is defined', async ({ page }) => {
+  const textEl = page.getByTestId(TEST_IDS.accentThemeColor)
+  await expect(textEl).toBeVisible()
+
+  const styles = await getStyles(textEl)
+  expect(styles.color).toBeDefined()
+  expect(styles.color).not.toBe('')
+})
+
+// --- <Button theme="accent"> ---
+
+test('<Button theme="accent"> has different background than base button', async ({
+  page,
+}) => {
+  const baseBtn = page.getByTestId(TEST_IDS.baseButton)
+  const accentBtn = page.getByTestId(TEST_IDS.accentPropButton)
+
+  await expect(baseBtn).toBeVisible()
+  await expect(accentBtn).toBeVisible()
+
+  const baseStyles = await getStyles(baseBtn)
+  const accentStyles = await getStyles(accentBtn)
+
+  // Accent button should look different from the default button
+  expect(accentStyles.backgroundColor).not.toBe(baseStyles.backgroundColor)
+})
+
+test('<Button theme="accent"> background is not gray', async ({ page }) => {
+  const accentBtn = page.getByTestId(TEST_IDS.accentPropButton)
+  await expect(accentBtn).toBeVisible()
+
+  const styles = await getStyles(accentBtn)
+
+  const match = styles.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+  expect(match).toBeTruthy()
+
+  if (match) {
+    const [, r, g, b] = match.map(Number)
+    const isGray = r === g && g === b
+    expect(isGray).toBe(false)
+  }
+})
+
+// --- $accentBackground token ---
+
+test('$accentBackground token resolves to a non-gray color', async ({ page }) => {
+  const el = page.getByTestId(TEST_IDS.accentBgToken)
+  await expect(el).toBeVisible()
+
+  const styles = await getStyles(el)
+  expect(styles.backgroundColor).toBeDefined()
+  expect(styles.backgroundColor).not.toBe('')
+
+  const match = styles.backgroundColor.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+  expect(match).toBeTruthy()
+
+  if (match) {
+    const [, r, g, b] = match.map(Number)
+    const isGray = r === g && g === b
+    expect(isGray).toBe(false)
+  }
+})
+
+// --- $accent1-12 raw tokens ---
+
+test('$accent1-12 palette tokens render a gradient (not all identical)', async ({
+  page,
+}) => {
+  const colors: string[] = []
+
+  for (let i = 1; i <= 12; i++) {
+    const swatch = page.getByTestId(`palette-accent-${i}`)
+    await expect(swatch).toBeVisible()
+
+    const styles = await getStyles(swatch)
+    expect(styles.backgroundColor).toBeDefined()
+    colors.push(styles.backgroundColor)
+  }
+
+  // Palette should have multiple distinct values (a gradient, not flat)
+  const uniqueColors = new Set(colors)
+  expect(uniqueColors.size).toBeGreaterThan(1)
+})
+
+// --- Color child themes ---
+
+test('color child themes (yellow, red, green, blue) have distinct backgrounds', async ({
+  page,
+}) => {
+  const yellowBtn = page.getByTestId('button-yellow')
+  const redBtn = page.getByTestId('button-red')
+  const greenBtn = page.getByTestId('button-green')
+
+  await expect(yellowBtn).toBeVisible()
+  await expect(redBtn).toBeVisible()
+  await expect(greenBtn).toBeVisible()
+
+  const yellowStyles = await getStyles(yellowBtn)
+  const redStyles = await getStyles(redBtn)
+  const greenStyles = await getStyles(greenBtn)
+
+  expect(yellowStyles.backgroundColor).not.toBe(redStyles.backgroundColor)
+  expect(redStyles.backgroundColor).not.toBe(greenStyles.backgroundColor)
+  expect(yellowStyles.backgroundColor).not.toBe(greenStyles.backgroundColor)
+})

package/tests/VariantFontFamily.test.tsx

@@ -0,0 +1,11 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'VariantFontFamily', type: 'useCase' })
+})
+
+test(`testing things...`, async ({ page }) => {
+  await expect(page.getByTestId('heading').first()).toHaveCSS('font-size', '11px')
+})

package/tests/VariantsOrder.test.tsx

@@ -0,0 +1,53 @@
+import { expect, test } from '@playwright/test'
+
+import { setupPage } from './test-utils'
+import { getStyles } from './utils'
+
+test.beforeEach(async ({ page }) => {
+  await setupPage(page, { name: 'VariantsOrder', type: 'useCase' })
+})
+
+test(`variants apply below default props but above parent defaultvariants/props as you nest styled()`, async ({
+  page,
+}) => {
+  expect(await getStyles(page.getByTestId('button').first())).toMatchObject({
+    flexDirection: 'row',
+  })
+
+  expect(await getStyles(page.getByTestId('text1').first())).toMatchObject({
+    fontSize: '16px',
+  })
+
+  expect(await getStyles(page.getByTestId('text2').first())).toMatchObject({
+    fontSize: '15px',
+  })
+
+  expect(await getStyles(page.getByTestId('text3').first())).toMatchObject({
+    fontSize: '30px',
+  })
+
+  expect(await getStyles(page.getByTestId('text4').first())).toMatchObject({
+    fontSize: '40px',
+  })
+})
+
+// Issue #3669: https://github.com/hanzoai/gui/issues/3669
+test(`variant chaining: child variant (test2) translates to parent variant (test) and propagates via context`, async ({
+  page,
+}) => {
+  // Direct test=true on ButtonFrame
+  const directFrame = await getStyles(page.getByTestId('frame-test-direct').first())
+  expect(directFrame.backgroundColor).toBe('rgb(255, 0, 0)') // red
+
+  // test2=true on ButtonFrame2 should translate to test=true
+  const chainedFrame = await getStyles(page.getByTestId('frame-test2-chained').first())
+  expect(chainedFrame.backgroundColor).toBe('rgb(255, 0, 0)') // same red
+
+  // ButtonText inside direct test should get white color via context
+  const directText = await getStyles(page.getByTestId('text-test-direct').first())
+  expect(directText.color).toBe('rgb(255, 255, 255)') // white
+
+  // ButtonText inside chained test2 should also get white via context
+  const chainedText = await getStyles(page.getByTestId('text-test2-chained').first())
+  expect(chainedText.color).toBe('rgb(255, 255, 255)') // white - this is the regression
+})