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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>CLIPBOARD:</strong> Copy-to-clipboard controller composition — no CSS of its own<br> <strong>COMPOSES:</strong> Button (.tw-btn-icon) | Tooltip (optional) | Input Group (optional) </p> <p class="tw:mb-0 tw:text-sm"> A button that copies a value and confirms three ways: icon swap to a check, an <code>aria-live</code> announcement, and the button's own affordances. The controller was born in the Enquiry Forms prototype, then promoted to a documented pattern and extended (DR-2026-12) — the original param/source API is preserved. Live here — click to copy for real. </p> </div> <!-- Inline value copy --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Inline value — icon button</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Inline:</strong> the standard dense-row shape — a tertiary-neutral icon button beside the value, with <code>aria-label</code> naming what gets copied. The icon swaps to a check for 1.5s after copying. </p> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-8"> <div class="tw:inline-flex tw:items-center tw:gap-1"> <span class="tw:text-sm tw:text-muted">Application ref</span> <code>APP-2026-0142</code> <span data-controller="clipboard"> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-tertiary-neutral" type="button" data-action="click->clipboard#copy" data-clipboard-value-param="APP-2026-0142" aria-label="Copy application reference"> <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i> </button> <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span> </span> </div> <div class="tw:inline-flex tw:items-center tw:gap-1"> <span class="tw:text-sm tw:text-muted">Student code</span> <code>STU-88412</code> <span data-controller="clipboard"> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-tertiary-neutral" type="button" data-action="click->clipboard#copy" data-clipboard-value-param="STU-88412" aria-label="Copy student code"> <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i> </button> <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span> </span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><button data-controller="clipboard" data-action="click->clipboard#copy" data-clipboard-value-param="APP-2026-0142" aria-label="Copy application reference"><i class="fa-regular fa-copy" data-clipboard-target="icon"></i></button></code> </div> </div> <!-- Copy-link field --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Copy-link field — input group source</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Field:</strong> a read-only <code>.tw-form-control</code> plus a copy button in an <code>.tw-input-group</code>. The field is the <code>source</code> target and the button calls <code>copySource</code>, so the copied text always matches what's shown. </p> </div> <div class="tw:max-w-xl tw:space-y-4"> <div> <label for="inviteUrl" class="tw-form-label">Open day invite link</label> <div class="tw-input-group" data-controller="clipboard"> <input id="inviteUrl" class="tw-form-control" type="text" readonly value="https://apply.stmarys.sch.uk/open-day/june" data-clipboard-target="source"> <button class="tw-btn tw-btn-secondary" type="button" data-action="click->clipboard#copySource" aria-label="Copy invite link"> <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i> </button> <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span> </div> <p class="tw:text-muted tw:text-sm tw:mt-1">Families use this link to book an open day place.</p> </div> <div> <label for="embedCode" class="tw-form-label">Enquiry form embed code</label> <div class="tw-input-group" data-controller="clipboard"> <input id="embedCode" class="tw-form-control" type="text" readonly value='<script src="https://a.plus/embed/enquiry-form.js"></script>' data-clipboard-target="source"> <button class="tw-btn tw-btn-secondary" type="button" data-action="click->clipboard#copySource" aria-label="Copy embed code"> <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i> </button> <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-input-group" data-controller="clipboard"><input class="tw-form-control" readonly data-clipboard-target="source" …><button class="tw-btn tw-btn-secondary" data-action="click->clipboard#copySource">…</button></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
<div class="tw:p-6 tw:max-w-7xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>CLIPBOARD:</strong> Copy-to-clipboard controller composition — no CSS of its own<br> <strong>COMPOSES:</strong> Button (.tw-btn-icon) | Tooltip (optional) | Input Group (optional) </p> <p class="tw:mb-0 tw:text-sm"> A button that copies a value and confirms three ways: icon swap to a check, an <code>aria-live</code> announcement, and the button's own affordances. The controller was born in the Enquiry Forms prototype, then promoted to a documented pattern and extended (DR-2026-12) — the original param/source API is preserved. Live here — click to copy for real. </p> </div> <!-- Inline value copy --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Inline value — icon button</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Inline:</strong> the standard dense-row shape — a tertiary-neutral icon button beside the value, with <code>aria-label</code> naming what gets copied. The icon swaps to a check for 1.5s after copying. </p> </div> <div class="tw:flex tw:flex-wrap tw:items-center tw:gap-8"> <div class="tw:inline-flex tw:items-center tw:gap-1"> <span class="tw:text-sm tw:text-muted">Application ref</span> <code>APP-2026-0142</code> <span data-controller="clipboard"> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-tertiary-neutral" type="button" data-action="click->clipboard#copy" data-clipboard-value-param="APP-2026-0142" aria-label="Copy application reference"> <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i> </button> <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span> </span> </div> <div class="tw:inline-flex tw:items-center tw:gap-1"> <span class="tw:text-sm tw:text-muted">Student code</span> <code>STU-88412</code> <span data-controller="clipboard"> <button class="tw-btn tw-btn-icon tw-btn-tertiary tw-btn-tertiary-neutral" type="button" data-action="click->clipboard#copy" data-clipboard-value-param="STU-88412" aria-label="Copy student code"> <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i> </button> <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span> </span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><button data-controller="clipboard" data-action="click->clipboard#copy" data-clipboard-value-param="APP-2026-0142" aria-label="Copy application reference"><i class="fa-regular fa-copy" data-clipboard-target="icon"></i></button></code> </div> </div> <!-- Copy-link field --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Copy-link field — input group source</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Field:</strong> a read-only <code>.tw-form-control</code> plus a copy button in an <code>.tw-input-group</code>. The field is the <code>source</code> target and the button calls <code>copySource</code>, so the copied text always matches what's shown. </p> </div> <div class="tw:max-w-xl tw:space-y-4"> <div> <label for="inviteUrl" class="tw-form-label">Open day invite link</label> <div class="tw-input-group" data-controller="clipboard"> <input id="inviteUrl" class="tw-form-control" type="text" readonly value="https://apply.stmarys.sch.uk/open-day/june" data-clipboard-target="source"> <button class="tw-btn tw-btn-secondary" type="button" data-action="click->clipboard#copySource" aria-label="Copy invite link"> <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i> </button> <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span> </div> <p class="tw:text-muted tw:text-sm tw:mt-1">Families use this link to book an open day place.</p> </div> <div> <label for="embedCode" class="tw-form-label">Enquiry form embed code</label> <div class="tw-input-group" data-controller="clipboard"> <input id="embedCode" class="tw-form-control" type="text" readonly value='<script src="https://a.plus/embed/enquiry-form.js"></script>' data-clipboard-target="source"> <button class="tw-btn tw-btn-secondary" type="button" data-action="click->clipboard#copySource" aria-label="Copy embed code"> <i class="fa-regular fa-copy" data-clipboard-target="icon" aria-hidden="true"></i> </button> <span class="tw:sr-only" aria-live="polite" data-clipboard-target="status"></span> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code><div class="tw-input-group" data-controller="clipboard"><input class="tw-form-control" readonly data-clipboard-target="source" …><button class="tw-btn tw-btn-secondary" data-action="click->clipboard#copySource">…</button></div></code> </div> </div></div>No notes provided.
No params configured.