@citolab/qti-components 7.23.0 → 7.25.0

package/dist/item.css

@@ -2030,25 +2030,20 @@
 
     &.qti-input-control-hidden {
       & qti-simple-choice {
-        position: relative; /* Add position relative here instead of a separate rule */
-
+        position: relative;
         &:hover {
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
         &::part(ch) {
           display: none;
         }
-
         &:state(--checked),
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
         &:state(readonly),
         &[aria-readonly='true'] {
           cursor: pointer;
@@ -2056,7 +2051,6 @@
           outline: 0;
           border: none;
         }
-
         &:state(disabled),
         &[aria-disabled='true'] {
           cursor: not-allowed;
@@ -2065,13 +2059,10 @@
           border-color: var(--qti-border-color);
           outline: 4px solid var(--qti-disabled-bg);
         }
-
-        /* Add styling for correct responses with border instead of checkmark */
         &:state(correct-response),
         &[data-correct-response='true'] {
           border: 3px solid var(--qti-correct) !important;
           padding-right: 30px;
-
           &::after {
             content: '\02714';
             color: var(--qti-correct);
@@ -2092,28 +2083,22 @@
 
     &:not(.qti-input-control-hidden) {
       & qti-simple-choice {
-
         &:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {
         }
-
         &:focus {
           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(candidate-correct) {
           background-color: var(--qti-correct);
         }
-
         &:state(candidate-incorrect) {
           background-color: var(--qti-incorrect);
         }
-
         &:state(readonly),
         &[aria-readonly='true'] {
           cursor: pointer;
@@ -2121,7 +2106,6 @@
           outline: 0;
           border: none;
         }
-
         &:state(disabled),
         &[aria-disabled='true'] {
           cursor: not-allowed;
@@ -2130,12 +2114,10 @@
           border-color: var(--qti-border-color);
           outline: 4px solid var(--qti-disabled-bg);
         }
-
         &::part(cha) {
           width: calc(var(--qti-form-size) - 6px);
           height: calc(var(--qti-form-size) - 6px);
         }
-
         &:state(radio)::part(ch) {
           border-radius: 100%;
           display: grid;
@@ -2145,12 +2127,10 @@
           border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
           outline: none;
         }
-
         &:state(radio):state(--checked)::part(cha) {
           background-color: var(--qti-border-active);
           border-radius: 100%;
         }
-
         &:state(checkbox)::part(ch) {
           display: flex;
           place-items: center;
@@ -2162,23 +2142,16 @@
           border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
           outline: none;
         }
-
         &:state(checkbox):state(--checked)::part(cha) {
           background-color: var(--qti-border-active);
           -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
                   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
         }
-
         gap: 0.5rem;
-
         background-color: var(--qti-bg);
-
         border-radius: var(--qti-border-radius);
-
         padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
         outline: none;
-
         cursor: pointer
       }
     }
@@ -2187,8 +2160,6 @@
       width: -moz-fit-content;
       width: fit-content;
       cursor: pointer;
-
-      /* Keep the checkmark for non-hidden input controls */
       &:state(correct-response),
       &[data-correct-response='true'] {
         &::after {
@@ -2203,11 +2174,9 @@
       padding: 0 !important;
     }
   }
+}
 
-  .hover-border {
-    border: 2px solid #000; /* Adjust the border style and color as needed */
-  }
-
+@layer qti-components {
   qti-graphic-gap-match-interaction {
     &::part(message) {
       display: none;
@@ -2218,41 +2187,32 @@
       border-radius: 4px;
       margin-top: 8px;
     }
-
     position: relative;
-
     &.qti-selections-light {
       &:state(--dragzone-active)::part(drags) {
         background-color: var(--qti-light-bg-active);
         border-color: var(--qti-light-border-active);
       }
-
       &:state(--dragzone-enabled)::part(drags) {
         background-color: var(--qti-light-bg-active);
       }
     }
-
     &.qti-selections-dark {
       &:state(--dragzone-active)::part(drags) {
         background-color: var(--qti-dark-bg-active);
         border-color: var(--qti-dark-border-active);
       }
-
       &:state(--dragzone-enabled)::part(drags) {
         background-color: var(--qti-dark-bg-active);
       }
     }
-
-    /* General styles for active and enabled states */
     &:state(--dragzone-active)::part(drags) {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
     &:state(--dragzone-enabled)::part(drags) {
       background-color: var(--qti-bg-active);
     }
-
     & qti-gap-img,
     qti-gap-text {
       display: flex;
@@ -2260,36 +2220,25 @@
       align-items: center;
       cursor: grab;
     }
-
     & qti-associable-hotspot {
       display: flex;
       justify-content: center;
       align-items: center;
       border: 2px solid transparent;
-
       &[enabled] {
-
-        /* Light theme override */
         .qti-selections-light {
           background-color: var(--qti-light-bg-active);
         }
-
-        /* Dark theme override */
         .qti-selections-dark {
           background-color: var(--qti-dark-bg-active);
         }
         background-color: var(--qti-bg-active)
       }
-
       &[active] {
-
-        /* Light theme override */
         .qti-selections-light {
           background-color: var(--qti-light-bg-active);
           border-color: var(--qti-light-border-active);
         }
-
-        /* Dark theme override */
         .qti-selections-dark {
           background-color: var(--qti-dark-bg-active);
           border-color: var(--qti-dark-border-active);
@@ -2297,66 +2246,54 @@
         border-color: var(--qti-border-active);
         background-color: var(--qti-bg-active)
       }
-
       &[disabled] {
-
         &:not(:empty) {
           cursor: default !important;
         }
-
         cursor: not-allowed;
-
         background-color: var(--qti-disabled-bg);
-
         color: var(--qti-disabled-color);
-
         border-color: var(--qti-border-color);
-
         outline: 4px solid var(--qti-disabled-bg)
       }
-
       &:empty::after {
-        padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
-        content: '\0000a0'; /* when empty, put a space in it */
+        padding: var(--qti-padding-md) var(--qti-padding-lg);
+        content: '\0000a0';
       }
-
       &:not(:empty) {
         padding: 0;
         width: auto;
       }
-
       &:not(:empty) > * {
         flex: 1;
-        transform: rotate(0); /* rotate-0 */
-        box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
+        transform: rotate(0);
+        box-shadow: 0 0 0 1px #e5e7eb;
       }
     }
-
     & img {
       margin: 0;
       padding: 0;
     }
   }
+}
 
+@layer qti-components {
   qti-text-entry-interaction {
     &:state(candidate-correct) {
       &::part(input) {
         background-color: var(--qti-correct);
       }
     }
-
     &:state(candidate-partially-correct) {
       &::part(input) {
         background-color: var(--qti-partially-correct);
       }
     }
-
     &:state(candidate-incorrect) {
       &::part(input) {
         background-color: var(--qti-incorrect);
       }
     }
-
     &::part(input) {
       border-radius: 0;
       cursor: text;
@@ -2365,10 +2302,8 @@
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       outline: none;
     }
-
     &:hover {
     }
-
     &:focus-within {
       &::part(input) {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
@@ -2376,7 +2311,9 @@
       }
     }
   }
+}
 
+@layer qti-components {
   qti-extended-text-interaction {
     &::part(textarea) {
       border-radius: 0;
@@ -2386,10 +2323,8 @@
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       outline: none;
     }
-
     &:hover {
     }
-
     &:focus-within {
       &::part(textarea) {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
@@ -2397,125 +2332,89 @@
       }
     }
   }
+}
 
+@layer qti-components {
   qti-gap-match-interaction {
     &.qti-selections-light {
       &:state(--dragzone-active)::part(drags) {
         background-color: var(--qti-light-bg-active);
         border-color: var(--qti-light-border-active);
       }
-
       &:state(--dragzone-enabled)::part(drags) {
         background-color: var(--qti-light-bg-active);
       }
     }
-
     &.qti-selections-dark {
       &:state(--dragzone-active)::part(drags) {
         background-color: var(--qti-dark-bg-active);
         border-color: var(--qti-dark-border-active);
       }
-
       &:state(--dragzone-enabled)::part(drags) {
         background-color: var(--qti-dark-bg-active);
       }
     }
-
-    /* General styles for active and enabled states */
     &:state(--dragzone-active)::part(drags) {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
     &:state(--dragzone-enabled)::part(drags) {
       background-color: var(--qti-bg-active);
     }
-
     & qti-gap-text {
-
       &[dragging] {
         pointer-events: none;
         rotate: -2deg;
         box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
     0 4px 8px rgb(0 0 0 / 10%);
       }
-
       &:hover {
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
       &:state(candidate-correct) {
         background-color: var(--qti-correct);
       }
-
       &:state(candidate-incorrect) {
         background-color: var(--qti-incorrect);
       }
-
       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 {
-
       &[disabled] {
-
         &:not(:empty) {
           cursor: default !important;
         }
-
         cursor: not-allowed;
-
         background-color: var(--qti-disabled-bg);
-
         color: var(--qti-disabled-color);
-
         border-color: var(--qti-border-color);
-
         outline: 4px solid var(--qti-disabled-bg)
       }
-
       &[enabled] {
-
-        /* Light theme override */
         .qti-selections-light {
           border-color: var(--qti-light-border-active);
         }
-
-        /* Dark theme override */
         .qti-selections-dark {
           border-color: var(--qti-dark-border-active);
         }
         background-color: var(--qti-bg-active)
       }
-
       &[active] {
-
-        /* Light theme override */
         .qti-selections-light {
           background-color: var(--qti-light-bg-active);
           border-color: var(--qti-light-border-active);
         }
-
-        /* Dark theme override */
         .qti-selections-dark {
           background-color: var(--qti-dark-bg-active);
           border-color: var(--qti-dark-border-active);
@@ -2523,56 +2422,45 @@
         border-color: var(--qti-border-active);
         background-color: var(--qti-bg-active)
       }
-
       display: inline-flex;
       align-items: center;
-
       &:empty::after {
-        padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
-        content: '\0000a0'; /* when empty, put a space in it */
+        padding: var(--qti-padding-md) var(--qti-padding-lg);
+        content: '\0000a0';
       }
-
       &:not(:empty) {
         display: inline-flex;
         padding: 0;
         width: auto;
       }
-
       &:not(:empty) > * {
         flex: 1;
-        transform: rotate(0); /* rotate-0 */
-        box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
+        transform: rotate(0);
+        box-shadow: 0 0 0 1px #e5e7eb;
       }
-
       border: var(--qti-border-thickness) dashed var(--qti-border-color);
-
       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>')
     center no-repeat;
-
       border-radius: var(--qti-border-radius);
-
       position: relative;
-
       background-color: var(--qti-bg)
     }
   }
+}
 
+@layer qti-components {
   qti-hotspot-interaction {
     & qti-hotspot-choice {
       &[shape='circle'] {
-
         &:hover {
         }
-
         &:focus {
           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);
         }
-
         &:state(--readonly),
         &[aria-readonly='true'] {
           cursor: pointer;
@@ -2580,7 +2468,6 @@
           outline: 0;
           border: none;
         }
-
         &:state(--disabled),
         &[aria-disabled='true'] {
           cursor: not-allowed;
@@ -2589,48 +2476,30 @@
           border-color: var(--qti-border-color);
           outline: 4px solid var(--qti-disabled-bg);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         margin: 0;
-
         padding: 0;
-
         border: 0;
-
         box-sizing: border-box;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
         outline: none
       }
-
       &[shape='rect'] {
-
-        /* &:hover {
-          @apply hov;
-        } */
-
         &:focus {
           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);
         }
-
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
@@ -2638,26 +2507,16 @@
           border-color: var(--qti-border-color);
           outline: 4px solid var(--qti-disabled-bg);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         margin: 0;
-
         padding: 0;
-
         border: 0;
-
         box-sizing: border-box;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
         outline: none
       }
-
       &[shape='poly'] {
         &:hover::after {
           content: '';
@@ -2672,7 +2531,6 @@
           );
           display: block;
         }
-
         &:state(--checked)::after,
         &[aria-checked='true']::after {
           content: '';
@@ -2687,14 +2545,12 @@
           );
           display: block;
         }
-
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
@@ -2705,10 +2561,10 @@
       }
     }
   }
+}
 
+@layer qti-components {
   qti-hottext-interaction {
-    /* &:not(.qti-input-control-hidden),
-    &:not(.qti-unselected-hidden) { */
     &::part(message) {
       display: none;
       color: var(--qti-validation-text, #000);
@@ -2718,23 +2574,18 @@
       border-radius: 4px;
       margin-top: 8px;
     }
-
     qti-hottext {
       display: inline-flex;
       align-items: center;
-
       &:hover {
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
       &::part(cha) {
         width: calc(var(--qti-form-size) - 6px);
         height: calc(var(--qti-form-size) - 6px);
       }
-
       &:state(radio)::part(ch) {
         border-radius: 100%;
         display: grid;
@@ -2744,12 +2595,10 @@
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
         outline: none;
       }
-
       &:state(radio):state(--checked)::part(cha) {
         background-color: var(--qti-border-active);
         border-radius: 100%;
       }
-
       &:state(checkbox)::part(ch) {
         display: flex;
         place-items: center;
@@ -2761,66 +2610,45 @@
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
         outline: none;
       }
-
       &:state(checkbox):state(--checked)::part(cha) {
         background-color: var(--qti-border-active);
         -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
                 mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
       }
-
       &:state(correct-response),
       &[data-correct-response='true'] {
         &::after {
           content: '\02714';
-          color: #16a34a; /* text-green-600 */
+          color: #16a34a;
         }
       }
-
       gap: 0.5rem;
-
       background-color: var(--qti-bg);
-
       border-radius: var(--qti-border-radius);
-
       padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
       outline: none;
-
       cursor: pointer
     }
-
     &.qti-input-control-hidden {
       qti-hottext {
-        /* --qti-padding-md: 0.1rem;
-        --qti-padding-lg: 0.2rem;
-        --qti-border-radius-md: 0.3rem;
-        --qti-border-thickness: 1px;
-        --qti-font-weight-semibold: 400; */
-
         &:hover {
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
-        /* @layer qti-variants { */
         &::part(ch) {
           display: none;
         }
-
         &:state(--checked) {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
@@ -2828,47 +2656,33 @@
           border-color: var(--qti-border-color);
           outline: 4px solid var(--qti-disabled-bg);
         }
-
         border-radius: var(--qti-border-radius);
-
         padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
         background: var(--qti-bg);
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
         outline: none
       }
-
-      /* } */
     }
-
     &.qti-unselected-hidden {
       qti-hottext {
         &:hover {
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
         cursor: pointer;
-
         &::part(ch) {
           display: none;
         }
-
         &:state(--checked) {
           background-color: var(--qti-bg-active);
         }
-
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
@@ -2879,52 +2693,39 @@
       }
     }
   }
+}
 
+@layer qti-components {
   qti-inline-choice-interaction {
     &:state(candidate-correct) {
       &::part(trigger) {
         background-color: var(--qti-correct);
       }
     }
-
     &:state(candidate-incorrect) {
       &::part(trigger) {
         background-color: var(--qti-incorrect);
       }
     }
-
     &::part(trigger) {
-
       font-size: inherit;
       vertical-align: baseline;
       min-width: var(--qti-calculated-min-width, auto);
-
       &:focus-visible {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
       display: inline-flex;
-
       align-items: center;
-
       justify-content: space-between;
-
       gap: 0.5rem;
-
       border-radius: var(--qti-border-radius);
-
       padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
       background: var(--qti-bg);
-
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
       outline: none
     }
-
     &:not(:state(readonly)):not([readonly])::part(trigger):hover {
     }
-
     &:state(disabled)::part(trigger),
     &[disabled]::part(trigger) {
       cursor: not-allowed;
@@ -2933,7 +2734,6 @@
       border-color: var(--qti-border-color);
       outline: 4px solid var(--qti-disabled-bg);
     }
-
     &:state(readonly)::part(trigger),
     &[readonly]::part(trigger) {
       cursor: pointer;
@@ -2946,33 +2746,21 @@
       border-color: var(--qti-border-color);
       outline: 4px solid var(--qti-disabled-bg);
     }
-
     &::part(dropdown-icon) {
-
       font-size: 1.75em;
-
       display: inline-flex;
-
       align-items: center;
-
       justify-content: center;
-
       flex: 0 0 auto;
-
       transition: transform 150ms ease;
-
       transform-origin: 50% 50%;
-
       color: var(--qti-border-color);
-
       line-height: 1;
     }
-
     &::part(dropdown-icon-open) {
       transform: rotate(180deg);
       color: var(--qti-border-active);
     }
-
     &::part(menu) {
       background: var(--qti-bg);
       border-radius: var(--qti-border-radius);
@@ -2982,7 +2770,6 @@
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       outline: none;
     }
-
     &::part(option) {
       display: flex;
       align-items: center;
@@ -3001,18 +2788,14 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
-
     &::part(option):hover {
     }
-
     &::part(option):focus-visible {
       box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
     }
-
     &::part(option-selected) {
       background-color: var(--qti-bg-active);
     }
-
     & qti-inline-choice {
       display: flex;
       align-items: center;
@@ -3031,19 +2814,18 @@
       overflow: hidden;
       text-overflow: ellipsis;
     }
-
     & qti-inline-choice:hover {
     }
-
     & qti-inline-choice:focus-visible {
       box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
     }
-
     & qti-inline-choice:state(--checked) {
       background-color: var(--qti-bg-active);
     }
   }
+}
 
+@layer qti-components {
   qti-match-interaction.qti-match-tabular {
     &::part(message) {
       display: none;
@@ -3054,52 +2836,41 @@
       border-radius: 4px;
       margin-top: 8px;
     }
-    /* Table element */
     &::part(table) {
       border-collapse: collapse;
       width: 100%;
     }
-
-    /* Row headers - take up remaining space */
     &::part(r-header) {
       background-color: var(--qti-bg-active, #f8f8f8);
       font-weight: 500;
       text-align: center;
       padding: 8px 15px;
       border: 1px solid #ddd;
-      width: auto; /* Let it expand naturally */
-      word-wrap: break-word; /* Allow long words to break */
-      white-space: wrap; /* Allow text to wrap to multiple lines */
-      min-width: 4rem; /* Allow column to shrink below content width */
+      width: auto;
+      word-wrap: break-word;
+      white-space: wrap;
+      min-width: 4rem;
     }
-
-    /* Column headers - minimal width */
     &::part(c-header) {
       background-color: var(--qti-bg-active, #f8f8f8);
       font-weight: 500;
       text-align: left;
       padding: 8px;
       border: 1px solid #ddd;
-      width: 8rem; /* Force minimal width */
-      white-space: normal; /* Prevent wrapping */
+      width: 8rem;
+      white-space: normal;
     }
-
-    /* Table rows */
     &::part(row) {
       border-bottom: 1px solid #ddd;
     }
-
-    /* Input cells - minimal width */
     &::part(input-cell) {
       text-align: center;
       vertical-align: middle;
       height: 48px;
       border: 1px solid #ddd;
       padding: 8px;
-      width: 1%; /* Force minimal width */
+      width: 1%;
     }
-
-    /* Radio button styling */
     &::part(rb) {
       -webkit-appearance: none;
          -moz-appearance: none;
@@ -3113,13 +2884,9 @@
       cursor: pointer;
       display: block;
     }
-
-    /* Radio button checked state */
     &::part(rb-checked) {
       box-shadow: inset 0 0 0 6px var(--qti-border-active, #2196f3);
     }
-
-    /* Checkbox styling */
     &::part(cb) {
       -webkit-appearance: none;
          -moz-appearance: none;
@@ -3133,12 +2900,9 @@
       cursor: pointer;
       display: block;
     }
-
-    /* Checkbox checked state - only change border if we're adding an SVG checkmark */
     &::part(cb-checked) {
       background-color: var(--qti-border-active, #2196f3) !important;
     }
-
     &::part(checkmark) {
       position: absolute;
       width: 18px;
@@ -3147,123 +2911,90 @@
       left: 3px;
       pointer-events: none;
     }
-
-    /* Correct answers for both types */
     &::part(rb-correct) {
       border-color: var(--qti-correct, #4caf50);
     }
-
     &::part(rb-checked rb-correct) {
       box-shadow: inset 0 0 0 6px var(--qti-correct, #4caf50);
     }
-
     &::part(cb-correct) {
       border-color: var(--qti-correct, #4caf50);
     }
-
     &::part(cb-checked cb-correct) {
       background-color: var(--qti-correct, #4caf50) !important;
     }
-
-    /* Incorrect answers for both types */
     &::part(rb-incorrect) {
       border-color: var(--qti-incorrect, #f44336);
     }
-
     &::part(rb-checked rb-incorrect) {
       box-shadow: inset 0 0 0 6px var(--qti-incorrect, #f44336);
     }
-
     &::part(cb-incorrect) {
       border-color: var(--qti-incorrect, #f44336);
     }
-
     &::part(cb-checked cb-incorrect) {
       background-color: var(--qti-incorrect, #f44336) !important;
     }
   }
-
   qti-match-interaction:not(.qti-match-tabular) {
     &:state(--dragzone-enabled) qti-simple-match-set:first-of-type {
       background-color: var(--qti-bg-active);
     }
-
     &:state(--dragzone-active) qti-simple-match-set:first-of-type {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
-    /* The draggables */
     & qti-simple-match-set:first-of-type {
       display: flex;
       flex-wrap: wrap;
-      align-items: flex-start; /* Prevents children from stretching */
+      align-items: flex-start;
       gap: var(--qti-gap-size);
       border: 2px solid transparent;
-
       & qti-simple-associable-choice {
-
         &[dragging] {
           pointer-events: none;
           rotate: -2deg;
           box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
     0 4px 8px rgb(0 0 0 / 10%);
         }
-
         &: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
       }
     }
-
-    /* The droppables */
     & qti-simple-match-set:last-of-type {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
       grid-auto-flow: unset;
       grid-auto-columns: unset;
       gap: var(--qti-gap-size);
-
       & > qti-simple-associable-choice {
-        /* a droppable qti-simple-associable-choice */
         display: flex;
         flex-direction: column;
         justify-content: space-between;
         grid-row: unset;
         box-sizing: border-box;
-
         & img {
           max-width: 100%;
           height: auto;
         }
-
         &[enabled] {
           &::part(dropslot) {
             background-color: var(--qti-bg-active);
           }
         }
-
         &[disabled] {
           &::part(dropslot) {
             cursor: not-allowed;
@@ -3273,27 +3004,22 @@
             outline: 4px solid var(--qti-disabled-bg);
           }
         }
-
         &[active] {
           &::part(dropslot) {
             border-color: var(--qti-border-active);
             background-color: var(--qti-bg-active);
           }
         }
-
         &::part(dropslot) {
-
           &[dragging] {
             pointer-events: none;
             rotate: -2deg;
             box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
     0 4px 8px rgb(0 0 0 / 10%);
           }
-
           &:focus {
             box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
           }
-
           padding: var(--qti-dropzone-padding);
           margin-top: 0.5rem;
           gap: 0.5rem;
@@ -3308,102 +3034,74 @@
           position: relative;
           background-color: var(--qti-bg);
         }
-
         & > *:not(qti-simple-associable-choice) {
           pointer-events: none;
         }
-
         & > qti-simple-associable-choice {
-
           &:state(candidate-correct) {
             background-color: var(--qti-correct);
           }
-
           &:state(candidate-incorrect) {
             background-color: var(--qti-incorrect);
           }
-
           &::part(dropslot) {
             display: none;
           }
-
           &:hover {
           }
-
           &:focus {
             box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
           }
-
           flex-basis: fit-content;
-
           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;
         }
       }
     }
   }
+}
 
+@layer qti-components {
   qti-order-interaction {
     &:state(--dragzone-active)::part(drags) {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
     &:state(--dragzone-enabled)::part(drags) {
       background-color: var(--qti-bg-active);
     }
-
     &::part(qti-simple-choice),
     & qti-simple-choice {
-
       &[dragging] {
         pointer-events: none;
         rotate: -2deg;
         box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
     0 4px 8px rgb(0 0 0 / 10%);
       }
-
       &: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
     }
-
     &::part(qti-simple-choice) {
       display: flex;
       overflow: hidden;
@@ -3411,38 +3109,27 @@
       width: 100%;
       text-overflow: ellipsis;
     }
-
     &::part(drops) {
-      gap: 0.5rem; /* gap-2 */
+      gap: 0.5rem;
     }
-
     &::part(drags) {
-      gap: 0.5rem; /* gap-2 */
+      gap: 0.5rem;
     }
-
     &::part(drop-list) {
-
       &[enabled] {
-
-        /* Light theme override */
         .qti-selections-light {
           border-color: var(--qti-light-border-active);
         }
-
-        /* Dark theme override */
         .qti-selections-dark {
           border-color: var(--qti-dark-border-active);
         }
         background-color: var(--qti-bg-active)
       }
-
       &:hover {
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
       display: flex;
       min-height: 4rem;
       border: var(--qti-border-thickness) dashed var(--qti-border-color);
@@ -3452,34 +3139,27 @@
       position: relative;
       background-color: var(--qti-bg);
     }
-
     &::part(active) {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
     & drop-list {
       &[shape='circle'] {
-
         &:hover {
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
@@ -3487,47 +3167,32 @@
           border-color: var(--qti-border-color);
           outline: 4px solid var(--qti-disabled-bg);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         margin: 0;
-
         padding: 0;
-
         border: 0;
-
         box-sizing: border-box;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
         outline: none
       }
-
       &[shape='square'] {
-
         &:hover {
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
@@ -3535,28 +3200,21 @@
           border-color: var(--qti-border-color);
           outline: 4px solid var(--qti-disabled-bg);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         margin: 0;
-
         padding: 0;
-
         border: 0;
-
         box-sizing: border-box;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
         outline: none
       }
     }
   }
+}
 
+@layer qti-components {
   qti-associate-interaction {
     &::part(message) {
       display: none;
@@ -3567,64 +3225,38 @@
       border-radius: 4px;
       margin-top: 8px;
     }
-    /* General styles for active and enabled states */
     &:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
     &:state(--dragzone-enabled) slot[name='qti-simple-associable-choice'] {
       background-color: var(--qti-bg-active);
     }
-
-    & qti-simple-associable-choice, /* drags when in lightdom */
-    &::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
-
+    & qti-simple-associable-choice,
+    &::part(qti-simple-associable-choice) {
       &:hover {
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
       &[dragging] {
         pointer-events: none;
         rotate: -2deg;
         box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
     0 4px 8px rgb(0 0 0 / 10%);
       }
-
       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
     }
-
-    /* display: flex;
-    overflow: hidden;
-    align-items: center; */
-
-    /* &::part(drop-container) {
-      display: flex;
-      flex-direction: column;
-      gap: var(--qti-gap-size);
-    } */
-
     &::part(drop-list) {
-
       display: grid;
       height: 3rem;
       min-width: 10rem;
@@ -3635,21 +3267,17 @@
       position: relative;
       background-color: var(--qti-bg);
     }
-
     &::part(drop-list):focus {
       box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
     }
-
     &::part(drop-list)[dragging] {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
-    /* &::part(drop-list) {
-      @apply act;
-    } */
   }
+}
 
+@layer qti-components {
   qti-graphic-order-interaction {
     &::part(message) {
       display: none;
@@ -3660,33 +3288,27 @@
       border-radius: 4px;
       margin-top: 8px;
     }
-
     & qti-hotspot-choice {
       width: 100%;
       height: 100%;
       background-color: rgb(128 128 128 / 30%);
       padding: 0;
-
       &:hover {
         background-color: rgb(128 128 128 / 70%);
       }
-
       &:focus {
         background-color: rgb(128 128 128 / 70%);
       }
-
       &:state(--checked),
       &[aria-checked='true'] {
         background-color: rgb(128 128 128 / 70%);
       }
-
       &[aria-readonly='true'] {
         cursor: pointer;
         background-color: var(--qti-bg);
         outline: 0;
         border: none;
       }
-
       &[aria-disabled='true'] {
         cursor: not-allowed;
         background-color: var(--qti-disabled-bg);
@@ -3694,67 +3316,55 @@
         border-color: var(--qti-border-color);
         outline: 4px solid var(--qti-disabled-bg);
       }
-
       &[aria-ordervalue] {
         display: grid;
         place-content: center;
       }
-
       &[aria-ordervalue]::after {
         content: attr(aria-ordervalue) !important;
       }
-
       &[aria-ordercorrectvalue] {
         display: grid;
         place-content: center;
       }
-
-      /* When both attributes are present */
       &[aria-ordercorrectvalue][aria-ordervalue]::after {
         content: 'C=' attr(aria-ordercorrectvalue) '  R=' attr(aria-ordervalue) !important;
         color: var(--qti-correct);
       }
-
-      /* When only aria-ordercorrectvalue is present */
       &[aria-ordercorrectvalue]:not([aria-ordervalue])::after {
         content: 'C=' attr(aria-ordercorrectvalue) !important;
         color: var(--qti-correct);
       }
     }
-
     &.qti-selections-light {
       &:state(--dragzone-active)::part(drags) {
         background-color: var(--qti-light-bg-active);
         border-color: var(--qti-light-border-active);
       }
-
       &:state(--dragzone-enabled)::part(drags) {
         background-color: var(--qti-light-bg-active);
       }
     }
-
     &.qti-selections-dark {
       &:state(--dragzone-active)::part(drags) {
         background-color: var(--qti-dark-bg-active);
         border-color: var(--qti-dark-border-active);
       }
-
       &:state(--dragzone-enabled)::part(drags) {
         background-color: var(--qti-dark-bg-active);
       }
     }
-
-    /* General styles for active and enabled states */
     &:state(--dragzone-active)::part(drags) {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
     &:state(--dragzone-enabled)::part(drags) {
       background-color: var(--qti-bg-active);
     }
   }
+}
 
+@layer qti-components {
   qti-graphic-associate-interaction {
     &::part(message) {
       display: none;
@@ -3767,29 +3377,23 @@
     }
     position: relative;
     display: block;
-
     & qti-associable-hotspot {
       &[shape='circle'] {
-
         &:hover {
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
@@ -3797,47 +3401,32 @@
           border-color: var(--qti-border-color);
           outline: 4px solid var(--qti-disabled-bg);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         margin: 0;
-
         padding: 0;
-
         border: 0;
-
         box-sizing: border-box;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
         outline: none
       }
-
       &[shape='square'] {
-
         &:hover {
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
         &[aria-checked='true'] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
         &[aria-readonly='true'] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &[aria-disabled='true'] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
@@ -3845,108 +3434,89 @@
           border-color: var(--qti-border-color);
           outline: 4px solid var(--qti-disabled-bg);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         margin: 0;
-
         padding: 0;
-
         border: 0;
-
         box-sizing: border-box;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
         outline: none
       }
     }
-
     &.qti-selections-light {
       &:state(--dragzone-active)::part(drags) {
         background-color: var(--qti-light-bg-active);
         border-color: var(--qti-light-border-active);
       }
-
       &:state(--dragzone-enabled)::part(drags) {
         background-color: var(--qti-light-bg-active);
       }
     }
-
     &.qti-selections-dark {
       &:state(--dragzone-active)::part(drags) {
         background-color: var(--qti-dark-bg-active);
         border-color: var(--qti-dark-border-active);
       }
-
       &:state(--dragzone-enabled)::part(drags) {
         background-color: var(--qti-dark-bg-active);
       }
     }
-
-    /* General styles for active and enabled states */
     &:state(--dragzone-active)::part(drags) {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
     &:state(--dragzone-enabled)::part(drags) {
       background-color: var(--qti-bg-active);
     }
   }
+}
 
+@layer qti-components {
   qti-slider-interaction {
     --qti-tick-color: rgb(229 231 235 / 100%);
     --qti-tick-width: 1px;
   }
+}
 
+@layer qti-components {
   qti-select-point-interaction {
     &::part(point) {
       &:hover {
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
       box-sizing: border-box;
-
       border-radius: 100%;
-
       border: 1px solid white;
-
       background-color: black;
-
       opacity: 0.5;
-
       padding: 0;
-
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
       outline: none;
     }
-
     &::part(correct) {
       background-color: var(--qti-correct);
     }
-
     &::part(incorrect) {
       background-color: var(--qti-incorrect);
     }
   }
+}
 
+@layer qti-components {
   qti-position-object-stage {
     & qti-position-object-interaction {
       /* no styles necessary, only layout styles, defined in the component */
     }
   }
+}
 
+@layer qti-components {
   qti-prompt {
-    margin: 0.5rem 0; /* my-2 */
+    margin: 0.5rem 0;
     display: block;
     width: 100%;
   }