@design.estate/dees-catalog 9.6.2 → 9.7.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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVlcy1pbnB1dC10ZXh0YXJlYS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3RzX3dlYi9lbGVtZW50cy8wMGdyb3VwLWlucHV0L2RlZXMtaW5wdXQtdGV4dGFyZWEvZGVlcy1pbnB1dC10ZXh0YXJlYS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7O0FBQUEsT0FBTyxFQUFFLGFBQWEsRUFBRSxRQUFRLEVBQUUsSUFBSSxFQUFFLEdBQUcsRUFBdUIsTUFBTSw2QkFBNkIsQ0FBQztBQUN0RyxPQUFPLEVBQUUsYUFBYSxFQUFFLE1BQU0sdUNBQXVDLENBQUM7QUFDdEUsT0FBTyxFQUFFLHlCQUF5QixFQUFFLE1BQU0sOEJBQThCLENBQUM7QUFDekUsT0FBTyxFQUFFLFFBQVEsRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQ3pELE9BQU8sNERBQTRELENBQUM7SUFLdkQsaUJBQWlCOzRCQUQ3QixhQUFhLENBQUMscUJBQXFCLENBQUM7Ozs7c0JBQ0UsYUFBYTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7OztpQ0FBckIsU0FBUSxXQUFnQzs7OztpQ0FLcEUsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDO3VDQUMxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLENBQUM7Z0NBQzFCLFFBQVEsQ0FBQyxFQUFFLElBQUksRUFBRSxNQUFNLEVBQUUsQ0FBQztxQ0FDMUIsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDOzJDQUMxQixRQUFRLENBQUMsRUFBRSxJQUFJLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxJQUFJLEVBQUUsQ0FBQzswQ0FDekMsUUFBUSxDQUFDLEVBQUUsSUFBSSxFQUFFLE1BQU0sRUFBRSxDQUFDOzhDQUMxQixRQUFRLENBQUMsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLENBQUM7WUFOSCxvS0FB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

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.7.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",

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
@@ -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.7.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-form/dees-form/dees-form.ts

@@ -13,6 +13,7 @@ import { DeesInputCheckbox } from '../../00group-input/dees-input-checkbox/dees-
 import { DeesInputCode } from '../../00group-input/dees-input-code/dees-input-code.js';
 import { DeesInputDatepicker } from '../../00group-input/dees-input-datepicker/index.js';
 import { DeesInputText } from '../../00group-input/dees-input-text/dees-input-text.js';
+import { DeesInputTextarea } from '../../00group-input/dees-input-textarea/dees-input-textarea.js';
 import { DeesInputQuantitySelector } from '../../00group-input/dees-input-quantityselector/dees-input-quantityselector.js';
 import { DeesInputRadiogroup } from '../../00group-input/dees-input-radiogroup/dees-input-radiogroup.js';
 import { DeesInputDropdown } from '../../00group-input/dees-input-dropdown/dees-input-dropdown.js';
@@ -44,6 +45,7 @@ const FORM_INPUT_TYPES = [
   DeesInputQuantitySelector,
   DeesInputRadiogroup,
   DeesInputText,
+  DeesInputTextarea,
   DeesInputToggle,
   DeesInputTypelist,
   DeesInputTags,
@@ -65,6 +67,9 @@ export interface IFormCompatibleElement extends HTMLElement {
   };
   getValue?: () => unknown;
   setValue?: (value: unknown) => void;
+  checkValidity?: () => boolean;
+  reportValidity?: () => boolean;
+  reset?: () => void;
 }
 
 export type TFormDataValue =
@@ -96,6 +101,7 @@ export type TFormInputElement =
   | DeesInputQuantitySelector
   | DeesInputRadiogroup
   | DeesInputText
+  | DeesInputTextarea
   | DeesInputToggle
   | DeesInputTypelist
   | DeesInputTags
@@ -281,7 +287,9 @@ export class DeesForm extends DeesElement {
   public async updateRequiredStatus() {
     let requiredOK = true;
     for (const childArg of this.getFormElements()) {
-      if (childArg.required && !getFormElementValue(childArg)) {
+      if (childArg.disabled) continue;
+      if ((childArg.required && !getFormElementValue(childArg))
+        || (childArg as IFormCompatibleElement).checkValidity?.() === false) {
         requiredOK = false;
       }
     }
@@ -312,6 +320,15 @@ export class DeesForm extends DeesElement {
   }
 
   public async gatherAndDispatch() {
+    for (const child of this.getFormElements()) {
+      if (child.disabled) continue;
+      const input = child as IFormCompatibleElement;
+      if (input.checkValidity?.() === false) {
+        input.reportValidity?.();
+        child.focus();
+        return;
+      }
+    }
     const valueObject = await this.collectFormData();
     const formDataEvent = new CustomEvent('formData', {
       detail: {
@@ -371,12 +388,18 @@ export class DeesForm extends DeesElement {
     const inputChildren = this.getFormElements();
 
     for (const inputChild of inputChildren) {
-      setFormElementValue(inputChild, null);
+      const input = inputChild as IFormCompatibleElement;
+      if (input.reset) input.reset();
+      else setFormElementValue(inputChild, null);
     }
     this.setStatus('normal', 'Submit');
+    void this.updateRequiredStatus();
   }
 
   public async addBehaviours() {
+    this.addEventListener('validation-change', event => {
+      if (this.getFormElements().includes(event.target as TFormInputElement)) void this.updateRequiredStatus();
+    });
     // Use event delegation
     this.addEventListener('keydown', (event: KeyboardEvent) => {
       const target = event.target as DeesElement;