@citolab/qti-components 8.1.0 → 9.0.0

package/dist/{chunk-4XR2JHCP.js → chunk-5BXJRO5O.js}

@@ -14,22 +14,241 @@ import {
   responseAttributeConverter,
   serializeResponseAttribute,
   validationMessage
-} from "./chunk-EKXZI26R.js";
+} from "./chunk-WCWJPIUQ.js";
 
-// ../interactions/core/dist/elements/qti-gap-text/qti-gap-text.js
-import { html as html2, LitElement } from "lit";
-import { property as property2 } from "lit/decorators.js";
-
-// ../interactions/core/dist/mixins/active-element/active-element.mixin.js
-import { html } from "lit";
+// ../interactions/core/dist/elements/qti-associable-hotspot/qti-associable-hotspot.js
+import { LitElement, html } from "lit";
 import { property, state } from "lit/decorators.js";
+import { repeat } from "lit/directives/repeat.js";
 import { consume } from "@lit/context";
+
+// ../interactions/core/dist/context/drag-drop.context.js
+import { createContext } from "@lit/context";
+var dragDropContext = createContext(/* @__PURE__ */ Symbol("dragDropContext"));
+
+// ../interactions/core/dist/elements/qti-associable-hotspot/qti-associable-hotspot.styles.js
+import { css } from "lit";
+var qti_associable_hotspot_styles_default = [
+  boxSizing,
+  dropRegion,
+  css`
+    /* A drop target — see qti-gap.styles.ts. The interaction publishes the chip measurements as
+     custom properties on its host; the properties themselves live here. */
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+      position: absolute;
+      min-height: var(--qti-dropzone-min-height, 0);
+      min-width: var(--qti-dropzone-min-width, 0);
+    }
+
+    /* The hotspot's own box comes from its authored coords; the drop region simply fills it. */
+    [part~='drop'] {
+      width: 100%;
+      height: 100%;
+    }
+  `
+];
+
+// ../interactions/core/dist/elements/qti-associable-hotspot/qti-associable-hotspot.js
 var __decorate = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+var QtiAssociableHotspot = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    this.internals = this.attachInternals();
+    this.acceptsDeclarativeDrops = true;
+  }
+  static {
+    this.styles = qti_associable_hotspot_styles_default;
+  }
+  /** The chips this hotspot holds. Stable node references, cloned once at drop time. */
+  get drags() {
+    return this._dragDrop?.nodesByTarget?.[this.identifier] ?? [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.dispatchEvent(new CustomEvent("qti-register-hotspot", {
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    }));
+  }
+  render() {
+    return html`<div part="drop">
+      ${repeat(this.drags, (node) => node.getAttribute("identifier"), (node) => node)}
+    </div>`;
+  }
+};
+__decorate([
+  property({ type: String, reflect: true })
+], QtiAssociableHotspot.prototype, "identifier", void 0);
+__decorate([
+  consume({ context: dragDropContext, subscribe: true }),
+  state()
+], QtiAssociableHotspot.prototype, "_dragDrop", void 0);
+
+// ../interactions/core/dist/elements/qti-gap/qti-gap.js
+import { html as html2, LitElement as LitElement2 } from "lit";
+import { property as property2, state as state2 } from "lit/decorators.js";
+import { repeat as repeat2 } from "lit/directives/repeat.js";
+import { consume as consume2 } from "@lit/context";
+
+// ../interactions/core/dist/elements/qti-gap/qti-gap.styles.js
+import { css as css2 } from "lit";
+var qti_gap_styles_default = [
+  boxSizing,
+  dropRegion,
+  css2`
+    /*
+   * A drop target. The interaction measures its chips and publishes the result as custom
+   * properties on its own host; the actual CSS properties live here, not in a style attribute.
+   *
+   * An authored data-choices-container-width takes the width axis: autoSizeDropzoneWidth goes
+   * false and the mixin never publishes --qti-dropzone-min-width at all, so the fallback below
+   * applies and the authored inline width is free to win. That works only because the token is
+   * never declared globally — min-width beats width, so a declared floor would silently outrank
+   * the author. See DROP-SIZING.md §2 and tools/stylelint/no-declared-measured-token.js.
+   */
+    /*
+     * A gap sits in a line of prose, so it is inline-flex and rides the text baseline. All four of
+     * these were in the theme, set on this host from the document — which also meant the
+     * 'display: flex' this file declared never took effect.
+     */
+    :host {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      vertical-align: middle;
+      user-select: none;
+    }
+
+    /*
+   * The chip's box is reserved on the slot, not on the host.
+   *
+   * --qti-dropzone-min-* is the border-box of the widest and tallest chip, so whatever carries
+   * that minimum must have no border or padding of its own — otherwise the theme's dashed gap
+   * border eats into the reservation, the gap comes up short, and it grows the instant a chip
+   * lands in it. That reflows the sentence and drags the neighbouring gaps sideways while the
+   * user is still on their way to one.
+   *
+   * It cannot live on :host. A theme's universal reset matches the host element from the
+   * document, and document rules outrank :host — so the host is border-box no matter what this
+   * file says. This div is inside the shadow tree, out of the document's reach, and inherits
+   * border-box harmlessly since it has no border or padding of its own.
+   */
+    [part~='drop'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: var(--qti-dropzone-min-height, 0);
+      min-width: var(--qti-dropzone-min-width, 0);
+    }
+  `
+];
+
+// ../interactions/core/dist/elements/qti-gap/qti-gap.js
+var __decorate2 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var QtiGap = class extends LitElement2 {
+  constructor() {
+    super(...arguments);
+    this.internals = this.attachInternals();
+    this.acceptsDeclarativeDrops = true;
+    this.tabindex = 0;
+  }
+  static {
+    this.styles = qti_gap_styles_default;
+  }
+  /** The chips this gap holds. Stable node references, cloned once at drop time by the interaction. */
+  get drags() {
+    return this._dragDrop?.nodesByTarget?.[this.identifier] ?? [];
+  }
+  render() {
+    return html2`<div part="drop">
+      ${repeat2(this.drags, (node) => node.getAttribute("identifier"), (node) => node)}
+    </div>`;
+  }
+};
+__decorate2([
+  property2({ type: Number, reflect: true })
+], QtiGap.prototype, "tabindex", void 0);
+__decorate2([
+  property2({ type: String, reflect: true })
+], QtiGap.prototype, "identifier", void 0);
+__decorate2([
+  consume2({ context: dragDropContext, subscribe: true }),
+  state2()
+], QtiGap.prototype, "_dragDrop", void 0);
+
+// ../interactions/core/dist/elements/qti-gap-img/qti-gap-img.js
+import { LitElement as LitElement3 } from "lit";
+import { property as property3 } from "lit/decorators.js";
+
+// ../interactions/core/dist/elements/qti-gap-img/qti-gap-img.styles.js
+import { css as css3 } from "lit";
+var qti_gap_img_styles_default = [
+  boxSizing,
+  css3`
+    /* Centred, because a gap-img is a picture inside a drop the same size as it. Was in the theme's
+       graphic-gap-match rules, on the host from the document. */
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      user-select: none;
+    }
+  `
+];
+
+// ../interactions/core/dist/elements/qti-gap-img/qti-gap-img.js
+var __decorate3 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var QtiGapImg = class extends LitElement3 {
+  constructor() {
+    super(...arguments);
+    this.tabindex = 0;
+    this.internals = this.attachInternals();
+  }
+  static {
+    this.styles = qti_gap_img_styles_default;
+  }
+  connectedCallback() {
+    this.setAttribute("slot", "drags");
+  }
+};
+__decorate3([
+  property3({ type: Number, reflect: true })
+], QtiGapImg.prototype, "tabindex", void 0);
+
+// ../interactions/core/dist/elements/qti-gap-text/qti-gap-text.js
+import { html as html4, LitElement as LitElement4 } from "lit";
+import { property as property5 } from "lit/decorators.js";
+
+// ../interactions/core/dist/mixins/active-element/active-element.mixin.js
+import { html as html3 } from "lit";
+import { property as property4, state as state3 } from "lit/decorators.js";
+import { consume as consume3 } from "@lit/context";
+var __decorate4 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
 var ariaBooleanConverter = {
   toAttribute: (value) => value ? "true" : "false",
   fromAttribute: (value) => value === "true"
@@ -146,47 +365,47 @@ function ActiveElementMixin(Base, type) {
       }));
     }
     render() {
-      return html`<slot></slot>`;
+      return html3`<slot></slot>`;
     }
   }
-  __decorate([
-    property({ type: String })
+  __decorate4([
+    property4({ type: String })
   ], QtiChoice.prototype, "identifier", void 0);
-  __decorate([
-    property({ type: Number, reflect: true, attribute: "tabindex" })
+  __decorate4([
+    property4({ type: Number, reflect: true, attribute: "tabindex" })
   ], QtiChoice.prototype, "tabIndex", void 0);
-  __decorate([
-    property({
+  __decorate4([
+    property4({
       type: Boolean,
       attribute: "aria-disabled",
       converter: ariaBooleanConverter
     })
   ], QtiChoice.prototype, "disabled", void 0);
-  __decorate([
-    property({
+  __decorate4([
+    property4({
       type: Boolean,
       attribute: "aria-readonly",
       converter: ariaBooleanConverter
     })
   ], QtiChoice.prototype, "readonly", void 0);
-  __decorate([
-    consume({ context: interactionContext, subscribe: true }),
-    state()
+  __decorate4([
+    consume3({ context: interactionContext, subscribe: true }),
+    state3()
   ], QtiChoice.prototype, "_interactionContext", void 0);
-  __decorate([
+  __decorate4([
     watch("disabled", { waitUntilFirstUpdate: true })
   ], QtiChoice.prototype, "handleDisabledChange", null);
-  __decorate([
+  __decorate4([
     watch("readonly", { waitUntilFirstUpdate: true })
   ], QtiChoice.prototype, "handleReadonlyChange", null);
   return QtiChoice;
 }
 
 // ../interactions/core/dist/elements/qti-gap-text/qti-gap-text.styles.js
-import { css } from "lit";
+import { css as css4 } from "lit";
 var qti_gap_text_styles_default = [
   boxSizing,
-  css`
+  css4`
     /*
      * A chip's own box. Both drag-drop interactions that use this element laid it out from the
      * theme — gap-match with 'display: flex !important; align-items: center !important',
@@ -217,17 +436,29 @@ var qti_gap_text_styles_default = [
       justify-content: var(--qti-drag-justify-content, normal);
       user-select: none;
     }
+
+    /*
+     * The control div's only content is the theme's ::before grip glyph. Centering it with
+     * 'vertical-align: middle' (the theme's only lever on a pseudo-element it owns) aligns to the
+     * line box's baseline metrics, which drift with font/line-height. Flex centering here is
+     * geometric and font-independent — the same fix qti-simple-choice already has for its control.
+     */
+    [part='control'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   `
 ];
 
 // ../interactions/core/dist/elements/qti-gap-text/qti-gap-text.js
-var __decorate2 = function(decorators, target, key, desc) {
+var __decorate5 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var QtiGapText = class extends ActiveElementMixin(LitElement, "qti-gap-text") {
+var QtiGapText = class extends ActiveElementMixin(LitElement4, "qti-gap-text") {
   constructor() {
     super(...arguments);
     this.tabindex = 0;
@@ -240,23 +471,23 @@ var QtiGapText = class extends ActiveElementMixin(LitElement, "qti-gap-text") {
     this.setAttribute("slot", "drags");
   }
   render() {
-    return html2`<div part="control"></div>
+    return html4`<div part="control"></div>
       <slot part="label"></slot>`;
   }
 };
-__decorate2([
-  property2({ type: Number, reflect: true })
+__decorate5([
+  property5({ type: Number, reflect: true })
 ], QtiGapText.prototype, "tabindex", void 0);
 
 // ../interactions/core/dist/elements/qti-hotspot-choice/qti-hotspot-choice.js
-import { LitElement as LitElement2 } from "lit";
-import { property as property3 } from "lit/decorators.js";
+import { LitElement as LitElement5 } from "lit";
+import { property as property6 } from "lit/decorators.js";
 
 // ../interactions/core/dist/elements/qti-hotspot-choice/qti-hotspot-choice.styles.js
-import { css as css2 } from "lit";
+import { css as css5 } from "lit";
 var qti_hotspot_choice_styles_default = [
   boxSizing,
-  css2`
+  css5`
     :host {
       display: flex;
       user-select: none;
@@ -280,29 +511,29 @@ var qti_hotspot_choice_styles_default = [
 ];
 
 // ../interactions/core/dist/elements/qti-hotspot-choice/qti-hotspot-choice.js
-var __decorate3 = function(decorators, target, key, desc) {
+var __decorate6 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var QtiHotspotChoice = class extends ActiveElementMixin(LitElement2, "qti-hotspot-choice") {
+var QtiHotspotChoice = class extends ActiveElementMixin(LitElement5, "qti-hotspot-choice") {
   static {
     this.styles = qti_hotspot_choice_styles_default;
   }
 };
-__decorate3([
-  property3({ attribute: "aria-ordervalue", type: Number, reflect: true })
+__decorate6([
+  property6({ attribute: "aria-ordervalue", type: Number, reflect: true })
 ], QtiHotspotChoice.prototype, "order", void 0);
 
 // ../interactions/core/dist/elements/qti-hottext/qti-hottext.js
-import { html as html3, LitElement as LitElement3 } from "lit";
+import { html as html5, LitElement as LitElement6 } from "lit";
 
 // ../interactions/core/dist/elements/qti-hottext/qti-hottext.styles.js
-import { css as css3 } from "lit";
+import { css as css6 } from "lit";
 var qti_hottext_styles_default = [
   boxSizing,
-  css3`
+  css6`
     /* 'position: relative' is the containing block for the answer-key tick the theme draws as an
        absolutely positioned ::before. See CONTRACT.md §7. */
     :host {
@@ -326,32 +557,126 @@ var qti_hottext_styles_default = [
 ];
 
 // ../interactions/core/dist/elements/qti-hottext/qti-hottext.js
-var QtiHottext = class extends ActiveElementMixin(LitElement3, "qti-hottext") {
+var QtiHottext = class extends ActiveElementMixin(LitElement6, "qti-hottext") {
   static {
     this.styles = qti_hottext_styles_default;
   }
   render() {
-    return html3`<div part="control"><div part="control-mark"></div></div>
+    return html5`<div part="control"><div part="control-mark"></div></div>
       <slot part="label"></slot>`;
   }
 };
 
-// ../interactions/core/dist/elements/qti-simple-associable-choice/qti-simple-associable-choice.js
-import { html as html4, LitElement as LitElement4 } from "lit";
-import { property as property4, state as state2 } from "lit/decorators.js";
-import { repeat } from "lit/directives/repeat.js";
-import { consume as consume2 } from "@lit/context";
+// ../interactions/core/dist/elements/qti-inline-choice/qti-inline-choice.js
+import { html as html6, LitElement as LitElement7 } from "lit";
+import { property as property7 } from "lit/decorators.js";
 
-// ../interactions/core/dist/context/drag-drop.context.js
-import { createContext } from "@lit/context";
-var dragDropContext = createContext(/* @__PURE__ */ Symbol("dragDropContext"));
+// ../interactions/core/dist/elements/qti-inline-choice/qti-inline-choice.styles.js
+import { css as css7 } from "lit";
+var styles = css7`
+  /*
+   * An option row: one line, clipped, with its text centred against the row's min-height. All four
+   * were in the theme, set on this host from the document — which is also why the 'display: block'
+   * this file declared never took effect.
+   */
+  :host {
+    display: inline-flex;
+    align-items: center;
+    white-space: nowrap;
+    overflow: hidden;
+    box-sizing: border-box;
+  }
+
+  slot {
+    display: inline;
+  }
+`;
+var qti_inline_choice_styles_default = styles;
+
+// ../interactions/core/dist/elements/qti-inline-choice/qti-inline-choice.js
+var __decorate7 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var QtiInlineChoice = class extends ActiveElementMixin(LitElement7, "qti-inline-choice") {
+  static {
+    this.styles = qti_inline_choice_styles_default;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.addEventListener("click", this.#onSelectInlineChoice);
+    this.dispatchEvent(new CustomEvent("qti-inline-choice-register", {
+      bubbles: true,
+      composed: true,
+      cancelable: false
+    }));
+  }
+  disconnectedCallback() {
+    this.removeEventListener("click", this.#onSelectInlineChoice);
+  }
+  render() {
+    return html6` <slot></slot> `;
+  }
+  #onSelectInlineChoice() {
+    this.dispatchEvent(new CustomEvent("qti-inline-choice-select", {
+      bubbles: true,
+      cancelable: false,
+      composed: true,
+      detail: { identifier: this.identifier }
+    }));
+  }
+};
+__decorate7([
+  property7({ type: String })
+], QtiInlineChoice.prototype, "identifier", void 0);
+
+// ../interactions/core/dist/elements/qti-prompt/qti-prompt.js
+import { html as html7, LitElement as LitElement8 } from "lit";
+
+// ../interactions/core/dist/elements/qti-prompt/qti-prompt.styles.js
+import { css as css8 } from "lit";
+var qti_prompt_styles_default = [
+  boxSizing,
+  css8`
+    :host {
+      display: block;
+      margin: var(--qti-gap) 0;
+      width: 100%;
+    }
+  `
+];
+
+// ../interactions/core/dist/elements/qti-prompt/qti-prompt.js
+var QtiPrompt = class extends LitElement8 {
+  static {
+    this.styles = qti_prompt_styles_default;
+  }
+  render() {
+    return html7`<slot></slot>`;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const inInteraction = this.parentElement?.tagName.endsWith("INTERACTION");
+    if (inInteraction) {
+      this.setAttribute("slot", "prompt");
+    }
+  }
+};
+
+// ../interactions/core/dist/elements/qti-simple-associable-choice/qti-simple-associable-choice.js
+import { html as html8, LitElement as LitElement9 } from "lit";
+import { property as property8, state as state4 } from "lit/decorators.js";
+import { repeat as repeat3 } from "lit/directives/repeat.js";
+import { consume as consume4 } from "@lit/context";
 
 // ../interactions/core/dist/elements/qti-simple-associable-choice/qti-simple-associable-choice.styles.js
-import { css as css4 } from "lit";
+import { css as css9 } from "lit";
 var qti_simple_associable_choice_styles_default = [
   boxSizing,
   dropRegion,
-  css4`
+  css9`
     /*
      * 'align-items' / 'justify-content' are variables because one caller cannot be reached any other
      * way. In tabular match this element is a light-DOM *grandchild* of the slotted
@@ -488,17 +813,29 @@ var qti_simple_associable_choice_styles_default = [
     ::slotted(p) {
       display: inline;
     }
+
+    /*
+     * The control div's only content is the theme's ::before grip glyph. Centering it with
+     * 'vertical-align: middle' (the theme's only lever on a pseudo-element it owns) aligns to the
+     * line box's baseline metrics, which drift with font/line-height. Flex centering here is
+     * geometric and font-independent — the same fix qti-simple-choice already has for its control.
+     */
+    [part='control'] {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
   `
 ];
 
 // ../interactions/core/dist/elements/qti-simple-associable-choice/qti-simple-associable-choice.js
-var __decorate4 = function(decorators, target, key, desc) {
+var __decorate8 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var QtiSimpleAssociableChoice = class extends ActiveElementMixin(LitElement4, "qti-simple-associable-choice") {
+var QtiSimpleAssociableChoice = class extends ActiveElementMixin(LitElement9, "qti-simple-associable-choice") {
   constructor() {
     super(...arguments);
     this.matchMin = 0;
@@ -525,29 +862,29 @@ var QtiSimpleAssociableChoice = class extends ActiveElementMixin(LitElement4, "q
   // So we have a slot for whenever another qti-simple-associable-choice is dropped in here.
   // And we have slot for content like in this associate interaction
   render() {
-    return html4`
+    return html8`
       <div part="control"></div>
       <slot part="label"></slot>
       <div part="drop">
-        ${repeat(this.drags, (node) => node.getAttribute("identifier"), (node) => node)}
+        ${repeat3(this.drags, (node) => node.getAttribute("identifier"), (node) => node)}
       </div>
     `;
   }
 };
-__decorate4([
-  property4({
+__decorate8([
+  property8({
     type: Number,
     attribute: "match-min"
   })
 ], QtiSimpleAssociableChoice.prototype, "matchMin", void 0);
-__decorate4([
-  property4({
+__decorate8([
+  property8({
     type: Number,
     attribute: "match-max"
   })
 ], QtiSimpleAssociableChoice.prototype, "matchMax", void 0);
-__decorate4([
-  property4({
+__decorate8([
+  property8({
     type: String,
     attribute: "fixed",
     converter: {
@@ -556,20 +893,20 @@ __decorate4([
     }
   })
 ], QtiSimpleAssociableChoice.prototype, "fixed", void 0);
-__decorate4([
-  consume2({ context: dragDropContext, subscribe: true }),
-  state2()
+__decorate8([
+  consume4({ context: dragDropContext, subscribe: true }),
+  state4()
 ], QtiSimpleAssociableChoice.prototype, "_dragDrop", void 0);
 
 // ../interactions/core/dist/elements/qti-simple-choice/qti-simple-choice.js
-import { html as html5, LitElement as LitElement5, nothing } from "lit";
-import { property as property5 } from "lit/decorators.js";
+import { html as html9, LitElement as LitElement10, nothing } from "lit";
+import { property as property9 } from "lit/decorators.js";
 
 // ../interactions/core/dist/elements/qti-simple-choice/qti-simple-choice.styles.js
-import { css as css5 } from "lit";
+import { css as css10 } from "lit";
 var qti_simple_choice_styles_default = [
   boxSizing,
-  css5`
+  css10`
     /*
      * 'position: relative' unconditionally, because this element can carry a correction badge and a
      * badge needs a containing block. The theme draws the badge as an absolutely positioned ::after
@@ -609,13 +946,13 @@ var qti_simple_choice_styles_default = [
 ];
 
 // ../interactions/core/dist/elements/qti-simple-choice/qti-simple-choice.js
-var __decorate5 = function(decorators, target, key, desc) {
+var __decorate9 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var QtiSimpleChoice = class extends ActiveElementMixin(LitElement5, "qti-simple-choice") {
+var QtiSimpleChoice = class extends ActiveElementMixin(LitElement10, "qti-simple-choice") {
   constructor() {
     super(...arguments);
     this.templateIdentifier = null;
@@ -627,7 +964,7 @@ var QtiSimpleChoice = class extends ActiveElementMixin(LitElement5, "qti-simple-
   }
   static {
     this.shadowRootOptions = {
-      ...LitElement5.shadowRootOptions,
+      ...LitElement10.shadowRootOptions,
       delegatesFocus: true
     };
   }
@@ -635,19 +972,19 @@ var QtiSimpleChoice = class extends ActiveElementMixin(LitElement5, "qti-simple-
     return this["internals"].states.has("checked");
   }
   render() {
-    return html5`<div part="control" tabindex="0"><div part="control-mark"></div></div>
-      ${this.marker ? html5`<div id="label" part="marker">${this.marker}</div>` : nothing}
+    return html9`<div part="control" tabindex="0"><div part="control-mark"></div></div>
+      ${this.marker ? html9`<div id="label" part="marker">${this.marker}</div>` : nothing}
       <slot part="label"></slot>`;
   }
 };
-__decorate5([
-  property5({ type: String, attribute: "template-identifier" })
+__decorate9([
+  property9({ type: String, attribute: "template-identifier" })
 ], QtiSimpleChoice.prototype, "templateIdentifier", void 0);
-__decorate5([
-  property5({ type: String, attribute: "show-hide" })
+__decorate9([
+  property9({ type: String, attribute: "show-hide" })
 ], QtiSimpleChoice.prototype, "showHide", void 0);
-__decorate5([
-  property5({
+__decorate9([
+  property9({
     type: Boolean,
     converter: {
       fromAttribute: (value) => value === "true",
@@ -655,18 +992,18 @@ __decorate5([
     }
   })
 ], QtiSimpleChoice.prototype, "fixed", void 0);
-__decorate5([
-  property5({ type: String, attribute: false })
+__decorate9([
+  property9({ type: String, attribute: false })
 ], QtiSimpleChoice.prototype, "marker", void 0);
 
 // ../interactions/associate-interaction/dist/qti-associate-interaction.js
-import { html as html6 } from "lit";
-import { repeat as repeat2 } from "lit/directives/repeat.js";
-import { state as state3 } from "lit/decorators.js";
+import { html as html10 } from "lit";
+import { repeat as repeat4 } from "lit/directives/repeat.js";
+import { state as state5 } from "lit/decorators.js";
 
 // ../interactions/core/dist/mixins/dropzone-auto-size/dropzone-auto-size.mixin.js
-import { property as property6 } from "lit/decorators.js";
-var __decorate6 = function(decorators, target, key, desc) {
+import { property as property10 } from "lit/decorators.js";
+var __decorate10 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -860,8 +1197,8 @@ var DropzoneAutoSizeMixin = (superClass, draggablesSelector, droppablesSelector,
       super.disconnectedCallback();
     }
   }
-  __decorate6([
-    property6({ type: Boolean, attribute: "auto-size-dropzones" })
+  __decorate10([
+    property10({ type: Boolean, attribute: "auto-size-dropzones" })
     /**
      * Size the dropzones from the chips they will hold.
      *
@@ -901,22 +1238,22 @@ var [Observable, Subscriber] = (() => {
   const AsyncFromSyncIteratorPrototype = {
     next(...args) {
       const O = this;
-      const state11 = privateState.get(O);
-      if (!state11?.syncIteratorRecord)
+      const state14 = privateState.get(O);
+      if (!state14?.syncIteratorRecord)
         throw new TypeError(
           "AsyncFromSyncIteratorPrototype.next called on invalid object"
         );
-      const { syncIteratorRecord } = state11;
+      const { syncIteratorRecord } = state14;
       return pTry(() => syncIteratorRecord.next(...args));
     },
     return(...args) {
       const O = this;
-      const state11 = privateState.get(O);
-      if (!state11?.syncIteratorRecord)
+      const state14 = privateState.get(O);
+      if (!state14?.syncIteratorRecord)
         throw new TypeError(
           "AsyncFromSyncIteratorPrototype.return called on invalid object"
         );
-      const { syncIteratorRecord } = state11;
+      const { syncIteratorRecord } = state14;
       return pTry(() => {
         if (!syncIteratorRecord.return) return { value: void 0, done: true };
         return syncIteratorRecord.return(...args);
@@ -924,12 +1261,12 @@ var [Observable, Subscriber] = (() => {
     },
     throw(...args) {
       const O = this;
-      const state11 = privateState.get(O);
-      if (!state11?.syncIteratorRecord)
+      const state14 = privateState.get(O);
+      if (!state14?.syncIteratorRecord)
         throw new TypeError(
           "AsyncFromSyncIteratorPrototype.throw called on invalid object"
         );
-      const { syncIteratorRecord } = state11;
+      const { syncIteratorRecord } = state14;
       return pTry(() => {
         if (!syncIteratorRecord.throw) {
           syncIteratorRecord.return();
@@ -995,11 +1332,11 @@ var [Observable, Subscriber] = (() => {
     }
   }
   function closeASubscription(subscriber, reason) {
-    const state11 = privateState.get(subscriber);
-    if (!state11?.active) return;
-    state11.active = false;
-    state11.subscriptionController.abort(reason);
-    for (const teardown of state11.teardowns.reverse()) {
+    const state14 = privateState.get(subscriber);
+    if (!state14?.active) return;
+    state14.active = false;
+    state14.subscriptionController.abort(reason);
+    for (const teardown of state14.teardowns.reverse()) {
       if (isBrowserContext() && !isDocumentFullyActive(document)) return;
       try {
         teardown();
@@ -1080,10 +1417,10 @@ var [Observable, Subscriber] = (() => {
       if (!(this instanceof Subscriber2))
         throw new TypeError("illegal invocation");
       if (!arguments.length) throw new TypeError("too few arguments");
-      const state11 = privateState.get(this);
-      if (!state11?.active) return;
+      const state14 = privateState.get(this);
+      if (!state14?.active) return;
       if (isBrowserContext() && !isDocumentFullyActive(document)) return;
-      const internalObservers = new Set(state11.observers);
+      const internalObservers = new Set(state14.observers);
       for (const observer of internalObservers) {
         observer.next(value);
       }
@@ -1093,14 +1430,14 @@ var [Observable, Subscriber] = (() => {
       if (!(this instanceof Subscriber2))
         throw new TypeError("illegal invocation");
       if (!arguments.length) throw new TypeError("too few arguments");
-      const state11 = privateState.get(this);
-      if (!state11?.active) {
+      const state14 = privateState.get(this);
+      if (!state14?.active) {
         reportError(error);
         return;
       }
       if (isBrowserContext() && !isDocumentFullyActive(document)) return;
       closeASubscription(this, error);
-      const internalObservers = new Set(state11.observers);
+      const internalObservers = new Set(state14.observers);
       for (const observer of internalObservers) {
         observer.error(error);
       }
@@ -1109,11 +1446,11 @@ var [Observable, Subscriber] = (() => {
     complete() {
       if (!(this instanceof Subscriber2))
         throw new TypeError("illegal invocation");
-      const state11 = privateState.get(this);
-      if (!state11?.active) return;
+      const state14 = privateState.get(this);
+      if (!state14?.active) return;
       if (isBrowserContext() && !isDocumentFullyActive(document)) return;
       closeASubscription(this);
-      const internalObservers = new Set(state11.observers);
+      const internalObservers = new Set(state14.observers);
       for (const observer of internalObservers) {
         observer.complete();
       }
@@ -1126,9 +1463,9 @@ var [Observable, Subscriber] = (() => {
         throw new TypeError(`Parameter 1 is not of type 'Function'`);
       }
       if (isBrowserContext() && !isDocumentFullyActive(document)) return;
-      const state11 = privateState.get(this);
-      if (state11?.active)
-        state11.teardowns.push(teardown);
+      const state14 = privateState.get(this);
+      if (state14?.active)
+        state14.teardowns.push(teardown);
       else teardown();
     }
     get active() {
@@ -2178,6 +2515,10 @@ function closestCornersCollision(dropzones, clientX, clientY, dragElement) {
   }
   return closestZone;
 }
+function containsPoint(zone, x, y) {
+  const rect = zone.getBoundingClientRect();
+  return x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+}
 function closestCornersWithInventoryPriorityCollision(dropzones, clientX, clientY, dragElement, dragContainers) {
   const identifiedDragContainers = dragContainers && dragContainers.length > 0 ? dropzones.filter((zone) => dragContainers.includes(zone)) : dropzones.filter((zone) => zone.tagName === "SLOT" && zone.hasAttribute("part") && zone.getAttribute("part")?.includes("drags"));
   const allRegularDroppables = dropzones.filter((zone) => !identifiedDragContainers.includes(zone));
@@ -2248,6 +2589,9 @@ function closestCornersWithInventoryPriorityCollision(dropzones, clientX, client
       return closestDragContainer;
     }
   }
+  if (closestDroppable && containsPoint(closestDroppable, clientX, clientY)) {
+    return closestDroppable;
+  }
   const dragOrigin = dragElement?.getAttribute("data-drag-origin");
   const inventoryPriorityThreshold = dragOrigin === "droppable" ? 0.85 : 1.5;
   if (closestDragContainer && closestDroppable) {
@@ -2305,17 +2649,17 @@ function isDraggableDisabled(target) {
   return internals?.states?.has("disabled") ?? false;
 }
 var internalsOf = (el) => el?.internals;
-function setDragChipState(el, state11, on) {
+function setDragChipState(el, state14, on) {
   const states = internalsOf(el)?.states;
   if (!states)
     return;
   if (on)
-    states.add(state11);
+    states.add(state14);
   else
-    states.delete(state11);
+    states.delete(state14);
 }
-function hasDragChipState(el, state11) {
-  return internalsOf(el)?.states?.has(state11) ?? false;
+function hasDragChipState(el, state14) {
+  return internalsOf(el)?.states?.has(state14) ?? false;
 }
 function clearDragChipStates(el) {
   setDragChipState(el, "dragging", false);
@@ -3027,8 +3371,8 @@ var DragDropCoreMixin = (superClass, draggablesSelector, droppablesSelector, dra
       const clone = element.cloneNode(true);
       const computedStyles = window.getComputedStyle(element);
       for (let i = 0; i < computedStyles.length; i++) {
-        const property20 = computedStyles[i];
-        clone.style.setProperty(property20, computedStyles.getPropertyValue(property20));
+        const property26 = computedStyles[i];
+        clone.style.setProperty(property26, computedStyles.getPropertyValue(property26));
       }
       const host = resolveDragCloneHost(element.isConnected ? element : this, this.dragCloneRoot());
       this.cloneFrame = measureFixedFrame(host);
@@ -3160,14 +3504,14 @@ var DragDropCoreMixin = (superClass, draggablesSelector, droppablesSelector, dra
         returnAnchorItems: []
       };
     }
-    setInternalsState(state11, enabled) {
+    setInternalsState(state14, enabled) {
       const internals = this._internals;
       if (!internals?.states)
         return;
       if (enabled) {
-        internals.states.add(state11);
+        internals.states.add(state14);
       } else {
-        internals.states.delete(state11);
+        internals.states.delete(state14);
       }
     }
     cleanup() {
@@ -3195,7 +3539,7 @@ var DragDropCoreMixin = (superClass, draggablesSelector, droppablesSelector, dra
 };
 
 // ../interactions/core/dist/mixins/drag-drop-observables/drag-drop-slotted.mixin.js
-import { property as property7 } from "lit/decorators.js";
+import { property as property11 } from "lit/decorators.js";
 import { provide } from "@lit/context";
 
 // ../interactions/core/dist/mixins/drag-drop-observables/utils/flip.utils.js
@@ -3216,9 +3560,9 @@ function captureFlipState(element) {
 function flipStateFromRect(rect) {
   return { left: rect.left, top: rect.top, width: rect.width, height: rect.height };
 }
-function captureMultipleFlipStates(elements17) {
+function captureMultipleFlipStates(elements32) {
   const states = /* @__PURE__ */ new Map();
-  elements17.forEach((element) => {
+  elements32.forEach((element) => {
     states.set(element, captureFlipState(element));
   });
   return states;
@@ -3287,7 +3631,7 @@ function animateMultipleFlips(previousStates, options = {}) {
 }
 
 // ../interactions/core/dist/mixins/drag-drop-observables/drag-drop-slotted.mixin.js
-var __decorate7 = function(decorators, target, key, desc) {
+var __decorate11 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -3892,20 +4236,20 @@ var DragDropSlottedMixin = (superClass, draggablesSelector, droppablesSelector,
       return super.reportValidity();
     }
   }
-  __decorate7([
-    property7({ type: Number, reflect: true, attribute: "min-associations" })
+  __decorate11([
+    property11({ type: Number, reflect: true, attribute: "min-associations" })
   ], DragDropSlottedElement.prototype, "minAssociations", void 0);
-  __decorate7([
-    property7({ type: Number, reflect: true, attribute: "max-associations" })
+  __decorate11([
+    property11({ type: Number, reflect: true, attribute: "max-associations" })
   ], DragDropSlottedElement.prototype, "maxAssociations", null);
-  __decorate7([
+  __decorate11([
     provide({ context: dragDropContext })
   ], DragDropSlottedElement.prototype, "_dragDrop", void 0);
-  __decorate7([
-    property7({ type: Boolean, attribute: "disable-animations" })
+  __decorate11([
+    property11({ type: Boolean, attribute: "disable-animations" })
   ], DragDropSlottedElement.prototype, "disableAnimations", null);
-  __decorate7([
-    property7({
+  __decorate11([
+    property11({
       attribute: "response",
       reflect: false,
       noAccessor: true,
@@ -3917,8 +4261,8 @@ var DragDropSlottedMixin = (superClass, draggablesSelector, droppablesSelector,
 
 // ../interactions/core/dist/mixins/drag-drop-observables/strategies/sorting.strategy.js
 var VerticalListSortingStrategy = class {
-  getInsertPosition(elements17, _activeElement, targetElement, _clientX, clientY) {
-    const targetIndex = elements17.indexOf(targetElement);
+  getInsertPosition(elements32, _activeElement, targetElement, _clientX, clientY) {
+    const targetIndex = elements32.indexOf(targetElement);
     if (targetIndex === -1)
       return null;
     const rect = targetElement.getBoundingClientRect();
@@ -4202,12 +4546,12 @@ var DragDropSlottedSortableMixin = (superClass, sortableItemSelector = '[qti-dra
 };
 
 // ../interactions/associate-interaction/dist/qti-associate-interaction.styles.js
-import { css as css6 } from "lit";
+import { css as css11 } from "lit";
 var qti_associate_interaction_styles_default = [
   boxSizing,
   validationMessage,
   dropRegion,
-  css6`
+  css11`
     :host {
       display: block; /* necessary to calculate scaling position */
     }
@@ -4264,7 +4608,7 @@ var qti_associate_interaction_styles_default = [
 ];
 
 // ../interactions/associate-interaction/dist/qti-associate-interaction.js
-var __decorate8 = function(decorators, target, key, desc) {
+var __decorate12 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4297,8 +4641,8 @@ var QtiAssociateInteraction = class extends DragDropSlottedSortableMixin(Slotted
    */
   #renderDrop(identifier, name) {
     const drags = this._dragDrop?.nodesByTarget?.[identifier] ?? [];
-    return html6`<div name=${name} part="drop" data-declarative-drops identifier=${identifier}>
-      ${repeat2(drags, (node) => node.getAttribute("identifier"), (node) => node)}
+    return html10`<div name=${name} part="drop" data-declarative-drops identifier=${identifier}>
+      ${repeat4(drags, (node) => node.getAttribute("identifier"), (node) => node)}
     </div>`;
   }
   /**
@@ -4354,10 +4698,10 @@ var QtiAssociateInteraction = class extends DragDropSlottedSortableMixin(Slotted
     }) ?? [];
   }
   render() {
-    return html6` <slot name="prompt"></slot>
+    return html10` <slot name="prompt"></slot>
       <slot part="drags" name="qti-simple-associable-choice"></slot>
       <div part="drops">
-        ${this._childrenMap.length > 0 && Array.from({ length: this.#rowCount }, (_, index) => html6`<div part="drop-row">
+        ${this._childrenMap.length > 0 && Array.from({ length: this.#rowCount }, (_, index) => html10`<div part="drop-row">
               ${this.#renderDrop(`droplist${index}_left`, `left${index}`)}
               ${this.#renderDrop(`droplist${index}_right`, `right${index}`)}
             </div>`)}
@@ -4376,17 +4720,17 @@ var QtiAssociateInteraction = class extends DragDropSlottedSortableMixin(Slotted
     this.removeEventListener("register-qti-simple-associable-choice", this._registerChoiceHandler);
   }
 };
-__decorate8([
-  state3()
+__decorate12([
+  state5()
 ], QtiAssociateInteraction.prototype, "_childrenMap", void 0);
 
 // ../interactions/choice-interaction/dist/qti-choice-interaction.js
-import { html as html7 } from "lit";
-import { property as property10 } from "lit/decorators.js";
+import { html as html11 } from "lit";
+import { property as property14 } from "lit/decorators.js";
 
 // ../interactions/core/dist/mixins/choices/choices.mixin.js
-import { property as property8, query } from "lit/decorators.js";
-var __decorate9 = function(decorators, target, key, desc) {
+import { property as property12, query } from "lit/decorators.js";
+var __decorate13 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4576,40 +4920,40 @@ var ChoicesMixin = (superClass, selector) => {
       });
     }
   }
-  __decorate9([
+  __decorate13([
     query("#validation-message")
   ], ChoicesMixinElement.prototype, "_validationMessageElement", void 0);
-  __decorate9([
-    property8({ type: Number, attribute: "min-choices" })
+  __decorate13([
+    property12({ type: Number, attribute: "min-choices" })
   ], ChoicesMixinElement.prototype, "minChoices", void 0);
-  __decorate9([
-    property8({ type: Number, attribute: "max-choices" })
+  __decorate13([
+    property12({ type: Number, attribute: "max-choices" })
   ], ChoicesMixinElement.prototype, "maxChoices", void 0);
-  __decorate9([
+  __decorate13([
     watch("maxChoices")
   ], ChoicesMixinElement.prototype, "_handleMaxChoicesChange", null);
-  __decorate9([
+  __decorate13([
     watch("disabled", { waitUntilFirstUpdate: true })
   ], ChoicesMixinElement.prototype, "_handleDisabledChange", void 0);
-  __decorate9([
+  __decorate13([
     watch("readonly", { waitUntilFirstUpdate: true })
   ], ChoicesMixinElement.prototype, "_handleReadonlyChange", void 0);
-  __decorate9([
-    property8({
+  __decorate13([
+    property12({
       attribute: "response",
       reflect: false,
       converter: responseAttributeConverter({ emptyAs: "" })
     })
   ], ChoicesMixinElement.prototype, "response", void 0);
-  __decorate9([
+  __decorate13([
     watch("response", { waitUntilFirstUpdate: true })
   ], ChoicesMixinElement.prototype, "_handleValueChange", void 0);
   return ChoicesMixinElement;
 };
 
 // ../interactions/core/dist/mixins/vocabulary/vocabulary-mixin.js
-import { property as property9 } from "lit/decorators.js";
-var __decorate10 = function(decorators, target, key, desc) {
+import { property as property13 } from "lit/decorators.js";
+var __decorate14 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4690,174 +5034,749 @@ var VocabularyMixin = (superClass, _selector) => {
     #getActiveLabelType() {
       return this.#classes.filter((c) => this.#allLabels.includes(c)).pop() ?? null;
     }
-    #getActiveLabelSuffixType() {
-      return this.#classes.filter((c) => this.#allLabelSuffixes.includes(c)).pop() ?? null;
+    #getActiveLabelSuffixType() {
+      return this.#classes.filter((c) => this.#allLabelSuffixes.includes(c)).pop() ?? null;
+    }
+    #getLabel(index, labelType, labelSuffixType) {
+      let effectiveLabelType = labelType;
+      if (!effectiveLabelType && labelSuffixType && labelSuffixType !== "qti-labels-suffix-none") {
+        effectiveLabelType = "qti-labels-upper-alpha";
+      }
+      if (!effectiveLabelType || effectiveLabelType === "qti-labels-none") {
+        return "";
+      }
+      let label = "";
+      switch (effectiveLabelType) {
+        case "qti-labels-decimal":
+          label = `${index}`;
+          break;
+        case "qti-labels-lower-alpha":
+          label = this.#toAlphabetic(index, "lower");
+          break;
+        case "qti-labels-upper-alpha":
+          label = this.#toAlphabetic(index, "upper");
+          break;
+      }
+      if (labelSuffixType === "qti-labels-suffix-period") {
+        return `${label}.`;
+      }
+      if (labelSuffixType === "qti-labels-suffix-parenthesis") {
+        return `${label})`;
+      }
+      return label;
+    }
+    #toAlphabetic(index, casing) {
+      let value = index;
+      let label = "";
+      const charCodeBase = casing === "lower" ? 97 : 65;
+      while (value > 0) {
+        value -= 1;
+        label = String.fromCharCode(charCodeBase + value % 26) + label;
+        value = Math.floor(value / 26);
+      }
+      return label;
+    }
+  }
+  __decorate14([
+    property13({
+      type: String,
+      attribute: "class"
+    })
+  ], VocabularyElement.prototype, "class", null);
+  return VocabularyElement;
+};
+
+// ../interactions/choice-interaction/dist/qti-choice-interaction.styles.js
+import { css as css12 } from "lit";
+var qti_choice_interaction_styles_default = [
+  boxSizing,
+  validationMessage,
+  css12`
+    :host {
+      display: block;
+    }
+
+    [part='slot'] {
+      display: grid;
+      gap: 10px;
+    }
+
+    /* Define the number of columns dynamically */
+    :host([class*='qti-choices-stacking-']) [part='slot'] {
+      grid-template-columns: repeat(var(--stacking-count, 1), 1fr);
+    }
+
+    /* Apply dynamic stacking count based on class */
+    :host(.qti-choices-stacking-1) {
+      --stacking-count: 1;
+    }
+    :host(.qti-choices-stacking-2) {
+      --stacking-count: 2;
+    }
+    :host(.qti-choices-stacking-3) {
+      --stacking-count: 3;
+    }
+    :host(.qti-choices-stacking-4) {
+      --stacking-count: 4;
+    }
+    :host(.qti-choices-stacking-5) {
+      --stacking-count: 5;
+    }
+
+    /* Default slot item layout */
+    ::slotted(qti-simple-choice) {
+      display: flex;
+      align-items: center;
+      white-space: normal;
+    }
+
+    /* Orientation styles */
+    :host(.qti-orientation-horizontal) [part='slot'] {
+      grid-auto-flow: dense column;
+      grid-auto-columns: 1fr;
+    }
+
+    :host(.qti-orientation-vertical) [part='slot'] {
+      grid-auto-flow: row;
+    }
+
+    /* Vertical and horizontal stacking logic */
+    :host(.qti-orientation-vertical[class*='qti-choices-stacking-']) [part='slot'] {
+      grid-auto-flow: dense column;
+      grid-auto-columns: 1fr;
+      grid-template-columns: repeat(var(--stacking-count), 1fr);
+      grid-template-rows: repeat(calc(var(--item-count) / var(--stacking-count)), 1fr);
+    }
+
+    :host(.qti-orientation-horizontal[class*='qti-choices-stacking-']) [part='slot'] {
+      grid-auto-flow: row;
+      grid-template-columns: repeat(var(--stacking-count), 1fr);
+      grid-template-rows: unset;
+    }
+
+    /* Ensure even distribution in vertical mode */
+    :host(.qti-orientation-vertical) ::slotted(qti-simple-choice:nth-child(even)) {
+      grid-row: auto;
+    }
+  `
+];
+
+// ../interactions/choice-interaction/dist/qti-choice-interaction.js
+var __decorate15 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var QtiChoiceInteraction = class extends VocabularyMixin(ChoicesMixin(Interaction, "qti-simple-choice"), "qti-simple-choice") {
+  constructor() {
+    super(...arguments);
+    this.orientation = "vertical";
+  }
+  static {
+    this.styles = qti_choice_interaction_styles_default;
+  }
+  #handleSlotChange() {
+    const choices = this.querySelectorAll("qti-simple-choice");
+    this.style.setProperty("--item-count", choices.length.toString());
+  }
+  render() {
+    return html11`
+      <slot part="prompt" name="prompt"></slot>
+      <slot part="slot" @slotchange=${this.#handleSlotChange}></slot>
+      <div part="message" role="alert" id="validation-message"></div>
+    `;
+  }
+};
+__decorate15([
+  property14({ type: String })
+], QtiChoiceInteraction.prototype, "orientation", void 0);
+
+// ../interactions/custom-interaction/dist/qti-custom-interaction.js
+import { html as html12 } from "lit";
+import { property as property15, state as state6 } from "lit/decorators.js";
+
+// ../interactions/custom-interaction/dist/qti-custom-interaction.styles.js
+import { css as css13 } from "lit";
+var qti_custom_interaction_styles_default = [
+  boxSizing,
+  css13`
+    /* The box this element already had. See the note in qti-match-interaction.styles.ts. */
+    :host {
+      display: block;
+    }
+  `
+];
+
+// ../interactions/custom-interaction/dist/qti-custom-interaction.js
+var __decorate16 = function(decorators, target, key, desc) {
+  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+  return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var registerCES = `
+const postToParentWindows = (type, data) => {
+    window.top.postMessage(data ? { type, data } : { type }, '*');
+    let w = window.parent;
+    while (w) {
+      if (w !== window.top) {
+          w.postMessage({ type, data }, '*');
+      }
+      if (w !== w.parent) {
+        w = w.parent;
+      } else {
+        w = null;
+      }
+    }
+};
+
+window.CES = {
+    media: null,
+    response: null,
+    load: () => {
+      let resolveCount = 0;
+
+      const handleMessage = (event) => {
+        if (event.data.type === "mediaData") {
+          const media = event.data.data;
+          CES.media = media;
+          resolveCount++;
+        } else if (event.data.type === "responseData") {
+          const response = event.data.data;
+          if (response && Array.isArray(response) && response.length > 0) {
+            // state is stored in the first element of the array
+            CES.response = response[0];
+            // Wait a short moment to ensure CES.response is set
+            setTimeout(() => {
+              // Re-create the Controller instance if it exists
+              if (typeof Controller === 'function') {
+                console.log("Re-creating Controller instance");
+                ctrl = new Controller();
+              }
+            }, 50);
+          } else {  
+            CES.response = response;
+          }
+          resolveCount++;
+        }
+        if (resolveCount === 2) {
+          //window.removeEventListener("message", handleMessage);
+        }
+      };
+      window.addEventListener("message", handleMessage);
+      postToParentWindows("getMedia");
+      postToParentWindows("getResponse");
+    },
+    setResponse: (data) => {
+      postToParentWindows("setResponse", data);
+    },
+    getResponse: () => {
+      return CES.response;
+    },
+    getMedia: () => {
+      return CES.media;
+    },
+    setStageHeight: () => {
+      postToParentWindows("setStageHeight");
+    },
+};
+CES.load();
+`;
+var ciBootstrap = `
+  (function() {
+    var blobUrlReceived = null;
+    
+    const createIframe = () => {
+      if (!blobUrlReceived || !document.body) return;
+      var n = document.createElement('iframe');
+      n.frameBorder = '0';
+      n.scrolling = 'no';
+      n.src = blobUrlReceived;
+      n.style.width = '100%';
+      n.style.height = '100%';
+      document.body.appendChild(n);
+    };
+    
+    const handleMessage = (event) => {
+      if (event.data.type === 'blobUrl') {
+        blobUrlReceived = event.data.data;
+        window.removeEventListener('message', handleMessage);
+        createIframe();
+      }
+    };
+    
+    window.addEventListener('message', handleMessage);
+    
+    // Wait for document ready before requesting blobUrl
+    const requestBlobUrl = () => {
+      let w = window.parent;
+      while (w) {
+        w.postMessage({ type: 'getBlobUrl' }, '*');
+        if (w !== w.parent) {
+          w = w.parent;
+        } else {
+          w = null;
+        }
+      }
+    };
+    
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', requestBlobUrl);
+    } else {
+      requestBlobUrl();
+    }
+  })();
+`;
+var QtiCustomInteraction = class extends Interaction {
+  #rawResponse;
+  #manifestUrl;
+  #resourceBaseUrl;
+  static {
+    this.styles = qti_custom_interaction_styles_default;
+  }
+  constructor() {
+    super();
+    this.#rawResponse = "";
+    this.#manifestUrl = null;
+    this.#resourceBaseUrl = null;
+    this._errorMessage = null;
+    this.#contentBlobUrl = null;
+    this.handlePostMessage = this.handlePostMessage.bind(this);
+  }
+  // Pre-created blob URL for the index.html with injected CES proxy
+  #contentBlobUrl;
+  connectedCallback() {
+    super.connectedCallback();
+    let manifestPath = this.data;
+    if (!manifestPath) {
+      const objectEl = this.querySelector("object[data]");
+      if (objectEl) {
+        manifestPath = objectEl.getAttribute("data");
+        const width = objectEl.getAttribute("width");
+        const height = objectEl.getAttribute("height");
+        if (width)
+          this.setAttribute("width", width);
+        if (height)
+          this.setAttribute("height", height);
+      }
+    }
+    if (!manifestPath) {
+      this._errorMessage = "No manifest path found (neither data attribute nor object child)";
+      return;
+    }
+    const uriToManifest = manifestPath.startsWith("http") || manifestPath.startsWith("blob") ? manifestPath : removeDoubleSlashes((this.baseItemUrl || "") + "/" + manifestPath);
+    this.#manifestUrl = new URL(uriToManifest, window.location.href).toString();
+    fetch(uriToManifest).then((response) => {
+      return response.json();
+    }).then((data) => {
+      this.manifest = data;
+      this.setupCES();
+    }).catch((err) => {
+      this._errorMessage = err;
+    });
+  }
+  /**
+   * Sets up the CES custom interaction by creating the iframe structure and
+   * handling the CES API communication via postMessage.
+   *
+   * For interactions that use CES, this method:
+   * 1. Fetches the original bootstrap.js and checks if it uses CES
+   * 2. If CES is used, fetches index.html and injects the registerCES proxy
+   * 3. Creates a blob URL for the modified HTML (stored in _contentBlobUrl)
+   * 4. Replaces bootstrap.js with ciBootstrap that loads the blob URL
+   * 5. Sets up postMessage listeners for CES API calls
+   */
+  async setupCES() {
+    await this.updateComplete;
+    const iframe = this.shadowRoot?.querySelector("#pciContainer");
+    if (!iframe) {
+      this._errorMessage = "pciContainer iframe not found";
+      return;
+    }
+    if (!iframe.getAttribute("src")) {
+      iframe.setAttribute("src", "about:blank");
+    }
+    let iframeDoc = iframe.contentDocument ?? iframe.contentWindow?.document ?? null;
+    if (!iframeDoc) {
+      await new Promise((resolve) => iframe.addEventListener("load", () => resolve(), { once: true }));
+      iframeDoc = iframe.contentDocument ?? iframe.contentWindow?.document ?? null;
+    }
+    if (!iframeDoc) {
+      this._errorMessage = "pciContainer iframe document not available";
+      return;
+    }
+    if (!this.manifest.script || this.manifest.script.length === 0) {
+      this._errorMessage = "No script found in manifest";
+      return;
+    }
+    if (!this.manifest.style || this.manifest.style.length === 0) {
+      this._errorMessage = "No style found in manifest";
+      return;
+    }
+    const cssRef = this.manifest.style[0];
+    const baseCandidates = this.#getBaseCandidates();
+    const cssResolved = await this.#resolveResourceWithFallback(cssRef, baseCandidates);
+    const cssUrl = cssResolved.url;
+    if (cssResolved.baseUrl && !this.#resourceBaseUrl) {
+      this.#resourceBaseUrl = cssResolved.baseUrl;
+    }
+    const usesCES = true;
+    if (usesCES) {
+      let indexUrl = "";
+      if (this.manifest.media && this.manifest.media.length > 0) {
+        const mediaRef = this.manifest.media[0];
+        const indexResolved = await this.#resolveResourceWithFallback(mediaRef, baseCandidates, {
+          returnText: true
+        });
+        indexUrl = indexResolved.url;
+        if (indexResolved.baseUrl && !this.#resourceBaseUrl) {
+          this.#resourceBaseUrl = indexResolved.baseUrl;
+        }
+        if (indexResolved.text) {
+          let html32 = indexResolved.text;
+          const alreadyModified = html32.includes("postToParentWindows") || html32.includes("window.CES");
+          if (!alreadyModified) {
+            const cesScript = "<script>" + registerCES + "</script>";
+            const headIndex = html32.indexOf("<head>");
+            if (headIndex !== -1) {
+              html32 = html32.slice(0, headIndex + 6) + cesScript + html32.slice(headIndex + 6);
+            } else {
+              html32 = cesScript + html32;
+            }
+          }
+          const blob = new Blob([html32], { type: "text/html" });
+          this.#contentBlobUrl = URL.createObjectURL(blob);
+        }
+      } else {
+        const manifestPath = this.data || "manifest.json";
+        const basePath = manifestPath.includes("/") ? manifestPath.substring(0, manifestPath.lastIndexOf("/")) : "";
+        const indexPath = basePath ? `${basePath}/index.html` : "index.html";
+        const indexResolved = await this.#resolveResourceWithFallback(indexPath, baseCandidates, {
+          returnText: true
+        });
+        indexUrl = indexResolved.url;
+        if (indexResolved.baseUrl && !this.#resourceBaseUrl) {
+          this.#resourceBaseUrl = indexResolved.baseUrl;
+        }
+        if (indexResolved.text) {
+          let html32 = indexResolved.text;
+          const alreadyModified = html32.includes("postToParentWindows") || html32.includes("window.CES");
+          if (!alreadyModified) {
+            const cesScript = "<script>" + registerCES + "</script>";
+            const headIndex = html32.indexOf("<head>");
+            if (headIndex !== -1) {
+              html32 = html32.slice(0, headIndex + 6) + cesScript + html32.slice(headIndex + 6);
+            } else {
+              html32 = cesScript + html32;
+            }
+          }
+          const blob = new Blob([html32], { type: "text/html" });
+          this.#contentBlobUrl = URL.createObjectURL(blob);
+        }
+      }
+      if (indexUrl && !this.#contentBlobUrl) {
+        try {
+          const indexResponse = await fetch(indexUrl);
+          if (indexResponse.ok) {
+            let html32 = await indexResponse.text();
+            const alreadyModified = html32.includes("postToParentWindows") || html32.includes("window.CES");
+            if (!alreadyModified) {
+              const cesScript = "<script>" + registerCES + "</script>";
+              const headIndex = html32.indexOf("<head>");
+              if (headIndex !== -1) {
+                html32 = html32.slice(0, headIndex + 6) + cesScript + html32.slice(headIndex + 6);
+              } else {
+                html32 = cesScript + html32;
+              }
+            }
+            const blob = new Blob([html32], { type: "text/html" });
+            this.#contentBlobUrl = URL.createObjectURL(blob);
+          } else {
+            console.error(`Failed to fetch index.html: ${indexResponse.status}`);
+          }
+        } catch (e) {
+          console.error(`Error fetching index.html: ${e}`);
+        }
+      }
+    }
+    const inlineScript = `<script>${ciBootstrap}</script>`;
+    window.addEventListener("message", this.handlePostMessage);
+    const htmlContent = `
+      <!DOCTYPE html>
+      <html>
+        <head>
+          ${cssUrl ? `<link href='${cssUrl}' rel="stylesheet" />` : ""}
+          ${inlineScript}
+        </head>
+        <body></body>
+      </html>
+    `;
+    iframe.srcdoc = htmlContent;
+  }
+  #getIFrames() {
+    const iframesInShadowRoot = this.shadowRoot.querySelectorAll("iframe");
+    const iframe = this.querySelectorAll("iframe");
+    const outerIFrames = [...iframesInShadowRoot, ...iframe];
+    for (const iframe2 of outerIFrames) {
+      const iframeSrc = iframe2.src;
+      const isSameOrigin = new URL(iframeSrc, window.location.href).origin === window.location.origin;
+      if (isSameOrigin) {
+        try {
+          const outerDoc = iframe2.contentDocument || iframe2.contentWindow.document;
+          if (outerDoc) {
+            this.#getInnerIFrames(outerDoc, outerIFrames);
+          }
+        } catch (e) {
+          console.error("Error accessing nested iframe:", e);
+        }
+      }
     }
-    #getLabel(index, labelType, labelSuffixType) {
-      let effectiveLabelType = labelType;
-      if (!effectiveLabelType && labelSuffixType && labelSuffixType !== "qti-labels-suffix-none") {
-        effectiveLabelType = "qti-labels-upper-alpha";
+    outerIFrames.forEach((iframe2, index) => {
+      if (outerIFrames.indexOf(iframe2) !== index) {
+        outerIFrames.splice(index, 1);
       }
-      if (!effectiveLabelType || effectiveLabelType === "qti-labels-none") {
-        return "";
+    });
+    return outerIFrames;
+  }
+  #getInnerIFrames(iframeDocument, iframes = []) {
+    const currentIframes = iframeDocument.querySelectorAll("iframe");
+    currentIframes.forEach((iframe) => {
+      iframes.push(iframe);
+      const iframeSrc = iframe.src;
+      const isSameOrigin = new URL(iframeSrc, window.location.href).origin === window.location.origin;
+      if (isSameOrigin) {
+        try {
+          const nestedDoc = iframe.contentDocument || iframe.contentWindow.document;
+          this.#getInnerIFrames(nestedDoc, iframes);
+        } catch (e) {
+          console.error("Error accessing nested iframe:", e);
+        }
+      } else {
+        console.warn("Skipped cross-origin iframe:", iframeSrc);
       }
-      let label = "";
-      switch (effectiveLabelType) {
-        case "qti-labels-decimal":
-          label = `${index}`;
-          break;
-        case "qti-labels-lower-alpha":
-          label = this.#toAlphabetic(index, "lower");
-          break;
-        case "qti-labels-upper-alpha":
-          label = this.#toAlphabetic(index, "upper");
-          break;
+    });
+    return iframes;
+  }
+  #postToWindowAndIframes(type, data) {
+    window.postMessage({ type, data }, "*");
+    const iframes = this.#getIFrames();
+    for (const iframe of iframes) {
+      if (iframe.contentWindow) {
+        iframe.contentWindow.postMessage({ type, data }, "*");
       }
-      if (labelSuffixType === "qti-labels-suffix-period") {
-        return `${label}.`;
+    }
+  }
+  handlePostMessage(event) {
+    const { type, data } = event.data;
+    switch (type) {
+      case "setResponse":
+        if (data === null || !(Array.isArray(data) && data.length === 1 && data[0] === "")) {
+          this.#rawResponse = data;
+          this.saveResponse(data);
+        }
+        break;
+      case "getResponse": {
+        this.#postToWindowAndIframes("responseData", this.#rawResponse);
+        break;
       }
-      if (labelSuffixType === "qti-labels-suffix-parenthesis") {
-        return `${label})`;
+      case "getBlobUrl": {
+        if (this.#contentBlobUrl) {
+          this.#postToWindowAndIframes("blobUrl", this.#contentBlobUrl);
+          if (event.source && event.source !== window) {
+            event.source.postMessage({ type: "blobUrl", data: this.#contentBlobUrl }, "*");
+          }
+        }
+        break;
       }
-      return label;
-    }
-    #toAlphabetic(index, casing) {
-      let value = index;
-      let label = "";
-      const charCodeBase = casing === "lower" ? 97 : 65;
-      while (value > 0) {
-        value -= 1;
-        label = String.fromCharCode(charCodeBase + value % 26) + label;
-        value = Math.floor(value / 26);
+      case "getMedia": {
+        const baseCandidates = this.#getBaseCandidates();
+        const mediaData = this.manifest.media.map((media) => {
+          if (media.startsWith("http") || media.startsWith("blob")) {
+            return media;
+          }
+          const baseUrl = this.#resourceBaseUrl || baseCandidates[0];
+          if (!baseUrl) {
+            return media;
+          }
+          return new URL(media, baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`).toString();
+        });
+        this.#postToWindowAndIframes("mediaData", mediaData);
+        break;
       }
-      return label;
+      case "setStageHeight":
+        console.log("setStageHeight not implemented");
+        break;
     }
   }
-  __decorate10([
-    property9({
-      type: String,
-      attribute: "class"
-    })
-  ], VocabularyElement.prototype, "class", null);
-  return VocabularyElement;
-};
-
-// ../interactions/choice-interaction/dist/qti-choice-interaction.styles.js
-import { css as css7 } from "lit";
-var qti_choice_interaction_styles_default = [
-  boxSizing,
-  validationMessage,
-  css7`
-    :host {
-      display: block;
-    }
-
-    [part='slot'] {
-      display: grid;
-      gap: 10px;
-    }
-
-    /* Define the number of columns dynamically */
-    :host([class*='qti-choices-stacking-']) [part='slot'] {
-      grid-template-columns: repeat(var(--stacking-count, 1), 1fr);
-    }
-
-    /* Apply dynamic stacking count based on class */
-    :host(.qti-choices-stacking-1) {
-      --stacking-count: 1;
-    }
-    :host(.qti-choices-stacking-2) {
-      --stacking-count: 2;
+  validate() {
+    if (!this.#rawResponse) {
+      return false;
     }
-    :host(.qti-choices-stacking-3) {
-      --stacking-count: 3;
+    if (Array.isArray(this.#rawResponse)) {
+      if (this.#rawResponse.length === 0) {
+        return false;
+      }
+      for (const value of this.#rawResponse) {
+        if (value !== "" && value !== null) {
+          return true;
+        }
+      }
     }
-    :host(.qti-choices-stacking-4) {
-      --stacking-count: 4;
+    return true;
+  }
+  get response() {
+    return this.#rawResponse || null;
+  }
+  set response(val) {
+    if (typeof val === "string") {
+      this.#rawResponse = val;
+      this.saveResponse(val);
+    } else if (Array.isArray(val)) {
+      this.#rawResponse = val;
+    } else if (!val) {
+    } else {
+      throw new Error("Value must be a string or an array of strings");
     }
-    :host(.qti-choices-stacking-5) {
-      --stacking-count: 5;
+  }
+  disconnectedCallback() {
+    window.removeEventListener("message", this.handlePostMessage);
+    super.disconnectedCallback();
+  }
+  render() {
+    return html12`<iframe
+        width=${this.getAttribute("width")}
+        height=${this.getAttribute("height")}
+        frameborder="0"
+        title="pciContainer"
+        id="pciContainer"
+      >
+      </iframe>
+      ${this._errorMessage && html12`<div style="color:red">
+        <h1>Error</h1>
+        ${this._errorMessage}
+      </div>`}`;
+  }
+  #getBaseCandidates() {
+    const candidates = [this.#resourceBaseUrl, this.baseRefUrl, this.baseItemUrl, this.#getManifestBaseUrl()];
+    const resolved = candidates.filter(Boolean).map((base) => new URL(base, window.location.href).toString());
+    const manifestParent = this.#getManifestParentBaseUrl();
+    if (manifestParent) {
+      resolved.push(manifestParent);
+    }
+    return [...new Set(resolved)];
+  }
+  #getManifestBaseUrl() {
+    if (!this.#manifestUrl) {
+      return null;
     }
-
-    /* Default slot item layout */
-    ::slotted(qti-simple-choice) {
-      display: flex;
-      align-items: center;
-      white-space: normal;
+    return new URL(".", this.#manifestUrl).toString();
+  }
+  #getManifestParentBaseUrl() {
+    if (!this.#manifestUrl) {
+      return null;
     }
-
-    /* Orientation styles */
-    :host(.qti-orientation-horizontal) [part='slot'] {
-      grid-auto-flow: dense column;
-      grid-auto-columns: 1fr;
+    return new URL("..", this.#manifestUrl).toString();
+  }
+  async #resolveResourceWithFallback(ref, baseCandidates, options = {}) {
+    if (!ref) {
+      return { url: "", baseUrl: null };
     }
-
-    :host(.qti-orientation-vertical) [part='slot'] {
-      grid-auto-flow: row;
+    if (ref.startsWith("http") || ref.startsWith("blob")) {
+      return { url: ref, baseUrl: null };
     }
-
-    /* Vertical and horizontal stacking logic */
-    :host(.qti-orientation-vertical[class*='qti-choices-stacking-']) [part='slot'] {
-      grid-auto-flow: dense column;
-      grid-auto-columns: 1fr;
-      grid-template-columns: repeat(var(--stacking-count), 1fr);
-      grid-template-rows: repeat(calc(var(--item-count) / var(--stacking-count)), 1fr);
+    for (const base of baseCandidates) {
+      const baseUrl = new URL(base, window.location.href).toString();
+      const url = new URL(ref, baseUrl.endsWith("/") ? baseUrl : `${baseUrl}/`).toString();
+      try {
+        const response = await fetch(url);
+        if (response.ok) {
+          if (options.returnText) {
+            const text = await response.text();
+            return { url, baseUrl, text };
+          }
+          return { url, baseUrl };
+        }
+      } catch (e) {
+      }
     }
+    return { url: "", baseUrl: null };
+  }
+};
+__decorate16([
+  property15({ type: String, attribute: "data" })
+], QtiCustomInteraction.prototype, "data", void 0);
+__decorate16([
+  property15({ type: String, attribute: "data-base-item" })
+], QtiCustomInteraction.prototype, "baseItemUrl", void 0);
+__decorate16([
+  property15({ type: String, attribute: "data-base-ref" })
+], QtiCustomInteraction.prototype, "baseRefUrl", void 0);
+__decorate16([
+  property15({ type: String, attribute: "id" })
+], QtiCustomInteraction.prototype, "id", void 0);
+__decorate16([
+  state6()
+], QtiCustomInteraction.prototype, "_errorMessage", void 0);
 
-    :host(.qti-orientation-horizontal[class*='qti-choices-stacking-']) [part='slot'] {
-      grid-auto-flow: row;
-      grid-template-columns: repeat(var(--stacking-count), 1fr);
-      grid-template-rows: unset;
-    }
+// ../interactions/end-attempt-interaction/dist/qti-end-attempt-interaction.js
+import { html as html13, LitElement as LitElement11 } from "lit";
+import { property as property16 } from "lit/decorators.js";
 
-    /* Ensure even distribution in vertical mode */
-    :host(.qti-orientation-vertical) ::slotted(qti-simple-choice:nth-child(even)) {
-      grid-row: auto;
-    }
-  `
-];
+// ../interactions/end-attempt-interaction/dist/qti-end-attempt-interaction.styles.js
+var qti_end_attempt_interaction_styles_default = [boxSizing];
 
-// ../interactions/choice-interaction/dist/qti-choice-interaction.js
-var __decorate11 = function(decorators, target, key, desc) {
+// ../interactions/end-attempt-interaction/dist/qti-end-attempt-interaction.js
+var __decorate17 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
   return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var QtiChoiceInteraction = class extends VocabularyMixin(ChoicesMixin(Interaction, "qti-simple-choice"), "qti-simple-choice") {
+var QtiEndAttemptInteraction = class extends LitElement11 {
   constructor() {
     super(...arguments);
-    this.orientation = "vertical";
+    this.disabled = false;
+    this.countAttempt = null;
+    this.title = "end attempt";
   }
   static {
-    this.styles = qti_choice_interaction_styles_default;
-  }
-  #handleSlotChange() {
-    const choices = this.querySelectorAll("qti-simple-choice");
-    this.style.setProperty("--item-count", choices.length.toString());
+    this.styles = qti_end_attempt_interaction_styles_default;
   }
   render() {
-    return html7`
-      <slot part="prompt" name="prompt"></slot>
-      <slot part="slot" @slotchange=${this.#handleSlotChange}></slot>
-      <div part="message" role="alert" id="validation-message"></div>
-    `;
+    return html13`<button ?disabled=${this.disabled} part="button" @click=${this.endAttempt}>${this.title}</button>`;
+  }
+  endAttempt(_) {
+    this.dispatchEvent(new CustomEvent("end-attempt", {
+      bubbles: true,
+      composed: true,
+      detail: { responseIdentifier: this.responseIdentifier, countAttempt: this.countAttempt === "true" }
+    }));
   }
 };
-__decorate11([
-  property10({ type: String })
-], QtiChoiceInteraction.prototype, "orientation", void 0);
+__decorate17([
+  property16({ type: String, attribute: "response-identifier" })
+], QtiEndAttemptInteraction.prototype, "responseIdentifier", void 0);
+__decorate17([
+  property16({ reflect: true, type: Boolean })
+], QtiEndAttemptInteraction.prototype, "disabled", void 0);
+__decorate17([
+  property16({ type: String, attribute: "count-attempt" })
+], QtiEndAttemptInteraction.prototype, "countAttempt", void 0);
+__decorate17([
+  property16({ type: String })
+], QtiEndAttemptInteraction.prototype, "title", void 0);
 
 // ../interactions/extended-text-interaction/dist/qti-extended-text-interaction.js
-import { html as html8 } from "lit";
+import { html as html14 } from "lit";
 import { ifDefined } from "lit/directives/if-defined.js";
-import { property as property11, state as state4 } from "lit/decorators.js";
+import { property as property17, state as state7 } from "lit/decorators.js";
 
 // ../interactions/extended-text-interaction/dist/qti-extended-text-interaction.styles.js
-import { css as css8 } from "lit";
+import { css as css14 } from "lit";
 var qti_extended_text_interaction_styles_default = [
   boxSizing,
-  css8`
+  css14`
     /* PK: display host as block, else design will be collapsed */
     /* 'position: relative' anchors the correction glyph the theme draws over the textarea. */
     :host {
@@ -4874,7 +5793,7 @@ var qti_extended_text_interaction_styles_default = [
 ];
 
 // ../interactions/extended-text-interaction/dist/qti-extended-text-interaction.js
-var __decorate12 = function(decorators, target, key, desc) {
+var __decorate18 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -4994,11 +5913,11 @@ var QtiExtendedTextInteraction = class extends Interaction {
    */
   /** The prompt, above the field. */
   renderPrompt() {
-    return html8`<slot name="prompt"></slot>`;
+    return html14`<slot name="prompt"></slot>`;
   }
   /** The field itself. */
   renderTextarea() {
-    return html8`<textarea
+    return html14`<textarea
       part="textarea"
       name="${this.responseIdentifier}"
       spellcheck="false"
@@ -5019,10 +5938,10 @@ var QtiExtendedTextInteraction = class extends Interaction {
   }
   /** Hidden until `Interaction.reportValidity` shows it. */
   renderValidationMessage() {
-    return html8`<div id="validation-message" part="message" role="alert" style="display:none;"></div>`;
+    return html14`<div id="validation-message" part="message" role="alert" style="display:none;"></div>`;
   }
   render() {
-    return html8`${this.renderPrompt()}${this.renderTextarea()} ${this.renderValidationMessage()}`;
+    return html14`${this.renderPrompt()}${this.renderTextarea()} ${this.renderValidationMessage()}`;
   }
   textChanged(event) {
     if (this.disabled || this.readonly)
@@ -5034,52 +5953,52 @@ var QtiExtendedTextInteraction = class extends Interaction {
     }
   }
 };
-__decorate12([
-  state4()
+__decorate18([
+  state7()
 ], QtiExtendedTextInteraction.prototype, "_rows", void 0);
-__decorate12([
-  property11({ type: Number, attribute: "expected-length" })
+__decorate18([
+  property17({ type: Number, attribute: "expected-length" })
 ], QtiExtendedTextInteraction.prototype, "expectedLength", void 0);
-__decorate12([
-  property11({ type: Number, attribute: "expected-lines" })
+__decorate18([
+  property17({ type: Number, attribute: "expected-lines" })
 ], QtiExtendedTextInteraction.prototype, "expectedLines", void 0);
-__decorate12([
-  property11({ type: String, reflect: true })
+__decorate18([
+  property17({ type: String, reflect: true })
 ], QtiExtendedTextInteraction.prototype, "format", void 0);
-__decorate12([
+__decorate18([
   watch("format")
 ], QtiExtendedTextInteraction.prototype, "_handleFormatChange", void 0);
-__decorate12([
-  property11({ type: String, attribute: "pattern-mask" })
+__decorate18([
+  property17({ type: String, attribute: "pattern-mask" })
 ], QtiExtendedTextInteraction.prototype, "patternMask", void 0);
-__decorate12([
-  property11({ type: String, attribute: "placeholder-text" })
+__decorate18([
+  property17({ type: String, attribute: "placeholder-text" })
 ], QtiExtendedTextInteraction.prototype, "placeholderText", void 0);
-__decorate12([
-  property11({ type: String, attribute: "data-patternmask-message" })
+__decorate18([
+  property17({ type: String, attribute: "data-patternmask-message" })
 ], QtiExtendedTextInteraction.prototype, "dataPatternmaskMessage", void 0);
-__decorate12([
-  property11({ type: String, attribute: "class" })
+__decorate18([
+  property17({ type: String, attribute: "class" })
 ], QtiExtendedTextInteraction.prototype, "classNames", void 0);
-__decorate12([
+__decorate18([
   watch(["classNames", "expectedLines", "expectedLength"])
 ], QtiExtendedTextInteraction.prototype, "_handleRowsInputChange", null);
-__decorate12([
-  property11({ type: String, attribute: "response", reflect: false })
+__decorate18([
+  property17({ type: String, attribute: "response", reflect: false })
 ], QtiExtendedTextInteraction.prototype, "response", void 0);
-__decorate12([
+__decorate18([
   watch("response", { waitUntilFirstUpdate: true })
 ], QtiExtendedTextInteraction.prototype, "_handleResponseChange", void 0);
 
 // ../interactions/gap-match-interaction/dist/qti-gap-match-interaction.js
-import { html as html9 } from "lit";
+import { html as html15 } from "lit";
 
 // ../interactions/gap-match-interaction/dist/qti-gap-match-interaction.styles.js
-import { css as css9 } from "lit";
+import { css as css15 } from "lit";
 var qti_gap_match_interaction_styles_default = [
   boxSizing,
   validationMessage,
-  css9`
+  css15`
     :host {
       display: flex;
       align-items: flex-start;
@@ -5132,7 +6051,7 @@ var QtiGapMatchInteraction = class extends DragDropSlottedSortableMixin(DragDrop
     this.styles = qti_gap_match_interaction_styles_default;
   }
   render() {
-    return html9`<slot name="prompt"> </slot>
+    return html15`<slot name="prompt"> </slot>
       <slot part="drags" name="drags"></slot>
       <slot part="drops"></slot>
       <div role="alert" part="message" id="validation-message"></div>`;
@@ -5140,10 +6059,10 @@ var QtiGapMatchInteraction = class extends DragDropSlottedSortableMixin(DragDrop
 };
 
 // ../interactions/graphic-associate-interaction/dist/qti-graphic-associate-interaction.js
-import { html as html10, nothing as nothing2, svg } from "lit";
-import { property as property12, queryAssignedElements, state as state5 } from "lit/decorators.js";
+import { html as html16, nothing as nothing2, svg } from "lit";
+import { property as property18, queryAssignedElements, state as state8 } from "lit/decorators.js";
 import { ifDefined as ifDefined2 } from "lit/directives/if-defined.js";
-import { repeat as repeat3 } from "lit/directives/repeat.js";
+import { repeat as repeat5 } from "lit/directives/repeat.js";
 
 // ../interactions/core/dist/internal/hotspots/hotspot.js
 function positionShapes(shape, coordsNumber, img, hotspot) {
@@ -5244,11 +6163,11 @@ function positionShapes(shape, coordsNumber, img, hotspot) {
 }
 
 // ../interactions/graphic-associate-interaction/dist/qti-graphic-associate-interaction.styles.js
-import { css as css10 } from "lit";
+import { css as css16 } from "lit";
 var qti_graphic_associate_interaction_styles_default = [
   boxSizing,
   validationMessage,
-  css10`
+  css16`
     /* Containing block for the absolutely positioned hotspots over the image. Was on this host in
        the theme, together with a 'display: block' this component now owns. */
     :host {
@@ -5282,7 +6201,7 @@ var qti_graphic_associate_interaction_styles_default = [
 ];
 
 // ../interactions/graphic-associate-interaction/dist/qti-graphic-associate-interaction.js
-var __decorate13 = function(decorators, target, key, desc) {
+var __decorate19 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -5327,14 +6246,14 @@ var QtiGraphicAssociateInteraction = class extends Interaction {
     return nothing2;
   }
   render() {
-    return html10`<slot name="prompt"></slot>
+    return html16`<slot name="prompt"></slot>
       <line-container>
         <svg
           width=${ifDefined2(this.grImage[0]?.width)}
           height=${ifDefined2(this.grImage[0]?.height)}
           viewbox="0 0 ${this.grImage[0]?.width} ${this.grImage[0]?.height}"
         >
-          ${repeat3(this.#getResponseArray(), (line) => line, (line, index) => svg`
+          ${repeat5(this.#getResponseArray(), (line) => line, (line, index) => svg`
               <line
                 part="line"
                 x1=${parseInt(this.querySelector(`[identifier=${line.split(" ")[0]}]`).style.left)}
@@ -5417,20 +6336,20 @@ var QtiGraphicAssociateInteraction = class extends Interaction {
     this.removeEventListener("qti-register-hotspot", this.#positionHotspotOnRegister);
   }
 };
-__decorate13([
-  state5()
+__decorate19([
+  state8()
 ], QtiGraphicAssociateInteraction.prototype, "startCoord", void 0);
-__decorate13([
-  state5()
+__decorate19([
+  state8()
 ], QtiGraphicAssociateInteraction.prototype, "mouseCoord", void 0);
-__decorate13([
+__decorate19([
   queryAssignedElements({ selector: "img" })
 ], QtiGraphicAssociateInteraction.prototype, "grImage", void 0);
-__decorate13([
-  state5()
+__decorate19([
+  state8()
 ], QtiGraphicAssociateInteraction.prototype, "_response", void 0);
-__decorate13([
-  property12({
+__decorate19([
+  property18({
     attribute: "response",
     reflect: false,
     noAccessor: true,
@@ -5439,14 +6358,14 @@ __decorate13([
 ], QtiGraphicAssociateInteraction.prototype, "response", null);
 
 // ../interactions/graphic-gap-match-interaction/dist/qti-graphic-gap-match-interaction.js
-import { html as html11 } from "lit";
+import { html as html17 } from "lit";
 
 // ../interactions/graphic-gap-match-interaction/dist/qti-graphic-gap-match-interaction.styles.js
-import { css as css11 } from "lit";
+import { css as css17 } from "lit";
 var qti_graphic_gap_match_interaction_styles_default = [
   boxSizing,
   validationMessage,
-  css11`
+  css17`
     :host {
       display: flex;
       align-items: flex-start;
@@ -5513,7 +6432,7 @@ var QtiGraphicGapMatchInteraction = class extends DragDropSlottedSortableMixin(S
     this.styles = qti_graphic_gap_match_interaction_styles_default;
   }
   render() {
-    return html11` <slot name="prompt"></slot>
+    return html17` <slot name="prompt"></slot>
       <slot part="image"></slot>
       <slot part="drags" name="drags" class="hover-border"></slot>
       <div role="alert" part="message" id="validation-message"></div>`;
@@ -5559,14 +6478,14 @@ var QtiGraphicGapMatchInteraction = class extends DragDropSlottedSortableMixin(S
 };
 
 // ../interactions/graphic-order-interaction/dist/qti-graphic-order-interaction.js
-import { html as html12 } from "lit";
+import { html as html18 } from "lit";
 
 // ../interactions/graphic-order-interaction/dist/qti-graphic-order-interaction.styles.js
-import { css as css12 } from "lit";
+import { css as css18 } from "lit";
 var qti_graphic_order_interaction_styles_default = [
   boxSizing,
   validationMessage,
-  css12`
+  css18`
     /* The order pins are anchored outside their hotspot's box. */
     :host {
       /* The box this element already had. See the note in qti-match-interaction.styles.ts. */
@@ -5618,7 +6537,7 @@ var QtiGraphicOrderInteraction = class _QtiGraphicOrderInteraction extends Choic
   }
   static #LOCATOR_CLASS = "cito-graphic-order-marker";
   render() {
-    return html12`
+    return html18`
       <slot name="prompt"></slot>
       <slot></slot>
       <div role="alert" part="message" id="validation-message"></div>
@@ -5705,14 +6624,14 @@ var QtiGraphicOrderInteraction = class _QtiGraphicOrderInteraction extends Choic
 };
 
 // ../interactions/hotspot-interaction/dist/qti-hotspot-interaction.js
-import { html as html13 } from "lit";
+import { html as html19 } from "lit";
 
 // ../interactions/hotspot-interaction/dist/qti-hotspot-interaction.styles.js
-import { css as css13 } from "lit";
+import { css as css19 } from "lit";
 var qti_hotspot_interaction_styles_default = [
   boxSizing,
   validationMessage,
-  css13`
+  css19`
     :host {
       display: block;
     }
@@ -5770,7 +6689,7 @@ var QtiHotspotInteraction = class extends ChoicesMixin(Interaction, "qti-hotspot
     this.styles = qti_hotspot_interaction_styles_default;
   }
   render() {
-    return html13`
+    return html19`
       <slot name="prompt"></slot>
       <slot></slot>
       <div part="message" role="alert" id="validation-message"></div>
@@ -5813,14 +6732,14 @@ var QtiHotspotInteraction = class extends ChoicesMixin(Interaction, "qti-hotspot
 };
 
 // ../interactions/hottext-interaction/dist/qti-hottext-interaction.js
-import { html as html14 } from "lit";
+import { html as html20 } from "lit";
 
 // ../interactions/hottext-interaction/dist/qti-hottext-interaction.styles.js
-import { css as css14 } from "lit";
+import { css as css20 } from "lit";
 var qti_hottext_interaction_styles_default = [
   boxSizing,
   validationMessage,
-  css14`
+  css20`
     /* The box this element already had. See the note in qti-match-interaction.styles.ts. */
     :host {
       display: block;
@@ -5832,7 +6751,7 @@ var qti_hottext_interaction_styles_default = [
 var QtiHottextInteraction = class extends ChoicesMixin(Interaction, "qti-hottext") {
   constructor() {
     super(...arguments);
-    this.render = () => html14`<slot></slot>
+    this.render = () => html20`<slot></slot>
       <div part="message" role="alert" id="validation-message"></div>`;
   }
   static {
@@ -5841,9 +6760,9 @@ var QtiHottextInteraction = class extends ChoicesMixin(Interaction, "qti-hottext
 };
 
 // ../interactions/inline-choice-interaction/dist/qti-inline-choice-interaction.js
-import { html as html15 } from "lit";
-import { property as property13, state as state6 } from "lit/decorators.js";
-import { consume as consume3 } from "@lit/context";
+import { html as html21 } from "lit";
+import { property as property19, state as state9 } from "lit/decorators.js";
+import { consume as consume5 } from "@lit/context";
 
 // ../interactions/core/dist/mixins/menu-auto-size/menu-auto-size.mixin.js
 var MenuAutoSizeMixin = (superClass, menuSelector = "[part='menu']", triggerSelector = "[part='trigger']", customProperty = "--qti-inline-choice-width") => {
@@ -6030,8 +6949,8 @@ var MenuAutoSizeMixin = (superClass, menuSelector = "[part='menu']", triggerSele
 };
 
 // ../interactions/inline-choice-interaction/dist/qti-inline-choice-interaction.styles.js
-import { css as css15 } from "lit";
-var own = css15`
+import { css as css21 } from "lit";
+var own = css21`
   /* ── Host ──────────────────────────────────────────────────────────────────
      Inline-block so the element flows with surrounding text.
      --qti-inline-choice-width is the single width control surface:
@@ -6213,11 +7132,11 @@ var own = css15`
     white-space: nowrap;
   }
 `;
-var styles = own;
-var qti_inline_choice_interaction_styles_default = styles;
+var styles2 = own;
+var qti_inline_choice_interaction_styles_default = styles2;
 
 // ../interactions/inline-choice-interaction/dist/qti-inline-choice-interaction.js
-var __decorate14 = function(decorators, target, key, desc) {
+var __decorate20 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6325,7 +7244,7 @@ var QtiInlineChoiceInteraction = class extends MenuAutoSizeMixin(Interaction) {
   /** The closed combobox — the box showing the chosen option. */
   renderTrigger() {
     const selected = this.#selectedOption();
-    return html15`
+    return html21`
       <button
         part="trigger"
         type="button"
@@ -6349,7 +7268,7 @@ var QtiInlineChoiceInteraction = class extends MenuAutoSizeMixin(Interaction) {
   }
   /** The popover listbox. */
   renderMenu() {
-    return html15`
+    return html21`
       <div
         id="${this._menuId}"
         part="menu"
@@ -6373,10 +7292,10 @@ var QtiInlineChoiceInteraction = class extends MenuAutoSizeMixin(Interaction) {
   }
   /** Hidden until `Interaction.reportValidity` shows it. */
   renderValidationMessage() {
-    return html15`<div id="validation-message" part="message" role="alert" style="display:none;"></div>`;
+    return html21`<div id="validation-message" part="message" role="alert" style="display:none;"></div>`;
   }
   render() {
-    return html15` ${this.renderTrigger()} ${this.renderMenu()} ${this.renderValidationMessage()} `;
+    return html21` ${this.renderTrigger()} ${this.renderMenu()} ${this.renderValidationMessage()} `;
   }
   async connectedCallback() {
     super.connectedCallback();
@@ -6587,24 +7506,24 @@ var QtiInlineChoiceInteraction = class extends MenuAutoSizeMixin(Interaction) {
     return [...promptOption ? [promptOption] : [], ...slottedChoices];
   }
 };
-__decorate14([
-  state6()
+__decorate20([
+  state9()
 ], QtiInlineChoiceInteraction.prototype, "options", void 0);
-__decorate14([
-  state6()
+__decorate20([
+  state9()
 ], QtiInlineChoiceInteraction.prototype, "_dropdownOpen", void 0);
-__decorate14([
-  consume3({ context: configContext, subscribe: true }),
-  property13({ attribute: false })
+__decorate20([
+  consume5({ context: configContext, subscribe: true }),
+  property19({ attribute: false })
 ], QtiInlineChoiceInteraction.prototype, "configContext", void 0);
-__decorate14([
-  property13({ type: String, attribute: "data-prompt" })
+__decorate20([
+  property19({ type: String, attribute: "data-prompt" })
 ], QtiInlineChoiceInteraction.prototype, "dataPrompt", void 0);
-__decorate14([
+__decorate20([
   watch("dataPrompt", { waitUntilFirstUpdate: true })
 ], QtiInlineChoiceInteraction.prototype, "_handleDataPromptChange", void 0);
-__decorate14([
-  property13({
+__decorate20([
+  property19({
     type: Boolean,
     reflect: true,
     converter: {
@@ -6614,26 +7533,26 @@ __decorate14([
     }
   })
 ], QtiInlineChoiceInteraction.prototype, "required", void 0);
-__decorate14([
-  property13({ type: Number, attribute: "min-choices" })
+__decorate20([
+  property19({ type: Number, attribute: "min-choices" })
 ], QtiInlineChoiceInteraction.prototype, "minChoices", void 0);
-__decorate14([
+__decorate20([
   watch(["required", "minChoices"], { waitUntilFirstUpdate: true })
 ], QtiInlineChoiceInteraction.prototype, "_handleRequiredChange", void 0);
-__decorate14([
-  property13({ attribute: "response", reflect: false, noAccessor: true })
+__decorate20([
+  property19({ attribute: "response", reflect: false, noAccessor: true })
 ], QtiInlineChoiceInteraction.prototype, "response", null);
 
 // ../interactions/match-interaction/dist/qti-match-interaction.js
-import { html as html16, nothing as nothing3 } from "lit";
-import { property as property14, state as state7 } from "lit/decorators.js";
+import { html as html22, nothing as nothing3 } from "lit";
+import { property as property20, state as state10 } from "lit/decorators.js";
 
 // ../interactions/match-interaction/dist/qti-match-interaction.styles.js
-import { css as css16 } from "lit";
+import { css as css22 } from "lit";
 var qti_match_interaction_styles_default = [
   boxSizing,
   validationMessage,
-  css16`
+  css22`
     /*
      * A custom element is inline unless it says otherwise, and this one never did. Its shadow content
      * is block-level, so block-in-inline generated the anonymous block boxes and it looked correct —
@@ -6743,10 +7662,10 @@ var qti_match_interaction_styles_default = [
 ];
 
 // ../interactions/match-interaction/dist/qti-match-interaction-tabular.styles.js
-import { css as css17 } from "lit";
+import { css as css23 } from "lit";
 var qti_match_interaction_tabular_styles_default = [
   boxSizing,
-  css17`
+  css23`
     :host(.qti-match-tabular) slot:not([hidden]) {
       display: contents;
     }
@@ -6806,7 +7725,7 @@ var qti_match_interaction_tabular_styles_default = [
 ];
 
 // ../interactions/match-interaction/dist/qti-match-interaction.js
-var __decorate15 = function(decorators, target, key, desc) {
+var __decorate21 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -6949,11 +7868,11 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(DragDropSlo
   }
   render() {
     const isTabular = this.class.split(" ").includes("qti-match-tabular");
-    return html16`
+    return html22`
       <slot name="prompt"></slot>
       <slot ?hidden=${isTabular}></slot>
 
-      ${isTabular ? html16`
+      ${isTabular ? html22`
             <div
               part="grid"
               role="grid"
@@ -6963,7 +7882,7 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(DragDropSlo
               <div part="cols-wrap" role="row"><slot name="match-cols" part="c-header"></slot></div>
               <div part="rows-wrap"><slot name="match-rows" part="r-header"></slot></div>
               <div part="checkbox-grid">
-                ${this.sourceChoices.map((row, r) => html16`
+                ${this.sourceChoices.map((row, r) => html22`
                     <div role="row" style="display: contents;">
                       ${this.targetChoices.map((col, c) => {
       const rowId = row.getAttribute("identifier");
@@ -6977,7 +7896,7 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(DragDropSlo
       const controlPart = `control ${type} ${checkedMarker} ${stateVariant}`.trim();
       const controlMarkPart = `control-mark ${type} ${checkedMarker} ${stateVariant}`.trim();
       const disable = row.matchMax === 1 ? false : row.matchMax !== 0 && selectedInRowCount >= row.matchMax && !checked;
-      return html16`
+      return html22`
                           <label
                             part="input-cell"
                             role="gridcell"
@@ -7009,28 +7928,99 @@ var QtiMatchInteraction = class extends DragDropSlottedSortableMixin(DragDropSlo
     `;
   }
 };
-__decorate15([
-  property14({ type: String })
+__decorate21([
+  property20({ type: String })
 ], QtiMatchInteraction.prototype, "class", void 0);
-__decorate15([
-  state7()
+__decorate21([
+  state10()
 ], QtiMatchInteraction.prototype, "_response", void 0);
-__decorate15([
-  property14({ type: String, attribute: "response-identifier" })
+__decorate21([
+  property20({ type: String, attribute: "response-identifier" })
 ], QtiMatchInteraction.prototype, "responseIdentifier", void 0);
 
+// ../interactions/media-interaction/dist/qti-media-interaction.js
+import { html as html23 } from "lit";
+
+// ../interactions/media-interaction/dist/qti-media-interaction.styles.js
+import { css as css24 } from "lit";
+var qti_media_interaction_styles_default = [
+  boxSizing,
+  css24`
+    /* The box this element already had. See the note in qti-match-interaction.styles.ts. */
+    :host {
+      display: block;
+    }
+  `
+];
+
+// ../interactions/media-interaction/dist/qti-media-interaction.js
+var QtiMediaInteraction = class extends Interaction {
+  static {
+    this.styles = qti_media_interaction_styles_default;
+  }
+  #value = null;
+  reset() {
+    this.#value = null;
+  }
+  validate() {
+    return true;
+  }
+  get response() {
+    return this.#value ? this.#value.toString() : null;
+  }
+  set response(val) {
+    if (val) {
+      const isNumber = !isNaN(parseInt(val?.toString()));
+      if (isNumber) {
+        this.#value = parseInt(val.toString());
+      } else {
+        throw new Error(`Value must be a number ${val}`);
+      }
+    }
+  }
+  static get properties() {
+    return {
+      ...Interaction.properties,
+      ...{
+        step: {
+          type: Number,
+          attribute: "step",
+          default: 10
+        }
+      }
+    };
+  }
+  render() {
+    return html23` <slot name="prompt"></slot>
+      <slot></slot>`;
+  }
+  constructor() {
+    super();
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const mediaObject = this.querySelector("audio") || this.querySelector("video") || this.querySelector("object");
+    if (mediaObject) {
+      mediaObject.addEventListener("ended", () => {
+        this.#value++;
+        this.saveResponse(this.value);
+      });
+    }
+  }
+};
+
 // ../interactions/order-interaction/dist/qti-order-interaction.js
-import { html as html17 } from "lit";
-import { repeat as repeat4 } from "lit/directives/repeat.js";
-import { property as property15, state as state8 } from "lit/decorators.js";
+import { html as html24 } from "lit";
+import { repeat as repeat6 } from "lit/directives/repeat.js";
+import { property as property21, state as state11 } from "lit/decorators.js";
 
 // ../interactions/order-interaction/dist/qti-order-interaction.styles.js
-import { css as css18 } from "lit";
+import { css as css25 } from "lit";
 var qti_order_interaction_styles_default = [
   boxSizing,
   validationMessage,
   dropRegion,
-  css18`
+  css25`
     /* The box this element already had. See the note in qti-match-interaction.styles.ts. */
     :host {
       display: block;
@@ -7244,7 +8234,7 @@ var qti_order_interaction_styles_default = [
 ];
 
 // ../interactions/order-interaction/dist/qti-order-interaction.js
-var __decorate16 = function(decorators, target, key, desc) {
+var __decorate22 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -7264,15 +8254,15 @@ var QtiOrderInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
     if (this.nrChoices < choices.length) {
       this.nrChoices = choices.length;
     }
-    return html17` <slot name="prompt"> </slot>
+    return html24` <slot name="prompt"> </slot>
       <div part="container">
         <slot part="drags"> </slot>
         <div part="drops">
           ${[...Array(this.nrChoices)].map((_, i) => {
       const identifier = `droplist${i}`;
       const drags = this._dragDrop?.nodesByTarget?.[identifier] ?? [];
-      return html17`<div role="region" part="drop" data-declarative-drops identifier=${identifier}>
-              ${repeat4(drags, (node) => node.getAttribute("identifier"), (node) => node)}
+      return html24`<div role="region" part="drop" data-declarative-drops identifier=${identifier}>
+              ${repeat6(drags, (node) => node.getAttribute("identifier"), (node) => node)}
             </div>`;
     })}
         </div>
@@ -7303,23 +8293,23 @@ var QtiOrderInteraction = class extends DragDropSlottedSortableMixin(SlottedBase
     this.childrenMap = Array.from(this.querySelectorAll("qti-simple-choice"));
   }
 };
-__decorate16([
-  state8()
+__decorate22([
+  state11()
 ], QtiOrderInteraction.prototype, "nrChoices", void 0);
-__decorate16([
-  property15({ type: String })
+__decorate22([
+  property21({ type: String })
 ], QtiOrderInteraction.prototype, "orientation", void 0);
 
 // ../interactions/portable-custom-interaction/dist/qti-portable-custom-interaction.js
-import { css as css20, html as html18 } from "lit";
-import { property as property16, state as state9 } from "lit/decorators.js";
-import { consume as consume4 } from "@lit/context";
+import { css as css27, html as html25 } from "lit";
+import { property as property22, state as state12 } from "lit/decorators.js";
+import { consume as consume6 } from "@lit/context";
 
 // ../interactions/portable-custom-interaction/dist/qti-portable-custom-interaction.styles.js
-import { css as css19 } from "lit";
+import { css as css26 } from "lit";
 var qti_portable_custom_interaction_styles_default = [
   boxSizing,
-  css19`
+  css26`
     :host {
       display: block;
       width: 100%;
@@ -7333,7 +8323,7 @@ var qti_portable_custom_interaction_styles_default = [
 ];
 
 // ../interactions/portable-custom-interaction/dist/qti-portable-custom-interaction.js
-var __decorate17 = function(decorators, target, key, desc) {
+var __decorate23 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -7420,30 +8410,30 @@ var QtiPortableCustomInteraction = class extends Interaction {
             this.#pciCustomValidityMessage = pciCustomValidity;
           }
           const stateRaw = data?.params?.state;
-          let state11;
+          let state14;
           if (stateRaw === void 0) {
-            state11 = void 0;
+            state14 = void 0;
           } else if (stateRaw === null) {
-            state11 = null;
+            state14 = null;
           } else if (typeof stateRaw === "string") {
-            state11 = stateRaw;
+            state14 = stateRaw;
           } else {
             try {
-              state11 = `__qti_json__::${JSON.stringify(stateRaw)}`;
+              state14 = `__qti_json__::${JSON.stringify(stateRaw)}`;
             } catch {
-              state11 = null;
+              state14 = null;
             }
           }
           if (converted === null) {
             const emptyResponse = this.responseVariable?.cardinality === "single" ? "" : [];
             this.response = emptyResponse;
             this.validate();
-            this.saveResponse(emptyResponse, state11);
+            this.saveResponse(emptyResponse, state14);
             break;
           }
           this.response = converted;
           this.validate();
-          this.saveResponse(converted, state11);
+          this.saveResponse(converted, state14);
           break;
         }
         case "error":
@@ -7458,7 +8448,7 @@ var QtiPortableCustomInteraction = class extends Interaction {
   static {
     this.styles = [
       qti_portable_custom_interaction_styles_default,
-      css20`
+      css27`
       :host {
         display: block;
         width: 100%;
@@ -9022,65 +10012,156 @@ var QtiPortableCustomInteraction = class extends Interaction {
   // Add this property to store the previous state
   #previousState;
   render() {
-    return html18`
+    return html25`
       <slot></slot>
-      ${this._errorMessage ? html18`<div style="color:red">
+      ${this._errorMessage ? html25`<div style="color:red">
             <h1>Error</h1>
             ${this._errorMessage}
           </div>` : ""}
     `;
   }
 };
-__decorate17([
-  property16({ type: String, attribute: "module" })
+__decorate23([
+  property22({ type: String, attribute: "module" })
 ], QtiPortableCustomInteraction.prototype, "module", void 0);
-__decorate17([
-  property16({ type: String, attribute: "custom-interaction-type-identifier" })
+__decorate23([
+  property22({ type: String, attribute: "custom-interaction-type-identifier" })
 ], QtiPortableCustomInteraction.prototype, "customInteractionTypeIdentifier", void 0);
-__decorate17([
-  property16({ type: String, attribute: "data-require-paths" })
+__decorate23([
+  property22({ type: String, attribute: "data-require-paths" })
 ], QtiPortableCustomInteraction.prototype, "requirePathsJson", void 0);
-__decorate17([
-  property16({ type: String, attribute: "data-require-shim" })
+__decorate23([
+  property22({ type: String, attribute: "data-require-shim" })
 ], QtiPortableCustomInteraction.prototype, "requireShimJson", void 0);
-__decorate17([
-  property16({ type: String, attribute: "data-require-js-url" })
+__decorate23([
+  property22({ type: String, attribute: "data-require-js-url" })
 ], QtiPortableCustomInteraction.prototype, "requireJsUrl", void 0);
-__decorate17([
-  property16({ type: String, attribute: "data-base-url" })
+__decorate23([
+  property22({ type: String, attribute: "data-base-url" })
 ], QtiPortableCustomInteraction.prototype, "baseUrl", void 0);
-__decorate17([
-  property16({ type: Boolean, attribute: "data-use-default-paths" })
+__decorate23([
+  property22({ type: Boolean, attribute: "data-use-default-paths" })
 ], QtiPortableCustomInteraction.prototype, "useDefaultPaths", void 0);
-__decorate17([
-  property16({ type: String, attribute: "data-status" })
+__decorate23([
+  property22({ type: String, attribute: "data-status" })
 ], QtiPortableCustomInteraction.prototype, "status", void 0);
-__decorate17([
-  state9()
+__decorate23([
+  state12()
 ], QtiPortableCustomInteraction.prototype, "_errorMessage", void 0);
-__decorate17([
-  consume4({ context: itemContext, subscribe: true }),
-  state9()
+__decorate23([
+  consume6({ context: itemContext, subscribe: true }),
+  state12()
 ], QtiPortableCustomInteraction.prototype, "context", void 0);
-__decorate17([
-  consume4({ context: qtiContext, subscribe: true }),
-  state9()
+__decorate23([
+  consume6({ context: qtiContext, subscribe: true }),
+  state12()
 ], QtiPortableCustomInteraction.prototype, "qtiContext", void 0);
-__decorate17([
-  property16({ attribute: "response", reflect: false, converter: responseAttributeConverter({ emptyAs: null }) })
+__decorate23([
+  property22({ attribute: "response", reflect: false, converter: responseAttributeConverter({ emptyAs: null }) })
 ], QtiPortableCustomInteraction.prototype, "response", void 0);
 
+// ../interactions/position-object-interaction/dist/qti-position-object-interaction.js
+import { LitElement as LitElement12, html as html26 } from "lit";
+
+// ../interactions/position-object-interaction/dist/qti-position-object-interaction.styles.js
+import { css as css28 } from "lit";
+var qti_position_object_interaction_styles_default = [
+  boxSizing,
+  css28`
+    :host {
+      display: block;
+    }
+    ::slotted(img) {
+      position: absolute;
+      cursor: move;
+      user-select: none;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  `
+];
+
+// ../interactions/position-object-interaction/dist/qti-position-object-interaction.js
+var QtiPositionObjectInteraction = class extends LitElement12 {
+  static {
+    this.styles = qti_position_object_interaction_styles_default;
+  }
+  render() {
+    return html26`<slot></slot>`;
+  }
+};
+
+// ../interactions/position-object-interaction/dist/qti-position-object-stage.js
+import { LitElement as LitElement13, html as html27 } from "lit";
+
+// ../interactions/position-object-interaction/dist/qti-position-object-stage.styles.js
+import { css as css29 } from "lit";
+var qti_position_object_stage_styles_default = [
+  boxSizing,
+  css29`
+    :host {
+      display: inline-block;
+      position: relative;
+    }
+  `
+];
+
+// ../interactions/position-object-interaction/dist/qti-position-object-stage.js
+var QtiPositionObjectStage = class extends LitElement13 {
+  static {
+    this.styles = qti_position_object_stage_styles_default;
+  }
+  render() {
+    return html27`<slot></slot>`;
+  }
+  constructor() {
+    super();
+    this.removeMoveListener = this.removeMoveListener.bind(this);
+    this.dragElementHandler = this.dragElementHandler.bind(this);
+  }
+  // Define a function to handle the mousemove event on the draggable element
+  dragElementHandler(event) {
+    event.preventDefault();
+    const deltaX = event.clientX - this.startX;
+    const deltaY = event.clientY - this.startY;
+    this.dragElement.style.left = this.dragElement.offsetLeft + deltaX + "px";
+    this.dragElement.style.top = this.dragElement.offsetTop + deltaY + "px";
+    this.startX = event.clientX;
+    this.startY = event.clientY;
+  }
+  firstUpdated(a) {
+    super.firstUpdated(a);
+    this.dragElement = this.querySelector("qti-position-object-interaction>img");
+    this.startX = 0;
+    this.startY = 0;
+    this.dragElement.addEventListener("mousedown", (event) => {
+      this.startX = event.clientX;
+      this.startY = event.clientY;
+      document.addEventListener("mousemove", this.dragElementHandler, true);
+    });
+    document.addEventListener("mouseup", this.removeMoveListener);
+  }
+  removeMoveListener() {
+    document.removeEventListener("mousemove", this.dragElementHandler, true);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("mousemove", this.dragElementHandler);
+    document.removeEventListener("mouseup", this.removeMoveListener);
+  }
+};
+
 // ../interactions/select-point-interaction/dist/qti-select-point-interaction.js
-import { html as html19, nothing as nothing4 } from "lit";
-import { property as property17, state as state10 } from "lit/decorators.js";
-import { repeat as repeat5 } from "lit/directives/repeat.js";
+import { html as html28, nothing as nothing4 } from "lit";
+import { property as property23, state as state13 } from "lit/decorators.js";
+import { repeat as repeat7 } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 // ../interactions/select-point-interaction/dist/qti-select-point-interaction.styles.js
-import { css as css21 } from "lit";
+import { css as css30 } from "lit";
 var qti_select_point_interaction_styles_default = [
   boxSizing,
-  css21`
+  css30`
     :host {
       display: block;
       --qti-select-point-marker-size: 1.5rem;
@@ -9119,7 +10200,7 @@ var qti_select_point_interaction_styles_default = [
 ];
 
 // ../interactions/select-point-interaction/dist/qti-select-point-interaction.js
-var __decorate18 = function(decorators, target, key, desc) {
+var __decorate24 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -9224,12 +10305,12 @@ var QtiSelectPointInteraction = class extends Interaction {
     return nothing4;
   }
   /** Positions overlay elements that carry `data-coord` and `data-shape`. */
-  positionOverlayElements(elements17) {
+  positionOverlayElements(elements32) {
     const img = this.#imgElement;
     if (!img)
       return;
     this.#calculateScale();
-    for (const element of elements17) {
+    for (const element of elements32) {
       const coords = element.dataset.coord;
       const shape = element.dataset.shape;
       if (!coords || !shape)
@@ -9240,13 +10321,13 @@ var QtiSelectPointInteraction = class extends Interaction {
   render() {
     const rawResponse = this.response;
     const responseList = Array.isArray(rawResponse) ? rawResponse : rawResponse ? [rawResponse] : [];
-    return html19` <slot name="prompt"></slot>
+    return html28` <slot name="prompt"></slot>
       <point-container>
-        ${repeat5(responseList.filter((point) => point), (point) => point, (point, index) => {
+        ${repeat7(responseList.filter((point) => point), (point) => point, (point, index) => {
       const [x, y] = point.split(" ").map(Number);
       const leftPercentage = x / (this.#imageWidthOriginal || 1) * 100;
       const topPercentage = y / (this.#imageHeightOriginal || 1) * 100;
-      return html19`
+      return html28`
               <button
                 part=${this.pointPart(point, index)}
                 style=${styleMap({
@@ -9313,20 +10394,20 @@ var QtiSelectPointInteraction = class extends Interaction {
     }
   }
 };
-__decorate18([
-  property17({
+__decorate24([
+  property23({
     type: Number,
     attribute: "max-choices"
   })
 ], QtiSelectPointInteraction.prototype, "maxChoices", void 0);
-__decorate18([
-  property17({
+__decorate24([
+  property23({
     type: Number,
     attribute: "min-choices"
   })
 ], QtiSelectPointInteraction.prototype, "minChoices", void 0);
-__decorate18([
-  property17({
+__decorate24([
+  property23({
     attribute: "response",
     reflect: false,
     converter: {
@@ -9342,25 +10423,25 @@ __decorate18([
     }
   })
 ], QtiSelectPointInteraction.prototype, "response", void 0);
-__decorate18([
-  property17({ attribute: "area-mappings" })
+__decorate24([
+  property23({ attribute: "area-mappings" })
 ], QtiSelectPointInteraction.prototype, "areaMappings", void 0);
-__decorate18([
-  state10()
+__decorate24([
+  state13()
 ], QtiSelectPointInteraction.prototype, "_areaEntries", void 0);
-__decorate18([
+__decorate24([
   watch("areaMappings")
 ], QtiSelectPointInteraction.prototype, "_handleAreaMappingsChange", void 0);
 
 // ../interactions/slider-interaction/dist/qti-slider-interaction.js
-import { html as html20, nothing as nothing5 } from "lit";
-import { property as property18, query as query2 } from "lit/decorators.js";
+import { html as html29, nothing as nothing5 } from "lit";
+import { property as property24, query as query2 } from "lit/decorators.js";
 
 // ../interactions/slider-interaction/dist/qti-slider-interaction.styles.js
-import { css as css22 } from "lit";
+import { css as css31 } from "lit";
 var qti_slider_interaction_styles_default = [
   boxSizing,
-  css22`
+  css31`
     :host {
       display: block;
       --show-bounds: true;
@@ -9432,7 +10513,7 @@ var qti_slider_interaction_styles_default = [
 ];
 
 // ../interactions/slider-interaction/dist/qti-slider-interaction.js
-var __decorate19 = function(decorators, target, key, desc) {
+var __decorate25 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -9489,7 +10570,7 @@ var QtiSliderInteraction = class extends Interaction {
     this.requestUpdate();
   }
   render() {
-    return html20`
+    return html29`
       <slot name="prompt"></slot>
       <div id="slider" part="slider">
         <div id="bounds" part="bounds">
@@ -9545,33 +10626,33 @@ var QtiSliderInteraction = class extends Interaction {
     this.dispatchEvent(new Event("change", { bubbles: true }));
   }
 };
-__decorate19([
+__decorate25([
   query2("#rail")
 ], QtiSliderInteraction.prototype, "_rail", void 0);
-__decorate19([
-  property18({ type: Number, attribute: "lower-bound" })
+__decorate25([
+  property24({ type: Number, attribute: "lower-bound" })
 ], QtiSliderInteraction.prototype, "min", void 0);
-__decorate19([
-  property18({ type: Number, attribute: "upper-bound" })
+__decorate25([
+  property24({ type: Number, attribute: "upper-bound" })
 ], QtiSliderInteraction.prototype, "max", void 0);
-__decorate19([
-  property18({ type: Number, attribute: "step" })
+__decorate25([
+  property24({ type: Number, attribute: "step" })
 ], QtiSliderInteraction.prototype, "step", void 0);
-__decorate19([
-  property18({ attribute: "response", reflect: false, noAccessor: true })
+__decorate25([
+  property24({ attribute: "response", reflect: false, noAccessor: true })
 ], QtiSliderInteraction.prototype, "response", null);
 
 // ../interactions/text-entry-interaction/dist/qti-text-entry-interaction.js
-import { html as html21 } from "lit";
-import { property as property19, query as query3 } from "lit/decorators.js";
+import { html as html30 } from "lit";
+import { property as property25, query as query3 } from "lit/decorators.js";
 import { ifDefined as ifDefined3 } from "lit/directives/if-defined.js";
 import { createRef } from "lit/directives/ref.js";
 
 // ../interactions/text-entry-interaction/dist/qti-text-entry-interaction.styles.js
-import { css as css23 } from "lit";
+import { css as css32 } from "lit";
 var qti_text_entry_interaction_styles_default = [
   boxSizing,
-  css23`
+  css32`
     :host {
       display: inline-flex;
       align-items: center;
@@ -9664,7 +10745,7 @@ var qti_text_entry_interaction_styles_default = [
 ];
 
 // ../interactions/text-entry-interaction/dist/qti-text-entry-interaction.js
-var __decorate20 = function(decorators, target, key, desc) {
+var __decorate26 = function(decorators, target, key, desc) {
   var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
   if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
   else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
@@ -9723,11 +10804,11 @@ var QtiTextEntryInteraction = class extends Interaction {
    */
   /** The answer-key line, revealed above the field when the correct response is shown. */
   renderAnswer() {
-    return html21`<div part="answer" aria-hidden="true"></div>`;
+    return html30`<div part="answer" aria-hidden="true"></div>`;
   }
   /** The field itself. */
   renderInput() {
-    return html21`<input
+    return html30`<input
       part="input"
       name="${this.responseIdentifier}"
       spellcheck="false"
@@ -9749,10 +10830,10 @@ var QtiTextEntryInteraction = class extends Interaction {
   }
   /** Hidden until `Interaction.reportValidity` shows it. */
   renderValidationMessage() {
-    return html21`<div id="validation-message" part="message" role="alert" style="display:none;"></div>`;
+    return html30`<div id="validation-message" part="message" role="alert" style="display:none;"></div>`;
   }
   render() {
-    return html21` ${this.renderAnswer()} ${this.renderInput()} ${this.renderValidationMessage()} `;
+    return html30` ${this.renderAnswer()} ${this.renderInput()} ${this.renderValidationMessage()} `;
   }
   textChanged(event) {
     if (this.disabled || this.readonly)
@@ -9771,63 +10852,197 @@ var QtiTextEntryInteraction = class extends Interaction {
     this.response = "";
   }
 };
-__decorate20([
-  property19({ type: Number, attribute: "expected-length" })
+__decorate26([
+  property25({ type: Number, attribute: "expected-length" })
 ], QtiTextEntryInteraction.prototype, "expectedLength", void 0);
-__decorate20([
-  property19({ type: String, attribute: "pattern-mask" })
+__decorate26([
+  property25({ type: String, attribute: "pattern-mask" })
 ], QtiTextEntryInteraction.prototype, "patternMask", void 0);
-__decorate20([
-  property19({ type: String, attribute: "placeholder-text" })
+__decorate26([
+  property25({ type: String, attribute: "placeholder-text" })
 ], QtiTextEntryInteraction.prototype, "placeholderText", void 0);
-__decorate20([
-  property19({ type: String, attribute: "data-patternmask-message" })
+__decorate26([
+  property25({ type: String, attribute: "data-patternmask-message" })
 ], QtiTextEntryInteraction.prototype, "dataPatternmaskMessage", void 0);
-__decorate20([
-  property19({ type: String, attribute: "response", reflect: false })
+__decorate26([
+  property25({ type: String, attribute: "response", reflect: false })
 ], QtiTextEntryInteraction.prototype, "response", void 0);
-__decorate20([
+__decorate26([
   query3("input")
 ], QtiTextEntryInteraction.prototype, "_input", void 0);
-__decorate20([
+__decorate26([
   watch("response", { waitUntilFirstUpdate: true })
 ], QtiTextEntryInteraction.prototype, "_handleValueChange", void 0);
 
+// ../interactions/upload-interaction/dist/qti-upload-interaction.js
+import { html as html31 } from "lit";
+
+// ../interactions/upload-interaction/dist/qti-upload-interaction.styles.js
+import { css as css33 } from "lit";
+var qti_upload_interaction_styles_default = [
+  boxSizing,
+  css33`
+    :host {
+      display: block;
+      margin: 1em 0;
+    }
+    input[type='file'] {
+      display: block;
+      margin-top: 0.5em;
+    }
+  `
+];
+
+// ../interactions/upload-interaction/dist/qti-upload-interaction.js
+var QtiUploadInteraction = class extends Interaction {
+  static {
+    this.styles = qti_upload_interaction_styles_default;
+  }
+  #file = null;
+  #base64 = null;
+  reset() {
+    this.#file = null;
+    this.#base64 = null;
+    this.saveResponse(null);
+  }
+  validate() {
+    return this.#base64 !== null;
+  }
+  get response() {
+    return this.#base64;
+  }
+  set response(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 html31`
+      <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);
+    });
+  }
+};
+
+// ../interactions/core/dist/elements/qti-associable-hotspot/elements.js
+var elements = [{ tag: "qti-associable-hotspot", ctor: QtiAssociableHotspot }];
+
+// ../interactions/core/dist/elements/qti-gap/elements.js
+var elements2 = [{ tag: "qti-gap", ctor: QtiGap }];
+
+// ../interactions/core/dist/elements/qti-gap-img/elements.js
+var elements3 = [{ tag: "qti-gap-img", ctor: QtiGapImg }];
+
+// ../interactions/core/dist/elements/qti-gap-text/elements.js
+var elements4 = [{ tag: "qti-gap-text", ctor: QtiGapText }];
+
+// ../interactions/core/dist/elements/qti-hotspot-choice/elements.js
+var elements5 = [{ tag: "qti-hotspot-choice", ctor: QtiHotspotChoice }];
+
+// ../interactions/core/dist/elements/qti-hottext/elements.js
+var elements6 = [{ tag: "qti-hottext", ctor: QtiHottext }];
+
+// ../interactions/core/dist/elements/qti-inline-choice/elements.js
+var elements7 = [{ tag: "qti-inline-choice", ctor: QtiInlineChoice }];
+
+// ../interactions/core/dist/elements/qti-prompt/elements.js
+var elements8 = [{ tag: "qti-prompt", ctor: QtiPrompt }];
+
+// ../interactions/core/dist/elements/qti-simple-associable-choice/elements.js
+var elements9 = [{ tag: "qti-simple-associable-choice", ctor: QtiSimpleAssociableChoice }];
+
+// ../interactions/core/dist/elements/qti-simple-choice/elements.js
+var elements10 = [{ tag: "qti-simple-choice", ctor: QtiSimpleChoice }];
+
+// ../interactions/core/dist/elements.js
+var qtiInteractionCoreElements = [
+  ...elements,
+  ...elements2,
+  ...elements3,
+  ...elements4,
+  ...elements5,
+  ...elements6,
+  ...elements7,
+  ...elements8,
+  ...elements9,
+  ...elements10
+];
+
 // ../interactions/associate-interaction/dist/elements.js
-var elements = [{ tag: "qti-associate-interaction", ctor: QtiAssociateInteraction }];
+var elements11 = [{ tag: "qti-associate-interaction", ctor: QtiAssociateInteraction }];
 
 // ../interactions/choice-interaction/dist/elements.js
-var elements2 = [{ tag: "qti-choice-interaction", ctor: QtiChoiceInteraction }];
+var elements12 = [{ tag: "qti-choice-interaction", ctor: QtiChoiceInteraction }];
+
+// ../interactions/custom-interaction/dist/elements.js
+var elements13 = [{ tag: "qti-custom-interaction", ctor: QtiCustomInteraction }];
+
+// ../interactions/end-attempt-interaction/dist/elements.js
+var elements14 = [{ tag: "qti-end-attempt-interaction", ctor: QtiEndAttemptInteraction }];
 
 // ../interactions/extended-text-interaction/dist/elements.js
-var elements3 = [{ tag: "qti-extended-text-interaction", ctor: QtiExtendedTextInteraction }];
+var elements15 = [{ tag: "qti-extended-text-interaction", ctor: QtiExtendedTextInteraction }];
 
 // ../interactions/gap-match-interaction/dist/elements.js
-var elements4 = [{ tag: "qti-gap-match-interaction", ctor: QtiGapMatchInteraction }];
+var elements16 = [{ tag: "qti-gap-match-interaction", ctor: QtiGapMatchInteraction }];
 
 // ../interactions/graphic-associate-interaction/dist/elements.js
-var elements5 = [{ tag: "qti-graphic-associate-interaction", ctor: QtiGraphicAssociateInteraction }];
+var elements17 = [{ tag: "qti-graphic-associate-interaction", ctor: QtiGraphicAssociateInteraction }];
 
 // ../interactions/graphic-gap-match-interaction/dist/elements.js
-var elements6 = [{ tag: "qti-graphic-gap-match-interaction", ctor: QtiGraphicGapMatchInteraction }];
+var elements18 = [{ tag: "qti-graphic-gap-match-interaction", ctor: QtiGraphicGapMatchInteraction }];
 
 // ../interactions/graphic-order-interaction/dist/elements.js
-var elements7 = [{ tag: "qti-graphic-order-interaction", ctor: QtiGraphicOrderInteraction }];
+var elements19 = [{ tag: "qti-graphic-order-interaction", ctor: QtiGraphicOrderInteraction }];
 
 // ../interactions/hotspot-interaction/dist/elements.js
-var elements8 = [{ tag: "qti-hotspot-interaction", ctor: QtiHotspotInteraction }];
+var elements20 = [{ tag: "qti-hotspot-interaction", ctor: QtiHotspotInteraction }];
 
 // ../interactions/hottext-interaction/dist/elements.js
-var elements9 = [{ tag: "qti-hottext-interaction", ctor: QtiHottextInteraction }];
+var elements21 = [{ tag: "qti-hottext-interaction", ctor: QtiHottextInteraction }];
 
 // ../interactions/inline-choice-interaction/dist/elements.js
-var elements10 = [{ tag: "qti-inline-choice-interaction", ctor: QtiInlineChoiceInteraction }];
+var elements22 = [{ tag: "qti-inline-choice-interaction", ctor: QtiInlineChoiceInteraction }];
 
 // ../interactions/match-interaction/dist/elements.js
-var elements11 = [{ tag: "qti-match-interaction", ctor: QtiMatchInteraction }];
+var elements23 = [{ tag: "qti-match-interaction", ctor: QtiMatchInteraction }];
+
+// ../interactions/media-interaction/dist/elements.js
+var elements24 = [{ tag: "qti-media-interaction", ctor: QtiMediaInteraction }];
 
 // ../interactions/order-interaction/dist/elements.js
-var elements12 = [{ tag: "qti-order-interaction", ctor: QtiOrderInteraction }];
+var elements25 = [{ tag: "qti-order-interaction", ctor: QtiOrderInteraction }];
 
 // ../interactions/portable-custom-interaction/dist/qti-portable-custom-test-interaction.js
 var QtiPortableCustomInteractionTest = class extends QtiPortableCustomInteraction {
@@ -10274,59 +11489,109 @@ var QtiPortableCustomInteractionTest = class extends QtiPortableCustomInteractio
 };
 
 // ../interactions/portable-custom-interaction/dist/elements.js
-var elements13 = [
+var elements26 = [
   { tag: "qti-portable-custom-interaction", ctor: QtiPortableCustomInteraction },
   { tag: "qti-portable-custom-interaction-test", ctor: QtiPortableCustomInteractionTest }
 ];
 
+// ../interactions/position-object-interaction/dist/elements.js
+var elements27 = [
+  { tag: "qti-position-object-interaction", ctor: QtiPositionObjectInteraction },
+  { tag: "qti-position-object-stage", ctor: QtiPositionObjectStage }
+];
+
 // ../interactions/select-point-interaction/dist/elements.js
-var elements14 = [{ tag: "qti-select-point-interaction", ctor: QtiSelectPointInteraction }];
+var elements28 = [{ tag: "qti-select-point-interaction", ctor: QtiSelectPointInteraction }];
 
 // ../interactions/slider-interaction/dist/elements.js
-var elements15 = [{ tag: "qti-slider-interaction", ctor: QtiSliderInteraction }];
+var elements29 = [{ tag: "qti-slider-interaction", ctor: QtiSliderInteraction }];
 
 // ../interactions/text-entry-interaction/dist/elements.js
-var elements16 = [{ tag: "qti-text-entry-interaction", ctor: QtiTextEntryInteraction }];
+var elements30 = [{ tag: "qti-text-entry-interaction", ctor: QtiTextEntryInteraction }];
+
+// ../interactions/upload-interaction/dist/elements.js
+var elements31 = [{ tag: "qti-upload-interaction", ctor: QtiUploadInteraction }];
+
+// ../qti-interactions/dist/elements.js
+var qtiInteractionElements = [
+  ...qtiInteractionCoreElements,
+  ...elements11,
+  ...elements12,
+  ...elements13,
+  ...elements14,
+  ...elements15,
+  ...elements16,
+  ...elements17,
+  ...elements18,
+  ...elements19,
+  ...elements20,
+  ...elements21,
+  ...elements22,
+  ...elements23,
+  ...elements24,
+  ...elements25,
+  ...elements26,
+  ...elements27,
+  ...elements28,
+  ...elements29,
+  ...elements30,
+  ...elements31
+];
 
 export {
-  ActiveElementMixin,
+  QtiAssociableHotspot,
+  QtiGap,
+  QtiGapImg,
   QtiGapText,
   QtiHotspotChoice,
   QtiHottext,
-  dragDropContext,
+  QtiInlineChoice,
+  QtiPrompt,
   QtiSimpleAssociableChoice,
   QtiSimpleChoice,
   QtiAssociateInteraction,
-  elements,
+  elements11 as elements,
   QtiChoiceInteraction,
-  elements2,
+  elements12 as elements2,
+  QtiCustomInteraction,
+  elements13 as elements3,
+  QtiEndAttemptInteraction,
+  elements14 as elements4,
   QtiExtendedTextInteraction,
-  elements3,
+  elements15 as elements5,
   QtiGapMatchInteraction,
-  elements4,
+  elements16 as elements6,
   QtiGraphicAssociateInteraction,
-  elements5,
+  elements17 as elements7,
   QtiGraphicGapMatchInteraction,
-  elements6,
+  elements18 as elements8,
   QtiGraphicOrderInteraction,
-  elements7,
+  elements19 as elements9,
   QtiHotspotInteraction,
-  elements8,
+  elements20 as elements10,
   QtiHottextInteraction,
-  elements9,
+  elements21 as elements11,
   QtiInlineChoiceInteraction,
-  elements10,
+  elements22 as elements12,
   QtiMatchInteraction,
-  elements11,
+  elements23 as elements13,
+  QtiMediaInteraction,
+  elements24 as elements14,
   QtiOrderInteraction,
-  elements12,
+  elements25 as elements15,
   QtiPortableCustomInteraction,
-  elements13,
+  elements26 as elements16,
+  QtiPositionObjectInteraction,
+  QtiPositionObjectStage,
+  elements27 as elements17,
   QtiSelectPointInteraction,
-  elements14,
+  elements28 as elements18,
   QtiSliderInteraction,
-  elements15,
+  elements29 as elements19,
   QtiTextEntryInteraction,
-  elements16
+  elements30 as elements20,
+  QtiUploadInteraction,
+  elements31 as elements21,
+  qtiInteractionElements
 };
-//# sourceMappingURL=chunk-4XR2JHCP.js.map
+//# sourceMappingURL=chunk-5BXJRO5O.js.map