@citolab/qti-components 8.0.1 → 8.1.0

package/dist/base.d.ts

@@ -1,8 +1,8 @@
 import { C as ComputedItemContext } from './computed-item.types.d-BKZdSLLJ.js';
-import { C as ComputedContext } from './computed.types.d-rKLSPvVG.js';
-export { a as ComputedItem, I as INITIAL_SESSION_CONTEXT, S as SessionContext, V as View, s as sessionContext } from './computed.types.d-rKLSPvVG.js';
+import { C as ComputedContext } from './computed.types.d-DpKIYO6e.js';
+export { a as ComputedItem, I as INITIAL_SESSION_CONTEXT, S as SessionContext, V as View, s as sessionContext } from './computed.types.d-DpKIYO6e.js';
 export { C as ConfigContext, V as ValidationDisplayMode, c as configContext } from './config.context.d-BvU9r-Mg.js';
-export { C as ChoiceRole, I as Interaction, a as InteractionContext, i as interactionContext } from './interaction.d-D4MstYRz.js';
+export { C as ChoiceRole, I as Interaction, a as InteractionContext, i as interactionContext } from './interaction.d-CJiMv8H7.js';
 import { I as ItemContext, B as BaseType } from './item.types.d-QU7LljEK.js';
 export { C as Calculate, a as Cardinality, M as Multiple, O as Ordered, b as OutcomeVariable, Q as QtiAreaMapEntry, c as QtiAreaMapping, d as QtiMapEntry, e as QtiMapping, R as ResponseInteraction, f as ResponseVariable, T as TemplateVariable, V as VariableDeclaration, g as VariableValue, h as areaShape, i as directedPair, j as float, k as integer, l as itemContextVariables } from './item.types.d-QU7LljEK.js';
 export { Q as QtiContext, a as QtiContextType, S as Seed, b as asSeed, i as isSeed, q as qtiContext } from './qti.context.d-CejJMlfZ.js';
@@ -102,6 +102,63 @@ declare const dropRegion: lit.CSSResult;
  */
 declare const validationMessage: lit.CSSResult;
 
+/**
+ * Custom-state support shim for browsers this library cannot use natively.
+ *
+ * Interactions track selection and correct/incorrect marking through
+ * `internals.states`, with bare state names (`checked`, `radio`,
+ * `correct-response`, …). Two browser profiles cannot service that:
+ *
+ * - Safari 16.4–17.3 implement `ElementInternals` but not `CustomStateSet`, so
+ *   `internals.states` is `undefined` and reading it throws — "undefined is not
+ *   an object (evaluating 'internals.states.has')".
+ * - Chrome and Edge before the CSS custom-state spec change expose `states` but
+ *   reject names that do not start with `--`, so `states.add('radio')` throws
+ *   "The specified value 'radio' must start with '--'".
+ *
+ * On both, picking a choice throws rather than registering. `attachInternals`
+ * itself is unguarded throughout the interaction base classes, which puts the
+ * hard support floor at Safari 16.4 — inside the range that breaks.
+ *
+ * The shim replaces `states` with a permissive `Set` and mirrors its contents to
+ * a space-separated `data-state` attribute on the host, because these browsers'
+ * CSS parsers also drop any selector list containing `:state()`. The theme's
+ * built stylesheets pair every `:state(x)` with a `[data-state~='x']` arm (see
+ * `tools/postcss/custom-state-fallback.mjs`), so styling survives too.
+ *
+ * Support is classified by behaviour rather than by browser version, and the
+ * shim is not installed at all where `states` works.
+ */
+/** A permissive `CustomStateSet` that mirrors its contents to `data-state`. */
+declare class CustomStateSetShim extends Set<string> {
+    #private;
+    constructor(host: HTMLElement);
+    add(state: string): this;
+    delete(state: string): boolean;
+    clear(): void;
+}
+type CustomStateSupport = 'missing' | 'legacy' | 'modern';
+/**
+ * Classify native custom-state support by behaviour:
+ *
+ * - `missing`: `ElementInternals` carries no `states` at all.
+ * - `legacy`: `states` exists but rejects a bare name.
+ * - `modern`: `states` exists and accepts a bare name — no shim wanted.
+ *
+ * `attachInternals` only works on a custom element, so the probe registers a
+ * throwaway one. That happens solely when `states` is present, so the `missing`
+ * path never defines anything.
+ */
+declare function classifyCustomStateSupport(attachInternals: (this: HTMLElement) => ElementInternals): CustomStateSupport;
+/**
+ * Patch `HTMLElement.prototype.attachInternals` so every element's `states` is
+ * the shim, on the two profiles that need it. Idempotent, and a no-op where
+ * native support is usable.
+ *
+ * Returns the classification that was acted on, which is what the tests assert.
+ */
+declare function installCustomStateSetFallback(): CustomStateSupport | 'already-installed';
+
 declare class ScoringHelper {
     /**
      * Checks if a given point is within a specified area.
@@ -132,4 +189,4 @@ declare const convertNumberToUniversalFormat: (number: number | string) => strin
 declare function IsNullOrUndefined(value: unknown): boolean;
 declare function removeDoubleSlashes(str: string): string;
 
-export { BaseType, ComputedContext, ComputedItemContext, IsNullOrUndefined, ItemContext, ScoringHelper, boxSizing, computedContext, computedItemContext, convertNumberToUniversalFormat, decimalSeparator, dropRegion, itemContext, removeDoubleSlashes, validationMessage };
+export { BaseType, ComputedContext, ComputedItemContext, CustomStateSetShim, type CustomStateSupport, IsNullOrUndefined, ItemContext, ScoringHelper, boxSizing, classifyCustomStateSupport, computedContext, computedItemContext, convertNumberToUniversalFormat, decimalSeparator, dropRegion, installCustomStateSetFallback, itemContext, removeDoubleSlashes, validationMessage };

package/dist/base.js

@@ -1,4 +1,5 @@
 import {
+  CustomStateSetShim,
   INITIAL_SESSION_CONTEXT,
   INITIAL_TEST_CONTEXT,
   Interaction,
@@ -11,12 +12,14 @@ import {
   ScoringHelper,
   asSeed,
   boxSizing,
+  classifyCustomStateSupport,
   computedContext,
   computedItemContext,
   configContext,
   convertNumberToUniversalFormat,
   decimalSeparator,
   dropRegion,
+  installCustomStateSetFallback,
   interactionContext,
   isSeed,
   itemContext,
@@ -34,8 +37,9 @@ import {
   sessionContext,
   testContext,
   validationMessage
-} from "./chunk-H3J7LFRO.js";
+} from "./chunk-EKXZI26R.js";
 export {
+  CustomStateSetShim,
   INITIAL_SESSION_CONTEXT,
   INITIAL_TEST_CONTEXT,
   Interaction,
@@ -48,12 +52,14 @@ export {
   ScoringHelper,
   asSeed,
   boxSizing,
+  classifyCustomStateSupport,
   computedContext,
   computedItemContext,
   configContext,
   convertNumberToUniversalFormat,
   decimalSeparator,
   dropRegion,
+  installCustomStateSetFallback,
   interactionContext,
   isSeed,
   itemContext,

package/dist/{chunk-V5G7X53Y.js → chunk-3IACYIU2.js}

@@ -1,6 +1,6 @@
 import {
   qtiContentElements
-} from "./chunk-WVVMNF74.js";
+} from "./chunk-6XJUP55A.js";
 
 // ../qti-elements/dist/register.js
 for (const { tag, ctor } of qtiContentElements) {
@@ -8,4 +8,4 @@ for (const { tag, ctor } of qtiContentElements) {
     customElements.define(tag, ctor);
   }
 }
-//# sourceMappingURL=chunk-V5G7X53Y.js.map
+//# sourceMappingURL=chunk-3IACYIU2.js.map

package/dist/chunk-4DB4SC5K.js

@@ -0,0 +1,100 @@
+// ../qti-utilities/dist/decorators/watch.js
+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((property) => {
+        const key = property;
+        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);
+    };
+  };
+}
+
+// ../qti-utilities/dist/directives/spread-args.js
+import { nothing } from "lit/html.js";
+import { directive } from "lit/directive.js";
+import { AsyncDirective } from "lit/async-directive.js";
+var SpreadArgsDirective = class extends AsyncDirective {
+  constructor() {
+    super(...arguments);
+    this.prevData = {};
+  }
+  render(_spreadData) {
+    return nothing;
+  }
+  update(part, [spreadData]) {
+    if (this.element !== part.element) {
+      this.element = part.element;
+    }
+    this.host = part.options?.host || this.element;
+    this.apply(spreadData);
+    this.groom(spreadData);
+    this.prevData = { ...spreadData };
+    return nothing;
+  }
+  apply(data) {
+    const filteredData = this.#filterArgs(data);
+    const { prevData, element } = this;
+    for (const key in filteredData) {
+      const value = filteredData[key];
+      if (value === prevData[key]) {
+        continue;
+      }
+      if (value === true) {
+        element.setAttribute(key, "");
+      } else if (value === false) {
+        element.removeAttribute(key);
+      } else if (value != null) {
+        element.setAttribute(key, String(value));
+      } else {
+        element.removeAttribute(key);
+      }
+    }
+  }
+  groom(data) {
+    const { prevData, element } = this;
+    if (!prevData)
+      return;
+    const filteredData = data ? this.#filterArgs(data) : {};
+    for (const key in prevData) {
+      if (!filteredData || !(key in filteredData)) {
+        element.removeAttribute(key);
+      }
+    }
+  }
+  #filterArgs(args) {
+    return Object.fromEntries(Object.entries(args).filter(([key, value]) => {
+      if (typeof value === "function") {
+        return false;
+      }
+      if (key === "max-choices" && value === 0) {
+        return true;
+      }
+      if (value === "" || value === null || value === void 0) {
+        return false;
+      }
+      return true;
+    }));
+  }
+};
+var spreadArgs = directive(SpreadArgsDirective);
+
+export {
+  watch
+};
+//# sourceMappingURL=chunk-4DB4SC5K.js.map

package/dist/chunk-4DB4SC5K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../qti-utilities/src/decorators/watch.ts","../../qti-utilities/src/directives/spread-args.ts"],"sourcesContent":["import type { LitElement } from 'lit';\n\ntype UpdateHandler = (prev?: unknown, next?: unknown) => void;\n\ntype NonUndefined<A> = A extends undefined ? never : A;\n\nexport type UpdateHandlerFunctionKeys<T extends object> = {\n  [K in keyof T]-?: NonUndefined<T[K]> extends UpdateHandler ? K : never;\n}[keyof T];\n\ninterface WatchOptions {\n  /**\n   * If true, will only start watching after the initial update/render\n   */\n  waitUntilFirstUpdate?: boolean;\n}\n\n/**\n * Runs when observed properties change, e.g. @property or @state, but before the component updates. To wait for an\n * update to complete after a change occurs, use `await this.updateComplete` in the handler. To start watching after the\n * initial update/render, use `{ waitUntilFirstUpdate: true }` or `this.hasUpdated` in the handler.\n *\n * Usage:\n *\n * @watch('propName')\n * handlePropChange(oldValue, newValue) {\n *   ...\n * }\n */\nexport function watch(propertyName: string | string[], options?: WatchOptions) {\n  const resolvedOptions: Required<WatchOptions> = {\n    waitUntilFirstUpdate: false,\n    ...options\n  };\n  return <ElemClass extends LitElement>(\n    proto: ElemClass,\n    decoratedFnName: UpdateHandlerFunctionKeys<ElemClass> | any\n  ) => {\n    // @ts-expect-error - update is a protected property\n    const { update } = proto;\n    const watchedProperties = Array.isArray(propertyName) ? propertyName : [propertyName];\n\n    // @ts-expect-error - update is a protected property\n    proto.update = function (this: ElemClass, changedProps: Map<keyof ElemClass, ElemClass[keyof ElemClass]>) {\n      watchedProperties.forEach(property => {\n        const key = property as keyof ElemClass;\n        if (changedProps.has(key)) {\n          const oldValue = changedProps.get(key);\n          const newValue = this[key];\n\n          if (oldValue !== newValue) {\n            if (!resolvedOptions.waitUntilFirstUpdate || this.hasUpdated) {\n              ((this as any)[decoratedFnName] as unknown as UpdateHandler)(oldValue, newValue);\n            }\n          }\n        }\n      });\n\n      update.call(this, changedProps);\n    };\n  };\n}\n","import { nothing } from 'lit/html.js';\nimport { directive } from 'lit/directive.js';\nimport { AsyncDirective } from 'lit/async-directive.js';\n\nimport type { ElementPart, Part } from 'lit';\n\n/**\n * A directive that spreads arguments to HTML attributes with intelligent filtering.\n *\n * Features:\n * - Includes `max-choices=\"0\"` even though 0 is falsy\n * - Excludes boolean attributes with no value, empty string, null, or undefined\n * - Excludes event handlers and functions\n *\n * Based on the @open-wc/lit-helpers spread directive implementation.\n */\nexport class SpreadArgsDirective extends AsyncDirective {\n  host!: EventTarget | object | Element;\n  element!: Element;\n  prevData: { [key: string]: unknown } = {};\n\n  render(_spreadData: { [key: string]: unknown }) {\n    return nothing;\n  }\n\n  update(part: Part, [spreadData]: Parameters<this['render']>) {\n    if (this.element !== (part as ElementPart).element) {\n      this.element = (part as ElementPart).element;\n    }\n    this.host = part.options?.host || this.element;\n    this.apply(spreadData);\n    this.groom(spreadData);\n    this.prevData = { ...spreadData };\n    return nothing;\n  }\n\n  apply(data: { [key: string]: unknown }) {\n    // Filter the data according to our rules\n    const filteredData = this.#filterArgs(data);\n\n    const { prevData, element } = this;\n    for (const key in filteredData) {\n      const value = filteredData[key];\n      if (value === prevData[key]) {\n        continue;\n      }\n\n      // Handle different attribute types\n      if (value === true) {\n        // Boolean attribute - just set the attribute name\n        element.setAttribute(key, '');\n      } else if (value === false) {\n        // Remove false boolean attributes\n        element.removeAttribute(key);\n      } else if (value != null) {\n        // Standard attribute with value\n        element.setAttribute(key, String(value));\n      } else {\n        // Remove null/undefined attributes\n        element.removeAttribute(key);\n      }\n    }\n  }\n\n  groom(data: { [key: string]: unknown }) {\n    const { prevData, element } = this;\n    if (!prevData) return;\n\n    // Filter the current data to see what we should have\n    const filteredData = data ? this.#filterArgs(data) : {};\n\n    for (const key in prevData) {\n      if (!filteredData || !(key in filteredData)) {\n        // Remove attributes that are no longer present in filtered data\n        element.removeAttribute(key);\n      }\n    }\n  }\n\n  #filterArgs(args: Record<string, unknown>): Record<string, unknown> {\n    return Object.fromEntries(\n      Object.entries(args).filter(([key, value]) => {\n        // Always exclude functions (events/functions)\n        if (typeof value === 'function') {\n          return false;\n        }\n\n        // Special case for max-choices: include when value is 0\n        if (key === 'max-choices' && value === 0) {\n          return true;\n        }\n\n        // Exclude empty strings, null, and undefined\n        if (value === '' || value === null || value === undefined) {\n          return false;\n        }\n\n        // Include all other truthy values\n        return true;\n      })\n    );\n  }\n}\n\n/**\n * A directive that spreads arguments to HTML attributes with intelligent filtering.\n *\n * @param args - Object containing key-value pairs to spread as attributes\n *\n * @example\n * ```typescript\n * import { spreadArgs } from '@qti-components/utilities';\n *\n * const args = {\n *   'max-choices': 0,     // Will be included\n *   disabled: true,       // Will be included as disabled=\"\"\n *   hidden: false,        // Will be excluded\n *   title: '',            // Will be excluded\n *   onClick: () => {},    // Will be excluded\n *   id: 'my-element'      // Will be included as id=\"my-element\"\n * };\n *\n * html`<my-element ${spreadArgs(args)}></my-element>`;\n * ```\n */\nexport const spreadArgs = directive(SpreadArgsDirective);\n\n/**\n * Helper function version that works with @open-wc/lit-helpers spread directive.\n * @deprecated Use the spreadArgs directive directly instead.\n */\nexport function filterArgsForSpread(args: Record<string, unknown>): Record<string, unknown> {\n  return Object.fromEntries(\n    Object.entries(args).filter(([, value]) => {\n      if (typeof value === 'function') return false;\n      if (value === '' || value === null || value === undefined) return false;\n      return true;\n    })\n  );\n}\n"],"mappings":";AA6BM,SAAU,MAAM,cAAiC,SAAsB;AAC3E,QAAM,kBAA0C;IAC9C,sBAAsB;IACtB,GAAG;;AAEL,SAAO,CACL,OACA,oBACE;AAEF,UAAM,EAAE,OAAM,IAAK;AACnB,UAAM,oBAAoB,MAAM,QAAQ,YAAY,IAAI,eAAe,CAAC,YAAY;AAGpF,UAAM,SAAS,SAA2B,cAA8D;AACtG,wBAAkB,QAAQ,cAAW;AACnC,cAAM,MAAM;AACZ,YAAI,aAAa,IAAI,GAAG,GAAG;AACzB,gBAAM,WAAW,aAAa,IAAI,GAAG;AACrC,gBAAM,WAAW,KAAK,GAAG;AAEzB,cAAI,aAAa,UAAU;AACzB,gBAAI,CAAC,gBAAgB,wBAAwB,KAAK,YAAY;AAC1D,mBAAa,eAAe,EAA+B,UAAU,QAAQ;YACjF;UACF;QACF;MACF,CAAC;AAED,aAAO,KAAK,MAAM,YAAY;IAChC;EACF;AACF;;;AC7DA,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,sBAAsB;AAczB,IAAO,sBAAP,cAAmC,eAAc;EAAvD,cAAA;;AAGE,SAAA,WAAuC,CAAA;EAmFzC;EAjFE,OAAO,aAAuC;AAC5C,WAAO;EACT;EAEA,OAAO,MAAY,CAAC,UAAU,GAA6B;AACzD,QAAI,KAAK,YAAa,KAAqB,SAAS;AAClD,WAAK,UAAW,KAAqB;IACvC;AACA,SAAK,OAAO,KAAK,SAAS,QAAQ,KAAK;AACvC,SAAK,MAAM,UAAU;AACrB,SAAK,MAAM,UAAU;AACrB,SAAK,WAAW,EAAE,GAAG,WAAU;AAC/B,WAAO;EACT;EAEA,MAAM,MAAgC;AAEpC,UAAM,eAAe,KAAK,YAAY,IAAI;AAE1C,UAAM,EAAE,UAAU,QAAO,IAAK;AAC9B,eAAW,OAAO,cAAc;AAC9B,YAAM,QAAQ,aAAa,GAAG;AAC9B,UAAI,UAAU,SAAS,GAAG,GAAG;AAC3B;MACF;AAGA,UAAI,UAAU,MAAM;AAElB,gBAAQ,aAAa,KAAK,EAAE;MAC9B,WAAW,UAAU,OAAO;AAE1B,gBAAQ,gBAAgB,GAAG;MAC7B,WAAW,SAAS,MAAM;AAExB,gBAAQ,aAAa,KAAK,OAAO,KAAK,CAAC;MACzC,OAAO;AAEL,gBAAQ,gBAAgB,GAAG;MAC7B;IACF;EACF;EAEA,MAAM,MAAgC;AACpC,UAAM,EAAE,UAAU,QAAO,IAAK;AAC9B,QAAI,CAAC;AAAU;AAGf,UAAM,eAAe,OAAO,KAAK,YAAY,IAAI,IAAI,CAAA;AAErD,eAAW,OAAO,UAAU;AAC1B,UAAI,CAAC,gBAAgB,EAAE,OAAO,eAAe;AAE3C,gBAAQ,gBAAgB,GAAG;MAC7B;IACF;EACF;EAEA,YAAY,MAA6B;AACvC,WAAO,OAAO,YACZ,OAAO,QAAQ,IAAI,EAAE,OAAO,CAAC,CAAC,KAAK,KAAK,MAAK;AAE3C,UAAI,OAAO,UAAU,YAAY;AAC/B,eAAO;MACT;AAGA,UAAI,QAAQ,iBAAiB,UAAU,GAAG;AACxC,eAAO;MACT;AAGA,UAAI,UAAU,MAAM,UAAU,QAAQ,UAAU,QAAW;AACzD,eAAO;MACT;AAGA,aAAO;IACT,CAAC,CAAC;EAEN;;AAwBK,IAAM,aAAa,UAAU,mBAAmB;","names":[]}