svelte-kit-vice/scripts/probe-toggle-fresh.ts

import { chromium } from 'playwright';
const BASE = process.env.BASE_URL ?? 'http://localhost:5173';
const b = await chromium.launch();
const ctx = await b.newContext({ viewport: { width: 1280, height: 900 } });
const p = await ctx.newPage();
p.on('console', (m) => {
	if (m.type() === 'error') console.log('CONSOLE_ERR', m.text());
});
await p.goto(BASE + '/uix/components/toggle', { waitUntil: 'networkidle' });
await p.waitForTimeout(500);
const initial = await p
	.locator('[data-toggle]')
	.first()
	.evaluate((el: Element) => ({
		ds: el.getAttribute('data-state'),
		dc: el.getAttribute('data-color'),
		bg: getComputedStyle(el).backgroundColor
	}));
console.log('INITIAL', JSON.stringify(initial));
// Click intent=affirm chip
const affirmChip = p.locator('button[data-uix-chip]:has-text("affirm")').first();
await affirmChip.click();
await p.waitForTimeout(200);
const afterAffirm = await p
	.locator('[data-toggle]')
	.first()
	.evaluate((el: Element) => ({
		ds: el.getAttribute('data-state'),
		dc: el.getAttribute('data-color'),
		bg: getComputedStyle(el).backgroundColor
	}));
console.log('AFTER intent=affirm', JSON.stringify(afterAffirm));
// Toggle pressed=true via first switch (the "pressed" control)
const pressedInput = p.locator('span[data-uix-switch] input[type="checkbox"]').first();
await pressedInput.check();
await p.waitForTimeout(200);
const afterPressed = await p
	.locator('[data-toggle]')
	.first()
	.evaluate((el: Element) => ({
		ds: el.getAttribute('data-state'),
		dc: el.getAttribute('data-color'),
		ariaPressed: el.getAttribute('aria-pressed'),
		bg: getComputedStyle(el).backgroundColor
	}));
console.log('AFTER pressed=true + intent=affirm', JSON.stringify(afterPressed));
// Try threat
const threatChip = p.locator('button[data-uix-chip]:has-text("threat")').first();
await threatChip.click();
await p.waitForTimeout(200);
const afterThreat = await p
	.locator('[data-toggle]')
	.first()
	.evaluate((el: Element) => ({
		ds: el.getAttribute('data-state'),
		dc: el.getAttribute('data-color'),
		bg: getComputedStyle(el).backgroundColor
	}));
console.log('AFTER intent=threat (pressed=true)', JSON.stringify(afterThreat));
await b.close();