@livenetworks/ashlar 1.4.1 → 1.6.0

package/js/ln-upload/src/ln-upload.js

@@ -10,11 +10,11 @@ import { guardBody, dispatch, buildDict, cloneTemplateScoped, fill } from '../..
 	const DEFAULT_ITEM_TEMPLATE_HTML =
 		'<template data-ln-template="ln-upload-item">' +
 			'<li class="ln-upload__item" data-ln-class="ln-upload__item--uploading:uploading, ln-upload__item--error:error, ln-upload__item--deleting:deleting">' +
-				'<svg class="ln-icon" aria-hidden="true"><use data-ln-attr="href:iconHref" href="#ln-file"></use></svg>' +
+				'<svg class="ln-icon" aria-hidden="true"><use data-ln-attr="href:iconHref" href="#ln-icon-file"></use></svg>' +
 				'<span class="ln-upload__name" data-ln-field="name"></span>' +
 				'<span class="ln-upload__size" data-ln-field="sizeText"></span>' +
 				'<button type="button" class="ln-upload__remove" data-ln-upload-action="remove" data-ln-attr="aria-label:removeLabel, title:removeLabel">' +
-					'<svg class="ln-icon" aria-hidden="true"><use href="#ln-x"></use></svg>' +
+					'<svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-x"></use></svg>' +
 				'</button>' +
 				'<div class="ln-upload__progress"><div class="ln-upload__progress-bar"></div></div>' +
 			'</li>' +
@@ -47,7 +47,7 @@ import { guardBody, dispatch, buildDict, cloneTemplateScoped, fill } from '../..
 	function _getIconId(extension) {
 		if (extension === 'docx') extension = 'doc';
 		const supported = ['pdf', 'doc', 'epub'];
-		return supported.includes(extension) ? 'lnc-file-' + extension : 'ln-file';
+		return supported.includes(extension) ? 'ln-icon-custom-file-' + extension : 'ln-icon-file';
 	}
 
 	function _isValidFile(file, acceptString) {
@@ -58,8 +58,7 @@ import { guardBody, dispatch, buildDict, cloneTemplateScoped, fill } from '../..
 	}
 
 	function _initUpload(container) {
-		if (container.hasAttribute('data-ln-upload-initialized')) return;
-		container.setAttribute('data-ln-upload-initialized', 'true');
+		if (container.lnUploadAPI) return;
 
 		_ensureDefaultItemTemplate();
 		const dict = buildDict(container, DICT_SELECTOR);
@@ -87,7 +86,9 @@ import { guardBody, dispatch, buildDict, cloneTemplateScoped, fill } from '../..
 			container.appendChild(input);
 		}
 		const uploadUrl = container.getAttribute(DOM_SELECTOR) || '/files/upload';
-		const uploadContext = container.getAttribute(CONTEXT_ATTR) || '';
+		const uploadContextFallback = container.getAttribute(CONTEXT_ATTR) || '';
+		const deleteUrlPattern = container.getAttribute('data-ln-upload-delete') || 
+			(uploadUrl.includes('/upload') ? uploadUrl.replace(/\/upload\/?$/, '/{id}') : uploadUrl + '/{id}');
 
 		const uploadedFiles = new Map();
 		let fileIdCounter = 0;
@@ -142,7 +143,21 @@ import { guardBody, dispatch, buildDict, cloneTemplateScoped, fill } from '../..
 
 			const formData = new FormData();
 			formData.append('file', file);
-			formData.append('context', uploadContext);
+
+			const gatheredNames = new Set();
+			container.querySelectorAll('input, select, textarea').forEach(function (el) {
+				if (el.name && el.name !== 'file_ids[]' && el.type !== 'file') {
+					if ((el.type === 'checkbox' || el.type === 'radio') && !el.checked) {
+						return;
+					}
+					formData.append(el.name, el.value);
+					gatheredNames.add(el.name);
+				}
+			});
+
+			if (!gatheredNames.has('context') && uploadContextFallback) {
+				formData.append('context', uploadContextFallback);
+			}
 
 			const xhr = new XMLHttpRequest();
 
@@ -244,7 +259,8 @@ import { guardBody, dispatch, buildDict, cloneTemplateScoped, fill } from '../..
 
 			if (item) fill(item, { deleting: true });
 
-			fetch('/files/' + fileData.serverId, {
+			const deleteUrl = deleteUrlPattern.replace('{id}', fileData.serverId);
+			fetch(deleteUrl, {
 				method: 'DELETE',
 				headers: {
 					'X-CSRF-TOKEN': getCsrfToken(),
@@ -322,7 +338,8 @@ import { guardBody, dispatch, buildDict, cloneTemplateScoped, fill } from '../..
 			clear: function () {
 				for (const [, fileData] of uploadedFiles) {
 					if (fileData.serverId) {
-						fetch('/files/' + fileData.serverId, {
+						const deleteUrl = deleteUrlPattern.replace('{id}', fileData.serverId);
+						fetch(deleteUrl, {
 							method: 'DELETE',
 							headers: {
 								'X-CSRF-TOKEN': getCsrfToken(),
@@ -347,7 +364,6 @@ import { guardBody, dispatch, buildDict, cloneTemplateScoped, fill } from '../..
 				uploadedFiles.clear();
 				list.innerHTML = '';
 				updateHiddenInput();
-				container.removeAttribute('data-ln-upload-initialized');
 				delete container.lnUploadAPI;
 			}
 		};

package/js/ln-validate/README.md

@@ -11,6 +11,22 @@ It maintains no custom rules in JavaScript; instead, it relies fully on native H
 1. **Platform First:** Browsers compile and execute rules in native C++ instantly. `ln-validate` simply acts as a visual layer: translating native `ValidityState` properties into visible HTML elements on demand.
 2. **The Touch Gate:** To prevent annoying page-load errors, validation is completely visual-silent until a field receives its first user interaction (`input` or `change`), setting its internal state `_touched = true`.
 3. **The Custom Escape Hatch:** Validation rules the browser cannot express (such as checking if an email is taken via a server lookup, or confirming passwords match) are routed through asynchronous `set-custom` / `clear-custom` events.
+4. **Owns Browser Validation:** The moment a form contains at least one
+   `data-ln-validate` field, that field's constructor injects
+   `novalidate` on the host `<form>` (via `field.form`, so `form="id"`
+   attribute association works too). Authors never write `novalidate`
+   by hand. A form with zero `data-ln-validate` fields is untouched and
+   keeps native browser validation as the default. The injection is
+   idempotent and one-way — it is never removed on field `destroy()`,
+   since other validated fields on the same form may still own the
+   gate.
+5. **Owns the Submit Gate:** The same field that injects `novalidate`
+   also attaches (once per form) a `submit` listener: on submit, it
+   dispatches `ln-validate:request-validate` to collect invalid fields;
+   if any exist, it calls `preventDefault()`, sorts them by document
+   position, and focuses the first one. Runs on every HTTP method — GET
+   included, exactly like the native validation it replaces. `ln-form`
+   has no role in this at all.
 
 ---
 
@@ -98,6 +114,7 @@ input.lnValidate.destroy();
 | :--- | :--- | :--- |
 | `ln-validate:set-custom` | `{ error: String }` | Injects a custom error key, highlights the field as invalid. |
 | `ln-validate:clear-custom` | `{ error: String }` / `{}` | Clears a specific custom error, or all custom errors at once. |
+| `ln-validate:request-validate` | `{ invalidFields: Array }` | Dispatched by `ln-validate`'s own submit gate (see Philosophy §5). Forces validation (sets `_touched = true`, calls `validate()`) and pushes the field element to the `invalidFields` array if invalid. |
 
 ---
 
@@ -106,3 +123,58 @@ input.lnValidate.destroy();
 - **Skipping the `.form-element` wrapper:** `ln-validate` locates sibling error elements relative to the closest `.form-element` ancestor. If you omit the wrapper class, no error lists will be toggled.
 - **Relying on Native browser CSS (`:invalid`):** The browser applies `:invalid` to empty required fields on page load. **Always** use our custom classes `.ln-validate-valid` and `.ln-validate-invalid` for visual borders and focus states.
 - **Injecting custom errors without validating:** Dispatching `ln-validate:set-custom` updates visual classes, but it **does not** bubble an `:invalid` event. If you need form-level coordinators (`ln-form`) to react immediately, call `input.lnValidate.validate()` right after injecting.
+- **Expecting `novalidate` in your own markup:** Don't write it by hand
+  — `ln-validate` injects it on the host form as soon as one field
+  initializes. Writing it yourself is harmless (the injection checks
+  `hasAttribute` first) but unnecessary.
+
+---
+
+## 🔧 Internals
+
+Source: `js/ln-validate/ln-validate.js` (~160 lines). Imports only `dispatch`/`registerComponent` from `ln-core` — no sibling-component imports.
+
+### State
+
+Three fields per instance (`dom.lnValidate`): `dom`, `_touched` (bool), `_customErrors` (Set). No cached error-`<li>` array, no cached `.form-element` ancestor reference, no debounce — every `validate()` call re-queries `parent.querySelectorAll` and recomputes from `dom.checkValidity()`. Cheap because the query is scoped to one field's wrapper and validity checks are microsecond-fast.
+
+### Listener discriminator
+
+`input`+`change` fire on `<input>`/`<textarea>`; `change`-only fires on `<select>`, checkbox, radio (`input` never fires on these). This exact fork is mirrored in `ln-form.fill()`, `ln-form.reset()`, and `ln-autosave`'s restore path — not enforced by a shared helper, just a documented invariant all three must keep in sync.
+
+### `validate()` flow
+
+1. `nativeValid = dom.checkValidity()`; `isValid = nativeValid && _customErrors.size === 0`.
+2. Walks the field's `.form-element`'s `[data-ln-validate-error]` `<li>`s; keys present in `ERROR_MAP` (`required`/`typeMismatch`/`tooShort`/`tooLong`/`patternMismatch`/`rangeUnderflow`/`rangeOverflow`) toggle `hidden` off `validity[prop]`; keys NOT in the map are skipped — that's the mechanism that lets native and custom errors share one `<ul>` without conflict.
+3. Toggles `.ln-validate-valid`/`.ln-validate-invalid`, dispatches `:valid`/`:invalid` `{ target, field: dom.name }`.
+4. If the field has no `.form-element` ancestor, error rendering is skipped but the class toggle and dispatch still run.
+
+`validate()` never reads `_touched` — it always renders. `_touched` instead gates whether the *listener handlers* call it, so the submit gate can force-validate an untouched field on demand.
+
+### Custom-error asymmetry
+
+`set-custom` (`_onSetCustom`) adds to `_customErrors`, unhides the matching `<li>`, flips classes to invalid — but does **not** call `validate()` or dispatch `:invalid`. The caller already knows the field is invalid; a coordinator that needs `ln-form`'s submit gate to react must call `instance.validate()` itself afterwards.
+
+`clear-custom` (`_onClearCustom`) is the counterweight: clear-one or clear-all, then `if (_touched) validate()` — removing one custom error can leave others active, leave native errors active, or leave the field fully valid, and only `validate()` can recompute which.
+
+### The submit gate
+
+The first `data-ln-validate` field on a form injects `novalidate` (idempotent, one-way, never removed on `destroy()`) and attaches one `submit` listener to the form, guarded by a `form._lnValidateGateBound` marker so N fields produce exactly one listener. On submit: dispatches `ln-validate:request-validate`; every field's own handler force-validates and pushes itself into `invalidFields` if invalid; if any exist, `preventDefault()`, sort by document position, focus the first. Runs on every HTTP method, exactly like the native validation it replaces. `ln-form` has no involvement — it never listens for `submit`. `ln-data-coordinator`'s own method gate reads `e.defaultPrevented` first, so it never claims a submit this gate already blocked.
+
+### `isValid` getter
+
+Pure read (`dom.checkValidity() && _customErrors.size === 0`) — no side effects, no rendering, no `_touched` mutation. For "is this field currently valid?" checks that shouldn't trigger the render pipeline.
+
+### `reset()` / `destroy()`
+
+`reset()`: `_touched = false`, clears `_customErrors`, removes valid/invalid classes, hides every `[data-ln-validate-error]` (native and custom alike). Does NOT dispatch `:valid`/`:invalid` (the field is "untouched," not "newly valid") and does NOT touch `dom.value` — the form element owns that; `ln-form.reset()` calls the native `dom.reset()` first, then dispatches synthetic `input`/`change` per field, then calls `instance.reset()`.
+
+`destroy()` removes the four listeners (`input`, `change`, `set-custom`, `clear-custom`), removes the CSS classes (but leaves error `<li>` visibility as-is — a different intent than `reset()`), dispatches `:destroyed`, deletes the instance. Idempotent via a `DOM_ATTRIBUTE` guard.
+
+### MutationObserver
+
+`registerComponent` wires the shared observer: `childList` upgrades newly-inserted `[data-ln-validate]` fields, `attributes` (filtered to `data-ln-validate`) upgrades the attribute added to an existing element. Removal is not observed — call `instance.destroy()` before detaching. Changes to `data-ln-validate-error`/`-errors` are not observed either (typically static server-rendered markup) — a manual `instance.validate()` call re-renders if that markup changes at runtime.
+
+### Cross-component contract
+
+`ln-form` listens for bubbling `:valid`/`:invalid` to re-evaluate submit-button state, and dispatches synthetic `input`/`change` on `fill()`/`reset()` using the identical listener discriminator; `ln-autosave` does the same on restore. None of these components import each other — the wiring is pure platform event flow, so keeping the discriminator in sync across all three files is a manual invariant, not a compile-time one.

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

@@ -0,0 +1,15 @@
+@use '../../scss/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Validation Input Missing ID: input, select, textarea elements utilizing data-ln-validate must have an ID
+	input[data-ln-validate]:not([id]),
+	select[data-ln-validate]:not([id]),
+	textarea[data-ln-validate]:not([id]) {
+		@include dev-inline-error("data-ln-validate element is missing required 'id' attribute");
+	}
+
+	// 2. Validation Nesting check: data-ln-validate must be wrapped inside .form-element or data-ln-form
+	[data-ln-validate]:not(.form-element [data-ln-validate]):not([data-ln-form] [data-ln-validate]) {
+		@include dev-dom-error("data-ln-validate must be a child of .form-element or data-ln-form wrapper");
+	}
+}

package/js/ln-validate/ln-validate.js

@@ -1 +1 @@
-(function(){"use strict";function C(t,e,f){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:f||{}}))}function w(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){w(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function L(t,e,f,h){if(t.nodeType!==1)return;const v=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",p=Array.from(t.querySelectorAll(v));t.matches&&t.matches(v)&&p.push(t);for(const a of p)a[f]||(a[f]=new h(a))}function O(t,e,f,h,m={}){const v=m.extraAttributes||[],p=m.onAttributeChange||null,a=m.onInit||null;function n(i){const c=i||document.body;L(c,t,e,f),a&&a(c)}return w(function(){const i=new MutationObserver(function(l){for(let u=0;u<l.length;u++){const s=l[u];if(s.type==="childList"){for(let r=0;r<s.addedNodes.length;r++){const o=s.addedNodes[r];o.nodeType===1&&(L(o,t,e,f),a&&a(o))}for(let r=0;r<s.removedNodes.length;r++){const o=s.removedNodes[r];if(o.nodeType===1){const y=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",g=Array.from(o.querySelectorAll(y));o.matches&&o.matches(y)&&g.push(o);for(let _=0;_<g.length;_++){const b=g[_];if(!document.contains(b)){const E=b[e];E&&typeof E.destroy=="function"&&E.destroy()}}}}}else s.type==="attributes"&&(p&&s.target[e]?p(s.target,s.attributeName):(L(s.target,t,e,f),a&&a(s.target)))}});let c=[];if(t.indexOf("[")!==-1){const l=/\[([\w-]+)/g;let u;for(;(u=l.exec(t))!==null;)c.push(u[1])}else c.push(t);i.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:c.concat(v)})},h),window[e]=n,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){n(document.body)}):n(document.body),n}const S={};function A(t,e){S[t]=e}function M(t){return S[t]||{ingress:e=>e,egress:e=>e}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=A,window.lnCore.getDataMapper=M),(function(){const t="data-ln-validate",e="lnValidate",f="data-ln-validate-errors",h="data-ln-validate-error",m="ln-validate-valid",v="ln-validate-invalid",p={required:"valueMissing",typeMismatch:"typeMismatch",tooShort:"tooShort",tooLong:"tooLong",patternMismatch:"patternMismatch",rangeUnderflow:"rangeUnderflow",rangeOverflow:"rangeOverflow"};if(window[e]!==void 0)return;function a(n){this.dom=n,this._touched=!1,this._customErrors=new Set;const i=this,c=n.tagName,l=n.type,u=c==="SELECT"||l==="checkbox"||l==="radio";return this._onInput=function(){i._touched=!0,i.validate()},this._onChange=function(){i._touched=!0,i.validate()},this._onSetCustom=function(s){const r=s.detail&&s.detail.error;if(!r)return;i._customErrors.add(r),i._touched=!0;const o=n.closest(".form-element");if(o){const d=o.querySelector("["+h+'="'+r+'"]');d&&d.classList.remove("hidden")}n.classList.remove(m),n.classList.add(v)},this._onClearCustom=function(s){const r=s.detail&&s.detail.error,o=n.closest(".form-element");if(r){if(i._customErrors.delete(r),o){const d=o.querySelector("["+h+'="'+r+'"]');d&&d.classList.add("hidden")}}else i._customErrors.forEach(function(d){if(o){const y=o.querySelector("["+h+'="'+d+'"]');y&&y.classList.add("hidden")}}),i._customErrors.clear();i._touched&&i.validate()},u||n.addEventListener("input",this._onInput),n.addEventListener("change",this._onChange),n.addEventListener("ln-validate:set-custom",this._onSetCustom),n.addEventListener("ln-validate:clear-custom",this._onClearCustom),this}a.prototype.validate=function(){const n=this.dom,i=n.validity,l=n.checkValidity()&&this._customErrors.size===0,u=n.closest(".form-element");if(u){const r=u.querySelector("["+f+"]");if(r){const o=r.querySelectorAll("["+h+"]");for(let d=0;d<o.length;d++){const y=o[d].getAttribute(h),g=p[y];g&&(i[g]?o[d].classList.remove("hidden"):o[d].classList.add("hidden"))}}}return n.classList.toggle(m,l),n.classList.toggle(v,!l),C(n,l?"ln-validate:valid":"ln-validate:invalid",{target:n,field:n.name}),l},a.prototype.reset=function(){this._touched=!1,this._customErrors.clear(),this.dom.classList.remove(m,v);const n=this.dom.closest(".form-element");if(n){const i=n.querySelectorAll("["+h+"]");for(let c=0;c<i.length;c++)i[c].classList.add("hidden")}},Object.defineProperty(a.prototype,"isValid",{get:function(){return this.dom.checkValidity()&&this._customErrors.size===0}}),a.prototype.destroy=function(){this.dom[e]&&(this.dom.removeEventListener("input",this._onInput),this.dom.removeEventListener("change",this._onChange),this.dom.removeEventListener("ln-validate:set-custom",this._onSetCustom),this.dom.removeEventListener("ln-validate:clear-custom",this._onClearCustom),this.dom.classList.remove(m,v),C(this.dom,"ln-validate:destroyed",{target:this.dom}),delete this.dom[e])},O(t,e,a,"ln-validate")})()})();
+(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 w={};function D(t,e){w[t]||(w[t]=document.querySelector('[data-ln-template="'+t+'"]'));const r=w[t];return r?r.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function C(t,e,r){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r||{}}))}function S(t,e){if(!t||!e)return t;const r=t.querySelectorAll("[data-ln-field]");for(let o=0;o<r.length;o++){const s=r[o],n=s.getAttribute("data-ln-field");e[n]!=null&&(s.textContent=e[n])}const c=t.querySelectorAll("[data-ln-attr]");for(let o=0;o<c.length;o++){const s=c[o],n=s.getAttribute("data-ln-attr").split(",");for(let i=0;i<n.length;i++){const a=n[i].trim().split(":");if(a.length!==2)continue;const f=a[0].trim(),p=a[1].trim();e[p]!=null&&s.setAttribute(f,e[p])}}const u=t.querySelectorAll("[data-ln-show]");for(let o=0;o<u.length;o++){const s=u[o],n=s.getAttribute("data-ln-show");n in e&&s.classList.toggle("hidden",!e[n])}const l=t.querySelectorAll("[data-ln-class]");for(let o=0;o<l.length;o++){const s=l[o],n=s.getAttribute("data-ln-class").split(",");for(let i=0;i<n.length;i++){const a=n[i].trim().split(":");if(a.length!==2)continue;const f=a[0].trim(),p=a[1].trim();p in e&&s.classList.toggle(f,!!e[p])}}return t}function M(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 A(t,e){if(!t||!e)return t;const r=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;r.nextNode();){const l=r.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]:""},u=Array.from(t.querySelectorAll("*"));t.nodeType===1&&u.push(t);for(let l=0;l<u.length;l++){const o=u[l],s=o.attributes;for(let n=0;n<s.length;n++){const i=s[n];i.value.indexOf("{{")!==-1&&o.setAttribute(i.name,i.value.replace(/\{\{\s*(\w+)\s*\}\}/g,c))}}return t}function N(t,e,r,c,u,l){const o={};for(let n=0;n<t.children.length;n++){const i=t.children[n],a=i.getAttribute("data-ln-key");a&&(o[a]=i)}const s=document.createDocumentFragment();for(let n=0;n<e.length;n++){const i=e[n],a=String(c(i));let f=o[a];if(f)u(f,i,n);else{const p=D(r,l);if(!p||(A(p,i),f=p.firstElementChild,!f))continue;f.setAttribute("data-ln-key",a),u(f,i,n)}s.appendChild(f)}t.textContent="",t.appendChild(s)}function O(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){O(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function b(t,e,r,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[r]||(s[r]=new c(s))}function V(t,e,r,c,u={}){const l=u.extraAttributes||[],o=u.onAttributeChange||null,s=u.onInit||null;function n(i){const a=i||document.body;b(a,t,e,r),s&&s(a)}return O(function(){const i=new MutationObserver(function(f){for(let p=0;p<f.length;p++){const h=f[p];if(h.type==="childList"){for(let m=0;m<h.addedNodes.length;m++){const d=h.addedNodes[m];d.nodeType===1&&(b(d,t,e,r),s&&s(d))}for(let m=0;m<h.removedNodes.length;m++){const d=h.removedNodes[m];if(d.nodeType===1){const g=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",y=Array.from(d.querySelectorAll(g));d.matches&&d.matches(g)&&y.push(d);for(let _=0;_<y.length;_++){const T=y[_];if(!document.contains(T)){const E=T[e];E&&typeof E.destroy=="function"&&E.destroy()}}}}}else h.type==="attributes"&&(o&&h.target[e]?o(h.target,h.attributeName):(b(h.target,t,e,r),s&&s(h.target)))}});let a=[];if(t.indexOf("[")!==-1){const f=/\[([\w-]+)/g;let p;for(;(p=f.exec(t))!==null;)a.push(p[1])}else a.push(t);i.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:a.concat(l)})},c),window[e]=n,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){n(document.body)}):n(document.body),n}const x={};function F(t,e){x[t]=e}function I(t){return x[t]||{ingress:e=>e,egress:e=>e}}const q={};function R(t,e){if(!t||typeof e!="object")return;const r=t.toLowerCase().split("-")[0];q[r]=e}function j(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return q[e]||null}R("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=F,window.lnCore.getDataMapper=I,window.lnCore.registerLocaleFallback=R,window.lnCore.getLocaleFallback=j,window.lnCore.fillTemplate=A,window.lnCore.fill=S,window.lnCore.lnFill=M,window.lnCore.renderList=N);function k(t){return(t||"").replace(/^#/,"")}function L(t){const e=t===void 0?location.hash:t,r={},c=k(e);if(!c)return r;const u=c.split("&");for(let l=0;l<u.length;l++){const o=u[l];if(!o)continue;const s=o.indexOf(":"),n=s>-1?o.slice(0,s):o,i=s>-1?o.slice(s+1):"";if(n)try{r[n]=decodeURIComponent(i)}catch{r[n]=i}}return r}function B(t){if(!t)return null;const e=L();return t in e?e[t]:null}function P(t,e){if(!t)return;const r=L();e==null?delete r[t]:r[t]=String(e);const u=Object.keys(r).map(function(l){const o=r[l];return o===""?l:l+":"+encodeURIComponent(o)}).join("&");k(location.hash)!==u&&(location.hash=u)}function W(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=L,window.lnCore.hashGet=B,window.lnCore.hashSet=P,window.lnCore.hashLinkClick=W),(function(){const t="data-ln-validate",e="lnValidate",r="data-ln-validate-errors",c="data-ln-validate-error",u="ln-validate-valid",l="ln-validate-invalid",o={required:"valueMissing",typeMismatch:"typeMismatch",tooShort:"tooShort",tooLong:"tooLong",patternMismatch:"patternMismatch",rangeUnderflow:"rangeUnderflow",rangeOverflow:"rangeOverflow"};if(window[e]!==void 0)return;function s(n){this.dom=n,this._touched=!1,this._customErrors=new Set;const i=this,a=n.tagName,f=n.type,p=a==="SELECT"||f==="checkbox"||f==="radio";this._onInput=function(){i._touched=!0,i.validate()},this._onChange=function(){i._touched=!0,i.validate()},this._onSetCustom=function(m){const d=m.detail&&m.detail.error;if(!d)return;i._customErrors.add(d),i._touched=!0;const v=n.closest(".form-element");if(v){const g=v.querySelector("["+c+'="'+d+'"]');g&&g.classList.remove("hidden")}n.classList.remove(u),n.classList.add(l),n.setAttribute("aria-invalid","true")},this._onClearCustom=function(m){const d=m.detail&&m.detail.error,v=n.closest(".form-element");if(d){if(i._customErrors.delete(d),v){const g=v.querySelector("["+c+'="'+d+'"]');g&&g.classList.add("hidden")}}else i._customErrors.forEach(function(g){if(v){const y=v.querySelector("["+c+'="'+g+'"]');y&&y.classList.add("hidden")}}),i._customErrors.clear();i._touched&&i.validate()},p||n.addEventListener("input",this._onInput),n.addEventListener("change",this._onChange),n.addEventListener("ln-validate:set-custom",this._onSetCustom),n.addEventListener("ln-validate:clear-custom",this._onClearCustom);const h=n.form;return h&&(h.hasAttribute("novalidate")||h.setAttribute("novalidate",""),this._onFormReset=function(){i.reset()},this._onValidateRequest=function(m){i._touched=!0,!i.validate()&&m.detail&&m.detail.invalidFields&&m.detail.invalidFields.push(i.dom)},h.addEventListener("reset",this._onFormReset),h.addEventListener("ln-validate:request-validate",this._onValidateRequest),h._lnValidateGateBound||(h._lnValidateGateBound=!0,h.addEventListener("submit",function(m){const d={invalidFields:[]};C(h,"ln-validate:request-validate",d),d.invalidFields.length>0&&(m.preventDefault(),d.invalidFields.sort((v,g)=>v.compareDocumentPosition(g)&Node.DOCUMENT_POSITION_PRECEDING?-1:1),d.invalidFields[0].focus())}))),this}s.prototype.validate=function(){const n=this.dom,i=n.validity,f=n.checkValidity()&&this._customErrors.size===0,p=n.closest(".form-element");if(p){const m=p.querySelector("["+r+"]");if(m){const d=m.querySelectorAll("["+c+"]");for(let v=0;v<d.length;v++){const g=d[v].getAttribute(c),y=o[g];y&&(i[y]?d[v].classList.remove("hidden"):d[v].classList.add("hidden"))}}}return n.classList.toggle(u,f),n.classList.toggle(l,!f),n.setAttribute("aria-invalid",f?"false":"true"),C(n,f?"ln-validate:valid":"ln-validate:invalid",{target:n,field:n.name}),f},s.prototype.reset=function(){this._touched=!1,this._customErrors.clear(),this.dom.classList.remove(u,l),this.dom.removeAttribute("aria-invalid");const n=this.dom.closest(".form-element");if(n){const i=n.querySelectorAll("["+c+"]");for(let a=0;a<i.length;a++)i[a].classList.add("hidden")}},Object.defineProperty(s.prototype,"isValid",{get:function(){return this.dom.checkValidity()&&this._customErrors.size===0}}),s.prototype.destroy=function(){if(!this.dom[e])return;this.dom.removeEventListener("input",this._onInput),this.dom.removeEventListener("change",this._onChange),this.dom.removeEventListener("ln-validate:set-custom",this._onSetCustom),this.dom.removeEventListener("ln-validate:clear-custom",this._onClearCustom);const n=this.dom.form;n&&(this._onFormReset&&n.removeEventListener("reset",this._onFormReset),this._onValidateRequest&&n.removeEventListener("ln-validate:request-validate",this._onValidateRequest)),this.dom.classList.remove(u,l),this.dom.removeAttribute("aria-invalid"),C(this.dom,"ln-validate:destroyed",{target:this.dom}),delete this.dom[e]},V(t,e,s,"ln-validate")})()})();

package/js/ln-validate/src/ln-validate.js

@@ -54,6 +54,7 @@ import { dispatch, registerComponent } from '../../ln-core';
 			}
 			dom.classList.remove(CSS_VALID);
 			dom.classList.add(CSS_INVALID);
+			dom.setAttribute('aria-invalid', 'true');
 		};
 
 		this._onClearCustom = function (e) {
@@ -86,6 +87,57 @@ import { dispatch, registerComponent } from '../../ln-core';
 		dom.addEventListener('ln-validate:set-custom', this._onSetCustom);
 		dom.addEventListener('ln-validate:clear-custom', this._onClearCustom);
 
+		const form = dom.form;
+		if (form) {
+			// One validated field is enough to own the form's gate —
+			// browser bubbles must yield to ln-validate's own error display.
+			if (!form.hasAttribute('novalidate')) {
+				form.setAttribute('novalidate', '');
+			}
+
+			this._onFormReset = function () {
+				self.reset();
+			};
+			this._onValidateRequest = function (e) {
+				self._touched = true;
+				const isValid = self.validate();
+				if (!isValid && e.detail && e.detail.invalidFields) {
+					e.detail.invalidFields.push(self.dom);
+				}
+			};
+			form.addEventListener('reset', this._onFormReset);
+			form.addEventListener('ln-validate:request-validate', this._onValidateRequest);
+
+			// Submit gate — attached once per form, by whichever validated
+			// field initializes first (marker lives on the form itself,
+			// same one-shot-guard shape as ln-fill's _fillBound). Runs on
+			// every method, GET included — this is a straight replacement
+			// for the native browser validation `novalidate` just silenced
+			// above, and native validation never had a method condition
+			// either. ln-data-coordinator's own POST/PUT/PATCH method gate
+			// for the write pipeline is a separate, later decision — it
+			// reads e.defaultPrevented first, so it never claims a submit
+			// this gate already blocked.
+			if (!form._lnValidateGateBound) {
+				form._lnValidateGateBound = true;
+				form.addEventListener('submit', function (e) {
+					const validationDetail = { invalidFields: [] };
+					dispatch(form, 'ln-validate:request-validate', validationDetail);
+
+					if (validationDetail.invalidFields.length > 0) {
+						e.preventDefault();
+						validationDetail.invalidFields.sort((a, b) => {
+							return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_PRECEDING ? -1 : 1;
+						});
+						validationDetail.invalidFields[0].focus();
+					}
+					// Valid — nothing left to do. Native submit continues;
+					// ln-data-coordinator (document, bubble phase) or plain
+					// HTML/ln-ajax decides what happens to it next.
+				});
+			}
+		}
+
 		return this;
 	}
 
@@ -118,6 +170,9 @@ import { dispatch, registerComponent } from '../../ln-core';
 		dom.classList.toggle(CSS_VALID, isValid);
 		dom.classList.toggle(CSS_INVALID, !isValid);
 
+		// Manage ARIA invalid attribute
+		dom.setAttribute('aria-invalid', isValid ? 'false' : 'true');
+
 		// Emit event
 		const eventName = isValid ? 'ln-validate:valid' : 'ln-validate:invalid';
 		dispatch(dom, eventName, { target: dom, field: dom.name });
@@ -129,6 +184,7 @@ import { dispatch, registerComponent } from '../../ln-core';
 		this._touched = false;
 		this._customErrors.clear();
 		this.dom.classList.remove(CSS_VALID, CSS_INVALID);
+		this.dom.removeAttribute('aria-invalid');
 
 		const parent = this.dom.closest('.form-element');
 		if (parent) {
@@ -149,7 +205,15 @@ import { dispatch, registerComponent } from '../../ln-core';
 		this.dom.removeEventListener('change', this._onChange);
 		this.dom.removeEventListener('ln-validate:set-custom', this._onSetCustom);
 		this.dom.removeEventListener('ln-validate:clear-custom', this._onClearCustom);
+
+		const form = this.dom.form;
+		if (form) {
+			if (this._onFormReset) form.removeEventListener('reset', this._onFormReset);
+			if (this._onValidateRequest) form.removeEventListener('ln-validate:request-validate', this._onValidateRequest);
+		}
+
 		this.dom.classList.remove(CSS_VALID, CSS_INVALID);
+		this.dom.removeAttribute('aria-invalid');
 		dispatch(this.dom, 'ln-validate:destroyed', { target: this.dom });
 		delete this.dom[DOM_ATTRIBUTE];
 	};

package/package.json

@@ -1,55 +1,61 @@
-{
-  "name": "@livenetworks/ashlar",
-  "version": "1.4.1",
-  "description": "LiveNetworks unified frontend library - CSS framework and vanilla JS components",
-  "license": "MIT",
-  "author": "Live Networks",
-  "type": "module",
-  "publishConfig": {
-    "access": "public"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/livenetworks/ln-ashlar.git"
-  },
-  "homepage": "https://github.com/livenetworks/ln-ashlar#readme",
-  "bugs": "https://github.com/livenetworks/ln-ashlar/issues",
-  "keywords": [
-    "css",
-    "scss",
-    "design-system",
-    "frontend",
-    "components",
-    "vanilla-js"
-  ],
-  "files": [
-    "scss/",
-    "js/"
-  ],
-  "exports": {
-    "./scss/*": "./scss/*",
-    "./js/*": "./js/*"
-  },
-  "scripts": {
-    "dev": "node scripts/build.mjs --watch",
-    "build": "node scripts/build.mjs && npm run build:demos",
-    "build:demos": "npm run build:demo-index && npm run build:demo-admin && npm run build:demo-docuflow",
-    "build:demo-index": "sass demo/index.scss demo/index.css --no-source-map --style=compressed",
-    "build:demo-admin": "sass demo/admin/src/admin.scss demo/admin/dist/admin.css --no-source-map --style=compressed && cp demo/admin/src/demo.js demo/admin/dist/demo.js && node demo/admin/src/build-pages.mjs",
-    "build:demo-docuflow": "sass demo/docuflow/docuflow.scss demo/docuflow/dist/docuflow.css --no-source-map --style=compressed"
-  },
-  "devDependencies": {
-    "@tabler/icons": "^3.41.1",
-    "flag-icons": "^7.5.0",
-    "sass-embedded": "^1.83.0",
-    "vite": "^6.0.0"
-  },
-  "peerDependencies": {
-    "tom-select": "^2.0.0"
-  },
-  "peerDependenciesMeta": {
-    "tom-select": {
-      "optional": true
-    }
-  }
-}
+{
+  "name": "@livenetworks/ashlar",
+  "version": "1.6.0",
+  "description": "LiveNetworks unified frontend library - CSS framework and vanilla JS components",
+  "license": "MIT",
+  "author": "Live Networks",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/livenetworks/ln-ashlar.git"
+  },
+  "homepage": "https://github.com/livenetworks/ln-ashlar#readme",
+  "bugs": "https://github.com/livenetworks/ln-ashlar/issues",
+  "keywords": [
+    "css",
+    "scss",
+    "design-system",
+    "frontend",
+    "components",
+    "vanilla-js"
+  ],
+  "files": [
+    "scss/",
+    "js/"
+  ],
+  "exports": {
+    "./scss/*": "./scss/*",
+    "./js/*": "./js/*"
+  },
+  "scripts": {
+    "test": "node --test \"tests/*.test.js\"",
+    "test:p0": "node --test tests/p0-data-integrity.test.js",
+    "dev": "node scripts/build.mjs --watch",
+    "build": "node scripts/build.mjs && npm run build:dev-css && npm run build:demos",
+    "build:demos": "npm run build:demo-index && npm run build:demo-admin && npm run build:demo-docuflow && npm run build:demo-spa",
+    "build:dev-css": "sass scss/ln-ashlar-dev.scss demo/dist/ln-ashlar-dev.css --no-source-map --style=compressed",
+    "build:demo-index": "sass demo/index.scss demo/index.css --no-source-map --style=compressed",
+    "build:demo-admin": "sass demo/admin/src/admin.scss demo/admin/dist/admin.css --no-source-map --style=compressed && cp demo/admin/src/demo.js demo/admin/dist/demo.js && node demo/admin/src/build-pages.mjs",
+    "build:demo-docuflow": "sass demo/docuflow/docuflow.scss demo/docuflow/dist/docuflow.css --no-source-map --style=compressed",
+    "build:demo-spa": "node demo/spa/build.mjs"
+  },
+  "devDependencies": {
+    "@tabler/icons": "^3.41.1",
+    "fake-indexeddb": "^6.2.4",
+    "flag-icons": "^7.5.0",
+    "puppeteer-core": "^25.1.0",
+    "sass-embedded": "^1.83.0",
+    "vite": "^6.0.0"
+  },
+  "peerDependencies": {
+    "tom-select": "^2.0.0"
+  },
+  "peerDependenciesMeta": {
+    "tom-select": {
+      "optional": true
+    }
+  }
+}

package/scss/base/_global.scss

@@ -14,8 +14,8 @@ body {
 }
 
 body {
-	font-size: var(--text-body-md);
-	line-height: var(--lh-body-md);
+	font-size: var(--font-size);
+	line-height: var(--line-height);
 	color: var(--color-fg);
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;

package/scss/base/_typography.scss

@@ -52,9 +52,8 @@ h6 {
 }
 
 p {
-	font-size: var(--text-body-md);
+	@include typography(body-md);
 	color: var(--color-fg);
-	line-height: 1.75;
 	margin-bottom: var(--size-md);
 
 	&:last-child {

package/scss/components/_date.scss

@@ -19,3 +19,4 @@
 		pointer-events: none;
 	}
 }
+

package/scss/components/_dropdown.scss

@@ -6,11 +6,6 @@
 
 [data-ln-dropdown-menu] {
 	@include dropdown-menu;
-
-	// Reset right-alignment when teleported to body to prevent 100% width stretching
-	body > & {
-		right: auto;
-	}
 }
 
 @keyframes ln-dropdown-in {

package/scss/components/_editor.scss

@@ -0,0 +1,5 @@
+@use '../config/mixins' as *;
+
+[data-ln-editor] {
+	@include editor;
+}

package/scss/components/_filter.scss

@@ -0,0 +1,26 @@
+@use '../config/mixins' as *;
+
+// Filter dropdown content chrome (search input + options list; NO clear button —
+// the data-ln-filter-reset "All" sentinel is the reset affordance).
+// Floating shell is supplied separately:
+//   • popover-driven (ln-filter static): @mixin popover on the [data-ln-popover] wrapper
+// ln-table dynamic clone: floating-panel + box below
+.column-filter-dropdown {
+	@include filter-dropdown;
+}
+
+// ln-table appends its cloned dropdown directly into the <th> and
+// manages its own open/close — it does NOT route through ln-popover, so it
+// needs the floating shell applied here (the popover path gets it from
+// @mixin popover instead).
+[data-ln-table] .column-filter-dropdown {
+	@include floating-panel;
+	position: absolute;
+	z-index: var(--z-dropdown);
+	top: 100%;
+	right: 0;
+	left: auto;
+	margin-top: var(--size-xs);
+	min-width: 14rem;
+	padding: var(--size-sm);
+}

package/scss/components/_form.scss

@@ -68,6 +68,10 @@ label:not(:has(> input)) {
 	@include pills-switch;
 }
 
+.pills-segmented {
+	@include pills-segmented;
+}
+
 .pill {
 	@include pill;
 }
@@ -80,6 +84,9 @@ label:not(:has(> input)) {
 	@include pill-switch;
 }
 
+.search {
+	@include search;
+}
 
 .form-actions {
 	@include form-actions;

package/scss/components/_ln-table.scss

@@ -2,20 +2,18 @@
 
 [data-ln-table] {
 	@include ln-table;
-	@include ln-table-column-filter;
-	@include ln-table-sort;
 }
 
 // In-thead toolbar — first thead row's colspan th.
 [data-ln-table] thead > tr:first-child:has(> th[colspan]) > th {
 	@include ln-table-thead-toolbar;
 }
-
+[data-ln-table] > header,
 .ln-table__toolbar {
 	@include ln-table-toolbar;
 }
 
-.ln-table__toolbar label:has(> input[type="search"]) > input {
+.ln-table__toolbar label:has(> input[type="search"]) {
 	@include ln-table-toolbar-search;
 }
 
@@ -26,7 +24,7 @@
 .table-container {
 	@include ln-table-card-mode;
 }
-
+[data-ln-table] > footer,
 .ln-table__footer {
 	@include ln-table-footer;
 }
@@ -58,3 +56,14 @@
 .ln-table__spacer {
 	@include ln-table-spacer-row;
 }
+
+.ln-table__placeholder {
+	@include ln-table-placeholder-row;
+}
+
+.ln-table--loading tbody {
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+

package/scss/components/_sort.scss

@@ -0,0 +1,10 @@
+@use '../config/mixins' as *;
+
+[data-ln-sort] { @include sort; }
+
+th:hover [data-ln-sort] { opacity: 0.7; }
+
+[data-ln-sort][data-ln-sort-state="asc"],
+[data-ln-sort][data-ln-sort-state="desc"] {
+	@include sort-active;
+}