tyrell-components 1.0.0-TC58 → 1.0.0-TC59

package/lib/components/date-picker.js

@@ -1,6 +1,5 @@
 import { ensureStyles } from '../utils/styles.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
-import { ERROR_FLAVOR } from '../utils/error-flavor.js';
 import { datePickerStyles, datePickerCustomFlavorCss } from '../styles/date-picker.js';
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
 import { computeAnchoredPosition, placementToAnchored } from '../utils/positioning.js';
@@ -9,6 +8,7 @@ import { isMobileTouch } from '../utils/mobile.js';
 import { TyComponent } from '../base/ty-component.js';
 import { DEFAULT_SIZE } from '../types/common.js';
 import { nativeMessage } from '../utils/validity.js';
+import { parseDateTime, toISODay, wallClockDate } from '../utils/calendar-utils.js';
 const CALENDAR_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'></rect><line x1='16' y1='2' x2='16' y2='6'></line><line x1='8' y1='2' x2='8' y2='6'></line><line x1='3' y1='10' x2='21' y2='10'></line></svg>`;
 const CLEAR_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='14' height='14' xmlns='http://www.w3.org/2000/svg'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>`;
 const SCHEDULE_ICON_SVG = `<svg stroke='currentColor' fill='none' stroke-width='2' viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg'><circle cx='12' cy='12' r='10'></circle><polyline points='12,6 12,12 16,14'></polyline></svg>`;
@@ -22,41 +22,6 @@ elementIds.set(element, id);
 }
 return id;
 }
-const LOCAL_VALUE = /^(\d{4})-(\d{2})-(\d{2})(?:[T ](\d{2}):(\d{2})(?::(\d{2})(?:\.\d+)?)?)?$/;
-function wallClockDate(c) {
-const date = new Date(0);
-date.setUTCFullYear(c.year, c.month - 1, c.day);
-date.setUTCHours(c.hour || 0, c.minute || 0, c.second || 0);
-return date;
-}
-function parseValue(value) {
-if (value === null || value === undefined || value === '')
-return null;
-if (typeof value === 'string') {
-const local = LOCAL_VALUE.exec(value);
-if (local) {
-const [year, month, day, hour, minute, second] = local.slice(1, 7).map((g) => Number(g ?? 0));
-const components = { year, month, day, hour, minute, second };
-const check = wallClockDate(components);
-const real = check.getUTCMonth() === month - 1 && check.getUTCDate() === day &&
-hour < 24 && minute < 60 && second < 60;
-return real ? components : null;
-}
-}
-const dateObj = typeof value === 'number' || typeof value === 'string' ? new Date(value) : null;
-if (!dateObj || isNaN(dateObj.getTime())) {
-return null;
-}
-return {
-year: dateObj.getFullYear(),
-month: dateObj.getMonth() + 1,
-day: dateObj.getDate(),
-hour: dateObj.getHours(),
-minute: dateObj.getMinutes(),
-second: dateObj.getSeconds(),
-epoch: dateObj.getTime(),
-};
-}
 function componentsToDateObject(components) {
 const { year, month, day, hour, minute, second } = components;
 if (!year || !month || !day)
@@ -248,7 +213,6 @@ if (this._initialized)
 this._state.open = false;
 else
 this.initializeState();
-this.syncErrorFlavor();
 this.render();
 this.updateFormValue();
 this._localeObserver = observeLocaleChanges(this, () => {
@@ -271,10 +235,6 @@ 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 'size':
@@ -287,9 +247,7 @@ break;
 case 'noClear':
 case 'format':
 case 'locale':
-break;
 case 'error':
-this.syncErrorFlavor();
 break;
 case 'value': {
 if (!this._initialized || this._syncing)
@@ -297,7 +255,7 @@ break;
 this._state = {
 withTime: this._state.withTime,
 open: this._state.open,
-...parseValue(newValue),
+...parseDateTime(newValue),
 };
 this.syncFormValue();
 break;
@@ -374,7 +332,7 @@ return formatDisplayValue(c, this.getProperty('format') || 'long', getEffectiveL
 }
 initializeState() {
 this._state = {
-...parseValue(this.getProperty('value')),
+...parseDateTime(this.getProperty('value')),
 withTime: this.getProperty('with-time'),
 open: false,
 };
@@ -401,27 +359,6 @@ this._syncing = false;
 }
 }
 }
-syncErrorFlavor() {
-if (!this._connected)
-return;
-const flavor = this.getProperty('flavor');
-const replaced = this.getAttribute(ERROR_FLAVOR);
-if (this.getProperty('error')) {
-if (replaced === null && (flavor === 'default' || 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);
-}
-}
 handleTimeInputChange(hour, minute) {
 if (!this.hasDate())
 return;
@@ -476,15 +413,7 @@ set size(v) { this.setProperty('size', v); }
 get placement() { return this.getProperty('placement'); }
 set placement(v) { this.setProperty('placement', v); }
 get flavor() { return this.getProperty('flavor'); }
-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);
-}
+set flavor(v) { this.setProperty('flavor', v); }
 get label() { return this.getProperty('label'); }
 set label(v) { this.setProperty('label', v); }
 get placeholder() { return this.getProperty('placeholder'); }
@@ -514,7 +443,7 @@ set error(v) { this.setProperty('error', v); }
 get value() {
 if (this._initialized)
 return this.getProperty('value') || null;
-const parsed = parseValue(this.getProperty('value'));
+const parsed = parseDateTime(this.getProperty('value'));
 return parsed && componentsToOutputValue(parsed, !!this.getProperty('with-time'), !!this.getProperty('native'));
 }
 set value(val) {
@@ -658,7 +587,7 @@ const contentWrapper = document.createElement('div');
 contentWrapper.className = 'calendar-content';
 const calendar = document.createElement('ty-calendar');
 if (this._state.year && this._state.month && this._state.day) {
-calendar.setAttribute('year', this._state.year.toString());
+calendar.setAttribute('year', String(this._state.year).padStart(4, '0'));
 calendar.setAttribute('month', this._state.month.toString());
 calendar.setAttribute('day', this._state.day.toString());
 }
@@ -682,14 +611,15 @@ contentWrapper.appendChild(this.renderTimeSection());
 }
 dialog.appendChild(contentWrapper);
 new MutationObserver(() => {
-if (this._state.open && !dialog.open && this.isConnected)
+if (this._state.open && !dialog.open && dialog.isConnected && this.isConnected)
 this.closeDropdown();
 }).observe(dialog, { attributes: true, attributeFilter: ['open'] });
 return dialog;
 }
 calendarFlavor() {
-const replaced = this.getAttribute(ERROR_FLAVOR);
-const flavor = replaced ?? this.getProperty('flavor');
+if (this.getProperty('error'))
+return 'danger';
+const flavor = this.getProperty('flavor');
 return flavor && flavor !== 'default' ? flavor : null;
 }
 renderNativeInput() {
@@ -715,7 +645,7 @@ if (!input.value) {
 this.clearValue();
 }
 else {
-const parsed = parseValue(input.value);
+const parsed = parseDateTime(input.value);
 if (parsed) {
 const { hour, minute, second } = this._state.withTime ? parsed : this._state;
 const components = { ...parsed, hour, minute, second, epoch: undefined };
@@ -754,8 +684,8 @@ const withTime = this._state.withTime;
 input.type = withTime ? 'datetime-local' : 'date';
 input.disabled = !!this.getProperty('disabled');
 input.required = !!this.getProperty('required');
-const min = this.getProperty('min');
-const max = this.getProperty('max');
+const min = toISODay(this.getProperty('min'));
+const max = toISODay(this.getProperty('max'));
 if (min)
 input.min = withTime ? `${min}T00:00` : min;
 else
@@ -910,7 +840,7 @@ return;
 }
 const calendar = this.shadowRoot.querySelector('ty-calendar');
 if (calendar && hasValue) {
-calendar.setAttribute('year', this._state.year.toString());
+calendar.setAttribute('year', String(this._state.year).padStart(4, '0'));
 calendar.setAttribute('month', this._state.month.toString());
 calendar.setAttribute('day', this._state.day.toString());
 }

package/lib/components/file-upload.js

@@ -2,6 +2,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 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>`;
@@ -381,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}`;
@@ -434,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

@@ -151,14 +151,6 @@ 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;
@@ -209,7 +201,6 @@ 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;

package/lib/components/input.js

@@ -2,7 +2,6 @@ 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';
@@ -60,32 +59,14 @@ this._localeObserver = observeLocaleChanges(this, () => {
 this.render();
 });
 this._syncCustomFlavor();
-this.syncErrorFlavor();
+if (this._rendered) {
+this.render();
+this.setupEventListeners();
+}
 }
 _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) {
@@ -105,10 +86,6 @@ 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':
@@ -118,9 +95,6 @@ case 'type':
 const currentValue = this.getProperty('value') || '';
 this._shadowValue = this.parseShadowValue(currentValue);
 break;
-case 'error':
-this.syncErrorFlavor();
-break;
 }
 }
 }
@@ -226,15 +200,7 @@ 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.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);
-}
+set flavor(v) { this.setProperty('flavor', v); }
 get currency() { return this.getProperty('currency'); }
 set currency(v) { this.setProperty('currency', v); }
 get locale() {
@@ -416,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';
@@ -426,7 +395,9 @@ 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;
@@ -436,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', '');
@@ -541,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));

package/lib/components/modal.js

@@ -10,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)) {
@@ -108,25 +115,36 @@ return true;
 }
 return false;
 }
-function closeNestedDialogs(root, seen = new WeakSet()) {
-const close = (node) => {
-if (seen.has(node))
-return;
-seen.add(node);
+function closeNestedDialogs(root) {
+walkNested(root, (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);
+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 })) {
-close(assigned);
-closeNestedDialogs(assigned, seen);
+if (walk(assigned) || walkNested(assigned, visit, seen))
+return true;
 }
 }
+return false;
 };
-root.querySelectorAll('*').forEach(close);
+return Array.from(root.querySelectorAll('*')).some(walk);
 }
 function handleEscapeKey(el, event) {
 const dialog = event.currentTarget;
@@ -138,6 +156,22 @@ 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();
@@ -273,17 +307,17 @@ 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);
@@ -296,9 +330,10 @@ 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');
@@ -311,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);
@@ -325,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);

package/lib/components/popup.js

@@ -9,6 +9,8 @@ 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);
@@ -88,7 +90,7 @@ 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) {
@@ -105,14 +107,28 @@ return;
 const popupId = getPopupId(el);
 lockScroll(popupId);
 dialog.showModal();
+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'));
 });
 });
@@ -153,6 +169,23 @@ 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;
@@ -179,14 +212,16 @@ 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);
 }
+anchors.set(el, anchor);
 const handler = (e) => {
 pointerPresses.add(el);
 handleAnchorClick(el, e);
@@ -208,7 +243,8 @@ 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);
@@ -233,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);
@@ -246,12 +283,23 @@ dialog.addEventListener('pointerdown', outsideHandler);
 const escapeHandler = (e) => handleEscape(el, e);
 escapeHandlers.set(el, escapeHandler);
 el.addEventListener('keydown', escapeHandler);
+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');
@@ -289,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);