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

annotate design_system/test/catalog_test.js @ 279:b3b547563ec7

Add Google connector service and agent wiki Implement the C/Seobeo Google Drive and Gmail connector with encrypted OAuth storage, Zenbu authentication, browser testing, AI tool discovery, chunked HTTP decoding, and Bazel coverage. Consolidate repository guidance into progressive wiki documentation and enforce arena-first allocation for new first-party C code. Co-authored-by: Copilot <[email protected]> Copilot-Session: 84c338fd-0939-4bb3-b7f3-1062eb213e5d

author	MrJuneJune <me@mrjunejune.com>
date	Mon, 17 Aug 2026 22:22:36 -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 });