tyrell-components 1.0.0-TC46 → 1.0.0-TC48

package/lib/base/ty-component.d.ts

@@ -132,9 +132,14 @@ export declare abstract class TyComponent<T = any> extends HTMLElement {
      * two genuinely separate clicks are always in different tasks.
      */
     protected isDuplicateActivationClick(): boolean;
-    /**
-     * Form reset callback - called when form.reset() is invoked
-     * Resets component to its default value
+    private _resetDefaults;
+    /**
+     * Form reset callback - called when form.reset() is invoked.
+     * Restores every formValue-bearing property to its attribute-declared
+     * default captured at first connect (native defaultValue/defaultChecked
+     * semantics). Non-form state (e.g. a checkbox's submission `value`, a
+     * ty-radio's option `value`) is deliberately left alone — the old
+     * blanket 'value' reset corrupted radio groups by wiping child values.
      */
     formResetCallback(): void;
     /**

package/lib/base/ty-component.js

@@ -5,6 +5,7 @@ export class TyComponent extends HTMLElement {
         this._connected = false;
         this._rendered = false;
         this._handlingActivationClick = false;
+        this._resetDefaults = null;
         const ctor = this.constructor;
         this.props = new PropertyManager(ctor.properties);
         this._internals = this.attachInternals();
@@ -79,6 +80,16 @@ export class TyComponent extends HTMLElement {
     }
     connectedCallback() {
         this._connected = true;
+        if (!this._resetDefaults) {
+            this._resetDefaults = new Map();
+            const ctor = this.constructor;
+            for (const [name, config] of Object.entries(ctor.properties)) {
+                if (!config.formValue)
+                    continue;
+                const attr = this.getAttribute(this._toKebabCase(name));
+                this._resetDefaults.set(name, attr ?? config.default ?? null);
+            }
+        }
         const preSetProps = this._capturePreSetProperties();
         if (preSetProps.length > 0) {
             this._handlePropertyChanges(preSetProps);
@@ -178,11 +189,8 @@ export class TyComponent extends HTMLElement {
         return false;
     }
     formResetCallback() {
-        const ctor = this.constructor;
-        const valueConfig = ctor.properties['value'];
-        if (valueConfig) {
-            const defaultValue = valueConfig.default ?? '';
-            this.setProperty('value', defaultValue);
+        for (const [name, def] of this._resetDefaults ?? []) {
+            this.setProperty(name, def);
         }
         this.onFormReset();
     }

package/lib/components/date-picker.d.ts

@@ -3,6 +3,7 @@
  * (modal <dialog>), optional time input, form participation via
  * ElementInternals. Value is UTC; display is local.
  */
+import { type Placement } from '../utils/positioning.js';
 import { TyComponent } from '../base/ty-component.js';
 import type { Flavor } from '../types/common.js';
 import type { PropertyChange } from '../utils/property-manager.js';
@@ -41,6 +42,11 @@ export interface DatePickerChangeDetail {
 }
 export declare class TyDatePicker extends TyComponent<DatePickerState> {
     protected static properties: {
+        placement: {
+            type: "string";
+            visual: boolean;
+            default: string;
+        };
         size: {
             type: "string";
             visual: boolean;
@@ -169,6 +175,8 @@ export declare class TyDatePicker extends TyComponent<DatePickerState> {
     private emitChangeEvent;
     get size(): DatePickerSize;
     set size(v: DatePickerSize);
+    get placement(): Placement | '';
+    set placement(v: Placement | '');
     get flavor(): DatePickerFlavor;
     set flavor(v: DatePickerFlavor);
     get label(): string;

package/lib/components/date-picker.js

@@ -2,7 +2,7 @@ import { ensureStyles } from '../utils/styles.js';
 import { syncCustomFlavorSheet } from '../utils/flavor-sheet.js';
 import { datePickerStyles, datePickerCustomFlavorCss } from '../styles/date-picker.js';
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
-import { computeAnchoredPosition } from '../utils/positioning.js';
+import { computeAnchoredPosition, placementToAnchored } from '../utils/positioning.js';
 import { getEffectiveLocale, observeLocaleChanges } from '../utils/locale.js';
 import { isMobileTouch } from '../utils/mobile.js';
 import { TyComponent } from '../base/ty-component.js';
@@ -506,6 +506,8 @@ export class TyDatePicker extends TyComponent {
     }
     get size() { return this.getProperty('size'); }
     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.setProperty('flavor', v); }
     get label() { return this.getProperty('label'); }
@@ -755,11 +757,14 @@ export class TyDatePicker extends TyComponent {
         const estimatedHeight = dialogRect.height || 400;
         const popupWidth = dialogRect.width || 320;
         const wrapPadding = 8;
+        const anchored = placementToAnchored(this.getProperty('placement'));
         const pos = computeAnchoredPosition({
             anchorRect: stubRect,
             popupWidth,
             popupHeight: estimatedHeight,
             gap: 0,
+            align: anchored.align,
+            side: anchored.side,
         });
         const positionBelow = pos.below;
         const x = pos.x - wrapPadding;
@@ -975,10 +980,7 @@ export class TyDatePicker extends TyComponent {
         if (isMobileTouch())
             return;
         this.updateState({ open: true });
-        this.dispatchEvent(new CustomEvent('open', {
-            bubbles: true,
-            composed: true
-        }));
+        this.dispatchEvent(new CustomEvent('open'));
         this.render();
         requestAnimationFrame(() => {
             if (!this.shadowRoot)
@@ -1017,10 +1019,7 @@ export class TyDatePicker extends TyComponent {
             if (stubEl)
                 stubEl.setAttribute('aria-expanded', 'false');
         }
-        this.dispatchEvent(new CustomEvent('close', {
-            bubbles: true,
-            composed: true
-        }));
+        this.dispatchEvent(new CustomEvent('close'));
         this.render();
     }
     cleanup() {
@@ -1047,6 +1046,11 @@ export class TyDatePicker extends TyComponent {
     }
 }
 TyDatePicker.properties = {
+    placement: {
+        type: 'string',
+        visual: true,
+        default: '',
+    },
     size: {
         type: 'string',
         visual: true,

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

@@ -80,6 +80,12 @@ export declare class TyFileUpload extends TyComponent<FileUploadState> implement
     protected onPropertiesChanged(_changes: PropertyChange[]): void;
     protected onFormReset(): void;
     protected getFormValue(): FormData | string | null;
+    /**
+     * Match a file against the `accept` attribute the way native inputs do:
+     * comma-separated list of `.ext`, `type/subtype` or `type/*` entries.
+     * No/blank accept matches everything.
+     */
+    private matchesAccept;
     get files(): File[];
     get multiple(): boolean;
     set multiple(v: boolean);

package/lib/components/file-upload.js

@@ -44,15 +44,30 @@ export class TyFileUpload extends TyComponent {
             fileInput.value = "";
     }
     getFormValue() {
-        if (this._files.length === 0)
+        if (this._files.length === 0 || !this.name)
             return null;
         const fd = new FormData();
-        const fieldName = this.name || "files";
         for (const file of this._files) {
-            fd.append(fieldName, file);
+            fd.append(this.name, file);
         }
         return fd;
     }
+    matchesAccept(file) {
+        const accept = this.accept?.trim();
+        if (!accept)
+            return true;
+        return accept.split(",").some((raw) => {
+            const entry = raw.trim().toLowerCase();
+            if (!entry)
+                return false;
+            if (entry.startsWith("."))
+                return file.name.toLowerCase().endsWith(entry);
+            const type = file.type.toLowerCase();
+            if (entry.endsWith("/*"))
+                return type.startsWith(entry.slice(0, -1));
+            return type === entry;
+        });
+    }
     get files() {
         return [...this._files];
     }
@@ -178,7 +193,7 @@ export class TyFileUpload extends TyComponent {
             e.stopPropagation();
             this._isDragging = false;
             dropZone.classList.remove("drag-active");
-            const files = Array.from(e.dataTransfer?.files ?? []);
+            const files = Array.from(e.dataTransfer?.files ?? []).filter((f) => this.matchesAccept(f));
             if (files.length > 0)
                 this.setFiles(files);
         };

package/lib/components/input.js

@@ -81,6 +81,7 @@ export class TyInput extends TyComponent {
     }
     onFormReset() {
         this._shadowValue = null;
+        this.initializeShadowValue();
         this._isFocused = false;
         if (this._inputDebounceTimer !== null) {
             clearTimeout(this._inputDebounceTimer);

package/lib/components/modal.d.ts

@@ -48,6 +48,14 @@ export declare class TyModal extends HTMLElement {
         force?: boolean;
     }) => void;
     static get observedAttributes(): string[];
+    get open(): boolean;
+    set open(v: boolean);
+    get backdrop(): boolean;
+    set backdrop(v: boolean);
+    get closeOnOutsideClick(): boolean;
+    set closeOnOutsideClick(v: boolean);
+    get closeOnEscape(): boolean;
+    set closeOnEscape(v: boolean);
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;

package/lib/components/modal.js

@@ -7,6 +7,7 @@ const closeButtonHandlers = new WeakMap();
 const hoverEnterHandlers = new WeakMap();
 const hoverLeaveHandlers = new WeakMap();
 const modalIds = new WeakMap();
+const pendingCloseReasons = new WeakMap();
 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)) {
@@ -47,7 +48,6 @@ function isMobile() {
 function dispatchModalEvent(el, eventType, detail) {
     const event = new CustomEvent(eventType, {
         detail,
-        bubbles: true,
         cancelable: true,
     });
     el.dispatchEvent(event);
@@ -80,14 +80,13 @@ function closeModal(el, reason = 'programmatic', opts) {
     if (!opts?.force) {
         const beforeClose = new CustomEvent('beforeclose', {
             detail: { reason },
-            bubbles: true,
-            composed: true,
             cancelable: true,
         });
         el.dispatchEvent(beforeClose);
         if (beforeClose.defaultPrevented)
             return;
     }
+    pendingCloseReasons.set(el, reason);
     el.removeAttribute('open');
 }
 function openModal(el) {
@@ -226,6 +225,11 @@ function render(el) {
     }
     setupBackdropClick(el, dialog, attributes.closeOnOutsideClick);
     setupEscapeKey(el, dialog, attributes.closeOnEscape);
+    dialog.oncancel = (event) => {
+        event.preventDefault();
+        if (getModalAttributes(el).closeOnEscape)
+            closeModal(el, 'escape');
+    };
     setupCloseButton(el, dialog, attributes.closeOnOutsideClick);
     setupCloseButtonHover(el, dialog);
     if (attributes.open) {
@@ -237,6 +241,7 @@ function render(el) {
             else {
                 dialog.show();
             }
+            syncBackdropZoom();
             dispatchModalEvent(el, 'open', {});
         }
     }
@@ -244,9 +249,10 @@ function render(el) {
         if (dialog.open) {
             unlockScroll(modalId);
             dialog.close();
-            dispatchModalEvent(el, 'close', {
-                reason: 'programmatic'
-            });
+            syncBackdropZoom();
+            const reason = pendingCloseReasons.get(el) ?? 'programmatic';
+            pendingCloseReasons.delete(el);
+            dispatchModalEvent(el, 'close', { reason });
         }
     }
     dialog.onclose = (event) => {
@@ -260,8 +266,16 @@ function render(el) {
                 returnValue: dialog.returnValue || undefined
             });
         }
+        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';
+    });
+    document.documentElement.classList.toggle('ty-modal-zoom', anyOpen);
+}
 function cleanup(el) {
     const modalId = modalIds.get(el);
     const shadowRoot = el.shadowRoot;
@@ -270,6 +284,7 @@ function cleanup(el) {
         unlockScroll(modalId);
         modalIds.delete(el);
     }
+    syncBackdropZoom();
     if (!dialog)
         return;
     const backdropHandler = backdropClickHandlers.get(el);
@@ -308,6 +323,14 @@ export class TyModal extends HTMLElement {
     static get observedAttributes() {
         return ['open', 'backdrop', 'close-on-outside-click', 'close-on-escape', 'label'];
     }
+    get open() { return parseBoolAttr(this, 'open'); }
+    set open(v) { v ? this.setAttribute('open', 'true') : this.removeAttribute('open'); }
+    get backdrop() { return getModalAttributes(this).backdrop; }
+    set backdrop(v) { this.setAttribute('backdrop', String(!!v)); }
+    get closeOnOutsideClick() { return getModalAttributes(this).closeOnOutsideClick; }
+    set closeOnOutsideClick(v) { this.setAttribute('close-on-outside-click', String(!!v)); }
+    get closeOnEscape() { return getModalAttributes(this).closeOnEscape; }
+    set closeOnEscape(v) { this.setAttribute('close-on-escape', String(!!v)); }
     constructor() {
         super();
         this.attachShadow({ mode: 'open' });

package/lib/components/popup.js

@@ -1,4 +1,4 @@
-import { findBestPosition } from '../utils/positioning.js';
+import { findBestPosition, preferenceChain } from '../utils/positioning.js';
 import { lockScroll, unlockScroll } from '../utils/scroll-lock.js';
 import { ensureStyles } from '../utils/styles.js';
 import { popupStyles } from '../styles/popup.js';
@@ -47,11 +47,7 @@ function updatePosition(el) {
     const dialog = shadowRoot ? getPopupDialog(shadowRoot) : null;
     if (!anchor || !dialog)
         return;
-    const preferences = placement === 'top' ? ['top', 'bottom', 'left', 'right'] :
-        placement === 'bottom' ? ['bottom', 'top', 'left', 'right'] :
-            placement === 'left' ? ['left', 'right', 'top', 'bottom'] :
-                placement === 'right' ? ['right', 'left', 'top', 'bottom'] :
-                    ['bottom', 'top', 'right', 'left'];
+    const preferences = preferenceChain(placement);
     const positionData = findBestPosition({
         targetEl: anchor,
         floatingEl: dialog,
@@ -62,6 +58,7 @@ function updatePosition(el) {
     });
     el.style.setProperty('--popup-x', `${positionData.x}px`);
     el.style.setProperty('--popup-y', `${positionData.y}px`);
+    dialog.dataset.side = positionData.placement.split('-')[0];
     dialog.classList.add('position-calculated');
 }
 function closePopup(el, force = false) {
@@ -80,8 +77,7 @@ function closePopup(el, force = false) {
     setTimeout(() => {
         dialog.classList.remove('position-calculated');
         dialog.close();
-    }, 150);
-    el.dispatchEvent(new CustomEvent('close', { bubbles: true }));
+    }, 200);
 }
 function openPopup(el) {
     const popupId = getPopupId(el);
@@ -99,7 +95,7 @@ function openPopup(el) {
         dialog.classList.add('preparing-animation');
         requestAnimationFrame(() => {
             dialog.classList.add('open');
-            el.dispatchEvent(new CustomEvent('open', { bubbles: true }));
+            el.dispatchEvent(new CustomEvent('open'));
         });
     });
 }
@@ -215,7 +211,7 @@ function render(el) {
             unlockScroll(popupId);
             dialog.classList.remove('open');
             dialog.classList.remove('preparing-animation');
-            el.dispatchEvent(new CustomEvent('close', { bubbles: true }));
+            el.dispatchEvent(new CustomEvent('close'));
         });
     }
     el.closePopup = () => closePopup(el, true);

package/lib/components/radio.js

@@ -176,8 +176,16 @@ export class TyRadioGroup extends TyComponent {
         const radios = this.getRadios();
         for (const radio of radios) {
             radio.checked = radio.value === this.value;
-            if (this.disabled)
-                radio.disabled = true;
+            if (this.disabled) {
+                if (!radio.disabled) {
+                    radio.disabled = true;
+                    radio.dataset.tyGroupDisabled = "";
+                }
+            }
+            else if ("tyGroupDisabled" in radio.dataset) {
+                radio.disabled = false;
+                delete radio.dataset.tyGroupDisabled;
+            }
             radio.size = this.size;
             radio.flavor = this.flavor;
         }

package/lib/components/resize-observer.d.ts

@@ -13,6 +13,7 @@ export declare class TyResizeObserver extends HTMLElement {
     set debounce(value: number);
     constructor();
     connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;
     private setupObserver;
     private handleResize;

package/lib/components/resize-observer.js

@@ -22,6 +22,15 @@ export class TyResizeObserver extends HTMLElement {
     connectedCallback() {
         this.setupObserver();
     }
+    attributeChangedCallback(name, oldValue, newValue) {
+        if (name === 'id' && oldValue && oldValue !== newValue) {
+            removeSize(oldValue);
+            if (newValue && this.isConnected) {
+                const { width, height } = this.getBoundingClientRect();
+                updateSize(newValue, width, height);
+            }
+        }
+    }
     disconnectedCallback() {
         this.cleanup();
     }
@@ -60,4 +69,6 @@ export class TyResizeObserver extends HTMLElement {
         }
     }
 }
-customElements.define('ty-resize-observer', TyResizeObserver);
+if (!customElements.get('ty-resize-observer')) {
+    customElements.define('ty-resize-observer', TyResizeObserver);
+}

package/lib/components/select.d.ts

@@ -5,6 +5,7 @@
  * Skins: default form field, `compact` content-hugging trigger, slot="trigger" custom.
  */
 import type { Flavor, Size } from "../types/common.js";
+import { type Placement } from "../utils/positioning.js";
 import { TyComponent } from "../base/ty-component.js";
 import type { PropertyChange } from "../utils/property-manager.js";
 interface TagData {
@@ -116,7 +117,12 @@ export declare class TySelect extends TyComponent<SelectState> {
             visual: boolean;
             default: string;
             validate: (v: any) => boolean;
-            coerce: (v: any) => "start" | "end";
+            coerce: (v: any) => "start" | "end" | "center";
+        };
+        placement: {
+            type: "string";
+            visual: boolean;
+            default: string;
         };
         size: {
             type: "string";
@@ -402,8 +408,10 @@ export declare class TySelect extends TyComponent<SelectState> {
     set debounce(value: number | string);
     get size(): Size;
     set size(value: Size);
-    get align(): "start" | "end";
-    set align(value: "start" | "end");
+    get align(): "start" | "center" | "end";
+    set align(value: "start" | "center" | "end");
+    get placement(): Placement | "";
+    set placement(value: Placement | "");
     get flavor(): Flavor;
     set flavor(value: Flavor);
     get form(): HTMLFormElement | null;

package/lib/components/select.js

@@ -4,7 +4,7 @@ import { selectBaseStyles, selectCustomFlavorCss } from "../styles/select-base.j
 import { selectStyles } from "../styles/select.js";
 import { getLoaderSvg } from "../utils/loader-registry.js";
 import { lockScroll, unlockScroll } from "../utils/scroll-lock.js";
-import { computeAnchoredPosition } from "../utils/positioning.js";
+import { computeAnchoredPosition, placementToAnchored } from "../utils/positioning.js";
 import { isMobileTouch } from "../utils/mobile.js";
 import { TyComponent } from "../base/ty-component.js";
 import { CustomScrollbar, isCustomScrollbarEnabled, } from "../utils/custom-scrollbar.js";
@@ -366,11 +366,20 @@ export class TySelect extends TyComponent {
         const popupWidth = !isNaN(cssWidth)
             ? cssWidth
             : Math.max(stubRect.width, 320);
+        const requested = this.getProperty("placement");
+        const anchored = requested
+            ? placementToAnchored(requested)
+            : {
+                side: "auto",
+                align: this.getProperty("align"),
+            };
         const pos = computeAnchoredPosition({
             anchorRect: stubRect,
             popupWidth,
             popupHeight: estimatedHeight,
-            align: this.getProperty("align"),
+            align: anchored.align,
+            side: anchored.side,
+            gap: 8,
         });
         const positionBelow = pos.below;
         const x = pos.x - wrapPadding;
@@ -428,8 +437,8 @@ export class TySelect extends TyComponent {
         this._scrollLockId = lockId;
         lockScroll(lockId);
         dialog.showModal();
-        dialog.classList.add("open");
         this.calculatePosition();
+        dialog.classList.add("open");
         this._state.open = true;
         const chevron = shadow.querySelector(".dropdown-chevron");
         if (chevron)
@@ -508,6 +517,7 @@ export class TySelect extends TyComponent {
         this._scrollLockId = lockId;
         lockScroll(lockId);
         dialog.showModal();
+        dialog.getBoundingClientRect();
         dialog.classList.add("open");
         this._state.open = true;
         const tags = this.getTagElements().map((el) => this.getTagData(el));
@@ -837,8 +847,6 @@ export class TySelect extends TyComponent {
     fireOpenEvent() {
         this.dispatchEvent(new CustomEvent("open", {
             detail: { mode: this._state.mode, element: this },
-            bubbles: true,
-            composed: true,
         }));
         if (this._externalSearch) {
             this.fireSearchEvent("");
@@ -847,8 +855,6 @@ export class TySelect extends TyComponent {
     fireCloseEvent() {
         this.dispatchEvent(new CustomEvent("close", {
             detail: { mode: this._state.mode, element: this },
-            bubbles: true,
-            composed: true,
         }));
     }
     dispatchChangeEvent(detail) {
@@ -1377,6 +1383,12 @@ export class TySelect extends TyComponent {
     set align(value) {
         this.setProperty("align", value);
     }
+    get placement() {
+        return this.getProperty("placement");
+    }
+    set placement(value) {
+        this.setProperty("placement", value);
+    }
     get flavor() {
         return this.getProperty("flavor");
     }
@@ -1484,8 +1496,13 @@ TySelect.properties = {
         type: "string",
         visual: true,
         default: "start",
-        validate: (v) => ["start", "end"].includes(v),
-        coerce: (v) => (v === "end" ? "end" : "start"),
+        validate: (v) => ["start", "center", "end"].includes(v),
+        coerce: (v) => v === "end" ? "end" : v === "center" ? "center" : "start",
+    },
+    placement: {
+        type: "string",
+        visual: true,
+        default: "",
     },
     size: {
         type: "string",

package/lib/components/selected-tags.js

@@ -105,7 +105,7 @@ export class TySelectedOptions extends HTMLElement {
         return ctx;
     }
     templateSource(template) {
-        if (template.content.firstElementChild)
+        if (template.content.hasChildNodes())
             return template.content;
         const frag = document.createDocumentFragment();
         template.childNodes.forEach(n => frag.appendChild(n.cloneNode(true)));

package/lib/components/tabs.d.ts

@@ -27,6 +27,8 @@ export interface TabChangeDetail {
 export declare class TyTabs extends HTMLElement {
     static get observedAttributes(): string[];
     constructor();
+    private _childObserver;
+    private _childRenderQueued;
     connectedCallback(): void;
     disconnectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;

package/lib/components/tabs.js

@@ -231,7 +231,7 @@ function setupResizeObserver(el) {
         const activeId = getActiveTabId(el, tabs);
         const activeIndex = activeId ? findTabIndex(tabs, activeId) : 0;
         if (width.includes('%')) {
-            el.style.setProperty('--tabs-width', `${entry.contentRect.width}px`);
+            el.style.setProperty('--tabs-page-width', `${entry.contentRect.width}px`);
         }
         if (activeIndex !== undefined) {
             updateTransform(el, activeIndex);
@@ -370,6 +370,8 @@ function updateOverflow(el) {
     if (buttons.length === 0)
         return;
     const available = container.clientWidth;
+    if (available <= 0)
+        return;
     let total = 0;
     let cutoff = buttons.length;
     for (let i = 0; i < buttons.length; i++) {
@@ -513,12 +515,27 @@ export class TyTabs extends HTMLElement {
     }
     constructor() {
         super();
+        this._childObserver = null;
+        this._childRenderQueued = false;
         this.attachShadow({ mode: 'open' });
     }
     connectedCallback() {
         render(this);
+        this._childObserver = new MutationObserver(() => {
+            if (this._childRenderQueued)
+                return;
+            this._childRenderQueued = true;
+            queueMicrotask(() => {
+                this._childRenderQueued = false;
+                if (this.isConnected)
+                    render(this);
+            });
+        });
+        this._childObserver.observe(this, { childList: true });
     }
     disconnectedCallback() {
+        this._childObserver?.disconnect();
+        this._childObserver = null;
         cleanup(this);
     }
     attributeChangedCallback(name, oldValue, newValue) {