tyrell-components 1.0.0-TC56 → 1.0.0-TC58

package/lib/components/select.js

@@ -1,6 +1,7 @@
 import { DEFAULT_SIZE } from "../types/common.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
+import { ERROR_FLAVOR } from "../utils/error-flavor.js";
 import { selectBaseStyles, selectCustomFlavorCss } from "../styles/select-base.js";
 import { selectStyles } from "../styles/select.js";
 import { getLoaderSvg } from "../utils/loader-registry.js";
@@ -20,6 +21,7 @@ elementIds.set(element, id);
 return id;
 }
 import { REQUIRED_ICON_SVG } from "../utils/icons.js";
+import { nativeMessage } from "../utils/validity.js";
 const SEARCH_AUTO_THRESHOLD = 7;
 const CHEVRON_DOWN_SVG = `<svg viewBox="0 0 20 20" fill="currentColor">
 <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
@@ -81,6 +83,7 @@ this._optionsScrollbar = null;
 this._childObserver = null;
 this._selectedClone = null;
 this._customFlavorSheet = null;
+this._ariaTrigger = null;
 const shadow = this.shadowRoot;
 ensureStyles(shadow, { css: selectBaseStyles, id: "ty-select-base" });
 ensureStyles(shadow, { css: selectStyles, id: "ty-select" });
@@ -96,6 +99,7 @@ dialog.close();
 });
 this.render();
 this.initializeState();
+this.updateFormValue();
 this._childObserver = new MutationObserver(() => {
 this.ensureOptionRoles();
 if (this._state.selectedValues.length > 0) {
@@ -108,11 +112,43 @@ this.updateMobileSelectedState();
 this._childObserver.observe(this, { childList: true });
 this.ensureOptionRoles();
 this._syncCustomFlavor();
+this.syncErrorFlavor();
+if (!this._keyboardHandler) {
+this._keyboardHandler = this.handleKeyboard.bind(this);
+document.addEventListener("keydown", this._keyboardHandler, true);
+}
 }
 _syncCustomFlavor() {
 this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.getProperty("flavor"), ({ base }) => selectCustomFlavorCss(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() {
+if (this._state.open) {
+if (this._state.mode === "mobile")
+this.closeMobileModal();
+else
+this.closeDropdown();
+}
 const shadow = this.shadowRoot;
 const dialogs = shadow.querySelectorAll("dialog");
 dialogs.forEach((dialog) => {
@@ -121,7 +157,7 @@ dialog.close();
 }
 });
 if (this._keyboardHandler) {
-document.removeEventListener("keydown", this._keyboardHandler);
+document.removeEventListener("keydown", this._keyboardHandler, true);
 this._keyboardHandler = null;
 }
 if (this._searchDebounceTimer !== null) {
@@ -150,8 +186,15 @@ case "name":
 this._name = newValue || "";
 break;
 case "flavor":
+if (newValue !== "danger") {
+this.removeAttribute(ERROR_FLAVOR);
+this.syncErrorFlavor();
+}
 this._syncCustomFlavor();
 break;
+case "error":
+this.syncErrorFlavor();
+break;
 case "multiple":
 this._multiple = newValue;
 if (!newValue && this._state.selectedValues.length > 1) {
@@ -250,8 +293,21 @@ formData.append(this._name, value);
 });
 return formData;
 }
+if (this._name && !this._multiple)
+return "";
 return null;
 }
+focus(options) {
+if (this._disabled)
+return;
+const trigger = this.querySelector(':scope > [slot="trigger"]');
+const stub = this.shadowRoot?.querySelector(".select-stub");
+const target = trigger ?? stub;
+if (target)
+target.focus(options);
+else
+super.focus(options);
+}
 parseValue(value) {
 if (!value || typeof value !== "string" || value.trim() === "")
 return [];
@@ -333,7 +389,7 @@ if (!tag.hasAttribute("aria-selected"))
 tag.setAttribute("aria-selected", "false");
 });
 }
-updateComponentValue(newValues, dispatchChange = false, action = "set", item = null) {
+updateComponentValue(newValues, dispatchChange = false, action = "set", item = null, reveal = dispatchChange) {
 const oldValues = this.getSelectedValues();
 const valueStr = newValues.join(",");
 if (JSON.stringify(newValues.sort()) !== JSON.stringify(oldValues.sort())) {
@@ -347,6 +403,8 @@ items: this.getSelectedItems(newValues),
 action,
 item,
 });
+if (reveal)
+this.revealValidity();
 }
 }
 }
@@ -590,6 +648,7 @@ if (this._disabled || this._readonly) {
 return;
 }
 this.clear();
+this.revealValidity();
 }
 handleStubKeydown(e) {
 if (this._disabled || this._readonly || this._state.open)
@@ -742,6 +801,7 @@ this.closeMobileModal();
 else {
 this.closeDropdown();
 }
+this.focus();
 break;
 case "Enter":
 e.preventDefault();
@@ -903,10 +963,26 @@ label.innerHTML = `${this._label}${this._required ? `<span class="required-icon"
 else {
 label?.remove();
 }
+const error = this.getProperty("error") || "";
+const errorId = `select-error-${getElementHash(this)}`;
+let errorLine = container.querySelector(":scope > .error-message");
+if (error) {
+if (!errorLine) {
+errorLine = document.createElement("div");
+errorLine.className = "error-message";
+errorLine.id = errorId;
+container.append(errorLine);
+}
+errorLine.textContent = error;
+}
+else {
+errorLine?.remove();
+}
 const stub = shadow.querySelector(".select-stub");
 if (stub) {
 stub.classList.toggle("disabled", this._disabled);
 stub.classList.toggle("compact", this._compact);
+stub.classList.toggle("error", !!error);
 stub.tabIndex = this._disabled ? -1 : 0;
 stub.toggleAttribute("disabled", this._disabled);
 if (this._disabled)
@@ -917,7 +993,27 @@ if (this._label)
 stub.setAttribute("aria-labelledby", labelId);
 else
 stub.removeAttribute("aria-labelledby");
+if (error) {
+stub.setAttribute("aria-invalid", "true");
+stub.setAttribute("aria-describedby", errorId);
+}
+else {
+stub.removeAttribute("aria-invalid");
+stub.removeAttribute("aria-describedby");
+}
 }
+const trigger = error
+? this.querySelector(':scope > [slot="trigger"]')
+: null;
+if (this._ariaTrigger && this._ariaTrigger !== trigger) {
+this._ariaTrigger.removeAttribute("aria-invalid");
+this._ariaTrigger.removeAttribute("aria-description");
+}
+if (trigger) {
+trigger.setAttribute("aria-invalid", "true");
+trigger.setAttribute("aria-description", error);
+}
+this._ariaTrigger = trigger;
 shadow
 .querySelectorAll(".dropdown-search-input, .mobile-search-input")
 .forEach((input) => (input.disabled = this._disabled));
@@ -929,7 +1025,7 @@ return;
 }
 if (this.required && this.getSelectedValues().length === 0) {
 const stub = this.shadowRoot?.querySelector(".select-stub");
-this.applyValidity({ valueMissing: true }, "Please select a value", stub ?? undefined);
+this.applyValidity({ valueMissing: true }, nativeMessage("select", { required: true, multiple: this._multiple }), stub ?? undefined);
 }
 else {
 this.applyValidity({});
@@ -946,7 +1042,10 @@ const hasTrigger = slot.assignedElements().length > 0;
 stub.classList.toggle("custom-trigger", hasTrigger);
 this.toggleAttribute("has-trigger", hasTrigger);
 };
-slot.addEventListener("slotchange", sync);
+slot.addEventListener("slotchange", () => {
+sync();
+this.syncFieldChrome();
+});
 sync();
 }
 setupEventListeners() {
@@ -979,9 +1078,13 @@ if (e.target === dialog) {
 this.closeDropdown();
 }
 });
+dialog.addEventListener("cancel", (e) => {
+e.preventDefault();
+this.closeDropdown();
+this.focus();
+});
+this.syncOnOutsideClose(dialog, () => this.closeDropdown());
 }
-this._keyboardHandler = this.handleKeyboard.bind(this);
-document.addEventListener("keydown", this._keyboardHandler);
 }
 buildStubClasses() {
 const classes = [];
@@ -1175,10 +1278,6 @@ this.setupMobileEventListeners();
 this.updateSelectionDisplay();
 }
 setupMobileEventListeners() {
-if (!this._keyboardHandler) {
-this._keyboardHandler = this.handleKeyboard.bind(this);
-document.addEventListener("keydown", this._keyboardHandler);
-}
 const shadow = this.shadowRoot;
 const stub = shadow.querySelector(".select-stub");
 const optionsSlot = shadow.querySelector("#options-slot");
@@ -1213,8 +1312,16 @@ this.closeMobileModal();
 dialog.addEventListener("cancel", (e) => {
 e.preventDefault();
 this.closeMobileModal();
+this.focus();
 });
+this.syncOnOutsideClose(dialog, () => this.closeMobileModal());
+}
 }
+syncOnOutsideClose(dialog, close) {
+new MutationObserver(() => {
+if (this._state.open && !dialog.open)
+close();
+}).observe(dialog, { attributes: true, attributeFilter: ["open"] });
 }
 handleMobileStubClick(e) {
 e.preventDefault();
@@ -1409,7 +1516,7 @@ return;
 this.updateComponentValue(current.filter((v) => v !== value), true, "remove", value);
 }
 clear() {
-this.updateComponentValue([], true, "clear", null);
+this.updateComponentValue([], true, "clear", null, false);
 }
 get value() {
 return this.getSelectedValues().join(",");
@@ -1477,6 +1584,12 @@ return this.getProperty("required");
 set required(value) {
 this.setProperty("required", value);
 }
+get error() {
+return this.getProperty("error");
+}
+set error(value) {
+this.setProperty("error", value);
+}
 get notSearchable() {
 return this.getProperty("notSearchable");
 }
@@ -1518,8 +1631,14 @@ get flavor() {
 return this.getProperty("flavor");
 }
 set flavor(value) {
+this.removeAttribute(ERROR_FLAVOR);
 this.setProperty("flavor", value);
 }
+attributeChangedCallback(name, oldValue, newValue) {
+if (name === "flavor" && newValue === "danger" && oldValue === newValue)
+this.removeAttribute(ERROR_FLAVOR);
+super.attributeChangedCallback(name, oldValue, newValue);
+}
 get form() {
 return this._internals.form;
 }
@@ -1580,6 +1699,11 @@ type: "boolean",
 visual: true,
 default: false,
 },
+error: {
+type: "string",
+visual: true,
+default: "",
+},
 noClear: {
 type: "boolean",
 visual: true,

package/lib/components/selected-tags.d.ts

@@ -28,6 +28,8 @@ export declare class TySelectedOptions extends HTMLElement {
      * Interpolation context for a value: value, label, flavor plus every
      * data-* attribute of the picker's matching option.
      */
+    /** The picker's option for a value (never its display clone). */
+    private option;
     private context;
     /**
      * The template's blueprint fragment. HTML-parsed templates carry children in
@@ -42,7 +44,11 @@ export declare class TySelectedOptions extends HTMLElement {
      * no flavor on the option).
      */
     private stampTemplate;
-    /** Default chip when no template is provided. */
+    /**
+     * Default chip when no template is provided: the option's own content,
+     * cloned, so a rich option makes a rich chip. An explicit `label` on the
+     * option replaces it with that text; a <template> child replaces it entirely.
+     */
     private defaultChip;
     private renderChips;
     /** Remove a value from the picker; picker re-emits change → chips re-render. */

package/lib/components/selected-tags.js

@@ -93,8 +93,11 @@ return parseValues(this._picker?.value ?? '');
 template() {
 return this.querySelector(':scope > template');
 }
+option(value) {
+return this._picker?.querySelector(`[value="${CSS.escape(value)}"]:not([cloned])`);
+}
 context(value) {
-const opt = this._picker?.querySelector(`[value="${CSS.escape(value)}"]`);
+const opt = this.option(value);
 const ctx = {
 value,
 label: opt?.getAttribute('label') || opt?.textContent?.trim() || value,
@@ -150,12 +153,18 @@ return clone;
 }
 defaultChip(value) {
 const ctx = this.context(value);
+const opt = this.option(value);
 const tag = document.createElement('ty-tag');
 tag.setAttribute('value', value);
 tag.setAttribute('dismissible', 'true');
 if (ctx.flavor)
 tag.setAttribute('flavor', ctx.flavor);
+if (opt && !opt.hasAttribute('label') && opt.hasChildNodes()) {
+opt.childNodes.forEach(n => tag.appendChild(n.cloneNode(true)));
+}
+else {
 tag.textContent = ctx.label;
+}
 tag.addEventListener('dismiss', () => this.deselect(value));
 return tag;
 }

package/lib/components/switch.d.ts

@@ -82,7 +82,11 @@ export declare class TySwitch extends TyComponent<SwitchState> implements TySwit
     private removeEventListeners;
     private setupEventListeners;
     protected render(): void;
-    /** required + unchecked => valueMissing; otherwise valid. */
+    /** Focus the switch itself (the host is not focusable; its role element is). */
+    focus(options?: FocusOptions): void;
+    /** required + unchecked => valueMissing; otherwise valid. The message is a
+     *  native checkbox's, as a switch where the browser has one (Safari's
+     *  `switch` attribute). */
     private updateValidity;
     get checked(): boolean;
     set checked(value: boolean);

package/lib/components/switch.js

@@ -3,6 +3,7 @@ import { TyComponent } from "../base/ty-component.js";
 import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { switchStyles, switchCustomFlavorCss } from "../styles/switch.js";
+import { nativeMessage } from "../utils/validity.js";
 export class TySwitch extends TyComponent {
 constructor() {
 super();
@@ -145,6 +146,13 @@ this.setupEventListeners();
 this.applyLabelName(switchEl);
 this.updateValidity();
 }
+focus(options) {
+const el = this.shadowRoot?.querySelector(".switch-container");
+if (el)
+el.focus(options);
+else
+super.focus(options);
+}
 updateValidity() {
 const anchor = this.shadowRoot?.querySelector(".switch-container");
 if (this.disabled) {
@@ -152,7 +160,7 @@ this.applyValidity({});
 return;
 }
 if (this.required && !this.checked) {
-this.applyValidity({ valueMissing: true }, "Please turn this on", anchor ?? undefined);
+this.applyValidity({ valueMissing: true }, nativeMessage("input", { type: "checkbox", switch: true, required: true }), anchor ?? undefined);
 }
 else {
 this.applyValidity({});

package/lib/components/textarea.d.ts

@@ -21,6 +21,10 @@ export interface TyTextareaElement extends HTMLElement {
     label?: string;
     disabled?: boolean;
     required?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    tooShortMessage?: string;
+    tooLongMessage?: string;
     error?: string;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     rows?: string | number;
@@ -63,6 +67,26 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
             visual: boolean;
             default: boolean;
         };
+        minlength: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
+        maxlength: {
+            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;
@@ -125,8 +149,18 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
     set label(v: string);
     get disabled(): boolean;
     set disabled(v: boolean);
+    /** Focus the inner <textarea>: the host itself isn't focusable. */
+    focus(options?: FocusOptions): void;
     get required(): boolean;
     set required(v: boolean);
+    get minLength(): number;
+    set minLength(v: number);
+    get maxLength(): number;
+    set maxLength(v: number);
+    get tooShortMessage(): string;
+    set tooShortMessage(v: string);
+    get tooLongMessage(): string;
+    set tooLongMessage(v: string);
     get error(): string;
     set error(v: string);
     get size(): 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -158,8 +192,18 @@ export declare class TyTextarea extends TyComponent<TextareaState> implements Ty
     private applyHeightConstraints;
     private setupTextareaEvents;
     protected render(): void;
-    /** required + empty => valueMissing; otherwise valid. Disabled fields are
-     *  barred from constraint validation. */
+    /**
+     * minlength goes on the inner <textarea> for the browser's own too-short
+     * message after the user types, maxlength so typing stops at the limit
+     * (like ty-input).
+     */
+    private syncConstraintAttributes;
+    /**
+     * required + empty => valueMissing (the browser's own message); otherwise
+     * minlength / maxlength, worded like ty-input's (lengthValidity). Empty
+     * values only fail `required`, like native. Disabled fields are barred
+     * from constraint validation.
+     */
     private updateValidity;
 }
 export {};

package/lib/components/textarea.js

@@ -4,7 +4,8 @@ import { ensureStyles } from '../utils/styles.js';
 import { textareaStyles } from '../styles/textarea.js';
 import { CustomScrollbar, isCustomScrollbarEnabled } from '../utils/custom-scrollbar.js';
 import { customScrollbarStyles } from '../styles/custom-scrollbar.js';
-const REQUIRED_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>`;
+import { nativeMessage, lengthValidity, toLimit } from '../utils/validity.js';
+import { REQUIRED_ICON_SVG } from '../utils/icons.js';
 export class TyTextarea extends TyComponent {
 constructor() {
 super();
@@ -13,6 +14,7 @@ this._dummyEl = null;
 this._scrollbar = null;
 this._isFocused = false;
 this.handleInputEvent = (e) => {
+this._userEdited = true;
 const target = e.target;
 const newValue = target.value;
 this.value = newValue;
@@ -30,6 +32,8 @@ this._valueAtFocus = this.value;
 };
 this.handleBlurEvent = (e) => {
 this._isFocused = false;
+if (this._userEdited)
+this.revealValidity();
 if (this._valueAtFocus !== null && this.value !== this._valueAtFocus) {
 this.emitValueEvent('change', e);
 }
@@ -67,8 +71,19 @@ 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('textarea')?.focus(options);
+}
 get required() { return this.getProperty('required'); }
 set required(v) { this.setProperty('required', 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 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() {
@@ -250,18 +265,19 @@ const existingError = root.querySelector('.error-message');
 if (existingContainer && existingTextarea) {
 if (this.label) {
 if (existingLabel) {
-existingLabel.innerHTML = this.label +
-(this.required ? ` <span class="required-icon">${REQUIRED_ICON}</span>` : '');
-existingLabel.style.display = 'block';
+existingLabel.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
+existingLabel.style.display = 'flex';
 }
 }
 else if (existingLabel) {
 existingLabel.style.display = 'none';
 }
+if (existingTextarea.value !== (this.value || ''))
 existingTextarea.value = this.value || '';
 existingTextarea.placeholder = this.placeholder || '';
 existingTextarea.disabled = this.disabled;
 existingTextarea.required = this.required;
+this.syncConstraintAttributes(existingTextarea);
 existingTextarea.className = this.buildClassList();
 if (this.label)
 existingTextarea.setAttribute('aria-label', this.label);
@@ -301,9 +317,8 @@ container.className = 'textarea-container';
 const labelEl = document.createElement('label');
 labelEl.className = 'ty-field-label';
 if (this.label) {
-labelEl.innerHTML = this.label +
-(this.required ? ` <span class="required-icon">${REQUIRED_ICON}</span>` : '');
-labelEl.style.display = 'block';
+labelEl.innerHTML = `${this.label}${this.required ? `<span class="required-icon">${REQUIRED_ICON_SVG}</span>` : ''}`;
+labelEl.style.display = 'flex';
 }
 else {
 labelEl.style.display = 'none';
@@ -313,6 +328,7 @@ textareaEl.value = this.value || '';
 textareaEl.placeholder = this.placeholder || '';
 textareaEl.disabled = this.disabled;
 textareaEl.required = this.required;
+this.syncConstraintAttributes(textareaEl);
 textareaEl.className = this.buildClassList();
 if (this.label)
 textareaEl.setAttribute('aria-label', this.label);
@@ -364,6 +380,11 @@ this._textareaEl = textareaEl;
 }
 this.updateValidity();
 }
+syncConstraintAttributes(ta) {
+const set = (name, limit) => limit !== null ? ta.setAttribute(name, String(limit)) : ta.removeAttribute(name);
+set('minlength', toLimit(this.getProperty('minlength')));
+set('maxlength', toLimit(this.getProperty('maxlength')));
+}
 updateValidity() {
 const ta = this.shadowRoot?.querySelector('textarea');
 if (this.disabled) {
@@ -371,12 +392,22 @@ this.applyValidity({});
 return;
 }
 const current = ta ? ta.value : String(this.value ?? '');
-if (this.required && current.trim() === '') {
-this.applyValidity({ valueMissing: true }, 'Please fill out this field', ta ?? undefined);
+if (current.trim() === '') {
+if (this.required) {
+this.applyValidity({ valueMissing: true }, nativeMessage('textarea', { required: true }), ta ?? undefined);
 }
 else {
 this.applyValidity({});
 }
+return;
+}
+const { tooShort, tooLong } = lengthValidity(current, {
+minlength: this.getProperty('minlength'),
+maxlength: this.getProperty('maxlength'),
+tooShortMessage: this.tooShortMessage,
+tooLongMessage: this.tooLongMessage,
+}, ta);
+this.applyValidity({ tooShort: !!tooShort, tooLong: !!tooLong }, tooShort ?? tooLong, ta ?? undefined);
 }
 }
 TyTextarea.formAssociated = true;
@@ -412,6 +443,26 @@ type: 'boolean',
 visual: true,
 default: false
 },
+minlength: {
+type: 'string',
+visual: true,
+default: ''
+},
+maxlength: {
+type: 'string',
+visual: true,
+default: ''
+},
+tooShortMessage: {
+type: 'string',
+visual: true,
+default: ''
+},
+tooLongMessage: {
+type: 'string',
+visual: true,
+default: ''
+},
 error: {
 type: 'string',
 visual: true,