@citolab/qti-components 6.9.1-beta.69 → 6.9.1-beta.70

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.
@@ -578,6 +578,98 @@
578
578
  "declarations": [],
579
579
  "exports": []
580
580
  },
581
+ {
582
+ "kind": "javascript-module",
583
+ "path": "src/lib/qti-components/qti-assessment-stimulus-ref/qti-assessment-stimulus-ref.ts",
584
+ "declarations": [
585
+ {
586
+ "kind": "class",
587
+ "description": "Represents a custom element for referencing an assessment stimulus.",
588
+ "name": "QtiAssessmentStimulusRef",
589
+ "members": [
590
+ {
591
+ "kind": "field",
592
+ "name": "identifier",
593
+ "type": {
594
+ "text": "string"
595
+ },
596
+ "default": "''",
597
+ "description": "The identifier of the stimulus.",
598
+ "attribute": "identifier"
599
+ },
600
+ {
601
+ "kind": "field",
602
+ "name": "href",
603
+ "type": {
604
+ "text": "string"
605
+ },
606
+ "default": "''",
607
+ "description": "The href of the stimulus.",
608
+ "attribute": "href"
609
+ },
610
+ {
611
+ "kind": "method",
612
+ "name": "updateStimulusRef",
613
+ "privacy": "public",
614
+ "parameters": [
615
+ {
616
+ "name": "stimulusRef",
617
+ "type": {
618
+ "text": "Element"
619
+ },
620
+ "description": "The element to which the stimulus will be appended."
621
+ }
622
+ ],
623
+ "description": "Loads and appends the stimulus to the specified element."
624
+ }
625
+ ],
626
+ "attributes": [
627
+ {
628
+ "name": "identifier",
629
+ "type": {
630
+ "text": "string"
631
+ },
632
+ "default": "''",
633
+ "description": "The identifier of the stimulus.",
634
+ "fieldName": "identifier"
635
+ },
636
+ {
637
+ "name": "href",
638
+ "type": {
639
+ "text": "string"
640
+ },
641
+ "default": "''",
642
+ "description": "The href of the stimulus.",
643
+ "fieldName": "href"
644
+ }
645
+ ],
646
+ "superclass": {
647
+ "name": "LitElement",
648
+ "package": "lit"
649
+ },
650
+ "tagName": "qti-assessment-stimulus-ref",
651
+ "customElement": true
652
+ }
653
+ ],
654
+ "exports": [
655
+ {
656
+ "kind": "js",
657
+ "name": "QtiAssessmentStimulusRef",
658
+ "declaration": {
659
+ "name": "QtiAssessmentStimulusRef",
660
+ "module": "src/lib/qti-components/qti-assessment-stimulus-ref/qti-assessment-stimulus-ref.ts"
661
+ }
662
+ },
663
+ {
664
+ "kind": "custom-element-definition",
665
+ "name": "qti-assessment-stimulus-ref",
666
+ "declaration": {
667
+ "name": "QtiAssessmentStimulusRef",
668
+ "module": "src/lib/qti-components/qti-assessment-stimulus-ref/qti-assessment-stimulus-ref.ts"
669
+ }
670
+ }
671
+ ]
672
+ },
581
673
  {
582
674
  "kind": "javascript-module",
583
675
  "path": "src/lib/qti-components/qti-assessment-item/item-print-variables.ts",
@@ -1041,98 +1133,6 @@
1041
1133
  }
1042
1134
  ]
1043
1135
  },
1044
- {
1045
- "kind": "javascript-module",
1046
- "path": "src/lib/qti-components/qti-assessment-stimulus-ref/qti-assessment-stimulus-ref.ts",
1047
- "declarations": [
1048
- {
1049
- "kind": "class",
1050
- "description": "Represents a custom element for referencing an assessment stimulus.",
1051
- "name": "QtiAssessmentStimulusRef",
1052
- "members": [
1053
- {
1054
- "kind": "field",
1055
- "name": "identifier",
1056
- "type": {
1057
- "text": "string"
1058
- },
1059
- "default": "''",
1060
- "description": "The identifier of the stimulus.",
1061
- "attribute": "identifier"
1062
- },
1063
- {
1064
- "kind": "field",
1065
- "name": "href",
1066
- "type": {
1067
- "text": "string"
1068
- },
1069
- "default": "''",
1070
- "description": "The href of the stimulus.",
1071
- "attribute": "href"
1072
- },
1073
- {
1074
- "kind": "method",
1075
- "name": "updateStimulusRef",
1076
- "privacy": "public",
1077
- "parameters": [
1078
- {
1079
- "name": "stimulusRef",
1080
- "type": {
1081
- "text": "Element"
1082
- },
1083
- "description": "The element to which the stimulus will be appended."
1084
- }
1085
- ],
1086
- "description": "Loads and appends the stimulus to the specified element."
1087
- }
1088
- ],
1089
- "attributes": [
1090
- {
1091
- "name": "identifier",
1092
- "type": {
1093
- "text": "string"
1094
- },
1095
- "default": "''",
1096
- "description": "The identifier of the stimulus.",
1097
- "fieldName": "identifier"
1098
- },
1099
- {
1100
- "name": "href",
1101
- "type": {
1102
- "text": "string"
1103
- },
1104
- "default": "''",
1105
- "description": "The href of the stimulus.",
1106
- "fieldName": "href"
1107
- }
1108
- ],
1109
- "superclass": {
1110
- "name": "LitElement",
1111
- "package": "lit"
1112
- },
1113
- "tagName": "qti-assessment-stimulus-ref",
1114
- "customElement": true
1115
- }
1116
- ],
1117
- "exports": [
1118
- {
1119
- "kind": "js",
1120
- "name": "QtiAssessmentStimulusRef",
1121
- "declaration": {
1122
- "name": "QtiAssessmentStimulusRef",
1123
- "module": "src/lib/qti-components/qti-assessment-stimulus-ref/qti-assessment-stimulus-ref.ts"
1124
- }
1125
- },
1126
- {
1127
- "kind": "custom-element-definition",
1128
- "name": "qti-assessment-stimulus-ref",
1129
- "declaration": {
1130
- "name": "QtiAssessmentStimulusRef",
1131
- "module": "src/lib/qti-components/qti-assessment-stimulus-ref/qti-assessment-stimulus-ref.ts"
1132
- }
1133
- }
1134
- ]
1135
- },
1136
1136
  {
1137
1137
  "kind": "javascript-module",
1138
1138
  "path": "src/lib/qti-components/qti-companion-materials-info/qti-companion-materials-info.ts",
package/dist/item.css CHANGED
@@ -42,26 +42,6 @@
42
42
  /* Generic padding for all elements */
43
43
  --qti-padding-vertical: 0.5rem; /* py-2 */
44
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);
65
45
  }
66
46
 
67
47
  /* SVG masks and backgrounds */
@@ -118,7 +98,7 @@
118
98
  .button {
119
99
 
120
100
  border-radius: var(--qti-border-radius);
121
- padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
101
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
122
102
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
123
103
  outline: none;
124
104
  }
@@ -132,8 +112,8 @@
132
112
  -webkit-appearance: none;
133
113
  -moz-appearance: none;
134
114
  appearance: none;
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")
115
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
116
+ 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")
137
117
  no-repeat center right 6px;
138
118
  }
139
119
 
@@ -143,7 +123,7 @@
143
123
 
144
124
  border-radius: 0;
145
125
  cursor: text;
146
- padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
126
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
147
127
  background: unset;
148
128
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
149
129
  outline: none;
@@ -184,9 +164,9 @@
184
164
  rotate 200ms ease-out;
185
165
  cursor: grab;
186
166
  background-color: var(--qti-bg);
187
- padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
167
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
188
168
  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(
169
+ padding-left: calc(var(--qti-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(
190
170
  circle at center,
191
171
  rgb(0 0 0 / 10%) 0,
192
172
  rgb(0 0 0 / 20%) 2px,
@@ -211,7 +191,7 @@
211
191
 
212
192
  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>')
213
193
  center no-repeat;
214
- border-radius: var(--qti-drop-border-radius);
194
+ border-radius: var(--qti-border-radius);
215
195
  position: relative;
216
196
  background-color: var(--qti-bg);
217
197
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
@@ -251,7 +231,7 @@
251
231
  .check {
252
232
  gap: 0.5rem;
253
233
  border-radius: var(--qti-border-radius);
254
- padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal);
234
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
255
235
  outline: none;
256
236
  cursor: pointer;
257
237
  }
@@ -314,7 +294,7 @@
314
294
  /* Apply .foc for focus state */
315
295
 
316
296
  .foc {
317
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
297
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
318
298
  }
319
299
 
320
300
  /* Apply .act for active state */
@@ -1969,7 +1949,7 @@ qti-response-declaration {
1969
1949
  }
1970
1950
 
1971
1951
  &:focus {
1972
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
1952
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
1973
1953
  }
1974
1954
 
1975
1955
  &::part(ch) {
@@ -2001,7 +1981,7 @@ qti-response-declaration {
2001
1981
 
2002
1982
  border-radius: var(--qti-border-radius);
2003
1983
 
2004
- padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
1984
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2005
1985
 
2006
1986
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2007
1987
 
@@ -2017,7 +1997,7 @@ qti-response-declaration {
2017
1997
  }
2018
1998
 
2019
1999
  &:focus {
2020
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2000
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2021
2001
  }
2022
2002
 
2023
2003
  &:state(--checked),
@@ -2085,7 +2065,7 @@ qti-response-declaration {
2085
2065
 
2086
2066
  border-radius: var(--qti-border-radius);
2087
2067
 
2088
- padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal);
2068
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2089
2069
 
2090
2070
  outline: none;
2091
2071
 
@@ -2118,13 +2098,13 @@ qti-response-declaration {
2118
2098
  }
2119
2099
 
2120
2100
  &:focus-within {
2121
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2101
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2122
2102
  }
2123
2103
 
2124
2104
  &::part(input) {
2125
2105
  border-radius: 0;
2126
2106
  cursor: text;
2127
- padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
2107
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2128
2108
  background: unset;
2129
2109
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2130
2110
  outline: none;
@@ -2135,7 +2115,7 @@ qti-response-declaration {
2135
2115
  &::part(textarea) {
2136
2116
  border-radius: 0;
2137
2117
  cursor: text;
2138
- padding: var(--qti-text-padding-vertical) var(--qti-text-padding-horizontal);
2118
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2139
2119
  background: unset;
2140
2120
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2141
2121
  outline: none;
@@ -2146,7 +2126,7 @@ qti-response-declaration {
2146
2126
  }
2147
2127
 
2148
2128
  &:focus-within {
2149
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2129
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2150
2130
  }
2151
2131
  }
2152
2132
 
@@ -2165,7 +2145,7 @@ qti-response-declaration {
2165
2145
  }
2166
2146
 
2167
2147
  &:focus {
2168
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2148
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2169
2149
  }
2170
2150
 
2171
2151
  transition: transform 200ms ease-out,
@@ -2176,11 +2156,11 @@ qti-response-declaration {
2176
2156
 
2177
2157
  background-color: var(--qti-bg);
2178
2158
 
2179
- padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
2159
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2180
2160
 
2181
2161
  border-radius: var(--qti-border-radius);
2182
2162
 
2183
- padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2163
+ padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
2184
2164
 
2185
2165
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2186
2166
 
@@ -2242,7 +2222,7 @@ qti-response-declaration {
2242
2222
  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>')
2243
2223
  center no-repeat;
2244
2224
 
2245
- border-radius: var(--qti-drop-border-radius);
2225
+ border-radius: var(--qti-border-radius);
2246
2226
 
2247
2227
  position: relative;
2248
2228
 
@@ -2263,7 +2243,7 @@ qti-response-declaration {
2263
2243
  }
2264
2244
 
2265
2245
  &:focus {
2266
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2246
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2267
2247
  }
2268
2248
 
2269
2249
  &[aria-checked='true'] {
@@ -2306,7 +2286,7 @@ qti-response-declaration {
2306
2286
  }
2307
2287
 
2308
2288
  &:focus {
2309
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2289
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2310
2290
  }
2311
2291
 
2312
2292
  &[aria-checked='true'] {
@@ -2412,7 +2392,7 @@ qti-response-declaration {
2412
2392
  }
2413
2393
 
2414
2394
  &:focus {
2415
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2395
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2416
2396
  }
2417
2397
 
2418
2398
  &::part(cha) {
@@ -2457,7 +2437,7 @@ qti-response-declaration {
2457
2437
 
2458
2438
  border-radius: var(--qti-border-radius);
2459
2439
 
2460
- padding: var(--qti-check-padding-vertical) var(--qti-check-padding-horizontal);
2440
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2461
2441
 
2462
2442
  outline: none;
2463
2443
 
@@ -2479,7 +2459,7 @@ qti-response-declaration {
2479
2459
  }
2480
2460
 
2481
2461
  &:focus {
2482
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2462
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2483
2463
  }
2484
2464
 
2485
2465
  /* @layer qti-variants { */
@@ -2509,7 +2489,7 @@ qti-response-declaration {
2509
2489
 
2510
2490
  border-radius: var(--qti-border-radius);
2511
2491
 
2512
- padding: var(--qti-button-padding-vertical) var(--qti-button-padding-horizontal);
2492
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2513
2493
 
2514
2494
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2515
2495
 
@@ -2526,7 +2506,7 @@ qti-response-declaration {
2526
2506
  }
2527
2507
 
2528
2508
  &:focus {
2529
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2509
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2530
2510
  }
2531
2511
 
2532
2512
  cursor: pointer;
@@ -2565,7 +2545,7 @@ qti-response-declaration {
2565
2545
  }
2566
2546
 
2567
2547
  &:focus {
2568
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2548
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2569
2549
  }
2570
2550
 
2571
2551
  border-radius: var(--qti-border-radius);
@@ -2578,9 +2558,9 @@ qti-response-declaration {
2578
2558
 
2579
2559
  appearance: none;
2580
2560
 
2581
- padding: var(--qti-select-padding-vertical) var(--qti-select-padding-horizontal);
2561
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2582
2562
 
2583
- padding-right: calc(var(--qti-select-padding-horizontal) + 1.5rem);
2563
+ padding-right: calc(var(--qti-padding-horizontal) + 1.5rem);
2584
2564
 
2585
2565
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2586
2566
 
@@ -2613,7 +2593,7 @@ qti-response-declaration {
2613
2593
  }
2614
2594
 
2615
2595
  &:focus {
2616
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2596
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2617
2597
  }
2618
2598
 
2619
2599
  transition: transform 200ms ease-out,
@@ -2624,11 +2604,11 @@ qti-response-declaration {
2624
2604
 
2625
2605
  background-color: var(--qti-bg);
2626
2606
 
2627
- padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
2607
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2628
2608
 
2629
2609
  border-radius: var(--qti-border-radius);
2630
2610
 
2631
- padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2611
+ padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
2632
2612
 
2633
2613
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2634
2614
 
@@ -2708,7 +2688,7 @@ qti-response-declaration {
2708
2688
  }
2709
2689
 
2710
2690
  &:focus {
2711
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2691
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2712
2692
  }
2713
2693
 
2714
2694
  min-height: 6rem;
@@ -2719,7 +2699,7 @@ qti-response-declaration {
2719
2699
  align-items: center;
2720
2700
  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>')
2721
2701
  center no-repeat;
2722
- border-radius: var(--qti-drop-border-radius);
2702
+ border-radius: var(--qti-border-radius);
2723
2703
  position: relative;
2724
2704
  background-color: var(--qti-bg);
2725
2705
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
@@ -2741,7 +2721,7 @@ qti-response-declaration {
2741
2721
  }
2742
2722
 
2743
2723
  &:focus {
2744
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2724
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2745
2725
  }
2746
2726
 
2747
2727
  flex-basis: fit-content;
@@ -2754,11 +2734,11 @@ qti-response-declaration {
2754
2734
 
2755
2735
  background-color: var(--qti-bg);
2756
2736
 
2757
- padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
2737
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2758
2738
 
2759
2739
  border-radius: var(--qti-border-radius);
2760
2740
 
2761
- padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2741
+ padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
2762
2742
 
2763
2743
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2764
2744
 
@@ -2798,7 +2778,7 @@ qti-response-declaration {
2798
2778
  }
2799
2779
 
2800
2780
  &:focus {
2801
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2781
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2802
2782
  }
2803
2783
 
2804
2784
  transition: transform 200ms ease-out,
@@ -2809,11 +2789,11 @@ qti-response-declaration {
2809
2789
 
2810
2790
  background-color: var(--qti-bg);
2811
2791
 
2812
- padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
2792
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2813
2793
 
2814
2794
  border-radius: var(--qti-border-radius);
2815
2795
 
2816
- padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2796
+ padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
2817
2797
 
2818
2798
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2819
2799
 
@@ -2863,14 +2843,14 @@ qti-response-declaration {
2863
2843
  }
2864
2844
 
2865
2845
  &:focus {
2866
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2846
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2867
2847
  }
2868
2848
 
2869
2849
  display: flex;
2870
2850
  min-height: 4rem;
2871
2851
  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>')
2872
2852
  center no-repeat;
2873
- border-radius: var(--qti-drop-border-radius);
2853
+ border-radius: var(--qti-border-radius);
2874
2854
  position: relative;
2875
2855
  background-color: var(--qti-bg);
2876
2856
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
@@ -2892,7 +2872,7 @@ qti-response-declaration {
2892
2872
  }
2893
2873
 
2894
2874
  &:focus {
2895
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2875
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2896
2876
  }
2897
2877
 
2898
2878
  &[dragging] {
@@ -2910,11 +2890,11 @@ qti-response-declaration {
2910
2890
 
2911
2891
  background-color: var(--qti-bg);
2912
2892
 
2913
- padding: var(--qti-drag-padding-vertical) var(--qti-drag-padding-horizontal);
2893
+ padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
2914
2894
 
2915
2895
  border-radius: var(--qti-border-radius);
2916
2896
 
2917
- padding-left: calc(var(--qti-drag-padding-horizontal) + 0.5rem);
2897
+ padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
2918
2898
 
2919
2899
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
2920
2900
 
@@ -2952,7 +2932,7 @@ qti-response-declaration {
2952
2932
  min-width: 10rem;
2953
2933
  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>')
2954
2934
  center no-repeat;
2955
- border-radius: var(--qti-drop-border-radius);
2935
+ border-radius: var(--qti-border-radius);
2956
2936
  position: relative;
2957
2937
  background-color: var(--qti-bg);
2958
2938
  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
@@ -2960,7 +2940,7 @@ qti-response-declaration {
2960
2940
  }
2961
2941
 
2962
2942
  &::part(drop-list):focus {
2963
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2943
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2964
2944
  }
2965
2945
 
2966
2946
  &::part(drop-list)[dragging] {
@@ -2981,7 +2961,7 @@ qti-response-declaration {
2981
2961
  }
2982
2962
 
2983
2963
  &:focus {
2984
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
2964
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
2985
2965
  }
2986
2966
 
2987
2967
  &:state(--checked),
@@ -3040,7 +3020,7 @@ qti-response-declaration {
3040
3020
  }
3041
3021
 
3042
3022
  &:focus {
3043
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
3023
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3044
3024
  }
3045
3025
 
3046
3026
  &[aria-checked='true'] {
@@ -3083,7 +3063,7 @@ qti-response-declaration {
3083
3063
  }
3084
3064
 
3085
3065
  &:focus {
3086
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
3066
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3087
3067
  }
3088
3068
 
3089
3069
  &[aria-checked='true'] {
@@ -3211,7 +3191,7 @@ qti-response-declaration {
3211
3191
  }
3212
3192
 
3213
3193
  &:focus {
3214
- outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
3194
+ box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
3215
3195
  }
3216
3196
 
3217
3197
  border-radius: 100%;
@@ -60,6 +60,13 @@ type BaseProps = {
60
60
 
61
61
  type BaseEvents = {};
62
62
 
63
+ export type QtiAssessmentStimulusRefProps = {
64
+ /** The identifier of the stimulus. */
65
+ identifier?: string;
66
+ /** The href of the stimulus. */
67
+ href?: string;
68
+ };
69
+
63
70
  export type ItemPrintVariablesProps = {
64
71
  /** */
65
72
  itemContext?: ItemContext | undefined;
@@ -96,13 +103,6 @@ export type QtiAssessmentItemProps = {
96
103
  "onqti-response-processing"?: (e: CustomEvent<never>) => void;
97
104
  };
98
105
 
99
- export type QtiAssessmentStimulusRefProps = {
100
- /** The identifier of the stimulus. */
101
- identifier?: string;
102
- /** The href of the stimulus. */
103
- href?: string;
104
- };
105
-
106
106
  export type QtiCompanionMaterialsInfoProps = {};
107
107
 
108
108
  export type QtiCustomOperatorProps = {
@@ -1104,6 +1104,16 @@ export type QtiItemProps = {
1104
1104
  };
1105
1105
 
1106
1106
  export type CustomElements = {
1107
+ /**
1108
+ * Represents a custom element for referencing an assessment stimulus.
1109
+ * ---
1110
+ *
1111
+ *
1112
+ * ### **Methods:**
1113
+ * - **updateStimulusRef(stimulusRef: _Element_)** - Loads and appends the stimulus to the specified element.
1114
+ */
1115
+ "qti-assessment-stimulus-ref": Partial<QtiAssessmentStimulusRefProps & BaseProps & BaseEvents>;
1116
+
1107
1117
  /**
1108
1118
  *
1109
1119
  * ---
@@ -1127,16 +1137,6 @@ export type CustomElements = {
1127
1137
  */
1128
1138
  "qti-assessment-item": Partial<QtiAssessmentItemProps & BaseProps & BaseEvents>;
1129
1139
 
1130
- /**
1131
- * Represents a custom element for referencing an assessment stimulus.
1132
- * ---
1133
- *
1134
- *
1135
- * ### **Methods:**
1136
- * - **updateStimulusRef(stimulusRef: _Element_)** - Loads and appends the stimulus to the specified element.
1137
- */
1138
- "qti-assessment-stimulus-ref": Partial<QtiAssessmentStimulusRefProps & BaseProps & BaseEvents>;
1139
-
1140
1140
  /**
1141
1141
  *
1142
1142
  * ---
@@ -2,6 +2,23 @@
2
2
  "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
3
3
  "version": 1.1,
4
4
  "tags": [
5
+ {
6
+ "name": "qti-assessment-stimulus-ref",
7
+ "description": "Represents a custom element for referencing an assessment stimulus.\n---\n\n\n### **Methods:**\n - **updateStimulusRef(stimulusRef: _Element_)** - Loads and appends the stimulus to the specified element.",
8
+ "attributes": [
9
+ {
10
+ "name": "identifier",
11
+ "description": "The identifier of the stimulus.",
12
+ "values": []
13
+ },
14
+ {
15
+ "name": "href",
16
+ "description": "The href of the stimulus.",
17
+ "values": []
18
+ }
19
+ ],
20
+ "references": []
21
+ },
5
22
  {
6
23
  "name": "item-print-variables",
7
24
  "description": "\n---\n",
@@ -27,23 +44,6 @@
27
44
  ],
28
45
  "references": []
29
46
  },
30
- {
31
- "name": "qti-assessment-stimulus-ref",
32
- "description": "Represents a custom element for referencing an assessment stimulus.\n---\n\n\n### **Methods:**\n - **updateStimulusRef(stimulusRef: _Element_)** - Loads and appends the stimulus to the specified element.",
33
- "attributes": [
34
- {
35
- "name": "identifier",
36
- "description": "The identifier of the stimulus.",
37
- "values": []
38
- },
39
- {
40
- "name": "href",
41
- "description": "The href of the stimulus.",
42
- "values": []
43
- }
44
- ],
45
- "references": []
46
- },
47
47
  {
48
48
  "name": "qti-companion-materials-info",
49
49
  "description": "\n---\n",
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.69",
24
+ "version": "6.9.1-beta.70",
25
25
  "type": "module",
26
26
  "exports": {
27
27
  "./qti-components": {