@qti-components/choice-interaction 1.1.3 → 1.1.5

package/dist/elements.d.ts

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

package/dist/elements.js

@@ -0,0 +1,4 @@
+import { QtiChoiceInteraction } from './qti-choice-interaction';
+export const elements = [{ tag: 'qti-choice-interaction', ctor: QtiChoiceInteraction }];
+export { QtiChoiceInteraction };
+//# 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,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,GAAG,EAAE,wBAAwB,EAAE,IAAI,EAAE,oBAAoB,EAAE,CAAU,CAAC;AAEjG,OAAO,EAAE,oBAAoB,EAAE,CAAC","sourcesContent":["import { QtiChoiceInteraction } from './qti-choice-interaction';\n\nexport const elements = [{ tag: 'qti-choice-interaction', ctor: QtiChoiceInteraction }] as const;\n\nexport { QtiChoiceInteraction };\n"]}

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

@@ -3,6 +3,28 @@ import type { ChoicesInterface } from '@qti-components/interactions-core/mixins/
 import type { CSSResultGroup } from 'lit';
 export type Orientation = 'horizontal' | 'vertical' | undefined;
 declare const QtiChoiceInteraction_base: (abstract new (...args: any[]) => {}) & (abstract new (...args: any[]) => ChoicesInterface) & typeof Interaction;
+/**
+ * A single-response or multiple-response choice interaction.
+ *
+ * @customElement qti-choice-interaction
+ *
+ * @attr {string} response-identifier - Required. Identifier of the bound response variable.
+ * @attr {number} [max-choices=1] - Maximum selectable choices. `1` is a single-response
+ *   item; `0` means unlimited and makes it a multiple-response item.
+ * @attr {number} [min-choices=0] - Minimum selectable choices for a valid response.
+ * @attr {'horizontal'|'vertical'} [orientation=vertical] - Deprecated by QTI in favour of
+ *   the `qti-orientation-*` class vocabulary.
+ * @attr {boolean} [shuffle=false] - Requests choice shuffling. Applied by the transform
+ *   pipeline (`qti-transformers`), not by this element.
+ * @attr {'qti-orientation-horizontal'|'qti-orientation-vertical'|'qti-choices-stacking-1'|'qti-choices-stacking-2'|'qti-choices-stacking-3'|'qti-choices-stacking-4'|'qti-choices-stacking-5'|'qti-labels-none'|'qti-labels-decimal'|'qti-labels-lower-alpha'|'qti-labels-upper-alpha'|'qti-labels-suffix-none'|'qti-labels-suffix-period'|'qti-labels-suffix-parenthesis'|'qti-input-control-hidden'} class - QTI shared presentation vocabulary. Space-separated; takes precedence over `orientation`.
+ *
+ * @slot prompt - The prompt shown above the choices.
+ * @slot - Default slot for `qti-simple-choice` elements.
+ *
+ * @csspart prompt - Wrapper around the prompt slot.
+ * @csspart slot - Wrapper around the default slot containing the choices.
+ * @csspart message - Live validation message region (role="alert").
+ */
 export declare class QtiChoiceInteraction extends QtiChoiceInteraction_base implements ChoicesInterface {
     #private;
     static styles: CSSResultGroup;

package/dist/qti-choice-interaction.js

@@ -10,6 +10,28 @@ import { Interaction } from '@qti-components/base';
 import { ChoicesMixin } from '@qti-components/interactions-core/mixins/choices/choices.mixin';
 import { VocabularyMixin } from '@qti-components/interactions-core/mixins/vocabulary/vocabulary-mixin';
 import styles from './qti-choice-interaction.styles';
+/**
+ * A single-response or multiple-response choice interaction.
+ *
+ * @customElement qti-choice-interaction
+ *
+ * @attr {string} response-identifier - Required. Identifier of the bound response variable.
+ * @attr {number} [max-choices=1] - Maximum selectable choices. `1` is a single-response
+ *   item; `0` means unlimited and makes it a multiple-response item.
+ * @attr {number} [min-choices=0] - Minimum selectable choices for a valid response.
+ * @attr {'horizontal'|'vertical'} [orientation=vertical] - Deprecated by QTI in favour of
+ *   the `qti-orientation-*` class vocabulary.
+ * @attr {boolean} [shuffle=false] - Requests choice shuffling. Applied by the transform
+ *   pipeline (`qti-transformers`), not by this element.
+ * @attr {'qti-orientation-horizontal'|'qti-orientation-vertical'|'qti-choices-stacking-1'|'qti-choices-stacking-2'|'qti-choices-stacking-3'|'qti-choices-stacking-4'|'qti-choices-stacking-5'|'qti-labels-none'|'qti-labels-decimal'|'qti-labels-lower-alpha'|'qti-labels-upper-alpha'|'qti-labels-suffix-none'|'qti-labels-suffix-period'|'qti-labels-suffix-parenthesis'|'qti-input-control-hidden'} class - QTI shared presentation vocabulary. Space-separated; takes precedence over `orientation`.
+ *
+ * @slot prompt - The prompt shown above the choices.
+ * @slot - Default slot for `qti-simple-choice` elements.
+ *
+ * @csspart prompt - Wrapper around the prompt slot.
+ * @csspart slot - Wrapper around the default slot containing the choices.
+ * @csspart message - Live validation message region (role="alert").
+ */
 export class QtiChoiceInteraction extends VocabularyMixin(ChoicesMixin(Interaction, 'qti-simple-choice'), 'qti-simple-choice') {
     constructor() {
         super(...arguments);

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

@@ -1 +1 @@
-{"version":3,"file":"qti-choice-interaction.js","sourceRoot":"","sources":["../src/qti-choice-interaction.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAC9F,OAAO,EAAE,eAAe,EAAE,MAAM,sEAAsE,CAAC;AAEvG,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAMrD,MAAM,OAAO,oBACX,SAAQ,eAAe,CAAC,YAAY,CAAC,WAAW,EAAE,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAD9F;;QAME,0FAA0F;QAEnF,gBAAW,GAAgB,UAAU,CAAC;IAe/C,CAAC;aAnBiB,WAAM,GAAmB,MAAM,AAAzB,CAA0B;IAMhD,iBAAiB;QACf,4EAA4E;QAC5E,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAC3D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpE,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;sCAEuB,IAAI,CAAC,iBAAiB;;KAEvD,CAAC;IACJ,CAAC;;AAdM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { Interaction } from '@qti-components/base';\nimport { ChoicesMixin } from '@qti-components/interactions-core/mixins/choices/choices.mixin';\nimport { VocabularyMixin } from '@qti-components/interactions-core/mixins/vocabulary/vocabulary-mixin';\n\nimport styles from './qti-choice-interaction.styles';\n\nimport type { ChoicesInterface } from '@qti-components/interactions-core/mixins/choices/choices.mixin';\nimport type { CSSResultGroup } from 'lit';\n\nexport type Orientation = 'horizontal' | 'vertical' | undefined;\nexport class QtiChoiceInteraction\n  extends VocabularyMixin(ChoicesMixin(Interaction, 'qti-simple-choice'), 'qti-simple-choice')\n  implements ChoicesInterface\n{\n  static override styles: CSSResultGroup = styles;\n\n  /** @deprecated, use 'qti-orientation-horizontal' or 'qti-orientation-vertical' instead */\n  @property({ type: String })\n  public orientation: Orientation = 'vertical';\n\n  #handleSlotChange() {\n    // count the number of choices, set a css variable for the number of choices\n    const choices = this.querySelectorAll('qti-simple-choice');\n    this.style.setProperty('--item-count', choices.length.toString());\n  }\n\n  override render() {\n    return html`\n      <slot part=\"prompt\" name=\"prompt\"></slot>\n      <slot part=\"slot\" @slotchange=${this.#handleSlotChange}></slot>\n      <div part=\"message\" role=\"alert\" id=\"validation-message\"></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-choice-interaction': QtiChoiceInteraction;\n  }\n}\n"]}
+{"version":3,"file":"qti-choice-interaction.js","sourceRoot":"","sources":["../src/qti-choice-interaction.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAC3B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAE7C,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,gEAAgE,CAAC;AAC9F,OAAO,EAAE,eAAe,EAAE,MAAM,sEAAsE,CAAC;AAEvG,OAAO,MAAM,MAAM,iCAAiC,CAAC;AAOrD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,OAAO,oBACX,SAAQ,eAAe,CAAC,YAAY,CAAC,WAAW,EAAE,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAD9F;;QAME,0FAA0F;QAEnF,gBAAW,GAAgB,UAAU,CAAC;IAe/C,CAAC;aAnBiB,WAAM,GAAmB,MAAM,AAAzB,CAA0B;IAMhD,iBAAiB;QACf,4EAA4E;QAC5E,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,CAAC,mBAAmB,CAAC,CAAC;QAC3D,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,cAAc,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;IACpE,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;sCAEuB,IAAI,CAAC,iBAAiB;;KAEvD,CAAC;IACJ,CAAC;;AAdM;IADN,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yDACkB","sourcesContent":["import { html } from 'lit';\nimport { property } from 'lit/decorators.js';\n\nimport { Interaction } from '@qti-components/base';\nimport { ChoicesMixin } from '@qti-components/interactions-core/mixins/choices/choices.mixin';\nimport { VocabularyMixin } from '@qti-components/interactions-core/mixins/vocabulary/vocabulary-mixin';\n\nimport styles from './qti-choice-interaction.styles';\n\nimport type { ChoicesInterface } from '@qti-components/interactions-core/mixins/choices/choices.mixin';\nimport type { CSSResultGroup } from 'lit';\n\nexport type Orientation = 'horizontal' | 'vertical' | undefined;\n\n/**\n * A single-response or multiple-response choice interaction.\n *\n * @customElement qti-choice-interaction\n *\n * @attr {string} response-identifier - Required. Identifier of the bound response variable.\n * @attr {number} [max-choices=1] - Maximum selectable choices. `1` is a single-response\n *   item; `0` means unlimited and makes it a multiple-response item.\n * @attr {number} [min-choices=0] - Minimum selectable choices for a valid response.\n * @attr {'horizontal'|'vertical'} [orientation=vertical] - Deprecated by QTI in favour of\n *   the `qti-orientation-*` class vocabulary.\n * @attr {boolean} [shuffle=false] - Requests choice shuffling. Applied by the transform\n *   pipeline (`qti-transformers`), not by this element.\n * @attr {'qti-orientation-horizontal'|'qti-orientation-vertical'|'qti-choices-stacking-1'|'qti-choices-stacking-2'|'qti-choices-stacking-3'|'qti-choices-stacking-4'|'qti-choices-stacking-5'|'qti-labels-none'|'qti-labels-decimal'|'qti-labels-lower-alpha'|'qti-labels-upper-alpha'|'qti-labels-suffix-none'|'qti-labels-suffix-period'|'qti-labels-suffix-parenthesis'|'qti-input-control-hidden'} class - QTI shared presentation vocabulary. Space-separated; takes precedence over `orientation`.\n *\n * @slot prompt - The prompt shown above the choices.\n * @slot - Default slot for `qti-simple-choice` elements.\n *\n * @csspart prompt - Wrapper around the prompt slot.\n * @csspart slot - Wrapper around the default slot containing the choices.\n * @csspart message - Live validation message region (role=\"alert\").\n */\nexport class QtiChoiceInteraction\n  extends VocabularyMixin(ChoicesMixin(Interaction, 'qti-simple-choice'), 'qti-simple-choice')\n  implements ChoicesInterface\n{\n  static override styles: CSSResultGroup = styles;\n\n  /** @deprecated, use 'qti-orientation-horizontal' or 'qti-orientation-vertical' instead */\n  @property({ type: String })\n  public orientation: Orientation = 'vertical';\n\n  #handleSlotChange() {\n    // count the number of choices, set a css variable for the number of choices\n    const choices = this.querySelectorAll('qti-simple-choice');\n    this.style.setProperty('--item-count', choices.length.toString());\n  }\n\n  override render() {\n    return html`\n      <slot part=\"prompt\" name=\"prompt\"></slot>\n      <slot part=\"slot\" @slotchange=${this.#handleSlotChange}></slot>\n      <div part=\"message\" role=\"alert\" id=\"validation-message\"></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-choice-interaction': QtiChoiceInteraction;\n  }\n}\n"]}

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

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

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

@@ -1,116 +1,75 @@
 import { css } from 'lit';
-export default css `
-  :host {
-    display: block;
-  }
+import { boxSizing, validationMessage } from '@qti-components/base';
+export default [
+    boxSizing,
+    validationMessage,
+    css `
+    :host {
+      display: block;
+    }
 
-  [part='slot'] {
-    display: grid;
-    gap: 10px;
-  }
+    [part='slot'] {
+      display: grid;
+      gap: 10px;
+    }
 
-  /* Define the number of columns dynamically */
-  :host([class*='qti-choices-stacking-']) [part='slot'] {
-    grid-template-columns: repeat(var(--stacking-count, 1), 1fr);
-  }
+    /* Define the number of columns dynamically */
+    :host([class*='qti-choices-stacking-']) [part='slot'] {
+      grid-template-columns: repeat(var(--stacking-count, 1), 1fr);
+    }
 
-  /* Apply dynamic stacking count based on class */
-  :host(.qti-choices-stacking-1) {
-    --stacking-count: 1;
-  }
-  :host(.qti-choices-stacking-2) {
-    --stacking-count: 2;
-  }
-  :host(.qti-choices-stacking-3) {
-    --stacking-count: 3;
-  }
-  :host(.qti-choices-stacking-4) {
-    --stacking-count: 4;
-  }
-  :host(.qti-choices-stacking-5) {
-    --stacking-count: 5;
-  }
-  :host(.qti-choices-stacking-6) {
-    --stacking-count: 6;
-  }
+    /* Apply dynamic stacking count based on class */
+    :host(.qti-choices-stacking-1) {
+      --stacking-count: 1;
+    }
+    :host(.qti-choices-stacking-2) {
+      --stacking-count: 2;
+    }
+    :host(.qti-choices-stacking-3) {
+      --stacking-count: 3;
+    }
+    :host(.qti-choices-stacking-4) {
+      --stacking-count: 4;
+    }
+    :host(.qti-choices-stacking-5) {
+      --stacking-count: 5;
+    }
 
-  /* Default slot item layout */
-  ::slotted(qti-simple-choice) {
-    display: flex;
-    align-items: center;
-    white-space: normal;
-  }
+    /* Default slot item layout */
+    ::slotted(qti-simple-choice) {
+      display: flex;
+      align-items: center;
+      white-space: normal;
+    }
 
-  /* Orientation styles */
-  :host(.qti-orientation-horizontal) [part='slot'] {
-    grid-auto-flow: dense column;
-    grid-auto-columns: 1fr;
-  }
+    /* Orientation styles */
+    :host(.qti-orientation-horizontal) [part='slot'] {
+      grid-auto-flow: dense column;
+      grid-auto-columns: 1fr;
+    }
 
-  :host(.qti-orientation-vertical) [part='slot'] {
-    grid-auto-flow: row;
-  }
+    :host(.qti-orientation-vertical) [part='slot'] {
+      grid-auto-flow: row;
+    }
 
-  /* Vertical and horizontal stacking logic */
-  :host(.qti-orientation-vertical[class*='qti-choices-stacking-']) [part='slot'] {
-    grid-auto-flow: dense column;
-    grid-auto-columns: 1fr;
-    grid-template-columns: repeat(var(--stacking-count), 1fr);
-    grid-template-rows: repeat(calc(var(--item-count) / var(--stacking-count)), 1fr);
-  }
+    /* Vertical and horizontal stacking logic */
+    :host(.qti-orientation-vertical[class*='qti-choices-stacking-']) [part='slot'] {
+      grid-auto-flow: dense column;
+      grid-auto-columns: 1fr;
+      grid-template-columns: repeat(var(--stacking-count), 1fr);
+      grid-template-rows: repeat(calc(var(--item-count) / var(--stacking-count)), 1fr);
+    }
 
-  :host(.qti-orientation-horizontal[class*='qti-choices-stacking-']) [part='slot'] {
-    grid-auto-flow: row;
-    grid-template-columns: repeat(var(--stacking-count), 1fr);
-    grid-template-rows: unset;
-  }
+    :host(.qti-orientation-horizontal[class*='qti-choices-stacking-']) [part='slot'] {
+      grid-auto-flow: row;
+      grid-template-columns: repeat(var(--stacking-count), 1fr);
+      grid-template-rows: unset;
+    }
 
-  /* Ensure even distribution in vertical mode */
-  :host(.qti-orientation-vertical) ::slotted(qti-simple-choice:nth-child(even)) {
-    grid-row: auto;
-  }
-`;
-// export default css`
-//   [part='slot'] {
-//     display: flex;
-//     flex-direction: column;
-//     gap: var(--qti-gap-size);
-//     flex-wrap: wrap;
-//   }
-//   ::slotted(qti-simple-choice) {
-//     flex: 0 0
-//       calc((100% - (var(--qti-gap-size) * var(--choice-interactions-stacking))) / var(--choice-interactions-stacking)) !important;
-//     box-sizing: border-box !important;
-//   }
-//   :host(.qti-choices-stacking-1) [part='slot'] {
-//     flex-direction: row;
-//     --choice-interactions-stacking: 1;
-//   }
-//   :host(.qti-choices-stacking-2) [part='slot'] {
-//     flex-direction: row;
-//     --choice-interactions-stacking: 2;
-//   }
-//   :host(.qti-choices-stacking-3) [part='slot'] {
-//     flex-direction: row;
-//     --choice-interactions-stacking: 3;
-//   }
-//   :host(.qti-choices-stacking-4) [part='slot'] {
-//     flex-direction: row;
-//     --choice-interactions-stacking: 4;
-//   }
-//   :host(.qti-choices-stacking-5) [part='slot'] {
-//     flex-direction: row;
-//     --choice-interactions-stacking: 5;
-//   }
-//   :host([orientation='horizontal']) [part='slot'] {
-//     flex-direction: row;
-//   }
-//   :host(.qti-orientation-horizontal) [part='slot'] {
-//     flex-direction: row;
-//     flex-wrap: nowrap;
-//   }
-//   :host(.qti-orientation-horizontal) ::slotted(qti-simple-choice) {
-//     flex: 1 1 auto !important;
-//   }
-// `;
+    /* Ensure even distribution in vertical mode */
+    :host(.qti-orientation-vertical) ::slotted(qti-simple-choice:nth-child(even)) {
+      grid-row: auto;
+    }
+  `
+];
 //# sourceMappingURL=qti-choice-interaction.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"qti-choice-interaction.styles.js","sourceRoot":"","sources":["../src/qti-choice-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsEjB,CAAC;AAEF,sBAAsB;AACtB,oBAAoB;AACpB,qBAAqB;AACrB,8BAA8B;AAC9B,gCAAgC;AAChC,uBAAuB;AACvB,MAAM;AAEN,mCAAmC;AACnC,gBAAgB;AAChB,qIAAqI;AACrI,yCAAyC;AACzC,MAAM;AAEN,mDAAmD;AACnD,2BAA2B;AAC3B,yCAAyC;AACzC,MAAM;AAEN,mDAAmD;AACnD,2BAA2B;AAC3B,yCAAyC;AACzC,MAAM;AACN,mDAAmD;AACnD,2BAA2B;AAC3B,yCAAyC;AACzC,MAAM;AACN,mDAAmD;AACnD,2BAA2B;AAC3B,yCAAyC;AACzC,MAAM;AACN,mDAAmD;AACnD,2BAA2B;AAC3B,yCAAyC;AACzC,MAAM;AACN,sDAAsD;AACtD,2BAA2B;AAC3B,MAAM;AAEN,uDAAuD;AACvD,2BAA2B;AAC3B,yBAAyB;AACzB,MAAM;AAEN,sEAAsE;AACtE,iCAAiC;AACjC,MAAM;AACN,KAAK","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  :host {\n    display: block;\n  }\n\n  [part='slot'] {\n    display: grid;\n    gap: 10px;\n  }\n\n  /* Define the number of columns dynamically */\n  :host([class*='qti-choices-stacking-']) [part='slot'] {\n    grid-template-columns: repeat(var(--stacking-count, 1), 1fr);\n  }\n\n  /* Apply dynamic stacking count based on class */\n  :host(.qti-choices-stacking-1) {\n    --stacking-count: 1;\n  }\n  :host(.qti-choices-stacking-2) {\n    --stacking-count: 2;\n  }\n  :host(.qti-choices-stacking-3) {\n    --stacking-count: 3;\n  }\n  :host(.qti-choices-stacking-4) {\n    --stacking-count: 4;\n  }\n  :host(.qti-choices-stacking-5) {\n    --stacking-count: 5;\n  }\n  :host(.qti-choices-stacking-6) {\n    --stacking-count: 6;\n  }\n\n  /* Default slot item layout */\n  ::slotted(qti-simple-choice) {\n    display: flex;\n    align-items: center;\n    white-space: normal;\n  }\n\n  /* Orientation styles */\n  :host(.qti-orientation-horizontal) [part='slot'] {\n    grid-auto-flow: dense column;\n    grid-auto-columns: 1fr;\n  }\n\n  :host(.qti-orientation-vertical) [part='slot'] {\n    grid-auto-flow: row;\n  }\n\n  /* Vertical and horizontal stacking logic */\n  :host(.qti-orientation-vertical[class*='qti-choices-stacking-']) [part='slot'] {\n    grid-auto-flow: dense column;\n    grid-auto-columns: 1fr;\n    grid-template-columns: repeat(var(--stacking-count), 1fr);\n    grid-template-rows: repeat(calc(var(--item-count) / var(--stacking-count)), 1fr);\n  }\n\n  :host(.qti-orientation-horizontal[class*='qti-choices-stacking-']) [part='slot'] {\n    grid-auto-flow: row;\n    grid-template-columns: repeat(var(--stacking-count), 1fr);\n    grid-template-rows: unset;\n  }\n\n  /* Ensure even distribution in vertical mode */\n  :host(.qti-orientation-vertical) ::slotted(qti-simple-choice:nth-child(even)) {\n    grid-row: auto;\n  }\n`;\n\n// export default css`\n//   [part='slot'] {\n//     display: flex;\n//     flex-direction: column;\n//     gap: var(--qti-gap-size);\n//     flex-wrap: wrap;\n//   }\n\n//   ::slotted(qti-simple-choice) {\n//     flex: 0 0\n//       calc((100% - (var(--qti-gap-size) * var(--choice-interactions-stacking))) / var(--choice-interactions-stacking)) !important;\n//     box-sizing: border-box !important;\n//   }\n\n//   :host(.qti-choices-stacking-1) [part='slot'] {\n//     flex-direction: row;\n//     --choice-interactions-stacking: 1;\n//   }\n\n//   :host(.qti-choices-stacking-2) [part='slot'] {\n//     flex-direction: row;\n//     --choice-interactions-stacking: 2;\n//   }\n//   :host(.qti-choices-stacking-3) [part='slot'] {\n//     flex-direction: row;\n//     --choice-interactions-stacking: 3;\n//   }\n//   :host(.qti-choices-stacking-4) [part='slot'] {\n//     flex-direction: row;\n//     --choice-interactions-stacking: 4;\n//   }\n//   :host(.qti-choices-stacking-5) [part='slot'] {\n//     flex-direction: row;\n//     --choice-interactions-stacking: 5;\n//   }\n//   :host([orientation='horizontal']) [part='slot'] {\n//     flex-direction: row;\n//   }\n\n//   :host(.qti-orientation-horizontal) [part='slot'] {\n//     flex-direction: row;\n//     flex-wrap: nowrap;\n//   }\n\n//   :host(.qti-orientation-horizontal) ::slotted(qti-simple-choice) {\n//     flex: 1 1 auto !important;\n//   }\n// `;\n"]}
+{"version":3,"file":"qti-choice-interaction.styles.js","sourceRoot":"","sources":["../src/qti-choice-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,eAAe;IACb,SAAS;IACT,iBAAiB;IACjB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmEF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport { boxSizing, validationMessage } from '@qti-components/base';\n\nexport default [\n  boxSizing,\n  validationMessage,\n  css`\n    :host {\n      display: block;\n    }\n\n    [part='slot'] {\n      display: grid;\n      gap: 10px;\n    }\n\n    /* Define the number of columns dynamically */\n    :host([class*='qti-choices-stacking-']) [part='slot'] {\n      grid-template-columns: repeat(var(--stacking-count, 1), 1fr);\n    }\n\n    /* Apply dynamic stacking count based on class */\n    :host(.qti-choices-stacking-1) {\n      --stacking-count: 1;\n    }\n    :host(.qti-choices-stacking-2) {\n      --stacking-count: 2;\n    }\n    :host(.qti-choices-stacking-3) {\n      --stacking-count: 3;\n    }\n    :host(.qti-choices-stacking-4) {\n      --stacking-count: 4;\n    }\n    :host(.qti-choices-stacking-5) {\n      --stacking-count: 5;\n    }\n\n    /* Default slot item layout */\n    ::slotted(qti-simple-choice) {\n      display: flex;\n      align-items: center;\n      white-space: normal;\n    }\n\n    /* Orientation styles */\n    :host(.qti-orientation-horizontal) [part='slot'] {\n      grid-auto-flow: dense column;\n      grid-auto-columns: 1fr;\n    }\n\n    :host(.qti-orientation-vertical) [part='slot'] {\n      grid-auto-flow: row;\n    }\n\n    /* Vertical and horizontal stacking logic */\n    :host(.qti-orientation-vertical[class*='qti-choices-stacking-']) [part='slot'] {\n      grid-auto-flow: dense column;\n      grid-auto-columns: 1fr;\n      grid-template-columns: repeat(var(--stacking-count), 1fr);\n      grid-template-rows: repeat(calc(var(--item-count) / var(--stacking-count)), 1fr);\n    }\n\n    :host(.qti-orientation-horizontal[class*='qti-choices-stacking-']) [part='slot'] {\n      grid-auto-flow: row;\n      grid-template-columns: repeat(var(--stacking-count), 1fr);\n      grid-template-rows: unset;\n    }\n\n    /* Ensure even distribution in vertical mode */\n    :host(.qti-orientation-vertical) ::slotted(qti-simple-choice:nth-child(even)) {\n      grid-row: auto;\n    }\n  `\n];\n"]}

package/dist/register.js

@@ -1,3 +1,7 @@
-import { QtiChoiceInteraction } from './qti-choice-interaction';
-customElements.define('qti-choice-interaction', QtiChoiceInteraction);
+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,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAChE,cAAc,CAAC,MAAM,CAAC,wBAAwB,EAAE,oBAAoB,CAAC,CAAC","sourcesContent":["import { QtiChoiceInteraction } from './qti-choice-interaction';\ncustomElements.define('qti-choice-interaction', QtiChoiceInteraction);\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/choice-interaction",
   "description": "QTI choice-interaction interaction",
-  "version": "1.1.3",
+  "version": "1.1.5",
   "author": "",
   "dependencies": {
-    "@qti-components/base": "^1.4.2",
-    "@qti-components/interactions-core": "^1.1.3",
-    "@qti-components/utilities": "^1.3.2"
+    "@qti-components/base": "^2.0.0",
+    "@qti-components/interactions-core": "^2.0.0",
+    "@qti-components/utilities": "^1.3.3"
   },
   "devDependencies": {
     "@lit/context": "^1.1.6",
@@ -45,6 +45,10 @@
     "./styles": {
       "types": "./dist/qti-choice-interaction.styles.d.ts",
       "import": "./dist/qti-choice-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"
   }
 }