@livenetworks/ashlar 1.3.2

package/js/ln-link/src/ln-link.js

@@ -0,0 +1,196 @@
+import { dispatchCancelable, guardBody } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-link';
+	const DOM_ATTRIBUTE = 'lnLink';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Status Bar ────────────────────────────────────────────
+
+	let _statusEl = null;
+
+	function _createStatusBar() {
+		_statusEl = document.createElement('div');
+		_statusEl.className = 'ln-link-status';
+		document.body.appendChild(_statusEl);
+	}
+
+	function _showStatus(url) {
+		if (!_statusEl) return;
+		_statusEl.textContent = url;
+		_statusEl.classList.add('ln-link-status--visible');
+	}
+
+	function _hideStatus() {
+		if (!_statusEl) return;
+		_statusEl.classList.remove('ln-link-status--visible');
+	}
+
+	// ─── Click Handler ─────────────────────────────────────────
+
+	function _handleClick(row, e) {
+		if (e.target.closest('a, button, input, select, textarea')) return;
+
+		const link = row.querySelector('a');
+		if (!link) return;
+
+		const href = link.getAttribute('href');
+		if (!href) return;
+
+		if (e.ctrlKey || e.metaKey || e.button === 1) {
+			window.open(href, '_blank');
+			return;
+		}
+
+		const before = dispatchCancelable(row, 'ln-link:navigate', { target: row, href: href, link: link });
+		if (before.defaultPrevented) return;
+		link.click();
+	}
+
+	// ─── Hover Handlers ────────────────────────────────────────
+
+	function _handleMouseEnter(row) {
+		const link = row.querySelector('a');
+		if (!link) return;
+
+		const href = link.getAttribute('href');
+		if (href) _showStatus(href);
+	}
+
+	function _handleMouseLeave() {
+		_hideStatus();
+	}
+
+	// ─── Row Initialization ────────────────────────────────────
+
+	function _initRow(row) {
+		if (row[DOM_ATTRIBUTE + 'Row']) return;
+		row[DOM_ATTRIBUTE + 'Row'] = true;
+
+		if (!row.querySelector('a')) return;
+
+		row._lnLinkClick = function (e) {
+			_handleClick(row, e);
+		};
+		row._lnLinkEnter = function () {
+			_handleMouseEnter(row);
+		};
+
+		row.addEventListener('click', row._lnLinkClick);
+		row.addEventListener('mouseenter', row._lnLinkEnter);
+		row.addEventListener('mouseleave', _handleMouseLeave);
+	}
+
+	function _destroyRow(row) {
+		if (!row[DOM_ATTRIBUTE + 'Row']) return;
+		if (row._lnLinkClick) row.removeEventListener('click', row._lnLinkClick);
+		if (row._lnLinkEnter) row.removeEventListener('mouseenter', row._lnLinkEnter);
+		row.removeEventListener('mouseleave', _handleMouseLeave);
+		delete row._lnLinkClick;
+		delete row._lnLinkEnter;
+		delete row[DOM_ATTRIBUTE + 'Row'];
+	}
+
+	function _destroyContainer(container) {
+		if (!container[DOM_ATTRIBUTE + 'Init']) return;
+		const tag = container.tagName;
+
+		if (tag === 'TABLE' || tag === 'TBODY') {
+			const tbody = (tag === 'TABLE') ? container.querySelector('tbody') || container : container;
+			for (const row of tbody.querySelectorAll('tr')) {
+				_destroyRow(row);
+			}
+		} else {
+			_destroyRow(container);
+		}
+
+		delete container[DOM_ATTRIBUTE + 'Init'];
+	}
+
+	// ─── Container Initialization ──────────────────────────────
+
+	function _initContainer(container) {
+		if (container[DOM_ATTRIBUTE + 'Init']) return;
+		container[DOM_ATTRIBUTE + 'Init'] = true;
+
+		const tag = container.tagName;
+
+		if (tag === 'TABLE' || tag === 'TBODY') {
+			const tbody = (tag === 'TABLE') ? container.querySelector('tbody') || container : container;
+			for (const row of tbody.querySelectorAll('tr')) {
+				_initRow(row);
+			}
+		} else {
+			_initRow(container);
+		}
+	}
+
+	// ─── Find & Init ───────────────────────────────────────────
+
+	// Local findElements — intentional divergence from ln-core helper: invokes _initContainer (function, flag-based) and processes child rows.
+	function findElements(root) {
+		if (root.hasAttribute && root.hasAttribute(DOM_SELECTOR)) {
+			_initContainer(root);
+		}
+
+		const containers = root.querySelectorAll ? root.querySelectorAll('[' + DOM_SELECTOR + ']') : [];
+		for (const c of containers) {
+			_initContainer(c);
+		}
+	}
+
+	// ─── DOM Observer ──────────────────────────────────────────
+
+	function _domObserver() {
+		guardBody(function () {
+			const observer = new MutationObserver(function (mutations) {
+				for (const mutation of mutations) {
+					if (mutation.type === 'childList') {
+						for (const node of mutation.addedNodes) {
+							if (node.nodeType === 1) {
+								findElements(node);
+
+								if (node.tagName === 'TR') {
+									const parent = node.closest('[' + DOM_SELECTOR + ']');
+									if (parent) _initRow(node);
+								}
+							}
+						}
+					} else if (mutation.type === 'attributes') {
+						findElements(mutation.target);
+					}
+				}
+			});
+
+			observer.observe(document.body, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: [DOM_SELECTOR]
+			});
+		}, 'ln-link');
+	}
+
+	// ─── Constructor (public API) ──────────────────────────────
+
+	function constructor(domRoot) {
+		findElements(domRoot);
+	}
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	window[DOM_ATTRIBUTE] = { init: constructor, destroy: _destroyContainer };
+
+	function _initializeAll() {
+		_createStatusBar();
+		_domObserver();
+		constructor(document.body);
+	}
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', _initializeAll);
+	} else {
+		_initializeAll();
+	}
+})();

package/js/ln-modal/README.md

@@ -0,0 +1,154 @@
+# ln-modal
+
+> Focus-gated viewport-blocking dialog overlays, managed reactively via the DOM.
+
+---
+
+## 1. Philosophy & The Modal Mindset
+
+In `ln-ashlar`, the core design principle is **orthogonality**. Rather than creating a heavy component that bundles form handlers, visual layouts, focus traps, backdrop styling, and dimensions, `ln-modal` splits them cleanly:
+
+1. **State & Accessibility (JavaScript)**: The `ln-modal` script (145 lines) only manages binary `open` / `close` state, suppresses parent `<body>` scrolling, intercepts tab navigation to trap focus inside the modal, closes topmost modals on ESC key, and restores focus back to the trigger on close.
+2. **The Content Root (HTML)**: The modal content root is ALWAYS a `<form>`. The form IS the panel — there are no redundant BEM wrappers like `.ln-modal__content`. Cancel and submit buttons live directly inside the form.
+3. **Visual Presentation & Sizing (CSS)**: Overlay backdrops, Sticky headers/footers, and scrollable body areas are styled using Vanilla CSS. Sizing variants (`modal-sm|md|lg|xl`) are applied via SCSS mixins on `> form`, keeping markup completely clean.
+
+---
+
+## 2. Minimal Blueprint
+
+Triggers and modals are paired by ID. The overlay has `class="ln-modal"` and `data-ln-modal`. The direct child must always be a `<form>`.
+
+```html
+<!-- Trigger button -->
+<button data-ln-modal-for="user-modal">Add User</button>
+
+<!-- Modal overlay -->
+<div class="ln-modal" data-ln-modal id="user-modal">
+    <form>
+        <!-- Header -->
+        <header>
+            <h3>Add User</h3>
+            <button type="button" data-ln-modal-close aria-label="Close">
+                <svg class="ln-icon" aria-hidden="true"><use href="#ln-x"></use></svg>
+            </button>
+        </header>
+        
+        <!-- Scrollable content -->
+        <main>
+            <label>Name <input type="text" name="name" autofocus></label>
+        </main>
+        
+        <!-- Sticky footer -->
+        <footer>
+            <button type="button" data-ln-modal-close>Cancel</button>
+            <button type="submit">Save</button>
+        </footer>
+    </form>
+</div>
+```
+
+### Key Anatomy Rules
+- **The Overlay (`data-ln-modal`)**: Driven by the value `"open"` (open) and `"close"` or empty (closed).
+- **The Trigger (`data-ln-modal-for="id"`)**: Placed on buttons/links to toggle modal display.
+- **The Dismiss button (`data-ln-modal-close`)**: Placed on cancel or close buttons. Always needs `type="button"` inside a form.
+- **Focus Override (`autofocus`)**: Place on any form field to override the default behavior of focusing the first input on open.
+
+---
+
+## 3. Declarative API & State Contract
+
+There are no imperative JavaScript methods (like `open()` or `close()`) on the component instance. **The HTML attribute is the sole contract.** 
+
+Triggers, backdrop dismissals, ESC handlers, and custom scripts all change state by writing the active attribute on the modal element:
+
+```js
+const modal = document.getElementById('user-modal');
+
+// Open the modal
+modal.setAttribute('data-ln-modal', 'open');
+
+// Close the modal
+modal.setAttribute('data-ln-modal', 'close');
+
+// Read-only state query
+modal.lnModal.isOpen; // Returns true/false
+```
+
+### Attributes
+- `data-ln-modal`: Placed on the overlay element. Value `"open"` = open; `"close"` = closed.
+- `data-ln-modal-for="id"`: Placed on trigger elements referencing the modal ID.
+- `data-ln-modal-close`: Placed on any close trigger inside the modal.
+
+---
+
+## 4. Transition Events
+
+All events bubble. The dispatch target is the overlay element. Every event's `detail` carries `{ modalId, target }`.
+
+| Event | Cancelable | Dispatched When |
+|---|:---:|---|
+| **`ln-modal:before-open`** | **Yes** | Before opening. Calling `event.preventDefault()` cancels the transition and reverts the attribute. |
+| **`ln-modal:open`** | No | After modal is active, body scroll locked, and focus trapped. |
+| **`ln-modal:before-close`** | **Yes** | Before closing. Calling `event.preventDefault()` cancels the close and reverts the attribute. |
+| **`ln-modal:close`** | No | After modal is closed, scroll locks released, and focus restored. |
+
+```js
+// Example: Block close transition if form is dirty (unsaved changes)
+const modal = document.getElementById('user-modal');
+modal.addEventListener('ln-modal:before-close', (e) => {
+    if (formIsDirty()) {
+        e.preventDefault(); // Reverts attribute back to "open"
+    }
+});
+```
+
+---
+
+## 5. Visual Sizing & SCSS Mixins
+
+Do not use visual layout utility classes in your markup. Apply structural sizing variants inside your SCSS to the modal form element:
+
+| Mixin | `max-width` | Ideal For |
+|---|---|---|
+| `@include modal-sm;` | `28rem` | Simple confirms, single-field inputs |
+| `@include modal-md;` | `32rem` | Standard 2-4 field forms (Default) |
+| `@include modal-lg;` | `42rem` | Wide multi-column forms, data lists |
+| `@include modal-xl;` | `48rem` | Detail previews, large forms |
+
+```scss
+// Apply in project SCSS
+.ln-modal {
+    @include modal-overlay;
+
+    > form {
+        @include modal-panel;
+        @include modal-md; // default
+    }
+    
+    &#user-modal > form {
+        @include modal-lg; // Override specific modal width
+    }
+}
+```
+
+---
+
+## 6. Integration & Source Files
+
+- **Unified Bundle**: Loaded automatically with the main bundle:
+  ```html
+  <script src="dist/ln-ashlar.iife.js" defer></script>
+  ```
+- **Standalone IIFE**: For lightweight pages, load the standalone, self-registering IIFE version:
+  ```html
+  <script src="js/ln-modal/ln-modal.js" defer></script>
+  ```
+- **Active Source (ESM)**: Development source is located at [js/ln-modal/src/ln-modal.js](file:///c:/laragon/www/ln-ashlar/js/ln-modal/src/ln-modal.js).
+
+---
+
+## Related
+- **[`ln-confirm`](../ln-confirm/README.md)** — Two-click inline confirm actions (lightweight alternative to modals).
+- **[`ln-form`](../ln-form/README.md)** — Form serialization and success/error cascades.
+- **[`ln-validate`](../ln-validate/README.md)** — Declarative field-level constraints and visual errors.
+- **Architecture deep-dive** — [`docs/js/modal.md`](../../docs/js/modal.md).

package/js/ln-modal/ln-modal.js

@@ -0,0 +1 @@
+(function(){"use strict";function h(n,e,c){n.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:c||{}}))}function v(n,e,c){const l=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:c||{}});return n.dispatchEvent(l),l}function E(n,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){E(n,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}n()}function g(n,e,c,l){if(n.nodeType!==1)return;const m=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",t=Array.from(n.querySelectorAll(m));n.matches&&n.matches(m)&&t.push(n);for(const o of t)o[c]||(o[c]=new l(o))}function y(n){return!!(n.offsetWidth||n.offsetHeight||n.getClientRects().length)}function _(n,e,c,l,f={}){const m=f.extraAttributes||[],t=f.onAttributeChange||null,o=f.onInit||null;function r(d){const i=d||document.body;g(i,n,e,c),o&&o(i)}return E(function(){const d=new MutationObserver(function(u){for(let s=0;s<u.length;s++){const a=u[s];if(a.type==="childList")for(let b=0;b<a.addedNodes.length;b++){const p=a.addedNodes[b];p.nodeType===1&&(g(p,n,e,c),o&&o(p))}else a.type==="attributes"&&(t&&a.target[e]?t(a.target,a.attributeName):(g(a.target,n,e,c),o&&o(a.target)))}});let i=[];if(n.indexOf("[")!==-1){const u=/\[([\w-]+)/g;let s;for(;(s=u.exec(n))!==null;)i.push(s[1])}else i.push(n);d.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:i.concat(m)})},l),window[e]=r,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){r(document.body)}):r(document.body),r}const A={};function C(n,e){A[n]=e}function L(n){return A[n]||{ingress:e=>e,egress:e=>e}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=C,window.lnCore.getDataMapper=L),(function(){const n="data-ln-modal",e="lnModal";if(window[e]!==void 0)return;function c(t){const o=Array.from(t.querySelectorAll("[data-ln-modal-for]"));t.hasAttribute&&t.hasAttribute("data-ln-modal-for")&&o.push(t);for(const r of o){if(r[e+"Trigger"])continue;const d=function(i){if(i.ctrlKey||i.metaKey||i.button===1)return;i.preventDefault();const u=r.getAttribute("data-ln-modal-for"),s=document.getElementById(u);if(!s){console.warn('[ln-modal] No modal found for data-ln-modal-for="'+u+'"');return}if(!s[e])return;const a=s.getAttribute(n);s.setAttribute(n,a==="open"?"close":"open")};r.addEventListener("click",d),r[e+"Trigger"]=d}}function l(t){this.dom=t,this.isOpen=t.getAttribute(n)==="open";const o=this;return this._onEscape=function(r){r.key==="Escape"&&o.dom.setAttribute(n,"close")},this._onFocusTrap=function(r){if(r.key!=="Tab")return;const d=Array.prototype.filter.call(o.dom.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'),y);if(d.length===0)return;const i=d[0],u=d[d.length-1];r.shiftKey?document.activeElement===i&&(r.preventDefault(),u.focus()):document.activeElement===u&&(r.preventDefault(),i.focus())},this._onClose=function(r){r.preventDefault(),o.dom.setAttribute(n,"close")},m(this),this.isOpen&&(this.dom.setAttribute("aria-modal","true"),this.dom.setAttribute("role","dialog"),document.body.classList.add("ln-modal-open"),document.addEventListener("keydown",this._onEscape),document.addEventListener("keydown",this._onFocusTrap)),this}l.prototype.destroy=function(){if(!this.dom[e])return;this.isOpen&&(this.dom.removeAttribute("aria-modal"),document.removeEventListener("keydown",this._onEscape),document.removeEventListener("keydown",this._onFocusTrap),this._returnFocusEl=null,document.querySelector("["+n+'="open"]')||document.body.classList.remove("ln-modal-open"));const t=this.dom.querySelectorAll("[data-ln-modal-close]");for(const r of t)r[e+"Close"]&&(r.removeEventListener("click",r[e+"Close"]),delete r[e+"Close"]);const o=document.querySelectorAll('[data-ln-modal-for="'+this.dom.id+'"]');for(const r of o)r[e+"Trigger"]&&(r.removeEventListener("click",r[e+"Trigger"]),delete r[e+"Trigger"]);h(this.dom,"ln-modal:destroyed",{modalId:this.dom.id,target:this.dom}),delete this.dom[e]};function f(t){const o=t[e];if(!o)return;const d=t.getAttribute(n)==="open";if(d!==o.isOpen)if(d){if(v(t,"ln-modal:before-open",{modalId:t.id,target:t}).defaultPrevented){t.setAttribute(n,"close");return}o.isOpen=!0,t.setAttribute("aria-modal","true"),t.setAttribute("role","dialog"),document.body.classList.add("ln-modal-open"),document.addEventListener("keydown",o._onEscape),document.addEventListener("keydown",o._onFocusTrap);const u=document.activeElement;o._returnFocusEl=u&&u!==document.body?u:null;const s=t.querySelector("[autofocus]");if(s&&y(s))s.focus();else{const a=t.querySelectorAll('input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled])'),b=Array.prototype.find.call(a,y);if(b)b.focus();else{const p=t.querySelectorAll("a[href], button:not([disabled])"),w=Array.prototype.find.call(p,y);w&&w.focus()}}h(t,"ln-modal:open",{modalId:t.id,target:t})}else{if(v(t,"ln-modal:before-close",{modalId:t.id,target:t}).defaultPrevented){t.setAttribute(n,"open");return}o.isOpen=!1,t.removeAttribute("aria-modal"),document.removeEventListener("keydown",o._onEscape),document.removeEventListener("keydown",o._onFocusTrap),h(t,"ln-modal:close",{modalId:t.id,target:t}),o._returnFocusEl&&document.contains(o._returnFocusEl)&&typeof o._returnFocusEl.focus=="function"&&o._returnFocusEl.focus(),o._returnFocusEl=null,document.querySelector("["+n+'="open"]')||document.body.classList.remove("ln-modal-open")}}function m(t){const o=t.dom.querySelectorAll("[data-ln-modal-close]");for(const r of o)r[e+"Close"]||(r.addEventListener("click",t._onClose),r[e+"Close"]=t._onClose)}_(n,e,l,"ln-modal",{extraAttributes:["data-ln-modal-for"],onAttributeChange:f,onInit:c})})()})();

package/js/ln-modal/ln-modal.scss

@@ -0,0 +1,11 @@
+// ── JS state: modal open/close ──
+// data-ln-modal attribute drives visibility. JS sets "open"/"close".
+[data-ln-modal="open"] {
+	display: flex;
+	opacity: 1;
+}
+
+// Prevent body scroll when modal is open
+body.ln-modal-open {
+	overflow: hidden;
+}

package/js/ln-modal/src/ln-modal.js

@@ -0,0 +1,201 @@
+import { registerComponent, dispatch, dispatchCancelable, isVisible } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-modal';
+	const DOM_ATTRIBUTE = 'lnModal';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+
+	function _attachTriggers(root) {
+		const triggers = Array.from(root.querySelectorAll('[data-ln-modal-for]'));
+		if (root.hasAttribute && root.hasAttribute('data-ln-modal-for')) {
+			triggers.push(root);
+		}
+		for (const btn of triggers) {
+			if (btn[DOM_ATTRIBUTE + 'Trigger']) continue;
+			const handler = function (e) {
+				if (e.ctrlKey || e.metaKey || e.button === 1) return;
+				e.preventDefault();
+				const modalId = btn.getAttribute('data-ln-modal-for');
+				const target = document.getElementById(modalId);
+				if (!target) {
+					console.warn('[ln-modal] No modal found for data-ln-modal-for="' + modalId + '"');
+					return;
+				}
+				if (!target[DOM_ATTRIBUTE]) return;
+				const current = target.getAttribute(DOM_SELECTOR);
+				target.setAttribute(DOM_SELECTOR, current === 'open' ? 'close' : 'open');
+			};
+			btn.addEventListener('click', handler);
+			btn[DOM_ATTRIBUTE + 'Trigger'] = handler;
+		}
+	}
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(dom) {
+		this.dom = dom;
+		this.isOpen = dom.getAttribute(DOM_SELECTOR) === 'open';
+
+		const self = this;
+
+		this._onEscape = function (e) {
+			if (e.key === 'Escape') self.dom.setAttribute(DOM_SELECTOR, 'close');
+		};
+
+		this._onFocusTrap = function (e) {
+			if (e.key !== 'Tab') return;
+			// Focuses in DOM order — positive tabindex not supported (anti-pattern per WCAG)
+			const focusable = Array.prototype.filter.call(
+				self.dom.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'),
+				isVisible
+			);
+			if (focusable.length === 0) return;
+			const first = focusable[0];
+			const last = focusable[focusable.length - 1];
+			if (e.shiftKey) {
+				if (document.activeElement === first) { e.preventDefault(); last.focus(); }
+			} else {
+				if (document.activeElement === last) { e.preventDefault(); first.focus(); }
+			}
+		};
+
+		this._onClose = function (e) {
+			e.preventDefault();
+			self.dom.setAttribute(DOM_SELECTOR, 'close');
+		};
+
+		_attachCloseButtons(this);
+
+		// Apply initial state if open
+		if (this.isOpen) {
+			this.dom.setAttribute('aria-modal', 'true');
+			this.dom.setAttribute('role', 'dialog');
+			document.body.classList.add('ln-modal-open');
+			document.addEventListener('keydown', this._onEscape);
+			document.addEventListener('keydown', this._onFocusTrap);
+		}
+
+		return this;
+	}
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+
+		if (this.isOpen) {
+			this.dom.removeAttribute('aria-modal');
+			document.removeEventListener('keydown', this._onEscape);
+			document.removeEventListener('keydown', this._onFocusTrap);
+			this._returnFocusEl = null;
+			if (!document.querySelector('[' + DOM_SELECTOR + '="open"]')) {
+				document.body.classList.remove('ln-modal-open');
+			}
+		}
+
+		const closeButtons = this.dom.querySelectorAll('[data-ln-modal-close]');
+		for (const btn of closeButtons) {
+			if (btn[DOM_ATTRIBUTE + 'Close']) {
+				btn.removeEventListener('click', btn[DOM_ATTRIBUTE + 'Close']);
+				delete btn[DOM_ATTRIBUTE + 'Close'];
+			}
+		}
+
+		const triggers = document.querySelectorAll('[data-ln-modal-for="' + this.dom.id + '"]');
+		for (const btn of triggers) {
+			if (btn[DOM_ATTRIBUTE + 'Trigger']) {
+				btn.removeEventListener('click', btn[DOM_ATTRIBUTE + 'Trigger']);
+				delete btn[DOM_ATTRIBUTE + 'Trigger'];
+			}
+		}
+
+		dispatch(this.dom, 'ln-modal:destroyed', { modalId: this.dom.id, target: this.dom });
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Attribute Sync ────────────────────────────────────────
+
+	function _syncAttribute(el) {
+		const instance = el[DOM_ATTRIBUTE];
+		if (!instance) return;
+
+		const value = el.getAttribute(DOM_SELECTOR);
+		const shouldBeOpen = value === 'open';
+
+		if (shouldBeOpen === instance.isOpen) return;
+
+		if (shouldBeOpen) {
+			const before = dispatchCancelable(el, 'ln-modal:before-open', { modalId: el.id, target: el });
+			if (before.defaultPrevented) {
+				el.setAttribute(DOM_SELECTOR, 'close');
+				return;
+			}
+			instance.isOpen = true;
+			el.setAttribute('aria-modal', 'true');
+			el.setAttribute('role', 'dialog');
+			document.body.classList.add('ln-modal-open');
+			document.addEventListener('keydown', instance._onEscape);
+			document.addEventListener('keydown', instance._onFocusTrap);
+
+			const previouslyFocused = document.activeElement;
+			instance._returnFocusEl = (previouslyFocused && previouslyFocused !== document.body) ? previouslyFocused : null;
+
+			const autoFocusEl = el.querySelector('[autofocus]');
+			if (autoFocusEl && isVisible(autoFocusEl)) {
+				autoFocusEl.focus();
+			} else {
+				const inputs = el.querySelectorAll('input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled])');
+				const firstInput = Array.prototype.find.call(inputs, isVisible);
+				if (firstInput) firstInput.focus();
+				else {
+					const buttons = el.querySelectorAll('a[href], button:not([disabled])');
+					const firstFocusable = Array.prototype.find.call(buttons, isVisible);
+					if (firstFocusable) firstFocusable.focus();
+				}
+			}
+
+			dispatch(el, 'ln-modal:open', { modalId: el.id, target: el });
+		} else {
+			const before = dispatchCancelable(el, 'ln-modal:before-close', { modalId: el.id, target: el });
+			if (before.defaultPrevented) {
+				el.setAttribute(DOM_SELECTOR, 'open');
+				return;
+			}
+			instance.isOpen = false;
+			el.removeAttribute('aria-modal');
+			document.removeEventListener('keydown', instance._onEscape);
+			document.removeEventListener('keydown', instance._onFocusTrap);
+			dispatch(el, 'ln-modal:close', { modalId: el.id, target: el });
+
+			if (instance._returnFocusEl
+				&& document.contains(instance._returnFocusEl)
+				&& typeof instance._returnFocusEl.focus === 'function') {
+				instance._returnFocusEl.focus();
+			}
+			instance._returnFocusEl = null;
+
+			if (!document.querySelector('[' + DOM_SELECTOR + '="open"]')) {
+				document.body.classList.remove('ln-modal-open');
+			}
+		}
+	}
+
+	// ─── Helpers ───────────────────────────────────────────────
+
+	function _attachCloseButtons(instance) {
+		const closeButtons = instance.dom.querySelectorAll('[data-ln-modal-close]');
+		for (const btn of closeButtons) {
+			if (btn[DOM_ATTRIBUTE + 'Close']) continue;
+			btn.addEventListener('click', instance._onClose);
+			btn[DOM_ATTRIBUTE + 'Close'] = instance._onClose;
+		}
+	}
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-modal', {
+		extraAttributes: ['data-ln-modal-for'],
+		onAttributeChange: _syncAttribute,
+		onInit: _attachTriggers
+	});
+})();

package/js/ln-nav/README.md

@@ -0,0 +1,70 @@
+# ln-nav
+
+Active link highlighter — automatically marks the active link in navigation based on the current URL.
+Works with `pushState` (ln-ajax) and `popstate` (browser back/forward).
+
+For internal mechanics — singleton `history.pushState` patch, per-instance MutationObserver, URL normalization — see [`docs/js/nav.md`](../../docs/js/nav.md).
+
+## Integration
+
+### In-Bundle (Standard Integration)
+To load `ln-nav` as part of the unified `ln-ashlar` bundle, include the main script:
+```html
+<script src="dist/ln-ashlar.iife.js" defer></script>
+```
+
+### Standalone (Zero-Dependency IIFE)
+If you only need the active link highlighter component, load the compiled zero-dependency IIFE directly:
+```html
+<script src="js/ln-nav/ln-nav.js" defer></script>
+```
+
+### Source Files & Development
+- **Active Development Source**: [js/ln-nav/src/ln-nav.js](file:///c:/laragon/www/ln-ashlar/js/ln-nav/src/ln-nav.js) — The source of truth for component logic.
+- **Compiled Standalone**: [js/ln-nav/ln-nav.js](file:///c:/laragon/www/ln-ashlar/js/ln-nav/ln-nav.js) — The compiled, ready-to-use standalone bundle.
+
+## Attributes
+
+| Attribute | On | Description |
+|-----------|-----|-------------|
+| `data-ln-nav="className"` | `<nav>` element | CSS class to apply to the active link (any class name) |
+
+## Behavior
+
+- Compares each `<a href>` inside the nav against `window.location.pathname`.
+- **Match rule**: exact match (`/users` == `/users`) OR parent-prefix match (`/users` matches `/users/42`). Root (`/`) is exact-only — it never matches as a parent. Trailing slashes are normalized (`/users/` == `/users`).
+- Re-runs on `popstate` (browser back/forward) and on `history.pushState` (ln-ajax navigation) automatically — no configuration.
+- New `<a>` elements added under the nav after init are scored immediately (per-instance MutationObserver).
+
+## HTML Structure
+
+```html
+<nav data-ln-nav="active">
+	<ul>
+		<li><a href="/dashboard">Dashboard</a></li>
+		<li><a href="/users">Users</a></li>
+		<li><a href="/settings">Settings</a></li>
+	</ul>
+</nav>
+```
+
+If the URL is `/users/42`, the `/users` link will get the `active` class.
+
+## CSS
+
+```scss
+nav a {
+	--color-fg: var(--fg-muted);
+	color: var(--color-fg);
+	&.active {
+		@include text-primary;
+		@include font-bold;
+		--color-bg: var(--bg-sunken);
+		background: var(--color-bg);
+	}
+}
+```
+
+## API
+
+`data-ln-nav` is the contract — setting the attribute on a connected `<nav>` is sufficient (the document-level MutationObserver picks it up). For custom roots that the observer does not watch (Shadow DOM, iframe), call `window.lnNav(rootElement)` to upgrade manually. Each `[data-ln-nav]` element exposes `element.lnNav.destroy()` for teardown.

package/js/ln-nav/ln-nav.js

@@ -0,0 +1 @@
+(function(){"use strict";function y(r,s){if(!document.body){document.addEventListener("DOMContentLoaded",function(){y(r,s)}),console.warn("["+s+'] Script loaded before <body> — add "defer" to your <script> tag');return}r()}const h={};function m(r,s){h[r]=s}function g(r){return h[r]||{ingress:s=>s,egress:s=>s}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=m,window.lnCore.getDataMapper=g),(function(){const r="data-ln-nav",s="lnNav";if(window[s]!==void 0)return;const w=new WeakMap,l=[];if(!history._lnNavPatched){const t=history.pushState;history.pushState=function(){t.apply(history,arguments);for(const o of l)o()},history._lnNavPatched=!0}function f(t){if(!t.hasAttribute(r)||w.has(t))return;const o=t.getAttribute(r);if(!o)return;const e=S(t,o);w.set(t,e),t[s]=e}function S(t,o){let e=Array.from(t.querySelectorAll("a"));p(e,o,window.location.pathname);const n=function(){e=Array.from(t.querySelectorAll("a")),p(e,o,window.location.pathname)};window.addEventListener("popstate",n),l.push(n);const a=new MutationObserver(function(d){for(const u of d)if(u.type==="childList"){for(const i of u.addedNodes)if(i.nodeType===1){if(i.tagName==="A")e.push(i),p([i],o,window.location.pathname);else if(i.querySelectorAll){const c=Array.from(i.querySelectorAll("a"));e=e.concat(c),p(c,o,window.location.pathname)}}for(const i of u.removedNodes)if(i.nodeType===1){if(i.tagName==="A")e=e.filter(function(c){return c!==i});else if(i.querySelectorAll){const c=Array.from(i.querySelectorAll("a"));e=e.filter(function(v){return!c.includes(v)})}}}});return a.observe(t,{childList:!0,subtree:!0}),{navElement:t,activeClass:o,observer:a,updateHandler:n,destroy:function(){a.disconnect(),window.removeEventListener("popstate",n);const d=l.indexOf(n);d!==-1&&l.splice(d,1),w.delete(t),delete t[s]}}}function b(t){try{return new URL(t,window.location.href).pathname.replace(/\/$/,"")||"/"}catch{return t.replace(/\/$/,"")||"/"}}function p(t,o,e){const n=b(e);for(const a of t){const d=a.getAttribute("href");if(!d)continue;const u=b(d);a.classList.remove(o);const i=u===n,c=u!=="/"&&n.startsWith(u+"/");(i||c)&&a.classList.add(o)}}function L(){y(function(){new MutationObserver(function(o){for(const e of o)if(e.type==="childList"){for(const n of e.addedNodes)if(n.nodeType===1&&(n.hasAttribute&&n.hasAttribute(r)&&f(n),n.querySelectorAll))for(const a of n.querySelectorAll("["+r+"]"))f(a)}else e.type==="attributes"&&e.target.hasAttribute&&e.target.hasAttribute(r)&&f(e.target)}).observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:[r]})},"ln-nav")}window[s]=f;function A(){for(const t of document.querySelectorAll("["+r+"]"))f(t)}L(),document.readyState==="loading"?document.addEventListener("DOMContentLoaded",A):A()})()})();