@livenetworks/ashlar 1.4.1 → 1.6.0

package/js/ln-modal/README.md

@@ -1,154 +1,185 @@
-# 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).
+# 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 **Three-Layer Architecture** and **Component Isolation**. 
+
+`ln-modal` is a **Layer 1 Simple Component**. It manages ONLY the overlay panel state and dialog accessibility. It is completely isolated and unaware of sibling components, form logic, or data-fetching pipelines.
+
+1. **State & Accessibility (JavaScript + native `<dialog>`)**: The `ln-modal` script manages the binary `open` / `close` attribute contract (`data-ln-modal="open|close"`) and suppresses `<body>` scrolling (toggling the `.ln-modal-open` class on `<body>`). Focus placement, native focus trapping, ESC dismissal, and focus restoration are delegated to the native `<dialog>` element via `showModal()`/`close()`.
+2. **The Content Root (HTML)**: The modal content root is structured in standard semantic HTML (such as `<dialog class="ln-modal" data-ln-modal>`).
+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 clean.
+4. **Layer Separation (Coordinators)**: `ln-modal` does NOT handle form submissions, auto-closing on AJAX success, validation error inspection, or DOM data population. Those responsibilities belong strictly to **Layer 2 Coordinators** (e.g. `ln-modal-coordinator` or `ln-data-coordinator`).
+
+---
+
+## 2. Minimal Blueprint
+
+Triggers and modals are paired by ID. The overlay has `class="ln-modal"` and `data-ln-modal`.
+
+```html
+<!-- Trigger button -->
+<button data-ln-modal-for="user-modal">Add User</button>
+
+<!-- Modal overlay -->
+<dialog 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-icon-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>
+</dialog>
+```
+
+### Key Anatomy Rules
+- **The Overlay (`data-ln-modal`)**: Driven by the value `"open"` (open) and `"close"` (closed).
+- **The Trigger (`data-ln-modal-for="id"`)**: Placed on buttons/links to request toggling modal display.
+- **The Dismiss button (`data-ln-modal-close`)**: Placed on cancel or close buttons to request close.
+- **Focus Override (`autofocus`)**: Place on any form field to override default focus placement on open.
+
+---
+
+## 3. Declarative API & State Contract
+
+There are no imperative JavaScript mutation methods on the component instance. **The HTML attribute is the sole source of truth.**
+
+Coordinators and external scripts request state changes by dispatching request events or writing the attribute on the modal element:
+
+```js
+const modal = document.getElementById('user-modal');
+
+// Request open via event
+modal.dispatchEvent(new CustomEvent('ln-modal:request-open', { bubbles: true }));
+
+// Or set attribute directly
+modal.setAttribute('data-ln-modal', 'open');
+
+// Request close via event
+modal.dispatchEvent(new CustomEvent('ln-modal:request-close', { bubbles: true }));
+
+// Read-only state query
+const isOpen = 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 & Command Events
+
+All events bubble (`bubbles: true`). The dispatch target is the overlay element. Every event's `detail` carries `{ modalId, target }`.
+
+| Event | Direction | Cancelable | Dispatched / Handled When |
+|---|:---:|:---:|---|
+| **`ln-modal:request-open`** | Listens | No | Command event sent by coordinators/triggers to open the modal. |
+| **`ln-modal:request-close`** | Listens | No | Command event sent by coordinators/triggers to close the modal. |
+| **`ln-modal:before-open`** | Emits | **Yes** | Dispatched before opening. Calling `event.preventDefault()` cancels the transition. |
+| **`ln-modal:open`** | Emits | No | Dispatched after modal is active, body scroll locked, and initial focus set. |
+| **`ln-modal:before-close`** | Emits | **Yes** | Dispatched before closing. Calling `event.preventDefault()` cancels the close transition. |
+| **`ln-modal:close`** | Emits | No | Dispatched after modal is closed, scroll locks released, and focus restored. |
+| **`ln-modal:destroyed`** | Emits | No | Dispatched when the component instance is destroyed. |
+
+```js
+// Example: Block close transition if form has unsaved changes
+const modal = document.getElementById('user-modal');
+modal.addEventListener('ln-modal:before-close', (e) => {
+    if (formIsDirty()) {
+        e.preventDefault(); // Cancels transition and reverts attribute 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. Hash Addressing & Deep-Linking
+
+Any modal with an `id` is hash-addressable (e.g. `#user-modal` or `#user-modal:42`).
+When an `id` modal opens, `ln-modal` emits `ln-modal:open` containing `{ hashNs, param }` in `e.detail`.
+
+Coordinators (such as `ln-modal-coordinator`) intercept hash changes and coordinate data fetching / form populating via `ln-fill`.
+
+---
+
+## 7. Related
+- **[`ln-confirm`](../ln-confirm/README.md)** — Two-click inline confirm actions (lightweight alternative for single-element actions).
+- **[`ln-form`](../ln-form/README.md)** — Form serialization and submission pipeline.
+- **[`ln-validate`](../ln-validate/README.md)** — Declarative field-level constraints and visual errors.
+
+---
+
+## 🔧 Internals
+
+Source: `js/ln-modal/src/ln-modal.js` (~137 lines, native `<dialog>`-backed). Trigger delegation (`data-ln-modal-for`), hash-addressing, and form-fill on open are NOT implemented here — they live in `js/ln-modal-coordinator/src/ln-modal-coordinator.js` (a Layer 2 coordinator per §1.4). This section covers `ln-modal.js` only.
+
+### Single source of truth
+
+`data-ln-modal` is the only state. `_syncAttribute(el)` (wired via `registerComponent`'s `onAttributeChange`) is the sole place open/close side effects happen — there is no imperative `open()`/`close()` method on the instance. Cancellation is attribute-revert: if `ln-modal:before-open`/`before-close` is prevented, the handler writes the attribute back to its prior value, which the same no-op guard (`shouldBeOpen === instance.isOpen`) swallows on the resulting mutation.
+
+### Open / close
+
+Open: cancelable `:before-open` → `instance.isOpen = true` → `body.ln-modal-open` class → `el.showModal()` (native `<dialog>` — top-layer stacking and backdrop are the platform's) → focus priority `[autofocus]` → first non-disabled input/select/textarea → first link/button, each filtered through `isVisible` → `:open`.
+
+Close: cancelable `:before-close` → `instance.isOpen = false` → `:close` → `el.close()` (native — restores focus to the pre-open `document.activeElement` automatically) → if no other `[data-ln-modal="open"]` remains, remove `body.ln-modal-open`.
+
+### ESC handling
+
+Not a custom keydown listener — the native `<dialog>` fires its own `cancel` event on ESC. `_onCancel` calls `preventDefault()` (so the dialog doesn't close ahead of the attribute-driven flow) and writes `data-ln-modal="close"`, routing ESC through the same single attribute path as every other close trigger.
+
+### Trigger/close wiring
+
+The instance listens for `ln-modal:request-open`/`request-close` on the modal element itself (writes the attribute) and a `click` listener on the modal for `[data-ln-modal-close]` descendants. `data-ln-modal-for` trigger buttons are resolved by the coordinator's document-level delegated click listener, which looks up the modal by id and dispatches the request event — this file never sees the trigger element.
+
+### Destroy
+
+Removes the four listeners (`request-open`, `request-close`, `cancel`, `click`), releases the body scroll-lock class if this was the last open modal, dispatches `:destroyed`, deletes the instance.

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

@@ -0,0 +1,13 @@
+@use '../../scss/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Modal Trigger Check: [data-ln-modal-for] cannot have an empty target ID
+	[data-ln-modal-for=""] {
+		@include dev-inline-error("data-ln-modal-for is missing a target modal id");
+	}
+
+	// 2. Non-dialog modal: data-ln-modal must be on a <dialog> element (native showModal/close)
+	[data-ln-modal]:not(dialog) {
+		@include dev-inline-error("data-ln-modal must be on a <dialog> element");
+	}
+}

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

@@ -1 +1 @@
-(function(){"use strict";function h(t,e,c){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:c||{}}))}function _(t,e,c){const m=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:c||{}});return t.dispatchEvent(m),m}function C(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){C(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function g(t,e,c,m){if(t.nodeType!==1)return;const b=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",n=Array.from(t.querySelectorAll(b));t.matches&&t.matches(b)&&n.push(t);for(const o of n)o[c]||(o[c]=new m(o))}function y(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}function T(t,e,c,m,p={}){const b=p.extraAttributes||[],n=p.onAttributeChange||null,o=p.onInit||null;function r(u){const i=u||document.body;g(i,t,e,c),o&&o(i)}return C(function(){const u=new MutationObserver(function(a){for(let s=0;s<a.length;s++){const d=a[s];if(d.type==="childList"){for(let f=0;f<d.addedNodes.length;f++){const l=d.addedNodes[f];l.nodeType===1&&(g(l,t,e,c),o&&o(l))}for(let f=0;f<d.removedNodes.length;f++){const l=d.removedNodes[f];if(l.nodeType===1){const O=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",A=Array.from(l.querySelectorAll(O));l.matches&&l.matches(O)&&A.push(l);for(let E=0;E<A.length;E++){const x=A[E];if(!document.contains(x)){const w=x[e];w&&typeof w.destroy=="function"&&w.destroy()}}}}}else d.type==="attributes"&&(n&&d.target[e]?n(d.target,d.attributeName):(g(d.target,t,e,c),o&&o(d.target)))}});let i=[];if(t.indexOf("[")!==-1){const a=/\[([\w-]+)/g;let s;for(;(s=a.exec(t))!==null;)i.push(s[1])}else i.push(t);u.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:i.concat(b)})},m),window[e]=r,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){r(document.body)}):r(document.body),r}const L={};function k(t,e){L[t]=e}function S(t){return L[t]||{ingress:e=>e,egress:e=>e}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=k,window.lnCore.getDataMapper=S),(function(){const t="data-ln-modal",e="lnModal";if(window[e]!==void 0)return;function c(n){const o=Array.from(n.querySelectorAll("[data-ln-modal-for]"));n.hasAttribute&&n.hasAttribute("data-ln-modal-for")&&o.push(n);for(const r of o){if(r[e+"Trigger"])continue;const u=function(i){if(i.ctrlKey||i.metaKey||i.button===1)return;i.preventDefault();const a=r.getAttribute("data-ln-modal-for"),s=document.getElementById(a);if(!s){console.warn('[ln-modal] No modal found for data-ln-modal-for="'+a+'"');return}if(!s[e])return;const d=s.getAttribute(t);s.setAttribute(t,d==="open"?"close":"open")};r.addEventListener("click",u),r[e+"Trigger"]=u}}function m(n){this.dom=n,this.isOpen=n.getAttribute(t)==="open";const o=this;return this._onEscape=function(r){r.key==="Escape"&&o.dom.setAttribute(t,"close")},this._onFocusTrap=function(r){if(r.key!=="Tab")return;const u=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(u.length===0)return;const i=u[0],a=u[u.length-1];r.shiftKey?document.activeElement===i&&(r.preventDefault(),a.focus()):document.activeElement===a&&(r.preventDefault(),i.focus())},this._onClose=function(r){r.preventDefault(),o.dom.setAttribute(t,"close")},b(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}m.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("["+t+'="open"]')||document.body.classList.remove("ln-modal-open"));const n=this.dom.querySelectorAll("[data-ln-modal-close]");for(const r of n)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 p(n){const o=n[e];if(!o)return;const u=n.getAttribute(t)==="open";if(u!==o.isOpen)if(u){if(_(n,"ln-modal:before-open",{modalId:n.id,target:n}).defaultPrevented){n.setAttribute(t,"close");return}o.isOpen=!0,n.setAttribute("aria-modal","true"),n.setAttribute("role","dialog"),document.body.classList.add("ln-modal-open"),document.addEventListener("keydown",o._onEscape),document.addEventListener("keydown",o._onFocusTrap);const a=document.activeElement;o._returnFocusEl=a&&a!==document.body?a:null;const s=n.querySelector("[autofocus]");if(s&&y(s))s.focus();else{const d=n.querySelectorAll('input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled])'),f=Array.prototype.find.call(d,y);if(f)f.focus();else{const l=n.querySelectorAll("a[href], button:not([disabled])"),v=Array.prototype.find.call(l,y);v&&v.focus()}}h(n,"ln-modal:open",{modalId:n.id,target:n})}else{if(_(n,"ln-modal:before-close",{modalId:n.id,target:n}).defaultPrevented){n.setAttribute(t,"open");return}o.isOpen=!1,n.removeAttribute("aria-modal"),document.removeEventListener("keydown",o._onEscape),document.removeEventListener("keydown",o._onFocusTrap),h(n,"ln-modal:close",{modalId:n.id,target:n}),o._returnFocusEl&&document.contains(o._returnFocusEl)&&typeof o._returnFocusEl.focus=="function"&&o._returnFocusEl.focus(),o._returnFocusEl=null,document.querySelector("["+t+'="open"]')||document.body.classList.remove("ln-modal-open")}}function b(n){const o=n.dom.querySelectorAll("[data-ln-modal-close]");for(const r of o)r[e+"Close"]||(r.addEventListener("click",n._onClose),r[e+"Close"]=n._onClose)}T(t,e,m,"ln-modal",{extraAttributes:["data-ln-modal-for"],onAttributeChange:p,onInit:c})})()})();
+(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 I(t,e){b[t]||(b[t]=document.querySelector('[data-ln-template="'+t+'"]'));const i=b[t];return i?i.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function y(t,e,i){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:i||{}}))}function O(t,e,i){const c=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:i||{}});return t.dispatchEvent(c),c}function x(t,e){if(!t||!e)return t;const i=t.querySelectorAll("[data-ln-field]");for(let o=0;o<i.length;o++){const s=i[o],r=s.getAttribute("data-ln-field");e[r]!=null&&(s.textContent=e[r])}const c=t.querySelectorAll("[data-ln-attr]");for(let o=0;o<c.length;o++){const s=c[o],r=s.getAttribute("data-ln-attr").split(",");for(let d=0;d<r.length;d++){const a=r[d].trim().split(":");if(a.length!==2)continue;const u=a[0].trim(),f=a[1].trim();e[f]!=null&&s.setAttribute(u,e[f])}}const n=t.querySelectorAll("[data-ln-show]");for(let o=0;o<n.length;o++){const s=n[o],r=s.getAttribute("data-ln-show");r in e&&s.classList.toggle("hidden",!e[r])}const l=t.querySelectorAll("[data-ln-class]");for(let o=0;o<l.length;o++){const s=l[o],r=s.getAttribute("data-ln-class").split(",");for(let d=0;d<r.length;d++){const a=r[d].trim().split(":");if(a.length!==2)continue;const u=a[0].trim(),f=a[1].trim();f in e&&s.classList.toggle(u,!!e[f])}}return t}function R(t,e){t.matches&&t.matches("[data-ln-form], [data-ln-fillable]")&&t.dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));const i=t.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let c=0;c<i.length;c++)i[c].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)x(t.target,t.detail);else{const e=t.target.querySelectorAll("[data-ln-field]");for(let i=0;i<e.length;i++)e[i].textContent=""}})));function q(t,e){if(!t||!e)return t;const i=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;i.nextNode();){const l=i.currentNode;l.textContent.indexOf("{{")!==-1&&(l.textContent=l.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(o,s){return e[s]!==void 0?e[s]:""}))}const c=function(l,o){return e[o]!==void 0?e[o]:""},n=Array.from(t.querySelectorAll("*"));t.nodeType===1&&n.push(t);for(let l=0;l<n.length;l++){const o=n[l],s=o.attributes;for(let r=0;r<s.length;r++){const d=s[r];d.value.indexOf("{{")!==-1&&o.setAttribute(d.name,d.value.replace(/\{\{\s*(\w+)\s*\}\}/g,c))}}return t}function N(t,e,i,c,n,l){const o={};for(let r=0;r<t.children.length;r++){const d=t.children[r],a=d.getAttribute("data-ln-key");a&&(o[a]=d)}const s=document.createDocumentFragment();for(let r=0;r<e.length;r++){const d=e[r],a=String(c(d));let u=o[a];if(u)n(u,d,r);else{const f=I(i,l);if(!f||(q(f,d),u=f.firstElementChild,!u))continue;u.setAttribute("data-ln-key",a),n(u,d,r)}s.appendChild(u)}t.textContent="",t.appendChild(s)}function E(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){E(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function w(t,e,i,c){if(t.nodeType!==1)return;const l=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",o=Array.from(t.querySelectorAll(l));t.matches&&t.matches(l)&&o.push(t);for(const s of o)s[i]||(s[i]=new c(s))}function g(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}function j(t,e,i,c,n={}){const l=n.extraAttributes||[],o=n.onAttributeChange||null,s=n.onInit||null;function r(d){const a=d||document.body;w(a,t,e,i),s&&s(a)}return E(function(){const d=new MutationObserver(function(u){for(let f=0;f<u.length;f++){const h=u[f];if(h.type==="childList"){for(let m=0;m<h.addedNodes.length;m++){const p=h.addedNodes[m];p.nodeType===1&&(w(p,t,e,i),s&&s(p))}for(let m=0;m<h.removedNodes.length;m++){const p=h.removedNodes[m];if(p.nodeType===1){const T=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",A=Array.from(p.querySelectorAll(T));p.matches&&p.matches(T)&&A.push(p);for(let v=0;v<A.length;v++){const D=A[v];if(!document.contains(D)){const L=D[e];L&&typeof L.destroy=="function"&&L.destroy()}}}}}else h.type==="attributes"&&(o&&h.target[e]?o(h.target,h.attributeName):(w(h.target,t,e,i),s&&s(h.target)))}});let a=[];if(t.indexOf("[")!==-1){const u=/\[([\w-]+)/g;let f;for(;(f=u.exec(t))!==null;)a.push(f[1])}else a.push(t);d.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:a.concat(l)})},c),window[e]=r,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){r(document.body)}):r(document.body),r}const _={};function F(t,e){_[t]=e}function W(t){return _[t]||{ingress:e=>e,egress:e=>e}}const S={};function k(t,e){if(!t||typeof e!="object")return;const i=t.toLowerCase().split("-")[0];S[i]=e}function B(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return S[e]||null}k("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=F,window.lnCore.getDataMapper=W,window.lnCore.registerLocaleFallback=k,window.lnCore.getLocaleFallback=B,window.lnCore.fillTemplate=q,window.lnCore.fill=x,window.lnCore.lnFill=R,window.lnCore.renderList=N);function M(t){return(t||"").replace(/^#/,"")}function C(t){const e=t===void 0?location.hash:t,i={},c=M(e);if(!c)return i;const n=c.split("&");for(let l=0;l<n.length;l++){const o=n[l];if(!o)continue;const s=o.indexOf(":"),r=s>-1?o.slice(0,s):o,d=s>-1?o.slice(s+1):"";if(r)try{i[r]=decodeURIComponent(d)}catch{i[r]=d}}return i}function K(t){if(!t)return null;const e=C();return t in e?e[t]:null}function P(t,e){if(!t)return;const i=C();e==null?delete i[t]:i[t]=String(e);const n=Object.keys(i).map(function(l){const o=i[l];return o===""?l:l+":"+encodeURIComponent(o)}).join("&");M(location.hash)!==n&&(location.hash=n)}function U(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=K,window.lnCore.hashSet=P,window.lnCore.hashLinkClick=U),(function(){const t="data-ln-modal",e="lnModal";if(window[e]!==void 0)return;function i(n){this.dom=n,this.isOpen=n.getAttribute(t)==="open";const l=this;return this._onRequestOpen=function(){l.dom.setAttribute(t,"open")},this._onRequestClose=function(){l.dom.setAttribute(t,"close")},this._onCancel=function(o){o.preventDefault(),l.dom.setAttribute(t,"close")},this._onClickClose=function(o){const s=o.target.closest("[data-ln-modal-close]");s&&l.dom.contains(s)&&(o.preventDefault(),l.dom.setAttribute(t,"close"))},this.dom.addEventListener("ln-modal:request-open",this._onRequestOpen),this.dom.addEventListener("ln-modal:request-close",this._onRequestClose),this.dom.addEventListener("cancel",this._onCancel),this.dom.addEventListener("click",this._onClickClose),this.isOpen&&(typeof this.dom.showModal=="function"&&this.dom.showModal(),document.body.classList.add("ln-modal-open")),this}i.prototype.destroy=function(){if(this.dom[e]){if(this.dom.removeEventListener("ln-modal:request-open",this._onRequestOpen),this.dom.removeEventListener("ln-modal:request-close",this._onRequestClose),this.dom.removeEventListener("cancel",this._onCancel),this.dom.removeEventListener("click",this._onClickClose),this.isOpen){const n=this.dom;Array.prototype.some.call(document.querySelectorAll("["+t+'="open"]'),function(o){return o!==n})||document.body.classList.remove("ln-modal-open")}y(this.dom,"ln-modal:destroyed",{modalId:this.dom.id,target:this.dom}),delete this.dom[e]}};function c(n){const l=n[e];if(!l)return;const s=n.getAttribute(t)==="open";if(s!==l.isOpen)if(s){if(O(n,"ln-modal:before-open",{modalId:n.id,target:n}).defaultPrevented){n.setAttribute(t,"close");return}l.isOpen=!0,document.body.classList.add("ln-modal-open"),typeof n.showModal=="function"&&n.showModal();const d=n.querySelector("[autofocus]");if(d&&g(d))d.focus();else{const a=n.querySelectorAll('input:not([disabled]):not([type="hidden"]), textarea:not([disabled]), select:not([disabled])'),u=Array.prototype.find.call(a,g);if(u)u.focus();else{const f=n.querySelectorAll("a[href], button:not([disabled])"),h=Array.prototype.find.call(f,g);h&&h.focus()}}y(n,"ln-modal:open",{modalId:n.id,target:n})}else{if(O(n,"ln-modal:before-close",{modalId:n.id,target:n}).defaultPrevented){n.setAttribute(t,"open");return}l.isOpen=!1,y(n,"ln-modal:close",{modalId:n.id,target:n}),typeof n.close=="function"&&n.close(),document.querySelector("["+t+'="open"]')||document.body.classList.remove("ln-modal-open")}}j(t,e,i,"ln-modal",{onAttributeChange:c})})()})();

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

@@ -1,11 +1,35 @@
 // ── JS state: modal open/close ──
-// data-ln-modal attribute drives visibility. JS sets "open"/"close".
-[data-ln-modal="open"] {
-	display: flex;
-	opacity: 1;
+// data-ln-modal attribute drives visibility. JS calls native showModal()/close();
+// this attribute is the CSS surface — reset native <dialog> UA styles and drive
+// the flex-centering layout on top.
+[data-ln-modal] {
+	background: transparent;
+	border: none;
+	padding: 0;
+	margin: 0;
+	width: 100%;
+	height: 100%;
+	max-width: none;
+	max-height: none;
+	color: inherit;
+	overflow: visible;
+
+	&[data-ln-modal="open"] {
+		display: flex;
+	}
 }
 
 // Prevent body scroll when modal is open
 body.ln-modal-open {
 	overflow: hidden;
 }
+
+// Mode-conditional title variants: shown only when ancestor modal matches the mode
+[data-ln-modal-when] {
+	display: none;
+}
+
+[data-ln-modal-mode="new"] [data-ln-modal-when="new"],
+[data-ln-modal-mode="edit"] [data-ln-modal-when="edit"] {
+	display: inline;
+}