@livenetworks/ashlar 1.6.1 → 2.0.0

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

@@ -0,0 +1,78 @@
+/**
+ * Parses accept string into normalized array of lowercase extensions and mime types.
+ * @param {string|null|undefined} acceptStr
+ * @returns {string[]|null}
+ */
+export function parseAcceptExtensions(acceptStr) {
+	if (!acceptStr) return null;
+	const parts = String(acceptStr)
+		.split(',')
+		.map(s => s.trim().toLowerCase())
+		.filter(Boolean)
+		.map(s => (s.startsWith('.') ? s.slice(1) : s));
+	return parts.length ? parts : null;
+}
+
+/**
+ * Extracts file extension from filename.
+ * @param {string|null|undefined} filename
+ * @returns {string}
+ */
+export function getFileExtension(filename) {
+	if (!filename || typeof filename !== 'string' || !filename.includes('.')) return '';
+	return filename.split('.').pop().toLowerCase();
+}
+
+/**
+ * Evaluates whether a file matches allowed extensions or mime types.
+ * @param {{ name?: string, type?: string }} file
+ * @param {string[]|null} allowedExts
+ * @returns {boolean}
+ */
+export function isFileTypeAllowed(file, allowedExts) {
+	if (!allowedExts || allowedExts.length === 0) return true;
+	if (!file) return false;
+
+	const ext = getFileExtension(file.name);
+	const mime = String(file.type || '').toLowerCase();
+
+	return allowedExts.some(allowed => {
+		if (allowed.includes('/')) {
+			if (allowed.endsWith('/*')) {
+				const prefix = allowed.slice(0, -1);
+				return mime.startsWith(prefix);
+			}
+			return mime === allowed;
+		}
+		return ext === allowed;
+	});
+}
+
+/**
+ * Formats byte size into human-readable unit with locale formatting.
+ * @param {number} bytes
+ * @param {string} [locale='en']
+ * @param {Record<string, string>} [dict={}]
+ * @returns {string}
+ */
+export function formatFileSize(bytes, locale = 'en', dict = {}) {
+	if (typeof bytes !== 'number' || isNaN(bytes) || bytes === 0) {
+		return '0 ' + (dict['unit-b'] || 'B');
+	}
+	const k = 1024;
+	const sizes = [
+		dict['unit-b'] || 'B',
+		dict['unit-kb'] || 'KB',
+		dict['unit-mb'] || 'MB',
+		dict['unit-gb'] || 'GB'
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	const unitIndex = Math.min(i, sizes.length - 1);
+	const num = bytes / Math.pow(k, unitIndex);
+	const formattedNum = new Intl.NumberFormat(locale, {
+		maximumFractionDigits: 1,
+		minimumFractionDigits: 0
+	}).format(num);
+
+	return formattedNum + ' ' + sizes[unitIndex];
+}

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

@@ -1,180 +1,182 @@
-# ln-validate
-
-A zero-dependency, high-performance **Validity Primitive** that wraps the browser's native `ValidityState` API. It manages when to evaluate inputs, how to toggle visual error indicators, and when to dispatch validation events to form-level coordinators.
-
-It maintains no custom rules in JavaScript; instead, it relies fully on native HTML markup constraints (`required`, `minlength`, `type="email"`, `pattern`) and standard CSS classes.
-
----
-
-## 🧭 Philosophy & Architecture
-
-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.
-
----
-
-## 📦 Minimal Blueprint
-
-```html
-<div class="form-element">
-  <label for="email">Email Address</label>
-  <input id="email" name="email" type="email" required minlength="5" data-ln-validate>
-  
-  <ul data-ln-validate-errors>
-    <li class="hidden" data-ln-validate-error="required">Email is required</li>
-    <li class="hidden" data-ln-validate-error="typeMismatch">Invalid email format</li>
-    <li class="hidden" data-ln-validate-error="tooShort">Must be at least 5 characters</li>
-    <!-- Custom unmapped error -->
-    <li class="hidden" data-ln-validate-error="emailTaken">This email is already in use</li>
-  </ul>
-</div>
-```
-
-> [!IMPORTANT]
-> The surrounding wrapper **must** carry the class `.form-element` for the sibling error lookup to succeed.
-
----
-
-## 🛠️ Declarative API Contract
-
-### HTML Attributes
-
-| Attribute | Elements | Value / Mapped Rule |
-| :--- | :--- | :--- |
-| `data-ln-validate` | `<input>`, `<select>`, `<textarea>` | Participation marker. Presence creates the instance. |
-| `data-ln-validate-errors` | `<ul>` | Identifies the sibling error list container. |
-| `data-ln-validate-error="key"` | `<li>` | Maps to standard native rules or custom keys (see list below). |
-
-### Mapped Native Keys
-
-| Key | Native HTML Attribute | Browser ValidityState Property |
-| :--- | :--- | :--- |
-| `required` | `required` | `valueMissing` |
-| `typeMismatch` | `type="email"`, `type="url"`, etc. | `typeMismatch` |
-| `tooShort` | `minlength="N"` | `tooShort` |
-| `tooLong` | `maxlength="N"` | `tooLong` |
-| `patternMismatch` | `pattern="regex"` | `patternMismatch` |
-| `rangeUnderflow` | `min="N"` | `rangeUnderflow` |
-| `rangeOverflow` | `max="N"` | `rangeOverflow` |
-
-*Note: Any key not present in the native mapping table is automatically treated as a **custom error**.*
-
-### JS API
-
-Access the validation instance directly via the `lnValidate` property on the input element:
-
-```javascript
-const input = document.getElementById('email');
-
-// 1. Force-validate the field (returns boolean; ignores the touched gate)
-const isValid = input.lnValidate.validate();
-
-// 2. Revert the touched state, clear visual classes, and hide error lists
-input.lnValidate.reset();
-
-// 3. Live boolean check (native validity + custom errors)
-if (input.lnValidate.isValid) { ... }
-
-// 4. Tear down listeners and delete instance reference
-input.lnValidate.destroy();
-```
-
----
-
-## ⚡ DOM Events
-
-### Emitted
-
-| Event | Bubbles | Payload | Description |
-| :--- | :--- | :--- | :--- |
-| `ln-validate:valid` | Yes | `{ target, field }` | Dispatched after every validation pass that succeeds. |
-| `ln-validate:invalid` | Yes | `{ target, field }` | Dispatched after every validation pass that fails. |
-| `ln-validate:destroyed` | Yes | `{ target }` | Dispatched when the validation instance is torn down. |
-
-### Received
-
-| Event | Payload | Description |
-| :--- | :--- | :--- |
-| `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. |
-
----
-
-## ⚠️ Common Pitfalls
-
-- **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.
+# ln-validate
+
+> Applied to form controls (`<input data-ln-validate>`, `<select>`, `<textarea>`) inside a `.form-element` wrapper.
+> On initialization, it injects `novalidate` on the parent `<form>` and intercepts the form `submit` event.
+> On field `blur` or `input` (after touched), it checks native `input.validity`, toggles the `.hidden` class on matching
+> `[data-ln-validate-error="rule"]` elements, and sets `aria-invalid`; on submit with errors, it calls `e.preventDefault()` and focuses the first invalid field.
+
+---
+
+## 🧭 Philosophy & Architecture
+
+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.
+
+---
+
+## 📦 Minimal Blueprint
+
+```html
+<div class="form-element">
+  <label for="email">Email Address</label>
+  <input id="email" name="email" type="email" required minlength="5" data-ln-validate>
+  
+  <ul data-ln-validate-errors>
+    <li class="hidden" data-ln-validate-error="required">Email is required</li>
+    <li class="hidden" data-ln-validate-error="typeMismatch">Invalid email format</li>
+    <li class="hidden" data-ln-validate-error="tooShort">Must be at least 5 characters</li>
+    <!-- Custom unmapped error -->
+    <li class="hidden" data-ln-validate-error="emailTaken">This email is already in use</li>
+  </ul>
+</div>
+```
+
+> [!IMPORTANT]
+> The surrounding wrapper **must** carry the class `.form-element` for the sibling error lookup to succeed.
+
+---
+
+## 🛠️ Declarative API Contract
+
+### HTML Attributes
+
+| Attribute | Elements | Value / Mapped Rule |
+| :--- | :--- | :--- |
+| `data-ln-validate` | `<input>`, `<select>`, `<textarea>` | Participation marker. Presence creates the instance. |
+| `data-ln-validate-errors` | `<ul>` | Identifies the sibling error list container. |
+| `data-ln-validate-error="key"` | `<li>` | Maps to standard native rules or custom keys (see list below). |
+
+### Mapped Native Keys
+
+| Key | Native HTML Attribute | Browser ValidityState Property |
+| :--- | :--- | :--- |
+| `required` | `required` | `valueMissing` |
+| `typeMismatch` | `type="email"`, `type="url"`, etc. | `typeMismatch` |
+| `tooShort` | `minlength="N"` | `tooShort` |
+| `tooLong` | `maxlength="N"` | `tooLong` |
+| `patternMismatch` | `pattern="regex"` | `patternMismatch` |
+| `rangeUnderflow` | `min="N"` | `rangeUnderflow` |
+| `rangeOverflow` | `max="N"` | `rangeOverflow` |
+
+*Note: Any key not present in the native mapping table is automatically treated as a **custom error**.*
+
+### JS API
+
+Access the validation instance directly via the `lnValidate` property on the input element:
+
+```javascript
+const input = document.getElementById('email');
+
+// 1. Force-validate the field (returns boolean; ignores the touched gate)
+const isValid = input.lnValidate.validate();
+
+// 2. Revert the touched state, clear visual classes, and hide error lists
+input.lnValidate.reset();
+
+// 3. Live boolean check (native validity + custom errors)
+if (input.lnValidate.isValid) { ... }
+
+// 4. Tear down listeners and delete instance reference
+input.lnValidate.destroy();
+```
+
+---
+
+## ⚡ DOM Events
+
+### Emitted
+
+| Event | Bubbles | Payload | Description |
+| :--- | :--- | :--- | :--- |
+| `ln-validate:valid` | Yes | `{ target, field }` | Dispatched after every validation pass that succeeds. |
+| `ln-validate:invalid` | Yes | `{ target, field }` | Dispatched after every validation pass that fails. |
+
+### Received
+
+| Event | Payload | Description |
+| :--- | :--- | :--- |
+| `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. |
+
+---
+
+## ⚠️ Common Pitfalls
+
+- **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: `components/ln-validate/ln-validate.js` (~160 lines). Imports only `dispatch`/`registerComponent` from `ln-core` — no sibling-component imports.
+
+### State & Constructor Initialization
+
+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.
+
+**Initial Value Instantiation Check:** Upon component construction, if an input field already contains a non-empty value (`dom.value` is non-empty or `dom.checked`), `ln-validate` immediately marks `_touched = true` and invokes `this.validate()` to synchronize its visual state and error elements in the DOM without requiring initial user interaction. Pristine empty fields remain `_touched = false`.
+
+### 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()`), 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 → components}/ln-validate/ln-validate-dev.scss

@@ -1,15 +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");
-	}
-}
+@use '../../theme/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/components/ln-validate/ln-validate.js

@@ -0,0 +1 @@
+(function(){"use strict";function q(){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 _(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 o=null;for(let i=1;i<t.length;i++)if(t[i]&&t[i].nodeType===1){o=t[i];break}if(!_(o))return}e.apply(console,t)}}function A(e,t,n){const o=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,o),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:o}))}function v(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){v(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const I={};function U(e,t){I[e]=t}function K(e){return I[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=U,window.lnCore.getDataMapper=K);function P(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,v(function(){new MutationObserver(function(){A(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const D={};function G(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];D[n]=t}function Q(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return D[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=G,window.lnCore.getLocaleFallback=Q,window.lnCore.ensureLocaleObserver=P);const S={};function z(e,t){S[e]||(S[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=S[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function T(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let s=0;s<n.length;s++){const a=n[s],r=a.getAttribute("data-ln-field");t[r]!=null&&(a.textContent=t[r])}const o=e.querySelectorAll("[data-ln-attr]");for(let s=0;s<o.length;s++){const a=o[s],r=a.getAttribute("data-ln-attr").split(",");for(let d=0;d<r.length;d++){const c=r[d].trim().split(":");if(c.length!==2)continue;const u=c[0].trim(),w=c[1].trim();t[w]!=null&&a.setAttribute(u,t[w])}}const i=e.querySelectorAll("[data-ln-show]");for(let s=0;s<i.length;s++){const a=i[s],r=a.getAttribute("data-ln-show");r in t&&a.classList.toggle("hidden",!t[r])}const l=e.querySelectorAll("[data-ln-class]");for(let s=0;s<l.length;s++){const a=l[s],r=a.getAttribute("data-ln-class").split(",");for(let d=0;d<r.length;d++){const c=r[d].trim().split(":");if(c.length!==2)continue;const u=c[0].trim(),w=c[1].trim();w in t&&a.classList.toggle(u,!!t[w])}}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 o=0;o<n.length;o++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[o],t??null),n[o].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)T(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 F(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const l=n.currentNode;l.textContent.indexOf("{{")!==-1&&(l.textContent=l.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(s,a){return t[a]!==void 0?t[a]:""}))}const o=function(l,s){return t[s]!==void 0?t[s]:""},i=Array.from(e.querySelectorAll("*"));e.nodeType===1&&i.push(e);for(let l=0;l<i.length;l++){const s=i[l],a=s.attributes;for(let r=0;r<a.length;r++){const d=a[r];d.value.indexOf("{{")!==-1&&s.setAttribute(d.name,d.value.replace(/\{\{\s*(\w+)\s*\}\}/g,o))}}return e}function X(e,t,n,o,i,l){const s={};for(let r=0;r<e.children.length;r++){const d=e.children[r],c=d.getAttribute("data-ln-render-key");c&&(s[c]=d)}const a=document.createDocumentFragment();for(let r=0;r<t.length;r++){const d=t[r],c=String(o(d));let u=s[c];if(u)i(u,d,r);else{const w=z(n,l);if(!w||(F(w,d),u=w.firstElementChild,!u))continue;u.setAttribute("data-ln-render-key",c),i(u,d,r)}a.appendChild(u)}e.textContent="",e.appendChild(a)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=F,window.lnCore.fill=T,window.lnCore.lnFill=J,window.lnCore.renderList=X);function $(e,t,n,o,i){if(!e||t===null)return!0;const l=o||"ln-component",s=e.type;if(s==="trigger"||s==="marker"||s==="string"||s==="list"||!s||t===""&&e.fallback!==void 0)return!0;const a=r=>{i?console.warn(r,i):console.warn(r)};if(s==="boolean"){const r=t.trim().toLowerCase();return r!==""&&r!=="true"&&r!=="false"&&r!=="1"&&r!=="0"?(a(`[${l}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(s==="enum"){const r=e.values||[];return r.includes(t)?!0:(a(`[${l}] Invalid value "${t}" for attribute "${n}". Allowed: ${r.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(s==="integer"){if(!/^-?\d+$/.test(t))return a(`[${l}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const r=parseInt(t,10);return e.min!==void 0&&r<e.min?(a(`[${l}] Value ${r} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&r>e.max?(a(`[${l}] Value ${r} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(s==="float")return isNaN(Number(t))?(a(`[${l}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(s==="json")try{return JSON.parse(t),!0}catch(r){return a(`[${l}] Invalid JSON for attribute "${n}": ${r.message}. Fallback: ${e.fallback}.`),!1}return!0}function Y(e){const t={};for(const n in e){const o=e[n];o&&o.effect&&(t[n]=o.effect)}return Object.keys(t).length?t:null}function Z(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 E(e,t,n,o){if(e.nodeType!==1)return;const l=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",s=Array.from(e.querySelectorAll(l));e.matches&&e.matches(l)&&s.push(e);for(const a of s)if(!a[n]){window.lnCore._persistSink&&a.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(a,t);try{a[n]=new o(a)}catch(r){console.error("["+n+"] init failed",a,r)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function ee(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function te(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 V(){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 ne(e){const t=V(),n=e.observed||[];for(let o=0;o<n.length;o++){const i=n[o];t.byAttr.has(i)||t.byAttr.set(i,[]),t.byAttr.get(i).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const o in e.attributes){t.byDeclaredAttr.has(o)||t.byDeclaredAttr.set(o,[]);const i=t.byDeclaredAttr.get(o);i.some(l=>l.componentTag===e.componentTag)||i.push({spec:e.attributes[o],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const o=Z(e);if(o===null)t.reactiveWildcard.push(e);else for(const i of o)t.byReactive.has(i)||t.byReactive.set(i,[]),t.byReactive.get(i).push(e)}e.persist&&t.persist.push(e)}function M(e,t,n,o){for(let i=0;i<e.length;i++){const l=e[i];if(!t[l.attribute])continue;const s=l.effects&&l.effects[n];s?s(t,n,o):l.onAttrChange&&(!l.declared||l.declared.has(n))&&l.onAttrChange(t,n,o)}}function oe(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const o=V(),i=o.byAttr.get(n);if(q()&&o.byDeclaredAttr&&o.byDeclaredAttr.has(n)&&_(t)){const l=o.byDeclaredAttr.get(n),s=t.getAttribute(n);for(let a=0;a<l.length;a++)$(l[a].spec,s,n,l[a].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||i)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const l=o.byReactive.get(n);l&&M(l,t,n,e.oldValue),o.reactiveWildcard.length&&M(o.reactiveWildcard,t,n,e.oldValue)}if(i)for(let l=0;l<i.length;l++){const s=i[l];if(s.handler){s.handler(t,n,e.oldValue);continue}s.onAttributeChange&&t[s.attribute]?s.onAttributeChange(t,n):(E(t,s.selector,s.attribute,s.ComponentFn),s.onInit&&s.onInit(t))}}function re(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,v(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{oe(t[n])}catch(o){console.error("[ln-core] mutation handler failed",t[n].target,o)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function B(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function ie(e){const t=B();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const o=t[n];if(o.onSubtreeChange){const i=o.query,l=e.target.nodeType===1?e.target.matches(i)?e.target:e.target.closest(i):e.target.parentElement?e.target.parentElement.closest(i):null;l&&o.onSubtreeChange(l,e)}}for(let n=0;n<e.addedNodes.length;n++){const o=e.addedNodes[n];if(o.nodeType===1)for(let i=0;i<t.length;i++){const l=t[i];E(o,l.selector,l.attribute,l.ComponentFn),l.onInit&&l.onInit(o)}}for(let n=0;n<e.removedNodes.length;n++){const o=e.removedNodes[n];if(o.nodeType===1)for(let i=0;i<t.length;i++){const l=t[i],s=l.query,a=Array.from(o.querySelectorAll(s));o.matches&&o.matches(s)&&a.push(o);for(let r=0;r<a.length;r++){const d=a[r];if(!document.contains(d)){const c=d[l.attribute];if(c&&typeof c.destroy=="function")try{c.destroy()}catch(u){console.error("["+l.attribute+"] destroy failed",d,u)}delete d[l.attribute]}}}}}}function le(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,v(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const o=t[n];if(o.type==="childList")try{ie(o)}catch(i){console.error("[ln-core] lifecycle handler failed",o.target,i)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function se(e,t,n,o,i={}){const l=i.extraAttributes||[],s=i.onAttributeChange||null,a=i.onSubtreeChange||null,r=i.onInit||null,d=i.onAttrChange||null,c=i.effects||null,u=i.attributes||null,w=u?Y(u):c,g=u?new Set(Object.keys(u)):null,b=i.persist||null;function f(O){const m=O||document.body;if(E(m,e,t,n),u&&q())for(const C in u){const me=u[C],k=Array.from(m.querySelectorAll("["+C+"]"));m.matches&&m.matches("["+C+"]")&&k.push(m);for(let R=0;R<k.length;R++){const x=k[R];_(x)&&$(me,x.getAttribute(C),C,o,x)}}r&&r(m)}const h=[];if(e.indexOf("[")!==-1){const O=/\[([\w-]+)/g;let m;for(;(m=O.exec(e))!==null;)h.push(m[1])}else h.push(e);ne({selector:e,attribute:t,componentTag:o,attributes:u,ComponentFn:n,onInit:r,observed:h.concat(l),onAttributeChange:s,onAttrChange:d,effects:w,declared:g,persist:b}),re();const y=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";B().push({selector:e,attribute:t,ComponentFn:n,onInit:r,onSubtreeChange:a,query:y}),le(),window[t]=f;function H(){ee()>0?te(function(){f(document.body)}):f(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",H):H(),f}function N(e){return(e||"").replace(/^#/,"")}function L(e){const t=e===void 0?location.hash:e,n={},o=N(t);if(!o)return n;const i=o.split("&");for(let l=0;l<i.length;l++){const s=i[l];if(!s)continue;const a=s.indexOf(":"),r=a>-1?s.slice(0,a):s,d=a>-1?s.slice(a+1):"";if(r)try{n[r]=decodeURIComponent(d)}catch{n[r]=d}}return n}function ae(e){if(!e)return null;const t=L();return e in t?t[e]:null}function de(e,t){if(!e)return;const n=L();t==null?delete n[e]:n[e]=String(t);const i=Object.keys(n).map(function(l){const s=n[l];return s===""?l:l+":"+encodeURIComponent(s)}).join("&");N(location.hash)!==i&&(location.hash=i)}function ce(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function ue(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 o=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return o?t?o+"-"+t:o:t||null}function fe(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function he(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 we(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function be(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),o=e.slice(t+1),i=o?o.split(",").map(function(l){try{return decodeURIComponent(l)}catch{return l}}).filter(Boolean):[];return{key:n,values:i}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=L,window.lnCore.hashGet=ae,window.lnCore.hashSet=de,window.lnCore.hashLinkClick=ce,window.lnCore.resolveHashNamespace=ue,window.lnCore.hashSortEncode=fe,window.lnCore.hashSortDecode=he,window.lnCore.hashFilterEncode=we,window.lnCore.hashFilterDecode=be);const j={required:"valueMissing",typeMismatch:"typeMismatch",tooShort:"tooShort",tooLong:"tooLong",patternMismatch:"patternMismatch",rangeUnderflow:"rangeUnderflow",rangeOverflow:"rangeOverflow"};function W(e,t=0){return e?!!(e.valid&&t===0):t===0}function ge(e){return e.type==="checkbox"||e.type==="radio"?!!e.checked:!!(e.value&&e.value.trim()!=="")}function pe(e,t){const n=[];if(e){const o=Object.keys(j);for(let i=0;i<o.length;i++){const l=o[i],s=j[l];e[s]&&n.push(l)}}if(t){const o=Array.from(t);for(let i=0;i<o.length;i++)o[i]&&n.indexOf(o[i])===-1&&n.push(o[i])}return n}(function(){const e="data-ln-validate",t="lnValidate",n="data-ln-validate-errors",o="data-ln-validate-error",i="ln-validate-valid",l="ln-validate-invalid";if(window[t]!==void 0)return;const s={"data-ln-validate":{type:"marker",description:"Activates validation on form input or field"},"data-ln-validate-errors":{type:"marker",description:"Container element holding validation error message elements"},"data-ln-validate-error":{type:"string",description:"Identifies error message template for a specific validation rule"}};function a(r){this.dom=r,this._touched=!1,this._customErrors=new Set;const d=this,c=r.tagName,u=r.type,w=c==="SELECT"||u==="checkbox"||u==="radio";this._onInput=function(){d._touched=!0,d.validate()},this._onChange=function(){d._touched=!0,d.validate()},this._onSetCustom=function(b){const f=b.detail&&b.detail.error;if(!f)return;d._customErrors.add(f),d._touched=!0;const h=r.closest(".form-element");if(h){const p=h.querySelector("["+o+'="'+f+'"]');p&&p.classList.remove("hidden")}r.classList.remove(i),r.classList.add(l),r.setAttribute("aria-invalid","true")},this._onClearCustom=function(b){const f=b.detail&&b.detail.error,h=r.closest(".form-element");if(f){if(d._customErrors.delete(f),h){const p=h.querySelector("["+o+'="'+f+'"]');p&&p.classList.add("hidden")}}else d._customErrors.forEach(function(p){if(h){const y=h.querySelector("["+o+'="'+p+'"]');y&&y.classList.add("hidden")}}),d._customErrors.clear();d._touched&&d.validate()},w||r.addEventListener("input",this._onInput),r.addEventListener("change",this._onChange),r.addEventListener("ln-validate:set-custom",this._onSetCustom),r.addEventListener("ln-validate:clear-custom",this._onClearCustom);const g=r.form;return g&&(g.hasAttribute("novalidate")||g.setAttribute("novalidate",""),this._onFormReset=function(){d.reset()},this._onValidateRequest=function(b){d._touched=!0,!d.validate()&&b.detail&&b.detail.invalidFields&&b.detail.invalidFields.push(d.dom)},g.addEventListener("reset",this._onFormReset),g.addEventListener("ln-validate:request-validate",this._onValidateRequest),g._lnValidateGateBound||(g._lnValidateGateBound=!0,g.addEventListener("submit",function(b){const f={invalidFields:[]};A(g,"ln-validate:request-validate",f),f.invalidFields.length>0&&(b.preventDefault(),f.invalidFields.sort((h,p)=>h.compareDocumentPosition(p)&Node.DOCUMENT_POSITION_PRECEDING?-1:1),f.invalidFields[0].focus())}))),ge(r)&&(this._touched=!0,this.validate()),this}a.prototype.validate=function(){const r=this.dom,d=r.validity,c=W(d,this._customErrors.size),u=pe(d,this._customErrors),w=r.closest(".form-element");if(w){const b=w.querySelector("["+n+"]");if(b){const f=b.querySelectorAll("["+o+"]");for(let h=0;h<f.length;h++){const p=f[h].getAttribute(o);f[h].classList.toggle("hidden",!u.includes(p))}}}return r.classList.toggle(i,c),r.classList.toggle(l,!c),r.setAttribute("aria-invalid",c?"false":"true"),A(r,c?"ln-validate:valid":"ln-validate:invalid",{target:r,field:r.name,errors:u}),c},a.prototype.reset=function(){this._touched=!1,this._customErrors.clear(),this.dom.classList.remove(i,l),this.dom.removeAttribute("aria-invalid");const r=this.dom.closest(".form-element");if(r){const d=r.querySelectorAll("["+o+"]");for(let c=0;c<d.length;c++)d[c].classList.add("hidden")}},Object.defineProperty(a.prototype,"isValid",{get:function(){return W(this.dom.validity,this._customErrors.size)}}),a.prototype.destroy=function(){if(!this.dom[t])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 r=this.dom.form;r&&(this._onFormReset&&r.removeEventListener("reset",this._onFormReset),this._onValidateRequest&&r.removeEventListener("ln-validate:request-validate",this._onValidateRequest)),this.dom.classList.remove(i,l),this.dom.removeAttribute("aria-invalid"),delete this.dom[t]},se(e,t,a,"ln-validate",{attributes:s})})()})();

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

@@ -0,0 +1,50 @@
+{
+	"$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-validate",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-validate-dev.scss"
+			]
+		},
+		"data-ln-error": {
+			"direction": null,
+			"sources": [
+				"ln-validate.scss"
+			]
+		},
+		"data-ln-form": {
+			"direction": null,
+			"sources": [
+				"ln-validate-dev.scss"
+			]
+		},
+		"data-ln-validate": {
+			"direction": null,
+			"sources": [
+				"ln-validate-dev.scss",
+				"src/ln-validate.js"
+			],
+			"type": "marker",
+			"description": "Activates validation on form input or field"
+		},
+		"data-ln-validate-error": {
+			"direction": "author",
+			"sources": [
+				"src/ln-validate.js"
+			],
+			"type": "string",
+			"description": "Identifies error message template for a specific validation rule"
+		},
+		"data-ln-validate-errors": {
+			"direction": "author",
+			"sources": [
+				"src/ln-validate.js"
+			],
+			"type": "marker",
+			"description": "Container element holding validation error message elements"
+		}
+	}
+}

package/components/ln-validate/ln-validate.scss

@@ -0,0 +1,7 @@
+// ==========================================================================
+// ln-validate — Functional Empty Error Collapse
+// ==========================================================================
+
+[data-ln-error]:empty {
+	display: none;
+}