Standardize editable and non-editable input field patterns using Palette Manager V2 styles - PR_26126_078-template-editable-vs-noneditable-input-pattern

Author: DavidQ

docs/dev/reports/template_editable_noneditable_input_pattern.txt

@@ -5,9 +5,9 @@ Scope:
 - Added explicit Not Editable and Editable field examples to the Input Source section.
 - Matched Palette Manager V2 field styling patterns:
   - readonly display fields use muted readonly input styling
-  - editable text fields use normal input styling with editable focus/entry behavior
+  - editable text fields use the taller Tags `No tags.` box styling with editable focus/entry behavior
 - Documented the patterns in tools/templates-v2/README.md.
-- Added Playwright assertions for readonly and editable behavior.
+- Added Playwright assertions for readonly behavior, editable behavior, and the taller editable Tags-style box.
 
 Runtime behavior:
 - Existing source input, NAV, launch-mode behavior, status clear, and template actions are unchanged.
@@ -21,5 +21,5 @@ Validation:
 - npm run test:workspace-v2 passed, 7 tests.
 
 Manual test notes:
-- Open tools/templates-v2/index.html and confirm the Input Source section shows a readonly Not Editable field and editable Editable field.
+- Open tools/templates-v2/index.html and confirm the Input Source section shows a slim readonly Not Editable field and a taller editable Editable field containing `No tags.`.
 - Open tools/templates-v2/index.html?launch=workspace and confirm workspace NAV still appears without changing field pattern styling.

tools/templates-v2/README.md

@@ -108,8 +108,8 @@ The Tool Template V2 demonstrates this standard with Input Source on the left, P
 
 Tool Template V2 demonstrates both field patterns used by Palette Manager V2:
 
-- Non-editable display fields use the `tool-starter__field--not-editable` pattern with `readonly` inputs. The visible demo label is `Not Editable`.
-- Editable text fields use the `tool-starter__field--editable` pattern with normal text inputs. The visible demo label is `Editable`.
+- Non-editable display fields use the `tool-starter__field--not-editable` pattern with `readonly` inputs, matching the Selected Swatch `Symbol` row. The visible demo label is `Not Editable`.
+- Editable text fields use the `tool-starter__field--editable` pattern with `tool-starter__editable-tags-box`, matching the Tags `No tags.` box. The visible demo label is `Editable`.
 
 Use non-editable fields for display/read-only values. Use editable fields for user text entry.
 

tools/templates-v2/index.html

@@ -67,7 +67,7 @@ <h2 class="tools-platform-frame__eyebrow">First-Class Tools Surface V2</h2>
               </label>
               <label class="tool-starter__field tool-starter__field--compact tool-starter__field--editable" for="editableField">
                 <span>Editable</span>
-                <input id="editableField" type="text" autocomplete="off" placeholder="No tags">
+                <input id="editableField" class="tool-starter__editable-tags-box" type="text" autocomplete="off" value="No tags.">
               </label>
             </div>
             <p id="sourceValidationMessage" class="tool-starter__hint">Input is required before Export can process.</p>

tools/templates-v2/styles/toolStarter.css

@@ -324,13 +324,20 @@ textarea:hover {
   cursor: default;
 }
 
+.tool-starter__field--not-editable input {
+  padding-block: 0;
+}
+
 .tool-starter__field--editable input {
   background: var(--tool-starter-input-surface);
   color: var(--tool-starter-text);
 }
 
-.tool-starter__field--not-editable input {
-  background: var(--tool-starter-input-surface);
+.tool-starter__editable-tags-box {
+  min-height: 36px;
+  border-radius: 8px !important;
+  background: var(--tool-starter-panel-strong);
+  padding: 6px;
 }
 
 .tool-starter__hint {

tools/templates-v2/tests/playwright/FirstClassToolStarter.spec.mjs

@@ -120,6 +120,13 @@ test.describe("Tool Template V2", () => {
     await expect(notEditableField).toHaveValue("Read-only display value");
     await expect(page.locator("label[for='editableField']")).toContainText("Editable");
     await expect(editableField).toBeEditable();
+    await expect(editableField).toHaveValue("No tags.");
+    await expect(editableField).toHaveClass(/tool-starter__editable-tags-box/);
+    await expect(async () => {
+      const readonlyHeight = await notEditableField.evaluate((element) => element.getBoundingClientRect().height);
+      const editableHeight = await editableField.evaluate((element) => element.getBoundingClientRect().height);
+      expect(editableHeight).toBeGreaterThan(readonlyHeight);
+    }).toPass();
     await editableField.fill("tag-example");
     await expect(editableField).toHaveValue("tag-example");
   });