@livenetworks/ashlar 1.4.1 → 1.6.0

package/js/ln-toast/src/ln-toast.js

@@ -1,210 +1,232 @@
-/* Live Networks — ln-toast (side-accent with icons) */
-import { guardBody, cloneTemplateScoped, fill } from '../../ln-core';
-import DEFAULT_TEMPLATE_HTML from '../template.html?raw';
-
-(function () {
-	const DOM_SELECTOR = "data-ln-toast";
-	const DOM_ATTRIBUTE = "lnToast";
-	const TEMPLATE_NAME = "ln-toast-item";
-
-	const TYPE_ICON = { success: 'circle-check', error: 'circle-x', warn: 'alert-triangle', info: 'info-circle' };
-
-	const STATUS_CLASS = { success: 'success', error: 'error', warn: 'warning', info: 'info' };
-
-	const DEFAULT_TITLES = { success: 'Success', error: 'Error', warn: 'Warning', info: 'Information' };
-
-	if (window.__lnToastLoaded) return;
-	window.__lnToastLoaded = true;
-
-	function _ensureTemplate() {
-		if (document.querySelector('[data-ln-template="ln-toast-item"]')) return;
-		if (!document.body) return;
-		const tmpl = document.createElement('template');
-		// Trust boundary: DEFAULT_TEMPLATE_HTML is a hardcoded library constant resolved at build time via ?raw import.
-		tmpl.setAttribute('data-ln-template', 'ln-toast-item');
-		tmpl.innerHTML = DEFAULT_TEMPLATE_HTML;
-		document.body.appendChild(tmpl);
-	}
-
-	function _findContainers(root) {
-		if (!root || root.nodeType !== 1) return;
-		const items = Array.from(root.querySelectorAll("[" + DOM_SELECTOR + "]"));
-		if (root.hasAttribute && root.hasAttribute(DOM_SELECTOR)) items.push(root);
-		for (const el of items) {
-			if (!el[DOM_ATTRIBUTE]) new _Component(el);
-		}
-	}
-
-	function _Component(dom) {
-		this.dom = dom;
-		dom[DOM_ATTRIBUTE] = this;
-		this.timeoutDefault = parseInt(dom.getAttribute("data-ln-toast-timeout") || "6000", 10);
-		this.max = parseInt(dom.getAttribute("data-ln-toast-max") || "5", 10);
-
-		for (const li of Array.from(dom.querySelectorAll("[data-ln-toast-item]"))) {
-			_hydrateLI(li, dom);
-		}
-		return this;
-	}
-
-	_Component.prototype.destroy = function () {
-		if (!this.dom[DOM_ATTRIBUTE]) return;
-		for (const li of Array.from(this.dom.children)) {
-			_dismiss(li);
-		}
-		delete this.dom[DOM_ATTRIBUTE];
-	};
-
-	function _buildItem(opts, container) {
-		const type = ((opts.type || "info") + "").toLowerCase();
-		const fragment = cloneTemplateScoped(container, TEMPLATE_NAME, 'ln-toast');
-		if (!fragment) {
-			console.warn('[ln-toast] Template "' + TEMPLATE_NAME + '" not found');
-			return null;
-		}
-		const li = fragment.firstElementChild;
-		if (!li) return null;
-
-		const hasBody = !!(opts.message || (opts.data && opts.data.errors));
-
-		fill(li, {
-			title: opts.title || DEFAULT_TITLES[type] || DEFAULT_TITLES.info,
-			role: type === 'error' ? 'alert' : 'status',
-			ariaLive: type === 'error' ? 'assertive' : 'polite',
-			hasBody: hasBody
-		});
-
-		const card = li.querySelector('.ln-toast__card');
-		if (card) card.classList.add(STATUS_CLASS[type] || 'info');
-
-		const side = li.querySelector('.ln-toast__side');
-		if (side) {
-			const useEl = side.querySelector('use');
-			if (useEl) useEl.setAttribute('href', '#ln-' + (TYPE_ICON[type] || TYPE_ICON.info));
-		}
-
-		const bodyEl = li.querySelector('.ln-toast__body');
-		if (bodyEl && hasBody) _renderBody(bodyEl, opts);
-
-		const closeBtn = li.querySelector('.ln-toast__close');
-		if (closeBtn) closeBtn.addEventListener('click', function () { _dismiss(li); });
-
-		return li;
-	}
-
-	function _renderBody(bodyEl, opts) {
-		if (opts.message) {
-			if (Array.isArray(opts.message)) {
-				const ul = document.createElement("ul");
-				for (const msg of opts.message) {
-					const lie = document.createElement("li");
-					lie.textContent = msg;
-					ul.appendChild(lie);
-				}
-				bodyEl.appendChild(ul);
-			} else {
-				const p = document.createElement("p");
-				p.textContent = opts.message;
-				bodyEl.appendChild(p);
-			}
-		}
-		if (opts.data && opts.data.errors) {
-			const ul = document.createElement("ul");
-			for (const err of Object.values(opts.data.errors).flat()) {
-				const lie = document.createElement("li");
-				lie.textContent = err;
-				ul.appendChild(lie);
-			}
-			bodyEl.appendChild(ul);
-		}
-	}
-
-	function _append(cmp, li) {
-		while (cmp.dom.children.length >= cmp.max) cmp.dom.removeChild(cmp.dom.firstElementChild);
-		cmp.dom.appendChild(li);
-		requestAnimationFrame(() => li.classList.add("ln-toast__item--in"));
-	}
-
-	function _dismiss(li) {
-		if (!li || !li.parentNode) return;
-		clearTimeout(li._timer);
-		li.classList.remove("ln-toast__item--in");
-		li.classList.add("ln-toast__item--out");
-		setTimeout(() => { li.parentNode && li.parentNode.removeChild(li); }, 200);
-	}
-
-	function _resolveContainer(detail) {
-		let container = detail && detail.container;
-		if (typeof container === "string") container = document.querySelector(container);
-		if (!(container instanceof HTMLElement)) {
-			container = document.querySelector("[" + DOM_SELECTOR + "]") || document.getElementById("ln-toast-container");
-		}
-		return container || null;
-	}
-
-	function _hydrateLI(li, container) {
-		const type = ((li.getAttribute("data-type") || "info") + "").toLowerCase();
-		const titleA = li.getAttribute("data-title");
-		const msgText = (li.innerText || li.textContent || "").trim();
-
-		const built = _buildItem({
-			type: type,
-			title: titleA,
-			message: msgText || undefined
-		}, container);
-
-		if (!built) return;
-
-		li.parentNode && li.parentNode.replaceChild(built, li);
-		requestAnimationFrame(() => built.classList.add("ln-toast__item--in"));
-	}
-
-	function _onEnqueue(e) {
-		const detail = e.detail || {};
-		const container = _resolveContainer(detail);
-		if (!container) {
-			console.warn('[ln-toast] No toast container found');
-			return;
-		}
-		const cmp = container[DOM_ATTRIBUTE] || new _Component(container);
-		const li = _buildItem(detail, container);
-		if (!li) return;
-		const timeout = Number.isFinite(detail.timeout) ? detail.timeout : cmp.timeoutDefault;
-		_append(cmp, li);
-		if (timeout > 0) li._timer = setTimeout(() => _dismiss(li), timeout);
-	}
-
-	function _onClear(e) {
-		const detail = (e && e.detail) || {};
-		if (detail.container) {
-			const el = _resolveContainer(detail);
-			if (el) {
-				for (const child of Array.from(el.children)) _dismiss(child);
-			}
-		} else {
-			const containers = document.querySelectorAll("[" + DOM_SELECTOR + "]");
-			for (const el of Array.from(containers)) {
-				for (const child of Array.from(el.children)) _dismiss(child);
-			}
-		}
-	}
-
-	guardBody(function () {
-		_ensureTemplate();
-
-		window.addEventListener('ln-toast:enqueue', _onEnqueue);
-		window.addEventListener('ln-toast:clear', _onClear);
-
-		const observer = new MutationObserver(function (muts) {
-			for (const m of muts) {
-				if (m.type === 'attributes') { _findContainers(m.target); continue; }
-				for (const n of m.addedNodes) {
-					_findContainers(n);
-				}
-			}
-		});
-		observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [DOM_SELECTOR] });
-
-		_findContainers(document.body);
-	}, 'ln-toast');
-})();
+/* Live Networks — ln-toast (side-accent with icons) */
+import { guardBody, cloneTemplateScoped, fill } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = "data-ln-toast";
+	const DOM_ATTRIBUTE = "lnToast";
+	const TEMPLATE_NAME = "ln-toast-item";
+
+	if (window.__lnToastLoaded) return;
+	window.__lnToastLoaded = true;
+
+	function _promoteTopLayer(container) {
+		if (!container || !(container instanceof HTMLElement)) return;
+		if (!container.hasAttribute('popover')) {
+			container.setAttribute('popover', 'manual');
+		}
+		if (typeof container.showPopover === 'function') {
+			if (container.matches(':popover-open')) {
+				try { container.hidePopover(); } catch (_) {}
+			}
+			try { container.showPopover(); } catch (_) {}
+		}
+	}
+
+	function _demoteTopLayerIfEmpty(container) {
+		if (!container || !(container instanceof HTMLElement)) return;
+		const items = container.querySelectorAll("[data-ln-toast-item]");
+		if (items.length === 0) {
+			if (typeof container.hidePopover === 'function' && container.matches(':popover-open')) {
+				try { container.hidePopover(); } catch (_) {}
+			}
+		}
+	}
+
+	function _findContainers(root) {
+		if (!root || root.nodeType !== 1) return;
+		const items = Array.from(root.querySelectorAll("[" + DOM_SELECTOR + "]"));
+		if (root.hasAttribute && root.hasAttribute(DOM_SELECTOR)) items.push(root);
+		for (const el of items) {
+			if (!el[DOM_ATTRIBUTE]) new _Component(el);
+		}
+	}
+
+	function _Component(dom) {
+		this.dom = dom;
+		dom[DOM_ATTRIBUTE] = this;
+		this.timeoutDefault = parseInt(dom.getAttribute("data-ln-toast-timeout") || "6000", 10);
+		this.max = parseInt(dom.getAttribute("data-ln-toast-max") || "5", 10);
+
+		const items = Array.from(dom.querySelectorAll("[data-ln-toast-item]"));
+		while (items.length > this.max) dom.removeChild(items.shift());
+		for (const li of items) _hydrateLI(li, this);
+
+		if (items.length > 0) {
+			_promoteTopLayer(dom);
+		}
+
+		return this;
+	}
+
+	_Component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		for (const li of Array.from(this.dom.querySelectorAll("[data-ln-toast-item]"))) {
+			_dismiss(li);
+		}
+		_demoteTopLayerIfEmpty(this.dom);
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	function _buildItem(opts, container) {
+		const type = ((opts.type || "") + "").trim().toLowerCase();
+		const fragment = cloneTemplateScoped(container, TEMPLATE_NAME, 'ln-toast');
+		if (!fragment) {
+			console.warn('[ln-toast] Template "' + TEMPLATE_NAME + '" not found');
+			return null;
+		}
+
+		// fill() runs on the DocumentFragment, BEFORE extracting the <li>.
+		// data-ln-attr="class:type" sits on the template root <li>; fill()'s
+		// querySelectorAll never matches its own root, and here the fragment is
+		// the root, so the <li> (its child) is a matched descendant and gets
+		// class="{type}". title/message data-ln-field targets are descendants
+		// too, so one call resolves all three. See plan Finding: fill-on-fragment.
+		fill(fragment, {
+			type: type,
+			title: opts.title,
+			message: typeof opts.message === 'string' ? opts.message : undefined
+		});
+
+		const li = fragment.firstElementChild;
+		if (!li) return null;
+
+		// Items are addressed by [data-ln-toast-item] everywhere (eviction / clear / destroy / hydration) — stamp it if the consumer template omitted it.
+		if (!li.hasAttribute('data-ln-toast-item')) li.setAttribute('data-ln-toast-item', '');
+
+		// ORDERING: classList.add MUST follow fill(). fill set class via
+		// setAttribute('class', type), which clobbers the whole attribute — a
+		// pre-added .ln-enter would be wiped. Add the transient enter flag now.
+		li.classList.add('ln-enter');
+
+		const bodyEl = li.querySelector('.body');
+		if (bodyEl) _renderBody(bodyEl, opts);
+
+		const closeBtn = li.querySelector('[data-ln-toast-close]');
+		if (closeBtn) closeBtn.addEventListener('click', function () { _dismiss(li); });
+
+		return li;
+	}
+
+	// Runtime DATA rendering only (arrays / error maps) — plain string
+	// messages are already handled by fill()'s data-ln-field above.
+	function _renderBody(bodyEl, opts) {
+		if (Array.isArray(opts.message)) {
+			const ul = document.createElement("ul");
+			for (const msg of opts.message) {
+				const lie = document.createElement("li");
+				lie.textContent = msg;
+				ul.appendChild(lie);
+			}
+			bodyEl.appendChild(ul);
+		}
+		if (opts.data && opts.data.errors) {
+			const ul = document.createElement("ul");
+			for (const err of Object.values(opts.data.errors).flat()) {
+				const lie = document.createElement("li");
+				lie.textContent = err;
+				ul.appendChild(lie);
+			}
+			bodyEl.appendChild(ul);
+		}
+	}
+
+	function _append(cmp, li) {
+		// Evict by [data-ln-toast-item] — raw children include the nested <template> (recommended placement).
+		const items = Array.from(cmp.dom.querySelectorAll("[data-ln-toast-item]"));
+		while (items.length >= cmp.max && items.length > 0) cmp.dom.removeChild(items.shift());
+		cmp.dom.appendChild(li);
+		_promoteTopLayer(cmp.dom);
+		requestAnimationFrame(() => li.classList.remove("ln-enter"));
+	}
+
+	function _dismiss(li) {
+		if (!li || !li.parentNode) return;
+		const container = li.parentNode;
+		clearTimeout(li._timer);
+		li.classList.remove("ln-enter");
+		li.classList.add("ln-out");
+		setTimeout(() => {
+			if (li.parentNode) {
+				li.parentNode.removeChild(li);
+				_demoteTopLayerIfEmpty(container);
+			}
+		}, 200);
+	}
+
+	function _resolveContainer(detail) {
+		let container = detail && detail.container;
+		if (typeof container === "string") container = document.querySelector(container);
+		if (!(container instanceof HTMLElement)) {
+			container = document.querySelector("[" + DOM_SELECTOR + "]") || document.getElementById("ln-toast-container");
+		}
+		return container || null;
+	}
+
+	function _hydrateLI(li, cmp) {
+		if (li._lnToastHydrated) return;
+		li._lnToastHydrated = true;
+
+		const closeBtn = li.querySelector('[data-ln-toast-close]');
+		if (closeBtn) closeBtn.addEventListener('click', function () { _dismiss(li); });
+
+		const raw = li.getAttribute('data-ln-toast-timeout');
+		const parsed = raw !== null ? parseInt(raw, 10) : NaN;
+		const timeout = Number.isFinite(parsed) ? parsed : cmp.timeoutDefault;
+		if (timeout > 0) li._timer = setTimeout(function () { _dismiss(li); }, timeout);
+	}
+
+	function _onEnqueue(e) {
+		const detail = e.detail || {};
+		const container = _resolveContainer(detail);
+		if (!container) {
+			console.warn('[ln-toast] No toast container found');
+			return;
+		}
+		const cmp = container[DOM_ATTRIBUTE] || new _Component(container);
+		const li = _buildItem(detail, container);
+		if (!li) return;
+		const timeout = Number.isFinite(detail.timeout) ? detail.timeout : cmp.timeoutDefault;
+		_append(cmp, li);
+		if (timeout > 0) li._timer = setTimeout(() => _dismiss(li), timeout);
+	}
+
+	function _onClear(e) {
+		const detail = (e && e.detail) || {};
+		if (detail.container) {
+			const el = _resolveContainer(detail);
+			if (el) {
+				for (const child of Array.from(el.querySelectorAll("[data-ln-toast-item]"))) _dismiss(child);
+			}
+		} else {
+			const containers = document.querySelectorAll("[" + DOM_SELECTOR + "]");
+			for (const el of Array.from(containers)) {
+				for (const child of Array.from(el.querySelectorAll("[data-ln-toast-item]"))) _dismiss(child);
+			}
+		}
+	}
+
+	guardBody(function () {
+		window.addEventListener('ln-toast:enqueue', _onEnqueue);
+		window.addEventListener('ln-toast:clear', _onClear);
+		window.addEventListener('ln-modal:open', function () {
+			const containers = document.querySelectorAll("[" + DOM_SELECTOR + "]");
+			for (const container of Array.from(containers)) {
+				if (container.querySelectorAll("[data-ln-toast-item]").length > 0) {
+					_promoteTopLayer(container);
+				}
+			}
+		});
+
+		const observer = new MutationObserver(function (muts) {
+			for (const m of muts) {
+				if (m.type === 'attributes') { _findContainers(m.target); continue; }
+				for (const n of m.addedNodes) {
+					_findContainers(n);
+				}
+			}
+		});
+		observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [DOM_SELECTOR] });
+
+		_findContainers(document.body);
+	}, 'ln-toast');
+})();

package/js/ln-toast/template.html

@@ -1,14 +1,18 @@
-<li class="ln-toast__item">
-	<div class="ln-toast__card" data-ln-attr="role:role, aria-live:ariaLive">
-		<div class="ln-toast__side">
-			<svg class="ln-icon" aria-hidden="true"><use href=""></use></svg>
-		</div>
-		<div class="ln-toast__content">
-			<div class="ln-toast__head">
-				<strong class="ln-toast__title" data-ln-field="title"></strong>
-			</div>
-			<button type="button" class="ln-toast__close" aria-label="Close"><svg class="ln-icon" aria-hidden="true"><use href="#ln-x"></use></svg></button>
-			<div class="ln-toast__body" data-ln-show="hasBody"></div>
-		</div>
+<!-- Developer example — copy into your page markup inside <template data-ln-template="ln-toast-item">. Not a runtime artifact. -->
+<li data-ln-toast-item data-ln-attr="class:type">
+	<div class="icon">
+		<ul>
+			<li data-ln-toast-when="success"><svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-circle-check"></use></svg></li>
+			<li data-ln-toast-when="error"><svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-circle-x"></use></svg></li>
+			<li data-ln-toast-when="warn"><svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-alert-triangle"></use></svg></li>
+			<li data-ln-toast-when="info"><svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-info-circle"></use></svg></li>
+		</ul>
 	</div>
+	<section class="content">
+		<header>
+			<strong class="title" data-ln-field="title"></strong>
+			<button type="button" data-ln-toast-close aria-label="Close"><svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-x"></use></svg></button>
+		</header>
+		<main class="body" data-ln-field="message"></main>
+	</section>
 </li>

package/js/ln-toggle/README.md

@@ -133,5 +133,64 @@ Combine the alert card with `data-ln-persist` so that once the user closes the a
 
 ## Related
 - **[`ln-accordion`](../ln-accordion/README.md)** — Single-open coordinator for toggle panels.
-- **[`ln-dropdown`](../ln-dropdown/README.md)** — Menu wrapper adding click-outside/teleportation.
-- **Architecture deep-dive** — [`docs/js/toggle.md`](../../docs/js/toggle.md).
+- **[`ln-dropdown`](../ln-dropdown/README.md)** — Menu wrapper adding click-outside/top-layer promotion.
+
+---
+
+## 🔧 Internals
+
+Source: `js/ln-toggle/ln-toggle.js`. Imports `registerComponent`, `dispatch`, `dispatchCancelable` from `ln-core/helpers.js` and `persistGet`/`persistSet` from `ln-core/persist.js` — no other library component.
+
+### Instance state
+
+| Field | Description |
+|---|---|
+| `dom` | The panel element |
+| `isOpen` | Cache of the attribute, kept current by `_syncAttribute`; used only to skip no-op transitions and as a read-only convenience getter |
+
+No cached trigger list, no saved previous-value for revert, no timer/queue — every attribute change runs the pipeline immediately. Triggers are re-queried document-wide on each state change; cheap because the matching set is typically 1-3 elements.
+
+### Init
+
+`registerComponent` scans for `[data-ln-toggle]`, watches `data-ln-toggle`/`data-ln-toggle-for` mutations, and calls `_attachTriggers(document.body)` on init. `_component(dom)`:
+1. **Persistence restore** — if `data-ln-persist` is present, `persistGet('toggle', dom)`; a saved value is applied via `setAttribute` *inside the constructor*. The observer does fire for that write, but `el[DOM_ATTRIBUTE]` is still `undefined` at that point (assigned only after the constructor returns), so `_syncAttribute`'s instance guard catches it and the pipeline does not run — no spurious `:before-open`/`:open` during restore.
+2. Reads the (possibly restored) attribute into `isOpen`, adds `.open` if true, calls `_syncTriggerAria` for the initial ARIA state.
+
+No `:open`/`:close` event fires at init — the attribute is already in its final state; there's been no transition.
+
+### Trigger attachment
+
+`_attachTriggers(root)` finds every `[data-ln-toggle-for]` under `root` (skipping ones already wired via a stashed-handler guard) and binds `click`: ignores modifier-key clicks, `preventDefault`s, resolves the target by ID, then writes `data-ln-toggle` — `"open"`/`"close"` for an explicit `data-ln-toggle-action`, or the inverse of the current value for the default toggle action. The handler reference is stashed on the trigger for `destroy` to remove later. Newly attached triggers also get their `aria-expanded` set immediately from the target's current state (no waiting for the next transition).
+
+### `_syncAttribute` — the transition pipeline
+
+Runs only when the mutated element already has an `lnToggle` instance (a brand-new element getting the attribute takes the init/upgrade path instead, via `findElements`, not a transition). Order, for the "open" direction (close mirrors it):
+
+1. `dispatchCancelable('ln-toggle:before-open')` — listeners see `isOpen` at its **pre-transition** value.
+2. If canceled: revert the attribute to `'close'` and return. The revert re-fires the observer, but `isOpen` was never changed, so the second pass is a no-op — no loop, no duplicate event.
+3. `isOpen = true`, `.open` class added.
+4. `_syncTriggerAria(el, true)` — before the post-event, so `:open` listeners see settled ARIA.
+5. `dispatch('ln-toggle:open')`.
+6. If `data-ln-persist`: `persistSet('toggle', el, 'open')` — last, so a listener that removes `data-ln-persist` synchronously during `:open` skips the write.
+
+This ordering (cancelable → class → aria → event → persist) is the same shape for every transition in the library that follows the attribute-as-contract pattern.
+
+### `_syncTriggerAria`
+
+Document-scoped `querySelectorAll('[data-ln-toggle-for="<id>"]')`, sets `aria-expanded` on each match — document-scoped because triggers can live anywhere relative to their panel. Drives both screen-reader state and the CSS chevron rotation rule in `scss/components/_toggle.scss`. Called from init, every transition, and `_attachTriggers` (so late-added triggers inherit current state).
+
+### Persistence
+
+Key: `ln:toggle:{pagePath}:{id}` (`_resolveKey` in `ln-core/persist.js`); path-scoped and non-overrideable, so the same panel `id` on two routes stores independently. `persistGet`/`persistSet` wrap `localStorage` in `try/catch` and swallow failures silently (private browsing, quota, disabled storage) — toggle keeps working without persistence, no error surfaces.
+
+### Destroy
+
+Guards double-destroy, dispatches `ln-toggle:destroyed`, removes the click listener from every matching trigger (using the stashed handler ref), deletes the instance. Does **not** remove `data-ln-toggle` or the `.open` class — only the JS coupling is severed; the consumer removes markup state separately if a full teardown is wanted.
+
+### What it deliberately does not do
+
+No keyboard handling (ESC, Space/Enter on the panel), no outside-click, no focus management, no resize listener. Each is a separate concern owned by a wrapping component: `ln-dropdown` (outside-click/resize/teleport), `ln-modal` (focus trap), or project code.
+
+### Cross-component contract
+
+`ln-accordion` and `ln-dropdown` both reach in only through the public contract — listening for `ln-toggle:open`/`:close`, and writing `data-ln-toggle="..."` directly (never an instance method). `ln-accordion` writes `'close'` on siblings from its wrapper listener; `ln-dropdown` listens on its inner toggle and teleports/wires outside-click on `:open`, reverses on `:close`. Because the attribute is the only mutation path, cancelable events and persistence fire identically regardless of which caller changed the state — there is no private mutator to bypass the pipeline.

package/js/ln-toggle/ln-toggle-dev.scss

@@ -0,0 +1,13 @@
+@use '../../scss/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Toggle Panel Missing ID: panels controlled by data-ln-toggle must have an id for triggering/ARIA linking
+	[data-ln-toggle]:not([id]) {
+		@include dev-dom-error("[data-ln-toggle] is missing a required 'id' attribute for trigger linking.");
+	}
+
+	// 2. Toggle Trigger Empty ID: trigger elements must point to a target panel ID
+	[data-ln-toggle-for=""] {
+		@include dev-inline-error("data-ln-toggle-for target ID cannot be empty");
+	}
+}

package/js/ln-toggle/ln-toggle.js

@@ -1 +1 @@
-(function(){"use strict";function h(e,t,o){e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:o||{}}))}function w(e,t,o){const i=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:o||{}});return e.dispatchEvent(i),i}function O(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){O(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}function y(e,t,o,i){if(e.nodeType!==1)return;const b=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",n=Array.from(e.querySelectorAll(b));e.matches&&e.matches(b)&&n.push(e);for(const r of n)r[o]||(r[o]=new i(r))}function I(e,t,o,i,g={}){const b=g.extraAttributes||[],n=g.onAttributeChange||null,r=g.onInit||null;function s(d){const f=d||document.body;y(f,e,t,o),r&&r(f)}return O(function(){const d=new MutationObserver(function(p){for(let l=0;l<p.length;l++){const u=p[l];if(u.type==="childList"){for(let a=0;a<u.addedNodes.length;a++){const c=u.addedNodes[a];c.nodeType===1&&(y(c,e,t,o),r&&r(c))}for(let a=0;a<u.removedNodes.length;a++){const c=u.removedNodes[a];if(c.nodeType===1){const L=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",m=Array.from(c.querySelectorAll(L));c.matches&&c.matches(L)&&m.push(c);for(let A=0;A<m.length;A++){const S=m[A];if(!document.contains(S)){const v=S[t];v&&typeof v.destroy=="function"&&v.destroy()}}}}}else u.type==="attributes"&&(n&&u.target[t]?n(u.target,u.attributeName):(y(u.target,e,t,o),r&&r(u.target)))}});let f=[];if(e.indexOf("[")!==-1){const p=/\[([\w-]+)/g;let l;for(;(l=p.exec(e))!==null;)f.push(l[1])}else f.push(e);d.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:f.concat(b)})},i),window[t]=s,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){s(document.body)}):s(document.body),s}const x={};function M(e,t){x[e]=t}function D(e){return x[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=M,window.lnCore.getDataMapper=D);const _="ln:";function q(){return location.pathname.replace(/\/+$/,"").toLowerCase()||"/"}function C(e,t){const o=t.getAttribute("data-ln-persist"),i=o!==null&&o!==""?o:t.id;return i?_+e+":"+q()+":"+i:(console.warn('[ln-persist] Element requires id or data-ln-persist="key"',t),null)}function N(e,t){const o=C(e,t);if(!o)return null;try{const i=localStorage.getItem(o);return i!==null?JSON.parse(i):null}catch{return null}}function E(e,t,o){const i=C(e,t);if(i)try{localStorage.setItem(i,JSON.stringify(o))}catch{}}(function(){const e="data-ln-toggle",t="lnToggle";if(window[t]!==void 0)return;function o(n){const r=Array.from(n.querySelectorAll("[data-ln-toggle-for]"));n.hasAttribute&&n.hasAttribute("data-ln-toggle-for")&&r.push(n);for(const s of r){if(s[t+"Trigger"])continue;const d=function(l){if(l.ctrlKey||l.metaKey||l.button===1)return;l.preventDefault();const u=s.getAttribute("data-ln-toggle-for"),a=document.getElementById(u);if(!a||!a[t])return;const c=s.getAttribute("data-ln-toggle-action")||"toggle";if(c==="open")a.setAttribute(e,"open");else if(c==="close")a.setAttribute(e,"close");else if(c==="toggle"){const T=a.getAttribute(e);a.setAttribute(e,T==="open"?"close":"open")}};s.addEventListener("click",d),s[t+"Trigger"]=d;const f=s.getAttribute("data-ln-toggle-for"),p=document.getElementById(f);p&&p[t]&&s.setAttribute("aria-expanded",p[t].isOpen?"true":"false")}}function i(n,r){const s=document.querySelectorAll('[data-ln-toggle-for="'+n.id+'"]');for(const d of s)d.setAttribute("aria-expanded",r?"true":"false")}function g(n){if(this.dom=n,n.hasAttribute("data-ln-persist")){const r=N("toggle",n);r!==null&&n.setAttribute(e,r)}return this.isOpen=n.getAttribute(e)==="open",this.isOpen&&n.classList.add("open"),i(n,this.isOpen),this}g.prototype.destroy=function(){if(!this.dom[t])return;h(this.dom,"ln-toggle:destroyed",{target:this.dom});const n=document.querySelectorAll('[data-ln-toggle-for="'+this.dom.id+'"]');for(const r of n)r[t+"Trigger"]&&(r.removeEventListener("click",r[t+"Trigger"]),delete r[t+"Trigger"]);delete this.dom[t]};function b(n){const r=n[t];if(!r)return;const d=n.getAttribute(e)==="open";if(d!==r.isOpen)if(d){if(w(n,"ln-toggle:before-open",{target:n}).defaultPrevented){n.setAttribute(e,"close");return}r.isOpen=!0,n.classList.add("open"),i(n,!0),h(n,"ln-toggle:open",{target:n}),n.hasAttribute("data-ln-persist")&&E("toggle",n,"open")}else{if(w(n,"ln-toggle:before-close",{target:n}).defaultPrevented){n.setAttribute(e,"open");return}r.isOpen=!1,n.classList.remove("open"),i(n,!1),h(n,"ln-toggle:close",{target:n}),n.hasAttribute("data-ln-persist")&&E("toggle",n,"close")}}I(e,t,g,"ln-toggle",{extraAttributes:["data-ln-toggle-for"],onAttributeChange:b,onInit:o})})()})();
+(function(){"use strict";if(typeof window<"u"){const t=console.warn;console.warn=function(...e){typeof e[0]=="string"&&(e[0].startsWith("[ln-")||e[0].startsWith("[lnCore"))&&!(document.documentElement.hasAttribute("data-ln-debug")||document.body&&document.body.hasAttribute("data-ln-debug"))||t.apply(console,e)}}const b={};function K(t,e){b[t]||(b[t]=document.querySelector('[data-ln-template="'+t+'"]'));const o=b[t];return o?o.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function y(t,e,o){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:o||{}}))}function _(t,e,o){const l=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o||{}});return t.dispatchEvent(l),l}function S(t,e){if(!t||!e)return t;const o=t.querySelectorAll("[data-ln-field]");for(let i=0;i<o.length;i++){const s=o[i],r=s.getAttribute("data-ln-field");e[r]!=null&&(s.textContent=e[r])}const l=t.querySelectorAll("[data-ln-attr]");for(let i=0;i<l.length;i++){const s=l[i],r=s.getAttribute("data-ln-attr").split(",");for(let c=0;c<r.length;c++){const a=r[c].trim().split(":");if(a.length!==2)continue;const d=a[0].trim(),f=a[1].trim();e[f]!=null&&s.setAttribute(d,e[f])}}const u=t.querySelectorAll("[data-ln-show]");for(let i=0;i<u.length;i++){const s=u[i],r=s.getAttribute("data-ln-show");r in e&&s.classList.toggle("hidden",!e[r])}const n=t.querySelectorAll("[data-ln-class]");for(let i=0;i<n.length;i++){const s=n[i],r=s.getAttribute("data-ln-class").split(",");for(let c=0;c<r.length;c++){const a=r[c].trim().split(":");if(a.length!==2)continue;const d=a[0].trim(),f=a[1].trim();f in e&&s.classList.toggle(d,!!e[f])}}return t}function j(t,e){t.matches&&t.matches("[data-ln-form], [data-ln-fillable]")&&t.dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));const o=t.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let l=0;l<o.length;l++)o[l].dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));return t}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(t){if(!(!t.target.matches||!t.target.matches("[data-ln-fillable]")))if(t.detail)S(t.target,t.detail);else{const e=t.target.querySelectorAll("[data-ln-field]");for(let o=0;o<e.length;o++)e[o].textContent=""}})));function O(t,e){if(!t||!e)return t;const o=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;o.nextNode();){const n=o.currentNode;n.textContent.indexOf("{{")!==-1&&(n.textContent=n.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(i,s){return e[s]!==void 0?e[s]:""}))}const l=function(n,i){return e[i]!==void 0?e[i]:""},u=Array.from(t.querySelectorAll("*"));t.nodeType===1&&u.push(t);for(let n=0;n<u.length;n++){const i=u[n],s=i.attributes;for(let r=0;r<s.length;r++){const c=s[r];c.value.indexOf("{{")!==-1&&i.setAttribute(c.name,c.value.replace(/\{\{\s*(\w+)\s*\}\}/g,l))}}return t}function B(t,e,o,l,u,n){const i={};for(let r=0;r<t.children.length;r++){const c=t.children[r],a=c.getAttribute("data-ln-key");a&&(i[a]=c)}const s=document.createDocumentFragment();for(let r=0;r<e.length;r++){const c=e[r],a=String(l(c));let d=i[a];if(d)u(d,c,r);else{const f=K(o,n);if(!f||(O(f,c),d=f.firstElementChild,!d))continue;d.setAttribute("data-ln-key",a),u(d,c,r)}s.appendChild(d)}t.textContent="",t.appendChild(s)}function q(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){q(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function w(t,e,o,l){if(t.nodeType!==1)return;const n=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",i=Array.from(t.querySelectorAll(n));t.matches&&t.matches(n)&&i.push(t);for(const s of i)s[o]||(s[o]=new l(s))}function F(t,e,o,l,u={}){const n=u.extraAttributes||[],i=u.onAttributeChange||null,s=u.onInit||null;function r(c){const a=c||document.body;w(a,t,e,o),s&&s(a)}return q(function(){const c=new MutationObserver(function(d){for(let f=0;f<d.length;f++){const g=d[f];if(g.type==="childList"){for(let h=0;h<g.addedNodes.length;h++){const p=g.addedNodes[h];p.nodeType===1&&(w(p,t,e,o),s&&s(p))}for(let h=0;h<g.removedNodes.length;h++){const p=g.removedNodes[h];if(p.nodeType===1){const N=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",A=Array.from(p.querySelectorAll(N));p.matches&&p.matches(N)&&A.push(p);for(let v=0;v<A.length;v++){const M=A[v];if(!document.contains(M)){const L=M[e];L&&typeof L.destroy=="function"&&L.destroy()}}}}}else g.type==="attributes"&&(i&&g.target[e]?i(g.target,g.attributeName):(w(g.target,t,e,o),s&&s(g.target)))}});let a=[];if(t.indexOf("[")!==-1){const d=/\[([\w-]+)/g;let f;for(;(f=d.exec(t))!==null;)a.push(f[1])}else a.push(t);c.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:a.concat(n)})},l),window[e]=r,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){r(document.body)}):r(document.body),r}const x={};function W(t,e){x[t]=e}function P(t){return x[t]||{ingress:e=>e,egress:e=>e}}const E={};function k(t,e){if(!t||typeof e!="object")return;const o=t.toLowerCase().split("-")[0];E[o]=e}function G(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return E[e]||null}k("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=W,window.lnCore.getDataMapper=P,window.lnCore.registerLocaleFallback=k,window.lnCore.getLocaleFallback=G,window.lnCore.fillTemplate=O,window.lnCore.fill=S,window.lnCore.lnFill=j,window.lnCore.renderList=B);const U="ln:";let m=null;function T(){if(m!==null)return m;try{if(typeof localStorage>"u")return m=!1,!1;const t="__ln_test__";localStorage.setItem(t,t),localStorage.removeItem(t),m=!0}catch{m=!1}return m}function J(){return location.pathname.replace(/\/+$/,"").toLowerCase()||"/"}function R(t,e){const o=e.getAttribute("data-ln-persist"),l=o!==null&&o!==""?o:e.id;return l?U+t+":"+J()+":"+l:(console.warn('[ln-persist] Element requires id or data-ln-persist="key"',e),null)}function X(t,e){if(!T())return null;const o=R(t,e);if(!o)return null;try{const l=localStorage.getItem(o);return l!==null?JSON.parse(l):null}catch{return null}}function D(t,e,o){if(!T())return;const l=R(t,e);if(l)try{o==null?localStorage.removeItem(l):localStorage.setItem(l,JSON.stringify(o))}catch{}}function I(t){return(t||"").replace(/^#/,"")}function C(t){const e=t===void 0?location.hash:t,o={},l=I(e);if(!l)return o;const u=l.split("&");for(let n=0;n<u.length;n++){const i=u[n];if(!i)continue;const s=i.indexOf(":"),r=s>-1?i.slice(0,s):i,c=s>-1?i.slice(s+1):"";if(r)try{o[r]=decodeURIComponent(c)}catch{o[r]=c}}return o}function H(t){if(!t)return null;const e=C();return t in e?e[t]:null}function $(t,e){if(!t)return;const o=C();e==null?delete o[t]:o[t]=String(e);const u=Object.keys(o).map(function(n){const i=o[n];return i===""?n:n+":"+encodeURIComponent(i)}).join("&");I(location.hash)!==u&&(location.hash=u)}function z(t){return t.button===1||t.ctrlKey||t.metaKey||t.shiftKey?!1:(t.preventDefault(),!0)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=C,window.lnCore.hashGet=H,window.lnCore.hashSet=$,window.lnCore.hashLinkClick=z),(function(){const t="data-ln-toggle",e="lnToggle";if(window[e]!==void 0)return;function o(n,i){const s=document.querySelectorAll('[data-ln-toggle-for="'+n.id+'"]');for(const r of s)r.setAttribute("aria-expanded",i?"true":"false")}function l(n){this.dom=n;const i=this;if(this._onRequestOpen=function(){i.open()},this._onRequestClose=function(){i.close()},this._onRequestToggle=function(){i.toggle()},this.dom.addEventListener("ln-toggle:request-open",this._onRequestOpen),this.dom.addEventListener("ln-toggle:request-close",this._onRequestClose),this.dom.addEventListener("ln-toggle:request-toggle",this._onRequestToggle),n.hasAttribute("data-ln-persist")){const s=X("toggle",n);s!==null&&n.setAttribute(t,s)}return this.isOpen=n.getAttribute(t)==="open",this.isOpen&&n.classList.add("open"),o(n,this.isOpen),this}l.prototype.open=function(){this.dom.setAttribute(t,"open")},l.prototype.close=function(){this.dom.setAttribute(t,"close")},l.prototype.toggle=function(){const n=this.dom.getAttribute(t);this.dom.setAttribute(t,n==="open"?"close":"open")},l.prototype.destroy=function(){this.dom[e]&&(this.dom.removeEventListener("ln-toggle:request-open",this._onRequestOpen),this.dom.removeEventListener("ln-toggle:request-close",this._onRequestClose),this.dom.removeEventListener("ln-toggle:request-toggle",this._onRequestToggle),y(this.dom,"ln-toggle:destroyed",{target:this.dom}),delete this.dom[e])};function u(n){const i=n[e];if(!i)return;const r=n.getAttribute(t)==="open";if(r!==i.isOpen)if(r){if(_(n,"ln-toggle:before-open",{target:n}).defaultPrevented){n.setAttribute(t,"close");return}i.isOpen=!0,n.classList.add("open"),o(n,!0),y(n,"ln-toggle:open",{target:n}),n.hasAttribute("data-ln-persist")&&D("toggle",n,"open")}else{if(_(n,"ln-toggle:before-close",{target:n}).defaultPrevented){n.setAttribute(t,"open");return}i.isOpen=!1,n.classList.remove("open"),o(n,!1),y(n,"ln-toggle:close",{target:n}),n.hasAttribute("data-ln-persist")&&D("toggle",n,"close")}}document.addEventListener("click",function(n){if(n.ctrlKey||n.metaKey||n.button===1)return;const i=n.target.closest("[data-ln-toggle-for]");if(i){const s=i.getAttribute("data-ln-toggle-for"),r=document.getElementById(s);if(r&&r[e]){n.preventDefault();const c=i.getAttribute("data-ln-toggle-action")||"toggle";if(c==="open")r.setAttribute(t,"open");else if(c==="close")r.setAttribute(t,"close");else if(c==="toggle"){const a=r.getAttribute(t);r.setAttribute(t,a==="open"?"close":"open")}}}}),F(t,e,l,"ln-toggle",{onAttributeChange:u})})()})();