@livenetworks/ashlar 1.6.1 → 2.0.0

package/components/ln-search/ln-search.schema.json

@@ -0,0 +1,103 @@
+{
+	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
+	"component": "ln-search",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-search-dev.scss"
+			]
+		},
+		"data-ln-hash": {
+			"direction": null,
+			"sources": [
+				"src/ln-search.js"
+			],
+			"type": "string",
+			"description": "URL hash routing key for search state persistence"
+		},
+		"data-ln-list-source": {
+			"direction": "author",
+			"sources": [
+				"src/ln-search.js"
+			]
+		},
+		"data-ln-search": {
+			"direction": "both",
+			"sources": [
+				"ln-search-dev.scss",
+				"src/ln-search.js"
+			],
+			"type": "string",
+			"description": "Active search query term on target element or container"
+		},
+		"data-ln-search-clear": {
+			"direction": "author",
+			"sources": [
+				"src/ln-search.js"
+			]
+		},
+		"data-ln-search-clear-for": {
+			"direction": "author",
+			"sources": [
+				"src/ln-search.js"
+			],
+			"type": "trigger",
+			"description": "Click trigger to clear search input for target"
+		},
+		"data-ln-search-exclude": {
+			"direction": "author",
+			"sources": [
+				"src/ln-search.js"
+			],
+			"type": "string",
+			"description": "CSS selector matching child items to exclude from search"
+		},
+		"data-ln-search-fields": {
+			"direction": "author",
+			"sources": [
+				"src/ln-search.js"
+			],
+			"type": "list",
+			"description": "Comma-separated field names to include in client search"
+		},
+		"data-ln-search-for": {
+			"direction": "author",
+			"sources": [
+				"ln-search-dev.scss",
+				"src/ln-search.js"
+			],
+			"type": "string",
+			"description": "Target table or list element ID that this input controls"
+		},
+		"data-ln-search-hide": {
+			"direction": "runtime",
+			"sources": [
+				"ln-search.scss",
+				"src/ln-search.js"
+			],
+			"type": "enum",
+			"values": [
+				"collapse",
+				"none"
+			],
+			"fallback": "collapse",
+			"description": "CSS hiding strategy for non-matching rows"
+		},
+		"data-ln-search-items": {
+			"direction": "author",
+			"sources": [
+				"src/ln-search.js"
+			],
+			"type": "string",
+			"description": "CSS selector matching searchable child items"
+		},
+		"data-ln-table-source": {
+			"direction": "author",
+			"sources": [
+				"src/ln-search.js"
+			]
+		}
+	}
+}

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

@@ -0,0 +1,330 @@
+import { dispatchCancelable, hashGet, hashSet, queueBoot, registerComponent, resolveHashNamespace, defineAttrs, attrSpec, attrStr } from '../../ln-core';
+import { collapseSearchParts, matchesSearchTokens, normalizeSearchTerm, parseSearchFields, tokenizeSearchQuery } from '../../ln-core/matching.js';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-search';
+	const DOM_ATTRIBUTE = 'lnSearch';
+	const CONTROL_SELECTOR = 'data-ln-search-for';
+	const CONTROL_ATTRIBUTE = 'lnSearchControl';
+	const ITEMS_ATTR = 'data-ln-search-items';
+	const FIELDS_ATTR = 'data-ln-search-fields';
+	const EXCLUDE_ATTR = 'data-ln-search-exclude';
+	const HIDE_ATTR = 'data-ln-search-hide';
+	const HASH_ATTR = 'data-ln-hash';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-search':           { type: 'string', effect: _syncAttribute, description: 'Active search query term on target element or container' },
+		'data-ln-hash':             { type: 'string', effect: _syncAttribute, description: 'URL hash routing key for search state persistence' },
+		'data-ln-search-for':       { prop: 'targetId', type: 'string', read: attrStr, fallback: null, description: 'Target table or list element ID that this input controls' },
+		'data-ln-search-fields':    { type: 'list', description: 'Comma-separated field names to include in client search' },
+		'data-ln-search-items':     { type: 'string', description: 'CSS selector matching searchable child items' },
+		'data-ln-search-exclude':   { type: 'string', description: 'CSS selector matching child items to exclude from search' },
+		'data-ln-search-hide':      { type: 'enum', values: ['collapse', 'none'], fallback: 'collapse', description: 'CSS hiding strategy for non-matching rows' },
+		'data-ln-search-clear-for': { type: 'trigger', description: 'Click trigger to clear search input for target' }
+	};
+
+	const ATTR_SPEC = attrSpec(ATTRIBUTES);
+
+	// ─── DOM Helpers ───────────────────────────────────────────
+
+	function _resolveSearchHashNamespace(target) {
+		const fromTarget = resolveHashNamespace(target, 'search');
+		if (fromTarget) return fromTarget;
+		if (target.id) {
+			const control = document.querySelector('[' + CONTROL_SELECTOR + '="' + target.id + '"]');
+			if (control) {
+				const fromControl = resolveHashNamespace(control, 'search');
+				if (fromControl) return fromControl;
+			}
+		}
+		return null;
+	}
+
+	function _resolveInput(host) {
+		return host.matches('input, textarea') ? host : host.querySelector('input, textarea');
+	}
+
+	function _collectText(node, parts) {
+		const children = node.childNodes;
+		for (let i = 0; i < children.length; i++) {
+			const child = children[i];
+			if (child.nodeType === 3) {
+				parts.push(child.nodeValue);
+				continue;
+			}
+			if (child.nodeType !== 1) continue;
+			if (child.hasAttribute(EXCLUDE_ATTR)) continue;
+			_collectText(child, parts);
+		}
+	}
+
+	function _searchText(el) {
+		if (el._lnSearchText !== undefined) return el._lnSearchText;
+		const parts = [];
+		_collectText(el, parts);
+		const text = collapseSearchParts(parts);
+		el._lnSearchText = text;
+		return text;
+	}
+
+	function _syncControls(target, term) {
+		if (!target.id) return;
+		const controls = document.querySelectorAll('[' + CONTROL_SELECTOR + '="' + target.id + '"]');
+		for (const control of controls) {
+			const input = _resolveInput(control);
+			if (input && input.value !== term) input.value = term;
+		}
+	}
+
+	// ─── State Component (Search Target) ───────────────────────
+
+	function _stateComponent(dom) {
+		this.dom = dom;
+		this.term = dom.getAttribute(DOM_SELECTOR) || '';
+		this._destroyed = false;
+
+		const self = this;
+		this.nsKey = _resolveSearchHashNamespace(dom);
+		this.hashEnabled = !!this.nsKey;
+
+		this._onHashChange = function () {
+			if (self._destroyed || !self.hashEnabled) return;
+			const query = hashGet(self.nsKey);
+			const current = self.dom.getAttribute(DOM_SELECTOR) || '';
+			if (query !== null && query !== current) {
+				self.dom.setAttribute(DOM_SELECTOR, query);
+			} else if (query === null && current !== '') {
+				self.dom.setAttribute(DOM_SELECTOR, '');
+			}
+		};
+
+		if (this.hashEnabled) {
+			window.addEventListener('hashchange', this._onHashChange);
+		}
+
+		queueBoot(function () {
+			if (self._destroyed) return;
+			if (self.hashEnabled) {
+				const hashVal = hashGet(self.nsKey);
+				if (hashVal !== null && hashVal !== self.term) {
+					self.term = hashVal;
+					self.dom.setAttribute(DOM_SELECTOR, hashVal);
+					_syncControls(self.dom, hashVal);
+					self._apply();
+					return;
+				}
+			}
+			if (normalizeSearchTerm(self.term)) {
+				_syncControls(self.dom, self.term);
+				self._apply();
+			}
+		});
+
+		return this;
+	}
+
+	_stateComponent.prototype._apply = function () {
+		const dom = this.dom;
+		const term = normalizeSearchTerm(this.term);
+		const tokens = tokenizeSearchQuery(term);
+
+		if (this.hashEnabled) {
+			hashSet(this.nsKey, this.term ? this.term : null);
+		}
+
+		const fields = parseSearchFields(dom.getAttribute(FIELDS_ATTR));
+		const evt = dispatchCancelable(dom, 'ln-search:change', {
+			term: term,
+			tokens: tokens,
+			targetId: dom.id,
+			fields: fields
+		});
+		if (evt.defaultPrevented) return;
+
+		const itemsSelector = dom.getAttribute(ITEMS_ATTR);
+		const items = itemsSelector ? dom.querySelectorAll(itemsSelector) : dom.children;
+
+		for (let i = 0; i < items.length; i++) {
+			const el = items[i];
+			el.removeAttribute(HIDE_ATTR);
+			if (el.hasAttribute(EXCLUDE_ATTR)) continue;
+			if (tokens.length === 0) continue;
+
+			const text = _searchText(el);
+			if (!matchesSearchTokens(text, tokens)) {
+				el.setAttribute(HIDE_ATTR, 'true');
+			}
+		}
+	};
+
+	_stateComponent.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this._destroyed = true;
+		if (this.hashEnabled && this._onHashChange) {
+			window.removeEventListener('hashchange', this._onHashChange);
+		}
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Control Component (Search Input / Proxy) ──────────────
+
+	function _controlComponent(dom) {
+		this.dom = dom;
+		defineAttrs(this, dom, ATTR_SPEC);
+		this.input = _resolveInput(dom);
+
+		this._attachHandler();
+
+		if (this.input && this.input.value.trim()) {
+			const self = this;
+			queueBoot(function () {
+				const target = document.getElementById(self.targetId);
+				if (!target) return;
+				if ((target.getAttribute(DOM_SELECTOR) || '').trim()) return;
+				self._write(self.input.value);
+			});
+		}
+
+		return this;
+	}
+
+	_controlComponent.prototype._write = function (value) {
+		const target = document.getElementById(this.targetId);
+		if (!target) return;
+		if (target.getAttribute(DOM_SELECTOR) === value) return;
+		target.setAttribute(DOM_SELECTOR, value);
+	};
+
+	_controlComponent.prototype._attachHandler = function () {
+		if (!this.input) return;
+		const self = this;
+
+		this._onInput = function () {
+			self._write(self.input.value);
+		};
+
+		this.input.addEventListener('input', this._onInput);
+	};
+
+	_controlComponent.prototype.destroy = function () {
+		if (!this.dom[CONTROL_ATTRIBUTE]) return;
+		if (this.input && this._onInput) {
+			this.input.removeEventListener('input', this._onInput);
+		}
+		delete this.dom[CONTROL_ATTRIBUTE];
+	};
+
+	// ─── Global Delegated Clear Triggers ───────────────────────
+
+	function _resolveTargetAndInputFromClearBtn(btn) {
+		const explicitId = btn.getAttribute('data-ln-search-clear-for');
+		if (explicitId) {
+			const target = document.getElementById(explicitId);
+			const control = document.querySelector('[' + CONTROL_SELECTOR + '="' + explicitId + '"]');
+			const input = control ? _resolveInput(control) : null;
+			return { target: target, input: input };
+		}
+
+		const target = btn.closest('[' + DOM_SELECTOR + ']');
+		if (target) {
+			const control = target.id ? document.querySelector('[' + CONTROL_SELECTOR + '="' + target.id + '"]') : null;
+			const input = control ? _resolveInput(control) : null;
+			return { target: target, input: input };
+		}
+
+		const view = btn.closest('[data-ln-table-source], [data-ln-list-source]');
+		if (view) {
+			const sourceId = view.getAttribute('data-ln-table-source') || view.getAttribute('data-ln-list-source');
+			const sourceTarget = sourceId ? document.getElementById(sourceId) : null;
+			if (sourceTarget && sourceTarget.hasAttribute(DOM_SELECTOR)) {
+				const control = document.querySelector('[' + CONTROL_SELECTOR + '="' + sourceId + '"]');
+				const input = control ? _resolveInput(control) : null;
+				return { target: sourceTarget, input: input };
+			}
+		}
+
+		const controlWrap = btn.closest('[' + CONTROL_SELECTOR + ']');
+		if (controlWrap) {
+			const targetId = controlWrap.getAttribute(CONTROL_SELECTOR);
+			const target = targetId ? document.getElementById(targetId) : null;
+			const input = _resolveInput(controlWrap);
+			return { target: target, input: input };
+		}
+
+		const parent = btn.parentElement;
+		if (parent) {
+			const controlEl = parent.querySelector('[' + CONTROL_SELECTOR + ']');
+			if (controlEl) {
+				const targetId = controlEl.getAttribute(CONTROL_SELECTOR);
+				const target = targetId ? document.getElementById(targetId) : null;
+				const input = _resolveInput(controlEl);
+				return { target: target, input: input };
+			}
+		}
+
+		return { target: null, input: null };
+	}
+
+	document.addEventListener('click', function (e) {
+		const btn = e.target.closest('[data-ln-search-clear], [data-ln-search-clear-for]');
+		if (!btn) return;
+
+		const res = _resolveTargetAndInputFromClearBtn(btn);
+		if (!res.target && !res.input) return;
+
+		e.preventDefault();
+
+		if (res.input) {
+			res.input.value = '';
+			res.input.focus();
+		}
+
+		if (res.target) {
+			res.target.setAttribute(DOM_SELECTOR, '');
+		}
+	});
+
+	// ─── Attribute Sync ────────────────────────────────────────
+
+	function _syncAttribute(el, attrName) {
+		const instance = el[DOM_ATTRIBUTE];
+		if (!instance || instance._destroyed) return;
+
+		if (attrName === HASH_ATTR) {
+			if (instance._onHashChange) window.removeEventListener('hashchange', instance._onHashChange);
+			instance.nsKey = _resolveSearchHashNamespace(el);
+			instance.hashEnabled = !!instance.nsKey;
+			if (instance.hashEnabled) window.addEventListener('hashchange', instance._onHashChange);
+			return;
+		}
+
+		const next = el.getAttribute(DOM_SELECTOR) || '';
+		if (next === instance.term) return;
+
+		instance.term = next;
+		_syncControls(el, next);
+		instance._apply();
+	}
+
+	// ─── Registration ──────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _stateComponent, 'ln-search', {
+		attributes: ATTRIBUTES,
+		onSubtreeChange: function (el, mut) {
+			const target = mut.target;
+			if (target && target._lnSearchText !== undefined) delete target._lnSearchText;
+			if (target && target.parentElement && target.parentElement._lnSearchText !== undefined) {
+				delete target.parentElement._lnSearchText;
+			}
+		},
+		persist: {
+			attr: DOM_SELECTOR,
+			hashActive: function (el) { return !!_resolveSearchHashNamespace(el); }
+		}
+	});
+
+	registerComponent(CONTROL_SELECTOR, CONTROL_ATTRIBUTE, _controlComponent, 'ln-search-control');
+})();

package/{js → components}/ln-slug/README.md

@@ -1,6 +1,8 @@
 # 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.
+> Applied to an `<input name="slug" data-ln-slug-from="sourceName">` within a `<form>`. It queries the source field by `name`
+> and listens for its native `input` events: while the slug input remains pristine, it computes the slugified string and sets
+> `slug.value`, dispatching a synthetic `input` event. If the user types directly into the slug field, it marks it as dirty and halts mirroring until cleared.
 
 ## Attributes
 
@@ -29,7 +31,8 @@ The component tracks a `_pristine` flag per instance. Mirroring only runs while
 
 | Situation | Result |
 |-----------|--------|
-| Slug field is empty at init | pristine = `true` (mirroring active) |
+| Slug field is empty at init & source has text | pristine = `true` (mirrors source text immediately on init) |
+| Slug field is empty at init & source is empty | pristine = `true` (mirroring active on future typing) |
 | 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) |
@@ -70,7 +73,7 @@ The component dispatches a synthetic `new Event('input', { bubbles: true })` on
 
 ## 🔧 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).
+Source: `components/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
 

package/components/ln-slug/ln-slug-dev.scss

@@ -0,0 +1,18 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Host Element Check: data-ln-slug-from belongs only on <input>
+	[data-ln-slug-from]:not(input) {
+		@include dev-inline-error("data-ln-slug-from belongs only on <input> elements");
+	}
+
+	// 2. Source Key Check: source field name cannot be empty
+	[data-ln-slug-from=""] {
+		@include dev-inline-error("data-ln-slug-from source field name cannot be empty");
+	}
+
+	// 3. Form Nesting Check: slug input must be inside a <form>
+	[data-ln-slug-from]:not(form [data-ln-slug-from]) {
+		@include dev-inline-error("data-ln-slug-from must be nested inside a <form> element");
+	}
+}

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

@@ -0,0 +1 @@
+(function(){"use strict";function L(){return typeof window>"u"?!1:window.lnDebug===!0||window.lnCore&&window.lnCore._debugSink?!0:typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug")||document.body.querySelector("[data-ln-debug]")!==null:!1}function p(e){if(typeof window>"u")return!1;if(window.lnDebug===!0)return!0;if(window.lnCore&&window.lnCore._debugIsContained)return e?window.lnCore._debugIsContained(e):window.lnCore._debugSink!==null;if(e&&e.closest){const t=e.closest("[data-ln-debug]");return!(!t||typeof document<"u"&&t===document.documentElement)}return typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug"):!1}if(typeof window<"u"&&(window.lnCore=window.lnCore||{},!window.lnCore._warnBound)){window.lnCore._warnBound=!0;const e=console.warn;console.warn=function(...t){if(typeof t[0]=="string"&&(t[0].startsWith("[ln-")||t[0].startsWith("[lnCore"))){let r=null;for(let o=1;o<t.length;o++)if(t[o]&&t[o].nodeType===1){r=t[o];break}if(!p(r))return}e.apply(console,t)}}function B(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:r}))}function b(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){b(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const x={};function j(e,t){x[e]=t}function W(e){return x[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=j,window.lnCore.getDataMapper=W);function V(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,b(function(){new MutationObserver(function(){B(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const $={};function H(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];$[n]=t}function U(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return $[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=H,window.lnCore.getLocaleFallback=U,window.lnCore.ensureLocaleObserver=V);const C={};function Q(e,t){C[e]||(C[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=C[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function N(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let l=0;l<n.length;l++){const u=n[l],s=u.getAttribute("data-ln-field");t[s]!=null&&(u.textContent=t[s])}const r=e.querySelectorAll("[data-ln-attr]");for(let l=0;l<r.length;l++){const u=r[l],s=u.getAttribute("data-ln-attr").split(",");for(let c=0;c<s.length;c++){const d=s[c].trim().split(":");if(d.length!==2)continue;const a=d[0].trim(),f=d[1].trim();t[f]!=null&&u.setAttribute(a,t[f])}}const o=e.querySelectorAll("[data-ln-show]");for(let l=0;l<o.length;l++){const u=o[l],s=u.getAttribute("data-ln-show");s in t&&u.classList.toggle("hidden",!t[s])}const i=e.querySelectorAll("[data-ln-class]");for(let l=0;l<i.length;l++){const u=i[l],s=u.getAttribute("data-ln-class").split(",");for(let c=0;c<s.length;c++){const d=s[c].trim().split(":");if(d.length!==2)continue;const a=d[0].trim(),f=d[1].trim();f in t&&u.classList.toggle(a,!!t[f])}}return e}function J(e,t){e.matches&&e.matches("[data-ln-form], [data-ln-fillable]")&&(window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",e,t??null),e.dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0})));const n=e.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let r=0;r<n.length;r++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[r],t??null),n[r].dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0}));return e}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(e){if(!(!e.target.matches||!e.target.matches("[data-ln-fillable]")))if(e.detail)N(e.target,e.detail);else{const t=e.target.querySelectorAll("[data-ln-field]");for(let n=0;n<t.length;n++)t[n].textContent=""}})));function T(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const i=n.currentNode;i.textContent.indexOf("{{")!==-1&&(i.textContent=i.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(l,u){return t[u]!==void 0?t[u]:""}))}const r=function(i,l){return t[l]!==void 0?t[l]:""},o=Array.from(e.querySelectorAll("*"));e.nodeType===1&&o.push(e);for(let i=0;i<o.length;i++){const l=o[i],u=l.attributes;for(let s=0;s<u.length;s++){const c=u[s];c.value.indexOf("{{")!==-1&&l.setAttribute(c.name,c.value.replace(/\{\{\s*(\w+)\s*\}\}/g,r))}}return e}function K(e,t,n,r,o,i){const l={};for(let s=0;s<e.children.length;s++){const c=e.children[s],d=c.getAttribute("data-ln-render-key");d&&(l[d]=c)}const u=document.createDocumentFragment();for(let s=0;s<t.length;s++){const c=t[s],d=String(r(c));let a=l[d];if(a)o(a,c,s);else{const f=Q(n,i);if(!f||(T(f,c),a=f.firstElementChild,!a))continue;a.setAttribute("data-ln-render-key",d),o(a,c,s)}u.appendChild(a)}e.textContent="",e.appendChild(u)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=T,window.lnCore.fill=N,window.lnCore.lnFill=J,window.lnCore.renderList=K);function m(e,t,n){const r=e.getAttribute(t);return r===null?n:r}function P(e,t,n){const r=parseInt(e.getAttribute(t),10);return isNaN(r)?n:r}function z(e,t,n=!1){const r=e.getAttribute(t);if(r===null)return!!n;const o=r.trim().toLowerCase();return!(o==="false"||o==="0")}function G(e,t){return(e.getAttribute(t)||"").split(",").map(n=>n.trim()).filter(Boolean)}const y=new Map;function X(e,t){const n=(e?e.join("|"):"")+"::"+t;if(y.has(n))return y.get(n);const r=new Set(e||[]),o=function(i,l){const u=i.getAttribute(l);return u!==null&&r.has(u)?u:t};return y.set(n,o),o}function Y(e,t,n){const r=parseFloat(e.getAttribute(t));return isNaN(r)?n:r}function Z(e,t,n){const r=e.getAttribute(t);if(!r)return n;try{return JSON.parse(r)}catch{return n}}function D(e,t,n,r,o){if(!e||t===null)return!0;const i=r||"ln-component",l=e.type;if(l==="trigger"||l==="marker"||l==="string"||l==="list"||!l||t===""&&e.fallback!==void 0)return!0;const u=s=>{o?console.warn(s,o):console.warn(s)};if(l==="boolean"){const s=t.trim().toLowerCase();return s!==""&&s!=="true"&&s!=="false"&&s!=="1"&&s!=="0"?(u(`[${i}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(l==="enum"){const s=e.values||[];return s.includes(t)?!0:(u(`[${i}] Invalid value "${t}" for attribute "${n}". Allowed: ${s.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(l==="integer"){if(!/^-?\d+$/.test(t))return u(`[${i}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const s=parseInt(t,10);return e.min!==void 0&&s<e.min?(u(`[${i}] Value ${s} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&s>e.max?(u(`[${i}] Value ${s} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(l==="float")return isNaN(Number(t))?(u(`[${i}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(l==="json")try{return JSON.parse(t),!0}catch(s){return u(`[${i}] Invalid JSON for attribute "${n}": ${s.message}. Fallback: ${e.fallback}.`),!1}return!0}function ee(e,t,n){for(const r in n){const[o,i,l]=n[r];Object.defineProperty(e,r,{get:function(){return o(t,i,l)},enumerable:!0,configurable:!0})}return e}function te(e){const t={};for(const n in e){const r=e[n];if(!r||!r.prop)continue;let o=r.read;if(!o&&r.type)switch(r.type){case"enum":o=X(r.values,r.fallback);break;case"integer":o=P;break;case"float":o=Y;break;case"boolean":o=z;break;case"list":o=G;break;case"json":o=Z;break;case"string":default:o=m;break}o||(o=m),t[r.prop]=[o,n,r.fallback]}return t}function ne(e){const t={};for(const n in e){const r=e[n];r&&r.effect&&(t[n]=r.effect)}return Object.keys(t).length?t:null}function re(e){if(e.onAttrChange&&!e.declared)return null;const t=new Set;if(e.effects)for(const n in e.effects)t.add(n);if(e.onAttrChange&&e.declared)for(const n of e.declared)t.add(n);return t}function A(e,t,n,r){if(e.nodeType!==1)return;const i=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",l=Array.from(e.querySelectorAll(i));e.matches&&e.matches(i)&&l.push(e);for(const u of l)if(!u[n]){window.lnCore._persistSink&&u.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(u,t);try{u[n]=new r(u)}catch(s){console.error("["+n+"] init failed",u,s)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function oe(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function ie(e){typeof window<"u"?(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[],window.lnCore._bootHolds>0?window.lnCore._bootQueue.push(e):setTimeout(e,0)):e()}function I(){window.lnCore=window.lnCore||{};const e=window.lnCore._attrRegistry=window.lnCore._attrRegistry||{byAttr:new Map,reactive:[],persist:[]};return e.byReactive=e.byReactive||new Map,e.reactiveWildcard=e.reactiveWildcard||[],e}function le(e){const t=I(),n=e.observed||[];for(let r=0;r<n.length;r++){const o=n[r];t.byAttr.has(o)||t.byAttr.set(o,[]),t.byAttr.get(o).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const r in e.attributes){t.byDeclaredAttr.has(r)||t.byDeclaredAttr.set(r,[]);const o=t.byDeclaredAttr.get(r);o.some(i=>i.componentTag===e.componentTag)||o.push({spec:e.attributes[r],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const r=re(e);if(r===null)t.reactiveWildcard.push(e);else for(const o of r)t.byReactive.has(o)||t.byReactive.set(o,[]),t.byReactive.get(o).push(e)}e.persist&&t.persist.push(e)}function R(e,t,n,r){for(let o=0;o<e.length;o++){const i=e[o];if(!t[i.attribute])continue;const l=i.effects&&i.effects[n];l?l(t,n,r):i.onAttrChange&&(!i.declared||i.declared.has(n))&&i.onAttrChange(t,n,r)}}function se(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const r=I(),o=r.byAttr.get(n);if(L()&&r.byDeclaredAttr&&r.byDeclaredAttr.has(n)&&p(t)){const i=r.byDeclaredAttr.get(n),l=t.getAttribute(n);for(let u=0;u<i.length;u++)D(i[u].spec,l,n,i[u].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||o)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const i=r.byReactive.get(n);i&&R(i,t,n,e.oldValue),r.reactiveWildcard.length&&R(r.reactiveWildcard,t,n,e.oldValue)}if(o)for(let i=0;i<o.length;i++){const l=o[i];if(l.handler){l.handler(t,n,e.oldValue);continue}l.onAttributeChange&&t[l.attribute]?l.onAttributeChange(t,n):(A(t,l.selector,l.attribute,l.ComponentFn),l.onInit&&l.onInit(t))}}function ue(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,b(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{se(t[n])}catch(r){console.error("[ln-core] mutation handler failed",t[n].target,r)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function q(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function ce(e){const t=q();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const r=t[n];if(r.onSubtreeChange){const o=r.query,i=e.target.nodeType===1?e.target.matches(o)?e.target:e.target.closest(o):e.target.parentElement?e.target.parentElement.closest(o):null;i&&r.onSubtreeChange(i,e)}}for(let n=0;n<e.addedNodes.length;n++){const r=e.addedNodes[n];if(r.nodeType===1)for(let o=0;o<t.length;o++){const i=t[o];A(r,i.selector,i.attribute,i.ComponentFn),i.onInit&&i.onInit(r)}}for(let n=0;n<e.removedNodes.length;n++){const r=e.removedNodes[n];if(r.nodeType===1)for(let o=0;o<t.length;o++){const i=t[o],l=i.query,u=Array.from(r.querySelectorAll(l));r.matches&&r.matches(l)&&u.push(r);for(let s=0;s<u.length;s++){const c=u[s];if(!document.contains(c)){const d=c[i.attribute];if(d&&typeof d.destroy=="function")try{d.destroy()}catch(a){console.error("["+i.attribute+"] destroy failed",c,a)}delete c[i.attribute]}}}}}}function ae(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,b(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const r=t[n];if(r.type==="childList")try{ce(r)}catch(o){console.error("[ln-core] lifecycle handler failed",r.target,o)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function de(e,t,n,r,o={}){const i=o.extraAttributes||[],l=o.onAttributeChange||null,u=o.onSubtreeChange||null,s=o.onInit||null,c=o.onAttrChange||null,d=o.effects||null,a=o.attributes||null,f=a?ne(a):d,Ae=a?new Set(Object.keys(a)):null,_e=o.persist||null;function g(S){const w=S||document.body;if(A(w,e,t,n),a&&L())for(const h in a){const Se=a[h],k=Array.from(w.querySelectorAll("["+h+"]"));w.matches&&w.matches("["+h+"]")&&k.push(w);for(let O=0;O<k.length;O++){const E=k[O];p(E)&&D(Se,E.getAttribute(h),h,r,E)}}s&&s(w)}const v=[];if(e.indexOf("[")!==-1){const S=/\[([\w-]+)/g;let w;for(;(w=S.exec(e))!==null;)v.push(w[1])}else v.push(e);le({selector:e,attribute:t,componentTag:r,attributes:a,ComponentFn:n,onInit:s,observed:v.concat(i),onAttributeChange:l,onAttrChange:c,effects:f,declared:Ae,persist:_e}),ue();const ve=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";q().push({selector:e,attribute:t,ComponentFn:n,onInit:s,onSubtreeChange:u,query:ve}),ae(),window[t]=g;function M(){oe()>0?ie(function(){g(document.body)}):g(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",M):M(),g}function F(e){return(e||"").replace(/^#/,"")}function _(e){const t=e===void 0?location.hash:e,n={},r=F(t);if(!r)return n;const o=r.split("&");for(let i=0;i<o.length;i++){const l=o[i];if(!l)continue;const u=l.indexOf(":"),s=u>-1?l.slice(0,u):l,c=u>-1?l.slice(u+1):"";if(s)try{n[s]=decodeURIComponent(c)}catch{n[s]=c}}return n}function fe(e){if(!e)return null;const t=_();return e in t?t[e]:null}function we(e,t){if(!e)return;const n=_();t==null?delete n[e]:n[e]=String(t);const o=Object.keys(n).map(function(i){const l=n[i];return l===""?i:i+":"+encodeURIComponent(l)}).join("&");F(location.hash)!==o&&(location.hash=o)}function he(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function be(e,t){if(!e||!e.hasAttribute("data-ln-hash"))return null;const n=e.getAttribute("data-ln-hash");if(n&&n.trim()!=="")return n.trim();const r=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return r?t?r+"-"+t:r:t||null}function ge(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function pe(e){return!e||typeof e!="string"?null:e.endsWith(".asc")?{fieldOrColumn:e.slice(0,-4),direction:"asc"}:e.endsWith(".desc")?{fieldOrColumn:e.slice(0,-5),direction:"desc"}:null}function Ce(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function me(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),r=e.slice(t+1),o=r?r.split(",").map(function(i){try{return decodeURIComponent(i)}catch{return i}}).filter(Boolean):[];return{key:n,values:o}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=_,window.lnCore.hashGet=fe,window.lnCore.hashSet=we,window.lnCore.hashLinkClick=he,window.lnCore.resolveHashNamespace=be,window.lnCore.hashSortEncode=ge,window.lnCore.hashSortDecode=pe,window.lnCore.hashFilterEncode=Ce,window.lnCore.hashFilterDecode=me);function ye(e,t="-"){if(e==null)return"";const n=t||"-",r=n.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");return String(e).normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase().replace(/[^a-z0-9]+/g,n).replace(new RegExp(`${r}+`,"g"),n).replace(new RegExp(`^${r}+|${r}+$`,"g"),"")}(function(){const e="data-ln-slug-from",t="lnSlug";if(window[t]!==void 0)return;const n={"data-ln-slug-from":{prop:"sourceName",type:"string",read:m,fallback:"",description:"Name of the source input field to derive URL slug from"}},r=te(n);function o(i){if(i.tagName!=="INPUT")return console.warn("[ln-slug] Can only be applied to <input>, got:",i.tagName),this;const l=i.form;if(!l)return console.warn("[ln-slug] Slug input is not inside a <form>:",i),this;ee(this,i,r);const u=l.elements[this.sourceName];if(!u)return console.warn('[ln-slug] Source field "'+this.sourceName+'" not found in form:',i),this;if(typeof u.addEventListener!="function")return console.warn('[ln-slug] Source field "'+this.sourceName+'" is a RadioNodeList (same-name group) — single source field required:',i),this;this.dom=i,this.source=u,this._pristine=i.value==="",this._mirroring=!1;const s=this;return this._onSource=function(){s._pristine&&s._mirror()},this._onSlug=function(){s._mirroring||(s._pristine=s.dom.value==="")},u.addEventListener("input",this._onSource),i.addEventListener("input",this._onSlug),this._pristine&&u.value&&u.value.trim()!==""&&this._mirror(),this}o.prototype._mirror=function(){this._mirroring=!0,this.dom.value=ye(this.source.value),this.dom.dispatchEvent(new Event("input",{bubbles:!0})),this._mirroring=!1},o.prototype.destroy=function(){this.dom[t]&&(this.source.removeEventListener("input",this._onSource),this.dom.removeEventListener("input",this._onSlug),delete this.dom[t])},de(e,t,o,"ln-slug",{attributes:n})})()})();

package/components/ln-slug/ln-slug.schema.json

@@ -0,0 +1,23 @@
+{
+	"$comment": "This file is partly generated. The $comment, component, generator, and each attribute's direction, sources, type, values, fallback, and description keys are owned by the generator and synchronized from JS source code. All other keys are preserved and safe to hand-author. Regenerate with `npm run sync:ln-schemas`.",
+	"component": "ln-slug",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-slug-dev.scss"
+			]
+		},
+		"data-ln-slug-from": {
+			"direction": null,
+			"sources": [
+				"ln-slug-dev.scss",
+				"src/ln-slug.js"
+			],
+			"type": "string",
+			"fallback": "",
+			"description": "Name of the source input field to derive URL slug from"
+		}
+	}
+}

package/{js → components}/ln-slug/src/ln-slug.js

@@ -1,4 +1,5 @@
-import { registerComponent } from '../../ln-core';
+import { registerComponent, defineAttrs, attrSpec, attrStr } from '../../ln-core';
+import { generateSlug } from './slug-model.js';
 
 (function () {
 	const DOM_SELECTOR = 'data-ln-slug-from';
@@ -6,12 +7,11 @@ import { registerComponent } from '../../ln-core';
 
 	if (window[DOM_ATTRIBUTE] !== undefined) return;
 
-	function slugify(s) {
-		return String(s).toLowerCase()
-			.replace(/[^a-z0-9]+/g, '-')
-			.replace(/-+/g, '-')
-			.replace(/^-|-$/g, '');
-	}
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-slug-from': { prop: 'sourceName', type: 'string', read: attrStr, fallback: '', description: 'Name of the source input field to derive URL slug from' }
+	};
+	const ATTR_SPEC = attrSpec(ATTRIBUTES);
 
 	function _component(dom) {
 		if (dom.tagName !== 'INPUT') {
@@ -23,14 +23,14 @@ import { registerComponent } from '../../ln-core';
 			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];
+		defineAttrs(this, dom, ATTR_SPEC);
+		const source = form.elements[this.sourceName];
 		if (!source) {
-			console.warn('[ln-slug] Source field "' + sourceName + '" not found in form:', dom);
+			console.warn('[ln-slug] Source field "' + this.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);
+			console.warn('[ln-slug] Source field "' + this.sourceName + '" is a RadioNodeList (same-name group) — single source field required:', dom);
 			return this;
 		}
 
@@ -53,12 +53,17 @@ import { registerComponent } from '../../ln-core';
 		source.addEventListener('input', this._onSource);
 		dom.addEventListener('input', this._onSlug);
 
+		// Initial check — if source field already has text and slug is pristine, mirror immediately
+		if (this._pristine && source.value && source.value.trim() !== '') {
+			this._mirror();
+		}
+
 		return this;
 	}
 
 	_component.prototype._mirror = function () {
 		this._mirroring = true;
-		this.dom.value = slugify(this.source.value);
+		this.dom.value = generateSlug(this.source.value);
 		this.dom.dispatchEvent(new Event('input', { bubbles: true }));
 		this._mirroring = false;
 	};
@@ -70,5 +75,7 @@ import { registerComponent } from '../../ln-core';
 		delete this.dom[DOM_ATTRIBUTE];
 	};
 
-	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-slug');
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-slug', {
+		attributes: ATTRIBUTES
+	});
 })();

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

@@ -0,0 +1,21 @@
+/**
+ * Generates a clean, URL-safe slug from arbitrary input text.
+ * Performs diacritic stripping, non-alphanumeric replacement, and separator collapsing.
+ * @param {unknown} value
+ * @param {string} [separator='-']
+ * @returns {string}
+ */
+export function generateSlug(value, separator = '-') {
+	if (value === null || value === undefined) return '';
+
+	const sep = separator || '-';
+	const escapedSep = sep.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+
+	return String(value)
+		.normalize('NFD') // Normalize accented characters (e.g. é -> e + ´)
+		.replace(/[\u0300-\u036f]/g, '') // Remove diacritics
+		.toLowerCase()
+		.replace(/[^a-z0-9]+/g, sep) // Replace non-alphanumeric with separator
+		.replace(new RegExp(`${escapedSep}+`, 'g'), sep) // Collapse multiple separators
+		.replace(new RegExp(`^${escapedSep}+|${escapedSep}+$`, 'g'), ''); // Trim leading/trailing separators
+}