@citolab/qti-components 7.23.0 → 7.25.0

package/dist/{chunk-AIS537EU.js → chunk-IKBPPSNQ.js}

@@ -3,7 +3,7 @@ import {
   f,
   i4 as i,
   w
-} from "./chunk-EGLWHNOX.js";
+} from "./chunk-BHB6PYJG.js";
 
 // ../../node_modules/.pnpm/lit-html@3.3.1/node_modules/lit-html/node/directives/private-async-helpers.js
 var s = class {
@@ -2107,25 +2107,20 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
 
     &.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;
@@ -2133,7 +2128,6 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           outline: 0;
           border: none;
         }
-
         &:state(disabled),
         &[aria-disabled='true'] {
           cursor: not-allowed;
@@ -2142,13 +2136,10 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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);
@@ -2169,28 +2160,22 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
 
     &: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;
@@ -2198,7 +2183,6 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           outline: 0;
           border: none;
         }
-
         &:state(disabled),
         &[aria-disabled='true'] {
           cursor: not-allowed;
@@ -2207,12 +2191,10 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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;
@@ -2222,12 +2204,10 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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;
@@ -2239,23 +2219,16 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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
       }
     }
@@ -2264,8 +2237,6 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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 {
@@ -2280,11 +2251,9 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -2295,41 +2264,32 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -2337,36 +2297,25 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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);
@@ -2374,66 +2323,54 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
         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;
@@ -2442,10 +2379,8 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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);
@@ -2453,7 +2388,9 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       }
     }
   }
+}
 
+@layer qti-components {
   qti-extended-text-interaction {
     &::part(textarea) {
       border-radius: 0;
@@ -2463,10 +2400,8 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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);
@@ -2474,125 +2409,89 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       }
     }
   }
+}
 
+@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);
@@ -2600,56 +2499,45 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
         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;
@@ -2657,7 +2545,6 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           outline: 0;
           border: none;
         }
-
         &:state(--disabled),
         &[aria-disabled='true'] {
           cursor: not-allowed;
@@ -2666,48 +2553,30 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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);
@@ -2715,26 +2584,16 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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: '';
@@ -2749,7 +2608,6 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           );
           display: block;
         }
-
         &:state(--checked)::after,
         &[aria-checked='true']::after {
           content: '';
@@ -2764,14 +2622,12 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           );
           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);
@@ -2782,10 +2638,10 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       }
     }
   }
+}
 
+@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);
@@ -2795,23 +2651,18 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -2821,12 +2672,10 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
         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;
@@ -2838,66 +2687,45 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
         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);
@@ -2905,47 +2733,33 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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);
@@ -2956,52 +2770,39 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       }
     }
   }
+}
 
+@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;
@@ -3010,7 +2811,6 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       border-color: var(--qti-border-color);
       outline: 4px solid var(--qti-disabled-bg);
     }
-
     &:state(readonly)::part(trigger),
     &[readonly]::part(trigger) {
       cursor: pointer;
@@ -3023,33 +2823,21 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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);
@@ -3059,7 +2847,6 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       outline: none;
     }
-
     &::part(option) {
       display: flex;
       align-items: center;
@@ -3078,18 +2865,14 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -3108,19 +2891,18 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -3131,52 +2913,41 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -3190,13 +2961,9 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -3210,12 +2977,9 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -3224,123 +2988,90 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -3350,27 +3081,22 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
             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;
@@ -3385,102 +3111,74 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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;
@@ -3488,38 +3186,27 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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);
@@ -3529,34 +3216,27 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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);
@@ -3564,47 +3244,32 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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);
@@ -3612,28 +3277,21 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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;
@@ -3644,64 +3302,38 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -3712,21 +3344,17 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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;
@@ -3737,33 +3365,27 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
       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);
@@ -3771,67 +3393,55 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
         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;
@@ -3844,29 +3454,23 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
     }
     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);
@@ -3874,47 +3478,32 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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);
@@ -3922,108 +3511,89 @@ var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants
           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%;
   }
@@ -4088,4 +3658,4 @@ lit-html/node/directives/until.js:
    * SPDX-License-Identifier: BSD-3-Clause
    *)
 */
-//# sourceMappingURL=chunk-AIS537EU.js.map
+//# sourceMappingURL=chunk-IKBPPSNQ.js.map