fix: issue with tab-item for stencil

packages/components/src/components/tab-item/tab-item.lite.tsx

@@ -8,7 +8,7 @@ import {
 	useTarget
 } from '@builder.io/mitosis';
 import type { DBTabItemProps, DBTabItemState } from './model';
-import { cls } from '../../utils';
+import { cls, getBooleanAsString } from '../../utils';
 import { ChangeEvent } from '../../shared/model';
 import { handleFrameworkEvent } from '../../utils/form-components';
 
@@ -30,7 +30,16 @@ export default function DBTabItem(props: DBTabItemProps) {
 			}
 
 			// We have different ts types in different frameworks, so we need to use any here
-			state._selected = (event.target as any)?.['checked'];
+
+			useTarget({
+				stencil: () => {
+					const selected = (event.target as any)?.['checked'];
+					state._selected = getBooleanAsString(selected);
+				},
+				default: () => {
+					state._selected = (event.target as any)?.['checked'];
+				}
+			});
 
 			useTarget({
 				angular: () => handleFrameworkEvent(this, event, 'checked'),

showcases/e2e/default.ts

@@ -223,6 +223,8 @@ export const runAriaSnapshotTest = ({
 			await preScreenShot(page);
 		}
 
+		await page.waitForTimeout(1000); // We wait a little bit until everything loaded
+
 		const snapshot = await page.locator('main').ariaSnapshot();
 		expect(snapshot).toMatchSnapshot(`${title}.yaml`);
 	});