Merge branch 'develop' into 7303-fix-radio-hitbox

deleonio · web-flow · commit 68112155cd54 · 2025-06-03T06:44:42.000+02:00
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -76,7 +76,7 @@
 	},
 	"dependencies": {
 		"@floating-ui/dom": "1.6.13",
-		"adopted-style-sheets": "1.1.9-rc.17",
+		"adopted-style-sheets": "1.1.9-rc.18",
 		"clsx": "2.1.1",
 		"color-convert": "2.0.1",
 		"color-rgba": "2.4.0",
@@ -136,7 +136,7 @@
 		"typescript": "5.8.2"
 	},
 	"peerDependencies": {
-		"adopted-style-sheets": "1.1.9-rc.17"
+		"adopted-style-sheets": "1.1.9-rc.18"
 	},
 	"files": [
 		"assets",
diff --git a/packages/samples/angular/package.json b/packages/samples/angular/package.json
@@ -30,7 +30,7 @@
 		"@angular/compiler-cli": "17.3.12",
 		"@types/jasmine": "5.1.8",
 		"@tailwindcss/postcss": "4.1.8",
-		"adopted-style-sheets": "1.1.9-rc.17",
+		"adopted-style-sheets": "1.1.9-rc.18",
 		"cpy-cli": "5.0.0",
 		"karma-jasmine": "5.1.0",
 		"karma-chrome-launcher": "3.2.0",
diff --git a/packages/samples/react/package.json b/packages/samples/react/package.json
@@ -40,7 +40,7 @@
 		"@typescript-eslint/parser": "8.27.0",
 		"@unocss/preset-uno": "0.58.9",
 		"@unocss/webpack": "0.58.9",
-		"adopted-style-sheets": "1.1.9-rc.17",
+		"adopted-style-sheets": "1.1.9-rc.18",
 		"ajv": "8.17.1",
 		"chromedriver": "130.0.4",
 		"cpy-cli": "5.0.0",
diff --git a/packages/tools/benchmark-tests/benchmark-baseline.json b/packages/tools/benchmark-tests/benchmark-baseline.json
@@ -6,12 +6,12 @@
   },
   {
     "name": "kol-accordion",
-    "value": 63,
+    "value": 69,
     "unit": "ms"
   },
   {
     "name": "kol-alert",
-    "value": 27,
+    "value": 22,
     "unit": "ms"
   },
   {
@@ -21,17 +21,17 @@
   },
   {
     "name": "kol-badge",
-    "value": 30,
+    "value": 29,
     "unit": "ms"
   },
   {
     "name": "kol-breadcrumb",
-    "value": 17,
+    "value": 19,
     "unit": "ms"
   },
   {
     "name": "kol-button",
-    "value": 52,
+    "value": 55,
     "unit": "ms"
   },
   {
@@ -41,22 +41,22 @@
   },
   {
     "name": "kol-card",
-    "value": 26,
+    "value": 25,
     "unit": "ms"
   },
   {
     "name": "kol-details",
-    "value": 61,
+    "value": 59,
     "unit": "ms"
   },
   {
     "name": "kol-drawer",
-    "value": 10,
+    "value": 9,
     "unit": "ms"
   },
   {
     "name": "kol-form",
-    "value": 10,
+    "value": 15,
     "unit": "ms"
   },
   {
@@ -66,7 +66,7 @@
   },
   {
     "name": "kol-icon",
-    "value": 11,
+    "value": 10,
     "unit": "ms"
   },
   {
@@ -76,12 +76,12 @@
   },
   {
     "name": "kol-input-checkbox",
-    "value": 33,
+    "value": 34,
     "unit": "ms"
   },
   {
     "name": "kol-input-color",
-    "value": 32,
+    "value": 31,
     "unit": "ms"
   },
   {
@@ -91,12 +91,12 @@
   },
   {
     "name": "kol-input-email",
-    "value": 34,
+    "value": 35,
     "unit": "ms"
   },
   {
     "name": "kol-input-file",
-    "value": 59,
+    "value": 62,
     "unit": "ms"
   },
   {
@@ -106,22 +106,22 @@
   },
   {
     "name": "kol-input-password",
-    "value": 31,
+    "value": 30,
     "unit": "ms"
   },
   {
     "name": "kol-input-radio",
-    "value": 27,
+    "value": 26,
     "unit": "ms"
   },
   {
     "name": "kol-input-text",
-    "value": 37,
+    "value": 32,
     "unit": "ms"
   },
   {
     "name": "kol-link",
-    "value": 48,
+    "value": 47,
     "unit": "ms"
   },
   {
@@ -131,7 +131,7 @@
   },
   {
     "name": "kol-modal",
-    "value": 8,
+    "value": 7,
     "unit": "ms"
   },
   {
@@ -141,7 +141,7 @@
   },
   {
     "name": "kol-pagination",
-    "value": 70,
+    "value": 67,
     "unit": "ms"
   },
   {
@@ -151,17 +151,17 @@
   },
   {
     "name": "kol-progress",
-    "value": 7,
+    "value": 6,
     "unit": "ms"
   },
   {
     "name": "kol-quote",
-    "value": 7,
+    "value": 6,
     "unit": "ms"
   },
   {
     "name": "kol-select",
-    "value": 33,
+    "value": 28,
     "unit": "ms"
   },
   {
@@ -176,12 +176,12 @@
   },
   {
     "name": "kol-split-button",
-    "value": 56,
+    "value": 55,
     "unit": "ms"
   },
   {
     "name": "kol-table-stateful",
-    "value": 76,
+    "value": 73,
     "unit": "ms"
   },
   {
@@ -191,12 +191,12 @@
   },
   {
     "name": "kol-tabs",
-    "value": 11,
+    "value": 10,
     "unit": "ms"
   },
   {
     "name": "kol-textarea",
-    "value": 35,
+    "value": 28,
     "unit": "ms"
   },
   {
@@ -211,7 +211,7 @@
   },
   {
     "name": "kol-tree-item",
-    "value": 51,
+    "value": 56,
     "unit": "ms"
   },
   {
diff --git a/packages/tools/benchmark-tests/package.json b/packages/tools/benchmark-tests/package.json
@@ -35,7 +35,7 @@
 		"@playwright/test": "1.49.1",
 		"@public-ui/components": "workspace:*",
 		"@public-ui/theme-default": "workspace:*",
-		"adopted-style-sheets": "1.1.9-rc.17",
+		"adopted-style-sheets": "1.1.9-rc.18",
 		"cpy-cli": "5.0.0",
 		"knip": "5.46.0",
 		"npm-run-all2": "8.0.4",
diff --git a/packages/tools/benchmark-tests/scripts/compare-benchmark.mjs b/packages/tools/benchmark-tests/scripts/compare-benchmark.mjs
@@ -2,8 +2,8 @@ import { existsSync, readFileSync, writeFileSync } from 'node:fs';
 
 const loadJson = (path) => (existsSync(path) ? JSON.parse(readFileSync(path, 'utf-8')) : []);
 
-const current = loadJson('benchmark-result.json');
-const baseline = loadJson('benchmark-baseline.json');
+const current = loadJson(`benchmark-result.json`);
+const baseline = loadJson(`benchmark-baseline.json`);
 
 const rows = [];
 let hasRegression = false;
@@ -59,10 +59,10 @@ markdown += `|-----------|---------|----------|-----|--------|\n`;
 markdown += rest.map((r) => r.markdown).join('\n') + '\n';
 markdown += `</details>\n`;
 
-writeFileSync('benchmark-report.md', markdown);
+writeFileSync(`benchmark-report.md`, markdown);
 
 if (hasRegression) {
-	console.error('❌ Performance regression detected.');
+	console.warn(`❌ Performance regression detected.`);
 } else {
-	console.log('✅ No significant regression.');
+	console.log(`✅ No significant regression.`);
 }
diff --git a/packages/tools/benchmark-tests/tests/benchmark.test.ts b/packages/tools/benchmark-tests/tests/benchmark.test.ts
@@ -65,28 +65,35 @@ const TEST_TIMEOUT = parseInt(process.env.TEST_TIMEOUT || '5000', 10);
 
 test.beforeEach(async ({ page }) => {
 	await page.goto('http://localhost:3000/test-page.html');
+	await page.waitForLoadState('networkidle');
 });
 
 for (const tag of TAGS) {
 	for (let idx = 0; idx < TEST_ITERATIONS; idx++) {
-		test(`${tag} hydration iteration ${idx + 1}`, async ({ page }) => {
-			await page.evaluate(() => window.gc?.());
-
-			const duration = await page.evaluate(
-				async ({ tag, timeout, idx }) => {
+		test(`${tag} hydration (${idx + 1})`, async ({ page }) => {
+			const { hydratedTime } = await page.evaluate(
+				async ({ tag, timeout }) => {
+					window.gc?.();
 					await customElements.whenDefined(tag);
-
 					const el = document.createElement(tag);
-					el.setAttribute('data-test', `hydration-${idx}`);
-					const start = performance.now();
 					document.body.appendChild(el);
+					const start = performance.now();
+					let hydratedTime: number | null = null;
+					let themedTime: number | null = null;
 
 					await new Promise<void>((resolve) => {
 						let cleaned = false;
 
 						const timeoutId = setTimeout(cleanup, timeout);
+
 						const observer = new MutationObserver(() => {
-							if (el.classList.contains('hydrated')) cleanup();
+							if (!hydratedTime && el.classList.contains('hydrated')) {
+								hydratedTime = performance.now() - start;
+							}
+							if (hydratedTime && el.hasAttribute('data-themed')) {
+								themedTime = performance.now() - hydratedTime;
+								cleanup();
+							}
 						});
 
 						function cleanup() {
@@ -100,24 +107,28 @@ for (const tag of TAGS) {
 
 						observer.observe(el, {
 							attributes: true,
-							attributeFilter: ['class'],
+							attributeFilter: ['class', 'data-themed'],
 						});
 					});
 
-					const end = performance.now();
-					return end - start;
+					return {
+						hydratedTime,
+						themedTime,
+					};
 				},
-				{ tag, timeout: TEST_TIMEOUT, idx },
+				{ tag, timeout: TEST_TIMEOUT },
 			);
 
-			if (!results.has(tag)) {
-				results.set(tag, {
-					name: tag,
-					values: [],
-					unit: 'ms',
-				});
+			if (hydratedTime !== null) {
+				if (!results.has(tag)) {
+					results.set(tag, {
+						name: tag,
+						values: [],
+						unit: 'ms',
+					});
+				}
+				results.get(tag)!.values.push(Math.round(hydratedTime));
 			}
-			results.get(tag)!.values.push(Math.round(duration));
 		});
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -6,12 +6,12 @@`
`6`	`6`	`},`
`7`	`7`	`{`
`8`	`8`	`"name": "kol-accordion",`
`9`		`- "value": 63,`
	`9`	`+ "value": 69,`
`10`	`10`	`"unit": "ms"`
`11`	`11`	`},`
`12`	`12`	`{`
`13`	`13`	`"name": "kol-alert",`
`14`		`- "value": 27,`
	`14`	`+ "value": 22,`
`15`	`15`	`"unit": "ms"`
`16`	`16`	`},`
`17`	`17`	`{`
`@@ -21,17 +21,17 @@`
`21`	`21`	`},`
`22`	`22`	`{`
`23`	`23`	`"name": "kol-badge",`
`24`		`- "value": 30,`
	`24`	`+ "value": 29,`
`25`	`25`	`"unit": "ms"`
`26`	`26`	`},`
`27`	`27`	`{`
`28`	`28`	`"name": "kol-breadcrumb",`
`29`		`- "value": 17,`
	`29`	`+ "value": 19,`
`30`	`30`	`"unit": "ms"`
`31`	`31`	`},`
`32`	`32`	`{`
`33`	`33`	`"name": "kol-button",`
`34`		`- "value": 52,`
	`34`	`+ "value": 55,`
`35`	`35`	`"unit": "ms"`
`36`	`36`	`},`
`37`	`37`	`{`
`@@ -41,22 +41,22 @@`
`41`	`41`	`},`
`42`	`42`	`{`
`43`	`43`	`"name": "kol-card",`
`44`		`- "value": 26,`
	`44`	`+ "value": 25,`
`45`	`45`	`"unit": "ms"`
`46`	`46`	`},`
`47`	`47`	`{`
`48`	`48`	`"name": "kol-details",`
`49`		`- "value": 61,`
	`49`	`+ "value": 59,`
`50`	`50`	`"unit": "ms"`
`51`	`51`	`},`
`52`	`52`	`{`
`53`	`53`	`"name": "kol-drawer",`
`54`		`- "value": 10,`
	`54`	`+ "value": 9,`
`55`	`55`	`"unit": "ms"`
`56`	`56`	`},`
`57`	`57`	`{`
`58`	`58`	`"name": "kol-form",`
`59`		`- "value": 10,`
	`59`	`+ "value": 15,`
`60`	`60`	`"unit": "ms"`
`61`	`61`	`},`
`62`	`62`	`{`
`@@ -66,7 +66,7 @@`
`66`	`66`	`},`
`67`	`67`	`{`
`68`	`68`	`"name": "kol-icon",`
`69`		`- "value": 11,`
	`69`	`+ "value": 10,`
`70`	`70`	`"unit": "ms"`
`71`	`71`	`},`
`72`	`72`	`{`
`@@ -76,12 +76,12 @@`
`76`	`76`	`},`
`77`	`77`	`{`
`78`	`78`	`"name": "kol-input-checkbox",`
`79`		`- "value": 33,`
	`79`	`+ "value": 34,`
`80`	`80`	`"unit": "ms"`
`81`	`81`	`},`
`82`	`82`	`{`
`83`	`83`	`"name": "kol-input-color",`
`84`		`- "value": 32,`
	`84`	`+ "value": 31,`
`85`	`85`	`"unit": "ms"`
`86`	`86`	`},`
`87`	`87`	`{`
`@@ -91,12 +91,12 @@`
`91`	`91`	`},`
`92`	`92`	`{`
`93`	`93`	`"name": "kol-input-email",`
`94`		`- "value": 34,`
	`94`	`+ "value": 35,`
`95`	`95`	`"unit": "ms"`
`96`	`96`	`},`
`97`	`97`	`{`
`98`	`98`	`"name": "kol-input-file",`
`99`		`- "value": 59,`
	`99`	`+ "value": 62,`
`100`	`100`	`"unit": "ms"`
`101`	`101`	`},`
`102`	`102`	`{`
`@@ -106,22 +106,22 @@`
`106`	`106`	`},`
`107`	`107`	`{`
`108`	`108`	`"name": "kol-input-password",`
`109`		`- "value": 31,`
	`109`	`+ "value": 30,`
`110`	`110`	`"unit": "ms"`
`111`	`111`	`},`
`112`	`112`	`{`
`113`	`113`	`"name": "kol-input-radio",`
`114`		`- "value": 27,`
	`114`	`+ "value": 26,`
`115`	`115`	`"unit": "ms"`
`116`	`116`	`},`
`117`	`117`	`{`
`118`	`118`	`"name": "kol-input-text",`
`119`		`- "value": 37,`
	`119`	`+ "value": 32,`
`120`	`120`	`"unit": "ms"`
`121`	`121`	`},`
`122`	`122`	`{`
`123`	`123`	`"name": "kol-link",`
`124`		`- "value": 48,`
	`124`	`+ "value": 47,`
`125`	`125`	`"unit": "ms"`
`126`	`126`	`},`
`127`	`127`	`{`
`@@ -131,7 +131,7 @@`
`131`	`131`	`},`
`132`	`132`	`{`
`133`	`133`	`"name": "kol-modal",`
`134`		`- "value": 8,`
	`134`	`+ "value": 7,`
`135`	`135`	`"unit": "ms"`
`136`	`136`	`},`
`137`	`137`	`{`
`@@ -141,7 +141,7 @@`
`141`	`141`	`},`
`142`	`142`	`{`
`143`	`143`	`"name": "kol-pagination",`
`144`		`- "value": 70,`
	`144`	`+ "value": 67,`
`145`	`145`	`"unit": "ms"`
`146`	`146`	`},`
`147`	`147`	`{`
`@@ -151,17 +151,17 @@`
`151`	`151`	`},`
`152`	`152`	`{`
`153`	`153`	`"name": "kol-progress",`
`154`		`- "value": 7,`
	`154`	`+ "value": 6,`
`155`	`155`	`"unit": "ms"`
`156`	`156`	`},`
`157`	`157`	`{`
`158`	`158`	`"name": "kol-quote",`
`159`		`- "value": 7,`
	`159`	`+ "value": 6,`
`160`	`160`	`"unit": "ms"`
`161`	`161`	`},`
`162`	`162`	`{`
`163`	`163`	`"name": "kol-select",`
`164`		`- "value": 33,`
	`164`	`+ "value": 28,`
`165`	`165`	`"unit": "ms"`
`166`	`166`	`},`
`167`	`167`	`{`
`@@ -176,12 +176,12 @@`
`176`	`176`	`},`
`177`	`177`	`{`
`178`	`178`	`"name": "kol-split-button",`
`179`		`- "value": 56,`
	`179`	`+ "value": 55,`
`180`	`180`	`"unit": "ms"`
`181`	`181`	`},`
`182`	`182`	`{`
`183`	`183`	`"name": "kol-table-stateful",`
`184`		`- "value": 76,`
	`184`	`+ "value": 73,`
`185`	`185`	`"unit": "ms"`
`186`	`186`	`},`
`187`	`187`	`{`
`@@ -191,12 +191,12 @@`
`191`	`191`	`},`
`192`	`192`	`{`
`193`	`193`	`"name": "kol-tabs",`
`194`		`- "value": 11,`
	`194`	`+ "value": 10,`
`195`	`195`	`"unit": "ms"`
`196`	`196`	`},`
`197`	`197`	`{`
`198`	`198`	`"name": "kol-textarea",`
`199`		`- "value": 35,`
	`199`	`+ "value": 28,`
`200`	`200`	`"unit": "ms"`
`201`	`201`	`},`
`202`	`202`	`{`
`@@ -211,7 +211,7 @@`
`211`	`211`	`},`
`212`	`212`	`{`
`213`	`213`	`"name": "kol-tree-item",`
`214`		`- "value": 51,`
	`214`	`+ "value": 56,`
`215`	`215`	`"unit": "ms"`
`216`	`216`	`},`
`217`	`217`	`{`