@livenetworks/ashlar 1.3.2

package/js/ln-nav/src/ln-nav.js

@@ -0,0 +1,177 @@
+import { guardBody } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-nav';
+	const DOM_ATTRIBUTE = 'lnNav';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	const navInstances = new WeakMap();
+
+	// ─── pushState singleton patch ──────────────────────────────
+	const _pushStateCallbacks = [];
+
+	if (!history._lnNavPatched) {
+		const _origPushState = history.pushState;
+		history.pushState = function () {
+			_origPushState.apply(history, arguments);
+			for (const cb of _pushStateCallbacks) { cb(); }
+		};
+		history._lnNavPatched = true;
+	}
+
+	// ─── Constructor ───────────────────────────────────────────
+
+	function constructor(navElement) {
+		if (!navElement.hasAttribute(DOM_SELECTOR)) return;
+		if (navInstances.has(navElement)) return;
+
+		const activeClass = navElement.getAttribute(DOM_SELECTOR);
+		if (!activeClass) return;
+
+		const instance = _initializeNav(navElement, activeClass);
+		navInstances.set(navElement, instance);
+		navElement[DOM_ATTRIBUTE] = instance;
+	}
+
+	function _initializeNav(navElement, activeClass) {
+		let links = Array.from(navElement.querySelectorAll('a'));
+
+		_updateActiveState(links, activeClass, window.location.pathname);
+
+		const updateHandler = function () {
+			links = Array.from(navElement.querySelectorAll('a'));
+			_updateActiveState(links, activeClass, window.location.pathname);
+		};
+
+		window.addEventListener('popstate', updateHandler);
+		_pushStateCallbacks.push(updateHandler);
+
+		const observer = new MutationObserver(function (mutations) {
+			for (const mutation of mutations) {
+				if (mutation.type === 'childList') {
+					for (const node of mutation.addedNodes) {
+						if (node.nodeType === 1) {
+							if (node.tagName === 'A') {
+								links.push(node);
+								_updateActiveState([node], activeClass, window.location.pathname);
+							} else if (node.querySelectorAll) {
+								const newLinks = Array.from(node.querySelectorAll('a'));
+								links = links.concat(newLinks);
+								_updateActiveState(newLinks, activeClass, window.location.pathname);
+							}
+						}
+					}
+
+					for (const node of mutation.removedNodes) {
+						if (node.nodeType === 1) {
+							if (node.tagName === 'A') {
+								links = links.filter(function (link) { return link !== node; });
+							} else if (node.querySelectorAll) {
+								const removedLinks = Array.from(node.querySelectorAll('a'));
+								links = links.filter(function (link) {
+									return !removedLinks.includes(link);
+								});
+							}
+						}
+					}
+				}
+			}
+		});
+
+		observer.observe(navElement, { childList: true, subtree: true });
+
+		return {
+			navElement: navElement,
+			activeClass: activeClass,
+			observer: observer,
+			updateHandler: updateHandler,
+			destroy: function () {
+				observer.disconnect();
+				window.removeEventListener('popstate', updateHandler);
+				const idx = _pushStateCallbacks.indexOf(updateHandler);
+				if (idx !== -1) _pushStateCallbacks.splice(idx, 1);
+				navInstances.delete(navElement);
+				delete navElement[DOM_ATTRIBUTE];
+			}
+		};
+	}
+
+	function _normalizeUrl(url) {
+		try {
+			const urlObj = new URL(url, window.location.href);
+			return urlObj.pathname.replace(/\/$/, '') || '/';
+		} catch (e) {
+			return url.replace(/\/$/, '') || '/';
+		}
+	}
+
+	function _updateActiveState(links, activeClass, currentPath) {
+		const normalizedCurrent = _normalizeUrl(currentPath);
+
+		for (const link of links) {
+			const href = link.getAttribute('href');
+			if (!href) continue;
+
+			const normalizedHref = _normalizeUrl(href);
+
+			link.classList.remove(activeClass);
+
+			const isExact = normalizedHref === normalizedCurrent;
+			const isParent = normalizedHref !== '/' && normalizedCurrent.startsWith(normalizedHref + '/');
+
+			if (isExact || isParent) {
+				link.classList.add(activeClass);
+			}
+		}
+	}
+
+	// ─── Global DOM Observer ───────────────────────────────────
+
+	function _domObserver() {
+		guardBody(function () {
+			const observer = new MutationObserver(function (mutations) {
+				for (const mutation of mutations) {
+					if (mutation.type === 'childList') {
+						for (const node of mutation.addedNodes) {
+							if (node.nodeType === 1) {
+								if (node.hasAttribute && node.hasAttribute(DOM_SELECTOR)) {
+									constructor(node);
+								}
+								if (node.querySelectorAll) {
+									for (const el of node.querySelectorAll('[' + DOM_SELECTOR + ']')) {
+										constructor(el);
+									}
+								}
+							}
+						}
+					} else if (mutation.type === 'attributes') {
+						if (mutation.target.hasAttribute && mutation.target.hasAttribute(DOM_SELECTOR)) {
+							constructor(mutation.target);
+						}
+					}
+				}
+			});
+
+			observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: [DOM_SELECTOR] });
+		}, 'ln-nav');
+	}
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	window[DOM_ATTRIBUTE] = constructor;
+
+	function _initializeAll() {
+		for (const el of document.querySelectorAll('[' + DOM_SELECTOR + ']')) {
+			constructor(el);
+		}
+	}
+
+	_domObserver();
+
+	if (document.readyState === 'loading') {
+		document.addEventListener('DOMContentLoaded', _initializeAll);
+	} else {
+		_initializeAll();
+	}
+})();

package/js/ln-number/README.md

@@ -0,0 +1,122 @@
+# ln-number
+
+Real-time locale-aware number formatting for input fields.
+
+## Usage
+
+```html
+<input type="number" name="amount" data-ln-number>
+```
+
+The component creates a hidden input that holds the raw numeric value for form submission and formats the visible input with locale-aware thousand separators. See [`docs/js/number.md`](../../docs/js/number.md#html) for the resulting DOM.
+
+## Loading & Source Files
+
+### Loading the Component
+
+#### 1. In-Bundle (Standard Integration)
+To load `ln-number` as part of the main `ln-ashlar` bundle, include the compiled bundle script:
+```html
+<script src="dist/ln-ashlar.iife.js" defer></script>
+```
+
+#### 2. Standalone (Zero-Dependency IIFE)
+To load `ln-number` as a standalone component, include its compiled IIFE under the component directory:
+```html
+<script src="js/ln-number/ln-number.js" defer></script>
+```
+
+### Source Files
+
+* **Active Development Source**: [js/ln-number/src/ln-number.js](file:///c:/laragon/www/ln-ashlar/js/ln-number/src/ln-number.js) (source of truth)
+* **Compiled Standalone**: [js/ln-number/ln-number.js](file:///c:/laragon/www/ln-ashlar/js/ln-number/ln-number.js)
+
+## Attributes
+
+| Attribute | On | Description |
+|-----------|-----|-------------|
+| `data-ln-number` | `<input>` | Enables number formatting |
+| `data-ln-number-decimals` | `<input>` | Max decimal places (default: unlimited) |
+| `data-ln-number-min` | `<input>` | Minimum allowed value |
+| `data-ln-number-max` | `<input>` | Maximum allowed value |
+
+## Events
+
+| Event | Bubbles | Cancelable | Detail |
+|-------|---------|------------|--------|
+| `ln-number:input` | yes | no | `{ value: Number, formatted: String }` |
+| `ln-number:destroyed` | yes | no | `{ target: Element }` |
+
+## API
+
+```javascript
+const el = document.querySelector('[data-ln-number]');
+
+el.lnNumber.value;           // get raw number (Number or NaN if empty)
+el.lnNumber.value = 1234.56; // set value programmatically — formats display
+el.lnNumber.formatted;       // get formatted display string
+
+el.lnNumber.destroy();       // remove component, restore original input
+```
+
+## Locale
+
+The component reads the nearest ancestor `[lang]` attribute (typically `<html lang>`); falls back to `navigator.language`. Locale changes propagate live — re-formatting all instances when `<html lang>` changes.
+
+| `lang` | Display |
+|---|---|
+| `mk` | `1.234.567` |
+| `en-US` | `1,234,567` |
+
+## Examples
+
+```html
+<!-- Basic -->
+<div class="form-element">
+    <label for="amount">Amount</label>
+    <input type="number" id="amount" name="amount" data-ln-number>
+</div>
+
+<!-- With decimal limit -->
+<div class="form-element">
+    <label for="price">Price</label>
+    <input type="number" id="price" name="price"
+           data-ln-number data-ln-number-decimals="2">
+</div>
+
+<!-- With min/max -->
+<div class="form-element">
+    <label for="quantity">Quantity</label>
+    <input type="number" id="quantity" name="quantity"
+           data-ln-number data-ln-number-min="0" data-ln-number-max="999999">
+</div>
+
+<!-- Pre-filled value -->
+<div class="form-element">
+    <label for="budget">Budget</label>
+    <input type="number" id="budget" name="budget" value="1500000"
+           data-ln-number>
+</div>
+```
+
+## Integration with ln-validate
+
+Place `data-ln-validate` on the same input. The `required` attribute stays
+on the visible input and works as expected:
+
+```html
+<div class="form-element">
+    <label for="salary">Salary</label>
+    <input type="number" id="salary" name="salary"
+           required data-ln-validate data-ln-number>
+    <ul data-ln-validate-errors>
+        <li class="hidden" data-ln-validate-error="required">Required field</li>
+    </ul>
+</div>
+```
+
+## Integration with ln-form
+
+Works automatically. `serializeForm()` reads the hidden input (which has the
+`name`). `populateForm()` sets the hidden input's value, which triggers the
+display update.

package/js/ln-number/ln-number.js

@@ -0,0 +1 @@
+(function(){"use strict";function N(a,i,u){a.dispatchEvent(new CustomEvent(i,{bubbles:!0,detail:u||{}}))}function x(a,i){if(!document.body){document.addEventListener("DOMContentLoaded",function(){x(a,i)}),console.warn("["+i+'] Script loaded before <body> — add "defer" to your <script> tag');return}a()}function S(a,i,u,g){if(a.nodeType!==1)return;const v=i.indexOf("[")!==-1||i.indexOf(".")!==-1||i.indexOf("#")!==-1?i:"["+i+"]",f=Array.from(a.querySelectorAll(v));a.matches&&a.matches(v)&&f.push(a);for(const m of f)m[u]||(m[u]=new g(m))}function w(a){const i=a.closest("[lang]");return(i?i.lang:null)||navigator.language}function O(a,i,u,g,b={}){const v=b.extraAttributes||[],f=b.onAttributeChange||null,m=b.onInit||null;function t(o){const e=o||document.body;S(e,a,i,u),m&&m(e)}return x(function(){const o=new MutationObserver(function(l){for(let r=0;r<l.length;r++){const n=l[r];if(n.type==="childList")for(let d=0;d<n.addedNodes.length;d++){const p=n.addedNodes[d];p.nodeType===1&&(S(p,a,i,u),m&&m(p))}else n.type==="attributes"&&(f&&n.target[i]?f(n.target,n.attributeName):(S(n.target,a,i,u),m&&m(n.target)))}});let e=[];if(a.indexOf("[")!==-1){const l=/\[([\w-]+)/g;let r;for(;(r=l.exec(a))!==null;)e.push(r[1])}else e.push(a);o.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:e.concat(v)})},g),window[i]=t,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){t(document.body)}):t(document.body),t}const A={};function I(a,i){A[a]=i}function C(a){return A[a]||{ingress:i=>i,egress:i=>i}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=I,window.lnCore.getDataMapper=C),(function(){const a="data-ln-number",i="lnNumber";if(window[i]!==void 0)return;const u={},g=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value");function b(t){if(!u[t]){const o=new Intl.NumberFormat(t,{useGrouping:!0}),e=o.formatToParts(1234.5);let l="",r=".";for(let n=0;n<e.length;n++)e[n].type==="group"&&(l=e[n].value),e[n].type==="decimal"&&(r=e[n].value);u[t]={fmt:o,groupSep:l,decimalSep:r}}return u[t]}function v(t,o,e){if(e!==null){const l=parseInt(e,10),r=t+"|d"+l;return u[r]||(u[r]=new Intl.NumberFormat(t,{useGrouping:!0,minimumFractionDigits:0,maximumFractionDigits:l})),u[r].format(o)}return b(t).fmt.format(o)}function f(t){if(t.tagName!=="INPUT")return console.warn("[ln-number] Can only be applied to <input>, got:",t.tagName),this;this.dom=t;const o=document.createElement("input");o.type="hidden",o.name=t.name,t.removeAttribute("name"),t.type="text",t.setAttribute("inputmode","decimal"),t.insertAdjacentElement("afterend",o),this._hidden=o;const e=this;Object.defineProperty(o,"value",{get:function(){return g.get.call(o)},set:function(r){g.set.call(o,r),r!==""&&!isNaN(parseFloat(r))?e._displayFormatted(parseFloat(r)):r===""&&(e.dom.value="")}}),this._onInput=function(){e._handleInput()},t.addEventListener("input",this._onInput),this._onPaste=function(r){r.preventDefault();const n=(r.clipboardData||window.clipboardData).getData("text"),d=b(w(t)),p=d.decimalSep.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");let c=n.replace(new RegExp("[^0-9\\-"+p+".]","g"),"");d.groupSep&&(c=c.split(d.groupSep).join("")),d.decimalSep!=="."&&(c=c.replace(d.decimalSep,"."));const _=parseFloat(c);isNaN(_)?(t.value="",e._hidden.value=""):e.value=_},t.addEventListener("paste",this._onPaste);const l=t.value;if(l!==""){const r=parseFloat(l);isNaN(r)||(this._displayFormatted(r),g.set.call(o,String(r)))}return this}f.prototype._handleInput=function(){const t=this.dom,o=b(w(t)),e=t.value;if(e===""){this._hidden.value="",N(t,"ln-number:input",{value:NaN,formatted:""});return}if(e==="-"){this._hidden.value="";return}const l=t.selectionStart;let r=0;for(let s=0;s<l;s++)/[0-9]/.test(e[s])&&r++;let n=e;if(o.groupSep&&(n=n.split(o.groupSep).join("")),n=n.replace(o.decimalSep,"."),e.endsWith(o.decimalSep)||e.endsWith(".")){const s=n.replace(/\.$/,""),h=parseFloat(s);isNaN(h)||this._setHiddenRaw(h);return}const d=n.indexOf(".");if(d!==-1&&n.slice(d+1).endsWith("0")){const h=parseFloat(n);isNaN(h)||this._setHiddenRaw(h);return}const p=t.getAttribute("data-ln-number-decimals");if(p!==null&&d!==-1){const s=parseInt(p,10);n.slice(d+1).length>s&&(n=n.slice(0,d+1+s))}const c=parseFloat(n);if(isNaN(c))return;const _=t.getAttribute("data-ln-number-min"),E=t.getAttribute("data-ln-number-max");if(_!==null&&c<parseFloat(_)||E!==null&&c>parseFloat(E))return;let y;if(p!==null)y=v(w(t),c,p);else{const s=d!==-1?n.slice(d+1).length:0;if(s>0){const h=w(t)+"|u"+s;u[h]||(u[h]=new Intl.NumberFormat(w(t),{useGrouping:!0,minimumFractionDigits:s,maximumFractionDigits:s})),y=u[h].format(c)}else y=o.fmt.format(c)}t.value=y;let F=r,D=0;for(let s=0;s<y.length&&F>0;s++)D=s+1,/[0-9]/.test(y[s])&&F--;F>0&&(D=y.length),t.setSelectionRange(D,D),this._setHiddenRaw(c),N(t,"ln-number:input",{value:c,formatted:y})},f.prototype._setHiddenRaw=function(t){g.set.call(this._hidden,String(t))},f.prototype._displayFormatted=function(t){this.dom.value=v(w(this.dom),t,this.dom.getAttribute("data-ln-number-decimals"))},Object.defineProperty(f.prototype,"value",{get:function(){const t=this._hidden.value;return t===""?NaN:parseFloat(t)},set:function(t){if(typeof t!="number"||isNaN(t)){this.dom.value="",this._setHiddenRaw("");return}this._displayFormatted(t),this._setHiddenRaw(t),N(this.dom,"ln-number:input",{value:t,formatted:this.dom.value})}}),Object.defineProperty(f.prototype,"formatted",{get:function(){return this.dom.value}}),f.prototype.destroy=function(){this.dom[i]&&(this.dom.removeEventListener("input",this._onInput),this.dom.removeEventListener("paste",this._onPaste),this.dom.name=this._hidden.name,this.dom.type="number",this.dom.removeAttribute("inputmode"),this._hidden.remove(),N(this.dom,"ln-number:destroyed",{target:this.dom}),delete this.dom[i])};function m(){new MutationObserver(function(){const t=document.querySelectorAll("["+a+"]");for(let o=0;o<t.length;o++){const e=t[o][i];e&&!isNaN(e.value)&&e._displayFormatted(e.value)}}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"]})}O(a,i,f,"ln-number"),m()})()})();

package/js/ln-number/src/ln-number.js

@@ -0,0 +1,302 @@
+import { dispatch, getLocale, registerComponent } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-number';
+	const DOM_ATTRIBUTE = 'lnNumber';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Formatter Cache ──────────────────────────────────────
+
+	const _formatters = {};
+	const _inputValueDesc = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value');
+
+	function _getFormatter(locale) {
+		if (!_formatters[locale]) {
+			const fmt = new Intl.NumberFormat(locale, { useGrouping: true });
+			const parts = fmt.formatToParts(1234.5);
+			let groupSep = '';
+			let decimalSep = '.';
+			for (let i = 0; i < parts.length; i++) {
+				if (parts[i].type === 'group') groupSep = parts[i].value;
+				if (parts[i].type === 'decimal') decimalSep = parts[i].value;
+			}
+			_formatters[locale] = { fmt: fmt, groupSep: groupSep, decimalSep: decimalSep };
+		}
+		return _formatters[locale];
+	}
+
+	function _formatNum(locale, num, maxDecimals) {
+		if (maxDecimals !== null) {
+			const max = parseInt(maxDecimals, 10);
+			const key = locale + '|d' + max;
+			if (!_formatters[key]) {
+				_formatters[key] = new Intl.NumberFormat(locale, { useGrouping: true, minimumFractionDigits: 0, maximumFractionDigits: max });
+			}
+			return _formatters[key].format(num);
+		}
+		return _getFormatter(locale).fmt.format(num);
+	}
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(dom) {
+		if (dom.tagName !== 'INPUT') {
+			console.warn('[ln-number] Can only be applied to <input>, got:', dom.tagName);
+			return this;
+		}
+
+		this.dom = dom;
+
+		// ── Create hidden input ─────────────────────────────
+		const hidden = document.createElement('input');
+		hidden.type = 'hidden';
+		hidden.name = dom.name;
+		dom.removeAttribute('name');
+		dom.type = 'text';
+		dom.setAttribute('inputmode', 'decimal');
+		dom.insertAdjacentElement('afterend', hidden);
+		this._hidden = hidden;
+
+		// ── Intercept programmatic value sets on hidden input ──
+		const self = this;
+		Object.defineProperty(hidden, 'value', {
+			get: function () {
+				return _inputValueDesc.get.call(hidden);
+			},
+			set: function (val) {
+				_inputValueDesc.set.call(hidden, val);
+				// If set programmatically (e.g., populateForm), update display
+				if (val !== '' && !isNaN(parseFloat(val))) {
+					self._displayFormatted(parseFloat(val));
+				} else if (val === '') {
+					self.dom.value = '';
+				}
+			}
+		});
+
+		// ── Bind input event ────────────────────────────────
+		this._onInput = function () {
+			self._handleInput();
+		};
+		dom.addEventListener('input', this._onInput);
+
+		// ── Bind paste event ────────────────────────────────
+		this._onPaste = function (e) {
+			e.preventDefault();
+			const pasted = (e.clipboardData || window.clipboardData).getData('text');
+			const info = _getFormatter(getLocale(dom));
+			const decSepEscaped = info.decimalSep.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+			// Strip everything except digits, minus, and decimal separators
+			let cleaned = pasted.replace(new RegExp('[^0-9\\-' + decSepEscaped + '.]', 'g'), '');
+			// Strip group separators before normalizing decimal
+			if (info.groupSep) {
+				cleaned = cleaned.split(info.groupSep).join('');
+			}
+			// Normalize: if locale decimal is not '.', replace it
+			if (info.decimalSep !== '.') {
+				cleaned = cleaned.replace(info.decimalSep, '.');
+			}
+			const num = parseFloat(cleaned);
+			if (!isNaN(num)) {
+				self.value = num;
+			} else {
+				dom.value = '';
+				self._hidden.value = '';
+			}
+		};
+		dom.addEventListener('paste', this._onPaste);
+
+		// ── Handle pre-filled value ─────────────────────────
+		const initial = dom.value;
+		if (initial !== '') {
+			const num = parseFloat(initial);
+			if (!isNaN(num)) {
+				this._displayFormatted(num);
+				_inputValueDesc.set.call(hidden, String(num));
+			}
+		}
+
+		return this;
+	}
+
+	_component.prototype._handleInput = function () {
+		const dom = this.dom;
+		const info = _getFormatter(getLocale(dom));
+		const raw = dom.value;
+
+		// Edge case: empty
+		if (raw === '') {
+			this._hidden.value = '';
+			dispatch(dom, 'ln-number:input', { value: NaN, formatted: '' });
+			return;
+		}
+
+		// Edge case: just minus sign
+		if (raw === '-') {
+			this._hidden.value = '';
+			return;
+		}
+
+		// Save cursor context: count digits to the left of cursor
+		const cursorPos = dom.selectionStart;
+		let digitsBeforeCursor = 0;
+		for (let i = 0; i < cursorPos; i++) {
+			if (/[0-9]/.test(raw[i])) digitsBeforeCursor++;
+		}
+
+		// Parse: strip group separators, normalize decimal
+		let cleaned = raw;
+		if (info.groupSep) {
+			cleaned = cleaned.split(info.groupSep).join('');
+		}
+		cleaned = cleaned.replace(info.decimalSep, '.');
+
+		// Edge case: trailing decimal separator (user about to type decimals)
+		if (raw.endsWith(info.decimalSep) || raw.endsWith('.')) {
+			const beforeDecimal = cleaned.replace(/\.$/, '');
+			const num = parseFloat(beforeDecimal);
+			if (!isNaN(num)) {
+				this._setHiddenRaw(num);
+			}
+			return;
+		}
+
+		// Edge case: trailing zeros after decimal (user still typing)
+		const decimalIndex = cleaned.indexOf('.');
+		if (decimalIndex !== -1) {
+			const afterDecimal = cleaned.slice(decimalIndex + 1);
+			if (afterDecimal.endsWith('0')) {
+				const num = parseFloat(cleaned);
+				if (!isNaN(num)) {
+					this._setHiddenRaw(num);
+				}
+				return;
+			}
+		}
+
+		// Enforce decimal limit
+		const maxDecimals = dom.getAttribute('data-ln-number-decimals');
+		if (maxDecimals !== null && decimalIndex !== -1) {
+			const allowed = parseInt(maxDecimals, 10);
+			const afterDec = cleaned.slice(decimalIndex + 1);
+			if (afterDec.length > allowed) {
+				cleaned = cleaned.slice(0, decimalIndex + 1 + allowed);
+			}
+		}
+
+		const num = parseFloat(cleaned);
+		if (isNaN(num)) return;
+
+		// Enforce min/max
+		const minAttr = dom.getAttribute('data-ln-number-min');
+		const maxAttr = dom.getAttribute('data-ln-number-max');
+		if (minAttr !== null && num < parseFloat(minAttr)) return;
+		if (maxAttr !== null && num > parseFloat(maxAttr)) return;
+
+		// Format
+		let formatted;
+		if (maxDecimals !== null) {
+			formatted = _formatNum(getLocale(dom), num, maxDecimals);
+		} else {
+			// Preserve the user's decimal places
+			const userDecimals = decimalIndex !== -1 ? cleaned.slice(decimalIndex + 1).length : 0;
+			if (userDecimals > 0) {
+				const key = getLocale(dom) + '|u' + userDecimals;
+				if (!_formatters[key]) {
+					_formatters[key] = new Intl.NumberFormat(getLocale(dom), { useGrouping: true, minimumFractionDigits: userDecimals, maximumFractionDigits: userDecimals });
+				}
+				formatted = _formatters[key].format(num);
+			} else {
+				formatted = info.fmt.format(num);
+			}
+		}
+
+		dom.value = formatted;
+
+		// Restore cursor position
+		let targetDigits = digitsBeforeCursor;
+		let newPos = 0;
+		for (let i = 0; i < formatted.length && targetDigits > 0; i++) {
+			newPos = i + 1;
+			if (/[0-9]/.test(formatted[i])) targetDigits--;
+		}
+		// If we didn't consume all digits, put cursor at end
+		if (targetDigits > 0) newPos = formatted.length;
+		dom.setSelectionRange(newPos, newPos);
+
+		// Update hidden input (bypass our setter to avoid feedback loop)
+		this._setHiddenRaw(num);
+
+		dispatch(dom, 'ln-number:input', { value: num, formatted: formatted });
+	};
+
+	_component.prototype._setHiddenRaw = function (num) {
+		_inputValueDesc.set.call(this._hidden, String(num));
+	};
+
+	_component.prototype._displayFormatted = function (num) {
+		this.dom.value = _formatNum(getLocale(this.dom), num, this.dom.getAttribute('data-ln-number-decimals'));
+	};
+
+	// ─── Public API ───────────────────────────────────────────
+
+	Object.defineProperty(_component.prototype, 'value', {
+		get: function () {
+			const raw = this._hidden.value;
+			return raw === '' ? NaN : parseFloat(raw);
+		},
+		set: function (num) {
+			if (typeof num !== 'number' || isNaN(num)) {
+				this.dom.value = '';
+				this._setHiddenRaw('');
+				return;
+			}
+			this._displayFormatted(num);
+			this._setHiddenRaw(num);
+			dispatch(this.dom, 'ln-number:input', {
+				value: num,
+				formatted: this.dom.value
+			});
+		}
+	});
+
+	Object.defineProperty(_component.prototype, 'formatted', {
+		get: function () {
+			return this.dom.value;
+		}
+	});
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this.dom.removeEventListener('input', this._onInput);
+		this.dom.removeEventListener('paste', this._onPaste);
+		// Restore name to visible input
+		this.dom.name = this._hidden.name;
+		this.dom.type = 'number';
+		this.dom.removeAttribute('inputmode');
+		// Remove hidden input
+		this._hidden.remove();
+		dispatch(this.dom, 'ln-number:destroyed', { target: this.dom });
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Locale Observer ──────────────────────────────────────
+
+	function _localeObserver() {
+		new MutationObserver(function () {
+			const els = document.querySelectorAll('[' + DOM_SELECTOR + ']');
+			for (let i = 0; i < els.length; i++) {
+				const inst = els[i][DOM_ATTRIBUTE];
+				if (inst && !isNaN(inst.value)) {
+					inst._displayFormatted(inst.value);
+				}
+			}
+		}).observe(document.documentElement, { attributes: true, attributeFilter: ['lang'] });
+	}
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-number');
+	_localeObserver();
+})();