✅ test: 钉住轻弹窗首行中线，避免按钮再低 3px

tests/unit/styles.test.js

@@ -64,6 +64,27 @@ test('the three popup glyphs stay distinguishable through state tokens', () => {
   assert.ok(CSS.includes('.dsn-toast-icon.is-question{color:var(--dsw-alias-state-business-primary)}'))
 })
 
+test('the popup first line is one band, because top-aligning it was the 3px bug', () => {
+  const rule = (name) => CSS.match(new RegExp(`\\.${name}\\{([^}]*)\\}`))?.[1] ?? ''
+
+  // The band is the title's line box. A control is 28px and the line box 22px, so
+  // top-aligning them (which `align-items:flex-start` alone did) drops the two
+  // buttons 3px below the text they sit next to.
+  assert.equal(/--dsn-toast-line:(\d+px)/.exec(rule('dsn-toast'))?.[1], '22px', 'the popup must declare its first-line band')
+  for (const name of ['dsn-toast', 'dsn-toast-title', 'dsn-toast-icon', 'dsn-toast-actions']) {
+    assert.ok(rule(name).includes('var(--dsn-toast-line)'), `.${name} must take its first-line height from the band`)
+  }
+
+  // The actions row has to BE the band and centre its contents on it; stretching
+  // it to its own content would put the controls back to top-aligned.
+  const actions = rule('dsn-toast-actions')
+  assert.ok(actions.includes('height:var(--dsn-toast-line)'), 'the actions row must be the band, not its buttons')
+  assert.ok(actions.includes('align-items:center'), 'the controls must centre on the band')
+  for (const control of ['dsn-toast-action', 'dsn-toast-close']) {
+    assert.ok(rule(control).includes('height:28px'), `.${control} must keep its own 28px hit area`)
+  }
+})
+
 test('every class the components render has a rule, so nothing falls back to defaults', () => {
   // Guards the redesign: a renamed class that the sheet no longer styles would
   // render as an unstyled block instead of failing loudly.