@design.estate/dees-catalog 9.6.2 → 9.8.0

package/dist_ts_web/elements/00group-input/dees-input-textarea/dees-input-textarea.js

@@ -0,0 +1,224 @@
+var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
+    function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
+    var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    if (target) Object.defineProperty(target, contextIn.name, descriptor);
+    done = true;
+};
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
+import { customElement, property, html, css } from '@design.estate/dees-element';
+import { DeesInputBase } from '../dees-input-base/dees-input-base.js';
+import { textInputContextMenuItems } from '../text-input-contextmenu.js';
+import { demoFunc } from './dees-input-textarea.demo.js';
+import '../../00group-overlay/dees-contextmenu/dees-contextmenu.js';
+let DeesInputTextarea = (() => {
+    let _classDecorators = [customElement('dees-input-textarea')];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = DeesInputBase;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _rows_decorators;
+    let _rows_initializers = [];
+    let _rows_extraInitializers = [];
+    let _maxLength_decorators;
+    let _maxLength_initializers = [];
+    let _maxLength_extraInitializers = [];
+    let _validationState_decorators;
+    let _validationState_initializers = [];
+    let _validationState_extraInitializers = [];
+    let _validationText_decorators;
+    let _validationText_initializers = [];
+    let _validationText_extraInitializers = [];
+    let _validationFunction_decorators;
+    let _validationFunction_initializers = [];
+    let _validationFunction_extraInitializers = [];
+    var DeesInputTextarea = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _value_decorators = [property({ type: String })];
+            _placeholder_decorators = [property({ type: String })];
+            _rows_decorators = [property({ type: Number })];
+            _maxLength_decorators = [property({ type: Number })];
+            _validationState_decorators = [property({ type: String, reflect: true })];
+            _validationText_decorators = [property({ type: String })];
+            _validationFunction_decorators = [property({ attribute: false })];
+            __esDecorate(this, null, _value_decorators, { kind: "accessor", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(this, null, _placeholder_decorators, { kind: "accessor", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(this, null, _rows_decorators, { kind: "accessor", name: "rows", static: false, private: false, access: { has: obj => "rows" in obj, get: obj => obj.rows, set: (obj, value) => { obj.rows = value; } }, metadata: _metadata }, _rows_initializers, _rows_extraInitializers);
+            __esDecorate(this, null, _maxLength_decorators, { kind: "accessor", name: "maxLength", static: false, private: false, access: { has: obj => "maxLength" in obj, get: obj => obj.maxLength, set: (obj, value) => { obj.maxLength = value; } }, metadata: _metadata }, _maxLength_initializers, _maxLength_extraInitializers);
+            __esDecorate(this, null, _validationState_decorators, { kind: "accessor", name: "validationState", static: false, private: false, access: { has: obj => "validationState" in obj, get: obj => obj.validationState, set: (obj, value) => { obj.validationState = value; } }, metadata: _metadata }, _validationState_initializers, _validationState_extraInitializers);
+            __esDecorate(this, null, _validationText_decorators, { kind: "accessor", name: "validationText", static: false, private: false, access: { has: obj => "validationText" in obj, get: obj => obj.validationText, set: (obj, value) => { obj.validationText = value; } }, metadata: _metadata }, _validationText_initializers, _validationText_extraInitializers);
+            __esDecorate(this, null, _validationFunction_decorators, { kind: "accessor", name: "validationFunction", static: false, private: false, access: { has: obj => "validationFunction" in obj, get: obj => obj.validationFunction, set: (obj, value) => { obj.validationFunction = value; } }, metadata: _metadata }, _validationFunction_initializers, _validationFunction_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            DeesInputTextarea = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+        }
+        static demo = demoFunc;
+        static demoGroups = ['Input'];
+        static inputLayout = 'compound';
+        #value_accessor_storage = __runInitializers(this, _value_initializers, '');
+        get value() { return this.#value_accessor_storage; }
+        set value(value) { this.#value_accessor_storage = value; }
+        #placeholder_accessor_storage = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _placeholder_initializers, ''));
+        get placeholder() { return this.#placeholder_accessor_storage; }
+        set placeholder(value) { this.#placeholder_accessor_storage = value; }
+        #rows_accessor_storage = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _rows_initializers, 3));
+        get rows() { return this.#rows_accessor_storage; }
+        set rows(value) { this.#rows_accessor_storage = value; }
+        #maxLength_accessor_storage = (__runInitializers(this, _rows_extraInitializers), __runInitializers(this, _maxLength_initializers, -1));
+        get maxLength() { return this.#maxLength_accessor_storage; }
+        set maxLength(value) { this.#maxLength_accessor_storage = value; }
+        #validationState_accessor_storage = (__runInitializers(this, _maxLength_extraInitializers), __runInitializers(this, _validationState_initializers, void 0));
+        get validationState() { return this.#validationState_accessor_storage; }
+        set validationState(value) { this.#validationState_accessor_storage = value; }
+        #validationText_accessor_storage = (__runInitializers(this, _validationState_extraInitializers), __runInitializers(this, _validationText_initializers, ''));
+        get validationText() { return this.#validationText_accessor_storage; }
+        set validationText(value) { this.#validationText_accessor_storage = value; }
+        #validationFunction_accessor_storage = (__runInitializers(this, _validationText_extraInitializers), __runInitializers(this, _validationFunction_initializers, void 0));
+        get validationFunction() { return this.#validationFunction_accessor_storage; }
+        set validationFunction(value) { this.#validationFunction_accessor_storage = value; }
+        touched = (__runInitializers(this, _validationFunction_extraInitializers), false);
+        lastValidity;
+        static styles = [...DeesInputBase.baseStyles, css `
+    textarea { display: block; width: 100%; height: auto; padding: 10px 12px; resize: vertical; text-align: left; }
+    .field-messages { grid-column: 1 / -1; }
+    .validationText { font-size: var(--dees-font-footnote-size); line-height: var(--dees-font-footnote-line); color: var(--dees-color-text-error); }
+    .validationText:not(:empty) { margin-top: var(--dees-spacing-xs); }
+    :host([validationstate="invalid"]) textarea { border-color: var(--dees-color-accent-error); }
+    :host([validationstate="warn"]) .validationText { color: var(--dees-color-text-warning); }
+    :host([validationstate="valid"]) .validationText { color: var(--dees-color-text-success); }
+  `];
+        render() {
+            return html `<div class="input-wrapper">
+      <dees-label .label=${this.label} .infoText=${this.infoText} .required=${this.required} @click=${() => this.focus()}></dees-label>
+      <div class="input-container">
+        <textarea class="field-control" .value=${this.value} .rows=${Math.max(1, this.rows)}
+          placeholder=${this.placeholder} ?disabled=${this.disabled} ?required=${this.required}
+          aria-label=${this.label ?? ''} aria-invalid=${this.validationState === 'invalid' ? 'true' : 'false'}
+          aria-describedby="field-description field-validation"
+          @input=${this.handleInput} @blur=${() => this.validate()}></textarea>
+      </div>
+      <div class="field-messages">
+        <div id="field-description">${this.renderDescription()}</div>
+        <div id="field-validation" class="validationText" role="status">${this.validationText}</div>
+      </div>
+    </div>`;
+        }
+        willUpdate(changed) {
+            super.willUpdate(changed);
+            if (changed.has('value') && this.value == null)
+                this.value = '';
+        }
+        updated(changed) {
+            super.updated(changed);
+            const input = this.shadowRoot?.querySelector('textarea');
+            if (this.maxLength >= 0)
+                input?.setAttribute('maxlength', String(this.maxLength));
+            else
+                input?.removeAttribute('maxlength');
+            if (['value', 'required', 'maxLength', 'validationFunction', 'disabled'].some(key => changed.has(key))) {
+                this.validate(this.touched || Boolean(this.value));
+            }
+            else if (changed.has('validationState') || changed.has('validationText')) {
+                this.syncValidity();
+            }
+        }
+        ruleMessage() {
+            if (this.disabled)
+                return '';
+            if (this.required && !this.value.length)
+                return 'Enter a value.';
+            if (this.maxLength >= 0 && this.value.length > this.maxLength)
+                return `Use ${this.maxLength} characters or fewer.`;
+            const result = this.validationFunction?.(this.value);
+            return result && !result.valid ? result.message || 'Check this value.' : '';
+        }
+        syncValidity() {
+            const message = this.disabled ? '' : this.ruleMessage() || (this.validationState === 'invalid' ? this.validationText || 'Check this value.' : '');
+            this.shadowRoot?.querySelector('textarea')?.setCustomValidity(message);
+            const valid = !message;
+            if (valid !== this.lastValidity) {
+                this.lastValidity = valid;
+                this.dispatchEvent(new CustomEvent('validation-change', { detail: { valid, message }, bubbles: true, composed: true }));
+            }
+        }
+        validate(showMessage = true) {
+            if (showMessage)
+                this.touched = true;
+            const message = this.ruleMessage();
+            this.validationText = showMessage ? message : '';
+            this.validationState = showMessage ? message ? 'invalid' : 'valid' : undefined;
+            this.syncValidity();
+            return !message;
+        }
+        checkValidity() {
+            return this.disabled || (!this.ruleMessage() && this.validationState !== 'invalid');
+        }
+        reportValidity() {
+            // Preserve a host-supplied validation message until the value changes.
+            const valid = this.validationState === 'invalid' ? this.checkValidity() : this.validate();
+            if (!valid)
+                this.focus();
+            return valid;
+        }
+        handleInput = () => {
+            if (this.disabled)
+                return;
+            this.value = this.shadowRoot.querySelector('textarea').value;
+            this.validate();
+            this.changeSubject.next(this);
+        };
+        getContextMenuItems() {
+            return textInputContextMenuItems({ input: this.shadowRoot.querySelector('textarea'), disabled: this.disabled,
+                commit: value => { this.value = value; this.validate(); this.changeSubject.next(this); } });
+        }
+        getValue() { return this.value; }
+        setValue(value) {
+            this.value = value ?? '';
+            this.touched = false;
+            this.validate(false);
+        }
+        reset() { this.setValue(''); }
+        focus(options) { this.shadowRoot?.querySelector('textarea')?.focus(options); }
+        blur() { this.shadowRoot?.querySelector('textarea')?.blur(); }
+        static {
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+    };
+    return DeesInputTextarea = _classThis;
+})();
+export { DeesInputTextarea };
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10ZXh0YXJlYS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWlucHV0L2RlZXMtaW5wdXQtdGV4dGFyZWEvZGVlcy1pbnB1dC10ZXh0YXJlYS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUN0RyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDdEUsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDekUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ3pELE9BQU8sNERBQTRELENBQUM7SUFLdkQsaUJBQWlCOzRCQUQ3QixhQUFhLENBQUMscUJBQXFCLENBQUM7Ozs7c0JBQ0UsYUFBYTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQ0FBckIsU0FBUSxXQUFnQzs7OztpQ0FLcEUsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3VDQUMxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBQzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztxQ0FDMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDOzJDQUMxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQzswQ0FDekMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDOzhDQUMxQixRQUFRLENBQUMsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7WUFOSCxvS0FBUyxLQUFLLDZCQUFMLEtBQUsscUZBQU07WUFDcEIsc0xBQVMsV0FBVyw2QkFBWCxXQUFXLGlHQUFNO1lBQzFCLGlLQUFTLElBQUksNkJBQUosSUFBSSxtRkFBSztZQUNsQixnTEFBUyxTQUFTLDZCQUFULFNBQVMsNkZBQU07WUFDVCxrTUFBUyxlQUFlLDZCQUFmLGVBQWUseUdBQTJDO1lBQ2xGLCtMQUFTLGNBQWMsNkJBQWQsY0FBYyx1R0FBTTtZQUN6QiwyTUFBUyxrQkFBa0IsNkJBQWxCLGtCQUFrQiwrR0FBd0U7WUFYckksNktBc0hDOzs7O1FBckhRLE1BQU0sQ0FBQyxJQUFJLEdBQUcsUUFBUSxDQUFDO1FBQ3ZCLE1BQU0sQ0FBQyxVQUFVLEdBQUcsQ0FBQyxPQUFPLENBQUMsQ0FBQztRQUM5QixNQUFNLENBQUMsV0FBVyxHQUFHLFVBQW1CLENBQUM7UUFFcEIsdUVBQWlCLEVBQUUsRUFBQztRQUFwQixJQUFTLEtBQUssMkNBQU07UUFBcEIsSUFBUyxLQUFLLGlEQUFNO1FBQ3BCLHVJQUF1QixFQUFFLEdBQUM7UUFBMUIsSUFBUyxXQUFXLGlEQUFNO1FBQTFCLElBQVMsV0FBVyx1REFBTTtRQUMxQiwrSEFBZ0IsQ0FBQyxHQUFDO1FBQWxCLElBQVMsSUFBSSwwQ0FBSztRQUFsQixJQUFTLElBQUksZ0RBQUs7UUFDbEIsa0lBQXFCLENBQUMsQ0FBQyxHQUFDO1FBQXhCLElBQVMsU0FBUywrQ0FBTTtRQUF4QixJQUFTLFNBQVMscURBQU07UUFDVCw0SkFBbUU7UUFBbkUsSUFBUyxlQUFlLHFEQUEyQztRQUFuRSxJQUFTLGVBQWUsMkRBQTJDO1FBQ2xGLHVKQUEwQixFQUFFLEdBQUM7UUFBN0IsSUFBUyxjQUFjLG9EQUFNO1FBQTdCLElBQVMsY0FBYywwREFBTTtRQUN6Qix1S0FBbUc7UUFBbkcsSUFBUyxrQkFBa0Isd0RBQXdFO1FBQW5HLElBQVMsa0JBQWtCLDhEQUF3RTtRQUMzSCxPQUFPLG9FQUFHLEtBQUssRUFBQztRQUNoQixZQUFZLENBQXNCO1FBRW5DLE1BQU0sQ0FBQyxNQUFNLEdBQUcsQ0FBQyxHQUFHLGFBQWEsQ0FBQyxVQUFVLEVBQUUsR0FBRyxDQUFBOzs7Ozs7OztHQVF2RCxDQUFDLENBQUM7UUFFSSxNQUFNO1lBQ1gsT0FBTyxJQUFJLENBQUE7MkJBQ1ksSUFBSSxDQUFDLEtBQUssY0FBYyxJQUFJLENBQUMsUUFBUSxjQUFjLElBQUksQ0FBQyxRQUFRLFdBQVcsR0FBRyxFQUFFLENBQUMsSUFBSSxDQUFDLEtBQUssRUFBRTs7aURBRXZFLElBQUksQ0FBQyxLQUFLLFVBQVUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxDQUFDLEVBQUUsSUFBSSxDQUFDLElBQUksQ0FBQzt3QkFDbkUsSUFBSSxDQUFDLFdBQVcsY0FBYyxJQUFJLENBQUMsUUFBUSxjQUFjLElBQUksQ0FBQyxRQUFRO3VCQUN2RSxJQUFJLENBQUMsS0FBSyxJQUFJLEVBQUUsaUJBQWlCLElBQUksQ0FBQyxlQUFlLEtBQUssU0FBUyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLE9BQU87O21CQUUxRixJQUFJLENBQUMsV0FBVyxVQUFVLEdBQUcsRUFBRSxDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUU7OztzQ0FHNUIsSUFBSSxDQUFDLGlCQUFpQixFQUFFOzBFQUNZLElBQUksQ0FBQyxjQUFjOztXQUVsRixDQUFDO1FBQ1YsQ0FBQztRQUVNLFVBQVUsQ0FBQyxPQUFrQztZQUNsRCxLQUFLLENBQUMsVUFBVSxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQzFCLElBQUksT0FBTyxDQUFDLEdBQUcsQ0FBQyxPQUFPLENBQUMsSUFBSSxJQUFJLENBQUMsS0FBSyxJQUFJLElBQUk7Z0JBQUUsSUFBSSxDQUFDLEtBQUssR0FBRyxFQUFFLENBQUM7UUFDbEUsQ0FBQztRQUVNLE9BQU8sQ0FBQyxPQUE2QjtZQUMxQyxLQUFLLENBQUMsT0FBTyxDQUFDLE9BQU8sQ0FBQyxDQUFDO1lBQ3ZCLE1BQU0sS0FBSyxHQUFHLElBQUksQ0FBQyxVQUFVLEVBQUUsYUFBYSxDQUFDLFVBQVUsQ0FBQyxDQUFDO1lBQ3pELElBQUksSUFBSSxDQUFDLFNBQVMsSUFBSSxDQUFDO2dCQUFFLEtBQUssRUFBRSxZQUFZLENBQUMsV0FBVyxFQUFFLE1BQU0sQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQzs7Z0JBQzdFLEtBQUssRUFBRSxlQUFlLENBQUMsV0FBVyxDQUFDLENBQUM7WUFDekMsSUFBSSxDQUFDLE9BQU8sRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLG9CQUFvQixFQUFFLFVBQVUsQ0FBQyxDQUFDLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsR0FBRyxDQUFDLENBQUMsRUFBRSxDQUFDO2dCQUN2RyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxPQUFPLElBQUksT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDO1lBQ3JELENBQUM7aUJBQU0sSUFBSSxPQUFPLENBQUMsR0FBRyxDQUFDLGlCQUFpQixDQUFDLElBQUksT0FBTyxDQUFDLEdBQUcsQ0FBQyxnQkFBZ0IsQ0FBQyxFQUFFLENBQUM7Z0JBQzNFLElBQUksQ0FBQyxZQUFZLEVBQUUsQ0FBQztZQUN0QixDQUFDO1FBQ0gsQ0FBQztRQUVPLFdBQVc7WUFDakIsSUFBSSxJQUFJLENBQUMsUUFBUTtnQkFBRSxPQUFPLEVBQUUsQ0FBQztZQUM3QixJQUFJLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLE1BQU07Z0JBQUUsT0FBTyxnQkFBZ0IsQ0FBQztZQUNqRSxJQUFJLElBQUksQ0FBQyxTQUFTLElBQUksQ0FBQyxJQUFJLElBQUksQ0FBQyxLQUFLLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxTQUFTO2dCQUFFLE9BQU8sT0FBTyxJQUFJLENBQUMsU0FBUyx1QkFBdUIsQ0FBQztZQUNuSCxNQUFNLE1BQU0sR0FBRyxJQUFJLENBQUMsa0JBQWtCLEVBQUUsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7WUFDckQsT0FBTyxNQUFNLElBQUksQ0FBQyxNQUFNLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsT0FBTyxJQUFJLG1CQUFtQixDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7UUFDOUUsQ0FBQztRQUVPLFlBQVk7WUFDbEIsTUFBTSxPQUFPLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxJQUFJLENBQUMsZUFBZSxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGNBQWMsSUFBSSxtQkFBbUIsQ0FBQyxDQUFDLENBQUMsRUFBRSxDQUFDLENBQUM7WUFDbEosSUFBSSxDQUFDLFVBQVUsRUFBRSxhQUFhLENBQUMsVUFBVSxDQUFDLEVBQUUsaUJBQWlCLENBQUMsT0FBTyxDQUFDLENBQUM7WUFDdkUsTUFBTSxLQUFLLEdBQUcsQ0FBQyxPQUFPLENBQUM7WUFDdkIsSUFBSSxLQUFLLEtBQUssSUFBSSxDQUFDLFlBQVksRUFBRSxDQUFDO2dCQUNoQyxJQUFJLENBQUMsWUFBWSxHQUFHLEtBQUssQ0FBQztnQkFDMUIsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLFdBQVcsQ0FBQyxtQkFBbUIsRUFBRSxFQUFFLE1BQU0sRUFBRSxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUUsRUFBRSxPQUFPLEVBQUUsSUFBSSxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUM7WUFDMUgsQ0FBQztRQUNILENBQUM7UUFFTSxRQUFRLENBQUMsV0FBVyxHQUFHLElBQUk7WUFDaEMsSUFBSSxXQUFXO2dCQUFFLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxDQUFDO1lBQ3JDLE1BQU0sT0FBTyxHQUFHLElBQUksQ0FBQyxXQUFXLEVBQUUsQ0FBQztZQUNuQyxJQUFJLENBQUMsY0FBYyxHQUFHLFdBQVcsQ0FBQyxDQUFDLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUM7WUFDakQsSUFBSSxDQUFDLGVBQWUsR0FBRyxXQUFXLENBQUMsQ0FBQyxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxPQUFPLENBQUMsQ0FBQyxDQUFDLFNBQVMsQ0FBQztZQUMvRSxJQUFJLENBQUMsWUFBWSxFQUFFLENBQUM7WUFDcEIsT0FBTyxDQUFDLE9BQU8sQ0FBQztRQUNsQixDQUFDO1FBRU0sYUFBYTtZQUNsQixPQUFPLElBQUksQ0FBQyxRQUFRLElBQUksQ0FBQyxDQUFDLElBQUksQ0FBQyxXQUFXLEVBQUUsSUFBSSxJQUFJLENBQUMsZUFBZSxLQUFLLFNBQVMsQ0FBQyxDQUFDO1FBQ3RGLENBQUM7UUFFTSxjQUFjO1lBQ25CLHVFQUF1RTtZQUN2RSxNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsZUFBZSxLQUFLLFNBQVMsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsUUFBUSxFQUFFLENBQUM7WUFDMUYsSUFBSSxDQUFDLEtBQUs7Z0JBQUUsSUFBSSxDQUFDLEtBQUssRUFBRSxDQUFDO1lBQ3pCLE9BQU8sS0FBSyxDQUFDO1FBQ2YsQ0FBQztRQUVPLFdBQVcsR0FBRyxHQUFTLEVBQUU7WUFDL0IsSUFBSSxJQUFJLENBQUMsUUFBUTtnQkFBRSxPQUFPO1lBQzFCLElBQUksQ0FBQyxLQUFLLEdBQUcsSUFBSSxDQUFDLFVBQVcsQ0FBQyxhQUFhLENBQUMsVUFBVSxDQUFFLENBQUMsS0FBSyxDQUFDO1lBQy9ELElBQUksQ0FBQyxRQUFRLEVBQUUsQ0FBQztZQUNoQixJQUFJLENBQUMsYUFBYSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNoQyxDQUFDLENBQUM7UUFFSyxtQkFBbUI7WUFDeEIsT0FBTyx5QkFBeUIsQ0FBQyxFQUFFLEtBQUssRUFBRSxJQUFJLENBQUMsVUFBVyxDQUFDLGFBQWEsQ0FBQyxVQUFVLENBQUUsRUFBRSxRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7Z0JBQzVHLE1BQU0sRUFBRSxLQUFLLENBQUMsRUFBRSxHQUFHLElBQUksQ0FBQyxLQUFLLEdBQUcsS0FBSyxDQUFDLENBQUMsSUFBSSxDQUFDLFFBQVEsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxDQUFDO1FBQ2hHLENBQUM7UUFFTSxRQUFRLEtBQWEsT0FBTyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztRQUN6QyxRQUFRLENBQUMsS0FBb0I7WUFDbEMsSUFBSSxDQUFDLEtBQUssR0FBRyxLQUFLLElBQUksRUFBRSxDQUFDO1lBQ3pCLElBQUksQ0FBQyxPQUFPLEdBQUcsS0FBSyxDQUFDO1lBQ3JCLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDdkIsQ0FBQztRQUNNLEtBQUssS0FBVyxJQUFJLENBQUMsUUFBUSxDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQztRQUNwQyxLQUFLLENBQUMsT0FBc0IsSUFBVSxJQUFJLENBQUMsVUFBVSxFQUFFLGFBQWEsQ0FBQyxVQUFVLENBQUMsRUFBRSxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsQ0FBQyxDQUFDO1FBQ25HLElBQUksS0FBVyxJQUFJLENBQUMsVUFBVSxFQUFFLGFBQWEsQ0FBQyxVQUFVLENBQUMsRUFBRSxJQUFJLEVBQUUsQ0FBQyxDQUFDLENBQUM7O1lBckhoRSx1REFBaUI7Ozs7O1NBQWpCLGlCQUFpQiJ9

package/dist_ts_web/elements/00group-input/dees-input-textarea/index.d.ts

@@ -0,0 +1 @@
+export * from './dees-input-textarea.js';

package/dist_ts_web/elements/00group-input/dees-input-textarea/index.js

@@ -0,0 +1,2 @@
+export * from './dees-input-textarea.js';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9kZWVzLWlucHV0LXRleHRhcmVhL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsMEJBQTBCLENBQUMifQ==

package/dist_ts_web/elements/00group-input/index.d.ts

@@ -14,6 +14,7 @@ export * from './dees-input-richtext/index.js';
 export * from './dees-input-searchselect/index.js';
 export * from './dees-input-tags/index.js';
 export * from './dees-input-text/index.js';
+export * from './dees-input-textarea/index.js';
 export * from './dees-input-toggle/index.js';
 export * from './dees-input-typelist/index.js';
 export * from './dees-input-wysiwyg.js';

package/dist_ts_web/elements/00group-input/index.js

@@ -15,8 +15,9 @@ export * from './dees-input-richtext/index.js';
 export * from './dees-input-searchselect/index.js';
 export * from './dees-input-tags/index.js';
 export * from './dees-input-text/index.js';
+export * from './dees-input-textarea/index.js';
 export * from './dees-input-toggle/index.js';
 export * from './dees-input-typelist/index.js';
 export * from './dees-input-wysiwyg.js';
 export * from './profilepicture/dees-input-profilepicture.js';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtQkFBbUI7QUFDbkIsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDRCQUE0QixDQUFDO0FBQzNDLGNBQWMsbUNBQW1DLENBQUM7QUFDbEQsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHdDQUF3QyxDQUFDO0FBQ3ZELGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLG9DQUFvQyxDQUFDO0FBQ25ELGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDhCQUE4QixDQUFDO0FBQzdDLGNBQWMsZ0NBQWdDLENBQUM7QUFDL0MsY0FBYyx5QkFBeUIsQ0FBQztBQUN4QyxjQUFjLCtDQUErQyxDQUFDIn0=
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi90c193ZWIvZWxlbWVudHMvMDBncm91cC1pbnB1dC9pbmRleC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxtQkFBbUI7QUFDbkIsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyxrQ0FBa0MsQ0FBQztBQUNqRCxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLDRCQUE0QixDQUFDO0FBQzNDLGNBQWMsbUNBQW1DLENBQUM7QUFDbEQsY0FBYyw2QkFBNkIsQ0FBQztBQUM1QyxjQUFjLHdDQUF3QyxDQUFDO0FBQ3ZELGNBQWMsa0NBQWtDLENBQUM7QUFDakQsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLG9DQUFvQyxDQUFDO0FBQ25ELGNBQWMsNEJBQTRCLENBQUM7QUFDM0MsY0FBYyw0QkFBNEIsQ0FBQztBQUMzQyxjQUFjLGdDQUFnQyxDQUFDO0FBQy9DLGNBQWMsOEJBQThCLENBQUM7QUFDN0MsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLHlCQUF5QixDQUFDO0FBQ3hDLGNBQWMsK0NBQStDLENBQUMifQ==

package/dist_ts_web/elements/00group-input/text-input-contextmenu.d.ts

@@ -0,0 +1,29 @@
+interface ITextInputContext {
+    input: HTMLInputElement | HTMLTextAreaElement;
+    disabled: boolean;
+    commit: (value: string) => void;
+}
+/** Shared plain-text editing commands for single- and multiline fields. */
+export declare const textInputContextMenuItems: ({ input, disabled, commit }: ITextInputContext) => ({
+    name: string;
+    iconName: string;
+    shortcut: string;
+    disabled: boolean;
+    action: () => Promise<void>;
+    divider?: undefined;
+} | {
+    divider: true;
+    name?: undefined;
+    iconName?: undefined;
+    shortcut?: undefined;
+    disabled?: undefined;
+    action?: undefined;
+} | {
+    name: string;
+    iconName: string;
+    shortcut: string;
+    action: () => void;
+    disabled?: undefined;
+    divider?: undefined;
+})[];
+export {};

package/dist_ts_web/elements/00group-input/text-input-contextmenu.js

@@ -0,0 +1,29 @@
+/** Shared plain-text editing commands for single- and multiline fields. */
+export const textInputContextMenuItems = ({ input, disabled, commit }) => {
+    const selectedText = () => input.value.substring(input.selectionStart ?? 0, input.selectionEnd ?? 0);
+    const replaceSelection = (text) => {
+        if (disabled || input.disabled)
+            return;
+        input.setRangeText(text, input.selectionStart ?? 0, input.selectionEnd ?? 0, 'end');
+        commit(input.value);
+    };
+    return [
+        { name: 'Cut', iconName: 'lucide:Scissors', shortcut: 'Cmd+X', disabled: disabled || !selectedText(), action: async () => {
+                if (disabled || input.disabled)
+                    return;
+                await navigator.clipboard.writeText(selectedText());
+                replaceSelection('');
+            } },
+        { name: 'Copy', iconName: 'lucide:Copy', shortcut: 'Cmd+C', disabled: !selectedText(), action: async () => {
+                await navigator.clipboard.writeText(selectedText());
+            } },
+        { name: 'Paste', iconName: 'lucide:ClipboardPaste', shortcut: 'Cmd+V', disabled, action: async () => {
+                if (disabled || input.disabled)
+                    return;
+                replaceSelection(await navigator.clipboard.readText());
+            } },
+        { divider: true },
+        { name: 'Select All', iconName: 'lucide:TextCursorInput', shortcut: 'Cmd+A', action: () => input.select() },
+    ];
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dC1pbnB1dC1jb250ZXh0bWVudS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWlucHV0L3RleHQtaW5wdXQtY29udGV4dG1lbnUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBTUEsMkVBQTJFO0FBQzNFLE1BQU0sQ0FBQyxNQUFNLHlCQUF5QixHQUFHLENBQUMsRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLE1BQU0sRUFBcUIsRUFBRSxFQUFFO0lBQzFGLE1BQU0sWUFBWSxHQUFHLEdBQUcsRUFBRSxDQUFDLEtBQUssQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLEtBQUssQ0FBQyxjQUFjLElBQUksQ0FBQyxFQUFFLEtBQUssQ0FBQyxZQUFZLElBQUksQ0FBQyxDQUFDLENBQUM7SUFDckcsTUFBTSxnQkFBZ0IsR0FBRyxDQUFDLElBQVksRUFBRSxFQUFFO1FBQ3hDLElBQUksUUFBUSxJQUFJLEtBQUssQ0FBQyxRQUFRO1lBQUUsT0FBTztRQUN2QyxLQUFLLENBQUMsWUFBWSxDQUFDLElBQUksRUFBRSxLQUFLLENBQUMsY0FBYyxJQUFJLENBQUMsRUFBRSxLQUFLLENBQUMsWUFBWSxJQUFJLENBQUMsRUFBRSxLQUFLLENBQUMsQ0FBQztRQUNwRixNQUFNLENBQUMsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO0lBQ3RCLENBQUMsQ0FBQztJQUNGLE9BQU87UUFDTCxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsUUFBUSxFQUFFLGlCQUFpQixFQUFFLFFBQVEsRUFBRSxPQUFPLEVBQUUsUUFBUSxFQUFFLFFBQVEsSUFBSSxDQUFDLFlBQVksRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLElBQUksRUFBRTtnQkFDdkgsSUFBSSxRQUFRLElBQUksS0FBSyxDQUFDLFFBQVE7b0JBQUUsT0FBTztnQkFDdkMsTUFBTSxTQUFTLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO2dCQUNwRCxnQkFBZ0IsQ0FBQyxFQUFFLENBQUMsQ0FBQztZQUN2QixDQUFDLEVBQUU7UUFDSCxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsUUFBUSxFQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLFFBQVEsRUFBRSxDQUFDLFlBQVksRUFBRSxFQUFFLE1BQU0sRUFBRSxLQUFLLElBQUksRUFBRTtnQkFDeEcsTUFBTSxTQUFTLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxZQUFZLEVBQUUsQ0FBQyxDQUFDO1lBQ3RELENBQUMsRUFBRTtRQUNILEVBQUUsSUFBSSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsdUJBQXVCLEVBQUUsUUFBUSxFQUFFLE9BQU8sRUFBRSxRQUFRLEVBQUUsTUFBTSxFQUFFLEtBQUssSUFBSSxFQUFFO2dCQUNsRyxJQUFJLFFBQVEsSUFBSSxLQUFLLENBQUMsUUFBUTtvQkFBRSxPQUFPO2dCQUN2QyxnQkFBZ0IsQ0FBQyxNQUFNLFNBQVMsQ0FBQyxTQUFTLENBQUMsUUFBUSxFQUFFLENBQUMsQ0FBQztZQUN6RCxDQUFDLEVBQUU7UUFDSCxFQUFFLE9BQU8sRUFBRSxJQUFhLEVBQUU7UUFDMUIsRUFBRSxJQUFJLEVBQUUsWUFBWSxFQUFFLFFBQVEsRUFBRSx3QkFBd0IsRUFBRSxRQUFRLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsQ0FBQyxLQUFLLENBQUMsTUFBTSxFQUFFLEVBQUU7S0FDNUcsQ0FBQztBQUNKLENBQUMsQ0FBQyJ9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@design.estate/dees-catalog",
-  "version": "9.6.2",
+  "version": "9.8.0",
   "private": false,
   "description": "A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
   "main": "dist_ts_web/index.js",
@@ -45,7 +45,7 @@
   },
   "devDependencies": {
     "@design.estate/dees-wcctools": "^3.9.4",
-    "@git.zone/tsbuild": "^4.4.2",
+    "@git.zone/tsbuild": "^4.4.3",
     "@git.zone/tsbundle": "^2.13.0",
     "@git.zone/tstest": "^6.0.0",
     "@git.zone/tswatch": "^3.3.5",

package/readme.md

@@ -31,6 +31,7 @@ switcher**, **view-toggle**, and **single-selection toggle** all lead to
 | Show products with quantities or select a kit | [`dees-shopping-productcard`](#deesshoppingproductcard) | Independent quantity and selection events; the application owns the cart and inventory. |
 | See components composed into one working application | [Integrated App UI demo](#integrated-app-ui-demo) | Shared state, layout presets, navigation, service tabs, charts, files, settings and activity. Start here before assembling a shell. |
 | Collect and submit form values | [`dees-form`](#deesform), [`dees-form-submit`](#deesformsubmit) | Give each input a stable `key`; use the form's collection and validation flow. |
+| Edit multiline plain text | [`dees-input-textarea`](#deesinputtextarea) | Notes and descriptions as strings, with validation and form reset; no rich-text editor. |
 | Search, filter, sort, edit and act on records | [`dees-table`](#deestable) | Use its columns, selection and data actions before building a table toolbar or row-action layer. |
 | Show metrics, health and operational context | [`dees-statsgrid`](#deesstatsgrid), [`dees-dataview-statusobject`](#deesdataviewstatusobject) | Metric tiles versus structured status details and actions. |
 | Plot a time series, compare categories, show proportions, capacity or profiles | [Chart components](#visualization-components) | Area, bar, donut, gauge and radar have distinct data contracts. |
@@ -105,10 +106,13 @@ node scripts/check-packed-consumer.mjs
 
 `pnpm test` rebuilds the package first. The consumer check installs its tarball in
 an isolated temporary project and checks the table, settings, modal, PDF viewer,
-PDF thumbnail and harness message-list declarations with TypeScript 5.9.3 and
+PDF thumbnail, harness message-list, datepicker, textarea and composer declarations with TypeScript 5.9.3 and
 6.0.3, `strict: true` and `skipLibCheck: false`. It also runs Chromium construction,
 reconnect, selection/copy and real keyboard checks against the installed modules
-and bundle. No source aliases or vendor declarations are used. Pass an existing
+and bundle. The packed tests also exercise strict calendar validation, multiline
+form values and attachment capabilities. Trusted keyboard entry inside a native
+dialog is checked in UTC, Los Angeles, Berlin and São Paulo. No source aliases or
+vendor declarations are used. Pass an existing
 release tarball as the script's argument to verify those exact bytes.
 
 ## Component index
@@ -195,6 +199,7 @@ task guide and examples deliberately; the generated table does not replace them.
 | `dees-input-richtext` | input | [DeesInputRichtext](#deesinputrichtext) | [Source](ts_web/elements/00group-input/dees-input-richtext/component.ts) |
 | `dees-input-tags` | input | [DeesInputTags](#deesinputtags) | [Source](ts_web/elements/00group-input/dees-input-tags/dees-input-tags.ts) |
 | `dees-input-text` | input | [DeesInputText](#deesinputtext) | [Source](ts_web/elements/00group-input/dees-input-text/dees-input-text.ts) |
+| `dees-input-textarea` | input | [DeesInputTextarea](#deesinputtextarea) | [Source](ts_web/elements/00group-input/dees-input-textarea/dees-input-textarea.ts) |
 | `dees-input-toggle` | input | [DeesInputToggle](#deesinputtoggle) | [Source](ts_web/elements/00group-input/dees-input-toggle/dees-input-toggle.ts) |
 | `dees-input-typelist` | input | [DeesInputTypelist](#deesinputtypelist) | [Source](ts_web/elements/00group-input/dees-input-typelist/dees-input-typelist.ts) |
 | `dees-input-wysiwyg` | input | [DeesInputWysiwyg](#deesinputwysiwyg) | [Source](ts_web/elements/00group-input/dees-input-wysiwyg/dees-input-wysiwyg.ts) |
@@ -512,8 +517,13 @@ Floating action bar for contextual actions.
 #### `DeesForm`
 Collect keyed inputs with `await form.collectFormData()` or receive `event.detail.data`
 from `formData` when a `dees-form-submit` is activated. `changeSubject` publishes
-updated form data as fields change. Required values control the submit button;
-component-specific validation is owned by the field. There is no `formValidation` event.
+updated form data as fields change. Required values and fields implementing
+`checkValidity()` control the submit button. Invalid fields implementing
+`reportValidity()` receive a validation/focus request on attempted submission.
+Fields notify the form with a bubbling `validation-change` event when their
+validity changes; this does not publish a successful value change. Disabled fields
+do not block submission. `reset()` calls each field's reset method when available.
+There is no `formValidation` event.
 
 ```typescript
 html`<dees-form @formData=${(event) => savePreferences(event.detail.data)}>
@@ -577,6 +587,29 @@ Text input field with validation, info tooltips, description text, and context m
 
 > 💡 **All input components** share these common properties from `DeesInputBase`: `key`, `label`, `required`, `disabled`, `infoText`, `description`, `layoutMode`, `labelPosition`.
 
+#### `DeesInputTextarea`
+Plain multiline string input for notes and descriptions. Uses a native textarea;
+line breaks, whitespace and literal HTML remain plain text. It does not load Tiptap.
+The field uses the shared input styling, a top label and vertical resizing.
+
+```typescript
+html`<dees-input-textarea key="notes" label="Payment notes"
+  .value=${'Invoice 42\nReference: equipment'} .rows=${3} .maxLength=${1000}
+  .disabled=${false} .required=${true}
+  description="Stored as plain text."
+  .validationFunction=${(value: string) => ({ valid: value.length <= 1000, message: 'Use up to 1000 characters.' })}
+></dees-input-textarea>`
+```
+
+`value` defaults to `''`, `rows` to `3`, and `maxLength` to `-1` (unlimited).
+Use `changeSubject` or collect the keyed string with `dees-form`. Enter inserts a
+line break inside forms. Cut, Copy, Paste and Select All use plain-text editing.
+`getValue()`, `setValue(string | null)`, `reset()`, `focus()` and `blur()` are supported;
+null and reset clear the field. Required, length and custom rules integrate with
+`checkValidity()`, `reportValidity()`, native custom validity, `aria-invalid` and a
+live validation message. Hosts can set `validationState` (`valid`, `warn`, `invalid`)
+and `validationText` for server feedback, which persists until the next value change.
+
 #### `DeesInputCheckbox`
 Checkbox input component for boolean values.
 
@@ -841,6 +874,20 @@ Profile picture input with cropping, zoom, and image processing.
 #### `DeesInputDatepicker`
 Date and time picker component with calendar interface and manual typing support.
 Use `changeSubject` for field updates, or collect `.value` through `dees-form`.
+Typing validates a draft; **blur or Enter commits** a valid date. Invalid calendar
+fields (including non-leap February 29 and February 31) never roll into another
+month. Invalid draft text remains visible with an accessible message, and the last
+committed value remains unchanged without a successful `changeSubject` emission.
+`checkValidity()` and `reportValidity()` include draft validity, so `dees-form`
+cannot submit a stale date while its displayed draft is invalid.
+
+`minDate` and `maxDate` are inclusive local calendar-day bounds. `disabledDates`
+uses the same calendar-day comparison for typing, day buttons and Today. ISO
+date-only values are interpreted locally, without a UTC-midnight shift. Empty
+input or Clear clears the value; `required` then makes it invalid. `setValue()`
+and `reset()` discard drafts and synchronize the field and next-opened calendar.
+Alt+Down opens the calendar; Escape closes it. The popup also works inside native
+dialogs.
 
 ```typescript
 <dees-input-datepicker
@@ -2546,7 +2593,7 @@ Scrollable streaming-safe log. Up to 40 canonical entries (`messages` + `permiss
 
 `refreshMessages(ids?)` reconciles in-place host mutations without replacing canonical objects. With IDs, it refreshes only matching message rows that are currently mounted; matching offscreen rows remain unmounted and use the mutated canonical objects when later mounted. With IDs omitted, it rebuilds structural transcript state and refreshes all mounted rows. `[]` is a no-op.
 
-Producers with authoritative source chronology can set `IHarnessMessage.order` to `{ messageIndex, partIndex }`; explicitly ordered messages retain that relative order while timestamps continue to place legacy messages and ancillary cards. Consecutive tool calls use one generic responsive-grid pipeline at their chronological position, partitioned by descriptor layout: compact tools share rows with compact tools, subagents share rows only with subagents, and terminal plus file-write cards span a whole row. Consecutive same-layout runs are always capped at four cards per group row, even when their tool kinds differ. Columns respond to transcript content width rather than the viewport, and status changes never regroup cards. Untouched projected subtask cards collapse individually on completion with the normal disclosure animation; other cards retain their descriptor or user-selected disclosure state. Auto-follow responds to streamed growth but does not repeatedly repin while a disclosure shrinks. Permission requests, questions, and nested-stream limits behave as before. Props: `messages`, `permissions`/`permissionsBusy`, `questions`, `status`, `viewState`, `transcriptKey`, `hasEarlierMessages`, `loadingEarlier`, `autoFollow`, `hideScrollbar`, `fadeScrollEdges`, `showRoles`, `showTimestamps`, `allowSubtaskStreams`, `markdownWhileStreaming` (default `true`), `emptyTitle`/`emptyText` (+ `slot="empty"`). Native browser find and selection cover the mounted window; hosts that require complete-history search or copy should operate on their canonical `messages`, `permissions`, and `questions` models.
+Producers with authoritative source chronology can set `IHarnessMessage.order` to `{ messageIndex, partIndex }`; explicitly ordered messages retain that relative order while timestamps continue to place legacy messages and ancillary cards. Consecutive tool calls use one generic responsive-grid pipeline at their chronological position, partitioned by descriptor layout: compact tools share rows with compact tools, subagents share rows only with subagents, and terminal plus file-write cards span a whole row. Consecutive same-layout runs are always capped at four cards per group row, even when their tool kinds differ. Columns respond to the row's own width rather than the viewport, and status changes never regroup cards. Because a compact group sits inside the content measure, its column count is bounded by that measure — two columns at the 820px default; the wider three- and four-column steps apply when a host widens `--dees-harness-content-width`. Rows are held to a reading measure — `--dees-harness-content-width`, default `820px`, capped at the available width — while terminal and file-write rows keep the full pane, so prose stays readable and diffs and command output get the room they need. A subagent group takes the pane only from three cards upward; one or two stay on the measure. The docked composer keeps its full-bleed bar and insets its content to the same measure, so the prompt lines up with the messages above it. Set the custom property on the chat or the list to widen or disable the column; it is read when rows are measured, so change it at mount rather than while a virtualized transcript is scrolled. Untouched projected subtask cards collapse individually on completion with the normal disclosure animation; other cards retain their descriptor or user-selected disclosure state. Auto-follow responds to streamed growth but does not repeatedly repin while a disclosure shrinks. Permission requests, questions, and nested-stream limits behave as before. Props: `messages`, `permissions`/`permissionsBusy`, `questions`, `status`, `viewState`, `transcriptKey`, `hasEarlierMessages`, `loadingEarlier`, `autoFollow`, `hideScrollbar`, `fadeScrollEdges`, `showRoles`, `showTimestamps`, `allowSubtaskStreams`, `markdownWhileStreaming` (default `true`), `emptyTitle`/`emptyText` (+ `slot="empty"`). Native browser find and selection cover the mounted window; hosts that require complete-history search or copy should operate on their canonical `messages`, `permissions`, and `questions` models.
 
 #### `DeesHarnessMessage`
 
@@ -2560,7 +2607,7 @@ One message: role accent, markdown (assistant default, `message.markdown` overri
 
 #### `DeesHarnessToolCard`
 
-Tool-call card: shared chrome (icon, label, subtitle, status pill, duration, MCP badges) with a per-kind body. Kind resolution goes through `DeesHarnessToolRegistry` (see below); bodies for the seeded kinds — terminal, file-read, file-write (renders a before/after diff via `dees-dataview-codebox` when the input carries previous content), file-delete, dir-list, browser (inline screenshots), http, json, search, subtask, project-task, todo, mcp, unknown — live in `renderers.ts`. File-write cards retain the user's inline/split choice while the same call updates. Numeric patch hunks preserve their source line numbers; patches and replacement snippets without coordinates hide gutters rather than presenting fabricated positions. Overflowing subtitles use a 40px right-edge fade and reveal the full line on hover plus once after a two-second initial delay. Expand/collapse always uses a smooth disclosure transition. Initially closed bodies mount lazily on first expansion, then retain the same DOM and become inert plus `aria-hidden` while closed. Long outputs truncate at 6,000 chars with a "Show all" expander. Terminal and error cards open by default. Terminal output uses a black inner log surface and follows the live tail after reaching the card-height cap. Scrolling upward detaches the tail; leaving the card returns to the bottom after five seconds, while re-entering cancels that pending return. Terminal calls may provide `exitCode` separately when `output` is one combined process stream; the renderer retains support for `{ stdout, stderr, exitCode }` output objects.
+Tool-call card: shared chrome (icon, label, subtitle, status pill, duration, MCP badges) with a per-kind body. Kind resolution goes through `DeesHarnessToolRegistry` (see below); bodies for the seeded kinds — terminal, file-read, file-write (renders a before/after diff via `dees-dataview-codebox` when the input carries previous content), file-delete, dir-list, browser (inline screenshots), http, json, search, subtask, project-task, todo, mcp, unknown — live in `renderers.ts`. File-write cards retain the user's inline/split choice while the same call updates. Numeric patch hunks preserve their source line numbers; patches and replacement snippets without coordinates hide gutters rather than presenting fabricated positions. A producer-supplied `IHarnessToolCall.title` leads the subtitle when present — a harness's own one-line description of the call, such as `Read SKILL.md` for a shell invocation — and the descriptor-derived line stays reachable as the hover tooltip; a blank title falls back to the derived line. Overflowing subtitles use a 40px right-edge fade and reveal the full line on hover plus once after a two-second initial delay. Expand/collapse always uses a smooth disclosure transition. Initially closed bodies mount lazily on first expansion, then retain the same DOM and become inert plus `aria-hidden` while closed. Long outputs truncate at 6,000 chars with a "Show all" expander. Terminal and error cards open by default, and a terminal card collapses itself again once its command can be proven to have succeeded, meaning an exit code of 0. A non-zero exit, an error, a stopped command, and a command that reports no exit code at all keep their output on screen — an absent exit code is not evidence of success, so a producer that reports a failed command as completed never has that failure hidden behind a summary. A collapsed terminal shows a one-line outcome (exit code, line count, and the last meaningful line) beneath the command. It is derived from the call's own output rather than from any producer-supplied description, so it is present for every producer. An explicit expand or collapse by the user always wins and is never overridden when the call settles. Descriptors opt in through `collapseWhenFinished` and supply the line through `summary`. Terminal output uses a black inner log surface and follows the live tail after reaching the card-height cap. Scrolling upward detaches the tail; leaving the card returns to the bottom after five seconds, while re-entering cancels that pending return. Terminal calls may provide `exitCode` separately when `output` is one combined process stream; the renderer retains support for `{ stdout, stderr, exitCode }` output objects. A subagent card is capped by `--dees-harness-active-subtask-height` (default `320px`) rather than fixed to it: a settled agent whose brief and result fit sizes to its own text, and only content past the cap hands the overflow to the panels, which scroll with a hidden scrollbar and a fade mask at the clipped edge. Both the Agent Brief and the Result carry that affordance, and the drill-in action stays pinned at the bottom of the card. A live child keeps the full window so its streaming transcript has a stable area to scroll in.
 
 After mutating a canonical tool call in place, call `refreshCall()`. It refreshes the mounted card, any mounted nested subtask transcript, and any open fullscreen card while retaining the same canonical call and nested-message object references; it does not clone or replace them.
 
@@ -2627,6 +2674,14 @@ Place optional reply or task context in `slot="context"` to integrate it above t
 
 Prompt input: autogrow textarea, attachment picker/paste/drag-drop with configurable `maxAttachmentCount`, `maxAttachmentBytes` (10 MB default), and `maxTotalAttachmentBytes` (30 MB default), image/text/binary classification, optional account, model, and reasoning-effort dropdowns, Cmd/Ctrl+Enter to send. Attachment count is unlimited unless the host sets it. `dees-harness-chat` forwards all three limits and `suggestions` to its composer. Controlled component — the host owns `value`, `attachments`, `suggestions`, `account`, and the other selections. Set `accountOptions` to `{ label, value }[]` so the dropdown displays readable labels while events retain opaque stable account values. Account changes emit `harness-account-change` with `{ account }`; `harness-send` includes optional `account` alongside `model` and `reasoningEffort`.
 
+For text-only hosts, set **`.attachmentsEnabled=${false}`** on either
+`dees-harness-composer` or `dees-harness-chat` (a JavaScript property, default `true`).
+This removes the attachment action, file input and chips; rejects file paste/drop
+and `addFiles()` ingestion; cancels queued/in-flight additions; and sends an empty
+`attachments` array for both send and input steering. Normal text paste still works,
+and file drops cannot navigate away from the page. The host-owned attachments array
+is retained, so re-enabling the capability restores its chips without data loss.
+
 Set `suggestions` to `IHarnessComposerSuggestion[]`, where each item is `{ label, value, description? }`. The composer does not filter or generate suggestions: listen for `harness-input`, update the controlled `value`, and provide a fresh filtered array. While the textarea owns focus, the listbox stays anchored above the composer; moving focus to another control closes it. Arrow keys wrap through rows, Enter chooses the active row, and Escape dismisses the current list until the next text input or fresh suggestions array. Choosing a row sets `value` to the suggestion's `value` and emits the existing bubbling/composed `harness-input` event; it does not emit `harness-send`.
 
 While `busy`, Stop renders as an additional button and Send stays available so hosts can queue messages. Set `queueingEnabled` to label busy sends **Queue next**. Set `inputSteeringEnabled` to add a separate **Steer now** button that emits `harness-steer-input` with the same `IHarnessComposerSendDetail` as `harness-send`; it requires a nonempty draft. The host binds that input to its active turn and owns acknowledgment and clearing the draft. Both capabilities default false and are forwarded by `dees-harness-chat`.

package/scripts/check-packed-consumer.mjs

@@ -29,10 +29,13 @@ writeFileSync(join(consumer, 'package.json'), JSON.stringify({
   },
 }, null, 2));
 writeFileSync(join(consumer, 'pnpm-workspace.yaml'), 'packages:\n  - "."\n');
-// Run the same construction regression against installed JavaScript, not sources.
-const browserTest = readFileSync(join(root, 'test/test.table-construction.browser.ts'), 'utf8')
-  .replaceAll('../ts_web/', '@design.estate/dees-catalog/dist_ts_web/');
-writeFileSync(join(consumer, 'test.table-construction.browser.ts'), browserTest);
+// Run the same regressions against installed JavaScript, not sources.
+const browserTests = ['table-construction', 'datepicker-validation', 'textarea', 'composer-attachments'];
+for (const name of browserTests) {
+  const browserTest = readFileSync(join(root, `test/test.${name}.browser.ts`), 'utf8')
+    .replaceAll('../ts_web/', '@design.estate/dees-catalog/dist_ts_web/');
+  writeFileSync(join(consumer, `test.${name}.browser.ts`), browserTest);
+}
 console.log(`Packed consumer: ${consumer}`);
 run(['install', '--ignore-scripts']);
 run(['exec', 'tsc', '--version']);
@@ -41,5 +44,5 @@ run(['exec', 'tsc', '--project', 'tsconfig.json']);
 run(['add', '--save-dev', '--save-exact', '--ignore-scripts', 'typescript@6.0.3']);
 run(['exec', 'tsc', '--version']);
 run(['exec', 'tsc', '--project', 'tsconfig.json']);
-run(['exec', 'tstest', 'test.table-construction.browser.ts', '--verbose', '--logfile']);
+run(['exec', 'tstest', 'test.*.browser.ts', '--verbose', '--logfile']);
 run(['exec', 'node', 'browser.mjs']);

package/ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@design.estate/dees-catalog',
-  version: '9.6.2',
+  version: '9.8.0',
   description: 'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
 }

package/ts_web/demos/inputs.ts

@@ -4,20 +4,21 @@ import { demoPage } from './templates.js';
 import type { TFormData } from '../elements/00group-form/dees-form/dees-form.js';
 
 /** One fixture vocabulary for the showcase and each input's focused demo. */
-export type TInputExample = 'text' | 'dropdown' | 'datepicker' | 'checkbox' | 'toggle' | 'radiogroup' | 'multitoggle' | 'quantityselector' | 'phone' | 'iban' | 'tags' | 'typelist' | 'list' | 'fileupload' | 'profilepicture' | 'richtext' | 'wysiwyg' | 'code';
+export type TInputExample = 'text' | 'textarea' | 'dropdown' | 'datepicker' | 'checkbox' | 'toggle' | 'radiogroup' | 'multitoggle' | 'quantityselector' | 'phone' | 'iban' | 'tags' | 'typelist' | 'list' | 'fileupload' | 'profilepicture' | 'richtext' | 'wysiwyg' | 'code';
 
 const titles: Record<TInputExample, string> = {
-  text: 'Text fields', dropdown: 'Dropdowns', datepicker: 'Dates & times', checkbox: 'Checkboxes', toggle: 'Switches',
+  text: 'Text fields', textarea: 'Multiline text', dropdown: 'Dropdowns', datepicker: 'Dates & times', checkbox: 'Checkboxes', toggle: 'Switches',
   radiogroup: 'Radio choices', multitoggle: 'Segmented controls', quantityselector: 'Quantities', phone: 'Phone numbers',
   iban: 'IBAN', tags: 'Tags', typelist: 'Type lists', list: 'Editable lists', fileupload: 'File uploads',
   profilepicture: 'Profile pictures', richtext: 'Rich text', wysiwyg: 'Block editor', code: 'Code editor',
 };
-const compound: TInputExample[] = ['tags', 'typelist', 'list', 'fileupload', 'profilepicture', 'richtext', 'wysiwyg', 'code'];
+const compound: TInputExample[] = ['textarea', 'tags', 'typelist', 'list', 'fileupload', 'profilepicture', 'richtext', 'wysiwyg', 'code'];
 const visibility = [{ key: 'team', option: 'Team members' }, { key: 'private', option: 'Only me' }, { key: 'public', option: 'Anyone with the link' }];
 
 export const inputExample = (kind: TInputExample, disabled = false): TemplateResult => {
   switch (kind) {
     case 'text': return html`<dees-input-text key="name" label="Workspace name" value="Design studio" required ?disabled=${disabled} description="The name your teammates see."></dees-input-text>`;
+    case 'textarea': return html`<dees-input-textarea key="paymentNotes" label="Payment notes" .value=${'Invoice 2026-042\nReference: studio equipment'} .rows=${3} .maxLength=${1000} ?disabled=${disabled} description="Plain text. Line breaks are preserved."></dees-input-textarea>`;
     case 'dropdown': return html`<dees-input-dropdown key="visibility" label="Visible to" .options=${visibility} .selectedOption=${visibility[0]} ?disabled=${disabled}></dees-input-dropdown>`;
     case 'datepicker': return html`<dees-input-datepicker key="review" label="Next review" value="2026-09-14T09:00:00" .enableTime=${true} timeFormat="24h" .minuteIncrement=${15} ?disabled=${disabled}></dees-input-datepicker>`;
     case 'checkbox': return html`<dees-input-checkbox key="digest" label="Include a weekly summary" .value=${true} ?disabled=${disabled}></dees-input-checkbox>`;
@@ -96,7 +97,7 @@ export class DeesDemoInputWorkspace extends DeesElement {
           <dees-form @formData=${this.submit} style="gap:0">
             ${this.section('General', 'Make this space your own.', ['text', 'dropdown', 'datepicker'])}
             ${this.section('Your team', 'A setup that fits the way you work.', ['radiogroup', 'quantityselector', 'multitoggle', 'toggle', 'checkbox'])}
-            ${this.section('Profile & billing', 'Your picture and contact details.', ['profilepicture', 'phone', 'iban'])}
+            ${this.section('Profile & billing', 'Your picture and contact details.', ['profilepicture', 'phone', 'iban', 'textarea'])}
             ${this.section('Organization', 'Small details that keep work moving.', ['tags', 'typelist', 'list'])}
             ${this.section('Documents', 'The context behind the work.', ['fileupload', 'richtext', 'wysiwyg'])}
             ${this.section('Automation', 'Fine-tune the workspace configuration.', ['code'])}

package/ts_web/elements/00group-appui/dees-appui/dees-appui.ts

@@ -1134,6 +1134,10 @@ export class DeesAppui extends DeesElement {
 
     // Resolve the initial route once; a deep link takes precedence over the default.
     const initialRoute = this.viewRegistry.findByRoute(window.location.hash.slice(1));
+    const initialViewId = initialRoute?.view.id ?? config.defaultView;
+    // Mark the menu before it first renders: its first-tab auto-selection would otherwise
+    // queue a navigation that races the initial route and can replace a deep link.
+    if (initialViewId) this.setMainMenuSelection(initialViewId);
     if (initialRoute) {
       void this.queueNavigation(initialRoute.view.id, initialRoute.params, initialRoute.query, 'replace');
     } else if (config.defaultView) {