@livenetworks/ashlar 1.4.1 → 1.6.0

package/js/ln-search/README.md

@@ -1,83 +1,158 @@
-# ln-search
-
-A zero-dependency, event-driven **Debounced Search Primitive** that intercepts text input, debounces keystrokes, and coordinates list-filtering states.
-
-It acts as an intent announcer. It does not own data filtering directly; instead, it announces a normalized search query on the target element via a cancelable event, allowing tables, lists, or custom server integrations to intercept and handle the query or fall back to a built-in DOM-walking filter.
-
----
-
-## 🧭 Philosophy & Architecture
-
-1. **Decoupled Search Intent:** The component does not manipulate collections directly. It debounces keystrokes (150ms trailing-edge) and dispatches a cancelable `ln-search:change` custom event on the **target** element (not the input).
-2. **The Default DOM-Walk Fallback:** If no listener calls `e.preventDefault()`, the component automatically runs a fast DOM-walk on the target's children, applying `data-ln-search-hide="true"` to non-matching elements.
-3. **Reactive Form-Restore Hook:** During page reloads or back-button navigation, browsers auto-fill input fields before scripts initialize. `ln-search` detects this pre-filled state at construction and schedules an initial search dispatch via `queueMicrotask` to ensure all listener components have fully initialized first.
-
----
-
-## 📦 Minimal Blueprint
-
-### Standard List Filtering (Zero-JS Fallback)
-Bind the search input to a list `id` via `data-ln-search`.
-```html
-<input type="search" placeholder="Search..." data-ln-search="countries-list">
-
-<ul id="countries-list">
-  <li>Argentina</li>
-  <li>Brazil</li>
-  <li>Canada</li>
-</ul>
-```
-
-### Premium Icon Wrapper with Clear Button
-When placed on a wrapper container, the component automatically resolves the nested input.
-```html
-<label data-ln-search="countries-list">
-  <svg class="ln-icon ln-icon--sm" aria-hidden="true"><use href="#ln-search"></use></svg>
-  <input type="search" placeholder="Search countries...">
-  <button type="button" data-ln-search-clear aria-label="Clear search">
-    <svg class="ln-icon ln-icon--sm" aria-hidden="true"><use href="#ln-x"></use></svg>
-  </button>
-</label>
-```
-
----
-
-## 🛠️ Declarative API Contract
-
-### HTML Attributes
-
-| Attribute | Elements | Description |
-| :--- | :--- | :--- |
-| `data-ln-search` | `<input>`, `<label>` | Component root and namespace. Value is the `id` of the target to filter. |
-| `data-ln-search-items` | Same as root | Opt-in. Deep CSS selector (e.g. `tbody tr`) to query deep matching elements instead of direct children. |
-| `data-ln-search-clear` | `<button>` | Identifies the clear button. Click clears input and triggers synchronous search reset. |
-| `data-ln-search-hide` | Children of target | *State*. Automatically toggled on non-matching elements (`display: none !important`). |
-
-### JavaScript API (`el.lnSearch`)
-
-| Member | Type | Description |
-| :--- | :--- | :--- |
-| `targetId` | `string` | The ID of the target element. |
-| `input` | `HTMLInputElement` | The resolved input element driving the search. |
-| `destroy()` | `() => void` | Removes listeners, cancels debounces, and tears down the instance. |
-
----
-
-## ⚡ DOM Events
-
-### `ln-search:change`
-Dispatched on the **target** element whenever the search term changes.
-- **Cancelable**: Yes. Calling `e.preventDefault()` disables the default DOM-walk.
-- **Payload (`detail`)**: `{ term: string, targetId: string }` (where `term` is lowercased and trimmed).
-
----
-
-## ⚠️ Common Pitfalls
-
-- **Confusing with `ln-data-table` Search:** `ln-data-table` manages its own internal search input via `data-ln-data-table-search` to join sorting and pagination into unified API request arrays. Do not place `ln-search` in front of `ln-data-table`.
-- **Bypassing Debounce via Native Input Listeners:** Listening to native `input` events directly will bypass the 150ms debounce and execute expensive logic on every single keystroke. Always listen to `ln-search:change`.
-- **Programmatic Value Mutations:** Assigning `input.value = "text"` programmatically does not trigger search. You must manually dispatch an `input` event:
-  ```javascript
-  input.value = 'Argentina';
-  input.dispatchEvent(new Event('input', { bubbles: true }));
-  ```
+# ln-search
+
+A zero-dependency, event-driven **Debounced Search Primitive** that intercepts text input, debounces keystrokes, and coordinates list-filtering states.
+
+It acts as an intent announcer. It does not own data filtering directly; instead, it announces a normalized search query on the target element via a cancelable event, allowing tables, lists, or custom server integrations to intercept and handle the query or fall back to a built-in DOM-walking filter.
+
+---
+
+## ✅ Canonical Markup — Copy This (REQUIRED)
+
+**Hard rule — non-negotiable.** Every search or filter text input MUST use the
+full `.search` chrome below: the leading magnifier icon **and** the clear
+("x") button. This applies everywhere — toolbars, table headers, **and
+popovers/dropdowns**. The previously-accepted "lightweight" bare
+`<input data-ln-search>` (no icon, no clear button) is **no longer acceptable
+for authoring**.
+
+Copy this block. Change only the `placeholder`, the
+`data-ln-search="<targetId>"`, and the `aria-label`. If a field needs a
+page-specific tweak, add one extra class beside `search`
+(`class="search my-extra"`) — never alter the structure, the icons, or the
+clear button.
+
+```html
+<label class="search">
+	<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-search"></use></svg>
+	<input type="search" placeholder="Search …" data-ln-search="<targetId>">
+	<button type="button" data-ln-search-clear aria-label="Clear search">
+		<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-x"></use></svg>
+	</button>
+</label>
+```
+
+For deep targeting (e.g. checkbox lists inside a popover) add
+`data-ln-search-items="<selector>"` to the **same `<input>`** — the chrome is
+identical:
+
+```html
+<input type="search" placeholder="Search …" data-ln-search="<targetId>" data-ln-search-items="label">
+```
+
+---
+
+## 🧭 Philosophy & Architecture
+
+1. **Decoupled Search Intent:** The component does not manipulate collections directly. It debounces keystrokes (150ms trailing-edge) and dispatches a cancelable `ln-search:change` custom event on the **target** element (not the input).
+2. **The Default DOM-Walk Fallback:** If no listener calls `e.preventDefault()`, the component automatically runs a fast DOM-walk on the target's children, applying `data-ln-search-hide="true"` to non-matching elements.
+3. **Reactive Form-Restore Hook:** During page reloads or back-button navigation, browsers auto-fill input fields before scripts initialize. `ln-search` detects this pre-filled state at construction and schedules an initial search dispatch via `queueMicrotask` to ensure all listener components have fully initialized first.
+
+---
+
+## 📦 Minimal Blueprint
+
+### Standard List Filtering (Zero-JS Fallback)
+Bind the search input to a list `id` via `data-ln-search`.
+
+> ⚠️ **Not an authoring pattern.** The component still *accepts* a bare input
+> (backward-compat / JS-internal fallback), but you must always author the full
+> `.search` chrome shown in [Canonical Markup](#-canonical-markup--copy-this-required).
+
+```html
+<input type="search" placeholder="Search..." data-ln-search="countries-list">
+
+<ul id="countries-list">
+  <li>Argentina</li>
+  <li>Brazil</li>
+  <li>Canada</li>
+</ul>
+```
+
+### Premium Icon Wrapper with Clear Button
+The canonical input-host form places `data-ln-search` directly on the `<input>`
+and uses `class="search"` for the compact icon-group chrome (leading magnifier,
+recessed fill, clear button):
+```html
+<label class="search">
+	<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-search"></use></svg>
+	<input type="search" placeholder="Search countries..." data-ln-search="countries-list">
+	<button type="button" data-ln-search-clear aria-label="Clear search">
+		<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-x"></use></svg>
+	</button>
+</label>
+```
+`class="search"` binds `@include search` (library `scss/components/_form.scss`).
+Wrapper-host (`data-ln-search` on the `<label>`) is retained only so existing
+markup keeps working — input-host is **required** for all new code.
+
+---
+
+## 🛠️ Declarative API Contract
+
+### HTML Attributes
+
+| Attribute | Elements | Description |
+| :--- | :--- | :--- |
+| `data-ln-search` | `<input>` (canonical); `<label>`/wrapper (backward-compat) | Component root and namespace. Value is the `id` of the target to filter. |
+| `data-ln-search-items` | Same as root | Opt-in. Deep CSS selector (e.g. `tbody tr`) to query deep matching elements instead of direct children. |
+| `data-ln-search-clear` | `<button>` | Identifies the clear button. Click clears input and triggers synchronous search reset. |
+| `data-ln-search-hide` | Children of target | *State*. Automatically toggled on non-matching elements (`display: none !important`). |
+
+### JavaScript API (`el.lnSearch`)
+
+| Member | Type | Description |
+| :--- | :--- | :--- |
+| `targetId` | `string` | The ID of the target element. |
+| `input` | `HTMLInputElement` | The resolved input element driving the search. |
+| `destroy()` | `() => void` | Removes listeners, cancels debounces, and tears down the instance. |
+
+---
+
+## ⚡ DOM Events
+
+### `ln-search:change`
+Dispatched on the **target** element whenever the search term changes.
+- **Cancelable**: Yes. Calling `e.preventDefault()` disables the default DOM-walk.
+- **Payload (`detail`)**: `{ term: string, targetId: string }` (where `term` is lowercased and trimmed).
+
+---
+
+## ⚠️ Common Pitfalls
+
+- **Driving an `ln-table` search box:** placing `data-ln-search="<tableId>"` on the search input (or its label wrapper) is the sole supported pattern, but the consumer differs by mode. **SSR mode** consumes `ln-search:change` directly on the table. **Data-driven mode** requires the table to be wrapped in `[data-ln-table-coordinator]`, which receives `ln-search:change` and translates it into `ln-table:set-search`, joined with sort and column filters into the `ln-table:request-data` payload. Note: `data-ln-table-search` has been removed — use `data-ln-search="<tableId>"` instead.
+- **Bypassing Debounce via Native Input Listeners:** Listening to native `input` events directly will bypass the 150ms debounce and execute expensive logic on every single keystroke. Always listen to `ln-search:change`.
+- **Programmatic Value Mutations:** Assigning `input.value = "text"` programmatically does not trigger search. You must manually dispatch an `input` event:
+  ```javascript
+  input.value = 'Argentina';
+  input.dispatchEvent(new Event('input', { bubbles: true }));
+  ```
+
+---
+
+## 🔧 Internals
+
+Source: `js/ln-search/ln-search.js` (114 lines). One instance per `[data-ln-search]`, stored at `element.lnSearch`. `targetId` is captured once at construction; `document.getElementById(targetId)` is re-resolved on every search — cheaper than caching a node across AJAX re-renders.
+
+### Debounce shape
+
+Trailing-edge, 150ms, cancel-and-reschedule per keystroke — no leading-edge fire (would flicker partial filtering mid-type). The clear button bypasses the debounce entirely, calling `_search('')` synchronously.
+
+### Dispatch flow
+
+`_search` resolves the target, dispatches cancelable `ln-search:change` on it (not on the input — so consumers listen on the thing they care about), and only runs the default DOM-walk if `!evt.defaultPrevented`. There is no separate `:before-change` event — the cancelable shape of `:change` IS the before-hook.
+
+### Form-restore detection
+
+If the input already has a value at construction (browser autofill / back-button restore), the initial search is scheduled via `queueMicrotask` rather than fired synchronously — other components (`ln-table`) may not have attached their `ln-search:change` listener yet during the same `DOMContentLoaded` burst; the microtask waits for the current task to drain first.
+
+### Clear-button resolution
+
+Scope for locating `[data-ln-search-clear]` is `input.parentElement` when `data-ln-search` sits on the input (canonical), or `dom` itself in the legacy wrapper-host form. Null-guarded — a missing button just means no clear wiring.
+
+### Cross-component coordination
+
+No imports of other components. In SSR mode, `ln-table` consumes `ln-search:change` via `preventDefault()` and runs its own in-memory filter; in data-driven mode, `ln-table-coordinator` consumes it instead and translates it into `ln-table:set-search`. `ln-filter` runs independently on the same target through a parallel `data-ln-search-hide` / `data-ln-filter-hide` pair — CSS unions both, neither component is aware of the other.
+
+### Destroy
+
+Cancels the pending debounce timer, removes both listeners, removes the init marker. Does NOT walk the target to clear `data-ln-search-hide` — that is a rendering side effect, not the search component's own state.

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

@@ -0,0 +1,8 @@
+@use '../../scss/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Search Trigger Check: data-ln-search must target a component ID and cannot be empty
+	[data-ln-search=""] {
+		@include dev-inline-error("data-ln-search target is empty");
+	}
+}

package/js/ln-search/ln-search.js

@@ -1 +1 @@
-(function(){"use strict";function T(t,e,r){const u=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:r||{}});return t.dispatchEvent(u),u}function v(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){v(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function y(t,e,r,u){if(t.nodeType!==1)return;const c=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",n=Array.from(t.querySelectorAll(c));t.matches&&t.matches(c)&&n.push(t);for(const i of n)i[r]||(i[r]=new u(i))}function E(t,e,r,u,m={}){const c=m.extraAttributes||[],n=m.onAttributeChange||null,i=m.onInit||null;function d(f){const s=f||document.body;y(s,t,e,r),i&&i(s)}return v(function(){const f=new MutationObserver(function(l){for(let p=0;p<l.length;p++){const o=l[p];if(o.type==="childList"){for(let h=0;h<o.addedNodes.length;h++){const a=o.addedNodes[h];a.nodeType===1&&(y(a,t,e,r),i&&i(a))}for(let h=0;h<o.removedNodes.length;h++){const a=o.removedNodes[h];if(a.nodeType===1){const w=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",g=Array.from(a.querySelectorAll(w));a.matches&&a.matches(w)&&g.push(a);for(let b=0;b<g.length;b++){const A=g[b];if(!document.contains(A)){const _=A[e];_&&typeof _.destroy=="function"&&_.destroy()}}}}}else o.type==="attributes"&&(n&&o.target[e]?n(o.target,o.attributeName):(y(o.target,t,e,r),i&&i(o.target)))}});let s=[];if(t.indexOf("[")!==-1){const l=/\[([\w-]+)/g;let p;for(;(p=l.exec(t))!==null;)s.push(p[1])}else s.push(t);f.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:s.concat(c)})},u),window[e]=d,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){d(document.body)}):d(document.body),d}const C={};function x(t,e){C[t]=e}function I(t){return C[t]||{ingress:e=>e,egress:e=>e}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=x,window.lnCore.getDataMapper=I),(function(){const t="data-ln-search",e="lnSearch",r="data-ln-search-initialized",u="data-ln-search-hide";if(window[e]!==void 0)return;function c(n){if(n.hasAttribute(r))return this;this.dom=n,this.targetId=n.getAttribute(t);const i=n.tagName;if(this.input=i==="INPUT"||i==="TEXTAREA"?n:n.querySelector('[name="search"]')||n.querySelector('input[type="search"]')||n.querySelector('input[type="text"]'),this.itemsSelector=n.getAttribute("data-ln-search-items")||null,this._debounceTimer=null,this._attachHandler(),this.input&&this.input.value.trim()){const d=this;queueMicrotask(function(){d._search(d.input.value.trim().toLowerCase())})}return n.setAttribute(r,""),this}c.prototype._attachHandler=function(){if(!this.input)return;const n=this;this._clearBtn=this.dom.querySelector("[data-ln-search-clear]"),this._clearBtn&&(this._onClear=function(){n.input.value="",n._search(""),n.input.focus()},this._clearBtn.addEventListener("click",this._onClear)),this._onInput=function(){clearTimeout(n._debounceTimer),n._debounceTimer=setTimeout(function(){n._search(n.input.value.trim().toLowerCase())},150)},this.input.addEventListener("input",this._onInput)},c.prototype._search=function(n){const i=document.getElementById(this.targetId);if(!i||T(i,"ln-search:change",{term:n,targetId:this.targetId}).defaultPrevented)return;const f=this.itemsSelector?i.querySelectorAll(this.itemsSelector):i.children;for(let s=0;s<f.length;s++){const l=f[s];l.removeAttribute(u),n&&!l.textContent.replace(/\s+/g," ").toLowerCase().includes(n)&&l.setAttribute(u,"true")}},c.prototype.destroy=function(){this.dom[e]&&(clearTimeout(this._debounceTimer),this.input&&this._onInput&&this.input.removeEventListener("input",this._onInput),this._clearBtn&&this._onClear&&this._clearBtn.removeEventListener("click",this._onClear),this.dom.removeAttribute(r),delete this.dom[e])},E(t,e,c,"ln-search")})()})();
+(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 g={};function q(t,e){g[t]||(g[t]=document.querySelector('[data-ln-template="'+t+'"]'));const o=g[t];return o?o.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function I(t,e,o){const a=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:o||{}});return t.dispatchEvent(a),a}function A(t,e){if(!t||!e)return t;const o=t.querySelectorAll("[data-ln-field]");for(let n=0;n<o.length;n++){const r=o[n],l=r.getAttribute("data-ln-field");e[l]!=null&&(r.textContent=e[l])}const a=t.querySelectorAll("[data-ln-attr]");for(let n=0;n<a.length;n++){const r=a[n],l=r.getAttribute("data-ln-attr").split(",");for(let s=0;s<l.length;s++){const u=l[s].trim().split(":");if(u.length!==2)continue;const d=u[0].trim(),f=u[1].trim();e[f]!=null&&r.setAttribute(d,e[f])}}const c=t.querySelectorAll("[data-ln-show]");for(let n=0;n<c.length;n++){const r=c[n],l=r.getAttribute("data-ln-show");l in e&&r.classList.toggle("hidden",!e[l])}const i=t.querySelectorAll("[data-ln-class]");for(let n=0;n<i.length;n++){const r=i[n],l=r.getAttribute("data-ln-class").split(",");for(let s=0;s<l.length;s++){const u=l[s].trim().split(":");if(u.length!==2)continue;const d=u[0].trim(),f=u[1].trim();f in e&&r.classList.toggle(d,!!e[f])}}return t}function D(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 a=0;a<o.length;a++)o[a].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)A(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 v(t,e){if(!t||!e)return t;const o=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;o.nextNode();){const i=o.currentNode;i.textContent.indexOf("{{")!==-1&&(i.textContent=i.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(n,r){return e[r]!==void 0?e[r]:""}))}const a=function(i,n){return e[n]!==void 0?e[n]:""},c=Array.from(t.querySelectorAll("*"));t.nodeType===1&&c.push(t);for(let i=0;i<c.length;i++){const n=c[i],r=n.attributes;for(let l=0;l<r.length;l++){const s=r[l];s.value.indexOf("{{")!==-1&&n.setAttribute(s.name,s.value.replace(/\{\{\s*(\w+)\s*\}\}/g,a))}}return t}function N(t,e,o,a,c,i){const n={};for(let l=0;l<t.children.length;l++){const s=t.children[l],u=s.getAttribute("data-ln-key");u&&(n[u]=s)}const r=document.createDocumentFragment();for(let l=0;l<e.length;l++){const s=e[l],u=String(a(s));let d=n[u];if(d)c(d,s,l);else{const f=q(o,i);if(!f||(v(f,s),d=f.firstElementChild,!d))continue;d.setAttribute("data-ln-key",u),c(d,s,l)}r.appendChild(d)}t.textContent="",t.appendChild(r)}function S(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){S(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function w(t,e,o,a){if(t.nodeType!==1)return;const i=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",n=Array.from(t.querySelectorAll(i));t.matches&&t.matches(i)&&n.push(t);for(const r of n)r[o]||(r[o]=new a(r))}function B(t,e,o,a,c={}){const i=c.extraAttributes||[],n=c.onAttributeChange||null,r=c.onInit||null;function l(s){const u=s||document.body;w(u,t,e,o),r&&r(u)}return S(function(){const s=new MutationObserver(function(d){for(let f=0;f<d.length;f++){const h=d[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,o),r&&r(p))}for(let m=0;m<h.removedNodes.length;m++){const p=h.removedNodes[m];if(p.nodeType===1){const O=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",y=Array.from(p.querySelectorAll(O));p.matches&&p.matches(O)&&y.push(p);for(let C=0;C<y.length;C++){const k=y[C];if(!document.contains(k)){const _=k[e];_&&typeof _.destroy=="function"&&_.destroy()}}}}}else h.type==="attributes"&&(n&&h.target[e]?n(h.target,h.attributeName):(w(h.target,t,e,o),r&&r(h.target)))}});let u=[];if(t.indexOf("[")!==-1){const d=/\[([\w-]+)/g;let f;for(;(f=d.exec(t))!==null;)u.push(f[1])}else u.push(t);s.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:u.concat(i)})},a),window[e]=l,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){l(document.body)}):l(document.body),l}const E={};function M(t,e){E[t]=e}function j(t){return E[t]||{ingress:e=>e,egress:e=>e}}const L={};function T(t,e){if(!t||typeof e!="object")return;const o=t.toLowerCase().split("-")[0];L[o]=e}function U(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return L[e]||null}T("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=M,window.lnCore.getDataMapper=j,window.lnCore.registerLocaleFallback=T,window.lnCore.getLocaleFallback=U,window.lnCore.fillTemplate=v,window.lnCore.fill=A,window.lnCore.lnFill=D,window.lnCore.renderList=N);function x(t){return(t||"").replace(/^#/,"")}function b(t){const e=t===void 0?location.hash:t,o={},a=x(e);if(!a)return o;const c=a.split("&");for(let i=0;i<c.length;i++){const n=c[i];if(!n)continue;const r=n.indexOf(":"),l=r>-1?n.slice(0,r):n,s=r>-1?n.slice(r+1):"";if(l)try{o[l]=decodeURIComponent(s)}catch{o[l]=s}}return o}function W(t){if(!t)return null;const e=b();return t in e?e[t]:null}function F(t,e){if(!t)return;const o=b();e==null?delete o[t]:o[t]=String(e);const c=Object.keys(o).map(function(i){const n=o[i];return n===""?i:i+":"+encodeURIComponent(n)}).join("&");x(location.hash)!==c&&(location.hash=c)}function R(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=b,window.lnCore.hashGet=W,window.lnCore.hashSet=F,window.lnCore.hashLinkClick=R),(function(){const t="data-ln-search",e="lnSearch",o="data-ln-search-hide";if(window[e]!==void 0)return;function c(i){this.dom=i,this.targetId=i.getAttribute(t);const n=i.tagName;this.input=n==="INPUT"||n==="TEXTAREA"?i:i.querySelector('[name="search"]')||i.querySelector('input[type="search"]')||i.querySelector('input[type="text"]'),this.itemsSelector=i.getAttribute("data-ln-search-items")||null;const r=i.getAttribute("data-ln-search-debounce");if(this.debounceTime=r!==null?parseInt(r,10):500,isNaN(this.debounceTime)&&(this.debounceTime=500),this._debounceTimer=null,this._attachHandler(),this.input&&this.input.value.trim()){const l=this;queueMicrotask(function(){l._search(l.input.value.trim().toLowerCase())})}return this}c.prototype._attachHandler=function(){if(!this.input)return;const i=this,n=this.dom===this.input?this.input.parentElement:this.dom;this._clearBtn=n?n.querySelector("[data-ln-search-clear]"):null,this._clearBtn&&(this._onClear=function(){i.input.value="",i._search(""),i.input.focus()},this._clearBtn.addEventListener("click",this._onClear)),this._onInput=function(){clearTimeout(i._debounceTimer),i._debounceTimer=setTimeout(function(){i._search(i.input.value.trim().toLowerCase())},i.debounceTime)},this.input.addEventListener("input",this._onInput)},c.prototype._search=function(i){const n=document.getElementById(this.targetId);if(!n||I(n,"ln-search:change",{term:i,targetId:this.targetId}).defaultPrevented)return;const l=this.itemsSelector?n.querySelectorAll(this.itemsSelector):n.children;for(let s=0;s<l.length;s++){const u=l[s];u.removeAttribute(o),i&&!u.textContent.replace(/\s+/g," ").toLowerCase().includes(i)&&u.setAttribute(o,"true")}},c.prototype.destroy=function(){this.dom[e]&&(clearTimeout(this._debounceTimer),this.input&&this._onInput&&this.input.removeEventListener("input",this._onInput),this._clearBtn&&this._onClear&&this._clearBtn.removeEventListener("click",this._onClear),delete this.dom[e])},B(t,e,c,"ln-search")})()})();

package/js/ln-search/src/ln-search.js

@@ -3,17 +3,14 @@ import { dispatchCancelable, registerComponent } from '../../ln-core';
 (function () {
 	const DOM_SELECTOR = 'data-ln-search';
 	const DOM_ATTRIBUTE = 'lnSearch';
-	const INIT_ATTR = 'data-ln-search-initialized';
 	const HIDE_ATTR = 'data-ln-search-hide';
-	const DEBOUNCE_MS = 150;
+	const DEBOUNCE_MS = 500;
 
 	if (window[DOM_ATTRIBUTE] !== undefined) return;
 
 	// ─── Component ─────────────────────────────────────────────
 
 	function _component(dom) {
-		if (dom.hasAttribute(INIT_ATTR)) return this;
-
 		this.dom = dom;
 		this.targetId = dom.getAttribute(DOM_SELECTOR);
 
@@ -25,6 +22,11 @@ import { dispatchCancelable, registerComponent } from '../../ln-core';
 			|| dom.querySelector('input[type="text"]');
 
 		this.itemsSelector = dom.getAttribute('data-ln-search-items') || null;
+
+		const debounceVal = dom.getAttribute('data-ln-search-debounce');
+		this.debounceTime = debounceVal !== null ? parseInt(debounceVal, 10) : DEBOUNCE_MS;
+		if (isNaN(this.debounceTime)) this.debounceTime = DEBOUNCE_MS;
+
 		this._debounceTimer = null;
 
 		this._attachHandler();
@@ -38,7 +40,6 @@ import { dispatchCancelable, registerComponent } from '../../ln-core';
 			});
 		}
 
-		dom.setAttribute(INIT_ATTR, '');
 		return this;
 	}
 
@@ -48,8 +49,11 @@ import { dispatchCancelable, registerComponent } from '../../ln-core';
 		if (!this.input) return;
 		const self = this;
 
-		// Clear button inside the wrapper
-		this._clearBtn = this.dom.querySelector('[data-ln-search-clear]');
+		// Clear button: when data-ln-search is on the input itself, the clear button
+		// lives in the input's immediate wrapper (inputs have no element children).
+		// Otherwise (wrapper-host) scope is dom — unchanged behavior.
+		const scope = (this.dom === this.input) ? this.input.parentElement : this.dom;
+		this._clearBtn = scope ? scope.querySelector('[data-ln-search-clear]') : null;
 		if (this._clearBtn) {
 			this._onClear = function () {
 				self.input.value = '';
@@ -63,7 +67,7 @@ import { dispatchCancelable, registerComponent } from '../../ln-core';
 			clearTimeout(self._debounceTimer);
 			self._debounceTimer = setTimeout(function () {
 				self._search(self.input.value.trim().toLowerCase());
-			}, DEBOUNCE_MS);
+			}, self.debounceTime);
 		};
 
 		this.input.addEventListener('input', this._onInput);
@@ -104,7 +108,6 @@ import { dispatchCancelable, registerComponent } from '../../ln-core';
 		if (this._clearBtn && this._onClear) {
 			this._clearBtn.removeEventListener('click', this._onClear);
 		}
-		this.dom.removeAttribute(INIT_ATTR);
 		delete this.dom[DOM_ATTRIBUTE];
 	};
 

package/js/ln-slug/README.md

@@ -0,0 +1,110 @@
+# ln-slug
+
+Auto-slug micro-component — mirrors a slugified version of a source field into a slug field while the slug field is pristine. Stops mirroring once the user types directly into the slug field; resumes if the slug field is cleared.
+
+## Attributes
+
+| Attribute | On | Description |
+|-----------|-----|-------------|
+| `data-ln-slug-from="fieldName"` | `<input>` | Activates slug behavior. Value is the `name` of the source field in the same `<form>`. |
+
+## HTML Example
+
+```html
+<form>
+	<label>
+		Name
+		<input type="text" name="name">
+	</label>
+	<label>
+		Slug
+		<input type="text" name="slug" data-ln-slug-from="name">
+	</label>
+</form>
+```
+
+## Pristine Rules
+
+The component tracks a `_pristine` flag per instance. Mirroring only runs while pristine.
+
+| Situation | Result |
+|-----------|--------|
+| Slug field is empty at init | pristine = `true` (mirroring active) |
+| Slug field is non-empty at init (server-rendered) | pristine = `false` (never overwrite) |
+| User types non-empty value into slug field | pristine = `false` (mirroring stops) |
+| User clears slug field | pristine = `true` (mirroring resumes) |
+| `lnForm.fill` sets a non-empty slug (synthetic input) | pristine = `false` (loaded slug preserved) |
+| Form reset clears slug to empty (synthetic input) | pristine = `true` (mirroring resumes) |
+
+**Unified rule:** in the slug's own input handler — `if (_mirroring) return; _pristine = (value === '')`. Both trusted and untrusted inputs follow the same rule once the component's own mirror echo is guarded by the `_mirroring` flag.
+
+## Loop Guard
+
+When the source field triggers a mirror, the component:
+1. Sets `_mirroring = true`
+2. Sets `slug.value = slugify(source.value)`
+3. Dispatches a synthetic `input` event (bubbles, so `ln-validate`/`ln-form` auto-submit react)
+4. Sets `_mirroring = false`
+
+The slug's own input handler early-returns while `_mirroring` is true, so the synthetic echo does not flip `_pristine` off.
+
+## Slugify Rules
+
+```
+lowercase → replace non-alphanumeric runs with `-` → collapse multiple `-` → strip leading/trailing `-`
+```
+
+Example: `"Hello World!"` → `"hello-world"`, `"  test--value  "` → `"test-value"`.
+
+## Limitations
+
+- **ASCII-only (v1):** non-ASCII characters (Cyrillic, Macedonian, accented Latin, CJK) are stripped entirely — they fall into the `[^a-z0-9]+` replacement and become `-`. No transliteration in v1.
+- **Source read at init:** `data-ln-slug-from` is read once at construction via `form.elements[name]`. If the source field is added dynamically after init, the component will not find it (warn + bail). Re-initialize the slug input after DOM changes.
+- **Single source field:** if multiple fields share the same `name` (RadioNodeList), the component warns and bails. One text field → one slug.
+
+## Events
+
+The component dispatches a synthetic `new Event('input', { bubbles: true })` on the slug field after each mirror. This causes `ln-validate` to re-validate and `ln-form`'s auto-submit debounce to fire. No custom `ln-slug:*` events are emitted.
+
+---
+
+## 🔧 Internals
+
+Source: `js/ln-slug/ln-slug.js`. Single IIFE, `registerComponent`, per-element instance — same micro-component pattern as `ln-autoresize` (no Proxy/state machine, no templates).
+
+### Instance state
+
+| Property | Type | Description |
+|----------|------|-------------|
+| `dom` | `HTMLInputElement` | The slug input element |
+| `source` | `HTMLInputElement` | The resolved source field (`form.elements[name]`) |
+| `_pristine` | `boolean` | Whether the slug field is pristine (mirroring active) |
+| `_mirroring` | `boolean` | Guard flag — true only while the component is dispatching its own synthetic echo |
+
+### Mirror flow
+
+```
+source field 'input' event (isTrusted)
+  → _onSource: if (!_pristine) return
+  → _mirror():
+      _mirroring = true
+      slug.value = slugify(source.value)
+      slug.dispatchEvent(new Event('input', { bubbles: true }))
+          → _onSlug fires → _mirroring true → early return (echo ignored)
+          → ln-validate / ln-form auto-submit react (bubbled event)
+      _mirroring = false
+```
+
+The `_mirroring` guard is what disambiguates the component's own echo from external programmatic fills — both are `isTrusted === false`, separated only by the flag.
+
+### Initialization guards
+
+The constructor warns and bails (returns `this` without attaching listeners) when:
+- `dom.tagName !== 'INPUT'` — component applied to non-input
+- `dom.form` is null — slug input not inside a `<form>`
+- `form.elements[name]` is falsy — source field not found
+- `typeof source.addEventListener !== 'function'` — source is a RadioNodeList (same-name group)
+
+### Destroy
+
+`destroy()` removes `_onSource` from the source field and `_onSlug` from the slug field, then deletes `dom[DOM_ATTRIBUTE]`. Guarded by `if (!this.dom[DOM_ATTRIBUTE]) return`, making it idempotent.

package/js/ln-slug/ln-slug.js

@@ -0,0 +1 @@
+(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 m={};function N(t,e){m[t]||(m[t]=document.querySelector('[data-ln-template="'+t+'"]'));const r=m[t];return r?r.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function S(t,e){if(!t||!e)return t;const r=t.querySelectorAll("[data-ln-field]");for(let n=0;n<r.length;n++){const i=r[n],o=i.getAttribute("data-ln-field");e[o]!=null&&(i.textContent=e[o])}const c=t.querySelectorAll("[data-ln-attr]");for(let n=0;n<c.length;n++){const i=c[n],o=i.getAttribute("data-ln-attr").split(",");for(let u=0;u<o.length;u++){const a=o[u].trim().split(":");if(a.length!==2)continue;const f=a[0].trim(),d=a[1].trim();e[d]!=null&&i.setAttribute(f,e[d])}}const l=t.querySelectorAll("[data-ln-show]");for(let n=0;n<l.length;n++){const i=l[n],o=i.getAttribute("data-ln-show");o in e&&i.classList.toggle("hidden",!e[o])}const s=t.querySelectorAll("[data-ln-class]");for(let n=0;n<s.length;n++){const i=s[n],o=i.getAttribute("data-ln-class").split(",");for(let u=0;u<o.length;u++){const a=o[u].trim().split(":");if(a.length!==2)continue;const f=a[0].trim(),d=a[1].trim();d in e&&i.classList.toggle(f,!!e[d])}}return t}function q(t,e){t.matches&&t.matches("[data-ln-form], [data-ln-fillable]")&&t.dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));const r=t.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let c=0;c<r.length;c++)r[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)S(t.target,t.detail);else{const e=t.target.querySelectorAll("[data-ln-field]");for(let r=0;r<e.length;r++)e[r].textContent=""}})));function v(t,e){if(!t||!e)return t;const r=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;r.nextNode();){const s=r.currentNode;s.textContent.indexOf("{{")!==-1&&(s.textContent=s.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(n,i){return e[i]!==void 0?e[i]:""}))}const c=function(s,n){return e[n]!==void 0?e[n]:""},l=Array.from(t.querySelectorAll("*"));t.nodeType===1&&l.push(t);for(let s=0;s<l.length;s++){const n=l[s],i=n.attributes;for(let o=0;o<i.length;o++){const u=i[o];u.value.indexOf("{{")!==-1&&n.setAttribute(u.name,u.value.replace(/\{\{\s*(\w+)\s*\}\}/g,c))}}return t}function D(t,e,r,c,l,s){const n={};for(let o=0;o<t.children.length;o++){const u=t.children[o],a=u.getAttribute("data-ln-key");a&&(n[a]=u)}const i=document.createDocumentFragment();for(let o=0;o<e.length;o++){const u=e[o],a=String(c(u));let f=n[a];if(f)l(f,u,o);else{const d=N(r,s);if(!d||(v(d,u),f=d.firstElementChild,!f))continue;f.setAttribute("data-ln-key",a),l(f,u,o)}i.appendChild(f)}t.textContent="",t.appendChild(i)}function A(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){A(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function w(t,e,r,c){if(t.nodeType!==1)return;const s=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",n=Array.from(t.querySelectorAll(s));t.matches&&t.matches(s)&&n.push(t);for(const i of n)i[r]||(i[r]=new c(i))}function M(t,e,r,c,l={}){const s=l.extraAttributes||[],n=l.onAttributeChange||null,i=l.onInit||null;function o(u){const a=u||document.body;w(a,t,e,r),i&&i(a)}return A(function(){const u=new MutationObserver(function(f){for(let d=0;d<f.length;d++){const h=f[d];if(h.type==="childList"){for(let g=0;g<h.addedNodes.length;g++){const p=h.addedNodes[g];p.nodeType===1&&(w(p,t,e,r),i&&i(p))}for(let g=0;g<h.removedNodes.length;g++){const p=h.removedNodes[g];if(p.nodeType===1){const k=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",b=Array.from(p.querySelectorAll(k));p.matches&&p.matches(k)&&b.push(p);for(let C=0;C<b.length;C++){const T=b[C];if(!document.contains(T)){const L=T[e];L&&typeof L.destroy=="function"&&L.destroy()}}}}}else h.type==="attributes"&&(n&&h.target[e]?n(h.target,h.attributeName):(w(h.target,t,e,r),i&&i(h.target)))}});let a=[];if(t.indexOf("[")!==-1){const f=/\[([\w-]+)/g;let d;for(;(d=f.exec(t))!==null;)a.push(d[1])}else a.push(t);u.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:a.concat(s)})},c),window[e]=o,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){o(document.body)}):o(document.body),o}const _={};function j(t,e){_[t]=e}function W(t){return _[t]||{ingress:e=>e,egress:e=>e}}const x={};function E(t,e){if(!t||typeof e!="object")return;const r=t.toLowerCase().split("-")[0];x[r]=e}function F(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return x[e]||null}E("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=j,window.lnCore.getDataMapper=W,window.lnCore.registerLocaleFallback=E,window.lnCore.getLocaleFallback=F,window.lnCore.fillTemplate=v,window.lnCore.fill=S,window.lnCore.lnFill=q,window.lnCore.renderList=D);function O(t){return(t||"").replace(/^#/,"")}function y(t){const e=t===void 0?location.hash:t,r={},c=O(e);if(!c)return r;const l=c.split("&");for(let s=0;s<l.length;s++){const n=l[s];if(!n)continue;const i=n.indexOf(":"),o=i>-1?n.slice(0,i):n,u=i>-1?n.slice(i+1):"";if(o)try{r[o]=decodeURIComponent(u)}catch{r[o]=u}}return r}function I(t){if(!t)return null;const e=y();return t in e?e[t]:null}function B(t,e){if(!t)return;const r=y();e==null?delete r[t]:r[t]=String(e);const l=Object.keys(r).map(function(s){const n=r[s];return n===""?s:s+":"+encodeURIComponent(n)}).join("&");O(location.hash)!==l&&(location.hash=l)}function R(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=y,window.lnCore.hashGet=I,window.lnCore.hashSet=B,window.lnCore.hashLinkClick=R),(function(){const t="data-ln-slug-from",e="lnSlug";if(window[e]!==void 0)return;function r(l){return String(l).toLowerCase().replace(/[^a-z0-9]+/g,"-").replace(/-+/g,"-").replace(/^-|-$/g,"")}function c(l){if(l.tagName!=="INPUT")return console.warn("[ln-slug] Can only be applied to <input>, got:",l.tagName),this;const s=l.form;if(!s)return console.warn("[ln-slug] Slug input is not inside a <form>:",l),this;const n=l.getAttribute(t),i=s.elements[n];if(!i)return console.warn('[ln-slug] Source field "'+n+'" not found in form:',l),this;if(typeof i.addEventListener!="function")return console.warn('[ln-slug] Source field "'+n+'" is a RadioNodeList (same-name group) — single source field required:',l),this;this.dom=l,this.source=i,this._pristine=l.value==="",this._mirroring=!1;const o=this;return this._onSource=function(){o._pristine&&o._mirror()},this._onSlug=function(){o._mirroring||(o._pristine=o.dom.value==="")},i.addEventListener("input",this._onSource),l.addEventListener("input",this._onSlug),this}c.prototype._mirror=function(){this._mirroring=!0,this.dom.value=r(this.source.value),this.dom.dispatchEvent(new Event("input",{bubbles:!0})),this._mirroring=!1},c.prototype.destroy=function(){this.dom[e]&&(this.source.removeEventListener("input",this._onSource),this.dom.removeEventListener("input",this._onSlug),delete this.dom[e])},M(t,e,c,"ln-slug")})()})();

package/js/ln-slug/src/ln-slug.js

@@ -0,0 +1,74 @@
+import { registerComponent } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-slug-from';
+	const DOM_ATTRIBUTE = 'lnSlug';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	function slugify(s) {
+		return String(s).toLowerCase()
+			.replace(/[^a-z0-9]+/g, '-')
+			.replace(/-+/g, '-')
+			.replace(/^-|-$/g, '');
+	}
+
+	function _component(dom) {
+		if (dom.tagName !== 'INPUT') {
+			console.warn('[ln-slug] Can only be applied to <input>, got:', dom.tagName);
+			return this;
+		}
+		const form = dom.form;
+		if (!form) {
+			console.warn('[ln-slug] Slug input is not inside a <form>:', dom);
+			return this;
+		}
+		const sourceName = dom.getAttribute(DOM_SELECTOR);
+		const source = form.elements[sourceName];
+		if (!source) {
+			console.warn('[ln-slug] Source field "' + sourceName + '" not found in form:', dom);
+			return this;
+		}
+		if (typeof source.addEventListener !== 'function') {
+			console.warn('[ln-slug] Source field "' + sourceName + '" is a RadioNodeList (same-name group) — single source field required:', dom);
+			return this;
+		}
+
+		this.dom = dom;
+		this.source = source;
+		this._pristine = dom.value === '';
+		this._mirroring = false;
+
+		const self = this;
+
+		this._onSource = function () {
+			if (!self._pristine) return;
+			self._mirror();
+		};
+		this._onSlug = function () {
+			if (self._mirroring) return;
+			self._pristine = (self.dom.value === '');
+		};
+
+		source.addEventListener('input', this._onSource);
+		dom.addEventListener('input', this._onSlug);
+
+		return this;
+	}
+
+	_component.prototype._mirror = function () {
+		this._mirroring = true;
+		this.dom.value = slugify(this.source.value);
+		this.dom.dispatchEvent(new Event('input', { bubbles: true }));
+		this._mirroring = false;
+	};
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this.source.removeEventListener('input', this._onSource);
+		this.dom.removeEventListener('input', this._onSlug);
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-slug');
+})();