@qti-components/graphic-gap-match-interaction 1.1.4 → 1.1.6-next.0

package/dist/elements.d.ts

@@ -0,0 +1,6 @@
+import { QtiGraphicGapMatchInteraction } from './qti-graphic-gap-match-interaction';
+export declare const elements: readonly [{
+    readonly tag: "qti-graphic-gap-match-interaction";
+    readonly ctor: typeof QtiGraphicGapMatchInteraction;
+}];
+export { QtiGraphicGapMatchInteraction };

package/dist/elements.js

@@ -0,0 +1,4 @@
+import { QtiGraphicGapMatchInteraction } from './qti-graphic-gap-match-interaction';
+export const elements = [{ tag: 'qti-graphic-gap-match-interaction', ctor: QtiGraphicGapMatchInteraction }];
+export { QtiGraphicGapMatchInteraction };
+//# sourceMappingURL=elements.js.map

package/dist/elements.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAC;AAEpF,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,GAAG,EAAE,mCAAmC,EAAE,IAAI,EAAE,6BAA6B,EAAE,CAAU,CAAC;AAErH,OAAO,EAAE,6BAA6B,EAAE,CAAC","sourcesContent":["import { QtiGraphicGapMatchInteraction } from './qti-graphic-gap-match-interaction';\n\nexport const elements = [{ tag: 'qti-graphic-gap-match-interaction', ctor: QtiGraphicGapMatchInteraction }] as const;\n\nexport { QtiGraphicGapMatchInteraction };\n"]}

package/dist/qti-graphic-gap-match-interaction.d.ts

@@ -1,6 +1,17 @@
 import { Interaction } from '@qti-components/base';
 import type { CSSResultGroup } from 'lit';
 declare const QtiGraphicGapMatchInteraction_base: (abstract new (...args: any[]) => import("@qti-components/interactions-core/mixins/drag-drop-observables").DragDropSlottedSortable) & (abstract new (...args: any[]) => import("@qti-components/interactions-core/mixins/drag-drop-observables").DragDropSlotted) & typeof Interaction;
+/**
+ * Graphic gap-match interaction: candidates drag choices onto image hotspots.
+ *
+ * @slot prompt - The prompt shown above the image.
+ * @slot drags - The draggable choice sources.
+ * @slot - Default slot for the base image and hotspots.
+ *
+ * @csspart image - Wrapper around the image slot.
+ * @csspart drags - Wrapper around the drag sources slot.
+ * @csspart message - Live validation message region (role="alert").
+ */
 export declare class QtiGraphicGapMatchInteraction extends QtiGraphicGapMatchInteraction_base {
     #private;
     static styles: CSSResultGroup;

package/dist/qti-graphic-gap-match-interaction.js

@@ -1,9 +1,20 @@
 import { html } from 'lit';
 import { Interaction } from '@qti-components/base';
+import { positionShapes } from '@qti-components/interactions-core/internal/hotspots/hotspot';
 import { DragDropSlottedMixin, DragDropSlottedSortableMixin } from '@qti-components/interactions-core/mixins/drag-drop-observables';
-// import { DragDropInteractionMixin } from '@qti-components/interactions-core/mixins/drag-drop';
 import styles from './qti-graphic-gap-match-interaction.styles';
-const SlottedBase = DragDropSlottedMixin(Interaction, 'qti-gap-img, qti-gap-text', 'qti-associable-hotspot', `slot[part='drags']`);
+const SlottedBase = DragDropSlottedMixin(Interaction, 'qti-gap-img, qti-gap-text', 'qti-associable-hotspot', `slot[part~='drags']`);
+/**
+ * Graphic gap-match interaction: candidates drag choices onto image hotspots.
+ *
+ * @slot prompt - The prompt shown above the image.
+ * @slot drags - The draggable choice sources.
+ * @slot - Default slot for the base image and hotspots.
+ *
+ * @csspart image - Wrapper around the image slot.
+ * @csspart drags - Wrapper around the drag sources slot.
+ * @csspart message - Live validation message region (role="alert").
+ */
 export class QtiGraphicGapMatchInteraction extends DragDropSlottedSortableMixin(SlottedBase, '[qti-draggable="true"]') {
     static { this.styles = styles; }
     render() {
@@ -15,37 +26,59 @@ export class QtiGraphicGapMatchInteraction extends DragDropSlottedSortableMixin(
     shouldReturnToInventoryOnInventoryDrop() {
         return true;
     }
-    #positionHotspotOnRegister(e) {
-        const hotspot = e.target;
+    /**
+     * The background graphic: a direct child, as QTI places it. Not `findGraphic(this)`, which
+     * searches every descendant and would pick up a `qti-gap-img`'s picture (or one in the prompt)
+     * when it comes first.
+     */
+    #graphic() {
+        return this.querySelector(':scope > img, :scope > object[type^="image"]');
+    }
+    /**
+     * Pins the graphic's box to the aspect ratio its width/height attributes declare: the coordinate
+     * space the drop areas are percentages of. With the fluid `height: auto` (see the styles) the box
+     * would otherwise follow the bitmap — an `<object>` gets no ratio from its attributes at all, and
+     * an `<img>` only `auto w / h`, where the loaded bitmap's own ratio wins. Either way a picture
+     * whose pixels differ from its declared size would slide out from under its drop areas. Pinned,
+     * it fills the declared box as it does at its fixed size.
+     */
+    #keepDeclaredRatio(graphic) {
+        if (graphic.style.aspectRatio)
+            return;
+        const length = (name) => {
+            const raw = (graphic.getAttribute(name) ?? '').trim();
+            const value = parseFloat(raw);
+            return raw.endsWith('%') || !(value > 0) ? null : value;
+        };
+        const width = length('width');
+        const height = length('height');
+        if (width && height)
+            graphic.style.aspectRatio = `${width} / ${height}`;
+    }
+    /**
+     * Places a drop area over the graphic with `positionShapes`, the hotspot interaction's helper:
+     * percentages of the coordinate space the `coords` were authored in, so the areas scale with the
+     * graphic when it is narrower than its declared width (see the styles). They used to be written
+     * in pixels, which only held while the graphic rendered at exactly that width.
+     */
+    #positionHotspot(hotspot) {
+        const graphic = this.#graphic();
         const coords = hotspot.getAttribute('coords');
         const shape = hotspot.getAttribute('shape');
-        const coordsNumber = coords.split(',').map(s => parseInt(s));
-        // positionHotspots(shape, coordsNumber, img, hotspot);
-        switch (shape) {
-            case 'circle':
-                {
-                    const [centerX, centerY, radius] = coordsNumber;
-                    hotspot.style.left = centerX - radius + 'px';
-                    hotspot.style.top = centerY - radius + 'px';
-                    hotspot.style.width = hotspot.style.height = 2 * radius + 'px';
-                }
-                break;
-            case 'rect':
-                {
-                    const [leftX, topY, rightX, bottomY] = coordsNumber;
-                    hotspot.style.left = leftX + 'px';
-                    hotspot.style.top = topY + 'px';
-                    hotspot.style.width = rightX - leftX + 'px';
-                    hotspot.style.height = bottomY - topY + 'px';
-                }
-                break;
-            default:
-                break;
-        }
+        if (!graphic || !coords || !shape)
+            return;
+        this.#keepDeclaredRatio(graphic);
+        positionShapes(shape, coords.split(',').map(s => parseFloat(s)), graphic, hotspot);
     }
+    #positionHotspotOnRegister = (e) => {
+        this.#positionHotspot(e.target);
+    };
     connectedCallback() {
         super.connectedCallback();
         this.addEventListener('qti-register-hotspot', this.#positionHotspotOnRegister);
+        // A hotspot that connected before this element was upgraded has already dispatched its
+        // register event (the hotspot interaction has the same catch-up).
+        this.querySelectorAll(':scope > qti-associable-hotspot').forEach(hotspot => this.#positionHotspot(hotspot));
     }
     disconnectedCallback() {
         super.disconnectedCallback();

package/dist/qti-graphic-gap-match-interaction.js.map

@@ -1 +1 @@
-{"version":3,"file":"qti-graphic-gap-match-interaction.js","sourceRoot":"","sources":["../src/qti-graphic-gap-match-interaction.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC7B,MAAM,gEAAgE,CAAC;AAExE,iGAAiG;AACjG,OAAO,MAAM,MAAM,4CAA4C,CAAC;AAIhE,MAAM,WAAW,GAAG,oBAAoB,CACtC,WAAW,EACX,2BAA2B,EAC3B,wBAAwB,EACxB,oBAAoB,CACrB,CAAC;AAEF,MAAM,OAAO,6BAA8B,SAAQ,4BAA4B,CAAC,WAAW,EAAE,wBAAwB,CAAC;aACpG,WAAM,GAAmB,MAAM,CAAC;IAEvC,MAAM;QACb,OAAO,IAAI,CAAA;;;sEAGuD,CAAC;IACrE,CAAC;IAEe,sCAAsC;QACpD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,0BAA0B,CAAC,CAAoB;QAC7C,MAAM,OAAO,GAAG,CAAC,CAAC,MAA0B,CAAC;QAC7C,MAAM,MAAM,GAAG,OAAO,CAAC,YAAY,CAAC,QAAQ,CAAC,CAAC;QAC9C,MAAM,KAAK,GAAG,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC,CAAC;QAC5C,MAAM,YAAY,GAAG,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAE7D,uDAAuD;QACvD,QAAQ,KAAK,EAAE,CAAC;YACd,KAAK,QAAQ;gBACX,CAAC;oBACC,MAAM,CAAC,OAAO,EAAE,OAAO,EAAE,MAAM,CAAC,GAAG,YAAY,CAAC;oBAChD,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;oBAC7C,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,OAAO,GAAG,MAAM,GAAG,IAAI,CAAC;oBAC5C,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,GAAG,MAAM,GAAG,IAAI,CAAC;gBACjE,CAAC;gBACD,MAAM;YAER,KAAK,MAAM;gBACT,CAAC;oBACC,MAAM,CAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,GAAG,YAAY,CAAC;oBACpD,OAAO,CAAC,KAAK,CAAC,IAAI,GAAG,KAAK,GAAG,IAAI,CAAC;oBAClC,OAAO,CAAC,KAAK,CAAC,GAAG,GAAG,IAAI,GAAG,IAAI,CAAC;oBAChC,OAAO,CAAC,KAAK,CAAC,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,IAAI,CAAC;oBAC5C,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,IAAI,CAAC;gBAC/C,CAAC;gBACD,MAAM;YAER;gBACE,MAAM;QACV,CAAC;IACH,CAAC;IAEQ,iBAAiB;QACxB,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,gBAAgB,CAAC,sBAAsB,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;IACjF,CAAC;IACQ,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,mBAAmB,CAAC,sBAAsB,EAAE,IAAI,CAAC,0BAA0B,CAAC,CAAC;IACpF,CAAC","sourcesContent":["import { html } from 'lit';\n\nimport { Interaction } from '@qti-components/base';\nimport {\n  DragDropSlottedMixin,\n  DragDropSlottedSortableMixin\n} from '@qti-components/interactions-core/mixins/drag-drop-observables';\n\n// import { DragDropInteractionMixin } from '@qti-components/interactions-core/mixins/drag-drop';\nimport styles from './qti-graphic-gap-match-interaction.styles';\n\nimport type { QtiHotspotChoice } from '@qti-components/interactions-core/elements/qti-hotspot-choice';\nimport type { CSSResultGroup } from 'lit';\nconst SlottedBase = DragDropSlottedMixin(\n  Interaction,\n  'qti-gap-img, qti-gap-text',\n  'qti-associable-hotspot',\n  `slot[part='drags']`\n);\n\nexport class QtiGraphicGapMatchInteraction extends DragDropSlottedSortableMixin(SlottedBase, '[qti-draggable=\"true\"]') {\n  static override styles: CSSResultGroup = styles;\n\n  override render() {\n    return html` <slot name=\"prompt\"></slot>\n      <slot part=\"image\"></slot>\n      <slot part=\"drags\" name=\"drags\" class=\"hover-border\"></slot>\n      <div role=\"alert\" part=\"message\" id=\"validation-message\"></div>`;\n  }\n\n  public override shouldReturnToInventoryOnInventoryDrop(): boolean {\n    return true;\n  }\n\n  #positionHotspotOnRegister(e: CustomEvent<null>): void {\n    const hotspot = e.target as QtiHotspotChoice;\n    const coords = hotspot.getAttribute('coords');\n    const shape = hotspot.getAttribute('shape');\n    const coordsNumber = coords.split(',').map(s => parseInt(s));\n\n    // positionHotspots(shape, coordsNumber, img, hotspot);\n    switch (shape) {\n      case 'circle':\n        {\n          const [centerX, centerY, radius] = coordsNumber;\n          hotspot.style.left = centerX - radius + 'px';\n          hotspot.style.top = centerY - radius + 'px';\n          hotspot.style.width = hotspot.style.height = 2 * radius + 'px';\n        }\n        break;\n\n      case 'rect':\n        {\n          const [leftX, topY, rightX, bottomY] = coordsNumber;\n          hotspot.style.left = leftX + 'px';\n          hotspot.style.top = topY + 'px';\n          hotspot.style.width = rightX - leftX + 'px';\n          hotspot.style.height = bottomY - topY + 'px';\n        }\n        break;\n\n      default:\n        break;\n    }\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('qti-register-hotspot', this.#positionHotspotOnRegister);\n  }\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('qti-register-hotspot', this.#positionHotspotOnRegister);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-graphic-gap-match-interaction': QtiGraphicGapMatchInteraction;\n  }\n}\n"]}
+{"version":3,"file":"qti-graphic-gap-match-interaction.js","sourceRoot":"","sources":["../src/qti-graphic-gap-match-interaction.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\n\nimport { Interaction } from '@qti-components/base';\nimport { positionShapes } from '@qti-components/interactions-core/internal/hotspots/hotspot';\nimport {\n  DragDropSlottedMixin,\n  DragDropSlottedSortableMixin\n} from '@qti-components/interactions-core/mixins/drag-drop-observables';\n\nimport styles from './qti-graphic-gap-match-interaction.styles';\n\nimport type { Graphic } from '@qti-components/interactions-core/internal/hotspots/hotspot';\nimport type { CSSResultGroup } from 'lit';\nconst SlottedBase = DragDropSlottedMixin(\n  Interaction,\n  'qti-gap-img, qti-gap-text',\n  'qti-associable-hotspot',\n  `slot[part~='drags']`\n);\n\n/**\n * Graphic gap-match interaction: candidates drag choices onto image hotspots.\n *\n * @slot prompt - The prompt shown above the image.\n * @slot drags - The draggable choice sources.\n * @slot - Default slot for the base image and hotspots.\n *\n * @csspart image - Wrapper around the image slot.\n * @csspart drags - Wrapper around the drag sources slot.\n * @csspart message - Live validation message region (role=\"alert\").\n */\nexport class QtiGraphicGapMatchInteraction extends DragDropSlottedSortableMixin(SlottedBase, '[qti-draggable=\"true\"]') {\n  static override styles: CSSResultGroup = styles;\n\n  override render() {\n    return html` <slot name=\"prompt\"></slot>\n      <slot part=\"image\"></slot>\n      <slot part=\"drags\" name=\"drags\" class=\"hover-border\"></slot>\n      <div role=\"alert\" part=\"message\" id=\"validation-message\"></div>`;\n  }\n\n  public override shouldReturnToInventoryOnInventoryDrop(): boolean {\n    return true;\n  }\n\n  /**\n   * The background graphic: a direct child, as QTI places it. Not `findGraphic(this)`, which\n   * searches every descendant and would pick up a `qti-gap-img`'s picture (or one in the prompt)\n   * when it comes first.\n   */\n  #graphic(): Graphic | null {\n    return this.querySelector<Graphic>(':scope > img, :scope > object[type^=\"image\"]');\n  }\n\n  /**\n   * Pins the graphic's box to the aspect ratio its width/height attributes declare: the coordinate\n   * space the drop areas are percentages of. With the fluid `height: auto` (see the styles) the box\n   * would otherwise follow the bitmap — an `<object>` gets no ratio from its attributes at all, and\n   * an `<img>` only `auto w / h`, where the loaded bitmap's own ratio wins. Either way a picture\n   * whose pixels differ from its declared size would slide out from under its drop areas. Pinned,\n   * it fills the declared box as it does at its fixed size.\n   */\n  #keepDeclaredRatio(graphic: Graphic): void {\n    if (graphic.style.aspectRatio) return;\n    const length = (name: 'width' | 'height') => {\n      const raw = (graphic.getAttribute(name) ?? '').trim();\n      const value = parseFloat(raw);\n      return raw.endsWith('%') || !(value > 0) ? null : value;\n    };\n    const width = length('width');\n    const height = length('height');\n    if (width && height) graphic.style.aspectRatio = `${width} / ${height}`;\n  }\n\n  /**\n   * Places a drop area over the graphic with `positionShapes`, the hotspot interaction's helper:\n   * percentages of the coordinate space the `coords` were authored in, so the areas scale with the\n   * graphic when it is narrower than its declared width (see the styles). They used to be written\n   * in pixels, which only held while the graphic rendered at exactly that width.\n   */\n  #positionHotspot(hotspot: HTMLElement): void {\n    const graphic = this.#graphic();\n    const coords = hotspot.getAttribute('coords');\n    const shape = hotspot.getAttribute('shape');\n    if (!graphic || !coords || !shape) return;\n    this.#keepDeclaredRatio(graphic);\n    positionShapes(\n      shape,\n      coords.split(',').map(s => parseFloat(s)),\n      graphic,\n      hotspot\n    );\n  }\n\n  #positionHotspotOnRegister = (e: Event): void => {\n    this.#positionHotspot(e.target as HTMLElement);\n  };\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('qti-register-hotspot', this.#positionHotspotOnRegister);\n    // A hotspot that connected before this element was upgraded has already dispatched its\n    // register event (the hotspot interaction has the same catch-up).\n    this.querySelectorAll<HTMLElement>(':scope > qti-associable-hotspot').forEach(hotspot =>\n      this.#positionHotspot(hotspot)\n    );\n  }\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('qti-register-hotspot', this.#positionHotspotOnRegister);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-graphic-gap-match-interaction': QtiGraphicGapMatchInteraction;\n  }\n}\n"]}

package/dist/qti-graphic-gap-match-interaction.styles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("lit").CSSResult;
+declare const _default: import("lit").CSSResult[];
 export default _default;

package/dist/qti-graphic-gap-match-interaction.styles.js

@@ -1,57 +1,93 @@
 import { css } from 'lit';
-export default css `
-  :host {
-    display: flex;
-    align-items: flex-start;
-    flex-direction: column;
-    flex-wrap: wrap;
-    gap: 0.5rem;
-  }
+import { boxSizing, validationMessage } from '@qti-components/base';
+export default [
+    boxSizing,
+    validationMessage,
+    css `
+    :host {
+      display: flex;
+      align-items: flex-start;
+      flex-direction: column;
+      flex-wrap: wrap;
+      gap: 0.5rem;
+      /* Containing block for the absolutely positioned hotspots over the image. Was set on this
+         host from the theme. */
+      position: relative;
+    }
 
-  :host(.qti-choices-top) {
-    flex-direction: column-reverse;
-  }
-  :host(.qti-choices-bottom) {
-    flex-direction: column;
-  }
-  :host(.qti-choices-left) {
-    flex-direction: row-reverse;
-    & [name='drags'] {
-      width: 25%;
-    }
-    & [part='image'] {
-      width: 75%;
-    }
-  }
-  :host(.qti-choices-right) {
-    flex-direction: row;
-    & [name='drags'] {
-      width: 25%;
-    }
-    & [part='image'] {
-      width: 75%;
-    }
-  }
-  [part='image'] {
-    display: block;
-    position: relative;
-  }
-  /* [part='drops'] , */
+    :host(.qti-choices-top) {
+      flex-direction: column-reverse;
+    }
+    :host(.qti-choices-bottom) {
+      flex-direction: column;
+    }
+    :host(.qti-choices-left) {
+      flex-direction: row-reverse;
+      & [name='drags'] {
+        width: 25%;
+      }
+      & [part='image'] {
+        /* A cap, not a width: the slot must stay exactly the graphic's box (see below). */
+        max-width: 75%;
+      }
+    }
+    :host(.qti-choices-right) {
+      flex-direction: row;
+      & [name='drags'] {
+        width: 25%;
+      }
+      & [part='image'] {
+        /* A cap, not a width: the slot must stay exactly the graphic's box (see below). */
+        max-width: 75%;
+      }
+    }
+    /*
+     * The coordinate space the drop areas sit on. Every qti-associable-hotspot is position:absolute
+     * and placed with left/top percentages of the graphic (positionShapes), so this slot must be
+     * (a) a positioning context and (b) exactly the box of the graphic — the same contract as the
+     * hotspot interaction's slot.
+     *
+     *   width: fit-content   shrink-wraps the slot to the graphic instead of the full row, so a
+     *                        percentage of the slot is a percentage of the picture.
+     *   max-width: 100%      lets the slot, and with it the graphic, narrow to the container.
+     */
+    [part='image'] {
+      display: block;
+      position: relative;
+      width: fit-content;
+      max-width: 100%;
+    }
+    /* [part='drops'] , */
 
-  [name='drags'] {
-    display: flex;
-    align-items: flex-start;
-    flex-wrap: wrap;
-    flex: 1;
-    border: 2px solid transparent;
-    padding: 0.3rem;
-    border-radius: 0.3rem;
-    gap: 0.5rem;
-  }
-  ::slotted(img) {
-    display: inline-block;
-    user-select: none;
-    pointer-events: none;
-  }
-`;
+    [name='drags'] {
+      display: flex;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      flex: 1;
+      border: 2px solid transparent;
+      padding: 0.3rem;
+      border-radius: 0.3rem;
+      gap: 0.5rem;
+    }
+    /*
+     * Fluid, like the hotspot interaction's graphic: an item declares the graphic at the size its
+     * coords were authored in (often a full-resolution picture, 1600px wide), and it must still fit a
+     * column or a phone. The drop areas are percentages of it, so they scale along.
+     *
+     *   max-width: 100%   shrinks a graphic wider than its container, never upscales a small one.
+     *   height: auto      keeps the aspect ratio the width/height attributes declare; without it the
+     *                     height attribute pins the height while the width shrinks.
+     *   display: block    no inline descender gap under the picture, which would make the slot
+     *                     taller than the graphic and skew every vertical percentage.
+     */
+    ::slotted(img),
+    ::slotted(object) {
+      display: block;
+      max-width: 100%;
+      height: auto;
+      user-select: none;
+      pointer-events: none;
+    }
+  `
+];
 //# sourceMappingURL=qti-graphic-gap-match-interaction.styles.js.map

package/dist/qti-graphic-gap-match-interaction.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"qti-graphic-gap-match-interaction.styles.js","sourceRoot":"","sources":["../src/qti-graphic-gap-match-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: flex;\n    align-items: flex-start;\n    flex-direction: column;\n    flex-wrap: wrap;\n    gap: 0.5rem;\n  }\n\n  :host(.qti-choices-top) {\n    flex-direction: column-reverse;\n  }\n  :host(.qti-choices-bottom) {\n    flex-direction: column;\n  }\n  :host(.qti-choices-left) {\n    flex-direction: row-reverse;\n    & [name='drags'] {\n      width: 25%;\n    }\n    & [part='image'] {\n      width: 75%;\n    }\n  }\n  :host(.qti-choices-right) {\n    flex-direction: row;\n    & [name='drags'] {\n      width: 25%;\n    }\n    & [part='image'] {\n      width: 75%;\n    }\n  }\n  [part='image'] {\n    display: block;\n    position: relative;\n  }\n  /* [part='drops'] , */\n\n  [name='drags'] {\n    display: flex;\n    align-items: flex-start;\n    flex-wrap: wrap;\n    flex: 1;\n    border: 2px solid transparent;\n    padding: 0.3rem;\n    border-radius: 0.3rem;\n    gap: 0.5rem;\n  }\n  ::slotted(img) {\n    display: inline-block;\n    user-select: none;\n    pointer-events: none;\n  }\n`;\n"]}
+{"version":3,"file":"qti-graphic-gap-match-interaction.styles.js","sourceRoot":"","sources":["../src/qti-graphic-gap-match-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,eAAe;IACb,SAAS;IACT,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport { boxSizing, validationMessage } from '@qti-components/base';\n\nexport default [\n  boxSizing,\n  validationMessage,\n  css`\n    :host {\n      display: flex;\n      align-items: flex-start;\n      flex-direction: column;\n      flex-wrap: wrap;\n      gap: 0.5rem;\n      /* Containing block for the absolutely positioned hotspots over the image. Was set on this\n         host from the theme. */\n      position: relative;\n    }\n\n    :host(.qti-choices-top) {\n      flex-direction: column-reverse;\n    }\n    :host(.qti-choices-bottom) {\n      flex-direction: column;\n    }\n    :host(.qti-choices-left) {\n      flex-direction: row-reverse;\n      & [name='drags'] {\n        width: 25%;\n      }\n      & [part='image'] {\n        /* A cap, not a width: the slot must stay exactly the graphic's box (see below). */\n        max-width: 75%;\n      }\n    }\n    :host(.qti-choices-right) {\n      flex-direction: row;\n      & [name='drags'] {\n        width: 25%;\n      }\n      & [part='image'] {\n        /* A cap, not a width: the slot must stay exactly the graphic's box (see below). */\n        max-width: 75%;\n      }\n    }\n    /*\n     * The coordinate space the drop areas sit on. Every qti-associable-hotspot is position:absolute\n     * and placed with left/top percentages of the graphic (positionShapes), so this slot must be\n     * (a) a positioning context and (b) exactly the box of the graphic — the same contract as the\n     * hotspot interaction's slot.\n     *\n     *   width: fit-content   shrink-wraps the slot to the graphic instead of the full row, so a\n     *                        percentage of the slot is a percentage of the picture.\n     *   max-width: 100%      lets the slot, and with it the graphic, narrow to the container.\n     */\n    [part='image'] {\n      display: block;\n      position: relative;\n      width: fit-content;\n      max-width: 100%;\n    }\n    /* [part='drops'] , */\n\n    [name='drags'] {\n      display: flex;\n      align-items: flex-start;\n      flex-wrap: wrap;\n      flex: 1;\n      border: 2px solid transparent;\n      padding: 0.3rem;\n      border-radius: 0.3rem;\n      gap: 0.5rem;\n    }\n    /*\n     * Fluid, like the hotspot interaction's graphic: an item declares the graphic at the size its\n     * coords were authored in (often a full-resolution picture, 1600px wide), and it must still fit a\n     * column or a phone. The drop areas are percentages of it, so they scale along.\n     *\n     *   max-width: 100%   shrinks a graphic wider than its container, never upscales a small one.\n     *   height: auto      keeps the aspect ratio the width/height attributes declare; without it the\n     *                     height attribute pins the height while the width shrinks.\n     *   display: block    no inline descender gap under the picture, which would make the slot\n     *                     taller than the graphic and skew every vertical percentage.\n     */\n    ::slotted(img),\n    ::slotted(object) {\n      display: block;\n      max-width: 100%;\n      height: auto;\n      user-select: none;\n      pointer-events: none;\n    }\n  `\n];\n"]}

package/dist/register.js

@@ -1,3 +1,7 @@
-import { QtiGraphicGapMatchInteraction } from './qti-graphic-gap-match-interaction';
-customElements.define('qti-graphic-gap-match-interaction', QtiGraphicGapMatchInteraction);
+import { elements } from './elements';
+for (const { tag, ctor } of elements) {
+    if (!customElements.get(tag)) {
+        customElements.define(tag, ctor);
+    }
+}
 //# sourceMappingURL=register.js.map

package/dist/register.js.map

@@ -1 +1 @@
-{"version":3,"file":"register.js","sourceRoot":"","sources":["../src/register.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,6BAA6B,EAAE,MAAM,qCAAqC,CAAC;AACpF,cAAc,CAAC,MAAM,CAAC,mCAAmC,EAAE,6BAA6B,CAAC,CAAC","sourcesContent":["import { QtiGraphicGapMatchInteraction } from './qti-graphic-gap-match-interaction';\ncustomElements.define('qti-graphic-gap-match-interaction', QtiGraphicGapMatchInteraction);\n"]}
+{"version":3,"file":"register.js","sourceRoot":"","sources":["../src/register.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,QAAQ,EAAE,CAAC;IACrC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC7B,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC;AACH,CAAC","sourcesContent":["import { elements } from './elements';\n\nfor (const { tag, ctor } of elements) {\n  if (!customElements.get(tag)) {\n    customElements.define(tag, ctor);\n  }\n}\n"]}

package/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@qti-components/graphic-gap-match-interaction",
   "description": "QTI graphic-gap-match-interaction interaction",
-  "version": "1.1.4",
+  "version": "1.1.6-next.0",
   "author": "",
   "dependencies": {
-    "@qti-components/base": "^1.4.3",
-    "@qti-components/interactions-core": "^1.1.4",
+    "@qti-components/base": "^2.4.0",
+    "@qti-components/interactions-core": "^2.1.3",
     "@qti-components/utilities": "^1.3.3"
   },
   "devDependencies": {
     "@lit/context": "^1.1.6",
-    "lit": "^3.3.2"
+    "lit": "^3.3.1"
   },
   "keywords": [
     "interactions",
@@ -45,6 +45,10 @@
     "./styles": {
       "types": "./dist/qti-graphic-gap-match-interaction.styles.d.ts",
       "import": "./dist/qti-graphic-gap-match-interaction.styles.js"
+    },
+    "./elements": {
+      "types": "./dist/elements.d.ts",
+      "import": "./dist/elements.js"
     }
   },
   "repository": {
@@ -54,7 +58,9 @@
   },
   "scripts": {
     "attw": "attw --profile esm-only --pack",
-    "build": "tsc --paths null",
-    "clean": "rm -rf dist"
+    "build": "pnpm run clean && tsc --paths null",
+    "clean": "rm -rf dist",
+    "yalc": "yalc publish",
+    "yalc:push": "yalc push"
   }
 }