x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>DOCUMENT CHECKLIST:</strong> Per-document status rows for an admissions checklist<br> <strong>COMPOSES:</strong> .badge-eligibility-* (status pill) | .file-upload (action slot) | .btn-tertiary (view) | .empty-state | .callout </p> <p class="tw:mb-0 tw:text-sm"> One row per required or optional document — name + meta, a status pill, and an action (upload / re-upload / view). No new Stimulus controller: upload behavior comes entirely from the composed <code>.file-upload</code> instance in each row's action slot. </p> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Mixed statuses</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Status pill mapping:</strong> received → <code>.badge-eligibility-eligible</code> (success) · required → <code>.badge-eligibility-unknown</code> (neutral, not yet provided) · rejected → <code>.badge-eligibility-not-eligible</code> (warning trio, needs resubmission) · optional → <code>.badge-eligibility-info</code> (magenta, no strict requirement). Every pill carries its own text label, never color alone. </p> </div> <div class="card tw:max-w-2xl"> <div class="card-body"> <ul class="doc-checklist"> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Proof of address</p> <p class="doc-checklist-meta">PDF · 2.1MB · Uploaded 14 March 2026</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-eligible">Received</span> <div class="doc-checklist-action"> <button class="btn btn-tertiary btn-sm" type="button" aria-label="View Proof of address"> <i class="fa-regular fa-eye" aria-hidden="true"></i> View </button> </div> </li> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Birth certificate</p> <p class="doc-checklist-meta">Required for Year 7 entry — not yet provided</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-unknown">Required</span> <div class="doc-checklist-action"> <div class="file-upload" data-controller="file-upload"> <input type="file" class="tw:sr-only" data-file-upload-target="input" data-action="change->file-upload#changed" accept=".pdf,.jpg,.png" aria-label="Upload Birth certificate"> <button class="btn btn-secondary btn-sm" type="button" data-action="click->file-upload#browse" aria-label="Upload Birth certificate"> <i class="fa-regular fa-arrow-up-from-bracket" aria-hidden="true"></i> Upload </button> <div class="file-upload-list" data-file-upload-target="list" aria-live="polite"></div> </div> </div> </li> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Photo ID</p> <p class="doc-checklist-meta">Rejected: the photo was too blurry to verify — please re-upload a clear copy.</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-not-eligible">Rejected</span> <div class="doc-checklist-action"> <div class="file-upload" data-controller="file-upload"> <input type="file" class="tw:sr-only" data-file-upload-target="input" data-action="change->file-upload#changed" accept=".pdf,.jpg,.png" aria-label="Re-upload Photo ID"> <button class="btn btn-secondary btn-sm" type="button" data-action="click->file-upload#browse" aria-label="Re-upload Photo ID"> <i class="fa-regular fa-arrow-rotate-right" aria-hidden="true"></i> Re-upload </button> <div class="file-upload-list" data-file-upload-target="list" aria-live="polite"></div> </div> </div> </li> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Medical information form</p> <p class="doc-checklist-meta">Optional — only needed if your child has a medical condition we should know about</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-info">Optional</span> <div class="doc-checklist-action"> <div class="file-upload" data-controller="file-upload"> <input type="file" class="tw:sr-only" data-file-upload-target="input" data-action="change->file-upload#changed" accept=".pdf,.jpg,.png" aria-label="Add Medical information form"> <button class="btn btn-secondary btn-sm" type="button" data-action="click->file-upload#browse" aria-label="Add Medical information form"> <i class="fa-regular fa-plus" aria-hidden="true"></i> Add </button> <div class="file-upload-list" data-file-upload-target="list" aria-live="polite"></div> </div> </div> </li> </ul> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><ul class="doc-checklist"><li class="doc-checklist-item"><i class="fa-regular fa-file-lines …"></i><div><p class="doc-checklist-name">…</p><p class="doc-checklist-meta">…</p></div><span class="doc-checklist-status badge-eligibility badge-eligibility-eligible">Received</span><div class="doc-checklist-action"><button class="btn btn-tertiary btn-sm" aria-label="View {document name}">…</button></div></li></ul></code> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">All documents received</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>All-complete state:</strong> every row shows the received pill; a <code>.callout</code> above the list confirms completion in plain language rather than relying on the pills alone to communicate "you're done." </p> </div> <div class="card tw:max-w-2xl"> <div class="card-body"> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>All documents received.</strong> Thank you — there's nothing more to upload for this application. We'll be in touch once the panel has reviewed everything. </p> </div> <ul class="doc-checklist"> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Proof of address</p> <p class="doc-checklist-meta">PDF · 2.1MB · Uploaded 14 March 2026</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-eligible">Received</span> <div class="doc-checklist-action"> <button class="btn btn-tertiary btn-sm" type="button" aria-label="View Proof of address"> <i class="fa-regular fa-eye" aria-hidden="true"></i> View </button> </div> </li> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Birth certificate</p> <p class="doc-checklist-meta">PDF · 640KB · Uploaded 15 March 2026</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-eligible">Received</span> <div class="doc-checklist-action"> <button class="btn btn-tertiary btn-sm" type="button" aria-label="View Birth certificate"> <i class="fa-regular fa-eye" aria-hidden="true"></i> View </button> </div> </li> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Photo ID</p> <p class="doc-checklist-meta">JPG · 1.4MB · Uploaded 15 March 2026</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-eligible">Received</span> <div class="doc-checklist-action"> <button class="btn btn-tertiary btn-sm" type="button" aria-label="View Photo ID"> <i class="fa-regular fa-eye" aria-hidden="true"></i> View </button> </div> </li> </ul> </div> </div> </div> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">No documents required yet</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Empty state:</strong> before the school has set a document list for this application (or on a course with no document requirements at all), the checklist composes <code>.empty-state</code> instead of rendering an empty <code>.doc-checklist</code>. </p> </div> <div class="card tw:max-w-2xl"> <div class="card-body"> <div class="empty-state"> <i class="fa-regular fa-folder-open empty-state-icon" aria-hidden="true"></i> <h3 class="empty-state-title">No documents required yet</h3> <p class="empty-state-text">The school hasn't requested any documents for this application. We'll let you know here if that changes.</p> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="empty-state"><i class="fa-regular fa-folder-open empty-state-icon"></i><h3 class="empty-state-title">No documents required yet</h3><p class="empty-state-text">…</p></div></code> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <%# Introductory callout %> <div class="callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>DOCUMENT CHECKLIST:</strong> Per-document status rows for an admissions checklist<br> <strong>COMPOSES:</strong> .badge-eligibility-* (status pill) | .file-upload (action slot) | .btn-tertiary (view) | .empty-state | .callout </p> <p class="tw:mb-0 tw:text-sm"> One row per required or optional document — name + meta, a status pill, and an action (upload / re-upload / view). No new Stimulus controller: upload behavior comes entirely from the composed <code>.file-upload</code> instance in each row's action slot. </p> </div> <%# Mixed statuses %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">Mixed statuses</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Status pill mapping:</strong> received → <code>.badge-eligibility-eligible</code> (success) · required → <code>.badge-eligibility-unknown</code> (neutral, not yet provided) · rejected → <code>.badge-eligibility-not-eligible</code> (warning trio, needs resubmission) · optional → <code>.badge-eligibility-info</code> (magenta, no strict requirement). Every pill carries its own text label, never color alone. </p> </div> <div class="card tw:max-w-2xl"> <div class="card-body"> <ul class="doc-checklist"> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Proof of address</p> <p class="doc-checklist-meta">PDF · 2.1MB · Uploaded 14 March 2026</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-eligible">Received</span> <div class="doc-checklist-action"> <button class="btn btn-tertiary btn-sm" type="button" aria-label="View Proof of address"> <i class="fa-regular fa-eye" aria-hidden="true"></i> View </button> </div> </li> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Birth certificate</p> <p class="doc-checklist-meta">Required for Year 7 entry — not yet provided</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-unknown">Required</span> <div class="doc-checklist-action"> <div class="file-upload" data-controller="file-upload"> <input type="file" class="tw:sr-only" data-file-upload-target="input" data-action="change->file-upload#changed" accept=".pdf,.jpg,.png" aria-label="Upload Birth certificate"> <button class="btn btn-secondary btn-sm" type="button" data-action="click->file-upload#browse" aria-label="Upload Birth certificate"> <i class="fa-regular fa-arrow-up-from-bracket" aria-hidden="true"></i> Upload </button> <div class="file-upload-list" data-file-upload-target="list" aria-live="polite"></div> </div> </div> </li> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Photo ID</p> <p class="doc-checklist-meta">Rejected: the photo was too blurry to verify — please re-upload a clear copy.</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-not-eligible">Rejected</span> <div class="doc-checklist-action"> <div class="file-upload" data-controller="file-upload"> <input type="file" class="tw:sr-only" data-file-upload-target="input" data-action="change->file-upload#changed" accept=".pdf,.jpg,.png" aria-label="Re-upload Photo ID"> <button class="btn btn-secondary btn-sm" type="button" data-action="click->file-upload#browse" aria-label="Re-upload Photo ID"> <i class="fa-regular fa-arrow-rotate-right" aria-hidden="true"></i> Re-upload </button> <div class="file-upload-list" data-file-upload-target="list" aria-live="polite"></div> </div> </div> </li> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Medical information form</p> <p class="doc-checklist-meta">Optional — only needed if your child has a medical condition we should know about</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-info">Optional</span> <div class="doc-checklist-action"> <div class="file-upload" data-controller="file-upload"> <input type="file" class="tw:sr-only" data-file-upload-target="input" data-action="change->file-upload#changed" accept=".pdf,.jpg,.png" aria-label="Add Medical information form"> <button class="btn btn-secondary btn-sm" type="button" data-action="click->file-upload#browse" aria-label="Add Medical information form"> <i class="fa-regular fa-plus" aria-hidden="true"></i> Add </button> <div class="file-upload-list" data-file-upload-target="list" aria-live="polite"></div> </div> </div> </li> </ul> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><ul class="doc-checklist"><li class="doc-checklist-item"><i class="fa-regular fa-file-lines …"></i><div><p class="doc-checklist-name">…</p><p class="doc-checklist-meta">…</p></div><span class="doc-checklist-status badge-eligibility badge-eligibility-eligible">Received</span><div class="doc-checklist-action"><button class="btn btn-tertiary btn-sm" aria-label="View {document name}">…</button></div></li></ul></code> </div> </div> <%# All complete %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">All documents received</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>All-complete state:</strong> every row shows the received pill; a <code>.callout</code> above the list confirms completion in plain language rather than relying on the pills alone to communicate "you're done." </p> </div> <div class="card tw:max-w-2xl"> <div class="card-body"> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>All documents received.</strong> Thank you — there's nothing more to upload for this application. We'll be in touch once the panel has reviewed everything. </p> </div> <ul class="doc-checklist"> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Proof of address</p> <p class="doc-checklist-meta">PDF · 2.1MB · Uploaded 14 March 2026</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-eligible">Received</span> <div class="doc-checklist-action"> <button class="btn btn-tertiary btn-sm" type="button" aria-label="View Proof of address"> <i class="fa-regular fa-eye" aria-hidden="true"></i> View </button> </div> </li> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Birth certificate</p> <p class="doc-checklist-meta">PDF · 640KB · Uploaded 15 March 2026</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-eligible">Received</span> <div class="doc-checklist-action"> <button class="btn btn-tertiary btn-sm" type="button" aria-label="View Birth certificate"> <i class="fa-regular fa-eye" aria-hidden="true"></i> View </button> </div> </li> <li class="doc-checklist-item"> <i class="fa-regular fa-file-lines tw:text-neutral-500 tw:text-lg tw:shrink-0" aria-hidden="true"></i> <div class="tw:flex-1 tw:min-w-0"> <p class="doc-checklist-name">Photo ID</p> <p class="doc-checklist-meta">JPG · 1.4MB · Uploaded 15 March 2026</p> </div> <span class="doc-checklist-status badge-eligibility badge-eligibility-eligible">Received</span> <div class="doc-checklist-action"> <button class="btn btn-tertiary btn-sm" type="button" aria-label="View Photo ID"> <i class="fa-regular fa-eye" aria-hidden="true"></i> View </button> </div> </li> </ul> </div> </div> </div> <%# Empty state %> <div class="tw:border-t tw:pt-6"> <h2 class="h4 tw:mb-4">No documents required yet</h2> <div class="callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Empty state:</strong> before the school has set a document list for this application (or on a course with no document requirements at all), the checklist composes <code>.empty-state</code> instead of rendering an empty <code>.doc-checklist</code>. </p> </div> <div class="card tw:max-w-2xl"> <div class="card-body"> <div class="empty-state"> <i class="fa-regular fa-folder-open empty-state-icon" aria-hidden="true"></i> <h3 class="empty-state-title">No documents required yet</h3> <p class="empty-state-text">The school hasn't requested any documents for this application. We'll let you know here if that changes.</p> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="empty-state"><i class="fa-regular fa-folder-open empty-state-icon"></i><h3 class="empty-state-title">No documents required yet</h3><p class="empty-state-text">…</p></div></code> </div> </div></div>No notes provided.
No params configured.