feat: integrate latest HMDesign design system updates

scripts/theme-verification.test.mjs

@@ -0,0 +1,29 @@
+import assert from 'node:assert/strict'
+import test from 'node:test'
+import { build } from 'vite'
+import { pathToFileURL } from 'node:url'
+import path from 'node:path'
+import React from 'react'
+import { renderToStaticMarkup } from 'react-dom/server'
+
+await build({ configFile: false, logLevel: 'silent', build: { outDir: '_local/theme-verification-test', emptyOutDir: false, lib: { entry: 'src/theme/verification-state.tsx', formats: ['es'], fileName: 'module' }, rolldownOptions: { external: id => !id.startsWith('.') && !path.isAbsolute(id) } } })
+const { waitForThemeState, VerificationStyles } = await import(pathToFileURL(path.resolve('_local/theme-verification-test/module.js')).href)
+
+test('Theme verification waits for the actual state, including asynchronous updates', async () => {
+  let ready = false, probes = 0
+  queueMicrotask(() => { ready = true })
+  await waitForThemeState(() => { probes++; return ready }, 'asynchronous Theme')
+  assert.ok(ready && probes >= 2)
+})
+
+test('Theme verification fails with a diagnostic when the state never becomes ready', async () => {
+  await assert.rejects(waitForThemeState(() => false, 'missing checked color'), /Theme state did not settle: missing checked color/)
+})
+
+test('Settled-target styles are limited to verification scope and define no Theme values', () => {
+  const css = renderToStaticMarkup(React.createElement(VerificationStyles)).replace(/<\/?style>/g, '')
+  assert.ok(css.split('{')[0].split(',').every(selector => selector.trim().startsWith('[data-hm-theme-verification]')))
+  assert.match(css, /transition-duration: 0s/)
+  assert.match(css, /transition-delay: 0s/)
+  assert.doesNotMatch(css, /background|color:|--hm-|:root/)
+})