@longsightgroup/qti3-player 0.1.2 → 0.2.1

package/dist/index.js

@@ -1,4 +1,4 @@
-import { assertQtiAttemptStateV1, createItemSession, parseQtiXml, visibleModalFeedback, } from "@longsightgroup/qti3-core";
+import { assertQtiAttemptStateV1, createItemSession, createCatalogSupportResolution, createTextToSpeechTraversal, parseQtiXml, visibleModalFeedback, } from "@longsightgroup/qti3-core";
 const HTMLElementBase = globalThis.HTMLElement ??
     class {
         replaceChildren() { }
@@ -7,14 +7,48 @@ const HTMLElementBase = globalThis.HTMLElement ??
         }
     };
 export class QtiAssessmentItemPlayer extends HTMLElementBase {
+    static get observedAttributes() {
+        return ["language-of-interface", "locale"];
+    }
     documentModel;
     session;
     resolveAsset;
     validationMessages = [];
+    languageOfInterfaceOverride;
+    messageOverrides = {};
     sessionControl = {
         validateResponses: true,
         showFeedback: true,
     };
+    get languageOfInterface() {
+        return (this.languageOfInterfaceOverride ??
+            this.getAttribute?.("language-of-interface") ??
+            this.getAttribute?.("locale") ??
+            defaultPlayerLocale(this));
+    }
+    set languageOfInterface(value) {
+        this.languageOfInterfaceOverride = normalizedLocale(value);
+        this.rerenderIfLoaded();
+    }
+    get locale() {
+        return this.languageOfInterface;
+    }
+    set locale(value) {
+        this.languageOfInterface = value;
+    }
+    get messages() {
+        return this.messageOverrides;
+    }
+    set messages(value) {
+        this.messageOverrides = value ?? {};
+        this.rerenderIfLoaded();
+    }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if ((name !== "language-of-interface" && name !== "locale") || oldValue === newValue) {
+            return;
+        }
+        this.rerenderIfLoaded();
+    }
     async loadXml(xml, options = {}) {
         this.sessionControl = {
             validateResponses: options.sessionControl?.validateResponses ?? true,
@@ -129,6 +163,16 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             state.validationMessages = cloneDiagnostics(this.validationMessages);
         return state;
     }
+    getTextToSpeechTraversal() {
+        if (!this.documentModel)
+            return undefined;
+        return createTextToSpeechTraversal(this.documentModel);
+    }
+    getCatalogSupportResolution(options = {}) {
+        if (!this.documentModel)
+            return undefined;
+        return createCatalogSupportResolution(this.documentModel, options);
+    }
     emitStateChange(state = this.serialize()) {
         if (!state)
             return;
@@ -137,6 +181,16 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     dispatchPlayerEvent(type, detail) {
         this.dispatchEvent(new CustomEvent(type, { detail }));
     }
+    playerMessages() {
+        return resolvePlayerMessages(this.languageOfInterface, this.messageOverrides);
+    }
+    rerenderIfLoaded() {
+        if (!this.documentModel)
+            return;
+        this.render();
+        this.renderValidationMessages();
+        this.updateAttemptAvailability();
+    }
     render() {
         const documentModel = this.documentModel;
         if (!documentModel)
@@ -144,6 +198,10 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         this.applyDefaultStyles();
         const root = document.createElement("article");
         root.className = "qti3-player";
+        if (documentModel.item.language) {
+            root.lang = documentModel.item.language;
+            root.setAttribute("xml:lang", documentModel.item.language);
+        }
         root.append(playerStyleElement());
         if (documentModel.item.prompt && documentModel.item.body.length === 0) {
             const prompt = document.createElement("p");
@@ -172,6 +230,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         this.replaceChildren(root);
     }
     renderInteraction(interaction) {
+        const messages = this.playerMessages();
         const field = document.createElement("section");
         field.className = `qti3-interaction qti3-${interaction.type}`;
         field.classList.add(...qtiSharedClassNames(interaction.attributes.class));
@@ -179,6 +238,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         if (interaction.responseIdentifier)
             field.dataset.responseIdentifier = interaction.responseIdentifier;
         const heading = document.createElement("h3");
+        copySafeAttributes(heading, interaction.promptAttributes ?? {});
         heading.textContent = interactionLabel(interaction);
         field.append(heading);
         if (interaction.responseIdentifier) {
@@ -197,7 +257,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         };
         const currentValue = responseIdentifier ? this.currentResponseValue(responseIdentifier) : null;
         if (interaction.type === "graphicOrder") {
-            field.append(renderGraphicOrderResponse(interaction, update, currentValue));
+            field.append(renderGraphicOrderResponse(interaction, update, currentValue, messages));
             return field;
         }
         if (usesOrderedResponse(interaction)) {
@@ -209,15 +269,15 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             return field;
         }
         if (interaction.type === "graphicAssociate") {
-            field.append(renderGraphicAssociateResponse(interaction, update, currentValue));
+            field.append(renderGraphicAssociateResponse(interaction, update, currentValue, messages));
             return field;
         }
         if (interaction.type === "match") {
-            field.append(renderMatchResponse(interaction, update, currentValue));
+            field.append(renderMatchResponse(interaction, update, currentValue, messages));
             return field;
         }
         if (usesPairResponse(interaction)) {
-            field.append(renderPairResponse(interaction, update, currentValue));
+            field.append(renderPairResponse(interaction, update, currentValue, messages));
             return field;
         }
         if (interaction.type === "hotspot" && interaction.object) {
@@ -253,7 +313,7 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
             return field;
         }
         if (interaction.type === "portableCustom") {
-            field.append(renderPortableCustomResponse(interaction, update, currentValue));
+            field.append(this.renderPortableCustomResponse(interaction, update, currentValue));
             return field;
         }
         if (interaction.type === "textEntry") {
@@ -295,6 +355,87 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         field.append(renderSelect(interaction, update, currentValue));
         return field;
     }
+    renderPortableCustomResponse(interaction, update, currentValue) {
+        const definition = interaction.portableCustom ?? portableCustomDefinitionFromAttributes(interaction);
+        const responseIdentifier = interaction.responseIdentifier ?? definition.responseIdentifier ?? "";
+        const currentState = responseIdentifier
+            ? this.currentInteractionState(responseIdentifier)
+            : undefined;
+        const group = document.createElement("div");
+        group.role = "group";
+        group.setAttribute("aria-label", interaction.prompt ?? "Portable custom interaction");
+        const host = document.createElement("div");
+        host.className = "qti3-portable-custom-host";
+        host.tabIndex = 0;
+        host.dataset.responseIdentifier = responseIdentifier;
+        host.dataset.typeIdentifier = definition.customInteractionTypeIdentifier ?? "";
+        host.dataset.module = definition.module ?? "";
+        host.dataset.qtiName = interaction.qtiName;
+        if (definition.interactionModules?.primaryConfiguration) {
+            host.dataset.primaryConfiguration = definition.interactionModules.primaryConfiguration;
+        }
+        if (definition.interactionModules?.secondaryConfiguration) {
+            host.dataset.secondaryConfiguration = definition.interactionModules.secondaryConfiguration;
+        }
+        if (currentState !== undefined)
+            host.dataset.state = JSON.stringify(currentState);
+        host.setAttribute("role", "application");
+        host.setAttribute("aria-label", interaction.prompt ?? "Portable custom interaction host");
+        host.style.border = "1px solid CanvasText";
+        host.style.padding = "0.5rem";
+        host.style.marginBlockEnd = "0.5rem";
+        if (definition.interactionMarkup.length > 0) {
+            const markup = document.createElement("div");
+            markup.className = "qti3-portable-custom-markup";
+            markup.append(...this.renderContentNodes(definition.interactionMarkup));
+            host.append(markup);
+        }
+        else {
+            host.textContent = "Portable custom interaction host";
+        }
+        const fallback = document.createElement("input");
+        fallback.type = "hidden";
+        fallback.className = "qti3-portable-custom-response";
+        fallback.hidden = true;
+        fallback.tabIndex = -1;
+        fallback.setAttribute("aria-hidden", "true");
+        fallback.value = scalarString(currentValue);
+        const handlePortableCustomEvent = (event) => {
+            const state = portableCustomEventState(event);
+            const value = portableCustomEventValue(event);
+            const validity = portableCustomEventValidity(event);
+            if (state !== undefined && responseIdentifier && this.session) {
+                this.session.setInteractionState(responseIdentifier, state);
+                host.dataset.state = JSON.stringify(state);
+            }
+            if (value !== undefined) {
+                fallback.value = String(value ?? "");
+                update(value);
+            }
+            if (validity && responseIdentifier) {
+                this.setPortableCustomValidity(responseIdentifier, validity.valid, validity.message);
+                this.emitStateChange();
+            }
+            if (value === undefined && state !== undefined && !validity)
+                this.emitStateChange();
+        };
+        host.addEventListener("qti3-portable-custom-response", handlePortableCustomEvent);
+        host.addEventListener("qti3-pci-response", handlePortableCustomEvent);
+        host.addEventListener("qti3-portable-custom-state", handlePortableCustomEvent);
+        host.addEventListener("qti3-portable-custom-validity", handlePortableCustomEvent);
+        queueMicrotask(() => {
+            this.dispatchPlayerEvent("qti-portable-custom-mount", {
+                responseIdentifier,
+                interaction,
+                definition,
+                host,
+                value: currentValue,
+                state: currentState,
+            });
+        });
+        group.append(host, fallback);
+        return group;
+    }
     renderEmbeddedInteraction(interaction) {
         if (interaction.type !== "inlineChoice" && interaction.type !== "textEntry") {
             return this.renderInteraction(interaction);
@@ -346,10 +487,13 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
         }
         if (node.qtiName === "qti-prompt") {
             const prompt = document.createElement("p");
-            prompt.className = "qti3-item-prompt";
+            copySafeAttributes(prompt, node.attributes);
+            prompt.classList.add("qti3-item-prompt");
             prompt.append(...this.renderContentNodes(node.children));
             return [prompt];
         }
+        if (unsafeContentElements.has(node.qtiName))
+            return [];
         const elementName = contentElementName(node.qtiName);
         if (!elementName)
             return this.renderContentNodes(node.children);
@@ -489,6 +633,26 @@ export class QtiAssessmentItemPlayer extends HTMLElementBase {
     currentResponseValue(identifier) {
         return this.session?.serialize().responses[identifier] ?? null;
     }
+    currentInteractionState(identifier) {
+        return this.session?.serialize().interactionStates?.[identifier];
+    }
+    setPortableCustomValidity(responseIdentifier, valid, message) {
+        if (valid) {
+            this.clearValidationMessage(responseIdentifier);
+            return;
+        }
+        const diagnostic = {
+            code: "response.portableCustom.validity",
+            severity: "error",
+            message: message?.trim() || `${responseIdentifier} is not valid.`,
+            path: responseIdentifier,
+        };
+        this.validationMessages = [
+            ...this.validationMessages.filter((entry) => entry.path !== responseIdentifier),
+            diagnostic,
+        ];
+        this.renderValidationMessages();
+    }
     applyDefaultStyles() {
         this.style.color = "CanvasText";
         this.style.backgroundColor = "Canvas";
@@ -608,6 +772,137 @@ export function defineQtiAssessmentItemPlayer() {
         customElements.define("qti-assessment-item-player", QtiAssessmentItemPlayer);
     }
 }
+const defaultEnglishPlayerMessages = {
+    remove: () => "Remove",
+    removePair: ({ label }) => `Remove ${label}`,
+};
+const playerMessages = {
+    defaultEnglish: defaultEnglishPlayerMessages,
+    spanish: playerMessageCatalog("Quitar", ({ label }) => `Quitar ${label}`),
+    swedish: playerMessageCatalog("Ta bort", ({ label }) => `Ta bort ${label}`),
+    german: playerMessageCatalog("Entfernen", ({ label }) => `${label} entfernen`),
+    portuguese: playerMessageCatalog("Remover", ({ label }) => `Remover ${label}`),
+    french: playerMessageCatalog("Supprimer", ({ label }) => `Supprimer ${label}`),
+};
+const builtInPlayerMessageCatalogs = new Map([
+    ["en", playerMessages.defaultEnglish],
+    ["es", playerMessages.spanish],
+    ["es-es", playerMessages.spanish],
+    ["es-mx", playerMessages.spanish],
+    ["sv", playerMessages.swedish],
+    ["sv-se", playerMessages.swedish],
+    ["de", playerMessages.german],
+    ["de-de", playerMessages.german],
+    ["pt", playerMessages.portuguese],
+    ["pt-br", playerMessages.portuguese],
+    ["pt-pt", playerMessages.portuguese],
+    ["fr", playerMessages.french],
+    ["fr-ca", playerMessages.french],
+    ["fr-fr", playerMessages.french],
+]);
+function playerMessageCatalog(remove, removePair) {
+    return {
+        remove: () => remove,
+        removePair,
+    };
+}
+function resolvePlayerMessages(locale, overrides) {
+    const catalog = builtInPlayerMessageCatalog(locale);
+    return {
+        remove: overrides.remove ?? catalog?.remove ?? defaultEnglishPlayerMessages.remove,
+        removePair: overrides.removePair ?? catalog?.removePair ?? defaultEnglishPlayerMessages.removePair,
+    };
+}
+function builtInPlayerMessageCatalog(locale) {
+    for (const candidate of localeFallbacks(locale)) {
+        const catalog = builtInPlayerMessageCatalogs.get(candidate);
+        if (catalog)
+            return catalog;
+    }
+    return undefined;
+}
+function localeFallbacks(locale) {
+    const normalized = normalizedLocale(locale)?.toLowerCase();
+    if (!normalized)
+        return ["en"];
+    const parts = normalized.split("-");
+    const fallbacks = [];
+    for (let length = parts.length; length > 0; length -= 1) {
+        fallbacks.push(parts.slice(0, length).join("-"));
+    }
+    return fallbacks.includes("en") ? fallbacks : [...fallbacks, "en"];
+}
+function normalizedLocale(value) {
+    const trimmed = value?.trim();
+    if (!trimmed)
+        return undefined;
+    try {
+        return Intl.getCanonicalLocales(trimmed)[0] ?? trimmed;
+    }
+    catch {
+        return trimmed;
+    }
+}
+function defaultPlayerLocale(host) {
+    const elementLanguage = normalizedLocale(host?.getAttribute("lang"));
+    if (elementLanguage)
+        return elementLanguage;
+    const navigatorLanguages = globalThis.navigator?.languages ?? [];
+    for (const language of navigatorLanguages) {
+        const normalized = normalizedLocale(language);
+        if (normalized)
+            return normalized;
+    }
+    return (normalizedLocale(globalThis.navigator?.language) ??
+        normalizedLocale(host?.closest("[lang]")?.getAttribute("lang")) ??
+        normalizedLocale(host?.ownerDocument?.documentElement.lang) ??
+        normalizedLocale(globalThis.document?.documentElement.lang) ??
+        "en");
+}
+function removeButton(label, messages) {
+    const safeLabel = label?.trim() || messages.remove();
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = "qti3-icon-button qti3-remove-button";
+    button.title = messages.remove();
+    button.setAttribute("aria-label", messages.removePair({ label: safeLabel }));
+    button.append(trashIcon());
+    return button;
+}
+function inlineIcon(className, paths) {
+    const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+    svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    svg.setAttribute("width", "24");
+    svg.setAttribute("height", "24");
+    svg.setAttribute("viewBox", "0 0 24 24");
+    svg.setAttribute("fill", "none");
+    svg.setAttribute("stroke", "currentColor");
+    svg.setAttribute("stroke-width", "2");
+    svg.setAttribute("stroke-linecap", "round");
+    svg.setAttribute("stroke-linejoin", "round");
+    svg.setAttribute("aria-hidden", "true");
+    svg.setAttribute("focusable", "false");
+    svg.setAttribute("class", className);
+    for (const entry of paths) {
+        const path = document.createElementNS("http://www.w3.org/2000/svg", "path");
+        if (typeof entry === "string") {
+            path.setAttribute("d", entry);
+        }
+        else {
+            path.setAttribute("d", entry.d);
+            if (entry.stroke) {
+                path.setAttribute("stroke", entry.stroke);
+                path.style.stroke = entry.stroke;
+            }
+            if (entry.fill) {
+                path.setAttribute("fill", entry.fill);
+                path.style.fill = entry.fill;
+            }
+        }
+        svg.append(path);
+    }
+    return svg;
+}
 function renderChoice(interaction, update, currentValue) {
     const group = responseGroup("qti3-choice-group");
     const multiple = interaction.responseCardinality === "multiple" || interaction.responseCardinality === "ordered";
@@ -671,19 +966,32 @@ function responseGroup(className) {
     group.className = ["qti3-response-group", className].filter(Boolean).join(" ");
     return group;
 }
-const movementGlyphs = {
-    up: "\u2191",
-    down: "\u2193",
-    left: "\u2190",
-    right: "\u2192",
+function trashIcon() {
+    return inlineIcon("qti3-trash-icon", [
+        { d: "M0 0h24v24H0z", stroke: "none", fill: "none" },
+        "M4 7l16 0",
+        "M10 11l0 6",
+        "M14 11l0 6",
+        "M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12",
+        "M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3",
+    ]);
+}
+const movementIconPaths = {
+    up: ["M12 5l0 14", "M18 11l-6 -6", "M6 11l6 -6"],
+    down: ["M12 5l0 14", "M18 13l-6 6", "M6 13l6 6"],
+    left: ["M5 12l14 0", "M5 12l6 6", "M5 12l6 -6"],
+    right: ["M5 12l14 0", "M13 18l6 -6", "M13 6l6 6"],
 };
+function movementIcon(direction) {
+    return inlineIcon("qti3-movement-icon", movementIconPaths[direction]);
+}
 function movementButton(direction, accessibleName, onClick) {
     const button = document.createElement("button");
     button.type = "button";
-    button.className = "qti3-icon-button";
+    button.className = "qti3-icon-button qti3-move-button";
     button.dataset.moveDirection = direction;
-    button.textContent = movementGlyphs[direction];
     button.setAttribute("aria-label", accessibleName);
+    button.append(movementIcon(direction));
     button.addEventListener("click", onClick);
     return button;
 }
@@ -888,7 +1196,7 @@ function renderOrderedResponse(interaction, update, currentValue) {
     group.append(list);
     return group;
 }
-function renderPairResponse(interaction, update, currentValue) {
+function renderPairResponse(interaction, update, currentValue, messages) {
     const group = responseGroup();
     appendGraphicContext(group, interaction);
     const sources = sourceChoices(interaction);
@@ -947,10 +1255,7 @@ function renderPairResponse(interaction, update, currentValue) {
             item.className = "qti3-pair-chip";
             const text = document.createElement("span");
             text.textContent = `${choiceText(sources, source)} to ${choiceText(targets, target)}`;
-            const remove = document.createElement("button");
-            remove.type = "button";
-            remove.textContent = "Remove";
-            remove.setAttribute("aria-label", `Remove ${text.textContent}`);
+            const remove = removeButton(text.textContent, messages);
             remove.addEventListener("click", () => {
                 const index = selectedPairs.indexOf(pair);
                 if (index >= 0)
@@ -1005,7 +1310,7 @@ function renderPairResponse(interaction, update, currentValue) {
     group.append(selector, pairList);
     return group;
 }
-function renderMatchResponse(interaction, update, currentValue) {
+function renderMatchResponse(interaction, update, currentValue, messages) {
     const group = responseGroup();
     const sources = sourceChoices(interaction);
     const targets = targetChoices(interaction);
@@ -1057,10 +1362,7 @@ function renderMatchResponse(interaction, update, currentValue) {
             item.className = "qti3-pair-chip";
             const text = document.createElement("span");
             text.textContent = label;
-            const remove = document.createElement("button");
-            remove.type = "button";
-            remove.textContent = "Remove";
-            remove.setAttribute("aria-label", `Remove ${label}`);
+            const remove = removeButton(label, messages);
             remove.addEventListener("click", () => {
                 removePair(pair);
                 syncPressed();
@@ -1191,7 +1493,7 @@ function pairRegionLabels(interaction) {
         return { source: "Prompt", target: "Match" };
     return { source: "Source", target: "Target" };
 }
-function renderGraphicOrderResponse(interaction, update, currentValue) {
+function renderGraphicOrderResponse(interaction, update, currentValue, messages) {
     const group = responseGroup();
     const width = objectWidth(interaction);
     const height = objectHeight(interaction);
@@ -1352,10 +1654,7 @@ function renderGraphicOrderResponse(interaction, update, currentValue) {
             up.disabled = index === 0;
             const down = movementButton("down", movementLabel(choiceLabel, "down"), () => moveHotspot(choice.identifier, 1));
             down.disabled = index === currentChoices.length - 1;
-            const remove = document.createElement("button");
-            remove.type = "button";
-            remove.textContent = "Remove";
-            remove.setAttribute("aria-label", `Remove ${choiceLabel}`);
+            const remove = removeButton(choiceLabel, messages);
             remove.addEventListener("click", () => removeHotspot(choice.identifier));
             item.append(label, up, down, remove);
             return item;
@@ -1399,7 +1698,7 @@ function renderGraphicOrderResponse(interaction, update, currentValue) {
     group.append(surface, summary, list);
     return group;
 }
-function renderGraphicAssociateResponse(interaction, update, currentValue) {
+function renderGraphicAssociateResponse(interaction, update, currentValue, messages) {
     const group = responseGroup();
     const width = objectWidth(interaction);
     const height = objectHeight(interaction);
@@ -1407,6 +1706,12 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
     const selectedPairs = valueToStrings(currentValue);
     const maximumAssociations = interaction.responseCardinality === "single" ? 1 : maximumAllowedResponses(interaction);
     let selectedHotspot;
+    let draggedHotspot;
+    let dragPointerId;
+    let dragStart;
+    let dragStarted = false;
+    let suppressNextClick = false;
+    let previewLine;
     const surface = document.createElement("div");
     surface.className = "qti3-graphic-associate-surface";
     surface.role = "group";
@@ -1496,6 +1801,52 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
         renderState();
         commit();
     };
+    const authoredPointFromPointer = (event) => {
+        const rect = surface.getBoundingClientRect();
+        return {
+            x: Math.max(0, Math.min(width, ((event.clientX - rect.left) / rect.width) * width)),
+            y: Math.max(0, Math.min(height, ((event.clientY - rect.top) / rect.height) * height)),
+        };
+    };
+    const removePreviewLine = () => {
+        previewLine?.remove();
+        previewLine = undefined;
+    };
+    const suppressFollowingClick = () => {
+        suppressNextClick = true;
+        setTimeout(() => {
+            suppressNextClick = false;
+        }, 0);
+    };
+    const updatePreviewLine = (source, event) => {
+        const start = hotspotCenter(source, width, height);
+        const end = authoredPointFromPointer(event);
+        if (!previewLine) {
+            previewLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
+            previewLine.dataset.preview = "true";
+            connections.append(previewLine);
+        }
+        previewLine.setAttribute("x1", String(start.x));
+        previewLine.setAttribute("y1", String(start.y));
+        previewLine.setAttribute("x2", String(end.x));
+        previewLine.setAttribute("y2", String(end.y));
+    };
+    const hotspotFromPointer = (event) => {
+        const element = document.elementFromPoint(event.clientX, event.clientY);
+        const button = element?.closest(".qti3-graphic-associate-hotspot");
+        const identifier = button?.dataset.choiceIdentifier;
+        return choices.find((choice) => choice.identifier === identifier);
+    };
+    const finishDrag = (event, source) => {
+        const target = hotspotFromPointer(event);
+        removePreviewLine();
+        if (target) {
+            addPair(source, target);
+            return;
+        }
+        selectedHotspot = undefined;
+        renderState();
+    };
     const chooseHotspot = (choice) => {
         if (!selectedHotspot) {
             selectedHotspot = choice;
@@ -1550,10 +1901,7 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
             item.className = "qti3-pair-chip";
             const text = document.createElement("span");
             text.textContent = pairLabel;
-            const remove = document.createElement("button");
-            remove.type = "button";
-            remove.textContent = "Remove";
-            remove.setAttribute("aria-label", `Remove ${pairLabel}`);
+            const remove = removeButton(pairLabel, messages);
             remove.addEventListener("click", () => removePair(pair));
             item.append(text, remove);
             return item;
@@ -1569,8 +1917,66 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
         button.setAttribute("aria-pressed", "false");
         button.setAttribute("aria-label", hotspotAccessibleLabel(choice, index));
         button.style.position = "absolute";
+        button.style.touchAction = "none";
         placeHotspotButton(button, choice, width, height);
-        button.addEventListener("click", () => chooseHotspot(choice));
+        button.addEventListener("click", (event) => {
+            if (suppressNextClick) {
+                suppressNextClick = false;
+                event.preventDefault();
+                return;
+            }
+            chooseHotspot(choice);
+        });
+        button.addEventListener("pointerdown", (event) => {
+            if (event.button !== 0)
+                return;
+            draggedHotspot = choice;
+            dragPointerId = event.pointerId;
+            dragStart = { x: event.clientX, y: event.clientY };
+            dragStarted = false;
+            button.setPointerCapture(event.pointerId);
+        });
+        button.addEventListener("pointermove", (event) => {
+            if (dragPointerId !== event.pointerId || !draggedHotspot || !dragStart)
+                return;
+            const moved = Math.hypot(event.clientX - dragStart.x, event.clientY - dragStart.y);
+            if (!dragStarted && moved < 4)
+                return;
+            if (!dragStarted) {
+                dragStarted = true;
+                suppressFollowingClick();
+                selectedHotspot = draggedHotspot;
+                renderState();
+            }
+            updatePreviewLine(draggedHotspot, event);
+            event.preventDefault();
+        });
+        button.addEventListener("pointerup", (event) => {
+            if (dragPointerId !== event.pointerId || !draggedHotspot)
+                return;
+            const source = draggedHotspot;
+            draggedHotspot = undefined;
+            dragPointerId = undefined;
+            dragStart = undefined;
+            button.releasePointerCapture(event.pointerId);
+            if (!dragStarted)
+                return;
+            dragStarted = false;
+            suppressFollowingClick();
+            finishDrag(event, source);
+            event.preventDefault();
+        });
+        button.addEventListener("pointercancel", (event) => {
+            if (dragPointerId !== event.pointerId)
+                return;
+            draggedHotspot = undefined;
+            dragPointerId = undefined;
+            dragStart = undefined;
+            dragStarted = false;
+            removePreviewLine();
+            selectedHotspot = undefined;
+            renderState();
+        });
         button.addEventListener("keydown", (event) => {
             if (event.key === "ArrowRight" || event.key === "ArrowDown") {
                 event.preventDefault();
@@ -1592,6 +1998,11 @@ function renderGraphicAssociateResponse(interaction, update, currentValue) {
     return group;
 }
 function renderGapMatchResponse(interaction, update, currentValue) {
+    if (interaction.type === "graphicGapMatch" &&
+        interaction.object &&
+        interaction.choices.some((choice) => choice.role === "hotspot")) {
+        return renderGraphicGapMatchResponse(interaction, update, currentValue);
+    }
     const group = responseGroup();
     appendGraphicContext(group, interaction);
     const sources = sourceChoices(interaction);
@@ -1701,6 +2112,154 @@ function renderGapMatchResponse(interaction, update, currentValue) {
     group.append(sourceRegion, gapRegion);
     return group;
 }
+function renderGraphicGapMatchResponse(interaction, update, currentValue) {
+    const group = responseGroup();
+    const width = objectWidth(interaction);
+    const height = objectHeight(interaction);
+    const sources = sourceChoices(interaction);
+    const gaps = targetChoices(interaction).filter((choice) => choice.role === "hotspot");
+    const assignments = new Map();
+    let selectedSource;
+    let draggedSource;
+    for (const pair of valueToStrings(currentValue)) {
+        const [sourceIdentifier, gapIdentifier] = pair.split(/\s+/);
+        const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+        if (source && gapIdentifier)
+            assignments.set(gapIdentifier, source);
+    }
+    const surface = document.createElement("div");
+    surface.className = "qti3-graphic-context qti3-graphic-gap-match-surface";
+    surface.role = "group";
+    surface.setAttribute("aria-label", `${readableType(interaction.type)} target image`);
+    surface.style.position = "relative";
+    surface.style.inlineSize = `${width}px`;
+    surface.style.aspectRatio = `${width} / ${height}`;
+    surface.style.maxInlineSize = "100%";
+    surface.style.border = "1px solid CanvasText";
+    surface.style.background = "Canvas";
+    surface.style.overflow = "visible";
+    surface.style.setProperty("--qti3-graphic-gap-label-block-size", `${graphicGapLabelBlockSize(sources)}rem`);
+    if (interaction.object?.data && objectIsImage(interaction.object)) {
+        const image = document.createElement("img");
+        image.src = interaction.object.data;
+        image.alt = interaction.object.text || `${readableType(interaction.type)} image`;
+        image.style.position = "absolute";
+        image.style.inset = "0";
+        image.style.inlineSize = "100%";
+        image.style.blockSize = "100%";
+        image.style.objectFit = "contain";
+        image.style.pointerEvents = "none";
+        surface.append(image);
+    }
+    const sourceRegion = tokenRegion(`${readableType(interaction.type)} choices`);
+    sourceRegion.classList.add("qti3-graphic-gap-source-region");
+    const choicesWidth = positivePixelValue(interaction.attributes["data-choices-container-width"]);
+    if (choicesWidth !== undefined)
+        sourceRegion.style.maxInlineSize = `${choicesWidth}px`;
+    const summary = document.createElement("p");
+    summary.className = "qti3-selection-summary";
+    summary.setAttribute("aria-live", "polite");
+    const commit = () => {
+        update([...assignments.entries()].map(([gapIdentifier, source]) => `${source.identifier} ${gapIdentifier}`));
+    };
+    const syncSources = () => {
+        for (const button of sourceRegion.querySelectorAll("button")) {
+            button.setAttribute("aria-pressed", button.dataset.choiceIdentifier === selectedSource?.identifier ? "true" : "false");
+        }
+    };
+    const clearSourceIfSingleUse = (source, keepGapIdentifier) => {
+        if (parseUnlimitedMaximum(source.attributes["match-max"]) !== 1)
+            return;
+        for (const [gapIdentifier, assigned] of assignments.entries()) {
+            if (gapIdentifier !== keepGapIdentifier && assigned.identifier === source.identifier) {
+                assignments.delete(gapIdentifier);
+            }
+        }
+    };
+    const assign = (gap, sourceIdentifier) => {
+        const source = sources.find((choice) => choice.identifier === sourceIdentifier);
+        if (!source)
+            return;
+        clearSourceIfSingleUse(source, gap.identifier);
+        assignments.set(gap.identifier, source);
+        selectedSource = undefined;
+        syncSources();
+        renderTargets();
+        commit();
+    };
+    const targetLabel = (gap, index) => gap.attributes["aria-label"] || gap.attributes["hotspot-label"] || `Target ${index + 1}`;
+    const renderTargetButton = (gap, index) => {
+        const assigned = assignments.get(gap.identifier);
+        const label = targetLabel(gap, index);
+        const button = document.createElement("button");
+        button.type = "button";
+        button.className = "qti3-hotspot-button qti3-graphic-gap-hotspot";
+        button.dataset.gapIdentifier = gap.identifier;
+        button.dataset.selected = assigned ? "true" : "false";
+        button.setAttribute("aria-label", assigned ? `${label}, assigned ${assigned.text}` : `${label}, empty`);
+        button.addEventListener("dragover", (event) => {
+            event.preventDefault();
+            button.classList.add("qti3-drop-target");
+        });
+        button.addEventListener("dragleave", () => button.classList.remove("qti3-drop-target"));
+        button.addEventListener("drop", (event) => {
+            event.preventDefault();
+            button.classList.remove("qti3-drop-target");
+            assign(gap, event.dataTransfer?.getData("text/plain") || draggedSource);
+        });
+        button.addEventListener("click", () => assign(gap, selectedSource?.identifier));
+        button.addEventListener("keydown", (event) => {
+            if (event.key !== "Delete" && event.key !== "Backspace")
+                return;
+            if (!assignments.has(gap.identifier))
+                return;
+            event.preventDefault();
+            assignments.delete(gap.identifier);
+            renderTargets();
+            commit();
+        });
+        button.style.position = "absolute";
+        placeHotspotButton(button, gap, width, height);
+        if (assigned) {
+            const assignedLabel = document.createElement("span");
+            assignedLabel.className = "qti3-graphic-gap-label";
+            assignedLabel.textContent = assigned.text;
+            button.append(assignedLabel);
+        }
+        return button;
+    };
+    const renderTargets = () => {
+        surface.querySelectorAll(".qti3-graphic-gap-hotspot").forEach((target) => target.remove());
+        for (const [index, gap] of gaps.entries()) {
+            surface.append(renderTargetButton(gap, index));
+        }
+        summary.textContent =
+            assignments.size > 0
+                ? `${assignments.size} ${assignments.size === 1 ? "label" : "labels"} placed.`
+                : "No labels placed.";
+    };
+    for (const source of sources) {
+        const button = tokenButton(source);
+        button.draggable = true;
+        button.addEventListener("dragstart", (event) => {
+            draggedSource = source.identifier;
+            event.dataTransfer?.setData("text/plain", source.identifier);
+            event.dataTransfer?.setDragImage(button, 8, 8);
+        });
+        button.addEventListener("dragend", () => {
+            draggedSource = undefined;
+            syncSources();
+        });
+        button.addEventListener("click", () => {
+            selectedSource = source;
+            syncSources();
+        });
+        sourceRegion.append(button);
+    }
+    renderTargets();
+    group.append(surface, sourceRegion, summary);
+    return group;
+}
 function renderSelect(interaction, update, currentValue) {
     const select = document.createElement("select");
     select.className = "qti3-inline-select";
@@ -2019,10 +2578,9 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
     const height = objectAssetHeight(stageObject, 300);
     const movableWidth = objectAssetWidth(movableObject, Math.max(32, Math.round(width * 0.12)));
     const movableHeight = objectAssetHeight(movableObject, Math.max(32, Math.round(height * 0.12)));
-    let point = parsePointValue(currentValue) ?? {
-        x: Math.round(width / 2),
-        y: Math.round(height / 2),
-    };
+    const parsedPoint = parsePointValue(currentValue);
+    let point = parsedPoint ?? { x: 0, y: 0 };
+    let isPlaced = Boolean(parsedPoint);
     const stage = document.createElement("div");
     stage.className = "qti3-position-object-stage";
     stage.tabIndex = 0;
@@ -2035,8 +2593,9 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
     stage.style.border = "1px solid CanvasText";
     stage.style.background = "Canvas";
     stage.style.color = "CanvasText";
-    stage.style.overflow = "hidden";
+    stage.style.overflow = "visible";
     stage.style.touchAction = "none";
+    stage.style.marginBlockEnd = `${Math.ceil(movableHeight + 12)}px`;
     if (stageObject?.data && objectIsImage(stageObject)) {
         const image = document.createElement("img");
         image.src = stageObject.data;
@@ -2085,10 +2644,22 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
         point.y = Math.max(0, Math.min(height, point.y));
     };
     const commit = () => {
+        if (!isPlaced)
+            return;
         update(pointToString(point));
     };
     const syncMarker = () => {
+        if (!isPlaced) {
+            marker.dataset.placed = "false";
+            marker.style.insetInlineStart = `${Math.round(movableWidth / 2)}px`;
+            marker.style.insetBlockStart = `calc(100% + ${Math.round(movableHeight / 2 + 8)}px)`;
+            coordinate.value = "";
+            coordinate.textContent = "Object not placed";
+            stage.setAttribute("aria-label", `${readableType(interaction.type)} placement stage, object not placed`);
+            return;
+        }
         clamp();
+        marker.dataset.placed = "true";
         marker.style.insetInlineStart = `${percent(point.x, width)}%`;
         marker.style.insetBlockStart = `${percent(point.y, height)}%`;
         coordinate.value = pointToString(point);
@@ -2101,9 +2672,17 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
             x: Math.round(((event.clientX - rect.left) / rect.width) * width),
             y: Math.round(((event.clientY - rect.top) / rect.height) * height),
         };
+        isPlaced = true;
         clamp();
     };
+    const ensureKeyboardPoint = () => {
+        if (isPlaced)
+            return;
+        point = { x: 0, y: 0 };
+        isPlaced = true;
+    };
     const moveBy = (dx, dy, emit = true) => {
+        ensureKeyboardPoint();
         point.x += dx;
         point.y += dy;
         syncMarker();
@@ -2120,24 +2699,32 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
             moveBy(0, -step, false);
         else if (event.key === "ArrowDown")
             moveBy(0, step, false);
-        else if (event.key === "Enter" || event.key === " ")
+        else if (event.key === "Enter" || event.key === " ") {
+            ensureKeyboardPoint();
+            syncMarker();
             commit();
+        }
         else
             return;
         event.preventDefault();
     };
     let dragging = false;
+    let dragMoved = false;
     marker.addEventListener("pointerdown", (event) => {
         dragging = true;
+        dragMoved = false;
         marker.setPointerCapture(event.pointerId);
         marker.style.cursor = "grabbing";
-        pointFromPointer(event);
-        syncMarker();
+        if (isPlaced) {
+            pointFromPointer(event);
+            syncMarker();
+        }
         event.preventDefault();
     });
     marker.addEventListener("pointermove", (event) => {
         if (!dragging)
             return;
+        dragMoved = true;
         pointFromPointer(event);
         syncMarker();
     });
@@ -2147,9 +2734,11 @@ function renderPositionObjectResponse(interaction, update, currentValue) {
         dragging = false;
         marker.releasePointerCapture(event.pointerId);
         marker.style.cursor = "grab";
-        pointFromPointer(event);
-        syncMarker();
-        commit();
+        if (dragMoved || isPlaced) {
+            pointFromPointer(event);
+            syncMarker();
+            commit();
+        }
     });
     marker.addEventListener("pointercancel", () => {
         dragging = false;
@@ -2317,45 +2906,6 @@ function renderDrawingResponse(interaction, update, currentValue) {
     group.append(surface, summary, tools);
     return group;
 }
-function renderPortableCustomResponse(interaction, update, currentValue) {
-    const group = document.createElement("div");
-    group.role = "group";
-    group.setAttribute("aria-label", interaction.prompt ?? "Portable custom interaction");
-    const host = document.createElement("div");
-    host.className = "qti3-portable-custom-host";
-    host.tabIndex = 0;
-    host.dataset.responseIdentifier = interaction.responseIdentifier ?? "";
-    host.dataset.typeIdentifier = interaction.attributes["custom-interaction-type-identifier"] ?? "";
-    host.dataset.module = interaction.attributes.module ?? "";
-    host.dataset.qtiName = interaction.qtiName;
-    host.setAttribute("role", "application");
-    host.setAttribute("aria-label", interaction.prompt ?? "Portable custom interaction host");
-    host.textContent = "Portable custom interaction host";
-    host.style.border = "1px solid CanvasText";
-    host.style.padding = "0.5rem";
-    host.style.marginBlockEnd = "0.5rem";
-    const fallback = document.createElement("input");
-    fallback.value = scalarString(currentValue);
-    fallback.setAttribute("aria-label", `${interaction.prompt ?? "Portable custom"} response`);
-    fallback.addEventListener("input", () => update(fallback.value));
-    fallback.addEventListener("change", () => update(fallback.value));
-    host.addEventListener("qti3-portable-custom-response", (event) => {
-        const value = portableCustomEventValue(event);
-        if (value === undefined)
-            return;
-        fallback.value = String(value ?? "");
-        update(value);
-    });
-    host.addEventListener("qti3-pci-response", (event) => {
-        const value = portableCustomEventValue(event);
-        if (value === undefined)
-            return;
-        fallback.value = String(value ?? "");
-        update(value);
-    });
-    group.append(host, fallback);
-    return group;
-}
 function renderHotspotResponse(interaction, update, currentValue) {
     const group = responseGroup();
     const surface = document.createElement("div");
@@ -2490,6 +3040,7 @@ function configureMediaElement(media, interaction, object, label, mediaResponse)
         sourceElement.src = source.src;
         if (source.type)
             sourceElement.type = source.type;
+        copySafeMediaChildAttributes(sourceElement, source.attributes, sourceAttributeNames);
         media.append(sourceElement);
     }
     for (const track of object.tracks) {
@@ -2505,6 +3056,7 @@ function configureMediaElement(media, interaction, object, label, mediaResponse)
             trackElement.label = track.label;
         if (track.default)
             trackElement.default = true;
+        copySafeMediaChildAttributes(trackElement, track.attributes, trackAttributeNames);
         media.append(trackElement);
     }
     bindMediaPlayCount(media, interaction, mediaResponse);
@@ -2516,6 +3068,23 @@ function copyMediaDataAttributes(element, attributes) {
         element.setAttribute(name, value);
     }
 }
+const sourceAttributeNames = new Set(["src", "srcset", "type"]);
+const trackAttributeNames = new Set(["default", "kind", "label", "src", "srclang"]);
+function copySafeMediaChildAttributes(element, attributes, controlledNames) {
+    for (const [name, value] of Object.entries(attributes)) {
+        const normalizedName = name.toLowerCase();
+        if (controlledNames.has(normalizedName))
+            continue;
+        if (normalizedName === "class" ||
+            normalizedName === "id" ||
+            normalizedName === "title" ||
+            normalizedName === "media" ||
+            normalizedName === "sizes" ||
+            normalizedName.startsWith("data-")) {
+            element.setAttribute(name, value);
+        }
+    }
+}
 function mediaElementType(object) {
     const types = [object.type, ...object.sources.map((source) => source.type)].filter((value) => Boolean(value));
     if (types.some((value) => value.startsWith("audio/")))
@@ -2625,6 +3194,10 @@ function choiceText(choices, identifier) {
 }
 function sourceChoices(interaction) {
     const choices = choicesOrFallback(interaction);
+    if (interaction.type === "gapMatch" || interaction.type === "graphicGapMatch") {
+        const gapChoices = choices.filter((choice) => choice.role === "gapChoice");
+        return gapChoices.length > 0 ? gapChoices : choices;
+    }
     const sourceRoles = new Set(["associableChoice", "matchSource", "gapChoice", "hotspot"]);
     const sources = choices.filter((choice) => sourceRoles.has(choice.role));
     return sources.length > 0 ? sources : choices;
@@ -2797,6 +3370,15 @@ function dimension(value, fallback) {
     const parsed = Number(value);
     return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
 }
+function positivePixelValue(value) {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) && parsed > 0 ? parsed : undefined;
+}
+function graphicGapLabelBlockSize(sources) {
+    const maxLength = Math.max(0, ...sources.map((source) => (source.text || source.identifier).trim().length));
+    const estimatedLines = Math.max(1, Math.ceil(maxLength / 22));
+    return Number((estimatedLines * 0.95 + 0.9).toFixed(2));
+}
 function placeHotspotButton(button, choice, width, height) {
     const coords = (choice.attributes.coords ?? "")
         .split(",")
@@ -3076,6 +3658,20 @@ function polylineElement(points) {
     line.setAttribute("stroke-linejoin", "round");
     return line;
 }
+function portableCustomDefinitionFromAttributes(interaction) {
+    return {
+        responseIdentifier: interaction.responseIdentifier,
+        customInteractionTypeIdentifier: interaction.attributes["custom-interaction-type-identifier"],
+        module: interaction.attributes.module,
+        interactionMarkup: [],
+        templateVariables: [],
+        contextVariables: [],
+        stylesheets: [],
+        dataAttributes: Object.fromEntries(Object.entries(interaction.attributes).filter(([name]) => name.startsWith("data-"))),
+        attributes: interaction.attributes,
+        source: interaction.source,
+    };
+}
 function portableCustomEventValue(event) {
     if (!("detail" in event))
         return undefined;
@@ -3087,13 +3683,51 @@ function portableCustomEventValue(event) {
             return detail.value ?? null;
         if ("response" in detail)
             return detail.response ?? null;
+        if ("state" in detail || "valid" in detail)
+            return undefined;
     }
     return detail;
 }
+function portableCustomEventState(event) {
+    if (!("detail" in event))
+        return undefined;
+    const detail = event.detail;
+    if (typeof detail !== "object" || detail === null || !("state" in detail))
+        return undefined;
+    return isPortableCustomStateValue(detail.state) ? detail.state : undefined;
+}
+function portableCustomEventValidity(event) {
+    if (!("detail" in event))
+        return undefined;
+    const detail = event.detail;
+    if (typeof detail !== "object" || detail === null || typeof detail.valid !== "boolean") {
+        return undefined;
+    }
+    return {
+        valid: detail.valid,
+        message: typeof detail.message === "string" ? detail.message : undefined,
+    };
+}
+function isPortableCustomStateValue(value) {
+    if (value === null)
+        return true;
+    if (typeof value === "string" || typeof value === "boolean")
+        return true;
+    if (typeof value === "number")
+        return Number.isFinite(value);
+    if (Array.isArray(value))
+        return value.every(isPortableCustomStateValue);
+    if (typeof value === "object") {
+        return Object.values(value).every(isPortableCustomStateValue);
+    }
+    return false;
+}
 const htmlContentElements = new Set([
     "a",
     "abbr",
     "b",
+    "bdi",
+    "bdo",
     "blockquote",
     "br",
     "caption",
@@ -3107,6 +3741,12 @@ const htmlContentElements = new Set([
     "em",
     "figcaption",
     "figure",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
     "hr",
     "i",
     "img",
@@ -3116,6 +3756,12 @@ const htmlContentElements = new Set([
     "p",
     "pre",
     "q",
+    "rb",
+    "rbc",
+    "rp",
+    "rt",
+    "rtc",
+    "ruby",
     "samp",
     "small",
     "span",
@@ -3132,6 +3778,7 @@ const htmlContentElements = new Set([
     "ul",
     "var",
 ]);
+const unsafeContentElements = new Set(["script", "style"]);
 const mathMlElements = new Set([
     "math",
     "maction",
@@ -3200,32 +3847,80 @@ function copySafeAttributes(element, attributes) {
         if (!isSafeContentAttribute(name, value))
             continue;
         element.setAttribute(name, value);
+        if (name === "xml:lang" && !Object.hasOwn(attributes, "lang")) {
+            element.setAttribute("lang", value);
+        }
     }
+    applySharedAccessibilityVocabulary(element, attributes);
+}
+function applySharedAccessibilityVocabulary(element, attributes) {
+    for (const [name, value] of Object.entries(attributes)) {
+        const ariaName = qtiAriaAttributeName(name);
+        if (!ariaName || hasAttributeName(attributes, ariaName))
+            continue;
+        element.setAttribute(ariaName, value);
+    }
+    const suppressTts = attributeValue(attributes, "data-qti-suppress-tts");
+    if (suppressesScreenReaderSpeech(suppressTts) &&
+        !hasAttributeName(attributes, "aria-hidden") &&
+        !hasAttributeName(attributes, "data-qti-aria-hidden")) {
+        element.setAttribute("aria-hidden", "true");
+    }
+}
+function qtiAriaAttributeName(name) {
+    const normalizedName = name.toLowerCase();
+    const prefix = "data-qti-aria-";
+    if (!normalizedName.startsWith(prefix))
+        return undefined;
+    const suffix = normalizedName.slice(prefix.length);
+    if (!/^[a-z0-9][a-z0-9-]*$/.test(suffix))
+        return undefined;
+    return `aria-${suffix}`;
+}
+function attributeValue(attributes, name) {
+    const normalizedName = name.toLowerCase();
+    const entry = Object.entries(attributes).find(([attributeName]) => attributeName.toLowerCase() === normalizedName);
+    return entry?.[1];
+}
+function hasAttributeName(attributes, name) {
+    return attributeValue(attributes, name) !== undefined;
+}
+function suppressesScreenReaderSpeech(value) {
+    if (!value)
+        return false;
+    const tokens = value
+        .toLowerCase()
+        .split(/[\s,]+/)
+        .filter(Boolean);
+    return tokens.includes("all") || tokens.includes("screen-reader");
 }
 function isSafeContentAttribute(name, value) {
-    if (name.startsWith("on"))
+    const normalizedName = name.toLowerCase();
+    if (normalizedName.startsWith("on"))
         return false;
-    if (name === "style")
+    if (normalizedName === "style")
         return false;
-    if (name === "href" || name === "src" || name === "data") {
+    if (normalizedName === "href" || normalizedName === "src" || normalizedName === "data") {
         return isSafeUrl(value);
     }
-    return (name === "alt" ||
-        name === "aria-label" ||
-        name === "aria-describedby" ||
-        name === "class" ||
-        name === "colspan" ||
-        name === "height" ||
-        name === "id" ||
-        name === "lang" ||
-        name === "role" ||
-        name === "rowspan" ||
-        name === "scope" ||
-        name === "title" ||
-        name === "type" ||
-        name === "width" ||
-        mathMlAttributeNames.has(name) ||
-        name.startsWith("data-"));
+    return (normalizedName === "alt" ||
+        normalizedName === "class" ||
+        normalizedName === "colspan" ||
+        normalizedName === "dir" ||
+        normalizedName === "headers" ||
+        normalizedName === "height" ||
+        normalizedName === "id" ||
+        normalizedName === "lang" ||
+        normalizedName === "role" ||
+        normalizedName === "rowspan" ||
+        normalizedName === "scope" ||
+        normalizedName === "title" ||
+        normalizedName === "type" ||
+        normalizedName === "width" ||
+        normalizedName === "xml:lang" ||
+        mathMlAttributeNames.has(normalizedName) ||
+        normalizedName.startsWith("aria-") ||
+        normalizedName.startsWith("data-"));
 }
 const mathMlAttributeNames = new Set([
     "accent",
@@ -3360,6 +4055,23 @@ function playerStyleElement() {
       margin-block: 0;
     }
 
+    .qti3-player .qti-hidden {
+      display: none !important;
+    }
+
+    .qti3-player .qti-visually-hidden {
+      position: absolute !important;
+      overflow: hidden !important;
+      clip: rect(1px, 1px, 1px, 1px) !important;
+      clip-path: inset(50%) !important;
+      inline-size: 1px !important;
+      block-size: 1px !important;
+      margin: -1px !important;
+      padding: 0 !important;
+      border: 0 !important;
+      white-space: nowrap !important;
+    }
+
     .qti3-embedded-interaction {
       display: inline-flex;
       gap: 0.35rem;
@@ -3584,6 +4296,37 @@ function playerStyleElement() {
       line-height: 1;
     }
 
+    .qti3-remove-button {
+      border: 1px solid currentColor;
+      background: transparent;
+      color: inherit;
+      cursor: pointer;
+    }
+
+    .qti3-remove-button:hover {
+      background: color-mix(in srgb, currentColor 14%, transparent);
+    }
+
+    .qti3-trash-icon {
+      inline-size: 1.125rem;
+      block-size: 1.125rem;
+    }
+
+    .qti3-movement-icon {
+      inline-size: 1rem;
+      block-size: 1rem;
+    }
+
+    .qti3-trash-icon path,
+    .qti3-movement-icon path {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+      vector-effect: non-scaling-stroke;
+    }
+
     .qti3-token[aria-pressed="true"],
     .qti3-pair-chip {
       background: Highlight;
@@ -3732,6 +4475,7 @@ function playerStyleElement() {
     }
 
     .qti3-graphic-associate-surface,
+    .qti3-graphic-gap-match-surface,
     .qti3-graphic-order-surface {
       touch-action: manipulation;
     }
@@ -3759,10 +4503,60 @@ function playerStyleElement() {
     }
 
     .qti3-graphic-associate-hotspot,
+    .qti3-graphic-gap-hotspot,
     .qti3-graphic-order-hotspot {
       z-index: 2;
     }
 
+    .qti3-graphic-gap-match-surface {
+      margin-block-end: calc(var(--qti3-graphic-gap-label-block-size, 2rem) + 0.75rem);
+    }
+
+    .qti3-graphic-gap-hotspot {
+      display: grid;
+      place-items: center;
+      padding: 0;
+      overflow: visible;
+      border-style: dashed;
+      background: rgb(255 255 255 / 0.08);
+      color: CanvasText;
+    }
+
+    .qti3-graphic-gap-hotspot[data-selected="true"] {
+      border-style: solid;
+      background: color-mix(in srgb, Highlight 18%, Canvas);
+    }
+
+    .qti3-graphic-gap-label {
+      position: absolute;
+      inset-block-start: calc(100% + 0.2rem);
+      inset-inline-start: 50%;
+      transform: translateX(-50%);
+      box-sizing: border-box;
+      inline-size: max-content;
+      max-inline-size: min(12rem, calc(100vw - 2rem));
+      min-inline-size: 0;
+      padding: 0.25rem 0.4rem;
+      border: 1px solid CanvasText;
+      border-radius: 0.25rem;
+      background: Canvas;
+      color: CanvasText;
+      font-size: 0.75rem;
+      font-weight: 700;
+      line-height: 1.15;
+      overflow-wrap: anywhere;
+      pointer-events: none;
+      box-shadow: 0 1px 2px rgb(0 0 0 / 0.16);
+      text-align: center;
+      white-space: normal;
+    }
+
+    @supports not (background: color-mix(in srgb, Highlight 18%, Canvas)) {
+      .qti3-graphic-gap-hotspot[data-selected="true"] {
+        background: Canvas;
+      }
+    }
+
     .qti3-graphic-order-hotspot {
       display: grid;
       place-items: center;