monobill-mintui 0.5.99 → 0.6.0

package/dist/index.js

@@ -1409,16 +1409,21 @@ var u = class extends HTMLElement {
 		];
 	}
 	constructor() {
-		super(), this._pageContainer = null, this._header = null, this._titleElement = null, this._headingText = null, this._actionsSlot = null, this._bodySlot = null, this._darkModeObserver = null, this._backButton = null, this._backButtonHandler = null;
+		super(), this._pageContainer = null, this._header = null, this._titleElement = null, this._headingText = null, this._actionsSlot = null, this._bodySlot = null, this._darkModeObserver = null, this._contentObserver = null, this._backButton = null, this._backButtonHandler = null, this._renderFrame = null;
 	}
 	connectedCallback() {
-		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block"), this.render(), this._observeDarkMode(), this._setupBackButtonListener();
+		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "block"), this.render(), this._observeDarkMode(), this._observeContentMutations(), this._setupBackButtonListener();
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && (e === "containered" && this._applyContainerClasses(), this.render());
 	}
 	disconnectedCallback() {
-		this._darkModeObserver &&= (this._darkModeObserver.disconnect(), null), this._removeBackButtonListener();
+		this._darkModeObserver &&= (this._darkModeObserver.disconnect(), null), this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null), this._removeBackButtonListener();
+	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
 	}
 	getHeading() {
 		return this.getAttribute("heading") || "";
@@ -1458,6 +1463,15 @@ var u = class extends HTMLElement {
 			attributeFilter: ["class"]
 		}));
 	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
 	_setupBackButtonListener() {
 		this._backButtonHandler ||= (e) => {
 			let t = e.target;
@@ -1550,17 +1564,22 @@ var f = class extends HTMLElement {
 		];
 	}
 	constructor() {
-		super(), this._overlay = null, this._modal = null, this._header = null, this._headingSlot = null, this._bodySlot = null, this._actionsSlot = null, this._closeButton = null, this._darkModeObserver = null;
+		super(), this._overlay = null, this._modal = null, this._header = null, this._headingSlot = null, this._bodySlot = null, this._actionsSlot = null, this._closeButton = null, this._darkModeObserver = null, this._contentObserver = null, this._renderFrame = null;
 	}
 	connectedCallback() {
-		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "fixed", "inset-0", "z-50"), this.isOpen() || this.classList.add("hidden"), this.render(), this._observeDarkMode();
+		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "fixed", "inset-0", "z-50"), this.isOpen() || this.classList.add("hidden"), this.render(), this._observeDarkMode(), this._observeContentMutations();
 	}
 	disconnectedCallback() {
-		this._darkModeObserver &&= (this._darkModeObserver.disconnect(), null);
+		this._darkModeObserver &&= (this._darkModeObserver.disconnect(), null), this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null);
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && this.render();
 	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
 	getId() {
 		return this.getAttribute("id") || "";
 	}
@@ -1612,6 +1631,15 @@ var f = class extends HTMLElement {
 			attributeFilter: ["class"]
 		}));
 	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
 	_animateEnter() {
 		let e = this._modal?.querySelector(".modal-content");
 		e && (e.style.transform = "scale(0.97) translateY(10px)", e.style.opacity = "0", e.style.transition = "opacity 200ms ease-out, transform 200ms ease-out", this.classList.remove("hidden"), requestAnimationFrame(() => {
@@ -2647,13 +2675,13 @@ var _ = class extends HTMLElement {
 		];
 	}
 	constructor() {
-		super(), this._input = null, this._textarea = null, this._element = null, this._wrapper = null, this._icon = null, this._prependSlotContainer = null, this._appendSlotContainer = null, this._colorPicker = null, this._colorTextInput = null, this._colorContainer = null, this._colorPickerWrapper = null, this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null, this._slotResizeObserver = null, this._slotMutationObserver = null, this._focusHandler = null, this._blurHandler = null, this._clickHandler = null, this._clickOutsideHandler = null;
+		super(), this._input = null, this._textarea = null, this._element = null, this._wrapper = null, this._icon = null, this._prependSlotContainer = null, this._appendSlotContainer = null, this._colorPicker = null, this._colorTextInput = null, this._colorContainer = null, this._colorPickerWrapper = null, this._numberSpinnerContainer = null, this._numberIncrementButton = null, this._numberDecrementButton = null, this._slotResizeObserver = null, this._slotMutationObserver = null, this._contentObserver = null, this._focusHandler = null, this._blurHandler = null, this._clickHandler = null, this._clickOutsideHandler = null, this._renderFrame = null;
 	}
 	connectedCallback() {
-		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.render();
+		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "inline-block"), this.render(), this._observeContentMutations();
 	}
 	disconnectedCallback() {
-		this.removeEventListeners(), this._slotResizeObserver &&= (this._slotResizeObserver.disconnect(), null), this._slotMutationObserver &&= (this._slotMutationObserver.disconnect(), null);
+		this.removeEventListeners(), this._slotResizeObserver &&= (this._slotResizeObserver.disconnect(), null), this._slotMutationObserver &&= (this._slotMutationObserver.disconnect(), null), this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null);
 	}
 	attributeChangedCallback(e, t, n) {
 		if (t !== n) {
@@ -2668,6 +2696,20 @@ var _ = class extends HTMLElement {
 			this.render();
 		}
 	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
 	getType() {
 		return this.getAttribute("type") || "text";
 	}
@@ -7573,17 +7615,22 @@ var M = class extends HTMLElement {
 		];
 	}
 	constructor() {
-		super(), this._overlay = null, this._offCanvas = null, this._header = null, this._headingSlot = null, this._bodySlot = null, this._actionsSlot = null, this._closeButton = null, this._darkModeObserver = null;
+		super(), this._overlay = null, this._offCanvas = null, this._header = null, this._headingSlot = null, this._bodySlot = null, this._actionsSlot = null, this._closeButton = null, this._darkModeObserver = null, this._contentObserver = null, this._renderFrame = null;
 	}
 	connectedCallback() {
-		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "fixed", "inset-0", "z-50"), this.isOpen() || this.classList.add("hidden"), this.render(), this._observeDarkMode();
+		this.classList.add("box-border", "m-0", "p-0", "border-0", "align-baseline", "fixed", "inset-0", "z-50"), this.isOpen() || this.classList.add("hidden"), this.render(), this._observeDarkMode(), this._observeContentMutations();
 	}
 	disconnectedCallback() {
-		this._darkModeObserver &&= (this._darkModeObserver.disconnect(), null);
+		this._darkModeObserver &&= (this._darkModeObserver.disconnect(), null), this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null);
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && this.render();
 	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
 	getId() {
 		return this.getAttribute("id") || "";
 	}
@@ -7688,6 +7735,15 @@ var M = class extends HTMLElement {
 			attributeFilter: ["class"]
 		}));
 	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
 	_animateEnter() {
 		let e = this._offCanvas?.querySelector(".off-canvas-content");
 		if (!e) return;
@@ -9218,7 +9274,7 @@ customElements.get("mint-chart") || customElements.define("mint-chart", L);
 //#region src/components/side-navigation/SideNavigationLink.ts
 var R = class extends HTMLElement {
 	constructor(...e) {
-		super(...e), this._trigger = null, this._submenuContainer = null;
+		super(...e), this._trigger = null, this._submenuContainer = null, this._contentObserver = null, this._renderFrame = null;
 	}
 	static get observedAttributes() {
 		return [
@@ -9231,11 +9287,29 @@ var R = class extends HTMLElement {
 		];
 	}
 	connectedCallback() {
-		this.classList.add("block"), this.render();
+		this.classList.add("block"), this.render(), this._observeSubmenuMutations();
+	}
+	disconnectedCallback() {
+		this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null);
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && (this.render(), e === "active" && this._isSubmenuItem() && this._refreshDropdownAncestor());
 	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
+	_observeSubmenuMutations() {
+		this._contentObserver ||= new MutationObserver((e) => {
+			e.some((e) => [...Array.from(e.addedNodes), ...Array.from(e.removedNodes)].some((e) => e instanceof HTMLElement && e.getAttribute("slot") === "submenu")) && this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"],
+			subtree: !1
+		});
+	}
 	_refreshDropdownAncestor() {
 		let e = this.parentElement;
 		for (; e;) {
@@ -9480,17 +9554,34 @@ customElements.get("mint-sidenav-action-links") || customElements.define("mint-s
 //#region src/components/side-navigation/SideNavigationActionMenu.ts
 var V = class extends HTMLElement {
 	constructor(...e) {
-		super(...e), this._wrapper = null, this._trigger = null, this._popover = null, this._triggerId = "";
+		super(...e), this._wrapper = null, this._trigger = null, this._popover = null, this._triggerId = "", this._contentObserver = null, this._renderFrame = null;
 	}
 	static get observedAttributes() {
 		return ["title", "subtitle"];
 	}
 	connectedCallback() {
-		this.classList.add("block"), this._triggerId = this.id ? `${this.id}-trigger` : `mint-sidenav-action-menu-${Math.random().toString(36).slice(2, 9)}`, this.render();
+		this.classList.add("block"), this._triggerId = this.id ? `${this.id}-trigger` : `mint-sidenav-action-menu-${Math.random().toString(36).slice(2, 9)}`, this.render(), this._observeContentMutations();
+	}
+	disconnectedCallback() {
+		this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null);
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && this.render();
 	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
 	_getTitle() {
 		return this.getAttribute("title") || "";
 	}
@@ -9540,7 +9631,7 @@ function U() {
 }
 var W = class extends HTMLElement {
 	constructor(...e) {
-		super(...e), this._backdrop = null, this._container = null, this._header = null, this._content = null, this._footer = null, this._escapeHandler = null, this._mediaQuery = null, this._mediaListener = null, this._accordionHandler = null, this._urlChangeHandler = null, this._onMobileNavNavigateClick = (e) => {
+		super(...e), this._backdrop = null, this._container = null, this._header = null, this._content = null, this._footer = null, this._escapeHandler = null, this._mediaQuery = null, this._mediaListener = null, this._accordionHandler = null, this._urlChangeHandler = null, this._contentObserver = null, this._renderFrame = null, this._onMobileNavNavigateClick = (e) => {
 			if (this._mediaQuery?.matches) return;
 			let t = e.target;
 			if (!(t instanceof Element)) return;
@@ -9559,14 +9650,19 @@ var W = class extends HTMLElement {
 		];
 	}
 	connectedCallback() {
-		this.classList.add("relative", "block", "shrink-0", "w-0", "overflow-visible", "min-[1100px]:w-[17rem]", "min-[1100px]:shrink-0"), this._attachEscapeListener(), this._attachMediaListener(), this._attachAccordionListener(), this._attachUrlChangeListener(), this.render();
+		this.classList.add("relative", "block", "shrink-0", "w-0", "overflow-visible", "min-[1100px]:w-[17rem]", "min-[1100px]:shrink-0"), this._attachEscapeListener(), this._attachMediaListener(), this._attachAccordionListener(), this._attachUrlChangeListener(), this._observeContentMutations(), this.render();
 	}
 	disconnectedCallback() {
-		this._detachEscapeListener(), this._detachMediaListener(), this._detachAccordionListener(), this._detachUrlChangeListener();
+		this._detachEscapeListener(), this._detachMediaListener(), this._detachAccordionListener(), this._detachUrlChangeListener(), this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null);
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && this.render();
 	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
 	_attachEscapeListener() {
 		this._escapeHandler || (this._escapeHandler = (e) => {
 			e.key === "Escape" && this.getAttribute("open") === "true" && this.removeAttribute("open");
@@ -9602,6 +9698,15 @@ var W = class extends HTMLElement {
 	_detachUrlChangeListener() {
 		this._urlChangeHandler &&= (window.removeEventListener("popstate", this._urlChangeHandler), window.removeEventListener("hashchange", this._urlChangeHandler), window.removeEventListener(H, this._urlChangeHandler), null);
 	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
 	getUserName() {
 		return this.getAttribute("user-name") || "Acme Inc";
 	}
@@ -9701,7 +9806,7 @@ customElements.get("mint-side-navigation") || customElements.define("mint-side-n
 //#region src/components/top-navigation/TopNavigation.ts
 var G = class extends HTMLElement {
 	constructor(...e) {
-		super(...e), this._bar = null, this._menuButton = null, this._logoLink = null, this._menuClickHandler = null, this._darkModeObserver = null, this._resizeHandler = null, this._desktopSearchInput = null, this._desktopSearchShell = null, this._mobileSearchButton = null, this._searchPanel = null, this._searchPanelInput = null, this._searchResultsWrap = null, this._searchStateWrap = null, this._searchDebounceId = null, this._searchAbortController = null, this._searchOpen = !1, this._searchQuery = "", this._globalKeydownHandler = null, this._docClickHandler = null;
+		super(...e), this._bar = null, this._menuButton = null, this._logoLink = null, this._menuClickHandler = null, this._darkModeObserver = null, this._contentObserver = null, this._resizeHandler = null, this._desktopSearchInput = null, this._desktopSearchShell = null, this._mobileSearchButton = null, this._searchPanel = null, this._searchPanelInput = null, this._searchResultsWrap = null, this._searchStateWrap = null, this._searchDebounceId = null, this._searchAbortController = null, this._searchOpen = !1, this._searchQuery = "", this._globalKeydownHandler = null, this._docClickHandler = null, this._renderFrame = null;
 	}
 	static get observedAttributes() {
 		return [
@@ -9720,14 +9825,19 @@ var G = class extends HTMLElement {
 		];
 	}
 	connectedCallback() {
-		this.classList.add("relative", "block", "h-14", "w-full", "shrink-0"), this._observeDarkMode(), this._attachResizeListener(), this._attachGlobalHandlers(), this.render();
+		this.classList.add("relative", "block", "h-14", "w-full", "shrink-0"), this._observeDarkMode(), this._observeContentMutations(), this._attachResizeListener(), this._attachGlobalHandlers(), this.render();
 	}
 	disconnectedCallback() {
-		this._menuButton && this._menuClickHandler && (this._menuButton.removeEventListener("click", this._menuClickHandler), this._menuClickHandler = null), this._disconnectDarkModeObserver(), this._detachResizeListener(), this._detachGlobalHandlers(), this._cancelSearchDebounce(), this._abortSearch();
+		this._menuButton && this._menuClickHandler && (this._menuButton.removeEventListener("click", this._menuClickHandler), this._menuClickHandler = null), this._disconnectDarkModeObserver(), this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null), this._detachResizeListener(), this._detachGlobalHandlers(), this._cancelSearchDebounce(), this._abortSearch();
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && this.render();
 	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
 	_isDarkMode() {
 		return document.documentElement.classList.contains("dark");
 	}
@@ -9899,6 +10009,15 @@ var G = class extends HTMLElement {
 	_disconnectDarkModeObserver() {
 		this._darkModeObserver &&= (this._darkModeObserver.disconnect(), null);
 	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
 	_attachResizeListener() {
 		this._resizeHandler || (this._resizeHandler = () => {
 			this.render(), this._positionSearchPanel();
@@ -9976,7 +10095,7 @@ customElements.get("mint-top-navigation") || customElements.define("mint-top-nav
 //#region src/components/search/Search.ts
 var K = class e extends HTMLElement {
 	constructor(...e) {
-		super(...e), this._shell = null, this._desktopInput = null, this._panel = null, this._panelInner = null, this._panelInput = null, this._panelFiltersWrap = null, this._panelFiltersMainRow = null, this._panelFiltersChips = null, this._panelFiltersShowAllWrap = null, this._panelFiltersShowAllBtn = null, this._panelFiltersMorePanel = null, this._filtersMoreOpen = !1, this._filterOverflowObserver = null, this._filterOverflowZeroWidthRetries = 0, this._desktopFilterWrap = null, this._mobileFilterWrap = null, this._resultsWrap = null, this._stateWrap = null, this._customResultsWrap = null, this._query = "", this._searchOpen = !1, this._selectedFilters = [], this._selectedFilterBackspaceArmed = !1, this._debounceId = null, this._abortController = null, this._docPointerDownHandler = null, this._globalKeydownHandler = null, this._focusOutHandler = null, this._resizeHandler = null, this._desktopShortcutHint = null, this._panelSearchBar = null;
+		super(...e), this._shell = null, this._desktopInput = null, this._panel = null, this._panelInner = null, this._panelInput = null, this._panelFiltersWrap = null, this._panelFiltersMainRow = null, this._panelFiltersChips = null, this._panelFiltersShowAllWrap = null, this._panelFiltersShowAllBtn = null, this._panelFiltersMorePanel = null, this._filtersMoreOpen = !1, this._filterOverflowObserver = null, this._filterOverflowZeroWidthRetries = 0, this._desktopFilterWrap = null, this._mobileFilterWrap = null, this._resultsWrap = null, this._stateWrap = null, this._customResultsWrap = null, this._query = "", this._searchOpen = !1, this._selectedFilters = [], this._selectedFilterBackspaceArmed = !1, this._debounceId = null, this._abortController = null, this._docPointerDownHandler = null, this._globalKeydownHandler = null, this._focusOutHandler = null, this._resizeHandler = null, this._desktopShortcutHint = null, this._panelSearchBar = null, this._contentObserver = null, this._renderFrame = null;
 	}
 	static {
 		this._filterMorePanelSeq = 0;
@@ -9997,14 +10116,28 @@ var K = class e extends HTMLElement {
 		];
 	}
 	connectedCallback() {
-		this.classList.add("relative", "block", "w-full", "max-w-xl"), this._attachGlobalHandlers(), this._attachFocusOutHandler(), this._attachResizeHandler(), this.render();
+		this.classList.add("relative", "block", "w-full", "max-w-xl"), this._attachGlobalHandlers(), this._attachFocusOutHandler(), this._attachResizeHandler(), this.render(), this._observeContentMutations();
 	}
 	disconnectedCallback() {
-		this._docPointerDownHandler &&= (document.removeEventListener("pointerdown", this._docPointerDownHandler, !0), null), this._globalKeydownHandler &&= (document.removeEventListener("keydown", this._globalKeydownHandler), null), this._resizeHandler &&= (window.removeEventListener("resize", this._resizeHandler), null), this._focusOutHandler &&= (this.removeEventListener("focusout", this._focusOutHandler, !0), null), this._cancelDebounce(), this._abortSearch(), this._filterOverflowObserver &&= (this._filterOverflowObserver.disconnect(), null);
+		this._docPointerDownHandler &&= (document.removeEventListener("pointerdown", this._docPointerDownHandler, !0), null), this._globalKeydownHandler &&= (document.removeEventListener("keydown", this._globalKeydownHandler), null), this._resizeHandler &&= (window.removeEventListener("resize", this._resizeHandler), null), this._focusOutHandler &&= (this.removeEventListener("focusout", this._focusOutHandler, !0), null), this._cancelDebounce(), this._abortSearch(), this._filterOverflowObserver &&= (this._filterOverflowObserver.disconnect(), null), this._contentObserver &&= (this._contentObserver.disconnect(), null), this._renderFrame !== null && (cancelAnimationFrame(this._renderFrame), this._renderFrame = null);
 	}
 	attributeChangedCallback(e, t, n) {
 		t !== n && this.render();
 	}
+	_scheduleRender() {
+		this._renderFrame === null && (this._renderFrame = requestAnimationFrame(() => {
+			this._renderFrame = null, this.render();
+		}));
+	}
+	_observeContentMutations() {
+		this._contentObserver ||= new MutationObserver(() => {
+			this._scheduleRender();
+		}), this._contentObserver.disconnect(), this._contentObserver.observe(this, {
+			childList: !0,
+			attributes: !0,
+			attributeFilter: ["slot"]
+		});
+	}
 	_getEndpoint() {
 		return (this.getAttribute("endpoint") || "").trim();
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "monobill-mintui",
-  "version": "0.5.99",
+  "version": "0.6.0",
   "description": "A modern framework-agnostic UI kit built as Web Components. Requires Tailwind CSS.",
   "type": "module",
   "main": "./dist/index.cjs",