@citolab/qti-components 7.0.6-next.0 → 7.0.6

package/dist/qti-test/index.cjs

@@ -0,0 +1,4823 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+
+// src/lib/qti-test/index.ts
+var qti_test_exports = {};
+__export(qti_test_exports, {
+  QtiAssessmentItemRef: () => QtiAssessmentItemRef,
+  QtiAssessmentSection: () => QtiAssessmentSection,
+  QtiAssessmentTest: () => QtiAssessmentTest,
+  QtiTest: () => QtiTest,
+  QtiTestPart: () => QtiTestPart,
+  TestContainer: () => TestContainer,
+  TestItemLink: () => TestItemLink,
+  TestNext: () => TestNext,
+  TestPagingButtonsStamp: () => TestPagingButtonsStamp,
+  TestPrev: () => TestPrev,
+  TestView: () => TestView
+});
+module.exports = __toCommonJS(qti_test_exports);
+
+// src/lib/qti-test/qti-assessment-test/qti-assessment-item-ref.ts
+var import_context2 = require("@lit/context");
+var import_lit = require("lit");
+var import_decorators = require("lit/decorators.js");
+
+// src/lib/qti-test/context/test.context.ts
+var import_context = require("@lit/context");
+var testContext = (0, import_context.createContext)(Symbol("test"));
+var testElement = (0, import_context.createContext)(Symbol("testElement"));
+
+// src/lib/qti-test/qti-assessment-test/qti-assessment-item-ref.ts
+var stringToBooleanConverter = {
+  fromAttribute(value) {
+    return value === "true";
+  },
+  toAttribute(value) {
+    return value ? "true" : "false";
+  }
+};
+var QtiAssessmentItemRef = class extends import_lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.weigths = /* @__PURE__ */ new Map();
+  }
+  // the XMLDocument
+  createRenderRoot() {
+    return this;
+  }
+  get assessmentItem() {
+    return this.renderRoot?.querySelector("qti-assessment-item");
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(
+      new CustomEvent("qti-assessment-item-ref-connected", {
+        bubbles: true,
+        composed: true,
+        detail: { identifier: this.identifier, href: this.href, category: this.category }
+      })
+    );
+  }
+  render() {
+    return import_lit.html`${this.xmlDoc}`;
+  }
+};
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], QtiAssessmentItemRef.prototype, "category", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], QtiAssessmentItemRef.prototype, "identifier", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, converter: stringToBooleanConverter })
+], QtiAssessmentItemRef.prototype, "required", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Boolean, converter: stringToBooleanConverter })
+], QtiAssessmentItemRef.prototype, "fixed", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: String })
+], QtiAssessmentItemRef.prototype, "href", 2);
+__decorateClass([
+  (0, import_context2.consume)({ context: testContext, subscribe: true })
+], QtiAssessmentItemRef.prototype, "_testContext", 2);
+__decorateClass([
+  (0, import_decorators.property)({ type: Object, attribute: false })
+], QtiAssessmentItemRef.prototype, "xmlDoc", 2);
+if (!customElements.get("qti-assessment-item-ref")) {
+  customElements.define("qti-assessment-item-ref", QtiAssessmentItemRef);
+}
+
+// src/lib/qti-test/qti-assessment-test/qti-assessment-section.ts
+var import_context4 = require("@lit/context");
+var import_lit2 = require("lit");
+var import_decorators2 = require("lit/decorators.js");
+var stringToBooleanConverter2 = {
+  fromAttribute(value) {
+    return value === "true";
+  },
+  toAttribute(value) {
+    return value ? "true" : "false";
+  }
+};
+var QtiAssessmentSection = class extends import_lit2.LitElement {
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(
+      new Event("qti-assessment-section-connected", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return import_lit2.html`<slot name="qti-rubric-block"></slot><slot></slot>`;
+  }
+};
+__decorateClass([
+  (0, import_decorators2.property)({ type: String })
+], QtiAssessmentSection.prototype, "identifier", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: String })
+], QtiAssessmentSection.prototype, "required", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, converter: stringToBooleanConverter2 })
+], QtiAssessmentSection.prototype, "fixed", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: String })
+], QtiAssessmentSection.prototype, "title", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, converter: stringToBooleanConverter2 })
+], QtiAssessmentSection.prototype, "visible", 2);
+__decorateClass([
+  (0, import_decorators2.property)({ type: Boolean, converter: stringToBooleanConverter2, attribute: "keep-together" })
+], QtiAssessmentSection.prototype, "keepTogether", 2);
+__decorateClass([
+  (0, import_context4.consume)({ context: testContext, subscribe: true })
+], QtiAssessmentSection.prototype, "_testContext", 2);
+if (!customElements.get("qti-assessment-section")) {
+  customElements.define("qti-assessment-section", QtiAssessmentSection);
+}
+
+// src/lib/qti-test/qti-assessment-test/qti-assessment-test.ts
+var import_context6 = require("@lit/context");
+var import_lit3 = require("lit");
+var import_decorators3 = require("lit/decorators.js");
+var QtiAssessmentTest = class extends import_lit3.LitElement {
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(
+      new CustomEvent("qti-assessment-test-connected", {
+        detail: this,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return import_lit3.html` <slot></slot>`;
+  }
+};
+__decorateClass([
+  (0, import_decorators3.property)({ type: String })
+], QtiAssessmentTest.prototype, "identifier", 2);
+__decorateClass([
+  (0, import_decorators3.property)({ type: String })
+], QtiAssessmentTest.prototype, "title", 2);
+__decorateClass([
+  (0, import_context6.consume)({ context: testContext, subscribe: true })
+], QtiAssessmentTest.prototype, "_testContext", 2);
+QtiAssessmentTest = __decorateClass([
+  (0, import_decorators3.customElement)("qti-assessment-test")
+], QtiAssessmentTest);
+
+// src/lib/qti-test/qti-assessment-test/qti-test-part.ts
+var import_lit4 = require("lit");
+var import_decorators4 = require("lit/decorators.js");
+var QtiTestPart = class extends import_lit4.LitElement {
+  constructor() {
+    super(...arguments);
+    this.identifier = "";
+    this.title = "";
+    this.class = "";
+    this.NavigationMode = "nonlinear";
+    this.submissionMode = "individual";
+  }
+  async connectedCallback() {
+    super.connectedCallback();
+    await this.updateComplete;
+    this.dispatchEvent(
+      new Event("qti-test-part-connected", {
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  render() {
+    return import_lit4.html` <slot></slot>`;
+  }
+};
+__decorateClass([
+  (0, import_decorators4.property)({ type: String })
+], QtiTestPart.prototype, "identifier", 2);
+__decorateClass([
+  (0, import_decorators4.property)({ type: String })
+], QtiTestPart.prototype, "title", 2);
+__decorateClass([
+  (0, import_decorators4.property)({ type: String })
+], QtiTestPart.prototype, "class", 2);
+__decorateClass([
+  (0, import_decorators4.property)({ type: String, attribute: "navigation-mode" })
+], QtiTestPart.prototype, "NavigationMode", 2);
+__decorateClass([
+  (0, import_decorators4.property)({ type: String, attribute: "submission-mode" })
+], QtiTestPart.prototype, "submissionMode", 2);
+QtiTestPart = __decorateClass([
+  (0, import_decorators4.customElement)("qti-test-part")
+], QtiTestPart);
+if (!customElements.get("qti-test-part")) {
+  customElements.define("qti-test-part", QtiTestPart);
+}
+
+// src/lib/qti-test/qti-test.ts
+var import_lit6 = require("lit");
+var import_decorators6 = require("lit/decorators.js");
+
+// src/lib/qti-transformers/qti-transformers.ts
+var xml = String.raw;
+var xmlToHTML = xml`<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+<xsl:output method="html" version="5.0" encoding="UTF-8" indent="yes" />
+  <xsl:template match="@*|node()">
+    <xsl:copy>
+      <xsl:apply-templates select="@*|node()"/>
+    </xsl:copy>
+  </xsl:template>
+
+  <!-- remove existing namespaces -->
+  <xsl:template match="*">
+    <!-- remove element prefix -->
+    <xsl:element name="{local-name()}">
+      <!-- process attributes -->
+      <xsl:for-each select="@*">
+        <!-- remove attribute prefix -->
+        <xsl:attribute name="{local-name()}">
+          <xsl:value-of select="."/>
+        </xsl:attribute>
+      </xsl:for-each>
+    <xsl:apply-templates/>
+  </xsl:element>
+</xsl:template>
+</xsl:stylesheet>`;
+function extendElementName(xmlFragment, tagName, extension) {
+  xmlFragment.querySelectorAll(tagName).forEach((element) => {
+    const newTagName = `${tagName}-${extension}`;
+    const newElement = createElementWithNewTagName(element, newTagName);
+    element.replaceWith(newElement);
+  });
+}
+function extendElementsWithClass(xmlFragment, classNamePattern) {
+  xmlFragment.querySelectorAll("*").forEach((element) => {
+    const classList = element.classList;
+    if (classList) {
+      classList.forEach((className) => {
+        if (className.startsWith(`${classNamePattern}:`)) {
+          const suffix = className.slice(`${classNamePattern}:`.length);
+          const newTagName = `${element.nodeName}-${suffix}`;
+          const newElement = createElementWithNewTagName(element, newTagName);
+          element.replaceWith(newElement);
+        }
+      });
+    }
+  });
+}
+function createElementWithNewTagName(element, newTagName) {
+  const newElement = document.createElement(newTagName);
+  for (const attr of element.attributes) {
+    newElement.setAttribute(attr.name, attr.value);
+  }
+  while (element.firstChild) {
+    newElement.appendChild(element.firstChild);
+  }
+  return newElement;
+}
+function itemsFromTest(xmlFragment) {
+  const items = [];
+  xmlFragment.querySelectorAll("qti-assessment-item-ref").forEach((el) => {
+    const identifier = el.getAttribute("identifier");
+    const href = el.getAttribute("href");
+    const category = el.getAttribute("category");
+    items.push({ identifier, href, category });
+  });
+  return items;
+}
+var currentRequest = null;
+function loadXML(url, cancelPreviousRequest = false) {
+  if (cancelPreviousRequest && currentRequest !== null) {
+    currentRequest.abort();
+  }
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    currentRequest = xhr;
+    xhr.open("GET", url, true);
+    xhr.responseType = "document";
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        resolve(xhr.responseXML);
+      } else {
+        reject(xhr.statusText);
+      }
+    };
+    xhr.onerror = () => {
+      reject(xhr.statusText);
+    };
+    xhr.send();
+  });
+}
+function parseXML(xmlDocument) {
+  const parser = new DOMParser();
+  const xmlFragment = parser.parseFromString(xmlDocument, "text/xml");
+  return xmlFragment;
+}
+function toHTML(xmlFragment) {
+  const processor = new XSLTProcessor();
+  const xsltDocument = new DOMParser().parseFromString(xmlToHTML, "text/xml");
+  processor.importStylesheet(xsltDocument);
+  const itemHTMLFragment = processor.transformToFragment(xmlFragment, document);
+  return itemHTMLFragment;
+}
+function setLocation(xmlFragment, location) {
+  if (!location.endsWith("/")) {
+    location += "/";
+  }
+  xmlFragment.querySelectorAll("[src],[href],[primary-path]").forEach((elWithSrc) => {
+    let attr = "";
+    if (elWithSrc.getAttribute("src")) {
+      attr = "src";
+    }
+    if (elWithSrc.getAttribute("href")) {
+      attr = "href";
+    }
+    if (elWithSrc.getAttribute("primary-path")) {
+      attr = "primary-path";
+    }
+    const attrValue = elWithSrc.getAttribute(attr)?.trim();
+    if (!attrValue.startsWith("data:") && !attrValue.startsWith("http")) {
+      const newSrcValue = location + encodeURI(attrValue);
+      elWithSrc.setAttribute(attr, newSrcValue);
+    }
+  });
+}
+function convertCDATAtoComment(xmlFragment) {
+  const cdataElements = xmlFragment.querySelectorAll('qti-custom-operator[class="js.org"] > qti-base-value');
+  cdataElements.forEach((element) => {
+    const commentText = document.createComment(element.textContent);
+    element.replaceChild(commentText, element.firstChild);
+  });
+}
+function stripStyleSheets(xmlFragment) {
+  xmlFragment.querySelectorAll("qti-stylesheet").forEach((stylesheet) => stylesheet.remove());
+}
+
+// src/lib/qti-transformers/qti-transform-item.ts
+var qtiTransformItem = () => {
+  let xmlFragment;
+  const api = {
+    async load(uri, cancelPreviousRequest = false) {
+      return new Promise((resolve) => {
+        loadXML(uri, cancelPreviousRequest).then((xml2) => {
+          xmlFragment = xml2;
+          api.path(uri.substring(0, uri.lastIndexOf("/")));
+          return resolve(api);
+        });
+      });
+    },
+    parse(xmlString) {
+      xmlFragment = parseXML(xmlString);
+      return api;
+    },
+    path: (location) => {
+      setLocation(xmlFragment, location);
+      return api;
+    },
+    fn(fn) {
+      fn(xmlFragment);
+      return api;
+    },
+    pciHooks(uri) {
+      const attributes = ["hook", "module"];
+      const documentPath = uri.substring(0, uri.lastIndexOf("/"));
+      for (const attribute of attributes) {
+        const srcAttributes = xmlFragment.querySelectorAll("[" + attribute + "]");
+        srcAttributes.forEach((node) => {
+          const srcValue = node.getAttribute(attribute);
+          if (!srcValue.startsWith("data:") && !srcValue.startsWith("http")) {
+            node.setAttribute("base-url", uri);
+            node.setAttribute(
+              "module",
+              documentPath + "/" + encodeURI(srcValue + (srcValue.endsWith(".js") ? "" : ".js"))
+            );
+          }
+        });
+      }
+      return api;
+    },
+    extendElementName: (tagName, extension) => {
+      extendElementName(xmlFragment, tagName, extension);
+      return api;
+    },
+    extendElementsWithClass: (param = "extend") => {
+      extendElementsWithClass(xmlFragment, param);
+      return api;
+    },
+    customInteraction(baseRef, baseItem) {
+      const qtiCustomInteraction = xmlFragment.querySelector("qti-custom-interaction");
+      const qtiCustomInteractionObject = qtiCustomInteraction.querySelector("object");
+      qtiCustomInteraction.setAttribute("data-base-ref", baseRef);
+      qtiCustomInteraction.setAttribute("data-base-item", baseRef + baseItem);
+      qtiCustomInteraction.setAttribute("data", qtiCustomInteractionObject.getAttribute("data"));
+      qtiCustomInteraction.setAttribute("width", qtiCustomInteractionObject.getAttribute("width"));
+      qtiCustomInteraction.setAttribute("height", qtiCustomInteractionObject.getAttribute("height"));
+      qtiCustomInteraction.removeChild(qtiCustomInteractionObject);
+      return api;
+    },
+    convertCDATAtoComment() {
+      convertCDATAtoComment(xmlFragment);
+      return api;
+    },
+    stripStyleSheets() {
+      stripStyleSheets(xmlFragment);
+      return api;
+    },
+    html() {
+      return new XMLSerializer().serializeToString(toHTML(xmlFragment));
+    },
+    xml() {
+      return new XMLSerializer().serializeToString(xmlFragment);
+    },
+    htmlDoc() {
+      return toHTML(xmlFragment);
+    },
+    xmlDoc() {
+      return xmlFragment;
+    }
+  };
+  return api;
+};
+
+// src/lib/qti-transformers/qti-transform-test.ts
+var qtiTransformTest = () => {
+  let xmlFragment;
+  const api = {
+    async load(uri) {
+      return new Promise((resolve, _) => {
+        loadXML(uri).then((xml2) => {
+          xmlFragment = xml2;
+          return resolve(api);
+        });
+      });
+    },
+    parse(xmlString) {
+      xmlFragment = parseXML(xmlString);
+      return api;
+    },
+    fn(fn) {
+      fn(xmlFragment);
+      return api;
+    },
+    items() {
+      return itemsFromTest(xmlFragment);
+    },
+    html() {
+      return new XMLSerializer().serializeToString(toHTML(xmlFragment));
+    },
+    xml() {
+      return new XMLSerializer().serializeToString(xmlFragment);
+    },
+    htmlDoc() {
+      return toHTML(xmlFragment);
+    },
+    xmlDoc() {
+      return xmlFragment;
+    }
+  };
+  return api;
+};
+
+// src/lib/qti-test/mixins/test-loader.mixin.ts
+var TestLoaderMixin = (superClass) => {
+  class TestLoaderClass extends superClass {
+    constructor(...args) {
+      super(...args);
+      this.testURL = "";
+      this.addEventListener("qti-load-test-request", (e) => {
+        const { testURL } = e.detail;
+        if (!testURL) {
+          console.warn(
+            "No test found, there should be an aattribute test-url with the path to the test on the test-container"
+          );
+        } else {
+          this.testURL = testURL;
+        }
+        e.detail.promise = (async () => {
+          e.preventDefault();
+          const api = await qtiTransformTest().load(`${this.testURL}`);
+          return api.htmlDoc();
+        })();
+      });
+      this.addEventListener("qti-assessment-test-connected", () => {
+      });
+      this.addEventListener("qti-load-item-request", ({ detail }) => {
+        if (!this.testURL) return;
+        detail.promise = (async () => {
+          const api = await qtiTransformItem().load(
+            `${this.testURL.slice(0, this.testURL.lastIndexOf("/"))}/${detail.href}`,
+            detail.cancelPreviousRequest
+          );
+          return api.htmlDoc();
+        })();
+      });
+      this.addEventListener("qti-interaction-changed", (_e) => {
+      });
+      this.addEventListener("qti-outcome-changed", () => {
+      });
+    }
+  }
+  return TestLoaderClass;
+};
+
+// src/lib/qti-test/mixins/test-navigation.mixin.ts
+var TestNavigationMixin = (superClass) => {
+  class TestNavigationClass extends superClass {
+    constructor(...args) {
+      super(...args);
+      this.addEventListener("qti-request-test-item", ({ detail: navItemId }) => {
+        if (!navItemId) return;
+        this._clearLoadedItems();
+        const itemRefEl = this.testElement.el.querySelector(`qti-assessment-item-ref[identifier="${navItemId}"]`);
+        const promise = this._loadItemRequest(itemRefEl.href, true);
+        const navPartId = itemRefEl.closest("qti-test-part").identifier;
+        const navSectionId = itemRefEl.closest("qti-assessment-section").identifier;
+        this._testContext = { ...this._testContext, navPartId, navSectionId, navItemId, navItemLoading: true };
+        if (promise) {
+          promise.then((doc) => {
+            itemRefEl.xmlDoc = doc;
+            requestAnimationFrame(() => this.dispatchEvent(new CustomEvent("qti-item-connected", { bubbles: true, composed: true })));
+            this._testContext = { ...this._testContext, navItemLoading: false };
+          }).catch((error) => console.error("Failed to load item:", error));
+        } else {
+          console.info("Load item request was not handled:", itemRefEl.href);
+        }
+      });
+      this.addEventListener("qti-assessment-test-connected", () => {
+        let navItemId = this._testContext.navItemId;
+        if (!navItemId) {
+          const itemRefEl = this.testElement.el.querySelector("qti-assessment-item-ref");
+          navItemId = itemRefEl.identifier;
+        }
+        this.dispatchEvent(new CustomEvent("qti-request-test-item", { detail: navItemId, bubbles: true, composed: true }));
+      });
+    }
+    _clearLoadedItems() {
+      const itemRefEls = this.testElement.el.querySelectorAll(`qti-assessment-test qti-assessment-item-ref`);
+      Array.from(itemRefEls).forEach((itemElement) => {
+        itemElement.xmlDoc = null;
+      });
+    }
+    _loadItemRequest(href, cancelPreviousRequest = true) {
+      const event = new CustomEvent("qti-load-item-request", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          href,
+          promise: null,
+          cancelPreviousRequest
+        }
+      });
+      this.dispatchEvent(event);
+      return event.detail.promise;
+    }
+  }
+  return TestNavigationClass;
+};
+
+// src/lib/qti-test/mixins/test-view.mixin.ts
+var TestViewMixin = (superClass) => {
+  class TestViewClass extends superClass {
+    constructor(...args) {
+      super(...args);
+      this._testContext = { ...this._testContext, view: "candidate" };
+      this.addEventListener("on-test-switch-view", (e) => {
+        this._testContext = { ...this._testContext, view: e.detail };
+        this._updateElementView();
+      });
+      this.addEventListener("qti-assessment-test-connected", () => {
+        this._updateElementView();
+      });
+      this.addEventListener("qti-assessment-item-connected", (e) => {
+        this._updateElementView();
+        this._setCorrectResponseVisibility(e.detail);
+      });
+    }
+    willUpdate(changedProperties) {
+      super.willUpdate(changedProperties);
+      if (changedProperties.has("_testContext")) {
+        this._updateElementView();
+      }
+    }
+    // Method to handle view updates for elements based on the current context view
+    _updateElementView() {
+      if (this.testElement && this.testElement.el) {
+        const viewElements = Array.from(this.testElement.el.querySelectorAll("[view]"));
+        viewElements.forEach((element) => {
+          element.classList.toggle("show", element.getAttribute("view") === this._testContext.view);
+        });
+        const assessmentItem = this.testElement.el.querySelector(
+          `qti-assessment-item[identifier="${this._testContext.navItemId}"]`
+        );
+        if (assessmentItem) {
+          assessmentItem.showCorrectResponse(this._testContext.view === "scorer");
+        }
+      }
+    }
+    // Event handler for connected QTI assessment items
+    _setCorrectResponseVisibility(assessmentItem) {
+      assessmentItem.showCorrectResponse(this._testContext.view === "scorer");
+    }
+  }
+  return TestViewClass;
+};
+
+// src/lib/qti-test/test-base.ts
+var import_context8 = require("@lit/context");
+var import_lit5 = require("lit");
+var import_decorators5 = require("lit/decorators.js");
+var TestBase = class extends import_lit5.LitElement {
+  constructor() {
+    super();
+    this._testContext = { items: [], testOutcomeVariables: [] };
+    this.testElement = { el: null };
+    /**
+     * Updates the variables of an assessment item in the test context.
+     * - Matches the assessment item with the corresponding test context item.
+     * - If the item is not found, logs a warning.
+     * - Updates variables in the test context if exactly one variable exists.
+     * - Otherwise, syncs the assessment item's variables with the test context.
+     *
+     * @param assessmentItem - The assessment item to update.
+     */
+    this._updateItemInTestContext = (assessmentItem) => {
+      const { identifier, variables } = assessmentItem;
+      const itemContext = this._testContext.items.find((i) => i?.identifier === identifier);
+      if (!itemContext) {
+        console.warn(`Item IDs between assessment.xml and item.xml should match: ${identifier} is not found!`);
+        return;
+      }
+      if (itemContext.variables?.length === 1) {
+        this._updateItemVariablesInTestContext(identifier, variables);
+      } else {
+        assessmentItem.variables = [...itemContext.variables || []];
+      }
+    };
+    this.addEventListener("qti-assessment-test-connected", (e) => {
+      const qtiAssessmentTest = e.detail;
+      const items = Array.from(qtiAssessmentTest.querySelectorAll("qti-assessment-item-ref")).map(
+        (itemRef) => ({
+          href: itemRef.href,
+          identifier: itemRef.identifier,
+          category: itemRef.category,
+          variables: [{ identifier: "completionStatus", value: "not_attempted", type: "outcome" }]
+        })
+      );
+      this.testElement = { el: qtiAssessmentTest };
+      this._testContext = { ...this._testContext, items };
+    });
+    this.addEventListener("qti-assessment-item-connected", (e) => {
+      this._updateItemInTestContext(e.detail);
+    });
+    this.addEventListener("qti-outcome-changed", (e) => {
+      const assessmentitem = e.composedPath()[0];
+      this._updateItemVariablesInTestContext(assessmentitem.identifier, assessmentitem.variables);
+    });
+  }
+  get context() {
+    return this._testContext;
+  }
+  // /* restores the context by updating existing items and adding new items from the "contextToRestore" parameter into the "this._context.items" array. */
+  set context(testContext2) {
+    if (testContext2 === null || testContext2 === void 0) return;
+    this._testContext = { ...testContext2 };
+    testContext2.items?.forEach((itemContext) => {
+      const existingItemContext = this._testContext.items.find((i) => i.identifier === itemContext.identifier);
+      if (existingItemContext) {
+        existingItemContext.variables = itemContext.variables;
+      } else {
+        this._testContext.items.push(itemContext);
+      }
+    });
+  }
+  _updateItemVariablesInTestContext(identifier, variables) {
+    this._testContext = {
+      ...this._testContext,
+      // Spread existing test context properties
+      items: this._testContext.items.map((itemContext) => {
+        if (itemContext.identifier !== identifier) {
+          return itemContext;
+        }
+        return {
+          ...itemContext,
+          // Keep other properties of the item context
+          variables: variables.map((variable) => {
+            const matchingVariable = itemContext.variables.find((v) => v.identifier === variable.identifier);
+            return matchingVariable ? { ...matchingVariable, ...variable } : variable;
+          })
+        };
+      })
+    };
+  }
+  // private _addItemToTestContext(
+  //   e: CustomEvent<{ href: string; identifier: string; category: string }> & { target: QtiAssessmentItemRef }
+  // ): void {
+  //   const { href, identifier, category } = e.detail;
+  //   // Update test context items, adding a new item if the identifier is not already in the list
+  //   if (!this._testContext.items.some(item => item.identifier === identifier)) {
+  //     this._testContext.items.push({
+  //       href,
+  //       identifier,
+  //       category,
+  //       variables: [{ identifier: 'completionStatus', value: 'not_attempted', type: 'outcome' }]
+  //       // category: e.target.category
+  //     });
+  //   }
+  // }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute("qti-test", "");
+  }
+};
+__decorateClass([
+  (0, import_decorators5.state)(),
+  (0, import_context8.provide)({ context: testContext })
+], TestBase.prototype, "_testContext", 2);
+__decorateClass([
+  (0, import_decorators5.state)(),
+  (0, import_context8.provide)({ context: testElement })
+], TestBase.prototype, "testElement", 2);
+
+// src/lib/qti-test/qti-test.ts
+var QtiTest = class extends TestLoaderMixin(TestNavigationMixin(TestViewMixin(TestBase))) {
+  /**
+   * Lifecycle callback invoked when the element is added to the DOM.
+   * Automatically appends the content of a `<template>` element (if present)
+   * to the shadow DOM.
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    const template = this.querySelector(":scope > template");
+    if (template) {
+      this.shadowRoot?.appendChild(template.content);
+    }
+  }
+  /**
+   * Renders the component's template.
+   * Provides a default `<slot>` for content projection.
+   */
+  render() {
+    return import_lit6.html`<slot></slot>`;
+  }
+};
+QtiTest = __decorateClass([
+  (0, import_decorators6.customElement)("qti-test")
+], QtiTest);
+
+// src/lib/qti-test/components/test-next.ts
+var import_lit9 = require("lit");
+var import_decorators10 = require("lit/decorators.js");
+
+// src/lib/qti-test/components/styles.ts
+var import_lit7 = require("lit");
+var form = import_lit7.css`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 0.5rem 1rem;
+  border-radius: 0.25rem;
+  user-select: none;
+`;
+var btn = import_lit7.css`
+  background-color: lightgray;
+  ${form};
+`;
+var dis = import_lit7.css`
+  cursor: not-allowed;
+  opacity: 0.5;
+`;
+var ind = import_lit7.css`
+  ${form};
+  border: 1px solid gray;
+`;
+
+// src/lib/qti-test/components/test-component.abstract.ts
+var import_context10 = require("@lit/context");
+var import_lit8 = require("lit");
+var import_decorators8 = require("lit/decorators.js");
+
+// src/lib/decorators/watch.ts
+function watch(propertyName, options) {
+  const resolvedOptions = {
+    waitUntilFirstUpdate: false,
+    ...options
+  };
+  return (proto, decoratedFnName) => {
+    const { update } = proto;
+    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];
+    proto.update = function(changedProps) {
+      watchedProperties.forEach((property10) => {
+        const key = property10;
+        if (changedProps.has(key)) {
+          const oldValue = changedProps.get(key);
+          const newValue = this[key];
+          if (oldValue !== newValue) {
+            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {
+              this[decoratedFnName](oldValue, newValue);
+            }
+          }
+        }
+      });
+      update.call(this, changedProps);
+    };
+  };
+}
+
+// src/lib/decorators/prop-internal-state.ts
+var import_decorators7 = require("lit/decorators.js");
+function propInternalState(options) {
+  return (protoOrDescriptor, name) => {
+    (0, import_decorators7.property)(options)(protoOrDescriptor, name);
+    const key = `__${name}`;
+    Object.defineProperty(protoOrDescriptor, name, {
+      get() {
+        return this[key];
+      },
+      set(value) {
+        const oldValue = this[key];
+        this[key] = value;
+        if (oldValue !== value) {
+          if (this._internals?.states) {
+            const stateName = name.toLowerCase();
+            if (value) {
+              this._internals.states.add(`--${stateName}`);
+            } else {
+              this._internals.states.delete(`--${stateName}`);
+            }
+          }
+          if (options.aria && this._internals) {
+            const ariaAttribute = options.aria;
+            if (value) {
+              this._internals[ariaAttribute] = "true";
+            } else {
+              this._internals[ariaAttribute] = null;
+            }
+          }
+          this.requestUpdate(name, oldValue);
+        }
+      },
+      configurable: true,
+      enumerable: true
+    });
+  };
+}
+
+// src/lib/qti-test/components/test-component.abstract.ts
+var TestComponent = class extends import_lit8.LitElement {
+  constructor() {
+    super();
+    this.disabled = true;
+    this._internals = this.attachInternals();
+  }
+  _handleTestElementChange(_oldValue, newValue) {
+    if (newValue.el) {
+      this.disabled = false;
+    }
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("_testContext")) {
+      const { items = [], navItemId } = this._testContext ?? {};
+      this.itemIndex = items.findIndex((item) => item.identifier === navItemId);
+      this.items = items;
+      this.view = this._testContext?.view;
+    }
+  }
+  _switchView(view) {
+    this.dispatchEvent(
+      new CustomEvent("on-test-switch-view", {
+        composed: true,
+        bubbles: true,
+        detail: view
+      })
+    );
+  }
+  _requestItem(identifier) {
+    this.dispatchEvent(
+      new CustomEvent("qti-request-test-item", {
+        composed: true,
+        bubbles: true,
+        detail: identifier
+      })
+    );
+  }
+};
+__decorateClass([
+  propInternalState({
+    type: Boolean,
+    reflect: true,
+    aria: "ariaDisabled"
+    // Maps to `aria-disabled` attribute
+  })
+], TestComponent.prototype, "disabled", 2);
+__decorateClass([
+  (0, import_decorators8.state)(),
+  (0, import_context10.consume)({ context: testContext, subscribe: true })
+], TestComponent.prototype, "_testContext", 2);
+__decorateClass([
+  (0, import_decorators8.state)(),
+  (0, import_context10.consume)({ context: testElement, subscribe: true })
+], TestComponent.prototype, "_testElement", 2);
+__decorateClass([
+  watch("_testElement")
+], TestComponent.prototype, "_handleTestElementChange", 1);
+
+// src/lib/qti-test/components/test-next.ts
+var TestNext = class extends TestComponent {
+  constructor() {
+    super();
+    this._internals.role = "button";
+    this._internals.ariaLabel = "Next item";
+    this.addEventListener("click", (e) => {
+      e.preventDefault();
+      if (!this.disabled) this._requestItem(this.items[this.itemIndex + 1].identifier);
+    });
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("_testContext")) {
+      this.disabled = !this._testElement?.el || this.itemIndex < 0 || this.itemIndex >= this.items.length - 1;
+    }
+  }
+  render() {
+    return import_lit9.html`<slot></slot>`;
+  }
+};
+TestNext.styles = import_lit9.css`
+    :host {
+      ${btn};
+    }
+    :host([disabled]) {
+      ${dis};
+    }
+  `;
+TestNext = __decorateClass([
+  (0, import_decorators10.customElement)("test-next")
+], TestNext);
+
+// src/lib/qti-test/components/test-prev.ts
+var import_lit10 = require("lit");
+var import_decorators11 = require("lit/decorators.js");
+var TestPrev = class extends TestComponent {
+  constructor() {
+    super();
+    this._internals.role = "button";
+    this._internals.ariaLabel = "Next item";
+    this.addEventListener("click", (e) => {
+      e.preventDefault();
+      if (!this.disabled) this._requestItem(this.items[this.itemIndex - 1].identifier);
+    });
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("_testContext")) {
+      this.disabled = !this._testElement?.el || this.itemIndex === 0 || this.itemIndex === -1;
+    }
+  }
+  render() {
+    return import_lit10.html`<slot></slot>`;
+  }
+};
+TestPrev.styles = import_lit10.css`
+    :host {
+      ${btn};
+    }
+    :host([disabled]) {
+      ${dis};
+    }
+  `;
+TestPrev = __decorateClass([
+  (0, import_decorators11.customElement)("test-prev")
+], TestPrev);
+
+// src/lib/qti-test/components/test-view.ts
+var import_lit11 = require("lit");
+var import_decorators12 = require("lit/decorators.js");
+var TestView = class extends TestComponent {
+  constructor() {
+    super(...arguments);
+    this.label = "view";
+    this.viewOptions = "";
+    this._handleViewOptionsChange = (_, viewOptions) => {
+      console.log(viewOptions);
+    };
+    this._viewOptions = TestView.DEFAULT_VIEW_OPTIONS;
+  }
+  // updated(changedProperties: PropertyValues) {
+  //   super.updated(changedProperties);
+  //   if (changedProperties.has('viewOptionsString')) {
+  //     this._updateViewOptions();
+  //   }
+  // }
+  // private _updateViewOptions() {
+  //   if (this.viewOptionsString) {
+  //     const options = this.viewOptionsString.split(',').map(opt => opt.trim());
+  //     this.viewOptions = options.filter(opt => TestView.DEFAULT_VIEW_OPTIONS.includes(opt));
+  //   } else {
+  //     this.viewOptions = TestView.DEFAULT_VIEW_OPTIONS;
+  //   }
+  // }
+  render() {
+    return import_lit11.html`
+      <label part="label" for="viewSelect">${this.label}</label>
+      <select
+        part="select"
+        id="viewSelect"
+        .disabled=${this.disabled}
+        @change=${(e) => {
+      const el = e.target;
+      this._switchView(el.value);
+    }}
+      >
+        ${this._viewOptions.map((v) => import_lit11.html`<option value="${v}" ?selected=${v === this.view}>${v}</option>`)}
+      </select>
+    `;
+  }
+};
+TestView.DEFAULT_VIEW_OPTIONS = ["author", "candidate", "proctor", "scorer", "testConstructor", "tutor"];
+__decorateClass([
+  (0, import_decorators12.property)({ type: String })
+], TestView.prototype, "label", 2);
+__decorateClass([
+  (0, import_decorators12.property)({ type: String, attribute: "view-options" })
+], TestView.prototype, "viewOptions", 2);
+__decorateClass([
+  watch("viewOptions")
+], TestView.prototype, "_handleViewOptionsChange", 2);
+TestView = __decorateClass([
+  (0, import_decorators12.customElement)("test-view")
+], TestView);
+
+// src/lib/qti-test/components/test-item-link.ts
+var import_lit12 = require("lit");
+var import_decorators13 = require("lit/decorators.js");
+var TestItemLink = class extends TestComponent {
+  constructor() {
+    super();
+    this.itemId = null;
+    this.addEventListener("click", () => this._requestItem(this.itemId));
+  }
+  render() {
+    return import_lit12.html` <slot></slot> `;
+  }
+};
+__decorateClass([
+  (0, import_decorators13.property)({ type: String, attribute: "item-id" })
+], TestItemLink.prototype, "itemId", 2);
+TestItemLink = __decorateClass([
+  (0, import_decorators13.customElement)("test-item-link")
+], TestItemLink);
+
+// src/lib/qti-test/components/test-container.ts
+var import_lit13 = require("lit");
+var import_decorators14 = require("lit/decorators.js");
+var import_until = require("lit/directives/until.js");
+
+// inline:../../../item.css?inline
+var item_default = `@layer qti-base, qti-components, qti-utilities, qti-variants, qti-extended;
+
+:root,
+:host {
+  /* Active colors */
+  --qti-bg-active: #ffecec;
+  --qti-border-active: #f86d70;
+
+  /* Gap size */
+  --qti-gap-size: 1rem;
+
+  /* Background colors */
+  --qti-bg: white;
+  --qti-hover-bg: #f9fafb;
+
+  /* Light theme colors */
+  --qti-light-bg-active: #f0f0f0; /* Light gray */
+  --qti-light-border-active: #d0d0d0; /* Medium gray */
+
+  /* Dark theme colors */
+  --qti-dark-bg-active: #1f2937; /* Dark gray */
+  --qti-dark-border-active: #64748b; /* Medium gray */
+
+  /* Disabled colors */
+  --qti-disabled-bg: #f3f4f6;
+  --qti-disabled-color: #45484f;
+
+  /* Border properties */
+  --qti-border-thickness: 2px;
+  --qti-border-style: solid;
+  --qti-border-color: #c6cad0;
+  --qti-border-radius: 0.3rem;
+  --qti-drop-border-radius: calc(var(--qti-border-radius) + var(--qti-border-thickness));
+
+  /* Focus & active states */
+  --qti-focus-border-width: 5px;
+  --qti-focus-color: #bddcff7e;
+
+  /* Class-specific variables */
+
+  /* Form elements */
+  --qti-form-size: 1rem;
+
+  /* Point elements */
+  --qti-point-size: 2rem;
+
+  /* Order buttons */
+  --qti-order-size: 2rem;
+
+  /* Generic padding for all elements */
+  --qti-padding-vertical: 0.5rem; /* py-2 */
+  --qti-padding-horizontal: 0.5rem; /* px-2 */
+}
+
+/* SVG masks and backgrounds */
+
+.chevron {
+  background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
+    no-repeat center right 6px;
+}
+
+.handle {
+  background-image: radial-gradient(
+    circle at center,
+    rgb(0 0 0 / 10%) 0,
+    rgb(0 0 0 / 20%) 2px,
+    rgb(255 255 255 / 0%) 2px,
+    rgb(255 255 255 / 0%) 100%
+  );
+  background-repeat: repeat-y;
+  background-position: left center;
+  background-size: 14px 8px;
+}
+
+.check-mask {
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
+          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
+}
+
+/* 
+  Following are classes that can be applied to elements and element states, so they are not used directly 
+  The @apply directive is used to apply these classes to elements
+*/
+
+/* Apply .bordered to an element */
+
+.bordered {
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+}
+
+/* Apply .form rules for checkbox and radiobutton */
+
+.form {
+
+  display: grid;
+  place-content: center;
+  width: var(--qti-form-size);
+  height: var(--qti-form-size);
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+}
+
+/* Apply .button rules for button-like elements, such as drags and buttons */
+
+.button {
+
+  border-radius: var(--qti-border-radius);
+  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+}
+
+/* Apply .select for the select dropdown element */
+
+.select {
+
+  border-radius: var(--qti-border-radius);
+  position: relative;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+  padding-right: calc(var(--qti-padding-horizontal) + 1.5rem); /* 1.5rem for the chevron */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
+    no-repeat center right 6px;
+}
+
+/* Apply .text for the input text and textarea */
+
+.text {
+
+  border-radius: 0;
+  cursor: text;
+  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+  background: unset;
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+}
+
+/* Apply .spot for hotspot shapes */
+
+.spot {
+
+  width: 100%;
+  height: 100%;
+  background-color: transparent;
+  padding: 0;
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+}
+
+/* Apply .point for circular small hotspots */
+
+.point {
+
+  border-radius: 100%;
+  width: var(--qti-point-size);
+  height: var(--qti-point-size);
+  background-color: transparent;
+  padding: 0;
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+}
+
+/* Apply .drag for draggable elements */
+
+.drag {
+
+  transition:
+    transform 200ms ease-out,
+    box-shadow 200ms ease-out,
+    rotate 200ms ease-out;
+  cursor: grab;
+  background-color: var(--qti-bg);
+  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+  border-radius: var(--qti-border-radius);
+  padding-left: calc(var(--qti-padding-horizontal) + 0.5rem) !important; /* 1.5rem for the drag */ border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color); outline: none; background-image: radial-gradient(
+    circle at center,
+    rgb(0 0 0 / 10%) 0,
+    rgb(0 0 0 / 20%) 2px,
+    rgb(255 255 255 / 0%) 2px,
+    rgb(255 255 255 / 0%) 100%
+  ); background-repeat: repeat-y; background-position: left center; background-size: 14px 8px;
+}
+
+/* Apply .dragging for the dragging state of a draggable element */
+
+.dragging {
+  pointer-events: none;
+  rotate: -2deg;
+  box-shadow:
+    0 8px 12px rgb(0 0 0 / 20%),
+    0 4px 8px rgb(0 0 0 / 10%);
+}
+
+/* Apply .drop for an element where you can drop the draggable */
+
+.drop {
+
+  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
+    center no-repeat;
+  border-radius: var(--qti-border-radius);
+  position: relative;
+  background-color: var(--qti-bg);
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+}
+
+/* Apply .dropping for an indicator where you can drop the draggable */
+
+.dropping {
+  background-color: var(--qti-bg-active);
+}
+
+/* Apply .order for a small circular button */
+
+.order {
+
+  display: grid;
+  place-content: center;
+
+  /* background-color: var(--qti-bg-active); */
+  border-radius: 100%;
+  width: var(--qti-order-size);
+  height: var(--qti-order-size);
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+}
+
+/* Apply .check-size for radio and checkbox size */
+
+.check-size {
+  width: calc(var(--qti-form-size) - 6px);
+  height: calc(var(--qti-form-size) - 6px);
+}
+
+/* Apply .check for checkbox */
+
+.check {
+  gap: 0.5rem;
+  border-radius: var(--qti-border-radius);
+  padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+  outline: none;
+  cursor: pointer;
+}
+
+/* Apply .check-radio for outer circle of the radio buttons */
+
+.check-radio {
+
+  border-radius: 100%;
+
+  display: grid;
+
+  place-content: center;
+
+  width: var(--qti-form-size);
+
+  height: var(--qti-form-size);
+
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+  outline: none;
+}
+
+/* Apply .check-radio-checked for the inner checked radio */
+
+.check-radio-checked {
+  background-color: var(--qti-border-active);
+  border-radius: 100%;
+}
+
+/* Apply .check-checkbox for outer square of the checkbox */
+
+.check-checkbox {
+
+  display: flex;
+  place-items: center;
+  border-radius: var(--qti-border-radius);
+  display: grid;
+  place-content: center;
+  width: var(--qti-form-size);
+  height: var(--qti-form-size);
+  border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+  outline: none;
+}
+
+/* Apply .check-checkbox-checked for the inner checkmark */
+
+.check-checkbox-checked {
+  background-color: var(--qti-border-active);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
+          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
+}
+
+/* Apply .hov for hover state */
+
+.hov {
+  background-color: var(--qti-hover-bg);
+}
+
+/* Apply .foc for focus state */
+
+.foc {
+  box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+}
+
+/* Apply .act for active state */
+
+.act {
+  border-color: var(--qti-border-active);
+  background-color: var(--qti-bg-active);
+}
+
+.act-bg {
+  background-color: var(--qti-bg-active);
+}
+
+.act-bor {
+  border-color: var(--qti-border-active);
+}
+
+/* Apply .rdo for readonly state */
+
+.rdo {
+  cursor: pointer;
+  background-color: var(--qti-bg);
+  outline: 0;
+  border: none;
+}
+
+/* Apply .dis for disabled state */
+
+.dis {
+  cursor: not-allowed;
+  background-color: var(--qti-disabled-bg);
+  color: var(--qti-disabled-color);
+  border-color: var(--qti-border-color);
+  outline: 4px solid var(--qti-disabled-bg);
+}
+
+/* base */
+
+/* ============================
+   QTI 3 shared css
+   1.  Display
+   2.  Special Flex styles
+   3.  Margin
+   4.  Padding
+   5.  Horizontal Alignment styles
+   6.  Vertical Alignment styles
+   7.  Height
+   8.  Width
+   9.  Text-Indent
+   10. List Style
+   11. Layout
+   12. Other QTI 3 presentation utilities
+   ============================ */
+
+/* ==========
+  Display css
+  =========== */
+
+.qti-display-inline {
+  display: inline;
+}
+
+.qti-display-inline-block {
+  display: inline-block;
+}
+
+.qti-display-block {
+  display: block;
+}
+
+.qti-display-flex {
+  display: flexbox;
+  display: flex;
+}
+
+.qti-display-inline-flex {
+  display: inline-flex;
+}
+
+.qti-display-grid {
+  display: grid;
+}
+
+.qti-display-inline-grid {
+  display: inline-grid;
+}
+
+.qti-display-table {
+  display: table;
+}
+
+.qti-display-table-cell {
+  display: table-cell;
+}
+
+.qti-display-table-row {
+  display: table-row;
+}
+
+.qti-display-list-item {
+  display: list-item;
+}
+
+.qti-display-inherit {
+  display: inherit;
+}
+
+/* 
+   * hidden to screen readers and sighted
+   */
+
+.qti-hidden {
+  display: none;
+}
+
+/*
+  * visible to screen readers, hidden to sighted
+   */
+
+.qti-visually-hidden {
+  position: fixed !important;
+  overflow: hidden;
+  clip: rect(1px 1px 1px 1px);
+  height: 1px;
+  width: 1px;
+  border: 0;
+  margin: -1px;
+}
+
+/* =============================
+     Special flex styles
+     ============================= */
+
+.qti-flex-direction-column {
+  flex-direction: column;
+}
+
+.qti-flex-direction-row {
+  flex-direction: row;
+}
+
+.qti-flex-grow-1 {
+  flex-grow: 1;
+}
+
+.qti-flex-grow-0 {
+  flex-grow: 0;
+}
+
+/* =========
+    Margin css
+    ========== */
+
+/**
+   * For margin Top and Bottom and Left and Right
+   */
+
+.qti-margin-0 {
+  margin: 0 !important;
+}
+
+.qti-margin-1 {
+  margin: 0.25rem !important;
+}
+
+.qti-margin-2 {
+  margin: 0.5rem !important;
+}
+
+.qti-margin-3 {
+  margin: 1rem !important;
+}
+
+.qti-margin-4 {
+  margin: 1.5rem !important;
+}
+
+.qti-margin-5 {
+  margin: 3rem !important;
+}
+
+.qti-margin-auto {
+  margin: auto !important;
+}
+
+/*
+   For margin Left and Right
+   */
+
+.qti-margin-x-0 {
+  margin-right: 0 !important;
+  margin-left: 0 !important;
+}
+
+.qti-margin-x-1 {
+  margin-right: 0.25rem !important;
+  margin-left: 0.25rem !important;
+}
+
+.qti-margin-x-2 {
+  margin-right: 0.5rem !important;
+  margin-left: 0.5rem !important;
+}
+
+.qti-margin-x-3 {
+  margin-right: 1rem !important;
+  margin-left: 1rem !important;
+}
+
+.qti-margin-x-4 {
+  margin-right: 1.5rem !important;
+  margin-left: 1.5rem !important;
+}
+
+.qti-margin-x-5 {
+  margin-right: 3rem !important;
+  margin-left: 3rem !important;
+}
+
+.qti-margin-x-auto {
+  margin-right: auto !important;
+  margin-left: auto !important;
+}
+
+/*
+   For margin Top and Bottom
+   */
+
+.qti-margin-y-0 {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+.qti-margin-y-1 {
+  margin-top: 0.25rem !important;
+  margin-bottom: 0.25rem !important;
+}
+
+.qti-margin-y-2 {
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.5rem !important;
+}
+
+.qti-margin-y-3 {
+  margin-top: 1rem !important;
+  margin-bottom: 1rem !important;
+}
+
+.qti-margin-y-4 {
+  margin-top: 1.5rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+.qti-margin-y-5 {
+  margin-top: 3rem !important;
+  margin-bottom: 3rem !important;
+}
+
+.qti-margin-y-auto {
+  margin-top: auto !important;
+  margin-bottom: auto !important;
+}
+
+/*
+   For margin Top
+   */
+
+.qti-margin-t-0 {
+  margin-top: 0 !important;
+}
+
+.qti-margin-t-1 {
+  margin-top: 0.25rem !important;
+}
+
+.qti-margin-t-2 {
+  margin-top: 0.5rem !important;
+}
+
+.qti-margin-t-3 {
+  margin-top: 1rem !important;
+}
+
+.qti-margin-t-4 {
+  margin-top: 1.5rem !important;
+}
+
+.qti-margin-t-5 {
+  margin-top: 3rem !important;
+}
+
+.qti-margin-t-auto {
+  margin-top: auto !important;
+}
+
+/* 
+  For margin Bottom
+   */
+
+.qti-margin-b-0 {
+  margin-bottom: 0 !important;
+}
+
+.qti-margin-b-1 {
+  margin-bottom: 0.25rem !important;
+}
+
+.qti-margin-b-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.qti-margin-b-3 {
+  margin-bottom: 1rem !important;
+}
+
+.qti-margin-b-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.qti-margin-b-5 {
+  margin-bottom: 3rem !important;
+}
+
+.qti-margin-b-auto {
+  margin-bottom: auto !important;
+}
+
+/*
+   For margin Start LTR
+   */
+
+.qti-margin-s-0 {
+  margin-left: 0 !important;
+}
+
+.qti-margin-s-1 {
+  margin-left: 0.25rem !important;
+}
+
+.qti-margin-s-2 {
+  margin-left: 0.5rem !important;
+}
+
+.qti-margin-s-3 {
+  margin-left: 1rem !important;
+}
+
+.qti-margin-s-4 {
+  margin-left: 1.5rem !important;
+}
+
+.qti-margin-s-5 {
+  margin-left: 3rem !important;
+}
+
+.qti-margin-s-auto {
+  margin-left: auto !important;
+}
+
+/* 
+  For margin End LTR
+   */
+
+.qti-margin-e-0 {
+  margin-right: 0 !important;
+}
+
+.qti-margin-e-1 {
+  margin-right: 0.25rem !important;
+}
+
+.qti-margin-e-2 {
+  margin-right: 0.5rem !important;
+}
+
+.qti-margin-e-3 {
+  margin-right: 1rem !important;
+}
+
+.qti-margin-e-4 {
+  margin-right: 1.5rem !important;
+}
+
+.qti-margin-e-5 {
+  margin-right: 3rem !important;
+}
+
+.qti-margin-e-auto {
+  margin-right: auto !important;
+}
+
+/* =========
+    Padding css
+    ========== */
+
+/*
+  For padding Top and Bottom and Left and Right
+   */
+
+.qti-padding-0 {
+  padding: 0 !important;
+}
+
+.qti-padding-1 {
+  padding: 0.25rem !important;
+}
+
+.qti-padding-2 {
+  padding: 0.5rem !important;
+}
+
+.qti-padding-3 {
+  padding: 1rem !important;
+}
+
+.qti-padding-4 {
+  padding: 1.5rem !important;
+}
+
+.qti-padding-5 {
+  padding: 3rem !important;
+}
+
+/*
+   For padding Left and Right
+   */
+
+.qti-padding-x-0 {
+  padding-right: 0 !important;
+  padding-left: 0 !important;
+}
+
+.qti-padding-x-1 {
+  padding-right: 0.25rem !important;
+  padding-left: 0.25rem !important;
+}
+
+.qti-padding-x-2 {
+  padding-right: 0.5rem !important;
+  padding-left: 0.5rem !important;
+}
+
+.qti-padding-x-3 {
+  padding-right: 1rem !important;
+  padding-left: 1rem !important;
+}
+
+.qti-padding-x-4 {
+  padding-right: 1.5rem !important;
+  padding-left: 1.5rem !important;
+}
+
+.qti-padding-x-5 {
+  padding-right: 3rem !important;
+  padding-left: 3rem !important;
+}
+
+/*
+    For padding Top and Bottom
+   */
+
+.qti-padding-y-0 {
+  padding-top: 0 !important;
+  padding-bottom: 0 !important;
+}
+
+.qti-padding-y-1 {
+  padding-top: 0.25rem !important;
+  padding-bottom: 0.25rem !important;
+}
+
+.qti-padding-y-2 {
+  padding-top: 0.5rem !important;
+  padding-bottom: 0.5rem !important;
+}
+
+.qti-padding-y-3 {
+  padding-top: 1rem !important;
+  padding-bottom: 1rem !important;
+}
+
+.qti-padding-y-4 {
+  padding-top: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.qti-padding-y-5 {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
+
+/*
+   For padding Top
+   */
+
+.qti-padding-t-0 {
+  padding-top: 0 !important;
+}
+
+.qti-padding-t-1 {
+  padding-top: 0.25rem !important;
+}
+
+.qti-padding-t-2 {
+  padding-top: 0.5rem !important;
+}
+
+.qti-padding-t-3 {
+  padding-top: 1rem !important;
+}
+
+.qti-padding-t-4 {
+  padding-top: 1.5rem !important;
+}
+
+.qti-padding-t-5 {
+  padding-top: 3rem !important;
+}
+
+/*
+   For padding Bottom
+   */
+
+.qti-padding-b-0 {
+  padding-bottom: 0 !important;
+}
+
+.qti-padding-b-1 {
+  padding-bottom: 0.25rem !important;
+}
+
+.qti-padding-b-2 {
+  padding-bottom: 0.5rem !important;
+}
+
+.qti-padding-b-3 {
+  padding-bottom: 1rem !important;
+}
+
+.qti-padding-b-4 {
+  padding-bottom: 1.5rem !important;
+}
+
+.qti-padding-b-5 {
+  padding-bottom: 3rem !important;
+}
+
+/*
+    For padding Start LTR
+   */
+
+.qti-padding-s-0 {
+  padding-left: 0 !important;
+}
+
+.qti-padding-s-1 {
+  padding-left: 0.25rem !important;
+}
+
+.qti-padding-s-2 {
+  padding-left: 0.5rem !important;
+}
+
+.qti-padding-s-3 {
+  padding-left: 1rem !important;
+}
+
+.qti-padding-s-4 {
+  padding-left: 1.5rem !important;
+}
+
+.qti-padding-s-5 {
+  padding-left: 3rem !important;
+}
+
+/*
+   For padding End LTR
+   */
+
+.qti-padding-e-0 {
+  padding-right: 0 !important;
+}
+
+.qti-padding-e-1 {
+  padding-right: 0.25rem !important;
+}
+
+.qti-padding-e-2 {
+  padding-right: 0.5rem !important;
+}
+
+.qti-padding-e-3 {
+  padding-right: 1rem !important;
+}
+
+.qti-padding-e-4 {
+  padding-right: 1.5rem !important;
+}
+
+.qti-padding-e-5 {
+  padding-right: 3rem !important;
+}
+
+/* ====================
+     Horizontal alignment
+     ==================== */
+
+.qti-align-left {
+  text-align: left;
+}
+
+.qti-align-center {
+  text-align: center;
+}
+
+.qti-align-right {
+  text-align: right;
+}
+
+/* ==================
+     Vertical alignment
+     ================== */
+
+.qti-valign-top {
+  vertical-align: top;
+}
+
+.qti-valign-middle {
+  vertical-align: middle;
+}
+
+.qti-valign-baseline {
+  vertical-align: baseline;
+}
+
+.qti-valign-bottom {
+  vertical-align: bottom;
+}
+
+/* =============
+     Height styles
+     ============= */
+
+.qti-height-0 {
+  height: 0;
+}
+
+.qti-height-px {
+  height: 1px;
+}
+
+.qti-height-0p5 {
+  height: 0.125rem;
+}
+
+.qti-height-1 {
+  height: 0.25rem;
+}
+
+.qti-height-1p5 {
+  height: 0.375rem;
+}
+
+.qti-height-2 {
+  height: 0.5rem;
+}
+
+.qti-height-2p5 {
+  height: 0.625rem;
+}
+
+.qti-height-3 {
+  height: 0.75rem;
+}
+
+.qti-height-3p5 {
+  height: 0.875rem;
+}
+
+.qti-height-4 {
+  height: 1rem;
+}
+
+.qti-height-5 {
+  height: 1.25rem;
+}
+
+.qti-height-6 {
+  height: 1.5rem;
+}
+
+.qti-height-7 {
+  height: 1.75rem;
+}
+
+.qti-height-8 {
+  height: 2rem;
+}
+
+.qti-height-9 {
+  height: 2.25rem;
+}
+
+.qti-height-10 {
+  height: 2.5rem;
+}
+
+.qti-height-11 {
+  height: 2.75rem;
+}
+
+.qti-height-12 {
+  height: 3rem;
+}
+
+.qti-height-14 {
+  height: 3.5rem;
+}
+
+.qti-height-16 {
+  height: 4rem;
+}
+
+.qti-height-20 {
+  height: 5rem;
+}
+
+.qti-height-24 {
+  height: 6rem;
+}
+
+.qti-height-28 {
+  height: 7rem;
+}
+
+.qti-height-32 {
+  height: 8rem;
+}
+
+.qti-height-36 {
+  height: 9rem;
+}
+
+.qti-height-40 {
+  height: 10rem;
+}
+
+.qti-height-44 {
+  height: 11rem;
+}
+
+.qti-height-48 {
+  height: 12rem;
+}
+
+.qti-height-52 {
+  height: 13rem;
+}
+
+.qti-height-56 {
+  height: 14rem;
+}
+
+.qti-height-60 {
+  height: 15rem;
+}
+
+.qti-height-64 {
+  height: 16rem;
+}
+
+.qti-height-72 {
+  height: 18rem;
+}
+
+.qti-height-80 {
+  height: 20rem;
+}
+
+.qti-height-96 {
+  height: 24rem;
+}
+
+.qti-height-1-2 {
+  height: 50%;
+}
+
+.qti-height-1-3 {
+  height: 33.3333%;
+}
+
+.qti-height-2-3 {
+  height: 66.6667%;
+}
+
+.qti-height-1-4 {
+  height: 25%;
+}
+
+.qti-height-2-4 {
+  height: 50%;
+}
+
+.qti-height-3-4 {
+  height: 75%;
+}
+
+.qti-height-1-5 {
+  height: 20%;
+}
+
+.qti-height-2-5 {
+  height: 40%;
+}
+
+.qti-height-3-5 {
+  height: 60%;
+}
+
+.qti-height-4-5 {
+  height: 80%;
+}
+
+.qti-height-1-6 {
+  height: 16.6667%;
+}
+
+.qti-height-2-6 {
+  height: 33.3333%;
+}
+
+.qti-height-3-6 {
+  height: 50%;
+}
+
+.qti-height-4-6 {
+  height: 66.6667%;
+}
+
+.qti-height-5-6 {
+  height: 83.3333%;
+}
+
+.qti-height-auto {
+  height: auto;
+}
+
+.qti-height-full {
+  height: 100%;
+}
+
+/* ============
+     Width styles
+     ============ */
+
+.qti-width-0 {
+  width: 0;
+}
+
+.qti-width-px {
+  width: 1px;
+}
+
+.qti-width-0p5 {
+  width: 0.125rem;
+}
+
+.qti-width-1 {
+  width: 0.25rem;
+}
+
+.qti-width-1p5 {
+  width: 0.375rem;
+}
+
+.qti-width-2 {
+  width: 0.5rem;
+}
+
+.qti-width-2p5 {
+  width: 0.625rem;
+}
+
+.qti-width-3 {
+  width: 0.75rem;
+}
+
+.qti-width-3p5 {
+  width: 0.875rem;
+}
+
+.qti-width-4 {
+  width: 1rem;
+}
+
+.qti-width-5 {
+  width: 1.25rem;
+}
+
+.qti-width-6 {
+  width: 1.5rem;
+}
+
+.qti-width-7 {
+  width: 1.75rem;
+}
+
+.qti-width-8 {
+  width: 2rem;
+}
+
+.qti-width-9 {
+  width: 2.25rem;
+}
+
+.qti-width-10 {
+  width: 2.5rem;
+}
+
+.qti-width-11 {
+  width: 2.75rem;
+}
+
+.qti-width-12 {
+  width: 3rem;
+}
+
+.qti-width-14 {
+  width: 3.5rem;
+}
+
+.qti-width-16 {
+  width: 4rem;
+}
+
+.qti-width-20 {
+  width: 5rem;
+}
+
+.qti-width-24 {
+  width: 6rem;
+}
+
+.qti-width-28 {
+  width: 7rem;
+}
+
+.qti-width-32 {
+  width: 8rem;
+}
+
+.qti-width-36 {
+  width: 9rem;
+}
+
+.qti-width-40 {
+  width: 10rem;
+}
+
+.qti-width-44 {
+  width: 11rem;
+}
+
+.qti-width-48 {
+  width: 12rem;
+}
+
+.qti-width-52 {
+  width: 13rem;
+}
+
+.qti-width-56 {
+  width: 14rem;
+}
+
+.qti-width-60 {
+  width: 15rem;
+}
+
+.qti-width-64 {
+  width: 16rem;
+}
+
+.qti-width-72 {
+  width: 18rem;
+}
+
+.qti-width-80 {
+  width: 20rem;
+}
+
+.qti-width-96 {
+  width: 24rem;
+}
+
+.qti-width-auto {
+  width: auto;
+}
+
+.qti-width-1-2 {
+  width: 50%;
+}
+
+.qti-width-1-3 {
+  width: 33.3333%;
+}
+
+.qti-width-2-3 {
+  width: 66.6667%;
+}
+
+.qti-width-1-4 {
+  width: 25%;
+}
+
+.qti-width-2-4 {
+  width: 50%;
+}
+
+.qti-width-3-4 {
+  width: 75%;
+}
+
+.qti-width-1-5 {
+  width: 20%;
+}
+
+.qti-width-2-5 {
+  width: 40%;
+}
+
+.qti-width-3-5 {
+  width: 60%;
+}
+
+.qti-width-4-5 {
+  width: 80%;
+}
+
+.qti-width-1-6 {
+  width: 16.6667%;
+}
+
+.qti-width-2-6 {
+  width: 33.3333%;
+}
+
+.qti-width-3-6 {
+  width: 50%;
+}
+
+.qti-width-4-6 {
+  width: 66.6667%;
+}
+
+.qti-width-5-6 {
+  width: 83.3333%;
+}
+
+.qti-width-1-12 {
+  width: 8.3333%;
+}
+
+.qti-width-2-12 {
+  width: 16.6667%;
+}
+
+.qti-width-3-12 {
+  width: 25%;
+}
+
+.qti-width-4-12 {
+  width: 33.3333%;
+}
+
+.qti-width-5-12 {
+  width: 41.6667%;
+}
+
+.qti-width-6-12 {
+  width: 50%;
+}
+
+.qti-width-7-12 {
+  width: 58.3333%;
+}
+
+.qti-width-8-12 {
+  width: 66.6667%;
+}
+
+.qti-width-9-12 {
+  width: 75%;
+}
+
+.qti-width-10-12 {
+  width: 83.3333%;
+}
+
+.qti-width-11-12 {
+  width: 91.6667%;
+}
+
+.qti-width-full,
+.qti-fullwidth {
+  width: 100%;
+}
+
+/* ==================
+     Text Indent styles
+     ================== */
+
+.qti-text-indent-0 {
+  text-indent: 0;
+}
+
+.qti-text-indent-px {
+  text-indent: 1px;
+}
+
+.qti-text-indent-0p5 {
+  text-indent: 0.125rem;
+}
+
+.qti-text-indent-1 {
+  text-indent: 0.25rem;
+}
+
+.qti-text-indent-1p5 {
+  text-indent: 0.375rem;
+}
+
+.qti-text-indent-2 {
+  text-indent: 0.5rem;
+}
+
+.qti-text-indent-2p5 {
+  text-indent: 0.625rem;
+}
+
+.qti-text-indent-3 {
+  text-indent: 0.75rem;
+}
+
+.qti-text-indent-3p5 {
+  text-indent: 0.875rem;
+}
+
+.qti-text-indent-4 {
+  text-indent: 1rem;
+}
+
+.qti-text-indent-5 {
+  text-indent: 1.25rem;
+}
+
+.qti-text-indent-6 {
+  text-indent: 1.5rem;
+}
+
+.qti-text-indent-7 {
+  text-indent: 1.75rem;
+}
+
+.qti-text-indent-8 {
+  text-indent: 2rem;
+}
+
+.qti-text-indent-12 {
+  text-indent: 3rem;
+}
+
+.qti-text-indent-16 {
+  text-indent: 4rem;
+}
+
+.qti-text-indent-20 {
+  text-indent: 5rem;
+}
+
+.qti-text-indent-24 {
+  text-indent: 6rem;
+}
+
+.qti-text-indent-28 {
+  text-indent: 7rem;
+}
+
+.qti-text-indent-32 {
+  text-indent: 8rem;
+}
+
+/* =================
+     List Style styles
+     ================= */
+
+.qti-list-style-type-none {
+  list-style-type: none;
+}
+
+.qti-list-style-type-disc {
+  list-style-type: disc;
+}
+
+.qti-list-style-type-circle {
+  list-style-type: circle;
+}
+
+.qti-list-style-type-square {
+  list-style-type: square;
+}
+
+.qti-list-style-type-decimal {
+  list-style-type: decimal;
+}
+
+.qti-list-style-type-decimal-leading-zero {
+  list-style-type: decimal-leading-zero;
+}
+
+.qti-list-style-type-lower-alpha {
+  list-style-type: lower-alpha;
+}
+
+.qti-list-style-type-upper-alpha {
+  list-style-type: upper-alpha;
+}
+
+.qti-list-style-type-lower-roman {
+  list-style-type: lower-roman;
+}
+
+.qti-list-style-type-upper-roman {
+  list-style-type: upper-roman;
+}
+
+.qti-list-style-type-lower-latin {
+  list-style-type: lower-latin;
+}
+
+.qti-list-style-type-upper-latin {
+  list-style-type: upper-latin;
+}
+
+.qti-list-style-type-lower-greek {
+  list-style-type: lower-greek;
+}
+
+.qti-list-style-type-arabic-indic {
+  list-style-type: arabic-indic;
+}
+
+.qti-list-style-type-armenian {
+  list-style-type: armenian;
+}
+
+.qti-list-style-type-lower-armenian {
+  list-style-type: lower-armenian;
+}
+
+.qti-list-style-type-upper-armenian {
+  list-style-type: upper-armenian;
+}
+
+.qti-list-style-type-bengali {
+  list-style-type: bengali;
+}
+
+.qti-list-style-type-cambodian {
+  list-style-type: cambodian;
+}
+
+.qti-list-style-type-simp-chinese-formal {
+  list-style-type: simp-chinese-formal;
+}
+
+.qti-list-style-type-simp-chinese-informal {
+  list-style-type: simp-chinese-informal;
+}
+
+.qti-list-style-type-trad-chinese-formal {
+  list-style-type: trad-chinese-formal;
+}
+
+.qti-list-style-type-trad-chinese-informal {
+  list-style-type: trad-chinese-informal;
+}
+
+.qti-list-style-type-cjk-ideographic {
+  list-style-type: cjk-ideographic;
+}
+
+.qti-list-style-type-cjk-heavenly-stem {
+  list-style-type: cjk-heavenly-stem;
+}
+
+.qti-list-style-type-cjk-earthly-branch {
+  list-style-type: cjk-earthly-branch;
+}
+
+.qti-list-style-type-devanagari {
+  list-style-type: devanagari;
+}
+
+.qti-list-style-type-ethiopic-halehame-ti-er {
+  list-style-type: ethiopic-halehame-ti-er;
+}
+
+.qti-list-style-type-ethiopic-halehame-ti-et {
+  list-style-type: ethiopic-halehame-ti-et;
+}
+
+.qti-list-style-type-ethiopic-halehame-am {
+  list-style-type: ethiopic-halehame-am;
+}
+
+.qti-list-style-type-ethiopic-halehame {
+  list-style-type: ethiopic-halehame;
+}
+
+.qti-list-style-type-georgian {
+  list-style-type: georgian;
+}
+
+.qti-list-style-type-gujarati {
+  list-style-type: gujarati;
+}
+
+.qti-list-style-type-gurmukhi {
+  list-style-type: gurmukhi;
+}
+
+.qti-list-style-type-hangul {
+  list-style-type: hangul;
+}
+
+.qti-list-style-type-hangul-consonant {
+  list-style-type: hangul-consonant;
+}
+
+.qti-list-style-type-hebrew {
+  list-style-type: hebrew;
+}
+
+.qti-list-style-type-hiragana {
+  list-style-type: hiragana;
+}
+
+.qti-list-style-type-hiragana-iroha {
+  list-style-type: hiragana-iroha;
+}
+
+.qti-list-style-type-khmer {
+  list-style-type: khmer;
+}
+
+.qti-list-style-type-korean-hangul-formal {
+  list-style-type: korean-hangul-formal;
+}
+
+.qti-list-style-type-korean-hanja-formal {
+  list-style-type: korean-hanja-formal;
+}
+
+.qti-list-style-type-korean-hanja-informal {
+  list-style-type: korean-hanja-informal;
+}
+
+.qti-list-style-type-lao {
+  list-style-type: lao;
+}
+
+.qti-list-style-type-malayalam {
+  list-style-type: malayalam;
+}
+
+.qti-list-style-type-mongolian {
+  list-style-type: mongolian;
+}
+
+.qti-list-style-type-myanmar {
+  list-style-type: myanmar;
+}
+
+.qti-list-style-type-oriya {
+  list-style-type: oriya;
+}
+
+.qti-list-style-type-persian {
+  list-style-type: persian;
+}
+
+.qti-list-style-type-thai {
+  list-style-type: thai;
+}
+
+.qti-list-style-type-tibetan {
+  list-style-type: tibetan;
+}
+
+.qti-list-style-type-telugu {
+  list-style-type: telugu;
+}
+
+.qti-list-style-type-urdu {
+  list-style-type: urdu;
+}
+
+/* =========================
+     Other QTI 3 Presentation Utilities
+     ========================= */
+
+.qti-bordered {
+  border: 1px solid var(--table-border-color);
+}
+
+.qti-underline {
+  text-decoration: underline;
+  text-decoration-color: var(--foreground);
+}
+
+.qti-italic {
+  font-style: italic;
+}
+
+.qti-well {
+  min-height: 20px;
+  padding: 19px;
+  margin-bottom: 20px;
+  background-color: var(--well-bg);
+  border: var(--well-border);
+  border-radius: 4px;
+  box-shadow: var(--well-box-shadow);
+}
+
+/* Set writing-mode to vertical-rl 
+     Typical for CJK vertical text */
+
+.qti-writing-mode-vertical-rl {
+  writing-mode: vertical-rl;
+}
+
+/* Set writing-mode to vertical-lr
+     Typical for Mongolian vertical text  */
+
+.qti-writing-mode-vertical-lr {
+  writing-mode: vertical-lr;
+}
+
+/* Set writing-mode to horizontal-tb 
+     Browser default */
+
+.qti-writing-mode-horizontal-tb {
+  writing-mode: horizontal-tb;
+}
+
+/* Float an element left */
+
+.qti-float-left {
+  float: left;
+}
+
+/* Float an element right */
+
+.qti-float-right {
+  float: right;
+}
+
+/* Remove a float */
+
+.qti-float-none {
+  float: none;
+}
+
+/* Clearfix Hack to apply to a container of 
+   floated content that overflows the container. */
+
+.qti-float-clearfix::after {
+  content: '';
+  clear: both;
+  display: table;
+}
+
+.qti-float-clear-left
+  .qti-float-clear-right
+  .qti-float-clear-both
+  
+  /* Set text-orientation to upright */
+  .qti-text-orientation-upright {
+  text-orientation: upright;
+}
+
+/* stylelint-disable number-max-precision */
+
+@layer qti-base {
+  .qti-layout-row {
+    display: flex;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 2.1276595745%;
+  }
+
+  .qti-layout-row [class*='qti-layout-col']:not(:empty) {
+    box-sizing: border-box;
+  }
+
+  .qti-layout-row [class*='qti-layout-col']:empty {
+    width: 0;
+    overflow: hidden; /* to fully collapse if there\u2019s padding or borders */
+  }
+
+  .qti-layout-col1 {
+    width: 6.3829787234%;
+  }
+
+  .qti-layout-col2 {
+    width: 14.8936170213%;
+  }
+
+  .qti-layout-col3 {
+    width: 23.4042553191%;
+  }
+
+  .qti-layout-col4 {
+    width: 31.914893617%;
+  }
+
+  .qti-layout-col5 {
+    width: 40.4255319149%;
+  }
+
+  .qti-layout-col6 {
+    width: 48.9361702128%;
+  }
+
+  .qti-layout-col7 {
+    width: 57.4468085106%;
+  }
+
+  .qti-layout-col8 {
+    width: 65.9574468085%;
+  }
+
+  .qti-layout-col9 {
+    width: 74.4680851064%;
+  }
+
+  .qti-layout-col10 {
+    width: 82.9787234043%;
+  }
+
+  .qti-layout-col11 {
+    width: 91.4893617021%;
+  }
+
+  .qti-layout-col12 {
+    width: 100%;
+  }
+
+  .qti-layout-offset1 {
+    margin-left: 8.5106382979%;
+  }
+
+  .qti-layout-offset2 {
+    margin-left: 17.0212765957%;
+  }
+
+  .qti-layout-offset3 {
+    margin-left: 25.5319148936%;
+  }
+
+  .qti-layout-offset4 {
+    margin-left: 34.0425531915%;
+  }
+
+  .qti-layout-offset5 {
+    margin-left: 42.5531914894%;
+  }
+
+  .qti-layout-offset6 {
+    margin-left: 51.0638297872%;
+  }
+
+  .qti-layout-offset7 {
+    margin-left: 59.5744680851%;
+  }
+
+  .qti-layout-offset8 {
+    margin-left: 68.085106383%;
+  }
+
+  .qti-layout-offset9 {
+    margin-left: 76.5957446809%;
+  }
+
+  .qti-layout-offset10 {
+    margin-left: 85.1063829787%;
+  }
+
+  .qti-layout-offset11 {
+    margin-left: 93.6170212766%;
+  }
+
+  .qti-layout-offset12 {
+    margin-left: 102.1276595745%;
+  }
+
+  @media (width <= 767px) {
+    [class*='qti-layout-col'] {
+      width: 100%;
+    }
+  }
+}
+
+[view],
+qti-outcome-declaration,
+qti-response-declaration {
+  display: none;
+}
+
+[view].show {
+  display: block;
+}
+
+:host {
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
+/* components */
+
+@layer qti-components {
+  qti-choice-interaction {
+    &.qti-input-control-hidden {
+      & qti-simple-choice {
+
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        &::part(ch) {
+          display: none;
+        }
+
+        &:state(--checked),
+        &[aria-checked='true'] {
+          border-color: var(--qti-border-active);
+          background-color: var(--qti-bg-active);
+        }
+
+        &:state(readonly),
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &:state(disabled),
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        border-radius: var(--qti-border-radius);
+
+        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none
+      }
+    }
+
+    &:not(.qti-input-control-hidden) {
+      & qti-simple-choice {
+
+        &:not([aria-disabled='true'], [aria-readonly='true'], :state(--checked)):hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        &:state(--checked),
+        &[aria-checked='true'] {
+          border-color: var(--qti-border-active);
+          background-color: var(--qti-bg-active);
+        }
+
+        &:state(readonly),
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &:state(disabled),
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        &::part(cha) {
+          width: calc(var(--qti-form-size) - 6px);
+          height: calc(var(--qti-form-size) - 6px);
+        }
+
+        &:state(radio)::part(ch) {
+          border-radius: 100%;
+          display: grid;
+          place-content: center;
+          width: var(--qti-form-size);
+          height: var(--qti-form-size);
+          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+          outline: none;
+        }
+
+        &:state(radio):state(--checked)::part(cha) {
+          background-color: var(--qti-border-active);
+          border-radius: 100%;
+        }
+
+        &:state(checkbox)::part(ch) {
+          display: flex;
+          place-items: center;
+          border-radius: var(--qti-border-radius);
+          display: grid;
+          place-content: center;
+          width: var(--qti-form-size);
+          height: var(--qti-form-size);
+          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+          outline: none;
+        }
+
+        &:state(checkbox):state(--checked)::part(cha) {
+          background-color: var(--qti-border-active);
+          -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
+                  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
+        }
+
+        gap: 0.5rem;
+
+        border-radius: var(--qti-border-radius);
+
+        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+
+        outline: none;
+
+        cursor: pointer
+      }
+    }
+
+    & qti-simple-choice {
+      width: -moz-fit-content;
+      width: fit-content;
+      cursor: pointer;
+
+      &:state(correct-response),
+      &[data-correct-response='true'] {
+        &::after {
+          content: '\\02714';
+          color: #16a34a; /* text-green-600 */
+        }
+      }
+    }
+
+    & qti-simple-choice > p {
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+  }
+
+  .hover-border {
+    border: 2px solid #000; /* Adjust the border style and color as needed */
+  }
+
+  qti-graphic-gap-match-interaction {
+    position: relative;
+
+    &.qti-selections-light {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+        border-color: var(--qti-light-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+      }
+    }
+
+    &.qti-selections-dark {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+        border-color: var(--qti-dark-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+      }
+    }
+
+    /* General styles for active and enabled states */
+    &:state(--dragzone-active)::part(drags) {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-enabled)::part(drags) {
+      background-color: var(--qti-bg-active);
+    }
+
+    & qti-gap-img,
+    qti-gap-text {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      cursor: grab;
+    }
+
+    & qti-associable-hotspot {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      border: 2px solid transparent;
+
+      &[enabled] {
+
+        /* Light theme override */
+        .qti-selections-light & {
+          background-color: var(--qti-light-bg-active);
+        }
+
+        /* Dark theme override */
+        .qti-selections-dark & {
+          background-color: var(--qti-dark-bg-active);
+        }
+        background-color: var(--qti-bg-active)
+      }
+
+      &[active] {
+
+        /* Light theme override */
+        .qti-selections-light & {
+          background-color: var(--qti-light-bg-active);
+          border-color: var(--qti-light-border-active);
+        }
+
+        /* Dark theme override */
+        .qti-selections-dark & {
+          background-color: var(--qti-dark-bg-active);
+          border-color: var(--qti-dark-border-active);
+        }
+        border-color: var(--qti-border-active);
+        background-color: var(--qti-bg-active)
+      }
+
+      &[disabled] {
+
+        &:not(:empty) {
+          cursor: default !important;
+        }
+
+        cursor: not-allowed;
+
+        background-color: var(--qti-disabled-bg);
+
+        color: var(--qti-disabled-color);
+
+        border-color: var(--qti-border-color);
+
+        outline: 4px solid var(--qti-disabled-bg)
+      }
+
+      &:empty::after {
+        padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
+        content: '\\0000a0'; /* when empty, put a space in it */
+      }
+
+      &:not(:empty) {
+        padding: 0;
+        width: auto;
+      }
+
+      &:not(:empty) > * {
+        flex: 1;
+        transform: rotate(0); /* rotate-0 */
+        box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
+      }
+    }
+
+    & img {
+      margin: 0;
+      padding: 0;
+    }
+  }
+
+  qti-text-entry-interaction {
+    &::part(input) {
+      border-radius: 0;
+      cursor: text;
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+      background: unset;
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--qti-hover-bg);
+    }
+
+    &:focus-within {
+      &::part(input) {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        border-color: var(--qti-border-active);
+      }
+    }
+  }
+
+  qti-extended-text-interaction {
+    &::part(textarea) {
+      border-radius: 0;
+      cursor: text;
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+      background: unset;
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+      outline: none;
+    }
+
+    &:hover {
+      background-color: var(--qti-hover-bg);
+    }
+
+    &:focus-within {
+      &::part(textarea) {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        border-color: var(--qti-border-active);
+      }
+    }
+  }
+
+  qti-gap-match-interaction {
+    &.qti-selections-light {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+        border-color: var(--qti-light-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+      }
+    }
+
+    &.qti-selections-dark {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+        border-color: var(--qti-dark-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+      }
+    }
+
+    /* General styles for active and enabled states */
+    &:state(--dragzone-active)::part(drags) {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-enabled)::part(drags) {
+      background-color: var(--qti-bg-active);
+    }
+
+    & qti-gap-text {
+
+      &[dragging] {
+        pointer-events: none;
+        rotate: -2deg;
+        box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
+    0 4px 8px rgb(0 0 0 / 10%);
+      }
+
+      &:hover {
+        background-color: var(--qti-hover-bg);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
+
+      transition: transform 200ms ease-out,
+    box-shadow 200ms ease-out,
+    rotate 200ms ease-out;
+
+      cursor: grab;
+
+      background-color: var(--qti-bg);
+
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+
+      border-radius: var(--qti-border-radius);
+
+      padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
+
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+      outline: none;
+
+      background-image: radial-gradient(
+    circle at center,
+    rgb(0 0 0 / 10%) 0,
+    rgb(0 0 0 / 20%) 2px,
+    rgb(255 255 255 / 0%) 2px,
+    rgb(255 255 255 / 0%) 100%
+  );
+
+      background-repeat: repeat-y;
+
+      background-position: left center;
+
+      background-size: 14px 8px
+    }
+
+    & qti-gap {
+
+      &[enabled] {
+
+        /* Light theme override */
+        .qti-selections-light & {
+          border-color: var(--qti-light-border-active);
+        }
+
+        /* Dark theme override */
+        .qti-selections-dark & {
+          border-color: var(--qti-dark-border-active);
+        }
+        background-color: var(--qti-bg-active)
+      }
+
+      &[disabled] {
+
+        &:not(:empty) {
+          cursor: default !important;
+        }
+
+        cursor: not-allowed;
+
+        background-color: var(--qti-disabled-bg);
+
+        color: var(--qti-disabled-color);
+
+        border-color: var(--qti-border-color);
+
+        outline: 4px solid var(--qti-disabled-bg)
+      }
+
+      &[active] {
+
+        /* Light theme override */
+        .qti-selections-light & {
+          background-color: var(--qti-light-bg-active);
+          border-color: var(--qti-light-border-active);
+        }
+
+        /* Dark theme override */
+        .qti-selections-dark & {
+          background-color: var(--qti-dark-bg-active);
+          border-color: var(--qti-dark-border-active);
+        }
+        border-color: var(--qti-border-active);
+        background-color: var(--qti-bg-active)
+      }
+
+      display: inline-flex;
+      align-items: center;
+
+      &:empty::after {
+        padding: var(--qti-padding-md) var(--qti-padding-lg); /* Padding shorthand */
+        content: '\\0000a0'; /* when empty, put a space in it */
+      }
+
+      &:not(:empty) {
+        display: inline-flex;
+        padding: 0;
+        width: auto;
+      }
+
+      &:not(:empty) > * {
+        flex: 1;
+        transform: rotate(0); /* rotate-0 */
+        box-shadow: 0 0 0 1px #e5e7eb; /* ring-gray-200 */
+      }
+
+      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
+    center no-repeat;
+
+      border-radius: var(--qti-border-radius);
+
+      position: relative;
+
+      background-color: var(--qti-bg);
+
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+      outline: none
+    }
+  }
+
+  qti-hotspot-interaction {
+    & qti-hotspot-choice {
+      &[shape='circle'] {
+
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        &:state(--checked),
+        &[aria-checked='true'] {
+          border-color: var(--qti-border-active);
+        }
+
+        &:state(--readonly),
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &:state(--disabled),
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        width: 100%;
+
+        height: 100%;
+
+        background-color: transparent;
+
+        padding: 0;
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none
+      }
+
+      &[shape='rect'] {
+
+        /* &:hover {
+          @apply hov;
+        } */
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        &:state(--checked),
+        &[aria-checked='true'] {
+          border-color: var(--qti-border-active);
+        }
+
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        width: 100%;
+
+        height: 100%;
+
+        background-color: transparent;
+
+        padding: 0;
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none
+      }
+
+      &[shape='poly'] {
+        &:hover::after {
+          content: '';
+          width: 100%;
+          height: 100%;
+          background: repeating-linear-gradient(
+            45deg,
+            var(--qti-border-active),
+            var(--qti-border-active) 5px,
+            transparent 5px,
+            transparent 10px
+          );
+          display: block;
+        }
+
+        &:state(--checked)::after,
+        &[aria-checked='true']::after {
+          content: '';
+          width: 100%;
+          height: 100%;
+          background: repeating-linear-gradient(
+            45deg,
+            transparent,
+            transparent 5px,
+            var(--qti-border-active) 5px,
+            var(--qti-border-active) 10px
+          );
+          display: block;
+        }
+
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+      }
+    }
+  }
+
+  qti-hottext-interaction {
+    /* &:not(.qti-input-control-hidden),
+    &:not(.qti-unselected-hidden) { */
+    qti-hottext {
+      display: inline-flex;
+      align-items: center;
+
+      &:hover {
+        background-color: var(--qti-hover-bg);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
+
+      &::part(cha) {
+        width: calc(var(--qti-form-size) - 6px);
+        height: calc(var(--qti-form-size) - 6px);
+      }
+
+      &:state(radio)::part(ch) {
+        border-radius: 100%;
+        display: grid;
+        place-content: center;
+        width: var(--qti-form-size);
+        height: var(--qti-form-size);
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+        outline: none;
+      }
+
+      &:state(radio):state(--checked)::part(cha) {
+        background-color: var(--qti-border-active);
+        border-radius: 100%;
+      }
+
+      &:state(checkbox)::part(ch) {
+        display: flex;
+        place-items: center;
+        border-radius: var(--qti-border-radius);
+        display: grid;
+        place-content: center;
+        width: var(--qti-form-size);
+        height: var(--qti-form-size);
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+        outline: none;
+      }
+
+      &:state(checkbox):state(--checked)::part(cha) {
+        background-color: var(--qti-border-active);
+        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
+                mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='currentColor' width='100%' height='100%' viewBox='0 0 24 24'%3E%3Cpath d='M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z'/%3E%3C/svg%3E");
+      }
+
+      gap: 0.5rem;
+
+      border-radius: var(--qti-border-radius);
+
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+
+      outline: none;
+
+      cursor: pointer
+    }
+
+    /* } */
+
+    &.qti-input-control-hidden {
+      qti-hottext {
+        /* --qti-padding-md: 0.1rem;
+        --qti-padding-lg: 0.2rem;
+        --qti-border-radius-md: 0.3rem;
+        --qti-border-thickness: 1px;
+        --qti-font-weight-semibold: 400; */
+
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        /* @layer qti-variants { */
+        &::part(ch) {
+          display: none;
+        }
+
+        &:state(--checked) {
+          border-color: var(--qti-border-active);
+          background-color: var(--qti-bg-active);
+        }
+
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        border-radius: var(--qti-border-radius);
+
+        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none
+      }
+
+      /* } */
+    }
+
+    &.qti-unselected-hidden {
+      qti-hottext {
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        cursor: pointer;
+
+        &::part(ch) {
+          display: none;
+        }
+
+        &:state(--checked) {
+          background-color: var(--qti-bg-active);
+        }
+
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+      }
+    }
+  }
+
+  qti-inline-choice-interaction {
+    &::part(select) {
+
+      &:hover {
+        background-color: var(--qti-hover-bg);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
+
+      border-radius: var(--qti-border-radius);
+
+      position: relative;
+
+      -webkit-appearance: none;
+
+         -moz-appearance: none;
+
+              appearance: none;
+
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+
+      padding-right: calc(var(--qti-padding-horizontal) + 1.5rem);
+
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+      outline: none;
+
+      background: url("data:image/svg+xml,%3Csvg fill='currentColor' width='22' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg' aria-hidden='true'%3E%3Cpath clip-rule='evenodd' fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'%3E%3C/path%3E%3C/svg%3E")
+    no-repeat center right 6px
+    }
+  }
+
+  qti-match-interaction:not(.qti-match-tabular) {
+    /* The draggables */
+    & qti-simple-match-set:first-of-type {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start; /* Prevents children from stretching */
+      gap: var(--qti-gap-size);
+
+      & qti-simple-associable-choice {
+
+        &[dragging] {
+          pointer-events: none;
+          rotate: -2deg;
+          box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
+    0 4px 8px rgb(0 0 0 / 10%);
+        }
+
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        transition: transform 200ms ease-out,
+    box-shadow 200ms ease-out,
+    rotate 200ms ease-out;
+
+        cursor: grab;
+
+        background-color: var(--qti-bg);
+
+        padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+
+        border-radius: var(--qti-border-radius);
+
+        padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none;
+
+        background-image: radial-gradient(
+    circle at center,
+    rgb(0 0 0 / 10%) 0,
+    rgb(0 0 0 / 20%) 2px,
+    rgb(255 255 255 / 0%) 2px,
+    rgb(255 255 255 / 0%) 100%
+  );
+
+        background-repeat: repeat-y;
+
+        background-position: left center;
+
+        background-size: 14px 8px
+      }
+    }
+
+    /* The droppables */
+    & qti-simple-match-set:last-of-type {
+      display: grid;
+      grid-auto-columns: 1fr; /* auto-cols-fr */
+      grid-auto-flow: column; /* grid-flow-col */
+      gap: var(--qti-gap-size); /* gap-2 */
+      width: 100%; /* w-full */
+
+      & qti-simple-associable-choice {
+        display: flex;
+        flex-direction: column;
+      }
+
+      & > qti-simple-associable-choice {
+        /* a droppable qti-simple-associable-choice */
+        box-sizing: border-box;
+        display: grid;
+        grid-row: 2 / 4;
+        grid-template-rows: subgrid;
+
+        & img {
+          max-width: 100%;
+          height: auto;
+        }
+
+        &[enabled] {
+          &::part(dropslot) {
+            background-color: var(--qti-bg-active);
+          }
+        }
+
+        &[disabled] {
+          &::part(dropslot) {
+            cursor: not-allowed;
+            background-color: var(--qti-disabled-bg);
+            color: var(--qti-disabled-color);
+            border-color: var(--qti-border-color);
+            outline: 4px solid var(--qti-disabled-bg);
+          }
+        }
+
+        &[active] {
+          &::part(dropslot) {
+            border-color: var(--qti-border-active);
+            background-color: var(--qti-bg-active);
+          }
+        }
+
+        &::part(dropslot) {
+
+          &[dragging] {
+            pointer-events: none;
+            rotate: -2deg;
+            box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
+    0 4px 8px rgb(0 0 0 / 10%);
+          }
+
+          &:focus {
+            box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+          }
+
+          min-height: 6rem;
+          gap: var(--qti-gap-size);
+          box-sizing: border-box;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
+    center no-repeat;
+          border-radius: var(--qti-border-radius);
+          position: relative;
+          background-color: var(--qti-bg);
+          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+          outline: none;
+        }
+
+        & > *:not(qti-simple-associable-choice) {
+          pointer-events: none;
+        }
+
+        & > qti-simple-associable-choice {
+
+          &::part(dropslot) {
+            display: none;
+          }
+
+          &:hover {
+            background-color: var(--qti-hover-bg);
+          }
+
+          &:focus {
+            box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+          }
+
+          flex-basis: fit-content;
+
+          transition: transform 200ms ease-out,
+    box-shadow 200ms ease-out,
+    rotate 200ms ease-out;
+
+          cursor: grab;
+
+          background-color: var(--qti-bg);
+
+          padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+
+          border-radius: var(--qti-border-radius);
+
+          padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
+
+          border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+          outline: none;
+
+          background-image: radial-gradient(
+    circle at center,
+    rgb(0 0 0 / 10%) 0,
+    rgb(0 0 0 / 20%) 2px,
+    rgb(255 255 255 / 0%) 2px,
+    rgb(255 255 255 / 0%) 100%
+  );
+
+          background-repeat: repeat-y;
+
+          background-position: left center;
+
+          background-size: 14px 8px;
+        }
+      }
+    }
+  }
+
+  qti-order-interaction:state(--dragzone-active)::part(drags) {
+    border-color: var(--qti-border-active);
+    background-color: var(--qti-bg-active);
+  }
+
+  qti-order-interaction:state(--dragzone-enabled)::part(drags) {
+    background-color: var(--qti-bg-active);
+  }
+
+  qti-order-interaction {
+    &::part(qti-simple-choice),
+    & qti-simple-choice {
+
+      &[dragging] {
+        pointer-events: none;
+        rotate: -2deg;
+        box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
+    0 4px 8px rgb(0 0 0 / 10%);
+      }
+
+      &:hover {
+        background-color: var(--qti-hover-bg);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
+
+      transition: transform 200ms ease-out,
+    box-shadow 200ms ease-out,
+    rotate 200ms ease-out;
+
+      cursor: grab;
+
+      background-color: var(--qti-bg);
+
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+
+      border-radius: var(--qti-border-radius);
+
+      padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
+
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+      outline: none;
+
+      background-image: radial-gradient(
+    circle at center,
+    rgb(0 0 0 / 10%) 0,
+    rgb(0 0 0 / 20%) 2px,
+    rgb(255 255 255 / 0%) 2px,
+    rgb(255 255 255 / 0%) 100%
+  );
+
+      background-repeat: repeat-y;
+
+      background-position: left center;
+
+      background-size: 14px 8px
+    }
+
+    &::part(qti-simple-choice) {
+      display: flex;
+      overflow: hidden;
+      align-items: center;
+      width: 100%;
+      text-overflow: ellipsis;
+    }
+
+    &::part(drops) {
+      gap: 0.5rem; /* gap-2 */
+    }
+
+    &::part(drags) {
+      gap: 0.5rem; /* gap-2 */
+    }
+
+    &::part(drop-list) {
+
+      &[enabled] {
+
+        /* Light theme override */
+        .qti-selections-light & {
+          border-color: var(--qti-light-border-active);
+        }
+
+        /* Dark theme override */
+        .qti-selections-dark & {
+          border-color: var(--qti-dark-border-active);
+        }
+        background-color: var(--qti-bg-active)
+      }
+
+      &:hover {
+        background-color: var(--qti-hover-bg);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
+
+      display: flex;
+      min-height: 4rem;
+      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
+    center no-repeat;
+      border-radius: var(--qti-border-radius);
+      position: relative;
+      background-color: var(--qti-bg);
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+      outline: none;
+    }
+
+    &::part(active) {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    & drop-list {
+      &[shape='circle'] {
+
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        &[aria-checked='true'] {
+          border-color: var(--qti-border-active);
+          background-color: var(--qti-bg-active);
+        }
+
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        width: 100%;
+
+        height: 100%;
+
+        background-color: transparent;
+
+        padding: 0;
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none
+      }
+
+      &[shape='square'] {
+
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        &[aria-checked='true'] {
+          border-color: var(--qti-border-active);
+          background-color: var(--qti-bg-active);
+        }
+
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        width: 100%;
+
+        height: 100%;
+
+        background-color: transparent;
+
+        padding: 0;
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none
+      }
+    }
+  }
+
+  qti-associate-interaction {
+    & qti-simple-associable-choice, /* drags when in lightdom */
+    &::part(qti-simple-associable-choice) /* drags when in shadowdom */ {
+
+      &:hover {
+        background-color: var(--qti-hover-bg);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
+
+      &[dragging] {
+        pointer-events: none;
+        rotate: -2deg;
+        box-shadow: 0 8px 12px rgb(0 0 0 / 20%),
+    0 4px 8px rgb(0 0 0 / 10%);
+      }
+
+      transition: transform 200ms ease-out,
+    box-shadow 200ms ease-out,
+    rotate 200ms ease-out;
+
+      cursor: grab;
+
+      background-color: var(--qti-bg);
+
+      padding: var(--qti-padding-vertical) var(--qti-padding-horizontal);
+
+      border-radius: var(--qti-border-radius);
+
+      padding-left: calc(var(--qti-padding-horizontal) + 0.5rem);
+
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+      outline: none;
+
+      background-image: radial-gradient(
+    circle at center,
+    rgb(0 0 0 / 10%) 0,
+    rgb(0 0 0 / 20%) 2px,
+    rgb(255 255 255 / 0%) 2px,
+    rgb(255 255 255 / 0%) 100%
+  );
+
+      background-repeat: repeat-y;
+
+      background-position: left center;
+
+      background-size: 14px 8px
+    }
+
+    /* display: flex;
+    overflow: hidden;
+    align-items: center; */
+
+    /* &::part(drop-container) {
+      display: flex;
+      flex-direction: column;
+      gap: var(--qti-gap-size);
+    } */
+
+    &::part(drop-list) {
+
+      display: grid;
+      height: 3rem;
+      min-width: 10rem;
+      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><circle cx="10" cy="10" r="7" stroke="%23CCCCCC" stroke-width="1" fill="transparent" /></svg>')
+    center no-repeat;
+      border-radius: var(--qti-border-radius);
+      position: relative;
+      background-color: var(--qti-bg);
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+      outline: none;
+    }
+
+    &::part(drop-list):focus {
+      box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+    }
+
+    &::part(drop-list)[dragging] {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    /* &::part(drop-list) {
+      @apply act;
+    } */
+  }
+
+  qti-graphic-order-interaction {
+    & qti-hotspot-choice {
+
+      &:hover {
+        background-color: var(--qti-hover-bg);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
+
+      &:state(--checked),
+      &[aria-checked='true'] {
+        border-color: var(--qti-border-active);
+        background-color: var(--qti-bg-active);
+      }
+
+      &[aria-readonly='true'] {
+        cursor: pointer;
+        background-color: var(--qti-bg);
+        outline: 0;
+        border: none;
+      }
+
+      &[aria-disabled='true'] {
+        cursor: not-allowed;
+        background-color: var(--qti-disabled-bg);
+        color: var(--qti-disabled-color);
+        border-color: var(--qti-border-color);
+        outline: 4px solid var(--qti-disabled-bg);
+      }
+
+      &[aria-ordervalue] {
+        display: grid;
+        place-content: center;
+      }
+
+      &[aria-ordervalue]::after {
+        content: attr(aria-ordervalue) !important;
+      }
+
+      width: 100%;
+
+      height: 100%;
+
+      background-color: transparent;
+
+      padding: 0;
+
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+      outline: none
+    }
+
+    &.qti-selections-light {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+        border-color: var(--qti-light-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+      }
+    }
+
+    &.qti-selections-dark {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+        border-color: var(--qti-dark-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+      }
+    }
+
+    /* General styles for active and enabled states */
+    &:state(--dragzone-active)::part(drags) {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-enabled)::part(drags) {
+      background-color: var(--qti-bg-active);
+    }
+  }
+
+  qti-graphic-associate-interaction {
+    position: relative;
+    display: block;
+
+    & qti-associable-hotspot {
+      &[shape='circle'] {
+
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        &[aria-checked='true'] {
+          border-color: var(--qti-border-active);
+          background-color: var(--qti-bg-active);
+        }
+
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        width: 100%;
+
+        height: 100%;
+
+        background-color: transparent;
+
+        padding: 0;
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none
+      }
+
+      &[shape='square'] {
+
+        &:hover {
+          background-color: var(--qti-hover-bg);
+        }
+
+        &:focus {
+          box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+        }
+
+        &[aria-checked='true'] {
+          border-color: var(--qti-border-active);
+          background-color: var(--qti-bg-active);
+        }
+
+        &[aria-readonly='true'] {
+          cursor: pointer;
+          background-color: var(--qti-bg);
+          outline: 0;
+          border: none;
+        }
+
+        &[aria-disabled='true'] {
+          cursor: not-allowed;
+          background-color: var(--qti-disabled-bg);
+          color: var(--qti-disabled-color);
+          border-color: var(--qti-border-color);
+          outline: 4px solid var(--qti-disabled-bg);
+        }
+
+        width: 100%;
+
+        height: 100%;
+
+        background-color: transparent;
+
+        padding: 0;
+
+        border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+        outline: none
+      }
+    }
+
+    &.qti-selections-light {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+        border-color: var(--qti-light-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-light-bg-active);
+      }
+    }
+
+    &.qti-selections-dark {
+      &:state(--dragzone-active)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+        border-color: var(--qti-dark-border-active);
+      }
+
+      &:state(--dragzone-enabled)::part(drags) {
+        background-color: var(--qti-dark-bg-active);
+      }
+    }
+
+    /* General styles for active and enabled states */
+    &:state(--dragzone-active)::part(drags) {
+      border-color: var(--qti-border-active);
+      background-color: var(--qti-bg-active);
+    }
+
+    &:state(--dragzone-enabled)::part(drags) {
+      background-color: var(--qti-bg-active);
+    }
+  }
+
+  qti-slider-interaction {
+    display: block;
+
+    --qti-tick-color: rgb(229 231 235 / 100%);
+    --qti-tick-width: 1px;
+
+    &::part(slider) {
+      margin-left: 2rem; /* mx-8 */
+      margin-right: 2rem;
+      padding-bottom: 1rem; /* pb-4 */
+      padding-top: 1.25rem; /* pt-5 */
+    }
+
+    --show-bounds: true;
+
+    &::part(bounds) {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      margin-bottom: 0.5rem; /* mb-2 */
+    }
+
+    --show-ticks: true;
+
+    &::part(ticks) {
+      margin-left: 0.125rem; /* mx-0.5 */
+      margin-right: 0.125rem;
+      margin-bottom: 0.25rem; /* mb-1 */
+      height: 0.5rem; /* h-2 */
+      background: linear-gradient(to right, var(--qti-tick-color) var(--qti-tick-width), transparent 1px) repeat-x 0
+        center / calc(calc(100% - var(--qti-tick-width)) / ((var(--max) - var(--min)) / var(--step))) 100%;
+    }
+
+    &::part(rail) {
+      display: flex;
+      align-items: center;
+      box-sizing: border-box;
+      height: 0.375rem; /* h-1.5 */
+      width: 100%;
+      cursor: pointer;
+      border-radius: 9999px; /* rounded-full */
+      border: 1px solid #d1d5db; /* border-gray-300 */
+      background-color: #e5e7eb; /* bg-gray-200 */
+    }
+
+    &::part(knob) {
+      background-color: var(--qti-primary);
+      position: relative;
+      height: 1rem; /* h-4 */
+      width: 1rem; /* w-4 */
+      transform-origin: center;
+      transform: translateX(-50%);
+      cursor: pointer;
+      border-radius: 9999px; /* rounded-full */
+      left: var(--value-percentage);
+    }
+
+    --show-value: true;
+
+    &::part(value) {
+      position: absolute;
+      bottom: 2rem; /* bottom-8 */
+      left: 0.5rem; /* left-2 */
+      transform: translateX(-50%);
+      cursor: pointer;
+      border-radius: 0.25rem; /* rounded */
+      background-color: #f3f4f6; /* bg-gray-100 */
+      padding: 0.25rem 0.5rem; /* px-2 py-1 */
+      text-align: center;
+      color: #6b7280; /* text-gray-500 */
+    }
+  }
+
+  qti-select-point-interaction {
+    &::part(point) {
+      &:hover {
+        background-color: var(--qti-hover-bg);
+      }
+
+      &:focus {
+        box-shadow: 0 0 0 var(--qti-focus-border-width) var(--qti-focus-color);
+      }
+
+      border-radius: 100%;
+
+      width: var(--qti-point-size);
+
+      height: var(--qti-point-size);
+
+      background-color: transparent;
+
+      padding: 0;
+
+      border: var(--qti-border-thickness) var(--qti-border-style) var(--qti-border-color);
+
+      outline: none;
+    }
+  }
+
+  qti-position-object-stage {
+    & qti-position-object-interaction {
+      /* no styles necessary, only layout styles, defined in the component */
+    }
+  }
+
+  qti-prompt {
+    margin: 0.5rem 0; /* my-2 */
+    display: block;
+    width: 100%;
+  }
+}
+`;
+
+// src/lib/qti-test/components/test-container.ts
+var TestContainer = class extends import_lit13.LitElement {
+  constructor() {
+    super(...arguments);
+    this.testURL = "";
+  }
+  /**
+   * Lifecycle callback invoked when the element is added to the DOM.
+   * Handles template preloading and dispatches a `qti-load-test-request` event
+   * if no template is found.
+   */
+  async connectedCallback() {
+    super.connectedCallback();
+    const template = this.querySelector("template");
+    if (template) {
+      this.preContent = template.content;
+    } else {
+      this.preContent = import_lit13.html``;
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(item_default);
+      this.shadowRoot.adoptedStyleSheets = [sheet];
+      await this.updateComplete;
+      const event = new CustomEvent("qti-load-test-request", {
+        bubbles: true,
+        composed: true,
+        detail: {
+          promise: null,
+          testURL: this.testURL
+        }
+      });
+      const preventDefault = this.dispatchEvent(event);
+      if (!preventDefault) {
+        console.warn("No qti-load-test-request listener found");
+        this.preContent = import_lit13.html`<span>qti-load-test-request was not catched</span>`;
+      } else {
+        this.content = (async () => {
+          return await event.detail.promise;
+        })();
+      }
+    }
+  }
+  /**
+   * Renders the component content.
+   * Preloaded template content is rendered first, followed by the default slot
+   * and dynamically loaded content.
+   */
+  render() {
+    return import_lit13.html`
+      ${this.preContent}
+      <slot></slot>
+      ${(0, import_until.until)(this.content, import_lit13.html`<span>Loading...</span>`)}
+    `;
+  }
+};
+__decorateClass([
+  (0, import_decorators14.state)()
+], TestContainer.prototype, "content", 2);
+__decorateClass([
+  (0, import_decorators14.property)({ type: String, attribute: "test-url" })
+], TestContainer.prototype, "testURL", 2);
+TestContainer = __decorateClass([
+  (0, import_decorators14.customElement)("test-container")
+], TestContainer);
+
+// src/lib/qti-test/components/test-paging-buttons-stamp.ts
+var import_lit14 = require("lit");
+var import_decorators15 = require("lit/decorators.js");
+var import_stampino = require("stampino");
+var TestPagingButtonsStamp = class extends TestComponent {
+  constructor() {
+    super();
+    this.maxDisplayedItems = 2;
+    this.skipOnCategory = "dep-informational";
+    this._internals.ariaLabel = "pagination";
+  }
+  createRenderRoot() {
+    return this;
+  }
+  render() {
+    const items = this._testContext.items.reduce(
+      (acc, item) => {
+        const isDepInfoItem = item.category?.split(" ").includes(this.skipOnCategory);
+        const newIndex = isDepInfoItem ? "i" : acc.counter++;
+        acc.result.push({
+          ...item,
+          newIndex
+          // Assign the new index, which only increments for non-info items
+        });
+        return acc;
+      },
+      { counter: 0, result: [] }
+    ).result;
+    const itemIndex = items.findIndex((item) => item.identifier === this._testContext.navItemId);
+    const start = Math.max(0, itemIndex - this.maxDisplayedItems);
+    const end = Math.min(items.length, itemIndex + this.maxDisplayedItems + 1);
+    const clampedItems = items.slice(start, end);
+    return import_lit14.html`
+      ${clampedItems.map((item) => {
+      const rawscore = item.variables.find((vr) => vr.identifier == "SCORE");
+      const score = parseInt(rawscore?.value?.toString());
+      const completionStatus = item.variables.find((v) => v.identifier === "completionStatus")?.value;
+      const type = item.category !== this.skipOnCategory ? "regular" : "info";
+      const active = this._testContext.navItemId === item.identifier;
+      const correct = this._testContext.view === "scorer" && type == "regular" && score !== void 0 && !isNaN(score) && score > 0;
+      const incorrect = this._testContext.view === "scorer" && type == "regular" && score !== void 0 && !isNaN(score) && score <= 0;
+      const answered = this._testContext.view === "candidate" && completionStatus === "completed" && item.category !== this.skipOnCategory;
+      const computedItem = {
+        ...item,
+        type,
+        active,
+        correct,
+        incorrect,
+        answered
+      };
+      const templateElement = this.firstElementChild;
+      const myTemplate = (0, import_stampino.prepareTemplate)(templateElement);
+      return myTemplate({ item: computedItem });
+    })}
+    `;
+  }
+};
+__decorateClass([
+  (0, import_decorators15.property)({ type: Number, attribute: "max-displayed-items" })
+], TestPagingButtonsStamp.prototype, "maxDisplayedItems", 2);
+__decorateClass([
+  (0, import_decorators15.property)({ type: String, attribute: "skip-on-category" })
+], TestPagingButtonsStamp.prototype, "skipOnCategory", 2);
+TestPagingButtonsStamp = __decorateClass([
+  (0, import_decorators15.customElement)("test-paging-buttons-stamp")
+], TestPagingButtonsStamp);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  QtiAssessmentItemRef,
+  QtiAssessmentSection,
+  QtiAssessmentTest,
+  QtiTest,
+  QtiTestPart,
+  TestContainer,
+  TestItemLink,
+  TestNext,
+  TestPagingButtonsStamp,
+  TestPrev,
+  TestView
+});
+//# sourceMappingURL=index.cjs.map