@qti-components/order-interaction 1.1.4 → 2.0.0

package/dist/elements.d.ts

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

package/dist/elements.js

@@ -0,0 +1,4 @@
+import { QtiOrderInteraction } from './qti-order-interaction';
+export const elements = [{ tag: 'qti-order-interaction', ctor: QtiOrderInteraction }];
+export { QtiOrderInteraction };
+//# 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,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAE9D,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,GAAG,EAAE,uBAAuB,EAAE,IAAI,EAAE,mBAAmB,EAAE,CAAU,CAAC;AAE/F,OAAO,EAAE,mBAAmB,EAAE,CAAC","sourcesContent":["import { QtiOrderInteraction } from './qti-order-interaction';\n\nexport const elements = [{ tag: 'qti-order-interaction', ctor: QtiOrderInteraction }] as const;\n\nexport { QtiOrderInteraction };\n"]}

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

@@ -1,17 +1,45 @@
 import { Interaction } from '@qti-components/base';
 declare const QtiOrderInteraction_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;
+/**
+ * Order interaction: candidates arrange choices into a target sequence.
+ *
+ * @customElement qti-order-interaction
+ *
+ * @attr {string} response-identifier - Required. Identifier of the bound response variable.
+ * @attr {'horizontal'|'vertical'} [orientation=vertical] - Layout direction of the drop
+ *   sequence. Unlike on `qti-choice-interaction`, QTI does not deprecate this for order.
+ * @attr {boolean} [shuffle=false] - Requests choice shuffling. Applied by the transform
+ *   pipeline (`qti-transformers`), not by this element.
+ * @attr {number} [min-associations=1] - Non-QTI vocabulary inherited from the drag-drop
+ *   mixin; currently the only way to set the lower bound. QTI spells this `min-choices`.
+ * @attr {number} [max-associations=0] - Non-QTI vocabulary inherited from the drag-drop
+ *   mixin; currently the only way to set the upper bound. QTI spells this `max-choices`.
+ * @attr {number} min-choices - Not implemented. The QTI-correct spelling of the lower bound.
+ *   See plans/interaction-attribute-spec-conformance.md.
+ * @attr {number} max-choices - Not implemented. The QTI-correct spelling of the upper bound.
+ *   See plans/interaction-attribute-spec-conformance.md.
+ * @attr {boolean} [auto-size-dropzones=true] - Extension, not QTI. Sizes every drop target to
+ *   the widest chip so placement does not reflow the layout. On by default: an order slot is a
+ *   socket cut to one chip, and both axes are measured (see DROP-SIZING.md).
+ * @attr {boolean} [disable-animations=false] - Extension, not QTI. Disables the FLIP move
+ *   animation.
+ *
+ * @slot prompt - The prompt shown above the interaction.
+ * @slot drags - The draggable choice sources.
+ *
+ * @csspart container - The outer container wrapping drags and drops.
+ * @csspart drags - Wrapper around the drag sources slot.
+ * @csspart drops - The drop-target region.
+ * @csspart drop - Each individual drop target.
+ * @csspart drag - A choice that has been placed into a drop target.
+ */
 export declare class QtiOrderInteraction extends QtiOrderInteraction_base {
-    #private;
-    static styles: import("lit").CSSResult;
+    static styles: import("lit").CSSResult[];
     protected childrenMap: Element[];
     protected nrChoices: number;
-    correctResponses: string[];
-    showCorrectResponses: boolean;
     /** orientation of choices */
     orientation: 'horizontal' | 'vertical';
     render(): import("lit").TemplateResult<1>;
-    toggleCorrectResponse(show: boolean): void;
-    toggleCandidateCorrection(show: boolean): void;
     getValue(val: string[]): string[];
     protected getResponse(): string[];
     shouldTreatBlockedMaxAsInvalid(): boolean;

package/dist/qti-order-interaction.js

@@ -5,36 +5,51 @@ 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 { property, state } from 'lit/decorators.js';
 import { Interaction } from '@qti-components/base';
 import { DragDropSlottedMixin, DragDropSlottedSortableMixin } from '@qti-components/interactions-core/mixins/drag-drop-observables';
 import styles from './qti-order-interaction.styles';
-const SlottedBase = DragDropSlottedMixin(Interaction, `qti-simple-choice`, 'drop-list', `slot[part='drags']`);
+const SlottedBase = DragDropSlottedMixin(Interaction, `qti-simple-choice`, `[part~='drop']`, `slot[part~='drags']`);
+/**
+ * Order interaction: candidates arrange choices into a target sequence.
+ *
+ * @customElement qti-order-interaction
+ *
+ * @attr {string} response-identifier - Required. Identifier of the bound response variable.
+ * @attr {'horizontal'|'vertical'} [orientation=vertical] - Layout direction of the drop
+ *   sequence. Unlike on `qti-choice-interaction`, QTI does not deprecate this for order.
+ * @attr {boolean} [shuffle=false] - Requests choice shuffling. Applied by the transform
+ *   pipeline (`qti-transformers`), not by this element.
+ * @attr {number} [min-associations=1] - Non-QTI vocabulary inherited from the drag-drop
+ *   mixin; currently the only way to set the lower bound. QTI spells this `min-choices`.
+ * @attr {number} [max-associations=0] - Non-QTI vocabulary inherited from the drag-drop
+ *   mixin; currently the only way to set the upper bound. QTI spells this `max-choices`.
+ * @attr {number} min-choices - Not implemented. The QTI-correct spelling of the lower bound.
+ *   See plans/interaction-attribute-spec-conformance.md.
+ * @attr {number} max-choices - Not implemented. The QTI-correct spelling of the upper bound.
+ *   See plans/interaction-attribute-spec-conformance.md.
+ * @attr {boolean} [auto-size-dropzones=true] - Extension, not QTI. Sizes every drop target to
+ *   the widest chip so placement does not reflow the layout. On by default: an order slot is a
+ *   socket cut to one chip, and both axes are measured (see DROP-SIZING.md).
+ * @attr {boolean} [disable-animations=false] - Extension, not QTI. Disables the FLIP move
+ *   animation.
+ *
+ * @slot prompt - The prompt shown above the interaction.
+ * @slot drags - The draggable choice sources.
+ *
+ * @csspart container - The outer container wrapping drags and drops.
+ * @csspart drags - Wrapper around the drag sources slot.
+ * @csspart drops - The drop-target region.
+ * @csspart drop - Each individual drop target.
+ * @csspart drag - A choice that has been placed into a drop target.
+ */
 export class QtiOrderInteraction extends DragDropSlottedSortableMixin(SlottedBase, '[qti-draggable="true"]') {
     constructor() {
         super(...arguments);
         this.nrChoices = 0;
-        this.correctResponses = [];
-        this.showCorrectResponses = false;
     }
     static { this.styles = styles; }
-    #getCorrectOrderEntries() {
-        const responseVariable = this.responseVariable;
-        if (!responseVariable?.correctResponse) {
-            return [];
-        }
-        const response = Array.isArray(responseVariable.correctResponse)
-            ? responseVariable.correctResponse
-            : [responseVariable.correctResponse];
-        return response
-            .map((entry, index) => {
-            const [identifier, dropId] = entry.split(' ');
-            const parsedDropIndex = dropId?.startsWith('droplist') ? parseInt(dropId.replace('droplist', ''), 10) : index;
-            const dropIndex = Number.isNaN(parsedDropIndex) ? index : parsedDropIndex;
-            return { identifier, dropIndex };
-        })
-            .filter(entry => Boolean(entry.identifier));
-    }
     render() {
         const choices = Array.from(this.querySelectorAll('qti-simple-choice'));
         if (this.nrChoices < choices.length) {
@@ -44,69 +59,20 @@ export class QtiOrderInteraction extends DragDropSlottedSortableMixin(SlottedBas
       <div part="container">
         <slot part="drags"> </slot>
         <div part="drops">
-          ${[...Array(this.nrChoices)].map((_, i) => html `<drop-list role="region" part="drop-list" identifier="droplist${i}"></drop-list>`)}
+          ${[...Array(this.nrChoices)].map((_, i) => {
+            const identifier = `droplist${i}`;
+            // The chips are rendered here, from the interaction's placement map, rather than being
+            // appended into this div by handleDrop. `data-declarative-drops` is what tells the
+            // mixin to keep them in the map and leave this element's children alone.
+            const drags = this._dragDrop?.nodesByTarget?.[identifier] ?? [];
+            return html `<div role="region" part="drop" data-declarative-drops identifier=${identifier}>
+              ${repeat(drags, node => node.getAttribute('identifier'), node => node)}
+            </div>`;
+        })}
         </div>
+        <div id="validation-message" part="message" role="alert" style="display:none;"></div>
       </div>`;
     }
-    toggleCorrectResponse(show) {
-        // Always start by removing old correct answers
-        this.shadowRoot.querySelectorAll('.correct-option').forEach(option => option.remove());
-        if (show) {
-            const entries = this.#getCorrectOrderEntries();
-            const labelsByIdentifier = new Map();
-            Array.from(this.querySelectorAll('qti-simple-choice')).forEach(choice => {
-                const id = choice.getAttribute('identifier');
-                const label = choice.textContent?.trim();
-                if (id && label) {
-                    labelsByIdentifier.set(id, label);
-                }
-            });
-            entries.forEach(({ identifier, dropIndex }) => {
-                const label = labelsByIdentifier.get(identifier);
-                if (!label)
-                    return;
-                const relativeDrop = this.shadowRoot.querySelector(`drop-list[identifier="droplist${dropIndex}"]`);
-                if (!relativeDrop)
-                    return;
-                const span = document.createElement('span');
-                span.classList.add('correct-option');
-                span.textContent = label;
-                span.style.border = '1px solid var(--qti-correct)';
-                span.style.borderRadius = '4px';
-                span.style.padding = '2px 4px';
-                span.style.display = 'inline-block';
-                span.style.marginTop = '4px';
-                relativeDrop.insertAdjacentElement('afterend', span);
-            });
-        }
-    }
-    toggleCandidateCorrection(show) {
-        super.toggleCandidateCorrection(show);
-        const placedChoices = Array.from(this.shadowRoot.querySelectorAll('drop-list [qti-draggable="true"]'));
-        placedChoices.forEach(choice => {
-            choice.internals.states.delete('candidate-correct');
-            choice.internals.states.delete('candidate-incorrect');
-        });
-        if (!show)
-            return;
-        const entries = this.#getCorrectOrderEntries();
-        const correctByDrop = new Map();
-        entries.forEach(entry => correctByDrop.set(entry.dropIndex, entry.identifier));
-        const dropLists = Array.from(this.shadowRoot.querySelectorAll('drop-list'));
-        dropLists.forEach((dropList, index) => {
-            const placedChoice = dropList.querySelector('[qti-draggable="true"]');
-            if (!placedChoice)
-                return;
-            const expectedIdentifier = correctByDrop.get(index);
-            const actualIdentifier = placedChoice.getAttribute('identifier');
-            if (expectedIdentifier && actualIdentifier === expectedIdentifier) {
-                placedChoice.internals.states.add('candidate-correct');
-            }
-            else {
-                placedChoice.internals.states.add('candidate-incorrect');
-            }
-        });
-    }
     // some interactions have a different way of getting the response
     // this is called from the drag and drop mixin class
     // you have to implement your own getResponse method in the superclass
@@ -120,13 +86,12 @@ export class QtiOrderInteraction extends DragDropSlottedSortableMixin(SlottedBas
     // cause they are different for some interactions.
     // MH: is this function called? Shouldn't we use getValue?
     getResponse() {
-        const droppables = Array.from(this.shadowRoot.querySelectorAll('drop-list'));
-        const response = droppables.map(droppable => {
-            const dragsInDroppable = droppable.querySelectorAll('[qti-draggable="true"]');
-            const identifiers = Array.from(dragsInDroppable).map(d => d.getAttribute('identifier'));
-            return [...identifiers].join(' ');
-        });
-        return response;
+        const droppables = Array.from(this.shadowRoot.querySelectorAll(`[part~='drop']`));
+        // Read placement, not the DOM. The DOM is rendered *from* placement now, so querying it back
+        // out would be asking the same question twice and hoping for the same answer.
+        return droppables.map(droppable => this.chipsIn(droppable)
+            .map(chip => chip.getAttribute('identifier'))
+            .join(' '));
     }
     shouldTreatBlockedMaxAsInvalid() {
         return false;
@@ -134,18 +99,14 @@ export class QtiOrderInteraction extends DragDropSlottedSortableMixin(SlottedBas
     async firstUpdated() {
         super.firstUpdated();
         this.childrenMap = Array.from(this.querySelectorAll('qti-simple-choice'));
-        this.childrenMap.forEach(el => el.setAttribute('part', 'qti-simple-choice'));
+        // `part="drag"` used to be stamped on the light-DOM originals here, purely so the clone would
+        // inherit it — a slotted chip's own `part` is unreachable. The mixin stamps the clone directly
+        // now, at the moment it makes it.
     }
 }
 __decorate([
     state()
 ], QtiOrderInteraction.prototype, "nrChoices", void 0);
-__decorate([
-    state()
-], QtiOrderInteraction.prototype, "correctResponses", void 0);
-__decorate([
-    state()
-], QtiOrderInteraction.prototype, "showCorrectResponses", void 0);
 __decorate([
     property({ type: String })
 ], QtiOrderInteraction.prototype, "orientation", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"qti-order-interaction.js","sourceRoot":"","sources":["../src/qti-order-interaction.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,oBAAoB,EACpB,4BAA4B,EAC7B,MAAM,gEAAgE,CAAC;AAExE,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAKpD,MAAM,WAAW,GAAG,oBAAoB,CAAC,WAAW,EAAE,mBAAmB,EAAE,WAAW,EAAE,oBAAoB,CAAC,CAAC;AAE9G,MAAM,OAAO,mBAAoB,SAAQ,4BAA4B,CAAC,WAAW,EAAE,wBAAwB,CAAC;IAA5G;;QAIqB,cAAS,GAAW,CAAC,CAAC;QAChC,qBAAgB,GAAa,EAAE,CAAC;QAChC,yBAAoB,GAAY,KAAK,CAAC;IAgJjD,CAAC;aArJiB,WAAM,GAAG,MAAM,AAAT,CAAU;IAWhC,uBAAuB;QACrB,MAAM,gBAAgB,GAAG,IAAI,CAAC,gBAAgB,CAAC;QAC/C,IAAI,CAAC,gBAAgB,EAAE,eAAe,EAAE,CAAC;YACvC,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,MAAM,QAAQ,GAAG,KAAK,CAAC,OAAO,CAAC,gBAAgB,CAAC,eAAe,CAAC;YAC9D,CAAC,CAAC,gBAAgB,CAAC,eAAe;YAClC,CAAC,CAAC,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAEvC,OAAO,QAAQ;aACZ,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE;YACpB,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;YAC9C,MAAM,eAAe,GAAG,MAAM,EAAE,UAAU,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,OAAO,CAAC,UAAU,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAC9G,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAC,eAAe,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,eAAe,CAAC;YAC1E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;QACnC,CAAC,CAAC;aACD,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;IAChD,CAAC;IAEQ,MAAM;QACb,MAAM,OAAO,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QACvE,IAAI,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,EAAE,CAAC;YACpC,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,MAAM,CAAC;QAClC,CAAC;QAED,OAAO,IAAI,CAAA;;;;YAIH,CAAC,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAC9B,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA,iEAAiE,CAAC,gBAAgB,CACjG;;aAEE,CAAC;IACZ,CAAC;IAEe,qBAAqB,CAAC,IAAa;QACjD,+CAA+C;QAC/C,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,iBAAiB,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC,CAAC;QAEvF,IAAI,IAAI,EAAE,CAAC;YACT,MAAM,OAAO,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;YAC/C,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAAkB,CAAC;YACrD,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;gBACtE,MAAM,EAAE,GAAG,MAAM,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;gBAC7C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAW,EAAE,IAAI,EAAE,CAAC;gBACzC,IAAI,EAAE,IAAI,KAAK,EAAE,CAAC;oBAChB,kBAAkB,CAAC,GAAG,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;gBACpC,CAAC;YACH,CAAC,CAAC,CAAC;YAEH,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,EAAE,EAAE;gBAC5C,MAAM,KAAK,GAAG,kBAAkB,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;gBACjD,IAAI,CAAC,KAAK;oBAAE,OAAO;gBAEnB,MAAM,YAAY,GAAG,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,iCAAiC,SAAS,IAAI,CAAC,CAAC;gBACnG,IAAI,CAAC,YAAY;oBAAE,OAAO;gBAE1B,MAAM,IAAI,GAAG,QAAQ,CAAC,aAAa,CAAC,MAAM,CAAC,CAAC;gBAC5C,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;gBACrC,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;gBACzB,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,8BAA8B,CAAC;gBACnD,IAAI,CAAC,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC;gBAChC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,SAAS,CAAC;gBAC/B,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,cAAc,CAAC;gBACpC,IAAI,CAAC,KAAK,CAAC,SAAS,GAAG,KAAK,CAAC;gBAE7B,YAAY,CAAC,qBAAqB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YACvD,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAEe,yBAAyB,CAAC,IAAa;QACrD,KAAK,CAAC,yBAAyB,CAAC,IAAI,CAAC,CAAC;QAEtC,MAAM,aAAa,GAAG,KAAK,CAAC,IAAI,CAC9B,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAkB,kCAAkC,CAAC,CACtF,CAAC;QACF,aAAa,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YAC7B,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC;YACpD,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;QACxD,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,IAAI;YAAE,OAAO;QAElB,MAAM,OAAO,GAAG,IAAI,CAAC,uBAAuB,EAAE,CAAC;QAC/C,MAAM,aAAa,GAAG,IAAI,GAAG,EAAkB,CAAC;QAChD,OAAO,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;QAE/E,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAc,WAAW,CAAC,CAAC,CAAC;QACzF,SAAS,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE;YACpC,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAkB,wBAAwB,CAAC,CAAC;YACvF,IAAI,CAAC,YAAY;gBAAE,OAAO;YAE1B,MAAM,kBAAkB,GAAG,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;YACpD,MAAM,gBAAgB,GAAG,YAAY,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC;YACjE,IAAI,kBAAkB,IAAI,gBAAgB,KAAK,kBAAkB,EAAE,CAAC;gBAClE,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YACzD,CAAC;iBAAM,CAAC;gBACN,YAAY,CAAC,SAAS,CAAC,MAAM,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED,iEAAiE;IACjE,oDAAoD;IACpD,sEAAsE;IACtE,kDAAkD;IAClD,QAAQ,CAAC,GAAa;QACpB,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC;IACvD,CAAC;IAED,iEAAiE;IACjE,oDAAoD;IACpD,sEAAsE;IACtE,kDAAkD;IAClD,0DAA0D;IAChD,WAAW;QACnB,MAAM,UAAU,GAAG,KAAK,CAAC,IAAI,CAAkB,IAAI,CAAC,UAAU,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;QAE9F,MAAM,QAAQ,GAAG,UAAU,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE;YAC1C,MAAM,gBAAgB,GAAG,SAAS,CAAC,gBAAgB,CAAC,wBAAwB,CAAC,CAAC;YAC9E,MAAM,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,YAAY,CAAC,CAAC,CAAC;YACxF,OAAO,CAAC,GAAG,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;QACpC,CAAC,CAAC,CAAC;QACH,OAAO,QAAQ,CAAC;IAClB,CAAC;IAEe,8BAA8B;QAC5C,OAAO,KAAK,CAAC;IACf,CAAC;IAEQ,KAAK,CAAC,YAAY;QACzB,KAAK,CAAC,YAAY,EAAE,CAAC;QACrB,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC,CAAC;QAC1E,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,YAAY,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAC,CAAC;IAC/E,CAAC;;AAjJkB;IAAlB,KAAK,EAAE;sDAAiC;AAChC;IAAR,KAAK,EAAE;6DAAiC;AAChC;IAAR,KAAK,EAAE;iEAAuC;AAIxC;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wDACmB","sourcesContent":["import { html } from 'lit';\nimport { property, 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\nimport styles from './qti-order-interaction.styles';\n\nimport type { PropertyValueMap } from 'lit';\nimport type { QtiSimpleChoice } from '@qti-components/interactions-core/elements/qti-simple-choice';\n\nconst SlottedBase = DragDropSlottedMixin(Interaction, `qti-simple-choice`, 'drop-list', `slot[part='drags']`);\n\nexport class QtiOrderInteraction extends DragDropSlottedSortableMixin(SlottedBase, '[qti-draggable=\"true\"]') {\n  static override styles = styles;\n  protected childrenMap: Element[];\n\n  @state() protected nrChoices: number = 0;\n  @state() correctResponses: string[] = [];\n  @state() showCorrectResponses: boolean = false;\n\n  /** orientation of choices */\n  @property({ type: String })\n  public orientation: 'horizontal' | 'vertical';\n\n  #getCorrectOrderEntries(): Array<{ identifier: string; dropIndex: number }> {\n    const responseVariable = this.responseVariable;\n    if (!responseVariable?.correctResponse) {\n      return [];\n    }\n\n    const response = Array.isArray(responseVariable.correctResponse)\n      ? responseVariable.correctResponse\n      : [responseVariable.correctResponse];\n\n    return response\n      .map((entry, index) => {\n        const [identifier, dropId] = entry.split(' ');\n        const parsedDropIndex = dropId?.startsWith('droplist') ? parseInt(dropId.replace('droplist', ''), 10) : index;\n        const dropIndex = Number.isNaN(parsedDropIndex) ? index : parsedDropIndex;\n        return { identifier, dropIndex };\n      })\n      .filter(entry => Boolean(entry.identifier));\n  }\n\n  override render() {\n    const choices = Array.from(this.querySelectorAll('qti-simple-choice'));\n    if (this.nrChoices < choices.length) {\n      this.nrChoices = choices.length;\n    }\n\n    return html` <slot name=\"prompt\"> </slot>\n      <div part=\"container\">\n        <slot part=\"drags\"> </slot>\n        <div part=\"drops\">\n          ${[...Array(this.nrChoices)].map(\n            (_, i) => html`<drop-list role=\"region\" part=\"drop-list\" identifier=\"droplist${i}\"></drop-list>`\n          )}\n        </div>\n      </div>`;\n  }\n\n  public override toggleCorrectResponse(show: boolean): void {\n    // Always start by removing old correct answers\n    this.shadowRoot.querySelectorAll('.correct-option').forEach(option => option.remove());\n\n    if (show) {\n      const entries = this.#getCorrectOrderEntries();\n      const labelsByIdentifier = new Map<string, string>();\n      Array.from(this.querySelectorAll('qti-simple-choice')).forEach(choice => {\n        const id = choice.getAttribute('identifier');\n        const label = choice.textContent?.trim();\n        if (id && label) {\n          labelsByIdentifier.set(id, label);\n        }\n      });\n\n      entries.forEach(({ identifier, dropIndex }) => {\n        const label = labelsByIdentifier.get(identifier);\n        if (!label) return;\n\n        const relativeDrop = this.shadowRoot.querySelector(`drop-list[identifier=\"droplist${dropIndex}\"]`);\n        if (!relativeDrop) return;\n\n        const span = document.createElement('span');\n        span.classList.add('correct-option');\n        span.textContent = label;\n        span.style.border = '1px solid var(--qti-correct)';\n        span.style.borderRadius = '4px';\n        span.style.padding = '2px 4px';\n        span.style.display = 'inline-block';\n        span.style.marginTop = '4px';\n\n        relativeDrop.insertAdjacentElement('afterend', span);\n      });\n    }\n  }\n\n  public override toggleCandidateCorrection(show: boolean): void {\n    super.toggleCandidateCorrection(show);\n\n    const placedChoices = Array.from(\n      this.shadowRoot.querySelectorAll<QtiSimpleChoice>('drop-list [qti-draggable=\"true\"]')\n    );\n    placedChoices.forEach(choice => {\n      choice.internals.states.delete('candidate-correct');\n      choice.internals.states.delete('candidate-incorrect');\n    });\n\n    if (!show) return;\n\n    const entries = this.#getCorrectOrderEntries();\n    const correctByDrop = new Map<number, string>();\n    entries.forEach(entry => correctByDrop.set(entry.dropIndex, entry.identifier));\n\n    const dropLists = Array.from(this.shadowRoot.querySelectorAll<HTMLElement>('drop-list'));\n    dropLists.forEach((dropList, index) => {\n      const placedChoice = dropList.querySelector<QtiSimpleChoice>('[qti-draggable=\"true\"]');\n      if (!placedChoice) return;\n\n      const expectedIdentifier = correctByDrop.get(index);\n      const actualIdentifier = placedChoice.getAttribute('identifier');\n      if (expectedIdentifier && actualIdentifier === expectedIdentifier) {\n        placedChoice.internals.states.add('candidate-correct');\n      } else {\n        placedChoice.internals.states.add('candidate-incorrect');\n      }\n    });\n  }\n\n  // some interactions have a different way of getting the response\n  // this is called from the drag and drop mixin class\n  // you have to implement your own getResponse method in the superclass\n  // cause they are different for some interactions.\n  getValue(val: string[]) {\n    return val?.map((v, i) => `${v} droplist${i}`) || [];\n  }\n\n  // some interactions have a different way of getting the response\n  // this is called from the drag and drop mixin class\n  // you have to implement your own getResponse method in the superclass\n  // cause they are different for some interactions.\n  // MH: is this function called? Shouldn't we use getValue?\n  protected getResponse(): string[] {\n    const droppables = Array.from<QtiSimpleChoice>(this.shadowRoot.querySelectorAll('drop-list'));\n\n    const response = droppables.map(droppable => {\n      const dragsInDroppable = droppable.querySelectorAll('[qti-draggable=\"true\"]');\n      const identifiers = Array.from(dragsInDroppable).map(d => d.getAttribute('identifier'));\n      return [...identifiers].join(' ');\n    });\n    return response;\n  }\n\n  public override shouldTreatBlockedMaxAsInvalid(): boolean {\n    return false;\n  }\n\n  override async firstUpdated() {\n    super.firstUpdated();\n    this.childrenMap = Array.from(this.querySelectorAll('qti-simple-choice'));\n    this.childrenMap.forEach(el => el.setAttribute('part', 'qti-simple-choice'));\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-order-interaction': QtiOrderInteraction;\n  }\n}\n"]}
+{"version":3,"file":"qti-order-interaction.js","sourceRoot":"","sources":["../src/qti-order-interaction.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { repeat } from 'lit/directives/repeat.js';\nimport { property, 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\nimport styles from './qti-order-interaction.styles';\n\nimport type { PropertyValueMap } from 'lit';\n\nconst SlottedBase = DragDropSlottedMixin(Interaction, `qti-simple-choice`, `[part~='drop']`, `slot[part~='drags']`);\n\n/**\n * Order interaction: candidates arrange choices into a target sequence.\n *\n * @customElement qti-order-interaction\n *\n * @attr {string} response-identifier - Required. Identifier of the bound response variable.\n * @attr {'horizontal'|'vertical'} [orientation=vertical] - Layout direction of the drop\n *   sequence. Unlike on `qti-choice-interaction`, QTI does not deprecate this for order.\n * @attr {boolean} [shuffle=false] - Requests choice shuffling. Applied by the transform\n *   pipeline (`qti-transformers`), not by this element.\n * @attr {number} [min-associations=1] - Non-QTI vocabulary inherited from the drag-drop\n *   mixin; currently the only way to set the lower bound. QTI spells this `min-choices`.\n * @attr {number} [max-associations=0] - Non-QTI vocabulary inherited from the drag-drop\n *   mixin; currently the only way to set the upper bound. QTI spells this `max-choices`.\n * @attr {number} min-choices - Not implemented. The QTI-correct spelling of the lower bound.\n *   See plans/interaction-attribute-spec-conformance.md.\n * @attr {number} max-choices - Not implemented. The QTI-correct spelling of the upper bound.\n *   See plans/interaction-attribute-spec-conformance.md.\n * @attr {boolean} [auto-size-dropzones=true] - Extension, not QTI. Sizes every drop target to\n *   the widest chip so placement does not reflow the layout. On by default: an order slot is a\n *   socket cut to one chip, and both axes are measured (see DROP-SIZING.md).\n * @attr {boolean} [disable-animations=false] - Extension, not QTI. Disables the FLIP move\n *   animation.\n *\n * @slot prompt - The prompt shown above the interaction.\n * @slot drags - The draggable choice sources.\n *\n * @csspart container - The outer container wrapping drags and drops.\n * @csspart drags - Wrapper around the drag sources slot.\n * @csspart drops - The drop-target region.\n * @csspart drop - Each individual drop target.\n * @csspart drag - A choice that has been placed into a drop target.\n */\nexport class QtiOrderInteraction extends DragDropSlottedSortableMixin(SlottedBase, '[qti-draggable=\"true\"]') {\n  static override styles = styles;\n  protected childrenMap: Element[];\n\n  @state() protected nrChoices: number = 0;\n\n  /** orientation of choices */\n  @property({ type: String })\n  public orientation: 'horizontal' | 'vertical';\n\n  override render() {\n    const choices = Array.from(this.querySelectorAll('qti-simple-choice'));\n    if (this.nrChoices < choices.length) {\n      this.nrChoices = choices.length;\n    }\n\n    return html` <slot name=\"prompt\"> </slot>\n      <div part=\"container\">\n        <slot part=\"drags\"> </slot>\n        <div part=\"drops\">\n          ${[...Array(this.nrChoices)].map((_, i) => {\n            const identifier = `droplist${i}`;\n            // The chips are rendered here, from the interaction's placement map, rather than being\n            // appended into this div by handleDrop. `data-declarative-drops` is what tells the\n            // mixin to keep them in the map and leave this element's children alone.\n            const drags = this._dragDrop?.nodesByTarget?.[identifier] ?? [];\n            return html`<div role=\"region\" part=\"drop\" data-declarative-drops identifier=${identifier}>\n              ${repeat(\n                drags,\n                node => node.getAttribute('identifier'),\n                node => node\n              )}\n            </div>`;\n          })}\n        </div>\n        <div id=\"validation-message\" part=\"message\" role=\"alert\" style=\"display:none;\"></div>\n      </div>`;\n  }\n\n  // some interactions have a different way of getting the response\n  // this is called from the drag and drop mixin class\n  // you have to implement your own getResponse method in the superclass\n  // cause they are different for some interactions.\n  getValue(val: string[]) {\n    return val?.map((v, i) => `${v} droplist${i}`) || [];\n  }\n\n  // some interactions have a different way of getting the response\n  // this is called from the drag and drop mixin class\n  // you have to implement your own getResponse method in the superclass\n  // cause they are different for some interactions.\n  // MH: is this function called? Shouldn't we use getValue?\n  protected getResponse(): string[] {\n    const droppables = Array.from<HTMLElement>(this.shadowRoot.querySelectorAll(`[part~='drop']`));\n\n    // Read placement, not the DOM. The DOM is rendered *from* placement now, so querying it back\n    // out would be asking the same question twice and hoping for the same answer.\n    return droppables.map(droppable =>\n      this.chipsIn(droppable)\n        .map(chip => chip.getAttribute('identifier'))\n        .join(' ')\n    );\n  }\n\n  public override shouldTreatBlockedMaxAsInvalid(): boolean {\n    return false;\n  }\n\n  override async firstUpdated() {\n    super.firstUpdated();\n    this.childrenMap = Array.from(this.querySelectorAll('qti-simple-choice'));\n    // `part=\"drag\"` used to be stamped on the light-DOM originals here, purely so the clone would\n    // inherit it — a slotted chip's own `part` is unreachable. The mixin stamps the clone directly\n    // now, at the moment it makes it.\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-order-interaction': QtiOrderInteraction;\n  }\n}\n"]}

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

@@ -1,2 +1,19 @@
-declare const _default: import("lit").CSSResult;
+/**
+ * Layout and sizing only. Paint and state live in the theme.
+ *
+ * What left, and where it went — `styles/qti-theme/interactions/qti-order-interaction.css` and
+ * `styles/overrides/kennisnet/qti/order-interaction.scss`:
+ *
+ *   [part~='drop'][active] / [enabled]     -> ::part(active) / ::part(enabled)
+ *   [part~='drop']:has([part='drag'])      -> ::part(filled)
+ *
+ * They had to be rewritten, not relocated: an attribute selector and `:has()` cannot follow
+ * `::part()`, so the drop's flags became part tokens (verified in Chromium, see setDropFlag).
+ *
+ * Two rules were deleted rather than moved, because neither did anything:
+ *   - `background-color: var(--qti-background-color-active-droplist)` — that property is never
+ *     defined anywhere in the repo, so the declaration was invalid at computed-value time.
+ *   - `[part~='drop'][data-cross-slot-target]` — nothing has ever set that attribute.
+ */
+declare const _default: import("lit").CSSResult[];
 export default _default;

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

@@ -1,85 +1,236 @@
 import { css } from 'lit';
-// import componentStyles from '../../utilities/styles/component.styles';
-// :host {
-//   display: inline-block;
-//   position: relative;
-// }
-/* ${componentStyles} */
-export default css `
-  [part='drags'] {
-    display: flex;
-    align-items: flex-start;
-    flex: 1;
-    flex-wrap: wrap;
-  }
-
-  [part='drops'] {
-    flex: 1;
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-  }
-
-  :host([orientation='horizontal']) [part='drags'] {
-    flex-direction: row;
-  }
-  :host([orientation='horizontal']) [part='drops'] {
-    grid-auto-flow: column;
-  }
-  :host([orientation='vertical']) [part='drags'] {
-    flex-direction: column;
-  }
-  :host([orientation='vertical']) [part='drops'] {
-    grid-auto-flow: row;
-  }
-
-  [part='drop-list'] {
-    display: block;
-    flex: 1;
-  }
-
-  [part='drop-list'][active] {
-    border-color: var(--qti-border-active) !important;
-    background-color: var(--qti-bg-active) !important;
-  }
-
-  [part='drop-list'][enabled] {
-    background-color: var(--qti-bg-active) !important;
-  }
-
-  [part='drop-list'][data-cross-slot-target] {
-    border-color: var(--qti-border-active, #0066cc) !important;
-    background-color: var(--qti-bg-active, rgba(0, 102, 204, 0.1)) !important;
-    outline: 2px dashed var(--qti-border-active, #0066cc);
-    outline-offset: -2px;
-  }
-
-  /* Candidate correction colors for choices placed inside drop-lists. */
-  drop-list [qti-draggable='true']:state(candidate-correct),
-  [part='qti-simple-choice']:state(candidate-correct) {
-    background-color: var(--qti-correct) !important;
-  }
-
-  drop-list [qti-draggable='true']:state(candidate-incorrect),
-  [part='qti-simple-choice']:state(candidate-incorrect) {
-    background-color: var(--qti-incorrect) !important;
-  }
-
-  [part='container'] {
-    display: flex;
-    gap: 0.5rem;
-  }
-  :host(.qti-choices-top) [part='container'] {
-    flex-direction: column;
-  }
-  :host(.qti-choices-bottom) [part='container'] {
-    flex-direction: column-reverse;
-  }
-  :host(.qti-choices-left) [part='container'] {
-    flex-direction: row;
-  }
-  :host(.qti-choices-right) [part='container'] {
-    flex-direction: row-reverse;
-  }
-`;
+import { boxSizing, dropRegion, validationMessage } from '@qti-components/base';
+/**
+ * Layout and sizing only. Paint and state live in the theme.
+ *
+ * What left, and where it went — `styles/qti-theme/interactions/qti-order-interaction.css` and
+ * `styles/overrides/kennisnet/qti/order-interaction.scss`:
+ *
+ *   [part~='drop'][active] / [enabled]     -> ::part(active) / ::part(enabled)
+ *   [part~='drop']:has([part='drag'])      -> ::part(filled)
+ *
+ * They had to be rewritten, not relocated: an attribute selector and `:has()` cannot follow
+ * `::part()`, so the drop's flags became part tokens (verified in Chromium, see setDropFlag).
+ *
+ * Two rules were deleted rather than moved, because neither did anything:
+ *   - `background-color: var(--qti-background-color-active-droplist)` — that property is never
+ *     defined anywhere in the repo, so the declaration was invalid at computed-value time.
+ *   - `[part~='drop'][data-cross-slot-target]` — nothing has ever set that attribute.
+ */
+export default [
+    boxSizing,
+    validationMessage,
+    dropRegion,
+    css `
+    /* The box this element already had. See the note in qti-match-interaction.styles.ts. */
+    :host {
+      display: block;
+    }
+
+    [part='drags'] {
+      display: flex;
+      align-items: flex-start;
+      flex: 1;
+      flex-wrap: wrap;
+    }
+
+    [part='drops'] {
+      flex: 1;
+      display: grid;
+      grid-auto-flow: row;
+      /*
+       * A column floor and a drop's own min-width are two jobs, and this asks for both by name
+       * rather than letting one token mean both. --qti-drop-track-min-width is the policy: a column
+       * stays usable however narrow the chips are. --qti-dropzone-min-width is the measurement: a
+       * column is never narrower than the chip it holds. max() of the two is what the grid wants,
+       * and the 0px fallback is what makes this correct for an interaction that never measures.
+       *
+       * One name did both until --qti-drop-min-width was deleted for exactly that (it meant the
+       * track floor here and a drop's own min-width in the match target). Folding the track back
+       * onto --qti-dropzone-min-width brought the conflation back: a theme setting it to give
+       * unmeasured drops a floor also set every column, and a code path that stopped publishing a
+       * measured width stopped meaning "no floor".
+       */
+      grid-template-columns: repeat(
+        auto-fit,
+        minmax(max(var(--qti-drop-track-min-width, 120px), var(--qti-dropzone-min-width, 0px)), 1fr)
+      );
+      gap: 0.5rem;
+    }
+
+    :host([orientation='horizontal']) [part='drags'],
+    :host(.qti-orientation-horizontal) [part='drags'] {
+      flex-direction: row;
+    }
+    /*
+     * Horizontal adds nothing to [part='drops']: the base rule above is already the horizontal
+     * layout — auto-fit columns that wrap. Only 'vertical' overrides it, to a single column.
+     *
+     * There used to be a 'grid-auto-flow: column' here, which forced every drop onto one
+     * non-wrapping line. The theme cancelled it by restating the base rule at
+     * qti-order-interaction.css, but only for '[orientation='horizontal']' — so the attribute
+     * wrapped and the '.qti-orientation-horizontal' class did not. The theme's rule is gone and so
+     * is this one; both spellings now wrap, which is what the attribute already did.
+     */
+    :host([orientation='vertical']) [part='drags'],
+    :host(.qti-orientation-vertical) [part='drags'] {
+      flex-direction: column;
+    }
+    :host([orientation='vertical']) [part='drops'],
+    :host(.qti-orientation-vertical) [part='drops'] {
+      grid-template-columns: 1fr;
+    }
+
+    /* Drop target. The interaction measures its chips and publishes the result as a custom
+     property on its host; the property itself lives here, not in a style attribute. */
+    [part~='drop'] {
+      display: flex;
+      flex: 1;
+      min-height: var(--qti-dropzone-min-height, 0);
+
+      /*
+       * Both axes, not just the height.
+       *
+       * The width was measured and published all along and then thrown away: the drop is a grid item
+       * and stretched to its track, which is 1fr, so a slot in the vertical layout came out 669px
+       * wide for a 149px chip. justify-self: start stops the stretch and the measured minimum then
+       * decides, so a slot is exactly as wide as the widest chip — the same rule the height has
+       * always followed.
+       *
+       * The grid is untouched: the tracks still lay the slots out and still wrap in the horizontal
+       * layout. Only the slot inside the track stops filling it.
+       */
+      min-width: var(--qti-dropzone-min-width, 0);
+      justify-self: start;
+
+      /* A chip's drop shadow hangs outside its column. */
+      overflow: visible;
+    }
+
+    [part='drops'] {
+      overflow: visible;
+    }
+
+    /* Once a drop holds a chip it stops stretching to the row and sits at the top of it. */
+    :host(:has(qti-simple-choice)) [part~='drop'] {
+      align-self: flex-start;
+    }
+
+    /*
+     * The chip a drop renders.
+     *
+     * 'overflow: visible', not 'hidden'. The theme declared both, in two '::part(drag)' blocks at
+     * equal specificity in the same layer, so the later one won and the chip has always been
+     * unclipped. The 'text-overflow: ellipsis' still sitting beside the first one has therefore
+     * never done anything; it is left in the theme rather than deleted here, since removing it is a
+     * decision about how a long label should behave, not a relocation.
+     */
+    [part~='drag'] {
+      display: flex;
+      align-items: center;
+      overflow: visible;
+    }
+
+    [part='container'] {
+      display: grid;
+      grid-template-areas:
+        'drags drops'
+        'message message';
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+      align-items: start;
+      gap: 0.5rem;
+    }
+
+    slot[part~='drags'] {
+      grid-area: drags;
+    }
+
+    [part='drops'] {
+      grid-area: drops;
+    }
+
+    [part='message'] {
+      grid-area: message;
+      width: 100%;
+      justify-self: start;
+    }
+
+    /*
+     * The PLATFORM DEFAULT for container positioning, when the orientation is horizontal.
+     *
+     * Read that carefully, because the two things are separate axes in QTI 3 and this rule does not
+     * merge them. Vocabulary §1.2.9.3 defines qti-choices-* as where the choices container sits
+     * relative to the order-target container; orientation is how items flow WITHIN a container.
+     * They compose: §1.2.9.2 Figure 73 is orientation="vertical" class="qti-choices-left" and
+     * renders two COLUMNS SIDE BY SIDE — vertical does not stack the containers, and horizontal does
+     * not imply that it should.
+     *
+     * What makes this rule legitimate is that §1.2.9.3 declines to specify the positioning at all
+     * when no class is given: "In the absence of choices | order target container positioning,
+     * delivery systems should render platform defaults." That default is ours, and for a horizontal
+     * flow the useful one is stacked, because a row needs the width. An author who wants something
+     * else says so with qti-choices-*, which is exactly what the spec provides it for — and those
+     * rules below still win (see the source-order note).
+     *
+     * Side by side used to work here anyway, but only because a slot could be narrower
+     * than the chip standing in it: the theme gave a placed chip width: 100%, so a 218px chip was
+     * squeezed into a 184px track and three of them fitted in half the width. That squeeze is gone
+     * (DROP-SIZING.md §5), and without it "van links naar rechts" collapsed to a single column,
+     * because 384px cannot hold two 218px chips.
+     *
+     * Measured on ITEM013: side by side gives the slots 384px and one 384px track; stacked gives them
+     * 800px and three 256px tracks, each wider than the chip. Vertical is untouched — one column is
+     * what it wants, and the split suits it.
+     *
+     * Deliberately BEFORE the qti-choices-* rules below, not after. Those tie on specificity, so
+     * source order decides: an author who writes qti-choices-left still gets it, and this is only the
+     * default for an orientation that has no such class.
+     */
+    :host([orientation='horizontal']) [part='container'],
+    :host(.qti-orientation-horizontal) [part='container'] {
+      grid-template-areas:
+        'drags'
+        'drops'
+        'message';
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    :host(.qti-choices-top) [part='container'] {
+      grid-template-areas:
+        'drags'
+        'drops'
+        'message';
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    :host(.qti-choices-bottom) [part='container'] {
+      grid-template-areas:
+        'drops'
+        'drags'
+        'message';
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    :host(.qti-choices-left) [part='container'] {
+      grid-template-areas:
+        'drags drops'
+        'message message';
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    :host(.qti-choices-right) [part='container'] {
+      grid-template-areas:
+        'drops drags'
+        'message message';
+      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
+    }
+
+    /* 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]) [part~='drags'] {
+      display: none;
+    }
+  `
+];
 //# sourceMappingURL=qti-order-interaction.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"qti-order-interaction.styles.js","sourceRoot":"","sources":["../src/qti-order-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,yEAAyE;AACzE,UAAU;AACV,2BAA2B;AAC3B,wBAAwB;AACxB,IAAI;AACJ,wBAAwB;AACxB,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4EjB,CAAC","sourcesContent":["import { css } from 'lit';\n// import componentStyles from '../../utilities/styles/component.styles';\n// :host {\n//   display: inline-block;\n//   position: relative;\n// }\n/* ${componentStyles} */\nexport default css`\n  [part='drags'] {\n    display: flex;\n    align-items: flex-start;\n    flex: 1;\n    flex-wrap: wrap;\n  }\n\n  [part='drops'] {\n    flex: 1;\n    display: grid;\n    grid-auto-flow: column;\n    grid-auto-columns: 1fr;\n  }\n\n  :host([orientation='horizontal']) [part='drags'] {\n    flex-direction: row;\n  }\n  :host([orientation='horizontal']) [part='drops'] {\n    grid-auto-flow: column;\n  }\n  :host([orientation='vertical']) [part='drags'] {\n    flex-direction: column;\n  }\n  :host([orientation='vertical']) [part='drops'] {\n    grid-auto-flow: row;\n  }\n\n  [part='drop-list'] {\n    display: block;\n    flex: 1;\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'][enabled] {\n    background-color: var(--qti-bg-active) !important;\n  }\n\n  [part='drop-list'][data-cross-slot-target] {\n    border-color: var(--qti-border-active, #0066cc) !important;\n    background-color: var(--qti-bg-active, rgba(0, 102, 204, 0.1)) !important;\n    outline: 2px dashed var(--qti-border-active, #0066cc);\n    outline-offset: -2px;\n  }\n\n  /* Candidate correction colors for choices placed inside drop-lists. */\n  drop-list [qti-draggable='true']:state(candidate-correct),\n  [part='qti-simple-choice']:state(candidate-correct) {\n    background-color: var(--qti-correct) !important;\n  }\n\n  drop-list [qti-draggable='true']:state(candidate-incorrect),\n  [part='qti-simple-choice']:state(candidate-incorrect) {\n    background-color: var(--qti-incorrect) !important;\n  }\n\n  [part='container'] {\n    display: flex;\n    gap: 0.5rem;\n  }\n  :host(.qti-choices-top) [part='container'] {\n    flex-direction: column;\n  }\n  :host(.qti-choices-bottom) [part='container'] {\n    flex-direction: column-reverse;\n  }\n  :host(.qti-choices-left) [part='container'] {\n    flex-direction: row;\n  }\n  :host(.qti-choices-right) [part='container'] {\n    flex-direction: row-reverse;\n  }\n`;\n"]}
+{"version":3,"file":"qti-order-interaction.styles.js","sourceRoot":"","sources":["../src/qti-order-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;;;;;;;;;;;;;;;;GAgBG;AACH,eAAe;IACb,SAAS;IACT,iBAAiB;IACjB,UAAU;IACV,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkNF;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 * What left, and where it went — `styles/qti-theme/interactions/qti-order-interaction.css` and\n * `styles/overrides/kennisnet/qti/order-interaction.scss`:\n *\n *   [part~='drop'][active] / [enabled]     -> ::part(active) / ::part(enabled)\n *   [part~='drop']:has([part='drag'])      -> ::part(filled)\n *\n * They had to be rewritten, not relocated: an attribute selector and `:has()` cannot follow\n * `::part()`, so the drop's flags became part tokens (verified in Chromium, see setDropFlag).\n *\n * Two rules were deleted rather than moved, because neither did anything:\n *   - `background-color: var(--qti-background-color-active-droplist)` — that property is never\n *     defined anywhere in the repo, so the declaration was invalid at computed-value time.\n *   - `[part~='drop'][data-cross-slot-target]` — nothing has ever set that attribute.\n */\nexport default [\n  boxSizing,\n  validationMessage,\n  dropRegion,\n  css`\n    /* The box this element already had. See the note in qti-match-interaction.styles.ts. */\n    :host {\n      display: block;\n    }\n\n    [part='drags'] {\n      display: flex;\n      align-items: flex-start;\n      flex: 1;\n      flex-wrap: wrap;\n    }\n\n    [part='drops'] {\n      flex: 1;\n      display: grid;\n      grid-auto-flow: row;\n      /*\n       * A column floor and a drop's own min-width are two jobs, and this asks for both by name\n       * rather than letting one token mean both. --qti-drop-track-min-width is the policy: a column\n       * stays usable however narrow the chips are. --qti-dropzone-min-width is the measurement: a\n       * column is never narrower than the chip it holds. max() of the two is what the grid wants,\n       * and the 0px fallback is what makes this correct for an interaction that never measures.\n       *\n       * One name did both until --qti-drop-min-width was deleted for exactly that (it meant the\n       * track floor here and a drop's own min-width in the match target). Folding the track back\n       * onto --qti-dropzone-min-width brought the conflation back: a theme setting it to give\n       * unmeasured drops a floor also set every column, and a code path that stopped publishing a\n       * measured width stopped meaning \"no floor\".\n       */\n      grid-template-columns: repeat(\n        auto-fit,\n        minmax(max(var(--qti-drop-track-min-width, 120px), var(--qti-dropzone-min-width, 0px)), 1fr)\n      );\n      gap: 0.5rem;\n    }\n\n    :host([orientation='horizontal']) [part='drags'],\n    :host(.qti-orientation-horizontal) [part='drags'] {\n      flex-direction: row;\n    }\n    /*\n     * Horizontal adds nothing to [part='drops']: the base rule above is already the horizontal\n     * layout — auto-fit columns that wrap. Only 'vertical' overrides it, to a single column.\n     *\n     * There used to be a 'grid-auto-flow: column' here, which forced every drop onto one\n     * non-wrapping line. The theme cancelled it by restating the base rule at\n     * qti-order-interaction.css, but only for '[orientation='horizontal']' — so the attribute\n     * wrapped and the '.qti-orientation-horizontal' class did not. The theme's rule is gone and so\n     * is this one; both spellings now wrap, which is what the attribute already did.\n     */\n    :host([orientation='vertical']) [part='drags'],\n    :host(.qti-orientation-vertical) [part='drags'] {\n      flex-direction: column;\n    }\n    :host([orientation='vertical']) [part='drops'],\n    :host(.qti-orientation-vertical) [part='drops'] {\n      grid-template-columns: 1fr;\n    }\n\n    /* Drop target. The interaction measures its chips and publishes the result as a custom\n     property on its host; the property itself lives here, not in a style attribute. */\n    [part~='drop'] {\n      display: flex;\n      flex: 1;\n      min-height: var(--qti-dropzone-min-height, 0);\n\n      /*\n       * Both axes, not just the height.\n       *\n       * The width was measured and published all along and then thrown away: the drop is a grid item\n       * and stretched to its track, which is 1fr, so a slot in the vertical layout came out 669px\n       * wide for a 149px chip. justify-self: start stops the stretch and the measured minimum then\n       * decides, so a slot is exactly as wide as the widest chip — the same rule the height has\n       * always followed.\n       *\n       * The grid is untouched: the tracks still lay the slots out and still wrap in the horizontal\n       * layout. Only the slot inside the track stops filling it.\n       */\n      min-width: var(--qti-dropzone-min-width, 0);\n      justify-self: start;\n\n      /* A chip's drop shadow hangs outside its column. */\n      overflow: visible;\n    }\n\n    [part='drops'] {\n      overflow: visible;\n    }\n\n    /* Once a drop holds a chip it stops stretching to the row and sits at the top of it. */\n    :host(:has(qti-simple-choice)) [part~='drop'] {\n      align-self: flex-start;\n    }\n\n    /*\n     * The chip a drop renders.\n     *\n     * 'overflow: visible', not 'hidden'. The theme declared both, in two '::part(drag)' blocks at\n     * equal specificity in the same layer, so the later one won and the chip has always been\n     * unclipped. The 'text-overflow: ellipsis' still sitting beside the first one has therefore\n     * never done anything; it is left in the theme rather than deleted here, since removing it is a\n     * decision about how a long label should behave, not a relocation.\n     */\n    [part~='drag'] {\n      display: flex;\n      align-items: center;\n      overflow: visible;\n    }\n\n    [part='container'] {\n      display: grid;\n      grid-template-areas:\n        'drags drops'\n        'message message';\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n      align-items: start;\n      gap: 0.5rem;\n    }\n\n    slot[part~='drags'] {\n      grid-area: drags;\n    }\n\n    [part='drops'] {\n      grid-area: drops;\n    }\n\n    [part='message'] {\n      grid-area: message;\n      width: 100%;\n      justify-self: start;\n    }\n\n    /*\n     * The PLATFORM DEFAULT for container positioning, when the orientation is horizontal.\n     *\n     * Read that carefully, because the two things are separate axes in QTI 3 and this rule does not\n     * merge them. Vocabulary §1.2.9.3 defines qti-choices-* as where the choices container sits\n     * relative to the order-target container; orientation is how items flow WITHIN a container.\n     * They compose: §1.2.9.2 Figure 73 is orientation=\"vertical\" class=\"qti-choices-left\" and\n     * renders two COLUMNS SIDE BY SIDE — vertical does not stack the containers, and horizontal does\n     * not imply that it should.\n     *\n     * What makes this rule legitimate is that §1.2.9.3 declines to specify the positioning at all\n     * when no class is given: \"In the absence of choices | order target container positioning,\n     * delivery systems should render platform defaults.\" That default is ours, and for a horizontal\n     * flow the useful one is stacked, because a row needs the width. An author who wants something\n     * else says so with qti-choices-*, which is exactly what the spec provides it for — and those\n     * rules below still win (see the source-order note).\n     *\n     * Side by side used to work here anyway, but only because a slot could be narrower\n     * than the chip standing in it: the theme gave a placed chip width: 100%, so a 218px chip was\n     * squeezed into a 184px track and three of them fitted in half the width. That squeeze is gone\n     * (DROP-SIZING.md §5), and without it \"van links naar rechts\" collapsed to a single column,\n     * because 384px cannot hold two 218px chips.\n     *\n     * Measured on ITEM013: side by side gives the slots 384px and one 384px track; stacked gives them\n     * 800px and three 256px tracks, each wider than the chip. Vertical is untouched — one column is\n     * what it wants, and the split suits it.\n     *\n     * Deliberately BEFORE the qti-choices-* rules below, not after. Those tie on specificity, so\n     * source order decides: an author who writes qti-choices-left still gets it, and this is only the\n     * default for an orientation that has no such class.\n     */\n    :host([orientation='horizontal']) [part='container'],\n    :host(.qti-orientation-horizontal) [part='container'] {\n      grid-template-areas:\n        'drags'\n        'drops'\n        'message';\n      grid-template-columns: minmax(0, 1fr);\n    }\n\n    :host(.qti-choices-top) [part='container'] {\n      grid-template-areas:\n        'drags'\n        'drops'\n        'message';\n      grid-template-columns: minmax(0, 1fr);\n    }\n\n    :host(.qti-choices-bottom) [part='container'] {\n      grid-template-areas:\n        'drops'\n        'drags'\n        'message';\n      grid-template-columns: minmax(0, 1fr);\n    }\n\n    :host(.qti-choices-left) [part='container'] {\n      grid-template-areas:\n        'drags drops'\n        'message message';\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\n    }\n\n    :host(.qti-choices-right) [part='container'] {\n      grid-template-areas:\n        'drops drags'\n        'message message';\n      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);\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]) [part~='drags'] {\n      display: none;\n    }\n  `\n];\n"]}

package/dist/register.js

@@ -1,3 +1,7 @@
-import { QtiOrderInteraction } from './qti-order-interaction';
-customElements.define('qti-order-interaction', QtiOrderInteraction);
+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,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAC9D,cAAc,CAAC,MAAM,CAAC,uBAAuB,EAAE,mBAAmB,CAAC,CAAC","sourcesContent":["import { QtiOrderInteraction } from './qti-order-interaction';\ncustomElements.define('qti-order-interaction', QtiOrderInteraction);\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,11 +1,11 @@
 {
   "name": "@qti-components/order-interaction",
   "description": "QTI order-interaction interaction",
-  "version": "1.1.4",
+  "version": "2.0.0",
   "author": "",
   "dependencies": {
-    "@qti-components/base": "^1.4.3",
-    "@qti-components/interactions-core": "^1.1.4",
+    "@qti-components/base": "^2.0.0",
+    "@qti-components/interactions-core": "^2.0.0",
     "@qti-components/utilities": "^1.3.3"
   },
   "devDependencies": {
@@ -45,6 +45,10 @@
     "./styles": {
       "types": "./dist/qti-order-interaction.styles.d.ts",
       "import": "./dist/qti-order-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"
   }
 }