@citolab/qti-components 6.9.1-beta.1 → 6.9.1-beta.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/{chunk-H4VLZ2F7.js → chunk-62FWJYVB.js} +3 -3
  2. package/dist/chunk-E7TLXHQH.js +2 -0
  3. package/dist/custom-elements.json +288 -109
  4. package/dist/index.js +1670 -92
  5. package/dist/item.css +976 -461
  6. package/dist/qti-components/index.d.ts +6 -1157
  7. package/dist/qti-components/index.js +161 -87
  8. package/dist/qti-item/index.d.ts +19 -0
  9. package/dist/qti-item/index.js +1506 -0
  10. package/dist/qti-loader/index.d.ts +5 -0
  11. package/dist/qti-loader/index.js +2 -0
  12. package/dist/qti-simple-choice-CafJuhnH.d.ts +1173 -0
  13. package/dist/qti-transformers/index.js +1 -1
  14. package/package.json +46 -27
package/dist/item.css CHANGED
@@ -1,327 +1,266 @@
1
1
  @layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
2
2
 
3
- /* base */
4
-
5
- /* Document
6
- * ========================================================================== */
7
-
8
- /**
9
- * 1. Correct the line height in all browsers.
10
- * 2. Prevent adjustments of font size after orientation changes in iOS.
11
- */
12
-
13
- :where(html) {
14
- line-height: 1.15; /* 1 */
15
- -webkit-text-size-adjust: 100%; /* 2 */
16
- -moz-text-size-adjust: 100%;
17
- text-size-adjust: 100%; /* 2 */
3
+ :root,
4
+ :host {
5
+ --qti-primary-light: #ffbebe;
6
+ --qti-primary: #f86d70;
7
+ --qti-primary-dark: #a1616a;
8
+
9
+ --qti-secondary-light: #bed4ff;
10
+ --qti-secondary: #6daef8;
11
+ --qti-secondary-dark: #3a449d;
12
+
13
+ --qti-border-thickness: 1.5px;
14
+ --qti-border-style: solid;
15
+ --qti-border-color-gray: #c6cad0; /* Corresponding to border-gray-400 */
16
+ --qti-border-radius-md: 0.375rem;
17
+ --qti-border-radius-lg: 0.5rem;
18
+ --qti-border-radius-full: 9999px;
19
+
20
+ --qti-bg-gray-50: #f9fafb;
21
+ --qti-bg-primary: var(--qti-primary);
22
+ --qti-bg-gray-100: #f3f4f6;
23
+
24
+ --qti-text-gray-500: #6b7280;
25
+ --qti-text-white: white;
26
+
27
+ --qti-padding-sm: 0.125rem; /* py-0.5 */
28
+ --qti-padding-md: 0.5rem; /* py-2 */
29
+ --qti-padding-lg: 0.75rem; /* p-3 */
30
+ --qti-padding-xl: 1rem; /* pl-4 */
31
+
32
+ --qti-font-weight-semibold: 600;
33
+
34
+ --qti-active: blue;
35
+ --qti-focus-color: #bddcff7e;
36
+ --qti-focus-border-width: 5px;
37
+
38
+ --qti-correct: rgb(74 222 128);
39
+ --qti-correct-light: rgb(220 252 231);
40
+ --qti-incorrect: rgb(248 113 113);
41
+ --qti-incorrect-light: rgb(254 226 226);
42
+
43
+ --qti-form-size: 1rem;
44
+ --qti-gap-size: 0.5rem;
18
45
  }
19
46
 
20
- /* Sections
21
- * ========================================================================== */
22
-
23
- /**
24
- * Correct the font size and margin on `h1` elements within `section` and
25
- * `article` contexts in Chrome, Edge, Firefox, and Safari.
26
- */
27
-
28
- :where(h1) {
29
- font-size: 2em;
30
- margin-block-end: 0.67em;
31
- margin-block-start: 0.67em;
47
+ .chevron {
48
+ background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
49
+ no-repeat center right 6px;
32
50
  }
33
51
 
34
- /* Grouping content
35
- * ========================================================================== */
36
-
37
- /**
38
- * Remove the margin on nested lists in Chrome, Edge, and Safari.
39
- */
40
-
41
- :where(dl, ol, ul) :where(dl, ol, ul) {
42
- margin-block-end: 0;
43
- margin-block-start: 0;
52
+ .handle {
53
+ background-image: radial-gradient(
54
+ circle at center,
55
+ rgba(0, 0, 0, 0.1) 0,
56
+ rgb(0, 0, 0, 0.1) 2px,
57
+ white 2px,
58
+ white 100%
59
+ );
60
+ background-repeat: repeat-y;
61
+ background-position: left 2px;
62
+ background-size: 14px 8px;
44
63
  }
45
64
 
46
- /**
47
- * 1. Add the correct box sizing in Firefox.
48
- * 2. Correct the inheritance of border color in Firefox.
49
- */
50
-
51
- :where(hr) {
52
- box-sizing: content-box; /* 1 */
53
- color: inherit; /* 2 */
54
- height: 0; /* 1 */
65
+ .check-mask {
66
+ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
67
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
55
68
  }
56
69
 
57
- /* Text-level semantics
58
- * ========================================================================== */
59
-
60
- /**
61
- * Add the correct text decoration in Safari.
62
- */
63
-
64
- :where(abbr[title]) {
65
- text-decoration: underline;
66
- -webkit-text-decoration: underline dotted;
67
- text-decoration: underline dotted;
70
+ .bordered {
71
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
72
+ outline: none;
68
73
  }
69
74
 
70
- /**
71
- * Add the correct font weight in Chrome, Edge, and Safari.
72
- */
73
-
74
- :where(b, strong) {
75
- font-weight: bolder;
75
+ .borderinvisible {
76
+ border-color: transparent;
76
77
  }
77
78
 
78
- /**
79
- * 1. Correct the inheritance and scaling of font size in all browsers.
80
- * 2. Correct the odd `em` font sizing in all browsers.
81
- */
82
-
83
- :where(code, kbd, pre, samp) {
84
- font-family: monospace, monospace; /* 1 */
85
- font-size: 1em; /* 2 */
79
+ .form {
80
+ width: var(--qti-form-size);
81
+ height: var(--qti-form-size);
82
+ align-self: 1;
83
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
84
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
85
+ outline: none;
86
86
  }
87
87
 
88
- /**
89
- * Add the correct font size in all browsers.
90
- */
91
-
92
- :where(small) {
93
- font-size: 80%;
88
+ .p-lg {
89
+ padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl); /* Padding shorthand */
94
90
  }
95
91
 
96
- /* Tabular data
97
- * ========================================================================== */
98
-
99
- /**
100
- * 1. Correct table border color in Chrome, Edge, and Safari.
101
- * 2. Remove text indentation from table contents in Chrome, Edge, and Safari.
102
- */
103
-
104
- :where(table) {
105
- border-color: currentColor; /* 1 */
106
- text-indent: 0; /* 2 */
92
+ .button {
93
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
94
+ outline: none;
95
+ border-radius: var(--qti-border-radius-md);
96
+ padding: var(--qti-padding-sm) var(--qti-padding-md); /* Padding shorthand */
97
+ font-weight: var(--qti-font-weight-semibold);
98
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
99
+ outline: none;
107
100
  }
108
101
 
109
- /* Forms
110
- * ========================================================================== */
111
-
112
- /**
113
- * Remove the margin on controls in Safari.
114
- */
115
-
116
- :where(button, input, select) {
117
- margin: 0;
102
+ .select {
103
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
104
+ outline: none;
105
+ border-radius: var(--qti-border-radius-md);
106
+ position: relative;
107
+ -webkit-appearance: none;
108
+ -moz-appearance: none;
109
+ appearance: none;
110
+ padding: var(--qti-padding-md) 1.75rem var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray); outline: none; background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
111
+ no-repeat center right 6px;
118
112
  }
119
113
 
120
- /**
121
- * Remove the inheritance of text transform in Firefox.
122
- */
123
-
124
- :where(button) {
125
- text-transform: none;
114
+ .text {
115
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
116
+ outline: none;
117
+ border-radius: 0;
118
+ cursor: text;
119
+ padding: var(--qti-padding-lg); /* Equal padding on all sides */
120
+ background: unset;
121
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
122
+ outline: none;
126
123
  }
127
124
 
128
- /**
129
- * Correct the inability to style buttons in iOS and Safari.
130
- */
131
-
132
- :where(button, input:is([type="button" i], [type="reset" i], [type="submit" i])) {
133
- -webkit-appearance: button;
125
+ .spot {
126
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
127
+ outline: none;
128
+ width: 100%;
129
+ height: 100%;
130
+ background-color: transparent;
131
+ padding: 0;
132
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
133
+ outline: none;
134
134
  }
135
135
 
136
- /**
137
- * Add the correct vertical alignment in Chrome, Edge, and Firefox.
138
- */
136
+ /* qti-select-point-interaction */
139
137
 
140
- :where(progress) {
141
- vertical-align: baseline;
138
+ .point {
139
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
140
+ border-radius: var(--qti-border-radius-full);
141
+ outline: none;
142
+ width: 1.5rem; /* w-6 */
143
+ height: 1.5rem;
144
+ background-color: transparent;
145
+ padding: 0;
146
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
147
+ outline: none;
142
148
  }
143
149
 
144
- /**
145
- * Remove the inheritance of text transform in Firefox.
146
- */
150
+ .drag {
151
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
152
+ outline: none;
153
+ padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl); /* Padding shorthand */
154
+ border-radius: var(--qti-border-radius-md);
147
155
 
148
- :where(select) {
149
- text-transform: none;
156
+ cursor: grab;
157
+ background-color: white;
158
+ font-weight: var(--qti-font-weight-semibold);
159
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
160
+ outline: none;
161
+ background-image: radial-gradient(
162
+ circle at center,
163
+ rgba(0, 0, 0, 0.1) 0,
164
+ rgb(0, 0, 0, 0.1) 2px,
165
+ white 2px,
166
+ white 100%
167
+ );
168
+ background-repeat: repeat-y;
169
+ background-position: left 2px;
170
+ background-size: 14px 8px;
150
171
  }
151
172
 
152
- /**
153
- * Remove the margin in Firefox and Safari.
154
- */
155
-
156
- :where(textarea) {
157
- margin: 0;
173
+ .drop {
174
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
175
+ outline: none;
176
+ border-radius: var(--qti-border-radius-lg);
177
+ position: relative;
178
+ background-color: var(--qti-bg-gray-50);
179
+ margin: 1px; /* m-px */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray); outline: none;
158
180
  }
159
181
 
160
- /**
161
- * 1. Correct the odd appearance in Chrome, Edge, and Safari.
162
- * 2. Correct the outline style in Safari.
163
- */
164
-
165
- :where(input[type="search" i]) {
166
- -webkit-appearance: textfield; /* 1 */
167
- outline-offset: -2px; /* 2 */
182
+ .order {
183
+ background-color: var(--qti-bg-primary);
184
+ border-radius: var(--qti-border-radius-full);
185
+ width: 1.5rem; /* w-6 */
186
+ height: 1.5rem;
187
+ color: var(--qti-text-white);
168
188
  }
169
189
 
170
- /**
171
- * Correct the cursor style of increment and decrement buttons in Safari.
172
- */
173
-
174
- ::-webkit-inner-spin-button,
175
- ::-webkit-outer-spin-button {
176
- height: auto;
190
+ .check-size {
191
+ width: calc(var(--qti-form-size) - 4px);
192
+ height: calc(var(--qti-form-size) - 4px);
177
193
  }
178
194
 
179
- /**
180
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
181
- */
182
-
183
- ::-webkit-input-placeholder {
184
- color: inherit;
185
- opacity: 0.54;
195
+ .check {
196
+ /* display: flex; */
197
+ /* align-items: center; */
198
+ gap: 0.5rem;
199
+ padding: var(--qti-padding-md) var(--qti-padding-md); /* Padding shorthand */
200
+ outline: none;
201
+ border-radius: var(--qti-border-radius-md);
202
+ cursor: pointer;
186
203
  }
187
204
 
188
- /**
189
- * Remove the inner padding in Chrome, Edge, and Safari on macOS.
190
- */
191
-
192
- ::-webkit-search-decoration {
193
- -webkit-appearance: none;
205
+ .check-radio {
206
+ border-radius: var(--qti-border-radius-full);
207
+ width: var(--qti-form-size);
208
+ height: var(--qti-form-size);
209
+ align-self: 1;
210
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
211
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
212
+ outline: none;
194
213
  }
195
214
 
196
- /**
197
- * 1. Correct the inability to style upload buttons in iOS and Safari.
198
- * 2. Change font properties to `inherit` in Safari.
199
- */
200
-
201
- ::-webkit-file-upload-button {
202
- -webkit-appearance: button; /* 1 */
203
- font: inherit; /* 2 */
215
+ .check-radio-checked {
216
+ background-color: var(--qti-bg-primary);
217
+ border-radius: var(--qti-border-radius-full);
204
218
  }
205
219
 
206
- /**
207
- * Remove the inner border and padding of focus outlines in Firefox.
208
- */
209
-
210
- :where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focus-inner {
211
- border-style: none;
212
- padding: 0;
220
+ .check-checkbox {
221
+ border-radius: var(--qti-border-radius-md);
222
+ width: var(--qti-form-size);
223
+ height: var(--qti-form-size);
224
+ align-self: 1;
225
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
226
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
227
+ outline: none;
213
228
  }
214
229
 
215
- /**
216
- * Restore the focus outline styles unset by the previous rule in Firefox.
217
- */
218
-
219
- :where(button, input:is([type="button" i], [type="color" i], [type="reset" i], [type="submit" i]))::-moz-focusring {
220
- outline: 1px dotted ButtonText;
230
+ .check-checkbox-checked {
231
+ background-color: var(--qti-bg-primary);
232
+ -webkit-mask-image: var(--check-mask);
233
+ mask-image: var(--check-mask); /* check-mask */ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E"); mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
221
234
  }
222
235
 
223
- /**
224
- * Remove the additional :invalid styles in Firefox.
225
- */
226
-
227
- :where(:-moz-ui-invalid) {
228
- box-shadow: none;
236
+ .hov {
237
+ background-color: var(--qti-bg-gray-50);
229
238
  }
230
239
 
231
- /* Interactive
232
- * ========================================================================== */
233
-
234
- /*
235
- * Add the correct styles in Safari.
236
- */
237
-
238
- :where(dialog) {
239
- background-color: white;
240
- border: solid;
241
- color: black;
242
- height: -moz-fit-content;
243
- height: fit-content;
244
- left: 0;
245
- margin: auto;
246
- padding: 1em;
247
- position: absolute;
248
- right: 0;
249
- width: -moz-fit-content;
250
- width: fit-content;
240
+ .foc {
241
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
251
242
  }
252
243
 
253
- :where(dialog:not([open])) {
254
- display: none;
244
+ .act {
245
+ border-color: var(--qti-bg-primary); /* border-primary */
255
246
  }
256
247
 
257
- /*
258
- * Add the correct display in all browsers.
259
- */
260
-
261
- :where(summary) {
262
- display: list-item;
248
+ .rdo {
249
+ cursor: pointer;
250
+ background-color: white;
251
+ outline: 0;
252
+ border: none;
263
253
  }
264
254
 
265
- @layer qti-base {
266
- abbr[title] {
267
- -webkit-text-decoration: underline dotted;
268
- text-decoration: underline dotted;
269
- }
270
- b,
271
- strong {
272
- font-weight: bolder;
273
- }
274
- code,
275
- kbd,
276
- samp,
277
- pre {
278
- font-family: ui-monospace, SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace; /* 1 */
279
- font-size: 1em; /* 2 */
280
- }
281
- small {
282
- font-size: 80%;
283
- }
284
-
285
- table {
286
- width: 100%;
287
- border-collapse: collapse;
288
- }
289
-
290
- /* Set table borders */
291
- table,
292
- th,
293
- td {
294
- border-bottom: 1px solid #eee;
295
- }
296
- td {
297
- padding: 0.5rem 0 0.5rem 0;
298
- }
299
-
300
- td > p {
301
- padding: 0;
302
- margin: 0;
303
- }
304
-
305
- th {
306
- text-align: left;
307
- }
308
- /* Style table header */
309
- th {
310
- font-weight: bold;
311
- /* background-color: #f2f2f2; */
312
- }
313
-
314
- /* Style alternating rows */
315
- tr:nth-child(even) {
316
- /* background-color: #f9f9f9; */
317
- }
318
-
319
- /* Add hover effect to rows */
320
- tr:hover {
321
- /* background-color: #e6e6e6; */
322
- }
255
+ .dis {
256
+ cursor: not-allowed;
257
+ background-color: var(--qti-bg-gray-100);
258
+ color: var(--qti-text-gray-500);
259
+ border-color: var(--qti-border-color-gray);
323
260
  }
324
261
 
262
+ /* base */
263
+
325
264
  @layer qti-base {
326
265
  .qti-layout-row {
327
266
  display: flex;
@@ -425,6 +364,16 @@ qti-response-declaration {
425
364
  display: block;
426
365
  }
427
366
 
367
+ :host {
368
+ box-sizing: border-box;
369
+ }
370
+
371
+ *,
372
+ *:before,
373
+ *:after {
374
+ box-sizing: inherit;
375
+ }
376
+
428
377
  [popover] {
429
378
  position: fixed;
430
379
  inset: 0;
@@ -447,110 +396,277 @@ qti-response-declaration {
447
396
  qti-choice-interaction {
448
397
  &.qti-input-control-hidden {
449
398
  & qti-simple-choice {
450
- &::part(ch) {display:none !important;
399
+ &:hover {
400
+ background-color: var(--qti-bg-gray-50);
451
401
  }
452
- &[aria-checked='true'] {border-color:var(--qti-primary-color);
402
+ &:focus {
403
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
453
404
  }
454
- &[aria-readonly='true'] {cursor:pointer;border-width:0px;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));outline-width:0px;
405
+ &::part(ch) {
406
+ display: none;
455
407
  }
456
- &[aria-disabled='true'] {cursor:not-allowed;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
457
- }cursor:pointer;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;font-weight:600;outline:2px solid transparent;outline-offset:2px
408
+ &[aria-checked='true'] {
409
+ border-color: var(--qti-bg-primary);
410
+ }
411
+ &[aria-readonly='true'] {
412
+ cursor: pointer;
413
+ background-color: white;
414
+ outline: 0;
415
+ border: none;
416
+ }
417
+ &[aria-disabled='true'] {
418
+ cursor: not-allowed;
419
+ background-color: var(--qti-bg-gray-100);
420
+ color: var(--qti-text-gray-500);
421
+ border-color: var(--qti-border-color-gray);
422
+ }
423
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
424
+ outline: none;
425
+ border-radius: var(--qti-border-radius-md);
426
+ padding: var(--qti-padding-sm) var(--qti-padding-md);
427
+ font-weight: var(--qti-font-weight-semibold);
428
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
429
+ outline: none
458
430
  }
459
- & qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
460
- & qti-simple-choice:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
461
431
  }
462
432
  &:not(.qti-input-control-hidden) {
463
433
  & qti-simple-choice {
464
- &[aria-checked='true'] {border-color:var(--qti-primary-color);
434
+ &:hover {
435
+ background-color: var(--qti-bg-gray-50);
436
+ }
437
+ &:focus {
438
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
439
+ }
440
+ &[aria-checked='true'] {
441
+ border-color: var(--qti-bg-primary);
465
442
  }
466
- &[aria-readonly='true'] {cursor:pointer;border-width:0px;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));outline-width:0px;
443
+ &[aria-readonly='true'] {
444
+ cursor: pointer;
445
+ background-color: white;
446
+ outline: 0;
447
+ border: none;
467
448
  }
468
- &[aria-disabled='true'] {cursor:not-allowed;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
449
+ &[aria-disabled='true'] {
450
+ cursor: not-allowed;
451
+ background-color: var(--qti-bg-gray-100);
452
+ color: var(--qti-text-gray-500);
453
+ border-color: var(--qti-border-color-gray);
469
454
  }
470
455
 
471
456
  &::part(cha) {
472
- /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */height:66.6666666667%;width:66.6666666667%;
457
+ width: calc(var(--qti-form-size) - 4px);
458
+ height: calc(var(--qti-form-size) - 4px);
473
459
  }
474
- &[role='radio']::part(ch) {width:1.25rem;height:1.25rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;outline:2px solid transparent;outline-offset:2px;
460
+ &[role='radio']::part(ch) {
461
+ border-radius: var(--qti-border-radius-full);
462
+ width: var(--qti-form-size);
463
+ height: var(--qti-form-size);
464
+ align-self: 1;
465
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
466
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
467
+ outline: none;
475
468
  }
476
- &[role='radio'][aria-checked='true']::part(cha) {border-radius:9999px;background-color:var(--qti-primary-color);
469
+ &[role='radio'][aria-checked='true']::part(cha) {
470
+ background-color: var(--qti-bg-primary);
471
+ border-radius: var(--qti-border-radius-full);
477
472
  }
478
- &[role='checkbox']::part(ch) {width:1.25rem;height:1.25rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.25rem;border-style:solid;outline:2px solid transparent;outline-offset:2px;
473
+ &[role='checkbox']::part(ch) {
474
+ border-radius: var(--qti-border-radius-md);
475
+ width: var(--qti-form-size);
476
+ height: var(--qti-form-size);
477
+ align-self: 1;
478
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
479
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
480
+ outline: none;
479
481
  }
480
- &[role='checkbox'][aria-checked='true']::part(cha) {background-color:var(--qti-primary-color);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
481
- }display:flex;align-items:center;gap:0.5rem;border-radius:0.375rem;padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;outline:2px solid transparent;outline-offset:2px
482
+ &[role='checkbox'][aria-checked='true']::part(cha) {
483
+ background-color: var(--qti-bg-primary);
484
+ -webkit-mask-image: var(--check-mask);
485
+ mask-image: var(--check-mask);
486
+ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
487
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
488
+ }
489
+ gap: 0.5rem;
490
+ padding: var(--qti-padding-md) var(--qti-padding-md);
491
+ outline: none;
492
+ border-radius: var(--qti-border-radius-md);
493
+ cursor: pointer
482
494
  }
483
- & qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
484
- & qti-simple-choice:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
485
495
  }
486
496
  & qti-simple-choice {
487
497
  &[data-correct-response='true'] {
488
498
  &::after {
489
- content: '\02714';--qti-text-opacity:1;color:rgb(22 163 74 / var(--qti-text-opacity));
499
+ content: '\02714';
500
+ color: #16a34a; /* text-green-600 */
490
501
  }
491
502
  }
492
503
  }
493
504
 
494
- & qti-simple-choice > p {margin:0;padding:0;
505
+ & qti-simple-choice > p {
506
+ margin: 0;
507
+ padding: 0;
495
508
  }
496
509
  }
497
510
 
498
511
  qti-text-entry-interaction {
499
- &::part(input) {cursor:text;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;padding:0.75rem;outline:2px solid transparent;outline-offset:2px;
512
+ &:hover {
513
+ background-color: var(--qti-bg-gray-50);
514
+ }
515
+ &:focus-within {
516
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
517
+ }
518
+ &::part(input) {
519
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
520
+ outline: none;
521
+ border-radius: 0;
522
+ cursor: text;
523
+ padding: var(--qti-padding-lg);
524
+ background: unset;
525
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
526
+ outline: none;
500
527
  }
501
- &::part(input):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
502
- &::part(input):focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
503
528
  }
504
529
 
505
530
  qti-extended-text-interaction {
506
- &::part(textarea) {cursor:text;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0;border-style:solid;padding:0.75rem;outline:2px solid transparent;outline-offset:2px;
531
+ &::part(textarea) {
532
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
533
+ outline: none;
534
+ border-radius: 0;
535
+ cursor: text;
536
+ padding: var(--qti-padding-lg);
537
+ background: unset;
538
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
539
+ outline: none;
540
+ }
541
+ &:hover {
542
+ background-color: var(--qti-bg-gray-50);
543
+ }
544
+ &:focus-within {
545
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
507
546
  }
508
- &::part(textarea):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
509
- &::part(textarea):focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
510
547
  }
511
548
 
512
549
  qti-gap-match-interaction {
513
- & qti-gap-text {display:inline-block;cursor:grab;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;font-weight:600;outline:2px solid transparent;outline-offset:2px;background-image:
514
- radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
515
- background-repeat: repeat-y;
516
- background-position: left 2px;
517
- background-size: 14px 8px;
550
+ & qti-gap-text {
551
+
552
+ &:hover {
553
+ background-color: var(--qti-bg-gray-50);
554
+ }
555
+ &:focus {
556
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
557
+ }
558
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
559
+ outline: none;
560
+ padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
561
+ border-radius: var(--qti-border-radius-md);
562
+ cursor: grab;
563
+ background-color: white;
564
+ font-weight: var(--qti-font-weight-semibold);
565
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
566
+ outline: none;
567
+ background-image: radial-gradient(
568
+ circle at center,
569
+ rgba(0, 0, 0, 0.1) 0,
570
+ rgb(0, 0, 0, 0.1) 2px,
571
+ white 2px,
572
+ white 100%
573
+ );
574
+ background-repeat: repeat-y;
575
+ background-position: left 2px;
576
+ background-size: 14px 8px
518
577
  }
519
- & qti-gap-text:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
520
- & qti-gap-text:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
521
- & qti-gap { /* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
578
+ & qti-gap {
579
+ display: inline-flex;
580
+ width: 8rem; /* w-32 */
522
581
  &:empty:after {
582
+ padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
523
583
  content: '\0000a0'; /* when empty, put a space in it */
524
584
  }
525
- &:not(:empty) {width:auto;display:inline-flex;padding:0;
585
+ &:not(:empty) {
586
+ display: inline-flex;
587
+ padding: 0;
588
+ width: auto;
589
+ }
590
+ &:not(:empty) > * {
591
+ flex: 1;
592
+ transform: rotate(0); /* rotate-0 */
593
+ box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
526
594
  }
527
- &:not(:empty) > * {flex:1 1 0%;--qti-rotate-x:0;--qti-rotate-y:0;--qti-rotate-z:0;--qti-rotate:0;transform:translateX(var(--qti-translate-x)) translateY(var(--qti-translate-y)) translateZ(var(--qti-translate-z)) rotate(var(--qti-rotate)) rotateX(var(--qti-rotate-x)) rotateY(var(--qti-rotate-y)) rotateZ(var(--qti-rotate-z)) skewX(var(--qti-skew-x)) skewY(var(--qti-skew-y)) scaleX(var(--qti-scale-x)) scaleY(var(--qti-scale-y)) scaleZ(var(--qti-scale-z));--qti-ring-opacity:1;--qti-ring-color:rgb(229 231 235 / var(--qti-ring-opacity));
528
- }width:8rem;position:relative;margin:1px;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));outline:2px solid transparent;outline-offset:2px;display:inline-flex;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem
595
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
596
+ outline: none;
597
+ border-radius: var(--qti-border-radius-lg);
598
+ position: relative;
599
+ background-color: var(--qti-bg-gray-50);
600
+ margin: 1px;
601
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
602
+ outline: none
529
603
  }
530
- & qti-gap:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
531
- & qti-gap:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
532
604
  }
533
605
 
534
606
  qti-hotspot-interaction {
535
607
  & qti-hotspot-choice {
536
608
  &[shape='circle'] {
537
- &[aria-checked='true'] {border-color:var(--qti-primary-color);
609
+ &:hover {
610
+ background-color: var(--qti-bg-gray-50);
611
+ }
612
+ &:focus {
613
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
538
614
  }
539
- &[aria-readonly='true'] {cursor:pointer;border-width:0px;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));outline-width:0px;
615
+ &[aria-checked='true'] {
616
+ border-color: var(--qti-bg-primary);
540
617
  }
541
- &[aria-disabled='true'] {cursor:not-allowed;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
542
- }height:100%;width:100%;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;background-color:transparent;padding:0;outline:2px solid transparent;outline-offset:2px;border-radius:9999px
618
+ &[aria-readonly='true'] {
619
+ cursor: pointer;
620
+ background-color: white;
621
+ outline: 0;
622
+ border: none;
623
+ }
624
+ &[aria-disabled='true'] {
625
+ cursor: not-allowed;
626
+ background-color: var(--qti-bg-gray-100);
627
+ color: var(--qti-text-gray-500);
628
+ border-color: var(--qti-border-color-gray);
629
+ }
630
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
631
+ outline: none;
632
+ width: 100%;
633
+ height: 100%;
634
+ background-color: transparent;
635
+ padding: 0;
636
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
637
+ outline: none
543
638
  }
544
- &[shape="circle"]:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
545
639
  &[shape='rect'] {
546
- &[aria-checked='true'] {border-color:var(--qti-primary-color);
640
+ &:hover {
641
+ background-color: var(--qti-bg-gray-50);
642
+ }
643
+ &:focus {
644
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
547
645
  }
548
- &[aria-readonly='true'] {cursor:pointer;border-width:0px;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));outline-width:0px;
646
+ &[aria-checked='true'] {
647
+ border-color: var(--qti-bg-primary);
549
648
  }
550
- &[aria-disabled='true'] {cursor:not-allowed;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
551
- }height:100%;width:100%;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;background-color:transparent;padding:0;outline:2px solid transparent;outline-offset:2px
649
+ &[aria-readonly='true'] {
650
+ cursor: pointer;
651
+ background-color: white;
652
+ outline: 0;
653
+ border: none;
654
+ }
655
+ &[aria-disabled='true'] {
656
+ cursor: not-allowed;
657
+ background-color: var(--qti-bg-gray-100);
658
+ color: var(--qti-text-gray-500);
659
+ border-color: var(--qti-border-color-gray);
660
+ }
661
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
662
+ outline: none;
663
+ width: 100%;
664
+ height: 100%;
665
+ background-color: transparent;
666
+ padding: 0;
667
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
668
+ outline: none
552
669
  }
553
- &[shape="rect"]:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
554
670
  &[shape='poly'] {
555
671
  &:hover::after {
556
672
  content: '';
@@ -558,12 +674,13 @@ qti-response-declaration {
558
674
  height: 100%;
559
675
  background: repeating-linear-gradient(
560
676
  45deg,
561
- var(--qti-primary-color),
562
- var(--qti-primary-color) 5px,
677
+ var(--qti-primary),
678
+ var(--qti-primary) 5px,
563
679
  transparent 5px,
564
680
  transparent 10px
565
681
  );
566
- display: block;border-color:var(--qti-primary-color);
682
+ display: block;
683
+ border-color: var(--qti-bg-primary);
567
684
  }
568
685
 
569
686
  &[aria-checked='true']:after {
@@ -574,110 +691,262 @@ qti-response-declaration {
574
691
  45deg,
575
692
  transparent,
576
693
  transparent 5px,
577
- var(--qti-primary-color) 5px,
578
- var(--qti-primary-color) 10px
694
+ var(--qti-primary) 5px,
695
+ var(--qti-primary) 10px
579
696
  );
580
- display: block;border-color:var(--qti-primary-color);
697
+ display: block;
698
+ border-color: var(--qti-bg-primary);
581
699
  }
582
700
 
583
- /* @apply hover:hov focus:foc; */
584
- &[aria-checked='true'] {border-color:var(--qti-primary-color);
701
+ &[aria-checked='true'] {
702
+ border-color: var(--qti-bg-primary);
585
703
  }
586
- &[aria-readonly='true'] {cursor:pointer;border-width:0px;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));outline-width:0px;
704
+ &[aria-readonly='true'] {
705
+ cursor: pointer;
706
+ background-color: white;
707
+ outline: 0;
708
+ border: none;
587
709
  }
588
- &[aria-disabled='true'] {cursor:not-allowed;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
710
+ &[aria-disabled='true'] {
711
+ cursor: not-allowed;
712
+ background-color: var(--qti-bg-gray-100);
713
+ color: var(--qti-text-gray-500);
714
+ border-color: var(--qti-border-color-gray);
589
715
  }
590
716
  }
591
717
  }
592
718
  }
593
719
 
594
720
  qti-hottext-interaction {
595
- &.qti-input-control-hidden {
596
- qti-hottext {
597
- &::part(ch) {display:none !important;
598
- }
599
- &[aria-checked='true'] {border-color:var(--qti-primary-color);
600
- }
601
- &[aria-readonly='true'] {cursor:pointer;border-width:0px;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));outline-width:0px;
602
- }
603
- &[aria-disabled='true'] {cursor:not-allowed;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
604
- }display:inline-flex;cursor:pointer;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;font-weight:600;outline:2px solid transparent;outline-offset:2px
721
+ qti-hottext {
722
+ display: inline-flex;
723
+ align-items: center;
724
+ }
725
+ /* &:not(.qti-input-control-hidden),
726
+ &:not(.qti-unselected-hidden) { */
727
+ qti-hottext {
728
+ &:hover {
729
+ background-color: var(--qti-bg-gray-50);
730
+ }
731
+ &:focus {
732
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
733
+ }
734
+ &::part(cha) {
735
+ width: calc(var(--qti-form-size) - 4px);
736
+ height: calc(var(--qti-form-size) - 4px);
737
+ }
738
+ &[role='radio']::part(ch) {
739
+ border-radius: var(--qti-border-radius-full);
740
+ width: var(--qti-form-size);
741
+ height: var(--qti-form-size);
742
+ align-self: 1;
743
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
744
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
745
+ outline: none;
605
746
  }
606
- qti-hottext:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
607
- qti-hottext:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
747
+ &[role='radio'][aria-checked='true']::part(cha) {
748
+ background-color: var(--qti-bg-primary);
749
+ border-radius: var(--qti-border-radius-full);
750
+ }
751
+ &[role='checkbox']::part(ch) {
752
+ border-radius: var(--qti-border-radius-md);
753
+ width: var(--qti-form-size);
754
+ height: var(--qti-form-size);
755
+ align-self: 1;
756
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
757
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
758
+ outline: none;
759
+ }
760
+ &[role='checkbox'][aria-checked='true']::part(cha) {
761
+ background-color: var(--qti-bg-primary);
762
+ -webkit-mask-image: var(--check-mask);
763
+ mask-image: var(--check-mask);
764
+ -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
765
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
766
+ }
767
+ gap: 0.5rem;
768
+ padding: var(--qti-padding-md) var(--qti-padding-md);
769
+ outline: none;
770
+ border-radius: var(--qti-border-radius-md);
771
+ cursor: pointer
608
772
  }
773
+ /* } */
609
774
 
610
- &:not(.qti-input-control-hidden),
611
- &:not(.qti-unselected-hidden) {
775
+ &.qti-input-control-hidden {
612
776
  qti-hottext {
613
- &::part(cha) {
614
- /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */height:66.6666666667%;width:66.6666666667%;
777
+ /* --qti-padding-md: 0.1rem;
778
+ --qti-padding-lg: 0.2rem;
779
+ --qti-border-radius-md: 0.3rem;
780
+ --qti-border-thickness: 1px;
781
+ --qti-font-weight-semibold: 400; */
782
+ &:hover {
783
+ background-color: var(--qti-bg-gray-50);
615
784
  }
616
- &[role='radio']::part(ch) {width:1.25rem;height:1.25rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;outline:2px solid transparent;outline-offset:2px;
785
+ &:focus {
786
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
617
787
  }
618
- &[role='radio'][aria-checked='true']::part(cha) {border-radius:9999px;background-color:var(--qti-primary-color);
788
+ /* @layer qti-variants { */
789
+ &::part(ch) {
790
+ display: none;
619
791
  }
620
- &[role='checkbox']::part(ch) {width:1.25rem;height:1.25rem;display:flex;flex-shrink:0;align-items:center;justify-content:center;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.25rem;border-style:solid;outline:2px solid transparent;outline-offset:2px;
792
+ &[aria-checked='true'] {
793
+ border-color: var(--qti-bg-primary);
621
794
  }
622
- &[role='checkbox'][aria-checked='true']::part(cha) {background-color:var(--qti-primary-color);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
623
- }display:flex;align-items:center;gap:0.5rem;border-radius:0.375rem;padding-left:0.25rem;padding-right:0.25rem;padding-top:0.125rem;padding-bottom:0.125rem;outline:2px solid transparent;outline-offset:2px;display:inline-flex
795
+ &[aria-readonly='true'] {
796
+ cursor: pointer;
797
+ background-color: white;
798
+ outline: 0;
799
+ border: none;
800
+ }
801
+ &[aria-disabled='true'] {
802
+ cursor: not-allowed;
803
+ background-color: var(--qti-bg-gray-100);
804
+ color: var(--qti-text-gray-500);
805
+ border-color: var(--qti-border-color-gray);
806
+ }
807
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
808
+ outline: none;
809
+ border-radius: var(--qti-border-radius-md);
810
+ padding: var(--qti-padding-sm) var(--qti-padding-md);
811
+ font-weight: var(--qti-font-weight-semibold);
812
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
813
+ outline: none
624
814
  }
625
- qti-hottext:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
626
- qti-hottext:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
815
+ /* } */
627
816
  }
628
817
 
629
818
  &.qti-unselected-hidden {
630
819
  qti-hottext {
631
- &::part(ch) {display:none !important;
820
+ &:hover {
821
+ background-color: var(--qti-bg-gray-50);
822
+ }
823
+ &:focus {
824
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
632
825
  }
633
- &[aria-checked='true'] {--qti-bg-opacity:1;background-color:rgb(191 219 254 / var(--qti-bg-opacity));
826
+ cursor: pointer;
827
+ &::part(ch) {
828
+ display: none;
634
829
  }
635
- &[aria-readonly='true'] {cursor:pointer;border-width:0px;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));outline-width:0px;
830
+ &[aria-checked='true'] {
831
+ background-color: var(--qti-primary-light); /* bg-blue-200 */
832
+ }
833
+ &[aria-readonly='true'] {
834
+ cursor: pointer;
835
+ background-color: white;
836
+ outline: 0;
837
+ border: none;
838
+ }
839
+ &[aria-disabled='true'] {
840
+ cursor: not-allowed;
841
+ background-color: var(--qti-bg-gray-100);
842
+ color: var(--qti-text-gray-500);
843
+ border-color: var(--qti-border-color-gray);
636
844
  }
637
- &[aria-disabled='true'] {cursor:not-allowed;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
638
- }display:inline-flex;cursor:pointer;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;outline:2px solid transparent;outline-offset:2px;border-color:transparent
639
845
  }
640
- qti-hottext:hover{border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;outline:2px solid transparent;outline-offset:2px;}
641
- qti-hottext:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
642
846
  }
643
847
  }
644
848
 
645
849
  qti-inline-choice-interaction {
646
- &::part(select) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-right:1.75rem;outline:2px solid transparent;outline-offset:2px;background:url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E") no-repeat center right 6px;
850
+ &::part(select) {
851
+ &:hover {
852
+ background-color: var(--qti-bg-gray-50);
853
+ }
854
+ &:focus {
855
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
856
+ }
857
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
858
+ outline: none;
859
+ border-radius: var(--qti-border-radius-md);
860
+ position: relative;
861
+ -webkit-appearance: none;
862
+ -moz-appearance: none;
863
+ appearance: none;
864
+ padding: var(--qti-padding-md) 1.75rem var(--qti-padding-md) var(--qti-padding-lg);
865
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
866
+ outline: none;
867
+ background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
868
+ no-repeat center right 6px
647
869
  }
648
- &::part(select):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
649
- &::part(select):focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
650
870
  }
651
871
 
652
872
  qti-match-interaction:not(.qti-match-tabular) {
653
873
  & qti-simple-match-set:first-of-type {
874
+ display: flex;
875
+ flex-wrap: wrap;
876
+ gap: var(--qti-gap-size); /* gap-2 */
877
+ padding-bottom: 1rem; /* pb-4 */
654
878
 
655
- & qti-simple-associable-choice {display:inline-block;cursor:grab;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;font-weight:600;outline:2px solid transparent;outline-offset:2px;background-image:
656
- radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
879
+ & qti-simple-associable-choice {
880
+ &:hover {
881
+ background-color: var(--qti-bg-gray-50);
882
+ }
883
+ &:focus {
884
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
885
+ }
886
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
887
+ outline: none;
888
+ padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
889
+ border-radius: var(--qti-border-radius-md);
890
+ cursor: grab;
891
+ background-color: white;
892
+ font-weight: var(--qti-font-weight-semibold);
893
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
894
+ outline: none;
895
+ background-image: radial-gradient(
896
+ circle at center,
897
+ rgba(0, 0, 0, 0.1) 0,
898
+ rgb(0, 0, 0, 0.1) 2px,
899
+ white 2px,
900
+ white 100%
901
+ );
657
902
  background-repeat: repeat-y;
658
903
  background-position: left 2px;
659
- background-size: 14px 8px;
904
+ background-size: 14px 8px
660
905
  }
661
-
662
- & qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
663
-
664
- & qti-simple-associable-choice:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}display:flex;flex-wrap:wrap;gap:0.5rem;padding-bottom:1rem
665
906
  }
666
907
 
667
908
  & qti-simple-match-set:last-of-type {
909
+ display: grid;
910
+ grid-auto-columns: 1fr; /* auto-cols-fr */
911
+ grid-auto-flow: column; /* grid-flow-col */
912
+ gap: var(--qti-gap-size); /* gap-2 */
913
+ width: 100%; /* w-full */
668
914
 
669
915
  & qti-simple-associable-choice {
670
- min-height: 4rem;display:flex;flex-direction:column;position:relative;margin:1px;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));outline:2px solid transparent;outline-offset:2px;
916
+ display: flex;
917
+ flex-direction: column;
671
918
  }
672
919
 
673
- & qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
920
+ & qti-simple-associable-choice[enabled] {
921
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
922
+ }
674
923
 
675
- & qti-simple-associable-choice:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
924
+ & qti-simple-associable-choice[active] {
925
+ border-color: var(--qti-bg-primary);
926
+ }
676
927
 
677
- & qti-simple-associable-choice[enabled] {outline-width:2px;outline-color:var(--qti-secondary-color);
928
+ & qti-simple-associable-choice::part(dropslot) {
929
+ &:hover {
930
+ background-color: var(--qti-bg-gray-50);
931
+ }
932
+ &:focus {
933
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
934
+ }
935
+ display: flex;
936
+ flex-direction: column;
937
+ min-height: 6rem;
938
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
939
+ outline: none;
940
+ border-radius: var(--qti-border-radius-lg);
941
+ position: relative;
942
+ background-color: var(--qti-bg-gray-50);
943
+ margin: 1px;
944
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
945
+ outline: none;
678
946
  }
679
947
 
680
- & qti-simple-associable-choice[active] {border-color:var(--qti-primary-color);
948
+ & qti-simple-associable-choice > qti-simple-associable-choice::part(dropslot) {
949
+ display: none;
681
950
  }
682
951
 
683
952
  & qti-simple-associable-choice > *:not(qti-simple-associable-choice) {
@@ -685,170 +954,392 @@ qti-response-declaration {
685
954
  }
686
955
 
687
956
  & qti-simple-associable-choice > qti-simple-associable-choice {
688
- flex-basis: fit-content;display:inline-block;cursor:grab;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;font-weight:600;outline:2px solid transparent;outline-offset:2px;background-image:
689
- radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
957
+ &:hover {
958
+ background-color: var(--qti-bg-gray-50);
959
+ }
960
+ &:focus {
961
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
962
+ }
963
+ flex-basis: fit-content;
964
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
965
+ outline: none;
966
+ padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
967
+ border-radius: var(--qti-border-radius-md);
968
+ cursor: grab;
969
+ background-color: white;
970
+ font-weight: var(--qti-font-weight-semibold);
971
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
972
+ outline: none;
973
+ background-image: radial-gradient(
974
+ circle at center,
975
+ rgba(0, 0, 0, 0.1) 0,
976
+ rgb(0, 0, 0, 0.1) 2px,
977
+ white 2px,
978
+ white 100%
979
+ );
690
980
  background-repeat: repeat-y;
691
981
  background-position: left 2px;
692
982
  background-size: 14px 8px;
693
983
  }
694
-
695
- & qti-simple-associable-choice>qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
696
-
697
- & qti-simple-associable-choice>qti-simple-associable-choice:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;width:100%;gap:0.5rem
698
984
  }
699
985
  }
700
986
 
701
987
  qti-order-interaction {
702
988
  &::part(qti-simple-choice),
703
- & qti-simple-choice {display:inline-block;cursor:grab;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;font-weight:600;outline:2px solid transparent;outline-offset:2px;background-image:
704
- radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
705
- background-repeat: repeat-y;
706
- background-position: left 2px;
707
- background-size: 14px 8px;
989
+ & qti-simple-choice {
990
+ &:hover {
991
+ background-color: var(--qti-bg-gray-50);
992
+ }
993
+ &:focus {
994
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
995
+ }
996
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
997
+ outline: none;
998
+ padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
999
+ border-radius: var(--qti-border-radius-md);
1000
+ cursor: grab;
1001
+ background-color: white;
1002
+ font-weight: var(--qti-font-weight-semibold);
1003
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1004
+ outline: none;
1005
+ background-image: radial-gradient(
1006
+ circle at center,
1007
+ rgba(0, 0, 0, 0.1) 0,
1008
+ rgb(0, 0, 0, 0.1) 2px,
1009
+ white 2px,
1010
+ white 100%
1011
+ );
1012
+ background-repeat: repeat-y;
1013
+ background-position: left 2px;
1014
+ background-size: 14px 8px
708
1015
  }
709
- &::part(qti-simple-choice):hover,& qti-simple-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
710
- &::part(qti-simple-choice):focus,& qti-simple-choice:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
711
- &::part(qti-simple-choice) {width:100%;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;
1016
+ &::part(qti-simple-choice) {
1017
+ display: flex;
1018
+ overflow: hidden;
1019
+ align-items: center;
1020
+ width: 100%;
1021
+ text-overflow: ellipsis;
712
1022
  }
713
- &::part(drops) {gap:0.5rem;
1023
+ &::part(drops) {
1024
+ gap: 0.5rem; /* gap-2 */
714
1025
  }
715
- &::part(drags) {gap:0.5rem;
1026
+ &::part(drags) {
1027
+ gap: 0.5rem; /* gap-2 */
716
1028
  }
717
- &::part(drop-list) {position:relative;margin:1px;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));outline:2px solid transparent;outline-offset:2px;min-height:4rem;display:flex;
1029
+ &::part(drop-list) {
1030
+ &:hover {
1031
+ background-color: var(--qti-bg-gray-50);
1032
+ }
1033
+ &:focus {
1034
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1035
+ }
1036
+ display: flex;
1037
+ min-height: 4rem;
1038
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1039
+ outline: none;
1040
+ border-radius: var(--qti-border-radius-lg);
1041
+ position: relative;
1042
+ background-color: var(--qti-bg-gray-50);
1043
+ margin: 1px;
1044
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1045
+ outline: none;
718
1046
  }
719
- &::part(drop-list):hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
720
- &::part(drop-list):focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
721
- &::part(active) {border-color:var(--qti-primary-color);
1047
+ &::part(active) {
1048
+ border-color: var(--qti-bg-primary);
722
1049
  }
723
1050
  }
724
1051
 
725
1052
  qti-associate-interaction {
726
1053
  &::part(qti-simple-associable-choice),
727
- & qti-simple-associable-choice {display:inline-block;cursor:grab;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.375rem;border-style:solid;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:0.75rem;font-weight:600;outline:2px solid transparent;outline-offset:2px;background-image:
728
- radial-gradient(circle at center, rgba(0, 0, 0, 0.1) 0, rgb(0, 0, 0, 0.1) 2px, white 2px, white 100%);
729
- background-repeat: repeat-y;
730
- background-position: left 2px;
731
- background-size: 14px 8px;;display:flex;align-items:center;overflow:hidden;text-overflow:ellipsis;
1054
+ & qti-simple-associable-choice {
1055
+ /* drags in drops */
1056
+ display: flex;
1057
+ overflow: hidden;
1058
+ align-items: center;
1059
+ text-overflow: ellipsis;
1060
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1061
+ outline: none;
1062
+ padding: var(--qti-padding-md) var(--qti-padding-lg) var(--qti-padding-md) var(--qti-padding-xl);
1063
+ border-radius: var(--qti-border-radius-md);
1064
+ cursor: grab;
1065
+ background-color: white;
1066
+ font-weight: var(--qti-font-weight-semibold);
1067
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1068
+ outline: none;
1069
+ background-image: radial-gradient(
1070
+ circle at center,
1071
+ rgba(0, 0, 0, 0.1) 0,
1072
+ rgb(0, 0, 0, 0.1) 2px,
1073
+ white 2px,
1074
+ white 100%
1075
+ );
1076
+ background-repeat: repeat-y;
1077
+ background-position: left 2px;
1078
+ background-size: 14px 8px;
732
1079
  }
733
- &::part(qti-simple-associable-choice):hover,& qti-simple-associable-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
734
- &::part(qti-simple-associable-choice):focus,& qti-simple-associable-choice:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
735
1080
  &::part(associables-container) {
1081
+ display: flex;
1082
+ justify-content: space-between;
736
1083
  background: linear-gradient(
737
1084
  180deg,
738
1085
  rgb(0 0 0 / 0%) calc(50% - 1px),
739
- #000000 calc(50%),
1086
+ var(--qti-border-color-gray) calc(50%),
740
1087
  rgb(0 0 0 / 0%) calc(50% + 1px)
741
- );margin-top:0.5rem;margin-bottom:0.5rem;width:100%;display:flex;justify-content:space-between;
1088
+ );
1089
+ }
1090
+ &::part(active) {
1091
+ border-color: var(--qti-bg-primary);
742
1092
  }
743
- &::part(active) {border-color:var(--qti-primary-color);
1093
+ &::part(drop-container) {
1094
+ display: flex;
1095
+ flex-direction: column;
1096
+ gap: var(--qti-gap-size);
744
1097
  }
745
- &::part(drop-list) {position:relative;margin:1px;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-radius:0.5rem;border-style:solid;--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));outline:2px solid transparent;outline-offset:2px;display:grid;height:3rem;width:33.3333333333%;
1098
+ &::part(drop-list) {
1099
+ &:focus {
1100
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1101
+ }
1102
+ display: grid;
1103
+ height: 3rem;
1104
+ min-width: 10rem;
1105
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1106
+ outline: none;
1107
+ border-radius: var(--qti-border-radius-lg);
1108
+ position: relative;
1109
+ background-color: var(--qti-bg-gray-50);
1110
+ margin: 1px;
1111
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1112
+ outline: none;
746
1113
  }
747
1114
  }
748
1115
 
749
1116
  qti-graphic-order-interaction {
750
1117
  & qti-hotspot-choice {
751
- &[aria-checked='true'] {border-color:var(--qti-primary-color);
1118
+ &:hover {
1119
+ background-color: var(--qti-bg-gray-50);
1120
+ }
1121
+ &:focus {
1122
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1123
+ }
1124
+ &[aria-checked='true'] {
1125
+ border-color: var(--qti-bg-primary);
752
1126
  }
753
- &[aria-readonly='true'] {cursor:pointer;border-width:0px;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));outline-width:0px;
1127
+ &[aria-readonly='true'] {
1128
+ cursor: pointer;
1129
+ background-color: white;
1130
+ outline: 0;
1131
+ border: none;
754
1132
  }
755
- &[aria-disabled='true'] {cursor:not-allowed;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
1133
+ &[aria-disabled='true'] {
1134
+ cursor: not-allowed;
1135
+ background-color: var(--qti-bg-gray-100);
1136
+ color: var(--qti-text-gray-500);
1137
+ border-color: var(--qti-border-color-gray);
756
1138
  }
757
- &[aria-ordervalue] {height:1.5rem;width:1.5rem;border-radius:9999px;background-color:var(--qti-primary-color);--qti-text-opacity:1;color:rgb(255 255 255 / var(--qti-text-opacity));display:flex;align-items:center;justify-content:center;
1139
+ &[aria-ordervalue] {
1140
+ display: flex;
1141
+ justify-content: center;
1142
+ align-items: center;
1143
+ background-color: var(--qti-bg-primary);
1144
+ border-radius: var(--qti-border-radius-full);
1145
+ width: 1.5rem;
1146
+ height: 1.5rem;
1147
+ color: var(--qti-text-white);
758
1148
  }
759
1149
  &[aria-ordervalue]::after {
760
1150
  content: attr(aria-ordervalue) !important;
761
- }height:100%;width:100%;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;background-color:transparent;padding:0;outline:2px solid transparent;outline-offset:2px
1151
+ }
1152
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1153
+ outline: none;
1154
+ width: 100%;
1155
+ height: 100%;
1156
+ background-color: transparent;
1157
+ padding: 0;
1158
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1159
+ outline: none
762
1160
  }
763
- & qti-hotspot-choice:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
764
- & qti-hotspot-choice:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
765
1161
  }
766
1162
 
767
1163
  qti-graphic-associate-interaction {
1164
+ position: relative;
1165
+ display: block;
768
1166
 
769
1167
  & qti-associable-hotspot {
770
1168
  &[shape='circle'] {
771
- /* border-radius: 100%;
772
- background-color: green; */
773
- &[aria-checked='true'] {border-color:var(--qti-primary-color);
1169
+ &:hover {
1170
+ background-color: var(--qti-bg-gray-50);
1171
+ }
1172
+ &:focus {
1173
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
774
1174
  }
775
- &[aria-readonly='true'] {cursor:pointer;border-width:0px;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));outline-width:0px;
1175
+ &[aria-checked='true'] {
1176
+ border-color: var(--qti-bg-primary);
776
1177
  }
777
- &[aria-disabled='true'] {cursor:not-allowed;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
778
- }height:100%;width:100%;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;background-color:transparent;padding:0;outline:2px solid transparent;outline-offset:2px
1178
+ &[aria-readonly='true'] {
1179
+ cursor: pointer;
1180
+ background-color: white;
1181
+ outline: 0;
1182
+ border: none;
1183
+ }
1184
+ &[aria-disabled='true'] {
1185
+ cursor: not-allowed;
1186
+ background-color: var(--qti-bg-gray-100);
1187
+ color: var(--qti-text-gray-500);
1188
+ border-color: var(--qti-border-color-gray);
1189
+ }
1190
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1191
+ outline: none;
1192
+ width: 100%;
1193
+ height: 100%;
1194
+ background-color: transparent;
1195
+ padding: 0;
1196
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1197
+ outline: none
779
1198
  }
780
- &[shape="circle"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
781
- &[shape="circle"]:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
782
1199
 
783
1200
  &[shape='square'] {
784
- /* border-radius: 0; */
785
- /* background-color: green; */
786
- &[aria-checked='true'] {border-color:var(--qti-primary-color);
1201
+ &:hover {
1202
+ background-color: var(--qti-bg-gray-50);
1203
+ }
1204
+ &:focus {
1205
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1206
+ }
1207
+ &[aria-checked='true'] {
1208
+ border-color: var(--qti-bg-primary);
1209
+ }
1210
+ &[aria-readonly='true'] {
1211
+ cursor: pointer;
1212
+ background-color: white;
1213
+ outline: 0;
1214
+ border: none;
787
1215
  }
788
- &[aria-readonly='true'] {cursor:pointer;border-width:0px;--qti-bg-opacity:1;background-color:rgb(255 255 255 / var(--qti-bg-opacity));outline-width:0px;
1216
+ &[aria-disabled='true'] {
1217
+ cursor: not-allowed;
1218
+ background-color: var(--qti-bg-gray-100);
1219
+ color: var(--qti-text-gray-500);
1220
+ border-color: var(--qti-border-color-gray);
789
1221
  }
790
- &[aria-disabled='true'] {cursor:not-allowed;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
791
- }height:100%;width:100%;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;background-color:transparent;padding:0;outline:2px solid transparent;outline-offset:2px
1222
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1223
+ outline: none;
1224
+ width: 100%;
1225
+ height: 100%;
1226
+ background-color: transparent;
1227
+ padding: 0;
1228
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1229
+ outline: none
792
1230
  }
793
-
794
- &[shape="square"]:hover{--qti-bg-opacity:1;background-color:rgb(249 250 251 / var(--qti-bg-opacity));}
795
-
796
- &[shape="square"]:focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
797
- }position:relative;display:block
1231
+ }
798
1232
  }
799
1233
 
800
1234
  qti-graphic-gap-match-interaction {
801
- & img {margin:0;padding:0;
802
- }position:relative
1235
+ position: relative;
1236
+ & img {
1237
+ margin: 0;
1238
+ padding: 0;
1239
+ }
803
1240
  }
804
1241
 
805
- qti-slider-interaction { /* else no screenshot will be made with html-to-image */
1242
+ qti-slider-interaction {
1243
+ display: block;
806
1244
 
807
1245
  --qti-tick-color: rgb(229 231 235 / 1);
808
1246
  --qti-tick-width: 1px;
809
1247
 
810
- &::part(slider) { /* so the slider stays INSIDE of the qti-slider-interaction */ /* this keeps all content in the qti-slider interaction, also for html-to-image */margin-left:2rem;margin-right:2rem;padding-bottom:1rem;padding-top:1.25rem;
1248
+ &::part(slider) {
1249
+ margin-left: 2rem; /* mx-8 */
1250
+ margin-right: 2rem;
1251
+ padding-bottom: 1rem; /* pb-4 */
1252
+ padding-top: 1.25rem; /* pt-5 */
811
1253
  }
812
1254
 
813
1255
  --show-bounds: true;
814
- &::part(bounds) { /* the two divs with value lower and upper will now be at start and end of this bounds container */ /* just so it aligns with the value 'knob' */width:100%;display:flex;justify-content:space-between;margin-bottom:0.5rem;
1256
+ &::part(bounds) {
1257
+ display: flex;
1258
+ width: 100%;
1259
+ justify-content: space-between;
1260
+ margin-bottom: 0.5rem; /* mb-2 */
815
1261
  }
816
1262
 
817
1263
  --show-ticks: true;
818
- &::part(ticks) { /* absolute height for the ticks, and keep distance of the rail. push them 0.5 inward */
1264
+ &::part(ticks) {
1265
+ margin-left: 0.125rem; /* mx-0.5 */
1266
+ margin-right: 0.125rem;
1267
+ margin-bottom: 0.25rem; /* mb-1 */
1268
+ height: 0.5rem; /* h-2 */
819
1269
  background-position: 0 center;
820
1270
  background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
821
- background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;margin-left:0.125rem;margin-right:0.125rem;margin-bottom:0.25rem;height:0.5rem;
1271
+ background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
822
1272
  }
823
1273
 
824
- &::part(rail) { /* so the knob is neatly centered vertically */
825
- /* DESIGN */ /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */display:flex;align-items:center;box-sizing:border-box;height:0.375rem;width:100%;cursor:pointer;border-width:1px;--qti-border-opacity:1;border-color:rgb(209 213 219 / var(--qti-border-opacity));border-radius:9999px;border-style:solid;--qti-bg-opacity:1;background-color:rgb(229 231 235 / var(--qti-bg-opacity));
1274
+ &::part(rail) {
1275
+ display: flex;
1276
+ align-items: center;
1277
+ box-sizing: border-box;
1278
+ height: 0.375rem; /* h-1.5 */
1279
+ width: 100%;
1280
+ cursor: pointer;
1281
+ border-radius: 9999px; /* rounded-full */
1282
+ border: 1px solid #d1d5db; /* border-gray-300 */
1283
+ background-color: #e5e7eb; /* bg-gray-200 */
826
1284
  }
827
1285
 
828
1286
  &::part(knob) {
829
- left: var(--value-percentage);position:relative;height:1rem;width:1rem;transform-origin:center;--qti-translate-x:-50%;transform:translateX(var(--qti-translate-x)) translateY(var(--qti-translate-y)) translateZ(var(--qti-translate-z)) rotate(var(--qti-rotate)) rotateX(var(--qti-rotate-x)) rotateY(var(--qti-rotate-y)) rotateZ(var(--qti-rotate-z)) skewX(var(--qti-skew-x)) skewY(var(--qti-skew-y)) scaleX(var(--qti-scale-x)) scaleY(var(--qti-scale-y)) scaleZ(var(--qti-scale-z));cursor:pointer;border-radius:9999px;background-color:var(--qti-primary-color);
1287
+ background-color: var(--qti-primary);
1288
+ position: relative;
1289
+ height: 1rem; /* h-4 */
1290
+ width: 1rem; /* w-4 */
1291
+ transform-origin: center;
1292
+ transform: translateX(-50%);
1293
+ cursor: pointer;
1294
+ border-radius: 9999px; /* rounded-full */
1295
+ left: var(--value-percentage);
830
1296
  }
831
1297
 
832
1298
  --show-value: true;
833
- &::part(value) { /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ /* should be half width of the knob if you want to center these two */position:absolute;bottom:2rem;left:0.5rem;--qti-translate-x:-50%;transform:translateX(var(--qti-translate-x)) translateY(var(--qti-translate-y)) translateZ(var(--qti-translate-z)) rotate(var(--qti-rotate)) rotateX(var(--qti-rotate-x)) rotateY(var(--qti-rotate-y)) rotateZ(var(--qti-rotate-z)) skewX(var(--qti-skew-x)) skewY(var(--qti-skew-y)) scaleX(var(--qti-scale-x)) scaleY(var(--qti-scale-y)) scaleZ(var(--qti-scale-z));cursor:pointer;border-radius:0.25rem;--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));padding-left:0.5rem;padding-right:0.5rem;padding-top:0.25rem;padding-bottom:0.25rem;text-align:center;--qti-text-opacity:1;color:rgb(107 114 128 / var(--qti-text-opacity));
834
- }display:block
1299
+ &::part(value) {
1300
+ position: absolute;
1301
+ bottom: 2rem; /* bottom-8 */
1302
+ left: 0.5rem; /* left-2 */
1303
+ transform: translateX(-50%);
1304
+ cursor: pointer;
1305
+ border-radius: 0.25rem; /* rounded */
1306
+ background-color: #f3f4f6; /* bg-gray-100 */
1307
+ padding: 0.25rem 0.5rem; /* px-2 py-1 */
1308
+ text-align: center;
1309
+ color: #6b7280; /* text-gray-500 */
1310
+ }
835
1311
  }
836
1312
 
837
1313
  qti-select-point-interaction {
838
- &::part(point) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/height:1.5rem;width:1.5rem;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;background-color:transparent;padding:0;outline:2px solid transparent;outline-offset:2px;border-radius:9999px;
1314
+ &::part(point) {
1315
+ &:hover {
1316
+ background-color: var(--qti-bg-gray-50);
1317
+ }
1318
+ &:focus {
1319
+ outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1320
+ }
1321
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1322
+ border-radius: var(--qti-border-radius-full);
1323
+ outline: none;
1324
+ width: 1.5rem;
1325
+ height: 1.5rem;
1326
+ background-color: transparent;
1327
+ padding: 0;
1328
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color-gray);
1329
+ outline: none;
839
1330
  }
840
- &::part(point):focus{outline-width:2px;outline-color:var(--qti-secondary-color);}
841
- &::part(point):hover{--qti-bg-opacity:1;background-color:rgb(219 234 254 / var(--qti-bg-opacity));--qti-bg-opacity:0.3;}
842
1331
  }
843
1332
 
844
1333
  qti-position-object-stage {
845
1334
  & qti-position-object-interaction {
846
1335
  /* no styles necessary, only layout styles, defined in the component */
847
- /* height: 40px; */
848
1336
  }
849
1337
  }
850
1338
 
851
- qti-prompt {margin-top:0.5rem;margin-bottom:0.5rem;display:block;width:100%;
1339
+ qti-prompt {
1340
+ margin: 0.5rem 0; /* my-2 */
1341
+ display: block;
1342
+ width: 100%;
852
1343
  }
853
1344
  }
854
1345
 
@@ -910,7 +1401,17 @@ qti-response-declaration {
910
1401
  border: 1px solid #888;
911
1402
  }
912
1403
 
913
- .qti-well {display:inline-block;border-width:2px;--qti-border-opacity:1;border-color:rgb(156 163 175 / var(--qti-border-opacity));border-style:solid;outline:2px solid transparent;outline-offset:2px;border-width:1px;--qti-border-opacity:1;border-color:rgb(209 213 219 / var(--qti-border-opacity));border-radius:0.25rem;--qti-bg-opacity:1;background-color:rgb(243 244 246 / var(--qti-bg-opacity));padding-left:0.75rem;padding-right:0.75rem;padding-top:0.5rem;padding-bottom:0.5rem;--qti-text-opacity:1;color:rgb(75 85 99 / var(--qti-text-opacity));
1404
+ .qti-well {
1405
+ display: inline-block;
1406
+ padding-top: 0.5rem;
1407
+ padding-bottom: 0.5rem;
1408
+ padding-left: 0.75rem;
1409
+ padding-right: 0.75rem;
1410
+ border-radius: 0.25rem;
1411
+ border-width: 1px;
1412
+ border-color: #d1d5db;
1413
+ color: #4b5563;
1414
+ background-color: #f3f4f6;
914
1415
  }
915
1416
  }
916
1417
 
@@ -958,32 +1459,46 @@ qti-response-declaration {
958
1459
  @layer qti-variants {
959
1460
  qti-choice-interaction {
960
1461
  &.qti-choices-stacking-2 {
961
- qti-prompt {grid-column:span 2/span 2;
962
- }display:grid;grid-template-columns:repeat(2,minmax(0,1fr))
1462
+ .grid {
1463
+ display: grid; /* grid */
1464
+ }
1465
+ grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
1466
+ qti-prompt {
1467
+ grid-column: span 2 / span 2; /* col-span-2 */
1468
+ }
963
1469
  }
964
1470
  &.qti-choices-stacking-3 {
965
- qti-prompt {grid-column:span 3/span 3;
966
- }display:grid;grid-template-columns:repeat(3,minmax(0,1fr))
1471
+ .grid {
1472
+ display: grid;
1473
+ }
1474
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1475
+ qti-prompt {
1476
+ grid-column: span 3 / span 3;
1477
+ }
967
1478
  }
968
1479
  &.qti-choices-stacking-4 {
969
- qti-prompt {grid-column:span 4/span 4;
970
- }display:grid;grid-template-columns:repeat(4,minmax(0,1fr))
1480
+ .grid {
1481
+ display: grid;
1482
+ }
1483
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1484
+ qti-prompt {
1485
+ grid-column: span 4 / span 4;
1486
+ }
971
1487
  }
972
1488
  &.qti-choices-stacking-5 {
973
- qti-prompt {grid-column:span 5/span 5;
974
- }display:grid;grid-template-columns:repeat(5,minmax(0,1fr))
1489
+ .grid {
1490
+ display: grid;
1491
+ }
1492
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1493
+ qti-prompt {
1494
+ grid-column: span 5 / span 5;
1495
+ }
975
1496
  }
976
1497
  &.qti-orientation-horizontal {
977
1498
  /* is the default layout */
978
1499
  }
979
- &[orientation='horizontal'] {flex-direction:row;
1500
+ &[orientation='horizontal'] {
1501
+ flex-direction: row;
980
1502
  }
981
1503
  }
982
1504
  }
983
-
984
- /* @unocss; */
985
-
986
- :root {
987
- --qti-primary-color: cornflowerblue;
988
- --qti-secondary-color: rgb(155, 140, 25);
989
- }