@citolab/qti-components 6.5.0 → 6.5.1

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 (15) hide show
  1. package/dist/custom-elements.json +119 -121
  2. package/dist/index.cjs +145 -146
  3. package/dist/index.d.cts +141 -142
  4. package/dist/index.d.ts +141 -142
  5. package/dist/index.js +145 -146
  6. package/dist/qti-components/index.cjs +99 -89
  7. package/dist/qti-components/index.d.cts +141 -142
  8. package/dist/qti-components/index.d.ts +141 -142
  9. package/dist/qti-components/index.js +122 -112
  10. package/dist/qti-transformers/index.cjs +1 -1
  11. package/dist/qti-transformers/index.js +1 -1
  12. package/dist/styles.bundled.css +422 -50
  13. package/dist/styles.css +7 -50
  14. package/package.json +6 -9
  15. package/src/styles/qti-interactions.css +6 -6
package/dist/qti-transformers/index.cjs CHANGED
@@ -33,4 +33,4 @@
33
33
  <xsl:apply-templates/>
34
34
  </xsl:element>
35
35
  </xsl:template>
36
- </xsl:stylesheet>`;function c(r){let n=[];return r.querySelectorAll("qti-assessment-item-ref").forEach(e=>{let t=e.getAttribute("identifier"),s=e.getAttribute("href"),o=e.getAttribute("category");n.push({identifier:t,href:s,category:o})}),n}function m(r){return new Promise((n,e)=>{let t=new XMLHttpRequest;t.open("GET",r,!0),t.responseType="document",t.onload=()=>t.status>=200&&t.status<300?n(t.responseXML):(e(t.statusText),null),t.onerror=function(){e(t.statusText)},t.send()})}function u(r){return new DOMParser().parseFromString(r,"text/xml")}function a(r){let n=new XSLTProcessor,e=new DOMParser().parseFromString(i,"text/xml");n.importStylesheet(e);let t=n.transformToFragment(r,document);return new XMLSerializer().serializeToString(t)}function x(r,n){r.querySelectorAll("[src],[href]").forEach(e=>{var o;let t="";e.getAttribute("src")&&(t="src"),e.getAttribute("href")&&(t="href");let s=(o=e.getAttribute(t))==null?void 0:o.trim();if(!s.startsWith("data:")&&!s.startsWith("http")){let l=n+encodeURIComponent(s);e.setAttribute(t,l)}})}exports.qtiTransformItem = p; exports.qtiTransformTest = g;
36
+ </xsl:stylesheet>`;function c(r){let n=[];return r.querySelectorAll("qti-assessment-item-ref").forEach(e=>{let t=e.getAttribute("identifier"),s=e.getAttribute("href"),o=e.getAttribute("category");n.push({identifier:t,href:s,category:o})}),n}function m(r){return new Promise((n,e)=>{let t=new XMLHttpRequest;t.open("GET",r,!0),t.responseType="document",t.onload=()=>t.status>=200&&t.status<300?n(t.responseXML):(e(t.statusText),null),t.onerror=function(){e(t.statusText)},t.send()})}function u(r){return new DOMParser().parseFromString(r,"text/xml")}function a(r){let n=new XSLTProcessor,e=new DOMParser().parseFromString(i,"text/xml");n.importStylesheet(e);let t=n.transformToFragment(r,document);return new XMLSerializer().serializeToString(t)}function x(r,n){r.querySelectorAll("[src],[href]").forEach(e=>{var o;let t="";e.getAttribute("src")&&(t="src"),e.getAttribute("href")&&(t="href");let s=(o=e.getAttribute(t))==null?void 0:o.trim();if(!s.startsWith("data:")&&!s.startsWith("http")){let l=n+encodeURI(s);e.setAttribute(t,l)}})}exports.qtiTransformItem = p; exports.qtiTransformTest = g;
package/dist/qti-transformers/index.js CHANGED
@@ -33,4 +33,4 @@ import"../chunk-343LZK3D.js";var p=()=>{let r,n={async load(e){return new Promis
33
33
  <xsl:apply-templates/>
34
34
  </xsl:element>
35
35
  </xsl:template>
36
- </xsl:stylesheet>`;function c(r){let n=[];return r.querySelectorAll("qti-assessment-item-ref").forEach(e=>{let t=e.getAttribute("identifier"),s=e.getAttribute("href"),o=e.getAttribute("category");n.push({identifier:t,href:s,category:o})}),n}function m(r){return new Promise((n,e)=>{let t=new XMLHttpRequest;t.open("GET",r,!0),t.responseType="document",t.onload=()=>t.status>=200&&t.status<300?n(t.responseXML):(e(t.statusText),null),t.onerror=function(){e(t.statusText)},t.send()})}function u(r){return new DOMParser().parseFromString(r,"text/xml")}function a(r){let n=new XSLTProcessor,e=new DOMParser().parseFromString(i,"text/xml");n.importStylesheet(e);let t=n.transformToFragment(r,document);return new XMLSerializer().serializeToString(t)}function x(r,n){r.querySelectorAll("[src],[href]").forEach(e=>{var o;let t="";e.getAttribute("src")&&(t="src"),e.getAttribute("href")&&(t="href");let s=(o=e.getAttribute(t))==null?void 0:o.trim();if(!s.startsWith("data:")&&!s.startsWith("http")){let l=n+encodeURIComponent(s);e.setAttribute(t,l)}})}export{p as qtiTransformItem,g as qtiTransformTest};
36
+ </xsl:stylesheet>`;function c(r){let n=[];return r.querySelectorAll("qti-assessment-item-ref").forEach(e=>{let t=e.getAttribute("identifier"),s=e.getAttribute("href"),o=e.getAttribute("category");n.push({identifier:t,href:s,category:o})}),n}function m(r){return new Promise((n,e)=>{let t=new XMLHttpRequest;t.open("GET",r,!0),t.responseType="document",t.onload=()=>t.status>=200&&t.status<300?n(t.responseXML):(e(t.statusText),null),t.onerror=function(){e(t.statusText)},t.send()})}function u(r){return new DOMParser().parseFromString(r,"text/xml")}function a(r){let n=new XSLTProcessor,e=new DOMParser().parseFromString(i,"text/xml");n.importStylesheet(e);let t=n.transformToFragment(r,document);return new XMLSerializer().serializeToString(t)}function x(r,n){r.querySelectorAll("[src],[href]").forEach(e=>{var o;let t="";e.getAttribute("src")&&(t="src"),e.getAttribute("href")&&(t="href");let s=(o=e.getAttribute(t))==null?void 0:o.trim();if(!s.startsWith("data:")&&!s.startsWith("http")){let l=n+encodeURI(s);e.setAttribute(t,l)}})}export{p as qtiTransformItem,g as qtiTransformTest};
package/dist/styles.bundled.css CHANGED
@@ -2138,54 +2138,11 @@ qti-graphic-gap-match-interaction img{
2138
2138
  }
2139
2139
  qti-slider-interaction{
2140
2140
  display: block; /* else no screenshot will be made with html-to-image */
2141
- }
2142
- qti-slider-interaction:hover{
2143
- --tw-bg-opacity: 1;
2144
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
2145
- }
2146
- qti-slider-interaction:focus{
2147
- outline-width: 2px;
2148
- outline-color: #93c5fd;
2149
- }
2150
- qti-slider-interaction[aria-checked="true"]{
2151
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2152
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2153
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2154
- --tw-ring-opacity: 1;
2155
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
2156
- }
2157
- qti-slider-interaction[aria-disabled="true"]{
2158
- cursor: not-allowed;
2159
- --tw-bg-opacity: 1;
2160
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
2161
- --tw-text-opacity: 1;
2162
- color: rgb(107 114 128 / var(--tw-text-opacity));
2163
- --tw-shadow: 0 0 #0000;
2164
- --tw-shadow-colored: 0 0 #0000;
2165
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2166
- --tw-ring-opacity: 1;
2167
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
2168
- }
2169
- qti-slider-interaction[aria-disabled="true"] > *{
2170
- --tw-text-opacity: 1 !important;
2171
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
2172
- }
2173
- qti-slider-interaction[aria-readonly="true"]{
2174
- cursor: pointer;
2175
- --tw-bg-opacity: 1;
2176
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
2177
- --tw-shadow: 0 0 #0000;
2178
- --tw-shadow-colored: 0 0 #0000;
2179
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
2180
- outline-width: 0px;
2181
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
2182
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
2183
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
2184
- }
2185
- qti-slider-interaction {
2141
+
2142
+ /* @apply hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis; */
2186
2143
 
2187
2144
  --qti-tick-color: rgb(229 231 235 / 1);
2188
- --qti-tick-width: 2px;
2145
+ --qti-tick-width: 1px;
2189
2146
  }
2190
2147
  qti-slider-interaction::part(slider){
2191
2148
  margin-left: 2rem;
@@ -2217,12 +2174,12 @@ qti-slider-interaction::part(rail){
2217
2174
  display: flex;
2218
2175
  align-items: center; /* so the knob is neatly centered vertically */
2219
2176
  /* DESIGN */
2220
- box-sizing: border-box; /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */ height: 0.75rem; width: 100%; cursor: pointer; border-radius: 9999px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity));
2177
+ box-sizing: border-box; /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */ height: 0.375rem; width: 100%; cursor: pointer; border-radius: 9999px; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity));
2221
2178
  }
2222
2179
  qti-slider-interaction::part(knob){
2223
2180
  position: relative;
2224
- height: 1.5rem;
2225
- width: 1.5rem;
2181
+ height: 1rem;
2182
+ width: 1rem;
2226
2183
  transform-origin: center;
2227
2184
  --tw-translate-x: -50%;
2228
2185
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2238,7 +2195,7 @@ qti-slider-interaction{
2238
2195
  }
2239
2196
  qti-slider-interaction::part(value){
2240
2197
  position: absolute;
2241
- bottom: 2rem; /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ left: 0.75rem; /* should be half width of the knob if you want to center these two */ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); cursor: pointer; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center;
2198
+ bottom: 2rem; /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ left: 0.5rem; /* should be half width of the knob if you want to center these two */ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); cursor: pointer; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; text-align: center; --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity));
2242
2199
  }
2243
2200
  qti-select-point-interaction::part(point):hover{
2244
2201
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -2317,3 +2274,418 @@ qti-choice-interaction.qti-orientation-horizontal {
2317
2274
  qti-choice-interaction[orientation='horizontal'] {
2318
2275
  flex-direction: row;
2319
2276
  }
2277
+ qti-item-body{
2278
+ color: var(--tw-prose-body);
2279
+ max-width: 65ch;
2280
+ }
2281
+ qti-item-body :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2282
+ margin-top: 1.25em;
2283
+ margin-bottom: 1.25em;
2284
+ }
2285
+ qti-item-body :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2286
+ color: var(--tw-prose-lead);
2287
+ font-size: 1.25em;
2288
+ line-height: 1.6;
2289
+ margin-top: 1.2em;
2290
+ margin-bottom: 1.2em;
2291
+ }
2292
+ qti-item-body :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2293
+ color: var(--tw-prose-links);
2294
+ text-decoration: underline;
2295
+ font-weight: 500;
2296
+ }
2297
+ qti-item-body :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2298
+ color: var(--tw-prose-bold);
2299
+ font-weight: 600;
2300
+ }
2301
+ qti-item-body :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2302
+ color: inherit;
2303
+ }
2304
+ qti-item-body :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2305
+ color: inherit;
2306
+ }
2307
+ qti-item-body :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2308
+ color: inherit;
2309
+ }
2310
+ qti-item-body :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2311
+ list-style-type: decimal;
2312
+ margin-top: 1.25em;
2313
+ margin-bottom: 1.25em;
2314
+ padding-left: 1.625em;
2315
+ }
2316
+ qti-item-body :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2317
+ list-style-type: upper-alpha;
2318
+ }
2319
+ qti-item-body :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2320
+ list-style-type: lower-alpha;
2321
+ }
2322
+ qti-item-body :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2323
+ list-style-type: upper-alpha;
2324
+ }
2325
+ qti-item-body :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2326
+ list-style-type: lower-alpha;
2327
+ }
2328
+ qti-item-body :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2329
+ list-style-type: upper-roman;
2330
+ }
2331
+ qti-item-body :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2332
+ list-style-type: lower-roman;
2333
+ }
2334
+ qti-item-body :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2335
+ list-style-type: upper-roman;
2336
+ }
2337
+ qti-item-body :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2338
+ list-style-type: lower-roman;
2339
+ }
2340
+ qti-item-body :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2341
+ list-style-type: decimal;
2342
+ }
2343
+ qti-item-body :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2344
+ list-style-type: disc;
2345
+ margin-top: 1.25em;
2346
+ margin-bottom: 1.25em;
2347
+ padding-left: 1.625em;
2348
+ }
2349
+ qti-item-body :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
2350
+ font-weight: 400;
2351
+ color: var(--tw-prose-counters);
2352
+ }
2353
+ qti-item-body :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
2354
+ color: var(--tw-prose-bullets);
2355
+ }
2356
+ qti-item-body :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2357
+ color: var(--tw-prose-headings);
2358
+ font-weight: 600;
2359
+ margin-top: 1.25em;
2360
+ }
2361
+ qti-item-body :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2362
+ border-color: var(--tw-prose-hr);
2363
+ border-top-width: 1px;
2364
+ margin-top: 3em;
2365
+ margin-bottom: 3em;
2366
+ }
2367
+ qti-item-body :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2368
+ font-weight: 500;
2369
+ font-style: italic;
2370
+ color: var(--tw-prose-quotes);
2371
+ border-left-width: 0.25rem;
2372
+ border-left-color: var(--tw-prose-quote-borders);
2373
+ quotes: "\201C""\201D""\2018""\2019";
2374
+ margin-top: 1.6em;
2375
+ margin-bottom: 1.6em;
2376
+ padding-left: 1em;
2377
+ }
2378
+ qti-item-body :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
2379
+ content: open-quote;
2380
+ }
2381
+ qti-item-body :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
2382
+ content: close-quote;
2383
+ }
2384
+ qti-item-body :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2385
+ color: var(--tw-prose-headings);
2386
+ font-weight: 800;
2387
+ font-size: 2.25em;
2388
+ margin-top: 0;
2389
+ margin-bottom: 0.8888889em;
2390
+ line-height: 1.1111111;
2391
+ }
2392
+ qti-item-body :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2393
+ font-weight: 900;
2394
+ color: inherit;
2395
+ }
2396
+ qti-item-body :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2397
+ color: var(--tw-prose-headings);
2398
+ font-weight: 700;
2399
+ font-size: 1.5em;
2400
+ margin-top: 2em;
2401
+ margin-bottom: 1em;
2402
+ line-height: 1.3333333;
2403
+ }
2404
+ qti-item-body :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2405
+ font-weight: 800;
2406
+ color: inherit;
2407
+ }
2408
+ qti-item-body :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2409
+ color: var(--tw-prose-headings);
2410
+ font-weight: 600;
2411
+ font-size: 1.25em;
2412
+ margin-top: 1.6em;
2413
+ margin-bottom: 0.6em;
2414
+ line-height: 1.6;
2415
+ }
2416
+ qti-item-body :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2417
+ font-weight: 700;
2418
+ color: inherit;
2419
+ }
2420
+ qti-item-body :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2421
+ color: var(--tw-prose-headings);
2422
+ font-weight: 600;
2423
+ margin-top: 1.5em;
2424
+ margin-bottom: 0.5em;
2425
+ line-height: 1.5;
2426
+ }
2427
+ qti-item-body :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2428
+ font-weight: 700;
2429
+ color: inherit;
2430
+ }
2431
+ qti-item-body :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2432
+ margin-top: 2em;
2433
+ margin-bottom: 2em;
2434
+ }
2435
+ qti-item-body :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2436
+ display: block;
2437
+ margin-top: 2em;
2438
+ margin-bottom: 2em;
2439
+ }
2440
+ qti-item-body :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2441
+ font-weight: 500;
2442
+ font-family: inherit;
2443
+ color: var(--tw-prose-kbd);
2444
+ box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
2445
+ font-size: 0.875em;
2446
+ border-radius: 0.3125rem;
2447
+ padding-top: 0.1875em;
2448
+ padding-right: 0.375em;
2449
+ padding-bottom: 0.1875em;
2450
+ padding-left: 0.375em;
2451
+ }
2452
+ qti-item-body :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2453
+ color: var(--tw-prose-code);
2454
+ font-weight: 600;
2455
+ font-size: 0.875em;
2456
+ }
2457
+ qti-item-body :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
2458
+ content: "`";
2459
+ }
2460
+ qti-item-body :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
2461
+ content: "`";
2462
+ }
2463
+ qti-item-body :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2464
+ color: inherit;
2465
+ }
2466
+ qti-item-body :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2467
+ color: inherit;
2468
+ }
2469
+ qti-item-body :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2470
+ color: inherit;
2471
+ font-size: 0.875em;
2472
+ }
2473
+ qti-item-body :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2474
+ color: inherit;
2475
+ font-size: 0.9em;
2476
+ }
2477
+ qti-item-body :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2478
+ color: inherit;
2479
+ }
2480
+ qti-item-body :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2481
+ color: inherit;
2482
+ }
2483
+ qti-item-body :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2484
+ color: inherit;
2485
+ }
2486
+ qti-item-body :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2487
+ color: var(--tw-prose-pre-code);
2488
+ background-color: var(--tw-prose-pre-bg);
2489
+ overflow-x: auto;
2490
+ font-weight: 400;
2491
+ font-size: 0.875em;
2492
+ line-height: 1.7142857;
2493
+ margin-top: 1.7142857em;
2494
+ margin-bottom: 1.7142857em;
2495
+ border-radius: 0.375rem;
2496
+ padding-top: 0.8571429em;
2497
+ padding-right: 1.1428571em;
2498
+ padding-bottom: 0.8571429em;
2499
+ padding-left: 1.1428571em;
2500
+ }
2501
+ qti-item-body :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2502
+ background-color: transparent;
2503
+ border-width: 0;
2504
+ border-radius: 0;
2505
+ padding: 0;
2506
+ font-weight: inherit;
2507
+ color: inherit;
2508
+ font-size: inherit;
2509
+ font-family: inherit;
2510
+ line-height: inherit;
2511
+ }
2512
+ qti-item-body :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
2513
+ content: none;
2514
+ }
2515
+ qti-item-body :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
2516
+ content: none;
2517
+ }
2518
+ qti-item-body :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2519
+ width: 100%;
2520
+ table-layout: auto;
2521
+ text-align: left;
2522
+ margin-top: 2em;
2523
+ margin-bottom: 2em;
2524
+ font-size: 0.875em;
2525
+ line-height: 1.7142857;
2526
+ }
2527
+ qti-item-body :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2528
+ border-bottom-width: 1px;
2529
+ border-bottom-color: var(--tw-prose-th-borders);
2530
+ }
2531
+ qti-item-body :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2532
+ color: var(--tw-prose-headings);
2533
+ font-weight: 600;
2534
+ vertical-align: bottom;
2535
+ padding-right: 0.5714286em;
2536
+ padding-bottom: 0.5714286em;
2537
+ padding-left: 0.5714286em;
2538
+ }
2539
+ qti-item-body :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2540
+ border-bottom-width: 1px;
2541
+ border-bottom-color: var(--tw-prose-td-borders);
2542
+ }
2543
+ qti-item-body :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2544
+ border-bottom-width: 0;
2545
+ }
2546
+ qti-item-body :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2547
+ vertical-align: baseline;
2548
+ }
2549
+ qti-item-body :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2550
+ border-top-width: 1px;
2551
+ border-top-color: var(--tw-prose-th-borders);
2552
+ }
2553
+ qti-item-body :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2554
+ vertical-align: top;
2555
+ }
2556
+ qti-item-body :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2557
+ margin-top: 0;
2558
+ margin-bottom: 0;
2559
+ }
2560
+ qti-item-body :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2561
+ color: var(--tw-prose-captions);
2562
+ font-size: 0.875em;
2563
+ line-height: 1.4285714;
2564
+ margin-top: 0.8571429em;
2565
+ }
2566
+ qti-item-body{
2567
+ --tw-prose-body: #374151;
2568
+ --tw-prose-headings: #111827;
2569
+ --tw-prose-lead: #4b5563;
2570
+ --tw-prose-links: #111827;
2571
+ --tw-prose-bold: #111827;
2572
+ --tw-prose-counters: #6b7280;
2573
+ --tw-prose-bullets: #d1d5db;
2574
+ --tw-prose-hr: #e5e7eb;
2575
+ --tw-prose-quotes: #111827;
2576
+ --tw-prose-quote-borders: #e5e7eb;
2577
+ --tw-prose-captions: #6b7280;
2578
+ --tw-prose-kbd: #111827;
2579
+ --tw-prose-kbd-shadows: 17 24 39;
2580
+ --tw-prose-code: #111827;
2581
+ --tw-prose-pre-code: #e5e7eb;
2582
+ --tw-prose-pre-bg: #1f2937;
2583
+ --tw-prose-th-borders: #d1d5db;
2584
+ --tw-prose-td-borders: #e5e7eb;
2585
+ --tw-prose-invert-body: #d1d5db;
2586
+ --tw-prose-invert-headings: #fff;
2587
+ --tw-prose-invert-lead: #9ca3af;
2588
+ --tw-prose-invert-links: #fff;
2589
+ --tw-prose-invert-bold: #fff;
2590
+ --tw-prose-invert-counters: #9ca3af;
2591
+ --tw-prose-invert-bullets: #4b5563;
2592
+ --tw-prose-invert-hr: #374151;
2593
+ --tw-prose-invert-quotes: #f3f4f6;
2594
+ --tw-prose-invert-quote-borders: #374151;
2595
+ --tw-prose-invert-captions: #9ca3af;
2596
+ --tw-prose-invert-kbd: #fff;
2597
+ --tw-prose-invert-kbd-shadows: 255 255 255;
2598
+ --tw-prose-invert-code: #fff;
2599
+ --tw-prose-invert-pre-code: #d1d5db;
2600
+ --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
2601
+ --tw-prose-invert-th-borders: #4b5563;
2602
+ --tw-prose-invert-td-borders: #374151;
2603
+ font-size: 1rem;
2604
+ line-height: 1.75;
2605
+ }
2606
+ qti-item-body :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2607
+ margin-top: 0;
2608
+ margin-bottom: 0;
2609
+ }
2610
+ qti-item-body :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2611
+ margin-top: 2em;
2612
+ margin-bottom: 2em;
2613
+ }
2614
+ qti-item-body :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2615
+ margin-top: 0.5em;
2616
+ margin-bottom: 0.5em;
2617
+ }
2618
+ qti-item-body :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2619
+ padding-left: 0.375em;
2620
+ }
2621
+ qti-item-body :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2622
+ padding-left: 0.375em;
2623
+ }
2624
+ qti-item-body :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2625
+ margin-top: 0.75em;
2626
+ margin-bottom: 0.75em;
2627
+ }
2628
+ qti-item-body :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2629
+ margin-top: 1.25em;
2630
+ }
2631
+ qti-item-body :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2632
+ margin-bottom: 1.25em;
2633
+ }
2634
+ qti-item-body :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2635
+ margin-top: 1.25em;
2636
+ }
2637
+ qti-item-body :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2638
+ margin-bottom: 1.25em;
2639
+ }
2640
+ qti-item-body :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2641
+ margin-top: 0.75em;
2642
+ margin-bottom: 0.75em;
2643
+ }
2644
+ qti-item-body :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2645
+ margin-top: 1.25em;
2646
+ margin-bottom: 1.25em;
2647
+ }
2648
+ qti-item-body :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2649
+ margin-top: 0.5em;
2650
+ padding-left: 1.625em;
2651
+ }
2652
+ qti-item-body :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2653
+ margin-top: 0;
2654
+ }
2655
+ qti-item-body :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2656
+ margin-top: 0;
2657
+ }
2658
+ qti-item-body :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2659
+ margin-top: 0;
2660
+ }
2661
+ qti-item-body :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2662
+ margin-top: 0;
2663
+ }
2664
+ qti-item-body :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2665
+ padding-left: 0;
2666
+ }
2667
+ qti-item-body :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2668
+ padding-right: 0;
2669
+ }
2670
+ qti-item-body :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2671
+ padding-top: 0.5714286em;
2672
+ padding-right: 0.5714286em;
2673
+ padding-bottom: 0.5714286em;
2674
+ padding-left: 0.5714286em;
2675
+ }
2676
+ qti-item-body :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2677
+ padding-left: 0;
2678
+ }
2679
+ qti-item-body :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2680
+ padding-right: 0;
2681
+ }
2682
+ qti-item-body :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2683
+ margin-top: 2em;
2684
+ margin-bottom: 2em;
2685
+ }
2686
+ qti-item-body :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2687
+ margin-top: 0;
2688
+ }
2689
+ qti-item-body :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
2690
+ margin-bottom: 0;
2691
+ }
package/dist/styles.css CHANGED
@@ -1750,54 +1750,11 @@ qti-graphic-gap-match-interaction img{
1750
1750
  }
1751
1751
  qti-slider-interaction{
1752
1752
  display: block; /* else no screenshot will be made with html-to-image */
1753
- }
1754
- qti-slider-interaction:hover{
1755
- --tw-bg-opacity: 1;
1756
- background-color: rgb(249 250 251 / var(--tw-bg-opacity));
1757
- }
1758
- qti-slider-interaction:focus{
1759
- outline-width: 2px;
1760
- outline-color: #93c5fd;
1761
- }
1762
- qti-slider-interaction[aria-checked="true"]{
1763
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1764
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1765
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1766
- --tw-ring-opacity: 1;
1767
- --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
1768
- }
1769
- qti-slider-interaction[aria-disabled="true"]{
1770
- cursor: not-allowed;
1771
- --tw-bg-opacity: 1;
1772
- background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1773
- --tw-text-opacity: 1;
1774
- color: rgb(107 114 128 / var(--tw-text-opacity));
1775
- --tw-shadow: 0 0 #0000;
1776
- --tw-shadow-colored: 0 0 #0000;
1777
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1778
- --tw-ring-opacity: 1;
1779
- --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
1780
- }
1781
- qti-slider-interaction[aria-disabled="true"] > *{
1782
- --tw-text-opacity: 1 !important;
1783
- color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
1784
- }
1785
- qti-slider-interaction[aria-readonly="true"]{
1786
- cursor: pointer;
1787
- --tw-bg-opacity: 1;
1788
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
1789
- --tw-shadow: 0 0 #0000;
1790
- --tw-shadow-colored: 0 0 #0000;
1791
- box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
1792
- outline-width: 0px;
1793
- --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1794
- --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1795
- box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1796
- }
1797
- qti-slider-interaction {
1753
+
1754
+ /* @apply hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis; */
1798
1755
 
1799
1756
  --qti-tick-color: rgb(229 231 235 / 1);
1800
- --qti-tick-width: 2px;
1757
+ --qti-tick-width: 1px;
1801
1758
  }
1802
1759
  qti-slider-interaction::part(slider){
1803
1760
  margin-left: 2rem;
@@ -1829,12 +1786,12 @@ qti-slider-interaction::part(rail){
1829
1786
  display: flex;
1830
1787
  align-items: center; /* so the knob is neatly centered vertically */
1831
1788
  /* DESIGN */
1832
- box-sizing: border-box; /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */ height: 0.75rem; width: 100%; cursor: pointer; border-radius: 9999px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity));
1789
+ box-sizing: border-box; /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */ height: 0.375rem; width: 100%; cursor: pointer; border-radius: 9999px; border-width: 1px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(229 231 235 / var(--tw-bg-opacity));
1833
1790
  }
1834
1791
  qti-slider-interaction::part(knob){
1835
1792
  position: relative;
1836
- height: 1.5rem;
1837
- width: 1.5rem;
1793
+ height: 1rem;
1794
+ width: 1rem;
1838
1795
  transform-origin: center;
1839
1796
  --tw-translate-x: -50%;
1840
1797
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1850,7 +1807,7 @@ qti-slider-interaction{
1850
1807
  }
1851
1808
  qti-slider-interaction::part(value){
1852
1809
  position: absolute;
1853
- bottom: 2rem; /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ left: 0.75rem; /* should be half width of the knob if you want to center these two */ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); cursor: pointer; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center;
1810
+ bottom: 2rem; /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ left: 0.5rem; /* should be half width of the knob if you want to center these two */ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); cursor: pointer; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity)); padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.25rem; padding-bottom: 0.25rem; text-align: center; --tw-text-opacity: 1; color: rgb(107 114 128 / var(--tw-text-opacity));
1854
1811
  }
1855
1812
  qti-select-point-interaction::part(point):hover{
1856
1813
  background-color: rgb(219 234 254 / var(--tw-bg-opacity));
package/package.json CHANGED
@@ -12,7 +12,7 @@
12
12
  "engines": {
13
13
  "node": ">=16.0.0"
14
14
  },
15
- "version": "6.5.0",
15
+ "version": "6.5.1",
16
16
  "type": "module",
17
17
  "main": "dist/index.js",
18
18
  "exports": {
@@ -29,8 +29,8 @@
29
29
  "require": "./dist/qti-transformers/index.cjs"
30
30
  },
31
31
  "./*.css": {
32
- "import": "./dist/*.css",
33
- "require": "./dist/*.css"
32
+ "import": "./src/**/*.css",
33
+ "require": "./src/**/*.css"
34
34
  }
35
35
  },
36
36
  "types": "./dist/qti-components/index.d.ts",
@@ -79,15 +79,11 @@
79
79
  },
80
80
  "dependencies": {
81
81
  "@lit/context": "^1.0.0",
82
- "@lit/react": "^1.0.0",
83
- "cheerio": "^1.0.0-rc.12",
84
82
  "lit": "^3.0.0"
85
83
  },
86
84
  "peerdependencies": {
87
85
  "@lit/context": ">= 1.0",
88
- "@lit/react": ">= 1.0",
89
- "lit": ">= 3 < 4",
90
- "react": "> 18"
86
+ "lit": ">= 3 < 4"
91
87
  },
92
88
  "devDependencies": {
93
89
  "@arethetypeswrong/cli": "^0.12.2",
@@ -140,7 +136,8 @@
140
136
  "tsup": "^7.2.0",
141
137
  "typescript": "^5.2.2",
142
138
  "vite": "^4.5.0",
143
- "vite-tsconfig-paths": "^4.2.1"
139
+ "vite-tsconfig-paths": "^4.2.1",
140
+ "wc-storybook-helpers": "^1.0.9"
144
141
  },
145
142
  "customElements": "custom-elements.json"
146
143
  }