tyrell-components 1.0.0-TC57 → 1.0.0-TC59

package/lib/components/file-upload.js

@@ -1,6 +1,8 @@
 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 DEFAULT_PLACEHOLDER = "Drop files here or click to browse";
 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 +54,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({});
@@ -380,9 +382,12 @@ const hintEl = container.querySelector(".upload-hint");
 if (this._files.length > 0) {
 hintEl.innerHTML = `<strong>${this._files.length} file${this._files.length !== 1 ? "s" : ""} selected</strong>`;
 }
-else {
+else if (!this.placeholder || this.placeholder === DEFAULT_PLACEHOLDER) {
 hintEl.innerHTML = `Drop files here or <span class="browse-link">click to browse</span>`;
 }
+else {
+hintEl.textContent = this.placeholder;
+}
 const subHintEl = container.querySelector(".upload-sub-hint");
 if (this.accept && this._files.length === 0) {
 subHintEl.textContent = `Accepted: ${this.accept}`;
@@ -433,7 +438,7 @@ default: "",
 placeholder: {
 type: "string",
 visual: true,
-default: "Drop files here or click to browse",
+default: DEFAULT_PLACEHOLDER,
 },
 error: {
 type: "string",

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;
@@ -235,10 +232,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

@@ -6,6 +6,7 @@ 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 +14,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,6 +59,10 @@ this._localeObserver = observeLocaleChanges(this, () => {
 this.render();
 });
 this._syncCustomFlavor();
+if (this._rendered) {
+this.render();
+this.setupEventListeners();
+}
 }
 _syncCustomFlavor() {
 this._customFlavorSheet = syncCustomFlavorSheet(this.shadowRoot, this._customFlavorSheet, this.flavor, ({ base }) => inputCustomFlavorCss(base));
@@ -92,20 +95,6 @@ case 'type':
 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;
-}
-break;
 }
 }
 }
@@ -393,6 +382,9 @@ const existingWrapper = shadow.querySelector('.input-wrapper');
 const existingLabel = shadow.querySelector('.ty-field-label');
 const existingError = shadow.querySelector('.error-message');
 const classes = this.buildClassList();
+const focused = !!existingInput && shadow.activeElement === existingInput;
+if (!focused)
+this._isFocused = false;
 const inputType = ['password', 'email', 'tel', 'url'].includes(this.type)
 ? this.type
 : 'text';
@@ -403,7 +395,10 @@ const inputMode = shouldFormatType(this.type) ? 'decimal'
 : undefined;
 const displayValue = this.getDisplayValue();
 if (existingInput && existingWrapper) {
-existingInput.type = inputType;
+const revealed = inputType === 'password' &&
+shadow.querySelector('.password-toggle')?.getAttribute('aria-pressed') === 'true';
+existingInput.type = revealed ? 'text' : inputType;
+if (existingInput.value !== displayValue)
 existingInput.value = displayValue;
 existingInput.placeholder = this.placeholder;
 existingInput.name = this.name;
@@ -412,6 +407,7 @@ existingInput.inputMode = inputMode;
 else
 existingInput.removeAttribute('inputmode');
 existingWrapper.className = `input-wrapper ${classes}`;
+existingWrapper.classList.toggle('focused', focused);
 existingInput.disabled = this.disabled;
 if (this.disabled) {
 existingInput.setAttribute('disabled', '');
@@ -517,7 +513,12 @@ return;
 toggle.addEventListener('mousedown', (e) => e.preventDefault());
 toggle.addEventListener('click', () => {
 const reveal = inputEl.type === 'password';
+const { selectionStart, selectionEnd, selectionDirection } = inputEl;
 inputEl.type = reveal ? 'text' : 'password';
+if (selectionStart !== null && shadow.activeElement === inputEl) {
+inputEl.getBoundingClientRect();
+inputEl.setSelectionRange(selectionStart, selectionEnd, selectionDirection ?? undefined);
+}
 toggle.innerHTML = reveal ? EYE_OFF_ICON_SVG : EYE_ICON_SVG;
 toggle.setAttribute('aria-label', reveal ? 'Hide password' : 'Show password');
 toggle.setAttribute('aria-pressed', String(reveal));
@@ -527,6 +528,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 +540,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 +555,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 +739,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();
@@ -9,6 +10,13 @@ const hoverEnterHandlers = new WeakMap();
 const hoverLeaveHandlers = new WeakMap();
 const modalIds = new WeakMap();
 const pendingCloseReasons = new WeakMap();
+const detachedOpen = new WeakSet();
+const openStack = [];
+function dropFromStack(el) {
+const i = openStack.indexOf(el);
+if (i >= 0)
+openStack.splice(i, 1);
+}
 const CLOSE_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x-icon lucide-x"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`;
 function parseBoolAttr(el, name) {
 if (!el.hasAttribute(name)) {
@@ -98,13 +106,72 @@ 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) {
+walkNested(root, (node) => {
+if (node instanceof TyModal && node.open)
+node.removeAttribute('open');
+if (node instanceof HTMLDialogElement && node.matches(':modal'))
+node.close();
+return false;
+});
+}
+function hasOpenNestedDialog(root) {
+return walkNested(root, (node) => node instanceof HTMLDialogElement && node.matches(':modal'));
+}
+function walkNested(root, visit, seen = new WeakSet()) {
+const walk = (node) => {
+if (seen.has(node))
+return false;
+seen.add(node);
+if (visit(node))
+return true;
+if (node.shadowRoot && walkNested(node.shadowRoot, visit, seen))
+return true;
+if (node instanceof HTMLSlotElement) {
+for (const assigned of node.assignedElements({ flatten: true })) {
+if (walk(assigned) || walkNested(assigned, visit, seen))
+return true;
+}
+}
+return false;
+};
+return Array.from(root.querySelectorAll('*')).some(walk);
+}
 function handleEscapeKey(el, event) {
+const dialog = event.currentTarget;
+if (fromNestedDialog(dialog, event))
+return;
 event.stopPropagation();
 if (event.key === 'Escape') {
 event.preventDefault();
 closeModal(el, 'escape');
 }
 }
+function handleDocumentEscape(event) {
+if (event.key !== 'Escape' || event.defaultPrevented)
+return;
+const top = openStack[openStack.length - 1];
+if (!top)
+return;
+if (event.composedPath().some((n) => n instanceof HTMLDialogElement && n.open))
+return;
+if (hasOpenNestedDialog(top))
+return;
+event.preventDefault();
+if (getModalAttributes(top).closeOnEscape)
+closeModal(top, 'escape');
+}
+if (typeof document !== 'undefined')
+document.addEventListener('keydown', handleDocumentEscape);
 function handleCloseButtonClick(el, event) {
 event.preventDefault();
 event.stopPropagation();
@@ -155,7 +222,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);
@@ -240,19 +307,20 @@ setupCloseButtonHover(el, dialog);
 if (attributes.open) {
 if (!dialog.open) {
 lockScroll(modalId);
-if (attributes.backdrop) {
 dialog.showModal();
-}
-else {
-dialog.show();
-}
+dropFromStack(el);
+openStack.push(el);
 syncBackdropZoom();
+if (!detachedOpen.delete(el))
 dispatchModalEvent(el, 'open', {});
 }
 }
 else {
+detachedOpen.delete(el);
+dropFromStack(el);
 if (dialog.open) {
 unlockScroll(modalId);
+closeNestedDialogs(el);
 dialog.close();
 syncBackdropZoom();
 const reason = pendingCloseReasons.get(el) ?? 'programmatic';
@@ -262,9 +330,11 @@ dispatchModalEvent(el, 'close', { reason });
 }
 syncBackdropZoom();
 dialog.onclose = (event) => {
-if (event.target !== dialog)
+if (event.target !== dialog || dialog.open || !el.isConnected)
 return;
 unlockScroll(modalId);
+dropFromStack(el);
+closeNestedDialogs(el);
 if (el.hasAttribute('open')) {
 el.removeAttribute('open');
 dispatchModalEvent(el, 'close', {
@@ -276,13 +346,15 @@ syncBackdropZoom();
 };
 }
 function syncBackdropZoom() {
-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);
+const zoom = Array.from(document.querySelectorAll('ty-modal[open], ty-dialog[open]'))
+.some((m) => parseBoolAttr(m, 'open') && !parseBoolAttr(m, 'no-backdrop') && !parseBoolAttr(m, 'no-zoom'));
+document.documentElement.classList.toggle('ty-modal-zoom', zoom);
 }
 function cleanup(el) {
 const modalId = modalIds.get(el);
 const shadowRoot = el.shadowRoot;
 const dialog = shadowRoot ? getModalDialog(shadowRoot) : null;
+dropFromStack(el);
 if (modalId) {
 unlockScroll(modalId);
 modalIds.delete(el);
@@ -290,6 +362,10 @@ modalIds.delete(el);
 syncBackdropZoom();
 if (!dialog)
 return;
+if (dialog.open) {
+dialog.close();
+detachedOpen.add(el);
+}
 const backdropHandler = backdropClickHandlers.get(el);
 if (backdropHandler) {
 dialog.removeEventListener('click', backdropHandler);
@@ -349,6 +425,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,9 @@ const closeTimers = new WeakMap();
 const escapeHandlers = new WeakMap();
 const closeRequestHandlers = new WeakMap();
 const popupIds = new WeakMap();
+const anchors = new WeakMap();
+const escapeGuards = new WeakMap();
+const pointerPresses = new WeakSet();
 function parseBoolAttr(el, name) {
 return el.hasAttribute(name);
 }
@@ -87,29 +90,45 @@ dialog.close();
 function openPopup(el) {
 const shadowRoot = el.shadowRoot;
 const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
-if (!dialog)
+if (!dialog || !el.isConnected)
 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);
+guardEscape(el);
 if (anchor?.hasAttribute('aria-haspopup'))
 anchor.setAttribute('aria-expanded', 'true');
 requestAnimationFrame(() => {
 updatePosition(el);
 dialog.classList.add('preparing-animation');
-void dialog.offsetWidth;
+dialog.getBoundingClientRect();
 requestAnimationFrame(() => {
 dialog.classList.add('open');
+if (!el.matches(':focus-within')) {
+const target = el.querySelector('[autofocus]');
+target?.focus({ preventScroll: true });
+if (!el.matches(':focus-within')) {
+dialog.focus({ preventScroll: true });
+if (target) {
+requestAnimationFrame(() => requestAnimationFrame(() => {
+if (dialog.open && shadowRoot.activeElement === dialog)
+target.focus({ preventScroll: true });
+}));
+}
+}
+}
 el.dispatchEvent(new CustomEvent('open'));
 });
 });
@@ -140,7 +159,36 @@ 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 guardEscape(el) {
+if (escapeGuards.has(el))
+return;
+const guard = (e) => {
+if (e.key === 'Escape' && getPopupAttributes(el).disableClose && !fromNestedDialog(el, e))
+e.preventDefault();
+};
+escapeGuards.set(el, guard);
+document.addEventListener('keydown', guard, true);
+}
+function unguardEscape(el) {
+const guard = escapeGuards.get(el);
+if (!guard)
+return;
+document.removeEventListener('keydown', guard, true);
+escapeGuards.delete(el);
+}
 function handleEscape(el, event) {
+if (fromNestedDialog(el, event))
+return;
 event.stopPropagation();
 if (event.key === 'Escape') {
 const { disableClose } = getPopupAttributes(el);
@@ -164,26 +212,39 @@ return;
 anchor.setAttribute('aria-haspopup', 'dialog');
 if (!anchor.hasAttribute('aria-expanded'))
 anchor.setAttribute('aria-expanded', 'false');
+const previous = anchors.get(el) ?? anchor;
 const existingHandler = anchorClickHandlers.get(el);
 if (existingHandler) {
-anchor.removeEventListener('pointerdown', existingHandler);
+previous.removeEventListener('pointerdown', existingHandler);
 }
 const existingKeyHandler = anchorKeyClickHandlers.get(el);
 if (existingKeyHandler) {
-anchor.removeEventListener('click', existingKeyHandler);
+previous.removeEventListener('click', existingKeyHandler);
 }
-const handler = (e) => handleAnchorClick(el, e);
+anchors.set(el, anchor);
+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);
 anchor.addEventListener('click', keyHandler);
 }
 function cleanupAnchorEvents(el) {
-const anchor = getAnchorElement(el);
+const anchor = anchors.get(el);
+anchors.delete(el);
 const handler = anchorClickHandlers.get(el);
 if (anchor && handler) {
 anchor.removeEventListener('pointerdown', handler);
@@ -208,6 +269,7 @@ const dialog = document.createElement('dialog');
 const container = document.createElement('div');
 const content = document.createElement('slot');
 dialog.className = 'popup-dialog';
+dialog.tabIndex = -1;
 container.className = 'popup-container';
 content.id = 'popup-content';
 shadowRoot.appendChild(dialog);
@@ -221,17 +283,40 @@ 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);
+const inertKeys = (e) => {
+if ((e.key === 'Enter' || e.key === ' ') && e.composedPath()[0] === dialog)
+e.preventDefault();
+};
+for (const type of ['keydown', 'keypress', 'keyup'])
+dialog.addEventListener(type, inertKeys);
+dialog.addEventListener('cancel', (e) => {
+if (getPopupAttributes(el).disableClose)
+e.preventDefault();
+});
+new MutationObserver(() => {
+if (dialog.open)
+return;
+clearTimeout(closeTimers.get(el));
+closeTimers.delete(el);
+pointerPresses.delete(el);
+unguardEscape(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);
@@ -252,12 +337,15 @@ if (outsideHandler) {
 dialog.removeEventListener('pointerdown', outsideHandler);
 outsideClickHandlers.delete(el);
 }
+if (dialog.open)
+dialog.close();
 }
 const escapeHandler = escapeHandlers.get(el);
 if (escapeHandler) {
 el.removeEventListener('keydown', escapeHandler);
 escapeHandlers.delete(el);
 }
+unguardEscape(el);
 const closeRequestHandler = closeRequestHandlers.get(el);
 if (closeRequestHandler) {
 el.removeEventListener('ty:close-popup', closeRequestHandler);