@qti-components/extended-text-interaction 1.1.4 → 2.0.0-next.0

package/dist/elements.d.ts

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

package/dist/elements.js

@@ -0,0 +1,4 @@
+import { QtiExtendedTextInteraction } from './qti-extended-text-interaction';
+export const elements = [{ tag: 'qti-extended-text-interaction', ctor: QtiExtendedTextInteraction }];
+export { QtiExtendedTextInteraction };
+//# 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,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAE7E,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,EAAE,GAAG,EAAE,+BAA+B,EAAE,IAAI,EAAE,0BAA0B,EAAE,CAAU,CAAC;AAE9G,OAAO,EAAE,0BAA0B,EAAE,CAAC","sourcesContent":["import { QtiExtendedTextInteraction } from './qti-extended-text-interaction';\n\nexport const elements = [{ tag: 'qti-extended-text-interaction', ctor: QtiExtendedTextInteraction }] as const;\n\nexport { QtiExtendedTextInteraction };\n"]}

package/dist/qti-extended-text-interaction.d.ts

@@ -1,26 +1,82 @@
 import { Interaction } from '@qti-components/base';
 import type { CSSResultGroup } from 'lit';
+/**
+ * A multi-line text-entry interaction.
+ *
+ * @customElement qti-extended-text-interaction
+ *
+ * @attr {string} response-identifier - Required. Identifier of the bound response variable.
+ * @attr {number} expected-length - Hint at the expected answer length in characters; sets the
+ *   textarea's `maxlength`. Also the last-resort row count, used only when neither a
+ *   `qti-height-lines-*` class nor `expected-lines` is present.
+ * @attr {string} pattern-mask - Regular expression the value must match to be valid.
+ * @attr {string} placeholder-text - Placeholder shown while the textarea is empty.
+ * @attr {string} data-patternmask-message - Custom validation message shown when
+ *   `pattern-mask` fails. Part of the QTI shared interaction vocabulary.
+ * @attr {'qti-height-lines-3'|'qti-height-lines-6'|'qti-height-lines-15'} class - QTI shared
+ *   presentation vocabulary controlling the rendered height. Outranks both `expected-lines`
+ *   and `expected-length`.
+ * @attr {number} expected-lines - Expected number of lines of response, and the rendered row
+ *   count unless a `qti-height-lines-*` class is present.
+ * @attr {number} [base=10] - Not implemented. Numeric base used when recording the value.
+ * @attr {string} string-identifier - Not implemented. Identifier of a second, string-typed
+ *   response variable that also receives the raw entry.
+ * @attr {number} max-strings - Not implemented. Maximum number of separate string responses. QTI
+ *   defines these for a multi-string response — several bound variables, one field each. This
+ *   element renders a single textarea bound to one variable, so there is nothing for the bounds
+ *   to count: reading them as a word or paragraph limit would invent a rule QTI does not state.
+ *   Implement alongside multi-string rendering, not before it.
+ * @attr {number} [min-strings=0] - Whether a response is required. Below 1 an empty field is valid; from 1
+ *   it must hold a value. Only that threshold is read: the field is a single string, so the
+ *   count itself (see `max-strings`) has nothing to bound.
+ * @attr {'plain'|'preformatted'|'xhtml'} [format=plain] - How the response is presented.
+ *   `preformatted` renders the field monospaced; `xhtml` is accepted but downgraded to plain,
+ *   because the field is a textarea with no rich-text editor behind it.
+ *
+ * @slot prompt - The prompt shown above the textarea.
+ *
+ * @csspart textarea - The textarea input element.
+ */
 export declare class QtiExtendedTextInteraction extends Interaction {
+    #private;
     static styles: CSSResultGroup;
     protected _rows: number;
     /** expected length is mapped to the property maxlength on the textarea */
     expectedLength: number;
+    /** QTI's own hint at the response height. Outranked by `qti-height-lines-*`; see `#resolveRows`. */
+    expectedLines: number;
+    /**
+     * How the response text is presented. Reflected so themes can key off
+     * `:host([format='preformatted'])`.
+     *
+     * `xhtml` is accepted and recorded but renders as `plain`: the field is a `<textarea>`, and
+     * there is no rich-text editor behind it. Downgrading loudly beats either refusing valid QTI
+     * or pretending to support formatting the candidate cannot actually produce.
+     */
+    format: 'plain' | 'preformatted' | 'xhtml';
+    protected _handleFormatChange: () => void;
+    /** Below 1 an empty field is valid; from 1 it must hold a value. Defaults to 0, as in the QTI spec. */
+    minStrings: number;
     patternMask: string;
     /** text appearing in the extended-text-interaction if it is empty */
     placeholderText: string;
     dataPatternmaskMessage: string;
     classNames: string;
-    handleclassNamesChange(_: any, classes: string): void;
+    protected _handleRowsInputChange(): void;
     response: string | null;
     protected _handleResponseChange: () => void;
     get value(): string | null;
     set value(val: string | null);
     validate(): boolean;
-    toggleCorrectResponse(): void;
     reportValidity(): boolean;
+    /** The prompt, above the field. */
+    protected renderPrompt(): unknown;
+    /** The field itself. */
+    protected renderTextarea(): unknown;
+    /** Hidden until `Interaction.reportValidity` shows it. */
+    protected renderValidationMessage(): unknown;
     render(): import("lit").TemplateResult<1>;
     protected textChanged(event: Event): void;
-    protected setEmptyAttribute(text: string): void;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/qti-extended-text-interaction.js

@@ -10,10 +10,94 @@ import { property, state } from 'lit/decorators.js';
 import { watch } from '@qti-components/utilities';
 import { Interaction } from '@qti-components/base';
 import styles from './qti-extended-text-interaction.styles';
+/** Rows rendered when neither the class vocabulary nor either length hint resolves. */
+const DEFAULT_ROWS = 5;
+/** Rough characters-per-row rate used to turn `expected-length` into a row count. */
+const CHARS_PER_ROW = 50;
+/** QTI shared presentation vocabulary prefix carrying an explicit row count. */
+const HEIGHT_LINES_PREFIX = 'qti-height-lines-';
+/**
+ * Warn once per page rather than once per element: an item bank rendering many essays would
+ * otherwise bury the console in the same message.
+ */
+let warnedAboutXhtml = false;
+/**
+ * A multi-line text-entry interaction.
+ *
+ * @customElement qti-extended-text-interaction
+ *
+ * @attr {string} response-identifier - Required. Identifier of the bound response variable.
+ * @attr {number} expected-length - Hint at the expected answer length in characters; sets the
+ *   textarea's `maxlength`. Also the last-resort row count, used only when neither a
+ *   `qti-height-lines-*` class nor `expected-lines` is present.
+ * @attr {string} pattern-mask - Regular expression the value must match to be valid.
+ * @attr {string} placeholder-text - Placeholder shown while the textarea is empty.
+ * @attr {string} data-patternmask-message - Custom validation message shown when
+ *   `pattern-mask` fails. Part of the QTI shared interaction vocabulary.
+ * @attr {'qti-height-lines-3'|'qti-height-lines-6'|'qti-height-lines-15'} class - QTI shared
+ *   presentation vocabulary controlling the rendered height. Outranks both `expected-lines`
+ *   and `expected-length`.
+ * @attr {number} expected-lines - Expected number of lines of response, and the rendered row
+ *   count unless a `qti-height-lines-*` class is present.
+ * @attr {number} [base=10] - Not implemented. Numeric base used when recording the value.
+ * @attr {string} string-identifier - Not implemented. Identifier of a second, string-typed
+ *   response variable that also receives the raw entry.
+ * @attr {number} max-strings - Not implemented. Maximum number of separate string responses. QTI
+ *   defines these for a multi-string response — several bound variables, one field each. This
+ *   element renders a single textarea bound to one variable, so there is nothing for the bounds
+ *   to count: reading them as a word or paragraph limit would invent a rule QTI does not state.
+ *   Implement alongside multi-string rendering, not before it.
+ * @attr {number} [min-strings=0] - Whether a response is required. Below 1 an empty field is valid; from 1
+ *   it must hold a value. Only that threshold is read: the field is a single string, so the
+ *   count itself (see `max-strings`) has nothing to bound.
+ * @attr {'plain'|'preformatted'|'xhtml'} [format=plain] - How the response is presented.
+ *   `preformatted` renders the field monospaced; `xhtml` is accepted but downgraded to plain,
+ *   because the field is a textarea with no rich-text editor behind it.
+ *
+ * @slot prompt - The prompt shown above the textarea.
+ *
+ * @csspart textarea - The textarea input element.
+ */
 export class QtiExtendedTextInteraction extends Interaction {
     constructor() {
         super(...arguments);
-        this._rows = 5;
+        this._rows = DEFAULT_ROWS;
+        /**
+         * How the response text is presented. Reflected so themes can key off
+         * `:host([format='preformatted'])`.
+         *
+         * `xhtml` is accepted and recorded but renders as `plain`: the field is a `<textarea>`, and
+         * there is no rich-text editor behind it. Downgrading loudly beats either refusing valid QTI
+         * or pretending to support formatting the candidate cannot actually produce.
+         */
+        /*
+         * The vocabulary is written inline rather than as an exported `TextFormat` alias. Both text
+         * interactions need it in their public API, and the umbrella `@qti-components/interactions`
+         * re-exports both packages — two identically-named exported aliases collide at that barrel
+         * (TS2308). Inline, there is no name to collide, and the manifest still reads the union.
+         */
+        this.format = 'plain';
+        this._handleFormatChange = () => {
+            if (this.format !== 'xhtml' || warnedAboutXhtml)
+                return;
+            warnedAboutXhtml = true;
+            console.warn('<qti-extended-text-interaction format="xhtml"> renders as plain text. ' +
+                'The interaction has no rich-text editor; the recorded response will contain no markup.');
+        };
+        /** Below 1 an empty field is valid; from 1 it must hold a value. Defaults to 0, as in the QTI spec. */
+        this.minStrings = 0;
+        /*
+         * Declared with `attribute: 'response'`, not `@state`, so `response="…"` in markup reaches the
+         * field. As a `@state` it was unobserved: every sibling interaction accepts the attribute — it
+         * is half of the codec's contract in packages/qti-base/src/lib/response.ts, which parses
+         * `response` and `correct-response` alike — but this one silently ignored it, so authored or
+         * restored prose rendered as an empty textarea.
+         *
+         * Plain `type: String`, deliberately NOT `responseAttributeConverter`. That codec splits on
+         * commas to build multi-value responses, which is right for identifiers, pairs and points and
+         * wrong for prose: an essay containing a comma would arrive as an array. text-entry, the other
+         * single-string interaction, declares it plainly for the same reason.
+         */
         this.response = null;
         this._handleResponseChange = () => {
             this._internals.setFormValue(this.value);
@@ -21,21 +105,45 @@ export class QtiExtendedTextInteraction extends Interaction {
         };
     }
     static { this.styles = styles; }
-    handleclassNamesChange(_, classes) {
-        const classNames = classes.split(' ');
-        let rowsSet = false;
-        classNames.forEach((className) => {
-            if (className.startsWith('qti-height-lines-')) {
-                const nrRows = className.replace('qti-height-lines-', '');
-                this._rows = parseInt(nrRows);
-                rowsSet = true;
-            }
-        });
-        // If no qti-height-lines class is set, calculate rows based on expectedLength
-        if (!rowsSet && this.expectedLength) {
-            const estimatedRows = Math.ceil(this.expectedLength / 50); //  '50' based on an estimate for characters per row
-            this._rows = estimatedRows;
+    /*
+     * All three inputs feed one resolver rather than each assigning `_rows` in its own handler.
+     * With separate handlers the last attribute to change would win, so the same markup could
+     * render a different height depending on attribute order — and `expected-length` only ever
+     * applied when a `class` was also present, because the fallback lived inside the class watcher.
+     */
+    _handleRowsInputChange() {
+        this._rows = this.#resolveRows();
+    }
+    /**
+     * Row count, highest precedence first:
+     *
+     * 1. `qti-height-lines-N` — the QTI shared presentation vocabulary. An explicit rendering
+     *    instruction, so it outranks the content-level hints below.
+     * 2. `expected-lines` — QTI's hint at how long the response should be.
+     * 3. `expected-length` — a character count, converted at a rough characters-per-row rate.
+     * 4. {@link DEFAULT_ROWS}.
+     */
+    #resolveRows() {
+        const fromHeightLines = this.#rowsFromHeightLinesClass();
+        if (fromHeightLines !== null)
+            return fromHeightLines;
+        if (this.expectedLines > 0)
+            return this.expectedLines;
+        if (this.expectedLength > 0)
+            return Math.ceil(this.expectedLength / CHARS_PER_ROW);
+        return DEFAULT_ROWS;
+    }
+    /** The `N` of the first usable `qti-height-lines-N` class, or null when none is present. */
+    #rowsFromHeightLinesClass() {
+        for (const className of (this.classNames ?? '').split(' ')) {
+            if (!className.startsWith(HEIGHT_LINES_PREFIX))
+                continue;
+            const rows = parseInt(className.slice(HEIGHT_LINES_PREFIX.length), 10);
+            // A bare `qti-height-lines-` parses to NaN; ignore it rather than render NaN rows.
+            if (!Number.isNaN(rows) && rows > 0)
+                return rows;
         }
+        return null;
     }
     get value() {
         return this.response || null;
@@ -47,73 +155,92 @@ export class QtiExtendedTextInteraction extends Interaction {
         const textarea = this.shadowRoot.querySelector('textarea');
         if (!textarea)
             return false;
+        let validityMessage = '';
+        let isValid = false;
         if (this.patternMask && this.dataPatternmaskMessage) {
             // Clear any custom error initially
-            this._internals.setValidity({});
             textarea.setCustomValidity('');
             const patternSource = this.patternMask.startsWith('^') && this.patternMask.endsWith('$') ? this.patternMask : `^${this.patternMask}$`;
             const pattern = new RegExp(patternSource);
-            const isValid = textarea.checkValidity() && pattern.test(textarea.value);
+            isValid = textarea.checkValidity() && pattern.test(textarea.value);
             if (!isValid) {
                 // Set custom error if invalid
-                this._internals.setValidity({ customError: true }, this.dataPatternmaskMessage);
+                validityMessage = this.dataPatternmaskMessage;
                 textarea.setCustomValidity(this.dataPatternmaskMessage);
             }
         }
         else {
-            const isValid = textarea.checkValidity();
-            this._internals.setValidity(isValid ? {} : { customError: false });
+            isValid = textarea.checkValidity();
         }
-        return !!this.response && textarea.checkValidity();
-    }
-    toggleCorrectResponse() {
-        // No correct response possible for extended text interactions
-    }
-    reportValidity() {
-        const textarea = this.shadowRoot.querySelector('textarea');
-        if (!textarea)
-            return false;
-        // Run the validate function to ensure the custom validity state is up to date
-        const isValid = this.validate();
-        if (!isValid) {
-            textarea.reportValidity();
+        if (isValid && !this.response && this.minStrings >= 1) {
+            isValid = false;
+        }
+        if (!isValid && !validityMessage) {
+            validityMessage = textarea.validationMessage || 'Invalid value.';
         }
+        this.setInteractionValidity(isValid, validityMessage, textarea, { suppressInline: true });
         return isValid;
     }
-    render() {
-        return html `<slot name="prompt"></slot
-      ><textarea
-        part="textarea"
-        name="${this.responseIdentifier}"
-        spellcheck="false"
-        autocomplete="off"
-        maxlength="${5000}"
-        @keydown="${(event) => event.stopImmediatePropagation()}"
-        @keyup="${this.textChanged}"
-        @change="${this.textChanged}"
-        @blur="${(_) => {
+    reportValidity() {
+        this.validate();
+        return super.reportValidity();
+    }
+    /*
+     * The template in named pieces, so a subclass can recompose it.
+     *
+     * Each piece renders one thing and returns it; `render()` below just orders them. A subclass
+     * overrides `render()` and calls the pieces where it wants them — which is the point: an extension
+     * point that only lets you APPEND has already decided the layout on the subclass's behalf, and the
+     * subclass is usually the one that knows better. The correction variant in
+     * @qti-components/corrections puts its badge between the field and the validation message;
+     * something else may want it above the prompt, or may want to drop a piece entirely.
+     *
+     * Override a piece to change what one part looks like; override `render()` to change the order.
+     */
+    /** The prompt, above the field. */
+    renderPrompt() {
+        return html `<slot name="prompt"></slot>`;
+    }
+    /** The field itself. */
+    renderTextarea() {
+        return html `<textarea
+      part="textarea"
+      name="${this.responseIdentifier}"
+      spellcheck="false"
+      autocomplete="off"
+      maxlength="${5000}"
+      @keydown="${(event) => event.stopImmediatePropagation()}"
+      @keyup="${this.textChanged}"
+      @change="${this.textChanged}"
+      @blur="${(_) => {
             this.reportValidity();
         }}"
-        placeholder="${ifDefined(this.placeholderText ? this.placeholderText : undefined)}"
-        rows="${this._rows}"
-        ?disabled="${this.disabled}"
-        ?readonly="${this.readonly}"
-        .value=${this.response}
-      ></textarea>`;
+      placeholder="${ifDefined(this.placeholderText ? this.placeholderText : undefined)}"
+      rows="${this._rows}"
+      ?disabled="${this.disabled}"
+      ?readonly="${this.readonly}"
+      .value=${this.response}
+    ></textarea>`;
+    }
+    /** Hidden until `Interaction.reportValidity` shows it. */
+    renderValidationMessage() {
+        return html `<div id="validation-message" part="message" role="alert" style="display:none;"></div>`;
+    }
+    render() {
+        /* The prompt and the field are written with NO whitespace between them, deliberately: a text
+           node there puts a line box between the two. The original template said `</slot\n><textarea`
+           to avoid exactly that, and interpolating them adjacently keeps it. */
+        return html `${this.renderPrompt()}${this.renderTextarea()} ${this.renderValidationMessage()}`;
     }
     textChanged(event) {
         if (this.disabled || this.readonly)
             return;
         const input = event.target;
-        this.setEmptyAttribute(input.value);
         if (this.response !== input.value) {
             this.value = input.value;
             this.saveResponse(input.value);
         }
     }
-    setEmptyAttribute(text) {
-        this.setAttribute('empty', text === '' ? 'true' : 'false');
-    }
 }
 __decorate([
     state()
@@ -121,6 +248,18 @@ __decorate([
 __decorate([
     property({ type: Number, attribute: 'expected-length' })
 ], QtiExtendedTextInteraction.prototype, "expectedLength", void 0);
+__decorate([
+    property({ type: Number, attribute: 'expected-lines' })
+], QtiExtendedTextInteraction.prototype, "expectedLines", void 0);
+__decorate([
+    property({ type: String, reflect: true })
+], QtiExtendedTextInteraction.prototype, "format", void 0);
+__decorate([
+    watch('format')
+], QtiExtendedTextInteraction.prototype, "_handleFormatChange", void 0);
+__decorate([
+    property({ type: Number, attribute: 'min-strings' })
+], QtiExtendedTextInteraction.prototype, "minStrings", void 0);
 __decorate([
     property({ type: String, attribute: 'pattern-mask' })
 ], QtiExtendedTextInteraction.prototype, "patternMask", void 0);
@@ -134,10 +273,10 @@ __decorate([
     property({ type: String, attribute: 'class' })
 ], QtiExtendedTextInteraction.prototype, "classNames", void 0);
 __decorate([
-    watch('classNames')
-], QtiExtendedTextInteraction.prototype, "handleclassNamesChange", null);
+    watch(['classNames', 'expectedLines', 'expectedLength'])
+], QtiExtendedTextInteraction.prototype, "_handleRowsInputChange", null);
 __decorate([
-    state()
+    property({ type: String, attribute: 'response', reflect: false })
 ], QtiExtendedTextInteraction.prototype, "response", void 0);
 __decorate([
     watch('response', { waitUntilFirstUpdate: true })

package/dist/qti-extended-text-interaction.js.map

@@ -1 +1 @@
-{"version":3,"file":"qti-extended-text-interaction.js","sourceRoot":"","sources":["../src/qti-extended-text-interaction.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\n\nimport { watch } from '@qti-components/utilities';\nimport { Interaction } from '@qti-components/base';\n\nimport styles from './qti-extended-text-interaction.styles';\n\nimport type { CSSResultGroup } from 'lit';\nexport class QtiExtendedTextInteraction extends Interaction {\n  static override styles: CSSResultGroup = styles;\n\n  @state()\n  protected _rows = 5;\n\n  /** expected length is mapped to the property maxlength on the textarea */\n  @property({ type: Number, attribute: 'expected-length' }) expectedLength: number;\n\n  @property({ type: String, attribute: 'pattern-mask' }) patternMask: string;\n\n  /** text appearing in the extended-text-interaction if it is empty */\n  @property({ type: String, attribute: 'placeholder-text' }) placeholderText: string;\n\n  @property({ type: String, attribute: 'data-patternmask-message' }) dataPatternmaskMessage: string;\n\n  @property({ type: String, attribute: 'class' }) classNames: string;\n  @watch('classNames')\n  handleclassNamesChange(_: any, classes: string) {\n    const classNames = classes.split(' ');\n    let rowsSet = false;\n    classNames.forEach((className: string) => {\n      if (className.startsWith('qti-height-lines-')) {\n        const nrRows = className.replace('qti-height-lines-', '');\n        this._rows = parseInt(nrRows);\n        rowsSet = true;\n      }\n    });\n    // If no qti-height-lines class is set, calculate rows based on expectedLength\n    if (!rowsSet && this.expectedLength) {\n      const estimatedRows = Math.ceil(this.expectedLength / 50); //  '50' based on an estimate for characters per row\n      this._rows = estimatedRows;\n    }\n  }\n\n  @state()\n  response: string | null = null;\n\n  @watch('response', { waitUntilFirstUpdate: true })\n  protected _handleResponseChange = () => {\n    this._internals.setFormValue(this.value);\n    this.validate();\n  };\n\n  override get value(): string | null {\n    return this.response || null;\n  }\n  override set value(val: string | null) {\n    this.response = val || null;\n  }\n\n  public override validate() {\n    const textarea = this.shadowRoot.querySelector('textarea');\n    if (!textarea) return false;\n\n    if (this.patternMask && this.dataPatternmaskMessage) {\n      // Clear any custom error initially\n      this._internals.setValidity({});\n      textarea.setCustomValidity('');\n      const patternSource =\n        this.patternMask.startsWith('^') && this.patternMask.endsWith('$') ? this.patternMask : `^${this.patternMask}$`;\n\n      const pattern = new RegExp(patternSource);\n      const isValid = textarea.checkValidity() && pattern.test(textarea.value);\n\n      if (!isValid) {\n        // Set custom error if invalid\n        this._internals.setValidity({ customError: true }, this.dataPatternmaskMessage);\n        textarea.setCustomValidity(this.dataPatternmaskMessage);\n      }\n    } else {\n      const isValid = textarea.checkValidity();\n      this._internals.setValidity(isValid ? {} : { customError: false });\n    }\n\n    return !!this.response && textarea.checkValidity();\n  }\n\n  public override toggleCorrectResponse() {\n    // No correct response possible for extended text interactions\n  }\n\n  override reportValidity() {\n    const textarea = this.shadowRoot.querySelector('textarea');\n    if (!textarea) return false;\n\n    // Run the validate function to ensure the custom validity state is up to date\n    const isValid = this.validate();\n    if (!isValid) {\n      textarea.reportValidity();\n    }\n    return isValid;\n  }\n\n  override render() {\n    return html`<slot name=\"prompt\"></slot\n      ><textarea\n        part=\"textarea\"\n        name=\"${this.responseIdentifier}\"\n        spellcheck=\"false\"\n        autocomplete=\"off\"\n        maxlength=\"${5000}\"\n        @keydown=\"${(event: KeyboardEvent) => event.stopImmediatePropagation()}\"\n        @keyup=\"${this.textChanged}\"\n        @change=\"${this.textChanged}\"\n        @blur=\"${(_: FocusEvent) => {\n          this.reportValidity();\n        }}\"\n        placeholder=\"${ifDefined(this.placeholderText ? this.placeholderText : undefined)}\"\n        rows=\"${this._rows}\"\n        ?disabled=\"${this.disabled}\"\n        ?readonly=\"${this.readonly}\"\n        .value=${this.response}\n      ></textarea>`;\n  }\n\n  protected textChanged(event: Event) {\n    if (this.disabled || this.readonly) return;\n    const input = event.target as HTMLInputElement;\n    this.setEmptyAttribute(input.value);\n    if (this.response !== input.value) {\n      this.value = input.value;\n      this.saveResponse(input.value);\n    }\n  }\n\n  protected setEmptyAttribute(text: string) {\n    this.setAttribute('empty', text === '' ? 'true' : 'false');\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-extended-text-interaction': QtiExtendedTextInteraction;\n  }\n}\n"]}
+{"version":3,"file":"qti-extended-text-interaction.js","sourceRoot":"","sources":["../src/qti-extended-text-interaction.ts"],"names":[],"mappings":"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","sourcesContent":["import { html } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { property, state } from 'lit/decorators.js';\n\nimport { watch } from '@qti-components/utilities';\nimport { Interaction } from '@qti-components/base';\n\nimport styles from './qti-extended-text-interaction.styles';\n\nimport type { CSSResultGroup } from 'lit';\n/** Rows rendered when neither the class vocabulary nor either length hint resolves. */\nconst DEFAULT_ROWS = 5;\n\n/** Rough characters-per-row rate used to turn `expected-length` into a row count. */\nconst CHARS_PER_ROW = 50;\n\n/** QTI shared presentation vocabulary prefix carrying an explicit row count. */\nconst HEIGHT_LINES_PREFIX = 'qti-height-lines-';\n\n/**\n * Warn once per page rather than once per element: an item bank rendering many essays would\n * otherwise bury the console in the same message.\n */\nlet warnedAboutXhtml = false;\n\n/**\n * A multi-line text-entry interaction.\n *\n * @customElement qti-extended-text-interaction\n *\n * @attr {string} response-identifier - Required. Identifier of the bound response variable.\n * @attr {number} expected-length - Hint at the expected answer length in characters; sets the\n *   textarea's `maxlength`. Also the last-resort row count, used only when neither a\n *   `qti-height-lines-*` class nor `expected-lines` is present.\n * @attr {string} pattern-mask - Regular expression the value must match to be valid.\n * @attr {string} placeholder-text - Placeholder shown while the textarea is empty.\n * @attr {string} data-patternmask-message - Custom validation message shown when\n *   `pattern-mask` fails. Part of the QTI shared interaction vocabulary.\n * @attr {'qti-height-lines-3'|'qti-height-lines-6'|'qti-height-lines-15'} class - QTI shared\n *   presentation vocabulary controlling the rendered height. Outranks both `expected-lines`\n *   and `expected-length`.\n * @attr {number} expected-lines - Expected number of lines of response, and the rendered row\n *   count unless a `qti-height-lines-*` class is present.\n * @attr {number} [base=10] - Not implemented. Numeric base used when recording the value.\n * @attr {string} string-identifier - Not implemented. Identifier of a second, string-typed\n *   response variable that also receives the raw entry.\n * @attr {number} max-strings - Not implemented. Maximum number of separate string responses. QTI\n *   defines these for a multi-string response — several bound variables, one field each. This\n *   element renders a single textarea bound to one variable, so there is nothing for the bounds\n *   to count: reading them as a word or paragraph limit would invent a rule QTI does not state.\n *   Implement alongside multi-string rendering, not before it.\n * @attr {number} [min-strings=0] - Whether a response is required. Below 1 an empty field is valid; from 1\n *   it must hold a value. Only that threshold is read: the field is a single string, so the\n *   count itself (see `max-strings`) has nothing to bound.\n * @attr {'plain'|'preformatted'|'xhtml'} [format=plain] - How the response is presented.\n *   `preformatted` renders the field monospaced; `xhtml` is accepted but downgraded to plain,\n *   because the field is a textarea with no rich-text editor behind it.\n *\n * @slot prompt - The prompt shown above the textarea.\n *\n * @csspart textarea - The textarea input element.\n */\nexport class QtiExtendedTextInteraction extends Interaction {\n  static override styles: CSSResultGroup = styles;\n\n  @state()\n  protected _rows = DEFAULT_ROWS;\n\n  /** expected length is mapped to the property maxlength on the textarea */\n  @property({ type: Number, attribute: 'expected-length' }) expectedLength: number;\n\n  /** QTI's own hint at the response height. Outranked by `qti-height-lines-*`; see `#resolveRows`. */\n  @property({ type: Number, attribute: 'expected-lines' }) expectedLines: number;\n\n  /**\n   * How the response text is presented. Reflected so themes can key off\n   * `:host([format='preformatted'])`.\n   *\n   * `xhtml` is accepted and recorded but renders as `plain`: the field is a `<textarea>`, and\n   * there is no rich-text editor behind it. Downgrading loudly beats either refusing valid QTI\n   * or pretending to support formatting the candidate cannot actually produce.\n   */\n  /*\n   * The vocabulary is written inline rather than as an exported `TextFormat` alias. Both text\n   * interactions need it in their public API, and the umbrella `@qti-components/interactions`\n   * re-exports both packages — two identically-named exported aliases collide at that barrel\n   * (TS2308). Inline, there is no name to collide, and the manifest still reads the union.\n   */\n  @property({ type: String, reflect: true }) format: 'plain' | 'preformatted' | 'xhtml' = 'plain';\n\n  @watch('format')\n  protected _handleFormatChange = () => {\n    if (this.format !== 'xhtml' || warnedAboutXhtml) return;\n\n    warnedAboutXhtml = true;\n    console.warn(\n      '<qti-extended-text-interaction format=\"xhtml\"> renders as plain text. ' +\n        'The interaction has no rich-text editor; the recorded response will contain no markup.'\n    );\n  };\n\n  /** Below 1 an empty field is valid; from 1 it must hold a value. Defaults to 0, as in the QTI spec. */\n  @property({ type: Number, attribute: 'min-strings' }) minStrings = 0;\n\n  @property({ type: String, attribute: 'pattern-mask' }) patternMask: string;\n\n  /** text appearing in the extended-text-interaction if it is empty */\n  @property({ type: String, attribute: 'placeholder-text' }) placeholderText: string;\n\n  @property({ type: String, attribute: 'data-patternmask-message' }) dataPatternmaskMessage: string;\n\n  @property({ type: String, attribute: 'class' }) classNames: string;\n\n  /*\n   * All three inputs feed one resolver rather than each assigning `_rows` in its own handler.\n   * With separate handlers the last attribute to change would win, so the same markup could\n   * render a different height depending on attribute order — and `expected-length` only ever\n   * applied when a `class` was also present, because the fallback lived inside the class watcher.\n   */\n  @watch(['classNames', 'expectedLines', 'expectedLength'])\n  protected _handleRowsInputChange() {\n    this._rows = this.#resolveRows();\n  }\n\n  /**\n   * Row count, highest precedence first:\n   *\n   * 1. `qti-height-lines-N` — the QTI shared presentation vocabulary. An explicit rendering\n   *    instruction, so it outranks the content-level hints below.\n   * 2. `expected-lines` — QTI's hint at how long the response should be.\n   * 3. `expected-length` — a character count, converted at a rough characters-per-row rate.\n   * 4. {@link DEFAULT_ROWS}.\n   */\n  #resolveRows(): number {\n    const fromHeightLines = this.#rowsFromHeightLinesClass();\n    if (fromHeightLines !== null) return fromHeightLines;\n\n    if (this.expectedLines > 0) return this.expectedLines;\n    if (this.expectedLength > 0) return Math.ceil(this.expectedLength / CHARS_PER_ROW);\n\n    return DEFAULT_ROWS;\n  }\n\n  /** The `N` of the first usable `qti-height-lines-N` class, or null when none is present. */\n  #rowsFromHeightLinesClass(): number | null {\n    for (const className of (this.classNames ?? '').split(' ')) {\n      if (!className.startsWith(HEIGHT_LINES_PREFIX)) continue;\n\n      const rows = parseInt(className.slice(HEIGHT_LINES_PREFIX.length), 10);\n      // A bare `qti-height-lines-` parses to NaN; ignore it rather than render NaN rows.\n      if (!Number.isNaN(rows) && rows > 0) return rows;\n    }\n\n    return null;\n  }\n\n  /*\n   * Declared with `attribute: 'response'`, not `@state`, so `response=\"…\"` in markup reaches the\n   * field. As a `@state` it was unobserved: every sibling interaction accepts the attribute — it\n   * is half of the codec's contract in packages/qti-base/src/lib/response.ts, which parses\n   * `response` and `correct-response` alike — but this one silently ignored it, so authored or\n   * restored prose rendered as an empty textarea.\n   *\n   * Plain `type: String`, deliberately NOT `responseAttributeConverter`. That codec splits on\n   * commas to build multi-value responses, which is right for identifiers, pairs and points and\n   * wrong for prose: an essay containing a comma would arrive as an array. text-entry, the other\n   * single-string interaction, declares it plainly for the same reason.\n   */\n  @property({ type: String, attribute: 'response', reflect: false })\n  response: string | null = null;\n\n  @watch('response', { waitUntilFirstUpdate: true })\n  protected _handleResponseChange = () => {\n    this._internals.setFormValue(this.value);\n    this.validate();\n  };\n\n  override get value(): string | null {\n    return this.response || null;\n  }\n  override set value(val: string | null) {\n    this.response = val || null;\n  }\n\n  public override validate() {\n    const textarea = this.shadowRoot.querySelector('textarea');\n    if (!textarea) return false;\n    let validityMessage = '';\n    let isValid = false;\n\n    if (this.patternMask && this.dataPatternmaskMessage) {\n      // Clear any custom error initially\n      textarea.setCustomValidity('');\n      const patternSource =\n        this.patternMask.startsWith('^') && this.patternMask.endsWith('$') ? this.patternMask : `^${this.patternMask}$`;\n\n      const pattern = new RegExp(patternSource);\n      isValid = textarea.checkValidity() && pattern.test(textarea.value);\n\n      if (!isValid) {\n        // Set custom error if invalid\n        validityMessage = this.dataPatternmaskMessage;\n        textarea.setCustomValidity(this.dataPatternmaskMessage);\n      }\n    } else {\n      isValid = textarea.checkValidity();\n    }\n\n    if (isValid && !this.response && this.minStrings >= 1) {\n      isValid = false;\n    }\n\n    if (!isValid && !validityMessage) {\n      validityMessage = textarea.validationMessage || 'Invalid value.';\n    }\n\n    this.setInteractionValidity(isValid, validityMessage, textarea, { suppressInline: true });\n    return isValid;\n  }\n\n  override reportValidity() {\n    this.validate();\n    return super.reportValidity();\n  }\n\n  /*\n   * The template in named pieces, so a subclass can recompose it.\n   *\n   * Each piece renders one thing and returns it; `render()` below just orders them. A subclass\n   * overrides `render()` and calls the pieces where it wants them — which is the point: an extension\n   * point that only lets you APPEND has already decided the layout on the subclass's behalf, and the\n   * subclass is usually the one that knows better. The correction variant in\n   * @qti-components/corrections puts its badge between the field and the validation message;\n   * something else may want it above the prompt, or may want to drop a piece entirely.\n   *\n   * Override a piece to change what one part looks like; override `render()` to change the order.\n   */\n\n  /** The prompt, above the field. */\n  protected renderPrompt(): unknown {\n    return html`<slot name=\"prompt\"></slot>`;\n  }\n\n  /** The field itself. */\n  protected renderTextarea(): unknown {\n    return html`<textarea\n      part=\"textarea\"\n      name=\"${this.responseIdentifier}\"\n      spellcheck=\"false\"\n      autocomplete=\"off\"\n      maxlength=\"${5000}\"\n      @keydown=\"${(event: KeyboardEvent) => event.stopImmediatePropagation()}\"\n      @keyup=\"${this.textChanged}\"\n      @change=\"${this.textChanged}\"\n      @blur=\"${(_: FocusEvent) => {\n        this.reportValidity();\n      }}\"\n      placeholder=\"${ifDefined(this.placeholderText ? this.placeholderText : undefined)}\"\n      rows=\"${this._rows}\"\n      ?disabled=\"${this.disabled}\"\n      ?readonly=\"${this.readonly}\"\n      .value=${this.response}\n    ></textarea>`;\n  }\n\n  /** Hidden until `Interaction.reportValidity` shows it. */\n  protected renderValidationMessage(): unknown {\n    return html`<div id=\"validation-message\" part=\"message\" role=\"alert\" style=\"display:none;\"></div>`;\n  }\n\n  override render() {\n    /* The prompt and the field are written with NO whitespace between them, deliberately: a text\n       node there puts a line box between the two. The original template said `</slot\\n><textarea`\n       to avoid exactly that, and interpolating them adjacently keeps it. */\n    return html`${this.renderPrompt()}${this.renderTextarea()} ${this.renderValidationMessage()}`;\n  }\n\n  protected textChanged(event: Event) {\n    if (this.disabled || this.readonly) return;\n    const input = event.target as HTMLInputElement;\n    if (this.response !== input.value) {\n      this.value = input.value;\n      this.saveResponse(input.value);\n    }\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'qti-extended-text-interaction': QtiExtendedTextInteraction;\n  }\n}\n"]}

package/dist/qti-extended-text-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-extended-text-interaction.styles.js

@@ -1,14 +1,20 @@
 import { css } from 'lit';
-export default css `
-  /* PK: display host as block, else design will be collapsed */
-  :host {
-    display: block;
-  }
-  textarea {
-    box-sizing: border-box;
-    width: 100%;
-    height: 100%;
-    border: 0;
-  }
-`;
+import { boxSizing } from '@qti-components/base';
+export default [
+    boxSizing,
+    css `
+    /* PK: display host as block, else design will be collapsed */
+    /* 'position: relative' anchors the correction glyph the theme draws over the textarea. */
+    :host {
+      display: block;
+      position: relative;
+    }
+    textarea {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      border: 0;
+    }
+  `
+];
 //# sourceMappingURL=qti-extended-text-interaction.styles.js.map

package/dist/qti-extended-text-interaction.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"qti-extended-text-interaction.styles.js","sourceRoot":"","sources":["../src/qti-extended-text-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,eAAe,GAAG,CAAA;;;;;;;;;;;CAWjB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport default css`\n  /* PK: display host as block, else design will be collapsed */\n  :host {\n    display: block;\n  }\n  textarea {\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    border: 0;\n  }\n`;\n"]}
+{"version":3,"file":"qti-extended-text-interaction.styles.js","sourceRoot":"","sources":["../src/qti-extended-text-interaction.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAC;AAEjD,eAAe;IACb,SAAS;IACT,GAAG,CAAA;;;;;;;;;;;;;GAaF;CACF,CAAC","sourcesContent":["import { css } from 'lit';\n\nimport { boxSizing } from '@qti-components/base';\n\nexport default [\n  boxSizing,\n  css`\n    /* PK: display host as block, else design will be collapsed */\n    /* 'position: relative' anchors the correction glyph the theme draws over the textarea. */\n    :host {\n      display: block;\n      position: relative;\n    }\n    textarea {\n      box-sizing: border-box;\n      width: 100%;\n      height: 100%;\n      border: 0;\n    }\n  `\n];\n"]}

package/dist/register.js

@@ -1,3 +1,7 @@
-import { QtiExtendedTextInteraction } from './qti-extended-text-interaction';
-customElements.define('qti-extended-text-interaction', QtiExtendedTextInteraction);
+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,0BAA0B,EAAE,MAAM,iCAAiC,CAAC;AAC7E,cAAc,CAAC,MAAM,CAAC,+BAA+B,EAAE,0BAA0B,CAAC,CAAC","sourcesContent":["import { QtiExtendedTextInteraction } from './qti-extended-text-interaction';\ncustomElements.define('qti-extended-text-interaction', QtiExtendedTextInteraction);\n"]}
+{"version":3,"file":"register.js","sourceRoot":"","sources":["../src/register.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,KAAK,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,QAAQ,EAAE,CAAC;IACrC,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC;QAC7B,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;IACnC,CAAC;AACH,CAAC","sourcesContent":["import { elements } from './elements';\n\nfor (const { tag, ctor } of elements) {\n  if (!customElements.get(tag)) {\n    customElements.define(tag, ctor);\n  }\n}\n"]}

package/package.json

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