@citolab/qti-components 8.0.2 → 8.1.0

package/dist/base.d.ts

@@ -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-HQESINXH.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-NJQHUUTN.js → chunk-3IACYIU2.js}

@@ -1,6 +1,6 @@
 import {
   qtiContentElements
-} from "./chunk-7AVWRQIS.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-NJQHUUTN.js.map
+//# sourceMappingURL=chunk-3IACYIU2.js.map

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

@@ -14,7 +14,7 @@ import {
   responseAttributeConverter,
   serializeResponseAttribute,
   validationMessage
-} from "./chunk-HQESINXH.js";
+} from "./chunk-EKXZI26R.js";
 
 // ../interactions/core/dist/elements/qti-gap-text/qti-gap-text.js
 import { html as html2, LitElement } from "lit";
@@ -383,7 +383,7 @@ var qti_simple_associable_choice_styles_default = [
      * that observer, so the state is the form that works everywhere and the [qti-droppable]
      * attribute that used to accompany it is gone. Positive opt-in, so tabular headers are untouched.
      */
-    :host(:state(droppable)) {
+    :host(:is(:state(droppable), [data-state~='droppable'])) {
       /*
        * The CARD token, not the slot one. This element is a droppable only in match, and match
        * publishes no measurement — so reading --qti-dropzone-min-height here meant reading a name
@@ -409,7 +409,7 @@ var qti_simple_associable_choice_styles_default = [
       justify-content: space-between;
     }
 
-    :host(:state(droppable)) [part~='drop'] {
+    :host(:is(:state(droppable), [data-state~='droppable'])) [part~='drop'] {
       /*
        * Match's dropzones are NOT auto-sized from the chips: a match target is a category, and
        * should look able to hold several answers rather than hugging the widest one. So this reads
@@ -449,7 +449,7 @@ var qti_simple_associable_choice_styles_default = [
     }
 
     /* The label sits against the drop region below it. */
-    :host(:state(droppable)) [part~='label'] {
+    :host(:is(:state(droppable), [data-state~='droppable'])) [part~='label'] {
       align-content: flex-end;
     }
 
@@ -463,7 +463,7 @@ var qti_simple_associable_choice_styles_default = [
      *   [part~='drag']  a chip a drop target renders, where that selector cannot reach it — match's
      *                   selector names a light-DOM ancestry the placed clone no longer has
      */
-    :host(:state(drag)) [part~='drop'],
+    :host(:is(:state(drag), [data-state~='drag'])) [part~='drop'],
     :host([part~='drag']) [part~='drop'] {
       display: none;
     }
@@ -10329,4 +10329,4 @@ export {
   QtiTextEntryInteraction,
   elements16
 };
-//# sourceMappingURL=chunk-TWPXES3S.js.map
+//# sourceMappingURL=chunk-4XR2JHCP.js.map