tyrell-components 1.0.0-TC56 → 1.0.0-TC58

package/lib/components/modal.js

@@ -1,5 +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();
@@ -97,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();
@@ -154,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);
@@ -252,6 +286,7 @@ dispatchModalEvent(el, 'open', {});
 else {
 if (dialog.open) {
 unlockScroll(modalId);
+closeNestedDialogs(el);
 dialog.close();
 syncBackdropZoom();
 const reason = pendingCloseReasons.get(el) ?? 'programmatic';
@@ -259,10 +294,12 @@ pendingCloseReasons.delete(el);
 dispatchModalEvent(el, 'close', { reason });
 }
 }
+syncBackdropZoom();
 dialog.onclose = (event) => {
 if (event.target !== dialog)
 return;
 unlockScroll(modalId);
+closeNestedDialogs(el);
 if (el.hasAttribute('open')) {
 el.removeAttribute('open');
 dispatchModalEvent(el, 'close', {
@@ -274,10 +311,7 @@ syncBackdropZoom();
 };
 }
 function syncBackdropZoom() {
-const anyOpen = Array.from(document.querySelectorAll('ty-modal[open][backdrop-zoom], ty-dialog[open][backdrop-zoom]')).some((m) => {
-const v = m.getAttribute('backdrop-zoom').toLowerCase().trim();
-return v !== 'false' && v !== '0';
-});
+const anyOpen = Array.from(document.querySelectorAll('ty-modal[open], ty-dialog[open]')).some((m) => parseBoolAttr(m, 'open') && !parseBoolAttr(m, 'no-zoom'));
 document.documentElement.classList.toggle('ty-modal-zoom', anyOpen);
 }
 function cleanup(el) {
@@ -325,27 +359,32 @@ hoverLeaveHandlers.delete(el);
 }
 export class TyModal extends HTMLElement {
 static get observedAttributes() {
-return ['open', 'no-backdrop', 'prevent-outside-click', 'prevent-escape', 'label'];
+return ['open', 'no-backdrop', 'no-zoom', 'prevent-outside-click', 'prevent-escape', 'label'];
 }
 get open() { return parseBoolAttr(this, 'open'); }
-set open(v) { v ? this.setAttribute('open', 'true') : this.removeAttribute('open'); }
+set open(v) { coerceBoolean(v) ? this.setAttribute('open', 'true') : this.removeAttribute('open'); }
 get noBackdrop() { return parseBoolAttr(this, 'no-backdrop'); }
 set noBackdrop(v) {
-v ? this.setAttribute('no-backdrop', '') : this.removeAttribute('no-backdrop');
+coerceBoolean(v) ? this.setAttribute('no-backdrop', '') : this.removeAttribute('no-backdrop');
+}
+get noZoom() { return parseBoolAttr(this, 'no-zoom'); }
+set noZoom(v) {
+coerceBoolean(v) ? this.setAttribute('no-zoom', '') : this.removeAttribute('no-zoom');
 }
 get preventOutsideClick() { return parseBoolAttr(this, 'prevent-outside-click'); }
 set preventOutsideClick(v) {
-v ? this.setAttribute('prevent-outside-click', '') : this.removeAttribute('prevent-outside-click');
+coerceBoolean(v) ? this.setAttribute('prevent-outside-click', '') : this.removeAttribute('prevent-outside-click');
 }
 get preventEscape() { return parseBoolAttr(this, 'prevent-escape'); }
 set preventEscape(v) {
-v ? this.setAttribute('prevent-escape', '') : this.removeAttribute('prevent-escape');
+coerceBoolean(v) ? this.setAttribute('prevent-escape', '') : this.removeAttribute('prevent-escape');
 }
 constructor() {
 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,4 +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"
@@ -22,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) {
@@ -80,6 +78,7 @@ get selected() {
 return this._selected;
 }
 set selected(value) {
+value = coerceBoolean(value);
 if (this._selected !== value) {
 this._selected = value;
 if (value) {
@@ -95,6 +94,7 @@ get disabled() {
 return this._disabled;
 }
 set disabled(value) {
+value = coerceBoolean(value);
 if (this._disabled !== value) {
 this._disabled = value;
 if (value) {
@@ -110,6 +110,7 @@ get highlighted() {
 return this._highlighted;
 }
 set highlighted(value) {
+value = coerceBoolean(value);
 if (this._highlighted !== value) {
 this._highlighted = value;
 if (value) {
@@ -125,6 +126,7 @@ get hidden() {
 return this._hidden;
 }
 set hidden(value) {
+value = coerceBoolean(value);
 if (this._hidden !== value) {
 this._hidden = value;
 if (value) {

package/lib/components/popup.js

@@ -5,9 +5,11 @@ import { popupStyles } from '../styles/popup.js';
 const anchorClickHandlers = new WeakMap();
 const anchorKeyClickHandlers = new WeakMap();
 const outsideClickHandlers = new WeakMap();
+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);
 }
@@ -76,20 +78,33 @@ if (anchor?.hasAttribute('aria-haspopup'))
 anchor.setAttribute('aria-expanded', 'false');
 const exitMs = Math.max(0, ...getComputedStyle(dialog).transitionDuration
 .split(',').map((d) => parseFloat(d) * (d.trim().endsWith('ms') ? 1 : 1000)));
-setTimeout(() => {
+clearTimeout(closeTimers.get(el));
+closeTimers.set(el, setTimeout(() => {
+closeTimers.delete(el);
 dialog.classList.remove('position-calculated');
 dialog.close();
-}, exitMs + 20);
+}, exitMs + 20));
 }
 function openPopup(el) {
-const popupId = getPopupId(el);
-lockScroll(popupId);
 const shadowRoot = el.shadowRoot;
 const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
 if (!dialog)
 return;
-dialog.showModal();
 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();
 if (anchor?.hasAttribute('aria-haspopup'))
 anchor.setAttribute('aria-expanded', 'true');
 requestAnimationFrame(() => {
@@ -128,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);
@@ -160,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);
@@ -209,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

@@ -160,10 +160,13 @@ export declare class TyRadioGroup extends TyComponent<RadioGroupState> implement
      * the accessors after upgrade. Each radio fires ty-radio-connected once
      * upgraded, which re-syncs the group.
      */
+    /** Focus the group's tab stop: the checked radio, else the first enabled one. */
+    focus(options?: FocusOptions): void;
     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();
@@ -184,6 +185,14 @@ this.syncChildren();
 getFormValue() {
 return this.value || null;
 }
+focus(options) {
+const enabled = this.getRadios().filter((r) => !r.disabled);
+const stop = enabled.find((r) => r.checked) ?? enabled[0];
+if (stop)
+stop.focus(options);
+else
+super.focus(options);
+}
 getRadios() {
 return Array.from(this.querySelectorAll("ty-radio"))
 .filter((r) => typeof r.setTabStop === "function");
@@ -215,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;
@@ -207,6 +220,8 @@ export declare class TySelect extends TyComponent<SelectState> {
     private applyLoadingState;
     /** Form value: a plain entry for single, FormData with repeated entries for multiple (HTMX standard). */
     protected getFormValue(): FormDataEntryValue | FormData | null;
+    /** Focus the trigger: a slotted one, else the field. The host itself isn't focusable. */
+    focus(options?: FocusOptions): void;
     private parseValue;
     /** Initialize component state from the value property / pre-selected children. */
     private initializeState;
@@ -367,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;
     /**
@@ -381,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;
@@ -442,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;
@@ -467,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;
@@ -481,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 {};