@qti-components/associate-interaction 1.1.5 → 1.1.6

package/dist/elements.d.ts

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

package/dist/elements.js

@@ -0,0 +1,4 @@
+import { QtiAssociateInteraction } from './qti-associate-interaction';
+export const elements = [{ tag: 'qti-associate-interaction', ctor: QtiAssociateInteraction }];
+export { QtiAssociateInteraction };
+//# 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,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AAEtE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,GAAG,EAAE,2BAA2B,EAAE,IAAI,EAAE,uBAAuB,EAAE,CAAU,CAAC;AAEvG,OAAO,EAAE,uBAAuB,EAAE,CAAC","sourcesContent":["import { QtiAssociateInteraction } from './qti-associate-interaction';\n\nexport const elements = [{ tag: 'qti-associate-interaction', ctor: QtiAssociateInteraction }] as const;\n\nexport { QtiAssociateInteraction };\n"]}

package/dist/qti-associate-interaction.d.ts

@@ -1,13 +1,39 @@
 import { Interaction } from '@qti-components/base';
 import type { CSSResultGroup } from 'lit';
 declare const QtiAssociateInteraction_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;
+/**
+ * Drag-and-drop associate interaction: candidates pair associable choices.
+ *
+ * @slot prompt - The prompt shown above the choices.
+ * @slot qti-simple-associable-choice - The associable choice sources.
+ *
+ * @csspart drags - Wrapper around the associable choice slot.
+ * @csspart drops - The container holding all drop targets.
+ * @csspart drop-row - Container for one left/right drop pair.
+ * @csspart drop - Each individual drop target.
+ * @csspart message - Live validation message region (role="alert").
+ */
 export declare class QtiAssociateInteraction extends QtiAssociateInteraction_base {
+    #private;
     static styles: CSSResultGroup;
     protected _childrenMap: Element[];
     protected _registerChoiceHandler: (event: CustomEvent) => void;
     constructor();
     protected _registerChoice(event: CustomEvent): void;
     protected getResponse(): string[];
+    /**
+     * How many associations the candidate has made.
+     *
+     * The mixin counts placed chips, which is right for gap-match — one chip in one gap is one
+     * association — and wrong here. An association is a *pair*, so three associations are six chips,
+     * and `max-associations="3"` compared 6 against 3 and declared the item invalid the moment it was
+     * correctly filled in.
+     *
+     * A half-filled row is not an association yet, and `getResponse()` already knows that: it emits a
+     * pair only when both sides hold a chip. Counting its entries counts associations by definition,
+     * and keeps the number validation sees equal to the number the response reports.
+     */
+    totalAssociationsFromState(): number;
     getValue(val: string[]): string[];
     render(): import("lit").TemplateResult<1>;
     protected updated(changedProperties: Map<string, unknown>): void;

package/dist/qti-associate-interaction.js

@@ -5,12 +5,25 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { html } from 'lit';
+import { repeat } from 'lit/directives/repeat.js';
 import { state } from 'lit/decorators.js';
 import { Interaction } from '@qti-components/base';
 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-associate-interaction.styles';
-const SlottedBase = DragDropSlottedMixin(Interaction, 'qti-simple-associable-choice', '.dl', `slot[name='qti-simple-associable-choice']`, 'pointerWithin');
+const SlottedBase = DragDropSlottedMixin(Interaction, 'qti-simple-associable-choice', `[part~='drop']`, `slot[name='qti-simple-associable-choice']`, 'pointerWithin');
+/**
+ * Drag-and-drop associate interaction: candidates pair associable choices.
+ *
+ * @slot prompt - The prompt shown above the choices.
+ * @slot qti-simple-associable-choice - The associable choice sources.
+ *
+ * @csspart drags - Wrapper around the associable choice slot.
+ * @csspart drops - The container holding all drop targets.
+ * @csspart drop-row - Container for one left/right drop pair.
+ * @csspart drop - Each individual drop target.
+ * @csspart message - Live validation message region (role="alert").
+ */
 export class QtiAssociateInteraction extends DragDropSlottedSortableMixin(SlottedBase, '[qti-draggable="true"]') {
     static { this.styles = styles; }
     constructor() {
@@ -31,20 +44,66 @@ export class QtiAssociateInteraction extends DragDropSlottedSortableMixin(Slotte
             this._childrenMap = [...this._childrenMap, choice];
         }
     }
+    /**
+     * A drop target, holding whatever the interaction's placement map says it holds.
+     * `data-declarative-drops` tells the mixin to keep the chips in that map rather than appending
+     * them into this div.
+     */
+    #renderDrop(identifier, name) {
+        const drags = this._dragDrop?.nodesByTarget?.[identifier] ?? [];
+        return html `<div name=${name} part="drop" data-declarative-drops identifier=${identifier}>
+      ${repeat(drags, node => node.getAttribute('identifier'), node => node)}
+    </div>`;
+    }
+    /**
+     * How many association rows to render.
+     *
+     * `max-associations` is how many associations the candidate may *make*, so it is exactly the
+     * number of rows. This used to be `ceil(choices / 2)` — the number of pairs the choices could
+     * possibly form — which made the limit unenforceable: with six choices the interaction always
+     * drew three rows, so `max-associations="3"` could never be exceeded and its validation always
+     * passed. Worse, the number read as a cap on *drags placed* rather than on associations formed.
+     *
+     * `0` is QTI's "no limit". With no limit there is still a natural ceiling: every choice paired
+     * with one other.
+     */
+    get #rowCount() {
+        return this.maxAssociations > 0 ? this.maxAssociations : Math.ceil(this._childrenMap.length / 2);
+    }
     getResponse() {
-        const pairCount = Math.ceil(this._childrenMap.length / 2);
         const response = [];
-        for (let i = 0; i < pairCount; i++) {
-            const leftDrop = this.shadowRoot?.querySelector(`.dl[identifier="droplist${i}_left"]`);
-            const rightDrop = this.shadowRoot?.querySelector(`.dl[identifier="droplist${i}_right"]`);
-            const leftId = leftDrop?.querySelector('[qti-draggable="true"]')?.getAttribute('identifier');
-            const rightId = rightDrop?.querySelector('[qti-draggable="true"]')?.getAttribute('identifier');
+        // Same count as `render()`. Read fewer rows than were drawn and the pairs in the last rows
+        // vanish from the response without a trace.
+        for (let i = 0; i < this.#rowCount; i++) {
+            const leftDrop = this.shadowRoot?.querySelector(`[part~='drop'][identifier="droplist${i}_left"]`);
+            const rightDrop = this.shadowRoot?.querySelector(`[part~='drop'][identifier="droplist${i}_right"]`);
+            // Read placement, not the DOM: the DOM is rendered from placement now.
+            const leftId = leftDrop && this.chipsIn(leftDrop)[0]?.getAttribute('identifier');
+            const rightId = rightDrop && this.chipsIn(rightDrop)[0]?.getAttribute('identifier');
             if (leftId && rightId) {
                 response.push(`${leftId} ${rightId}`);
             }
         }
         return response;
     }
+    /**
+     * How many associations the candidate has made.
+     *
+     * The mixin counts placed chips, which is right for gap-match — one chip in one gap is one
+     * association — and wrong here. An association is a *pair*, so three associations are six chips,
+     * and `max-associations="3"` compared 6 against 3 and declared the item invalid the moment it was
+     * correctly filled in.
+     *
+     * A half-filled row is not an association yet, and `getResponse()` already knows that: it emits a
+     * pair only when both sides hold a chip. Counting its entries counts associations by definition,
+     * and keeps the number validation sees equal to the number the response reports.
+     */
+    totalAssociationsFromState() {
+        // The mixin's version syncs first, and callers depend on that: `getResponse` reads the
+        // placement map, which is stale until the sync runs.
+        this.syncDragDropState();
+        return this.getResponse().length;
+    }
     getValue(val) {
         return (val?.flatMap((pair, i) => {
             const parts = pair.split(' ');
@@ -55,12 +114,12 @@ export class QtiAssociateInteraction extends DragDropSlottedSortableMixin(Slotte
     }
     render() {
         return html ` <slot name="prompt"></slot>
-      <slot part="associable-choices" name="qti-simple-associable-choice"></slot>
-      <div part="drop-container">
+      <slot part="drags" name="qti-simple-associable-choice"></slot>
+      <div part="drops">
         ${this._childrenMap.length > 0 &&
-            Array.from(Array(Math.ceil(this._childrenMap.length / 2)).keys()).map((_, index) => html `<div part="associables-container">
-              <div name="left${index}" part="drop-list" class="dl" identifier="droplist${index}_left"></div>
-              <div name="right${index}" part="drop-list" class="dl" identifier="droplist${index}_right"></div>
+            Array.from({ length: this.#rowCount }, (_, index) => html `<div part="drop-row">
+              ${this.#renderDrop(`droplist${index}_left`, `left${index}`)}
+              ${this.#renderDrop(`droplist${index}_right`, `right${index}`)}
             </div>`)}
 
         <div role="alert" part="message" id="validation-message"></div>

package/dist/qti-associate-interaction.js.map

@@ -1 +1 @@
-{"version":3,"file":"qti-associate-interaction.js","sourceRoot":"","sources":["../src/qti-associate-interaction.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { state } from 'lit/decorators.js';\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-associate-interaction.styles';\n\nimport type { QtiSimpleAssociableChoice } from '@qti-components/interactions-core/elements/qti-simple-associable-choice';\nimport type { CSSResultGroup } from 'lit';\nconst SlottedBase = DragDropSlottedMixin(\n  Interaction,\n  'qti-simple-associable-choice',\n  '.dl',\n  `slot[name='qti-simple-associable-choice']`,\n  'pointerWithin'\n);\n\nexport class QtiAssociateInteraction extends DragDropSlottedSortableMixin(SlottedBase, '[qti-draggable=\"true\"]') {\n  static override styles: CSSResultGroup = styles;\n  @state() protected _childrenMap: Element[] = [];\n\n  protected _registerChoiceHandler: (event: CustomEvent) => void;\n\n  constructor() {\n    super();\n    this._registerChoiceHandler = this._registerChoice.bind(this);\n    this.addEventListener('register-qti-simple-associable-choice', this._registerChoiceHandler);\n  }\n\n  protected _registerChoice(event: CustomEvent) {\n    // Use composedPath()[0] to get the actual origin — event.target is retargeted to `this`\n    // when a composed event crosses the shadow DOM boundary, making it useless for filtering.\n    const origin = event.composedPath()[0] as HTMLElement;\n    // Ignore clones placed in shadow DOM drop zones — only register light DOM choices\n    if (this.shadowRoot?.contains(origin)) return;\n    const choice = origin as QtiSimpleAssociableChoice;\n    if (!this._childrenMap.includes(choice)) {\n      this._childrenMap = [...this._childrenMap, choice];\n    }\n  }\n\n  protected getResponse(): string[] {\n    const pairCount = Math.ceil(this._childrenMap.length / 2);\n    const response: string[] = [];\n    for (let i = 0; i < pairCount; i++) {\n      const leftDrop = this.shadowRoot?.querySelector(`.dl[identifier=\"droplist${i}_left\"]`);\n      const rightDrop = this.shadowRoot?.querySelector(`.dl[identifier=\"droplist${i}_right\"]`);\n      const leftId = leftDrop?.querySelector('[qti-draggable=\"true\"]')?.getAttribute('identifier');\n      const rightId = rightDrop?.querySelector('[qti-draggable=\"true\"]')?.getAttribute('identifier');\n      if (leftId && rightId) {\n        response.push(`${leftId} ${rightId}`);\n      }\n    }\n    return response;\n  }\n\n  getValue(val: string[]) {\n    return (\n      val?.flatMap((pair, i) => {\n        const parts = pair.split(' ');\n        if (parts.length !== 2) return [];\n        return [`${parts[0]} droplist${i}_left`, `${parts[1]} droplist${i}_right`];\n      }) ?? []\n    );\n  }\n\n  override render() {\n    return html` <slot name=\"prompt\"></slot>\n      <slot part=\"associable-choices\" name=\"qti-simple-associable-choice\"></slot>\n      <div part=\"drop-container\">\n        ${this._childrenMap.length > 0 &&\n        Array.from(Array(Math.ceil(this._childrenMap.length / 2)).keys()).map(\n          (_, index) =>\n            html`<div part=\"associables-container\">\n              <div name=\"left${index}\" part=\"drop-list\" class=\"dl\" identifier=\"droplist${index}_left\"></div>\n              <div name=\"right${index}\" part=\"drop-list\" class=\"dl\" identifier=\"droplist${index}_right\"></div>\n            </div>`\n        )}\n\n        <div role=\"alert\" part=\"message\" id=\"validation-message\"></div>\n      </div>`;\n  }\n\n  protected override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_childrenMap')) {\n      this.cacheInteractiveElements();\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('register-qti-simple-associable-choice', this._registerChoiceHandler);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-associate-interaction': QtiAssociateInteraction;\n  }\n}\n"]}
+{"version":3,"file":"qti-associate-interaction.js","sourceRoot":"","sources":["../src/qti-associate-interaction.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { state } from 'lit/decorators.js';\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-associate-interaction.styles';\n\nimport type { QtiSimpleAssociableChoice } from '@qti-components/interactions-core/elements/qti-simple-associable-choice';\nimport type { CSSResultGroup } from 'lit';\nconst SlottedBase = DragDropSlottedMixin(\n  Interaction,\n  'qti-simple-associable-choice',\n  `[part~='drop']`,\n  `slot[name='qti-simple-associable-choice']`,\n  'pointerWithin'\n);\n\n/**\n * Drag-and-drop associate interaction: candidates pair associable choices.\n *\n * @slot prompt - The prompt shown above the choices.\n * @slot qti-simple-associable-choice - The associable choice sources.\n *\n * @csspart drags - Wrapper around the associable choice slot.\n * @csspart drops - The container holding all drop targets.\n * @csspart drop-row - Container for one left/right drop pair.\n * @csspart drop - Each individual drop target.\n * @csspart message - Live validation message region (role=\"alert\").\n */\nexport class QtiAssociateInteraction extends DragDropSlottedSortableMixin(SlottedBase, '[qti-draggable=\"true\"]') {\n  static override styles: CSSResultGroup = styles;\n  @state() protected _childrenMap: Element[] = [];\n\n  protected _registerChoiceHandler: (event: CustomEvent) => void;\n\n  constructor() {\n    super();\n    this._registerChoiceHandler = this._registerChoice.bind(this);\n    this.addEventListener('register-qti-simple-associable-choice', this._registerChoiceHandler);\n  }\n\n  protected _registerChoice(event: CustomEvent) {\n    // Use composedPath()[0] to get the actual origin — event.target is retargeted to `this`\n    // when a composed event crosses the shadow DOM boundary, making it useless for filtering.\n    const origin = event.composedPath()[0] as HTMLElement;\n    // Ignore clones placed in shadow DOM drop zones — only register light DOM choices\n    if (this.shadowRoot?.contains(origin)) return;\n    const choice = origin as QtiSimpleAssociableChoice;\n    if (!this._childrenMap.includes(choice)) {\n      this._childrenMap = [...this._childrenMap, choice];\n    }\n  }\n\n  /**\n   * A drop target, holding whatever the interaction's placement map says it holds.\n   * `data-declarative-drops` tells the mixin to keep the chips in that map rather than appending\n   * them into this div.\n   */\n  #renderDrop(identifier: string, name: string) {\n    const drags = this._dragDrop?.nodesByTarget?.[identifier] ?? [];\n    return html`<div name=${name} part=\"drop\" data-declarative-drops identifier=${identifier}>\n      ${repeat(\n        drags,\n        node => node.getAttribute('identifier'),\n        node => node\n      )}\n    </div>`;\n  }\n\n  /**\n   * How many association rows to render.\n   *\n   * `max-associations` is how many associations the candidate may *make*, so it is exactly the\n   * number of rows. This used to be `ceil(choices / 2)` — the number of pairs the choices could\n   * possibly form — which made the limit unenforceable: with six choices the interaction always\n   * drew three rows, so `max-associations=\"3\"` could never be exceeded and its validation always\n   * passed. Worse, the number read as a cap on *drags placed* rather than on associations formed.\n   *\n   * `0` is QTI's \"no limit\". With no limit there is still a natural ceiling: every choice paired\n   * with one other.\n   */\n  get #rowCount(): number {\n    return this.maxAssociations > 0 ? this.maxAssociations : Math.ceil(this._childrenMap.length / 2);\n  }\n\n  protected getResponse(): string[] {\n    const response: string[] = [];\n    // Same count as `render()`. Read fewer rows than were drawn and the pairs in the last rows\n    // vanish from the response without a trace.\n    for (let i = 0; i < this.#rowCount; i++) {\n      const leftDrop = this.shadowRoot?.querySelector(`[part~='drop'][identifier=\"droplist${i}_left\"]`);\n      const rightDrop = this.shadowRoot?.querySelector(`[part~='drop'][identifier=\"droplist${i}_right\"]`);\n      // Read placement, not the DOM: the DOM is rendered from placement now.\n      const leftId = leftDrop && this.chipsIn(leftDrop as HTMLElement)[0]?.getAttribute('identifier');\n      const rightId = rightDrop && this.chipsIn(rightDrop as HTMLElement)[0]?.getAttribute('identifier');\n      if (leftId && rightId) {\n        response.push(`${leftId} ${rightId}`);\n      }\n    }\n    return response;\n  }\n\n  /**\n   * How many associations the candidate has made.\n   *\n   * The mixin counts placed chips, which is right for gap-match — one chip in one gap is one\n   * association — and wrong here. An association is a *pair*, so three associations are six chips,\n   * and `max-associations=\"3\"` compared 6 against 3 and declared the item invalid the moment it was\n   * correctly filled in.\n   *\n   * A half-filled row is not an association yet, and `getResponse()` already knows that: it emits a\n   * pair only when both sides hold a chip. Counting its entries counts associations by definition,\n   * and keeps the number validation sees equal to the number the response reports.\n   */\n  public override totalAssociationsFromState(): number {\n    // The mixin's version syncs first, and callers depend on that: `getResponse` reads the\n    // placement map, which is stale until the sync runs.\n    this.syncDragDropState();\n    return this.getResponse().length;\n  }\n\n  getValue(val: string[]) {\n    return (\n      val?.flatMap((pair, i) => {\n        const parts = pair.split(' ');\n        if (parts.length !== 2) return [];\n        return [`${parts[0]} droplist${i}_left`, `${parts[1]} droplist${i}_right`];\n      }) ?? []\n    );\n  }\n\n  override render() {\n    return html` <slot name=\"prompt\"></slot>\n      <slot part=\"drags\" name=\"qti-simple-associable-choice\"></slot>\n      <div part=\"drops\">\n        ${this._childrenMap.length > 0 &&\n        Array.from(\n          { length: this.#rowCount },\n          (_, index) =>\n            html`<div part=\"drop-row\">\n              ${this.#renderDrop(`droplist${index}_left`, `left${index}`)}\n              ${this.#renderDrop(`droplist${index}_right`, `right${index}`)}\n            </div>`\n        )}\n\n        <div role=\"alert\" part=\"message\" id=\"validation-message\"></div>\n      </div>`;\n  }\n\n  protected override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    if (changedProperties.has('_childrenMap')) {\n      this.cacheInteractiveElements();\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.removeEventListener('register-qti-simple-associable-choice', this._registerChoiceHandler);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-associate-interaction': QtiAssociateInteraction;\n  }\n}\n"]}

package/dist/qti-associate-interaction.styles.d.ts

@@ -1,2 +1,11 @@
-declare const _default: import("lit").CSSResult;
+/**
+ * Layout and sizing only. Paint and state live in the theme.
+ *
+ * `[part~='drop'][active]` and `[part~='drop'][enabled]` moved to
+ * `styles/qti-theme/interactions/qti-associate-interaction.css` as `::part(active)` /
+ * `::part(enabled)`, since an attribute selector cannot follow `::part()` and a <div> cannot carry
+ * a custom state. Both carried `!important`, which only existed to beat the shadow's own rules from
+ * the shadow. Neither needs it from the theme.
+ */
+declare const _default: import("lit").CSSResult[];
 export default _default;

package/dist/qti-associate-interaction.styles.js

@@ -1,51 +1,71 @@
 import { css } from 'lit';
-export default css `
-  :host {
-    display: block; /* necessary to calculate scaling position */
-  }
-  slot[part='associable-choices'] {
-    display: flex;
-    align-items: flex-start;
-    flex: 1;
-    border: 2px solid transparent;
-    margin: 1rem 0;
-    border-radius: 0.3rem;
-    gap: 0.5rem;
-  }
+import { boxSizing, dropRegion, validationMessage } from '@qti-components/base';
+/**
+ * Layout and sizing only. Paint and state live in the theme.
+ *
+ * `[part~='drop'][active]` and `[part~='drop'][enabled]` moved to
+ * `styles/qti-theme/interactions/qti-associate-interaction.css` as `::part(active)` /
+ * `::part(enabled)`, since an attribute selector cannot follow `::part()` and a <div> cannot carry
+ * a custom state. Both carried `!important`, which only existed to beat the shadow's own rules from
+ * the shadow. Neither needs it from the theme.
+ */
+export default [
+    boxSizing,
+    validationMessage,
+    dropRegion,
+    css `
+    :host {
+      display: block; /* necessary to calculate scaling position */
+    }
+    /* The bank WRAPS. Without flex-wrap the row is nowrap, and a flex item's default flex-shrink: 1
+       then compresses the chips instead of moving them down: a bank of six squeezed the last chip
+       until only its grip was left, at no width the author could see coming. A chip is a fixed
+       thing, so the only place the overflow can go is the next line. */
+    slot[part~='drags'] {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: flex-start;
+      flex: 1;
+      border: 2px solid transparent;
+      margin: 1rem 0;
+      border-radius: 0.3rem;
+      gap: 0.5rem;
+    }
 
-  [part='drop-list'][active] {
-    border-color: var(--qti-border-active) !important;
-    background-color: var(--qti-bg-active) !important;
-  }
+    /* Drop target. --qti-dropzone-min-height is published by the interaction from the measured
+     chip height; 3rem is the fallback when there is nothing to measure. Was an inline style. */
+    [part~='drop'] {
+      display: grid;
+      min-height: var(--qti-dropzone-min-height, 3rem);
+      min-width: var(--qti-dropzone-min-width, 3rem);
+      border: 1px solid var(--qti-border-color, #d1d5db);
+      border-radius: 0.25rem;
+      overflow: hidden;
+    }
 
-  [part='drop-list'] {
-    display: grid;
-    min-height: 3rem;
-    min-width: 10rem;
-    border: 1px solid var(--qti-border-color, #d1d5db);
-    border-radius: 0.25rem;
-    box-sizing: border-box;
-  }
+    [part='drops'] {
+      display: flex;
+      flex-direction: column;
+      gap: 0.5rem;
+    }
 
-  [part='drop-container'] {
-    display: flex;
-    flex-direction: column;
-    gap: 0.5rem;
-  }
+    :host::part(drop-row) {
+      display: flex;
+      justify-content: space-between;
+      background: linear-gradient(
+        180deg,
+        rgb(0 0 0 / 0%) calc(50% - 1px),
+        var(--qti-border-color) calc(50%),
+        rgb(0 0 0 / 0%) calc(50% + 1px)
+      );
+    }
 
-  [part='drop-list'][enabled] {
-    background-color: var(--qti-bg-active) !important;
-  }
-
-  :host::part(associables-container) {
-    display: flex;
-    justify-content: space-between;
-    background: linear-gradient(
-      180deg,
-      rgb(0 0 0 / 0%) calc(50% - 1px),
-      var(--qti-border-color) calc(50%),
-      rgb(0 0 0 / 0%) calc(50% + 1px)
-    );
-  }
-`;
+    /* An answer key shows the answer, not the bank you would have dragged it from. The attribute is
+       set on the clone by the correct-response mixin; the theme used to do this with a
+       '.full-correct-response' descendant selector, from the document. */
+    :host([answer-key]) ::slotted(qti-simple-associable-choice) {
+      display: none;
+    }
+  `
+];
 //# sourceMappingURL=qti-associate-interaction.styles.js.map

package/dist/qti-associate-interaction.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"qti-associate-interaction.styles.js","sourceRoot":"","sources":["../src/qti-associate-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgDjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block; /* necessary to calculate scaling position */\n  }\n  slot[part='associable-choices'] {\n    display: flex;\n    align-items: flex-start;\n    flex: 1;\n    border: 2px solid transparent;\n    margin: 1rem 0;\n    border-radius: 0.3rem;\n    gap: 0.5rem;\n  }\n\n  [part='drop-list'][active] {\n    border-color: var(--qti-border-active) !important;\n    background-color: var(--qti-bg-active) !important;\n  }\n\n  [part='drop-list'] {\n    display: grid;\n    min-height: 3rem;\n    min-width: 10rem;\n    border: 1px solid var(--qti-border-color, #d1d5db);\n    border-radius: 0.25rem;\n    box-sizing: border-box;\n  }\n\n  [part='drop-container'] {\n    display: flex;\n    flex-direction: column;\n    gap: 0.5rem;\n  }\n\n  [part='drop-list'][enabled] {\n    background-color: var(--qti-bg-active) !important;\n  }\n\n  :host::part(associables-container) {\n    display: flex;\n    justify-content: space-between;\n    background: linear-gradient(\n      180deg,\n      rgb(0 0 0 / 0%) calc(50% - 1px),\n      var(--qti-border-color) calc(50%),\n      rgb(0 0 0 / 0%) calc(50% + 1px)\n    );\n  }\n`;\n"]}
+{"version":3,"file":"qti-associate-interaction.styles.js","sourceRoot":"","sources":["../src/qti-associate-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEhF;;;;;;;;GAQG;AAEH,eAAe;IACb,SAAS;IACT,iBAAiB;IACjB,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport { boxSizing, dropRegion, validationMessage } from '@qti-components/base';\n\n/**\n * Layout and sizing only. Paint and state live in the theme.\n *\n * `[part~='drop'][active]` and `[part~='drop'][enabled]` moved to\n * `styles/qti-theme/interactions/qti-associate-interaction.css` as `::part(active)` /\n * `::part(enabled)`, since an attribute selector cannot follow `::part()` and a <div> cannot carry\n * a custom state. Both carried `!important`, which only existed to beat the shadow's own rules from\n * the shadow. Neither needs it from the theme.\n */\n\nexport default [\n  boxSizing,\n  validationMessage,\n  dropRegion,\n  css`\n    :host {\n      display: block; /* necessary to calculate scaling position */\n    }\n    /* The bank WRAPS. Without flex-wrap the row is nowrap, and a flex item's default flex-shrink: 1\n       then compresses the chips instead of moving them down: a bank of six squeezed the last chip\n       until only its grip was left, at no width the author could see coming. A chip is a fixed\n       thing, so the only place the overflow can go is the next line. */\n    slot[part~='drags'] {\n      display: flex;\n      flex-wrap: wrap;\n      align-items: flex-start;\n      flex: 1;\n      border: 2px solid transparent;\n      margin: 1rem 0;\n      border-radius: 0.3rem;\n      gap: 0.5rem;\n    }\n\n    /* Drop target. --qti-dropzone-min-height is published by the interaction from the measured\n     chip height; 3rem is the fallback when there is nothing to measure. Was an inline style. */\n    [part~='drop'] {\n      display: grid;\n      min-height: var(--qti-dropzone-min-height, 3rem);\n      min-width: var(--qti-dropzone-min-width, 3rem);\n      border: 1px solid var(--qti-border-color, #d1d5db);\n      border-radius: 0.25rem;\n      overflow: hidden;\n    }\n\n    [part='drops'] {\n      display: flex;\n      flex-direction: column;\n      gap: 0.5rem;\n    }\n\n    :host::part(drop-row) {\n      display: flex;\n      justify-content: space-between;\n      background: linear-gradient(\n        180deg,\n        rgb(0 0 0 / 0%) calc(50% - 1px),\n        var(--qti-border-color) calc(50%),\n        rgb(0 0 0 / 0%) calc(50% + 1px)\n      );\n    }\n\n    /* An answer key shows the answer, not the bank you would have dragged it from. The attribute is\n       set on the clone by the correct-response mixin; the theme used to do this with a\n       '.full-correct-response' descendant selector, from the document. */\n    :host([answer-key]) ::slotted(qti-simple-associable-choice) {\n      display: none;\n    }\n  `\n];\n"]}

package/dist/register.js

@@ -1,3 +1,7 @@
-import { QtiAssociateInteraction } from './qti-associate-interaction';
-customElements.define('qti-associate-interaction', QtiAssociateInteraction);
+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,uBAAuB,EAAE,MAAM,6BAA6B,CAAC;AACtE,cAAc,CAAC,MAAM,CAAC,2BAA2B,EAAE,uBAAuB,CAAC,CAAC","sourcesContent":["import { QtiAssociateInteraction } from './qti-associate-interaction';\ncustomElements.define('qti-associate-interaction', QtiAssociateInteraction);\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,12 +1,12 @@
 {
   "name": "@qti-components/associate-interaction",
   "description": "QTI associate-interaction interaction",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "author": "",
   "dependencies": {
+    "@qti-components/base": "^2.0.0",
     "@qti-components/utilities": "^1.3.3",
-    "@qti-components/base": "^1.5.1",
-    "@qti-components/interactions-core": "^1.1.4"
+    "@qti-components/interactions-core": "^2.0.0"
   },
   "devDependencies": {
     "@lit/context": "^1.1.6",
@@ -45,6 +45,10 @@
     "./styles": {
       "types": "./dist/qti-associate-interaction.styles.d.ts",
       "import": "./dist/qti-associate-interaction.styles.js"
+    },
+    "./elements": {
+      "types": "./dist/elements.d.ts",
+      "import": "./dist/elements.js"
     }
   },
   "repository": {
@@ -55,6 +59,8 @@
   "scripts": {
     "attw": "attw --profile esm-only --pack",
     "build": "tsc --paths null",
-    "clean": "rm -rf dist"
+    "clean": "rm -rf dist",
+    "yalc": "yalc publish",
+    "yalc:push": "yalc push"
   }
 }