@citolab/qti-components 7.0.5 → 7.0.6-beta.0

package/{cdn/qti-test/components/test-container.js → dist/qti-test/components/test-next.spec.css}

@@ -1,98 +1,55 @@
-var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o)=>{for(var r=o>1?void 0:o?A(i,t):i,a=e.length-1,l;a>=0;a--)(l=e[a])&&(r=(o?l(i,t,r):l(r))||r);return o&&r&&C(i,t,r),r};import{LitElement as M,html as u}from"lit";import{customElement as D,property as S,state as k}from"lit/decorators.js";import{until as F}from"lit/directives/until.js";function b(e,i){let t={waitUntilFirstUpdate:!1,...i};return(o,r)=>{let{update:a}=o,l=Array.isArray(e)?e:[e];o.update=function(p){l.forEach(z=>{let h=z;if(p.has(h)){let y=p.get(h),f=this[h];y!==f&&(!t.waitUntilFirstUpdate||this.hasUpdated)&&this[r](y,f)}}),a.call(this,p)}}}var w=`@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
-
+/* src/item.css */
+@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
 :root,
 :host {
-  /* Active colors */
   --qti-bg-active: #ffecec;
   --qti-border-active: #f86d70;
-
-  /* Gap size */
   --qti-gap-size: 1rem;
-
-  /* Background colors */
   --qti-bg: white;
   --qti-hover-bg: #f9fafb;
-
-  /* Light theme colors */
-  --qti-light-bg-active: #f0f0f0; /* Light gray */
-  --qti-light-border-active: #d0d0d0; /* Medium gray */
-
-  /* Dark theme colors */
-  --qti-dark-bg-active: #1f2937; /* Dark gray */
-  --qti-dark-border-active: #64748b; /* Medium gray */
-
-  /* Disabled colors */
+  --qti-light-bg-active: #f0f0f0;
+  --qti-light-border-active: #d0d0d0;
+  --qti-dark-bg-active: #1f2937;
+  --qti-dark-border-active: #64748b;
   --qti-disabled-bg: #f3f4f6;
   --qti-disabled-color: #45484f;
-
-  /* Border properties */
   --qti-border-thickness: 2px;
   --qti-border-style: solid;
   --qti-border-color: #c6cad0;
   --qti-border-radius: 0.3rem;
   --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
-
-  /* Focus & active states */
   --qti-focus-border-width: 5px;
   --qti-focus-color: #bddcff7e;
-
-  /* Class-specific variables */
-
-  /* Form elements */
   --qti-form-size: 1rem;
-
-  /* Point elements */
   --qti-point-size: 2rem;
-
-  /* Order buttons */
   --qti-order-size: 2rem;
-
-  /* Generic padding for all elements */
-  --qti-padding-vertical: 0.5rem; /* py-2 */
-  --qti-padding-horizontal: 0.5rem; /* px-2 */
-}
-
-/* SVG masks and backgrounds */
-
+  --qti-padding-vertical: 0.5rem;
+  --qti-padding-horizontal: 0.5rem;
+}
 .chevron {
-  background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
-    no-repeat center right 6px;
+  background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E") no-repeat center right 6px;
 }
-
 .handle {
-  background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
+  background-image:
+    radial-gradient(
+      circle at center,
+      rgb(0 0 0 / 10%) 0,
+      rgb(0 0 0 / 20%) 2px,
+      rgb(255 255 255 / 0%) 2px,
+      rgb(255 255 255 / 0%) 100%);
   background-repeat: repeat-y;
   background-position: left center;
   background-size: 14px 8px;
 }
-
 .check-mask {
   -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");
+  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");
 }
-
-/* 
-  Following are classes that can be applied to elements and element states, so they are not used directly 
-  The @apply directive is used to apply these classes to elements
-*/
-
-/* Apply .bordered to an element */
-
 .bordered {
   border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
   outline: none;
 }
-
-/* Apply .form rules for checkbox and radiobutton */
-
 .form {
-
   display: grid;
   place-content: center;
   width: var(--qti-form-size);
@@ -100,35 +57,25 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
   border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
   outline: none;
 }
-
-/* Apply .button rules for button-like elements, such as drags and buttons */
-
 .button {
-
   border-radius: var(--qti-border-radius);
   padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
   border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
   outline: none;
 }
-
-/* Apply .select for the select dropdown element */
-
 .select {
-
   border-radius: var(--qti-border-radius);
   position: relative;
   -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
+  -moz-appearance: none;
+  appearance: none;
   padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-  padding-right: calc(var(--qti-padding-horizontal) + 1.5rem); /* 1.5rem for the chevron */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
-    no-repeat center right 6px;
+  padding-right: calc(var(--qti-padding-horizontal) + 1.5rem);
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+  background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E") no-repeat center right 6px;
 }
-
-/* Apply .text for the input text and textarea */
-
 .text {
-
   border-radius: 0;
   cursor: text;
   padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
@@ -136,11 +83,7 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
   border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
   outline: none;
 }
-
-/* Apply .spot for hotspot shapes */
-
 .spot {
-
   width: 100%;
   height: 100%;
   background-color: transparent;
@@ -148,11 +91,7 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
   border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
   outline: none;
 }
-
-/* Apply .point for circular small hotspots */
-
 .point {
-
   border-radius: 100%;
   width: var(--qti-point-size);
   height: var(--qti-point-size);
@@ -161,11 +100,7 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
   border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
   outline: none;
 }
-
-/* Apply .drag for draggable elements */
-
 .drag {
-
   transition:
     transform 200ms ease-out,
     box-shadow 200ms ease-out,
@@ -174,68 +109,49 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
   background-color: var(--qti-bg);
   padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
   border-radius: var(--qti-border-radius);
-  padding-left: calc(var(--qti-padding-horizontal) + 0.5rem) !important; /* 1.5rem for the drag */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  ); background-repeat: repeat-y; background-position: left center; background-size: 14px 8px;
-}
-
-/* Apply .dragging for the dragging state of a draggable element */
-
+  padding-left: calc(var(--qti-padding-horizontal) + 0.5rem) !important;
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+  background-image:
+    radial-gradient(
+      circle at center,
+      rgb(0 0 0 / 10%) 0,
+      rgb(0 0 0 / 20%) 2px,
+      rgb(255 255 255 / 0%) 2px,
+      rgb(255 255 255 / 0%) 100%);
+  background-repeat: repeat-y;
+  background-position: left center;
+  background-size: 14px 8px;
+}
 .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-shadow: 0 8px 12px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 10%);
 }
-
-/* Apply .drop for an element where you can drop the draggable */
-
 .drop {
-
-  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;
+  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);
   border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
   outline: none;
 }
-
-/* Apply .dropping for an indicator where you can drop the draggable */
-
 .dropping {
   background-color: var(--qti-bg-active);
 }
-
-/* Apply .order for a small circular button */
-
 .order {
-
   display: grid;
   place-content: center;
-
-  /* background-color: var(--qti-bg-active); */
   border-radius: 100%;
   width: var(--qti-order-size);
   height: var(--qti-order-size);
   border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
   outline: none;
 }
-
-/* Apply .check-size for radio and checkbox size */
-
 .check-size {
   width: calc(var(--qti-form-size) - 6px);
   height: calc(var(--qti-form-size) - 6px);
 }
-
-/* Apply .check for checkbox */
-
 .check {
   gap: 0.5rem;
   border-radius: var(--qti-border-radius);
@@ -243,37 +159,20 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
   outline: none;
   cursor: pointer;
 }
-
-/* Apply .check-radio for outer circle of the radio buttons */
-
 .check-radio {
-
   border-radius: 100%;
-
   display: grid;
-
   place-content: center;
-
   width: var(--qti-form-size);
-
   height: var(--qti-form-size);
-
   border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
   outline: none;
 }
-
-/* Apply .check-radio-checked for the inner checked radio */
-
 .check-radio-checked {
   background-color: var(--qti-border-active);
   border-radius: 100%;
 }
-
-/* Apply .check-checkbox for outer square of the checkbox */
-
 .check-checkbox {
-
   display: flex;
   place-items: center;
   border-radius: var(--qti-border-radius);
@@ -284,53 +183,33 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
   border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
   outline: none;
 }
-
-/* Apply .check-checkbox-checked for the inner checkmark */
-
 .check-checkbox-checked {
   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");
+  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");
 }
-
-/* Apply .hov for hover state */
-
 .hov {
   background-color: var(--qti-hover-bg);
 }
-
-/* Apply .foc for focus state */
-
 .foc {
   box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
 }
-
-/* Apply .act for active state */
-
 .act {
   border-color: var(--qti-border-active);
   background-color: var(--qti-bg-active);
 }
-
 .act-bg {
   background-color: var(--qti-bg-active);
 }
-
 .act-bor {
   border-color: var(--qti-border-active);
 }
-
-/* Apply .rdo for readonly state */
-
 .rdo {
   cursor: pointer;
   background-color: var(--qti-bg);
   outline: 0;
   border: none;
 }
-
-/* Apply .dis for disabled state */
-
 .dis {
   cursor: not-allowed;
   background-color: var(--qti-disabled-bg);
@@ -338,90 +217,46 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
   border-color: var(--qti-border-color);
   outline: 4px solid var(--qti-disabled-bg);
 }
-
-/* base */
-
-/* ============================
-   QTI 3 shared css
-   1.  Display
-   2.  Special Flex styles
-   3.  Margin
-   4.  Padding
-   5.  Horizontal Alignment styles
-   6.  Vertical Alignment styles
-   7.  Height
-   8.  Width
-   9.  Text-Indent
-   10. List Style
-   11. Layout
-   12. Other QTI 3 presentation utilities
-   ============================ */
-
-/* ==========
-  Display css
-  =========== */
-
 .qti-display-inline {
   display: inline;
 }
-
 .qti-display-inline-block {
   display: inline-block;
 }
-
 .qti-display-block {
   display: block;
 }
-
 .qti-display-flex {
   display: flexbox;
   display: flex;
 }
-
 .qti-display-inline-flex {
   display: inline-flex;
 }
-
 .qti-display-grid {
   display: grid;
 }
-
 .qti-display-inline-grid {
   display: inline-grid;
 }
-
 .qti-display-table {
   display: table;
 }
-
 .qti-display-table-cell {
   display: table-cell;
 }
-
 .qti-display-table-row {
   display: table-row;
 }
-
 .qti-display-list-item {
   display: list-item;
 }
-
 .qti-display-inherit {
   display: inherit;
 }
-
-/* 
-   * hidden to screen readers and sighted
-   */
-
 .qti-hidden {
   display: none;
 }
-
-/*
-  * visible to screen readers, hidden to sighted
-   */
-
 .qti-visually-hidden {
   position: fixed !important;
   overflow: hidden;
@@ -431,1303 +266,913 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
   border: 0;
   margin: -1px;
 }
-
-/* =============================
-     Special flex styles
-     ============================= */
-
 .qti-flex-direction-column {
   flex-direction: column;
 }
-
 .qti-flex-direction-row {
   flex-direction: row;
 }
-
 .qti-flex-grow-1 {
   flex-grow: 1;
 }
-
 .qti-flex-grow-0 {
   flex-grow: 0;
 }
-
-/* =========
-    Margin css
-    ========== */
-
-/**
-   * For margin Top and Bottom and Left and Right
-   */
-
 .qti-margin-0 {
   margin: 0 !important;
 }
-
 .qti-margin-1 {
   margin: 0.25rem !important;
 }
-
 .qti-margin-2 {
   margin: 0.5rem !important;
 }
-
 .qti-margin-3 {
   margin: 1rem !important;
 }
-
 .qti-margin-4 {
   margin: 1.5rem !important;
 }
-
 .qti-margin-5 {
   margin: 3rem !important;
 }
-
 .qti-margin-auto {
   margin: auto !important;
 }
-
-/*
-   For margin Left and Right
-   */
-
 .qti-margin-x-0 {
   margin-right: 0 !important;
   margin-left: 0 !important;
 }
-
 .qti-margin-x-1 {
   margin-right: 0.25rem !important;
   margin-left: 0.25rem !important;
 }
-
 .qti-margin-x-2 {
   margin-right: 0.5rem !important;
   margin-left: 0.5rem !important;
 }
-
 .qti-margin-x-3 {
   margin-right: 1rem !important;
   margin-left: 1rem !important;
 }
-
 .qti-margin-x-4 {
   margin-right: 1.5rem !important;
   margin-left: 1.5rem !important;
 }
-
 .qti-margin-x-5 {
   margin-right: 3rem !important;
   margin-left: 3rem !important;
 }
-
 .qti-margin-x-auto {
   margin-right: auto !important;
   margin-left: auto !important;
 }
-
-/*
-   For margin Top and Bottom
-   */
-
 .qti-margin-y-0 {
   margin-top: 0 !important;
   margin-bottom: 0 !important;
 }
-
 .qti-margin-y-1 {
   margin-top: 0.25rem !important;
   margin-bottom: 0.25rem !important;
 }
-
 .qti-margin-y-2 {
   margin-top: 0.5rem !important;
   margin-bottom: 0.5rem !important;
 }
-
 .qti-margin-y-3 {
   margin-top: 1rem !important;
   margin-bottom: 1rem !important;
 }
-
 .qti-margin-y-4 {
   margin-top: 1.5rem !important;
   margin-bottom: 1.5rem !important;
 }
-
 .qti-margin-y-5 {
   margin-top: 3rem !important;
   margin-bottom: 3rem !important;
 }
-
 .qti-margin-y-auto {
   margin-top: auto !important;
   margin-bottom: auto !important;
 }
-
-/*
-   For margin Top
-   */
-
 .qti-margin-t-0 {
   margin-top: 0 !important;
 }
-
 .qti-margin-t-1 {
   margin-top: 0.25rem !important;
 }
-
 .qti-margin-t-2 {
   margin-top: 0.5rem !important;
 }
-
 .qti-margin-t-3 {
   margin-top: 1rem !important;
 }
-
 .qti-margin-t-4 {
   margin-top: 1.5rem !important;
 }
-
 .qti-margin-t-5 {
   margin-top: 3rem !important;
 }
-
 .qti-margin-t-auto {
   margin-top: auto !important;
 }
-
-/* 
-  For margin Bottom
-   */
-
 .qti-margin-b-0 {
   margin-bottom: 0 !important;
 }
-
 .qti-margin-b-1 {
   margin-bottom: 0.25rem !important;
 }
-
 .qti-margin-b-2 {
   margin-bottom: 0.5rem !important;
 }
-
 .qti-margin-b-3 {
   margin-bottom: 1rem !important;
 }
-
 .qti-margin-b-4 {
   margin-bottom: 1.5rem !important;
 }
-
 .qti-margin-b-5 {
   margin-bottom: 3rem !important;
 }
-
 .qti-margin-b-auto {
   margin-bottom: auto !important;
 }
-
-/*
-   For margin Start LTR
-   */
-
 .qti-margin-s-0 {
   margin-left: 0 !important;
 }
-
 .qti-margin-s-1 {
   margin-left: 0.25rem !important;
 }
-
 .qti-margin-s-2 {
   margin-left: 0.5rem !important;
 }
-
 .qti-margin-s-3 {
   margin-left: 1rem !important;
 }
-
 .qti-margin-s-4 {
   margin-left: 1.5rem !important;
 }
-
 .qti-margin-s-5 {
   margin-left: 3rem !important;
 }
-
 .qti-margin-s-auto {
   margin-left: auto !important;
 }
-
-/* 
-  For margin End LTR
-   */
-
 .qti-margin-e-0 {
   margin-right: 0 !important;
 }
-
 .qti-margin-e-1 {
   margin-right: 0.25rem !important;
 }
-
 .qti-margin-e-2 {
   margin-right: 0.5rem !important;
 }
-
 .qti-margin-e-3 {
   margin-right: 1rem !important;
 }
-
 .qti-margin-e-4 {
   margin-right: 1.5rem !important;
 }
-
 .qti-margin-e-5 {
   margin-right: 3rem !important;
 }
-
 .qti-margin-e-auto {
   margin-right: auto !important;
 }
-
-/* =========
-    Padding css
-    ========== */
-
-/*
-  For padding Top and Bottom and Left and Right
-   */
-
 .qti-padding-0 {
   padding: 0 !important;
 }
-
 .qti-padding-1 {
   padding: 0.25rem !important;
 }
-
 .qti-padding-2 {
   padding: 0.5rem !important;
 }
-
 .qti-padding-3 {
   padding: 1rem !important;
 }
-
 .qti-padding-4 {
   padding: 1.5rem !important;
 }
-
 .qti-padding-5 {
   padding: 3rem !important;
 }
-
-/*
-   For padding Left and Right
-   */
-
 .qti-padding-x-0 {
   padding-right: 0 !important;
   padding-left: 0 !important;
 }
-
 .qti-padding-x-1 {
   padding-right: 0.25rem !important;
   padding-left: 0.25rem !important;
 }
-
 .qti-padding-x-2 {
   padding-right: 0.5rem !important;
   padding-left: 0.5rem !important;
 }
-
 .qti-padding-x-3 {
   padding-right: 1rem !important;
   padding-left: 1rem !important;
 }
-
 .qti-padding-x-4 {
   padding-right: 1.5rem !important;
   padding-left: 1.5rem !important;
 }
-
 .qti-padding-x-5 {
   padding-right: 3rem !important;
   padding-left: 3rem !important;
 }
-
-/*
-    For padding Top and Bottom
-   */
-
 .qti-padding-y-0 {
   padding-top: 0 !important;
   padding-bottom: 0 !important;
 }
-
 .qti-padding-y-1 {
   padding-top: 0.25rem !important;
   padding-bottom: 0.25rem !important;
 }
-
 .qti-padding-y-2 {
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
 }
-
 .qti-padding-y-3 {
   padding-top: 1rem !important;
   padding-bottom: 1rem !important;
 }
-
 .qti-padding-y-4 {
   padding-top: 1.5rem !important;
   padding-bottom: 1.5rem !important;
 }
-
 .qti-padding-y-5 {
   padding-top: 3rem !important;
   padding-bottom: 3rem !important;
 }
-
-/*
-   For padding Top
-   */
-
 .qti-padding-t-0 {
   padding-top: 0 !important;
 }
-
 .qti-padding-t-1 {
   padding-top: 0.25rem !important;
 }
-
 .qti-padding-t-2 {
   padding-top: 0.5rem !important;
 }
-
 .qti-padding-t-3 {
   padding-top: 1rem !important;
 }
-
 .qti-padding-t-4 {
   padding-top: 1.5rem !important;
 }
-
 .qti-padding-t-5 {
   padding-top: 3rem !important;
 }
-
-/*
-   For padding Bottom
-   */
-
 .qti-padding-b-0 {
   padding-bottom: 0 !important;
 }
-
 .qti-padding-b-1 {
   padding-bottom: 0.25rem !important;
 }
-
 .qti-padding-b-2 {
   padding-bottom: 0.5rem !important;
 }
-
 .qti-padding-b-3 {
   padding-bottom: 1rem !important;
 }
-
 .qti-padding-b-4 {
   padding-bottom: 1.5rem !important;
 }
-
 .qti-padding-b-5 {
   padding-bottom: 3rem !important;
 }
-
-/*
-    For padding Start LTR
-   */
-
 .qti-padding-s-0 {
   padding-left: 0 !important;
 }
-
 .qti-padding-s-1 {
   padding-left: 0.25rem !important;
 }
-
 .qti-padding-s-2 {
   padding-left: 0.5rem !important;
 }
-
 .qti-padding-s-3 {
   padding-left: 1rem !important;
 }
-
 .qti-padding-s-4 {
   padding-left: 1.5rem !important;
 }
-
 .qti-padding-s-5 {
   padding-left: 3rem !important;
 }
-
-/*
-   For padding End LTR
-   */
-
 .qti-padding-e-0 {
   padding-right: 0 !important;
 }
-
 .qti-padding-e-1 {
   padding-right: 0.25rem !important;
 }
-
 .qti-padding-e-2 {
   padding-right: 0.5rem !important;
 }
-
 .qti-padding-e-3 {
   padding-right: 1rem !important;
 }
-
 .qti-padding-e-4 {
   padding-right: 1.5rem !important;
 }
-
 .qti-padding-e-5 {
   padding-right: 3rem !important;
 }
-
-/* ====================
-     Horizontal alignment
-     ==================== */
-
 .qti-align-left {
   text-align: left;
 }
-
 .qti-align-center {
   text-align: center;
 }
-
 .qti-align-right {
   text-align: right;
 }
-
-/* ==================
-     Vertical alignment
-     ================== */
-
 .qti-valign-top {
   vertical-align: top;
 }
-
 .qti-valign-middle {
   vertical-align: middle;
 }
-
 .qti-valign-baseline {
   vertical-align: baseline;
 }
-
 .qti-valign-bottom {
   vertical-align: bottom;
 }
-
-/* =============
-     Height styles
-     ============= */
-
 .qti-height-0 {
   height: 0;
 }
-
 .qti-height-px {
   height: 1px;
 }
-
 .qti-height-0p5 {
   height: 0.125rem;
 }
-
 .qti-height-1 {
   height: 0.25rem;
 }
-
 .qti-height-1p5 {
   height: 0.375rem;
 }
-
 .qti-height-2 {
   height: 0.5rem;
 }
-
 .qti-height-2p5 {
   height: 0.625rem;
 }
-
 .qti-height-3 {
   height: 0.75rem;
 }
-
 .qti-height-3p5 {
   height: 0.875rem;
 }
-
 .qti-height-4 {
   height: 1rem;
 }
-
 .qti-height-5 {
   height: 1.25rem;
 }
-
 .qti-height-6 {
   height: 1.5rem;
 }
-
 .qti-height-7 {
   height: 1.75rem;
 }
-
 .qti-height-8 {
   height: 2rem;
 }
-
 .qti-height-9 {
   height: 2.25rem;
 }
-
 .qti-height-10 {
   height: 2.5rem;
 }
-
 .qti-height-11 {
   height: 2.75rem;
 }
-
 .qti-height-12 {
   height: 3rem;
 }
-
 .qti-height-14 {
   height: 3.5rem;
 }
-
 .qti-height-16 {
   height: 4rem;
 }
-
 .qti-height-20 {
   height: 5rem;
 }
-
 .qti-height-24 {
   height: 6rem;
 }
-
 .qti-height-28 {
   height: 7rem;
 }
-
 .qti-height-32 {
   height: 8rem;
 }
-
 .qti-height-36 {
   height: 9rem;
 }
-
 .qti-height-40 {
   height: 10rem;
 }
-
 .qti-height-44 {
   height: 11rem;
 }
-
 .qti-height-48 {
   height: 12rem;
 }
-
 .qti-height-52 {
   height: 13rem;
 }
-
 .qti-height-56 {
   height: 14rem;
 }
-
 .qti-height-60 {
   height: 15rem;
 }
-
 .qti-height-64 {
   height: 16rem;
 }
-
 .qti-height-72 {
   height: 18rem;
 }
-
 .qti-height-80 {
   height: 20rem;
 }
-
 .qti-height-96 {
   height: 24rem;
 }
-
 .qti-height-1-2 {
   height: 50%;
 }
-
 .qti-height-1-3 {
   height: 33.3333%;
 }
-
 .qti-height-2-3 {
   height: 66.6667%;
 }
-
 .qti-height-1-4 {
   height: 25%;
 }
-
 .qti-height-2-4 {
   height: 50%;
 }
-
 .qti-height-3-4 {
   height: 75%;
 }
-
 .qti-height-1-5 {
   height: 20%;
 }
-
 .qti-height-2-5 {
   height: 40%;
 }
-
 .qti-height-3-5 {
   height: 60%;
 }
-
 .qti-height-4-5 {
   height: 80%;
 }
-
 .qti-height-1-6 {
   height: 16.6667%;
 }
-
 .qti-height-2-6 {
   height: 33.3333%;
 }
-
 .qti-height-3-6 {
   height: 50%;
 }
-
 .qti-height-4-6 {
   height: 66.6667%;
 }
-
 .qti-height-5-6 {
   height: 83.3333%;
 }
-
 .qti-height-auto {
   height: auto;
 }
-
 .qti-height-full {
   height: 100%;
 }
-
-/* ============
-     Width styles
-     ============ */
-
 .qti-width-0 {
   width: 0;
 }
-
 .qti-width-px {
   width: 1px;
 }
-
 .qti-width-0p5 {
   width: 0.125rem;
 }
-
 .qti-width-1 {
   width: 0.25rem;
 }
-
 .qti-width-1p5 {
   width: 0.375rem;
 }
-
 .qti-width-2 {
   width: 0.5rem;
 }
-
 .qti-width-2p5 {
   width: 0.625rem;
 }
-
 .qti-width-3 {
   width: 0.75rem;
 }
-
 .qti-width-3p5 {
   width: 0.875rem;
 }
-
 .qti-width-4 {
   width: 1rem;
 }
-
 .qti-width-5 {
   width: 1.25rem;
 }
-
 .qti-width-6 {
   width: 1.5rem;
 }
-
 .qti-width-7 {
   width: 1.75rem;
 }
-
 .qti-width-8 {
   width: 2rem;
 }
-
 .qti-width-9 {
   width: 2.25rem;
 }
-
 .qti-width-10 {
   width: 2.5rem;
 }
-
 .qti-width-11 {
   width: 2.75rem;
 }
-
 .qti-width-12 {
   width: 3rem;
 }
-
 .qti-width-14 {
   width: 3.5rem;
 }
-
 .qti-width-16 {
   width: 4rem;
 }
-
 .qti-width-20 {
   width: 5rem;
 }
-
 .qti-width-24 {
   width: 6rem;
 }
-
 .qti-width-28 {
   width: 7rem;
 }
-
 .qti-width-32 {
   width: 8rem;
 }
-
 .qti-width-36 {
   width: 9rem;
 }
-
 .qti-width-40 {
   width: 10rem;
 }
-
 .qti-width-44 {
   width: 11rem;
 }
-
 .qti-width-48 {
   width: 12rem;
 }
-
 .qti-width-52 {
   width: 13rem;
 }
-
 .qti-width-56 {
   width: 14rem;
 }
-
 .qti-width-60 {
   width: 15rem;
 }
-
 .qti-width-64 {
   width: 16rem;
 }
-
 .qti-width-72 {
   width: 18rem;
 }
-
 .qti-width-80 {
   width: 20rem;
 }
-
 .qti-width-96 {
   width: 24rem;
 }
-
 .qti-width-auto {
   width: auto;
 }
-
 .qti-width-1-2 {
   width: 50%;
 }
-
 .qti-width-1-3 {
   width: 33.3333%;
 }
-
 .qti-width-2-3 {
   width: 66.6667%;
 }
-
 .qti-width-1-4 {
   width: 25%;
 }
-
 .qti-width-2-4 {
   width: 50%;
 }
-
 .qti-width-3-4 {
   width: 75%;
 }
-
 .qti-width-1-5 {
   width: 20%;
 }
-
 .qti-width-2-5 {
   width: 40%;
 }
-
 .qti-width-3-5 {
   width: 60%;
 }
-
 .qti-width-4-5 {
   width: 80%;
 }
-
 .qti-width-1-6 {
   width: 16.6667%;
 }
-
 .qti-width-2-6 {
   width: 33.3333%;
 }
-
 .qti-width-3-6 {
   width: 50%;
 }
-
 .qti-width-4-6 {
   width: 66.6667%;
 }
-
 .qti-width-5-6 {
   width: 83.3333%;
 }
-
 .qti-width-1-12 {
   width: 8.3333%;
 }
-
 .qti-width-2-12 {
   width: 16.6667%;
 }
-
 .qti-width-3-12 {
   width: 25%;
 }
-
 .qti-width-4-12 {
   width: 33.3333%;
 }
-
 .qti-width-5-12 {
   width: 41.6667%;
 }
-
 .qti-width-6-12 {
   width: 50%;
 }
-
 .qti-width-7-12 {
   width: 58.3333%;
 }
-
 .qti-width-8-12 {
   width: 66.6667%;
 }
-
 .qti-width-9-12 {
   width: 75%;
 }
-
 .qti-width-10-12 {
   width: 83.3333%;
 }
-
 .qti-width-11-12 {
   width: 91.6667%;
 }
-
 .qti-width-full,
 .qti-fullwidth {
   width: 100%;
 }
-
-/* ==================
-     Text Indent styles
-     ================== */
-
 .qti-text-indent-0 {
   text-indent: 0;
 }
-
 .qti-text-indent-px {
   text-indent: 1px;
 }
-
 .qti-text-indent-0p5 {
   text-indent: 0.125rem;
 }
-
 .qti-text-indent-1 {
   text-indent: 0.25rem;
 }
-
 .qti-text-indent-1p5 {
   text-indent: 0.375rem;
 }
-
 .qti-text-indent-2 {
   text-indent: 0.5rem;
 }
-
 .qti-text-indent-2p5 {
   text-indent: 0.625rem;
 }
-
 .qti-text-indent-3 {
   text-indent: 0.75rem;
 }
-
 .qti-text-indent-3p5 {
   text-indent: 0.875rem;
 }
-
 .qti-text-indent-4 {
   text-indent: 1rem;
 }
-
 .qti-text-indent-5 {
   text-indent: 1.25rem;
 }
-
 .qti-text-indent-6 {
   text-indent: 1.5rem;
 }
-
 .qti-text-indent-7 {
   text-indent: 1.75rem;
 }
-
 .qti-text-indent-8 {
   text-indent: 2rem;
 }
-
 .qti-text-indent-12 {
   text-indent: 3rem;
 }
-
 .qti-text-indent-16 {
   text-indent: 4rem;
 }
-
 .qti-text-indent-20 {
   text-indent: 5rem;
 }
-
 .qti-text-indent-24 {
   text-indent: 6rem;
 }
-
 .qti-text-indent-28 {
   text-indent: 7rem;
 }
-
 .qti-text-indent-32 {
   text-indent: 8rem;
 }
-
-/* =================
-     List Style styles
-     ================= */
-
 .qti-list-style-type-none {
   list-style-type: none;
 }
-
 .qti-list-style-type-disc {
   list-style-type: disc;
 }
-
 .qti-list-style-type-circle {
   list-style-type: circle;
 }
-
 .qti-list-style-type-square {
   list-style-type: square;
 }
-
 .qti-list-style-type-decimal {
   list-style-type: decimal;
 }
-
 .qti-list-style-type-decimal-leading-zero {
   list-style-type: decimal-leading-zero;
 }
-
 .qti-list-style-type-lower-alpha {
   list-style-type: lower-alpha;
 }
-
 .qti-list-style-type-upper-alpha {
   list-style-type: upper-alpha;
 }
-
 .qti-list-style-type-lower-roman {
   list-style-type: lower-roman;
 }
-
 .qti-list-style-type-upper-roman {
   list-style-type: upper-roman;
 }
-
 .qti-list-style-type-lower-latin {
   list-style-type: lower-latin;
 }
-
 .qti-list-style-type-upper-latin {
   list-style-type: upper-latin;
 }
-
 .qti-list-style-type-lower-greek {
   list-style-type: lower-greek;
 }
-
 .qti-list-style-type-arabic-indic {
   list-style-type: arabic-indic;
 }
-
 .qti-list-style-type-armenian {
   list-style-type: armenian;
 }
-
 .qti-list-style-type-lower-armenian {
   list-style-type: lower-armenian;
 }
-
 .qti-list-style-type-upper-armenian {
   list-style-type: upper-armenian;
 }
-
 .qti-list-style-type-bengali {
   list-style-type: bengali;
 }
-
 .qti-list-style-type-cambodian {
   list-style-type: cambodian;
 }
-
 .qti-list-style-type-simp-chinese-formal {
   list-style-type: simp-chinese-formal;
 }
-
 .qti-list-style-type-simp-chinese-informal {
   list-style-type: simp-chinese-informal;
 }
-
 .qti-list-style-type-trad-chinese-formal {
   list-style-type: trad-chinese-formal;
 }
-
 .qti-list-style-type-trad-chinese-informal {
   list-style-type: trad-chinese-informal;
 }
-
 .qti-list-style-type-cjk-ideographic {
   list-style-type: cjk-ideographic;
 }
-
 .qti-list-style-type-cjk-heavenly-stem {
   list-style-type: cjk-heavenly-stem;
 }
-
 .qti-list-style-type-cjk-earthly-branch {
   list-style-type: cjk-earthly-branch;
 }
-
 .qti-list-style-type-devanagari {
   list-style-type: devanagari;
 }
-
 .qti-list-style-type-ethiopic-halehame-ti-er {
   list-style-type: ethiopic-halehame-ti-er;
 }
-
 .qti-list-style-type-ethiopic-halehame-ti-et {
   list-style-type: ethiopic-halehame-ti-et;
 }
-
 .qti-list-style-type-ethiopic-halehame-am {
   list-style-type: ethiopic-halehame-am;
 }
-
 .qti-list-style-type-ethiopic-halehame {
   list-style-type: ethiopic-halehame;
 }
-
 .qti-list-style-type-georgian {
   list-style-type: georgian;
 }
-
 .qti-list-style-type-gujarati {
   list-style-type: gujarati;
 }
-
 .qti-list-style-type-gurmukhi {
   list-style-type: gurmukhi;
 }
-
 .qti-list-style-type-hangul {
   list-style-type: hangul;
 }
-
 .qti-list-style-type-hangul-consonant {
   list-style-type: hangul-consonant;
 }
-
 .qti-list-style-type-hebrew {
   list-style-type: hebrew;
 }
-
 .qti-list-style-type-hiragana {
   list-style-type: hiragana;
 }
-
 .qti-list-style-type-hiragana-iroha {
   list-style-type: hiragana-iroha;
 }
-
 .qti-list-style-type-khmer {
   list-style-type: khmer;
 }
-
 .qti-list-style-type-korean-hangul-formal {
   list-style-type: korean-hangul-formal;
 }
-
 .qti-list-style-type-korean-hanja-formal {
   list-style-type: korean-hanja-formal;
 }
-
 .qti-list-style-type-korean-hanja-informal {
   list-style-type: korean-hanja-informal;
 }
-
 .qti-list-style-type-lao {
   list-style-type: lao;
 }
-
 .qti-list-style-type-malayalam {
   list-style-type: malayalam;
 }
-
 .qti-list-style-type-mongolian {
   list-style-type: mongolian;
 }
-
 .qti-list-style-type-myanmar {
   list-style-type: myanmar;
 }
-
 .qti-list-style-type-oriya {
   list-style-type: oriya;
 }
-
 .qti-list-style-type-persian {
   list-style-type: persian;
 }
-
 .qti-list-style-type-thai {
   list-style-type: thai;
 }
-
 .qti-list-style-type-tibetan {
   list-style-type: tibetan;
 }
-
 .qti-list-style-type-telugu {
   list-style-type: telugu;
 }
-
 .qti-list-style-type-urdu {
   list-style-type: urdu;
 }
-
-/* =========================
-     Other QTI 3 Presentation Utilities
-     ========================= */
-
 .qti-bordered {
   border: 1px solid var(--table-border-color);
 }
-
 .qti-underline {
   text-decoration: underline;
   text-decoration-color: var(--foreground);
 }
-
 .qti-italic {
   font-style: italic;
 }
-
 .qti-well {
   min-height: 20px;
   padding: 19px;
@@ -1737,66 +1182,32 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
   border-radius: 4px;
   box-shadow: var(--well-box-shadow);
 }
-
-/* Set writing-mode to vertical-rl 
-     Typical for CJK vertical text */
-
 .qti-writing-mode-vertical-rl {
   writing-mode: vertical-rl;
 }
-
-/* Set writing-mode to vertical-lr
-     Typical for Mongolian vertical text  */
-
 .qti-writing-mode-vertical-lr {
   writing-mode: vertical-lr;
 }
-
-/* Set writing-mode to horizontal-tb 
-     Browser default */
-
 .qti-writing-mode-horizontal-tb {
   writing-mode: horizontal-tb;
 }
-
-/* Float an element left */
-
 .qti-float-left {
   float: left;
 }
-
-/* Float an element right */
-
 .qti-float-right {
   float: right;
 }
-
-/* Remove a float */
-
 .qti-float-none {
   float: none;
 }
-
-/* Clearfix Hack to apply to a container of 
-   floated content that overflows the container. */
-
 .qti-float-clearfix::after {
-  content: '';
+  content: "";
   clear: both;
   display: table;
 }
-
-.qti-float-clear-left
-  .qti-float-clear-right
-  .qti-float-clear-both
-  
-  /* Set text-orientation to upright */
-  .qti-text-orientation-upright {
+.qti-float-clear-left .qti-float-clear-right .qti-float-clear-both .qti-text-orientation-upright {
   text-orientation: upright;
 }
-
-/* stylelint-disable number-max-precision */
-
 @layer qti-base {
   .qti-layout-row {
     display: flex;
@@ -1804,230 +1215,178 @@ var C=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var d=(e,i,t,o
     width: 100%;
     gap: 2.1276595745%;
   }
-
-  .qti-layout-row [class*='qti-layout-col']:not(:empty) {
+  .qti-layout-row [class*=qti-layout-col]:not(:empty) {
     box-sizing: border-box;
   }
-
-  .qti-layout-row [class*='qti-layout-col']:empty {
+  .qti-layout-row [class*=qti-layout-col]:empty {
     width: 0;
-    overflow: hidden; /* to fully collapse if there\u2019s padding or borders */
+    overflow: hidden;
   }
-
   .qti-layout-col1 {
     width: 6.3829787234%;
   }
-
   .qti-layout-col2 {
     width: 14.8936170213%;
   }
-
   .qti-layout-col3 {
     width: 23.4042553191%;
   }
-
   .qti-layout-col4 {
     width: 31.914893617%;
   }
-
   .qti-layout-col5 {
     width: 40.4255319149%;
   }
-
   .qti-layout-col6 {
     width: 48.9361702128%;
   }
-
   .qti-layout-col7 {
     width: 57.4468085106%;
   }
-
   .qti-layout-col8 {
     width: 65.9574468085%;
   }
-
   .qti-layout-col9 {
     width: 74.4680851064%;
   }
-
   .qti-layout-col10 {
     width: 82.9787234043%;
   }
-
   .qti-layout-col11 {
     width: 91.4893617021%;
   }
-
   .qti-layout-col12 {
     width: 100%;
   }
-
   .qti-layout-offset1 {
     margin-left: 8.5106382979%;
   }
-
   .qti-layout-offset2 {
     margin-left: 17.0212765957%;
   }
-
   .qti-layout-offset3 {
     margin-left: 25.5319148936%;
   }
-
   .qti-layout-offset4 {
     margin-left: 34.0425531915%;
   }
-
   .qti-layout-offset5 {
     margin-left: 42.5531914894%;
   }
-
   .qti-layout-offset6 {
     margin-left: 51.0638297872%;
   }
-
   .qti-layout-offset7 {
     margin-left: 59.5744680851%;
   }
-
   .qti-layout-offset8 {
     margin-left: 68.085106383%;
   }
-
   .qti-layout-offset9 {
     margin-left: 76.5957446809%;
   }
-
   .qti-layout-offset10 {
     margin-left: 85.1063829787%;
   }
-
   .qti-layout-offset11 {
     margin-left: 93.6170212766%;
   }
-
   .qti-layout-offset12 {
     margin-left: 102.1276595745%;
   }
-
   @media (width <= 767px) {
-    [class*='qti-layout-col'] {
+    [class*=qti-layout-col] {
       width: 100%;
     }
   }
 }
-
 [view],
 qti-outcome-declaration,
 qti-response-declaration {
   display: none;
 }
-
 [view].show {
   display: block;
 }
-
 :host {
   box-sizing: border-box;
 }
-
 *,
 *::before,
 *::after {
   box-sizing: inherit;
 }
-
-/* components */
-
 @layer qti-components {
   qti-choice-interaction {
     &.qti-input-control-hidden {
       & qti-simple-choice {
-
         &:hover {
           background-color: var(--qti-hover-bg);
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
         &::part(ch) {
           display: none;
         }
-
         &:state(--checked),
-        &[aria-checked='true'] {
+        &[aria-checked=true] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
         &:state(readonly),
-        &[aria-readonly='true'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &:state(disabled),
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           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);
         }
-
         border-radius: var(--qti-border-radius);
-
         padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
+        outline: none;
       }
     }
-
     &:not(.qti-input-control-hidden) {
       & qti-simple-choice {
-
-        &:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {
+        &:not([aria-disabled=true], [aria-readonly=true], :state(--checked)):hover {
           background-color: var(--qti-hover-bg);
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
         &:state(--checked),
-        &[aria-checked='true'] {
+        &[aria-checked=true] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
         &:state(readonly),
-        &[aria-readonly='true'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &:state(disabled),
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           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);
         }
-
         &::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;
@@ -2037,12 +1396,10 @@ qti-response-declaration {
           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;
@@ -2054,84 +1411,65 @@ qti-response-declaration {
           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");
+          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;
-
         border-radius: var(--qti-border-radius);
-
         padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
         outline: none;
-
-        cursor: pointer
+        cursor: pointer;
       }
     }
-
     & qti-simple-choice {
       width: -moz-fit-content;
       width: fit-content;
       cursor: pointer;
-
       &:state(correct-response),
-      &[data-correct-response='true'] {
+      &[data-correct-response=true] {
         &::after {
-          content: '\\02714';
-          color: #16a34a; /* text-green-600 */
+          content: "\2714";
+          color: #16a34a;
         }
       }
     }
-
     & qti-simple-choice > p {
       margin: 0 !important;
       padding: 0 !important;
     }
   }
-
   .hover-border {
-    border: 2px solid #000; /* Adjust the border style and color as needed */
+    border: 2px solid #000;
   }
-
   qti-graphic-gap-match-interaction {
     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;
@@ -2139,84 +1477,61 @@ qti-response-declaration {
       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)
+        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);
         }
         border-color: var(--qti-border-active);
-        background-color: var(--qti-bg-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)
+        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: "\a0";
       }
-
       &: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;
     }
   }
-
   qti-text-entry-interaction {
     &::part(input) {
       border-radius: 0;
@@ -2226,11 +1541,9 @@ qti-response-declaration {
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       outline: none;
     }
-
     &:hover {
       background-color: var(--qti-hover-bg);
     }
-
     &:focus-within {
       &::part(input) {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
@@ -2238,7 +1551,6 @@ qti-response-declaration {
       }
     }
   }
-
   qti-extended-text-interaction {
     &::part(textarea) {
       border-radius: 0;
@@ -2248,11 +1560,9 @@ qti-response-declaration {
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       outline: none;
     }
-
     &:hover {
       background-color: var(--qti-hover-bg);
     }
-
     &:focus-within {
       &::part(textarea) {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
@@ -2260,303 +1570,220 @@ qti-response-declaration {
       }
     }
   }
-
   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%);
+        box-shadow: 0 8px 12px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 10%);
       }
-
       &:hover {
         background-color: var(--qti-hover-bg);
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
-      transition: transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-
+      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);
-
       padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
-
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
       outline: none;
-
-      background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-
+      background-image:
+        radial-gradient(
+          circle at center,
+          rgb(0 0 0 / 10%) 0,
+          rgb(0 0 0 / 20%) 2px,
+          rgb(255 255 255 / 0%) 2px,
+          rgb(255 255 255 / 0%) 100%);
       background-repeat: repeat-y;
-
       background-position: left center;
-
-      background-size: 14px 8px
+      background-size: 14px 8px;
     }
-
     & 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)
+        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)
+        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);
         }
         border-color: var(--qti-border-active);
-        background-color: var(--qti-bg-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: "\a0";
       }
-
       &: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;
       }
-
-      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;
-
+      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);
-
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-      outline: none
+      outline: none;
     }
   }
-
   qti-hotspot-interaction {
     & qti-hotspot-choice {
-      &[shape='circle'] {
-
+      &[shape=circle] {
         &:hover {
           background-color: var(--qti-hover-bg);
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
         &:state(--checked),
-        &[aria-checked='true'] {
+        &[aria-checked=true] {
           border-color: var(--qti-border-active);
         }
-
         &:state(--readonly),
-        &[aria-readonly='true'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
         &:state(--disabled),
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           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);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         padding: 0;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
-      }
-
-      &[shape='rect'] {
-
-        /* &:hover {
-          @apply hov;
-        } */
-
+        outline: none;
+      }
+      &[shape=rect] {
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
         &:state(--checked),
-        &[aria-checked='true'] {
+        &[aria-checked=true] {
           border-color: var(--qti-border-active);
         }
-
-        &[aria-readonly='true'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           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);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         padding: 0;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
+        outline: none;
       }
-
-      &[shape='poly'] {
+      &[shape=poly] {
         &:hover::after {
-          content: '';
+          content: "";
           width: 100%;
           height: 100%;
-          background: repeating-linear-gradient(
-            45deg,
-            var(--qti-border-active),
-            var(--qti-border-active) 5px,
-            transparent 5px,
-            transparent 10px
-          );
+          background:
+            repeating-linear-gradient(
+              45deg,
+              var(--qti-border-active),
+              var(--qti-border-active) 5px,
+              transparent 5px,
+              transparent 10px);
           display: block;
         }
-
         &:state(--checked)::after,
-        &[aria-checked='true']::after {
-          content: '';
+        &[aria-checked=true]::after {
+          content: "";
           width: 100%;
           height: 100%;
-          background: repeating-linear-gradient(
-            45deg,
-            transparent,
-            transparent 5px,
-            var(--qti-border-active) 5px,
-            var(--qti-border-active) 10px
-          );
+          background:
+            repeating-linear-gradient(
+              45deg,
+              transparent,
+              transparent 5px,
+              var(--qti-border-active) 5px,
+              var(--qti-border-active) 10px);
           display: block;
         }
-
-        &[aria-readonly='true'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
           color: var(--qti-disabled-color);
@@ -2566,27 +1793,20 @@ qti-response-declaration {
       }
     }
   }
-
   qti-hottext-interaction {
-    /* &:not(.qti-input-control-hidden),
-    &:not(.qti-unselected-hidden) { */
     qti-hottext {
       display: inline-flex;
       align-items: center;
-
       &:hover {
         background-color: var(--qti-hover-bg);
       }
-
       &: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;
@@ -2596,12 +1816,10 @@ qti-response-declaration {
         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;
@@ -2613,107 +1831,73 @@ qti-response-declaration {
         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");
+        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;
-
       border-radius: var(--qti-border-radius);
-
       padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
       outline: none;
-
-      cursor: pointer
+      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 {
           background-color: var(--qti-hover-bg);
         }
-
         &: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'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           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);
         }
-
         border-radius: var(--qti-border-radius);
-
         padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
+        outline: none;
       }
-
-      /* } */
     }
-
     &.qti-unselected-hidden {
       qti-hottext {
         &:hover {
           background-color: var(--qti-hover-bg);
         }
-
         &: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'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           cursor: not-allowed;
           background-color: var(--qti-disabled-bg);
           color: var(--qti-disabled-color);
@@ -2723,141 +1907,99 @@ qti-response-declaration {
       }
     }
   }
-
   qti-inline-choice-interaction {
     &::part(select) {
-
       &:hover {
         background-color: var(--qti-hover-bg);
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
       border-radius: var(--qti-border-radius);
-
       position: relative;
-
       -webkit-appearance: none;
-
-         -moz-appearance: none;
-
-              appearance: none;
-
+      -moz-appearance: none;
+      appearance: none;
       padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
-
       padding-right: calc(var(--qti-padding-horizontal) + 1.5rem);
-
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
       outline: none;
-
-      background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
-    no-repeat center right 6px
+      background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E") no-repeat center right 6px;
     }
   }
-
   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%);
+          box-shadow: 0 8px 12px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 10%);
         }
-
         &:hover {
           background-color: var(--qti-hover-bg);
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
-        transition: transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-
+        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);
-
         padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
         outline: none;
-
-        background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-
+        background-image:
+          radial-gradient(
+            circle at center,
+            rgb(0 0 0 / 10%) 0,
+            rgb(0 0 0 / 20%) 2px,
+            rgb(255 255 255 / 0%) 2px,
+            rgb(255 255 255 / 0%) 100%);
         background-repeat: repeat-y;
-
         background-position: left center;
-
-        background-size: 14px 8px
+        background-size: 14px 8px;
       }
     }
-
-    /* The droppables */
     & qti-simple-match-set:last-of-type {
       display: grid;
-      grid-auto-columns: 1fr; /* auto-cols-fr */
-      grid-auto-flow: column; /* grid-flow-col */
-      gap: var(--qti-gap-size); /* gap-2 */
-      width: 100%; /* w-full */
-
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+      gap: var(--qti-gap-size);
+      width: 100%;
       & qti-simple-associable-choice {
         display: flex;
         flex-direction: column;
       }
-
       & > qti-simple-associable-choice {
-        /* a droppable qti-simple-associable-choice */
         box-sizing: border-box;
         display: grid;
         grid-row: 2 / 4;
         grid-template-rows: subgrid;
-
         & img {
           max-width: 100%;
           height: auto;
         }
-
         &[enabled] {
           &::part(dropslot) {
             background-color: var(--qti-bg-active);
           }
         }
-
         &[disabled] {
           &::part(dropslot) {
             cursor: not-allowed;
@@ -2867,159 +2009,116 @@ qti-response-declaration {
             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%);
+            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);
           }
-
           min-height: 6rem;
           gap: var(--qti-gap-size);
           box-sizing: border-box;
           display: flex;
           justify-content: center;
           align-items: center;
-          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;
+          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);
           border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
           outline: none;
         }
-
         & > *:not(qti-simple-associable-choice) {
           pointer-events: none;
         }
-
         & > qti-simple-associable-choice {
-
           &::part(dropslot) {
             display: none;
           }
-
           &:hover {
             background-color: var(--qti-hover-bg);
           }
-
           &:focus {
             box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
           }
-
           flex-basis: fit-content;
-
-          transition: transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-
+          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);
-
           padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
-
           border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
           outline: none;
-
-          background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-
+          background-image:
+            radial-gradient(
+              circle at center,
+              rgb(0 0 0 / 10%) 0,
+              rgb(0 0 0 / 20%) 2px,
+              rgb(255 255 255 / 0%) 2px,
+              rgb(255 255 255 / 0%) 100%);
           background-repeat: repeat-y;
-
           background-position: left center;
-
           background-size: 14px 8px;
         }
       }
     }
   }
-
   qti-order-interaction:state(--dragzone-active)::part(drags) {
     border-color: var(--qti-border-active);
     background-color: var(--qti-bg-active);
   }
-
   qti-order-interaction:state(--dragzone-enabled)::part(drags) {
     background-color: var(--qti-bg-active);
   }
-
   qti-order-interaction {
     &::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%);
+        box-shadow: 0 8px 12px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 10%);
       }
-
       &:hover {
         background-color: var(--qti-hover-bg);
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
-      transition: transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-
+      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);
-
       padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
-
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
       outline: none;
-
-      background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-
+      background-image:
+        radial-gradient(
+          circle at center,
+          rgb(0 0 0 / 10%) 0,
+          rgb(0 0 0 / 20%) 2px,
+          rgb(255 255 255 / 0%) 2px,
+          rgb(255 255 255 / 0%) 100%);
       background-repeat: repeat-y;
-
       background-position: left center;
-
-      background-size: 14px 8px
+      background-size: 14px 8px;
     }
-
     &::part(qti-simple-choice) {
       display: flex;
       overflow: hidden;
@@ -3027,523 +2126,356 @@ qti-response-declaration {
       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)
+        background-color: var(--qti-bg-active);
       }
-
       &:hover {
         background-color: var(--qti-hover-bg);
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
       display: flex;
       min-height: 4rem;
-      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;
+      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);
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       outline: none;
     }
-
     &::part(active) {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
     & drop-list {
-      &[shape='circle'] {
-
+      &[shape=circle] {
         &:hover {
           background-color: var(--qti-hover-bg);
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
-        &[aria-checked='true'] {
+        &[aria-checked=true] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
-        &[aria-readonly='true'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           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);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         padding: 0;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
+        outline: none;
       }
-
-      &[shape='square'] {
-
+      &[shape=square] {
         &:hover {
           background-color: var(--qti-hover-bg);
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
-        &[aria-checked='true'] {
+        &[aria-checked=true] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
-        &[aria-readonly='true'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           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);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         padding: 0;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
+        outline: none;
       }
     }
   }
-
   qti-associate-interaction {
-    /* General styles for active and enabled states */
-    &:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {
+    &: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'] {
+    &: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 {
         background-color: var(--qti-hover-bg);
       }
-
       &: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-shadow: 0 8px 12px rgb(0 0 0 / 20%), 0 4px 8px rgb(0 0 0 / 10%);
       }
-
-      transition: transform 200ms ease-out,
-    box-shadow 200ms ease-out,
-    rotate 200ms ease-out;
-
+      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);
-
       padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
-
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
       outline: none;
-
-      background-image: radial-gradient(
-    circle at center,
-    rgb(0 0 0 / 10%) 0,
-    rgb(0 0 0 / 20%) 2px,
-    rgb(255 255 255 / 0%) 2px,
-    rgb(255 255 255 / 0%) 100%
-  );
-
+      background-image:
+        radial-gradient(
+          circle at center,
+          rgb(0 0 0 / 10%) 0,
+          rgb(0 0 0 / 20%) 2px,
+          rgb(255 255 255 / 0%) 2px,
+          rgb(255 255 255 / 0%) 100%);
       background-repeat: repeat-y;
-
       background-position: left center;
-
-      background-size: 14px 8px
+      background-size: 14px 8px;
     }
-
-    /* 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;
-      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;
+      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);
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
       outline: none;
     }
-
     &::part(drop-list):focus {
       box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
     }
-
-    &::part(drop-list)[dragging] {
+    &::part(drop-list) [dragging] {
       border-color: var(--qti-border-active);
       background-color: var(--qti-bg-active);
     }
-
-    /* &::part(drop-list) {
-      @apply act;
-    } */
   }
-
   qti-graphic-order-interaction {
     & qti-hotspot-choice {
-
       &:hover {
         background-color: var(--qti-hover-bg);
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
       &:state(--checked),
-      &[aria-checked='true'] {
+      &[aria-checked=true] {
         border-color: var(--qti-border-active);
         background-color: var(--qti-bg-active);
       }
-
-      &[aria-readonly='true'] {
+      &[aria-readonly=true] {
         cursor: pointer;
         background-color: var(--qti-bg);
         outline: 0;
         border: none;
       }
-
-      &[aria-disabled='true'] {
+      &[aria-disabled=true] {
         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);
       }
-
       &[aria-ordervalue] {
         display: grid;
         place-content: center;
       }
-
       &[aria-ordervalue]::after {
         content: attr(aria-ordervalue) !important;
       }
-
       width: 100%;
-
       height: 100%;
-
       background-color: transparent;
-
       padding: 0;
-
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-      outline: none
+      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);
     }
   }
-
   qti-graphic-associate-interaction {
     position: relative;
     display: block;
-
     & qti-associable-hotspot {
-      &[shape='circle'] {
-
+      &[shape=circle] {
         &:hover {
           background-color: var(--qti-hover-bg);
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
-        &[aria-checked='true'] {
+        &[aria-checked=true] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
-        &[aria-readonly='true'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           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);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         padding: 0;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
+        outline: none;
       }
-
-      &[shape='square'] {
-
+      &[shape=square] {
         &:hover {
           background-color: var(--qti-hover-bg);
         }
-
         &:focus {
           box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
         }
-
-        &[aria-checked='true'] {
+        &[aria-checked=true] {
           border-color: var(--qti-border-active);
           background-color: var(--qti-bg-active);
         }
-
-        &[aria-readonly='true'] {
+        &[aria-readonly=true] {
           cursor: pointer;
           background-color: var(--qti-bg);
           outline: 0;
           border: none;
         }
-
-        &[aria-disabled='true'] {
+        &[aria-disabled=true] {
           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);
         }
-
         width: 100%;
-
         height: 100%;
-
         background-color: transparent;
-
         padding: 0;
-
         border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
-        outline: none
+        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);
     }
   }
-
   qti-slider-interaction {
     --qti-tick-color: rgb(229 231 235 / 100%);
     --qti-tick-width: 1px;
   }
-
   qti-select-point-interaction {
     &::part(point) {
       &:hover {
         background-color: var(--qti-hover-bg);
       }
-
       &:focus {
         box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
       }
-
       border-radius: 100%;
-
       width: var(--qti-point-size);
-
       height: var(--qti-point-size);
-
       background-color: transparent;
-
       padding: 0;
-
       border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
-
       outline: none;
     }
   }
-
   qti-position-object-stage {
     & qti-position-object-interaction {
-      /* no styles necessary, only layout styles, defined in the component */
     }
   }
-
   qti-prompt {
-    margin: 0.5rem 0; /* my-2 */
+    margin: 0.5rem 0;
     display: block;
     width: 100%;
   }
 }
-`;var E=String.raw,T=E`<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-<xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes" />
-  <xsl:template match="@*|node()">
-    <xsl:copy>
-      <xsl:apply-templates select="@*|node()"/>
-    </xsl:copy>
-  </xsl:template>
-
-  <!-- remove existing namespaces -->
-  <xsl:template match="*">
-    <!-- remove element prefix -->
-    <xsl:element name="{local-name()}">
-      <!-- process attributes -->
-      <xsl:for-each select="@*">
-        <!-- remove attribute prefix -->
-        <xsl:attribute name="{local-name()}">
-          <xsl:value-of select="."/>
-        </xsl:attribute>
-      </xsl:for-each>
-    <xsl:apply-templates/>
-  </xsl:element>
-</xsl:template>
-</xsl:stylesheet>`;function x(e){let i=[];return e.querySelectorAll("qti-assessment-item-ref").forEach(t=>{let o=t.getAttribute("identifier"),r=t.getAttribute("href"),a=t.getAttribute("category");i.push({identifier:o,href:r,category:a})}),i}var m=null;function s(e,i=!1){return i&&m!==null&&m.abort(),new Promise((t,o)=>{let r=new XMLHttpRequest;m=r,r.open("GET",e,!0),r.responseType="document",r.onload=()=>{r.status>=200&&r.status<300?t(r.responseXML):o(r.statusText)},r.onerror=()=>{o(r.statusText)},r.send()})}function c(e){return new DOMParser().parseFromString(e,"text/xml")}function g(e){let i=new XSLTProcessor,t=new DOMParser().parseFromString(T,"text/xml");return i.importStylesheet(t),i.transformToFragment(e,document)}function q(e,i){i.endsWith("/")||(i+="/"),e.querySelectorAll("[src],[href],[primary-path]").forEach(t=>{let o="";t.getAttribute("src")&&(o="src"),t.getAttribute("href")&&(o="href"),t.getAttribute("primary-path")&&(o="primary-path");let r=t.getAttribute(o)?.trim();if(!r.startsWith("data:")&&!r.startsWith("http")){let a=i+encodeURI(r);t.setAttribute(o,a)}})}var v=()=>{let e,i={async load(t){return new Promise((o,r)=>{s(t).then(a=>(e=a,i.path(t.substring(0,t.lastIndexOf("/"))),o(i)))})},parse(t){return e=c(t),i},path:t=>(q(e,t),i),fn(t){return t(e),i},items(){return x(e)},html(){return new XMLSerializer().serializeToString(g(e))},xml(){return new XMLSerializer().serializeToString(e)},htmlDoc(){return g(e)},xmlDoc(){return e}};return i};var n=class extends M{constructor(){super(...arguments);this.testURL=null;this.testDoc=null;this.testXML=null;this.templateContent=null}async handleTestURLChange(){if(this.testURL)try{let t=await v().load(this.testURL);this.testDoc=t.htmlDoc()}catch(t){console.error("Error loading or parsing XML:",t)}}handleTestXMLChange(){if(this.testXML)try{this.testDoc=v().parse(this.testXML).htmlDoc()}catch(t){console.error("Error parsing XML:",t)}}async connectedCallback(){super.connectedCallback(),this.initializeTemplateContent(),this.applyStyles(),this.testURL&&this.handleTestURLChange(),this.testXML&&this.handleTestXMLChange()}initializeTemplateContent(){let t=this.querySelector("template");this.templateContent=t?t.content:u``}applyStyles(){let t=new CSSStyleSheet;t.replaceSync(w),this.shadowRoot.adoptedStyleSheets=[t]}render(){return u`
-      ${this.templateContent}
-      <slot></slot>
-      ${F(this.testDoc,u`<span>Loading...</span>`)}
-    `}};d([S({type:String,attribute:"test-url"})],n.prototype,"testURL",2),d([k()],n.prototype,"testDoc",2),d([k()],n.prototype,"testXML",2),d([b("testURL",{waitUntilFirstUpdate:!0})],n.prototype,"handleTestURLChange",1),d([b("testXML",{waitUntilFirstUpdate:!0})],n.prototype,"handleTestXMLChange",1),n=d([D("test-container")],n);export{n as TestContainer};
+/*# sourceMappingURL=test-next.spec.css.map */