@citolab/qti-components 7.22.1 → 7.24.0

package/dist/{chunk-NUNAE73U.js → chunk-2X7747Q4.js}

@@ -1,6 +1,6 @@
 import {
   o as o2
-} from "./chunk-QZLVYJDX.js";
+} from "./chunk-VQAG7NSK.js";
 import {
   E,
   Interaction,
@@ -30,7 +30,7 @@ import {
   w,
   watch,
   x
-} from "./chunk-EGLWHNOX.js";
+} from "./chunk-BHB6PYJG.js";
 import {
   __decorateClass
 } from "./chunk-QXBXORM3.js";
@@ -363,9 +363,9 @@ var DragDropInteractionMixin = (superClass, draggablesSelector, droppablesSelect
       if (!referenceContainer || referenceContainer.clientWidth == 0) {
         return this.MAX_DRAGGABLE_WIDTH;
       }
-      const styles = window.getComputedStyle(referenceContainer);
-      const paddingLeft = parseFloat(styles.paddingLeft);
-      const paddingRight = parseFloat(styles.paddingRight);
+      const styles3 = window.getComputedStyle(referenceContainer);
+      const paddingLeft = parseFloat(styles3.paddingLeft);
+      const paddingRight = parseFloat(styles3.paddingRight);
       return Math.min(this.MAX_DRAGGABLE_WIDTH, referenceContainer.clientWidth - paddingLeft - paddingRight);
     }
     async measureIntrinsicSize(el) {
@@ -1224,7 +1224,7 @@ var ChoicesMixin = (superClass, selector) => {
         this._setInputType(choice);
       });
     }
-    _setInputType(choiceElement) {
+    async _setInputType(choiceElement) {
       this._internals.role = this.maxChoices === 1 ? "radiogroup" : null;
       if (choiceElement.internals) {
         const role = this.maxChoices === 1 ? "radio" : "checkbox";
@@ -1307,7 +1307,7 @@ var ChoicesMixin = (superClass, selector) => {
     n({ type: Number, attribute: "max-choices" })
   ], ChoicesMixinElement.prototype, "maxChoices", 2);
   __decorateClass([
-    watch("maxChoices", { waitUntilFirstUpdate: true })
+    watch("maxChoices")
   ], ChoicesMixinElement.prototype, "_handleMaxChoicesChange", 1);
   __decorateClass([
     watch("disabled", { waitUntilFirstUpdate: true })
@@ -2992,24 +2992,80 @@ var e3 = class extends i3 {
 e3.directiveName = "unsafeHTML", e3.resultType = 1;
 var o3 = e2(e3);
 
+// ../qti-interactions/src/components/qti-inline-choice-interaction/qti-inline-choice-interaction.styles.ts
+var styles = i`
+  :host {
+    display: inline-block;
+    vertical-align: baseline;
+    position: relative;
+  }
+
+  button[part='trigger'] {
+    anchor-name: --qti-inline-choice-trigger;
+  }
+
+  [part='value'] {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    min-width: 0;
+  }
+
+  [part~='dropdown-icon'] {
+    line-height: 1;
+  }
+
+  [part='menu'] {
+    position-anchor: --qti-inline-choice-trigger;
+    inset: auto;
+    margin: 0;
+    z-index: 1000;
+    top: calc(anchor(bottom) + 4px);
+    left: anchor(left);
+    min-width: anchor-size(width);
+    max-width: min(90vw, 36rem);
+    max-height: min(40vh, 20rem);
+    position-try-fallbacks: flip-block, flip-inline;
+  }
+
+  button[part~='option'] {
+    width: 100%;
+  }
+
+  [part='option-content'] {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: nowrap;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    min-width: 0;
+  }
+
+  button[part~='option'] img,
+  button[part='trigger'] img,
+  [part='menu'] img {
+    display: inline-block;
+    vertical-align: middle;
+  }
+`;
+var qti_inline_choice_interaction_styles_default = styles;
+
 // ../qti-interactions/src/components/qti-inline-choice-interaction/qti-inline-choice-interaction.ts
-var _QtiInlineChoiceInteraction = class _QtiInlineChoiceInteraction extends Interaction {
+var inlineChoiceMenuCounter = 0;
+var QtiInlineChoiceInteraction = class extends Interaction {
   constructor() {
-    super(...arguments);
+    super();
     this.options = [];
     this.correctOption = "";
     this._dropdownOpen = false;
-    this._calculatedMinWidth = 0;
-    this._widthCalculationTimer = null;
-    this.dataPrompt = "";
-    this.#onNativeChange = (event) => {
-      if (this.readonly) return;
-      const selectedOptionValue = event.target.value;
-      this.#selectValue(selectedOptionValue);
-    };
-    this.#onToggleCustomDropdown = () => {
-      if (this.disabled || this.readonly) return;
-      this.#setDropdownOpen(!this._dropdownOpen);
+    this._slotObserver = null;
+    this._menuId = `qti-inline-choice-menu-${inlineChoiceMenuCounter++}`;
+    this.#onTriggerClick = (event) => {
+      if (this.disabled || this.readonly) {
+        event.preventDefault();
+      }
     };
     this.#onCustomTriggerKeyDown = (event) => {
       if (this.disabled || this.readonly) return;
@@ -3018,6 +3074,13 @@ var _QtiInlineChoiceInteraction = class _QtiInlineChoiceInteraction extends Inte
         this.#setDropdownOpen(true);
       }
     };
+    this.#onMenuToggle = (event) => {
+      const toggleEvent = event;
+      const open = toggleEvent.newState === "open";
+      if (this._dropdownOpen !== open) {
+        this._dropdownOpen = open;
+      }
+    };
     this.#onCustomMenuKeyDown = (event) => {
       if (!this._dropdownOpen) return;
       if (event.key === "Escape") {
@@ -3026,417 +3089,125 @@ var _QtiInlineChoiceInteraction = class _QtiInlineChoiceInteraction extends Inte
         this.#focusTrigger();
         return;
       }
-      const optionButtons = Array.from(this.renderRoot.querySelectorAll('button[part="option"]'));
-      const active = this.renderRoot.activeElement;
-      const activeIndex = optionButtons.findIndex((btn) => btn === active);
+      const optionElements = this.#allMenuOptions();
+      const shadowActive = this.renderRoot.activeElement;
+      const deepActive = this.#getDeepActiveElement();
+      const active = shadowActive || (deepActive instanceof HTMLElement && this.#isElementInsideInteraction(deepActive) ? deepActive : null);
+      const activeIndex = optionElements.findIndex((el) => el === active);
       if (event.key === "ArrowDown") {
         event.preventDefault();
-        optionButtons[Math.min(optionButtons.length - 1, Math.max(0, activeIndex + 1))]?.focus();
+        optionElements[Math.min(optionElements.length - 1, Math.max(0, activeIndex + 1))]?.focus();
       }
       if (event.key === "ArrowUp") {
         event.preventDefault();
-        optionButtons[Math.max(0, activeIndex - 1)]?.focus();
+        optionElements[Math.max(0, activeIndex - 1)]?.focus();
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        if (!active) return;
+        event.preventDefault();
+        if (active instanceof HTMLButtonElement) {
+          active.click();
+        } else {
+          const value = active.getAttribute("identifier") ?? "";
+          this.#selectValue(value);
+        }
       }
     };
-    this.#onDocumentPointerDown = (event) => {
-      if (!this._dropdownOpen) return;
-      const path = event.composedPath?.();
-      if (path && path.includes(this)) return;
-      this.#setDropdownOpen(false);
+    this.#onChoicesSlotChange = () => {
+      this.#updateOptions();
     };
-    this.#onDocumentKeyDown = (event) => {
-      if (!this._dropdownOpen) return;
-      if (event.key !== "Escape") return;
-      event.preventDefault();
-      this.#setDropdownOpen(false);
-      this.#focusTrigger();
+    this.#onSlottedChoiceClick = (event) => {
+      if (this.disabled || this.readonly) return;
+      const target = event.currentTarget;
+      const value = target.getAttribute("identifier") ?? "";
+      this.#selectValue(value);
     };
+    this.internals.role = "listbox";
   }
   get isInline() {
     return true;
   }
-  static {
-    this._supportsCustomizableSelectCache = null;
-  }
   static get styles() {
-    return [
-      i`
-        :host {
-          display: inline-block;
-          vertical-align: baseline;
-          position: relative;
-        }
-
-        /* --- Progressive enhancement: Customizable select (MDN / WHATWG) --- */
-        select[part='select'] {
-          font: inherit;
-          color: inherit;
-          background-color: var(--qti-bg, white);
-          border: var(--qti-border-thickness, 2px) var(--qti-border-style, solid) var(--qti-border-color, #c6cad0);
-          border-radius: var(--qti-border-radius, 0.3rem);
-          padding: 0.25rem 0.75rem;
-          min-width: var(--qti-calculated-min-width, auto);
-          /* Enables full styling when supported (Chromium behind a flag / rolling out). */
-          appearance: base-select;
-        }
-
-        select[part='select']:disabled {
-          opacity: 0.6;
-          cursor: not-allowed;
-        }
-
-        select[part='select']::picker(select) {
-          border: var(--qti-border-thickness, 2px) var(--qti-border-style, solid) var(--qti-border-color, #c6cad0);
-          border-radius: var(--qti-border-radius, 0.3rem);
-          background: var(--qti-bg, white);
-          box-shadow:
-            0 10px 15px -3px rgb(0 0 0 / 10%),
-            0 4px 6px -4px rgb(0 0 0 / 10%);
-          padding: 4px;
-          width: max-content;
-          min-width: 100%;
-          max-width: min(90vw, 36rem);
-        }
-
-        select[part='select']::picker-icon {
-          color: var(--qti-border-color, #c6cad0);
-          transition: 0.4s rotate;
-          font-size: 1.75em;
-        }
-
-        select[part='select']:open::picker-icon {
-          color: var(--qti-border-active, #f86d70);
-          rotate: 180deg;
-        }
-
-        select[part='select'] > button {
-          font: inherit;
-          color: inherit;
-          display: inline-flex;
-          align-items: center;
-          gap: 0.25rem;
-          padding: 0;
-          background: transparent;
-          border: 0;
-          cursor: pointer;
-        }
-
-        select[part='select'] selectedcontent {
-          display: inline-flex;
-          align-items: center;
-          gap: 0.5rem;
-          white-space: nowrap;
-        }
-
-        option {
-          font: inherit;
-          color: inherit;
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-          padding: 0.5rem 0.5rem;
-          white-space: nowrap;
-          line-height: 1.25;
-          min-height: 2.25rem;
-        }
-
-        option:hover {
-          background-color: var(--qti-hover-bg, #f9fafb);
-        }
-
-        option:checked {
-          background-color: var(--qti-bg-active, #ffecec);
-        }
-
-        option::checkmark {
-          color: var(--qti-border-active, #f86d70);
-        }
-
-        /* --- Fallback custom listbox (for browsers without customizable select) --- */
-        button[part='trigger'] {
-          font: inherit;
-          color: inherit;
-          background-color: var(--qti-bg, white);
-          cursor: pointer;
-          display: inline-flex;
-          align-items: center;
-          gap: 0.5rem;
-          justify-content: space-between;
-          border: var(--qti-border-thickness, 2px) var(--qti-border-style, solid) var(--qti-border-color, #c6cad0);
-          border-radius: var(--qti-border-radius, 0.3rem);
-          padding: 0.25rem 0.75rem;
-          min-width: var(--qti-calculated-min-width, auto);
-        }
-
-        [part='value'] {
-          display: inline-flex;
-          align-items: center;
-          gap: 0.5rem;
-          min-width: 0;
-        }
-
-        [part='dropdown-icon'] {
-          display: inline-flex;
-          align-items: center;
-          justify-content: center;
-          flex: 0 0 auto;
-          transition: transform 150ms ease;
-          transform-origin: 50% 50%;
-          color: var(--qti-border-color, #c6cad0);
-          font-size: 1.75em;
-          line-height: 1;
-        }
-
-        button[part='trigger'][aria-expanded='true'] [part='dropdown-icon'] {
-          transform: rotate(180deg);
-          color: var(--qti-border-active, #f86d70);
-        }
-
-        button[part='trigger'][disabled] {
-          cursor: not-allowed;
-          opacity: 0.6;
-        }
-
-        [part='menu'] {
-          position: absolute;
-          z-index: 1000;
-          top: calc(100% + 4px);
-          left: 0;
-          min-width: 100%;
-          max-width: min(90vw, 36rem);
-          max-height: min(40vh, 20rem);
-          overflow: auto;
-          background-color: var(--qti-bg, white);
-          border: var(--qti-border-thickness, 2px) var(--qti-border-style, solid) var(--qti-border-color, #c6cad0);
-          border-radius: var(--qti-border-radius, 0.3rem);
-          box-shadow:
-            0 10px 15px -3px rgb(0 0 0 / 10%),
-            0 4px 6px -4px rgb(0 0 0 / 10%);
-          padding: 4px;
-          box-sizing: border-box;
-          transform: translate(var(--qti-menu-shift-x, 0px), var(--qti-menu-shift-y, 0px));
-        }
-
-        [part='menu'][data-placement='top'] {
-          top: auto;
-          bottom: calc(100% + 4px);
-        }
-
-        button[part='option'] {
-          font: inherit;
-          color: inherit;
-          background-color: transparent;
-          border: 0;
-          padding: 0.5rem 0.5rem;
-          width: 100%;
-          text-align: left;
-          border-radius: calc(var(--qti-border-radius, 0.3rem) - 2px);
-          cursor: pointer;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          line-height: 1.25;
-          min-height: 2.25rem;
-        }
-
-        button[part='option'][aria-selected='true'] {
-          background-color: var(--qti-bg-active, #ffecec);
-        }
-
-        button[part='option']:hover {
-          background-color: var(--qti-hover-bg, #f9fafb);
-        }
-
-        button[part='option']:focus-visible {
-          outline: 2px solid var(--qti-border-active, #f86d70);
-          outline-offset: 2px;
-        }
-
-        [part='option-content'] {
-          display: flex;
-          align-items: center;
-          gap: 0.5rem;
-          flex-wrap: nowrap;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          min-width: 0;
-        }
-
-        select[part='select'] img,
-        button[part='option'] img,
-        button[part='trigger'] img,
-        [part='menu'] img {
-          display: inline-block;
-          max-height: 1em;
-          max-width: 1.5em;
-          vertical-align: middle;
-        }
-      `
-    ];
-  }
-  static {
-    this.inputWidthClass = [
-      "",
-      "qti-input-width-2",
-      "qti-input-width-1",
-      "qti-input-width-3",
-      "qti-input-width-4",
-      "qti-input-width-6",
-      "qti-input-width-10",
-      "qti-input-width-15",
-      "qti-input-width-20",
-      "qti-input-width-72"
-    ];
+    return [qti_inline_choice_interaction_styles_default];
   }
   render() {
     const selected = this.#selectedOption();
-    const useCustomizableSelect = this.#supportsCustomizableSelect();
     return x`
-      ${useCustomizableSelect ? x`
-            <select
-              part="select"
-              @change=${this.#onNativeChange}
-              ?disabled="${this.disabled || this.readonly}"
-              .value="${selected?.value ?? ""}"
-            >
-              <button type="button">
-                <selectedcontent></selectedcontent>
-              </button>
-              ${this.options.map(
-      (option) => x`<option value="${option.value}">${o3(option.textContent)}</option>`
-    )}
-            </select>
-          ` : x`
-            <button
-              part="trigger"
-              type="button"
-              @click=${this.#onToggleCustomDropdown}
-              @keydown=${this.#onCustomTriggerKeyDown}
-              aria-haspopup="listbox"
-              aria-expanded="${this._dropdownOpen ? "true" : "false"}"
-              ?disabled="${this.disabled}"
-              data-readonly="${this.readonly ? "true" : "false"}"
-            >
-              <span part="value">${o3(selected?.textContent ?? "")}</span>
-              <span part="dropdown-icon" aria-hidden="true">▾</span>
-            </button>
-            ${this._dropdownOpen ? x`
-                  <div part="menu" role="listbox" @keydown=${this.#onCustomMenuKeyDown}>
-                    ${this.options.map(
-      (option) => x`
-                        <button
-                          part="option"
-                          type="button"
-                          role="option"
-                          aria-selected="${option.selected ? "true" : "false"}"
-                          @click="${() => this.#selectValue(option.value)}"
-                        >
-                          <span part="option-content">${o3(option.textContent)}</span>
-                        </button>
-                      `
-    )}
-                  </div>
-                ` : null}
-          `}
+      <button
+        part="trigger"
+        type="button"
+        @click=${this.#onTriggerClick}
+        @keydown=${this.#onCustomTriggerKeyDown}
+        aria-haspopup="listbox"
+        aria-expanded="${this._dropdownOpen ? "true" : "false"}"
+        aria-controls="${this._menuId}"
+        popovertarget="${this._menuId}"
+        popovertargetaction="toggle"
+        ?disabled="${this.disabled}"
+        data-readonly="${this.readonly ? "true" : "false"}"
+      >
+        <span part="value">${o3(selected?.textContent ?? "")}</span>
+        <span part="${this._dropdownOpen ? "dropdown-icon dropdown-icon-open" : "dropdown-icon"}" aria-hidden="true"
+          >▾</span
+        >
+      </button>
+      <div
+        id="${this._menuId}"
+        part="menu"
+        role="listbox"
+        popover="auto"
+        @toggle=${this.#onMenuToggle}
+        @keydown=${this.#onCustomMenuKeyDown}
+      >
+        <button
+          part="${this.options[0]?.selected ? "option option-prompt option-selected" : "option option-prompt"}"
+          type="button"
+          role="option"
+          aria-selected="${this.options[0]?.selected ? "true" : "false"}"
+          @click=${() => this.#selectValue("")}
+        >
+          <span part="option-content">${o3(this.options[0]?.textContent ?? "")}</span>
+        </button>
+        <slot @slotchange=${this.#onChoicesSlotChange}></slot>
+      </div>
       ${o3(this.correctOption)}
     `;
   }
-  connectedCallback() {
+  async connectedCallback() {
     super.connectedCallback();
     this.#updateOptions();
-    if (!this.#supportsCustomizableSelect()) {
-      document.addEventListener("pointerdown", this.#onDocumentPointerDown, true);
-      document.addEventListener("keydown", this.#onDocumentKeyDown, true);
-    }
-    this._estimateOptimalWidth();
+    this.#startSlotObserver();
+    await this.updateComplete;
+    this.#estimateOptimalWidth();
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    if (!this.#supportsCustomizableSelect()) {
-      document.removeEventListener("pointerdown", this.#onDocumentPointerDown, true);
-      document.removeEventListener("keydown", this.#onDocumentKeyDown, true);
-    }
-    if (this._widthCalculationTimer !== null) {
-      window.clearTimeout(this._widthCalculationTimer);
-      this._widthCalculationTimer = null;
-    }
+    this.#teardownSlottedChoices();
+    this._slotObserver?.disconnect();
+    this._slotObserver = null;
   }
   willUpdate(changed) {
-    if (changed.has("configContext") || changed.has("dataPrompt")) {
+    if (changed.has("configContext")) {
       this.#updateOptions();
     }
   }
   updated(changed) {
     const dropdownOpenKey = "_dropdownOpen";
     if (changed.has(dropdownOpenKey) && this._dropdownOpen) {
-      this.#positionCustomMenu();
-      const selected = this.renderRoot.querySelector('button[part="option"][aria-selected="true"]');
-      selected?.focus();
+      this.#syncSlottedChoices();
+      const first = this.#allMenuOptions()[0];
+      first?.focus();
+    }
+    if (changed.has("disabled") || changed.has("readonly")) {
+      this.#syncSlottedChoices();
     }
   }
   #selectedOption() {
     return this.options.find((option) => option.selected) ?? this.options[0];
   }
-  /**
-   * Progressive enhancement for "customizable select" (WHATWG / MDN: `appearance: base-select` + `::picker()`).
-   *
-   * Notes on current browser behavior (observed around Feb 2026):
-   * - Chromium-based browsers can support customizable select in light DOM, but it does not reliably work when the
-   *   `<select>` lives inside a shadow root (e.g. the internal `<button>/<selectedcontent>` can end up effectively
-   *   not rendered, so rich content like images disappears).
-   * - Firefox support is not generally available yet, so we fall back to our custom listbox there as well.
-   *
-   * Because `CSS.supports(...)` may return syntax-only true, we do a final DOM probe to ensure the customizable-select
-   * markup actually takes effect in the current environment before opting in.
-   */
-  #supportsCustomizableSelect() {
-    if (_QtiInlineChoiceInteraction._supportsCustomizableSelectCache !== null) {
-      return _QtiInlineChoiceInteraction._supportsCustomizableSelectCache;
-    }
-    if (typeof CSS === "undefined" || typeof CSS.supports !== "function") {
-      _QtiInlineChoiceInteraction._supportsCustomizableSelectCache = false;
-      return false;
-    }
-    const supportsPickerSelector = CSS.supports("selector(::picker(select))") || CSS.supports("selector(select::picker(select))");
-    const supportsAppearanceValue = CSS.supports("appearance: base-select") || CSS.supports("-webkit-appearance: base-select");
-    if (!supportsPickerSelector || !supportsAppearanceValue) {
-      _QtiInlineChoiceInteraction._supportsCustomizableSelectCache = false;
-      return false;
-    }
-    try {
-      const container = document.createElement("div");
-      container.style.position = "absolute";
-      container.style.top = "-9999px";
-      container.style.left = "-9999px";
-      const select = document.createElement("select");
-      select.style.appearance = "base-select";
-      select.style.webkitAppearance = "base-select";
-      const button = document.createElement("button");
-      button.type = "button";
-      const selected = document.createElement("selectedcontent");
-      selected.textContent = "probe";
-      button.appendChild(selected);
-      const option = document.createElement("option");
-      option.value = "probe";
-      option.textContent = "probe";
-      select.appendChild(button);
-      select.appendChild(option);
-      container.appendChild(select);
-      (document.body || document.documentElement).appendChild(container);
-      const rect = button.getBoundingClientRect();
-      container.remove();
-      const supported = rect.width > 0 && rect.height > 0;
-      _QtiInlineChoiceInteraction._supportsCustomizableSelectCache = supported;
-      return supported;
-    } catch {
-      _QtiInlineChoiceInteraction._supportsCustomizableSelectCache = false;
-      return false;
-    }
-  }
   #updateOptions() {
     const choices = Array.from(this.querySelectorAll("qti-inline-choice"));
-    const prompt = this.dataPrompt || this.configContext?.inlineChoicePrompt || "select";
+    const prompt = this.dataset.prompt || this.configContext?.inlineChoicePrompt || "select";
     const currentlySelectedValue = this.options.find((o6) => o6.selected)?.value ?? "";
     const nextOptions = [
       {
@@ -3455,22 +3226,31 @@ var _QtiInlineChoiceInteraction = class _QtiInlineChoiceInteraction extends Inte
     ];
     const hasSelected = nextOptions.some((o6) => o6.selected);
     this.options = hasSelected ? nextOptions : nextOptions.map((o6, i5) => ({ ...o6, selected: i5 === 0 }));
-    this._estimateOptimalWidth();
+    this.#syncSlottedChoices();
+    this.#estimateOptimalWidth();
   }
-  /**
-   * Simple width estimation based on text content length - no DOM manipulation needed
-   */
-  _estimateOptimalWidth() {
-    if (this.options.length === 0) return;
-    let maxLength = 0;
-    for (const option of this.options) {
-      const textContent = option.textContent.replace(/<[^>]*>/g, "").trim();
-      maxLength = Math.max(maxLength, textContent.length);
-    }
-    const estimatedEm = Math.max(maxLength * 0.6 + 4, 8.75);
-    const maxEm = Math.min(estimatedEm, 40);
-    this._calculatedMinWidth = maxEm;
-    this.style.setProperty("--qti-calculated-min-width", `${maxEm}em`);
+  #estimateOptimalWidth() {
+    const menu = this.#menuElement();
+    const trigger = this.renderRoot.querySelector('button[part="trigger"]');
+    if (!menu || !trigger) return;
+    const dropdownIcon = trigger.querySelector('span[part~="dropdown-icon"]');
+    const iconWidth = dropdownIcon ? dropdownIcon.getBoundingClientRect().width : 0;
+    const wasOpen = menu.matches(":popover-open");
+    const prevVisibility = menu.style.visibility;
+    const prevDisplay = menu.style.display;
+    if (!wasOpen) {
+      menu.style.visibility = "hidden";
+      menu.style.display = "block";
+      menu.showPopover();
+    }
+    const rectWidth = menu.getBoundingClientRect().width;
+    const widthPx = Math.max(rectWidth, menu.scrollWidth);
+    if (!wasOpen) {
+      menu.hidePopover();
+      menu.style.visibility = prevVisibility;
+      menu.style.display = prevDisplay;
+    }
+    trigger.style.width = `${widthPx + iconWidth}px`;
   }
   validate() {
     const selectedOption = this.options.find((option) => option.selected);
@@ -3479,10 +3259,12 @@ var _QtiInlineChoiceInteraction = class _QtiInlineChoiceInteraction extends Inte
   reset() {
     this.#setDropdownOpen(false);
     this.options = this.options.map((option, i5) => ({ ...option, selected: i5 === 0 }));
+    this.#syncSlottedChoices();
   }
   set response(value) {
     const nextValue = value ?? "";
     this.options = this.options.map((option) => ({ ...option, selected: option.value === nextValue }));
+    this.#syncSlottedChoices();
   }
   get response() {
     const value = this.options.find((option) => option.selected)?.value ?? "";
@@ -3502,74 +3284,107 @@ var _QtiInlineChoiceInteraction = class _QtiInlineChoiceInteraction extends Inte
     }
     this.correctOption = `<span part="correct-option" style="border:1px solid var(--qti-correct); border-radius:4px; padding: 2px 4px; margin: 4px; display:inline-block">${correctOptionData.textContent}</span>`;
   }
-  #onNativeChange;
   #selectValue(value) {
     this.options = this.options.map((option) => ({ ...option, selected: option.value === value }));
+    this.#syncSlottedChoices();
     this.saveResponse(value);
     this.#setDropdownOpen(false);
   }
   #setDropdownOpen(open) {
-    if (this._dropdownOpen === open) return;
-    this._dropdownOpen = open;
+    const menu = this.#menuElement();
+    if (!menu) return;
+    if (open) {
+      if (!menu.matches(":popover-open")) {
+        menu.showPopover();
+      }
+      return;
+    }
+    if (menu.matches(":popover-open")) {
+      menu.hidePopover();
+    }
   }
-  #onToggleCustomDropdown;
+  #onTriggerClick;
   #onCustomTriggerKeyDown;
+  #onMenuToggle;
   #onCustomMenuKeyDown;
   #focusTrigger() {
     this.renderRoot.querySelector('button[part="trigger"]')?.focus();
   }
-  #onDocumentPointerDown;
-  #onDocumentKeyDown;
-  #positionCustomMenu() {
-    if (!this._dropdownOpen) return;
-    const menu = this.renderRoot.querySelector('[part="menu"]');
-    const trigger = this.renderRoot.querySelector('button[part="trigger"]');
-    if (!menu || !trigger) return;
-    menu.dataset.placement = "bottom";
-    menu.style.setProperty("--qti-menu-shift-x", "0px");
-    menu.style.setProperty("--qti-menu-shift-y", "0px");
-    menu.style.left = "0px";
-    menu.style.right = "auto";
-    const viewportWidth = document.documentElement?.clientWidth || window.innerWidth;
-    const viewportHeight = document.documentElement?.clientHeight || window.innerHeight;
-    const margin = 8;
-    const triggerRect = trigger.getBoundingClientRect();
-    const maxWidth = Math.max(0, viewportWidth - margin * 2);
-    menu.style.maxWidth = `${maxWidth}px`;
-    menu.style.minWidth = `${Math.min(triggerRect.width, maxWidth)}px`;
-    let menuRect = menu.getBoundingClientRect();
-    const spaceBelow = viewportHeight - triggerRect.bottom;
-    const spaceAbove = triggerRect.top;
-    if (menuRect.bottom > viewportHeight - margin && spaceAbove > spaceBelow) {
-      menu.dataset.placement = "top";
-      menuRect = menu.getBoundingClientRect();
-    }
-    const maxLeft = Math.max(margin, viewportWidth - margin - menuRect.width);
-    const desiredLeft = Math.min(maxLeft, Math.max(margin, triggerRect.left));
-    const offsetLeft = desiredLeft - triggerRect.left;
-    menu.style.left = `${offsetLeft}px`;
+  #getDeepActiveElement() {
+    let current = document.activeElement;
+    while (current && current instanceof HTMLElement && current.shadowRoot?.activeElement) {
+      current = current.shadowRoot.activeElement;
+    }
+    return current;
+  }
+  #isElementInsideInteraction(element) {
+    return element === this || this.contains(element) || this.renderRoot.contains(element);
+  }
+  #menuElement() {
+    return this.renderRoot.querySelector(`#${this._menuId}`);
+  }
+  #startSlotObserver() {
+    this._slotObserver = new MutationObserver(() => this.#updateOptions());
+    this._slotObserver.observe(this, { childList: true, subtree: true });
+  }
+  #onChoicesSlotChange;
+  #onSlottedChoiceClick;
+  #teardownSlottedChoices() {
+    const choices = Array.from(this.querySelectorAll("qti-inline-choice"));
+    for (const choice of choices) {
+      choice.removeEventListener("click", this.#onSlottedChoiceClick);
+      choice.removeAttribute("tabindex");
+      choice.internals.role = null;
+      choice.internals.ariaSelected = null;
+      choice.internals.ariaChecked = "false";
+      choice.internals.states.delete("--checked");
+    }
+  }
+  async #syncSlottedChoices() {
+    await this.updateComplete;
+    const selectedValue = this.options.find((option) => option.selected)?.value ?? "";
+    const choices = Array.from(this.querySelectorAll("qti-inline-choice"));
+    for (const choice of choices) {
+      const value = choice.getAttribute("identifier") ?? "";
+      const isSelected = value === selectedValue;
+      choice.removeEventListener("click", this.#onSlottedChoiceClick);
+      choice.addEventListener("click", this.#onSlottedChoiceClick);
+      choice.disabled = this.disabled;
+      choice.readonly = this.readonly;
+      choice.internals.role = "option";
+      choice.internals.ariaSelected = isSelected ? "true" : "false";
+      choice.internals.ariaChecked = isSelected ? "true" : "false";
+      choice.internals.ariaDisabled = this.disabled ? "true" : "false";
+      choice.internals.ariaReadOnly = this.readonly ? "true" : "false";
+      choice.removeAttribute("aria-disabled");
+      choice.removeAttribute("aria-readonly");
+      if (isSelected) {
+        choice.internals.states.add("--checked");
+      } else {
+        choice.internals.states.delete("--checked");
+      }
+      choice.tabIndex = -1;
+    }
+  }
+  #allMenuOptions() {
+    const promptOption = this.renderRoot.querySelector('button[part~="option"]');
+    const slottedChoices = Array.from(this.querySelectorAll("qti-inline-choice"));
+    return [...promptOption ? [promptOption] : [], ...slottedChoices];
   }
 };
 __decorateClass([
   r()
-], _QtiInlineChoiceInteraction.prototype, "options", 2);
-__decorateClass([
-  r()
-], _QtiInlineChoiceInteraction.prototype, "correctOption", 2);
+], QtiInlineChoiceInteraction.prototype, "options", 2);
 __decorateClass([
   r()
-], _QtiInlineChoiceInteraction.prototype, "_dropdownOpen", 2);
+], QtiInlineChoiceInteraction.prototype, "correctOption", 2);
 __decorateClass([
   r()
-], _QtiInlineChoiceInteraction.prototype, "_calculatedMinWidth", 2);
-__decorateClass([
-  n({ attribute: "data-prompt", type: String })
-], _QtiInlineChoiceInteraction.prototype, "dataPrompt", 2);
+], QtiInlineChoiceInteraction.prototype, "_dropdownOpen", 2);
 __decorateClass([
   c({ context: configContext, subscribe: true }),
   n({ attribute: false })
-], _QtiInlineChoiceInteraction.prototype, "configContext", 2);
-var QtiInlineChoiceInteraction = _QtiInlineChoiceInteraction;
+], QtiInlineChoiceInteraction.prototype, "configContext", 2);
 
 // ../qti-interactions/src/components/qti-match-interaction/qti-match-interaction.styles.ts
 var qti_match_interaction_styles_default = i`
@@ -4609,94 +4424,6 @@ var QtiPortableCustomInteraction = class extends Interaction {
     }
     return unescaped;
   }
-  /**
-   * Resolve stylesheet href against baseUrl or document origin
-   */
-  resolveStylesheetHref(href) {
-    if (!href) return href;
-    if (href.startsWith("http://") || href.startsWith("https://")) {
-      return href;
-    }
-    if (href.startsWith("//")) {
-      return `${window.location.protocol}${href}`;
-    }
-    const base = this.baseUrl && this.baseUrl.length > 0 ? this.baseUrl.startsWith("http") || this.baseUrl.startsWith("blob") || this.baseUrl.startsWith("base64") ? this.baseUrl : removeDoubleSlashes(`${window.location.origin}${this.baseUrl}`) : window.location.origin;
-    const normalizedBase = base.endsWith("/") ? base : `${base}/`;
-    try {
-      return new URL(href, normalizedBase).toString();
-    } catch {
-      return href;
-    }
-  }
-  /**
-   * Collect qti-stylesheet elements for iframe injection
-   */
-  getStylesheetConfigs() {
-    const stylesheets = this.getDirectChildrenByTag("qti-stylesheet");
-    if (!stylesheets.length) return [];
-    return stylesheets.map((el, index) => {
-      const href = el.getAttribute("href");
-      if (href) {
-        const resolved = this.resolveStylesheetHref(href);
-        return { href: resolved, scoped: false, key: resolved };
-      }
-      const content = el.textContent?.trim();
-      if (content) {
-        return { content, scoped: false, key: `inline-${index}` };
-      }
-      return null;
-    }).filter(Boolean);
-  }
-  getSharedStylesheetContent() {
-    let cssText = "";
-    const seen = /* @__PURE__ */ new Set();
-    const sheets = Array.from(document.styleSheets || []);
-    for (const sheet of sheets) {
-      try {
-        if (sheet.href && !sheet.href.startsWith(window.location.origin)) {
-          continue;
-        }
-        const ownerNode = sheet.ownerNode;
-        if (ownerNode && ownerNode.tagName === "STYLE") {
-          const text = ownerNode.textContent || "";
-          if (text && !seen.has(text)) {
-            cssText += `${text}
-`;
-            seen.add(text);
-          }
-          continue;
-        }
-        const rules = sheet.cssRules ? Array.from(sheet.cssRules) : [];
-        if (rules.length) {
-          const text = rules.map((rule) => rule.cssText).join("\n");
-          if (text && !seen.has(text)) {
-            cssText += `${text}
-`;
-            seen.add(text);
-          }
-        }
-      } catch {
-      }
-    }
-    const trimmed = cssText.trim();
-    return trimmed.length ? trimmed : null;
-  }
-  getSharedStylesheetConfig() {
-    const content = this.getSharedStylesheetContent();
-    if (!content) return null;
-    return { content, scoped: false, key: "__qti_shared_css__" };
-  }
-  /**
-   * IFRAME MODE: Add stylesheets to iframe
-   */
-  #addStylesheetsToIframe() {
-    const stylesheets = this.getStylesheetConfigs();
-    const shared = this.getSharedStylesheetConfig();
-    const payload = shared ? [shared, ...stylesheets] : stylesheets;
-    if (payload.length > 0) {
-      this.sendMessageToIframe("setStylesheets", payload);
-    }
-  }
   disconnectedCallback() {
     super.disconnectedCallback();
     window.removeEventListener("message", this.handleIframeMessage);
@@ -4759,7 +4486,6 @@ var QtiPortableCustomInteraction = class extends Interaction {
         this._iframeObjectUrl = null;
       }
       this.#addMarkupToIframe();
-      this.#addStylesheetsToIframe();
       this.#sendIframeInitData();
     };
     const iframeName = `qti-pci-${this.responseIdentifier}-${Date.now()}`;
@@ -4816,13 +4542,18 @@ var QtiPortableCustomInteraction = class extends Interaction {
     return modules;
   }
   /**
-   * IFRAME MODE: Add markup and properties to iframe
+   * IFRAME MODE: Add markup, stylesheets, and properties to iframe
    */
   #addMarkupToIframe() {
     const markup = this.querySelector("qti-interaction-markup");
     if (markup) {
       this.sendMessageToIframe("setMarkup", markup.innerHTML);
     }
+    const stylesheets = Array.from(this.querySelectorAll("qti-stylesheet"));
+    if (stylesheets.length) {
+      const stylesheetsHtml = stylesheets.map((sheet) => sheet.outerHTML).join("\n");
+      this.sendMessageToIframe("setStylesheets", stylesheetsHtml);
+    }
     const properties = this.querySelector("properties");
     if (properties) {
       this.sendMessageToIframe("setProperties", properties.innerHTML);
@@ -4855,863 +4586,873 @@ var QtiPortableCustomInteraction = class extends Interaction {
     font-weight: ${parentStyles.getPropertyValue("font-weight")};
     color: ${parentStyles.getPropertyValue("color")};
   `;
-    return `<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8" />
-  <title>QTI PCI Container</title>
-   <base href="${window.location.origin}" />
-  <style>
-    body, html {
-      margin: 0;
-      padding: 0;
-      width: 100%;
-      height: auto;
-      overflow: hidden;
-        /* Add the extracted font styles here */
-      ${fontStyles}
-    }
-    .qti-customInteraction {
-      width: 100%;
-      height: 100%;
-    }
-    #pci-container {
-      width: 100%;
-    }
-    qti-interaction-markup {
-      display: block;
-      width: 100%;
-      min-height: 50px;
-    }
-  </style>
-  <script src="${this.requireJsUrl}"></script>
-  <script>
-    const forwardConsole = ${forwardConsole ? "true" : "false"};
-    if (forwardConsole) {
-      const originalLog = console.log.bind(console);
-      const originalError = console.error.bind(console);
-      const stringifyArgs = args =>
-        args.map(arg => {
-          if (typeof arg === 'string') return arg;
-          try {
-            return JSON.stringify(arg);
-          } catch (e) {
-            return String(arg);
-          }
-        });
-      console.log = (...args) => {
-        originalLog(...args);
-        window.parent.postMessage(
-          {
-            source: 'qti-pci-iframe',
-            responseIdentifier: (window.PCIManager && window.PCIManager.responseIdentifier) || null,
-            method: 'console',
-            level: 'log',
-            args: stringifyArgs(args)
-          },
-          '*'
-        );
-      };
-      console.error = (...args) => {
-        originalError(...args);
-        window.parent.postMessage(
-          {
-            source: 'qti-pci-iframe',
-            responseIdentifier: (window.PCIManager && window.PCIManager.responseIdentifier) || null,
-            method: 'console',
-            level: 'error',
-            args: stringifyArgs(args)
-          },
-          '*'
-        );
-      };
-    }
-    // Define standard paths and shims
-    window.requirePaths = ${requirePaths};
-
-    window.requireShim = ${requireShim};
-
-    // Single initial RequireJS configuration with error handling
-    window.requirejs.config({
-      catchError: true,
-      waitSeconds: 30,
-      paths: window.requirePaths,
-      baseUrl: '${iframeBaseUrl}',
-      shim: window.requireShim,
-      onNodeCreated: function(node, config, moduleName, url) {
-        // Add error handler to script node
-        node.addEventListener('error', function(evt) {
-          console.error('Script load error for module:', moduleName, 'URL:', url, 'Event:', evt);
-        });
-      },
-      onError: function(err) {
-        console.error('RequireJS error:', {
-          type: err.requireType,
-          modules: err.requireModules,
-          error: err
-        });
-
-        if (err.requireType === 'scripterror') {
-          console.error('Script error usually indicates a network or CORS issue with:', err.requireModules);
-        }
-
-	        // Notify parent window about the error
-	        window.parent.postMessage({
-	          source: 'qti-pci-iframe',
-	          responseIdentifier: (window.PCIManager && window.PCIManager.responseIdentifier) || null,
-	          method: 'error',
-	          params: {
-	            message: 'RequireJS ' + err.requireType + ' error for modules: ' + err.requireModules,
-	            details: {
-	              type: err.requireType,
-              modules: err.requireModules,
-              error: err.toString()
+    return (
+      /* html */
+      `<!DOCTYPE html>
+      <html lang="en">
+        <head>
+          <meta charset="utf-8" />
+          <title>QTI PCI Container</title>
+          <base href="${window.location.origin}" />
+          <script type="module">
+            import 'https://unpkg.com/@citolab/qti-components/cdn';
+          </script>
+          <style>
+            body, html {
+              margin: 0;
+              padding: 0;
+              width: 100%;
+              height: auto;
+              overflow: hidden;
+                /* Add the extracted font styles here */
+              ${fontStyles}
+            };
+            .qti-customInteraction {
+              width: 100%;
+              height: 100%;
             }
-          }
-        }, '*');
-      }
-    });
-
-    // PCI Manager for iframe implementation
-    window.PCIManager = {
-      pciInstance: null,
-      container: null,
-      markupEl: null,
-      propertiesEl: null,
-      customInteractionTypeIdentifier: null,
-      responseIdentifier: null,
-      pendingBoundTo: null,
-      pendingMarkup: null,
-      pendingProperties: null,
-      pendingState: null,
-      pendingStylesheets: null,
-      stylesheetKeys: {},
-      interactionChangedViaEvent: false,
-      eventBridgeAttached: false,
-      lastResponseStr: null,
-      hadResponse: false,
-
-      initialize: function(config) {
-        this.customInteractionTypeIdentifier = config.customInteractionTypeIdentifier;
-        this.responseIdentifier = config.responseIdentifier;
-        this.container = document.getElementById('pci-container');
-        this.container.classList.add('qti-customInteraction');
-
-        function qtiVariableHasValue(qtiVar) {
-          if (!qtiVar) return false;
-          if (qtiVar.base) {
-            for (const k in qtiVar.base) {
-              if (!Object.prototype.hasOwnProperty.call(qtiVar.base, k)) continue;
-              const v = qtiVar.base[k];
-              if (v !== null && v !== undefined && v !== '') return true;
+            #pci-container {
+              width: 100%;
             }
-          }
-          if (qtiVar.list) {
-            for (const k in qtiVar.list) {
-              if (!Object.prototype.hasOwnProperty.call(qtiVar.list, k)) continue;
-              const v = qtiVar.list[k];
-              if (Array.isArray(v) && v.some(x => x !== null && x !== undefined && x !== '')) return true;
+            qti-interaction-markup {
+              display: block;
+              width: 100%;
+              min-height: 50px;
             }
-          }
-          if (Array.isArray(qtiVar.record) && qtiVar.record.length > 0) return true;
-          return false;
-        }
+          </style>
+          <link href="https://unpkg.com/@citolab/qti-components@latest/dist/item.css" rel="stylesheet" />
+          <script src="${this.requireJsUrl}"></script>
+          <script>
+            const forwardConsole = ${forwardConsole ? "true" : "false"};
+            if (forwardConsole) {
+              const originalLog = console.log.bind(console);
+              const originalError = console.error.bind(console);
+              const stringifyArgs = args =>
+                args.map(arg => {
+                  if (typeof arg === 'string') return arg;
+                  try {
+                    return JSON.stringify(arg);
+                  } catch (e) {
+                    return String(arg);
+                  }
+                });
+              console.log = (...args) => {
+                originalLog(...args);
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: (window.PCIManager && window.PCIManager.responseIdentifier) || null,
+                    method: 'console',
+                    level: 'log',
+                    args: stringifyArgs(args)
+                  },
+                  '*'
+                );
+              };
+              console.error = (...args) => {
+                originalError(...args);
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: (window.PCIManager && window.PCIManager.responseIdentifier) || null,
+                    method: 'console',
+                    level: 'error',
+                    args: stringifyArgs(args)
+                  },
+                  '*'
+                );
+              };
+            }
+            // Define standard paths and shims
+            window.requirePaths = ${requirePaths};
+
+            window.requireShim = ${requireShim};
+
+            // Single initial RequireJS configuration with error handling
+            window.requirejs.config({
+              catchError: true,
+              waitSeconds: 30,
+              paths: window.requirePaths,
+              baseUrl: '${iframeBaseUrl}',
+              shim: window.requireShim,
+              onNodeCreated: function (node, config, moduleName, url) {
+                // Add error handler to script node
+                node.addEventListener('error', function (evt) {
+                  console.error('Script load error for module:', moduleName, 'URL:', url, 'Event:', evt);
+                });
+              },
+              onError: function (err) {
+                console.error('RequireJS error:', {
+                  type: err.requireType,
+                  modules: err.requireModules,
+                  error: err
+                });
+
+                if (err.requireType === 'scripterror') {
+                  console.error('Script error usually indicates a network or CORS issue with:', err.requireModules);
+                }
 
-        const initialBoundTo = config.boundTo && config.boundTo[this.responseIdentifier];
-        this.hadResponse = qtiVariableHasValue(initialBoundTo);
-        this.lastResponseStr = this.hadResponse ? JSON.stringify(initialBoundTo) : null;
-        // Ensure expected DOM structure exists (markup + properties)
-        this.markupEl = this.container.querySelector('qti-interaction-markup');
-        if (!this.markupEl) {
-          this.markupEl = document.createElement('qti-interaction-markup');
-          this.container.appendChild(this.markupEl);
-        }
-        this.markupEl.classList.add('qti-customInteraction');
-        this.propertiesEl = this.container.querySelector('properties');
-        if (!this.propertiesEl) {
-          this.propertiesEl = document.createElement('properties');
-          this.propertiesEl.style.display = 'none';
-          this.container.appendChild(this.propertiesEl);
-        } else {
-          this.propertiesEl.style.display = 'none';
-        }
+                // Notify parent window about the error
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: (window.PCIManager && window.PCIManager.responseIdentifier) || null,
+                    method: 'error',
+                    params: {
+                      message: 'RequireJS ' + err.requireType + ' error for modules: ' + err.requireModules,
+                      details: {
+                        type: err.requireType,
+                        modules: err.requireModules,
+                        error: err.toString()
+                      }
+                    }
+                  },
+                  '*'
+                );
+              }
+            });
 
-        // Apply any markup/properties that arrived before initialization
-        if (this.pendingMarkup !== null) {
-          this.setMarkup(this.pendingMarkup);
-          this.pendingMarkup = null;
-        }
-        if (this.pendingProperties !== null) {
-          this.setProperties(this.pendingProperties);
-          this.pendingProperties = null;
-        }
-        if (this.pendingStylesheets !== null) {
-          this.setStylesheets(this.pendingStylesheets);
-          this.pendingStylesheets = null;
-        }
+            // PCI Manager for iframe implementation
+            window.PCIManager = {
+              pciInstance: null,
+              container: null,
+              markupEl: null,
+              propertiesEl: null,
+              customInteractionTypeIdentifier: null,
+              responseIdentifier: null,
+              pendingBoundTo: null,
+              pendingMarkup: null,
+              pendingProperties: null,
+              pendingState: null,
+              pendingStylesheets: null,
+              stylesheetKeys: {},
+              interactionChangedViaEvent: false,
+              eventBridgeAttached: false,
+              lastResponseStr: null,
+              hadResponse: false,
+
+              initialize: function (config) {
+                this.customInteractionTypeIdentifier = config.customInteractionTypeIdentifier;
+                this.responseIdentifier = config.responseIdentifier;
+                this.container = document.getElementById('pci-container');
+                this.container.classList.add('qti-customInteraction');
+
+                function qtiVariableHasValue(qtiVar) {
+                  if (!qtiVar) return false;
+                  if (qtiVar.base) {
+                    for (const k in qtiVar.base) {
+                      if (!Object.prototype.hasOwnProperty.call(qtiVar.base, k)) continue;
+                      const v = qtiVar.base[k];
+                      if (v !== null && v !== undefined && v !== '') return true;
+                    }
+                  }
+                  if (qtiVar.list) {
+                    for (const k in qtiVar.list) {
+                      if (!Object.prototype.hasOwnProperty.call(qtiVar.list, k)) continue;
+                      const v = qtiVar.list[k];
+                      if (Array.isArray(v) && v.some(x => x !== null && x !== undefined && x !== '')) return true;
+                    }
+                  }
+                  if (Array.isArray(qtiVar.record) && qtiVar.record.length > 0) return true;
+                  return false;
+                }
 
-        // Bridge qti-interaction-changed events (preferred over polling)
-        if (!this.eventBridgeAttached) {
-          this.eventBridgeAttached = true;
-          const self = this;
-	          this.container.addEventListener(
-	            'qti-interaction-changed',
-	            function(evt) {
-	              try {
-	                self.interactionChangedViaEvent = true;
-	                const value = evt && evt.detail ? evt.detail.value : undefined;
-	                if (value !== undefined) {
-	                  const state = self.pciInstance && typeof self.pciInstance.getState === 'function' ? self.pciInstance.getState() : null;
-	                  self.notifyInteractionChanged(value, state);
-	                }
-	              } catch (e) {
-	                // ignore bridge errors, polling fallback may still work
-	              }
-	            },
-            true
-          );
-        }
+                const initialBoundTo = config.boundTo && config.boundTo[this.responseIdentifier];
+                this.hadResponse = qtiVariableHasValue(initialBoundTo);
+                this.lastResponseStr = this.hadResponse ? JSON.stringify(initialBoundTo) : null;
+                // Ensure expected DOM structure exists (markup + properties)
+                this.markupEl = this.container.querySelector('qti-interaction-markup');
+                if (!this.markupEl) {
+                  this.markupEl = document.createElement('qti-interaction-markup');
+                  this.container.appendChild(this.markupEl);
+                }
+                this.markupEl.classList.add('qti-customInteraction');
+                this.propertiesEl = this.container.querySelector('properties');
+                if (!this.propertiesEl) {
+                  this.propertiesEl = document.createElement('properties');
+                  this.propertiesEl.style.display = 'none';
+                  this.container.appendChild(this.propertiesEl);
+                } else {
+                  this.propertiesEl.style.display = 'none';
+                }
 
-        function getResolvablePath(path, basePath) {
-          if (Array.isArray(path)) {
-            return path.map(p => getResolvablePathString(p, basePath));
-          } else {
-            return getResolvablePathString(path, basePath);
-          }
-        }
+                // Apply any markup/properties that arrived before initialization
+                if (this.pendingMarkup !== null) {
+                  this.setMarkup(this.pendingMarkup);
+                  this.pendingMarkup = null;
+                }
+                if (this.pendingProperties !== null) {
+                  this.setProperties(this.pendingProperties);
+                  this.pendingProperties = null;
+                }
+                if (this.pendingStylesheets !== null) {
+                  this.setStylesheets(this.pendingStylesheets);
+                  this.pendingStylesheets = null;
+                }
 
-        function removeDoubleSlashes(str) {
-          return str
-            .replace(/([^:\\/])\\/\\/+/g, '$1/')
-            .replace(/\\/\\//g, '/')
-            .replace('http:/', 'http://')
-            .replace('https:/', 'https://');
-        }
+                // Bridge qti-interaction-changed events (preferred over polling)
+                if (!this.eventBridgeAttached) {
+                  this.eventBridgeAttached = true;
+                  const self = this;
+                  this.container.addEventListener(
+                    'qti-interaction-changed',
+                    function (evt) {
+                      try {
+                        self.interactionChangedViaEvent = true;
+                        const value = evt && evt.detail ? evt.detail.value : undefined;
+                        if (value !== undefined) {
+                          const state =
+                            self.pciInstance && typeof self.pciInstance.getState === 'function'
+                              ? self.pciInstance.getState()
+                              : null;
+                          self.notifyInteractionChanged(value, state);
+                        }
+                      } catch (e) {
+                        // ignore bridge errors, polling fallback may still work
+                      }
+                    },
+                    true
+                  );
+                }
 
-        function getResolvablePathString(path, basePath) {
-            path = path.replace(/\\.js$/, '');
-            return path?.toLocaleLowerCase().startsWith('http') || !basePath
-              ? path
-              : removeDoubleSlashes(\`\${basePath}/\${path}\`);
-        }
+                function getResolvablePath(path, basePath) {
+                  if (Array.isArray(path)) {
+                    return path.map(p => getResolvablePathString(p, basePath));
+                  } else {
+                    return getResolvablePathString(path, basePath);
+                  }
+                }
 
-        function combineRequireResolvePaths(path1, path2, baseUrl) {
-          path1 = getResolvablePath(path1, baseUrl);
-          const path1Array = Array.isArray(path1) ? path1 : [path1];
-          if (!path2) {
-            return path1Array;
-          }
-          path2 = getResolvablePath(path2, baseUrl);
-          const path2Array = Array.isArray(path2) ? path2 : [path2];
-          return path1Array.concat(path2Array).filter((value, index, self) => self.indexOf(value) === index);
-        }
+                function removeDoubleSlashes(str) {
+                  return str
+                    .replace(/([^:\\/])\\/\\/+/g, '$1/')
+                    .replace(/\\/\\//g, '/')
+                    .replace('http:/', 'http://')
+                    .replace('https:/', 'https://');
+                }
 
-        // Update paths with modules from the config
-        if (config.interactionModules && config.interactionModules.length > 0) {
-          config.interactionModules.forEach(module => {
-            if (module.id && module.primaryPath) {
-              const currentPath = window.requirePaths[module.id] || [];
-              const currentPaths = Array.isArray(currentPath) ? currentPath : [currentPath];
-              const newPath =  combineRequireResolvePaths(
-                module.primaryPath, module.fallbackPath, config.baseUrl
-              );
-              window.requirePaths[module.id] = currentPaths.concat(newPath).filter((value, index, self) => self.indexOf(value) === index);
-            }
-          });
-        }
 
-        // The ONLY other requirejs.config call - with the context for this specific PCI
-        window.requirejs.config({
-          context: this.customInteractionTypeIdentifier,
-          paths: window.requirePaths,
-          shim: window.requireShim
-        });
 
-        // Define qtiCustomInteractionContext for the PCI
-        define('qtiCustomInteractionContext', () => {
-          return {
-            register: pciInstance => {
-              this.pciInstance = pciInstance;
-              // Configure PCI instance
-              const pciConfig = {
-                properties: config.properties || {},
-                contextVariables: config.contextVariables || {},
-                templateVariables: config.templateVariables || {},
-                onready: pciInstance => {
-                  this.pciInstance = pciInstance;
-                  // Apply any pending updates that arrived before onready
-                  if (this.pendingBoundTo) {
-                    this.applyBoundTo(this.pendingBoundTo);
-                    this.pendingBoundTo = null;
+                function combineRequireResolvePaths(path1, path2, baseUrl) {
+                  path1 = getResolvablePath(path1, baseUrl);
+                  const path1Array = Array.isArray(path1) ? path1 : [path1];
+                  if (!path2) {
+                    return path1Array;
                   }
-                  if (this.pendingState && typeof this.pciInstance.setState === 'function') {
-                    this.pciInstance.setState(this.pendingState);
-                    this.pendingState = null;
-                  }
-                  this.notifyReady();
-                },
-	                ondone: (pciInstance, response, state, status) => {
-	                  this.notifyInteractionChanged(response, typeof state === 'string' ? state : null);
-	                },
-	                responseIdentifier: config.responseIdentifier,
-	                boundTo: config.boundTo,
-	              };
-
-	              if (pciInstance.getInstance) {
-	                const dom = this.markupEl || this.container;
-	                // Round-trip support for object states (stored as a prefixed JSON string by the host).
-	                // For strict string-based PCIs we pass the original string through unchanged.
-	                let restoredState = config.state;
-	                if (typeof restoredState === 'string' && restoredState.indexOf('__qti_json__::') === 0) {
-	                  try {
-	                    restoredState = JSON.parse(restoredState.substring('__qti_json__::'.length));
-	                  } catch (e) {
-	                    // If parsing fails, fall back to the raw string.
-	                    restoredState = config.state;
-	                  }
-	                }
-	                pciInstance.getInstance(dom, pciConfig, restoredState || undefined);
-	              } else {
-                // TAO custom interaction initialization
-                const restoreTAOConfig = (dataset) => {
-                    const config = {};
-                    const parseDataAttributes = () => {
-                      const result = {};
-
-                      // Separate direct attributes from nested ones
-                      Object.entries(dataset || {}).forEach(([key, value]) => {
-                        if (!key.includes('__')) {
-                          // Direct attributes (like version)
-                          result[key] = value;
-                        }
-                      });
-
-                      // Parse nested attributes
-                      const nestedData = {};
-
-                      Object.entries(dataset || {}).forEach(([key, value]) => {
-                        const parts = key.split('__');
-                        if (parts.length > 1) {
-                          const [group, index, prop] = parts;
-                          nestedData[group] = nestedData[group] || {};
-                          nestedData[group][index] = nestedData[group][index] || {};
-                          nestedData[group][index][prop] = value;
+                  path2 = getResolvablePath(path2, baseUrl);
+                  const path2Array = Array.isArray(path2) ? path2 : [path2];
+                  return path1Array.concat(path2Array).filter((value, index, self) => self.indexOf(value) === index);
+                }
+
+                // Update paths with modules from the config
+                if (config.interactionModules && config.interactionModules.length > 0) {
+                  config.interactionModules.forEach(module => {
+                    if (module.id && module.primaryPath) {
+                      const currentPath = window.requirePaths[module.id] || [];
+                      const currentPaths = Array.isArray(currentPath) ? currentPath : [currentPath];
+                      const newPath = combineRequireResolvePaths(
+                        module.primaryPath,
+                        module.fallbackPath,
+                        config.baseUrl
+                      );
+                      window.requirePaths[module.id] = currentPaths
+                        .concat(newPath)
+                        .filter((value, index, self) => self.indexOf(value) === index);
+                    }
+                  });
+                }
+
+                // The ONLY other requirejs.config call - with the context for this specific PCI
+                window.requirejs.config({
+                  context: this.customInteractionTypeIdentifier,
+                  paths: window.requirePaths,
+                  shim: window.requireShim
+                });
+
+                // Define qtiCustomInteractionContext for the PCI
+                define('qtiCustomInteractionContext', () => {
+                  return {
+                    register: pciInstance => {
+                      this.pciInstance = pciInstance;
+                      // Configure PCI instance
+                      const pciConfig = {
+                        properties: config.properties || {},
+                        contextVariables: config.contextVariables || {},
+                        templateVariables: config.templateVariables || {},
+                        onready: pciInstance => {
+                          this.pciInstance = pciInstance;
+                          // Apply any pending updates that arrived before onready
+                          if (this.pendingBoundTo) {
+                            this.applyBoundTo(this.pendingBoundTo);
+                            this.pendingBoundTo = null;
+                          }
+                          if (this.pendingState && typeof this.pciInstance.setState === 'function') {
+                            this.pciInstance.setState(this.pendingState);
+                            this.pendingState = null;
+                          }
+                          this.notifyReady();
+                        },
+                        ondone: (pciInstance, response, state, status) => {
+                          this.notifyInteractionChanged(response, typeof state === 'string' ? state : null);
+                        },
+                        responseIdentifier: config.responseIdentifier,
+                        boundTo: config.boundTo
+                      };
+
+                      if (pciInstance.getInstance) {
+                        const dom = this.markupEl || this.container;
+                        // Round-trip support for object states (stored as a prefixed JSON string by the host).
+                        // For strict string-based PCIs we pass the original string through unchanged.
+                        let restoredState = config.state;
+                        if (typeof restoredState === 'string' && restoredState.indexOf('__qti_json__::') === 0) {
+                          try {
+                            restoredState = JSON.parse(restoredState.substring('__qti_json__::'.length));
+                          } catch (e) {
+                            // If parsing fails, fall back to the raw string.
+                            restoredState = config.state;
+                          }
                         }
-                      });
-
-                      // Convert nested groups to arrays
-                      Object.entries(nestedData).forEach(([key, group]) => {
-                        result[key] = Object.values(group);
-                      });
-                      return result;
-                };
-                const data = parseDataAttributes();
-                for (const key in data) {
-                  if (Object.prototype.hasOwnProperty.call(data, key)) {
-                    const value = data[key];
-                    if (key === 'config') {
-                      config[key] = JSON.parse(value);
-                    } else {
-                      config[key] = value;
+                        pciInstance.getInstance(dom, pciConfig, restoredState || undefined);
+                      } else {
+                        // TAO custom interaction initialization
+                        const restoreTAOConfig = dataset => {
+                          const config = {};
+                          const parseDataAttributes = () => {
+                            const result = {};
+
+                            // Separate direct attributes from nested ones
+                            Object.entries(dataset || {}).forEach(([key, value]) => {
+                              if (!key.includes('__')) {
+                                // Direct attributes (like version)
+                                result[key] = value;
+                              }
+                            });
+
+                            // Parse nested attributes
+                            const nestedData = {};
+
+                            Object.entries(dataset || {}).forEach(([key, value]) => {
+                              const parts = key.split('__');
+                              if (parts.length > 1) {
+                                const [group, index, prop] = parts;
+                                nestedData[group] = nestedData[group] || {};
+                                nestedData[group][index] = nestedData[group][index] || {};
+                                nestedData[group][index][prop] = value;
+                              }
+                            });
+
+                            // Convert nested groups to arrays
+                            Object.entries(nestedData).forEach(([key, group]) => {
+                              result[key] = Object.values(group);
+                            });
+                            return result;
+                          };
+                          const data = parseDataAttributes();
+                          for (const key in data) {
+                            if (Object.prototype.hasOwnProperty.call(data, key)) {
+                              const value = data[key];
+                              if (key === 'config') {
+                                config[key] = JSON.parse(value);
+                              } else {
+                                config[key] = value;
+                              }
+                            }
+                          }
+                          return config;
+                        };
+                        const taoConfig = restoreTAOConfig(config.dataAttributes);
+
+                        this.pciInstance.initialize(
+                          this.customInteractionTypeIdentifier,
+                          (this.markupEl || this.container).firstElementChild || this.markupEl || this.container,
+                          Object.keys(taoConfig).length ? taoConfig : null
+                        );
+                      }
+                    },
+                    notifyReady: () => {
+                      PCIManager.notifyReady();
                     }
-                  }
+                  };
+                });
+
+                function getResolvablePathString(path, basePath) {
+                  path = path.replace(/\\.js$/, '');
+                  return path?.toLocaleLowerCase().startsWith('http') || !basePath
+                    ? path
+                    : removeDoubleSlashes(\`\${basePath}/\${path}\`);
                 }
-                return config;
-              };
-              const taoConfig = restoreTAOConfig(config.dataAttributes);
 
-              this.pciInstance.initialize(
-                this.customInteractionTypeIdentifier,
-                (this.markupEl || this.container).firstElementChild || (this.markupEl || this.container),
-                Object.keys(taoConfig).length ? taoConfig : null
-              );
-              }
-            },
-            notifyReady: () => {
-              PCIManager.notifyReady();
-            }
-          };
-        });
+                // Load the PCI module
+                this.loadModule(config.module);
+              },
 
-        // Load the PCI module
-        this.loadModule(config.module);
-      },
+              loadModule: function (modulePath) {
+                try {
+                  // Get the context-specific require
+                  const contextRequire = window.requirejs.config({
+                    context: this.customInteractionTypeIdentifier
+                  });
+                  contextRequire(['require'], require => {
+                    // Now load the actual module
+                    require([modulePath], () => {}, err => {
+                      console.error('Error loading module:', modulePath, err);
+                      this.notifyError('Module load error: ' + err.toString());
+                    });
+                  });
+                } catch (error) {
+                  console.error('Exception in loadModule:', modulePath);
+                  console.error(error);
+                  this.notifyError('Error in require call: ' + error.toString());
+                }
+              },
 
-      loadModule: function(modulePath) {
-        try {
-          // Get the context-specific require
-          const contextRequire = window.requirejs.config({
-            context: this.customInteractionTypeIdentifier
-          });
-          contextRequire(['require'], require => {
-             // Now load the actual module
-              require([modulePath], () => {
-              }, err => {
-                console.error('Error loading module:', modulePath, err);
-                this.notifyError('Module load error: ' + err.toString());
-              });
-          });
-        } catch (error) {
-          console.error('Exception in loadModule:', modulePath);
-          console.error(error);
-          this.notifyError('Error in require call: ' + error.toString());
-        }
-      },
+              notifyReady: function () {
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: this.responseIdentifier,
+                    method: 'iframeReady'
+                  },
+                  '*'
+                );
+              },
 
-	      notifyReady: function() {
-	        window.parent.postMessage({
-	          source: 'qti-pci-iframe',
-	          responseIdentifier: this.responseIdentifier,
-	          method: 'iframeReady'
-	        }, '*');
-	      },
-
-	      notifyInteractionChanged: function(response, state) {
-	        window.parent.postMessage({
-	          source: 'qti-pci-iframe',
-	          responseIdentifier: this.responseIdentifier,
-	          method: 'interactionChanged',
-	          params: { value: response, state: state }
-	        }, '*');
-	      },
-
-	      notifyError: function(message) {
-	        console.error('PCI Error:', message);
-	        window.parent.postMessage({
-	          source: 'qti-pci-iframe',
-	          responseIdentifier: this.responseIdentifier,
-	          method: 'error',
-	          params: { message: message }
-	        }, '*');
-	      },
-
-      setMarkup: function(markupHtml) {
-        if (!this.container) {
-          this.container = document.getElementById('pci-container');
-        }
-        if (!this.container) {
-          this.pendingMarkup = markupHtml;
-          return;
-        }
-        this.markupEl = this.container.querySelector('qti-interaction-markup');
-        if (!this.markupEl) {
-          this.markupEl = document.createElement('qti-interaction-markup');
-          this.container.appendChild(this.markupEl);
-        }
-        this.markupEl.classList.add('qti-customInteraction');
-        this.markupEl.innerHTML = markupHtml || '';
-      },
+              notifyInteractionChanged: function (response, state) {
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: this.responseIdentifier,
+                    method: 'interactionChanged',
+                    params: { value: response, state: state }
+                  },
+                  '*'
+                );
+              },
 
-      setProperties: function(propertiesHtml) {
-        if (!this.container) {
-          this.container = document.getElementById('pci-container');
-        }
-        if (!this.container) {
-          this.pendingProperties = propertiesHtml;
-          return;
-        }
-        this.propertiesEl = this.container.querySelector('properties');
-        if (!this.propertiesEl) {
-          this.propertiesEl = document.createElement('properties');
-          this.container.appendChild(this.propertiesEl);
-        }
-        this.propertiesEl.style.display = 'none';
-        this.propertiesEl.innerHTML = propertiesHtml || '';
-      },
+              notifyError: function (message) {
+                console.error('PCI Error:', message);
+                window.parent.postMessage(
+                  {
+                    source: 'qti-pci-iframe',
+                    responseIdentifier: this.responseIdentifier,
+                    method: 'error',
+                    params: { message: message }
+                  },
+                  '*'
+                );
+              },
 
-      minifyCss: function(cssContent) {
-        return cssContent
-          .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '')
-          .replace(/\\s+/g, ' ')
-          .replace(/\\s*([{}:;])\\s*/g, '$1')
-          .trim();
-      },
+              setMarkup: function (markupHtml) {
+                if (!this.container) {
+                  this.container = document.getElementById('pci-container');
+                }
+                if (!this.container) {
+                  this.pendingMarkup = markupHtml;
+                  return;
+                }
+                this.markupEl = this.container.querySelector('qti-interaction-markup');
+                if (!this.markupEl) {
+                  this.markupEl = document.createElement('qti-interaction-markup');
+                  this.container.appendChild(this.markupEl);
+                }
+                this.markupEl.classList.add('qti-customInteraction');
+                this.markupEl.innerHTML = markupHtml || '';
+              },
 
-      injectStylesheet: function(cssContent, key, scoped) {
-        if (!cssContent) return;
-        const head = document.head || document.getElementsByTagName('head')[0] || document.body;
-        if (!head) return;
-        const resolvedKey = key || '';
-        if (resolvedKey && this.stylesheetKeys[resolvedKey]) return;
-        const shouldScope = scoped !== false;
-        const styleEl = document.createElement('style');
-        styleEl.media = 'screen';
-        if (resolvedKey) styleEl.setAttribute('data-qti-stylesheet', resolvedKey);
-        const minified = this.minifyCss(cssContent);
-        styleEl.textContent = shouldScope ? '@scope {' + minified + '}' : minified;
-        head.appendChild(styleEl);
-        if (resolvedKey) this.stylesheetKeys[resolvedKey] = true;
-      },
+              setProperties: function (propertiesHtml) {
+                if (!this.container) {
+                  this.container = document.getElementById('pci-container');
+                }
+                if (!this.container) {
+                  this.pendingProperties = propertiesHtml;
+                  return;
+                }
+                this.propertiesEl = this.container.querySelector('properties');
+                if (!this.propertiesEl) {
+                  this.propertiesEl = document.createElement('properties');
+                  this.container.appendChild(this.propertiesEl);
+                }
+                this.propertiesEl.style.display = 'none';
+                this.propertiesEl.innerHTML = propertiesHtml || '';
+              },
 
-      setStylesheets: function(stylesheets) {
-        if (!Array.isArray(stylesheets)) return;
-        stylesheets.forEach((sheet, index) => {
-          if (!sheet) return;
-          const key = sheet.key || sheet.href || ('inline-' + index);
-          const scoped = sheet.scoped !== false;
-          if (sheet.content) {
-            this.injectStylesheet(sheet.content, key, scoped);
-            return;
-          }
-          if (sheet.href) {
-            fetch(sheet.href)
-              .then(resp => resp.text())
-              .then(css => this.injectStylesheet(css, key, scoped))
-              .catch(() => {
-                // ignore stylesheet load errors
-              });
-          }
-        });
-      },
+              minifyCss: function (cssContent) {
+                return cssContent
+                  .replace(/\\/\\*[\\s\\S]*?\\*\\//g, '')
+                  .replace(/\\s+/g, ' ')
+                  .replace(/\\s*([{}:;])\\s*/g, '$1')
+                  .trim();
+              },
 
-      applyBoundTo: function(boundTo) {
-        if (!this.pciInstance || typeof this.pciInstance.setResponse !== 'function') return;
-        const value = boundTo && (boundTo[this.responseIdentifier] || boundTo[Object.keys(boundTo)[0]]);
-        if (value) this.pciInstance.setResponse(value);
-      },
-    };
+              setStylesheets: function (stylesheetsHtml) {
+                if (!stylesheetsHtml) return;
+                if (!this.container) {
+                  this.container = document.getElementById('pci-container');
+                }
+                const target = this.container || document.body;
+                if (!target) return;
+                target.insertAdjacentHTML('afterbegin', stylesheetsHtml);
+              },
 
-	    // Set up message listener for communication with parent
-	    let expectedParentOrigin = null;
-	    window.addEventListener('message', function(event) {
-	      const { data } = event;
-
-	      // Ensure the message is from our parent
-	      if (event.source !== window.parent || !data || data.source !== 'qti-portable-custom-interaction') {
-	        return;
-	      }
-	      if (expectedParentOrigin === null) {
-	        expectedParentOrigin = event.origin;
-	      } else if (event.origin !== expectedParentOrigin) {
-	        return;
-	      }
-
-      function deepQuerySelector(root, selector) {
-        if (!root) return null;
-        try {
-          const direct = root.querySelector ? root.querySelector(selector) : null;
-          if (direct) return direct;
-        } catch (e) {
-          // ignore invalid selector for this root
-        }
-        if (!root.querySelectorAll) return null;
-        const nodes = root.querySelectorAll('*');
-        for (const node of nodes) {
-          if (node && node.shadowRoot) {
-            const found = deepQuerySelector(node.shadowRoot, selector);
-            if (found) return found;
-          }
-        }
-        return null;
-      }
 
-      function deepFindElementByExactText(root, text) {
-        if (!root || !text) return null;
-        if (root.querySelectorAll) {
-          const nodes = root.querySelectorAll('*');
-          for (const node of nodes) {
-            if ((node.textContent || '').trim() === text) return node;
-            if (node.shadowRoot) {
-              const found = deepFindElementByExactText(node.shadowRoot, text);
-              if (found) return found;
-            }
-          }
-        }
-        return null;
-      }
+              applyBoundTo: function (boundTo) {
+                if (!this.pciInstance || typeof this.pciInstance.setResponse !== 'function') return;
+                const value = boundTo && (boundTo[this.responseIdentifier] || boundTo[Object.keys(boundTo)[0]]);
+                if (value) this.pciInstance.setResponse(value);
+              }
+            };
 
-      switch(data.method) {
-        case 'initialize':
-          PCIManager.initialize(data.params);
-          break;
+            // Set up message listener for communication with parent
+            let expectedParentOrigin = null;
+            window.addEventListener('message', function (event) {
+              const { data } = event;
 
-        case 'setMarkup':
-          PCIManager.setMarkup(data.params);
-          break;
+              // Ensure the message is from our parent
+              if (event.source !== window.parent || !data || data.source !== 'qti-portable-custom-interaction') {
+                return;
+              }
+              if (expectedParentOrigin === null) {
+                expectedParentOrigin = event.origin;
+              } else if (event.origin !== expectedParentOrigin) {
+                return;
+              }
 
-        case 'setBoundTo':
-          if (PCIManager.pciInstance) {
-            PCIManager.applyBoundTo(data.params);
-          } else {
-            PCIManager.pendingBoundTo = data.params;
-          }
-          break;
+              function deepQuerySelector(root, selector) {
+                if (!root) return null;
+                try {
+                  const direct = root.querySelector ? root.querySelector(selector) : null;
+                  if (direct) return direct;
+                } catch (e) {
+                  // ignore invalid selector for this root
+                }
+                if (!root.querySelectorAll) return null;
+                const nodes = root.querySelectorAll('*');
+                for (const node of nodes) {
+                  if (node && node.shadowRoot) {
+                    const found = deepQuerySelector(node.shadowRoot, selector);
+                    if (found) return found;
+                  }
+                }
+                return null;
+              }
 
-        case 'setProperties':
-          PCIManager.setProperties(data.params);
-          break;
+              function deepFindElementByExactText(root, text) {
+                if (!root || !text) return null;
+                if (root.querySelectorAll) {
+                  const nodes = root.querySelectorAll('*');
+                  for (const node of nodes) {
+                    if ((node.textContent || '').trim() === text) return node;
+                    if (node.shadowRoot) {
+                      const found = deepFindElementByExactText(node.shadowRoot, text);
+                      if (found) return found;
+                    }
+                  }
+                }
+                return null;
+              }
 
-        case 'setStylesheets':
-          PCIManager.setStylesheets(data.params);
-          break;
+              switch (data.method) {
+                case 'initialize':
+                  PCIManager.initialize(data.params);
+                  break;
 
-        case 'setState':
-          if (PCIManager.pciInstance && typeof PCIManager.pciInstance.setState === 'function') {
-            PCIManager.pciInstance.setState((data.params && data.params.state) || data.params);
-          } else {
-            PCIManager.pendingState = (data.params && data.params.state) || data.params;
-          }
-          break;
+                case 'setMarkup':
+                  PCIManager.setMarkup(data.params);
+                  break;
 
-        case 'getContent': {
-          const messageId = data.params && data.params.messageId;
-          const collectShadowHtml = root => {
-            const parts = [];
-            if (!root || !root.querySelectorAll) return parts;
-            const nodes = root.querySelectorAll('*');
-            for (const node of nodes) {
-              if (node && node.shadowRoot) {
-                parts.push(node.shadowRoot.innerHTML || '');
-                parts.push(...collectShadowHtml(node.shadowRoot));
-              }
-            }
-            return parts;
-          };
-          const shadowHtml = collectShadowHtml(document).join('\\n');
-	          window.parent.postMessage(
-	            {
-	              source: 'qti-pci-iframe',
-	              responseIdentifier: PCIManager.responseIdentifier,
-	              method: 'getContentResponse',
-	              messageId: messageId,
-	              content: (document.documentElement ? document.documentElement.outerHTML : '') + '\\n' + shadowHtml
-	            },
-	            '*'
-	          );
-          break;
-        }
+                case 'setBoundTo':
+                  if (PCIManager.pciInstance) {
+                    PCIManager.applyBoundTo(data.params);
+                  } else {
+                    PCIManager.pendingBoundTo = data.params;
+                  }
+                  break;
 
-        case 'simulateClick': {
-          const messageId = data.params && data.params.messageId;
-          const x = data.params && data.params.x;
-          const y = data.params && data.params.y;
-          const el = typeof x === 'number' && typeof y === 'number' ? document.elementFromPoint(x, y) : null;
-          const target = (el && el.closest && el.closest('.hitbox')) || document.querySelector('.hitbox') || el;
-            if (target) {
-              const evt = new MouseEvent('click', {
-                bubbles: true,
-                clientX: x,
-                clientY: y,
-                screenX: x,
-                screenY: y,
-                view: window
-              });
-              target.dispatchEvent(evt);
-            }
-	          window.parent.postMessage(
-	            {
-	              source: 'qti-pci-iframe',
-	              responseIdentifier: PCIManager.responseIdentifier,
-	              method: 'clickResponse',
-	              messageId: messageId
-	            },
-	            '*'
-	          );
-	          break;
-	        }
-
-        case 'getBoundingRect': {
-          const messageId = data.params && data.params.messageId;
-          const selector = data.params && data.params.selector;
-          const el = selector ? deepQuerySelector(document, selector) : null;
-          const rect = el && typeof el.getBoundingClientRect === 'function' ? el.getBoundingClientRect() : null;
-            window.parent.postMessage(
-              {
-                source: 'qti-pci-iframe',
-                responseIdentifier: PCIManager.responseIdentifier,
-                method: 'getBoundingRectResponse',
-                messageId: messageId,
-                rect: rect
-                  ? {
-                      left: rect.left,
-                      top: rect.top,
-                      width: rect.width,
-                      height: rect.height
+                case 'setProperties':
+                  PCIManager.setProperties(data.params);
+                  break;
+
+                case 'setStylesheets':
+                  PCIManager.setStylesheets(data.params);
+                  break;
+
+                case 'setState':
+                  if (PCIManager.pciInstance && typeof PCIManager.pciInstance.setState === 'function') {
+                    PCIManager.pciInstance.setState((data.params && data.params.state) || data.params);
+                  } else {
+                    PCIManager.pendingState = (data.params && data.params.state) || data.params;
+                  }
+                  break;
+
+                case 'getContent': {
+                  const messageId = data.params && data.params.messageId;
+                  const collectShadowHtml = root => {
+                    const parts = [];
+                    if (!root || !root.querySelectorAll) return parts;
+                    const nodes = root.querySelectorAll('*');
+                    for (const node of nodes) {
+                      if (node && node.shadowRoot) {
+                        parts.push(node.shadowRoot.innerHTML || '');
+                        parts.push(...collectShadowHtml(node.shadowRoot));
+                      }
                     }
-                  : null
-              },
-              '*'
-            );
-          break;
-        }
+                    return parts;
+                  };
+                  const shadowHtml = collectShadowHtml(document).join('\\n');
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'getContentResponse',
+                      messageId: messageId,
+                      content: (document.documentElement ? document.documentElement.outerHTML : '') + '\\n' + shadowHtml
+                    },
+                    '*'
+                  );
+                  break;
+                }
 
-        case 'clickOnSelector': {
-          const messageId = data.params && data.params.messageId;
-          const selector = data.params && data.params.selector;
-          const el = selector ? deepQuerySelector(document, selector) : null;
-	          const success = !!el;
-	          if (el && typeof el.click === 'function') el.click();
-	          window.parent.postMessage(
-	            {
-	              source: 'qti-pci-iframe',
-	              responseIdentifier: PCIManager.responseIdentifier,
-	              method: 'clickSelectorResponse',
-	              messageId: messageId,
-	              success: success
-	            },
-	            '*'
-	          );
-	          break;
-	        }
-
-        case 'clickOnElementByText': {
-          const messageId = data.params && data.params.messageId;
-          const text = data.params && data.params.text;
-          const target = text ? deepFindElementByExactText(document, text) : null;
-	          const success = !!target;
-	          if (target && typeof target.click === 'function') target.click();
-	          window.parent.postMessage(
-	            {
-	              source: 'qti-pci-iframe',
-	              responseIdentifier: PCIManager.responseIdentifier,
-	              method: 'clickTextResponse',
-	              messageId: messageId,
-	              success: success
-	            },
-	            '*'
-	          );
-	          break;
-	        }
-
-        case 'setValueElement': {
-          const messageId = data.params && data.params.messageId;
-          const selector = data.params && data.params.selector;
-          const value = data.params && data.params.value;
-          const el = selector ? deepQuerySelector(document, selector) : null;
-          let success = false;
-          if (el && 'value' in el) {
-            try {
-              el.value = value;
-              el.dispatchEvent(new Event('input', { bubbles: true }));
-              el.dispatchEvent(new Event('change', { bubbles: true }));
-              success = true;
-            } catch (e) {
-              success = false;
-            }
-	          }
-	          window.parent.postMessage(
-	            {
-	              source: 'qti-pci-iframe',
-	              responseIdentifier: PCIManager.responseIdentifier,
-	              method: 'setValueResponse',
-	              messageId: messageId,
-	              success: success
-	            },
-	            '*'
-	          );
-	          break;
-	        }
-
-          case 'console':
-            window.parent.postMessage(
-              {
-                source: 'qti-pci-iframe',
-                responseIdentifier: PCIManager.responseIdentifier,
-                method: 'console',
-                level: data.level,
-                args: data.args
-              },
-              '*'
-            );
-            break;
-      }
-    });
+                case 'simulateClick': {
+                  const messageId = data.params && data.params.messageId;
+                  const x = data.params && data.params.x;
+                  const y = data.params && data.params.y;
+                  const el = typeof x === 'number' && typeof y === 'number' ? document.elementFromPoint(x, y) : null;
+                  const target = (el && el.closest && el.closest('.hitbox')) || document.querySelector('.hitbox') || el;
+                  if (target) {
+                    const evt = new MouseEvent('click', {
+                      bubbles: true,
+                      clientX: x,
+                      clientY: y,
+                      screenX: x,
+                      screenY: y,
+                      view: window
+                    });
+                    target.dispatchEvent(evt);
+                  }
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'clickResponse',
+                      messageId: messageId
+                    },
+                    '*'
+                  );
+                  break;
+                }
 
-    let resizeTimeout;
-    let previousHeight = 0;
-    const notifyResize = () => {
-      const container = document.getElementById('pci-container');
-      const newHeight = container.scrollHeight + 100;
-      if (newHeight !== previousHeight) {
-        previousHeight = newHeight;
-        clearTimeout(resizeTimeout);
-	        resizeTimeout = setTimeout(() => {
-	          window.parent.postMessage({
-	            source: 'qti-pci-iframe',
-	            responseIdentifier: PCIManager.responseIdentifier,
-	            method: 'resize',
-	            height: newHeight,
-	            width: container.scrollWidth
-	          }, '*');
-	        }, 100); // Adjust debounce time as needed
-      }
-    };
+                case 'getBoundingRect': {
+                  const messageId = data.params && data.params.messageId;
+                  const selector = data.params && data.params.selector;
+                  const el = selector ? deepQuerySelector(document, selector) : null;
+                  const rect = el && typeof el.getBoundingClientRect === 'function' ? el.getBoundingClientRect() : null;
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'getBoundingRectResponse',
+                      messageId: messageId,
+                      rect: rect
+                        ? {
+                            left: rect.left,
+                            top: rect.top,
+                            width: rect.width,
+                            height: rect.height
+                          }
+                        : null
+                    },
+                    '*'
+                  );
+                  break;
+                }
 
-    function setupResizeObserver() {
-        const container = document.getElementById('pci-container');
-        if (!container || !(container instanceof Element)) {
-          console.warn('ResizeObserver: document.container is not an Element');
-          return;
-        }
+                case 'clickOnSelector': {
+                  const messageId = data.params && data.params.messageId;
+                  const selector = data.params && data.params.selector;
+                  const el = selector ? deepQuerySelector(document, selector) : null;
+                  const success = !!el;
+                  if (el && typeof el.click === 'function') el.click();
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'clickSelectorResponse',
+                      messageId: messageId,
+                      success: success
+                    },
+                    '*'
+                  );
+                  break;
+                }
 
-        const resizeObserver = new ResizeObserver(() => {
-          notifyResize();
-        });
+                case 'clickOnElementByText': {
+                  const messageId = data.params && data.params.messageId;
+                  const text = data.params && data.params.text;
+                  const target = text ? deepFindElementByExactText(document, text) : null;
+                  const success = !!target;
+                  if (target && typeof target.click === 'function') target.click();
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'clickTextResponse',
+                      messageId: messageId,
+                      success: success
+                    },
+                    '*'
+                  );
+                  break;
+                }
 
-        resizeObserver.observe(container);
-      }
+                case 'setValueElement': {
+                  const messageId = data.params && data.params.messageId;
+                  const selector = data.params && data.params.selector;
+                  const value = data.params && data.params.value;
+                  const el = selector ? deepQuerySelector(document, selector) : null;
+                  let success = false;
+                  if (el && 'value' in el) {
+                    try {
+                      el.value = value;
+                      el.dispatchEvent(new Event('input', { bubbles: true }));
+                      el.dispatchEvent(new Event('change', { bubbles: true }));
+                      success = true;
+                    } catch (e) {
+                      success = false;
+                    }
+                  }
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'setValueResponse',
+                      messageId: messageId,
+                      success: success
+                    },
+                    '*'
+                  );
+                  break;
+                }
 
-      // Run setup once DOM is ready
-      if (document.readyState === 'loading') {
-        document.addEventListener('DOMContentLoaded', () => {
-          notifyResize(); // initial resize
-          setupResizeObserver();
-        });
-      } else {
-        notifyResize();
-        setupResizeObserver();
-      }
+                case 'console':
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'console',
+                      level: data.level,
+                      args: data.args
+                    },
+                    '*'
+                  );
+                  break;
+              }
+            });
 
-      window.addEventListener('load', () => {
-        notifyResize();
-      });
-      let lastResponseStr = '';
-      setInterval(() => {
-        if (PCIManager.interactionChangedViaEvent) return;
-        if (PCIManager.pciInstance && PCIManager.pciInstance.getResponse) {
-          const response = PCIManager.pciInstance.getResponse();
-	          if (response === undefined) {
-	            // Don't emit an initial empty on load; only emit a clear if we previously had a value
-	            if (!PCIManager.hadResponse) return;
-	            PCIManager.hadResponse = false;
-	            PCIManager.lastResponseStr = null;
-	            const state = PCIManager.pciInstance && typeof PCIManager.pciInstance.getState === 'function' ? PCIManager.pciInstance.getState() : null;
-	            window.parent.postMessage(
-	              {
-	                source: 'qti-pci-iframe',
-	                responseIdentifier: PCIManager.responseIdentifier,
-	                method: 'interactionChanged',
-	                params: { value: null, state: state }
-	              },
-	              '*'
-	            );
-	            return;
-	          }
-
-          const responseStr = JSON.stringify(response);
-
-	          if (responseStr !== PCIManager.lastResponseStr) {
-	            PCIManager.lastResponseStr = responseStr;
-	            PCIManager.hadResponse = true;
-	            const state = PCIManager.pciInstance && typeof PCIManager.pciInstance.getState === 'function' ? PCIManager.pciInstance.getState() : null;
-	            window.parent.postMessage(
-	              {
-	                source: 'qti-pci-iframe',
-	                responseIdentifier: PCIManager.responseIdentifier,
-	                method: 'interactionChanged',
-	                params: { value: response, state: state }
-	              },
-	              '*'
-	            );
-	          }
-        }
-      }, 500); // Check every 500ms
-  </script>
-</head>
-<body>
-  <div id="pci-container"></div>
-</body>
-</html>`;
+            let resizeTimeout;
+            let previousHeight = 0;
+            const notifyResize = () => {
+              const container = document.getElementById('pci-container');
+              const newHeight = container.scrollHeight + 100;
+              if (newHeight !== previousHeight) {
+                previousHeight = newHeight;
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(() => {
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'resize',
+                      height: newHeight,
+                      width: container.scrollWidth
+                    },
+                    '*'
+                  );
+                }, 100); // Adjust debounce time as needed
+              }
+            };
+
+            function setupResizeObserver() {
+              const container = document.getElementById('pci-container');
+              if (!container || !(container instanceof Element)) {
+                console.warn('ResizeObserver: document.container is not an Element');
+                return;
+              }
+
+              const resizeObserver = new ResizeObserver(() => {
+                notifyResize();
+              });
+
+              resizeObserver.observe(container);
+            }
+
+            // Run setup once DOM is ready
+            if (document.readyState === 'loading') {
+              document.addEventListener('DOMContentLoaded', () => {
+                notifyResize(); // initial resize
+                setupResizeObserver();
+              });
+            } else {
+              notifyResize();
+              setupResizeObserver();
+            }
+
+            window.addEventListener('load', () => {
+              notifyResize();
+            });
+            let lastResponseStr = '';
+            setInterval(() => {
+              if (PCIManager.interactionChangedViaEvent) return;
+              if (PCIManager.pciInstance && PCIManager.pciInstance.getResponse) {
+                const response = PCIManager.pciInstance.getResponse();
+                if (response === undefined) {
+                  // Don't emit an initial empty on load; only emit a clear if we previously had a value
+                  if (!PCIManager.hadResponse) return;
+                  PCIManager.hadResponse = false;
+                  PCIManager.lastResponseStr = null;
+                  const state =
+                    PCIManager.pciInstance && typeof PCIManager.pciInstance.getState === 'function'
+                      ? PCIManager.pciInstance.getState()
+                      : null;
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'interactionChanged',
+                      params: { value: null, state: state }
+                    },
+                    '*'
+                  );
+                  return;
+                }
+
+                const responseStr = JSON.stringify(response);
+
+                if (responseStr !== PCIManager.lastResponseStr) {
+                  PCIManager.lastResponseStr = responseStr;
+                  PCIManager.hadResponse = true;
+                  const state =
+                    PCIManager.pciInstance && typeof PCIManager.pciInstance.getState === 'function'
+                      ? PCIManager.pciInstance.getState()
+                      : null;
+                  window.parent.postMessage(
+                    {
+                      source: 'qti-pci-iframe',
+                      responseIdentifier: PCIManager.responseIdentifier,
+                      method: 'interactionChanged',
+                      params: { value: response, state: state }
+                    },
+                    '*'
+                  );
+                }
+              }
+            }, 500); // Check every 500ms
+          </script>
+        </head>
+        <body>
+          <div id="pci-container"></div>
+        </body>
+      </html>`
+    );
   }
   /**
    * Toggle the display of the correct response
@@ -7083,17 +6824,23 @@ var QtiHottext = class extends ActiveElementMixin(i2, "qti-hottext") {
   }
 };
 
+// ../qti-interactions/src/elements/qti-inline-choice/qti-inline-choice.styles.ts
+var styles2 = i`
+  :host {
+    display: block;
+    box-sizing: border-box;
+  }
+
+  slot {
+    display: inline;
+  }
+`;
+var qti_inline_choice_styles_default = styles2;
+
 // ../qti-interactions/src/elements/qti-inline-choice/qti-inline-choice.ts
-var QtiInlineChoice = class extends i2 {
-  static get styles() {
-    return [
-      i`
-        :host {
-          display: block;
-          cursor: pointer;
-        }
-      `
-    ];
+var QtiInlineChoice = class extends ActiveElementMixin(i2, "qti-inline-choice") {
+  static {
+    this.styles = qti_inline_choice_styles_default;
   }
   connectedCallback() {
     super.connectedCallback();
@@ -7857,4 +7604,4 @@ lit-html/node/directives/ref.js:
    * SPDX-License-Identifier: BSD-3-Clause
    *)
 */
-//# sourceMappingURL=chunk-NUNAE73U.js.map
+//# sourceMappingURL=chunk-2X7747Q4.js.map