tyrell-components 1.0.0-TC57 → 1.0.0-TC58

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

@@ -81,7 +81,8 @@ 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. */

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>`;
@@ -52,7 +53,7 @@ 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({});

package/lib/components/input.d.ts

@@ -137,10 +137,7 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     };
     private _shadowValue;
     private _isFocused;
-    /** The user typed since the field was created: blur then shows its validation message. */
-    private _userEdited;
     private _listenersSetup;
-    private _errorAutoDanger;
     private _customFlavorSheet;
     private _inputHandler;
     private _changeHandler;
@@ -154,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;
@@ -204,6 +209,7 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
     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;
@@ -235,10 +241,11 @@ export declare class TyInput extends TyComponent<InputState> implements TyInputE
      */
     private setupPasswordToggle;
     /**
-     * pattern and maxlength go on the inner <input>: pattern for the browser's
-     * own patternMismatch check, maxlength so typing stops at the limit like a
+     * 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 neither.
+     * get none.
      */
     private syncConstraintAttributes;
     /**

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 {
@@ -13,9 +15,7 @@ constructor() {
 super();
 this._shadowValue = null;
 this._isFocused = false;
-this._userEdited = false;
 this._listenersSetup = false;
-this._errorAutoDanger = false;
 this._customFlavorSheet = null;
 this._inputHandler = null;
 this._changeHandler = null;
@@ -60,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) {
@@ -83,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':
@@ -93,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;
 }
 }
@@ -211,7 +226,15 @@ 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() {
@@ -404,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;
@@ -527,6 +551,7 @@ 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() {
@@ -538,7 +563,7 @@ return;
 const current = inputEl ? inputEl.value : String(this.getProperty('value') ?? '');
 if (current.trim() === '') {
 if (this.required) {
-this.applyValidity({ valueMissing: true }, nativeMessage('text', { required: '' }, ''), inputEl ?? undefined);
+this.applyValidity({ valueMissing: true }, nativeMessage('input', { type: 'text', required: true }), inputEl ?? undefined);
 }
 else {
 this.applyValidity({});
@@ -553,29 +578,29 @@ messages.push(message);
 };
 if (shouldFormatType(this.type)) {
 const n = typeof this._shadowValue === 'number' ? this._shadowValue : null;
-const min = toNumber(this.min);
-const max = toNumber(this.max);
-const range = (flag) => fail(flag, nativeMessage('number', { step: 'any', min: this.min, max: this.max }, String(n)));
-if (n !== null && min !== null && n < min)
-range('rangeUnderflow');
-if (n !== null && max !== null && n > max)
-range('rangeOverflow');
+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 length = current.length;
-const minLength = toLimit(this.getProperty('minlength'));
-const maxLength = toLimit(this.getProperty('maxlength'));
-const vars = { minlength: minLength, maxlength: maxLength, length };
-if (minLength !== null && length < minLength) {
-fail('tooShort', fillMessage(this.tooShortMessage || 'Use at least {minlength} characters (now {length})', vars));
-}
-if (maxLength !== null && length > maxLength) {
-fail('tooLong', fillMessage(this.tooLongMessage || 'Use at most {maxlength} characters (now {length})', vars));
-}
+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);
 }
@@ -737,33 +762,6 @@ return Math.max(0, Math.min(5000, Math.floor(num)));
 }
 }
 };
-let probe = null;
-function nativeMessage(type, attrs, value) {
-probe ?? (probe = document.createElement('input'));
-for (const name of Array.from(probe.getAttributeNames()))
-probe.removeAttribute(name);
-probe.type = type;
-for (const [name, v] of Object.entries(attrs))
-if (v !== '' || name === 'required')
-probe.setAttribute(name, v);
-probe.value = value;
-return probe.validationMessage;
-}
-function fillMessage(template, vars) {
-return template.replace(/\{(\w+)\}/g, (match, key) => vars[key] != null ? String(vars[key]) : match);
-}
-function toLimit(v) {
-if (v === null || v === undefined || String(v).trim() === '')
-return null;
-const n = Number(v);
-return Number.isInteger(n) && n >= 0 ? n : null;
-}
-function toNumber(v) {
-if (v === null || v === undefined || String(v).trim() === '')
-return null;
-const n = Number(v);
-return Number.isFinite(n) ? n : null;
-}
 if (!customElements.get('ty-input')) {
 customElements.define('ty-input', TyInput);
 }

package/lib/components/modal.js

@@ -1,6 +1,7 @@
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
 import { coerceBoolean } from '../utils/property-manager.js';
 import { ensureStyles } from '../utils/styles.js';
+import { upgradeProperties } from '../utils/upgrade-properties.js';
 import { modalStyles } from '../styles/modal.js';
 const backdropClickHandlers = new WeakMap();
 const escapeKeyHandlers = new WeakMap();
@@ -98,7 +99,39 @@ event.preventDefault();
 closeModal(el, 'backdrop');
 }
 }
+function fromNestedDialog(dialog, event) {
+for (const node of event.composedPath()) {
+if (node === dialog)
+return false;
+if (node instanceof HTMLDialogElement && node.matches(':modal'))
+return true;
+}
+return false;
+}
+function closeNestedDialogs(root, seen = new WeakSet()) {
+const close = (node) => {
+if (seen.has(node))
+return;
+seen.add(node);
+if (node instanceof TyModal && node.open)
+node.removeAttribute('open');
+if (node instanceof HTMLDialogElement && node.matches(':modal'))
+node.close();
+if (node.shadowRoot)
+closeNestedDialogs(node.shadowRoot, seen);
+if (node instanceof HTMLSlotElement) {
+for (const assigned of node.assignedElements({ flatten: true })) {
+close(assigned);
+closeNestedDialogs(assigned, seen);
+}
+}
+};
+root.querySelectorAll('*').forEach(close);
+}
 function handleEscapeKey(el, event) {
+const dialog = event.currentTarget;
+if (fromNestedDialog(dialog, event))
+return;
 event.stopPropagation();
 if (event.key === 'Escape') {
 event.preventDefault();
@@ -155,7 +188,7 @@ dialog.addEventListener('keydown', handler);
 }
 else {
 const handler = (e) => {
-if (e.key === 'Escape')
+if (e.key === 'Escape' && !fromNestedDialog(dialog, e))
 e.preventDefault();
 };
 escapeKeyHandlers.set(el, handler);
@@ -253,6 +286,7 @@ dispatchModalEvent(el, 'open', {});
 else {
 if (dialog.open) {
 unlockScroll(modalId);
+closeNestedDialogs(el);
 dialog.close();
 syncBackdropZoom();
 const reason = pendingCloseReasons.get(el) ?? 'programmatic';
@@ -265,6 +299,7 @@ dialog.onclose = (event) => {
 if (event.target !== dialog)
 return;
 unlockScroll(modalId);
+closeNestedDialogs(el);
 if (el.hasAttribute('open')) {
 el.removeAttribute('open');
 dispatchModalEvent(el, 'close', {
@@ -349,6 +384,7 @@ super();
 this.attachShadow({ mode: 'open' });
 }
 connectedCallback() {
+upgradeProperties(this);
 render(this);
 this.show = () => openModal(this);
 this.hide = (opts) => closeModal(this, 'programmatic', opts);

package/lib/components/option.js

@@ -1,5 +1,6 @@
 import { ensureStyles } from '../utils/styles.js';
 import { coerceBoolean } from '../utils/property-manager.js';
+import { upgradeProperties } from '../utils/upgrade-properties.js';
 import { optionStyles } from '../styles/option.js';
 const CHECK_SVG = `
 <svg class="option-check" viewBox="0 0 24 24" fill="none" stroke="currentColor"
@@ -23,11 +24,7 @@ static get observedAttributes() {
 return ['value', 'disabled', 'selected', 'highlighted', 'hidden'];
 }
 connectedCallback() {
-const instanceValue = Object.getOwnPropertyDescriptor(this, 'value');
-if (instanceValue) {
-this._value = instanceValue.value;
-delete this.value;
-}
+upgradeProperties(this);
 this.render();
 }
 attributeChangedCallback(name, oldValue, newValue) {

package/lib/components/popup.js

@@ -9,6 +9,7 @@ const closeTimers = new WeakMap();
 const escapeHandlers = new WeakMap();
 const closeRequestHandlers = new WeakMap();
 const popupIds = new WeakMap();
+const pointerPresses = new WeakSet();
 function parseBoolAttr(el, name) {
 return el.hasAttribute(name);
 }
@@ -89,19 +90,21 @@ const shadowRoot = el.shadowRoot;
 const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
 if (!dialog)
 return;
+const anchor = getAnchorElement(el);
 if (dialog.open) {
 const pending = closeTimers.get(el);
 if (pending !== undefined) {
 clearTimeout(pending);
 closeTimers.delete(el);
 dialog.classList.add('open');
+if (anchor?.hasAttribute('aria-haspopup'))
+anchor.setAttribute('aria-expanded', 'true');
 }
 return;
 }
 const popupId = getPopupId(el);
 lockScroll(popupId);
 dialog.showModal();
-const anchor = getAnchorElement(el);
 if (anchor?.hasAttribute('aria-haspopup'))
 anchor.setAttribute('aria-expanded', 'true');
 requestAnimationFrame(() => {
@@ -140,7 +143,19 @@ event.preventDefault();
 closePopup(el);
 }
 }
+function fromNestedDialog(el, event) {
+const dialog = el.shadowRoot ? getPopupDialog(el.shadowRoot) : null;
+for (const node of event.composedPath()) {
+if (node === dialog)
+return false;
+if (node instanceof HTMLDialogElement && node.matches(':modal'))
+return true;
+}
+return false;
+}
 function handleEscape(el, event) {
+if (fromNestedDialog(el, event))
+return;
 event.stopPropagation();
 if (event.key === 'Escape') {
 const { disableClose } = getPopupAttributes(el);
@@ -172,11 +187,21 @@ const existingKeyHandler = anchorKeyClickHandlers.get(el);
 if (existingKeyHandler) {
 anchor.removeEventListener('click', existingKeyHandler);
 }
-const handler = (e) => handleAnchorClick(el, e);
+const handler = (e) => {
+pointerPresses.add(el);
+handleAnchorClick(el, e);
+};
 anchorClickHandlers.set(el, handler);
 anchor.addEventListener('pointerdown', handler);
 const keyHandler = (e) => {
-if (e.detail === 0)
+if (pointerPresses.delete(el))
+return;
+const d = e.detail;
+const click = typeof d === 'number' ? e : d?.originalEvent ?? e;
+if (click.detail !== 0)
+return;
+if (click.composedPath().includes(el))
+return;
 handleAnchorClick(el, e);
 };
 anchorKeyClickHandlers.set(el, keyHandler);
@@ -221,17 +246,29 @@ dialog.addEventListener('pointerdown', outsideHandler);
 const escapeHandler = (e) => handleEscape(el, e);
 escapeHandlers.set(el, escapeHandler);
 el.addEventListener('keydown', escapeHandler);
-dialog.addEventListener('close', () => {
-const popupId = getPopupId(el);
-unlockScroll(popupId);
+new MutationObserver(() => {
+if (dialog.open)
+return;
+clearTimeout(closeTimers.get(el));
+closeTimers.delete(el);
+pointerPresses.delete(el);
+unlockScroll(getPopupId(el));
 dialog.classList.remove('open');
 dialog.classList.remove('preparing-animation');
+const anchor = getAnchorElement(el);
+if (anchor?.hasAttribute('aria-haspopup'))
+anchor.setAttribute('aria-expanded', 'false');
+}).observe(dialog, { attributes: true, attributeFilter: ['open'] });
+dialog.addEventListener('close', () => {
 el.dispatchEvent(new CustomEvent('close'));
 });
 }
 el.closePopup = () => closePopup(el, true);
 el.openPopup = () => openPopup(el);
 el.togglePopup = () => togglePopup(el);
+const existingCloseRequest = closeRequestHandlers.get(el);
+if (existingCloseRequest)
+el.removeEventListener('ty:close-popup', existingCloseRequest);
 const closeRequestHandler = (e) => handleCloseRequest(el, e);
 closeRequestHandlers.set(el, closeRequestHandler);
 el.addEventListener('ty:close-popup', closeRequestHandler);

package/lib/components/radio.d.ts

@@ -165,7 +165,8 @@ export declare class TyRadioGroup extends TyComponent<RadioGroupState> implement
     private getRadios;
     private syncChildren;
     /** Report `required` to the owning form — without this the asterisk
-        showed but an empty group submitted anyway. */
+        showed but an empty group submitted anyway. The message is a native
+        radio's; it needs a name, a nameless radio never reports valueMissing. */
     private updateValidity;
     private handleRadioSelect;
     /**

package/lib/components/radio.js

@@ -4,6 +4,7 @@ import { ensureStyles } from "../utils/styles.js";
 import { syncCustomFlavorSheet } from "../utils/flavor-sheet.js";
 import { radioStyles, radioCustomFlavorCss } from "../styles/radio.js";
 import { REQUIRED_ICON_SVG } from "../utils/icons.js";
+import { nativeMessage } from "../utils/validity.js";
 export class TyRadio extends TyComponent {
 constructor() {
 super();
@@ -223,7 +224,7 @@ updateValidity() {
 if (this.required && !this.disabled && !this.value) {
 const anchor = this.getRadios().find((r) => !r.disabled);
 const target = anchor?.shadowRoot?.querySelector(".radio-container");
-this.applyValidity({ valueMissing: true }, "Please select an option", target ?? undefined);
+this.applyValidity({ valueMissing: true }, nativeMessage("input", { type: "radio", name: "ty", required: true }), target ?? undefined);
 }
 else {
 this.applyValidity({});

package/lib/components/resize-observer.js

@@ -1,6 +1,7 @@
 import { ensureStyles } from '../utils/styles.js';
 import { resizeObserverStyles } from '../styles/resize-observer.js';
 import { updateSize, removeSize } from '../utils/resize-observer.js';
+import { upgradeProperties } from '../utils/upgrade-properties.js';
 export class TyResizeObserver extends HTMLElement {
 static get observedAttributes() {
 return ['id', 'debounce'];
@@ -20,6 +21,7 @@ ensureStyles(shadow, { css: resizeObserverStyles, id: 'ty-resize-observer' });
 shadow.innerHTML = '<slot></slot>';
 }
 connectedCallback() {
+upgradeProperties(this);
 this.setupObserver();
 }
 attributeChangedCallback(name, oldValue, newValue) {

package/lib/components/scroll-container.js

@@ -1,6 +1,7 @@
 import { ensureStyles } from '../utils/styles.js';
 import { scrollContainerStyles } from '../styles/scroll-container.js';
 import { CustomScrollbar } from '../utils/custom-scrollbar.js';
+import { upgradeProperties } from '../utils/upgrade-properties.js';
 export class TyScrollContainer extends HTMLElement {
 static get observedAttributes() {
 return ['no-shadow', 'max-height', 'hide-scrollbar', 'custom-scrollbar', 'overflow-x', 'scroll-anchoring'];
@@ -112,6 +113,7 @@ this._shadowLeft = shadow.querySelector('.shadow-left');
 this._shadowRight = shadow.querySelector('.shadow-right');
 }
 connectedCallback() {
+upgradeProperties(this);
 this._scrollWrapper?.addEventListener('scroll', this._onScroll, { passive: true });
 this._resizeObserver = new ResizeObserver(() => {
 this._scrollbar?.update();

package/lib/components/select.d.ts

@@ -73,6 +73,11 @@ export declare class TySelect extends TyComponent<SelectState> {
             visual: boolean;
             default: boolean;
         };
+        error: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         noClear: {
             type: "boolean";
             visual: boolean;
@@ -190,11 +195,19 @@ export declare class TySelect extends TyComponent<SelectState> {
     private _childObserver;
     private _selectedClone;
     private _customFlavorSheet;
+    private _ariaTrigger;
     constructor();
     /** TyComponent handles property capture automatically. */
     protected onConnect(): void;
     /** Custom (non-built-in) flavors — see utils/flavor-sheet.ts. */
     private _syncCustomFlavor;
+    /**
+     * `error` turns a neutral select danger, like ty-input; clearing it puts
+     * back exactly the flavor attribute the author had, or none, kept meanwhile
+     * in ERROR_FLAVOR. Runs once connected: while the element upgrades, `error`
+     * may come before the `flavor` written next to it.
+     */
+    private syncErrorFlavor;
     protected onDisconnect(): void;
     /** Handle state synchronization BEFORE render. */
     protected onPropertiesChanged(changes: PropertyChange[]): void;
@@ -369,8 +382,9 @@ export declare class TySelect extends TyComponent<SelectState> {
      * Reflect constraint validation to the owning <form> via ElementInternals.
      * Without this `required` is only cosmetic — form.checkValidity() (and a
      * real submit) never actually blocks on an empty required select. Mirrors
-     * ty-input's updateValidity(): empty + required => valueMissing; disabled
-     * fields are barred from constraint validation.
+     * ty-input's updateValidity(): empty + required => valueMissing, with a
+     * native <select>'s message; disabled fields are barred from constraint
+     * validation.
      */
     private updateValidity;
     /**
@@ -383,6 +397,16 @@ export declare class TySelect extends TyComponent<SelectState> {
     private renderDesktop;
     private renderMobile;
     private setupMobileEventListeners;
+    /**
+     * The dialog was closed by someone else — a ty-modal around this select
+     * closes the dialogs still open inside it. Run our own close too, so the
+     * open state, aria-expanded and the scroll lock follow. Watches the `open`
+     * attribute rather than the `close` event: that one comes a task later,
+     * so right after modal.hide() the stub would still say expanded. Our own
+     * close() calls land here with the state already closed, and a dialog
+     * reopened since then is open again: both are no-ops.
+     */
+    private syncOnOutsideClose;
     private handleMobileStubClick;
     /** Keyboard-open the (closed) mobile stub — see handleStubKeydown for why this is needed. */
     private handleMobileStubKeydown;
@@ -444,7 +468,9 @@ export declare class TySelect extends TyComponent<SelectState> {
      * Clear the entire selection programmatically WITH a change event
      * (action: 'clear'). No-op if nothing is selected. Exists so slot="trigger"
      * consumers (custom chrome, built-in clear UI hidden by design) can wire
-     * their own clear icon's click handler to it.
+     * their own clear icon's click handler to it. Shows no validation
+     * message (a code reset after a save shouldn't flag the field); the
+     * built-in × does.
      */
     clear(): void;
     get value(): string;
@@ -469,6 +495,8 @@ export declare class TySelect extends TyComponent<SelectState> {
     set noClear(value: boolean);
     get required(): boolean;
     set required(value: boolean);
+    get error(): string;
+    set error(value: string);
     get notSearchable(): boolean;
     set notSearchable(value: boolean);
     get externalSearch(): boolean;
@@ -483,6 +511,7 @@ export declare class TySelect extends TyComponent<SelectState> {
     set placement(value: Placement | "");
     get flavor(): Flavor;
     set flavor(value: Flavor);
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     get form(): HTMLFormElement | null;
 }
 export {};