tyrell-components 1.0.0-TC56 → 1.0.0-TC58

package/lib/components/file-upload.d.ts

@@ -81,9 +81,12 @@ export declare class TyFileUpload extends TyComponent<FileUploadState> implement
     protected onFormReset(): void;
     protected updateFormValue(): void;
     /** Report `required` to the owning form, like ty-input and ty-textarea
-        do — without this the asterisk showed but submission went through. */
+        do — without this the asterisk showed but submission went through.
+        The message is a native file input's. */
     private updateValidity;
     protected getFormValue(): FormData | string | null;
+    /** Focus the drop zone: the host itself isn't focusable. */
+    focus(options?: FocusOptions): void;
     /**
      * Match a file against the `accept` attribute the way native inputs do:
      * comma-separated list of `.ext`, `type/subtype` or `type/*` entries.

package/lib/components/file-upload.js

@@ -1,6 +1,7 @@
 import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { fileUploadStyles } from "../styles/file-upload.js";
+import { nativeMessage } from "../utils/validity.js";
 const UPLOAD_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/></svg>`;
 const FILE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>`;
 const X_ICON = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>`;
@@ -29,7 +30,9 @@ this._dropHandler = null;
 this._inputChangeHandler = null;
 ensureStyles(this.shadowRoot, { css: fileUploadStyles, id: "ty-file-upload" });
 }
-onConnect() { }
+onConnect() {
+this.updateFormValue();
+}
 onDisconnect() {
 this.removeEventListeners();
 }
@@ -50,21 +53,31 @@ this.updateValidity();
 updateValidity() {
 if (this.required && !this.disabled && this._files.length === 0) {
 const anchor = this.shadowRoot?.querySelector(".drop-zone");
-this.applyValidity({ valueMissing: true }, "Please select a file", anchor ?? undefined);
+this.applyValidity({ valueMissing: true }, nativeMessage("input", { type: "file", required: true, multiple: this.multiple }), anchor ?? undefined);
 }
 else {
 this.applyValidity({});
 }
 }
 getFormValue() {
-if (this._files.length === 0 || !this.name)
+if (!this.name)
 return null;
 const fd = new FormData();
+if (this._files.length === 0) {
+fd.append(this.name, new File([], '', { type: 'application/octet-stream' }));
+}
 for (const file of this._files) {
 fd.append(this.name, file);
 }
 return fd;
 }
+focus(options) {
+const zone = this.shadowRoot?.querySelector('.drop-zone');
+if (zone)
+zone.focus(options);
+else
+super.focus(options);
+}
 matchesAccept(file) {
 const accept = this.accept?.trim();
 if (!accept)
@@ -146,6 +159,7 @@ names: this._files.map((f) => f.name),
 };
 setTimeout(() => {
 this.dispatchEvent(new CustomEvent("change", { detail, bubbles: true, composed: true }));
+this.revealValidity();
 }, 0);
 }
 removeFile(index) {

package/lib/components/input.d.ts

@@ -59,6 +59,41 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
             visual: boolean;
             default: boolean;
         };
+        pattern: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        minlength: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        maxlength: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        min: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        max: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        tooShortMessage: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        tooLongMessage: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         error: {
             type: "string";
             visual: boolean;
@@ -103,7 +138,6 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     private _shadowValue;
     private _isFocused;
     private _listenersSetup;
-    private _errorAutoDanger;
     private _customFlavorSheet;
     private _inputHandler;
     private _changeHandler;
@@ -117,6 +151,14 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     protected onConnect(): void;
     /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     private _syncCustomFlavor;
+    /**
+     * `error` turns a neutral field danger; clearing it (the author, or
+     * validation dropping the message it showed) puts back exactly the flavor
+     * attribute the author had, or none, kept meanwhile in ERROR_FLAVOR (same
+     * as ty-select and ty-date-picker). Runs once connected: while the element
+     * upgrades, `error` may come before the `flavor` written next to it.
+     */
+    private syncErrorFlavor;
     protected onDisconnect(): void;
     /** Handle property changes — called BEFORE render. */
     protected onPropertiesChanged(changes: PropertyChange[]): void;
@@ -143,14 +185,31 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     set label(v: string);
     get disabled(): boolean;
     set disabled(v: boolean);
+    /** Focus the inner <input>: the host itself isn't focusable. */
+    focus(options?: FocusOptions): void;
     get required(): boolean;
     set required(v: boolean);
+    get pattern(): string;
+    set pattern(v: string);
+    get minLength(): number;
+    set minLength(v: number);
+    get maxLength(): number;
+    set maxLength(v: number);
+    get min(): string;
+    set min(v: string);
+    get max(): string;
+    set max(v: string);
+    get tooShortMessage(): string;
+    set tooShortMessage(v: string);
+    get tooLongMessage(): string;
+    set tooLongMessage(v: string);
     get error(): string;
     set error(v: string);
     get size(): Size;
     set size(v: Size);
     get flavor(): Flavor;
     set flavor(v: Flavor);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     get currency(): string;
     set currency(v: string);
     get locale(): string;
@@ -165,6 +224,13 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     private dispatchChangeEvent;
     private removeEventListeners;
     /** IMPORTANT: Only called ONCE, not on every render. */
+    /**
+     * Enter submits the owning form, like a native input (HTML implicit
+     * submission): through the form's default button when it has one (nothing
+     * if that button is disabled), otherwise only when this is the form's only
+     * text field.
+     */
+    private _implicitSubmit;
     private setupEventListeners;
     /** Render the input component with wrapper and slots. */
     render(): void;
@@ -174,10 +240,23 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
      * `type` property stays "password" (form value and API unaffected).
      */
     private setupPasswordToggle;
+    /**
+     * pattern, minlength and maxlength go on the inner <input>: pattern for the
+     * browser's own patternMismatch check, minlength for its tooShort message
+     * after the user types, maxlength so typing stops at the limit like a
+     * native field. Formatted (numeric) types show a display string, so they
+     * get none.
+     */
+    private syncConstraintAttributes;
     /**
      * Reflect constraint validation to the owning <form> via ElementInternals.
-     * Without this `required` is only cosmetic — the inner shadow <input> can't
-     * block the outer form. Empty + required => valueMissing; otherwise valid.
+     * Without this the inner shadow <input> can't block the outer form.
+     * Rules, first failing one supplies the message:
+     * - required: empty => valueMissing
+     * - email/url: the inner input's own typeMismatch
+     * - text types: pattern, minlength, maxlength
+     * - number/currency/percent/compact: min, max against the numeric value
+     * Empty values only fail `required`, like native inputs.
      * Disabled fields are barred from constraint validation.
      */
     private updateValidity;

package/lib/components/input.js

@@ -2,10 +2,12 @@ import { DEFAULT_SIZE } from '../types/common.js';
 import { TyComponent } from '../base/ty-component.js';
 import { ensureStyles } from '../utils/styles.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
+import { ERROR_FLAVOR } from '../utils/error-flavor.js';
 import { inputStyles, inputCustomFlavorCss } from '../styles/input.js';
 import { formatNumber, parseNumericValue, shouldFormat as shouldFormatType } from '../utils/number-format.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { REQUIRED_ICON_SVG } from '../utils/icons.js';
+import { nativeMessage, nativeValidity, lengthValidity, toLimit } from '../utils/validity.js';
 const EYE_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0"/><circle cx="12" cy="12" r="3"/></svg>`;
 const EYE_OFF_ICON_SVG = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49"/><path d="M14.084 14.158a3 3 0 0 1-4.242-4.242"/><path d="M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143"/><path d="m2 2 20 20"/></svg>`;
 export class TyInput extends TyComponent {
@@ -14,7 +16,6 @@ super();
 this._shadowValue = null;
 this._isFocused = false;
 this._listenersSetup = false;
-this._errorAutoDanger = false;
 this._customFlavorSheet = null;
 this._inputHandler = null;
 this._changeHandler = null;
@@ -22,6 +23,34 @@ this._focusHandler = null;
 this._blurHandler = null;
 this._inputDebounceTimer = null;
 this._changeDebounceTimer = null;
+this._implicitSubmit = (e) => {
+if (e.key !== 'Enter' || e.isComposing || e.defaultPrevented)
+return;
+const form = this._internals.form;
+if (!form)
+return;
+const controls = Array.from(form.elements);
+const isSubmitter = (el) => (el instanceof HTMLButtonElement && el.type === 'submit') ||
+(el instanceof HTMLInputElement && (el.type === 'submit' || el.type === 'image')) ||
+(el.tagName === 'TY-BUTTON' && !['button', 'reset'].includes(el.getAttribute('type') ?? ''));
+const submitter = controls.find(isSubmitter);
+if (submitter) {
+if (submitter.disabled || submitter.hasAttribute('disabled'))
+return;
+e.preventDefault();
+const target = submitter.tagName === 'TY-BUTTON'
+? submitter.shadowRoot?.querySelector('button') ?? submitter
+: submitter;
+target.click();
+return;
+}
+const textFields = controls.filter((el) => el.tagName === 'TY-INPUT' ||
+(el instanceof HTMLInputElement && !['button', 'checkbox', 'radio', 'file', 'hidden', 'image', 'reset', 'submit', 'range', 'color'].includes(el.type)));
+if (textFields.length === 1) {
+e.preventDefault();
+form.requestSubmit();
+}
+};
 const shadow = this.shadowRoot;
 ensureStyles(shadow, { css: inputStyles, id: 'ty-input' });
 }
@@ -31,10 +60,32 @@ this._localeObserver = observeLocaleChanges(this, () => {
 this.render();
 });
 this._syncCustomFlavor();
+this.syncErrorFlavor();
 }
 _syncCustomFlavor() {
 this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => inputCustomFlavorCss(base));
 }
+syncErrorFlavor() {
+if (!this._connected)
+return;
+const flavor = this.getProperty('flavor');
+const replaced = this.getAttribute(ERROR_FLAVOR);
+if (this.getProperty('error')) {
+if (replaced === null && flavor === 'neutral') {
+this.setAttribute(ERROR_FLAVOR, this.getAttribute('flavor') ?? '');
+this.setProperty('flavor', 'danger');
+}
+}
+else if (replaced !== null) {
+this.removeAttribute(ERROR_FLAVOR);
+if (flavor !== 'danger')
+return;
+if (!replaced)
+this.removeAttribute('flavor');
+else
+this.setProperty('flavor', replaced);
+}
+}
 onDisconnect() {
 this.removeEventListeners();
 if (this._localeObserver) {
@@ -54,6 +105,10 @@ onPropertiesChanged(changes) {
 for (const { name, newValue } of changes) {
 switch (name) {
 case 'flavor':
+if (newValue !== 'danger') {
+this.removeAttribute(ERROR_FLAVOR);
+this.syncErrorFlavor();
+}
 this._syncCustomFlavor();
 break;
 case 'value':
@@ -64,18 +119,7 @@ const currentValue = this.getProperty('value') || '';
 this._shadowValue = this.parseShadowValue(currentValue);
 break;
 case 'error':
-if (newValue) {
-if (this.getProperty('flavor') === 'neutral') {
-this.setProperty('flavor', 'danger');
-this._errorAutoDanger = true;
-}
-}
-else if (this._errorAutoDanger) {
-if (this.getProperty('flavor') === 'danger') {
-this.setProperty('flavor', 'neutral');
-}
-this._errorAutoDanger = false;
-}
+this.syncErrorFlavor();
 break;
 }
 }
@@ -95,14 +139,17 @@ this._changeDebounceTimer = null;
 this.render();
 }
 getFormValue() {
-const formValue = this._shadowValue !== null ? String(this._shadowValue) : null;
+const formValue = this._shadowValue !== null ? String(this._shadowValue) : '';
 return formValue;
 }
 initializeShadowValue() {
 const currentValue = this.getProperty('value');
 if (currentValue) {
 this._shadowValue = this.parseShadowValue(currentValue);
-this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
+this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : '');
+}
+else {
+this._internals.setFormValue('');
 }
 }
 parseShadowValue(value) {
@@ -155,14 +202,39 @@ get label() { return this.getProperty('label'); }
 set label(v) { this.setProperty('label', v); }
 get disabled() { return this.getProperty('disabled'); }
 set disabled(v) { this.setProperty('disabled', v); }
+focus(options) {
+this.shadowRoot?.querySelector('input')?.focus(options);
+}
 get required() { return this.getProperty('required'); }
 set required(v) { this.setProperty('required', v); }
+get pattern() { return this.getProperty('pattern'); }
+set pattern(v) { this.setProperty('pattern', v ?? ''); }
+get minLength() { return toLimit(this.getProperty('minlength')) ?? -1; }
+set minLength(v) { this.setProperty('minlength', v == null || v < 0 ? '' : String(v)); }
+get maxLength() { return toLimit(this.getProperty('maxlength')) ?? -1; }
+set maxLength(v) { this.setProperty('maxlength', v == null || v < 0 ? '' : String(v)); }
+get min() { return this.getProperty('min'); }
+set min(v) { this.setProperty('min', v == null ? '' : String(v)); }
+get max() { return this.getProperty('max'); }
+set max(v) { this.setProperty('max', v == null ? '' : String(v)); }
+get tooShortMessage() { return this.getProperty('tooShortMessage'); }
+set tooShortMessage(v) { this.setProperty('tooShortMessage', v ?? ''); }
+get tooLongMessage() { return this.getProperty('tooLongMessage'); }
+set tooLongMessage(v) { this.setProperty('tooLongMessage', v ?? ''); }
 get error() { return this.getProperty('error'); }
 set error(v) { this.setProperty('error', v); }
 get size() { return this.getProperty('size'); }
 set size(v) { this.setProperty('size', v); }
 get flavor() { return this.getProperty('flavor'); }
-set flavor(v) { this.setProperty('flavor', v); }
+set flavor(v) {
+this.removeAttribute(ERROR_FLAVOR);
+this.setProperty('flavor', v);
+}
+attributeChangedCallback(name, oldValue, newValue) {
+if (name === 'flavor' && newValue === 'danger' && oldValue === newValue)
+this.removeAttribute(ERROR_FLAVOR);
+super.attributeChangedCallback(name, oldValue, newValue);
+}
 get currency() { return this.getProperty('currency'); }
 set currency(v) { this.setProperty('currency', v); }
 get locale() {
@@ -235,6 +307,7 @@ if (this._blurHandler) {
 inputEl.removeEventListener('blur', this._blurHandler);
 this._blurHandler = null;
 }
+inputEl.removeEventListener('keydown', this._implicitSubmit);
 this._listenersSetup = false;
 }
 setupEventListeners() {
@@ -249,12 +322,13 @@ console.warn('[TyInput.setupEventListeners] ⚠️ Input element not found!');
 return;
 }
 this._inputHandler = (e) => {
+this._userEdited = true;
 e.stopPropagation();
 e.stopImmediatePropagation();
 const target = e.target;
 const rawValue = target.value;
 this._shadowValue = this.parseShadowValue(rawValue);
-this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
+this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : '');
 this.updateValidity();
 if (this._inputDebounceTimer !== null) {
 clearTimeout(this._inputDebounceTimer);
@@ -275,7 +349,7 @@ e.stopImmediatePropagation();
 const target = e.target;
 const rawValue = target.value;
 this._shadowValue = this.parseShadowValue(rawValue);
-this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : null);
+this._internals.setFormValue(this._shadowValue !== null ? String(this._shadowValue) : '');
 this.updateValidity();
 if (this._changeDebounceTimer !== null) {
 clearTimeout(this._changeDebounceTimer);
@@ -317,6 +391,8 @@ this.dispatchChangeEvent(rawValue, e);
 }
 this._isFocused = false;
 wrapperEl.classList.remove('focused');
+if (this._userEdited)
+this.revealValidity();
 if (this.shouldFormat()) {
 inputEl.value = this.getDisplayValue();
 }
@@ -330,6 +406,7 @@ inputEl.addEventListener('input', this._inputHandler);
 inputEl.addEventListener('change', this._changeHandler);
 inputEl.addEventListener('focus', this._focusHandler);
 inputEl.addEventListener('blur', this._blurHandler);
+inputEl.addEventListener('keydown', this._implicitSubmit);
 this._listenersSetup = true;
 }
 render() {
@@ -350,6 +427,7 @@ const inputMode = shouldFormatType(this.type) ? 'decimal'
 const displayValue = this.getDisplayValue();
 if (existingInput && existingWrapper) {
 existingInput.type = inputType;
+if (existingInput.value !== displayValue)
 existingInput.value = displayValue;
 existingInput.placeholder = this.placeholder;
 existingInput.name = this.name;
@@ -372,6 +450,7 @@ existingInput.setAttribute('required', '');
 else {
 existingInput.removeAttribute('required');
 }
+this.syncConstraintAttributes(existingInput);
 if (this.label)
 existingInput.setAttribute('aria-label', this.label);
 else
@@ -445,6 +524,7 @@ ${errorHtml}
 const inputEl = shadow.querySelector('input');
 inputEl.disabled = this.disabled;
 inputEl.required = this.required;
+this.syncConstraintAttributes(inputEl);
 if (this.label)
 inputEl.setAttribute('aria-label', this.label);
 this.setupPasswordToggle();
@@ -467,6 +547,13 @@ toggle.setAttribute('aria-label', reveal ? 'Hide password' : 'Show password');
 toggle.setAttribute('aria-pressed', String(reveal));
 });
 }
+syncConstraintAttributes(inputEl) {
+const text = !shouldFormatType(this.type);
+const set = (name, v) => text && v !== '' ? inputEl.setAttribute(name, v) : inputEl.removeAttribute(name);
+set('pattern', this.pattern);
+set('minlength', toLimit(this.getProperty('minlength')) != null ? String(this.minLength) : '');
+set('maxlength', toLimit(this.getProperty('maxlength')) != null ? String(this.maxLength) : '');
+}
 updateValidity() {
 const inputEl = this.shadowRoot?.querySelector('input');
 if (this.disabled) {
@@ -474,12 +561,48 @@ this.applyValidity({});
 return;
 }
 const current = inputEl ? inputEl.value : String(this.getProperty('value') ?? '');
-if (this.required && current.trim() === '') {
-this.applyValidity({ valueMissing: true }, 'Please fill out this field', inputEl ?? undefined);
+if (current.trim() === '') {
+if (this.required) {
+this.applyValidity({ valueMissing: true }, nativeMessage('input', { type: 'text', required: true }), inputEl ?? undefined);
 }
 else {
 this.applyValidity({});
 }
+return;
+}
+const flags = {};
+const messages = [];
+const fail = (flag, message) => {
+flags[flag] = true;
+messages.push(message);
+};
+if (shouldFormatType(this.type)) {
+const n = typeof this._shadowValue === 'number' ? this._shadowValue : null;
+if (n !== null && (this.min || this.max)) {
+const { validity, message } = nativeValidity('input', { type: 'number', step: 'any', min: this.min, max: this.max }, String(n));
+if (validity.rangeUnderflow)
+fail('rangeUnderflow', message);
+if (validity.rangeOverflow)
+fail('rangeOverflow', message);
+}
+}
+else {
+if (inputEl?.validity.typeMismatch)
+fail('typeMismatch', inputEl.validationMessage);
+if (inputEl?.validity.patternMismatch)
+fail('patternMismatch', inputEl.validationMessage);
+const { tooShort, tooLong } = lengthValidity(current, {
+minlength: this.getProperty('minlength'),
+maxlength: this.getProperty('maxlength'),
+tooShortMessage: this.tooShortMessage,
+tooLongMessage: this.tooLongMessage,
+}, inputEl);
+if (tooShort)
+fail('tooShort', tooShort);
+if (tooLong)
+fail('tooLong', tooLong);
+}
+this.applyValidity(flags, messages[0], inputEl ?? undefined);
 }
 }
 TyInput.formAssociated = true;
@@ -538,6 +661,41 @@ type: 'boolean',
 visual: true,
 default: false
 },
+pattern: {
+type: 'string',
+visual: true,
+default: ''
+},
+minlength: {
+type: 'string',
+visual: true,
+default: ''
+},
+maxlength: {
+type: 'string',
+visual: true,
+default: ''
+},
+min: {
+type: 'string',
+visual: true,
+default: ''
+},
+max: {
+type: 'string',
+visual: true,
+default: ''
+},
+tooShortMessage: {
+type: 'string',
+visual: true,
+default: ''
+},
+tooLongMessage: {
+type: 'string',
+visual: true,
+default: ''
+},
 error: {
 type: 'string',
 visual: true,

package/lib/components/modal.d.ts

@@ -52,6 +52,8 @@ export declare class TyModal extends HTMLElement {
     set open(v: boolean);
     get noBackdrop(): boolean;
     set noBackdrop(v: boolean);
+    get noZoom(): boolean;
+    set noZoom(v: boolean);
     get preventOutsideClick(): boolean;
     set preventOutsideClick(v: boolean);
     get preventEscape(): boolean;