@citolab/qti-components 6.3.8 → 6.4.2

package/dist/{chunk-DHQGPGHW.js → chunk-7FZSQALE.cjs}

@@ -1,49 +1,5 @@
-import{a as n}from"./chunk-DPSTDDQZ.js";import{a as w}from"./chunk-AWSFYZS5.js";import{c as r}from"./chunk-YWGBLO7P.js";import{html as d,LitElement as g}from"lit";import{customElement as h,property as i,state as l}from"lit/decorators.js";import{unsafeHTML as p}from"lit/directives/unsafe-html.js";import{provide as f}from"@lit/context";var s=`/* PK: Tailwind theming file for all qti-components
-  Uses tailwind components and utilities from the other files
-
-  https://play.tailwindcss.com/OFThGk8CbR
-  https://play.tailwindcss.com/CeHVrnwgXR
-  https://play.tailwindcss.com/JOgoCf81JM
-
-  You should in you project include modern-normalize.css
-
-  Then we create tailwind components
-  Then we consume these components in our qti-webcomponents
-
-  outline: used for focus
-  ring: used for border around the elements, can be active, its an inner ring, except for
-  the dropping well, because that has to surround the drag with the inner ring
-
-  There are 6 types
-  - text    : text-entry and extended-text
-  - select  : inline-choice
-  - button  : .input-control-hidden qti-choice, qti-hotspot
-  - check   : qti-choice, qti-hotspot
-  - drag    : gap-match, match, order, associate
-  - drop    : gap-match, match, order, associate
-  - spot    : gap-select-point, graphic-order, qti-graphic-associate
-
-  trying to get the follower modifiers to work:
-
-  - sm   , for elements inside text
-  - lg,  , for large readable containers
-  - in  , inline in text
-
-  taking into account cursors, select-none for some of the elements
-*/
-
-/* FIXMEs 
-  Outline always on top, sometimes it slips under the hover background
-  Intext with inline gaps does not align nicely with existing text https://play.tailwindcss.com/cJEGhvANwM
-  modifiers can not be in components, like this example where red should be a modifier inside base https://play.tailwindcss.com/JSnnv1Vvab?file=css
-  */
-
-/* @layer base, components, utilities, variants; */
-
-/* layout, dimensions, design */
-
-/** default styles for all components */
-
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkCCQXZDO6cjs = require('./chunk-CCQXZDO6.cjs');var _chunkHYQC3D4Zcjs = require('./chunk-HYQC3D4Z.cjs');var _lit = require('lit');var _decoratorsjs = require('lit/decorators.js');var _unsafehtmljs = require('lit/directives/unsafe-html.js');var s=`
+  /** default styles for all components */
 *, ::before, ::after{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -93,7 +49,6 @@ import{a as n}from"./chunk-DPSTDDQZ.js";import{a as w}from"./chunk-AWSFYZS5.js";
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
-
 ::backdrop{
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -143,100 +98,106 @@ import{a as n}from"./chunk-DPSTDDQZ.js";import{a as w}from"./chunk-AWSFYZS5.js";
   --tw-backdrop-saturate:  ;
   --tw-backdrop-sepia:  ;
 }
-
 /** The different components, you can choose only one */
-
 /* - button  : .input-control-hidden qti-choice, qti-hotspot */
-
 /*  - select  : inline-choice */
-
 /* - check   : qti-choice, qti-hotspot */
-
 /* !important, remove for checkbox and radio the active ring, the radio and checkbox will be selected instead */
-
 /* @apply select-none; */
-
 /* - text    : text-entry and extended-text */
-
 /* - spot    : gap-select-point, graphic-order, qti-graphic-associate */
-
 /* - drag    : gap-match, match, order, associate */
-
 /* - drop    : gap-match, match, order, associate */
-
 /** End components */
-
 /* hover, every element has a hover, except disabled( which overrides hover */
-
 /* focus, every element has a focus, even drop ( for keyboard access, eventually ) */
-
 /* active, choice active class and, used on checkbox and radio where not .qti-input-choice-hidden */
-
 /* readonly, overwrites cursor, hover background, outline for focus and ring */
-
 /* disabled, make gray state */
-
 /* drag in the drop, else the drag in the drop was black and not gray */
-
 /** Modifiers */
-
 /* PK: There was no utility to reset the ring-inset
   We use this for the drop container, where we want the ring to have an outset
   So the drag, with ring-inset, snugs neatly into the drop with ring-'outset' 
   by unsetting the ring-inset */
-
 /* intext for elements which has to appear in text
   - intext    : gap-match > qti-gap, hottext > hottext, select
   */
-
 /* small for elements which has to appear in text
   - intext    : gap-match > qti-gap, hottext > hottext, select
 */
-
 /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
+/* PK: Tailwind theming file for all qti-components
+  Uses tailwind components and utilities from the other files
 
-/* QTI Interactions */
+  https://play.tailwindcss.com/OFThGk8CbR
+  https://play.tailwindcss.com/CeHVrnwgXR
+  https://play.tailwindcss.com/JOgoCf81JM
+
+  You should in you project include modern-normalize.css
+
+  Then we create tailwind components
+  Then we consume these components in our qti-webcomponents
+
+  outline: used for focus
+  ring: used for border around the elements, can be active, its an inner ring, except for
+  the dropping well, because that has to surround the drag with the inner ring
 
+  There are 6 types
+  - text    : text-entry and extended-text
+  - select  : inline-choice
+  - button  : .input-control-hidden qti-choice, qti-hotspot
+  - check   : qti-choice, qti-hotspot
+  - drag    : gap-match, match, order, associate
+  - drop    : gap-match, match, order, associate
+  - spot    : gap-select-point, graphic-order, qti-graphic-associate
+
+  trying to get the follower modifiers to work:
+
+  - sm   , for elements inside text
+  - lg,  , for large readable containers
+  - in  , inline in text
+
+  taking into account cursors, select-none for some of the elements
+*/
+/* FIXMEs 
+  Outline always on top, sometimes it slips under the hover background
+  Intext with inline gaps does not align nicely with existing text https://play.tailwindcss.com/cJEGhvANwM
+  modifiers can not be in components, like this example where red should be a modifier inside base https://play.tailwindcss.com/JSnnv1Vvab?file=css
+  */
+/* @layer base, components, utilities, variants; */
+/* layout, dimensions, design */
+/* QTI Interactions */
 .qti-underline {
   text-decoration: underline;
 }
-
 .qti-align-left {
   text-align: left;
 }
-
 .qti-align-center {
   text-align: center;
 }
-
 .qti-align-right {
   text-align: right;
 }
-
 .qti-valign-top {
   vertical-align: top;
 }
-
 .qti-valign-middle {
   vertical-align: middle;
 }
-
 .qti-valign-baseline {
   vertical-align: baseline;
 }
-
 .qti-valign-bottom {
   vertical-align: bottom;
 }
-
 .qti-fullwidth {
   width: 100%;
 }
-
 .qti-hidden {
   display: none;
 }
-
 .qti-visually-hidden {
   position: fixed !important;
   overflow: hidden;
@@ -246,12 +207,10 @@ import{a as n}from"./chunk-DPSTDDQZ.js";import{a as w}from"./chunk-AWSFYZS5.js";
   margin: -1px;
   clip: rect(1px 1px 1px 1px);
 }
-
 .qti-bordered {
   padding: 2px;
   border: 1px solid #888;
 }
-
 .qti-well{
   cursor: pointer;
   outline: 2px solid transparent;
@@ -276,165 +235,125 @@ import{a as n}from"./chunk-DPSTDDQZ.js";import{a as w}from"./chunk-AWSFYZS5.js";
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity));
 }
-
 .qti-layout-row {
   display: flow-root;
   width: 100%;
 }
-
 .qti-layout-row [class*='qti-layout-col'] {
   margin-left: 2.1276595745%;
   float: left;
 }
-
 .qti-layout-row [class*='qti-layout-col']:first-child {
   margin-left: 0;
 }
-
 .qti-layout-row .qti-layout-col12 {
   width: 100%;
 }
-
 .qti-layout-row .qti-layout-offset12 {
   margin-left: 104.2553191489%;
 }
-
 .qti-layout-row .qti-layout-offset12:first-child {
   margin-left: 102.1276595745%;
 }
-
 .qti-layout-row .qti-layout-col11 {
   width: 91.4893617021%;
 }
-
 .qti-layout-row .qti-layout-offset11 {
   margin-left: 95.7446808511%;
 }
-
 .qti-layout-row .qti-layout-offset11:first-child {
   margin-left: 93.6170212766%;
 }
-
 .qti-layout-row .qti-layout-col10 {
   width: 82.9787234043%;
 }
-
 .qti-layout-row .qti-layout-offset10 {
   margin-left: 87.2340425532%;
 }
-
 .qti-layout-row .qti-layout-offset10:first-child {
   margin-left: 85.1063829787%;
 }
-
 .qti-layout-row .qti-layout-col9 {
   width: 74.4680851064%;
 }
-
 .qti-layout-row .qti-layout-offset9 {
   margin-left: 78.7234042553%;
 }
-
 .qti-layout-row .qti-layout-offset9:first-child {
   margin-left: 76.5957446809%;
 }
-
 .qti-layout-row .qti-layout-col8 {
   width: 65.9574468085%;
 }
-
 .qti-layout-row .qti-layout-offset8 {
   margin-left: 70.2127659574%;
 }
-
 .qti-layout-row .qti-layout-offset8:first-child {
   margin-left: 68.085106383%;
 }
-
 .qti-layout-row .qti-layout-col7 {
   width: 57.4468085106%;
 }
-
 .qti-layout-row .qti-layout-offset7 {
   margin-left: 61.7021276596%;
 }
-
 .qti-layout-row .qti-layout-offset7:first-child {
   margin-left: 59.5744680851%;
 }
-
 .qti-layout-row .qti-layout-col6 {
   width: 48.9361702128%;
 }
-
 .qti-layout-row .qti-layout-offset6 {
   margin-left: 53.1914893617%;
 }
-
 .qti-layout-row .qti-layout-offset6:first-child {
   margin-left: 51.0638297872%;
 }
-
 .qti-layout-row .qti-layout-col5 {
   width: 40.4255319149%;
 }
-
 .qti-layout-row .qti-layout-offset5 {
   margin-left: 44.6808510638%;
 }
-
 .qti-layout-row .qti-layout-offset5:first-child {
   margin-left: 42.5531914894%;
 }
-
 .qti-layout-row .qti-layout-col4 {
   width: 31.914893617%;
 }
-
 .qti-layout-row .qti-layout-offset4 {
   margin-left: 36.170212766%;
 }
-
 .qti-layout-row .qti-layout-offset4:first-child {
   margin-left: 34.0425531915%;
 }
-
 .qti-layout-row .qti-layout-col3 {
   width: 23.4042553191%;
 }
-
 .qti-layout-row .qti-layout-offset3 {
   margin-left: 27.6595744681%;
 }
-
 .qti-layout-row .qti-layout-offset3:first-child {
   margin-left: 25.5319148936%;
 }
-
 .qti-layout-row .qti-layout-col2 {
   width: 14.8936170213%;
 }
-
 .qti-layout-row .qti-layout-offset2 {
   margin-left: 19.1489361702%;
 }
-
 .qti-layout-row .qti-layout-offset2:first-child {
   margin-left: 17.0212765957%;
 }
-
 .qti-layout-row .qti-layout-col1 {
   width: 6.3829787234%;
 }
-
 .qti-layout-row .qti-layout-offset1 {
   margin-left: 10.6382978723%;
 }
-
 .qti-layout-row .qti-layout-offset1:first-child {
   margin-left: 8.5106382979%;
 }
-
 /* .qti-input-width-1 {
   width: 1ch;
   min-width: 1ch;
@@ -471,13 +390,11 @@ import{a as n}from"./chunk-DPSTDDQZ.js";import{a as w}from"./chunk-AWSFYZS5.js";
   width: 72ch;
   min-width: 72ch;
 } */
-
 qti-choice-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   gap: 0.5rem;
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -499,17 +416,14 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice{
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
     /* @apply select-none; */
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -517,7 +431,6 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-checked="
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -530,12 +443,10 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled=
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -548,7 +459,6 @@ qti-choice-interaction.qti-input-control-hidden qti-simple-choice[aria-readonly=
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -573,13 +483,11 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice::part(cha) {
       /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
       height: 66.666667%;
       width: 66.666667%;
     }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio']::part(ch){
   display: flex;
   height: 1.25rem;
@@ -598,13 +506,11 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='ra
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='radio'][aria-checked='true']::part(cha){
   border-radius: 9999px;
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox']::part(ch){
   display: flex;
   height: 1.25rem;
@@ -623,23 +529,19 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='ch
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[role='checkbox'][aria-checked='true']::part(cha){
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
       -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");
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -647,7 +549,6 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-che
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -660,12 +561,10 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-dis
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -678,17 +577,22 @@ qti-choice-interaction:not(.qti-input-control-hidden) qti-simple-choice[aria-rea
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
+qti-choice-interaction qti-simple-choice[data-correct-response='true'] {
+      /* @apply bg-green-100 text-green-600; */
+    }
+qti-choice-interaction qti-simple-choice[data-correct-response='true']::after {
+        content: '\\02714';
+        --tw-text-opacity: 1;
+        color: rgb(22 163 74 / var(--tw-text-opacity));
+      }
 qti-choice-interaction qti-simple-choice > p{
   margin: 0px;
   padding: 0px;
 }
-
 qti-text-entry-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
 qti-text-entry-interaction::part(input){
   cursor: pointer;
   outline: 2px solid transparent;
@@ -709,22 +613,18 @@ qti-text-entry-interaction::part(input){
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-
 qti-text-entry-interaction::part(input):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-text-entry-interaction::part(input):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-extended-text-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
 qti-extended-text-interaction::part(textarea){
   cursor: pointer;
   outline: 2px solid transparent;
@@ -745,23 +645,19 @@ qti-extended-text-interaction::part(textarea){
   --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-
 qti-extended-text-interaction::part(textarea):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-extended-text-interaction::part(textarea):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-gap-match-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   line-height: 2rem;
 }
-
 qti-gap-match-interaction qti-gap-text{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -798,17 +694,14 @@ qti-gap-match-interaction qti-gap-text{
     padding-right: 0.5rem;
     line-height: 1.5;
 }
-
 qti-gap-match-interaction qti-gap-text:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-gap-match-interaction qti-gap-text:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-gap-match-interaction qti-gap{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -833,27 +726,21 @@ qti-gap-match-interaction qti-gap{
     display: inline-flex;
     line-height: 1.5;
 }
-
 qti-gap-match-interaction qti-gap:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-gap-match-interaction qti-gap:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-gap-match-interaction qti-gap{
   width: 8rem;
 }
-
 /* PK: should be set in the javascript, default 100px, or listening to data-width attribute according to the spec */
-
 qti-gap-match-interaction qti-gap:empty:after {
       content: '\\0000a0'; /* when empty, put a space in it */
     }
-
 qti-gap-match-interaction qti-gap:not(:empty){
   display: inline-flex;
   width: auto;
@@ -862,7 +749,6 @@ qti-gap-match-interaction qti-gap:not(:empty){
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-
 qti-gap-match-interaction qti-gap:not(:empty) > *{
   flex: 1 1 0%;
   --tw-rotate: 0deg;
@@ -873,17 +759,14 @@ qti-gap-match-interaction qti-gap:not(:empty) > *{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(229 231 235 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
 qti-hotspot-interaction qti-hotspot-choice:hover{
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.3;
 }
-
 qti-hotspot-interaction qti-hotspot-choice {
 
     /* &::after {
@@ -894,7 +777,6 @@ qti-hotspot-interaction qti-hotspot-choice {
         clip-path: inherit;
       } */
   }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle']{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -914,17 +796,14 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle']{
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
   border-radius: 9999px;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle']:hover{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle']:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -932,7 +811,6 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-checked="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -945,12 +823,10 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"]
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -963,7 +839,6 @@ qti-hotspot-interaction qti-hotspot-choice[shape='circle'][aria-readonly="true"]
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect']{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -982,17 +857,14 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect']{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect']:hover{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect']:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1000,7 +872,6 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-checked="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1013,12 +884,10 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1031,17 +900,14 @@ qti-hotspot-interaction qti-hotspot-choice[shape='rect'][aria-readonly="true"]{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly']:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly']:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1049,7 +915,6 @@ qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1062,12 +927,10 @@ qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1080,17 +943,14 @@ qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-readonly="true"]{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-hotspot-interaction qti-hotspot-choice[shape='poly'][aria-checked='true']{
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
-
 qti-hottext-interaction{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1116,17 +976,14 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext{
     /* @apply inline-flex gap-1 px-1 py-0 align-bottom font-normal ring-offset-0; */
     /* @apply gap-0.5 rounded !px-1 !py-0 outline-offset-0 ring-1; */
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1134,7 +991,6 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-checked="true"
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1147,12 +1003,10 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1165,11 +1019,9 @@ qti-hottext-interaction.qti-input-control-hidden qti-hottext[aria-readonly="true
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-hottext-interaction.qti-input-control-hidden qti-hottext::part(ch){
   display: none !important;
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1194,13 +1046,11 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(cha) {
       /* let the checkmark or radio circle already take up space, else when checking everyhing collapses */
       height: 66.666667%;
       width: 66.666667%;
     }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']::part(ch){
   display: flex;
   height: 1.25rem;
@@ -1219,13 +1069,11 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio']
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='radio'][aria-checked='true']::part(cha){
   border-radius: 9999px;
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox']::part(ch){
   display: flex;
   height: 1.25rem;
@@ -1244,13 +1092,11 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbo
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[role='checkbox'][aria-checked='true']::part(cha){
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
       -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");
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
   display: inline-flex;
 
@@ -1266,7 +1112,6 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext{
 
     box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch){
   height: 1rem !important;
   width: 1rem !important;
@@ -1274,17 +1119,14 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext::part(ch){
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color) !important;
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000) !important;
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1292,7 +1134,6 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-checked=
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1305,12 +1146,10 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1323,7 +1162,6 @@ qti-hottext-interaction:not(.qti-input-control-hidden) qti-hottext[aria-readonly
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-inline-choice-interaction::part(select){
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1349,27 +1187,22 @@ qti-inline-choice-interaction::part(select){
     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-inline-choice-interaction::part(select):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-inline-choice-interaction::part(select):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-inline-choice-interaction::part(select) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis; */
   }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type{
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
   padding-bottom: 1rem;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1405,24 +1238,20 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type
     padding-left: 1rem;
     padding-right: 0.75rem;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:first-of-type qti-simple-associable-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type{
   display: grid;
   grid-auto-columns: minmax(0, 1fr);
   grid-auto-flow: column;
   gap: 0.5rem;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1445,24 +1274,20 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
   --tw-ring-offset-width: 1px;
     --tw-ring-inset: unset;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice {
       /* @apply flex h-32  flex-col gap-2; */
       display: flex;
       height: 8rem;
       flex-direction: column;
     }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1498,21 +1323,17 @@ qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type
     padding-left: 1rem;
     padding-right: 0.75rem;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-match-interaction:not(.qti-match-tabular) qti-simple-match-set:last-of-type qti-simple-associable-choice > qti-simple-associable-choice {
       flex-basis: fit-content;
     }
-
 qti-order-interaction::part(qti-simple-choice),
   qti-order-interaction qti-simple-choice{
   cursor: pointer;
@@ -1549,19 +1370,16 @@ qti-order-interaction::part(qti-simple-choice),
     padding-left: 1rem;
     padding-right: 0.75rem;
 }
-
 qti-order-interaction::part(qti-simple-choice):hover,
   qti-order-interaction qti-simple-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-order-interaction::part(qti-simple-choice):focus,
   qti-order-interaction qti-simple-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-order-interaction::part(qti-simple-choice){
   display: flex;
   width: 100%;
@@ -1569,15 +1387,12 @@ qti-order-interaction::part(qti-simple-choice){
   overflow: hidden;
   text-overflow: ellipsis;
 }
-
 qti-order-interaction::part(drops){
   gap: 0.5rem;
 }
-
 qti-order-interaction::part(drags){
   gap: 0.5rem;
 }
-
 qti-order-interaction::part(drop-list){
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1602,17 +1417,14 @@ qti-order-interaction::part(drop-list){
     display: flex;
     min-height: 4rem;
 }
-
 qti-order-interaction::part(drop-list):hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-order-interaction::part(drop-list):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-order-interaction::part(active){
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1620,7 +1432,6 @@ qti-order-interaction::part(active){
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-associate-interaction::part(qti-simple-associable-choice),
   qti-associate-interaction qti-simple-associable-choice{
   cursor: pointer;
@@ -1661,19 +1472,16 @@ qti-associate-interaction::part(qti-simple-associable-choice),
     padding-left: 1rem;
     padding-right: 0.75rem;
 }
-
 qti-associate-interaction::part(qti-simple-associable-choice):hover,
   qti-associate-interaction qti-simple-associable-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-associate-interaction::part(qti-simple-associable-choice):focus,
   qti-associate-interaction qti-simple-associable-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-associate-interaction::part(associables-container){
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
@@ -1687,7 +1495,6 @@ qti-associate-interaction::part(associables-container){
       rgb(0 0 0 / 0%) calc(50% + 1px)
     );
 }
-
 qti-associate-interaction::part(active){
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1695,7 +1502,6 @@ qti-associate-interaction::part(active){
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-associate-interaction::part(drop-list){
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1721,9 +1527,7 @@ qti-associate-interaction::part(drop-list){
     height: 3rem;
     width: 33.333333%;
 }
-
 /* @apply my-2; */
-
 qti-graphic-order-interaction qti-hotspot-choice{
   cursor: pointer;
   border-radius: 0.375rem;
@@ -1742,17 +1546,14 @@ qti-graphic-order-interaction qti-hotspot-choice{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
 }
-
 qti-graphic-order-interaction qti-hotspot-choice:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-graphic-order-interaction qti-hotspot-choice:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1760,7 +1561,6 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-checked="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1773,12 +1573,10 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1791,7 +1589,6 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 /* &::after {
         content: '';
         @apply absolute top-0 block scale-75 bg-white;
@@ -1799,7 +1596,6 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-readonly="true"]{
         width: inherit;
         clip-path: inherit;
       } */
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]{
   height: 1.5rem;
   width: 1.5rem;
@@ -1812,16 +1608,13 @@ qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]{
   align-items: center;
   justify-content: center;
 }
-
 qti-graphic-order-interaction qti-hotspot-choice[aria-ordervalue]::after {
       content: attr(aria-ordervalue) !important;
     }
-
 qti-graphic-associate-interaction{
   position: relative;
   display: block;
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       /* border-radius: 100%;
         background-color: green; */
@@ -1842,17 +1635,14 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'] {
       --tw-ring-opacity: 1;
       --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
     }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle']:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1860,7 +1650,6 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-ch
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1873,12 +1662,10 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-di
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1891,7 +1678,6 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='circle'][aria-re
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
       /* border-radius: 0; */
       /* background-color: green; */
@@ -1912,17 +1698,14 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'] {
       --tw-ring-opacity: 1;
       --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
     }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square']:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1930,7 +1713,6 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-ch
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -1943,12 +1725,10 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-di
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -1961,30 +1741,24 @@ qti-graphic-associate-interaction qti-associable-hotspot[shape='square'][aria-re
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-graphic-gap-match-interaction{
   position: relative;
 }
-
 qti-graphic-gap-match-interaction img{
   margin: 0px;
   padding: 0px;
 }
-
 qti-slider-interaction{
   display: block; /* else no screenshot will be made with html-to-image */
 }
-
 qti-slider-interaction:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(249 250 251 / var(--tw-bg-opacity));
 }
-
 qti-slider-interaction:focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-slider-interaction[aria-checked="true"]{
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
@@ -1992,7 +1766,6 @@ qti-slider-interaction[aria-checked="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(96 165 250 / var(--tw-ring-opacity));
 }
-
 qti-slider-interaction[aria-disabled="true"]{
   cursor: not-allowed;
   --tw-bg-opacity: 1;
@@ -2005,12 +1778,10 @@ qti-slider-interaction[aria-disabled="true"]{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(156 163 175 / var(--tw-ring-opacity));
 }
-
 qti-slider-interaction[aria-disabled="true"] > *{
   --tw-text-opacity: 1 !important;
   color: rgb(107 114 128 / var(--tw-text-opacity)) !important;
 }
-
 qti-slider-interaction[aria-readonly="true"]{
   cursor: pointer;
   --tw-bg-opacity: 1;
@@ -2023,34 +1794,28 @@ qti-slider-interaction[aria-readonly="true"]{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-
 qti-slider-interaction {
 
   --qti-tick-color: rgb(229 231 235 / 1);
   --qti-tick-width: 2px;
 }
-
 qti-slider-interaction::part(slider){
   margin-left: 2rem;
   margin-right: 2rem; /* so the slider stays INSIDE of the qti-slider-interaction */ padding-bottom: 1rem; padding-top: 1.25rem; /* this keeps all content in the qti-slider interaction, also for html-to-image */
 }
-
 qti-slider-interaction{
 
   --show-bounds: true;
 }
-
 qti-slider-interaction::part(bounds){
   display: flex;
   width: 100%;
   justify-content: space-between; /* the two divs with value lower and upper will now be at start and end of this bounds container */ margin-bottom: 0.5rem; /* just so it aligns with the value 'knob' */
 }
-
 qti-slider-interaction{
 
   --show-ticks: true;
 }
-
 qti-slider-interaction::part(ticks){
   margin-left: 0.125rem;
   margin-right: 0.125rem;
@@ -2060,14 +1825,12 @@ qti-slider-interaction::part(ticks){
     background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x;
     background-size: calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
 }
-
 qti-slider-interaction::part(rail){
   display: flex;
   align-items: center; /* so the knob is neatly centered vertically */
     /* DESIGN */
     box-sizing: border-box; /* if you have a border in the design apply, this box-border will make the border stay INSIDE the rail */ height: 0.75rem; width: 100%; cursor: pointer; border-radius: 9999px; border-style: solid; --tw-border-opacity: 1; border-color: rgb(229 231 235 / var(--tw-border-opacity)); --tw-bg-opacity: 1; background-color: rgb(243 244 246 / var(--tw-bg-opacity));
 }
-
 qti-slider-interaction::part(knob){
   position: relative;
   height: 1.5rem;
@@ -2081,22 +1844,18 @@ qti-slider-interaction::part(knob){
   background-color: rgb(59 130 246 / var(--tw-bg-opacity));
     left: var(--value-percentage);
 }
-
 qti-slider-interaction{
 
   --show-value: true;
 }
-
 qti-slider-interaction::part(value){
   position: absolute;
   bottom: 2rem; /* align the value, which you can drag, on top of the knob, so it aligns with the rest of the values */ left: 0.75rem; /* should be half width of the knob if you want to center these two */ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); cursor: pointer; border-radius: 0.25rem; --tw-bg-opacity: 1; background-color: rgb(59 130 246 / var(--tw-bg-opacity)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; text-align: center;
 }
-
 qti-select-point-interaction::part(point):hover{
   background-color: rgb(219 234 254 / var(--tw-bg-opacity));
   --tw-bg-opacity: 0.3;
 }
-
 qti-select-point-interaction::part(point){
   cursor: pointer;
   border-radius: 0.375rem;
@@ -2116,79 +1875,228 @@ qti-select-point-interaction::part(point){
   --tw-ring-color: rgb(17 24 39 / var(--tw-ring-opacity));
   border-radius: 9999px;
 }
-
 qti-select-point-interaction::part(point):hover{
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
 }
-
 qti-select-point-interaction::part(point):focus{
   outline-width: 2px;
   outline-color: #93c5fd;
 }
-
 qti-select-point-interaction::part(point) { /* aria-checked:act aria-readonly:rdo aria-disabled:dis ;*/
   }
-
 qti-position-object-stage qti-position-object-interaction {
     /* no styles necessary, only layout styles, defined in the component */
     /* height: 40px; */
   }
-
 qti-prompt{
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
   display: block;
   width: 100%;
 }
-
 qti-choice-interaction.qti-choices-stacking-2{
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
-
 qti-choice-interaction.qti-choices-stacking-2 qti-prompt{
   grid-column: span 2 / span 2;
 }
-
 qti-choice-interaction.qti-choices-stacking-3{
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
 }
-
 qti-choice-interaction.qti-choices-stacking-3 qti-prompt{
   grid-column: span 3 / span 3;
 }
-
 qti-choice-interaction.qti-choices-stacking-4{
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
 }
-
 qti-choice-interaction.qti-choices-stacking-4 qti-prompt{
   grid-column: span 4 / span 4;
 }
-
 qti-choice-interaction.qti-choices-stacking-5{
   display: grid;
   grid-template-columns: repeat(5, minmax(0, 1fr));
 }
-
 qti-choice-interaction.qti-choices-stacking-5 qti-prompt{
   grid-column: span 5 / span 5;
 }
-
 qti-choice-interaction.qti-orientation-horizontal {
     /* is the default layout */
   }
-
 qti-choice-interaction[orientation='horizontal'] {
     flex-direction: row;
   }
-
-img,
-video {
-  max-width: 100%;
-  height: auto;
+::host{
+  height: 100vh;
+  width: 100vw;
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+}
+qti-assessment-test{
+  display: block;
+  padding: 2rem;
+}
+qti-assessment-test .nav{
+  isolation: isolate;
+  margin-top: 1rem;
+  display: inline-flex;
+  width: 100%;
+}
+qti-assessment-test .nav > :not([hidden]) ~ :not([hidden]){
+  --tw-space-x-reverse: 0;
+  margin-right: calc(-1px * var(--tw-space-x-reverse));
+  margin-left: calc(-1px * calc(1 - var(--tw-space-x-reverse)));
+}
+qti-assessment-test .nav{
+  border-radius: 0.375rem;
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-`;var o=class extends g{constructor(){super(...arguments);this.itemLocation="";this.disabled=!1;this._xml="";this.audienceContext={view:"candidate"};this.render=()=>d`${p(this._xml)}<slot></slot>`}update(t){t.has("disabled")&&this.assessmentItem&&(this.assessmentItem.disabled=this.disabled),super.update(t)}set xml(t){this._xml=w(t).customTypes().cDataToComment().customDefinition().assetsLocation(`${this.itemLocation}`).xml()}set css(t){var e;let a=new CSSStyleSheet;a.replaceSync(t),(e=this.shadowRoot)==null||e.adoptedStyleSheets.push(a)}get assessmentItem(){var t;return(t=this.shadowRoot)==null?void 0:t.querySelector("qti-assessment-item")}connectedCallback(){super.connectedCallback(),this.css=s}};r([i({type:String,attribute:"item-location"})],o.prototype,"itemLocation",2),r([i({type:Boolean,attribute:!1})],o.prototype,"disabled",2),r([l()],o.prototype,"_xml",2),r([f({context:n}),i({attribute:!1})],o.prototype,"audienceContext",2),o=r([h("qti-item")],o);export{o as a};
+qti-assessment-test test-prev::part(button) {
+    all: unset;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    border-top-left-radius: 0.375rem;
+    border-bottom-left-radius: 0.375rem;
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 1rem;
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity));
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-inset: inset;
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  }
+qti-assessment-test test-prev::part(button):hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+qti-assessment-test test-prev::part(button):focus{
+  z-index: 20;
+  outline-offset: 0px;
+}
+qti-assessment-test test-slider::part(input){
+  width: 100%;
+}
+qti-assessment-test test-next::part(button) {
+    all: unset;
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    border-top-right-radius: 0.375rem;
+    border-bottom-right-radius: 0.375rem;
+    --tw-bg-opacity: 1;
+    background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+    padding-left: 1rem;
+    padding-right: 0.5rem;
+    --tw-text-opacity: 1;
+    color: rgb(156 163 175 / var(--tw-text-opacity));
+    --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+    --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+    box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+    --tw-ring-inset: inset;
+    --tw-ring-opacity: 1;
+    --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+  }
+qti-assessment-test test-next::part(button):hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+qti-assessment-test test-next::part(button):focus{
+  z-index: 20;
+  outline-offset: 0px;
+}
+qti-assessment-test test-paging-buttons{
+  display: none;
+  width: 100%;
+  justify-content: center;
+}
+@media (min-width: 768px){
+  qti-assessment-test test-paging-buttons{
+    margin-top: -1px;
+    display: flex;
+  }
+}
+qti-assessment-test test-paging-buttons > button{
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-inset: inset;
+  --tw-ring-opacity: 1;
+  --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
+}
+qti-assessment-test test-paging-buttons > button:hover{
+  --tw-bg-opacity: 1;
+  background-color: rgb(249 250 251 / var(--tw-bg-opacity));
+}
+qti-assessment-test test-paging-buttons > button:focus{
+  z-index: 20;
+  outline-offset: 0px;
+}
+qti-assessment-test test-paging-buttons > button[data-active-item='true']{
+  position: relative;
+  z-index: 10;
+  display: inline-flex;
+  align-items: center;
+  --tw-bg-opacity: 1;
+  background-color: rgb(79 70 229 / var(--tw-bg-opacity));
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 600;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+qti-assessment-test test-paging-buttons > button[data-active-item='true']:focus{
+  z-index: 20;
+}
+qti-assessment-test test-paging-buttons > button[data-active-item='true']:focus-visible{
+  outline-style: solid;
+  outline-width: 2px;
+  outline-offset: 2px;
+  outline-color: #4f46e5;
+}
+qti-assessment-test qti-test-part qti-assessment-section{
+  aspect-ratio: 16 / 9;
+  width: 100%;
+}
+`;var o=class extends _lit.LitElement{constructor(){super();this.itemLocation="";this.disabled=!1;this._xml="";this.audienceContext={view:"candidate"};this.render=()=>_lit.html`${_unsafehtmljs.unsafeHTML.call(void 0, this._xml)}<slot></slot>`;this.addEventListener("qti-item-first-updated",t=>{this.checkAudienceContext()})}update(t){t.has("disabled")&&this.assessmentItem&&(this.assessmentItem.disabled=this.disabled),t.has("audienceContext")&&this.checkAudienceContext(),super.update(t)}checkAudienceContext(){var t,a;(t=this.shadowRoot.querySelectorAll("[view]"))==null||t.forEach(r=>{r.getAttribute("view")===this.audienceContext.view?r.classList.add("show"):r.classList.remove("show")}),(a=this.assessmentItem)==null||a.showCorrectResponse(this.audienceContext.view==="scorer")}set xml(t){this._xml=_chunkCCQXZDO6cjs.a.call(void 0, t).customTypes().cDataToComment().customDefinition().assetsLocation(`${this.itemLocation}`).xml()}set css(t){var r;let a=new CSSStyleSheet;a.replaceSync(t),(r=this.shadowRoot)==null||r.adoptedStyleSheets.push(a)}get assessmentItem(){var t;return(t=this.shadowRoot)==null?void 0:t.querySelector("qti-assessment-item")}connectedCallback(){super.connectedCallback(),this.css=s}};o.styles=_lit.css`
+    [view],
+    qti-outcome-declaration,
+    qti-response-declaration {
+      display: none;
+    }
+    [view].show {
+      display: block;
+    }
+  `,_chunkHYQC3D4Zcjs.c.call(void 0, [_decoratorsjs.property.call(void 0, {type:String,attribute:"item-location"})],o.prototype,"itemLocation",2),_chunkHYQC3D4Zcjs.c.call(void 0, [_decoratorsjs.property.call(void 0, {type:Boolean,attribute:!1})],o.prototype,"disabled",2),_chunkHYQC3D4Zcjs.c.call(void 0, [_decoratorsjs.state.call(void 0, )],o.prototype,"_xml",2),_chunkHYQC3D4Zcjs.c.call(void 0, [_decoratorsjs.property.call(void 0, {attribute:!1})],o.prototype,"audienceContext",2),o= exports.a =_chunkHYQC3D4Zcjs.c.call(void 0, [_decoratorsjs.customElement.call(void 0, "qti-item")],o);exports.a = o;