@qti-components/theme 1.3.3 → 1.5.0

package/dist/item.css

@@ -1582,8 +1582,8 @@
   --qti-border-active: #f86d70;
 
   /* Correct colors */
-  --qti-correct-light: #c8e6c9;
-  --qti-correct: #66bb6a;
+  --qti-correct-light: #e8f5e9;
+  --qti-correct: #2e7d32;
 
   /** Partially correct colors */
   --qti-partially-correct-light: #fff3e0;
@@ -2220,6 +2220,25 @@
       align-items: center;
       cursor: grab;
     }
+    /* Editor fake-drag projected into a filled <qti-associable-hotspot>'s
+       shadow. Same `drag` styling so editor previews match runtime. */
+    & qti-associable-hotspot::part(drag) {
+      &:hover {
+      }
+      &:focus {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
+      box-sizing: border-box;
+      transition: transform 200ms ease-out,
+    box-shadow 200ms ease-out,
+    rotate 200ms ease-out;
+      cursor: grab;
+      background-color: var(--qti-bg);
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+      border-radius: var(--qti-border-radius);
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+      outline: none
+    }
     & qti-associable-hotspot {
       display: flex;
       justify-content: center;
@@ -2372,6 +2391,25 @@
     &:state(--dragzone-enabled)::part(drags) {
       background-color: var(--qti-bg-active);
     }
+    /* Editor fake-drag projected into a filled <qti-gap>'s shadow. Same `drag`
+       styling so the editor preview matches runtime when a gap is filled. */
+    & qti-gap::part(drag) {
+      &:hover {
+      }
+      &:focus {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
+      box-sizing: border-box;
+      transition: transform 200ms ease-out,
+    box-shadow 200ms ease-out,
+    rotate 200ms ease-out;
+      cursor: grab;
+      background-color: var(--qti-bg);
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+      border-radius: var(--qti-border-radius);
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+      outline: none
+    }
     & qti-gap-text {
       &[dragging] {
         pointer-events: none;
@@ -2948,6 +2986,27 @@
       background-color: var(--qti-incorrect, #f44336) !important;
     }
   }
+  /* Editor fake-drag projected into the target choice's `dropslot` shadow.
+     Reuses the same `drag` styling so the editor preview matches what students
+     see when an answer is dropped onto a target at runtime. */
+  qti-simple-associable-choice::part(drag) {
+    &:hover {
+    }
+    &:focus {
+      box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+    }
+    box-sizing: border-box;
+    transition: transform 200ms ease-out,
+    box-shadow 200ms ease-out,
+    rotate 200ms ease-out;
+    cursor: grab;
+    background-color: var(--qti-bg);
+    padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+    border-radius: var(--qti-border-radius);
+    border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+    outline: none
+  }
+
   qti-match-interaction:not(.qti-match-tabular) {
     &:state(--dragzone-enabled) qti-simple-match-set:first-of-type {
       background-color: var(--qti-bg-active);
@@ -3091,7 +3150,10 @@
       background-color: var(--qti-bg-active);
     }
     &::part(qti-simple-choice),
-    & qti-simple-choice {
+    & qti-simple-choice,
+    /* Editor fake-drag projected into the interaction's drop-list shadow.
+       Same `drag` styling so editor previews match runtime visuals. */
+    &::part(drag) {
       &[dragging] {
         pointer-events: none;
         rotate: -2deg;
@@ -3245,7 +3307,10 @@
       background-color: var(--qti-bg-active);
     }
     & qti-simple-associable-choice,
-    &::part(qti-simple-associable-choice) {
+    &::part(qti-simple-associable-choice),
+    /* Editor fake-drag projected into the interaction's drop-list shadow.
+       Same `drag` styling so editor previews match runtime visuals. */
+    &::part(drag) {
       &:hover {
       }
       &:focus {
@@ -3534,6 +3599,26 @@
   }
 }
 
+/* Apply .rubric-block for styling qti-rubric-block content */
+
+.rubric-block {
+  display: block;
+  border-left: 4px solid var(--qti-correct);
+  background-color: var(--qti-correct-light);
+  color: var(--qti-correct);
+  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+  border-radius: var(--qti-border-radius);
+}
+
+qti-rubric-block {
+  display: block;
+  border-left: 4px solid var(--qti-correct);
+  background-color: var(--qti-correct-light);
+  color: var(--qti-correct);
+  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+  border-radius: var(--qti-border-radius);
+}
+
 [view],
 qti-outcome-declaration,
 qti-response-declaration {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@qti-components/theme",
   "description": "QTI theme utilities",
-  "version": "1.3.3",
+  "version": "1.5.0",
   "author": "",
   "exports": {
     "./item.css": "./dist/item.css",