/home/mrjunejune/zenbu: design_system/test/catalog_test.js annotate

annotate design_system/test/catalog_test.js @ 270:358dd5950985

sync production config on every deploy Always install the ignored repository .config into /etc/mrjunejune before promoting the new bundle. Co-authored-by: Copilot <[email protected]>

author	MrJuneJune <me@mrjunejune.com>
date	Fri, 07 Aug 2026 13:16:47 -0700
parents	667156fcd3e3
children

rev	line source
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1 const assert = require('node:assert/strict');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2 const http = require('node:http');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	3 const net = require('node:net');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	4 const path = require('node:path');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	5 const { spawn } = require('node:child_process');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	6
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	7 const RUNFILES = process.env.JS_BINARY__RUNFILES;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	8 const WORKSPACE = process.env.JS_BINARY__WORKSPACE;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	9 const runfilesWorkspace = path.join(RUNFILES, WORKSPACE);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	10 const playwrightPath = path.join(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	11 runfilesWorkspace,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	12 'hg-web/e2e/node_modules/playwright-core',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	13 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	14 const { chromium } = require(playwrightPath);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	15
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	16 function findFreePort() {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	17 return new Promise((resolve, reject) => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	18 const server = net.createServer();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	19 server.once('error', reject);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	20 server.listen(0, '127.0.0.1', () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	21 const address = server.address();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	22 server.close(error => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	23 if (error) reject(error);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	24 else resolve(String(address.port));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	25 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	26 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	27 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	28 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	29
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	30 async function stopProcess(child) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	31 if (!child \|\| child.exitCode !== null) return;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	32 child.kill('SIGTERM');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	33 await new Promise(resolve => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	34 const timer = setTimeout(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	35 if (child.exitCode === null) child.kill('SIGKILL');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	36 }, 3000);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	37 child.once('exit', () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	38 clearTimeout(timer);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	39 resolve();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	40 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	41 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	42 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	43
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	44 async function waitForServer(server, baseUrl, logs) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	45 const deadline = Date.now() + 15000;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	46 while (Date.now() < deadline) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	47 if (server.exitCode !== null) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	48 throw new Error(`Server exited with ${server.exitCode}\n${logs.join('')}`);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	49 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	50 try {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	51 const response = await fetch(baseUrl);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	52 if (response.ok) return;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	53 } catch {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	54 // Keep waiting.
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	55 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	56 await new Promise(resolve => setTimeout(resolve, 100));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	57 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	58 throw new Error(`Server startup timed out\n${logs.join('')}`);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	59 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	60
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	61 function requestRawPath(port, requestPath) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	62 return new Promise((resolve, reject) => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	63 const request = http.request({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	64 host: '127.0.0.1',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	65 port,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	66 method: 'GET',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	67 path: requestPath,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	68 agent: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	69 }, response => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	70 response.resume();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	71 response.on('end', () => resolve(response.statusCode));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	72 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	73 request.on('error', reject);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	74 request.end();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	75 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	76 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	77
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	78 (async () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	79 assert.ok(RUNFILES);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	80 assert.ok(WORKSPACE);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	81 const serverBinary = path.join(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	82 runfilesWorkspace,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	83 'design_system/design_system_server',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	84 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	85 const chromiumPath = path.resolve(process.env.CHROMIUM_PATH);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	86 const port = await findFreePort();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	87 const baseUrl = `http://127.0.0.1:${port}`;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	88 const logs = [];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	89 let server;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	90 let browser;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	91
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	92 try {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	93 const invalidServer = spawn(serverBinary, [], {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	94 cwd: runfilesWorkspace,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	95 env: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	96 ...process.env,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	97 DESIGN_SYSTEM_PORT: 'not-a-port',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	98 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	99 stdio: ['ignore', 'pipe', 'pipe'],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	100 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	101 const invalidExit = await new Promise(resolve => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	102 invalidServer.once('exit', (code, signal) => resolve({ code, signal }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	103 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	104 assert.equal(invalidExit.code, 1);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	105 assert.equal(invalidExit.signal, null);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	106
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	107 server = spawn(serverBinary, [], {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	108 cwd: runfilesWorkspace,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	109 env: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	110 ...process.env,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	111 DESIGN_SYSTEM_PORT: port,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	112 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	113 stdio: ['ignore', 'pipe', 'pipe'],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	114 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	115 server.stdout.on('data', chunk => logs.push(chunk.toString()));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	116 server.stderr.on('data', chunk => logs.push(chunk.toString()));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	117 await waitForServer(server, baseUrl, logs);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	118 assert.equal(await requestRawPath(port, '/../../MODULE.bazel'), 400);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	119
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	120 for (const route of [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	121 '/',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	122 '/tokens',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	123 '/icons',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	124 '/components',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	125 '/components/button',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	126 '/components/card',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	127 '/components/alert',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	128 '/components/field',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	129 '/components/notifications',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	130 '/components/stack',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	131 ]) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	132 const response = await fetch(`${baseUrl}${route}`);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	133 assert.equal(response.status, 200, route);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	134 assert.match(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	135 response.headers.get('content-type') \|\| '',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	136 /^text\/html/,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	137 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	138 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	139 for (const asset of [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	140 '/styles/tokens.css',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	141 '/styles/reference.css',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	142 '/styles/semantic.css',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	143 '/styles/density.css',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	144 '/styles/themes.css',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	145 '/styles/components.css',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	146 '/styles/elements.css',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	147 '/components/index.js',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	148 '/components/icon.js',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	149 '/catalog.js',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	150 '/catalog.js',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	151 ]) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	152 const response = await fetch(`${baseUrl}${asset}`);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	153 assert.equal(response.status, 200, asset);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	154 assert.ok((await response.text()).length > 100, asset);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	155 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	156
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	157 browser = await chromium.launch({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	158 executablePath: chromiumPath,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	159 headless: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	160 args: ['--no-sandbox'],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	161 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	162 const context = await browser.newContext({ colorScheme: 'light' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	163 const page = await context.newPage();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	164 const errors = [];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	165 const devtools = await context.newCDPSession(page);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	166 await devtools.send('Runtime.enable');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	167 devtools.on('Runtime.exceptionThrown', event => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	168 const exception = event.exceptionDetails;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	169 errors.push(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	170 `${exception.text}: ${exception.exception?.description \|\| ''} ` +
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	171 `${exception.url \|\| ''}:${exception.lineNumber + 1}`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	172 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	173 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	174 page.on('pageerror', error => errors.push(error.stack \|\| error.message));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	175 page.on('console', message => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	176 if (message.type() === 'error') {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	177 const location = message.location();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	178 errors.push(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	179 `${message.text()} ${location.url \|\| ''}:${location.lineNumber + 1}`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	180 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	181 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	182 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	183 page.on('response', response => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	184 if (response.status() >= 400) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	185 errors.push(`${response.status()} ${response.url()}`);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	186 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	187 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	188
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	189 await page.goto(`${baseUrl}/components/button`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	190 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	191 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	192 try {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	193 await page.waitForFunction(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	194 () => customElements.get('zen-button') &&
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	195 customElements.get('zen-story'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	196 undefined,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	197 { timeout: 5000 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	198 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	199 } catch (error) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	200 throw new Error(`${error.message}\n${errors.join('\n')}`);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	201 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	202 const catalogState = await page.evaluate(async () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	203 const links = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	204 ...document.querySelectorAll(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	205 '.catalog-nav[aria-label="Components"] a',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	206 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	207 ];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	208 const elements = [...new Set(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	209 links.map(link => link.dataset.zenElement).filter(Boolean),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	210 )];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	211 const statuses = await Promise.all(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	212 links.map(async link => (await fetch(link.href)).status),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	213 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	214 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	215 cards: document.querySelectorAll('.component-grid > a').length,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	216 elements,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	217 links: links.length,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	218 missing: elements.filter(name => !customElements.get(name)),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	219 routes: links.map(link => new URL(link.href).pathname),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	220 statuses,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	221 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	222 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	223 assert.equal(catalogState.cards, 70);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	224 assert.equal(catalogState.links, 70);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	225 assert.equal(catalogState.elements.length, 69);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	226 assert.deepEqual(catalogState.missing, []);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	227 assert.deepEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	228 [...new Set(catalogState.statuses)],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	229 [200],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	230 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	231 const primitiveOwnership = await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	232 const buttonOwners = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	233 'zen-alert',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	234 'zen-attachment',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	235 'zen-button',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	236 'zen-button-group',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	237 'zen-calendar',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	238 'zen-carousel',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	239 'zen-combobox',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	240 'zen-command',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	241 'zen-context-menu',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	242 'zen-data-table',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	243 'zen-date-picker',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	244 'zen-dropdown-menu',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	245 'zen-input-group',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	246 'zen-menubar',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	247 'zen-message-scroller',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	248 'zen-navigation-menu',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	249 'zen-notifications',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	250 'zen-sidebar',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	251 'zen-tabs',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	252 'zen-toggle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	253 'zen-toggle-group',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	254 ].join(',');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	255 const controlOwners = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	256 'zen-calendar',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	257 'zen-checkbox',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	258 'zen-combobox',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	259 'zen-command',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	260 'zen-date-picker',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	261 'zen-field',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	262 'zen-form',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	263 'zen-input',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	264 'zen-input-group',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	265 'zen-input-otp',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	266 'zen-native-select',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	267 'zen-radio-group',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	268 'zen-select',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	269 'zen-slider',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	270 'zen-switch',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	271 'zen-textarea',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	272 ].join(',');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	273 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	274 buttons: [...document.querySelectorAll('button')].filter(button =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	275 !button.closest(buttonOwners) &&
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	276 !button.matches('zen-story > header > button')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	277 ).map(button => button.outerHTML),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	278 controls: [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	279 ...document.querySelectorAll('input, select, textarea'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	280 ].filter(control => !control.closest(controlOwners))
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	281 .map(control => control.outerHTML),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	282 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	283 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	284 assert.deepEqual(primitiveOwnership, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	285 buttons: [],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	286 controls: [],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	287 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	288 const brokenCatalogPages = await page.evaluate(routes => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	289 const failures = [];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	290 const buttonOwners = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	291 'zen-alert',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	292 'zen-attachment',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	293 'zen-button',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	294 'zen-button-group',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	295 'zen-calendar',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	296 'zen-carousel',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	297 'zen-combobox',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	298 'zen-command',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	299 'zen-context-menu',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	300 'zen-data-table',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	301 'zen-date-picker',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	302 'zen-dropdown-menu',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	303 'zen-input-group',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	304 'zen-menubar',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	305 'zen-message-scroller',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	306 'zen-navigation-menu',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	307 'zen-notifications',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	308 'zen-sidebar',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	309 'zen-tabs',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	310 'zen-toggle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	311 'zen-toggle-group',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	312 ].join(',');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	313 for (const route of ['/', '/tokens', '/icons', '/components', ...routes]) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	314 history.replaceState({}, '', route);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	315 window.dispatchEvent(new PopStateEvent('popstate'));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	316 const visible = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	317 ...document.querySelectorAll('[data-catalog-page]:not([hidden])'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	318 ];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	319 const expected = route === '/' \|\| route === '/components'
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	320 ? 'overview'
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	321 : route.slice(route.lastIndexOf('/') + 1);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	322 if (visible.length !== 1 \|\|
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	323 visible[0].dataset.catalogPage !== expected \|\|
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	324 !visible[0].querySelector('h1')?.textContent.trim()) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	325 failures.push(route);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	326 continue;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	327 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	328 if (route.startsWith('/components/')) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	329 const story = visible[0].querySelector('zen-story');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	330 const canvas = story?.querySelector('.story-canvas');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	331 const source = story?.querySelector('pre code');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	332 if (!story \|\| !canvas?.children.length \|\|
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	333 !source?.textContent.trim()) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	334 failures.push(`${route}:empty-story`);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	335 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	336 const unownedButtons = [...canvas?.querySelectorAll('button') \|\| []]
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	337 .filter(button => !button.closest(buttonOwners));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	338 if (unownedButtons.length) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	339 failures.push(`${route}:unowned-button`);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	340 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	341 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	342 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	343 history.replaceState({}, '', '/components/button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	344 window.dispatchEvent(new PopStateEvent('popstate'));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	345 return failures;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	346 }, catalogState.routes);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	347 assert.deepEqual(brokenCatalogPages, []);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	348 await page.keyboard.press('/');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	349 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	350 await page.locator('#componentSearch').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	351 input => document.activeElement === input,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	352 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	353 true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	354 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	355 await page.locator('#componentSearch').fill('date');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	356 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	357 await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	358 '.catalog-nav[aria-label="Components"] a:not([hidden])',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	359 ).count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	360 2,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	361 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	362 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	363 await page.locator('.component-grid > a:not([hidden])').count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	364 2,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	365 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	366 assert.match(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	367 await page.locator('#componentSearchStatus').textContent(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	368 /^2 components found$/,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	369 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	370 await page.locator('#componentSearch').press('Escape');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	371 assert.equal(await page.locator('#componentSearch').inputValue(), '');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	372 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	373 await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	374 '.catalog-nav[aria-label="Components"] a:not([hidden])',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	375 ).count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	376 70,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	377 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	378 await page.locator('#componentSearch').fill('stack');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	379 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	380 await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	381 '.catalog-nav[aria-label="Components"] a[href="/components/stack"]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	382 ).getAttribute('hidden'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	383 null,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	384 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	385 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	386 await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	387 '.component-grid > a[href="/components/stack"]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	388 ).getAttribute('hidden'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	389 null,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	390 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	391 await page.locator('#componentSearch').press('Escape');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	392 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	393 await page.locator('[data-catalog-page="button"]').isVisible(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	394 true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	395 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	396 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	397 await page.locator('.catalog-sidebar a[href="/components/button"]').getAttribute('aria-current'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	398 'page',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	399 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	400 assert.match(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	401 await page.locator('zen-story pre').first().textContent(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	402 /<zen-button>/,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	403 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	404 const plainPresentation = await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	405 const style = document.createElement('style');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	406 style.textContent = `
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	407 .application-button {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	408 padding: 7px;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	409 border: 3px solid currentColor;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	410 box-shadow: none;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	411 background: transparent;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	412 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	413 .application-input {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	414 appearance: auto;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	415 padding: 9px;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	416 border: 4px solid currentColor;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	417 background: transparent;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	418 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	419 `;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	420 document.head.append(style);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	421 const buttonHost = document.createElement('zen-button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	422 buttonHost.setAttribute('appearance', 'plain');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	423 buttonHost.setAttribute('loading', '');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	424 const button = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	425 button.className = 'application-button';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	426 button.textContent = 'Plain';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	427 buttonHost.append(button);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	428
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	429 const card = document.createElement('zen-card');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	430 card.setAttribute('appearance', 'plain');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	431 const article = document.createElement('article');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	432 card.append(article);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	433
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	434 const field = document.createElement('zen-field');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	435 field.setAttribute('appearance', 'plain');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	436 const label = document.createElement('label');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	437 label.textContent = 'Plain field';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	438 const input = document.createElement('input');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	439 field.append(label, input);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	440 const inputHost = document.createElement('zen-input');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	441 inputHost.setAttribute('appearance', 'plain');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	442 inputHost.setAttribute('size', 'lg');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	443 const applicationInput = document.createElement('input');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	444 applicationInput.className = 'application-input';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	445 inputHost.append(applicationInput);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	446 document.body.append(buttonHost, card, field, inputHost);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	447
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	448 const buttonStyle = getComputedStyle(button);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	449 const cardStyle = getComputedStyle(article);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	450 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	451 buttonBackground: buttonStyle.backgroundColor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	452 buttonBorder: buttonStyle.borderTopWidth,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	453 buttonPadding: buttonStyle.paddingTop,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	454 buttonShadow: buttonStyle.boxShadow,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	455 buttonOpacity: buttonStyle.opacity,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	456 buttonSpinner: getComputedStyle(button, '::before').content,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	457 cardBackground: cardStyle.backgroundColor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	458 cardBorder: cardStyle.borderTopWidth,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	459 cardShadow: cardStyle.boxShadow,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	460 fieldDisplay: getComputedStyle(field).display,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	461 inputAppearance: getComputedStyle(input).appearance,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	462 plainInputAppearance: getComputedStyle(applicationInput).appearance,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	463 plainInputBorder: getComputedStyle(applicationInput).borderTopWidth,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	464 plainInputPadding: getComputedStyle(applicationInput).paddingTop,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	465 labelFor: label.htmlFor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	466 inputId: input.id,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	467 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	468 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	469 assert.deepEqual(plainPresentation, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	470 buttonBackground: 'rgba(0, 0, 0, 0)',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	471 buttonBorder: '3px',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	472 buttonPadding: '7px',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	473 buttonShadow: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	474 buttonOpacity: '1',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	475 buttonSpinner: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	476 cardBackground: 'rgba(0, 0, 0, 0)',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	477 cardBorder: '0px',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	478 cardShadow: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	479 fieldDisplay: 'contents',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	480 inputAppearance: 'auto',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	481 plainInputAppearance: 'auto',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	482 plainInputBorder: '4px',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	483 plainInputPadding: '9px',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	484 labelFor: plainPresentation.inputId,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	485 inputId: plainPresentation.inputId,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	486 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	487 const buttonScale = await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	488 '[data-catalog-page="button"] zen-button[size] > button',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	489 ).evaluateAll(buttons => buttons.map(button => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	490 const host = button.parentElement;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	491 const style = getComputedStyle(button);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	492 const hostStyle = getComputedStyle(host);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	493 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	494 fontSize: Number.parseFloat(style.fontSize),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	495 height: button.getBoundingClientRect().height,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	496 paddingInline: Number.parseFloat(style.paddingInlineStart),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	497 size: host.getAttribute('size'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	498 variableHeight: Number.parseFloat(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	499 hostStyle.getPropertyValue('--zenbu-control-height'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	500 ) * Number.parseFloat(getComputedStyle(document.documentElement).fontSize),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	501 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	502 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	503 assert.deepEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	504 buttonScale.map(item => item.size),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	505 ['xs', 'sm', 'md', 'lg', 'xl'],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	506 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	507 for (let index = 1; index < buttonScale.length; index++) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	508 assert.ok(buttonScale[index].height > buttonScale[index - 1].height);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	509 assert.ok(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	510 buttonScale[index].paddingInline >
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	511 buttonScale[index - 1].paddingInline,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	512 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	513 assert.ok(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	514 buttonScale[index].fontSize > buttonScale[index - 1].fontSize,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	515 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	516 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	517 for (const item of buttonScale) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	518 assert.ok(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	519 Math.abs(item.height - item.variableHeight) < 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	520 JSON.stringify(buttonScale),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	521 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	522 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	523 const compactScale = await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	524 document.documentElement.dataset.zenDensity = 'compact';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	525 return [...document.querySelectorAll(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	526 '[data-catalog-page="button"] zen-button[size] > button',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	527 )]
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	528 .map(button => button.getBoundingClientRect().height);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	529 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	530 assert.equal(compactScale.length, buttonScale.length);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	531 for (let index = 0; index < compactScale.length; index++) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	532 assert.ok(compactScale[index] < buttonScale[index].height);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	533 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	534 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	535 delete document.documentElement.dataset.zenDensity;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	536 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	537
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	538 await page.emulateMedia({ reducedMotion: 'reduce' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	539 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	540 await page.evaluate(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	541 getComputedStyle(document.documentElement)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	542 .getPropertyValue('--zenbu-sys-motion-duration-state')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	543 .trim()
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	544 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	545 '1ms',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	546 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	547 await page.emulateMedia({ reducedMotion: 'no-preference' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	548
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	549 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	550 await page.locator('zen-button[loading]:not([appearance="plain"])').getAttribute('inert'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	551 null,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	552 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	553 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	554 await page.locator('zen-button[loading]:not([appearance="plain"]) button').getAttribute('aria-disabled'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	555 'true',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	556 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	557 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	558 await page.locator('zen-button[loading]:not([appearance="plain"]) button').getAttribute('aria-busy'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	559 'true',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	560 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	561 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	562 window.__loadingClicks = 0;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	563 document.querySelector('zen-button[loading]:not([appearance="plain"]) button')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	564 .addEventListener('click', () => window.__loadingClicks++);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	565 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	566 await page.locator('zen-button[loading]:not([appearance="plain"]) button').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	567 button => button.click(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	568 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	569 assert.equal(await page.evaluate(() => window.__loadingClicks), 0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	570 await page.locator('zen-button[loading]:not([appearance="plain"]) button').focus();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	571 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	572 await page.locator('zen-button[loading]:not([appearance="plain"]) button').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	573 button => document.activeElement === button,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	574 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	575 true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	576 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	577 await page.keyboard.press('Tab');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	578 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	579 await page.locator('zen-button[loading]:not([appearance="plain"]) button').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	580 button => document.activeElement === button,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	581 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	582 false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	583 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	584 const nativeDisabledPreserved = await page.evaluate(async () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	585 const wrapper = document.createElement('zen-button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	586 const button = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	587 button.disabled = true;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	588 button.textContent = 'Native disabled';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	589 wrapper.append(button);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	590 document.body.append(wrapper);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	591 await customElements.whenDefined('zen-button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	592 wrapper.setAttribute('disabled', '');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	593 wrapper.removeAttribute('disabled');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	594 return button.disabled;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	595 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	596 assert.equal(nativeDisabledPreserved, true);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	597 const replacementButtonState = await page.evaluate(async () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	598 const wrapper = document.createElement('zen-button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	599 wrapper.setAttribute('disabled', '');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	600 const first = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	601 first.textContent = 'First';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	602 wrapper.append(first);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	603 document.body.append(wrapper);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	604 await new Promise(resolve => setTimeout(resolve));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	605 const second = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	606 second.textContent = 'Second';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	607 wrapper.replaceChildren(second);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	608 await new Promise(resolve => setTimeout(resolve));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	609 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	610 firstDisabled: first.disabled,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	611 secondAriaDisabled: second.getAttribute('aria-disabled'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	612 wrapperInert: wrapper.hasAttribute('inert'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	613 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	614 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	615 assert.equal(replacementButtonState.firstDisabled, false);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	616 assert.equal(replacementButtonState.secondAriaDisabled, 'true');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	617 assert.equal(replacementButtonState.wrapperInert, false);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	618 const modifiedClickAllowed = await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	619 const link = document.querySelector(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	620 '.catalog-sidebar a[href="/components/card"]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	621 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	622 return link.dispatchEvent(new MouseEvent('click', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	623 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	624 cancelable: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	625 button: 0,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	626 ctrlKey: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	627 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	628 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	629 assert.equal(modifiedClickAllowed, true);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	630
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	631 await page.goto(`${baseUrl}/icons`, { waitUntil: 'networkidle' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	632 const iconCount = await page.locator('#iconGrid figure').count();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	633 assert.ok(iconCount >= 30);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	634 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	635 await page.locator('#iconGrid figure zen-icon > svg').count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	636 iconCount,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	637 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	638 const iconFallback = await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	639 const icon = document.createElement('zen-icon');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	640 icon.setAttribute('name', 'not-a-real-icon');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	641 icon.setAttribute('label', 'Missing icon fallback');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	642 document.body.append(icon);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	643 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	644 fallback: icon.dataset.zenIcon,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	645 hidden: icon.getAttribute('aria-hidden'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	646 label: icon.getAttribute('aria-label'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	647 role: icon.getAttribute('role'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	648 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	649 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	650 assert.deepEqual(iconFallback, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	651 fallback: 'alert',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	652 hidden: null,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	653 label: 'Missing icon fallback',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	654 role: 'img',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	655 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	656
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	657 await page.goto(`${baseUrl}/components/link`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	658 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	659 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	660 const linkPrimitive = page.locator('zen-link[effect="paw"]').first();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	661 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	662 await linkPrimitive.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	663 ':scope > a > zen-icon[name="paw"][data-zen-link-decoration]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	664 ).count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	665 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	666 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	667 const pawMotion = await linkPrimitive.locator('zen-icon').evaluate(icon => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	668 const style = getComputedStyle(icon);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	669 const keyframes = icon.getAnimations().some(animation =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	670 animation.animationName === 'zen-paw-step'
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	671 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	672 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	673 animationDuration: style.animationDuration,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	674 color: style.color,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	675 keyframes,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	676 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	677 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	678 assert.notEqual(pawMotion.animationDuration, '0s');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	679 assert.notEqual(pawMotion.color, 'rgba(0, 0, 0, 0)');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	680 assert.equal(pawMotion.keyframes, true);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	681 await page.emulateMedia({ reducedMotion: 'reduce' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	682 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	683 await linkPrimitive.locator('zen-icon').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	684 icon => getComputedStyle(icon).animationName,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	685 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	686 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	687 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	688 await page.emulateMedia({ reducedMotion: 'no-preference' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	689
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	690 await page.goto(`${baseUrl}/components/text`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	691 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	692 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	693 const textScale = await page.locator('zen-text[size] > p').evaluateAll(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	694 texts => texts.map(text => Number.parseFloat(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	695 getComputedStyle(text).fontSize,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	696 )),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	697 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	698 assert.equal(textScale.length, 5);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	699 for (let index = 1; index < textScale.length; index++) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	700 assert.ok(textScale[index] > textScale[index - 1]);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	701 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	702
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	703 await page.goto(`${baseUrl}/components/heading`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	704 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	705 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	706 const headingScale = await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	707 'zen-heading[size] > h3',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	708 ).evaluateAll(headings => headings.map(heading => ({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	709 fontSize: Number.parseFloat(getComputedStyle(heading).fontSize),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	710 weight: Number(getComputedStyle(heading).fontWeight),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	711 })));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	712 assert.equal(headingScale.length, 5);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	713 assert.ok(headingScale.every(heading => heading.weight >= 700));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	714 for (let index = 1; index < headingScale.length; index++) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	715 assert.ok(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	716 headingScale[index].fontSize > headingScale[index - 1].fontSize,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	717 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	718 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	719
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	720 await page.goto(`${baseUrl}/components/box`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	721 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	722 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	723 const boxScale = await page.locator('zen-box[padding]').evaluateAll(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	724 boxes => boxes.map(box => Number.parseFloat(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	725 getComputedStyle(box).paddingTop,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	726 )),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	727 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	728 assert.equal(boxScale.length, 5);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	729 for (let index = 1; index < boxScale.length; index++) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	730 assert.ok(boxScale[index] > boxScale[index - 1]);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	731 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	732
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	733 await page.goto(`${baseUrl}/components/skeleton`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	734 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	735 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	736 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	737 await page.locator('zen-skeleton[width="60%"]').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	738 skeleton => skeleton.style.getPropertyValue(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	739 '--zenbu-skeleton-width',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	740 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	741 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	742 '60%',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	743 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	744
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	745 await page.goto(`${baseUrl}/tokens`, { waitUntil: 'networkidle' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	746 const colorTokenState = await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	747 const root = document.documentElement;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	748 const value = name => getComputedStyle(root)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	749 .getPropertyValue(`--zen-color-${name}`)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	750 .trim();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	751 const systemValue = name => getComputedStyle(root)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	752 .getPropertyValue(`--zenbu-sys-${name}`)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	753 .trim();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	754 const families = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	755 'neutral',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	756 'red',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	757 'orange',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	758 'amber',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	759 'green',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	760 'teal',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	761 'blue',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	762 'violet',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	763 'rose',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	764 'brown',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	765 ];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	766 const steps = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	767 '50',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	768 '100',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	769 '200',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	770 '300',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	771 '400',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	772 '500',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	773 '600',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	774 '700',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	775 '800',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	776 '900',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	777 '950',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	778 ];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	779 const rampsComplete = families.every(family =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	780 steps.every(step => value(`${family}-${step}`))
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	781 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	782 const data = Array.from(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	783 { length: 10 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	784 (_, index) => value(`data-${index + 1}`),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	785 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	786 const materials = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	787 'paper',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	788 'washi',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	789 'linen',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	790 'sumi',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	791 'brick',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	792 'persimmon',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	793 'ochre',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	794 'moss',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	795 'patina',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	796 'indigo',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	797 'plum',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	798 'clay',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	799 'wood',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	800 ].map(value);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	801 const lightMuted = systemValue('color-surface-subtle');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	802 root.dataset.zenTheme = 'dark';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	803 const darkMuted = systemValue('color-surface-subtle');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	804 const darkData = Array.from(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	805 { length: 10 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	806 (_, index) => value(`data-${index + 1}`),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	807 );
259 667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	808 const themes = ['paper', 'ink', 'playful', 'cyberpunk'].map(theme => {
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	809 root.dataset.zenTheme = theme;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	810 const channels = value => value.match(/\d+(?:\.\d+)?/g)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	811 .slice(0, 3)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	812 .map(Number);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	813 const luminance = value => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	814 const converted = channels(value).map(channel => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	815 const normalized = channel / 255;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	816 return normalized <= 0.04045
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	817 ? normalized / 12.92
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	818 : ((normalized + 0.055) / 1.055) ** 2.4;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	819 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	820 return converted[0] * 0.2126 +
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	821 converted[1] * 0.7152 +
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	822 converted[2] * 0.0722;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	823 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	824 const contrasts = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	825 'info',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	826 'success',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	827 'warning',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	828 'danger',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	829 ].map(tone => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	830 const probe = document.createElement('span');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	831 probe.style.background =
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	832 `var(--zenbu-sys-color-${tone}-background)`;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	833 probe.style.color =
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	834 `var(--zenbu-sys-color-${tone}-foreground)`;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	835 document.body.append(probe);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	836 const probeStyle = getComputedStyle(probe);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	837 const foreground = luminance(probeStyle.color);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	838 const background = luminance(probeStyle.backgroundColor);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	839 const contrast = (Math.max(foreground, background) + 0.05) /
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	840 (Math.min(foreground, background) + 0.05);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	841 probe.remove();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	842 return contrast;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	843 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	844 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	845 canvas: systemValue('color-surface-page'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	846 contrast: Math.min(...contrasts),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	847 font: getComputedStyle(root)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	848 .getPropertyValue('--zenbu-sys-font-family-ui')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	849 .trim(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	850 name: theme,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	851 radius: getComputedStyle(root)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	852 .getPropertyValue('--zenbu-sys-radius-container')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	853 .trim(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	854 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	855 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	856 delete root.dataset.zenTheme;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	857 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	858 darkData,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	859 darkMuted,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	860 data,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	861 lightMuted,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	862 materials,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	863 rampsComplete,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	864 themes,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	865 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	866 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	867 assert.equal(colorTokenState.rampsComplete, true);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	868 assert.equal(new Set(colorTokenState.materials).size, 13);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	869 assert.equal(new Set(colorTokenState.data).size, 10);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	870 assert.equal(new Set(colorTokenState.darkData).size, 10);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	871 assert.notDeepEqual(colorTokenState.data, colorTokenState.darkData);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	872 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	873 new Set(colorTokenState.themes.map(theme => theme.canvas)).size,
259 667156fcd3e3 Add dev-only cyberpunk JRPG page MrJuneJune <me@mrjunejune.com> parents: 258 diff changeset	874 4,
258 60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	875 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	876 assert.notEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	877 colorTokenState.themes.find(theme => theme.name === 'paper').radius,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	878 colorTokenState.themes.find(theme => theme.name === 'playful').radius,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	879 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	880 assert.ok(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	881 colorTokenState.themes.every(theme => theme.contrast >= 4.5),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	882 JSON.stringify(colorTokenState.themes),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	883 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	884 assert.notEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	885 colorTokenState.lightMuted,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	886 colorTokenState.darkMuted,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	887 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	888 assert.equal(await page.locator('.palette-grid > div').count(), 13);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	889 assert.equal(await page.locator('.data-palette > span').count(), 10);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	890 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	891 document.documentElement.dataset.zenTheme = 'playful';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	892 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	893 await page.emulateMedia({ forcedColors: 'active' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	894 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	895 await page.evaluate(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	896 getComputedStyle(document.documentElement)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	897 .getPropertyValue('--zenbu-sys-color-surface-page')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	898 .trim()
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	899 .toLowerCase()
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	900 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	901 'canvas',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	902 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	903 await page.emulateMedia({ forcedColors: 'none' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	904 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	905 delete document.documentElement.dataset.zenTheme;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	906 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	907
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	908 await page.goto(`${baseUrl}/components/field`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	909 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	910 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	911 const fieldWiring = await page.locator('zen-field').first().evaluate(field => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	912 const label = field.querySelector('label');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	913 const input = field.querySelector('input');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	914 const help = field.querySelector('small');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	915 input.checkValidity();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	916 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	917 describedBy: input.getAttribute('aria-describedby'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	918 helpId: help.id,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	919 inputId: input.id,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	920 invalid: field.hasAttribute('data-invalid'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	921 labelFor: label.htmlFor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	922 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	923 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	924 assert.ok(fieldWiring.inputId);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	925 assert.equal(fieldWiring.labelFor, fieldWiring.inputId);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	926 assert.equal(fieldWiring.describedBy, fieldWiring.helpId);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	927 assert.equal(fieldWiring.invalid, true);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	928 await page.locator('zen-field input').first().focus();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	929 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	930 await page.locator('zen-field input').first().evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	931 input => getComputedStyle(input).outlineStyle,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	932 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	933 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	934 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	935 const replacementField = await page.locator('zen-field').first().evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	936 async field => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	937 const label = field.querySelector('label');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	938 const oldInput = field.querySelector('input');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	939 const blocker = document.createElement('div');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	940 blocker.id = 'zen-field-3';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	941 document.body.append(blocker);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	942 const nextInput = document.createElement('input');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	943 nextInput.required = true;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	944 oldInput.replaceWith(nextInput);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	945 await new Promise(resolve => setTimeout(resolve));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	946 oldInput.dispatchEvent(new Event('invalid'));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	947 const help = field.querySelector('small');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	948 nextInput.id = 'replacement-email';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	949 help.id = 'replacement-help';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	950 await new Promise(resolve => setTimeout(resolve));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	951 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	952 describedBy: nextInput.getAttribute('aria-describedby'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	953 helpId: help.id,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	954 labelFor: label.htmlFor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	955 nextId: nextInput.id,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	956 blockerId: blocker.id,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	957 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	958 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	959 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	960 assert.ok(replacementField.nextId);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	961 assert.notEqual(replacementField.nextId, replacementField.blockerId);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	962 assert.equal(replacementField.labelFor, replacementField.nextId);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	963 assert.equal(replacementField.describedBy, replacementField.helpId);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	964
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	965 await page.goto(`${baseUrl}/components/alert`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	966 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	967 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	968 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	969 window.__dismissed = 0;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	970 document.addEventListener('zen-dismiss', () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	971 window.__dismissed++;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	972 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	973 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	974 const dismissible = page.locator('zen-alert[dismissible]');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	975 assert.equal(await dismissible.getAttribute('role'), 'alert');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	976 await dismissible.locator('[data-zen-dismiss]').click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	977 assert.equal(await dismissible.count(), 0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	978 assert.equal(await page.evaluate(() => window.__dismissed), 1);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	979 const authoredDismissState = await page.evaluate(async () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	980 const alert = document.createElement('zen-alert');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	981 alert.setAttribute('dismissible', '');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	982 const message = document.createElement('p');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	983 message.textContent = 'Authored dismiss control';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	984 const dismiss = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	985 dismiss.dataset.zenDismiss = '';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	986 alert.append(message, dismiss);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	987 document.body.append(alert);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	988 await new Promise(resolve => setTimeout(resolve));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	989 let events = 0;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	990 alert.addEventListener('zen-dismiss', () => events++);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	991 alert.removeAttribute('dismissible');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	992 dismiss.click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	993 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	994 connected: alert.isConnected,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	995 events,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	996 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	997 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	998 assert.equal(authoredDismissState.connected, true);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	999 assert.equal(authoredDismissState.events, 0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1000
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1001 await page.goto(`${baseUrl}/components/accordion`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1002 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1003 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1004 const accordion = page.locator('zen-accordion').first();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1005 const disclosureIcon = accordion.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1006 'summary > zen-icon[data-zen-disclosure-icon]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1007 ).nth(1);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1008 const collapsedDisclosure = await disclosureIcon.evaluate(icon => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1009 const style = getComputedStyle(icon);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1010 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1011 duration: style.transitionDuration,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1012 transform: style.transform,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1013 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1014 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1015 assert.notEqual(collapsedDisclosure.duration, '0s');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1016 await accordion.locator('summary').nth(1).click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1017 await page.waitForTimeout(250);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1018 assert.notEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1019 await disclosureIcon.evaluate(icon => getComputedStyle(icon).transform),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1020 collapsedDisclosure.transform,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1021 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1022 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1023 await accordion.locator('details').first().getAttribute('open'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1024 null,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1025 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1026 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1027 await accordion.locator('details').nth(1).getAttribute('open'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1028 '',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1029 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1030 await accordion.locator('summary').nth(1).press('ArrowUp');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1031 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1032 await accordion.locator('summary').first().evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1033 summary => document.activeElement === summary,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1034 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1035 true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1036 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1037
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1038 await page.goto(`${baseUrl}/components/aspect-ratio`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1039 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1040 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1041 const aspectColors = await page.locator('.demo-media').evaluate(media => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1042 const style = getComputedStyle(media);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1043 const probe = document.createElement('span');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1044 probe.style.background = 'var(--zenbu-sys-color-surface-subtle)';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1045 document.body.append(probe);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1046 const token = getComputedStyle(probe).backgroundColor;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1047 probe.remove();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1048 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1049 background: style.backgroundColor,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1050 image: style.backgroundImage,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1051 token,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1052 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1053 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1054 assert.equal(aspectColors.image, 'none');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1055 assert.equal(aspectColors.background, aspectColors.token);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1056
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1057 await page.goto(`${baseUrl}/components/tabs`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1058 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1059 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1060 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1061 window.__tabValue = null;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1062 document.querySelector('zen-tabs').addEventListener(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1063 'zen-change',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1064 event => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1065 window.__tabValue = event.detail.value;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1066 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1067 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1068 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1069 await page.locator('zen-tabs [role="tab"]').nth(1).click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1070 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1071 await page.locator('zen-tabs [role="tab"]').nth(1)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1072 .getAttribute('aria-selected'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1073 'true',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1074 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1075 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1076 await page.locator('zen-tabs [role="tabpanel"]').nth(1)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1077 .getAttribute('hidden'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1078 null,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1079 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1080 assert.equal(await page.evaluate(() => window.__tabValue), 'history');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1081
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1082 await page.goto(`${baseUrl}/components/dialog`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1083 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1084 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1085 await page.locator('zen-dialog [data-zen-trigger]').click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1086 assert.equal(await page.locator('zen-dialog dialog').getAttribute('open'), '');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1087 await page.locator('zen-dialog [data-zen-close]').click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1088 assert.equal(await page.locator('zen-dialog dialog').getAttribute('open'), null);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1089 const dynamicOverlays = await page.evaluate(async () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1090 const ownAction = button => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1091 const owner = document.createElement('zen-button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1092 owner.setAttribute('size', 'md');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1093 owner.append(button);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1094 return owner;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1095 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1096 const dialogHost = document.createElement('zen-dialog');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1097 const popoverHost = document.createElement('zen-popover');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1098 const tooltipHost = document.createElement('zen-tooltip');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1099 const menuHost = document.createElement('zen-dropdown-menu');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1100 document.body.append(dialogHost, popoverHost, tooltipHost, menuHost);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1101
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1102 const dialogTrigger = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1103 dialogTrigger.type = 'button';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1104 dialogTrigger.dataset.zenTrigger = '';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1105 const dialog = document.createElement('dialog');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1106 dialogHost.append(ownAction(dialogTrigger), dialog);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1107
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1108 const popoverTrigger = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1109 popoverTrigger.type = 'button';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1110 popoverTrigger.dataset.zenTrigger = '';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1111 const popover = document.createElement('div');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1112 popover.dataset.zenContent = '';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1113 popoverHost.append(ownAction(popoverTrigger), popover);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1114
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1115 const tooltipTrigger = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1116 tooltipTrigger.type = 'button';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1117 tooltipTrigger.dataset.zenTrigger = '';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1118 const tooltip = document.createElement('span');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1119 tooltip.dataset.zenContent = '';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1120 tooltipHost.append(ownAction(tooltipTrigger), tooltip);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1121
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1122 const menuTrigger = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1123 menuTrigger.type = 'button';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1124 menuTrigger.dataset.zenTrigger = '';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1125 const menu = document.createElement('div');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1126 menu.setAttribute('role', 'menu');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1127 const item = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1128 item.type = 'button';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1129 item.setAttribute('role', 'menuitem');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1130 menu.append(item);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1131 menuHost.append(menuTrigger, menu);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1132
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1133 await new Promise(resolve => setTimeout(resolve));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1134 dialogTrigger.click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1135 const dialogOpen = dialog.open;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1136 dialog.close();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1137 popoverTrigger.click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1138 menuTrigger.click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1139 tooltipTrigger.focus();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1140 await new Promise(resolve => setTimeout(resolve, 375));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1141 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1142 dialogControlled: Boolean(dialogTrigger.getAttribute('aria-controls')),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1143 dialogOpen,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1144 menuOpen: !menu.hidden,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1145 popoverExpanded: popoverTrigger.getAttribute('aria-expanded'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1146 tooltipOpen: !tooltip.hidden,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1147 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1148 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1149 assert.deepEqual(dynamicOverlays, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1150 dialogControlled: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1151 dialogOpen: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1152 menuOpen: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1153 popoverExpanded: 'true',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1154 tooltipOpen: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1155 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1156
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1157 await page.goto(`${baseUrl}/components/dropdown-menu`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1158 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1159 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1160 const dropdownTrigger = page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1161 'zen-dropdown-menu [data-zen-trigger]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1162 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1163 await dropdownTrigger.click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1164 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1165 await page.locator('zen-dropdown-menu [role="menu"]')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1166 .getAttribute('hidden'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1167 null,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1168 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1169 await page.keyboard.press('Escape');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1170 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1171 await page.locator('zen-dropdown-menu [role="menu"]')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1172 .getAttribute('hidden'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1173 '',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1174 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1175 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1176 await dropdownTrigger.evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1177 trigger => document.activeElement === trigger,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1178 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1179 true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1180 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1181 await dropdownTrigger.click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1182 await page.locator('zen-dropdown-menu [role="menuitem"]').first().click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1183 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1184 await dropdownTrigger.evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1185 trigger => document.activeElement === trigger,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1186 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1187 true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1188 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1189
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1190 await page.goto(`${baseUrl}/components/combobox`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1191 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1192 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1193 const comboboxInput = page.locator('zen-combobox input');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1194 await comboboxInput.fill('seo');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1195 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1196 await page.locator('zen-combobox [role="option"]:not([hidden])').count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1197 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1198 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1199 await comboboxInput.press('ArrowDown');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1200 await comboboxInput.press('Enter');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1201 assert.equal(await comboboxInput.inputValue(), 'seobeo');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1202 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1203 await page.locator('zen-combobox [role="listbox"]')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1204 .getAttribute('hidden'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1205 '',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1206 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1207
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1208 await page.goto(`${baseUrl}/components/date-picker`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1209 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1210 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1211 const dateInput = page.locator('zen-date-picker input[type="date"]');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1212 assert.equal(await dateInput.getAttribute('aria-hidden'), 'true');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1213 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1214 await dateInput.evaluate(input => getComputedStyle(input).position),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1215 'absolute',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1216 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1217 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1218 window.__dateValue = null;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1219 document.querySelector('zen-date-picker').addEventListener(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1220 'zen-change',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1221 event => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1222 window.__dateValue = event.detail.value;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1223 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1224 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1225 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1226 const dateTrigger = page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1227 'zen-date-picker [data-zen-date-trigger]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1228 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1229 await dateTrigger.click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1230 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1231 await page.locator('zen-date-picker [data-zen-calendar-panel]')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1232 .getAttribute('hidden'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1233 null,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1234 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1235 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1236 await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1237 'zen-date-picker [data-zen-calendar-day]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1238 ).count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1239 42,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1240 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1241 const chosenDate = await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1242 'zen-date-picker [data-zen-calendar-day]:not([data-outside]):not(:disabled)',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1243 ).nth(14).getAttribute('data-zen-calendar-day');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1244 await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1245 `zen-date-picker [data-zen-calendar-day="${chosenDate}"]`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1246 ).click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1247 assert.equal(await dateInput.inputValue(), chosenDate);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1248 assert.equal(await page.evaluate(() => window.__dateValue), chosenDate);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1249 assert.equal(await dateTrigger.getAttribute('aria-expanded'), 'false');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1250 const triggerName = await dateTrigger.evaluate(trigger =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1251 (trigger.getAttribute('aria-labelledby') \|\| '')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1252 .split(/\s+/)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1253 .map(id => document.getElementById(id)?.textContent \|\| '')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1254 .join(' ')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1255 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1256 assert.match(triggerName, /Deploy on/);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1257 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1258 await page.locator('zen-date-picker > label').getAttribute('for'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1259 await dateTrigger.getAttribute('id'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1260 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1261 const minimumDate = `${chosenDate.slice(0, 8)}10`;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1262 await dateInput.evaluate((input, minimum) => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1263 input.min = minimum;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1264 }, minimumDate);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1265 await page.waitForTimeout(0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1266 await dateTrigger.click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1267 const focusedBoundary = page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1268 `zen-date-picker [data-zen-calendar-day="${chosenDate}"]`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1269 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1270 await focusedBoundary.press('PageUp');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1271 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1272 await page.evaluate(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1273 document.activeElement?.dataset.zenCalendarDay
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1274 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1275 minimumDate,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1276 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1277 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1278 await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1279 'zen-date-picker [data-zen-calendar-day][tabindex="0"]:not(:disabled)',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1280 ).count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1281 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1282 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1283 await page.keyboard.press('Escape');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1284 await dateInput.evaluate(input => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1285 input.disabled = true;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1286 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1287 await page.waitForTimeout(0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1288 assert.equal(await dateTrigger.isDisabled(), true);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1289 await dateInput.evaluate(input => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1290 input.disabled = false;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1291 input.readOnly = true;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1292 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1293 await page.waitForTimeout(0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1294 assert.equal(await dateTrigger.isDisabled(), true);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1295 await dateInput.evaluate(input => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1296 input.readOnly = false;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1297 input.required = true;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1298 input.value = '';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1299 input.dispatchEvent(new Event('input', { bubbles: true }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1300 input.reportValidity();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1301 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1302 await page.waitForTimeout(0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1303 assert.equal(await dateTrigger.getAttribute('aria-invalid'), 'true');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1304 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1305 await dateTrigger.evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1306 trigger => document.activeElement === trigger,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1307 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1308 true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1309 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1310 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1311 await page.locator('zen-date-picker').getAttribute('data-invalid'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1312 '',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1313 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1314 await dateInput.evaluate((input, value) => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1315 input.value = value;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1316 input.dispatchEvent(new Event('input', { bubbles: true }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1317 }, chosenDate);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1318 assert.equal(await dateTrigger.getAttribute('aria-invalid'), 'false');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1319 const earlyYear = await page.evaluate(async () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1320 const calendar = document.createElement('zen-calendar');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1321 const input = document.createElement('input');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1322 input.type = 'date';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1323 input.value = '0001-01-01';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1324 input.setAttribute('aria-label', 'Early date');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1325 calendar.append(input);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1326 document.body.append(calendar);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1327 await new Promise(resolve => setTimeout(resolve));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1328 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1329 selected: calendar.querySelector(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1330 '[data-zen-calendar-day][aria-selected="true"]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1331 )?.dataset.zenCalendarDay,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1332 value: input.value,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1333 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1334 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1335 assert.deepEqual(earlyYear, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1336 selected: '0001-01-01',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1337 value: '0001-01-01',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1338 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1339 const resetDateState = await page.evaluate(async () => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1340 const label = document.createElement('span');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1341 label.id = 'reset-date-label';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1342 label.textContent = 'Reset date';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1343 const form = document.createElement('form');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1344 const picker = document.createElement('zen-date-picker');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1345 const input = document.createElement('input');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1346 input.type = 'date';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1347 input.defaultValue = '2026-08-04';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1348 input.setAttribute('aria-labelledby', label.id);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1349 picker.append(input);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1350 form.append(picker);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1351 document.body.append(label, form);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1352 await new Promise(resolve => setTimeout(resolve));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1353 input.value = '2026-08-12';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1354 input.dispatchEvent(new Event('input', { bubbles: true }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1355 form.reset();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1356 await new Promise(resolve => setTimeout(resolve));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1357 const trigger = picker.querySelector('[data-zen-date-trigger]');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1358 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1359 labelledBy: trigger.getAttribute('aria-labelledby'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1360 selected: picker.querySelector(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1361 '[data-zen-calendar-day][aria-selected="true"]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1362 )?.dataset.zenCalendarDay,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1363 value: input.value,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1364 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1365 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1366 assert.match(resetDateState.labelledBy, /^reset-date-label /);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1367 assert.deepEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1368 {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1369 selected: resetDateState.selected,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1370 value: resetDateState.value,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1371 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1372 {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1373 selected: '2026-08-04',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1374 value: '2026-08-04',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1375 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1376 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1377
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1378 await page.goto(`${baseUrl}/components/input-otp`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1379 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1380 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1381 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1382 window.__otpValue = null;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1383 document.querySelector('zen-input-otp').addEventListener(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1384 'zen-complete',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1385 event => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1386 window.__otpValue = event.detail.value;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1387 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1388 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1389 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1390 await page.locator('zen-input-otp input').evaluate(input => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1391 input.value = '12a3456';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1392 input.dispatchEvent(new Event('input', { bubbles: true }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1393 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1394 assert.equal(await page.locator('zen-input-otp input').inputValue(), '123456');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1395 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1396 await page.locator('zen-input-otp [data-zen-otp-slots] > span').count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1397 6,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1398 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1399 const otp = page.locator('zen-input-otp');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1400 await otp.evaluate(host => host.setAttribute('size', 'xs'));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1401 const compactOtpSize = await otp.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1402 '[data-zen-otp-slots] > span',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1403 ).first().evaluate(slot => slot.getBoundingClientRect().width);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1404 await otp.evaluate(host => host.setAttribute('size', 'xl'));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1405 const largeOtpSize = await otp.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1406 '[data-zen-otp-slots] > span',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1407 ).first().evaluate(slot => slot.getBoundingClientRect().width);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1408 assert.ok(largeOtpSize > compactOtpSize);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1409 assert.equal(await page.evaluate(() => window.__otpValue), '123456');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1410
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1411 await page.goto(`${baseUrl}/components/data-table`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1412 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1413 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1414 await page.locator('zen-data-table [data-zen-sort="commits"]').click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1415 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1416 await page.locator('zen-data-table th').nth(1).getAttribute('aria-sort'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1417 'ascending',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1418 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1419 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1420 await page.locator('zen-data-table tbody tr').first().locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1421 '[data-key="commits"]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1422 ).textContent(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1423 '12',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1424 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1425
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1426 await page.goto(`${baseUrl}/components/carousel`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1427 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1428 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1429 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1430 window.__carouselIndex = null;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1431 document.querySelector('zen-carousel').addEventListener(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1432 'zen-change',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1433 event => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1434 window.__carouselIndex = event.detail.index;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1435 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1436 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1437 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1438 await page.locator('zen-carousel [data-zen-next]').click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1439 assert.equal(await page.evaluate(() => window.__carouselIndex), 1);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1440 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1441 await page.locator('zen-carousel [data-zen-prev]').isDisabled(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1442 false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1443 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1444
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1445 await page.goto(`${baseUrl}/components/resizable`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1446 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1447 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1448 const resizeHandle = page.locator('zen-resizable [data-zen-handle]');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1449 const initialPercent = Number(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1450 await resizeHandle.getAttribute('aria-valuenow'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1451 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1452 await resizeHandle.focus();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1453 await resizeHandle.press('ArrowRight');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1454 assert.ok(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1455 Number(await resizeHandle.getAttribute('aria-valuenow')) > initialPercent,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1456 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1457
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1458 await page.goto(`${baseUrl}/components/switch`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1459 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1460 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1461 const switchInput = page.locator('zen-switch input');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1462 assert.equal(await switchInput.getAttribute('role'), 'switch');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1463 assert.equal(await switchInput.getAttribute('aria-checked'), 'true');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1464 await switchInput.uncheck();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1465 assert.equal(await switchInput.getAttribute('aria-checked'), 'false');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1466
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1467 await page.goto(`${baseUrl}/components/checkbox`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1468 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1469 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1470 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1471 await page.locator('zen-checkbox input').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1472 input => getComputedStyle(input).appearance,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1473 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1474 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1475 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1476 await page.goto(`${baseUrl}/components/native-select`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1477 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1478 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1479 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1480 await page.locator('zen-native-select select').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1481 select => getComputedStyle(select).appearance,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1482 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1483 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1484 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1485 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1486 await page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1487 'zen-native-select > zen-icon[data-zen-select-icon]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1488 ).count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1489 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1490 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1491 await page.goto(`${baseUrl}/components/slider`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1492 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1493 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1494 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1495 await page.locator('zen-slider input').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1496 input => getComputedStyle(input).appearance,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1497 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1498 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1499 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1500
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1501 await page.goto(`${baseUrl}/components/toggle-group`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1502 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1503 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1504 await page.locator('zen-toggle-group button[value="right"]').click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1505 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1506 await page.locator('zen-toggle-group button[value="right"]')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1507 .getAttribute('aria-pressed'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1508 'true',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1509 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1510 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1511 await page.locator('zen-toggle-group').getAttribute('value'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1512 'right',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1513 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1514
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1515 await page.goto(`${baseUrl}/components/sidebar`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1516 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1517 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1518 const sidebarTrigger = page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1519 'zen-sidebar [data-zen-sidebar-trigger]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1520 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1521 const sidebarPanel = page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1522 'zen-sidebar [data-zen-sidebar-panel]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1523 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1524 assert.equal(await sidebarTrigger.getAttribute('aria-expanded'), 'true');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1525 assert.equal(await sidebarPanel.getAttribute('hidden'), null);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1526 await sidebarTrigger.click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1527 assert.equal(await sidebarTrigger.getAttribute('aria-expanded'), 'false');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1528 assert.equal(await sidebarPanel.getAttribute('hidden'), '');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1529
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1530 await page.goto(`${baseUrl}/components/notifications`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1531 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1532 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1533 const notificationScope = page.locator('zen-notifications').first();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1534 const notificationPosition = await notificationScope.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1535 '[data-zen-notification-stack]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1536 ).evaluate(stack => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1537 const style = getComputedStyle(stack);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1538 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1539 bottom: style.bottom,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1540 position: style.position,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1541 right: style.right,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1542 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1543 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1544 assert.equal(notificationPosition.position, 'fixed');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1545 assert.notEqual(notificationPosition.bottom, 'auto');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1546 assert.notEqual(notificationPosition.right, 'auto');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1547
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1548 const dedupe = await notificationScope.evaluate(scope => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1549 const source = scope.querySelector('[data-notification-demo]');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1550 const send = detail => source.dispatchEvent(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1551 new CustomEvent('zen-notify', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1552 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1553 composed: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1554 detail,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1555 }),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1556 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1557 send({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1558 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1559 id: 'dedupe',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1560 tone: 'info',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1561 message: 'First announcement',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1562 announcement: 'polite',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1563 persistent: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1564 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1565 send({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1566 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1567 id: 'dedupe',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1568 tone: 'success',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1569 message: 'Updated without duplication',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1570 announcement: 'polite',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1571 persistent: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1572 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1573 send({ version: 99, id: 'invalid' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1574 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1575 size: scope.size,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1576 visible: scope.visibleCount,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1577 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1578 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1579 assert.deepEqual(dedupe, { size: 1, visible: 1 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1580 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1581 await notificationScope.locator('article').count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1582 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1583 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1584 assert.match(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1585 await notificationScope.locator('article').textContent(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1586 /Updated without duplication/,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1587 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1588 await page.waitForFunction(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1589 document.querySelector(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1590 'zen-notifications [data-zen-live="polite"]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1591 )?.textContent === 'First announcement'
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1592 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1593
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1594 const bounded = await notificationScope.evaluate(scope => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1595 let accepted = 0;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1596 for (let index = 0; index < 25; index++) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1597 if (scope.notify({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1598 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1599 id: `bounded-${index}`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1600 tone: 'info',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1601 message: `Bounded ${index}`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1602 announcement: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1603 durationMs: 120000,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1604 })) accepted++;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1605 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1606 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1607 accepted,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1608 size: scope.size,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1609 visible: scope.visibleCount,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1610 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1611 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1612 assert.deepEqual(bounded, { accepted: 25, size: 23, visible: 3 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1613 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1614 await notificationScope.locator('article').count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1615 3,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1616 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1617 await page.waitForFunction(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1618 [...document.querySelectorAll(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1619 'zen-notifications article',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1620 )].some(article => article.dataset.depth === '2')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1621 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1622 const collapsedStack = await notificationScope.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1623 '[data-zen-notification-stack]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1624 ).evaluate(stack => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1625 const articles = [...stack.querySelectorAll('article')];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1626 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1627 depths: articles.map(article => article.dataset.depth),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1628 height: stack.getBoundingClientRect().height,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1629 positions: articles.map(article =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1630 getComputedStyle(article).position
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1631 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1632 transforms: articles.map(article =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1633 getComputedStyle(article).transform
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1634 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1635 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1636 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1637 assert.deepEqual(collapsedStack.depths, ['2', '1', '0']);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1638 assert.deepEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1639 collapsedStack.positions,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1640 ['absolute', 'absolute', 'absolute'],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1641 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1642 await notificationScope.locator('article').last().hover();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1643 await page.waitForTimeout(300);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1644 const expandedStack = await notificationScope.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1645 '[data-zen-notification-stack]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1646 ).evaluate(stack => ({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1647 height: stack.getBoundingClientRect().height,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1648 rects: [...stack.querySelectorAll('article')].map(article => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1649 const bounds = article.getBoundingClientRect();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1650 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1651 bottom: bounds.bottom,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1652 left: bounds.left,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1653 right: bounds.right,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1654 top: bounds.top,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1655 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1656 }),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1657 tops: [...stack.querySelectorAll('article')].map(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1658 article => Math.round(article.getBoundingClientRect().top),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1659 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1660 transforms: [...stack.querySelectorAll('article')].map(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1661 article => getComputedStyle(article).transform,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1662 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1663 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1664 assert.ok(expandedStack.height > collapsedStack.height);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1665 assert.equal(new Set(expandedStack.tops).size, 3);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1666 const expandedGaps = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1667 expandedStack.rects[1].top - expandedStack.rects[0].bottom,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1668 expandedStack.rects[2].top - expandedStack.rects[1].bottom,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1669 ];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1670 for (const gap of expandedGaps) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1671 assert.ok(gap >= 10 && gap <= 14, JSON.stringify(expandedGaps));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1672 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1673 assert.notDeepEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1674 expandedStack.transforms,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1675 collapsedStack.transforms,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1676 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1677 const gapX =
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1678 (expandedStack.rects[0].left + expandedStack.rects[0].right) / 2;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1679 const gapY =
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1680 (expandedStack.rects[0].bottom + expandedStack.rects[1].top) / 2;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1681 await page.mouse.move(gapX, gapY);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1682 await page.waitForTimeout(100);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1683 const gapState = await notificationScope.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1684 '[data-zen-notification-stack]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1685 ).evaluate(stack => ({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1686 height: stack.getBoundingClientRect().height,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1687 hovered: stack.matches(':hover'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1688 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1689 assert.equal(gapState.hovered, true);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1690 assert.ok(gapState.height >= expandedStack.height - 1);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1691 await page.mouse.move(0, 0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1692
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1693 const actionScope = await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1694 const scope = document.createElement('zen-notifications');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1695 scope.id = 'action-scope';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1696 const source = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1697 scope.append(source);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1698 document.body.append(scope);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1699 window.__notificationAction = null;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1700 scope.addEventListener('zen-notification-action', event => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1701 window.__notificationAction = event.detail;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1702 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1703 source.dispatchEvent(new CustomEvent('zen-notify', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1704 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1705 composed: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1706 detail: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1707 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1708 id: 'action',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1709 tone: 'error',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1710 message: 'Action required',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1711 announcement: 'assertive',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1712 persistent: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1713 action: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1714 token: 'opaque-secret-token',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1715 label: 'Retry',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1716 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1717 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1718 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1719 return scope.id;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1720 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1721 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1722 await page.locator(`#${actionScope}`).evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1723 scope => scope.records,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1724 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1725 undefined,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1726 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1727 const actionArticle = page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1728 `#${actionScope} [data-zen-notification-id="action"]`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1729 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1730 assert.doesNotMatch(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1731 await actionArticle.evaluate(article => article.outerHTML),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1732 /opaque-secret-token/,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1733 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1734 await actionArticle.locator('.zen-notification-action').focus();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1735 await page.locator(`#${actionScope}`).evaluate(scope => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1736 const source = scope.querySelector('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1737 source.dispatchEvent(new CustomEvent('zen-notify', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1738 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1739 composed: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1740 detail: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1741 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1742 id: 'action-neighbor',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1743 tone: 'info',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1744 message: 'Neighbor',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1745 announcement: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1746 persistent: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1747 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1748 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1749 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1750 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1751 await actionArticle.locator('.zen-notification-action').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1752 action => document.activeElement === action,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1753 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1754 true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1755 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1756 await actionArticle.locator('.zen-notification-action').click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1757 assert.deepEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1758 await page.evaluate(() => window.__notificationAction),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1759 {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1760 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1761 id: 'action',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1762 token: 'opaque-secret-token',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1763 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1764 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1765 await page.locator(`#${actionScope}`).evaluate(scope => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1766 const source = scope.querySelector('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1767 source.dispatchEvent(new CustomEvent(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1768 'zen-dismiss-notification',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1769 {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1770 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1771 composed: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1772 detail: { version: 1, id: 'action' },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1773 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1774 ));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1775 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1776 await actionArticle.waitFor({ state: 'detached' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1777
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1778 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1779 const scope = document.createElement('zen-notifications');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1780 scope.id = 'announcement-scope';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1781 const source = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1782 scope.append(source);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1783 document.body.append(scope);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1784 window.__announcements = [];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1785 const region = scope.querySelector('[data-zen-live="polite"]');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1786 new MutationObserver(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1787 if (region.textContent) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1788 window.__announcements.push(region.textContent);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1789 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1790 }).observe(region, { childList: true });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1791 for (let index = 0; index < 3; index++) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1792 source.dispatchEvent(new CustomEvent('zen-notify', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1793 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1794 composed: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1795 detail: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1796 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1797 id: `announcement-${index}`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1798 tone: 'info',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1799 message: `Announcement ${index}`,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1800 announcement: 'polite',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1801 persistent: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1802 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1803 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1804 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1805 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1806 await page.waitForFunction(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1807 window.__announcements?.length === 3
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1808 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1809 assert.deepEqual(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1810 await page.evaluate(() => window.__announcements),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1811 ['Announcement 0', 'Announcement 1', 'Announcement 2'],
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1812 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1813
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1814 const composedRejected = await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1815 const scope = document.createElement('zen-notifications');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1816 const source = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1817 scope.append(source);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1818 document.body.append(scope);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1819 source.dispatchEvent(new CustomEvent('zen-notify', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1820 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1821 composed: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1822 detail: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1823 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1824 id: 'composed',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1825 tone: 'info',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1826 message: 'Must be rejected',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1827 announcement: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1828 persistent: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1829 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1830 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1831 return scope.size;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1832 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1833 assert.equal(composedRejected, 0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1834
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1835 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1836 const scope = document.createElement('zen-notifications');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1837 scope.id = 'focus-timer-scope';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1838 const source = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1839 scope.append(source);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1840 document.body.append(scope);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1841 source.dispatchEvent(new CustomEvent('zen-notify', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1842 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1843 composed: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1844 detail: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1845 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1846 id: 'focus-timer',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1847 tone: 'warning',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1848 message: 'Focus timer',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1849 announcement: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1850 durationMs: 300,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1851 action: { token: 'focus-token', label: 'Keep focused' },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1852 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1853 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1854 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1855 const focusTimer = page.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1856 '#focus-timer-scope [data-zen-notification-id="focus-timer"]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1857 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1858 await focusTimer.locator('.zen-notification-action').focus();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1859 await page.locator('#focus-timer-scope').evaluate(scope => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1860 const source = scope.querySelector(':scope > button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1861 source.dispatchEvent(new CustomEvent('zen-notify', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1862 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1863 composed: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1864 detail: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1865 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1866 id: 'focus-neighbor',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1867 tone: 'info',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1868 message: 'Focus neighbor',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1869 announcement: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1870 persistent: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1871 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1872 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1873 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1874 await page.waitForTimeout(500);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1875 assert.equal(await focusTimer.count(), 1);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1876 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1877 await focusTimer.locator('.zen-notification-action').evaluate(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1878 action => document.activeElement === action,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1879 ),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1880 true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1881 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1882 await page.mouse.move(0, 0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1883 await page.locator('#catalogMain').focus();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1884 await page.waitForFunction(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1885 !document.querySelector(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1886 '#focus-timer-scope [data-zen-notification-id="focus-timer"]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1887 )
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1888 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1889
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1890 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1891 const scope = document.createElement('zen-notifications');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1892 scope.id = 'timer-scope';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1893 const source = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1894 scope.append(source);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1895 document.body.append(scope);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1896 source.dispatchEvent(new CustomEvent('zen-notify', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1897 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1898 composed: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1899 detail: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1900 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1901 id: 'timer',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1902 tone: 'info',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1903 message: 'Paused timer',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1904 announcement: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1905 durationMs: 300,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1906 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1907 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1908 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1909 const timerArticle = page.locator('#timer-scope article');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1910 await timerArticle.hover();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1911 await page.waitForTimeout(500);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1912 assert.equal(await timerArticle.count(), 1);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1913 await page.mouse.move(0, 0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1914 await page.waitForFunction(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1915 !document.querySelector('#timer-scope article')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1916 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1917
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1918 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1919 const scope = document.createElement('zen-notifications');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1920 scope.id = 'hidden-timer-scope';
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1921 const source = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1922 scope.append(source);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1923 document.body.append(scope);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1924 source.dispatchEvent(new CustomEvent('zen-notify', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1925 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1926 composed: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1927 detail: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1928 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1929 id: 'hidden-timer',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1930 tone: 'info',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1931 message: 'Hidden timer',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1932 announcement: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1933 durationMs: 300,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1934 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1935 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1936 Object.defineProperty(document, 'hidden', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1937 configurable: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1938 value: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1939 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1940 document.dispatchEvent(new Event('visibilitychange'));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1941 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1942 await page.waitForTimeout(500);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1943 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1944 await page.locator('#hidden-timer-scope article').count(),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1945 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1946 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1947 await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1948 Object.defineProperty(document, 'hidden', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1949 configurable: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1950 value: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1951 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1952 document.dispatchEvent(new Event('visibilitychange'));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1953 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1954 await page.waitForFunction(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1955 !document.querySelector('#hidden-timer-scope article')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1956 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1957
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1958 const isolated = await page.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1959 const makeScope = id => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1960 const scope = document.createElement('zen-notifications');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1961 scope.id = id;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1962 const source = document.createElement('button');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1963 scope.append(source);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1964 document.body.append(scope);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1965 return { scope, source };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1966 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1967 const first = makeScope('scope-one');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1968 const second = makeScope('scope-two');
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1969 first.source.dispatchEvent(new CustomEvent('zen-notify', {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1970 bubbles: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1971 composed: false,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1972 detail: {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1973 version: 1,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1974 id: 'isolated',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1975 tone: 'success',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1976 message: 'Only first scope',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1977 announcement: 'none',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1978 persistent: true,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1979 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1980 }));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1981 return [first.scope.size, second.scope.size];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1982 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1983 assert.deepEqual(isolated, [1, 0]);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1984
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1985 const lightCanvas = await page.evaluate(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1986 getComputedStyle(document.documentElement)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1987 .getPropertyValue('--zenbu-sys-color-surface-page')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1988 .trim()
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1989 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1990 await page.locator('#themeToggle').click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1991 const darkCanvas = await page.evaluate(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1992 getComputedStyle(document.documentElement)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1993 .getPropertyValue('--zenbu-sys-color-surface-page')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1994 .trim()
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1995 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1996 assert.notEqual(lightCanvas, darkCanvas);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1997 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1998 await page.evaluate(() => localStorage.getItem('zen-theme')),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	1999 'dark',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2000 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2001
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2002 assert.deepEqual(errors, []);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2003 await context.close();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2004
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2005 const darkContext = await browser.newContext({ colorScheme: 'dark' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2006 const darkPage = await darkContext.newPage();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2007 await darkPage.goto(baseUrl, { waitUntil: 'networkidle' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2008 assert.equal(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2009 await darkPage.locator('#themeToggle').getAttribute('aria-pressed'),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2010 'true',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2011 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2012 const systemDarkCanvas = await darkPage.evaluate(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2013 getComputedStyle(document.documentElement)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2014 .getPropertyValue('--zenbu-sys-color-surface-page')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2015 .trim()
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2016 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2017 await darkPage.locator('#themeToggle').click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2018 const explicitLightCanvas = await darkPage.evaluate(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2019 getComputedStyle(document.documentElement)
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2020 .getPropertyValue('--zenbu-sys-color-surface-page')
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2021 .trim()
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2022 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2023 assert.notEqual(systemDarkCanvas, explicitLightCanvas);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2024 await darkContext.close();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2025
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2026 const mobileContext = await browser.newContext({
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2027 colorScheme: 'light',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2028 viewport: { width: 390, height: 844 },
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2029 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2030 const mobilePage = await mobileContext.newPage();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2031 const mobileErrors = [];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2032 mobilePage.on('pageerror', error => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2033 mobileErrors.push(error.stack \|\| error.message);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2034 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2035 mobilePage.on('console', message => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2036 if (message.type() === 'error') mobileErrors.push(message.text());
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2037 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2038 await mobilePage.goto(baseUrl, { waitUntil: 'networkidle' });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2039 await mobilePage.waitForFunction(() =>
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2040 customElements.get('zen-date-picker') &&
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2041 document.querySelectorAll(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2042 '.catalog-nav[aria-label="Components"] a',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2043 ).length === 70
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2044 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2045 const mobileFailures = await mobilePage.evaluate(() => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2046 const routes = [
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2047 '/',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2048 '/tokens',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2049 '/icons',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2050 ...[...document.querySelectorAll(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2051 '.catalog-nav[aria-label="Components"] a',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2052 )].map(link => new URL(link.href).pathname),
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2053 ];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2054 const failures = [];
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2055 for (const route of routes) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2056 history.replaceState({}, '', route);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2057 window.dispatchEvent(new PopStateEvent('popstate'));
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2058 const page = document.querySelector(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2059 '[data-catalog-page]:not([hidden])',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2060 );
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2061 if (!page \|\|
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2062 document.documentElement.scrollWidth > innerWidth + 1 \|\|
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2063 page.getBoundingClientRect().right > innerWidth + 1) {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2064 failures.push(route);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2065 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2066 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2067 return failures;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2068 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2069 assert.deepEqual(mobileFailures, []);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2070 await mobilePage.goto(`${baseUrl}/components/date-picker`, {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2071 waitUntil: 'networkidle',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2072 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2073 await mobilePage.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2074 'zen-date-picker [data-zen-date-trigger]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2075 ).click();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2076 const mobileCalendarBounds = await mobilePage.locator(
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2077 'zen-date-picker [data-zen-calendar-panel]',
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2078 ).evaluate(panel => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2079 const bounds = panel.getBoundingClientRect();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2080 return {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2081 bottom: bounds.bottom,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2082 left: bounds.left,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2083 right: bounds.right,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2084 top: bounds.top,
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2085 };
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2086 });
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2087 assert.ok(mobileCalendarBounds.left >= 0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2088 assert.ok(mobileCalendarBounds.right <= 390);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2089 assert.ok(mobileCalendarBounds.top >= 0);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2090 assert.ok(mobileCalendarBounds.bottom <= 844);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2091 assert.deepEqual(mobileErrors, []);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2092 await mobileContext.close();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2093 } finally {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2094 if (browser) await browser.close();
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2095 await stopProcess(server);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2096 }
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2097 })().catch(error => {
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2098 console.error(error.stack \|\| error);
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2099 process.exitCode = 1;
60a876c4587a [ui] Add semantic primitive ownership MrJuneJune <me@mrjunejune.com> parents: diff changeset	2100 });