@citolab/qti-components 7.28.0 → 8.0.0

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 (83) hide show
  1. package/cdn/index.global.js +1 -1
  2. package/cdn/index.js +6178 -2946
  3. package/dist/base.d.ts +9 -50
  4. package/dist/base.js +31 -6
  5. package/dist/chunk-5QYII4OZ.js +1374 -0
  6. package/dist/chunk-5QYII4OZ.js.map +1 -0
  7. package/dist/{chunk-FK2IVMS3.js → chunk-5SJS36BI.js} +4264 -3647
  8. package/dist/chunk-5SJS36BI.js.map +1 -0
  9. package/dist/chunk-64XSIBGO.js +241 -0
  10. package/dist/chunk-64XSIBGO.js.map +1 -0
  11. package/dist/{chunk-F6WP6WEF.js → chunk-7V4HJFHW.js} +3 -3
  12. package/dist/{chunk-F6WP6WEF.js.map → chunk-7V4HJFHW.js.map} +1 -1
  13. package/dist/{chunk-Z2SUBRH5.js → chunk-H3J7LFRO.js} +834 -1005
  14. package/dist/chunk-H3J7LFRO.js.map +1 -0
  15. package/dist/chunk-IJD53WY6.js +719 -0
  16. package/dist/chunk-IJD53WY6.js.map +1 -0
  17. package/dist/chunk-KYEZRYO6.js +1608 -0
  18. package/dist/chunk-KYEZRYO6.js.map +1 -0
  19. package/dist/{chunk-PINGOK2F.js → chunk-LZJHHZQ2.js} +1979 -1775
  20. package/dist/chunk-LZJHHZQ2.js.map +1 -0
  21. package/dist/chunk-MGF5F3S2.js +11 -0
  22. package/dist/chunk-MGF5F3S2.js.map +1 -0
  23. package/dist/chunk-MJVPNN7W.js +11 -0
  24. package/dist/chunk-MJVPNN7W.js.map +1 -0
  25. package/dist/{chunk-YLIYPNMK.js → chunk-NA2N2WSG.js} +1303 -1193
  26. package/dist/chunk-NA2N2WSG.js.map +1 -0
  27. package/dist/chunk-V5G7X53Y.js +11 -0
  28. package/dist/chunk-V5G7X53Y.js.map +1 -0
  29. package/dist/chunk-W4QZPCNC.js +294 -0
  30. package/dist/chunk-W4QZPCNC.js.map +1 -0
  31. package/dist/chunk-WCQ26LV7.js +102 -0
  32. package/dist/chunk-WCQ26LV7.js.map +1 -0
  33. package/dist/{chunk-OQ77SE2W.js → chunk-WVVMNF74.js} +851 -925
  34. package/dist/chunk-WVVMNF74.js.map +1 -0
  35. package/dist/{chunk-N7S3GNUP.js → chunk-X3E5HXG2.js} +2 -2
  36. package/dist/corrections.d.ts +1 -0
  37. package/dist/corrections.js +84 -0
  38. package/dist/elements.d.ts +1 -399
  39. package/dist/elements.js +6 -5
  40. package/dist/index.d.ts +9 -23
  41. package/dist/index.js +189 -76
  42. package/dist/interactions.d.ts +1 -915
  43. package/dist/interactions.js +19 -15
  44. package/dist/item.css +4118 -1920
  45. package/dist/item.d.ts +1 -127
  46. package/dist/item.js +6 -11
  47. package/dist/loader.d.ts +1 -22
  48. package/dist/loader.js +2 -3
  49. package/dist/processing.d.ts +1 -731
  50. package/dist/processing.js +2 -3
  51. package/dist/qti-components-jsx.d.ts +5394 -2718
  52. package/dist/test.d.ts +1 -537
  53. package/dist/test.js +26 -11
  54. package/dist/transformers.d.ts +1 -18
  55. package/dist/transformers.js +1 -2
  56. package/package.json +20 -16
  57. package/custom-elements.json +0 -43161
  58. package/dist/chunk-BPIDAS3T.js +0 -495
  59. package/dist/chunk-BPIDAS3T.js.map +0 -1
  60. package/dist/chunk-FK2IVMS3.js.map +0 -1
  61. package/dist/chunk-LQZCSHN5.js +0 -3673
  62. package/dist/chunk-LQZCSHN5.js.map +0 -1
  63. package/dist/chunk-OQ77SE2W.js.map +0 -1
  64. package/dist/chunk-PINGOK2F.js.map +0 -1
  65. package/dist/chunk-QXBXORM3.js +0 -27
  66. package/dist/chunk-U2FLSHK7.js +0 -510
  67. package/dist/chunk-U2FLSHK7.js.map +0 -1
  68. package/dist/chunk-YLIYPNMK.js.map +0 -1
  69. package/dist/chunk-Z2SUBRH5.js.map +0 -1
  70. package/dist/computed-item.context-DfsW_96S.d.ts +0 -22
  71. package/dist/computed.context-DHbxad0N.d.ts +0 -45
  72. package/dist/config.context-BjZ2bZSY.d.ts +0 -42
  73. package/dist/interaction-Bgzlw7Iu.d.ts +0 -110
  74. package/dist/item.context-CkUeDcaO.d.ts +0 -15
  75. package/dist/qti-condition-expression-B1BYmCcq.d.ts +0 -26
  76. package/dist/qti-feedback-ChmXhZuf.d.ts +0 -21
  77. package/dist/qti-rule-base-ajOnfGXY.d.ts +0 -16
  78. package/dist/qti-transform-test-DMx816H0.d.ts +0 -68
  79. package/dist/qti.context-B8PSyIWm.d.ts +0 -14
  80. package/dist/test.context-CByZZjkR.d.ts +0 -15
  81. package/dist/variables-CMYcDbyW.d.ts +0 -70
  82. /package/dist/{chunk-N7S3GNUP.js.map → chunk-X3E5HXG2.js.map} +0 -0
  83. /package/dist/{chunk-QXBXORM3.js.map → corrections.js.map} +0 -0
@@ -1,3673 +0,0 @@
1
- import {
2
- E,
3
- e3 as e,
4
- f,
5
- n2 as n
6
- } from "./chunk-Z2SUBRH5.js";
7
-
8
- // ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/node/directives/private-async-helpers.js
9
- var s = class {
10
- constructor(t) {
11
- this.G = t;
12
- }
13
- disconnect() {
14
- this.G = void 0;
15
- }
16
- reconnect(t) {
17
- this.G = t;
18
- }
19
- deref() {
20
- return this.G;
21
- }
22
- };
23
- var i = class {
24
- constructor() {
25
- this.Y = void 0, this.Z = void 0;
26
- }
27
- get() {
28
- return this.Y;
29
- }
30
- pause() {
31
- this.Y ??= new Promise((t) => this.Z = t);
32
- }
33
- resume() {
34
- this.Z?.(), this.Y = this.Z = void 0;
35
- }
36
- };
37
-
38
- // ../../node_modules/.pnpm/lit-html@3.3.2/node_modules/lit-html/node/directives/until.js
39
- var n2 = (t) => !n(t) && "function" == typeof t.then;
40
- var h = 1073741823;
41
- var c = class extends f {
42
- constructor() {
43
- super(...arguments), this._$Cwt = h, this._$Cbt = [], this._$CK = new s(this), this._$CX = new i();
44
- }
45
- render(...s2) {
46
- return s2.find((t) => !n2(t)) ?? E;
47
- }
48
- update(s2, i2) {
49
- const e2 = this._$Cbt;
50
- let r = e2.length;
51
- this._$Cbt = i2;
52
- const o = this._$CK, c2 = this._$CX;
53
- this.isConnected || this.disconnected();
54
- for (let t = 0; t < i2.length && !(t > this._$Cwt); t++) {
55
- const s3 = i2[t];
56
- if (!n2(s3)) return this._$Cwt = t, s3;
57
- t < r && s3 === e2[t] || (this._$Cwt = h, r = 0, Promise.resolve(s3).then(async (t2) => {
58
- for (; c2.get(); ) await c2.get();
59
- const i3 = o.deref();
60
- if (void 0 !== i3) {
61
- const e3 = i3._$Cbt.indexOf(s3);
62
- e3 > -1 && e3 < i3._$Cwt && (i3._$Cwt = e3, i3.setValue(t2));
63
- }
64
- }));
65
- }
66
- return E;
67
- }
68
- disconnected() {
69
- this._$CK.disconnect(), this._$CX.pause();
70
- }
71
- reconnected() {
72
- this._$CK.reconnect(this), this._$CX.resume();
73
- }
74
- };
75
- var m = e(c);
76
-
77
- // inline:../../../../qti-theme/src/item.css?inline
78
- var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
79
-
80
- /* https://www.imsglobal.org/sites/default/files/spec/qti/v3/guide/img/qti3p0.css */
81
-
82
- /* ============================
83
- QTI 3 shared css
84
- 1. Display
85
- 2. Special Flex styles
86
- 3. Margin
87
- 4. Padding
88
- 5. Horizontal Alignment styles
89
- 6. Vertical Alignment styles
90
- 7. Height
91
- 8. Width
92
- 9. Text-Indent
93
- 10. List Style
94
- 11. Layout
95
- 12. Other QTI 3 presentation utilities
96
- ============================ */
97
-
98
- /* ==========
99
- Display css
100
- =========== */
101
-
102
- .qti-display-inline {
103
- display: inline;
104
- }
105
-
106
- .qti-display-inline-block {
107
- display: inline-block;
108
- }
109
-
110
- .qti-display-block {
111
- display: block;
112
- }
113
-
114
- .qti-display-flex {
115
- display: flex;
116
- }
117
-
118
- .qti-display-inline-flex {
119
- display: inline-flex;
120
- }
121
-
122
- .qti-display-grid {
123
- display: grid;
124
- }
125
-
126
- .qti-display-inline-grid {
127
- display: inline-grid;
128
- }
129
-
130
- .qti-display-table {
131
- display: table;
132
- }
133
-
134
- .qti-display-table-cell {
135
- display: table-cell;
136
- }
137
-
138
- .qti-display-table-row {
139
- display: table-row;
140
- }
141
-
142
- .qti-display-list-item {
143
- display: list-item;
144
- }
145
-
146
- .qti-display-inherit {
147
- display: inherit;
148
- }
149
-
150
- /*
151
- * hidden to screen readers and sighted
152
- */
153
-
154
- .qti-hidden {
155
- display: none;
156
- }
157
-
158
- /*
159
- * visible to screen readers, hidden to sighted
160
- */
161
-
162
- .qti-visually-hidden {
163
- position: fixed !important;
164
- overflow: hidden;
165
- clip: rect(1px 1px 1px 1px);
166
- height: 1px;
167
- width: 1px;
168
- border: 0;
169
- margin: -1px;
170
- }
171
-
172
- /* =============================
173
- Special flex styles
174
- ============================= */
175
-
176
- .qti-flex-direction-column {
177
- flex-direction: column;
178
- }
179
-
180
- .qti-flex-direction-row {
181
- flex-direction: row;
182
- }
183
-
184
- .qti-flex-grow-1 {
185
- flex-grow: 1;
186
- }
187
-
188
- .qti-flex-grow-0 {
189
- flex-grow: 0;
190
- }
191
-
192
- /* =========
193
- Margin css
194
- ========== */
195
-
196
- /**
197
- * For margin Top and Bottom and Left and Right
198
- */
199
-
200
- .qti-margin-0 {
201
- margin: 0 !important;
202
- }
203
-
204
- .qti-margin-1 {
205
- margin: 0.25rem !important;
206
- }
207
-
208
- .qti-margin-2 {
209
- margin: 0.5rem !important;
210
- }
211
-
212
- .qti-margin-3 {
213
- margin: 1rem !important;
214
- }
215
-
216
- .qti-margin-4 {
217
- margin: 1.5rem !important;
218
- }
219
-
220
- .qti-margin-5 {
221
- margin: 3rem !important;
222
- }
223
-
224
- .qti-margin-auto {
225
- margin: auto !important;
226
- }
227
-
228
- /*
229
- For margin Left and Right
230
- */
231
-
232
- .qti-margin-x-0 {
233
- margin-right: 0 !important;
234
- margin-left: 0 !important;
235
- }
236
-
237
- .qti-margin-x-1 {
238
- margin-right: 0.25rem !important;
239
- margin-left: 0.25rem !important;
240
- }
241
-
242
- .qti-margin-x-2 {
243
- margin-right: 0.5rem !important;
244
- margin-left: 0.5rem !important;
245
- }
246
-
247
- .qti-margin-x-3 {
248
- margin-right: 1rem !important;
249
- margin-left: 1rem !important;
250
- }
251
-
252
- .qti-margin-x-4 {
253
- margin-right: 1.5rem !important;
254
- margin-left: 1.5rem !important;
255
- }
256
-
257
- .qti-margin-x-5 {
258
- margin-right: 3rem !important;
259
- margin-left: 3rem !important;
260
- }
261
-
262
- .qti-margin-x-auto {
263
- margin-right: auto !important;
264
- margin-left: auto !important;
265
- }
266
-
267
- /*
268
- For margin Top and Bottom
269
- */
270
-
271
- .qti-margin-y-0 {
272
- margin-top: 0 !important;
273
- margin-bottom: 0 !important;
274
- }
275
-
276
- .qti-margin-y-1 {
277
- margin-top: 0.25rem !important;
278
- margin-bottom: 0.25rem !important;
279
- }
280
-
281
- .qti-margin-y-2 {
282
- margin-top: 0.5rem !important;
283
- margin-bottom: 0.5rem !important;
284
- }
285
-
286
- .qti-margin-y-3 {
287
- margin-top: 1rem !important;
288
- margin-bottom: 1rem !important;
289
- }
290
-
291
- .qti-margin-y-4 {
292
- margin-top: 1.5rem !important;
293
- margin-bottom: 1.5rem !important;
294
- }
295
-
296
- .qti-margin-y-5 {
297
- margin-top: 3rem !important;
298
- margin-bottom: 3rem !important;
299
- }
300
-
301
- .qti-margin-y-auto {
302
- margin-top: auto !important;
303
- margin-bottom: auto !important;
304
- }
305
-
306
- /*
307
- For margin Top
308
- */
309
-
310
- .qti-margin-t-0 {
311
- margin-top: 0 !important;
312
- }
313
-
314
- .qti-margin-t-1 {
315
- margin-top: 0.25rem !important;
316
- }
317
-
318
- .qti-margin-t-2 {
319
- margin-top: 0.5rem !important;
320
- }
321
-
322
- .qti-margin-t-3 {
323
- margin-top: 1rem !important;
324
- }
325
-
326
- .qti-margin-t-4 {
327
- margin-top: 1.5rem !important;
328
- }
329
-
330
- .qti-margin-t-5 {
331
- margin-top: 3rem !important;
332
- }
333
-
334
- .qti-margin-t-auto {
335
- margin-top: auto !important;
336
- }
337
-
338
- /*
339
- For margin Bottom
340
- */
341
-
342
- .qti-margin-b-0 {
343
- margin-bottom: 0 !important;
344
- }
345
-
346
- .qti-margin-b-1 {
347
- margin-bottom: 0.25rem !important;
348
- }
349
-
350
- .qti-margin-b-2 {
351
- margin-bottom: 0.5rem !important;
352
- }
353
-
354
- .qti-margin-b-3 {
355
- margin-bottom: 1rem !important;
356
- }
357
-
358
- .qti-margin-b-4 {
359
- margin-bottom: 1.5rem !important;
360
- }
361
-
362
- .qti-margin-b-5 {
363
- margin-bottom: 3rem !important;
364
- }
365
-
366
- .qti-margin-b-auto {
367
- margin-bottom: auto !important;
368
- }
369
-
370
- /*
371
- For margin Start LTR
372
- */
373
-
374
- .qti-margin-s-0 {
375
- margin-left: 0 !important;
376
- }
377
-
378
- .qti-margin-s-1 {
379
- margin-left: 0.25rem !important;
380
- }
381
-
382
- .qti-margin-s-2 {
383
- margin-left: 0.5rem !important;
384
- }
385
-
386
- .qti-margin-s-3 {
387
- margin-left: 1rem !important;
388
- }
389
-
390
- .qti-margin-s-4 {
391
- margin-left: 1.5rem !important;
392
- }
393
-
394
- .qti-margin-s-5 {
395
- margin-left: 3rem !important;
396
- }
397
-
398
- .qti-margin-s-auto {
399
- margin-left: auto !important;
400
- }
401
-
402
- /*
403
- For margin End LTR
404
- */
405
-
406
- .qti-margin-e-0 {
407
- margin-right: 0 !important;
408
- }
409
-
410
- .qti-margin-e-1 {
411
- margin-right: 0.25rem !important;
412
- }
413
-
414
- .qti-margin-e-2 {
415
- margin-right: 0.5rem !important;
416
- }
417
-
418
- .qti-margin-e-3 {
419
- margin-right: 1rem !important;
420
- }
421
-
422
- .qti-margin-e-4 {
423
- margin-right: 1.5rem !important;
424
- }
425
-
426
- .qti-margin-e-5 {
427
- margin-right: 3rem !important;
428
- }
429
-
430
- .qti-margin-e-auto {
431
- margin-right: auto !important;
432
- }
433
-
434
- /* =========
435
- Padding css
436
- ========== */
437
-
438
- /*
439
- For padding Top and Bottom and Left and Right
440
- */
441
-
442
- .qti-padding-0 {
443
- padding: 0 !important;
444
- }
445
-
446
- .qti-padding-1 {
447
- padding: 0.25rem !important;
448
- }
449
-
450
- .qti-padding-2 {
451
- padding: 0.5rem !important;
452
- }
453
-
454
- .qti-padding-3 {
455
- padding: 1rem !important;
456
- }
457
-
458
- .qti-padding-4 {
459
- padding: 1.5rem !important;
460
- }
461
-
462
- .qti-padding-5 {
463
- padding: 3rem !important;
464
- }
465
-
466
- /*
467
- For padding Left and Right
468
- */
469
-
470
- .qti-padding-x-0 {
471
- padding-right: 0 !important;
472
- padding-left: 0 !important;
473
- }
474
-
475
- .qti-padding-x-1 {
476
- padding-right: 0.25rem !important;
477
- padding-left: 0.25rem !important;
478
- }
479
-
480
- .qti-padding-x-2 {
481
- padding-right: 0.5rem !important;
482
- padding-left: 0.5rem !important;
483
- }
484
-
485
- .qti-padding-x-3 {
486
- padding-right: 1rem !important;
487
- padding-left: 1rem !important;
488
- }
489
-
490
- .qti-padding-x-4 {
491
- padding-right: 1.5rem !important;
492
- padding-left: 1.5rem !important;
493
- }
494
-
495
- .qti-padding-x-5 {
496
- padding-right: 3rem !important;
497
- padding-left: 3rem !important;
498
- }
499
-
500
- /*
501
- For padding Top and Bottom
502
- */
503
-
504
- .qti-padding-y-0 {
505
- padding-top: 0 !important;
506
- padding-bottom: 0 !important;
507
- }
508
-
509
- .qti-padding-y-1 {
510
- padding-top: 0.25rem !important;
511
- padding-bottom: 0.25rem !important;
512
- }
513
-
514
- .qti-padding-y-2 {
515
- padding-top: 0.5rem !important;
516
- padding-bottom: 0.5rem !important;
517
- }
518
-
519
- .qti-padding-y-3 {
520
- padding-top: 1rem !important;
521
- padding-bottom: 1rem !important;
522
- }
523
-
524
- .qti-padding-y-4 {
525
- padding-top: 1.5rem !important;
526
- padding-bottom: 1.5rem !important;
527
- }
528
-
529
- .qti-padding-y-5 {
530
- padding-top: 3rem !important;
531
- padding-bottom: 3rem !important;
532
- }
533
-
534
- /*
535
- For padding Top
536
- */
537
-
538
- .qti-padding-t-0 {
539
- padding-top: 0 !important;
540
- }
541
-
542
- .qti-padding-t-1 {
543
- padding-top: 0.25rem !important;
544
- }
545
-
546
- .qti-padding-t-2 {
547
- padding-top: 0.5rem !important;
548
- }
549
-
550
- .qti-padding-t-3 {
551
- padding-top: 1rem !important;
552
- }
553
-
554
- .qti-padding-t-4 {
555
- padding-top: 1.5rem !important;
556
- }
557
-
558
- .qti-padding-t-5 {
559
- padding-top: 3rem !important;
560
- }
561
-
562
- /*
563
- For padding Bottom
564
- */
565
-
566
- .qti-padding-b-0 {
567
- padding-bottom: 0 !important;
568
- }
569
-
570
- .qti-padding-b-1 {
571
- padding-bottom: 0.25rem !important;
572
- }
573
-
574
- .qti-padding-b-2 {
575
- padding-bottom: 0.5rem !important;
576
- }
577
-
578
- .qti-padding-b-3 {
579
- padding-bottom: 1rem !important;
580
- }
581
-
582
- .qti-padding-b-4 {
583
- padding-bottom: 1.5rem !important;
584
- }
585
-
586
- .qti-padding-b-5 {
587
- padding-bottom: 3rem !important;
588
- }
589
-
590
- /*
591
- For padding Start LTR
592
- */
593
-
594
- .qti-padding-s-0 {
595
- padding-left: 0 !important;
596
- }
597
-
598
- .qti-padding-s-1 {
599
- padding-left: 0.25rem !important;
600
- }
601
-
602
- .qti-padding-s-2 {
603
- padding-left: 0.5rem !important;
604
- }
605
-
606
- .qti-padding-s-3 {
607
- padding-left: 1rem !important;
608
- }
609
-
610
- .qti-padding-s-4 {
611
- padding-left: 1.5rem !important;
612
- }
613
-
614
- .qti-padding-s-5 {
615
- padding-left: 3rem !important;
616
- }
617
-
618
- /*
619
- For padding End LTR
620
- */
621
-
622
- .qti-padding-e-0 {
623
- padding-right: 0 !important;
624
- }
625
-
626
- .qti-padding-e-1 {
627
- padding-right: 0.25rem !important;
628
- }
629
-
630
- .qti-padding-e-2 {
631
- padding-right: 0.5rem !important;
632
- }
633
-
634
- .qti-padding-e-3 {
635
- padding-right: 1rem !important;
636
- }
637
-
638
- .qti-padding-e-4 {
639
- padding-right: 1.5rem !important;
640
- }
641
-
642
- .qti-padding-e-5 {
643
- padding-right: 3rem !important;
644
- }
645
-
646
- /* ====================
647
- Horizontal alignment
648
- ==================== */
649
-
650
- .qti-align-left {
651
- text-align: left;
652
- }
653
-
654
- .qti-align-center {
655
- text-align: center;
656
- }
657
-
658
- .qti-align-right {
659
- text-align: right;
660
- }
661
-
662
- /* ==================
663
- Vertical alignment
664
- ================== */
665
-
666
- .qti-valign-top {
667
- vertical-align: top;
668
- }
669
-
670
- .qti-valign-middle {
671
- vertical-align: middle;
672
- }
673
-
674
- .qti-valign-baseline {
675
- vertical-align: baseline;
676
- }
677
-
678
- .qti-valign-bottom {
679
- vertical-align: bottom;
680
- }
681
-
682
- /* =============
683
- Height styles
684
- ============= */
685
-
686
- .qti-height-0 {
687
- height: 0;
688
- }
689
-
690
- .qti-height-px {
691
- height: 1px;
692
- }
693
-
694
- .qti-height-0p5 {
695
- height: 0.125rem;
696
- }
697
-
698
- .qti-height-1 {
699
- height: 0.25rem;
700
- }
701
-
702
- .qti-height-1p5 {
703
- height: 0.375rem;
704
- }
705
-
706
- .qti-height-2 {
707
- height: 0.5rem;
708
- }
709
-
710
- .qti-height-2p5 {
711
- height: 0.625rem;
712
- }
713
-
714
- .qti-height-3 {
715
- height: 0.75rem;
716
- }
717
-
718
- .qti-height-3p5 {
719
- height: 0.875rem;
720
- }
721
-
722
- .qti-height-4 {
723
- height: 1rem;
724
- }
725
-
726
- .qti-height-5 {
727
- height: 1.25rem;
728
- }
729
-
730
- .qti-height-6 {
731
- height: 1.5rem;
732
- }
733
-
734
- .qti-height-7 {
735
- height: 1.75rem;
736
- }
737
-
738
- .qti-height-8 {
739
- height: 2rem;
740
- }
741
-
742
- .qti-height-9 {
743
- height: 2.25rem;
744
- }
745
-
746
- .qti-height-10 {
747
- height: 2.5rem;
748
- }
749
-
750
- .qti-height-11 {
751
- height: 2.75rem;
752
- }
753
-
754
- .qti-height-12 {
755
- height: 3rem;
756
- }
757
-
758
- .qti-height-14 {
759
- height: 3.5rem;
760
- }
761
-
762
- .qti-height-16 {
763
- height: 4rem;
764
- }
765
-
766
- .qti-height-20 {
767
- height: 5rem;
768
- }
769
-
770
- .qti-height-24 {
771
- height: 6rem;
772
- }
773
-
774
- .qti-height-28 {
775
- height: 7rem;
776
- }
777
-
778
- .qti-height-32 {
779
- height: 8rem;
780
- }
781
-
782
- .qti-height-36 {
783
- height: 9rem;
784
- }
785
-
786
- .qti-height-40 {
787
- height: 10rem;
788
- }
789
-
790
- .qti-height-44 {
791
- height: 11rem;
792
- }
793
-
794
- .qti-height-48 {
795
- height: 12rem;
796
- }
797
-
798
- .qti-height-52 {
799
- height: 13rem;
800
- }
801
-
802
- .qti-height-56 {
803
- height: 14rem;
804
- }
805
-
806
- .qti-height-60 {
807
- height: 15rem;
808
- }
809
-
810
- .qti-height-64 {
811
- height: 16rem;
812
- }
813
-
814
- .qti-height-72 {
815
- height: 18rem;
816
- }
817
-
818
- .qti-height-80 {
819
- height: 20rem;
820
- }
821
-
822
- .qti-height-96 {
823
- height: 24rem;
824
- }
825
-
826
- .qti-height-1-2 {
827
- height: 50%;
828
- }
829
-
830
- .qti-height-1-3 {
831
- height: 33.3333%;
832
- }
833
-
834
- .qti-height-2-3 {
835
- height: 66.6667%;
836
- }
837
-
838
- .qti-height-1-4 {
839
- height: 25%;
840
- }
841
-
842
- .qti-height-2-4 {
843
- height: 50%;
844
- }
845
-
846
- .qti-height-3-4 {
847
- height: 75%;
848
- }
849
-
850
- .qti-height-1-5 {
851
- height: 20%;
852
- }
853
-
854
- .qti-height-2-5 {
855
- height: 40%;
856
- }
857
-
858
- .qti-height-3-5 {
859
- height: 60%;
860
- }
861
-
862
- .qti-height-4-5 {
863
- height: 80%;
864
- }
865
-
866
- .qti-height-1-6 {
867
- height: 16.6667%;
868
- }
869
-
870
- .qti-height-2-6 {
871
- height: 33.3333%;
872
- }
873
-
874
- .qti-height-3-6 {
875
- height: 50%;
876
- }
877
-
878
- .qti-height-4-6 {
879
- height: 66.6667%;
880
- }
881
-
882
- .qti-height-5-6 {
883
- height: 83.3333%;
884
- }
885
-
886
- .qti-height-auto {
887
- height: auto;
888
- }
889
-
890
- .qti-height-full {
891
- height: 100%;
892
- }
893
-
894
- /* ============
895
- Width styles
896
- ============ */
897
-
898
- .qti-width-0 {
899
- width: 0;
900
- }
901
-
902
- .qti-width-px {
903
- width: 1px;
904
- }
905
-
906
- .qti-width-0p5 {
907
- width: 0.125rem;
908
- }
909
-
910
- .qti-width-1 {
911
- width: 0.25rem;
912
- }
913
-
914
- .qti-width-1p5 {
915
- width: 0.375rem;
916
- }
917
-
918
- .qti-width-2 {
919
- width: 0.5rem;
920
- }
921
-
922
- .qti-width-2p5 {
923
- width: 0.625rem;
924
- }
925
-
926
- .qti-width-3 {
927
- width: 0.75rem;
928
- }
929
-
930
- .qti-width-3p5 {
931
- width: 0.875rem;
932
- }
933
-
934
- .qti-width-4 {
935
- width: 1rem;
936
- }
937
-
938
- .qti-width-5 {
939
- width: 1.25rem;
940
- }
941
-
942
- .qti-width-6 {
943
- width: 1.5rem;
944
- }
945
-
946
- .qti-width-7 {
947
- width: 1.75rem;
948
- }
949
-
950
- .qti-width-8 {
951
- width: 2rem;
952
- }
953
-
954
- .qti-width-9 {
955
- width: 2.25rem;
956
- }
957
-
958
- .qti-width-10 {
959
- width: 2.5rem;
960
- }
961
-
962
- .qti-width-11 {
963
- width: 2.75rem;
964
- }
965
-
966
- .qti-width-12 {
967
- width: 3rem;
968
- }
969
-
970
- .qti-width-14 {
971
- width: 3.5rem;
972
- }
973
-
974
- .qti-width-16 {
975
- width: 4rem;
976
- }
977
-
978
- .qti-width-20 {
979
- width: 5rem;
980
- }
981
-
982
- .qti-width-24 {
983
- width: 6rem;
984
- }
985
-
986
- .qti-width-28 {
987
- width: 7rem;
988
- }
989
-
990
- .qti-width-32 {
991
- width: 8rem;
992
- }
993
-
994
- .qti-width-36 {
995
- width: 9rem;
996
- }
997
-
998
- .qti-width-40 {
999
- width: 10rem;
1000
- }
1001
-
1002
- .qti-width-44 {
1003
- width: 11rem;
1004
- }
1005
-
1006
- .qti-width-48 {
1007
- width: 12rem;
1008
- }
1009
-
1010
- .qti-width-52 {
1011
- width: 13rem;
1012
- }
1013
-
1014
- .qti-width-56 {
1015
- width: 14rem;
1016
- }
1017
-
1018
- .qti-width-60 {
1019
- width: 15rem;
1020
- }
1021
-
1022
- .qti-width-64 {
1023
- width: 16rem;
1024
- }
1025
-
1026
- .qti-width-72 {
1027
- width: 18rem;
1028
- }
1029
-
1030
- .qti-width-80 {
1031
- width: 20rem;
1032
- }
1033
-
1034
- .qti-width-96 {
1035
- width: 24rem;
1036
- }
1037
-
1038
- .qti-width-auto {
1039
- width: auto;
1040
- }
1041
-
1042
- .qti-width-1-2 {
1043
- width: 50%;
1044
- }
1045
-
1046
- .qti-width-1-3 {
1047
- width: 33.3333%;
1048
- }
1049
-
1050
- .qti-width-2-3 {
1051
- width: 66.6667%;
1052
- }
1053
-
1054
- .qti-width-1-4 {
1055
- width: 25%;
1056
- }
1057
-
1058
- .qti-width-2-4 {
1059
- width: 50%;
1060
- }
1061
-
1062
- .qti-width-3-4 {
1063
- width: 75%;
1064
- }
1065
-
1066
- .qti-width-1-5 {
1067
- width: 20%;
1068
- }
1069
-
1070
- .qti-width-2-5 {
1071
- width: 40%;
1072
- }
1073
-
1074
- .qti-width-3-5 {
1075
- width: 60%;
1076
- }
1077
-
1078
- .qti-width-4-5 {
1079
- width: 80%;
1080
- }
1081
-
1082
- .qti-width-1-6 {
1083
- width: 16.6667%;
1084
- }
1085
-
1086
- .qti-width-2-6 {
1087
- width: 33.3333%;
1088
- }
1089
-
1090
- .qti-width-3-6 {
1091
- width: 50%;
1092
- }
1093
-
1094
- .qti-width-4-6 {
1095
- width: 66.6667%;
1096
- }
1097
-
1098
- .qti-width-5-6 {
1099
- width: 83.3333%;
1100
- }
1101
-
1102
- .qti-width-1-12 {
1103
- width: 8.3333%;
1104
- }
1105
-
1106
- .qti-width-2-12 {
1107
- width: 16.6667%;
1108
- }
1109
-
1110
- .qti-width-3-12 {
1111
- width: 25%;
1112
- }
1113
-
1114
- .qti-width-4-12 {
1115
- width: 33.3333%;
1116
- }
1117
-
1118
- .qti-width-5-12 {
1119
- width: 41.6667%;
1120
- }
1121
-
1122
- .qti-width-6-12 {
1123
- width: 50%;
1124
- }
1125
-
1126
- .qti-width-7-12 {
1127
- width: 58.3333%;
1128
- }
1129
-
1130
- .qti-width-8-12 {
1131
- width: 66.6667%;
1132
- }
1133
-
1134
- .qti-width-9-12 {
1135
- width: 75%;
1136
- }
1137
-
1138
- .qti-width-10-12 {
1139
- width: 83.3333%;
1140
- }
1141
-
1142
- .qti-width-11-12 {
1143
- width: 91.6667%;
1144
- }
1145
-
1146
- .qti-width-full,
1147
- .qti-fullwidth {
1148
- width: 100%;
1149
- }
1150
-
1151
- /* ==================
1152
- Text Indent styles
1153
- ================== */
1154
-
1155
- .qti-text-indent-0 {
1156
- text-indent: 0;
1157
- }
1158
-
1159
- .qti-text-indent-px {
1160
- text-indent: 1px;
1161
- }
1162
-
1163
- .qti-text-indent-0p5 {
1164
- text-indent: 0.125rem;
1165
- }
1166
-
1167
- .qti-text-indent-1 {
1168
- text-indent: 0.25rem;
1169
- }
1170
-
1171
- .qti-text-indent-1p5 {
1172
- text-indent: 0.375rem;
1173
- }
1174
-
1175
- .qti-text-indent-2 {
1176
- text-indent: 0.5rem;
1177
- }
1178
-
1179
- .qti-text-indent-2p5 {
1180
- text-indent: 0.625rem;
1181
- }
1182
-
1183
- .qti-text-indent-3 {
1184
- text-indent: 0.75rem;
1185
- }
1186
-
1187
- .qti-text-indent-3p5 {
1188
- text-indent: 0.875rem;
1189
- }
1190
-
1191
- .qti-text-indent-4 {
1192
- text-indent: 1rem;
1193
- }
1194
-
1195
- .qti-text-indent-5 {
1196
- text-indent: 1.25rem;
1197
- }
1198
-
1199
- .qti-text-indent-6 {
1200
- text-indent: 1.5rem;
1201
- }
1202
-
1203
- .qti-text-indent-7 {
1204
- text-indent: 1.75rem;
1205
- }
1206
-
1207
- .qti-text-indent-8 {
1208
- text-indent: 2rem;
1209
- }
1210
-
1211
- .qti-text-indent-12 {
1212
- text-indent: 3rem;
1213
- }
1214
-
1215
- .qti-text-indent-16 {
1216
- text-indent: 4rem;
1217
- }
1218
-
1219
- .qti-text-indent-20 {
1220
- text-indent: 5rem;
1221
- }
1222
-
1223
- .qti-text-indent-24 {
1224
- text-indent: 6rem;
1225
- }
1226
-
1227
- .qti-text-indent-28 {
1228
- text-indent: 7rem;
1229
- }
1230
-
1231
- .qti-text-indent-32 {
1232
- text-indent: 8rem;
1233
- }
1234
-
1235
- /* =================
1236
- List Style styles
1237
- ================= */
1238
-
1239
- .qti-list-style-type-none {
1240
- list-style-type: none;
1241
- }
1242
-
1243
- .qti-list-style-type-disc {
1244
- list-style-type: disc;
1245
- }
1246
-
1247
- .qti-list-style-type-circle {
1248
- list-style-type: circle;
1249
- }
1250
-
1251
- .qti-list-style-type-square {
1252
- list-style-type: square;
1253
- }
1254
-
1255
- .qti-list-style-type-decimal {
1256
- list-style-type: decimal;
1257
- }
1258
-
1259
- .qti-list-style-type-decimal-leading-zero {
1260
- list-style-type: decimal-leading-zero;
1261
- }
1262
-
1263
- .qti-list-style-type-lower-alpha {
1264
- list-style-type: lower-alpha;
1265
- }
1266
-
1267
- .qti-list-style-type-upper-alpha {
1268
- list-style-type: upper-alpha;
1269
- }
1270
-
1271
- .qti-list-style-type-lower-roman {
1272
- list-style-type: lower-roman;
1273
- }
1274
-
1275
- .qti-list-style-type-upper-roman {
1276
- list-style-type: upper-roman;
1277
- }
1278
-
1279
- .qti-list-style-type-lower-latin {
1280
- list-style-type: lower-latin;
1281
- }
1282
-
1283
- .qti-list-style-type-upper-latin {
1284
- list-style-type: upper-latin;
1285
- }
1286
-
1287
- .qti-list-style-type-lower-greek {
1288
- list-style-type: lower-greek;
1289
- }
1290
-
1291
- .qti-list-style-type-arabic-indic {
1292
- list-style-type: arabic-indic;
1293
- }
1294
-
1295
- .qti-list-style-type-armenian {
1296
- list-style-type: armenian;
1297
- }
1298
-
1299
- .qti-list-style-type-lower-armenian {
1300
- list-style-type: lower-armenian;
1301
- }
1302
-
1303
- .qti-list-style-type-upper-armenian {
1304
- list-style-type: upper-armenian;
1305
- }
1306
-
1307
- .qti-list-style-type-bengali {
1308
- list-style-type: bengali;
1309
- }
1310
-
1311
- .qti-list-style-type-cambodian {
1312
- list-style-type: cambodian;
1313
- }
1314
-
1315
- .qti-list-style-type-simp-chinese-formal {
1316
- list-style-type: simp-chinese-formal;
1317
- }
1318
-
1319
- .qti-list-style-type-simp-chinese-informal {
1320
- list-style-type: simp-chinese-informal;
1321
- }
1322
-
1323
- .qti-list-style-type-trad-chinese-formal {
1324
- list-style-type: trad-chinese-formal;
1325
- }
1326
-
1327
- .qti-list-style-type-trad-chinese-informal {
1328
- list-style-type: trad-chinese-informal;
1329
- }
1330
-
1331
- .qti-list-style-type-cjk-ideographic {
1332
- list-style-type: cjk-ideographic;
1333
- }
1334
-
1335
- .qti-list-style-type-cjk-heavenly-stem {
1336
- list-style-type: cjk-heavenly-stem;
1337
- }
1338
-
1339
- .qti-list-style-type-cjk-earthly-branch {
1340
- list-style-type: cjk-earthly-branch;
1341
- }
1342
-
1343
- .qti-list-style-type-devanagari {
1344
- list-style-type: devanagari;
1345
- }
1346
-
1347
- .qti-list-style-type-ethiopic-halehame-ti-er {
1348
- list-style-type: ethiopic-halehame-ti-er;
1349
- }
1350
-
1351
- .qti-list-style-type-ethiopic-halehame-ti-et {
1352
- list-style-type: ethiopic-halehame-ti-et;
1353
- }
1354
-
1355
- .qti-list-style-type-ethiopic-halehame-am {
1356
- list-style-type: ethiopic-halehame-am;
1357
- }
1358
-
1359
- .qti-list-style-type-ethiopic-halehame {
1360
- list-style-type: ethiopic-halehame;
1361
- }
1362
-
1363
- .qti-list-style-type-georgian {
1364
- list-style-type: georgian;
1365
- }
1366
-
1367
- .qti-list-style-type-gujarati {
1368
- list-style-type: gujarati;
1369
- }
1370
-
1371
- .qti-list-style-type-gurmukhi {
1372
- list-style-type: gurmukhi;
1373
- }
1374
-
1375
- .qti-list-style-type-hangul {
1376
- list-style-type: hangul;
1377
- }
1378
-
1379
- .qti-list-style-type-hangul-consonant {
1380
- list-style-type: hangul-consonant;
1381
- }
1382
-
1383
- .qti-list-style-type-hebrew {
1384
- list-style-type: hebrew;
1385
- }
1386
-
1387
- .qti-list-style-type-hiragana {
1388
- list-style-type: hiragana;
1389
- }
1390
-
1391
- .qti-list-style-type-hiragana-iroha {
1392
- list-style-type: hiragana-iroha;
1393
- }
1394
-
1395
- .qti-list-style-type-khmer {
1396
- list-style-type: khmer;
1397
- }
1398
-
1399
- .qti-list-style-type-korean-hangul-formal {
1400
- list-style-type: korean-hangul-formal;
1401
- }
1402
-
1403
- .qti-list-style-type-korean-hanja-formal {
1404
- list-style-type: korean-hanja-formal;
1405
- }
1406
-
1407
- .qti-list-style-type-korean-hanja-informal {
1408
- list-style-type: korean-hanja-informal;
1409
- }
1410
-
1411
- .qti-list-style-type-lao {
1412
- list-style-type: lao;
1413
- }
1414
-
1415
- .qti-list-style-type-malayalam {
1416
- list-style-type: malayalam;
1417
- }
1418
-
1419
- .qti-list-style-type-mongolian {
1420
- list-style-type: mongolian;
1421
- }
1422
-
1423
- .qti-list-style-type-myanmar {
1424
- list-style-type: myanmar;
1425
- }
1426
-
1427
- .qti-list-style-type-oriya {
1428
- list-style-type: oriya;
1429
- }
1430
-
1431
- .qti-list-style-type-persian {
1432
- list-style-type: persian;
1433
- }
1434
-
1435
- .qti-list-style-type-thai {
1436
- list-style-type: thai;
1437
- }
1438
-
1439
- .qti-list-style-type-tibetan {
1440
- list-style-type: tibetan;
1441
- }
1442
-
1443
- .qti-list-style-type-telugu {
1444
- list-style-type: telugu;
1445
- }
1446
-
1447
- .qti-list-style-type-urdu {
1448
- list-style-type: urdu;
1449
- }
1450
-
1451
- /* =========================
1452
- Other QTI 3 Presentation Utilities
1453
- ========================= */
1454
-
1455
- .qti-bordered {
1456
- border: 1px solid var(--table-border-color);
1457
- }
1458
-
1459
- .qti-underline {
1460
- text-decoration: underline;
1461
- text-decoration-color: var(--foreground);
1462
- }
1463
-
1464
- .qti-italic {
1465
- font-style: italic;
1466
- }
1467
-
1468
- .qti-well {
1469
- min-height: 20px;
1470
- padding: 19px;
1471
- margin-bottom: 20px;
1472
- background-color: var(--well-bg);
1473
- border: var(--well-border);
1474
- border-radius: 4px;
1475
- box-shadow: var(--well-box-shadow);
1476
- }
1477
-
1478
- /* Set writing-mode to vertical-rl
1479
- Typical for CJK vertical text */
1480
-
1481
- .qti-writing-mode-vertical-rl {
1482
- writing-mode: vertical-rl;
1483
- }
1484
-
1485
- /* Set writing-mode to vertical-lr
1486
- Typical for Mongolian vertical text */
1487
-
1488
- .qti-writing-mode-vertical-lr {
1489
- writing-mode: vertical-lr;
1490
- }
1491
-
1492
- /* Set writing-mode to horizontal-tb
1493
- Browser default */
1494
-
1495
- .qti-writing-mode-horizontal-tb {
1496
- writing-mode: horizontal-tb;
1497
- }
1498
-
1499
- /* Float an element left */
1500
-
1501
- .qti-float-left {
1502
- float: left;
1503
- }
1504
-
1505
- /* Float an element right */
1506
-
1507
- .qti-float-right {
1508
- float: right;
1509
- }
1510
-
1511
- /* Remove a float */
1512
-
1513
- .qti-float-none {
1514
- float: none;
1515
- }
1516
-
1517
- /* Clearfix Hack to apply to a container of
1518
- floated content that overflows the container. */
1519
-
1520
- .qti-float-clearfix::after {
1521
- content: '';
1522
- clear: both;
1523
- display: table;
1524
- }
1525
-
1526
- .qti-float-clear-left
1527
- .qti-float-clear-right
1528
- .qti-float-clear-both
1529
-
1530
- /* Set text-orientation to upright */
1531
- .qti-text-orientation-upright {
1532
- text-orientation: upright;
1533
- }
1534
-
1535
- @layer qti-base {
1536
- .qti-layout-row {
1537
- display: flex;
1538
- flex-wrap: wrap;
1539
- width: 100%;
1540
- gap: 2.1276595745%;
1541
- }
1542
-
1543
- .qti-layout-row [class*='qti-layout-col']:not(:empty) {
1544
- box-sizing: border-box;
1545
- }
1546
-
1547
- .qti-layout-row [class*='qti-layout-col']:empty {
1548
- width: 0;
1549
- overflow: hidden; /* to fully collapse if there\u2019s padding or borders */
1550
- }
1551
-
1552
- .qti-layout-col1 {
1553
- width: 6.3829787234%;
1554
- }
1555
-
1556
- .qti-layout-col2 {
1557
- width: 14.8936170213%;
1558
- }
1559
-
1560
- .qti-layout-col3 {
1561
- width: 23.4042553191%;
1562
- }
1563
-
1564
- .qti-layout-col4 {
1565
- width: 31.914893617%;
1566
- }
1567
-
1568
- .qti-layout-col5 {
1569
- width: 40.4255319149%;
1570
- }
1571
-
1572
- .qti-layout-col6 {
1573
- width: 48.9361702128%;
1574
- }
1575
-
1576
- .qti-layout-col7 {
1577
- width: 57.4468085106%;
1578
- }
1579
-
1580
- .qti-layout-col8 {
1581
- width: 65.9574468085%;
1582
- }
1583
-
1584
- .qti-layout-col9 {
1585
- width: 74.4680851064%;
1586
- }
1587
-
1588
- .qti-layout-col10 {
1589
- width: 82.9787234043%;
1590
- }
1591
-
1592
- .qti-layout-col11 {
1593
- width: 91.4893617021%;
1594
- }
1595
-
1596
- .qti-layout-col12 {
1597
- width: 100%;
1598
- }
1599
-
1600
- .qti-layout-offset1 {
1601
- margin-left: 8.5106382979%;
1602
- }
1603
-
1604
- .qti-layout-offset2 {
1605
- margin-left: 17.0212765957%;
1606
- }
1607
-
1608
- .qti-layout-offset3 {
1609
- margin-left: 25.5319148936%;
1610
- }
1611
-
1612
- .qti-layout-offset4 {
1613
- margin-left: 34.0425531915%;
1614
- }
1615
-
1616
- .qti-layout-offset5 {
1617
- margin-left: 42.5531914894%;
1618
- }
1619
-
1620
- .qti-layout-offset6 {
1621
- margin-left: 51.0638297872%;
1622
- }
1623
-
1624
- .qti-layout-offset7 {
1625
- margin-left: 59.5744680851%;
1626
- }
1627
-
1628
- .qti-layout-offset8 {
1629
- margin-left: 68.085106383%;
1630
- }
1631
-
1632
- .qti-layout-offset9 {
1633
- margin-left: 76.5957446809%;
1634
- }
1635
-
1636
- .qti-layout-offset10 {
1637
- margin-left: 85.1063829787%;
1638
- }
1639
-
1640
- .qti-layout-offset11 {
1641
- margin-left: 93.6170212766%;
1642
- }
1643
-
1644
- .qti-layout-offset12 {
1645
- margin-left: 102.1276595745%;
1646
- }
1647
-
1648
- @media (width <= 767px) {
1649
- [class*='qti-layout-col'] {
1650
- width: 100%;
1651
- }
1652
- }
1653
- }
1654
-
1655
- :root,
1656
- :host {
1657
- /* Active colors */
1658
- --qti-bg-active: #ffecec;
1659
- --qti-border-active: #f86d70;
1660
-
1661
- /* Correct colors */
1662
- --qti-correct-light: #c8e6c9;
1663
- --qti-correct: #66bb6a;
1664
-
1665
- /** Partially correct colors */
1666
- --qti-partially-correct-light: #fff3e0;
1667
- --qti-partially-correct: #ffeb3b;
1668
-
1669
- /* Incorrect colors */
1670
- --qti-incorrect-light: #ef9a9a;
1671
- --qti-incorrect: #ef5350;
1672
-
1673
- /* Validation colors */
1674
- --qti-validation-error-bg: #fffbeb;
1675
- --qti-validation-text: #92400e;
1676
-
1677
- /* Gap size */
1678
- --qti-gap-size: 1rem;
1679
-
1680
- /* Background colors */
1681
- --qti-bg: white;
1682
- --qti-hover-bg: #f9fafb;
1683
-
1684
- /* Light theme colors */
1685
- --qti-light-bg-active: #f0f0f0; /* Light gray */
1686
- --qti-light-border-active: #d0d0d0; /* Medium gray */
1687
-
1688
- /* Dark theme colors */
1689
- --qti-dark-bg-active: #1f2937; /* Dark gray */
1690
- --qti-dark-border-active: #64748b; /* Medium gray */
1691
-
1692
- /* Disabled colors */
1693
- --qti-disabled-bg: #f3f4f6;
1694
- --qti-disabled-color: #45484f;
1695
-
1696
- /* Border properties */
1697
- --qti-border-thickness: 2px;
1698
- --qti-border-style: solid;
1699
- --qti-border-color: #c6cad0;
1700
- --qti-border-radius: 0.3rem;
1701
- --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
1702
-
1703
- /* Focus & active states */
1704
- --qti-focus-border-width: 5px;
1705
- --qti-focus-color: #bddcff7e;
1706
-
1707
- /* Class-specific variables */
1708
-
1709
- /* Form elements */
1710
- --qti-form-size: 1rem;
1711
-
1712
- /* Order buttons */
1713
- --qti-order-size: 2rem;
1714
-
1715
- /* Generic padding for all elements */
1716
- --qti-padding-vertical: 0.5rem; /* py-2 */
1717
- --qti-padding-horizontal: 0.5rem; /* px-2 */
1718
-
1719
- /* Dropzones */
1720
- --qti-dropzone-padding: 0rem;
1721
- }
1722
-
1723
- /* SVG masks and backgrounds */
1724
-
1725
- .chevron {
1726
- 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")
1727
- no-repeat center right 6px;
1728
- }
1729
-
1730
- .handle {
1731
- background-image: radial-gradient(
1732
- circle at center,
1733
- rgb(0 0 0 / 10%) 0,
1734
- rgb(0 0 0 / 20%) 2px,
1735
- rgb(255 255 255 / 0%) 2px,
1736
- rgb(255 255 255 / 0%) 100%
1737
- );
1738
- background-repeat: repeat-y;
1739
- background-position: left center;
1740
- background-size: 14px 8px;
1741
- }
1742
-
1743
- .check-mask {
1744
- -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");
1745
- 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");
1746
- }
1747
-
1748
- /*
1749
- Following are classes that can be applied to elements and element states, so they are not used directly
1750
- The @apply directive is used to apply these classes to elements
1751
- */
1752
-
1753
- /* Apply .bordered to an element */
1754
-
1755
- .bordered {
1756
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1757
- outline: none;
1758
- }
1759
-
1760
- /* Apply .form rules for checkbox and radiobutton */
1761
-
1762
- .form {
1763
-
1764
- /* background-color: var(--qti-bg); */
1765
- display: grid;
1766
- place-content: center;
1767
- width: var(--qti-form-size);
1768
- height: var(--qti-form-size);
1769
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1770
- outline: none;
1771
- }
1772
-
1773
- /* Apply .button rules for button-like elements, such as drags and buttons */
1774
-
1775
- .button {
1776
-
1777
- border-radius: var(--qti-border-radius);
1778
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1779
- background: var(--qti-bg);
1780
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1781
- outline: none;
1782
- }
1783
-
1784
- /* Apply .select for the select dropdown element */
1785
-
1786
- .select {
1787
-
1788
- border-radius: var(--qti-border-radius);
1789
- position: relative;
1790
- -webkit-appearance: none;
1791
- -moz-appearance: none;
1792
- appearance: none;
1793
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1794
- padding-right: calc(var(--qti-padding-horizontal) + 1.5rem); /* 1.5rem for the chevron */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); 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")
1795
- no-repeat center right 6px;
1796
- }
1797
-
1798
- /* Apply .dropdown-trigger for button trigger controls */
1799
-
1800
- .dropdown-trigger {
1801
-
1802
- display: inline-flex;
1803
- align-items: center;
1804
- justify-content: space-between;
1805
- gap: 0.5rem;
1806
- border-radius: var(--qti-border-radius);
1807
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1808
- background: var(--qti-bg);
1809
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1810
- outline: none;
1811
- }
1812
-
1813
- /* Apply .dropdown-menu for popover and listbox containers */
1814
-
1815
- .dropdown-menu {
1816
- background: var(--qti-bg);
1817
- border-radius: var(--qti-border-radius);
1818
- padding: 0.25rem;
1819
- box-sizing: border-box;
1820
- overflow: auto;
1821
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1822
- outline: none;
1823
- }
1824
-
1825
- /* Apply .dropdown-option for listbox option rows */
1826
-
1827
- .dropdown-option {
1828
- display: flex;
1829
- align-items: center;
1830
- width: 100%;
1831
- min-height: 2.25rem;
1832
- box-sizing: border-box;
1833
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1834
- border: 0;
1835
- border-radius: calc(var(--qti-border-radius) - 2px);
1836
- background: transparent;
1837
- text-align: left;
1838
- font: inherit;
1839
- color: inherit;
1840
- cursor: pointer;
1841
- white-space: nowrap;
1842
- overflow: hidden;
1843
- text-overflow: ellipsis;
1844
- }
1845
-
1846
- /* Apply .dropdown-icon for trigger caret indicators */
1847
-
1848
- .dropdown-icon {
1849
- display: inline-flex;
1850
- align-items: center;
1851
- justify-content: center;
1852
- flex: 0 0 auto;
1853
- transition: transform 150ms ease;
1854
- transform-origin: 50% 50%;
1855
- color: var(--qti-border-color);
1856
- line-height: 1;
1857
- }
1858
-
1859
- /* Apply .dropdown-icon-open for expanded trigger caret indicators */
1860
-
1861
- .dropdown-icon-open {
1862
- transform: rotate(180deg);
1863
- color: var(--qti-border-active);
1864
- }
1865
-
1866
- /* Apply .text for the input text and textarea */
1867
-
1868
- .text {
1869
- border-radius: 0;
1870
- cursor: text;
1871
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1872
- background: var(--qti-bg);
1873
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1874
- outline: none;
1875
- }
1876
-
1877
- /* Apply .spot for hotspot shapes */
1878
-
1879
- .spot {
1880
-
1881
- width: 100%;
1882
- height: 100%;
1883
- background-color: transparent;
1884
- margin: 0 !important;
1885
- padding: 0 !important;
1886
- border: 0 !important;
1887
- box-sizing: border-box !important;
1888
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1889
- outline: none;
1890
- }
1891
-
1892
- /* Apply .point for circular small hotspots */
1893
-
1894
- .point {
1895
-
1896
- box-sizing: border-box;
1897
- border-radius: 100%;
1898
- border: 1px solid white;
1899
- background-color: black;
1900
- opacity: 0.5;
1901
- padding: 0;
1902
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1903
- outline: none;
1904
- }
1905
-
1906
- /* Apply .drag for draggable elements */
1907
-
1908
- .drag {
1909
-
1910
- box-sizing: border-box;
1911
- transition:
1912
- transform 200ms ease-out,
1913
- box-shadow 200ms ease-out,
1914
- rotate 200ms ease-out;
1915
- cursor: grab;
1916
- background-color: var(--qti-bg);
1917
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1918
- border-radius: var(--qti-border-radius);
1919
-
1920
- /* padding-left: calc(var(--qti-padding-horizontal) + 0.5rem) !important; */
1921
-
1922
- /* 1.5rem for the drag */
1923
-
1924
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1925
-
1926
- outline: none;
1927
- }
1928
-
1929
- /* Apply .dragging for the dragging state of a draggable element */
1930
-
1931
- .dragging {
1932
- pointer-events: none;
1933
- rotate: -2deg;
1934
- box-shadow:
1935
- 0 8px 12px rgb(0 0 0 / 20%),
1936
- 0 4px 8px rgb(0 0 0 / 10%);
1937
- }
1938
-
1939
- /* Apply .drop for an element where you can drop the draggable */
1940
-
1941
- .drop {
1942
- /* @apply bordered; */
1943
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
1944
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
1945
- center no-repeat;
1946
- border-radius: var(--qti-border-radius);
1947
- position: relative;
1948
- background-color: var(--qti-bg);
1949
- }
1950
-
1951
- /* Apply .dropping for an indicator where you can drop the draggable */
1952
-
1953
- .dropping {
1954
- background-color: var(--qti-bg-active);
1955
- }
1956
-
1957
- /* Apply .order for a small circular button */
1958
-
1959
- .order {
1960
-
1961
- display: grid;
1962
- place-content: center;
1963
-
1964
- /* background-color: var(--qti-bg-active); */
1965
- box-sizing: border-box;
1966
- border-radius: 100%;
1967
- width: var(--qti-order-size);
1968
- height: var(--qti-order-size);
1969
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
1970
- outline: none;
1971
- }
1972
-
1973
- /* Apply .check-size for radio and checkbox size */
1974
-
1975
- .check-size {
1976
- width: calc(var(--qti-form-size) - 6px);
1977
- height: calc(var(--qti-form-size) - 6px);
1978
- }
1979
-
1980
- /* Apply .check for checkbox */
1981
-
1982
- .check {
1983
- gap: 0.5rem;
1984
- background-color: var(--qti-bg);
1985
- border-radius: var(--qti-border-radius);
1986
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
1987
- outline: none;
1988
- cursor: pointer;
1989
- }
1990
-
1991
- .validation-message {
1992
- display: none;
1993
- color: var(--qti-validation-text, #000);
1994
- background-color: var(--qti-validation-error-bg, #fff);
1995
- padding: 10px;
1996
- border: 3px solid var(--qti-validation-text, #000);
1997
- border-radius: 4px;
1998
- margin-top: 8px;
1999
- }
2000
-
2001
- /* Apply .check-radio for outer circle of the radio buttons */
2002
-
2003
- .check-radio {
2004
-
2005
- border-radius: 100%;
2006
-
2007
- display: grid;
2008
-
2009
- place-content: center;
2010
-
2011
- width: var(--qti-form-size);
2012
-
2013
- height: var(--qti-form-size);
2014
-
2015
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2016
-
2017
- outline: none;
2018
- }
2019
-
2020
- /* Apply .check-radio-checked for the inner checked radio */
2021
-
2022
- .check-radio-checked {
2023
- background-color: var(--qti-border-active);
2024
- border-radius: 100%;
2025
- }
2026
-
2027
- /* Apply .check-checkbox for outer square of the checkbox */
2028
-
2029
- .check-checkbox {
2030
-
2031
- display: flex;
2032
- place-items: center;
2033
- border-radius: var(--qti-border-radius);
2034
- display: grid;
2035
- place-content: center;
2036
- width: var(--qti-form-size);
2037
- height: var(--qti-form-size);
2038
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2039
- outline: none;
2040
- }
2041
-
2042
- /* Apply .check-checkbox-checked for the inner checkmark */
2043
-
2044
- .check-checkbox-checked {
2045
- background-color: var(--qti-border-active);
2046
- -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");
2047
- 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");
2048
- }
2049
-
2050
- /* Apply .hov for hover state */
2051
-
2052
- .hov {
2053
- /* background-color: var(--qti-hover-bg); */
2054
- }
2055
-
2056
- /* Apply .foc for focus state */
2057
-
2058
- .foc {
2059
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2060
- }
2061
-
2062
- /* Apply .act for active state */
2063
-
2064
- .act {
2065
- border-color: var(--qti-border-active);
2066
- background-color: var(--qti-bg-active);
2067
- }
2068
-
2069
- .act-bg {
2070
- background-color: var(--qti-bg-active);
2071
- }
2072
-
2073
- .act-bor {
2074
- border-color: var(--qti-border-active);
2075
- }
2076
-
2077
- /* Apply .rdo for readonly state */
2078
-
2079
- .rdo {
2080
- cursor: pointer;
2081
- background-color: var(--qti-bg);
2082
- outline: 0;
2083
- border: none;
2084
- }
2085
-
2086
- /* Apply .dis for disabled state */
2087
-
2088
- .dis {
2089
- cursor: not-allowed;
2090
- background-color: var(--qti-disabled-bg);
2091
- color: var(--qti-disabled-color);
2092
- border-color: var(--qti-border-color);
2093
- outline: 4px solid var(--qti-disabled-bg);
2094
- }
2095
-
2096
- @layer qti-components {
2097
- qti-choice-interaction {
2098
- &::part(message) {
2099
- display: none;
2100
- color: var(--qti-validation-text, #000);
2101
- background-color: var(--qti-validation-error-bg, #fff);
2102
- padding: 10px;
2103
- border: 3px solid var(--qti-validation-text, #000);
2104
- border-radius: 4px;
2105
- margin-top: 8px;
2106
- }
2107
-
2108
- &.qti-input-control-hidden {
2109
- & qti-simple-choice {
2110
- position: relative;
2111
- &:hover {
2112
- }
2113
- &:focus {
2114
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2115
- }
2116
- &::part(ch) {
2117
- display: none;
2118
- }
2119
- &:state(--checked),
2120
- &[aria-checked='true'] {
2121
- border-color: var(--qti-border-active);
2122
- background-color: var(--qti-bg-active);
2123
- }
2124
- &:state(readonly),
2125
- &[aria-readonly='true'] {
2126
- cursor: pointer;
2127
- background-color: var(--qti-bg);
2128
- outline: 0;
2129
- border: none;
2130
- }
2131
- &:state(disabled),
2132
- &[aria-disabled='true'] {
2133
- cursor: not-allowed;
2134
- background-color: var(--qti-disabled-bg);
2135
- color: var(--qti-disabled-color);
2136
- border-color: var(--qti-border-color);
2137
- outline: 4px solid var(--qti-disabled-bg);
2138
- }
2139
- &:state(correct-response),
2140
- &[data-correct-response='true'] {
2141
- border: 3px solid var(--qti-correct) !important;
2142
- padding-right: 30px;
2143
- &::after {
2144
- content: '\\02714';
2145
- color: var(--qti-correct);
2146
- position: absolute;
2147
- top: 5px;
2148
- right: 5px;
2149
- font-size: 1.2em;
2150
- font-weight: bold;
2151
- }
2152
- }
2153
- border-radius: var(--qti-border-radius);
2154
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2155
- background: var(--qti-bg);
2156
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2157
- outline: none
2158
- }
2159
- }
2160
-
2161
- &:not(.qti-input-control-hidden) {
2162
- & qti-simple-choice {
2163
- &:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {
2164
- }
2165
- &:focus {
2166
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2167
- }
2168
- &:state(--checked),
2169
- &[aria-checked='true'] {
2170
- border-color: var(--qti-border-active);
2171
- background-color: var(--qti-bg-active);
2172
- }
2173
- &:state(candidate-correct) {
2174
- background-color: var(--qti-correct);
2175
- }
2176
- &:state(candidate-incorrect) {
2177
- background-color: var(--qti-incorrect);
2178
- }
2179
- &:state(readonly),
2180
- &[aria-readonly='true'] {
2181
- cursor: pointer;
2182
- background-color: var(--qti-bg);
2183
- outline: 0;
2184
- border: none;
2185
- }
2186
- &:state(disabled),
2187
- &[aria-disabled='true'] {
2188
- cursor: not-allowed;
2189
- background-color: var(--qti-disabled-bg);
2190
- color: var(--qti-disabled-color);
2191
- border-color: var(--qti-border-color);
2192
- outline: 4px solid var(--qti-disabled-bg);
2193
- }
2194
- &::part(cha) {
2195
- width: calc(var(--qti-form-size) - 6px);
2196
- height: calc(var(--qti-form-size) - 6px);
2197
- }
2198
- &:state(radio)::part(ch) {
2199
- border-radius: 100%;
2200
- display: grid;
2201
- place-content: center;
2202
- width: var(--qti-form-size);
2203
- height: var(--qti-form-size);
2204
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2205
- outline: none;
2206
- }
2207
- &:state(radio):state(--checked)::part(cha) {
2208
- background-color: var(--qti-border-active);
2209
- border-radius: 100%;
2210
- }
2211
- &:state(checkbox)::part(ch) {
2212
- display: flex;
2213
- place-items: center;
2214
- border-radius: var(--qti-border-radius);
2215
- display: grid;
2216
- place-content: center;
2217
- width: var(--qti-form-size);
2218
- height: var(--qti-form-size);
2219
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2220
- outline: none;
2221
- }
2222
- &:state(checkbox):state(--checked)::part(cha) {
2223
- background-color: var(--qti-border-active);
2224
- -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");
2225
- 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");
2226
- }
2227
- gap: 0.5rem;
2228
- background-color: var(--qti-bg);
2229
- border-radius: var(--qti-border-radius);
2230
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2231
- outline: none;
2232
- cursor: pointer
2233
- }
2234
- }
2235
-
2236
- & qti-simple-choice {
2237
- width: -moz-fit-content;
2238
- width: fit-content;
2239
- cursor: pointer;
2240
- &:state(correct-response),
2241
- &[data-correct-response='true'] {
2242
- &::after {
2243
- content: '\\02714';
2244
- color: var(--qti-correct);
2245
- }
2246
- }
2247
- }
2248
-
2249
- & qti-simple-choice > p {
2250
- margin: 0 !important;
2251
- padding: 0 !important;
2252
- }
2253
- }
2254
- }
2255
-
2256
- @layer qti-components {
2257
- qti-graphic-gap-match-interaction {
2258
- &::part(message) {
2259
- display: none;
2260
- color: var(--qti-validation-text, #000);
2261
- background-color: var(--qti-validation-error-bg, #fff);
2262
- padding: 10px;
2263
- border: 3px solid var(--qti-validation-text, #000);
2264
- border-radius: 4px;
2265
- margin-top: 8px;
2266
- }
2267
- position: relative;
2268
- &.qti-selections-light {
2269
- &:state(--dragzone-active)::part(drags) {
2270
- background-color: var(--qti-light-bg-active);
2271
- border-color: var(--qti-light-border-active);
2272
- }
2273
- &:state(--dragzone-enabled)::part(drags) {
2274
- background-color: var(--qti-light-bg-active);
2275
- }
2276
- }
2277
- &.qti-selections-dark {
2278
- &:state(--dragzone-active)::part(drags) {
2279
- background-color: var(--qti-dark-bg-active);
2280
- border-color: var(--qti-dark-border-active);
2281
- }
2282
- &:state(--dragzone-enabled)::part(drags) {
2283
- background-color: var(--qti-dark-bg-active);
2284
- }
2285
- }
2286
- &:state(--dragzone-active)::part(drags) {
2287
- border-color: var(--qti-border-active);
2288
- background-color: var(--qti-bg-active);
2289
- }
2290
- &:state(--dragzone-enabled)::part(drags) {
2291
- background-color: var(--qti-bg-active);
2292
- }
2293
- & qti-gap-img,
2294
- qti-gap-text {
2295
- display: flex;
2296
- justify-content: center;
2297
- align-items: center;
2298
- cursor: grab;
2299
- }
2300
- & qti-associable-hotspot {
2301
- display: flex;
2302
- justify-content: center;
2303
- align-items: center;
2304
- border: 2px solid transparent;
2305
- &[enabled] {
2306
- .qti-selections-light {
2307
- background-color: var(--qti-light-bg-active);
2308
- }
2309
- .qti-selections-dark {
2310
- background-color: var(--qti-dark-bg-active);
2311
- }
2312
- background-color: var(--qti-bg-active)
2313
- }
2314
- &[active] {
2315
- .qti-selections-light {
2316
- background-color: var(--qti-light-bg-active);
2317
- border-color: var(--qti-light-border-active);
2318
- }
2319
- .qti-selections-dark {
2320
- background-color: var(--qti-dark-bg-active);
2321
- border-color: var(--qti-dark-border-active);
2322
- }
2323
- border-color: var(--qti-border-active);
2324
- background-color: var(--qti-bg-active)
2325
- }
2326
- &[disabled] {
2327
- &:not(:empty) {
2328
- cursor: default !important;
2329
- }
2330
- cursor: not-allowed;
2331
- background-color: var(--qti-disabled-bg);
2332
- color: var(--qti-disabled-color);
2333
- border-color: var(--qti-border-color);
2334
- outline: 4px solid var(--qti-disabled-bg)
2335
- }
2336
- &:not(:empty) {
2337
- border-color: var(--qti-border) !important;
2338
- }
2339
- &:empty::after {
2340
- padding: var(--qti-padding-md) var(--qti-padding-lg);
2341
- content: '\\0000a0';
2342
- }
2343
- &:not(:empty) {
2344
- padding: 0;
2345
- width: auto;
2346
- }
2347
- &:not(:empty) > * {
2348
- flex: 1;
2349
- transform: rotate(0);
2350
- box-shadow: 0 0 0 1px #e5e7eb;
2351
- }
2352
- }
2353
- &.qti-selections-light qti-associable-hotspot:not(:empty) {
2354
- background-color: var(--qti-light-bg-active) !important;
2355
- border-color: var(--qti-light-border-active) !important;
2356
- }
2357
- &.qti-selections-dark qti-associable-hotspot:not(:empty) {
2358
- background-color: var(--qti-dark-bg-active) !important;
2359
- border-color: var(--qti-dark-border-active) !important;
2360
- }
2361
- & img {
2362
- margin: 0;
2363
- padding: 0;
2364
- }
2365
- }
2366
- }
2367
-
2368
- @layer qti-components {
2369
- qti-text-entry-interaction {
2370
- &:state(candidate-correct) {
2371
- &::part(input) {
2372
- background-color: var(--qti-correct);
2373
- }
2374
- }
2375
- &:state(candidate-partially-correct) {
2376
- &::part(input) {
2377
- background-color: var(--qti-partially-correct);
2378
- }
2379
- }
2380
- &:state(candidate-incorrect) {
2381
- &::part(input) {
2382
- background-color: var(--qti-incorrect);
2383
- }
2384
- }
2385
- &::part(input) {
2386
- border-radius: 0;
2387
- cursor: text;
2388
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2389
- background: var(--qti-bg);
2390
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2391
- outline: none;
2392
- }
2393
- &:hover {
2394
- }
2395
- &:focus-within {
2396
- &::part(input) {
2397
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2398
- border-color: var(--qti-border-active);
2399
- }
2400
- }
2401
- }
2402
- }
2403
-
2404
- @layer qti-components {
2405
- qti-extended-text-interaction {
2406
- &::part(textarea) {
2407
- border-radius: 0;
2408
- cursor: text;
2409
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2410
- background: var(--qti-bg);
2411
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2412
- outline: none;
2413
- }
2414
- &:hover {
2415
- }
2416
- &:focus-within {
2417
- &::part(textarea) {
2418
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2419
- border-color: var(--qti-border-active);
2420
- }
2421
- }
2422
- }
2423
- }
2424
-
2425
- @layer qti-components {
2426
- qti-gap-match-interaction {
2427
- &.qti-selections-light {
2428
- &:state(--dragzone-active)::part(drags) {
2429
- background-color: var(--qti-light-bg-active);
2430
- border-color: var(--qti-light-border-active);
2431
- }
2432
- &:state(--dragzone-enabled)::part(drags) {
2433
- background-color: var(--qti-light-bg-active);
2434
- }
2435
- }
2436
- &.qti-selections-dark {
2437
- &:state(--dragzone-active)::part(drags) {
2438
- background-color: var(--qti-dark-bg-active);
2439
- border-color: var(--qti-dark-border-active);
2440
- }
2441
- &:state(--dragzone-enabled)::part(drags) {
2442
- background-color: var(--qti-dark-bg-active);
2443
- }
2444
- }
2445
- &:state(--dragzone-active)::part(drags) {
2446
- border-color: var(--qti-border-active);
2447
- background-color: var(--qti-bg-active);
2448
- }
2449
- &:state(--dragzone-enabled)::part(drags) {
2450
- background-color: var(--qti-bg-active);
2451
- }
2452
- & qti-gap-text {
2453
- &[dragging] {
2454
- pointer-events: none;
2455
- rotate: -2deg;
2456
- box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
2457
- 0 4px 8px rgb(0 0 0 / 10%);
2458
- }
2459
- &:hover {
2460
- }
2461
- &:focus {
2462
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2463
- }
2464
- &:state(candidate-correct) {
2465
- background-color: var(--qti-correct);
2466
- }
2467
- &:state(candidate-incorrect) {
2468
- background-color: var(--qti-incorrect);
2469
- }
2470
- box-sizing: border-box;
2471
- transition: transform 200ms ease-out,
2472
- box-shadow 200ms ease-out,
2473
- rotate 200ms ease-out;
2474
- cursor: grab;
2475
- background-color: var(--qti-bg);
2476
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2477
- border-radius: var(--qti-border-radius);
2478
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2479
- outline: none
2480
- }
2481
- & qti-gap {
2482
- &[disabled] {
2483
- &:not(:empty) {
2484
- cursor: default !important;
2485
- }
2486
- cursor: not-allowed;
2487
- background-color: var(--qti-disabled-bg);
2488
- color: var(--qti-disabled-color);
2489
- border-color: var(--qti-border-color);
2490
- outline: 4px solid var(--qti-disabled-bg)
2491
- }
2492
- &[enabled] {
2493
- .qti-selections-light {
2494
- border-color: var(--qti-light-border-active);
2495
- }
2496
- .qti-selections-dark {
2497
- border-color: var(--qti-dark-border-active);
2498
- }
2499
- background-color: var(--qti-bg-active)
2500
- }
2501
- &[active] {
2502
- .qti-selections-light {
2503
- background-color: var(--qti-light-bg-active);
2504
- border-color: var(--qti-light-border-active);
2505
- }
2506
- .qti-selections-dark {
2507
- background-color: var(--qti-dark-bg-active);
2508
- border-color: var(--qti-dark-border-active);
2509
- }
2510
- border-color: var(--qti-border-active);
2511
- background-color: var(--qti-bg-active)
2512
- }
2513
- display: inline-flex;
2514
- align-items: center;
2515
- vertical-align: middle;
2516
- &:empty::after {
2517
- padding: var(--qti-padding-md) var(--qti-padding-lg);
2518
- content: '\\0000a0';
2519
- }
2520
- &:not(:empty) {
2521
- display: inline-flex;
2522
- padding: 0;
2523
- width: auto;
2524
- }
2525
- &:not(:empty) > * {
2526
- flex: 1;
2527
- transform: rotate(0);
2528
- box-shadow: 0 0 0 1px #e5e7eb;
2529
- }
2530
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
2531
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
2532
- center no-repeat;
2533
- border-radius: var(--qti-border-radius);
2534
- position: relative;
2535
- background-color: var(--qti-bg)
2536
- }
2537
- }
2538
- }
2539
-
2540
- @layer qti-components {
2541
- qti-hotspot-interaction {
2542
- & qti-hotspot-choice {
2543
- &[shape='circle'] {
2544
- &:hover {
2545
- }
2546
- &:focus {
2547
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2548
- }
2549
- &:state(--checked),
2550
- &[aria-checked='true'] {
2551
- border-color: var(--qti-border-active);
2552
- }
2553
- &:state(--readonly),
2554
- &[aria-readonly='true'] {
2555
- cursor: pointer;
2556
- background-color: var(--qti-bg);
2557
- outline: 0;
2558
- border: none;
2559
- }
2560
- &:state(--disabled),
2561
- &[aria-disabled='true'] {
2562
- cursor: not-allowed;
2563
- background-color: var(--qti-disabled-bg);
2564
- color: var(--qti-disabled-color);
2565
- border-color: var(--qti-border-color);
2566
- outline: 4px solid var(--qti-disabled-bg);
2567
- }
2568
- width: 100%;
2569
- height: 100%;
2570
- background-color: transparent;
2571
- margin: 0;
2572
- padding: 0;
2573
- border: 0;
2574
- box-sizing: border-box;
2575
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2576
- outline: none
2577
- }
2578
- &[shape='rect'] {
2579
- &:focus {
2580
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2581
- }
2582
- &:state(--checked),
2583
- &[aria-checked='true'] {
2584
- border-color: var(--qti-border-active);
2585
- }
2586
- &[aria-readonly='true'] {
2587
- cursor: pointer;
2588
- background-color: var(--qti-bg);
2589
- outline: 0;
2590
- border: none;
2591
- }
2592
- &[aria-disabled='true'] {
2593
- cursor: not-allowed;
2594
- background-color: var(--qti-disabled-bg);
2595
- color: var(--qti-disabled-color);
2596
- border-color: var(--qti-border-color);
2597
- outline: 4px solid var(--qti-disabled-bg);
2598
- }
2599
- width: 100%;
2600
- height: 100%;
2601
- background-color: transparent;
2602
- margin: 0;
2603
- padding: 0;
2604
- border: 0;
2605
- box-sizing: border-box;
2606
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2607
- outline: none
2608
- }
2609
- &[shape='poly'] {
2610
- &:hover::after {
2611
- content: '';
2612
- width: 100%;
2613
- height: 100%;
2614
- background: repeating-linear-gradient(
2615
- 45deg,
2616
- var(--qti-border-active),
2617
- var(--qti-border-active) 5px,
2618
- transparent 5px,
2619
- transparent 10px
2620
- );
2621
- display: block;
2622
- }
2623
- &:state(--checked)::after,
2624
- &[aria-checked='true']::after {
2625
- content: '';
2626
- width: 100%;
2627
- height: 100%;
2628
- background: repeating-linear-gradient(
2629
- 45deg,
2630
- transparent,
2631
- transparent 5px,
2632
- var(--qti-border-active) 5px,
2633
- var(--qti-border-active) 10px
2634
- );
2635
- display: block;
2636
- }
2637
- &[aria-readonly='true'] {
2638
- cursor: pointer;
2639
- background-color: var(--qti-bg);
2640
- outline: 0;
2641
- border: none;
2642
- }
2643
- &[aria-disabled='true'] {
2644
- cursor: not-allowed;
2645
- background-color: var(--qti-disabled-bg);
2646
- color: var(--qti-disabled-color);
2647
- border-color: var(--qti-border-color);
2648
- outline: 4px solid var(--qti-disabled-bg);
2649
- }
2650
- }
2651
- }
2652
- }
2653
- }
2654
-
2655
- @layer qti-components {
2656
- qti-hottext-interaction {
2657
- &::part(message) {
2658
- display: none;
2659
- color: var(--qti-validation-text, #000);
2660
- background-color: var(--qti-validation-error-bg, #fff);
2661
- padding: 10px;
2662
- border: 3px solid var(--qti-validation-text, #000);
2663
- border-radius: 4px;
2664
- margin-top: 8px;
2665
- }
2666
- qti-hottext {
2667
- display: inline-flex;
2668
- align-items: center;
2669
- &:hover {
2670
- }
2671
- &:focus {
2672
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2673
- }
2674
- &::part(cha) {
2675
- width: calc(var(--qti-form-size) - 6px);
2676
- height: calc(var(--qti-form-size) - 6px);
2677
- }
2678
- &:state(radio)::part(ch) {
2679
- border-radius: 100%;
2680
- display: grid;
2681
- place-content: center;
2682
- width: var(--qti-form-size);
2683
- height: var(--qti-form-size);
2684
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2685
- outline: none;
2686
- }
2687
- &:state(radio):state(--checked)::part(cha) {
2688
- background-color: var(--qti-border-active);
2689
- border-radius: 100%;
2690
- }
2691
- &:state(checkbox)::part(ch) {
2692
- display: flex;
2693
- place-items: center;
2694
- border-radius: var(--qti-border-radius);
2695
- display: grid;
2696
- place-content: center;
2697
- width: var(--qti-form-size);
2698
- height: var(--qti-form-size);
2699
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2700
- outline: none;
2701
- }
2702
- &:state(checkbox):state(--checked)::part(cha) {
2703
- background-color: var(--qti-border-active);
2704
- -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");
2705
- 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");
2706
- }
2707
- &:state(correct-response),
2708
- &[data-correct-response='true'] {
2709
- &::after {
2710
- content: '\\02714';
2711
- color: #16a34a;
2712
- }
2713
- }
2714
- gap: 0.5rem;
2715
- background-color: var(--qti-bg);
2716
- border-radius: var(--qti-border-radius);
2717
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2718
- outline: none;
2719
- cursor: pointer
2720
- }
2721
- &.qti-input-control-hidden {
2722
- qti-hottext {
2723
- &:hover {
2724
- }
2725
- &:focus {
2726
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2727
- }
2728
- &::part(ch) {
2729
- display: none;
2730
- }
2731
- &:state(--checked) {
2732
- border-color: var(--qti-border-active);
2733
- background-color: var(--qti-bg-active);
2734
- }
2735
- &[aria-readonly='true'] {
2736
- cursor: pointer;
2737
- background-color: var(--qti-bg);
2738
- outline: 0;
2739
- border: none;
2740
- }
2741
- &[aria-disabled='true'] {
2742
- cursor: not-allowed;
2743
- background-color: var(--qti-disabled-bg);
2744
- color: var(--qti-disabled-color);
2745
- border-color: var(--qti-border-color);
2746
- outline: 4px solid var(--qti-disabled-bg);
2747
- }
2748
- border-radius: var(--qti-border-radius);
2749
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2750
- background: var(--qti-bg);
2751
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2752
- outline: none
2753
- }
2754
- }
2755
- &.qti-unselected-hidden {
2756
- qti-hottext {
2757
- &:hover {
2758
- }
2759
- &:focus {
2760
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2761
- }
2762
- cursor: pointer;
2763
- &::part(ch) {
2764
- display: none;
2765
- }
2766
- &:state(--checked) {
2767
- background-color: var(--qti-bg-active);
2768
- }
2769
- &[aria-readonly='true'] {
2770
- cursor: pointer;
2771
- background-color: var(--qti-bg);
2772
- outline: 0;
2773
- border: none;
2774
- }
2775
- &[aria-disabled='true'] {
2776
- cursor: not-allowed;
2777
- background-color: var(--qti-disabled-bg);
2778
- color: var(--qti-disabled-color);
2779
- border-color: var(--qti-border-color);
2780
- outline: 4px solid var(--qti-disabled-bg);
2781
- }
2782
- }
2783
- }
2784
- }
2785
- }
2786
-
2787
- @layer qti-components {
2788
- qti-inline-choice-interaction {
2789
- &:state(candidate-correct) {
2790
- &::part(trigger) {
2791
- background-color: var(--qti-correct);
2792
- }
2793
- }
2794
- &:state(candidate-incorrect) {
2795
- &::part(trigger) {
2796
- background-color: var(--qti-incorrect);
2797
- }
2798
- }
2799
- &::part(trigger) {
2800
- font-size: inherit;
2801
- vertical-align: baseline;
2802
- min-width: var(--qti-calculated-min-width, auto);
2803
- &:focus-visible {
2804
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2805
- }
2806
- display: inline-flex;
2807
- align-items: center;
2808
- justify-content: space-between;
2809
- gap: 0.5rem;
2810
- border-radius: var(--qti-border-radius);
2811
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2812
- background: var(--qti-bg);
2813
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2814
- outline: none
2815
- }
2816
- &:not(:state(readonly)):not([readonly])::part(trigger):hover {
2817
- }
2818
- &:state(disabled)::part(trigger),
2819
- &[disabled]::part(trigger) {
2820
- cursor: not-allowed;
2821
- background-color: var(--qti-disabled-bg);
2822
- color: var(--qti-disabled-color);
2823
- border-color: var(--qti-border-color);
2824
- outline: 4px solid var(--qti-disabled-bg);
2825
- }
2826
- &:state(readonly)::part(trigger),
2827
- &[readonly]::part(trigger) {
2828
- cursor: pointer;
2829
- background-color: var(--qti-bg);
2830
- outline: 0;
2831
- border: none;
2832
- cursor: not-allowed;
2833
- background-color: var(--qti-disabled-bg);
2834
- color: var(--qti-disabled-color);
2835
- border-color: var(--qti-border-color);
2836
- outline: 4px solid var(--qti-disabled-bg);
2837
- }
2838
- &::part(dropdown-icon) {
2839
- font-size: 1.75em;
2840
- display: inline-flex;
2841
- align-items: center;
2842
- justify-content: center;
2843
- flex: 0 0 auto;
2844
- transition: transform 150ms ease;
2845
- transform-origin: 50% 50%;
2846
- color: var(--qti-border-color);
2847
- line-height: 1;
2848
- }
2849
- &::part(dropdown-icon-open) {
2850
- transform: rotate(180deg);
2851
- color: var(--qti-border-active);
2852
- }
2853
- &::part(menu) {
2854
- background: var(--qti-bg);
2855
- border-radius: var(--qti-border-radius);
2856
- padding: 0.25rem;
2857
- box-sizing: border-box;
2858
- overflow: auto;
2859
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2860
- outline: none;
2861
- }
2862
- &::part(option) {
2863
- display: flex;
2864
- align-items: center;
2865
- width: 100%;
2866
- min-height: 2.25rem;
2867
- box-sizing: border-box;
2868
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2869
- border: 0;
2870
- border-radius: calc(var(--qti-border-radius) - 2px);
2871
- background: transparent;
2872
- text-align: left;
2873
- font: inherit;
2874
- color: inherit;
2875
- cursor: pointer;
2876
- white-space: nowrap;
2877
- overflow: hidden;
2878
- text-overflow: ellipsis;
2879
- }
2880
- &::part(option):hover {
2881
- }
2882
- &::part(option):focus-visible {
2883
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2884
- }
2885
- &::part(option-selected) {
2886
- background-color: var(--qti-bg-active);
2887
- }
2888
- & qti-inline-choice {
2889
- display: flex;
2890
- align-items: center;
2891
- width: 100%;
2892
- min-height: 2.25rem;
2893
- box-sizing: border-box;
2894
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2895
- border: 0;
2896
- border-radius: calc(var(--qti-border-radius) - 2px);
2897
- background: transparent;
2898
- text-align: left;
2899
- font: inherit;
2900
- color: inherit;
2901
- cursor: pointer;
2902
- white-space: nowrap;
2903
- overflow: hidden;
2904
- text-overflow: ellipsis;
2905
- }
2906
- & qti-inline-choice:hover {
2907
- }
2908
- & qti-inline-choice:focus-visible {
2909
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2910
- }
2911
- & qti-inline-choice:state(--checked) {
2912
- background-color: var(--qti-bg-active);
2913
- }
2914
- }
2915
- }
2916
-
2917
- @layer qti-components {
2918
- qti-match-interaction.qti-match-tabular {
2919
- &::part(message) {
2920
- display: none;
2921
- color: var(--qti-validation-text, #000);
2922
- background-color: var(--qti-validation-error-bg, #fff);
2923
- padding: 10px;
2924
- border: 3px solid var(--qti-validation-text, #000);
2925
- border-radius: 4px;
2926
- margin-top: 8px;
2927
- }
2928
- &::part(table) {
2929
- border-collapse: collapse;
2930
- width: 100%;
2931
- }
2932
- &::part(r-header) {
2933
- background-color: var(--qti-bg-active, #f8f8f8);
2934
- font-weight: 500;
2935
- text-align: center;
2936
- padding: 8px 15px;
2937
- border: 1px solid #ddd;
2938
- width: auto;
2939
- word-wrap: break-word;
2940
- white-space: wrap;
2941
- min-width: 4rem;
2942
- }
2943
- &::part(c-header) {
2944
- background-color: var(--qti-bg-active, #f8f8f8);
2945
- font-weight: 500;
2946
- text-align: left;
2947
- padding: 8px;
2948
- border: 1px solid #ddd;
2949
- width: 8rem;
2950
- white-space: normal;
2951
- }
2952
- &::part(row) {
2953
- border-bottom: 1px solid #ddd;
2954
- }
2955
- &::part(input-cell) {
2956
- text-align: center;
2957
- vertical-align: middle;
2958
- height: 48px;
2959
- border: 1px solid #ddd;
2960
- padding: 8px;
2961
- width: 1%;
2962
- }
2963
- &::part(rb) {
2964
- -webkit-appearance: none;
2965
- -moz-appearance: none;
2966
- appearance: none;
2967
- width: 24px;
2968
- height: 24px;
2969
- border-radius: 50%;
2970
- border: 2px solid var(--qti-border-active, #2196f3);
2971
- background-color: transparent !important;
2972
- margin: 0 auto;
2973
- cursor: pointer;
2974
- display: block;
2975
- }
2976
- &::part(rb-checked) {
2977
- box-shadow: inset 0 0 0 6px var(--qti-border-active, #2196f3);
2978
- }
2979
- &::part(cb) {
2980
- -webkit-appearance: none;
2981
- -moz-appearance: none;
2982
- appearance: none;
2983
- width: 24px;
2984
- height: 24px;
2985
- border-radius: 3px;
2986
- border: 2px solid var(--qti-border-active, #2196f3);
2987
- background-color: transparent !important;
2988
- margin: 0 auto;
2989
- cursor: pointer;
2990
- display: block;
2991
- }
2992
- &::part(cb-checked) {
2993
- background-color: var(--qti-border-active, #2196f3) !important;
2994
- }
2995
- &::part(checkmark) {
2996
- position: absolute;
2997
- width: 18px;
2998
- height: 18px;
2999
- top: 3px;
3000
- left: 3px;
3001
- pointer-events: none;
3002
- }
3003
- &::part(rb-correct) {
3004
- border-color: var(--qti-correct, #4caf50);
3005
- }
3006
- &::part(rb-checked rb-correct) {
3007
- box-shadow: inset 0 0 0 6px var(--qti-correct, #4caf50);
3008
- }
3009
- &::part(cb-correct) {
3010
- border-color: var(--qti-correct, #4caf50);
3011
- }
3012
- &::part(cb-checked cb-correct) {
3013
- background-color: var(--qti-correct, #4caf50) !important;
3014
- }
3015
- &::part(rb-incorrect) {
3016
- border-color: var(--qti-incorrect, #f44336);
3017
- }
3018
- &::part(rb-checked rb-incorrect) {
3019
- box-shadow: inset 0 0 0 6px var(--qti-incorrect, #f44336);
3020
- }
3021
- &::part(cb-incorrect) {
3022
- border-color: var(--qti-incorrect, #f44336);
3023
- }
3024
- &::part(cb-checked cb-incorrect) {
3025
- background-color: var(--qti-incorrect, #f44336) !important;
3026
- }
3027
- }
3028
- qti-match-interaction:not(.qti-match-tabular) {
3029
- &:state(--dragzone-enabled) qti-simple-match-set:first-of-type {
3030
- background-color: var(--qti-bg-active);
3031
- }
3032
- &:state(--dragzone-active) qti-simple-match-set:first-of-type {
3033
- border-color: var(--qti-border-active);
3034
- background-color: var(--qti-bg-active);
3035
- }
3036
- & qti-simple-match-set:first-of-type {
3037
- display: flex;
3038
- flex-wrap: wrap;
3039
- align-items: flex-start;
3040
- gap: var(--qti-gap-size);
3041
- border: 2px solid transparent;
3042
- & qti-simple-associable-choice {
3043
- &[dragging] {
3044
- pointer-events: none;
3045
- rotate: -2deg;
3046
- box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
3047
- 0 4px 8px rgb(0 0 0 / 10%);
3048
- }
3049
- &:hover {
3050
- }
3051
- &:focus {
3052
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3053
- }
3054
- box-sizing: border-box;
3055
- transition: transform 200ms ease-out,
3056
- box-shadow 200ms ease-out,
3057
- rotate 200ms ease-out;
3058
- cursor: grab;
3059
- background-color: var(--qti-bg);
3060
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
3061
- border-radius: var(--qti-border-radius);
3062
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3063
- outline: none
3064
- }
3065
- }
3066
- & qti-simple-match-set:last-of-type {
3067
- display: grid;
3068
- grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
3069
- grid-auto-flow: unset;
3070
- grid-auto-columns: unset;
3071
- gap: var(--qti-gap-size);
3072
- & > qti-simple-associable-choice {
3073
- display: flex;
3074
- flex-direction: column;
3075
- justify-content: space-between;
3076
- grid-row: unset;
3077
- box-sizing: border-box;
3078
- & img {
3079
- max-width: 100%;
3080
- height: auto;
3081
- }
3082
- &[enabled] {
3083
- &::part(dropslot) {
3084
- background-color: var(--qti-bg-active);
3085
- }
3086
- }
3087
- &[disabled] {
3088
- &::part(dropslot) {
3089
- cursor: not-allowed;
3090
- background-color: var(--qti-disabled-bg);
3091
- color: var(--qti-disabled-color);
3092
- border-color: var(--qti-border-color);
3093
- outline: 4px solid var(--qti-disabled-bg);
3094
- }
3095
- }
3096
- &[active] {
3097
- &::part(dropslot) {
3098
- border-color: var(--qti-border-active);
3099
- background-color: var(--qti-bg-active);
3100
- }
3101
- }
3102
- &::part(dropslot) {
3103
- &[dragging] {
3104
- pointer-events: none;
3105
- rotate: -2deg;
3106
- box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
3107
- 0 4px 8px rgb(0 0 0 / 10%);
3108
- }
3109
- &:focus {
3110
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3111
- }
3112
- padding: var(--qti-dropzone-padding);
3113
- margin-top: 0.5rem;
3114
- gap: 0.5rem;
3115
- display: flex;
3116
- flex-wrap: wrap;
3117
- justify-content: center;
3118
- align-items: center;
3119
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
3120
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
3121
- center no-repeat;
3122
- border-radius: var(--qti-border-radius);
3123
- position: relative;
3124
- background-color: var(--qti-bg);
3125
- }
3126
- & > *:not(qti-simple-associable-choice) {
3127
- pointer-events: none;
3128
- }
3129
- & > qti-simple-associable-choice {
3130
- &:state(candidate-correct) {
3131
- background-color: var(--qti-correct);
3132
- }
3133
- &:state(candidate-incorrect) {
3134
- background-color: var(--qti-incorrect);
3135
- }
3136
- &::part(dropslot) {
3137
- display: none;
3138
- }
3139
- &:hover {
3140
- }
3141
- &:focus {
3142
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3143
- }
3144
- flex-basis: fit-content;
3145
- box-sizing: border-box;
3146
- transition: transform 200ms ease-out,
3147
- box-shadow 200ms ease-out,
3148
- rotate 200ms ease-out;
3149
- cursor: grab;
3150
- background-color: var(--qti-bg);
3151
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
3152
- border-radius: var(--qti-border-radius);
3153
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3154
- outline: none;
3155
- }
3156
- }
3157
- }
3158
- }
3159
- }
3160
-
3161
- @layer qti-components {
3162
- qti-order-interaction {
3163
- &:state(--dragzone-active)::part(drags) {
3164
- border-color: var(--qti-border-active);
3165
- background-color: var(--qti-bg-active);
3166
- }
3167
- &:state(--dragzone-enabled)::part(drags) {
3168
- background-color: var(--qti-bg-active);
3169
- }
3170
- &::part(qti-simple-choice),
3171
- & qti-simple-choice {
3172
- &[dragging] {
3173
- pointer-events: none;
3174
- rotate: -2deg;
3175
- box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
3176
- 0 4px 8px rgb(0 0 0 / 10%);
3177
- }
3178
- &:hover {
3179
- }
3180
- &:focus {
3181
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3182
- }
3183
- box-sizing: border-box;
3184
- transition: transform 200ms ease-out,
3185
- box-shadow 200ms ease-out,
3186
- rotate 200ms ease-out;
3187
- cursor: grab;
3188
- background-color: var(--qti-bg);
3189
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
3190
- border-radius: var(--qti-border-radius);
3191
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3192
- outline: none
3193
- }
3194
- &::part(qti-simple-choice) {
3195
- display: flex;
3196
- overflow: hidden;
3197
- align-items: center;
3198
- width: 100%;
3199
- text-overflow: ellipsis;
3200
- }
3201
- &::part(drops) {
3202
- gap: 0.5rem;
3203
- }
3204
- &::part(drags) {
3205
- gap: 0.5rem;
3206
- }
3207
- &::part(drop-list) {
3208
- &[enabled] {
3209
- .qti-selections-light {
3210
- border-color: var(--qti-light-border-active);
3211
- }
3212
- .qti-selections-dark {
3213
- border-color: var(--qti-dark-border-active);
3214
- }
3215
- background-color: var(--qti-bg-active)
3216
- }
3217
- &:hover {
3218
- }
3219
- &:focus {
3220
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3221
- }
3222
- display: flex;
3223
- min-height: 4rem;
3224
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
3225
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
3226
- center no-repeat;
3227
- border-radius: var(--qti-border-radius);
3228
- position: relative;
3229
- background-color: var(--qti-bg);
3230
- }
3231
- &::part(active) {
3232
- border-color: var(--qti-border-active);
3233
- background-color: var(--qti-bg-active);
3234
- }
3235
- & drop-list {
3236
- &[shape='circle'] {
3237
- &:hover {
3238
- }
3239
- &:focus {
3240
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3241
- }
3242
- &[aria-checked='true'] {
3243
- border-color: var(--qti-border-active);
3244
- background-color: var(--qti-bg-active);
3245
- }
3246
- &[aria-readonly='true'] {
3247
- cursor: pointer;
3248
- background-color: var(--qti-bg);
3249
- outline: 0;
3250
- border: none;
3251
- }
3252
- &[aria-disabled='true'] {
3253
- cursor: not-allowed;
3254
- background-color: var(--qti-disabled-bg);
3255
- color: var(--qti-disabled-color);
3256
- border-color: var(--qti-border-color);
3257
- outline: 4px solid var(--qti-disabled-bg);
3258
- }
3259
- width: 100%;
3260
- height: 100%;
3261
- background-color: transparent;
3262
- margin: 0;
3263
- padding: 0;
3264
- border: 0;
3265
- box-sizing: border-box;
3266
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3267
- outline: none
3268
- }
3269
- &[shape='square'] {
3270
- &:hover {
3271
- }
3272
- &:focus {
3273
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3274
- }
3275
- &[aria-checked='true'] {
3276
- border-color: var(--qti-border-active);
3277
- background-color: var(--qti-bg-active);
3278
- }
3279
- &[aria-readonly='true'] {
3280
- cursor: pointer;
3281
- background-color: var(--qti-bg);
3282
- outline: 0;
3283
- border: none;
3284
- }
3285
- &[aria-disabled='true'] {
3286
- cursor: not-allowed;
3287
- background-color: var(--qti-disabled-bg);
3288
- color: var(--qti-disabled-color);
3289
- border-color: var(--qti-border-color);
3290
- outline: 4px solid var(--qti-disabled-bg);
3291
- }
3292
- width: 100%;
3293
- height: 100%;
3294
- background-color: transparent;
3295
- margin: 0;
3296
- padding: 0;
3297
- border: 0;
3298
- box-sizing: border-box;
3299
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3300
- outline: none
3301
- }
3302
- }
3303
- }
3304
- }
3305
-
3306
- @layer qti-components {
3307
- qti-associate-interaction {
3308
- &::part(message) {
3309
- display: none;
3310
- color: var(--qti-validation-text, #000);
3311
- background-color: var(--qti-validation-error-bg, #fff);
3312
- padding: 10px;
3313
- border: 3px solid var(--qti-validation-text, #000);
3314
- border-radius: 4px;
3315
- margin-top: 8px;
3316
- }
3317
- &:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {
3318
- border-color: var(--qti-border-active);
3319
- background-color: var(--qti-bg-active);
3320
- }
3321
- &:state(--dragzone-enabled) slot[name='qti-simple-associable-choice'] {
3322
- background-color: var(--qti-bg-active);
3323
- }
3324
- & qti-simple-associable-choice,
3325
- &::part(qti-simple-associable-choice) {
3326
- &:hover {
3327
- }
3328
- &:focus {
3329
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3330
- }
3331
- &[dragging] {
3332
- pointer-events: none;
3333
- rotate: -2deg;
3334
- box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
3335
- 0 4px 8px rgb(0 0 0 / 10%);
3336
- }
3337
- box-sizing: border-box;
3338
- transition: transform 200ms ease-out,
3339
- box-shadow 200ms ease-out,
3340
- rotate 200ms ease-out;
3341
- cursor: grab;
3342
- background-color: var(--qti-bg);
3343
- padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
3344
- border-radius: var(--qti-border-radius);
3345
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3346
- outline: none
3347
- }
3348
- &::part(drop-list) {
3349
- display: grid;
3350
- height: 3rem;
3351
- min-width: 10rem;
3352
- border: var(--qti-border-thickness) dashed var(--qti-border-color);
3353
- background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
3354
- center no-repeat;
3355
- border-radius: var(--qti-border-radius);
3356
- position: relative;
3357
- background-color: var(--qti-bg);
3358
- }
3359
- &::part(drop-list):focus {
3360
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3361
- }
3362
- &::part(drop-list)[dragging] {
3363
- border-color: var(--qti-border-active);
3364
- background-color: var(--qti-bg-active);
3365
- }
3366
- }
3367
- }
3368
-
3369
- @layer qti-components {
3370
- qti-graphic-order-interaction {
3371
- &::part(message) {
3372
- display: none;
3373
- color: var(--qti-validation-text, #000);
3374
- background-color: var(--qti-validation-error-bg, #fff);
3375
- padding: 10px;
3376
- border: 3px solid var(--qti-validation-text, #000);
3377
- border-radius: 4px;
3378
- margin-top: 8px;
3379
- }
3380
- & qti-hotspot-choice {
3381
- width: 100%;
3382
- height: 100%;
3383
- background-color: rgb(128 128 128 / 30%);
3384
- padding: 0;
3385
- &:hover {
3386
- background-color: rgb(128 128 128 / 70%);
3387
- }
3388
- &:focus {
3389
- background-color: rgb(128 128 128 / 70%);
3390
- }
3391
- &:state(--checked),
3392
- &[aria-checked='true'] {
3393
- background-color: rgb(128 128 128 / 70%);
3394
- }
3395
- &[aria-readonly='true'] {
3396
- cursor: pointer;
3397
- background-color: var(--qti-bg);
3398
- outline: 0;
3399
- border: none;
3400
- }
3401
- &[aria-disabled='true'] {
3402
- cursor: not-allowed;
3403
- background-color: var(--qti-disabled-bg);
3404
- color: var(--qti-disabled-color);
3405
- border-color: var(--qti-border-color);
3406
- outline: 4px solid var(--qti-disabled-bg);
3407
- }
3408
- &[aria-ordervalue] {
3409
- display: grid;
3410
- place-content: center;
3411
- }
3412
- &[aria-ordervalue]::after {
3413
- content: attr(aria-ordervalue) !important;
3414
- }
3415
- &[aria-ordercorrectvalue] {
3416
- display: grid;
3417
- place-content: center;
3418
- }
3419
- &[aria-ordercorrectvalue][aria-ordervalue]::after {
3420
- content: 'C=' attr(aria-ordercorrectvalue) ' R=' attr(aria-ordervalue) !important;
3421
- color: var(--qti-correct);
3422
- }
3423
- &[aria-ordercorrectvalue]:not([aria-ordervalue])::after {
3424
- content: 'C=' attr(aria-ordercorrectvalue) !important;
3425
- color: var(--qti-correct);
3426
- }
3427
- }
3428
- &.qti-selections-light {
3429
- &:state(--dragzone-active)::part(drags) {
3430
- background-color: var(--qti-light-bg-active);
3431
- border-color: var(--qti-light-border-active);
3432
- }
3433
- &:state(--dragzone-enabled)::part(drags) {
3434
- background-color: var(--qti-light-bg-active);
3435
- }
3436
- }
3437
- &.qti-selections-dark {
3438
- &:state(--dragzone-active)::part(drags) {
3439
- background-color: var(--qti-dark-bg-active);
3440
- border-color: var(--qti-dark-border-active);
3441
- }
3442
- &:state(--dragzone-enabled)::part(drags) {
3443
- background-color: var(--qti-dark-bg-active);
3444
- }
3445
- }
3446
- &:state(--dragzone-active)::part(drags) {
3447
- border-color: var(--qti-border-active);
3448
- background-color: var(--qti-bg-active);
3449
- }
3450
- &:state(--dragzone-enabled)::part(drags) {
3451
- background-color: var(--qti-bg-active);
3452
- }
3453
- }
3454
- }
3455
-
3456
- @layer qti-components {
3457
- qti-graphic-associate-interaction {
3458
- &::part(message) {
3459
- display: none;
3460
- color: var(--qti-validation-text, #000);
3461
- background-color: var(--qti-validation-error-bg, #fff);
3462
- padding: 10px;
3463
- border: 3px solid var(--qti-validation-text, #000);
3464
- border-radius: 4px;
3465
- margin-top: 8px;
3466
- }
3467
- position: relative;
3468
- display: block;
3469
- & qti-associable-hotspot {
3470
- &[shape='circle'] {
3471
- &:hover {
3472
- }
3473
- &:focus {
3474
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3475
- }
3476
- &[aria-checked='true'] {
3477
- border-color: var(--qti-border-active);
3478
- background-color: var(--qti-bg-active);
3479
- }
3480
- &[aria-readonly='true'] {
3481
- cursor: pointer;
3482
- background-color: var(--qti-bg);
3483
- outline: 0;
3484
- border: none;
3485
- }
3486
- &[aria-disabled='true'] {
3487
- cursor: not-allowed;
3488
- background-color: var(--qti-disabled-bg);
3489
- color: var(--qti-disabled-color);
3490
- border-color: var(--qti-border-color);
3491
- outline: 4px solid var(--qti-disabled-bg);
3492
- }
3493
- width: 100%;
3494
- height: 100%;
3495
- background-color: transparent;
3496
- margin: 0;
3497
- padding: 0;
3498
- border: 0;
3499
- box-sizing: border-box;
3500
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3501
- outline: none
3502
- }
3503
- &[shape='square'] {
3504
- &:hover {
3505
- }
3506
- &:focus {
3507
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3508
- }
3509
- &[aria-checked='true'] {
3510
- border-color: var(--qti-border-active);
3511
- background-color: var(--qti-bg-active);
3512
- }
3513
- &[aria-readonly='true'] {
3514
- cursor: pointer;
3515
- background-color: var(--qti-bg);
3516
- outline: 0;
3517
- border: none;
3518
- }
3519
- &[aria-disabled='true'] {
3520
- cursor: not-allowed;
3521
- background-color: var(--qti-disabled-bg);
3522
- color: var(--qti-disabled-color);
3523
- border-color: var(--qti-border-color);
3524
- outline: 4px solid var(--qti-disabled-bg);
3525
- }
3526
- width: 100%;
3527
- height: 100%;
3528
- background-color: transparent;
3529
- margin: 0;
3530
- padding: 0;
3531
- border: 0;
3532
- box-sizing: border-box;
3533
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3534
- outline: none
3535
- }
3536
- }
3537
- &.qti-selections-light {
3538
- &:state(--dragzone-active)::part(drags) {
3539
- background-color: var(--qti-light-bg-active);
3540
- border-color: var(--qti-light-border-active);
3541
- }
3542
- &:state(--dragzone-enabled)::part(drags) {
3543
- background-color: var(--qti-light-bg-active);
3544
- }
3545
- }
3546
- &.qti-selections-dark {
3547
- &:state(--dragzone-active)::part(drags) {
3548
- background-color: var(--qti-dark-bg-active);
3549
- border-color: var(--qti-dark-border-active);
3550
- }
3551
- &:state(--dragzone-enabled)::part(drags) {
3552
- background-color: var(--qti-dark-bg-active);
3553
- }
3554
- }
3555
- &:state(--dragzone-active)::part(drags) {
3556
- border-color: var(--qti-border-active);
3557
- background-color: var(--qti-bg-active);
3558
- }
3559
- &:state(--dragzone-enabled)::part(drags) {
3560
- background-color: var(--qti-bg-active);
3561
- }
3562
- }
3563
- }
3564
-
3565
- @layer qti-components {
3566
- qti-slider-interaction {
3567
- --qti-tick-color: rgb(229 231 235 / 100%);
3568
- --qti-tick-width: 1px;
3569
- }
3570
- }
3571
-
3572
- @layer qti-components {
3573
- qti-select-point-interaction {
3574
- &::part(point) {
3575
- &:hover {
3576
- }
3577
- &:focus {
3578
- box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3579
- }
3580
- box-sizing: border-box;
3581
- border-radius: 100%;
3582
- border: 1px solid white;
3583
- background-color: black;
3584
- opacity: 0.5;
3585
- padding: 0;
3586
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3587
- outline: none;
3588
- }
3589
- &::part(correct) {
3590
- background-color: var(--qti-correct);
3591
- }
3592
- &::part(incorrect) {
3593
- background-color: var(--qti-incorrect);
3594
- }
3595
- }
3596
- }
3597
-
3598
- @layer qti-components {
3599
- qti-position-object-stage {
3600
- & qti-position-object-interaction {
3601
- /* no styles necessary, only layout styles, defined in the component */
3602
- }
3603
- }
3604
- }
3605
-
3606
- @layer qti-components {
3607
- qti-prompt {
3608
- margin: 0.5rem 0;
3609
- display: block;
3610
- width: 100%;
3611
- }
3612
- }
3613
-
3614
- [view],
3615
- qti-outcome-declaration,
3616
- qti-response-declaration {
3617
- display: none;
3618
- }
3619
-
3620
- [view].show {
3621
- display: block;
3622
- }
3623
-
3624
- :host {
3625
- box-sizing: border-box;
3626
- }
3627
-
3628
- qti-test-part:not(:has(qti-assessment-item)),
3629
- qti-assessment-section:not(:has(qti-assessment-item)),
3630
- qti-assessment-item-ref:not(:has(qti-assessment-item)) {
3631
- display: none;
3632
- }
3633
-
3634
- div.full-correct-response {
3635
- border: 1px solid #39a7c0;
3636
- background-color: #d9e8ee;
3637
- }
3638
-
3639
- div.full-correct-response-block {
3640
- display: block;
3641
- margin-top: var(--qti-padding-vertical);
3642
- padding: 0.5rem;
3643
- }
3644
-
3645
- div.full-correct-response-inline {
3646
- display: inline-block;
3647
- margin-left: var(--qti-padding-horizontal);
3648
- margin-right: var(--qti-padding-horizontal);
3649
- padding: 0.2rem;
3650
- }
3651
- `;
3652
-
3653
- export {
3654
- m,
3655
- item_default
3656
- };
3657
- /*! Bundled license information:
3658
-
3659
- lit-html/node/directives/private-async-helpers.js:
3660
- (**
3661
- * @license
3662
- * Copyright 2021 Google LLC
3663
- * SPDX-License-Identifier: BSD-3-Clause
3664
- *)
3665
-
3666
- lit-html/node/directives/until.js:
3667
- (**
3668
- * @license
3669
- * Copyright 2017 Google LLC
3670
- * SPDX-License-Identifier: BSD-3-Clause
3671
- *)
3672
- */
3673
- //# sourceMappingURL=chunk-LQZCSHN5.js.map