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

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 (2) hide show
  1. package/dist/item.css +184 -219
  2. package/package.json +1 -1
package/dist/item.css CHANGED
@@ -2,14 +2,14 @@
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
9
  /* Background colors */
10
- --qti-bg-white: white;
10
+ --qti-bg: white;
11
11
  --qti-hover-bg: #f9fafb;
12
-
12
+
13
13
  /* Disabled colors */
14
14
  --qti-disabled-bg: #f3f4f6;
15
15
  --qti-disabled-color: #45484f;
@@ -19,7 +19,7 @@
19
19
  --qti-border-style: solid;
20
20
  --qti-border-color: #c6cad0;
21
21
  --qti-border-radius: 0.3rem;
22
- --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness) );
22
+ --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
23
23
 
24
24
  /* Typography */
25
25
  --qti-font-weight-semibold: 600;
@@ -27,6 +27,41 @@
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,11 +113,9 @@
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);
@@ -92,40 +124,33 @@
92
124
  outline: none;
93
125
  }
94
126
 
95
- /* apply .select for the select dropdown element */
127
+ /* Apply .select for the select dropdown element */
96
128
 
97
129
  .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
130
 
103
131
  border-radius: var(--qti-border-radius);
104
132
  position: relative;
105
133
  -webkit-appearance: none;
106
134
  -moz-appearance: none;
107
135
  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;
136
+ padding: var(--qti-select-padding-vertical) var(--qti-select-padding-horizontal);
137
+ 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")
138
+ no-repeat center right 6px;
113
139
  }
114
140
 
115
- /* apply .text for the input text and textarea */
141
+ /* Apply .text for the input text and textarea */
116
142
 
117
143
  .text {
118
- --qti-text-padding: 0.75rem; /* Equal padding on all sides */
119
144
 
120
145
  border-radius: 0;
121
146
  cursor: text;
122
- padding: var(--qti-text-padding);
147
+ padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
123
148
  background: unset;
124
149
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
125
150
  outline: none;
126
151
  }
127
152
 
128
- /* apply .spot for hotspot shapes */
153
+ /* Apply .spot for hotspot shapes */
129
154
 
130
155
  .spot {
131
156
 
@@ -137,13 +162,12 @@
137
162
  outline: none;
138
163
  }
139
164
 
140
- /* apply .point for circular small hotspots */
165
+ /* Apply .point for circular small hotspots */
141
166
 
142
167
  .point {
143
- --qti-point-size: 1.5rem;
144
168
 
145
169
  border-radius: 100%;
146
- width: var(--qti-point-size); /* w-6 */
170
+ width: var(--qti-point-size);
147
171
  height: var(--qti-point-size);
148
172
  background-color: transparent;
149
173
  padding: 0;
@@ -151,38 +175,26 @@
151
175
  outline: none;
152
176
  }
153
177
 
154
- /* apply .drag for draggable elements */
178
+ /* Apply .drag for draggable elements */
155
179
 
156
180
  .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
181
 
162
182
  transition:
163
183
  transform 200ms ease-out,
164
184
  box-shadow 200ms ease-out,
165
185
  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
186
  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(
187
+ background-color: var(--qti-bg);
188
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem) !important; /* 1.5rem for the drag */ border-radius: var(--qti-border-radius); padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal); font-weight: var(--qti-font-weight-semibold); border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background-image: radial-gradient(
174
189
  circle at center,
175
190
  rgb(0 0 0 / 10%) 0,
176
191
  rgb(0 0 0 / 20%) 2px,
177
192
  rgb(255 255 255 / 0%) 2px,
178
193
  rgb(255 255 255 / 0%) 100%
179
- );
180
- background-repeat: repeat-y;
181
- background-position: left center;
182
- background-size: 14px 8px;
194
+ ); background-repeat: repeat-y; background-position: left center; background-size: 14px 8px;
183
195
  }
184
196
 
185
- /* apply .dragging for the dragging state of a draggable element */
197
+ /* Apply .dragging for the dragging state of a draggable element */
186
198
 
187
199
  .dragging {
188
200
  pointer-events: none;
@@ -192,7 +204,7 @@
192
204
  0 4px 8px rgb(0 0 0 / 10%);
193
205
  }
194
206
 
195
- /* apply .drop for an element where you can drop the draggable */
207
+ /* Apply .drop for an element where you can drop the draggable */
196
208
 
197
209
  .drop {
198
210
 
@@ -200,61 +212,55 @@
200
212
  center no-repeat;
201
213
  border-radius: var(--qti-drop-border-radius);
202
214
  position: relative;
203
- background-color: var(--qti-bg-white);
215
+ background-color: var(--qti-bg);
204
216
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
205
217
  outline: none;
206
218
  }
207
219
 
208
- /* apply .dropping for an indicator where you can drop the draggable */
220
+ /* Apply .dropping for an indicator where you can drop the draggable */
209
221
 
210
222
  .dropping {
211
223
  background-color: var(--qti-bg-active);
212
224
  }
213
225
 
214
- /* apply .order for a small circular button */
226
+ /* Apply .order for a small circular button */
215
227
 
216
228
  .order {
217
- --qti-order-size: 1.5rem;
218
229
 
219
230
  display: grid;
220
231
  place-content: center;
221
232
 
222
233
  /* background-color: var(--qti-bg-active); */
223
234
  border-radius: 100%;
224
- width: var(--qti-order-size); /* w-6 */
235
+ width: var(--qti-order-size);
225
236
  height: var(--qti-order-size);
226
237
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
227
238
  outline: none;
228
239
  }
229
240
 
230
- /* apply .check-size for radio and checkbox size */
241
+ /* Apply .check-size for radio and checkbox size */
231
242
 
232
243
  .check-size {
233
244
  width: calc(var(--qti-form-size) - 6px);
234
245
  height: calc(var(--qti-form-size) - 6px);
235
246
  }
236
247
 
237
- /* apply .check for checkbox */
248
+ /* Apply .check for checkbox */
238
249
 
239
250
  .check {
240
- --qti-check-padding-vertical: 0.5rem;
241
- --qti-check-padding-horizontal: 0.5rem;
242
-
243
251
  gap: 0.5rem;
244
252
  border-radius: var(--qti-border-radius);
245
- padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal); /* Padding shorthand */
253
+ padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal);
246
254
  outline: none;
247
255
  cursor: pointer;
248
256
  }
249
257
 
250
- /* apply .check-radio for outer circle of the radio buttons */
258
+ /* Apply .check-radio for outer circle of the radio buttons */
251
259
 
252
260
  .check-radio {
253
261
 
254
262
  border-radius: 100%;
255
263
 
256
- --qti-form-size: 1rem;
257
-
258
264
  display: grid;
259
265
 
260
266
  place-content: center;
@@ -268,21 +274,20 @@
268
274
  outline: none;
269
275
  }
270
276
 
271
- /* apply .check-radio-checked for the inner checked radio */
277
+ /* Apply .check-radio-checked for the inner checked radio */
272
278
 
273
279
  .check-radio-checked {
274
280
  background-color: var(--qti-border-active);
275
281
  border-radius: 100%;
276
282
  }
277
283
 
278
- /* apply .check-checkbox for outer square of the checkbox */
284
+ /* Apply .check-checkbox for outer square of the checkbox */
279
285
 
280
286
  .check-checkbox {
281
287
 
282
288
  display: flex;
283
289
  place-items: center;
284
290
  border-radius: var(--qti-border-radius);
285
- --qti-form-size: 1rem;
286
291
  display: grid;
287
292
  place-content: center;
288
293
  width: var(--qti-form-size);
@@ -291,7 +296,7 @@
291
296
  outline: none;
292
297
  }
293
298
 
294
- /* apply .check-checkbox-checked for the inner checkmark */
299
+ /* Apply .check-checkbox-checked for the inner checkmark */
295
300
 
296
301
  .check-checkbox-checked {
297
302
  background-color: var(--qti-border-active);
@@ -299,42 +304,42 @@
299
304
  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
305
  }
301
306
 
302
- /* apply .hov for hover state */
307
+ /* Apply .hov for hover state */
303
308
 
304
309
  .hov {
305
310
  background-color: var(--qti-hover-bg);
306
311
  }
307
312
 
308
- /* apply .foc for focus state */
313
+ /* Apply .foc for focus state */
309
314
 
310
315
  .foc {
311
316
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
312
317
  }
313
318
 
314
- /* apply .act for active state */
319
+ /* Apply .act for active state */
315
320
 
316
321
  .act {
317
- border-color: var(--qti-border-active); /* border-active */
322
+ border-color: var(--qti-border-active);
318
323
  background-color: var(--qti-bg-active);
319
324
  }
320
325
 
321
- /* apply .rdo for readonly state */
326
+ /* Apply .rdo for readonly state */
322
327
 
323
328
  .rdo {
324
329
  cursor: pointer;
325
- background-color: var(--qti-bg-white);
330
+ background-color: var(--qti-bg);
326
331
  outline: 0;
327
332
  border: none;
328
333
  }
329
334
 
330
- /* apply .dis for disabled state */
335
+ /* Apply .dis for disabled state */
331
336
 
332
337
  .dis {
333
338
  cursor: not-allowed;
334
- background-color: var(--qti-bg-gray-100);
335
- color: var(--qti-text-gray-500);
339
+ background-color: var(--qti-disabled-bg);
340
+ color: var(--qti-disabled-color);
336
341
  border-color: var(--qti-border-color);
337
- outline: 4px solid var(--qti-bg-gray-100);
342
+ outline: 4px solid var(--qti-disabled-bg);
338
343
  }
339
344
 
340
345
  /* base */
@@ -1979,7 +1984,7 @@ qti-response-declaration {
1979
1984
  &:state(readonly),
1980
1985
  &[aria-readonly='true'] {
1981
1986
  cursor: pointer;
1982
- background-color: var(--qti-bg-white);
1987
+ background-color: var(--qti-bg);
1983
1988
  outline: 0;
1984
1989
  border: none;
1985
1990
  }
@@ -1987,16 +1992,12 @@ qti-response-declaration {
1987
1992
  &:state(disabled),
1988
1993
  &[aria-disabled='true'] {
1989
1994
  cursor: not-allowed;
1990
- background-color: var(--qti-bg-gray-100);
1991
- color: var(--qti-text-gray-500);
1995
+ background-color: var(--qti-disabled-bg);
1996
+ color: var(--qti-disabled-color);
1992
1997
  border-color: var(--qti-border-color);
1993
- outline: 4px solid var(--qti-bg-gray-100);
1998
+ outline: 4px solid var(--qti-disabled-bg);
1994
1999
  }
1995
2000
 
1996
- --qti-button-padding-vertical: 0.5rem;
1997
-
1998
- --qti-button-padding-horizontal: 0.5rem;
1999
-
2000
2001
  border-radius: var(--qti-border-radius);
2001
2002
 
2002
2003
  padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
@@ -2029,7 +2030,7 @@ qti-response-declaration {
2029
2030
  &:state(readonly),
2030
2031
  &[aria-readonly='true'] {
2031
2032
  cursor: pointer;
2032
- background-color: var(--qti-bg-white);
2033
+ background-color: var(--qti-bg);
2033
2034
  outline: 0;
2034
2035
  border: none;
2035
2036
  }
@@ -2037,10 +2038,10 @@ qti-response-declaration {
2037
2038
  &:state(disabled),
2038
2039
  &[aria-disabled='true'] {
2039
2040
  cursor: not-allowed;
2040
- background-color: var(--qti-bg-gray-100);
2041
- color: var(--qti-text-gray-500);
2041
+ background-color: var(--qti-disabled-bg);
2042
+ color: var(--qti-disabled-color);
2042
2043
  border-color: var(--qti-border-color);
2043
- outline: 4px solid var(--qti-bg-gray-100);
2044
+ outline: 4px solid var(--qti-disabled-bg);
2044
2045
  }
2045
2046
 
2046
2047
  &::part(cha) {
@@ -2050,7 +2051,6 @@ qti-response-declaration {
2050
2051
 
2051
2052
  &:state(radio)::part(ch) {
2052
2053
  border-radius: 100%;
2053
- --qti-form-size: 1rem;
2054
2054
  display: grid;
2055
2055
  place-content: center;
2056
2056
  width: var(--qti-form-size);
@@ -2068,7 +2068,6 @@ qti-response-declaration {
2068
2068
  display: flex;
2069
2069
  place-items: center;
2070
2070
  border-radius: var(--qti-border-radius);
2071
- --qti-form-size: 1rem;
2072
2071
  display: grid;
2073
2072
  place-content: center;
2074
2073
  width: var(--qti-form-size);
@@ -2083,10 +2082,6 @@ qti-response-declaration {
2083
2082
  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
2083
  }
2085
2084
 
2086
- --qti-check-padding-vertical: 0.5rem;
2087
-
2088
- --qti-check-padding-horizontal: 0.5rem;
2089
-
2090
2085
  gap: 0.5rem;
2091
2086
 
2092
2087
  border-radius: var(--qti-border-radius);
@@ -2128,10 +2123,9 @@ qti-response-declaration {
2128
2123
  }
2129
2124
 
2130
2125
  &::part(input) {
2131
- --qti-text-padding: 0.75rem;
2132
2126
  border-radius: 0;
2133
2127
  cursor: text;
2134
- padding: var(--qti-text-padding);
2128
+ padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
2135
2129
  background: unset;
2136
2130
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2137
2131
  outline: none;
@@ -2140,10 +2134,9 @@ qti-response-declaration {
2140
2134
 
2141
2135
  qti-extended-text-interaction {
2142
2136
  &::part(textarea) {
2143
- --qti-text-padding: 0.75rem;
2144
2137
  border-radius: 0;
2145
2138
  cursor: text;
2146
- padding: var(--qti-text-padding);
2139
+ padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
2147
2140
  background: unset;
2148
2141
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2149
2142
  outline: none;
@@ -2176,25 +2169,19 @@ qti-response-declaration {
2176
2169
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2177
2170
  }
2178
2171
 
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
2172
  transition: transform 200ms ease-out,
2188
2173
  box-shadow 200ms ease-out,
2189
2174
  rotate 200ms ease-out;
2190
2175
 
2191
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2176
+ cursor: grab;
2192
2177
 
2193
- border-radius: var(--qti-border-radius);
2178
+ background-color: var(--qti-bg);
2194
2179
 
2195
- cursor: grab;
2180
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2196
2181
 
2197
- background-color: var(--qti-bg-white);
2182
+ border-radius: var(--qti-border-radius);
2183
+
2184
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2198
2185
 
2199
2186
  font-weight: var(--qti-font-weight-semibold);
2200
2187
 
@@ -2202,6 +2189,10 @@ qti-response-declaration {
2202
2189
 
2203
2190
  outline: none;
2204
2191
 
2192
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2193
+
2194
+ outline: none;
2195
+
2205
2196
  background-image: radial-gradient(
2206
2197
  circle at center,
2207
2198
  rgb(0 0 0 / 10%) 0,
@@ -2225,10 +2216,10 @@ qti-response-declaration {
2225
2216
 
2226
2217
  &[disabled] {
2227
2218
  cursor: not-allowed;
2228
- background-color: var(--qti-bg-gray-100);
2229
- color: var(--qti-text-gray-500);
2219
+ background-color: var(--qti-disabled-bg);
2220
+ color: var(--qti-disabled-color);
2230
2221
  border-color: var(--qti-border-color);
2231
- outline: 4px solid var(--qti-bg-gray-100);
2222
+ outline: 4px solid var(--qti-disabled-bg);
2232
2223
  }
2233
2224
 
2234
2225
  &[active] {
@@ -2262,7 +2253,7 @@ qti-response-declaration {
2262
2253
 
2263
2254
  position: relative;
2264
2255
 
2265
- background-color: var(--qti-bg-white);
2256
+ background-color: var(--qti-bg);
2266
2257
 
2267
2258
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2268
2259
 
@@ -2289,17 +2280,17 @@ qti-response-declaration {
2289
2280
 
2290
2281
  &[aria-readonly='true'] {
2291
2282
  cursor: pointer;
2292
- background-color: var(--qti-bg-white);
2283
+ background-color: var(--qti-bg);
2293
2284
  outline: 0;
2294
2285
  border: none;
2295
2286
  }
2296
2287
 
2297
2288
  &[aria-disabled='true'] {
2298
2289
  cursor: not-allowed;
2299
- background-color: var(--qti-bg-gray-100);
2300
- color: var(--qti-text-gray-500);
2290
+ background-color: var(--qti-disabled-bg);
2291
+ color: var(--qti-disabled-color);
2301
2292
  border-color: var(--qti-border-color);
2302
- outline: 4px solid var(--qti-bg-gray-100);
2293
+ outline: 4px solid var(--qti-disabled-bg);
2303
2294
  }
2304
2295
 
2305
2296
  width: 100%;
@@ -2332,17 +2323,17 @@ qti-response-declaration {
2332
2323
 
2333
2324
  &[aria-readonly='true'] {
2334
2325
  cursor: pointer;
2335
- background-color: var(--qti-bg-white);
2326
+ background-color: var(--qti-bg);
2336
2327
  outline: 0;
2337
2328
  border: none;
2338
2329
  }
2339
2330
 
2340
2331
  &[aria-disabled='true'] {
2341
2332
  cursor: not-allowed;
2342
- background-color: var(--qti-bg-gray-100);
2343
- color: var(--qti-text-gray-500);
2333
+ background-color: var(--qti-disabled-bg);
2334
+ color: var(--qti-disabled-color);
2344
2335
  border-color: var(--qti-border-color);
2345
- outline: 4px solid var(--qti-bg-gray-100);
2336
+ outline: 4px solid var(--qti-disabled-bg);
2346
2337
  }
2347
2338
 
2348
2339
  width: 100%;
@@ -2400,17 +2391,17 @@ qti-response-declaration {
2400
2391
 
2401
2392
  &[aria-readonly='true'] {
2402
2393
  cursor: pointer;
2403
- background-color: var(--qti-bg-white);
2394
+ background-color: var(--qti-bg);
2404
2395
  outline: 0;
2405
2396
  border: none;
2406
2397
  }
2407
2398
 
2408
2399
  &[aria-disabled='true'] {
2409
2400
  cursor: not-allowed;
2410
- background-color: var(--qti-bg-gray-100);
2411
- color: var(--qti-text-gray-500);
2401
+ background-color: var(--qti-disabled-bg);
2402
+ color: var(--qti-disabled-color);
2412
2403
  border-color: var(--qti-border-color);
2413
- outline: 4px solid var(--qti-bg-gray-100);
2404
+ outline: 4px solid var(--qti-disabled-bg);
2414
2405
  }
2415
2406
  }
2416
2407
  }
@@ -2438,7 +2429,6 @@ qti-response-declaration {
2438
2429
 
2439
2430
  &:state(radio)::part(ch) {
2440
2431
  border-radius: 100%;
2441
- --qti-form-size: 1rem;
2442
2432
  display: grid;
2443
2433
  place-content: center;
2444
2434
  width: var(--qti-form-size);
@@ -2456,7 +2446,6 @@ qti-response-declaration {
2456
2446
  display: flex;
2457
2447
  place-items: center;
2458
2448
  border-radius: var(--qti-border-radius);
2459
- --qti-form-size: 1rem;
2460
2449
  display: grid;
2461
2450
  place-content: center;
2462
2451
  width: var(--qti-form-size);
@@ -2471,10 +2460,6 @@ qti-response-declaration {
2471
2460
  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
2461
  }
2473
2462
 
2474
- --qti-check-padding-vertical: 0.5rem;
2475
-
2476
- --qti-check-padding-horizontal: 0.5rem;
2477
-
2478
2463
  gap: 0.5rem;
2479
2464
 
2480
2465
  border-radius: var(--qti-border-radius);
@@ -2516,23 +2501,19 @@ qti-response-declaration {
2516
2501
 
2517
2502
  &[aria-readonly='true'] {
2518
2503
  cursor: pointer;
2519
- background-color: var(--qti-bg-white);
2504
+ background-color: var(--qti-bg);
2520
2505
  outline: 0;
2521
2506
  border: none;
2522
2507
  }
2523
2508
 
2524
2509
  &[aria-disabled='true'] {
2525
2510
  cursor: not-allowed;
2526
- background-color: var(--qti-bg-gray-100);
2527
- color: var(--qti-text-gray-500);
2511
+ background-color: var(--qti-disabled-bg);
2512
+ color: var(--qti-disabled-color);
2528
2513
  border-color: var(--qti-border-color);
2529
- outline: 4px solid var(--qti-bg-gray-100);
2514
+ outline: 4px solid var(--qti-disabled-bg);
2530
2515
  }
2531
2516
 
2532
- --qti-button-padding-vertical: 0.5rem;
2533
-
2534
- --qti-button-padding-horizontal: 0.5rem;
2535
-
2536
2517
  border-radius: var(--qti-border-radius);
2537
2518
 
2538
2519
  padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
@@ -2569,17 +2550,17 @@ qti-response-declaration {
2569
2550
 
2570
2551
  &[aria-readonly='true'] {
2571
2552
  cursor: pointer;
2572
- background-color: var(--qti-bg-white);
2553
+ background-color: var(--qti-bg);
2573
2554
  outline: 0;
2574
2555
  border: none;
2575
2556
  }
2576
2557
 
2577
2558
  &[aria-disabled='true'] {
2578
2559
  cursor: not-allowed;
2579
- background-color: var(--qti-bg-gray-100);
2580
- color: var(--qti-text-gray-500);
2560
+ background-color: var(--qti-disabled-bg);
2561
+ color: var(--qti-disabled-color);
2581
2562
  border-color: var(--qti-border-color);
2582
- outline: 4px solid var(--qti-bg-gray-100);
2563
+ outline: 4px solid var(--qti-disabled-bg);
2583
2564
  }
2584
2565
  }
2585
2566
  }
@@ -2596,14 +2577,6 @@ qti-response-declaration {
2596
2577
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2597
2578
  }
2598
2579
 
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
2580
  border-radius: var(--qti-border-radius);
2608
2581
 
2609
2582
  position: relative;
@@ -2614,7 +2587,9 @@ qti-response-declaration {
2614
2587
 
2615
2588
  appearance: none;
2616
2589
 
2617
- padding: var(--qti-select-padding-top) var(--qti-select-padding-right) var(--qti-select-padding-bottom) var(--qti-select-padding-left);
2590
+ padding: var(--qti-select-padding-vertical) var(--qti-select-padding-horizontal);
2591
+
2592
+ padding-right: calc(var(--qti-select-padding-horizontal) + 1.5rem);
2618
2593
 
2619
2594
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2620
2595
 
@@ -2650,25 +2625,19 @@ qti-response-declaration {
2650
2625
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2651
2626
  }
2652
2627
 
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
2628
  transition: transform 200ms ease-out,
2662
2629
  box-shadow 200ms ease-out,
2663
2630
  rotate 200ms ease-out;
2664
2631
 
2665
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2632
+ cursor: grab;
2666
2633
 
2667
- border-radius: var(--qti-border-radius);
2634
+ background-color: var(--qti-bg);
2668
2635
 
2669
- cursor: grab;
2636
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2637
+
2638
+ border-radius: var(--qti-border-radius);
2670
2639
 
2671
- background-color: var(--qti-bg-white);
2640
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2672
2641
 
2673
2642
  font-weight: var(--qti-font-weight-semibold);
2674
2643
 
@@ -2676,6 +2645,10 @@ qti-response-declaration {
2676
2645
 
2677
2646
  outline: none;
2678
2647
 
2648
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2649
+
2650
+ outline: none;
2651
+
2679
2652
  background-image: radial-gradient(
2680
2653
  circle at center,
2681
2654
  rgb(0 0 0 / 10%) 0,
@@ -2726,10 +2699,10 @@ qti-response-declaration {
2726
2699
  &[disabled] {
2727
2700
  &::part(dropslot) {
2728
2701
  cursor: not-allowed;
2729
- background-color: var(--qti-bg-gray-100);
2730
- color: var(--qti-text-gray-500);
2702
+ background-color: var(--qti-disabled-bg);
2703
+ color: var(--qti-disabled-color);
2731
2704
  border-color: var(--qti-border-color);
2732
- outline: 4px solid var(--qti-bg-gray-100);
2705
+ outline: 4px solid var(--qti-disabled-bg);
2733
2706
  }
2734
2707
  }
2735
2708
 
@@ -2763,7 +2736,7 @@ qti-response-declaration {
2763
2736
  center no-repeat;
2764
2737
  border-radius: var(--qti-drop-border-radius);
2765
2738
  position: relative;
2766
- background-color: var(--qti-bg-white);
2739
+ background-color: var(--qti-bg);
2767
2740
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2768
2741
  outline: none;
2769
2742
  }
@@ -2788,25 +2761,19 @@ qti-response-declaration {
2788
2761
 
2789
2762
  flex-basis: fit-content;
2790
2763
 
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
2764
  transition: transform 200ms ease-out,
2800
2765
  box-shadow 200ms ease-out,
2801
2766
  rotate 200ms ease-out;
2802
2767
 
2803
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2768
+ cursor: grab;
2804
2769
 
2805
- border-radius: var(--qti-border-radius);
2770
+ background-color: var(--qti-bg);
2806
2771
 
2807
- cursor: grab;
2772
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2773
+
2774
+ border-radius: var(--qti-border-radius);
2808
2775
 
2809
- background-color: var(--qti-bg-white);
2776
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2810
2777
 
2811
2778
  font-weight: var(--qti-font-weight-semibold);
2812
2779
 
@@ -2814,6 +2781,10 @@ qti-response-declaration {
2814
2781
 
2815
2782
  outline: none;
2816
2783
 
2784
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2785
+
2786
+ outline: none;
2787
+
2817
2788
  background-image: radial-gradient(
2818
2789
  circle at center,
2819
2790
  rgb(0 0 0 / 10%) 0,
@@ -2851,25 +2822,19 @@ qti-response-declaration {
2851
2822
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2852
2823
  }
2853
2824
 
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
2825
  transition: transform 200ms ease-out,
2863
2826
  box-shadow 200ms ease-out,
2864
2827
  rotate 200ms ease-out;
2865
2828
 
2866
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2829
+ cursor: grab;
2867
2830
 
2868
- border-radius: var(--qti-border-radius);
2831
+ background-color: var(--qti-bg);
2869
2832
 
2870
- cursor: grab;
2833
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2871
2834
 
2872
- background-color: var(--qti-bg-white);
2835
+ border-radius: var(--qti-border-radius);
2836
+
2837
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2873
2838
 
2874
2839
  font-weight: var(--qti-font-weight-semibold);
2875
2840
 
@@ -2877,6 +2842,10 @@ qti-response-declaration {
2877
2842
 
2878
2843
  outline: none;
2879
2844
 
2845
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2846
+
2847
+ outline: none;
2848
+
2880
2849
  background-image: radial-gradient(
2881
2850
  circle at center,
2882
2851
  rgb(0 0 0 / 10%) 0,
@@ -2930,7 +2899,7 @@ qti-response-declaration {
2930
2899
  center no-repeat;
2931
2900
  border-radius: var(--qti-drop-border-radius);
2932
2901
  position: relative;
2933
- background-color: var(--qti-bg-white);
2902
+ background-color: var(--qti-bg);
2934
2903
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2935
2904
  outline: none;
2936
2905
  }
@@ -2960,25 +2929,19 @@ qti-response-declaration {
2960
2929
  0 4px 8px rgb(0 0 0 / 10%);
2961
2930
  }
2962
2931
 
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
2932
  transition: transform 200ms ease-out,
2972
2933
  box-shadow 200ms ease-out,
2973
2934
  rotate 200ms ease-out;
2974
2935
 
2975
- padding: var(--qti-drag-padding-top) var(--qti-drag-padding-right) var(--qti-drag-padding-bottom) var(--qti-drag-padding-left);
2936
+ cursor: grab;
2976
2937
 
2977
- border-radius: var(--qti-border-radius);
2938
+ background-color: var(--qti-bg);
2978
2939
 
2979
- cursor: grab;
2940
+ padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2980
2941
 
2981
- background-color: var(--qti-bg-white);
2942
+ border-radius: var(--qti-border-radius);
2943
+
2944
+ padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2982
2945
 
2983
2946
  font-weight: var(--qti-font-weight-semibold);
2984
2947
 
@@ -2986,6 +2949,10 @@ qti-response-declaration {
2986
2949
 
2987
2950
  outline: none;
2988
2951
 
2952
+ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2953
+
2954
+ outline: none;
2955
+
2989
2956
  background-image: radial-gradient(
2990
2957
  circle at center,
2991
2958
  rgb(0 0 0 / 10%) 0,
@@ -3020,7 +2987,7 @@ qti-response-declaration {
3020
2987
  center no-repeat;
3021
2988
  border-radius: var(--qti-drop-border-radius);
3022
2989
  position: relative;
3023
- background-color: var(--qti-bg-white);
2990
+ background-color: var(--qti-bg);
3024
2991
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
3025
2992
  outline: none;
3026
2993
  }
@@ -3058,17 +3025,17 @@ qti-response-declaration {
3058
3025
 
3059
3026
  &[aria-readonly='true'] {
3060
3027
  cursor: pointer;
3061
- background-color: var(--qti-bg-white);
3028
+ background-color: var(--qti-bg);
3062
3029
  outline: 0;
3063
3030
  border: none;
3064
3031
  }
3065
3032
 
3066
3033
  &[aria-disabled='true'] {
3067
3034
  cursor: not-allowed;
3068
- background-color: var(--qti-bg-gray-100);
3069
- color: var(--qti-text-gray-500);
3035
+ background-color: var(--qti-disabled-bg);
3036
+ color: var(--qti-disabled-color);
3070
3037
  border-color: var(--qti-border-color);
3071
- outline: 4px solid var(--qti-bg-gray-100);
3038
+ outline: 4px solid var(--qti-disabled-bg);
3072
3039
  }
3073
3040
 
3074
3041
  &[aria-ordervalue] {
@@ -3116,17 +3083,17 @@ qti-response-declaration {
3116
3083
 
3117
3084
  &[aria-readonly='true'] {
3118
3085
  cursor: pointer;
3119
- background-color: var(--qti-bg-white);
3086
+ background-color: var(--qti-bg);
3120
3087
  outline: 0;
3121
3088
  border: none;
3122
3089
  }
3123
3090
 
3124
3091
  &[aria-disabled='true'] {
3125
3092
  cursor: not-allowed;
3126
- background-color: var(--qti-bg-gray-100);
3127
- color: var(--qti-text-gray-500);
3093
+ background-color: var(--qti-disabled-bg);
3094
+ color: var(--qti-disabled-color);
3128
3095
  border-color: var(--qti-border-color);
3129
- outline: 4px solid var(--qti-bg-gray-100);
3096
+ outline: 4px solid var(--qti-disabled-bg);
3130
3097
  }
3131
3098
 
3132
3099
  width: 100%;
@@ -3159,17 +3126,17 @@ qti-response-declaration {
3159
3126
 
3160
3127
  &[aria-readonly='true'] {
3161
3128
  cursor: pointer;
3162
- background-color: var(--qti-bg-white);
3129
+ background-color: var(--qti-bg);
3163
3130
  outline: 0;
3164
3131
  border: none;
3165
3132
  }
3166
3133
 
3167
3134
  &[aria-disabled='true'] {
3168
3135
  cursor: not-allowed;
3169
- background-color: var(--qti-bg-gray-100);
3170
- color: var(--qti-text-gray-500);
3136
+ background-color: var(--qti-disabled-bg);
3137
+ color: var(--qti-disabled-color);
3171
3138
  border-color: var(--qti-border-color);
3172
- outline: 4px solid var(--qti-bg-gray-100);
3139
+ outline: 4px solid var(--qti-disabled-bg);
3173
3140
  }
3174
3141
 
3175
3142
  width: 100%;
@@ -3280,8 +3247,6 @@ qti-response-declaration {
3280
3247
  outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
3281
3248
  }
3282
3249
 
3283
- --qti-point-size: 1.5rem;
3284
-
3285
3250
  border-radius: 100%;
3286
3251
 
3287
3252
  width: var(--qti-point-size);
package/package.json CHANGED
@@ -21,7 +21,7 @@
21
21
  "engines": {
22
22
  "node": ">=20.0.0"
23
23
  },
24
- "version": "6.9.1-beta.57",
24
+ "version": "6.9.1-beta.58",
25
25
  "type": "module",
26
26
  "exports": {
27
27
  "./qti-components": "./dist/qti-components/index.js",