@livenetworks/ashlar 1.6.0 → 2.0.0

package/components/ln-tabs/ln-tabs.js

@@ -0,0 +1 @@
+(function(){"use strict";function K(){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 A(e){if(typeof window>"u")return!1;if(window.lnDebug===!0)return!0;if(window.lnCore&&window.lnCore._debugIsContained)return e?window.lnCore._debugIsContained(e):window.lnCore._debugSink!==null;if(e&&e.closest){const t=e.closest("[data-ln-debug]");return!(!t||typeof document<"u"&&t===document.documentElement)}return typeof document<"u"&&document.body?document.body.hasAttribute("data-ln-debug"):!1}if(typeof window<"u"&&(window.lnCore=window.lnCore||{},!window.lnCore._warnBound)){window.lnCore._warnBound=!0;const e=console.warn;console.warn=function(...t){if(typeof t[0]=="string"&&(t[0].startsWith("[ln-")||t[0].startsWith("[lnCore"))){let r=null;for(let o=1;o<t.length;o++)if(t[o]&&t[o].nodeType===1){r=t[o];break}if(!A(r))return}e.apply(console,t)}}function q(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r),e.dispatchEvent(new CustomEvent(t,{bubbles:!0,detail:r}))}function z(e,t,n){const r=n||{};window.lnCore._debugSink&&window.lnCore._debugSink("event",t,e,r);const o=new CustomEvent(t,{bubbles:!0,cancelable:!0,detail:r});return e.dispatchEvent(o),o}function m(e,t){if(!document.body){document.addEventListener("DOMContentLoaded",function(){m(e,t)}),console.warn("["+t+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}const N={};function G(e,t){N[e]=t}function X(e){return N[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=G,window.lnCore.getDataMapper=X);function Y(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,m(function(){new MutationObserver(function(){q(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const $={};function Z(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];$[n]=t}function ee(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return $[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=Z,window.lnCore.getLocaleFallback=ee,window.lnCore.ensureLocaleObserver=Y);const v={};function te(e,t){v[e]||(v[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=v[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function D(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let a=0;a<n.length;a++){const c=n[a],i=c.getAttribute("data-ln-field");t[i]!=null&&(c.textContent=t[i])}const r=e.querySelectorAll("[data-ln-attr]");for(let a=0;a<r.length;a++){const c=r[a],i=c.getAttribute("data-ln-attr").split(",");for(let u=0;u<i.length;u++){const d=i[u].trim().split(":");if(d.length!==2)continue;const l=d[0].trim(),f=d[1].trim();t[f]!=null&&c.setAttribute(l,t[f])}}const o=e.querySelectorAll("[data-ln-show]");for(let a=0;a<o.length;a++){const c=o[a],i=c.getAttribute("data-ln-show");i in t&&c.classList.toggle("hidden",!t[i])}const s=e.querySelectorAll("[data-ln-class]");for(let a=0;a<s.length;a++){const c=s[a],i=c.getAttribute("data-ln-class").split(",");for(let u=0;u<i.length;u++){const d=i[u].trim().split(":");if(d.length!==2)continue;const l=d[0].trim(),f=d[1].trim();f in t&&c.classList.toggle(l,!!t[f])}}return e}function ne(e,t){e.matches&&e.matches("[data-ln-form], [data-ln-fillable]")&&(window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",e,t??null),e.dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0})));const n=e.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let r=0;r<n.length;r++)window.lnCore._debugSink&&window.lnCore._debugSink("event","ln-fill",n[r],t??null),n[r].dispatchEvent(new CustomEvent("ln-fill",{detail:t??null,bubbles:!0}));return e}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(e){if(!(!e.target.matches||!e.target.matches("[data-ln-fillable]")))if(e.detail)D(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 R(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const s=n.currentNode;s.textContent.indexOf("{{")!==-1&&(s.textContent=s.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(a,c){return t[c]!==void 0?t[c]:""}))}const r=function(s,a){return t[a]!==void 0?t[a]:""},o=Array.from(e.querySelectorAll("*"));e.nodeType===1&&o.push(e);for(let s=0;s<o.length;s++){const a=o[s],c=a.attributes;for(let i=0;i<c.length;i++){const u=c[i];u.value.indexOf("{{")!==-1&&a.setAttribute(u.name,u.value.replace(/\{\{\s*(\w+)\s*\}\}/g,r))}}return e}function re(e,t,n,r,o,s){const a={};for(let i=0;i<e.children.length;i++){const u=e.children[i],d=u.getAttribute("data-ln-render-key");d&&(a[d]=u)}const c=document.createDocumentFragment();for(let i=0;i<t.length;i++){const u=t[i],d=String(r(u));let l=a[d];if(l)o(l,u,i);else{const f=te(n,s);if(!f||(R(f,u),l=f.firstElementChild,!l))continue;l.setAttribute("data-ln-render-key",d),o(l,u,i)}c.appendChild(l)}e.textContent="",e.appendChild(c)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=R,window.lnCore.fill=D,window.lnCore.lnFill=ne,window.lnCore.renderList=re);function I(e,t,n){const r=e.getAttribute(t);return r===null?n:r}function oe(e,t,n){const r=parseInt(e.getAttribute(t),10);return isNaN(r)?n:r}function F(e,t,n=!1){const r=e.getAttribute(t);if(r===null)return!!n;const o=r.trim().toLowerCase();return!(o==="false"||o==="0")}function ie(e,t){return(e.getAttribute(t)||"").split(",").map(n=>n.trim()).filter(Boolean)}const _=new Map;function se(e,t){const n=(e?e.join("|"):"")+"::"+t;if(_.has(n))return _.get(n);const r=new Set(e||[]),o=function(s,a){const c=s.getAttribute(a);return c!==null&&r.has(c)?c:t};return _.set(n,o),o}function ae(e,t,n){const r=parseFloat(e.getAttribute(t));return isNaN(r)?n:r}function le(e,t,n){const r=e.getAttribute(t);if(!r)return n;try{return JSON.parse(r)}catch{return n}}function M(e,t,n,r,o){if(!e||t===null)return!0;const s=r||"ln-component",a=e.type;if(a==="trigger"||a==="marker"||a==="string"||a==="list"||!a||t===""&&e.fallback!==void 0)return!0;const c=i=>{o?console.warn(i,o):console.warn(i)};if(a==="boolean"){const i=t.trim().toLowerCase();return i!==""&&i!=="true"&&i!=="false"&&i!=="1"&&i!=="0"?(c(`[${s}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(a==="enum"){const i=e.values||[];return i.includes(t)?!0:(c(`[${s}] Invalid value "${t}" for attribute "${n}". Allowed: ${i.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(a==="integer"){if(!/^-?\d+$/.test(t))return c(`[${s}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const i=parseInt(t,10);return e.min!==void 0&&i<e.min?(c(`[${s}] Value ${i} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&i>e.max?(c(`[${s}] Value ${i} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(a==="float")return isNaN(Number(t))?(c(`[${s}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(a==="json")try{return JSON.parse(t),!0}catch(i){return c(`[${s}] Invalid JSON for attribute "${n}": ${i.message}. Fallback: ${e.fallback}.`),!1}return!0}function ce(e,t,n){for(const r in n){const[o,s,a]=n[r];Object.defineProperty(e,r,{get:function(){return o(t,s,a)},enumerable:!0,configurable:!0})}return e}function ue(e){const t={};for(const n in e){const r=e[n];if(!r||!r.prop)continue;let o=r.read;if(!o&&r.type)switch(r.type){case"enum":o=se(r.values,r.fallback);break;case"integer":o=oe;break;case"float":o=ae;break;case"boolean":o=F;break;case"list":o=ie;break;case"json":o=le;break;case"string":default:o=I;break}o||(o=I),t[r.prop]=[o,n,r.fallback]}return t}function de(e){const t={};for(const n in e){const r=e[n];r&&r.effect&&(t[n]=r.effect)}return Object.keys(t).length?t:null}function fe(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 k(e,t,n,r){if(e.nodeType!==1)return;const s=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",a=Array.from(e.querySelectorAll(s));e.matches&&e.matches(s)&&a.push(e);for(const c of a)if(!c[n]){window.lnCore._persistSink&&c.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(c,t);try{c[n]=new r(c)}catch(i){console.error("["+n+"] init failed",c,i)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function he(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function be(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 j(){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 we(e){const t=j(),n=e.observed||[];for(let r=0;r<n.length;r++){const o=n[r];t.byAttr.has(o)||t.byAttr.set(o,[]),t.byAttr.get(o).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const r in e.attributes){t.byDeclaredAttr.has(r)||t.byDeclaredAttr.set(r,[]);const o=t.byDeclaredAttr.get(r);o.some(s=>s.componentTag===e.componentTag)||o.push({spec:e.attributes[r],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const r=fe(e);if(r===null)t.reactiveWildcard.push(e);else for(const o of r)t.byReactive.has(o)||t.byReactive.set(o,[]),t.byReactive.get(o).push(e)}e.persist&&t.persist.push(e)}function B(e,t,n,r){for(let o=0;o<e.length;o++){const s=e[o];if(!t[s.attribute])continue;const a=s.effects&&s.effects[n];a?a(t,n,r):s.onAttrChange&&(!s.declared||s.declared.has(n))&&s.onAttrChange(t,n,r)}}function pe(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const r=j(),o=r.byAttr.get(n);if(K()&&r.byDeclaredAttr&&r.byDeclaredAttr.has(n)&&A(t)){const s=r.byDeclaredAttr.get(n),a=t.getAttribute(n);for(let c=0;c<s.length;c++)M(s[c].spec,a,n,s[c].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||o)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const s=r.byReactive.get(n);s&&B(s,t,n,e.oldValue),r.reactiveWildcard.length&&B(r.reactiveWildcard,t,n,e.oldValue)}if(o)for(let s=0;s<o.length;s++){const a=o[s];if(a.handler){a.handler(t,n,e.oldValue);continue}a.onAttributeChange&&t[a.attribute]?a.onAttributeChange(t,n):(k(t,a.selector,a.attribute,a.ComponentFn),a.onInit&&a.onInit(t))}}function ge(){window.lnCore=window.lnCore||{},!window.lnCore._attrObserverBound&&(window.lnCore._attrObserverBound=!0,m(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++)try{pe(t[n])}catch(r){console.error("[ln-core] mutation handler failed",t[n].target,r)}}).observe(document.body,{attributes:!0,subtree:!0,attributeOldValue:!0})},"ln-core"))}function H(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function me(e){const t=H();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const r=t[n];if(r.onSubtreeChange){const o=r.query,s=e.target.nodeType===1?e.target.matches(o)?e.target:e.target.closest(o):e.target.parentElement?e.target.parentElement.closest(o):null;s&&r.onSubtreeChange(s,e)}}for(let n=0;n<e.addedNodes.length;n++){const r=e.addedNodes[n];if(r.nodeType===1)for(let o=0;o<t.length;o++){const s=t[o];k(r,s.selector,s.attribute,s.ComponentFn),s.onInit&&s.onInit(r)}}for(let n=0;n<e.removedNodes.length;n++){const r=e.removedNodes[n];if(r.nodeType===1)for(let o=0;o<t.length;o++){const s=t[o],a=s.query,c=Array.from(r.querySelectorAll(a));r.matches&&r.matches(a)&&c.push(r);for(let i=0;i<c.length;i++){const u=c[i];if(!document.contains(u)){const d=u[s.attribute];if(d&&typeof d.destroy=="function")try{d.destroy()}catch(l){console.error("["+s.attribute+"] destroy failed",u,l)}delete u[s.attribute]}}}}}}function ye(){window.lnCore=window.lnCore||{},!window.lnCore._lifecycleObserverBound&&(window.lnCore._lifecycleObserverBound=!0,m(function(){new MutationObserver(function(t){for(let n=0;n<t.length;n++){const r=t[n];if(r.type==="childList")try{me(r)}catch(o){console.error("[ln-core] lifecycle handler failed",r.target,o)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function Ce(e,t,n,r,o={}){const s=o.extraAttributes||[],a=o.onAttributeChange||null,c=o.onSubtreeChange||null,i=o.onInit||null,u=o.onAttrChange||null,d=o.effects||null,l=o.attributes||null,f=l?de(l):d,b=l?new Set(Object.keys(l)):null,C=o.persist||null;function h(E){const w=E||document.body;if(k(w,e,t,n),l&&K())for(const g in l){const Ee=l[g],T=Array.from(w.querySelectorAll("["+g+"]"));w.matches&&w.matches("["+g+"]")&&T.push(w);for(let O=0;O<T.length;O++){const x=T[O];A(x)&&M(Ee,x.getAttribute(g),g,r,x)}}i&&i(w)}const L=[];if(e.indexOf("[")!==-1){const E=/\[([\w-]+)/g;let w;for(;(w=E.exec(e))!==null;)L.push(w[1])}else L.push(e);we({selector:e,attribute:t,componentTag:r,attributes:l,ComponentFn:n,onInit:i,observed:L.concat(s),onAttributeChange:a,onAttrChange:u,effects:f,declared:b,persist:C}),ge();const Le=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";H().push({selector:e,attribute:t,ComponentFn:n,onInit:i,onSubtreeChange:c,query:Le}),ye(),window[t]=h;function J(){he()>0?be(function(){h(document.body)}):h(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",J):J(),h}function W(e){return(e||"").replace(/^#/,"")}function S(e){const t=e===void 0?location.hash:e,n={},r=W(t);if(!r)return n;const o=r.split("&");for(let s=0;s<o.length;s++){const a=o[s];if(!a)continue;const c=a.indexOf(":"),i=c>-1?a.slice(0,c):a,u=c>-1?a.slice(c+1):"";if(i)try{n[i]=decodeURIComponent(u)}catch{n[i]=u}}return n}function p(e){if(!e)return null;const t=S();return e in t?t[e]:null}function y(e,t){if(!e)return;const n=S();t==null?delete n[e]:n[e]=String(t);const o=Object.keys(n).map(function(s){const a=n[s];return a===""?s:s+":"+encodeURIComponent(a)}).join("&");W(location.hash)!==o&&(location.hash=o)}function P(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function Ae(e,t){if(!e||!e.hasAttribute("data-ln-hash"))return null;const n=e.getAttribute("data-ln-hash");if(n&&n.trim()!=="")return n.trim();const r=e.getAttribute("data-ln-sort")||e.getAttribute("data-ln-search-for")||e.getAttribute("data-ln-search")||e.getAttribute("data-ln-filter")||e.id;return r?t?r+"-"+t:r:t||null}function ve(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function _e(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 ke(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function Se(e){if(!e||typeof e!="string")return null;const t=e.indexOf(":");if(t===-1)return null;const n=e.slice(0,t),r=e.slice(t+1),o=r?r.split(",").map(function(s){try{return decodeURIComponent(s)}catch{return s}}).filter(Boolean):[];return{key:n,values:o}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=S,window.lnCore.hashGet=p,window.lnCore.hashSet=y,window.lnCore.hashLinkClick=P,window.lnCore.resolveHashNamespace=Ae,window.lnCore.hashSortEncode=ve,window.lnCore.hashSortDecode=_e,window.lnCore.hashFilterEncode=ke,window.lnCore.hashFilterDecode=Se);function V(e,t,n,r){const o=(e||"").toLowerCase().trim();if(o)return o;if((t||"").toUpperCase()!=="A")return"";const s=n||"";if(!s.startsWith("#"))return"";const a=s.slice(1);if(!a)return"";const c=a.split("&"),i=(r||"").toLowerCase().trim();if(i)for(const l of c){const f=l.indexOf(":");if(f>0&&l.slice(0,f).toLowerCase().trim()===i)return l.slice(f+1).toLowerCase().trim()}const u=c[c.length-1]||"",d=u.indexOf(":");return(d>0?u.slice(d+1):u).toLowerCase().trim()}function U(e,t){if(!Array.isArray(e)||e.length===0)return{hashEnabled:!1,warning:null};const n=e.filter(s=>(s.tagName||"").toUpperCase()==="A"&&(s.href||"").startsWith("#")),r=n.length>0&&n.length===e.length,o=(t||"").toLowerCase().trim();return n.length>0&&n.length!==e.length?{hashEnabled:!1,warning:"mixed"}:r&&!o?{hashEnabled:!1,warning:"missing-namespace"}:{hashEnabled:r&&!!o,warning:null}}function Q(e,t,n){const r=(e||"").toLowerCase().trim();return r&&Array.isArray(t)&&t.includes(r)?r:(n||"").toLowerCase().trim()}(function(){const e="data-ln-tabs",t="lnTabs";if(window[t]!==void 0&&window[t]!==null)return;function n(i){const u=i.getAttribute("data-ln-tabs-active");i[t]&&i[t]._applyActive(u)}function r(i,u){return(i.getAttribute(u)||i.id||"").toLowerCase().trim()}const o={"data-ln-tabs":{type:"marker",description:"Mounts lnTabs component instance on tabs container"},"data-ln-tabs-active":{effect:n,type:"string",description:"Active tab key identifier"},"data-ln-tabs-default":{type:"string",description:"Default fallback tab key when none selected"},"data-ln-tabs-focus":{prop:"autoFocus",read:F,type:"boolean",fallback:!0,description:"Whether to shift focus to newly activated tab panel"},"data-ln-tabs-key":{prop:"nsKey",read:r,type:"string",description:"Hash namespace key for URL hash synchronization"},"data-ln-tab":{type:"string",description:"Tab trigger key identifier"},"data-ln-panel":{type:"string",description:"Tab content panel key identifier matching corresponding tab"}},s=ue(o);function a(i){return this.dom=i,ce(this,i,s),this.activeKey=null,c.call(this),this}function c(){this.tabs=Array.from(this.dom.querySelectorAll("[data-ln-tab]")),this.panels=Array.from(this.dom.querySelectorAll("[data-ln-panel]"));const i=this.tabs.map(l=>({tagName:l.tagName,href:l.getAttribute("href")})),u=U(i,this.nsKey);this.hashEnabled=u.hashEnabled,u.warning==="mixed"?console.warn('[ln-tabs] Mixed <a href="#…"> and <button> triggers in one group — using persist mode. Pick one: anchors for URL hash, buttons for localStorage persist.',this.dom):u.warning==="missing-namespace"&&console.warn("[ln-tabs] Anchor triggers need a hash namespace — add id or data-ln-tabs-key to the wrapper. Falling back to non-hash mode.",this.dom),this.mapTabs={},this.mapPanels={};for(const l of this.tabs){const f=V(l.getAttribute("data-ln-tab"),l.tagName,l.getAttribute("href"),this.nsKey);f?this.mapTabs[f]=l:console.warn('[ln-tabs] Trigger has no resolvable key — needs `data-ln-tab="key"` or `<a href="#…">`.',l)}for(const l of this.panels){const f=(l.getAttribute("data-ln-panel")||"").toLowerCase().trim();f&&(this.mapPanels[f]=l)}this.defaultKey=(this.dom.getAttribute("data-ln-tabs-default")||"").toLowerCase().trim()||Object.keys(this.mapTabs)[0]||"";const d=this;this._clickHandlers=[];for(const l of this.tabs){if(l[t+"Trigger"])continue;const f=function(b){const C=l.tagName==="A";if(!C&&(b.ctrlKey||b.metaKey||b.button===1))return;const h=V(l.getAttribute("data-ln-tab"),l.tagName,l.getAttribute("href"),d.nsKey);h&&(C&&!P(b)||(d.hashEnabled?p(d.nsKey)===h?d.dom.setAttribute("data-ln-tabs-active",h):y(d.nsKey,h):d.dom.setAttribute("data-ln-tabs-active",h)))};l.addEventListener("click",f),l[t+"Trigger"]=f,d._clickHandlers.push({el:l,handler:f})}if(this._onRequestSelect=function(l){const f=l.detail&&(l.detail.key||l.detail.tab);f&&d.select(f)},this.dom.addEventListener("ln-tabs:request-select",this._onRequestSelect),this._hashHandler=function(){if(!d.hashEnabled)return;const l=p(d.nsKey);d.dom.setAttribute("data-ln-tabs-active",l!==null?l:d.defaultKey)},this.hashEnabled)window.addEventListener("hashchange",this._hashHandler),this._hashHandler();else{const l=Q(this.dom.getAttribute("data-ln-tabs-active"),Object.keys(this.mapPanels),this.defaultKey);this.dom.setAttribute("data-ln-tabs-active",l)}}a.prototype.select=function(i){const u=(i+"").toLowerCase().trim();u&&(this.hashEnabled?p(this.nsKey)===u?this.dom.setAttribute("data-ln-tabs-active",u):y(this.nsKey,u):this.dom.setAttribute("data-ln-tabs-active",u))},a.prototype._applyActive=function(i){var d;if(i=Q(i,Object.keys(this.mapPanels),this.defaultKey),i===this.activeKey)return;const u=this.activeKey;if(u!==null&&z(this.dom,"ln-tabs:before-change",{key:i,previousKey:u,tab:this.mapTabs[i],panel:this.mapPanels[i],target:this.dom}).defaultPrevented){u in this.mapPanels&&(this.dom.setAttribute("data-ln-tabs-active",u),this.hashEnabled&&p(this.nsKey)!==u&&y(this.nsKey,u));return}this.activeKey=i;for(const l in this.mapTabs){const f=this.mapTabs[l];l===i?(f.setAttribute("data-active",""),f.setAttribute("aria-selected","true")):(f.removeAttribute("data-active"),f.setAttribute("aria-selected","false"))}for(const l in this.mapPanels){const f=this.mapPanels[l],b=l===i;f.classList.toggle("hidden",!b),f.setAttribute("aria-hidden",b?"false":"true")}if(this.autoFocus){const l=(d=this.mapPanels[i])==null?void 0:d.querySelector('input,button,select,textarea,[tabindex]:not([tabindex="-1"])');l&&setTimeout(()=>l.focus({preventScroll:!0}),0)}q(this.dom,"ln-tabs:change",{key:i,previousKey:u,tab:this.mapTabs[i],panel:this.mapPanels[i],target:this.dom})},a.prototype.destroy=function(){if(this.dom[t]){this.dom.removeEventListener("ln-tabs:request-select",this._onRequestSelect);for(const{el:i,handler:u}of this._clickHandlers)i.removeEventListener("click",u),delete i[t+"Trigger"];this.hashEnabled&&window.removeEventListener("hashchange",this._hashHandler),delete this.dom[t]}},Ce(e,t,a,"ln-tabs",{attributes:o,persist:{attr:"data-ln-tabs-active",hashActive:function(i){const u=Array.from(i.querySelectorAll("[data-ln-tab]")).map(function(l){return{tagName:l.tagName,href:l.getAttribute("href")}}),d=(i.getAttribute("data-ln-tabs-key")||i.id||"").toLowerCase().trim();return U(u,d).hashEnabled}}})})()})();

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

@@ -0,0 +1,75 @@
+{
+	"$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-tabs",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-tabs-dev.scss"
+			]
+		},
+		"data-ln-panel": {
+			"direction": "author",
+			"sources": [
+				"ln-tabs.scss",
+				"src/ln-tabs.js"
+			],
+			"type": "string",
+			"description": "Tab content panel key identifier matching corresponding tab"
+		},
+		"data-ln-tab": {
+			"direction": "author",
+			"sources": [
+				"ln-tabs-dev.scss",
+				"src/ln-tabs.js"
+			],
+			"type": "string",
+			"description": "Tab trigger key identifier"
+		},
+		"data-ln-tabs": {
+			"direction": null,
+			"sources": [
+				"ln-tabs-dev.scss",
+				"ln-tabs.scss",
+				"src/ln-tabs.js"
+			],
+			"type": "marker",
+			"description": "Mounts lnTabs component instance on tabs container"
+		},
+		"data-ln-tabs-active": {
+			"direction": "both",
+			"sources": [
+				"src/ln-tabs.js"
+			],
+			"type": "string",
+			"description": "Active tab key identifier"
+		},
+		"data-ln-tabs-default": {
+			"direction": "author",
+			"sources": [
+				"src/ln-tabs.js"
+			],
+			"type": "string",
+			"description": "Default fallback tab key when none selected"
+		},
+		"data-ln-tabs-focus": {
+			"direction": null,
+			"sources": [
+				"src/ln-tabs.js"
+			],
+			"type": "boolean",
+			"fallback": true,
+			"description": "Whether to shift focus to newly activated tab panel"
+		},
+		"data-ln-tabs-key": {
+			"direction": "author",
+			"sources": [
+				"ln-tabs-dev.scss",
+				"src/ln-tabs.js"
+			],
+			"type": "string",
+			"description": "Hash namespace key for URL hash synchronization"
+		}
+	}
+}

package/components/ln-tabs/ln-tabs.scss

@@ -0,0 +1,8 @@
+// ==========================================================================
+// ln-tabs — Functional Panel State
+// ==========================================================================
+
+[data-ln-tabs] [data-ln-panel].hidden,
+[data-ln-tabs] [data-ln-panel][aria-hidden="true"] {
+	display: none;
+}

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

@@ -0,0 +1,207 @@
+/* Live Networks - lnTabs (hash-aware tabs — supports <button> and <a href="#nsKey:key"> triggers) */
+import { dispatch, dispatchCancelable, hashGet, hashLinkClick, hashSet, registerComponent, attrSpec, defineAttrs, attrBool } from '../../ln-core';
+import { deriveKeyFromTrigger, determineTabsMode, resolveActiveTabKey } from './tabs-model.js';
+
+(function () {
+	const DOM_SELECTOR = "data-ln-tabs";
+	const DOM_ATTRIBUTE = "lnTabs";
+
+	if (window[DOM_ATTRIBUTE] !== undefined && window[DOM_ATTRIBUTE] !== null) return;
+
+	function _syncActive(el) {
+		const key = el.getAttribute('data-ln-tabs-active');
+		if (el[DOM_ATTRIBUTE]) el[DOM_ATTRIBUTE]._applyActive(key);
+	}
+
+	function _readTabsKey(el, name)     { return (el.getAttribute(name) || el.id || '').toLowerCase().trim(); }
+
+	// ─── Attribute Contract (SSOT) ──────────────────────────
+	const ATTRIBUTES = {
+		'data-ln-tabs':         { type: 'marker', description: 'Mounts lnTabs component instance on tabs container' },
+		'data-ln-tabs-active':  { effect: _syncActive, type: 'string', description: 'Active tab key identifier' },
+		'data-ln-tabs-default': { type: 'string', description: 'Default fallback tab key when none selected' },
+		'data-ln-tabs-focus':   { prop: 'autoFocus', read: attrBool, type: 'boolean', fallback: true, description: 'Whether to shift focus to newly activated tab panel' },
+		'data-ln-tabs-key':     { prop: 'nsKey', read: _readTabsKey, type: 'string', description: 'Hash namespace key for URL hash synchronization' },
+		'data-ln-tab':          { type: 'string', description: 'Tab trigger key identifier' },
+		'data-ln-panel':        { type: 'string', description: 'Tab content panel key identifier matching corresponding tab' }
+	};
+
+	const ATTR_SPEC = attrSpec(ATTRIBUTES);
+
+	function _component(dom) { this.dom = dom; defineAttrs(this, dom, ATTR_SPEC); this.activeKey = null; _init.call(this); return this; }
+
+	function _init() {
+		this.tabs   = Array.from(this.dom.querySelectorAll("[data-ln-tab]"));
+		this.panels = Array.from(this.dom.querySelectorAll("[data-ln-panel]"));
+
+		const triggerDescriptors = this.tabs.map(t => ({
+			tagName: t.tagName,
+			href: t.getAttribute('href')
+		}));
+		const modeInfo = determineTabsMode(triggerDescriptors, this.nsKey);
+		this.hashEnabled = modeInfo.hashEnabled;
+
+		if (modeInfo.warning === 'mixed') {
+			console.warn('[ln-tabs] Mixed <a href="#…"> and <button> triggers in one group — using persist mode. Pick one: anchors for URL hash, buttons for localStorage persist.', this.dom);
+		} else if (modeInfo.warning === 'missing-namespace') {
+			console.warn('[ln-tabs] Anchor triggers need a hash namespace — add id or data-ln-tabs-key to the wrapper. Falling back to non-hash mode.', this.dom);
+		}
+
+		this.mapTabs = {};
+		this.mapPanels = {};
+		for (const t of this.tabs) {
+			const key = deriveKeyFromTrigger(t.getAttribute('data-ln-tab'), t.tagName, t.getAttribute('href'), this.nsKey);
+			if (key) {
+				this.mapTabs[key] = t;
+			} else {
+				console.warn('[ln-tabs] Trigger has no resolvable key — needs `data-ln-tab="key"` or `<a href="#…">`.', t);
+			}
+		}
+		for (const p of this.panels) {
+			const key = (p.getAttribute("data-ln-panel") || "").toLowerCase().trim();
+			if (key) this.mapPanels[key] = p;
+		}
+
+		// Not a pure attribute mirror: falls back to the first tab key, which
+		// only exists once mapTabs is built. A reader cannot reach instance state.
+		this.defaultKey = (this.dom.getAttribute("data-ln-tabs-default") || "").toLowerCase().trim()
+			|| Object.keys(this.mapTabs)[0] || "";
+
+		const self = this;
+		this._clickHandlers = [];
+		for (const t of this.tabs) {
+			if (t[DOM_ATTRIBUTE + 'Trigger']) continue;
+			const handler = function (e) {
+				const isAnchor = t.tagName === "A";
+				if (!isAnchor && (e.ctrlKey || e.metaKey || e.button === 1)) return;
+				const key = deriveKeyFromTrigger(t.getAttribute('data-ln-tab'), t.tagName, t.getAttribute('href'), self.nsKey);
+				if (!key) return;
+				if (isAnchor && !hashLinkClick(e)) return;
+				if (self.hashEnabled) {
+					if (hashGet(self.nsKey) === key) self.dom.setAttribute('data-ln-tabs-active', key);
+					else hashSet(self.nsKey, key);
+				} else {
+					self.dom.setAttribute('data-ln-tabs-active', key);
+				}
+			};
+			t.addEventListener("click", handler);
+			t[DOM_ATTRIBUTE + 'Trigger'] = handler;
+			self._clickHandlers.push({ el: t, handler: handler });
+		}
+
+		this._onRequestSelect = function (e) {
+			const key = e.detail && (e.detail.key || e.detail.tab);
+			if (key) self.select(key);
+		};
+		this.dom.addEventListener('ln-tabs:request-select', this._onRequestSelect);
+
+		this._hashHandler = function () {
+			if (!self.hashEnabled) return;
+			const val = hashGet(self.nsKey);
+			self.dom.setAttribute('data-ln-tabs-active', val !== null ? val : self.defaultKey);
+		};
+
+		if (this.hashEnabled) {
+			window.addEventListener("hashchange", this._hashHandler);
+			this._hashHandler();
+		} else {
+			const initialKey = resolveActiveTabKey(this.dom.getAttribute('data-ln-tabs-active'), Object.keys(this.mapPanels), this.defaultKey);
+			this.dom.setAttribute('data-ln-tabs-active', initialKey);
+		}
+	}
+
+	_component.prototype.select = function (key) {
+		const k = (key + '').toLowerCase().trim();
+		if (!k) return;
+		if (this.hashEnabled) {
+			if (hashGet(this.nsKey) === k) this.dom.setAttribute('data-ln-tabs-active', k);
+			else hashSet(this.nsKey, k);
+		} else {
+			this.dom.setAttribute('data-ln-tabs-active', k);
+		}
+	};
+
+	_component.prototype._applyActive = function (key) {
+		key = resolveActiveTabKey(key, Object.keys(this.mapPanels), this.defaultKey);
+		if (key === this.activeKey) return;
+
+		const prevKey = this.activeKey;
+		if (prevKey !== null) {
+			const before = dispatchCancelable(this.dom, 'ln-tabs:before-change', {
+				key: key,
+				previousKey: prevKey,
+				tab: this.mapTabs[key],
+				panel: this.mapPanels[key],
+				target: this.dom
+			});
+			if (before.defaultPrevented) {
+				if (prevKey in this.mapPanels) {
+					this.dom.setAttribute('data-ln-tabs-active', prevKey);
+					if (this.hashEnabled && hashGet(this.nsKey) !== prevKey) {
+						hashSet(this.nsKey, prevKey);
+					}
+				}
+				return;
+			}
+		}
+
+		this.activeKey = key;
+
+		for (const k in this.mapTabs) {
+			const btn = this.mapTabs[k];
+			if (k === key) {
+				btn.setAttribute("data-active", "");
+				btn.setAttribute("aria-selected", "true");
+			} else {
+				btn.removeAttribute("data-active");
+				btn.setAttribute("aria-selected", "false");
+			}
+		}
+		for (const k in this.mapPanels) {
+			const panel = this.mapPanels[k];
+			const show = (k === key);
+			panel.classList.toggle("hidden", !show);
+			panel.setAttribute("aria-hidden", show ? "false" : "true");
+		}
+		if (this.autoFocus) {
+			const first = this.mapPanels[key]?.querySelector('input,button,select,textarea,[tabindex]:not([tabindex="-1"])');
+			if (first) setTimeout(() => first.focus({ preventScroll: true }), 0);
+		}
+		dispatch(this.dom, 'ln-tabs:change', {
+			key: key,
+			previousKey: prevKey,
+			tab: this.mapTabs[key],
+			panel: this.mapPanels[key],
+			target: this.dom
+		});
+	};
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this.dom.removeEventListener('ln-tabs:request-select', this._onRequestSelect);
+		for (const { el, handler } of this._clickHandlers) {
+			el.removeEventListener("click", handler);
+			delete el[DOM_ATTRIBUTE + 'Trigger'];
+		}
+		if (this.hashEnabled) {
+			window.removeEventListener("hashchange", this._hashHandler);
+		}
+		delete this.dom[DOM_ATTRIBUTE];
+	};
+
+	// ─── Init ──────────────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-tabs', {
+		attributes: ATTRIBUTES,
+		persist: {
+			attr: 'data-ln-tabs-active',
+			hashActive: function (el) {
+				const triggers = Array.from(el.querySelectorAll('[data-ln-tab]')).map(function (t) {
+					return { tagName: t.tagName, href: t.getAttribute('href') };
+				});
+				const nsKey = (el.getAttribute('data-ln-tabs-key') || el.id || '').toLowerCase().trim();
+				return determineTabsMode(triggers, nsKey).hashEnabled;
+			}
+		}
+	});
+})();

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

@@ -0,0 +1,82 @@
+/**
+ * Derives a tab key from an explicit attribute or anchor href hash fragment.
+ * @param {string|null} explicitTabAttr
+ * @param {string} tagName
+ * @param {string|null} href
+ * @param {string|null} [nsKey]
+ * @returns {string}
+ */
+export function deriveKeyFromTrigger(explicitTabAttr, tagName, href, nsKey) {
+	const explicit = (explicitTabAttr || '').toLowerCase().trim();
+	if (explicit) return explicit;
+
+	if ((tagName || '').toUpperCase() !== 'A') return '';
+
+	const rawHref = href || '';
+	if (!rawHref.startsWith('#')) return '';
+
+	const raw = rawHref.slice(1);
+	if (!raw) return '';
+
+	const fragments = raw.split('&');
+	const normalizedNs = (nsKey || '').toLowerCase().trim();
+
+	if (normalizedNs) {
+		for (const frag of fragments) {
+			const sep = frag.indexOf(':');
+			if (sep > 0 && frag.slice(0, sep).toLowerCase().trim() === normalizedNs) {
+				return frag.slice(sep + 1).toLowerCase().trim();
+			}
+		}
+	}
+
+	const last = fragments[fragments.length - 1] || '';
+	const sep = last.indexOf(':');
+	return (sep > 0 ? last.slice(sep + 1) : last).toLowerCase().trim();
+}
+
+/**
+ * Determines whether tabs should use URL hash sync mode or local persist mode.
+ * @param {Array<{ tagName: string, href?: string|null }>} triggers
+ * @param {string|null} nsKey
+ * @returns {{ hashEnabled: boolean, warning: 'mixed' | 'missing-namespace' | null }}
+ */
+export function determineTabsMode(triggers, nsKey) {
+	if (!Array.isArray(triggers) || triggers.length === 0) {
+		return { hashEnabled: false, warning: null };
+	}
+
+	const anchorTabs = triggers.filter(
+		t => (t.tagName || '').toUpperCase() === 'A' && (t.href || '').startsWith('#')
+	);
+	const allAnchors = anchorTabs.length > 0 && anchorTabs.length === triggers.length;
+	const normalizedNs = (nsKey || '').toLowerCase().trim();
+
+	if (anchorTabs.length > 0 && anchorTabs.length !== triggers.length) {
+		return { hashEnabled: false, warning: 'mixed' };
+	}
+
+	if (allAnchors && !normalizedNs) {
+		return { hashEnabled: false, warning: 'missing-namespace' };
+	}
+
+	return {
+		hashEnabled: allAnchors && Boolean(normalizedNs),
+		warning: null
+	};
+}
+
+/**
+ * Resolves the valid active key against registered panel keys with fallback.
+ * @param {string|null} requestedKey
+ * @param {string[]} validPanelKeys
+ * @param {string} defaultKey
+ * @returns {string}
+ */
+export function resolveActiveTabKey(requestedKey, validPanelKeys, defaultKey) {
+	const key = (requestedKey || '').toLowerCase().trim();
+	if (key && Array.isArray(validPanelKeys) && validPanelKeys.includes(key)) {
+		return key;
+	}
+	return (defaultKey || '').toLowerCase().trim();
+}

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

@@ -1,95 +1,96 @@
-# ln-time
-
-A zero-dependency, progressive **Timezone-Aware Timestamp Formatter** that localizes standard HTML `<time>` elements using native browser APIs.
-
-It replaces server-rendered fallback text with localized, timezone-aware date and time formats, performing automatic live updates for relative timestamps using a single shared timer scheduler.
-
----
-
-## 🧭 Philosophy & Architecture
-
-1. **Progressive Enhancement:** Server layouts (e.g. Laravel Blade templates) render standard text fallbacks inside native `<time>` elements. If JavaScript fails or is blocked, the original text is preserved; when active, the component compiles and overwrites it.
-2. **Standard-Based API Concurrency:** Built entirely on standard browser APIs (`Intl.DateTimeFormat` and `Intl.RelativeTimeFormat`). It bypasses heavy date-parsing libraries, leveraging the browser's native locale and timezone mappings.
-3. **Shared Interval Loop:** Dynamic relative timestamps (e.g., "5 minutes ago") auto-update every 60 seconds. Instead of spinning up individual intervals, a single global interval manager coordinates all active elements, automatically purging detached nodes.
-4. **Reactive State Resolution:** All state changes are governed by native HTML attributes. Changing `datetime` or `data-ln-time` triggers automatic DOM re-renders via `MutationObserver` synchronization.
-
----
-
-## 📦 Minimal Blueprint
-
-### Static Localized Date
-Provide a Unix timestamp (in seconds) via `datetime` and specify the formatting mode.
-```html
-<!-- Server renders a fallback, JS enhances with user timezone and locale -->
-<time data-ln-time="full" datetime="1736952600">January 15, 2025</time>
-```
-
-### Auto-Updating Relative Timestamp
-```html
-<!-- Automatically updates every 60s (e.g. "3 minutes ago") -->
-<time data-ln-time="relative" datetime="1736952600">Jan 15</time>
-```
-
-### Custom Localized Override
-```html
-<!-- Localizes the time string to Macedonian regardless of browser defaults -->
-<time data-ln-time="full" datetime="1736952600" data-ln-time-locale="mk">Јануари 15, 2025</time>
-```
-
----
-
-## 🛠️ Declarative API Contract
-
-### HTML Attributes
-
-| Attribute | Elements | Description |
-| :--- | :--- | :--- |
-| `data-ln-time` | `<time>` | Format mode: `relative`, `short`, `full`, `date`, `time`. |
-| `datetime` | `<time>` | **Required**. Unix timestamp in **seconds** (not milliseconds). |
-| `data-ln-time-locale`| `<time>` | Opt-in. Force-overrides translation locale (e.g. `"de"`, `"mk"`). |
-
-### Format Modes
-
-| Mode | Output Example | Intl Engine |
-| :--- | :--- | :--- |
-| `relative` | `"3 hr. ago"`, `"just now"`, `"in 2 hr."` | `Intl.RelativeTimeFormat` |
-| `short` | `"Jan 15"` (current year) / `"Jan 15, 2024"` | `{ month: 'short', day: 'numeric' }` |
-| `full` | `"January 15, 2025 at 2:30 PM"` | `{ dateStyle: 'long', timeStyle: 'short' }` |
-| `date` | `"Jan 15, 2025"` | `{ dateStyle: 'medium' }` |
-| `time` | `"2:30 PM"` | `{ timeStyle: 'short' }` |
-
----
-
-## ⚡ Live Relative Thresholds
-
-| Elapsed Time | Evaluated Unit | Output Example (English) |
-| :--- | :--- | :--- |
-| `< 10 seconds` | — | `"now"` |
-| `< 60 seconds` | `second` | `"45 sec. ago"` |
-| `< 60 minutes` | `minute` | `"5 min. ago"` |
-| `< 24 hours` | `hour` | `"3 hr. ago"` |
-| `< 7 days` | `day` | `"2 days ago"` |
-| `< 30 days` | `week` | `"2 wk. ago"` |
-| `>= 30 days` | — | Falls back to static `short` date. |
-
----
-
-## ⚠️ Common Pitfalls
-
-- **Passing Millisecond Timestamps:** Standard database fields and JS date objects often return milliseconds (13 digits). `ln-time` maps strictly to Unix seconds (10 digits). Divide milliseconds by `1000` before rendering.
-- **Using ISO Strings:** `datetime="2025-01-15T14:30:00Z"` is not parsed. The component skips non-numeric values, leaving the original fallback text.
-- **Empty `datetime` Attributes:** If the `datetime` attribute is omitted or empty, the component will skip formatting to preserve server fallback strings.
-
----
-
-## 🔧 Internals
-
-Source: `js/ln-time/ln-time.js`. Registers via `ln-core`'s `registerComponent` with `extraAttributes: ['datetime']` — the shared observer treats mutations to `datetime` (not just `data-ln-time`) as a re-render trigger, so swapping the timestamp on an existing element re-formats it without a manual re-init call.
-
-### Shared interval
-
-All `relative`-mode elements auto-refresh off a single shared `setInterval` (60s), not one timer per element. The interval starts lazily on the first relative element and stops when the last one is gone; elements removed from the DOM without calling `destroy()` are purged from the pool automatically on the next tick rather than leaking.
-
-### Dependencies
-
-Built entirely on `Intl.DateTimeFormat` and `Intl.RelativeTimeFormat` (both browser built-ins) — no date-parsing library, no polyfill.
+# ln-time
+
+> Applied to a `<time data-ln-time="..." datetime="...">` element where `datetime` holds a Unix timestamp in seconds.
+> On initialization and on attribute mutation, it formats the timestamp using browser `Intl.DateTimeFormat` or `Intl.RelativeTimeFormat`
+> and writes the localized string to `time.textContent`. When set to `relative`, a shared 60-second timer periodically recalculates
+> and updates `textContent` without polling the server.
+
+---
+
+## 🧭 Philosophy & Architecture
+
+1. **Progressive Enhancement:** Server layouts (e.g. Laravel Blade templates) render standard text fallbacks inside native `<time>` elements. If JavaScript fails or is blocked, the original text is preserved; when active, the component compiles and overwrites it.
+2. **Standard-Based API Concurrency:** Built entirely on standard browser APIs (`Intl.DateTimeFormat` and `Intl.RelativeTimeFormat`). It bypasses heavy date-parsing libraries, leveraging the browser's native locale and timezone mappings.
+3. **Shared Interval Loop:** Dynamic relative timestamps (e.g., "5 minutes ago") auto-update every 60 seconds. Instead of spinning up individual intervals, a single global interval manager coordinates all active elements, automatically purging detached nodes.
+4. **Reactive State Resolution:** All state changes are governed by native HTML attributes. Changing `datetime` or `data-ln-time` triggers automatic DOM re-renders via `MutationObserver` synchronization.
+
+---
+
+## 📦 Minimal Blueprint
+
+### Static Localized Date
+Provide a Unix timestamp (in seconds) via `datetime` and specify the formatting mode.
+```html
+<!-- Server renders a fallback, JS enhances with user timezone and locale -->
+<time data-ln-time="full" datetime="1736952600">January 15, 2025</time>
+```
+
+### Auto-Updating Relative Timestamp
+```html
+<!-- Automatically updates every 60s (e.g. "3 minutes ago") -->
+<time data-ln-time="relative" datetime="1736952600">Jan 15</time>
+```
+
+### Custom Localized Override
+```html
+<!-- Localizes the time string to Macedonian regardless of browser defaults -->
+<time data-ln-time="full" datetime="1736952600" data-ln-time-locale="mk">Јануари 15, 2025</time>
+```
+
+---
+
+## 🛠️ Declarative API Contract
+
+### HTML Attributes
+
+| Attribute | Elements | Description |
+| :--- | :--- | :--- |
+| `data-ln-time` | `<time>` | Format mode: `relative`, `short`, `full`, `date`, `time`. |
+| `datetime` | `<time>` | **Required**. Unix timestamp in **seconds**. Milliseconds and ISO 8601 strings are also read (via `ln-core`'s `parseDateInput`). |
+| `data-ln-time-locale`| `<time>` | Opt-in. Force-overrides translation locale (e.g. `"de"`, `"mk"`). |
+
+### Format Modes
+
+| Mode | Output Example | Intl Engine |
+| :--- | :--- | :--- |
+| `relative` | `"3 hr. ago"`, `"just now"`, `"in 2 hr."` | `Intl.RelativeTimeFormat` |
+| `short` | `"Jan 15"` (current year) / `"Jan 15, 2024"` | `{ month: 'short', day: 'numeric' }` |
+| `full` | `"January 15, 2025 at 2:30 PM"` | `{ dateStyle: 'long', timeStyle: 'short' }` |
+| `date` | `"Jan 15, 2025"` | `{ dateStyle: 'medium' }` |
+| `time` | `"2:30 PM"` | `{ timeStyle: 'short' }` |
+
+---
+
+## ⚡ Live Relative Thresholds
+
+| Elapsed Time | Evaluated Unit | Output Example (English) |
+| :--- | :--- | :--- |
+| `< 10 seconds` | — | `"now"` |
+| `< 60 seconds` | `second` | `"45 sec. ago"` |
+| `< 60 minutes` | `minute` | `"5 min. ago"` |
+| `< 24 hours` | `hour` | `"3 hr. ago"` |
+| `< 7 days` | `day` | `"2 days ago"` |
+| `< 30 days` | `week` | `"2 wk. ago"` |
+| `>= 30 days` | — | Falls back to static `short` date. |
+
+---
+
+## ⚠️ Common Pitfalls
+
+- **Seconds vs milliseconds is decided by magnitude:** a value ≥ 10¹¹ is read as milliseconds, smaller as seconds, so `1736952600` and `1736952600000` render the same instant.
+- **Date-only ISO is local:** `datetime="2025-01-15"` is local midnight of that day; a full timestamp (`2025-01-15T14:30:00Z`) is that exact instant.
+- **Empty `datetime` Attributes:** If the `datetime` attribute is omitted or empty, the component will skip formatting to preserve server fallback strings.
+
+---
+
+## 🔧 Internals
+
+Source: `components/ln-time/ln-time.js`. Registers via `ln-core`'s `registerComponent` with `extraAttributes: ['datetime']` — the shared observer treats mutations to `datetime` (not just `data-ln-time`) as a re-render trigger, so swapping the timestamp on an existing element re-formats it without a manual re-init call.
+
+### Shared interval
+
+All `relative`-mode elements auto-refresh off a single shared `setInterval` (60s), not one timer per element. The interval starts lazily on the first relative element and stops when the last one is gone; elements removed from the DOM without calling `destroy()` are purged from the pool automatically on the next tick rather than leaking.
+
+### Dependencies
+
+Built entirely on `Intl.DateTimeFormat` and `Intl.RelativeTimeFormat` (both browser built-ins) — no date-parsing library, no polyfill.

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

@@ -0,0 +1,13 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Host Element Check: data-ln-time belongs on native <time> elements
+	[data-ln-time]:not(time) {
+		@include dev-inline-error("data-ln-time belongs on native <time> elements");
+	}
+
+	// 2. Datetime Attribute Check: <time data-ln-time> requires a datetime attribute
+	time[data-ln-time]:not([datetime]) {
+		@include dev-inline-error("<time data-ln-time> is missing required datetime attribute");
+	}
+}