@citolab/qti-components 7.0.2 → 7.0.4

package/dist/index.js

@@ -1386,6 +1386,7 @@ var qtiTransformTest = () => {
       return new Promise((resolve, _2) => {
         loadXML(uri).then((xml2) => {
           xmlFragment = xml2;
+          api.path(uri.substring(0, uri.lastIndexOf("/")));
           return resolve(api);
         });
       });
@@ -1394,6 +1395,10 @@ var qtiTransformTest = () => {
       xmlFragment = parseXML(xmlString);
       return api;
     },
+    path: (location) => {
+      setLocation(xmlFragment, location);
+      return api;
+    },
     fn(fn) {
       fn(xmlFragment);
       return api;
@@ -1423,28 +1428,12 @@ var TestLoaderMixin = (superClass) => {
     constructor(...args) {
       super(...args);
       this.testURL = "";
-      this.addEventListener("qti-load-test-request", (e10) => {
-        const { testURL } = e10.detail;
-        if (!testURL) {
-          console.warn(
-            "No test found, there should be an attribute test-url with the path to the test on the test-container"
-          );
-        } else {
-          this.testURL = testURL;
-        }
-        e10.detail.promise = (async () => {
-          e10.preventDefault();
-          const api = await qtiTransformTest().load(`${this.testURL}`);
-          return api.htmlDoc();
-        })();
-      });
       this.addEventListener("qti-assessment-test-connected", () => {
       });
       this.addEventListener("qti-load-item-request", ({ detail }) => {
-        if (!this.testURL) return;
         detail.promise = (async () => {
           const api = await qtiTransformItem().load(
-            `${this.testURL.slice(0, this.testURL.lastIndexOf("/"))}/${detail.href}`,
+            `${detail.href}`,
             detail.cancelPreviousRequest
           );
           return api.htmlDoc();
@@ -1682,18 +1671,6 @@ __decorateClass([
 
 // src/lib/qti-test/qti-test.ts
 var QtiTest = class extends TestLoaderMixin(TestNavigationMixin(TestViewMixin(TestBase))) {
-  /**
-   * Lifecycle callback invoked when the element is added to the DOM.
-   * Automatically appends the content of a `<template>` element (if present)
-   * to the shadow DOM.
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    const template = this.querySelector(":scope > template");
-    if (template) {
-      this.shadowRoot?.appendChild(template.content);
-    }
-  }
   /**
    * Renders the component's template.
    * Provides a default `<slot>` for content projection.
@@ -2018,6 +1995,14 @@ var TestItemLink = class extends TestComponent {
     return x` <slot></slot> `;
   }
 };
+TestItemLink.styles = i2`
+    :host {
+      ${btn};
+    }
+    :host([disabled]) {
+      ${dis};
+    }
+  `;
 __decorateClass([
   n5({ type: String, attribute: "item-id" })
 ], TestItemLink.prototype, "itemId", 2);
@@ -4560,20 +4545,6 @@ qti-response-declaration {
 
     & qti-gap {
 
-      &[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)
-      }
-
       &[disabled] {
 
         &:not(:empty) {
@@ -4591,6 +4562,20 @@ qti-response-declaration {
         outline: 4px solid var(--qti-disabled-bg)
       }
 
+      &[enabled] {
+
+        /* Light theme override */
+        .qti-selections-light & {
+          border-color: var(--qti-light-border-active);
+        }
+
+        /* Dark theme override */
+        .qti-selections-dark & {
+          border-color: var(--qti-dark-border-active);
+        }
+        background-color: var(--qti-bg-active)
+      }
+
       &[active] {
 
         /* Light theme override */
@@ -4973,12 +4958,22 @@ qti-response-declaration {
   }
 
   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 */
       gap: var(--qti-gap-size);
+      border: 2px solid transparent;
 
       & qti-simple-associable-choice {
 
@@ -5370,6 +5365,16 @@ qti-response-declaration {
   }
 
   qti-associate-interaction {
+    /* General styles for active and enabled states */
+    &:state(--dragzone-active) slot[name='qti-simple-associable-choice'] {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-enabled) slot[name='qti-simple-associable-choice'] {
+      background-color: var(--qti-bg-active);
+    }
+
     & qti-simple-associable-choice, /* drags when in lightdom */
     &::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
 
@@ -5672,76 +5677,8 @@ qti-response-declaration {
   }
 
   qti-slider-interaction {
-    display: block;
-
     --qti-tick-color: rgb(229 231 235 / 100%);
     --qti-tick-width: 1px;
-
-    &::part(slider) {
-      margin-left: 2rem; /* mx-8 */
-      margin-right: 2rem;
-      padding-bottom: 1rem; /* pb-4 */
-      padding-top: 1.25rem; /* pt-5 */
-    }
-
-    --show-bounds: true;
-
-    &::part(bounds) {
-      display: flex;
-      width: 100%;
-      justify-content: space-between;
-      margin-bottom: 0.5rem; /* mb-2 */
-    }
-
-    --show-ticks: true;
-
-    &::part(ticks) {
-      margin-left: 0.125rem; /* mx-0.5 */
-      margin-right: 0.125rem;
-      margin-bottom: 0.25rem; /* mb-1 */
-      height: 0.5rem; /* h-2 */
-      background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x 0
-        center / calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
-    }
-
-    &::part(rail) {
-      display: flex;
-      align-items: center;
-      box-sizing: border-box;
-      height: 0.375rem; /* h-1.5 */
-      width: 100%;
-      cursor: pointer;
-      border-radius: 9999px; /* rounded-full */
-      border: 1px solid #d1d5db; /* border-gray-300 */
-      background-color: #e5e7eb; /* bg-gray-200 */
-    }
-
-    &::part(knob) {
-      background-color: var(--qti-primary);
-      position: relative;
-      height: 1rem; /* h-4 */
-      width: 1rem; /* w-4 */
-      transform-origin: center;
-      transform: translateX(-50%);
-      cursor: pointer;
-      border-radius: 9999px; /* rounded-full */
-      left: var(--value-percentage);
-    }
-
-    --show-value: true;
-
-    &::part(value) {
-      position: absolute;
-      bottom: 2rem; /* bottom-8 */
-      left: 0.5rem; /* left-2 */
-      transform: translateX(-50%);
-      cursor: pointer;
-      border-radius: 0.25rem; /* rounded */
-      background-color: #f3f4f6; /* bg-gray-100 */
-      padding: 0.25rem 0.5rem; /* px-2 py-1 */
-      text-align: center;
-      color: #6b7280; /* text-gray-500 */
-    }
   }
 
   qti-select-point-interaction {
@@ -5788,62 +5725,72 @@ qti-response-declaration {
 var TestContainer = class extends r4 {
   constructor() {
     super(...arguments);
-    this.testURL = "";
+    this.testURL = null;
+    this.testDoc = null;
+    this.testXML = null;
+    /** Template content if provided */
+    this.templateContent = null;
+  }
+  async handleTestURLChange() {
+    if (!this.testURL) return;
+    try {
+      const api = await qtiTransformTest().load(this.testURL);
+      this.testDoc = api.htmlDoc();
+    } catch (error) {
+      console.error("Error loading or parsing XML:", error);
+    }
+  }
+  handleTestXMLChange() {
+    if (!this.testXML) return;
+    try {
+      this.testDoc = qtiTransformTest().parse(this.testXML).htmlDoc();
+    } catch (error) {
+      console.error("Error parsing XML:", error);
+    }
   }
-  /**
-   * Lifecycle callback invoked when the element is added to the DOM.
-   * Handles template preloading and dispatches a `qti-load-test-request` event
-   * if no template is found.
-   */
   async connectedCallback() {
     super.connectedCallback();
-    const template = this.querySelector("template");
-    if (template) {
-      this.preContent = template.content;
-    } else {
-      this.preContent = x``;
-      const sheet = new CSSStyleSheet();
-      sheet.replaceSync(item_default);
-      this.shadowRoot.adoptedStyleSheets = [sheet];
-      await this.updateComplete;
-      const event = new CustomEvent("qti-load-test-request", {
-        bubbles: true,
-        composed: true,
-        detail: {
-          promise: null,
-          testURL: this.testURL
-        }
-      });
-      const preventDefault = this.dispatchEvent(event);
-      if (!preventDefault) {
-        console.warn("No qti-load-test-request listener found");
-        this.preContent = x`<span>qti-load-test-request was not catched</span>`;
-      } else {
-        this.content = (async () => {
-          return await event.detail.promise;
-        })();
-      }
+    this.initializeTemplateContent();
+    this.applyStyles();
+    if (this.testURL) {
+      this.handleTestURLChange();
+    }
+    if (this.testXML) {
+      this.handleTestXMLChange();
     }
   }
-  /**
-   * Renders the component content.
-   * Preloaded template content is rendered first, followed by the default slot
-   * and dynamically loaded content.
-   */
+  initializeTemplateContent() {
+    const template = this.querySelector("template");
+    this.templateContent = template ? template.content : x``;
+  }
+  applyStyles() {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(item_default);
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+  }
   render() {
     return x`
-      ${this.preContent}
+      ${this.templateContent}
       <slot></slot>
-      ${m4(this.content, x`<span>Loading...</span>`)}
+      ${m4(this.testDoc, x`<span>Loading...</span>`)}
     `;
   }
 };
-__decorateClass([
-  r6()
-], TestContainer.prototype, "content", 2);
 __decorateClass([
   n5({ type: String, attribute: "test-url" })
 ], TestContainer.prototype, "testURL", 2);
+__decorateClass([
+  r6()
+], TestContainer.prototype, "testDoc", 2);
+__decorateClass([
+  r6()
+], TestContainer.prototype, "testXML", 2);
+__decorateClass([
+  watch("testURL", { waitUntilFirstUpdate: true })
+], TestContainer.prototype, "handleTestURLChange", 1);
+__decorateClass([
+  watch("testXML", { waitUntilFirstUpdate: true })
+], TestContainer.prototype, "handleTestXMLChange", 1);
 TestContainer = __decorateClass([
   t4("test-container")
 ], TestContainer);
@@ -6992,49 +6939,89 @@ TestPagingButtonsStamp = __decorateClass([
   t4("test-paging-buttons-stamp")
 ], TestPagingButtonsStamp);
 
-// src/lib/qti-item/qti-item.mixin.ts
-function QtiItemMixin(Base) {
-  class QtiItemClass extends Base {
-    // the XMLDocument
-    createRenderRoot() {
-      return this;
+// src/lib/qti-item/qti-item.ts
+var QtiItem = class extends r4 {
+  render() {
+    return x`<slot></slot>`;
+  }
+};
+QtiItem = __decorateClass([
+  t4("qti-item")
+], QtiItem);
+
+// src/lib/qti-item/components/item-container.ts
+var ItemContainer = class extends r4 {
+  constructor() {
+    super(...arguments);
+    this.itemURL = null;
+    this.itemDoc = null;
+    this.itemXML = null;
+    /** Template content if provided */
+    this.templateContent = null;
+  }
+  async handleItemURLChange() {
+    if (!this.itemURL) return;
+    try {
+      const api = await qtiTransformItem().load(this.itemURL);
+      this.itemDoc = api.htmlDoc();
+    } catch (error) {
+      console.error("Error loading or parsing XML:", error);
     }
-    get assessmentItem() {
-      return this.renderRoot?.querySelector("qti-assessment-item");
+  }
+  handleItemXMLChange() {
+    if (!this.itemXML) return;
+    try {
+      this.itemDoc = qtiTransformItem().parse(this.itemXML).htmlDoc();
+    } catch (error) {
+      console.error("Error parsing XML:", error);
     }
-    async connectedCallback() {
-      super.connectedCallback();
-      await this.updateComplete;
-      this.dispatchEvent(
-        new CustomEvent("qti-item-connected", {
-          bubbles: true,
-          composed: true,
-          detail: { identifier: this.identifier, href: this.href }
-        })
-      );
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    this.initializeTemplateContent();
+    this.applyStyles();
+    if (this.itemURL) {
+      this.handleItemURLChange();
     }
-    render() {
-      return x`${this.xmlDoc}`;
+    if (this.itemXML) {
+      this.handleItemXMLChange();
     }
   }
-  __decorateClass([
-    n5({ type: String, reflect: true })
-  ], QtiItemClass.prototype, "identifier", 2);
-  __decorateClass([
-    n5({ type: String })
-  ], QtiItemClass.prototype, "href", 2);
-  __decorateClass([
-    n5({ type: Object, attribute: false })
-  ], QtiItemClass.prototype, "xmlDoc", 2);
-  return QtiItemClass;
-}
-
-// src/lib/qti-item/qti-item.ts
-var QtiItem = class extends QtiItemMixin(r4) {
+  initializeTemplateContent() {
+    const template = this.querySelector("template");
+    this.templateContent = template ? template.content : x``;
+  }
+  applyStyles() {
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(item_default);
+    this.shadowRoot.adoptedStyleSheets = [sheet];
+  }
+  render() {
+    return x`
+      ${this.templateContent}
+      <slot></slot>
+      ${m4(this.itemDoc, x`<span>Loading...</span>`)}
+    `;
+  }
 };
-QtiItem = __decorateClass([
-  t4("qti-item")
-], QtiItem);
+__decorateClass([
+  n5({ type: String, attribute: "item-url" })
+], ItemContainer.prototype, "itemURL", 2);
+__decorateClass([
+  r6()
+], ItemContainer.prototype, "itemDoc", 2);
+__decorateClass([
+  r6()
+], ItemContainer.prototype, "itemXML", 2);
+__decorateClass([
+  watch("itemURL", { waitUntilFirstUpdate: true })
+], ItemContainer.prototype, "handleItemURLChange", 1);
+__decorateClass([
+  watch("itemXML", { waitUntilFirstUpdate: true })
+], ItemContainer.prototype, "handleItemXMLChange", 1);
+ItemContainer = __decorateClass([
+  t4("item-container")
+], ItemContainer);
 
 // src/lib/qti-components/qti-assessment-item/qti-assessment-item.context.ts
 var itemContextVariables = [
@@ -7082,7 +7069,10 @@ var QtiAssessmentItem = class extends r4 {
       e10.stopPropagation();
       const feedbackElement = e10.detail;
       this._feedbackElements.push(feedbackElement);
-      feedbackElement.checkShowFeedback(feedbackElement.outcomeIdentifier);
+      const numAttempts = Number(this._context.variables.find((v3) => v3.identifier === "numAttempts")?.value) || 0;
+      if (numAttempts > 0) {
+        feedbackElement.checkShowFeedback(feedbackElement.outcomeIdentifier);
+      }
     });
     this.addEventListener("qti-register-interaction", (e10) => {
       e10.stopPropagation();
@@ -7138,9 +7128,6 @@ var QtiAssessmentItem = class extends r4 {
           interactionElement.value = variable.value;
         }
       }
-      if (variable.type === "outcome") {
-        this._feedbackElements.forEach((fe) => fe.checkShowFeedback(variable.identifier));
-      }
     });
   }
   async connectedCallback() {
@@ -7832,7 +7819,6 @@ var QtiFeedback = class extends r4 {
   }
   checkShowFeedback(outcomeIdentifier) {
     const outcomeVariable = this._context.variables.find((v3) => v3.identifier === outcomeIdentifier) || null;
-    ;
     if (this.outcomeIdentifier !== outcomeIdentifier || !outcomeVariable) return;
     let isFound = false;
     if (Array.isArray(outcomeVariable.value)) {
@@ -7908,17 +7894,92 @@ QtiFeedbackInline = __decorateClass([
 
 // src/lib/qti-components/qti-feedback/qti-modal-feedback/qti-modal-feedback.ts
 var QtiModalFeedback = class extends QtiFeedback {
-  constructor() {
-    super(...arguments);
-    this.render = () => x` <slot part="feedback" class="${this.showStatus}"></slot> `;
+  render() {
+    return x`
+      <dialog class="qti-dialog" part="feedback" ?open="${this.showStatus === "on"}">
+        <slot></slot>
+        <div style="margin-top: var(--qti-gap-size); text-align: center;">
+          <button class="button close-button" @click="${this.closeFeedback}"></button>
+        </div>
+      </dialog>
+    `;
+  }
+  openFeedback() {
+    const dialog = this.shadowRoot?.querySelector("dialog");
+    if (dialog && !dialog.open) {
+      dialog.showModal();
+    }
+  }
+  closeFeedback() {
+    const dialog = this.shadowRoot?.querySelector("dialog");
+    if (dialog && dialog.open) {
+      dialog.close();
+      this.showStatus = "off";
+    }
+  }
+  firstUpdated() {
+    if (this.showStatus === "on") {
+      this.openFeedback();
+    }
+  }
+  updated(changedProperties) {
+    if (changedProperties.has("showStatus")) {
+      if (this.showStatus === "on") {
+        this.openFeedback();
+      } else {
+        this.closeFeedback();
+      }
+    }
   }
 };
 QtiModalFeedback.styles = i2`
-    .on {
+    .qti-dialog {
+      background: var(--qti-bg);
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+      border-radius: var(--qti-border-radius);
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      position: fixed;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      z-index: 1000;
+      width: auto;
+      max-width: 90%;
+    }
+
+    .button {
+      border-radius: var(--qti-border-radius);
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+      background-color: var(--qti-bg-active);
+      border: var(--qti-border-active);
+      cursor: pointer;
+      position: relative;
       display: inline-block;
     }
-    .off {
-      display: none;
+
+    .button:hover {
+      background-color: var(--qti-hover-bg);
+    }
+
+    .button:disabled {
+      background-color: var(--qti-disabled-bg);
+      color: var(--qti-disabled-color);
+      cursor: not-allowed;
+    }
+
+    .button:focus {
+      outline: var(--qti-focus-border-width) solid var(--qti-focus-color);
+    }
+
+    /* Text content of the button */
+    .button::after {
+      content: var(--qti-close-text, 'Close');
+      color: inherit;
+      font-size: inherit;
+      text-align: center;
+      display: inline-block;
+      line-height: 1.5;
     }
   `;
 QtiModalFeedback = __decorateClass([
@@ -8911,6 +8972,85 @@ QtiChoiceInteraction = __decorateClass([
   t4("qti-choice-interaction")
 ], QtiChoiceInteraction);
 
+// src/lib/qti-components/qti-interaction/qti-upload-interaction/qti-upload-interaction.ts
+var QtiUploadInteraction = class extends Interaction {
+  constructor() {
+    super(...arguments);
+    this._file = null;
+    this._base64 = null;
+  }
+  reset() {
+    this._file = null;
+    this._base64 = null;
+    this.saveResponse(null);
+  }
+  validate() {
+    return this._base64 !== null;
+  }
+  get value() {
+    return this._base64;
+  }
+  set value(base64) {
+    if (typeof base64 === "string") {
+      this._base64 = base64;
+      this.saveResponse(base64);
+    } else if (base64 === null) {
+      this.reset();
+    } else {
+      throw new Error("Value must be a Base64-encoded string or null");
+    }
+  }
+  static get properties() {
+    return {
+      ...Interaction.properties
+    };
+  }
+  render() {
+    return x`
+      <div>
+        <slot name="prompt"></slot>
+        <input type="file" @change="${this._onFileChange}" ?disabled="${this.disabled}" ?readonly="${this.readonly}" />
+      </div>
+    `;
+  }
+  async _onFileChange(event) {
+    const input = event.target;
+    if (input.files && input.files.length > 0) {
+      this._file = input.files[0];
+      this._base64 = await this._convertToBase64(this._file);
+      this.saveResponse(this._base64);
+      this.dispatchEvent(
+        new CustomEvent("qti-interaction-response", {
+          detail: { response: this._base64 }
+        })
+      );
+    }
+  }
+  _convertToBase64(file) {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = () => resolve(reader.result);
+      reader.onerror = () => reject(reader.error);
+      reader.readAsDataURL(file);
+    });
+  }
+};
+QtiUploadInteraction.styles = [
+  i2`
+      :host {
+        display: block;
+        margin: 1em 0;
+      }
+      input[type='file'] {
+        display: block;
+        margin-top: 0.5em;
+      }
+    `
+];
+QtiUploadInteraction = __decorateClass([
+  t4("qti-upload-interaction")
+], QtiUploadInteraction);
+
 // src/lib/qti-components/qti-outcome-processing/qti-outcome-processing.ts
 var QtiOutcomeProcessing = class extends r4 {
   render() {
@@ -10493,44 +10633,41 @@ var TouchDragAndDrop = class _TouchDragAndDrop {
   findClosestDropzone() {
     if (!this.dragSource || this.allDropzones.length === 0) return null;
     const dragRect = this.dragSource.getBoundingClientRect();
-    const dragCorners = this.getCorners(dragRect);
-    const dragCenter = this.getCenter(dragRect);
     let closestDropzone = null;
-    let minDistance = Infinity;
+    let maxOverlapArea = 0;
     for (const dropzone of this.allDropzones) {
       const dropRect = dropzone.getBoundingClientRect();
-      const dropCorners = this.getCorners(dropRect);
-      const dropCenter = this.getCenter(dropRect);
-      const cornerDistance = this.calculateTotalCornerDistance(dragCorners, dropCorners) / this.getRectDiagonal(dropRect);
-      const centerDistance = this.calculateDistance(dragCenter, dropCenter);
-      const totalDistance = cornerDistance * 0.5 + centerDistance * 0.5;
-      if (totalDistance < minDistance) {
-        minDistance = totalDistance;
+      const overlapArea = this.calculateOverlapArea(dragRect, dropRect);
+      if (overlapArea > maxOverlapArea) {
+        maxOverlapArea = overlapArea;
         closestDropzone = dropzone;
       }
     }
+    if (maxOverlapArea === 0) {
+      const dragCenter = this.getCenter(dragRect);
+      let minDistance = Infinity;
+      for (const dropzone of this.allDropzones) {
+        const dropCenter = this.getCenter(dropzone.getBoundingClientRect());
+        const distance = this.calculateDistance(dragCenter, dropCenter);
+        if (distance < minDistance) {
+          minDistance = distance;
+          closestDropzone = dropzone;
+        }
+      }
+    }
     return closestDropzone;
   }
+  calculateOverlapArea(rect1, rect2) {
+    const xOverlap = Math.max(0, Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left));
+    const yOverlap = Math.max(0, Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top));
+    return xOverlap * yOverlap;
+  }
   getCenter(rect) {
     return {
       x: rect.left + rect.width / 2,
       y: rect.top + rect.height / 2
     };
   }
-  getRectDiagonal(rect) {
-    return Math.sqrt(rect.width ** 2 + rect.height ** 2);
-  }
-  getCorners(rect) {
-    return {
-      topLeft: { x: rect.left, y: rect.top },
-      topRight: { x: rect.right, y: rect.top },
-      bottomLeft: { x: rect.left, y: rect.bottom },
-      bottomRight: { x: rect.right, y: rect.bottom }
-    };
-  }
-  calculateTotalCornerDistance(cornersA, cornersB) {
-    return this.calculateDistance(cornersA.topLeft, cornersB.topLeft) + this.calculateDistance(cornersA.topRight, cornersB.topRight) + this.calculateDistance(cornersA.bottomLeft, cornersB.bottomLeft) + this.calculateDistance(cornersA.bottomRight, cornersB.bottomRight);
-  }
   calculateDistance(pointA, pointB) {
     const dx = pointA.x - pointB.x;
     const dy = pointA.y - pointB.y;
@@ -10702,12 +10839,9 @@ var DroppablesMixin = (superClass, droppablesSelector) => {
       ev.preventDefault();
     }
     dragoverHandler(ev) {
-      const responseIdentifierDraggable = ev.dataTransfer.getData("responseIdentifier");
       ev.preventDefault();
-      if (responseIdentifierDraggable === this.responseIdentifier) {
-        this.activateDroppable(ev.currentTarget);
-        ev.dataTransfer.dropEffect = "move";
-      }
+      this.activateDroppable(ev.currentTarget);
+      ev.dataTransfer.dropEffect = "move";
       return false;
     }
     activateDroppable(droppable) {
@@ -10731,16 +10865,10 @@ var DroppablesMixin = (superClass, droppablesSelector) => {
     }
     findDraggable(responseIdentifier, identifier) {
       if (!identifier) return null;
-      if (responseIdentifier === this.responseIdentifier) {
-        return this.querySelector(`[identifier=${identifier}]`) || this.shadowRoot.querySelector(`[identifier=${identifier}]`);
-      } else {
-        const assessmentItem = this.closest("qti-assessment-item");
-        const interaction = assessmentItem.querySelector(`[response-identifier=${responseIdentifier}]`);
-        return interaction.querySelector(`[identifier=${identifier}]`);
-      }
+      return this.querySelector(`[identifier=${identifier}]`) || this.shadowRoot.querySelector(`[identifier=${identifier}]`);
     }
     isValidDrop(_droppable, _draggable, responseIdentifierDraggable) {
-      return this.responseIdentifier === responseIdentifierDraggable;
+      return true;
     }
     async moveDraggableToDroppable(draggable, droppable) {
       console.log(`moveDraggableToDroppable, draggable: ${draggable.tagName}, droppable: ${droppable.tagName}`);
@@ -10856,6 +10984,8 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
     constructor() {
       super(...arguments);
       this.draggables = /* @__PURE__ */ new Map();
+      this.observer = null;
+      this.resizeObserver = null;
       this.configuration = {
         copyStylesDragClone: true,
         dragCanBePlacedBack: true,
@@ -10895,11 +11025,11 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       };
       this.handleDragEnd = async (ev) => {
         ev.preventDefault();
+        const draggable = ev.currentTarget;
         this._internals.states.delete("--dragzone-enabled");
         this._internals.states.delete("--dragzone-active");
         this.deactivateDragLocation();
         this.deactivateDroppables();
-        const draggable = ev.currentTarget;
         draggable.removeAttribute("dragging");
         const wasDropped = await this.wasDropped(ev);
         if (!wasDropped) {
@@ -10941,6 +11071,12 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       this.dragContainersModified(dragContainers, []);
       this.droppablesModified(droppables, []);
       this.draggablesModified(draggables, []);
+      this.updateMinDimensionsForDropZones();
+      this.observer = new MutationObserver(() => this.updateMinDimensionsForDropZones());
+      this.observer.observe(this, { childList: true, subtree: true });
+      this.resizeObserver = new ResizeObserver(() => this.updateMinDimensionsForDropZones());
+      const gapTexts = this.querySelectorAll("qti-gap-text");
+      gapTexts.forEach((gapText) => this.resizeObserver?.observe(gapText));
     }
     connectedCallback() {
       super.connectedCallback();
@@ -10972,6 +11108,26 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       draggable.addEventListener("dragstart", this.handleDragStart);
       draggable.addEventListener("dragend", this.handleDragEnd);
     }
+    updateMinDimensionsForDropZones() {
+      const gapTexts = this.querySelectorAll(draggablesSelector);
+      const gaps = Array.from(this.querySelectorAll(droppablesSelector)).map((d3) => d3);
+      let maxHeight = 0;
+      let maxWidth = 0;
+      gapTexts.forEach((gapText) => {
+        const rect = gapText.getBoundingClientRect();
+        maxHeight = Math.max(maxHeight, rect.height);
+        maxWidth = Math.max(maxWidth, rect.width);
+      });
+      const dragContainer = this.querySelector(dragContainersSelector) || this.shadowRoot?.querySelector(dragContainersSelector);
+      if (dragContainer) {
+        dragContainer.style.minHeight = `${maxHeight}px`;
+        dragContainer.style.minWidth = `${maxWidth}px`;
+      }
+      for (const gap of gaps) {
+        gap.style.minHeight = `${maxHeight}px`;
+        gap.style.minWidth = `${maxWidth}px`;
+      }
+    }
     activateDroppables(target) {
       const dragContainers = this.dragDropApi.dragContainers;
       dragContainers.forEach((d3) => {
@@ -11004,13 +11160,12 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       });
       this.dragDropApi.droppables.forEach((d3) => d3.removeAttribute("enabled"));
     }
-    async wasDropped(ev) {
-      return ev.dataTransfer.dropEffect !== "none";
+    wasDropped(ev) {
+      return ev.dataTransfer.dropEffect && ev.dataTransfer.dropEffect !== "none";
     }
     async restoreInitialDraggablePosition(draggable) {
       const { parent, index } = this.draggables.get(draggable);
       const moveDraggable = (draggable2, parent2, index2) => {
-        console.log("moveDraggable", draggable2, parent2, index2);
         const targetIndex = Math.min(index2, parent2.children.length);
         parent2.insertBefore(draggable2, parent2.children[targetIndex]);
         draggable2.style.transform = "translate(0, 0)";
@@ -11020,8 +11175,24 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
         moveDraggable(draggable, parent, index);
         return;
       }
+      const transition = document.startViewTransition(() => {
+        draggable.style.transform = "";
+        moveDraggable(draggable, parent, index);
+      });
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback();
+      if (this.observer) {
+        this.observer.disconnect();
+        this.observer = null;
+      }
+      if (this.resizeObserver) {
+        this.resizeObserver.disconnect();
+        this.resizeObserver = null;
+      }
     }
     validate() {
+      if (!this.shadowRoot) return false;
       const validAssociations = this.getValidAssociations();
       let isValid = true;
       let validityMessage = "";
@@ -11074,8 +11245,8 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
     set value(value) {
       if (this.isMatchTabular()) return;
       this.resetDroppables();
-      value?.forEach((entry) => this.placeResponse(entry));
       if (Array.isArray(value)) {
+        value?.forEach((entry) => this.placeResponse(entry));
         const formData = new FormData();
         value.forEach((response) => {
           formData.append(this.responseIdentifier, response);
@@ -11191,6 +11362,7 @@ var qti_associate_interaction_styles_default = i2`
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
+    border: 2px solid transparent;
   }
 
   :host::part(associables-container) {
@@ -11494,57 +11666,12 @@ var QtiGapMatchInteraction = class extends DragDropInteractionMixin(
   "qti-gap",
   `slot[part='drags']`
 ) {
-  constructor() {
-    super(...arguments);
-    this.observer = null;
-    this.resizeObserver = null;
-  }
   render() {
     return x`<slot name="prompt"> </slot>
       <slot part="drags" name="drags"></slot>
       <slot part="drops"></slot>
       <div role="alert" id="validationMessage"></div>`;
   }
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    this.updateMinDimensionsForDrowZones();
-    this.observer = new MutationObserver(() => this.updateMinDimensionsForDrowZones());
-    this.observer.observe(this, { childList: true, subtree: true });
-    this.resizeObserver = new ResizeObserver(() => this.updateMinDimensionsForDrowZones());
-    const gapTexts = this.querySelectorAll("qti-gap-text");
-    gapTexts.forEach((gapText) => this.resizeObserver?.observe(gapText));
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    if (this.observer) {
-      this.observer.disconnect();
-      this.observer = null;
-    }
-    if (this.resizeObserver) {
-      this.resizeObserver.disconnect();
-      this.resizeObserver = null;
-    }
-  }
-  updateMinDimensionsForDrowZones() {
-    const gapTexts = this.querySelectorAll("qti-gap-text");
-    const gaps = this.querySelectorAll("qti-gap");
-    let maxHeight = 0;
-    let maxWidth = 0;
-    gapTexts.forEach((gapText) => {
-      const rect = gapText.getBoundingClientRect();
-      maxHeight = Math.max(maxHeight, rect.height);
-      maxWidth = Math.max(maxWidth, rect.width);
-    });
-    const dragSlot = this.shadowRoot?.querySelector('[part="drags"]');
-    if (dragSlot) {
-      dragSlot.style.minHeight = `${maxHeight}px`;
-      dragSlot.style.minWidth = `${maxWidth}px`;
-    }
-    for (const gap of gaps) {
-      gap.style.minHeight = `${maxHeight}px`;
-      gap.style.minWidth = `${maxWidth}px`;
-    }
-  }
   set correctResponse(value) {
     let matches = [];
     const response = Array.isArray(value) ? value : [value];
@@ -11914,47 +12041,12 @@ var QtiGraphicGapMatchInteraction = class extends DragDropInteractionMixin(
   "qti-associable-hotspot",
   `slot[part='drags']`
 ) {
-  constructor() {
-    super(...arguments);
-    this.observer = null;
-    this.resizeObserver = null;
-  }
   render() {
     return x` <slot name="prompt"></slot>
       <slot part="image"></slot>
       <slot part="drags" name="drags" class="hover-border"></slot>
       <div role="alert" id="validationMessage"></div>`;
   }
-  firstUpdated(_changedProperties) {
-    super.firstUpdated(_changedProperties);
-    this.updateMinDimensionsForDrowZones();
-    this.observer = new MutationObserver(() => this.updateMinDimensionsForDrowZones());
-    this.observer.observe(this, { childList: true, subtree: true });
-    this.resizeObserver = new ResizeObserver(() => this.updateMinDimensionsForDrowZones());
-    const draggableGaps = this.querySelectorAll("qti-gap-img, qti-gap-text");
-    draggableGaps.forEach((gapText) => this.resizeObserver?.observe(gapText));
-  }
-  updateMinDimensionsForDrowZones() {
-    const draggableGaps = this.querySelectorAll("qti-gap-img, qti-gap-text");
-    const gaps = this.querySelectorAll("qti-associable-hotspot");
-    let maxHeight = 0;
-    let maxWidth = 0;
-    draggableGaps.forEach((gapText) => {
-      const rect = gapText.getBoundingClientRect();
-      maxHeight = Math.max(maxHeight, rect.height);
-      maxWidth = Math.max(maxWidth, rect.width);
-    });
-    const slots = this.shadowRoot.querySelectorAll("slot");
-    const dragSlot = Array.from(slots).find((slot) => slot.name === "drags");
-    if (dragSlot) {
-      dragSlot.style.minHeight = `${maxHeight}px`;
-      dragSlot.style.minWidth = `${maxWidth}px`;
-    }
-    for (const gap of gaps) {
-      gap.style.minHeight = `${maxHeight}px`;
-      gap.style.minWidth = `${maxWidth}px`;
-    }
-  }
   positionHotspotOnRegister(e10) {
     const hotspot = e10.target;
     const coords = hotspot.getAttribute("coords");
@@ -12188,7 +12280,7 @@ QtiSimpleAssociableChoice = __decorateClass([
 
 // src/lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.styles.ts
 var qti_match_interaction_styles_default = i2`
-  slot {
+  slot:not([hidden]) {
     /* slot where the */
     display: flex;
     flex-direction: column;
@@ -12219,16 +12311,17 @@ var qti_match_interaction_styles_default = i2`
 // src/lib/qti-components/qti-interaction/qti-match-interaction/qti-match-interaction.ts
 var QtiMatchInteraction = class extends DragDropInteractionMixin(
   Interaction,
-  "qti-simple-match-set:first-of-type qti-simple-associable-choice",
-  "qti-simple-match-set:last-of-type qti-simple-associable-choice",
-  "qti-simple-match-set"
+  "qti-simple-match-set:first-of-type qti-simple-associable-choice, qti-simple-match-set:last-of-type > qti-simple-associable-choice > qti-simple-associable-choice",
+  "qti-simple-match-set:last-of-type > qti-simple-associable-choice",
+  "qti-simple-match-set:first-of-type"
 ) {
   constructor() {
     super(...arguments);
     this.lastCheckedRadio = null;
+    this.class = "";
     this._response = [];
-    this.correctOptions = [];
     this.responseIdentifier = "";
+    this.correctOptions = [];
     this.handleRadioClick = (e10) => {
       const radio = e10.target;
       if (this.lastCheckedRadio === radio) {
@@ -12299,22 +12392,22 @@ var QtiMatchInteraction = class extends DragDropInteractionMixin(
     }
   }
   render() {
-    if (!this.classList.contains("qti-match-tabular")) {
-      return x`<slot name="prompt"></slot> <slot></slot>
-        <div role="alert" id="validationMessage"></div>`;
-    }
+    const isTabular = this.class.split(" ").includes("qti-match-tabular");
     return x`
       <slot name="prompt"></slot>
-      <table>
-        <tr>
-          <td></td>
-          ${this.cols.map((col) => x`<th part="r-header">${o9(col.innerHTML)}</th>`)}
-        </tr>
+      <slot ?hidden=${isTabular}></slot>
+
+      ${isTabular ? x`
+            <table>
+              <tr>
+                <td></td>
+                ${this.cols.map((col) => x`<th part="r-header">${o9(col.innerHTML)}</th>`)}
+              </tr>
 
-        ${this.rows.map(
+              ${this.rows.map(
       (row) => x`<tr>
-              <td part="c-header">${o9(row.innerHTML)}</td>
-              ${this.cols.map((col) => {
+                    <td part="c-header">${o9(row.innerHTML)}</td>
+                    ${this.cols.map((col) => {
         const rowId = row.getAttribute("identifier");
         const colId = col.getAttribute("identifier");
         const value = `${rowId} ${colId}`;
@@ -12323,33 +12416,39 @@ var QtiMatchInteraction = class extends DragDropInteractionMixin(
         const part = `rb ${checked ? "rb-checked" : ""} ${this.correctOptions.includes(value) ? "rb-correct" : ""}`;
         const disable = this.correctOptions.length > 0 ? true : row.matchMax === 1 ? false : selectedInRowCount >= row.matchMax && !checked;
         return x`<td>
-                  <input
-                    type=${row.matchMax === 1 ? "radio" : `checkbox`}
-                    part=${part}
-                    name=${rowId}
-                    value=${value}
-                    .disabled=${disable}
-                    @change=${(e10) => this.handleRadioChange(e10)}
-                    @click=${(e10) => row.matchMax === 1 ? this.handleRadioClick(e10) : null}
-                  />
-                </td>`;
+                        <input
+                          type=${row.matchMax === 1 ? "radio" : `checkbox`}
+                          part=${part}
+                          name=${rowId}
+                          value=${value}
+                          .disabled=${disable}
+                          @change=${(e10) => this.handleRadioChange(e10)}
+                          @click=${(e10) => row.matchMax === 1 ? this.handleRadioClick(e10) : null}
+                        />
+                      </td>`;
       })}
-            </tr>`
+                  </tr>`
     )}
-      </table>
+            </table>
+          ` : E}
+
+      <div role="alert" id="validationMessage"></div>
     `;
   }
 };
 QtiMatchInteraction.styles = qti_match_interaction_styles_default;
 __decorateClass([
-  r6()
-], QtiMatchInteraction.prototype, "_response", 2);
+  n5({ type: String })
+], QtiMatchInteraction.prototype, "class", 2);
 __decorateClass([
   r6()
-], QtiMatchInteraction.prototype, "correctOptions", 2);
+], QtiMatchInteraction.prototype, "_response", 2);
 __decorateClass([
   n5({ type: String, attribute: "response-identifier" })
 ], QtiMatchInteraction.prototype, "responseIdentifier", 2);
+__decorateClass([
+  r6()
+], QtiMatchInteraction.prototype, "correctOptions", 2);
 QtiMatchInteraction = __decorateClass([
   t4("qti-match-interaction")
 ], QtiMatchInteraction);
@@ -12748,187 +12847,177 @@ QtiSelectPointInteraction = __decorateClass([
   t4("qti-select-point-interaction")
 ], QtiSelectPointInteraction);
 
-// src/lib/qti-components/qti-interaction/qti-slider-interaction/qti-slider-interaction.ts
-var QtiSliderInteraction = class extends Interaction {
-  // static shadowRootOptions: ShadowRootInit = { ...LitElement.shadowRootOptions, delegatesFocus: true, mode: 'open' };
-  constructor() {
-    super();
-    this._value = 0;
-    this.stepLabel = false;
-    this.reverse = false;
-    this._handleDisabledChange = () => {
-    };
-    this._handleReadonlyChange = () => {
-    };
-    this.csLive = getComputedStyle(this);
+// src/lib/qti-components/qti-interaction/qti-slider-interaction/qti-slider-interaction.styles.ts
+var qti_slider_interaction_styles_default = i2`
+  :host {
+    display: block;
+    --show-bounds: true;
+    --show-ticks: true;
+    --show-value: true;
   }
-  set min(value) {
-    this._min = value;
-    this._value = value;
-    this.style.setProperty("--min", `${this._min}`);
+
+  [part='slider'] {
+    margin-left: 2rem; /* mx-8 */
+    margin-right: 2rem;
+    padding-bottom: 1rem; /* pb-4 */
+    padding-top: 1.25rem; /* pt-5 */
   }
-  get min() {
-    return this._min;
+
+  [part='bounds'] {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    margin-bottom: 0.5rem; /* mb-2 */
   }
-  set max(value) {
-    this._max = value;
-    this.style.setProperty("--max", `${this._max}`);
+
+  [part='ticks'] {
+    margin-left: 0.125rem; /* mx-0.5 */
+    margin-right: 0.125rem;
+    margin-bottom: 0.25rem; /* mb-1 */
+    height: 0.5rem; /* h-2 */
+    background: linear-gradient(to right, var(--qti-border-color) var(--qti-border-thickness), transparent 1px) repeat-x
+      0 center / calc(calc(100% - var(--qti-border-thickness)) / ((var(--max) - var(--min)) / var(--step))) 100%;
   }
-  get max() {
-    return this._max;
+
+  [part='rail'] {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    height: 0.375rem; /* h-1.5 */
+    width: 100%;
+    cursor: pointer;
+    border-radius: 9999px; /* rounded-full */
+    border: 1px solid #d1d5db; /* border-gray-300 */
+    background-color: #e5e7eb; /* bg-gray-200 */
   }
-  set step(value) {
-    this._step = value;
-    this.style.setProperty("--step", `${this._step}`);
+
+  [part='knob'] {
+    background-color: var(--qti-bg-active);
+    border: 2px solid var(--qti-border-active);
+    position: relative;
+    height: 1rem; /* h-4 */
+    width: 1rem; /* w-4 */
+    transform-origin: center;
+    transform: translateX(-50%);
+    cursor: pointer;
+    border-radius: 9999px; /* rounded-full */
+    left: var(--value-percentage);
   }
-  get step() {
-    return this._step;
+
+  [part='value'] {
+    position: absolute;
+    bottom: 2rem; /* bottom-8 */
+    left: 0.5rem; /* left-2 */
+    transform: translateX(-50%);
+    cursor: pointer;
+    border-radius: 0.25rem; /* rounded */
+    background-color: #f3f4f6; /* bg-gray-100 */
+    padding: 0.25rem 0.5rem; /* px-2 py-1 */
+    text-align: center;
+    color: #6b7280; /* text-gray-500 */
   }
-  reset() {
+`;
+
+// src/lib/qti-components/qti-interaction/qti-slider-interaction/qti-slider-interaction.ts
+var QtiSliderInteraction = class extends r4 {
+  constructor() {
+    super();
+    this._value = 0;
+    this.min = 0;
+    this.max = 100;
+    this.step = 1;
+    this._internals = this.attachInternals();
   }
-  validate() {
-    return true;
+  connectedCallback() {
+    super.connectedCallback();
+    this._updateValue(this.min);
+    this.setAttribute("tabindex", "0");
+    this.setAttribute("role", "slider");
   }
   get value() {
     return this._value.toString();
   }
   set value(val) {
-    const isNumber = !isNaN(parseInt(val.toString()));
-    if (isNumber) {
-      this._value = parseInt(val.toString());
-    } else {
-      throw new Error("Value must be a number");
+    const newValue = parseInt(val, 10);
+    if (!isNaN(newValue)) {
+      this._updateValue(newValue);
     }
   }
-  set response(myResponse) {
-    if (Array.isArray(myResponse)) {
-      console.error("QtiSliderInteraction: response is an array, but should be a single value");
-      return;
-    }
-    const value = parseInt(myResponse);
-    if (Number.isNaN(value)) {
-      console.error("QtiSliderInteraction: response is not a number");
-      return;
-    }
-    this._value = value;
-  }
-  render() {
-    if (this._value < this.min) {
-      this._value = this.min;
-    }
-    if (this._value > this.max) {
-      this._value = this.max;
-    }
+  _updateValue(newValue) {
+    this._value = Math.min(this.max, Math.max(this.min, newValue));
     const valuePercentage = (this._value - this.min) / (this.max - this.min) * 100;
     this.style.setProperty("--value-percentage", `${valuePercentage}%`);
-    this.setAttribute("aria-valuenow", this.value.toString());
-    return x`<slot name="prompt"></slot>
+    this._internals.setFormValue(this.value);
+    this.requestUpdate();
+  }
+  render() {
+    return x`
+      <slot name="prompt"></slot>
       <div id="slider" part="slider">
-        ${this.csLive.getPropertyValue("--show-bounds") == "true" ? x`<div id="bounds" part="bounds">
-              <div>${this._min}</div>
-              <div>${this._max}</div>
-            </div>` : E}
-        ${this.csLive.getPropertyValue("--show-ticks") == "true" ? x`<div id="ticks" part="ticks"></div>` : E}
-        <div id="rail" part="rail" @mousedown=${this._onMouseDown} @touchstart=${this._onTouchMove}>
-          <div id="knob" part="knob">
-            ${this.csLive.getPropertyValue("--show-value") == "true" ? x`<div id="value" part="value">${this.value}</div>` : E}
-          </div>
+        <div id="bounds" part="bounds">
+          <div>${this.min}</div>
+          <div>${this.max}</div>
         </div>
-      </div>`;
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.step = 1;
-    this.setAttribute("tabindex", "0");
-    this.setAttribute("role", "slider");
-  }
-  _onTouchMove(event) {
-    const handleTouchMove = (event2) => {
-      const { x: x3 } = this.getPositionFromEvent(event2);
-      const diffX2 = x3 - this._rail.getBoundingClientRect().left - document.documentElement.scrollLeft;
-      this.calculateValue(diffX2);
-      event2.stopPropagation();
-    };
-    const handleTouchEnd = () => {
-      document.removeEventListener("touchmove", handleTouchMove);
-      document.removeEventListener("touchend", handleTouchEnd);
-      this.saveResponse(this.value.toString());
-    };
-    document.addEventListener("touchmove", handleTouchMove);
-    document.addEventListener("touchend", handleTouchEnd);
-    const { x: x2 } = this.getPositionFromEvent(event);
-    const diffX = x2 - this._rail.getBoundingClientRect().left - document.documentElement.scrollLeft;
-    this.calculateValue(diffX);
-    event.stopPropagation();
+
+        <div id="ticks" part="ticks"></div>
+
+        <div id="rail" part="rail" @mousedown=${this._onMouseDown} @touchstart=${this._onTouchStart}>
+          <div id="knob" part="knob"><div id="value" part="value">${this.value}</div></div>
+        </div>
+      </div>
+    `;
   }
   _onMouseDown(event) {
-    const handleMouseMove = (event2) => {
-      const diffX2 = event2.pageX - this._rail.getBoundingClientRect().left - document.documentElement.scrollLeft;
-      this.calculateValue(diffX2);
-      event2.preventDefault();
-      event2.stopPropagation();
-    };
+    this._startDrag(event.pageX);
+    const handleMouseMove = (e10) => this._onDrag(e10.pageX);
     const handleMouseUp = () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
-      this.saveResponse(this.value.toString());
+      this._onDragEnd();
     };
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
-    const diffX = event.pageX - this._rail.getBoundingClientRect().left - document.documentElement.scrollLeft;
-    this.calculateValue(diffX);
-    event.preventDefault();
-    event.stopPropagation();
-  }
-  /** calculateValue gets x position and compares this with the total width in pixels */
-  calculateValue(diffX) {
-    const valueNow = this.min + (this.max - this.min) * diffX / this._rail.getBoundingClientRect().width;
-    const roundedStepValue = this.min + Math.round((valueNow - this.min) / this._step) * this._step;
-    this._value = roundedStepValue;
-  }
-  getPositionFromEvent(e10) {
-    let _touchMove;
-    if (e10.type == "touchstart" || e10.type == "touchmove" || e10.type == "touchend" || e10.type == "touchcancel") {
-      const evt = typeof e10.originalEvent === "undefined" ? e10 : e10.originalEvent;
-      const touch = evt.touches[0] || evt.changedTouches[0];
-      _touchMove = {
-        x: touch.pageX,
-        y: touch.pageY
-      };
-    } else if (e10.type == "mousedown" || e10.type == "mouseup" || e10.type == "mousemove" || e10.type == "mouseover" || e10.type == "mouseout" || e10.type == "mouseenter" || e10.type == "mouseleave") {
-      _touchMove = {
-        x: e10.clientX,
-        y: e10.clientY
-      };
-    }
-    return _touchMove;
+  }
+  _onTouchStart(event) {
+    this._startDrag(event.touches[0].pageX);
+    const handleTouchMove = (e10) => this._onDrag(e10.touches[0].pageX);
+    const handleTouchEnd = () => {
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+      this._onDragEnd();
+    };
+    document.addEventListener("touchmove", handleTouchMove, { passive: false });
+    document.addEventListener("touchend", handleTouchEnd);
+  }
+  _startDrag(pageX) {
+    this._onDrag(pageX);
+  }
+  _onDrag(pageX) {
+    const railRect = this._rail.getBoundingClientRect();
+    const diffX = pageX - railRect.left;
+    const percentage = Math.min(1, Math.max(0, diffX / railRect.width));
+    const steppedValue = this.min + Math.round(percentage * (this.max - this.min) / this.step) * this.step;
+    this._updateValue(steppedValue);
+  }
+  _onDragEnd() {
+    this.dispatchEvent(new Event("change", { bubbles: true }));
   }
 };
-QtiSliderInteraction.styles = [i2``];
+QtiSliderInteraction.formAssociated = true;
+// Enables elementInternals for forms
+QtiSliderInteraction.styles = qti_slider_interaction_styles_default;
 __decorateClass([
   e6("#rail")
 ], QtiSliderInteraction.prototype, "_rail", 2);
-__decorateClass([
-  n5({ type: Boolean, attribute: "step-label" })
-], QtiSliderInteraction.prototype, "stepLabel", 2);
-__decorateClass([
-  n5({ type: Boolean })
-], QtiSliderInteraction.prototype, "reverse", 2);
 __decorateClass([
   n5({ type: Number, attribute: "lower-bound" })
-], QtiSliderInteraction.prototype, "min", 1);
+], QtiSliderInteraction.prototype, "min", 2);
 __decorateClass([
   n5({ type: Number, attribute: "upper-bound" })
-], QtiSliderInteraction.prototype, "max", 1);
+], QtiSliderInteraction.prototype, "max", 2);
 __decorateClass([
   n5({ type: Number, attribute: "step" })
-], QtiSliderInteraction.prototype, "step", 1);
-__decorateClass([
-  watch("disabled", { waitUntilFirstUpdate: true })
-], QtiSliderInteraction.prototype, "_handleDisabledChange", 2);
-__decorateClass([
-  watch("readonly", { waitUntilFirstUpdate: true })
-], QtiSliderInteraction.prototype, "_handleReadonlyChange", 2);
+], QtiSliderInteraction.prototype, "step", 2);
 QtiSliderInteraction = __decorateClass([
   t4("qti-slider-interaction")
 ], QtiSliderInteraction);
@@ -13220,6 +13309,7 @@ console.log(
 export {
   ActiveElementMixin,
   Interaction,
+  ItemContainer,
   QtiAnd,
   QtiAssessmentItem,
   QtiAssessmentItemRef,
@@ -13262,7 +13352,6 @@ export {
   QtiIsNull,
   QtiItem,
   QtiItemBody,
-  QtiItemMixin,
   QtiLookupOutcomeValue,
   QtiLt,
   QtiLte,
@@ -13309,6 +13398,7 @@ export {
   QtiTest,
   QtiTestPart,
   QtiTextEntryInteraction,
+  QtiUploadInteraction,
   QtiVariable,
   TestContainer,
   TestItemLink,
@@ -13319,7 +13409,9 @@ export {
   itemContext,
   itemContextVariables,
   qtiAndMixin,
-  qtiSubtractMixin
+  qtiSubtractMixin,
+  testContext,
+  testElement
 };
 /*! Bundled license information: