tyrell-components 1.0.0-TC58 → 1.0.0-TC59

package/lib/utils/scroll-lock.js

@@ -3,6 +3,7 @@ locked: false,
 scrollY: 0,
 activeLocks: new Set(),
 };
+let savedStyle = { overflow: '', paddingRight: '' };
 function getBodyEl() {
 return document.body;
 }
@@ -15,6 +16,102 @@ return window.scrollY || getDocEl().scrollTop || 0;
 function getScrollbarWidth() {
 return window.innerWidth - getDocEl().clientWidth;
 }
+const KEY_SCROLL = {
+ArrowDown: ['y', 1], ArrowUp: ['y', -1], PageDown: ['y', 1], PageUp: ['y', -1],
+End: ['y', 1], Home: ['y', -1], ' ': ['y', 1], ArrowRight: ['x', 1], ArrowLeft: ['x', -1],
+};
+const TEXT_INPUT = /^(?:text|search|email|url|tel|password|number|date|datetime-local|month|week|time|range|color)$/;
+function keyBelongsTo(el, key) {
+if (el instanceof HTMLTextAreaElement || el instanceof HTMLSelectElement)
+return true;
+if (el instanceof HTMLElement && el.isContentEditable)
+return true;
+if (el instanceof HTMLInputElement) {
+if (TEXT_INPUT.test(el.type))
+return true;
+if (el.type === 'radio' && key.startsWith('Arrow'))
+return true;
+}
+if (key === ' ' && el.matches('button, input, summary, a[href], [role]'))
+return true;
+if (key !== ' ' && el.matches('[role]:not([role=dialog]):not([role=document]):not([role=presentation]):not([role=none])'))
+return true;
+return false;
+}
+function canScroll(el, axis, dir) {
+const style = getComputedStyle(el);
+const overflow = axis === 'y' ? style.overflowY : style.overflowX;
+if (!/^(?:auto|scroll|overlay)$/.test(overflow) && !(el instanceof HTMLTextAreaElement))
+return false;
+const pos = axis === 'y' ? el.scrollTop : Math.abs(el.scrollLeft);
+const max = axis === 'y' ? el.scrollHeight - el.clientHeight : el.scrollWidth - el.clientWidth;
+if (max < 1)
+return false;
+return dir > 0 ? pos < max - 1 : pos > 0;
+}
+const HAS_POPOVER = typeof HTMLElement !== 'undefined' && 'popover' in HTMLElement.prototype;
+function isOpenPopover(el) {
+return HAS_POPOVER && el.hasAttribute('popover') && el.matches(':popover-open');
+}
+function scrollsInside(event, axis, dir) {
+if (!dir)
+return true;
+const path = event.composedPath().filter((n) => n instanceof Element);
+const root = path.findIndex((n) => (n instanceof HTMLDialogElement && n.open) || isOpenPopover(n));
+return root >= 0 && path.slice(0, root + 1).some((n) => canScroll(n, axis, dir));
+}
+function guardWheel(e) {
+if (e.ctrlKey)
+return;
+const axis = Math.abs(e.deltaX) > Math.abs(e.deltaY) || e.shiftKey ? 'x' : 'y';
+const delta = axis === 'y' && !e.shiftKey ? e.deltaY : e.deltaX || e.deltaY;
+if (e.cancelable && !scrollsInside(e, axis, Math.sign(delta)))
+e.preventDefault();
+}
+let touchX = 0;
+let touchY = 0;
+function guardTouchStart(e) {
+if (e.touches.length !== 1)
+return;
+touchX = e.touches[0].clientX;
+touchY = e.touches[0].clientY;
+}
+function guardTouchMove(e) {
+if (e.touches.length !== 1 || !e.cancelable)
+return;
+const { clientX, clientY } = e.touches[0];
+const dx = touchX - clientX;
+const dy = touchY - clientY;
+touchX = clientX;
+touchY = clientY;
+const axis = Math.abs(dx) > Math.abs(dy) ? 'x' : 'y';
+if (!scrollsInside(e, axis, Math.sign(axis === 'y' ? dy : dx)))
+e.preventDefault();
+}
+function guardKey(e) {
+const scroll = KEY_SCROLL[e.key];
+if (!scroll || e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey)
+return;
+const target = e.composedPath()[0];
+if (target instanceof Element && keyBelongsTo(target, e.key))
+return;
+const [axis, dir] = scroll;
+if (!scrollsInside(e, axis, e.key === ' ' && e.shiftKey ? -dir : dir))
+e.preventDefault();
+}
+const WHEEL_OPTS = { capture: true, passive: false };
+function addGuard() {
+window.addEventListener('wheel', guardWheel, WHEEL_OPTS);
+window.addEventListener('touchstart', guardTouchStart, { capture: true, passive: true });
+window.addEventListener('touchmove', guardTouchMove, WHEEL_OPTS);
+window.addEventListener('keydown', guardKey, true);
+}
+function removeGuard() {
+window.removeEventListener('wheel', guardWheel, WHEEL_OPTS);
+window.removeEventListener('touchstart', guardTouchStart, { capture: true });
+window.removeEventListener('touchmove', guardTouchMove, WHEEL_OPTS);
+window.removeEventListener('keydown', guardKey, true);
+}
 function lockBodyFixed() {
 if (lockState.locked)
 return;
@@ -25,11 +122,13 @@ console.log('🔒 Locking body scroll:', { scrollbarWidth });
 }
 lockState.scrollY = getScrollY();
 lockState.locked = true;
+savedStyle = { overflow: docEl.style.overflow, paddingRight: docEl.style.paddingRight };
 docEl.style.overflow = 'hidden';
 if (scrollbarWidth > 0) {
 docEl.style.paddingRight = `${scrollbarWidth}px`;
 }
 docEl.classList.add('ty-scroll-locked');
+addGuard();
 }
 function unlockBodyFixed() {
 if (!lockState.locked)
@@ -38,9 +137,10 @@ const docEl = getDocEl();
 if (window.tyScrollDebug) {
 console.log('🔓 Unlocking body scroll');
 }
+removeGuard();
 docEl.classList.remove('ty-scroll-locked');
-docEl.style.overflow = '';
-docEl.style.paddingRight = '';
+docEl.style.overflow = savedStyle.overflow;
+docEl.style.paddingRight = savedStyle.paddingRight;
 lockState.locked = false;
 }
 export function lockScroll(componentId) {

package/lib/utils/validity.d.ts

@@ -17,9 +17,17 @@
  * single-line field, form.requestSubmit()) and form.reportValidity() also
  * move focus to the first failing field — the first in form order, like a
  * native form, also when a later field shows a bubble. checkValidity() never
- * does. An `error` the author set is never overwritten or removed;
+ * does. For the script-run calls, a form holding a Ty field with an error
+ * line gets own requestSubmit / reportValidity wrappers (the prototype and
+ * other forms are left alone); they come off when the last such field leaves.
+ * An `error` the author set is never overwritten or removed;
  * form.reset() clears every message the controller wrote.
  */
+/**
+ * Run `fn` as a submit attempt: `invalid` events during it move focus to the
+ * first failing field. ty-button runs its form.requestSubmit() in this.
+ */
+export declare function asSubmitAttempt<T>(fn: () => T): T;
 export declare class ValidityController {
     private host;
     private internals;
@@ -27,7 +35,25 @@ export declare class ValidityController {
     private custom;
     /** The message this controller last wrote into `error`. */
     private written;
+    /** The anchor last handed to setValidity(). */
+    private anchor?;
+    /**
+     * Anchors a validation bubble was shown on, the last two. WebKit keeps a
+     * pointer to that anchor without keeping it alive: once a re-render drops
+     * it (ty-calendar rebuilds its grid) and it is garbage-collected, the next
+     * submit crashes the page. Held until two later bubbles replaced it.
+     */
+    private shown;
+    /** The form whose requestSubmit / reportValidity this field keeps wrapped. */
+    private form;
     constructor(host: HTMLElement, internals: ElementInternals);
+    /**
+     * The host connected, disconnected or changed form: keep its form's
+     * requestSubmit / reportValidity wrapped while it (or another Ty field with
+     * an error line) is in it. Only such a field needs it: a native control or
+     * a bubble field is focused by the browser itself.
+     */
+    track(): void;
     /**
      * Show the current message, if any, in the error display (on blur after an
      * edit). During a pointer interaction it waits until after the click.

package/lib/utils/validity.js

@@ -34,22 +34,6 @@ const target = e.composedPath()[0];
 if (e.key === 'Enter' && !e.isComposing && target instanceof HTMLInputElement && target.form)
 mark();
 }, true);
-const proto = HTMLFormElement.prototype;
-for (const name of ['requestSubmit', 'reportValidity']) {
-const original = proto[name];
-if (typeof original !== 'function')
-continue;
-proto[name] = function (...args) {
-const was = submitAttempt;
-submitAttempt = true;
-try {
-return original.apply(this, args);
-}
-finally {
-submitAttempt = was;
-}
-};
-}
 document.addEventListener('pointerdown', () => {
 clearTimeout(touchRelease);
 pointerPressed = true;
@@ -63,6 +47,50 @@ touchRelease = setTimeout(release, 1000);
 document.addEventListener('pointercancel', release, true);
 watchRoot(document);
 }
+export function asSubmitAttempt(fn) {
+const was = submitAttempt;
+submitAttempt = true;
+try {
+return fn();
+}
+finally {
+submitAttempt = was;
+}
+}
+const formMethods = ['requestSubmit', 'reportValidity'];
+const wrappedForms = new WeakMap();
+function wrapForm(form) {
+let entry = wrappedForms.get(form);
+if (entry)
+return entry;
+entry = { fields: new Set(), ours: {} };
+wrappedForms.set(form, entry);
+for (const name of formMethods) {
+if (typeof form[name] !== 'function')
+continue;
+const replaced = Object.getOwnPropertyDescriptor(form, name);
+const previous = replaced ? form[name] : undefined;
+const fn = function (...args) {
+const next = previous ?? Object.getPrototypeOf(form)[name];
+return asSubmitAttempt(() => next.apply(this, args));
+};
+Object.defineProperty(form, name, { value: fn, writable: true, configurable: true, enumerable: false });
+entry.ours[name] = { fn, replaced };
+}
+return entry;
+}
+function unwrapForm(form, entry) {
+wrappedForms.delete(form);
+for (const name of formMethods) {
+const own = entry.ours[name];
+if (!own || Object.getOwnPropertyDescriptor(form, name)?.value !== own.fn)
+continue;
+if (own.replaced)
+Object.defineProperty(form, name, own.replaced);
+else
+delete form[name];
+}
+}
 const watchedRoots = new WeakSet();
 function watchRoot(root) {
 if (watchedRoots.has(root))
@@ -102,8 +130,14 @@ this.internals = internals;
 this.own = { flags: {} };
 this.custom = '';
 this.written = null;
+this.shown = [];
+this.form = null;
 watchDocument();
 hosts.add(host);
+host.addEventListener('invalid', () => {
+if (this.anchor && !this.shown.includes(this.anchor))
+this.shown = [...this.shown.slice(-1), this.anchor];
+});
 host.addEventListener('invalid', (e) => {
 if (!hasErrorLine(host))
 return;
@@ -117,6 +151,23 @@ if (!form || firstInvalid(form) === host)
 host.focus();
 });
 }
+track() {
+const form = hasErrorLine(this.host) ? this.internals.form : null;
+if (form === this.form)
+return;
+const old = this.form && wrappedForms.get(this.form);
+if (old) {
+old.fields.delete(this);
+for (const c of old.fields)
+if (c.internals.form !== this.form)
+old.fields.delete(c);
+if (old.fields.size === 0)
+unwrapForm(this.form, old);
+}
+this.form = form;
+if (form)
+wrapForm(form).fields.add(this);
+}
 reveal() {
 if (pointerPressed) {
 pendingReveals.add(this);
@@ -170,6 +221,7 @@ return false;
 sync() {
 const { flags, message } = this.own;
 const anchor = this.own.anchor && within(this.host, this.own.anchor) ? this.own.anchor : undefined;
+this.anchor = anchor;
 const invalid = Object.values(flags).some(Boolean);
 if (this.custom) {
 this.internals.setValidity({ ...flags, customError: true }, this.custom, anchor);

package/lib/version.d.ts

@@ -4,4 +4,4 @@
  * This is automatically synced with package.json during build.
  * Use `npm version` to bump versions.
  */
-export declare const VERSION = "1.0.0-TC58";
+export declare const VERSION = "1.0.0-TC59";

package/lib/version.js

@@ -1 +1 @@
-export const VERSION = '1.0.0-TC58';
+export const VERSION = '1.0.0-TC59';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tyrell-components",
-  "version": "1.0.0-TC58",
+  "version": "1.0.0-TC59",
   "description": "Tyrell Components - Framework-agnostic web components with semantic design system",
   "type": "module",
   "sideEffects": [