docs(09-01): complete MD3 primitives plan — TextFieldMD3, button constants, DEBT-01 resolved

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

.planning/REQUIREMENTS.md

@@ -12,8 +12,8 @@
 
 ### Components
 
-- [ ] **COMP-01**: All text inputs render as MD3 outlined text fields with floating labels that animate on focus and when the field has content
+- [x] **COMP-01**: All text inputs render as MD3 outlined text fields with floating labels that animate on focus and when the field has content
-- [ ] **COMP-02**: Buttons follow MD3 hierarchy — filled for primary actions (Next, Download), outlined for secondary (Back, Copy), text for tertiary
+- [x] **COMP-02**: Buttons follow MD3 hierarchy — filled for primary actions (Next, Download), outlined for secondary (Back, Copy), text for tertiary
 - [ ] **COMP-03**: Backend selection cards and output blocks use MD3 elevation with tonal surface tint, consistent padding, and shape tokens
 - [x] **COMP-04**: Step indicator displays as numbered circles connected by lines, with completed steps showing a checkmark, current step highlighted, and future steps muted
 
@@ -33,7 +33,7 @@
 
 ### Tech Debt
 
-- [ ] **DEBT-01**: FieldRenderer uses consistent `aria-label` pattern across text-branch and select-branch (resolving v1.1 cosmetic debt)
+- [x] **DEBT-01**: FieldRenderer uses consistent `aria-label` pattern across text-branch and select-branch (resolving v1.1 cosmetic debt)
 
 ## Future Requirements
 
@@ -58,11 +58,11 @@
 |-------------|-------|--------|
 | THEME-01 | Phase 8 | Complete |
 | THEME-02 | Phase 8 | Complete |
-| COMP-01 | Phase 9 | Pending |
+| COMP-01 | Phase 9 | Complete |
-| COMP-02 | Phase 9 | Pending |
+| COMP-02 | Phase 9 | Complete |
 | COMP-03 | Phase 9 | Pending |
 | COMP-04 | Phase 9 | Complete |
-| DEBT-01 | Phase 9 | Pending |
+| DEBT-01 | Phase 9 | Complete |
 | UX-01 | Phase 10 | Pending |
 | UX-02 | Phase 10 | Pending |
 | UX-03 | Phase 10 | Pending |

.planning/ROADMAP.md

@@ -66,7 +66,7 @@ Plans:
   3. Backend selection cards and output blocks display MD3 elevation with tonal surface tint and consistent shape tokens
   4. Step indicator shows numbered circles connected by lines, with checkmarks on completed steps, highlight on current, and muted future steps
   5. FieldRenderer produces identical `aria-label` attributes for both text-branch and select-branch inputs
-**Plans:** 1/3 plans executed
+**Plans:** 2/3 plans executed
 Plans:
 - [ ] 09-01-PLAN.md — TextFieldMD3 component, MD3 button constants, DEBT-01 aria-label fix
 - [ ] 09-02-PLAN.md — StepIndicator rebuild with MD3 circles and connectors
@@ -106,6 +106,6 @@ Plans:
 | 6. New Backends | v1.1 | 4/4 | Complete | 2026-03-31 |
 | 7. Validation & UX Polish | v1.1 | 3/3 | Complete | 2026-03-31 |
 | 8. Theme Foundation | v1.2 | 2/2 | Complete | 2026-04-01 |
-| 9. MD3 Components | 1/3 | In Progress|  | - |
+| 9. MD3 Components | 2/3 | In Progress|  | - |
 | 10. Content & Clarity | v1.2 | 0/? | Not started | - |
 | 11. Polish & Responsiveness | v1.2 | 0/? | Not started | - |

.planning/STATE.md

@@ -3,14 +3,14 @@ gsd_state_version: 1.0
 milestone: v1.2
 milestone_name: UI Polish & Clarity
 status: in-progress
-stopped_at: Completed 09-02 — StepIndicator MD3 rebuild complete
+stopped_at: Completed 09-01 — TextFieldMD3, MD3 button constants, and DEBT-01 aria-label fix
-last_updated: "2026-04-01T07:20:16.150Z"
+last_updated: "2026-04-01T07:25:34.544Z"
 last_activity: 2026-04-01 — Phase 8 complete (THEME-01, THEME-02 satisfied)
 progress:
   total_phases: 4
   completed_phases: 1
   total_plans: 5
-  completed_plans: 3
+  completed_plans: 4
 ---
 
 ---
@@ -64,6 +64,8 @@ Recent decisions affecting current work:
 - [Phase 08-02]: User visually confirmed light/dark theme renders correctly across all 4 wizard steps — THEME-01 and THEME-02 complete
 - [Phase 09-02]: Label text inside button element (not adjacent) preserves test selector compatibility: textContent includes step name
 - [Phase 09-02]: Pre-existing TextFieldMD3.test.tsx failure scoped out — component not yet built, belongs to future plan
+- [Phase 09-md3-components]: TextFieldMD3 uses CSS-only floating label via peer-[:not(:placeholder-shown)] without JS state
+- [Phase 09-md3-components]: DEBT-01 fix: tooltip buttons use aria-label directly; RemoteConfigStep.test updated with { selector: 'input' } to prevent aria-label/label ambiguity
 
 ### Pending Todos
 
@@ -75,6 +77,6 @@ None yet.
 
 ## Session Continuity
 
-Last session: 2026-04-01T07:20:16.148Z
+Last session: 2026-04-01T07:25:34.541Z
-Stopped at: Completed 09-02 — StepIndicator MD3 rebuild complete
+Stopped at: Completed 09-01 — TextFieldMD3, MD3 button constants, and DEBT-01 aria-label fix
 Resume file: None

.planning/phases/09-md3-components/09-01-SUMMARY.md

@@ -0,0 +1,73 @@
+---
+phase: 09-md3-components
+plan: "01"
+subsystem: ui-components
+tags: [md3, floating-label, aria, accessibility, debt]
+dependency_graph:
+  requires: []
+  provides: [TextFieldMD3, MD3_BTN_FILLED, MD3_BTN_OUTLINED, MD3_BTN_TEXT, FieldRenderer-aria-fix]
+  affects: [FieldRenderer, PasswordField, RemoteConfigStep.test]
+tech_stack:
+  added: []
+  patterns: [css-peer-floating-label, aria-label-direct, md3-button-constants]
+key_files:
+  created:
+    - src/components/ui/TextFieldMD3.tsx
+    - src/components/ui/TextFieldMD3.test.tsx
+    - src/styles/md3-buttons.ts
+    - src/components/ui/FieldRenderer.test.tsx
+  modified:
+    - src/components/ui/FieldRenderer.tsx
+    - src/components/ui/PasswordField.tsx
+    - src/components/wizard/RemoteConfigStep.test.tsx
+decisions:
+  - "Used peer-[:not(:placeholder-shown)] arbitrary variant for has-value floating label detection (Tailwind v4 supports bracket syntax)"
+  - "TextFieldMD3 uses placeholder=' ' (space) to drive CSS-only floating label, not JS state"
+  - "Updated RemoteConfigStep.test.tsx getByLabelText to add { selector: 'input' } to prevent matching tooltip button aria-labels (Rule 1 regression fix)"
+metrics:
+  duration_seconds: 381
+  completed_date: "2026-04-01"
+  tasks_completed: 2
+  tasks_total: 2
+  files_created: 4
+  files_modified: 3
+---
+
+# Phase 9 Plan 01: MD3 UI Primitives Summary
+
+**One-liner:** CSS-only floating label TextFieldMD3 component + MD3 button class constants + DEBT-01 aria-label consistency fix across FieldRenderer, PasswordField, and tooltip buttons.
+
+## Tasks Completed
+
+| Task | Name | Commit | Status |
+|------|------|--------|--------|
+| 1 | Create TextFieldMD3 + MD3 button constants | 9441dcd | Complete |
+| 2 | Fix DEBT-01 aria-label in FieldRenderer + tests | 532a994 | Complete |
+
+## Verification
+
+- `npx vitest run src/components/ui/TextFieldMD3.test.tsx` — 9/9 tests pass
+- `npx vitest run src/components/ui/FieldRenderer.test.tsx` — 4/4 tests pass
+- `npx vitest run --reporter=dot` — 179/179 tests pass (zero regressions)
+- `src/styles/md3-buttons.ts` exports `MD3_BTN_FILLED`, `MD3_BTN_OUTLINED`, `MD3_BTN_TEXT`
+
+## Decisions Made
+
+1. **Tailwind v4 `peer-[:not(:placeholder-shown)]` arbitrary variant:** Used the bracket syntax form directly — verified it passes through the test suite correctly. No need for the `data-has-value` JS fallback.
+
+2. **`placeholder=" "` (space) for floating label:** TextFieldMD3 always renders with `placeholder=" "` and `placeholder-transparent` CSS. This is the CSS-only detection mechanism for the `:not(:placeholder-shown)` pseudo-class — no React state needed.
+
+3. **`{ selector: 'input' }` added to RemoteConfigStep.test.tsx:** Once tooltip buttons received `aria-label="More info about {field.label}"`, the `getByLabelText(/sas url/i)` query matched both the input (via its `<label>` association) and the tooltip button (via its `aria-label`). Fixed by scoping the query to `{ selector: 'input' }` in 6 call sites. This is correct behavior — the tests were too broad before.
+
+## Deviations from Plan
+
+### Auto-fixed Issues
+
+**1. [Rule 1 - Bug] Test regression from DEBT-01 aria-label fix**
+- **Found during:** Task 2, after fixing FieldRenderer.tsx
+- **Issue:** `getByLabelText(/sas url/i)` in RemoteConfigStep.test.tsx started matching both the PasswordField input (via label association) AND the new tooltip button `aria-label="More info about SAS URL"`, causing "Found multiple elements" errors in 9 tests.
+- **Fix:** Added `{ selector: 'input' }` option to 6 `getByLabelText` call sites in RemoteConfigStep.test.tsx that queried fields with tooltip buttons. This scopes the accessible name lookup to input elements only.
+- **Files modified:** `src/components/wizard/RemoteConfigStep.test.tsx`
+- **Commit:** 532a994 (included in Task 2 commit)
+
+## Self-Check: PASSED