@citolab/qti-components 6.9.1-beta.57 → 6.9.1-beta.59

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 (10) hide show
  1. package/dist/chunk-YY52I6U7.js +24 -0
  2. package/dist/custom-elements.json +156 -156
  3. package/dist/index.global.js +1 -1
  4. package/dist/index.js +1 -1
  5. package/dist/item.css +164 -232
  6. package/dist/qti-components/index.js +1 -1
  7. package/dist/qti-loader/index.js +1 -1
  8. package/dist/qti-transformers/index.js +1 -1
  9. package/package.json +1 -1
  10. package/dist/chunk-SOXSSPDZ.js +0 -24
package/dist/item.css CHANGED
@@ -2,14 +2,17 @@
2
2
 
3
3
  :root,
4
4
  :host {
5
- /* active colors */
6
- --qti-bg-active: #ffecec; /* lighter shade of active */
5
+ /* Active colors */
6
+ --qti-bg-active: #ffecec;
7
7
  --qti-border-active: #f86d70;
8
8
 
9
+ /* Gap size */
10
+ --qti-gap-size: 1rem;
11
+
9
12
  /* Background colors */
10
- --qti-bg-white: white;
13
+ --qti-bg: white;
11
14
  --qti-hover-bg: #f9fafb;
12
-
15
+
13
16
  /* Disabled colors */
14
17
  --qti-disabled-bg: #f3f4f6;
15
18
  --qti-disabled-color: #45484f;
@@ -19,14 +22,46 @@
19
22
  --qti-border-style: solid;
20
23
  --qti-border-color: #c6cad0;
21
24
  --qti-border-radius: 0.3rem;
22
- --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness) );
23
-
24
- /* Typography */
25
- --qti-font-weight-semibold: 600;
25
+ --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
26
26
 
27
27
  /* Focus & active states */
28
28
  --qti-focus-border-width: 5px;
29
29
  --qti-focus-color: #bddcff7e;
30
+
31
+ /* Class-specific variables */
32
+
33
+ /* Form elements */
34
+ --qti-form-size: 1rem;
35
+
36
+ /* Point elements */
37
+ --qti-point-size: 2rem;
38
+
39
+ /* Order buttons */
40
+ --qti-order-size: 2rem;
41
+
42
+ /* Generic padding for all elements */
43
+ --qti-padding-vertical: 0.5rem; /* py-2 */
44
+ --qti-padding-horizontal: 0.5rem; /* px-2 */
45
+
46
+ /* Button elements */
47
+ --qti-button-padding-vertical: var(--qti-padding-vertical);
48
+ --qti-button-padding-horizontal: var(--qti-padding-horizontal);
49
+
50
+ /* Select dropdown */
51
+ --qti-select-padding-vertical: var(--qti-padding-vertical);
52
+ --qti-select-padding-horizontal: var(--qti-padding-horizontal);
53
+
54
+ /* Text inputs */
55
+ --qti-text-padding-vertical: var(--qti-padding-vertical);
56
+ --qti-text-padding-horizontal: var(--qti-padding-horizontal);
57
+
58
+ /* Draggable elements */
59
+ --qti-drag-padding-vertical: var(--qti-padding-vertical);
60
+ --qti-drag-padding-horizontal: var(--qti-padding-horizontal);
61
+
62
+ /* Checkbox elements */
63
+ --qti-check-padding-vertical: var(--qti-padding-vertical);
64
+ --qti-check-padding-horizontal: var(--qti-padding-horizontal);
30
65
  }
31
66
 
32
67
  /* SVG masks and backgrounds */
@@ -59,17 +94,16 @@
59
94
  The @apply directive is used to apply these classes to elements
60
95
  */
61
96
 
62
- /* apply .border to an element */
97
+ /* Apply .bordered to an element */
63
98
 
64
99
  .bordered {
65
100
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
66
101
  outline: none;
67
102
  }
68
103
 
69
- /* apply .form rules for checkbox and radiobutton */
104
+ /* Apply .form rules for checkbox and radiobutton */
70
105
 
71
106
  .form {
72
- --qti-form-size: 1rem;
73
107
 
74
108
  display: grid;
75
109
  place-content: center;
@@ -79,53 +113,43 @@
79
113
  outline: none;
80
114
  }
81
115
 
82
- /* apply .button rules for button-like elements, such as drags and buttons */
116
+ /* Apply .button rules for button-like elements, such as drags and buttons */
83
117
 
84
118
  .button {
85
- --qti-button-padding-vertical: 0.5rem; /* py-2 */
86
- --qti-button-padding-horizontal: 0.5rem; /* px-2 */
87
119
 
88
120
  border-radius: var(--qti-border-radius);
89
121
  padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
90
- font-weight: var(--qti-font-weight-semibold);
91
122
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
92
123
  outline: none;
93
124
  }
94
125
 
95
- /* apply .select for the select dropdown element */
126
+ /* Apply .select for the select dropdown element */
96
127
 
97
128
  .select {
98
- --qti-select-padding-top: 0.5rem;
99
- --qti-select-padding-right: 1.75rem;
100
- --qti-select-padding-bottom: 0.5rem;
101
- --qti-select-padding-left: 0.75rem;
102
129
 
103
130
  border-radius: var(--qti-border-radius);
104
131
  position: relative;
105
132
  -webkit-appearance: none;
106
133
  -moz-appearance: none;
107
134
  appearance: none;
108
- padding: var(--qti-select-padding-top) var(--qti-select-padding-right) var(--qti-select-padding-bottom) var(--qti-select-padding-left);
109
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
110
- outline: none;
111
- 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")
112
- no-repeat center right 6px;
135
+ padding: var(--qti-select-padding-vertical) var(--qti-select-padding-horizontal);
136
+ padding-right: calc(var(--qti-select-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")
137
+ no-repeat center right 6px;
113
138
  }
114
139
 
115
- /* apply .text for the input text and textarea */
140
+ /* Apply .text for the input text and textarea */
116
141
 
117
142
  .text {
118
- --qti-text-padding: 0.75rem; /* Equal padding on all sides */
119
143
 
120
144
  border-radius: 0;
121
145
  cursor: text;
122
- padding: var(--qti-text-padding);
146
+ padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
123
147
  background: unset;
124
148
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
125
149
  outline: none;
126
150
  }
127
151
 
128
- /* apply .spot for hotspot shapes */
152
+ /* Apply .spot for hotspot shapes */
129
153
 
130
154
  .spot {
131
155
 
@@ -137,13 +161,12 @@
137
161
  outline: none;
138
162
  }
139
163
 
140
- /* apply .point for circular small hotspots */
164
+ /* Apply .point for circular small hotspots */
141
165
 
142
166
  .point {
143
- --qti-point-size: 1.5rem;
144
167
 
145
168
  border-radius: 100%;
146
- width: var(--qti-point-size); /* w-6 */
169
+ width: var(--qti-point-size);
147
170
  height: var(--qti-point-size);
148
171
  background-color: transparent;
149
172
  padding: 0;
@@ -151,38 +174,28 @@
151
174
  outline: none;
152
175
  }
153
176
 
154
- /* apply .drag for draggable elements */
177
+ /* Apply .drag for draggable elements */
155
178
 
156
179
  .drag {
157
- --qti-drag-padding-top: 0.5rem;
158
- --qti-drag-padding-right: 1rem;
159
- --qti-drag-padding-bottom: 0.5rem;
160
- --qti-drag-padding-left: 1rem;
161
180
 
162
181
  transition:
163
182
  transform 200ms ease-out,
164
183
  box-shadow 200ms ease-out,
165
184
  rotate 200ms ease-out;
166
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left); /* Padding shorthand */
167
- border-radius: var(--qti-border-radius);
168
185
  cursor: grab;
169
- background-color: var(--qti-bg-white);
170
- font-weight: var(--qti-font-weight-semibold);
171
- border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
172
- outline: none;
173
- background-image: radial-gradient(
186
+ background-color: var(--qti-bg);
187
+ padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
188
+ border-radius: var(--qti-border-radius);
189
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem) !important; /* 1.5rem for the drag */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background-image: radial-gradient(
174
190
  circle at center,
175
191
  rgb(0 0 0 / 10%) 0,
176
192
  rgb(0 0 0 / 20%) 2px,
177
193
  rgb(255 255 255 / 0%) 2px,
178
194
  rgb(255 255 255 / 0%) 100%
179
- );
180
- background-repeat: repeat-y;
181
- background-position: left center;
182
- background-size: 14px 8px;
195
+ ); background-repeat: repeat-y; background-position: left center; background-size: 14px 8px;
183
196
  }
184
197
 
185
- /* apply .dragging for the dragging state of a draggable element */
198
+ /* Apply .dragging for the dragging state of a draggable element */
186
199
 
187
200
  .dragging {
188
201
  pointer-events: none;
@@ -192,7 +205,7 @@
192
205
  0 4px 8px rgb(0 0 0 / 10%);
193
206
  }
194
207
 
195
- /* apply .drop for an element where you can drop the draggable */
208
+ /* Apply .drop for an element where you can drop the draggable */
196
209
 
197
210
  .drop {
198
211
 
@@ -200,61 +213,55 @@
200
213
  center no-repeat;
201
214
  border-radius: var(--qti-drop-border-radius);
202
215
  position: relative;
203
- background-color: var(--qti-bg-white);
216
+ background-color: var(--qti-bg);
204
217
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
205
218
  outline: none;
206
219
  }
207
220
 
208
- /* apply .dropping for an indicator where you can drop the draggable */
221
+ /* Apply .dropping for an indicator where you can drop the draggable */
209
222
 
210
223
  .dropping {
211
224
  background-color: var(--qti-bg-active);
212
225
  }
213
226
 
214
- /* apply .order for a small circular button */
227
+ /* Apply .order for a small circular button */
215
228
 
216
229
  .order {
217
- --qti-order-size: 1.5rem;
218
230
 
219
231
  display: grid;
220
232
  place-content: center;
221
233
 
222
234
  /* background-color: var(--qti-bg-active); */
223
235
  border-radius: 100%;
224
- width: var(--qti-order-size); /* w-6 */
236
+ width: var(--qti-order-size);
225
237
  height: var(--qti-order-size);
226
238
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
227
239
  outline: none;
228
240
  }
229
241
 
230
- /* apply .check-size for radio and checkbox size */
242
+ /* Apply .check-size for radio and checkbox size */
231
243
 
232
244
  .check-size {
233
245
  width: calc(var(--qti-form-size) - 6px);
234
246
  height: calc(var(--qti-form-size) - 6px);
235
247
  }
236
248
 
237
- /* apply .check for checkbox */
249
+ /* Apply .check for checkbox */
238
250
 
239
251
  .check {
240
- --qti-check-padding-vertical: 0.5rem;
241
- --qti-check-padding-horizontal: 0.5rem;
242
-
243
252
  gap: 0.5rem;
244
253
  border-radius: var(--qti-border-radius);
245
- padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal); /* Padding shorthand */
254
+ padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal);
246
255
  outline: none;
247
256
  cursor: pointer;
248
257
  }
249
258
 
250
- /* apply .check-radio for outer circle of the radio buttons */
259
+ /* Apply .check-radio for outer circle of the radio buttons */
251
260
 
252
261
  .check-radio {
253
262
 
254
263
  border-radius: 100%;
255
264
 
256
- --qti-form-size: 1rem;
257
-
258
265
  display: grid;
259
266
 
260
267
  place-content: center;
@@ -268,21 +275,20 @@
268
275
  outline: none;
269
276
  }
270
277
 
271
- /* apply .check-radio-checked for the inner checked radio */
278
+ /* Apply .check-radio-checked for the inner checked radio */
272
279
 
273
280
  .check-radio-checked {
274
281
  background-color: var(--qti-border-active);
275
282
  border-radius: 100%;
276
283
  }
277
284
 
278
- /* apply .check-checkbox for outer square of the checkbox */
285
+ /* Apply .check-checkbox for outer square of the checkbox */
279
286
 
280
287
  .check-checkbox {
281
288
 
282
289
  display: flex;
283
290
  place-items: center;
284
291
  border-radius: var(--qti-border-radius);
285
- --qti-form-size: 1rem;
286
292
  display: grid;
287
293
  place-content: center;
288
294
  width: var(--qti-form-size);
@@ -291,7 +297,7 @@
291
297
  outline: none;
292
298
  }
293
299
 
294
- /* apply .check-checkbox-checked for the inner checkmark */
300
+ /* Apply .check-checkbox-checked for the inner checkmark */
295
301
 
296
302
  .check-checkbox-checked {
297
303
  background-color: var(--qti-border-active);
@@ -299,42 +305,42 @@
299
305
  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");
300
306
  }
301
307
 
302
- /* apply .hov for hover state */
308
+ /* Apply .hov for hover state */
303
309
 
304
310
  .hov {
305
311
  background-color: var(--qti-hover-bg);
306
312
  }
307
313
 
308
- /* apply .foc for focus state */
314
+ /* Apply .foc for focus state */
309
315
 
310
316
  .foc {
311
317
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
312
318
  }
313
319
 
314
- /* apply .act for active state */
320
+ /* Apply .act for active state */
315
321
 
316
322
  .act {
317
- border-color: var(--qti-border-active); /* border-active */
323
+ border-color: var(--qti-border-active);
318
324
  background-color: var(--qti-bg-active);
319
325
  }
320
326
 
321
- /* apply .rdo for readonly state */
327
+ /* Apply .rdo for readonly state */
322
328
 
323
329
  .rdo {
324
330
  cursor: pointer;
325
- background-color: var(--qti-bg-white);
331
+ background-color: var(--qti-bg);
326
332
  outline: 0;
327
333
  border: none;
328
334
  }
329
335
 
330
- /* apply .dis for disabled state */
336
+ /* Apply .dis for disabled state */
331
337
 
332
338
  .dis {
333
339
  cursor: not-allowed;
334
- background-color: var(--qti-bg-gray-100);
335
- color: var(--qti-text-gray-500);
340
+ background-color: var(--qti-disabled-bg);
341
+ color: var(--qti-disabled-color);
336
342
  border-color: var(--qti-border-color);
337
- outline: 4px solid var(--qti-bg-gray-100);
343
+ outline: 4px solid var(--qti-disabled-bg);
338
344
  }
339
345
 
340
346
  /* base */
@@ -1979,7 +1985,7 @@ qti-response-declaration {
1979
1985
  &:state(readonly),
1980
1986
  &[aria-readonly='true'] {
1981
1987
  cursor: pointer;
1982
- background-color: var(--qti-bg-white);
1988
+ background-color: var(--qti-bg);
1983
1989
  outline: 0;
1984
1990
  border: none;
1985
1991
  }
@@ -1987,22 +1993,16 @@ qti-response-declaration {
1987
1993
  &:state(disabled),
1988
1994
  &[aria-disabled='true'] {
1989
1995
  cursor: not-allowed;
1990
- background-color: var(--qti-bg-gray-100);
1991
- color: var(--qti-text-gray-500);
1996
+ background-color: var(--qti-disabled-bg);
1997
+ color: var(--qti-disabled-color);
1992
1998
  border-color: var(--qti-border-color);
1993
- outline: 4px solid var(--qti-bg-gray-100);
1999
+ outline: 4px solid var(--qti-disabled-bg);
1994
2000
  }
1995
2001
 
1996
- --qti-button-padding-vertical: 0.5rem;
1997
-
1998
- --qti-button-padding-horizontal: 0.5rem;
1999
-
2000
2002
  border-radius: var(--qti-border-radius);
2001
2003
 
2002
2004
  padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2003
2005
 
2004
- font-weight: var(--qti-font-weight-semibold);
2005
-
2006
2006
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2007
2007
 
2008
2008
  outline: none
@@ -2029,7 +2029,7 @@ qti-response-declaration {
2029
2029
  &:state(readonly),
2030
2030
  &[aria-readonly='true'] {
2031
2031
  cursor: pointer;
2032
- background-color: var(--qti-bg-white);
2032
+ background-color: var(--qti-bg);
2033
2033
  outline: 0;
2034
2034
  border: none;
2035
2035
  }
@@ -2037,10 +2037,10 @@ qti-response-declaration {
2037
2037
  &:state(disabled),
2038
2038
  &[aria-disabled='true'] {
2039
2039
  cursor: not-allowed;
2040
- background-color: var(--qti-bg-gray-100);
2041
- color: var(--qti-text-gray-500);
2040
+ background-color: var(--qti-disabled-bg);
2041
+ color: var(--qti-disabled-color);
2042
2042
  border-color: var(--qti-border-color);
2043
- outline: 4px solid var(--qti-bg-gray-100);
2043
+ outline: 4px solid var(--qti-disabled-bg);
2044
2044
  }
2045
2045
 
2046
2046
  &::part(cha) {
@@ -2050,7 +2050,6 @@ qti-response-declaration {
2050
2050
 
2051
2051
  &:state(radio)::part(ch) {
2052
2052
  border-radius: 100%;
2053
- --qti-form-size: 1rem;
2054
2053
  display: grid;
2055
2054
  place-content: center;
2056
2055
  width: var(--qti-form-size);
@@ -2068,7 +2067,6 @@ qti-response-declaration {
2068
2067
  display: flex;
2069
2068
  place-items: center;
2070
2069
  border-radius: var(--qti-border-radius);
2071
- --qti-form-size: 1rem;
2072
2070
  display: grid;
2073
2071
  place-content: center;
2074
2072
  width: var(--qti-form-size);
@@ -2083,10 +2081,6 @@ qti-response-declaration {
2083
2081
  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");
2084
2082
  }
2085
2083
 
2086
- --qti-check-padding-vertical: 0.5rem;
2087
-
2088
- --qti-check-padding-horizontal: 0.5rem;
2089
-
2090
2084
  gap: 0.5rem;
2091
2085
 
2092
2086
  border-radius: var(--qti-border-radius);
@@ -2128,10 +2122,9 @@ qti-response-declaration {
2128
2122
  }
2129
2123
 
2130
2124
  &::part(input) {
2131
- --qti-text-padding: 0.75rem;
2132
2125
  border-radius: 0;
2133
2126
  cursor: text;
2134
- padding: var(--qti-text-padding);
2127
+ padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
2135
2128
  background: unset;
2136
2129
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2137
2130
  outline: none;
@@ -2140,10 +2133,9 @@ qti-response-declaration {
2140
2133
 
2141
2134
  qti-extended-text-interaction {
2142
2135
  &::part(textarea) {
2143
- --qti-text-padding: 0.75rem;
2144
2136
  border-radius: 0;
2145
2137
  cursor: text;
2146
- padding: var(--qti-text-padding);
2138
+ padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
2147
2139
  background: unset;
2148
2140
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2149
2141
  outline: none;
@@ -2176,27 +2168,19 @@ qti-response-declaration {
2176
2168
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2177
2169
  }
2178
2170
 
2179
- --qti-drag-padding-top: 0.5rem;
2180
-
2181
- --qti-drag-padding-right: 1rem;
2182
-
2183
- --qti-drag-padding-bottom: 0.5rem;
2184
-
2185
- --qti-drag-padding-left: 1rem;
2186
-
2187
2171
  transition: transform 200ms ease-out,
2188
2172
  box-shadow 200ms ease-out,
2189
2173
  rotate 200ms ease-out;
2190
2174
 
2191
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2175
+ cursor: grab;
2192
2176
 
2193
- border-radius: var(--qti-border-radius);
2177
+ background-color: var(--qti-bg);
2194
2178
 
2195
- cursor: grab;
2179
+ padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
2196
2180
 
2197
- background-color: var(--qti-bg-white);
2181
+ border-radius: var(--qti-border-radius);
2198
2182
 
2199
- font-weight: var(--qti-font-weight-semibold);
2183
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2200
2184
 
2201
2185
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2202
2186
 
@@ -2225,10 +2209,10 @@ qti-response-declaration {
2225
2209
 
2226
2210
  &[disabled] {
2227
2211
  cursor: not-allowed;
2228
- background-color: var(--qti-bg-gray-100);
2229
- color: var(--qti-text-gray-500);
2212
+ background-color: var(--qti-disabled-bg);
2213
+ color: var(--qti-disabled-color);
2230
2214
  border-color: var(--qti-border-color);
2231
- outline: 4px solid var(--qti-bg-gray-100);
2215
+ outline: 4px solid var(--qti-disabled-bg);
2232
2216
  }
2233
2217
 
2234
2218
  &[active] {
@@ -2262,7 +2246,7 @@ qti-response-declaration {
2262
2246
 
2263
2247
  position: relative;
2264
2248
 
2265
- background-color: var(--qti-bg-white);
2249
+ background-color: var(--qti-bg);
2266
2250
 
2267
2251
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2268
2252
 
@@ -2289,17 +2273,17 @@ qti-response-declaration {
2289
2273
 
2290
2274
  &[aria-readonly='true'] {
2291
2275
  cursor: pointer;
2292
- background-color: var(--qti-bg-white);
2276
+ background-color: var(--qti-bg);
2293
2277
  outline: 0;
2294
2278
  border: none;
2295
2279
  }
2296
2280
 
2297
2281
  &[aria-disabled='true'] {
2298
2282
  cursor: not-allowed;
2299
- background-color: var(--qti-bg-gray-100);
2300
- color: var(--qti-text-gray-500);
2283
+ background-color: var(--qti-disabled-bg);
2284
+ color: var(--qti-disabled-color);
2301
2285
  border-color: var(--qti-border-color);
2302
- outline: 4px solid var(--qti-bg-gray-100);
2286
+ outline: 4px solid var(--qti-disabled-bg);
2303
2287
  }
2304
2288
 
2305
2289
  width: 100%;
@@ -2332,17 +2316,17 @@ qti-response-declaration {
2332
2316
 
2333
2317
  &[aria-readonly='true'] {
2334
2318
  cursor: pointer;
2335
- background-color: var(--qti-bg-white);
2319
+ background-color: var(--qti-bg);
2336
2320
  outline: 0;
2337
2321
  border: none;
2338
2322
  }
2339
2323
 
2340
2324
  &[aria-disabled='true'] {
2341
2325
  cursor: not-allowed;
2342
- background-color: var(--qti-bg-gray-100);
2343
- color: var(--qti-text-gray-500);
2326
+ background-color: var(--qti-disabled-bg);
2327
+ color: var(--qti-disabled-color);
2344
2328
  border-color: var(--qti-border-color);
2345
- outline: 4px solid var(--qti-bg-gray-100);
2329
+ outline: 4px solid var(--qti-disabled-bg);
2346
2330
  }
2347
2331
 
2348
2332
  width: 100%;
@@ -2400,17 +2384,17 @@ qti-response-declaration {
2400
2384
 
2401
2385
  &[aria-readonly='true'] {
2402
2386
  cursor: pointer;
2403
- background-color: var(--qti-bg-white);
2387
+ background-color: var(--qti-bg);
2404
2388
  outline: 0;
2405
2389
  border: none;
2406
2390
  }
2407
2391
 
2408
2392
  &[aria-disabled='true'] {
2409
2393
  cursor: not-allowed;
2410
- background-color: var(--qti-bg-gray-100);
2411
- color: var(--qti-text-gray-500);
2394
+ background-color: var(--qti-disabled-bg);
2395
+ color: var(--qti-disabled-color);
2412
2396
  border-color: var(--qti-border-color);
2413
- outline: 4px solid var(--qti-bg-gray-100);
2397
+ outline: 4px solid var(--qti-disabled-bg);
2414
2398
  }
2415
2399
  }
2416
2400
  }
@@ -2438,7 +2422,6 @@ qti-response-declaration {
2438
2422
 
2439
2423
  &:state(radio)::part(ch) {
2440
2424
  border-radius: 100%;
2441
- --qti-form-size: 1rem;
2442
2425
  display: grid;
2443
2426
  place-content: center;
2444
2427
  width: var(--qti-form-size);
@@ -2456,7 +2439,6 @@ qti-response-declaration {
2456
2439
  display: flex;
2457
2440
  place-items: center;
2458
2441
  border-radius: var(--qti-border-radius);
2459
- --qti-form-size: 1rem;
2460
2442
  display: grid;
2461
2443
  place-content: center;
2462
2444
  width: var(--qti-form-size);
@@ -2471,10 +2453,6 @@ qti-response-declaration {
2471
2453
  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");
2472
2454
  }
2473
2455
 
2474
- --qti-check-padding-vertical: 0.5rem;
2475
-
2476
- --qti-check-padding-horizontal: 0.5rem;
2477
-
2478
2456
  gap: 0.5rem;
2479
2457
 
2480
2458
  border-radius: var(--qti-border-radius);
@@ -2516,29 +2494,23 @@ qti-response-declaration {
2516
2494
 
2517
2495
  &[aria-readonly='true'] {
2518
2496
  cursor: pointer;
2519
- background-color: var(--qti-bg-white);
2497
+ background-color: var(--qti-bg);
2520
2498
  outline: 0;
2521
2499
  border: none;
2522
2500
  }
2523
2501
 
2524
2502
  &[aria-disabled='true'] {
2525
2503
  cursor: not-allowed;
2526
- background-color: var(--qti-bg-gray-100);
2527
- color: var(--qti-text-gray-500);
2504
+ background-color: var(--qti-disabled-bg);
2505
+ color: var(--qti-disabled-color);
2528
2506
  border-color: var(--qti-border-color);
2529
- outline: 4px solid var(--qti-bg-gray-100);
2507
+ outline: 4px solid var(--qti-disabled-bg);
2530
2508
  }
2531
2509
 
2532
- --qti-button-padding-vertical: 0.5rem;
2533
-
2534
- --qti-button-padding-horizontal: 0.5rem;
2535
-
2536
2510
  border-radius: var(--qti-border-radius);
2537
2511
 
2538
2512
  padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2539
2513
 
2540
- font-weight: var(--qti-font-weight-semibold);
2541
-
2542
2514
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2543
2515
 
2544
2516
  outline: none
@@ -2569,17 +2541,17 @@ qti-response-declaration {
2569
2541
 
2570
2542
  &[aria-readonly='true'] {
2571
2543
  cursor: pointer;
2572
- background-color: var(--qti-bg-white);
2544
+ background-color: var(--qti-bg);
2573
2545
  outline: 0;
2574
2546
  border: none;
2575
2547
  }
2576
2548
 
2577
2549
  &[aria-disabled='true'] {
2578
2550
  cursor: not-allowed;
2579
- background-color: var(--qti-bg-gray-100);
2580
- color: var(--qti-text-gray-500);
2551
+ background-color: var(--qti-disabled-bg);
2552
+ color: var(--qti-disabled-color);
2581
2553
  border-color: var(--qti-border-color);
2582
- outline: 4px solid var(--qti-bg-gray-100);
2554
+ outline: 4px solid var(--qti-disabled-bg);
2583
2555
  }
2584
2556
  }
2585
2557
  }
@@ -2596,14 +2568,6 @@ qti-response-declaration {
2596
2568
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2597
2569
  }
2598
2570
 
2599
- --qti-select-padding-top: 0.5rem;
2600
-
2601
- --qti-select-padding-right: 1.75rem;
2602
-
2603
- --qti-select-padding-bottom: 0.5rem;
2604
-
2605
- --qti-select-padding-left: 0.75rem;
2606
-
2607
2571
  border-radius: var(--qti-border-radius);
2608
2572
 
2609
2573
  position: relative;
@@ -2614,7 +2578,9 @@ qti-response-declaration {
2614
2578
 
2615
2579
  appearance: none;
2616
2580
 
2617
- padding: var(--qti-select-padding-top) var(--qti-select-padding-right) var(--qti-select-padding-bottom) var(--qti-select-padding-left);
2581
+ padding: var(--qti-select-padding-vertical) var(--qti-select-padding-horizontal);
2582
+
2583
+ padding-right: calc(var(--qti-select-padding-horizontal) + 1.5rem);
2618
2584
 
2619
2585
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2620
2586
 
@@ -2650,27 +2616,19 @@ qti-response-declaration {
2650
2616
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2651
2617
  }
2652
2618
 
2653
- --qti-drag-padding-top: 0.5rem;
2654
-
2655
- --qti-drag-padding-right: 1rem;
2656
-
2657
- --qti-drag-padding-bottom: 0.5rem;
2658
-
2659
- --qti-drag-padding-left: 1rem;
2660
-
2661
2619
  transition: transform 200ms ease-out,
2662
2620
  box-shadow 200ms ease-out,
2663
2621
  rotate 200ms ease-out;
2664
2622
 
2665
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2623
+ cursor: grab;
2666
2624
 
2667
- border-radius: var(--qti-border-radius);
2625
+ background-color: var(--qti-bg);
2668
2626
 
2669
- cursor: grab;
2627
+ padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
2670
2628
 
2671
- background-color: var(--qti-bg-white);
2629
+ border-radius: var(--qti-border-radius);
2672
2630
 
2673
- font-weight: var(--qti-font-weight-semibold);
2631
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2674
2632
 
2675
2633
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2676
2634
 
@@ -2726,10 +2684,10 @@ qti-response-declaration {
2726
2684
  &[disabled] {
2727
2685
  &::part(dropslot) {
2728
2686
  cursor: not-allowed;
2729
- background-color: var(--qti-bg-gray-100);
2730
- color: var(--qti-text-gray-500);
2687
+ background-color: var(--qti-disabled-bg);
2688
+ color: var(--qti-disabled-color);
2731
2689
  border-color: var(--qti-border-color);
2732
- outline: 4px solid var(--qti-bg-gray-100);
2690
+ outline: 4px solid var(--qti-disabled-bg);
2733
2691
  }
2734
2692
  }
2735
2693
 
@@ -2763,7 +2721,7 @@ qti-response-declaration {
2763
2721
  center no-repeat;
2764
2722
  border-radius: var(--qti-drop-border-radius);
2765
2723
  position: relative;
2766
- background-color: var(--qti-bg-white);
2724
+ background-color: var(--qti-bg);
2767
2725
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2768
2726
  outline: none;
2769
2727
  }
@@ -2788,27 +2746,19 @@ qti-response-declaration {
2788
2746
 
2789
2747
  flex-basis: fit-content;
2790
2748
 
2791
- --qti-drag-padding-top: 0.5rem;
2792
-
2793
- --qti-drag-padding-right: 1rem;
2794
-
2795
- --qti-drag-padding-bottom: 0.5rem;
2796
-
2797
- --qti-drag-padding-left: 1rem;
2798
-
2799
2749
  transition: transform 200ms ease-out,
2800
2750
  box-shadow 200ms ease-out,
2801
2751
  rotate 200ms ease-out;
2802
2752
 
2803
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2753
+ cursor: grab;
2804
2754
 
2805
- border-radius: var(--qti-border-radius);
2755
+ background-color: var(--qti-bg);
2806
2756
 
2807
- cursor: grab;
2757
+ padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
2808
2758
 
2809
- background-color: var(--qti-bg-white);
2759
+ border-radius: var(--qti-border-radius);
2810
2760
 
2811
- font-weight: var(--qti-font-weight-semibold);
2761
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2812
2762
 
2813
2763
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2814
2764
 
@@ -2851,27 +2801,19 @@ qti-response-declaration {
2851
2801
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2852
2802
  }
2853
2803
 
2854
- --qti-drag-padding-top: 0.5rem;
2855
-
2856
- --qti-drag-padding-right: 1rem;
2857
-
2858
- --qti-drag-padding-bottom: 0.5rem;
2859
-
2860
- --qti-drag-padding-left: 1rem;
2861
-
2862
2804
  transition: transform 200ms ease-out,
2863
2805
  box-shadow 200ms ease-out,
2864
2806
  rotate 200ms ease-out;
2865
2807
 
2866
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2808
+ cursor: grab;
2867
2809
 
2868
- border-radius: var(--qti-border-radius);
2810
+ background-color: var(--qti-bg);
2869
2811
 
2870
- cursor: grab;
2812
+ padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
2871
2813
 
2872
- background-color: var(--qti-bg-white);
2814
+ border-radius: var(--qti-border-radius);
2873
2815
 
2874
- font-weight: var(--qti-font-weight-semibold);
2816
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2875
2817
 
2876
2818
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2877
2819
 
@@ -2930,7 +2872,7 @@ qti-response-declaration {
2930
2872
  center no-repeat;
2931
2873
  border-radius: var(--qti-drop-border-radius);
2932
2874
  position: relative;
2933
- background-color: var(--qti-bg-white);
2875
+ background-color: var(--qti-bg);
2934
2876
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2935
2877
  outline: none;
2936
2878
  }
@@ -2960,27 +2902,19 @@ qti-response-declaration {
2960
2902
  0 4px 8px rgb(0 0 0 / 10%);
2961
2903
  }
2962
2904
 
2963
- --qti-drag-padding-top: 0.5rem;
2964
-
2965
- --qti-drag-padding-right: 1rem;
2966
-
2967
- --qti-drag-padding-bottom: 0.5rem;
2968
-
2969
- --qti-drag-padding-left: 1rem;
2970
-
2971
2905
  transition: transform 200ms ease-out,
2972
2906
  box-shadow 200ms ease-out,
2973
2907
  rotate 200ms ease-out;
2974
2908
 
2975
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2909
+ cursor: grab;
2976
2910
 
2977
- border-radius: var(--qti-border-radius);
2911
+ background-color: var(--qti-bg);
2978
2912
 
2979
- cursor: grab;
2913
+ padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
2980
2914
 
2981
- background-color: var(--qti-bg-white);
2915
+ border-radius: var(--qti-border-radius);
2982
2916
 
2983
- font-weight: var(--qti-font-weight-semibold);
2917
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2984
2918
 
2985
2919
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2986
2920
 
@@ -3020,7 +2954,7 @@ qti-response-declaration {
3020
2954
  center no-repeat;
3021
2955
  border-radius: var(--qti-drop-border-radius);
3022
2956
  position: relative;
3023
- background-color: var(--qti-bg-white);
2957
+ background-color: var(--qti-bg);
3024
2958
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3025
2959
  outline: none;
3026
2960
  }
@@ -3058,17 +2992,17 @@ qti-response-declaration {
3058
2992
 
3059
2993
  &[aria-readonly='true'] {
3060
2994
  cursor: pointer;
3061
- background-color: var(--qti-bg-white);
2995
+ background-color: var(--qti-bg);
3062
2996
  outline: 0;
3063
2997
  border: none;
3064
2998
  }
3065
2999
 
3066
3000
  &[aria-disabled='true'] {
3067
3001
  cursor: not-allowed;
3068
- background-color: var(--qti-bg-gray-100);
3069
- color: var(--qti-text-gray-500);
3002
+ background-color: var(--qti-disabled-bg);
3003
+ color: var(--qti-disabled-color);
3070
3004
  border-color: var(--qti-border-color);
3071
- outline: 4px solid var(--qti-bg-gray-100);
3005
+ outline: 4px solid var(--qti-disabled-bg);
3072
3006
  }
3073
3007
 
3074
3008
  &[aria-ordervalue] {
@@ -3116,17 +3050,17 @@ qti-response-declaration {
3116
3050
 
3117
3051
  &[aria-readonly='true'] {
3118
3052
  cursor: pointer;
3119
- background-color: var(--qti-bg-white);
3053
+ background-color: var(--qti-bg);
3120
3054
  outline: 0;
3121
3055
  border: none;
3122
3056
  }
3123
3057
 
3124
3058
  &[aria-disabled='true'] {
3125
3059
  cursor: not-allowed;
3126
- background-color: var(--qti-bg-gray-100);
3127
- color: var(--qti-text-gray-500);
3060
+ background-color: var(--qti-disabled-bg);
3061
+ color: var(--qti-disabled-color);
3128
3062
  border-color: var(--qti-border-color);
3129
- outline: 4px solid var(--qti-bg-gray-100);
3063
+ outline: 4px solid var(--qti-disabled-bg);
3130
3064
  }
3131
3065
 
3132
3066
  width: 100%;
@@ -3159,17 +3093,17 @@ qti-response-declaration {
3159
3093
 
3160
3094
  &[aria-readonly='true'] {
3161
3095
  cursor: pointer;
3162
- background-color: var(--qti-bg-white);
3096
+ background-color: var(--qti-bg);
3163
3097
  outline: 0;
3164
3098
  border: none;
3165
3099
  }
3166
3100
 
3167
3101
  &[aria-disabled='true'] {
3168
3102
  cursor: not-allowed;
3169
- background-color: var(--qti-bg-gray-100);
3170
- color: var(--qti-text-gray-500);
3103
+ background-color: var(--qti-disabled-bg);
3104
+ color: var(--qti-disabled-color);
3171
3105
  border-color: var(--qti-border-color);
3172
- outline: 4px solid var(--qti-bg-gray-100);
3106
+ outline: 4px solid var(--qti-disabled-bg);
3173
3107
  }
3174
3108
 
3175
3109
  width: 100%;
@@ -3280,8 +3214,6 @@ qti-response-declaration {
3280
3214
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
3281
3215
  }
3282
3216
 
3283
- --qti-point-size: 1.5rem;
3284
-
3285
3217
  border-radius: 100%;
3286
3218
 
3287
3219
  width: var(--qti-point-size);