From a634b6c7454aaf329eec0df969eb0c5eb63cd943 Mon Sep 17 00:00:00 2001
From: adlee-was-taken <aaron.daniel.lee@gmail.com>
Date: Thu, 30 Apr 2026 20:52:26 -0400
Subject: [PATCH] refactor(ext): broaden required-pill test + drop dead .label
 .req CSS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Code-review feedback on Task 4:
- Test expanded from login-only to it.each across all 7 type forms
  (14 assertions total). A future revert to <span class="req">*</span>
  in any form now fails CI.
- .label .req rule removed from popup/styles.css and vault/vault.css —
  zero consumers after the REQUIRED_PILL_HTML migration.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 .../types/__tests__/required-pill.test.ts     | 31 +++++++++++++++----
 extension/src/popup/styles.css                |  6 ----
 extension/src/vault/vault.css                 |  6 ----
 3 files changed, 25 insertions(+), 18 deletions(-)

diff --git a/extension/src/popup/components/types/__tests__/required-pill.test.ts b/extension/src/popup/components/types/__tests__/required-pill.test.ts
index 5bc79d7..3ad1027 100644
--- a/extension/src/popup/components/types/__tests__/required-pill.test.ts
+++ b/extension/src/popup/components/types/__tests__/required-pill.test.ts
@@ -18,15 +18,34 @@ vi.mock('../../generator-panel', () => ({
   isGeneratorPanelOpen: () => false,
 }));
 
-import { renderForm } from '../login';
+import * as login from '../login';
+import * as secureNote from '../secure-note';
+import * as identity from '../identity';
+import * as card from '../card';
+import * as key from '../key';
+import * as totp from '../totp';
+import * as documentType from '../document';
+
+const forms: Array<[string, (app: HTMLElement, mode: 'add' | 'edit', existing: null) => void]> = [
+  ['login', login.renderForm],
+  ['secure-note', secureNote.renderForm],
+  ['identity', identity.renderForm],
+  ['card', card.renderForm],
+  ['key', key.renderForm],
+  ['totp', totp.renderForm],
+  ['document', documentType.renderForm],
+];
 
 describe('required-pill migration', () => {
   beforeEach(() => { document.body.innerHTML = '<div id="app"></div>'; });
 
-  it('login form title uses the required pill', () => {
-    renderForm(document.getElementById('app')!, 'add', null);
-    const titleLabel = document.querySelector('label[for="f-title"]');
-    expect(titleLabel?.innerHTML).toContain('required');
-    expect(titleLabel?.innerHTML).not.toContain('<span class="req">*</span>');
+  it.each(forms)('%s form has no legacy <span class="req"> markup', (_name, render) => {
+    render(document.getElementById('app')!, 'add', null);
+    expect(document.body.innerHTML).not.toContain('class="req"');
+  });
+
+  it.each(forms)('%s form contains the .req-pill markup on at least one label', (_name, render) => {
+    render(document.getElementById('app')!, 'add', null);
+    expect(document.body.innerHTML).toContain('class="req-pill">required</span>');
   });
 });
diff --git a/extension/src/popup/styles.css b/extension/src/popup/styles.css
index 9ce5127..a4d07e6 100644
--- a/extension/src/popup/styles.css
+++ b/extension/src/popup/styles.css
@@ -81,12 +81,6 @@ body {
   margin-bottom: 4px;
 }
 
-.label .req {
-  color: var(--accent-strong);
-  margin-left: 2px;
-  font-weight: 600;
-}
-
 .req-pill {
   display: inline-block;
   font-size: 9px;
diff --git a/extension/src/vault/vault.css b/extension/src/vault/vault.css
index 19272c7..e00dc0a 100644
--- a/extension/src/vault/vault.css
+++ b/extension/src/vault/vault.css
@@ -81,12 +81,6 @@ body {
   margin-bottom: 4px;
 }
 
-.label .req {
-  color: #aa812a;
-  margin-left: 2px;
-  font-weight: 600;
-}
-
 .req-pill {
   display: inline-block;
   font-size: 9px;