@citolab/qti-components 6.5.0 → 6.5.2

package/dist/qti-transformers/index.cjs

@@ -33,4 +33,4 @@
     <xsl:apply-templates/>
   </xsl:element>
 </xsl:template>
-</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;
+</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

@@ -33,4 +33,4 @@ import"../chunk-343LZK3D.js";var p=()=>{let r,n={async load(e){return new Promis
     <xsl:apply-templates/>
   </xsl:element>
 </xsl:template>
-</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};
+</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

@@ -2138,54 +2138,11 @@ qti-graphic-gap-match-interaction img{
 }
 qti-slider-interaction{
   display: block; /* else no screenshot will be made with html-to-image */
-}
-qti-slider-interaction:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-qti-slider-interaction:focus{
-  outline-width: 2px;
-  outline-color: #93c5fd;
-}
-qti-slider-interaction[aria-checked="true"]{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
-}
-qti-slider-interaction[aria-disabled="true"]{
-  cursor: not-allowed;
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
-}
-qti-slider-interaction[aria-disabled="true"] > *{
-  --tw-text-opacity: 1 !important;
-  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
-}
-qti-slider-interaction[aria-readonly="true"]{
-  cursor: pointer;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-width: 0px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-qti-slider-interaction {
+
+  /* @apply hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis; */
 
   --qti-tick-color: rgb(229 231 235 / 1);
-  --qti-tick-width: 2px;
+  --qti-tick-width: 1px;
 }
 qti-slider-interaction::part(slider){
   margin-left: 2rem;
@@ -2217,12 +2174,12 @@ qti-slider-interaction::part(rail){
   display: flex;
   align-items: center; /* so the knob is neatly centered vertically */
     /* DESIGN */
-    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));
+    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));
 }
 qti-slider-interaction::part(knob){
   position: relative;
-  height: 1.5rem;
-  width: 1.5rem;
+  height: 1rem;
+  width: 1rem;
   transform-origin: center;
   --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));
@@ -2238,7 +2195,7 @@ qti-slider-interaction{
 }
 qti-slider-interaction::part(value){
   position: absolute;
-  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;
+  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));
 }
 qti-select-point-interaction::part(point):hover{
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
@@ -2317,3 +2274,418 @@ qti-choice-interaction.qti-orientation-horizontal {
 qti-choice-interaction[orientation='horizontal'] {
     flex-direction: row;
   }
+qti-item-body{
+  color: var(--tw-prose-body);
+  max-width: 65ch;
+}
+qti-item-body :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+qti-item-body :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-lead);
+  font-size: 1.25em;
+  line-height: 1.6;
+  margin-top: 1.2em;
+  margin-bottom: 1.2em;
+}
+qti-item-body :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-links);
+  text-decoration: underline;
+  font-weight: 500;
+}
+qti-item-body :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-bold);
+  font-weight: 600;
+}
+qti-item-body :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: inherit;
+}
+qti-item-body :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: inherit;
+}
+qti-item-body :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: inherit;
+}
+qti-item-body :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: decimal;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+qti-item-body :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: upper-alpha;
+}
+qti-item-body :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: lower-alpha;
+}
+qti-item-body :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: upper-alpha;
+}
+qti-item-body :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: lower-alpha;
+}
+qti-item-body :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: upper-roman;
+}
+qti-item-body :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: lower-roman;
+}
+qti-item-body :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: upper-roman;
+}
+qti-item-body :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: lower-roman;
+}
+qti-item-body :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: decimal;
+}
+qti-item-body :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  list-style-type: disc;
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+  padding-left: 1.625em;
+}
+qti-item-body :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
+  font-weight: 400;
+  color: var(--tw-prose-counters);
+}
+qti-item-body :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{
+  color: var(--tw-prose-bullets);
+}
+qti-item-body :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  margin-top: 1.25em;
+}
+qti-item-body :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  border-color: var(--tw-prose-hr);
+  border-top-width: 1px;
+  margin-top: 3em;
+  margin-bottom: 3em;
+}
+qti-item-body :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  font-weight: 500;
+  font-style: italic;
+  color: var(--tw-prose-quotes);
+  border-left-width: 0.25rem;
+  border-left-color: var(--tw-prose-quote-borders);
+  quotes: "\201C""\201D""\2018""\2019";
+  margin-top: 1.6em;
+  margin-bottom: 1.6em;
+  padding-left: 1em;
+}
+qti-item-body :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
+  content: open-quote;
+}
+qti-item-body :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
+  content: close-quote;
+}
+qti-item-body :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-headings);
+  font-weight: 800;
+  font-size: 2.25em;
+  margin-top: 0;
+  margin-bottom: 0.8888889em;
+  line-height: 1.1111111;
+}
+qti-item-body :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  font-weight: 900;
+  color: inherit;
+}
+qti-item-body :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-headings);
+  font-weight: 700;
+  font-size: 1.5em;
+  margin-top: 2em;
+  margin-bottom: 1em;
+  line-height: 1.3333333;
+}
+qti-item-body :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  font-weight: 800;
+  color: inherit;
+}
+qti-item-body :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  font-size: 1.25em;
+  margin-top: 1.6em;
+  margin-bottom: 0.6em;
+  line-height: 1.6;
+}
+qti-item-body :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  font-weight: 700;
+  color: inherit;
+}
+qti-item-body :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+  line-height: 1.5;
+}
+qti-item-body :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  font-weight: 700;
+  color: inherit;
+}
+qti-item-body :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+qti-item-body :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  display: block;
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+qti-item-body :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  font-weight: 500;
+  font-family: inherit;
+  color: var(--tw-prose-kbd);
+  box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%);
+  font-size: 0.875em;
+  border-radius: 0.3125rem;
+  padding-top: 0.1875em;
+  padding-right: 0.375em;
+  padding-bottom: 0.1875em;
+  padding-left: 0.375em;
+}
+qti-item-body :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-code);
+  font-weight: 600;
+  font-size: 0.875em;
+}
+qti-item-body :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
+  content: "`";
+}
+qti-item-body :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
+  content: "`";
+}
+qti-item-body :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: inherit;
+}
+qti-item-body :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: inherit;
+}
+qti-item-body :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: inherit;
+  font-size: 0.875em;
+}
+qti-item-body :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: inherit;
+  font-size: 0.9em;
+}
+qti-item-body :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: inherit;
+}
+qti-item-body :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: inherit;
+}
+qti-item-body :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: inherit;
+}
+qti-item-body :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-pre-code);
+  background-color: var(--tw-prose-pre-bg);
+  overflow-x: auto;
+  font-weight: 400;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+  margin-top: 1.7142857em;
+  margin-bottom: 1.7142857em;
+  border-radius: 0.375rem;
+  padding-top: 0.8571429em;
+  padding-right: 1.1428571em;
+  padding-bottom: 0.8571429em;
+  padding-left: 1.1428571em;
+}
+qti-item-body :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  background-color: transparent;
+  border-width: 0;
+  border-radius: 0;
+  padding: 0;
+  font-weight: inherit;
+  color: inherit;
+  font-size: inherit;
+  font-family: inherit;
+  line-height: inherit;
+}
+qti-item-body :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{
+  content: none;
+}
+qti-item-body :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{
+  content: none;
+}
+qti-item-body :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  width: 100%;
+  table-layout: auto;
+  text-align: left;
+  margin-top: 2em;
+  margin-bottom: 2em;
+  font-size: 0.875em;
+  line-height: 1.7142857;
+}
+qti-item-body :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  border-bottom-width: 1px;
+  border-bottom-color: var(--tw-prose-th-borders);
+}
+qti-item-body :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-headings);
+  font-weight: 600;
+  vertical-align: bottom;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+qti-item-body :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  border-bottom-width: 1px;
+  border-bottom-color: var(--tw-prose-td-borders);
+}
+qti-item-body :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  border-bottom-width: 0;
+}
+qti-item-body :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  vertical-align: baseline;
+}
+qti-item-body :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  border-top-width: 1px;
+  border-top-color: var(--tw-prose-th-borders);
+}
+qti-item-body :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  vertical-align: top;
+}
+qti-item-body :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0;
+  margin-bottom: 0;
+}
+qti-item-body :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  color: var(--tw-prose-captions);
+  font-size: 0.875em;
+  line-height: 1.4285714;
+  margin-top: 0.8571429em;
+}
+qti-item-body{
+  --tw-prose-body: #374151;
+  --tw-prose-headings: #111827;
+  --tw-prose-lead: #4b5563;
+  --tw-prose-links: #111827;
+  --tw-prose-bold: #111827;
+  --tw-prose-counters: #6b7280;
+  --tw-prose-bullets: #d1d5db;
+  --tw-prose-hr: #e5e7eb;
+  --tw-prose-quotes: #111827;
+  --tw-prose-quote-borders: #e5e7eb;
+  --tw-prose-captions: #6b7280;
+  --tw-prose-kbd: #111827;
+  --tw-prose-kbd-shadows: 17 24 39;
+  --tw-prose-code: #111827;
+  --tw-prose-pre-code: #e5e7eb;
+  --tw-prose-pre-bg: #1f2937;
+  --tw-prose-th-borders: #d1d5db;
+  --tw-prose-td-borders: #e5e7eb;
+  --tw-prose-invert-body: #d1d5db;
+  --tw-prose-invert-headings: #fff;
+  --tw-prose-invert-lead: #9ca3af;
+  --tw-prose-invert-links: #fff;
+  --tw-prose-invert-bold: #fff;
+  --tw-prose-invert-counters: #9ca3af;
+  --tw-prose-invert-bullets: #4b5563;
+  --tw-prose-invert-hr: #374151;
+  --tw-prose-invert-quotes: #f3f4f6;
+  --tw-prose-invert-quote-borders: #374151;
+  --tw-prose-invert-captions: #9ca3af;
+  --tw-prose-invert-kbd: #fff;
+  --tw-prose-invert-kbd-shadows: 255 255 255;
+  --tw-prose-invert-code: #fff;
+  --tw-prose-invert-pre-code: #d1d5db;
+  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
+  --tw-prose-invert-th-borders: #4b5563;
+  --tw-prose-invert-td-borders: #374151;
+  font-size: 1rem;
+  line-height: 1.75;
+}
+qti-item-body :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0;
+  margin-bottom: 0;
+}
+qti-item-body :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+qti-item-body :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0.5em;
+  margin-bottom: 0.5em;
+}
+qti-item-body :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  padding-left: 0.375em;
+}
+qti-item-body :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  padding-left: 0.375em;
+}
+qti-item-body :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+qti-item-body :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 1.25em;
+}
+qti-item-body :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-bottom: 1.25em;
+}
+qti-item-body :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 1.25em;
+}
+qti-item-body :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-bottom: 1.25em;
+}
+qti-item-body :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0.75em;
+  margin-bottom: 0.75em;
+}
+qti-item-body :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 1.25em;
+  margin-bottom: 1.25em;
+}
+qti-item-body :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0.5em;
+  padding-left: 1.625em;
+}
+qti-item-body :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0;
+}
+qti-item-body :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0;
+}
+qti-item-body :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0;
+}
+qti-item-body :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0;
+}
+qti-item-body :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  padding-left: 0;
+}
+qti-item-body :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  padding-right: 0;
+}
+qti-item-body :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  padding-top: 0.5714286em;
+  padding-right: 0.5714286em;
+  padding-bottom: 0.5714286em;
+  padding-left: 0.5714286em;
+}
+qti-item-body :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  padding-left: 0;
+}
+qti-item-body :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  padding-right: 0;
+}
+qti-item-body :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 2em;
+  margin-bottom: 2em;
+}
+qti-item-body :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-top: 0;
+}
+qti-item-body :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){
+  margin-bottom: 0;
+}

package/dist/styles.css

@@ -1750,54 +1750,11 @@ qti-graphic-gap-match-interaction img{
 }
 qti-slider-interaction{
   display: block; /* else no screenshot will be made with html-to-image */
-}
-qti-slider-interaction:hover{
-  --tw-bg-opacity: 1;
-  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
-}
-qti-slider-interaction:focus{
-  outline-width: 2px;
-  outline-color: #93c5fd;
-}
-qti-slider-interaction[aria-checked="true"]{
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
-}
-qti-slider-interaction[aria-disabled="true"]{
-  cursor: not-allowed;
-  --tw-bg-opacity: 1;
-  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
-  --tw-text-opacity: 1;
-  color: rgb(107 114 128 / var(--tw-text-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  --tw-ring-opacity: 1;
-  --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
-}
-qti-slider-interaction[aria-disabled="true"] > *{
-  --tw-text-opacity: 1 !important;
-  color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
-}
-qti-slider-interaction[aria-readonly="true"]{
-  cursor: pointer;
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-  outline-width: 0px;
-  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
-  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
-}
-qti-slider-interaction {
+
+  /* @apply hover:hov focus:foc aria-checked:act aria-readonly:rdo aria-disabled:dis; */
 
   --qti-tick-color: rgb(229 231 235 / 1);
-  --qti-tick-width: 2px;
+  --qti-tick-width: 1px;
 }
 qti-slider-interaction::part(slider){
   margin-left: 2rem;
@@ -1829,12 +1786,12 @@ qti-slider-interaction::part(rail){
   display: flex;
   align-items: center; /* so the knob is neatly centered vertically */
     /* DESIGN */
-    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));
+    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));
 }
 qti-slider-interaction::part(knob){
   position: relative;
-  height: 1.5rem;
-  width: 1.5rem;
+  height: 1rem;
+  width: 1rem;
   transform-origin: center;
   --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));
@@ -1850,7 +1807,7 @@ qti-slider-interaction{
 }
 qti-slider-interaction::part(value){
   position: absolute;
-  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;
+  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));
 }
 qti-select-point-interaction::part(point):hover{
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));

package/package.json

@@ -12,7 +12,7 @@
   "engines": {
     "node": ">=16.0.0"
   },
-  "version": "6.5.0",
+  "version": "6.5.2",
   "type": "module",
   "main": "dist/index.js",
   "exports": {
@@ -28,10 +28,8 @@
       "import": "./dist/qti-transformers/index.js",
       "require": "./dist/qti-transformers/index.cjs"
     },
-    "./*.css": {
-      "import": "./dist/*.css",
-      "require": "./dist/*.css"
-    }
+    "./styles.bundled.css": "./dist/styles.bundled.css",
+    "./styles.css": "./dist/styles.css"
   },
   "types": "./dist/qti-components/index.d.ts",
   "typesVersions": {
@@ -51,8 +49,7 @@
     "dist",
     "types",
     "./dist/styles.css",
-    "./dist/styles.bundled.css",
-    "./src/styles/**/*.css"
+    "./dist/styles.bundled.css"
   ],
   "scripts": {
     "test": "jest",
@@ -79,15 +76,11 @@
   },
   "dependencies": {
     "@lit/context": "^1.0.0",
-    "@lit/react": "^1.0.0",
-    "cheerio": "^1.0.0-rc.12",
     "lit": "^3.0.0"
   },
   "peerdependencies": {
     "@lit/context": ">= 1.0",
-    "@lit/react": ">= 1.0",
-    "lit": ">= 3 < 4",
-    "react": "> 18"
+    "lit": ">= 3 < 4"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.12.2",
@@ -140,7 +133,8 @@
     "tsup": "^7.2.0",
     "typescript": "^5.2.2",
     "vite": "^4.5.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-tsconfig-paths": "^4.2.1",
+    "wc-storybook-helpers": "^1.0.9"
   },
   "customElements": "custom-elements.json"
 }