@citolab/qti-components 6.9.1-beta.71 → 6.9.1-beta.72

package/dist/index.min.js

@@ -485,7 +485,7 @@ Make sure to test your application with a production build as repeat registratio
       <!-- slot for the prompt -->
       <slot></slot>
       <!-- slot for the image and hotspots -->
-    `}positionHotspotOnRegister(t){let e=this.querySelector("img"),r=t.target,i=r.getAttribute("coords"),o=r.getAttribute("shape"),n=i.split(",").map(a=>parseInt(a));De(o,n,e,r)}connectedCallback(){super.connectedCallback(),this.addEventListener("qti-register-choice",this.positionHotspotOnRegister)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("qti-register-choice",this.positionHotspotOnRegister)}};pt.styles=[g`
+    `}positionHotspotOnRegister(t){let e=this.querySelector("img"),r=t.target,i=r.getAttribute("coords"),o=r.getAttribute("shape"),n=i.split(",").map(a=>parseInt(a));De(o,n,e,r)}connectedCallback(){super.connectedCallback(),this.addEventListener("register-qti-hotspot-choice",this.positionHotspotOnRegister)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("unregister-qti-hotspot-choice",this.positionHotspotOnRegister)}};pt.styles=[g`
       slot:not([name='prompt']) {
         position: relative; /* qti-hotspot-choice relative to the slot */
         display: block;

package/dist/item.css

@@ -2078,6 +2078,7 @@ qti-response-declaration {
       width: fit-content;
       cursor: pointer;
 
+      &:state(correct-response),
       &[data-correct-response='true'] {
         &::after {
           content: '\02714';
@@ -2126,7 +2127,9 @@ qti-response-declaration {
     }
 
     &:focus-within {
-      box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      &::part(textarea) {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
     }
   }
 
@@ -2246,11 +2249,13 @@ qti-response-declaration {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
 
+        &:state(--checked),
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
 
+        &:state(--readonly),
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: var(--qti-bg);
@@ -2258,6 +2263,7 @@ qti-response-declaration {
           border: none;
         }
 
+        &:state(--disabled),
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
@@ -2289,6 +2295,7 @@ qti-response-declaration {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
 
+        &:state(--checked),
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
@@ -2340,6 +2347,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-active);
         }
 
+        &:state(--checked)::after,
         &[aria-checked='true']::after {
 
           content: '';
@@ -2357,6 +2365,7 @@ qti-response-declaration {
           background-color: var(--qti-bg-active);
         }
 
+        &:state(--checked),
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
@@ -2516,7 +2525,7 @@ qti-response-declaration {
         }
 
         &:state(--checked) {
-          background-color: var(--qti-primary-light); /* bg-blue-200 */
+          background-color: var(--qti-bg-active);
         }
 
         &[aria-readonly='true'] {
@@ -2772,7 +2781,7 @@ qti-response-declaration {
         box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
     0 4px 8px rgb(0 0 0 / 10%);
       }
-      
+
       &:hover {
         background-color: var(--qti-hover-bg);
       }
@@ -2830,8 +2839,6 @@ qti-response-declaration {
       gap: 0.5rem; /* gap-2 */
     }
 
-
-    
     &::part(drop-list) {
 
       &[enabled] {