@livenetworks/ashlar 1.5.1 → 1.6.1

package/js/ln-circular-progress/README.md

@@ -22,9 +22,7 @@ The host element must be empty at init — the constructor `appendChild`s the SV
 |---|---|---|
 | `data-ln-circular-progress="N"` | host element | Current value. Creates the instance. Number; negative or above-max values are allowed — the rendered percentage clamps to 0–100, but the attribute is left as-written. Empty / non-numeric strings render as 0%. |
 | `data-ln-circular-progress-max="N"` | host element | Maximum value. Default `100`. Used as denominator in `(value / max) × 100`. `max="0"` forces 0% (avoids divide-by-zero). |
-| `data-ln-circular-progress-label="text"` | host element | Custom centre label, replaces the auto-computed percentage. Read inside `_render`, but **NOT in the MutationObserver filter** — mutating this attribute alone does not trigger a re-render. Update the label alongside a value or max write. |
-
-`data-ln-circular-progress-initialized=""` is set by the constructor and removed by `destroy()`. It is an internal marker — do not read it from project code; use `el.lnCircularProgress` instead.
+| `data-ln-circular-progress-label="text"` | host element | Custom centre label, replaces the auto-computed percentage. Fully observed and reactive — mutating this attribute alone triggers an immediate re-render and updates the centre text and `aria-valuetext`. |
 
 **Size variants** — apply a class to the host: `.sm` (2.5 rem), default (4 rem), `.lg` (6 rem), `.xl` (8 rem). Each rebinds the label font-size.
 
@@ -53,21 +51,15 @@ The event fires on the initial render at construction, as well as on every subse
 
 ## Accessibility
 
-The component sets `aria-hidden="true"` on the constructed `<svg>` — screen readers skip the SVG element. The component does **not** write `role`, `aria-valuenow`, `aria-valuemin`, or `aria-valuemax` on the host. Consumer owns the accessibility tree:
+The component sets `aria-hidden="true"` on the constructed `<svg>` — screen readers skip the SVG element. The component automatically maps and synchronizes ARIA progressbar attributes on the host element (`role="progressbar"`, `aria-valuemin="0"`, `aria-valuemax`, `aria-valuenow` clamped, and `aria-valuetext`). For proper context, screen reader users should be provided with a descriptive label on the host:
 
 ```html
 <div data-ln-circular-progress="75"
-     role="progressbar"
-     aria-valuenow="75"
-     aria-valuemin="0"
-     aria-valuemax="100"
      aria-label="Upload progress"
      class="success">
 </div>
 ```
 
-Keep `aria-valuenow` in sync when writing `data-ln-circular-progress` — the component does not do this automatically.
-
 ## API
 
 `el.lnCircularProgress` on a constructed host element:
@@ -79,7 +71,7 @@ Keep `aria-valuenow` in sync when writing `data-ln-circular-progress` — the co
 | `trackCircle` | `SVGCircleElement` | Background circle (stroke = `--color-border`) |
 | `progressCircle` | `SVGCircleElement` | Fill circle — `stroke-dashoffset` carries the progress |
 | `labelEl` | `HTMLElement` | The `<strong>` element holding the percentage or custom label text |
-| `destroy()` | method | Disconnects the attribute observer, removes the SVG and label from DOM, removes `data-ln-circular-progress-initialized`, deletes `el.lnCircularProgress`. Leaves the value attribute, colour class, and size class in place — setting the value attribute again re-instantiates. |
+| `destroy()` | method | Disconnects the attribute observer, removes the SVG and label from DOM, deletes `el.lnCircularProgress`. Leaves the value attribute, colour class, and size class in place — setting the value attribute again re-instantiates. |
 
 `window.lnCircularProgress(root)` re-runs the init scan over `root`. The shared `registerComponent` observer already covers AJAX inserts; call this manually only for Shadow DOM roots or foreign documents the observer cannot reach.
 
@@ -127,7 +119,6 @@ transition animates the arc from the previous offset to the new one.
 ## What it does NOT do
 
 - No indeterminate / spinner mode. An empty value renders 0% (empty track). For an indeterminate spinner use `@mixin loader`.
-- No automatic ARIA. Consumer adds `role="progressbar"` and keeps `aria-valuenow` in sync.
 - No debounce on rapid attribute writes — each write triggers a synchronous render and a `:change` event.
 - No `setValue()` / `setMax()` / imperative API. `el.setAttribute('data-ln-circular-progress', n)` is the canonical update path.
 
@@ -151,11 +142,34 @@ If you only need circular progress indicators without the rest of the Ashlar lib
 * **Active Development Source**: [js/ln-circular-progress/src/ln-circular-progress.js](file:///c:/laragon/www/ln-ashlar/js/ln-circular-progress/src/ln-circular-progress.js) — The source of truth containing the ES module implementation.
 * **Compiled Standalone Release**: [js/ln-circular-progress/ln-circular-progress.js](file:///c:/laragon/www/ln-ashlar/js/ln-circular-progress/ln-circular-progress.js) — The compiled IIFE distribution file.
 
+## 🔧 Internals
+
+Source: `js/ln-circular-progress/ln-circular-progress.js`. Passive renderer — owns no data; `_render` re-reads all three attributes fresh on every call, no cached value.
+
+### SVG geometry
+
+Fixed module-level constants: `VIEW_SIZE = 36`, `RADIUS = 16`, `CIRCUMFERENCE = 2π·16 ≈ 100.531`. Both circles share `cx=18 cy=18 r=16`, `stroke-width="3"` (1.5 in/out of the radius). The fill circle carries `stroke-dasharray` equal to the full circumference and a `stroke-dashoffset` that shrinks linearly as progress grows (`offset = CIRCUMFERENCE - (pct/100) × CIRCUMFERENCE`), plus `transform="rotate(-90 18 18)"` to start the arc at 12 o'clock instead of 3.
+
+### Render choices
+
+- `parseFloat('') || 0` / `|| 100` — invalid or empty attributes silently fall back to defaults; no warning (consistent with the passive-renderer pattern).
+- Clamping happens at the percentage level, not the attribute level: `detail.value` stays the raw unclamped number, `detail.percentage` is the 0–100 clamp used for the arc — this is how a consumer distinguishes overshoot from the visible fill.
+- ARIA (`role`, `aria-valuemin/max/now`, `aria-valuetext`) is rewritten on every render on the host element itself, not the SVG (which is `aria-hidden`).
+
+### What the per-instance observer watches
+
+`_listenValues` filters to the three state attributes only — deliberately excluding `class`. Colour/size variants are pure CSS; nothing about the SVG geometry depends on the class, so no JS reaction is needed.
+
+### Destroy
+
+Disconnects the attribute observer, removes the SVG and label nodes, removes the ARIA attributes it added, deletes `el.lnCircularProgress`. Leaves the value attribute and any classes in place — a later write to the value attribute re-triggers `registerComponent`'s shared observer and rebuilds the instance from scratch (`_buildSvg` is not idempotent; it always appends new nodes).
+
+---
+
 ## See also
 
 - `@mixin circular-progress` (`scss/config/mixins/_circular-progress.scss`) — SVG layout, fill/track stroke tokens, motion-safe transition, size variant mixins.
 - `scss/components/_circular-progress.scss` — default selector application and the `.success` / `.warning` / `.error` colour variant rules.
 - [`ln-progress`](../ln-progress/README.md) — linear sibling. Same contract shape (`data-ln-progress` + `-max`); supports parent-track shared max.
-- [`docs/js/circular-progress.md`](../../docs/js/circular-progress.md) — architecture reference: SVG geometry constants, render flow, MutationObserver filter, performance notes.
 - `@mixin loader` (`scss/config/mixins/_loader.scss`) — indeterminate spinner for operations with no known fraction.
 - [`docs/architecture/data-flow.md`](../../docs/architecture/data-flow.md) — passive renderer pattern used by this component.

package/js/ln-circular-progress/ln-circular-progress.js

@@ -1 +1 @@
-(function(){"use strict";function _(t,e,c){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:c||{}}))}function y(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){y(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function m(t,e,c,a){if(t.nodeType!==1)return;const d=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",h=Array.from(t.querySelectorAll(d));t.matches&&t.matches(d)&&h.push(t);for(const n of h)n[c]||(n[c]=new a(n))}function A(t,e,c,a,f={}){const d=f.extraAttributes||[],h=f.onAttributeChange||null,n=f.onInit||null;function g(p){const u=p||document.body;m(u,t,e,c),n&&n(u)}return y(function(){const p=new MutationObserver(function(o){for(let i=0;i<o.length;i++){const r=o[i];if(r.type==="childList"){for(let s=0;s<r.addedNodes.length;s++){const l=r.addedNodes[s];l.nodeType===1&&(m(l,t,e,c),n&&n(l))}for(let s=0;s<r.removedNodes.length;s++){const l=r.removedNodes[s];if(l.nodeType===1){const x=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",b=Array.from(l.querySelectorAll(x));l.matches&&l.matches(x)&&b.push(l);for(let v=0;v<b.length;v++){const E=b[v];if(!document.contains(E)){const C=E[e];C&&typeof C.destroy=="function"&&C.destroy()}}}}}else r.type==="attributes"&&(h&&r.target[e]?h(r.target,r.attributeName):(m(r.target,t,e,c),n&&n(r.target)))}});let u=[];if(t.indexOf("[")!==-1){const o=/\[([\w-]+)/g;let i;for(;(i=o.exec(t))!==null;)u.push(i[1])}else u.push(t);p.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:u.concat(d)})},a),window[e]=g,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){g(document.body)}):g(document.body),g}const w={};function O(t,e){w[t]=e}function M(t){return w[t]||{ingress:e=>e,egress:e=>e}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=O,window.lnCore.getDataMapper=M),(function(){const t="data-ln-circular-progress",e="lnCircularProgress";if(window[e]!==void 0)return;const c="http://www.w3.org/2000/svg",a=36,f=16,d=2*Math.PI*f;function h(o){return this.dom=o,this.svg=null,this.trackCircle=null,this.progressCircle=null,this.labelEl=null,this._attrObserver=null,g.call(this),u.call(this),p.call(this),o.setAttribute("data-ln-circular-progress-initialized",""),this}h.prototype.destroy=function(){this.dom[e]&&(this._attrObserver&&this._attrObserver.disconnect(),this.svg&&this.svg.remove(),this.labelEl&&this.labelEl.remove(),this.dom.removeAttribute("data-ln-circular-progress-initialized"),delete this.dom[e])};function n(o,i){const r=document.createElementNS(c,o);for(const s in i)r.setAttribute(s,i[s]);return r}function g(){this.svg=n("svg",{viewBox:"0 0 "+a+" "+a,"aria-hidden":"true"}),this.trackCircle=n("circle",{cx:a/2,cy:a/2,r:f,fill:"none","stroke-width":"3"}),this.trackCircle.classList.add("ln-circular-progress__track"),this.progressCircle=n("circle",{cx:a/2,cy:a/2,r:f,fill:"none","stroke-width":"3","stroke-linecap":"round","stroke-dasharray":d,"stroke-dashoffset":d,transform:"rotate(-90 "+a/2+" "+a/2+")"}),this.progressCircle.classList.add("ln-circular-progress__fill"),this.svg.appendChild(this.trackCircle),this.svg.appendChild(this.progressCircle),this.labelEl=document.createElement("strong"),this.labelEl.classList.add("ln-circular-progress__label"),this.dom.appendChild(this.svg),this.dom.appendChild(this.labelEl)}function p(){const o=this,i=new MutationObserver(function(r){for(const s of r)(s.attributeName==="data-ln-circular-progress"||s.attributeName==="data-ln-circular-progress-max")&&u.call(o)});i.observe(this.dom,{attributes:!0,attributeFilter:["data-ln-circular-progress","data-ln-circular-progress-max"]}),this._attrObserver=i}function u(){const o=parseFloat(this.dom.getAttribute("data-ln-circular-progress"))||0,i=parseFloat(this.dom.getAttribute("data-ln-circular-progress-max"))||100;let r=i>0?o/i*100:0;r<0&&(r=0),r>100&&(r=100);const s=d-r/100*d;this.progressCircle.setAttribute("stroke-dashoffset",s);const l=this.dom.getAttribute("data-ln-circular-progress-label");this.labelEl.textContent=l!==null?l:Math.round(r)+"%",_(this.dom,"ln-circular-progress:change",{target:this.dom,value:o,max:i,percentage:r})}A(t,e,h,"ln-circular-progress")})()})();
+(function(){"use strict";if(typeof window<"u"){const t=console.warn;console.warn=function(...e){typeof e[0]=="string"&&(e[0].startsWith("[ln-")||e[0].startsWith("[lnCore"))&&!(document.documentElement.hasAttribute("data-ln-debug")||document.body&&document.body.hasAttribute("data-ln-debug"))||t.apply(console,e)}}const b={};function N(t,e){b[t]||(b[t]=document.querySelector('[data-ln-template="'+t+'"]'));const r=b[t];return r?r.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function D(t,e,r){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r||{}}))}function E(t,e){if(!t||!e)return t;const r=t.querySelectorAll("[data-ln-field]");for(let n=0;n<r.length;n++){const i=r[n],l=i.getAttribute("data-ln-field");e[l]!=null&&(i.textContent=e[l])}const s=t.querySelectorAll("[data-ln-attr]");for(let n=0;n<s.length;n++){const i=s[n],l=i.getAttribute("data-ln-attr").split(",");for(let a=0;a<l.length;a++){const f=l[a].trim().split(":");if(f.length!==2)continue;const u=f[0].trim(),c=f[1].trim();e[c]!=null&&i.setAttribute(u,e[c])}}const d=t.querySelectorAll("[data-ln-show]");for(let n=0;n<d.length;n++){const i=d[n],l=i.getAttribute("data-ln-show");l in e&&i.classList.toggle("hidden",!e[l])}const o=t.querySelectorAll("[data-ln-class]");for(let n=0;n<o.length;n++){const i=o[n],l=i.getAttribute("data-ln-class").split(",");for(let a=0;a<l.length;a++){const f=l[a].trim().split(":");if(f.length!==2)continue;const u=f[0].trim(),c=f[1].trim();c in e&&i.classList.toggle(u,!!e[c])}}return t}function q(t,e){t.matches&&t.matches("[data-ln-form], [data-ln-fillable]")&&t.dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));const r=t.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let s=0;s<r.length;s++)r[s].dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));return t}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(t){if(!(!t.target.matches||!t.target.matches("[data-ln-fillable]")))if(t.detail)E(t.target,t.detail);else{const e=t.target.querySelectorAll("[data-ln-field]");for(let r=0;r<e.length;r++)e[r].textContent=""}})));function k(t,e){if(!t||!e)return t;const r=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;r.nextNode();){const o=r.currentNode;o.textContent.indexOf("{{")!==-1&&(o.textContent=o.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(n,i){return e[i]!==void 0?e[i]:""}))}const s=function(o,n){return e[n]!==void 0?e[n]:""},d=Array.from(t.querySelectorAll("*"));t.nodeType===1&&d.push(t);for(let o=0;o<d.length;o++){const n=d[o],i=n.attributes;for(let l=0;l<i.length;l++){const a=i[l];a.value.indexOf("{{")!==-1&&n.setAttribute(a.name,a.value.replace(/\{\{\s*(\w+)\s*\}\}/g,s))}}return t}function F(t,e,r,s,d,o){const n={};for(let l=0;l<t.children.length;l++){const a=t.children[l],f=a.getAttribute("data-ln-key");f&&(n[f]=a)}const i=document.createDocumentFragment();for(let l=0;l<e.length;l++){const a=e[l],f=String(s(a));let u=n[f];if(u)d(u,a,l);else{const c=N(r,o);if(!c||(k(c,a),u=c.firstElementChild,!u))continue;u.setAttribute("data-ln-key",f),d(u,a,l)}i.appendChild(u)}t.textContent="",t.appendChild(i)}function S(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){S(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function w(t,e,r,s){if(t.nodeType!==1)return;const o=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",n=Array.from(t.querySelectorAll(o));t.matches&&t.matches(o)&&n.push(t);for(const i of n)i[r]||(i[r]=new s(i))}function I(t,e,r,s,d={}){const o=d.extraAttributes||[],n=d.onAttributeChange||null,i=d.onInit||null;function l(a){const f=a||document.body;w(f,t,e,r),i&&i(f)}return S(function(){const a=new MutationObserver(function(u){for(let c=0;c<u.length;c++){const h=u[c];if(h.type==="childList"){for(let p=0;p<h.addedNodes.length;p++){const m=h.addedNodes[p];m.nodeType===1&&(w(m,t,e,r),i&&i(m))}for(let p=0;p<h.removedNodes.length;p++){const m=h.removedNodes[p];if(m.nodeType===1){const g=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",v=Array.from(m.querySelectorAll(g));m.matches&&m.matches(g)&&v.push(m);for(let A=0;A<v.length;A++){const T=v[A];if(!document.contains(T)){const x=T[e];x&&typeof x.destroy=="function"&&x.destroy()}}}}}else h.type==="attributes"&&(n&&h.target[e]?n(h.target,h.attributeName):(w(h.target,t,e,r),i&&i(h.target)))}});let f=[];if(t.indexOf("[")!==-1){const u=/\[([\w-]+)/g;let c;for(;(c=u.exec(t))!==null;)f.push(c[1])}else f.push(t);a.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:f.concat(o)})},s),window[e]=l,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){l(document.body)}):l(document.body),l}const _={};function j(t,e){_[t]=e}function W(t){return _[t]||{ingress:e=>e,egress:e=>e}}const L={};function O(t,e){if(!t||typeof e!="object")return;const r=t.toLowerCase().split("-")[0];L[r]=e}function R(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return L[e]||null}O("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=j,window.lnCore.getDataMapper=W,window.lnCore.registerLocaleFallback=O,window.lnCore.getLocaleFallback=R,window.lnCore.fillTemplate=k,window.lnCore.fill=E,window.lnCore.lnFill=q,window.lnCore.renderList=F);function M(t){return(t||"").replace(/^#/,"")}function C(t){const e=t===void 0?location.hash:t,r={},s=M(e);if(!s)return r;const d=s.split("&");for(let o=0;o<d.length;o++){const n=d[o];if(!n)continue;const i=n.indexOf(":"),l=i>-1?n.slice(0,i):n,a=i>-1?n.slice(i+1):"";if(l)try{r[l]=decodeURIComponent(a)}catch{r[l]=a}}return r}function B(t){if(!t)return null;const e=C();return t in e?e[t]:null}function U(t,e){if(!t)return;const r=C();e==null?delete r[t]:r[t]=String(e);const d=Object.keys(r).map(function(o){const n=r[o];return n===""?o:o+":"+encodeURIComponent(n)}).join("&");M(location.hash)!==d&&(location.hash=d)}function K(t){return t.button===1||t.ctrlKey||t.metaKey||t.shiftKey?!1:(t.preventDefault(),!0)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=C,window.lnCore.hashGet=B,window.lnCore.hashSet=U,window.lnCore.hashLinkClick=K),(function(){const t="data-ln-circular-progress",e="lnCircularProgress";if(window[e]!==void 0)return;const r="http://www.w3.org/2000/svg",s=36,d=16,o=2*Math.PI*d;function n(u){return this.dom=u,this.svg=null,this.trackCircle=null,this.progressCircle=null,this.labelEl=null,this._attrObserver=null,l.call(this),f.call(this),a.call(this),this}n.prototype.destroy=function(){this.dom[e]&&(this._attrObserver&&this._attrObserver.disconnect(),this.svg&&this.svg.remove(),this.labelEl&&this.labelEl.remove(),this.dom.removeAttribute("role"),this.dom.removeAttribute("aria-valuemin"),this.dom.removeAttribute("aria-valuemax"),this.dom.removeAttribute("aria-valuenow"),this.dom.removeAttribute("aria-valuetext"),delete this.dom[e])};function i(u,c){const h=document.createElementNS(r,u);for(const p in c)h.setAttribute(p,c[p]);return h}function l(){this.svg=i("svg",{viewBox:"0 0 "+s+" "+s,"aria-hidden":"true"}),this.trackCircle=i("circle",{cx:s/2,cy:s/2,r:d,fill:"none","stroke-width":"3"}),this.trackCircle.classList.add("ln-circular-progress__track"),this.progressCircle=i("circle",{cx:s/2,cy:s/2,r:d,fill:"none","stroke-width":"3","stroke-linecap":"round","stroke-dasharray":o,"stroke-dashoffset":o,transform:"rotate(-90 "+s/2+" "+s/2+")"}),this.progressCircle.classList.add("ln-circular-progress__fill"),this.svg.appendChild(this.trackCircle),this.svg.appendChild(this.progressCircle),this.labelEl=document.createElement("strong"),this.labelEl.classList.add("ln-circular-progress__label"),this.dom.appendChild(this.svg),this.dom.appendChild(this.labelEl)}function a(){const u=this,c=new MutationObserver(function(h){for(const p of h)(p.attributeName==="data-ln-circular-progress"||p.attributeName==="data-ln-circular-progress-max"||p.attributeName==="data-ln-circular-progress-label")&&f.call(u)});c.observe(this.dom,{attributes:!0,attributeFilter:["data-ln-circular-progress","data-ln-circular-progress-max","data-ln-circular-progress-label"]}),this._attrObserver=c}function f(){const u=parseFloat(this.dom.getAttribute("data-ln-circular-progress"))||0,c=parseFloat(this.dom.getAttribute("data-ln-circular-progress-max"))||100;let h=c>0?u/c*100:0;h<0&&(h=0),h>100&&(h=100);const p=o-h/100*o;this.progressCircle.setAttribute("stroke-dashoffset",p);const m=this.dom.getAttribute("data-ln-circular-progress-label"),y=m!==null?m:Math.round(h)+"%";this.labelEl.textContent=y,this.dom.setAttribute("role","progressbar"),this.dom.setAttribute("aria-valuemin","0"),this.dom.setAttribute("aria-valuemax",String(c));const g=Math.max(0,Math.min(u,c));this.dom.setAttribute("aria-valuenow",String(g)),this.dom.setAttribute("aria-valuetext",y),D(this.dom,"ln-circular-progress:change",{target:this.dom,value:u,max:c,percentage:h})}I(t,e,n,"ln-circular-progress")})()})();

package/js/ln-circular-progress/src/ln-circular-progress.js

@@ -21,7 +21,6 @@ import { dispatch, registerComponent } from '../../ln-core';
 		_buildSvg.call(this);
 		_render.call(this);
 		_listenValues.call(this);
-		dom.setAttribute('data-ln-circular-progress-initialized', '');
 		return this;
 	}
 
@@ -36,7 +35,11 @@ import { dispatch, registerComponent } from '../../ln-core';
 		if (this.labelEl) {
 			this.labelEl.remove();
 		}
-		this.dom.removeAttribute('data-ln-circular-progress-initialized');
+		this.dom.removeAttribute('role');
+		this.dom.removeAttribute('aria-valuemin');
+		this.dom.removeAttribute('aria-valuemax');
+		this.dom.removeAttribute('aria-valuenow');
+		this.dom.removeAttribute('aria-valuetext');
 		delete this.dom[DOM_ATTRIBUTE];
 	};
 
@@ -91,7 +94,8 @@ import { dispatch, registerComponent } from '../../ln-core';
 		const observer = new MutationObserver(function (mutations) {
 			for (const mutation of mutations) {
 				if (mutation.attributeName === 'data-ln-circular-progress' ||
-					mutation.attributeName === 'data-ln-circular-progress-max') {
+					mutation.attributeName === 'data-ln-circular-progress-max' ||
+					mutation.attributeName === 'data-ln-circular-progress-label') {
 					_render.call(self);
 				}
 			}
@@ -99,7 +103,7 @@ import { dispatch, registerComponent } from '../../ln-core';
 
 		observer.observe(this.dom, {
 			attributes: true,
-			attributeFilter: ['data-ln-circular-progress', 'data-ln-circular-progress-max']
+			attributeFilter: ['data-ln-circular-progress', 'data-ln-circular-progress-max', 'data-ln-circular-progress-label']
 		});
 
 		this._attrObserver = observer;
@@ -117,7 +121,16 @@ import { dispatch, registerComponent } from '../../ln-core';
 		this.progressCircle.setAttribute('stroke-dashoffset', offset);
 
 		const label = this.dom.getAttribute('data-ln-circular-progress-label');
-		this.labelEl.textContent = label !== null ? label : Math.round(percentage) + '%';
+		const labelText = label !== null ? label : Math.round(percentage) + '%';
+		this.labelEl.textContent = labelText;
+
+		// Sync ARIA properties
+		this.dom.setAttribute('role', 'progressbar');
+		this.dom.setAttribute('aria-valuemin', '0');
+		this.dom.setAttribute('aria-valuemax', String(max));
+		const clampedValue = Math.max(0, Math.min(value, max));
+		this.dom.setAttribute('aria-valuenow', String(clampedValue));
+		this.dom.setAttribute('aria-valuetext', labelText);
 
 		dispatch(this.dom, 'ln-circular-progress:change', {
 			target: this.dom,

package/js/ln-confirm/README.md

@@ -1,86 +1,165 @@
-# ln-confirm
-
-A zero-dependency, ultra-lightweight **Interaction Gate Primitive** (~109 lines of JavaScript) that creates a self-contained, two-click confirmation checkpoint on standard buttons. It intercepts accidental clicks, morphs in-place to reveal confirmation prompts, and passes the second click directly to native platform events.
-
----
-
-## 🧭 Philosophy & Architecture
-
-1. **In-Place Morphing:** Instead of launching heavy, separate dialogs or using frozen, unstyleable `window.confirm()` scripts, confirmation lives **directly on the target button**. It preserves structural styling while using CSS mixins to display temporary labels or icon tooltips.
-2. **Platform Event Release:** `ln-confirm` does not implement a custom `accept` handler. The acceptance is the standard platform `click` event. On the second click, the component steps out of the way, allowing form submissions (`type="submit"`), links (`href`), or custom AJAX click listeners to execute natively.
-3. **Graceful Auto-Revert:** The gate is timed. When armed, a countdown timer is scheduled. If a second click does not arrive within the window, the button cleanly reverts to its idle text or icon state.
-
----
-
-## 📦 Minimal Blueprint
-
-### Text-Button Mode
-
-```html
-<button data-ln-confirm="Are you sure you want to delete?">Delete account</button>
-```
-
-On click, the text replaces with the confirmation prompt in-place, and the button accent shifts to error red.
-
-### Icon-Only Mode
-
-```html
-<button aria-label="Delete item" data-ln-confirm="Confirm delete?">
-  <svg class="ln-icon"><use href="#ln-trash"></use></svg>
-</button>
-```
-
-On click, the trash icon swaps to `#ln-check`, a tooltip bubble is displayed above, and the prompt is announced for screen-readers.
-
----
-
-## 🛠️ Declarative API Contract
-
-### HTML Attributes
-
-| Attribute | Elements | Description |
-| :--- | :--- | :--- |
-| `data-ln-confirm="Prompt"` | `<button>`, `<a>` | Action gate marker. Empty value defaults to `"Confirm?"`. |
-| `data-ln-confirm-timeout="3"` | `<button>`, `<a>` | Auto-revert delay in seconds (default `3`). |
-| `data-confirming="true"` | `<button>` (auto) | Managed state. Set during active confirmation; acts as public CSS hook. |
-| `data-tooltip-text="Prompt"` | `<button>` (auto) | Managed state. Displays tooltip bubble in icon-only mode. |
-
-### JS API
-
-Access the confirmation instance directly via the `lnConfirm` property on the button element:
-
-```javascript
-const button = document.getElementById('delete-btn');
-
-// 1. Check if armed (Boolean getter)
-if (button.lnConfirm.confirming) { ... }
-
-// 2. Disarm immediately, restore visual states, and unbind listeners
-button.lnConfirm.destroy();
-```
-
----
-
-## ⚡ DOM Events
-
-### Emitted
-
-`ln-confirm` dispatches exactly one event during its lifecycle:
-
-| Event | Bubbles | Payload | Description |
-| :--- | :--- | :--- | :--- |
-| `ln-confirm:waiting` | Yes | `{ target }` | Fires on first click, right after the button arms. Useful for telemetry. |
-
-*Note: There is no `accept` event. Code execution on accept belongs on standard browser `click` or form `submit` handlers.*
-
----
-
-## ⚠️ Common Pitfalls
-
-- **Listening for an `:accept` event:** There is no `ln-confirm:accept`. Destructive logic belongs in the button's native click handler or form submit listener — which are automatically gated.
-- **Double-Click Protection:** Once the second click executes the target action, the button returns to idle. If your custom AJAX handler takes time, the user can click again and execute duplicate actions. Disable the button on submit:
-  ```javascript
-  form.addEventListener('submit', () => submitButton.disabled = true);
-  ```
-- **GET Request Navigation (`<a>`):** While the script works on links, performing destructive actions via HTTP GET is a security risk (crawlers and pre-fetchers can trigger deletes). Always use `<form method="POST">` with submit buttons instead.
-- **Attachment Order:** `ln-confirm` intercepts first clicks via `stopImmediatePropagation()`. If custom click handlers are bound *before* the bundle loads, they will run on the first click anyway. Ensure scripts are defer-loaded.
+# ln-confirm
+
+A zero-dependency, ultra-lightweight **Interaction Gate Primitive** (~131 lines of JavaScript) that creates a self-contained, two-click confirmation checkpoint on standard buttons. It intercepts accidental clicks, morphs in-place to reveal confirmation prompts, and passes the second click directly to native platform events.
+
+---
+
+## 🧭 Philosophy & Architecture
+
+1. **In-Place Morphing:** Instead of launching heavy, separate dialogs or using frozen, unstyleable `window.confirm()` scripts, confirmation lives **directly on the target button**. It preserves structural styling while using CSS mixins to display temporary labels or icon tooltips.
+2. **Platform Event Release:** `ln-confirm` does not implement a custom `accept` handler. The acceptance is the standard platform `click` event. On the second click, the component steps out of the way of the *default action* — form submissions (`type="submit"`), links (`href`), or custom AJAX click listeners execute natively. It does **not** step out of the way of propagation: the click stops at the button on both clicks, so an ancestor click surface never sees it.
+3. **Graceful Auto-Revert:** The gate is timed. When armed, a countdown timer is scheduled. If a second click does not arrive within the window, the button cleanly reverts to its idle text or icon state.
+
+---
+
+## 📦 Minimal Blueprint
+
+### Text-Button Mode
+
+```html
+<button data-ln-confirm="Are you sure you want to delete?">Delete account</button>
+```
+
+On click, the text replaces with the confirmation prompt in-place, and the button accent shifts to error red.
+
+### Icon-Only Mode
+
+```html
+<button aria-label="Delete item" data-ln-confirm="Confirm delete?">
+  <svg class="ln-icon"><use href="#ln-icon-trash"></use></svg>
+</button>
+```
+
+### Two-Element Mode (Recommended for rich content)
+
+```html
+<button class="btn btn-danger" data-ln-confirm>
+  <!-- Idle state -->
+  <span data-ln-confirm-idle>
+    <svg class="ln-icon"><use href="#ln-icon-trash"></use></svg>
+    Delete Selected (<span data-ln-table-selected></span>)
+  </span>
+  <!-- Active (Confirming) state -->
+  <span data-ln-confirm-active hidden>
+    Are you sure?
+  </span>
+</button>
+```
+
+On click, the idle content hides and the active content unhides, without mutating or destroying the button's internal DOM nodes (such as the icon or selection span).
+
+---
+
+## 🛠️ Declarative API Contract
+
+
+### HTML Attributes
+
+| Attribute | Elements | Description |
+| :--- | :--- | :--- |
+| `data-ln-confirm="Prompt"` | `<button>`, `<a>` | Action gate marker. Empty value defaults to `"Confirm?"` (in legacy mode). If using Two-Element Mode, this value is left blank. |
+| `data-ln-confirm-timeout="3"` | `<button>`, `<a>` | Auto-revert delay in seconds (default `3`). |
+| `data-confirming="true"` | `<button>` (auto) | Managed state. Set during active confirmation; acts as public CSS hook. |
+| `data-tooltip-text="Prompt"` | `<button>` (auto) | Managed state. Displays tooltip bubble in legacy icon-only mode. |
+| `data-ln-confirm-idle` | Any child | Defines the idle state layout/content (button icon/text) in Two-Element Mode. |
+| `data-ln-confirm-active` | Any child | Defines the confirmation prompt content in Two-Element Mode. |
+
+---
+
+### JS API
+
+Access the confirmation instance directly via the `lnConfirm` property on the button element:
+
+```javascript
+const button = document.getElementById('delete-btn');
+
+// 1. Check if armed (Boolean getter)
+if (button.lnConfirm.confirming) { ... }
+
+// 2. Disarm immediately, restore visual states, and unbind listeners
+button.lnConfirm.destroy();
+```
+
+---
+
+## ⚡ DOM Events
+
+`ln-confirm` dispatches exactly one event during its lifecycle:
+
+| Event | Bubbles | Payload | Description |
+| :--- | :--- | :--- | :--- |
+| `ln-confirm:waiting` | Yes | `{ target }` | Fires on first click, right after the button arms. Useful for telemetry. |
+
+*Note: There is no `accept` event. Code execution on accept belongs on standard browser `click` or form `submit` handlers.*
+
+---
+
+## ⚠️ Common Pitfalls
+
+- **Listening for an `:accept` event:** There is no `ln-confirm:accept`. Destructive logic belongs in the button's native click handler or form submit listener — which are automatically gated.
+- **Double-Click Protection:** Once the second click executes the target action, the button returns to idle. If your custom AJAX handler takes time, the user can click again and execute duplicate actions. Disable the button on submit:
+  ```javascript
+  form.addEventListener('submit', () => submitButton.disabled = true);
+  ```
+- **GET Request Navigation (`<a>`):** While the script works on links, performing destructive actions via HTTP GET is a security risk (crawlers and pre-fetchers can trigger deletes). Always use `<form method="POST">` with submit buttons instead.
+- **Attachment Order:** `ln-confirm` intercepts first clicks via `stopImmediatePropagation()`. If custom click handlers are bound *before* the bundle loads, they will run on the first click anyway. Ensure scripts are defer-loaded.
+- **Bulk Actions & High-Impact Operations:** `ln-confirm` is strictly for **single-element, low-impact actions** (e.g. deleting a single table row). Bulk operations (e.g. "Delete selected users") must use a proper confirmation modal (`ln-modal`) that lists affected resources and offers explicit "Confirm" / "Cancel" buttons.
+
+---
+
+## 🔧 Internals
+
+Source: `js/ln-confirm/ln-confirm.js`. Imports nothing from other components, consumes no `ln-*` event, and emits nothing the library listens to. Its entire contract is the platform `click` sequence on its own button.
+
+### Two-click flow
+
+The click handler branches on `this.confirming`.
+
+**First click** (`confirming === false`) — arm:
+- `preventDefault()` blocks the platform action (submit / navigate).
+- `stopImmediatePropagation()` stops *later* same-element listeners, so a project's own analytics/validation click handler does not fire on the arming click — only on the second, accepting click. Listeners bound *before* ln-confirm still run, which is why the bundle must be defer-loaded.
+- `_enterConfirm()`: set `confirming`, write `data-confirming="true"` (CSS hook), swap the button to its confirm presentation (see Modes), schedule the auto-revert timer, dispatch `ln-confirm:waiting`.
+
+**Second click** (`confirming === true`) — accept:
+- No `preventDefault` — the click runs its native default (form submit, link nav, existing handler) unmodified. That is the whole design: insert a checkpoint, then step out.
+- `stopPropagation()` — the click is contained at the button, exactly as on the first click. Without it the accepting click reaches ancestor click surfaces (a clickable card, a row handler) and fires *their* action alongside the confirmed one. Deliberately **not** `stopImmediatePropagation`: same-element listeners are the accept path and must run.
+- `_reset()` runs **synchronously before the handler returns**, so the button is visually reverted in the same frame the action proceeds — no flash of the armed state. A `_submitted` flag guards against a synthetic re-entrant click inside the same handler.
+
+Containment covers listener-based ancestors. It does not cover an ancestor `<a href>`: navigation is activation behavior, cancelled only by `preventDefault` — which would also cancel the confirmed action. Don't nest the button inside the anchor; see [ln-link](../ln-link/README.md), which skips clicks originating from `button`.
+
+There is deliberately no `ln-confirm:accept` event and no second-click cancel signal — "accept" is just the native click; listen on the form `submit`, the link, or the button `click`.
+
+### Construction-time snapshot
+
+`originalText` (`dom.textContent.trim()`) and `confirmText` (`data-ln-confirm`, default `"Confirm?"`) are captured **once at construction**, not per click. Mutating the button's text or the attribute afterwards does not propagate to the live instance — the contract is snapshotted once and run on every click. This is intentional: re-reading per confirm would race AJAX-driven content updates and change the button text mid-confirm.
+
+For the same reason the shared observer watches `data-ln-confirm` only, **not** `data-ln-confirm-timeout`. The timeout is read once, at arm time, in `_startTimer` (`parseFloat`, falling back to `3` on `NaN`/`≤0`). Changing it while armed does not affect the running timer — set it before the user arms.
+
+### Modes
+
+- **Two-Element (recommended):** if the button contains `[data-ln-confirm-idle]` and `[data-ln-confirm-active]`, the component only toggles their `hidden` attribute — no DOM mutation, so inner icons / selection-count spans survive and all text stays authored in HTML.
+- **Legacy text:** no child markers → `dom.textContent` is swapped to `confirmText` and restored on revert.
+- **Icon-only:** fires when `originalText === ''` **and** a `svg.ln-icon use` exists at confirm time (checked fresh, to handle async-rendered icons). Swaps `<use href>` to `#ln-icon-check` (ln-icon fetches it on demand), adds `.ln-confirm-tooltip` + `data-tooltip-text`, and handles a11y (below). Everything is restored symmetrically in `_reset`.
+
+### Icon-only accessibility
+
+The tooltip bubble is a CSS `::after` — invisible to AT. So the icon branch also:
+1. swaps `aria-label` to `confirmText` (original captured, restored on reset), and
+2. appends a transient `<span class="sr-only" role="alert">` carrying the prompt — `role="alert"` is announced on insertion, which an `aria-label` change alone is not. Removed on reset.
+
+Text mode needs neither: `textContent` *is* the accessible name.
+
+### CSS hooks
+
+Co-located SCSS is two JS-state rules (the accepted co-located exception):
+
+```scss
+[data-confirming]:not(.ln-confirm-tooltip) { --color-primary: var(--color-error); }
+[data-ln-table]:has([data-confirming])     { overflow: visible; }
+```
+
+The first rebinds `--color-primary` to `--color-error` while armed — the red fill falls out of `@mixin btn` reading the primary token, so theme overrides apply automatically. `:not(.ln-confirm-tooltip)` avoids double-coloring icon mode, where `@mixin confirm-tooltip` owns the color. The second lifts `ln-table`'s `overflow: clip` so the icon tooltip isn't clipped by the row while any confirm in the table is armed; other scrollable containers need their own parallel rule.
+
+### Destroy
+
+`destroy()` is idempotent, calls `_reset()` **first** (so a destroy-while-armed clears the pending timer and visual state), then unbinds the listener and deletes `el.lnConfirm`. It does not remove `data-ln-confirm` — the caller owns the attribute, so a later observer rescan can re-create the instance.

package/js/ln-confirm/_ln-confirm.scss

@@ -11,3 +11,14 @@
 [data-ln-table]:has([data-confirming]) {
 	overflow: visible;
 }
+
+// ── Show/hide for two-element mode ──
+[data-ln-confirm] {
+	&:not([data-confirming="true"]) [data-ln-confirm-active] {
+		display: none !important;
+	}
+	&[data-confirming="true"] [data-ln-confirm-idle] {
+		display: none !important;
+	}
+}
+

package/js/ln-confirm/ln-confirm.js

@@ -1 +1 @@
-(function(){"use strict";function _(t,e,a){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:a||{}}))}function A(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){A(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function g(t,e,a,c){if(t.nodeType!==1)return;const i=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",n=Array.from(t.querySelectorAll(i));t.matches&&t.matches(i)&&n.push(t);for(const o of n)o[a]||(o[a]=new c(o))}function w(t,e,a,c,r={}){const i=r.extraAttributes||[],n=r.onAttributeChange||null,o=r.onInit||null;function m(p){const u=p||document.body;g(u,t,e,a),o&&o(u)}return A(function(){const p=new MutationObserver(function(h){for(let f=0;f<h.length;f++){const s=h[f];if(s.type==="childList"){for(let l=0;l<s.addedNodes.length;l++){const d=s.addedNodes[l];d.nodeType===1&&(g(d,t,e,a),o&&o(d))}for(let l=0;l<s.removedNodes.length;l++){const d=s.removedNodes[l];if(d.nodeType===1){const x=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",b=Array.from(d.querySelectorAll(x));d.matches&&d.matches(x)&&b.push(d);for(let T=0;T<b.length;T++){const C=b[T];if(!document.contains(C)){const y=C[e];y&&typeof y.destroy=="function"&&y.destroy()}}}}}else s.type==="attributes"&&(n&&s.target[e]?n(s.target,s.attributeName):(g(s.target,t,e,a),o&&o(s.target)))}});let u=[];if(t.indexOf("[")!==-1){const h=/\[([\w-]+)/g;let f;for(;(f=h.exec(t))!==null;)u.push(f[1])}else u.push(t);p.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:u.concat(i)})},c),window[e]=m,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){m(document.body)}):m(document.body),m}const v={};function L(t,e){v[t]=e}function N(t){return v[t]||{ingress:e=>e,egress:e=>e}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=L,window.lnCore.getDataMapper=N),(function(){const t="data-ln-confirm",e="lnConfirm",a="data-ln-confirm-timeout";if(window[e]!==void 0)return;function r(i){this.dom=i,this.confirming=!1,this.originalText=i.textContent.trim(),this.confirmText=i.getAttribute(t)||"Confirm?",this.revertTimer=null,this._submitted=!1;const n=this;return this._onClick=function(o){if(!n.confirming)o.preventDefault(),o.stopImmediatePropagation(),n._enterConfirm();else{if(n._submitted)return;n._submitted=!0,n._reset()}},i.addEventListener("click",this._onClick),this}r.prototype._getTimeout=function(){const i=parseFloat(this.dom.getAttribute(a));return isNaN(i)||i<=0?3:i},r.prototype._enterConfirm=function(){this.confirming=!0,this.dom.setAttribute("data-confirming","true");var i=this.dom.querySelector("svg.ln-icon use");i&&this.originalText===""?(this.isIconButton=!0,this.originalIconHref=i.getAttribute("href"),i.setAttribute("href","#ln-check"),this.dom.classList.add("ln-confirm-tooltip"),this.dom.setAttribute("data-tooltip-text",this.confirmText),this.originalAriaLabel=this.dom.getAttribute("aria-label"),this.dom.setAttribute("aria-label",this.confirmText),this.alertNode=document.createElement("span"),this.alertNode.className="sr-only",this.alertNode.setAttribute("role","alert"),this.alertNode.textContent=this.confirmText,this.dom.appendChild(this.alertNode)):this.dom.textContent=this.confirmText,this._startTimer(),_(this.dom,"ln-confirm:waiting",{target:this.dom})},r.prototype._startTimer=function(){this.revertTimer&&clearTimeout(this.revertTimer);const i=this,n=this._getTimeout()*1e3;this.revertTimer=setTimeout(function(){i._reset()},n)},r.prototype._reset=function(){if(this._submitted=!1,this.confirming=!1,this.dom.removeAttribute("data-confirming"),this.isIconButton){var i=this.dom.querySelector("svg.ln-icon use");i&&this.originalIconHref&&i.setAttribute("href",this.originalIconHref),this.dom.classList.remove("ln-confirm-tooltip"),this.dom.removeAttribute("data-tooltip-text"),this.originalAriaLabel!==null&&this.originalAriaLabel!==void 0?this.dom.setAttribute("aria-label",this.originalAriaLabel):this.dom.removeAttribute("aria-label"),this.originalAriaLabel=null,this.alertNode&&this.alertNode.parentNode===this.dom&&this.dom.removeChild(this.alertNode),this.alertNode=null,this.isIconButton=!1,this.originalIconHref=null}else this.dom.textContent=this.originalText;this.revertTimer&&(clearTimeout(this.revertTimer),this.revertTimer=null)},r.prototype.destroy=function(){this.dom[e]&&(this._reset(),this.dom.removeEventListener("click",this._onClick),delete this.dom[e])},w(t,e,r,"ln-confirm")})()})();
+(function(){"use strict";if(typeof window<"u"){const t=console.warn;console.warn=function(...e){typeof e[0]=="string"&&(e[0].startsWith("[ln-")||e[0].startsWith("[lnCore"))&&!(document.documentElement.hasAttribute("data-ln-debug")||document.body&&document.body.hasAttribute("data-ln-debug"))||t.apply(console,e)}}const p={};function D(t,e){p[t]||(p[t]=document.querySelector('[data-ln-template="'+t+'"]'));const o=p[t];return o?o.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function M(t,e,o){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:o||{}}))}function C(t,e){if(!t||!e)return t;const o=t.querySelectorAll("[data-ln-field]");for(let i=0;i<o.length;i++){const n=o[i],r=n.getAttribute("data-ln-field");e[r]!=null&&(n.textContent=e[r])}const u=t.querySelectorAll("[data-ln-attr]");for(let i=0;i<u.length;i++){const n=u[i],r=n.getAttribute("data-ln-attr").split(",");for(let s=0;s<r.length;s++){const c=r[s].trim().split(":");if(c.length!==2)continue;const d=c[0].trim(),f=c[1].trim();e[f]!=null&&n.setAttribute(d,e[f])}}const a=t.querySelectorAll("[data-ln-show]");for(let i=0;i<a.length;i++){const n=a[i],r=n.getAttribute("data-ln-show");r in e&&n.classList.toggle("hidden",!e[r])}const l=t.querySelectorAll("[data-ln-class]");for(let i=0;i<l.length;i++){const n=l[i],r=n.getAttribute("data-ln-class").split(",");for(let s=0;s<r.length;s++){const c=r[s].trim().split(":");if(c.length!==2)continue;const d=c[0].trim(),f=c[1].trim();f in e&&n.classList.toggle(d,!!e[f])}}return t}function q(t,e){t.matches&&t.matches("[data-ln-form], [data-ln-fillable]")&&t.dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));const o=t.querySelectorAll("[data-ln-form], [data-ln-fillable]");for(let u=0;u<o.length;u++)o[u].dispatchEvent(new CustomEvent("ln-fill",{detail:e??null,bubbles:!0}));return t}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._fillBound||(window.lnCore._fillBound=!0,document.addEventListener("ln-fill",function(t){if(!(!t.target.matches||!t.target.matches("[data-ln-fillable]")))if(t.detail)C(t.target,t.detail);else{const e=t.target.querySelectorAll("[data-ln-field]");for(let o=0;o<e.length;o++)e[o].textContent=""}})));function T(t,e){if(!t||!e)return t;const o=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;o.nextNode();){const l=o.currentNode;l.textContent.indexOf("{{")!==-1&&(l.textContent=l.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(i,n){return e[n]!==void 0?e[n]:""}))}const u=function(l,i){return e[i]!==void 0?e[i]:""},a=Array.from(t.querySelectorAll("*"));t.nodeType===1&&a.push(t);for(let l=0;l<a.length;l++){const i=a[l],n=i.attributes;for(let r=0;r<n.length;r++){const s=n[r];s.value.indexOf("{{")!==-1&&i.setAttribute(s.name,s.value.replace(/\{\{\s*(\w+)\s*\}\}/g,u))}}return t}function I(t,e,o,u,a,l){const i={};for(let r=0;r<t.children.length;r++){const s=t.children[r],c=s.getAttribute("data-ln-key");c&&(i[c]=s)}const n=document.createDocumentFragment();for(let r=0;r<e.length;r++){const s=e[r],c=String(u(s));let d=i[c];if(d)a(d,s,r);else{const f=D(o,l);if(!f||(T(f,s),d=f.firstElementChild,!d))continue;d.setAttribute("data-ln-key",c),a(d,s,r)}n.appendChild(d)}t.textContent="",t.appendChild(n)}function x(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){x(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function b(t,e,o,u){if(t.nodeType!==1)return;const l=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",i=Array.from(t.querySelectorAll(l));t.matches&&t.matches(l)&&i.push(t);for(const n of i)n[o]||(n[o]=new u(n))}function N(t,e,o,u,a={}){const l=a.extraAttributes||[],i=a.onAttributeChange||null,n=a.onInit||null;function r(s){const c=s||document.body;b(c,t,e,o),n&&n(c)}return x(function(){const s=new MutationObserver(function(d){for(let f=0;f<d.length;f++){const h=d[f];if(h.type==="childList"){for(let g=0;g<h.addedNodes.length;g++){const m=h.addedNodes[g];m.nodeType===1&&(b(m,t,e,o),n&&n(m))}for(let g=0;g<h.removedNodes.length;g++){const m=h.removedNodes[g];if(m.nodeType===1){const S=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",y=Array.from(m.querySelectorAll(S));m.matches&&m.matches(S)&&y.push(m);for(let A=0;A<y.length;A++){const O=y[A];if(!document.contains(O)){const v=O[e];v&&typeof v.destroy=="function"&&v.destroy()}}}}}else h.type==="attributes"&&(i&&h.target[e]?i(h.target,h.attributeName):(b(h.target,t,e,o),n&&n(h.target)))}});let c=[];if(t.indexOf("[")!==-1){const d=/\[([\w-]+)/g;let f;for(;(f=d.exec(t))!==null;)c.push(f[1])}else c.push(t);s.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:c.concat(l)})},u),window[e]=r,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){r(document.body)}):r(document.body),r}const E={};function F(t,e){E[t]=e}function j(t){return E[t]||{ingress:e=>e,egress:e=>e}}const L={};function _(t,e){if(!t||typeof e!="object")return;const o=t.toLowerCase().split("-")[0];L[o]=e}function B(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return L[e]||null}_("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=F,window.lnCore.getDataMapper=j,window.lnCore.registerLocaleFallback=_,window.lnCore.getLocaleFallback=B,window.lnCore.fillTemplate=T,window.lnCore.fill=C,window.lnCore.lnFill=q,window.lnCore.renderList=I);function k(t){return(t||"").replace(/^#/,"")}function w(t){const e=t===void 0?location.hash:t,o={},u=k(e);if(!u)return o;const a=u.split("&");for(let l=0;l<a.length;l++){const i=a[l];if(!i)continue;const n=i.indexOf(":"),r=n>-1?i.slice(0,n):i,s=n>-1?i.slice(n+1):"";if(r)try{o[r]=decodeURIComponent(s)}catch{o[r]=s}}return o}function W(t){if(!t)return null;const e=w();return t in e?e[t]:null}function H(t,e){if(!t)return;const o=w();e==null?delete o[t]:o[t]=String(e);const a=Object.keys(o).map(function(l){const i=o[l];return i===""?l:l+":"+encodeURIComponent(i)}).join("&");k(location.hash)!==a&&(location.hash=a)}function R(t){return t.button===1||t.ctrlKey||t.metaKey||t.shiftKey?!1:(t.preventDefault(),!0)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=w,window.lnCore.hashGet=W,window.lnCore.hashSet=H,window.lnCore.hashLinkClick=R),(function(){const t="data-ln-confirm",e="lnConfirm",o="data-ln-confirm-timeout";if(window[e]!==void 0)return;function a(...i){(document.documentElement.hasAttribute("data-ln-debug")||document.body&&document.body.hasAttribute("data-ln-debug"))&&console.warn("[ln-confirm]",...i)}function l(i){a("constructor called on",i),this.dom=i,this.confirming=!1,this.revertTimer=null,this._submitted=!1,this.idleEl=i.querySelector("[data-ln-confirm-idle]"),this.activeEl=i.querySelector("[data-ln-confirm-active]"),this.isTwoElementMode=!!(this.idleEl||this.activeEl),this.isTwoElementMode?(this.originalText="",this.confirmText=""):(this.originalText=i.textContent.trim(),this.confirmText=i.getAttribute(t)||"Confirm?");const n=this;return this._onClick=function(r){if(a("click handler, confirming:",n.confirming,"submitted:",n._submitted,"target:",r.target),!n.confirming)r.preventDefault(),r.stopImmediatePropagation(),n._enterConfirm();else{if(n._submitted)return;n._submitted=!0,r.stopPropagation(),n._reset()}},i.addEventListener("click",this._onClick),this}l.prototype._getTimeout=function(){const i=parseFloat(this.dom.getAttribute(o));return isNaN(i)||i<=0?3:i},l.prototype._enterConfirm=function(){if(this.confirming=!0,this.dom.setAttribute("data-confirming","true"),this.originalAriaLabel=this.dom.getAttribute("aria-label"),this.originalAriaLive=this.dom.getAttribute("aria-live"),this.isTwoElementMode){this.idleEl&&this.idleEl.setAttribute("hidden","true"),this.activeEl&&this.activeEl.removeAttribute("hidden");const n=this.activeEl?this.activeEl.textContent.trim():"";n&&(this.dom.setAttribute("aria-label",n),this.dom.setAttribute("aria-live","polite"))}else{var i=this.dom.querySelector("svg.ln-icon use");i&&this.originalText===""?(this.isIconButton=!0,this.originalIconHref=i.getAttribute("href"),i.setAttribute("href","#ln-icon-check"),this.dom.classList.add("ln-confirm-tooltip"),this.dom.setAttribute("data-tooltip-text",this.confirmText),this.dom.setAttribute("aria-label",this.confirmText),this.dom.setAttribute("aria-live","polite")):this.dom.textContent=this.confirmText}this._startTimer(),M(this.dom,"ln-confirm:waiting",{target:this.dom})},l.prototype._startTimer=function(){this.revertTimer&&clearTimeout(this.revertTimer);const i=this,n=this._getTimeout()*1e3;this.revertTimer=setTimeout(function(){i._reset()},n)},l.prototype._reset=function(){if(this._submitted=!1,this.confirming=!1,this.dom.removeAttribute("data-confirming"),this.isTwoElementMode)this.idleEl&&this.idleEl.removeAttribute("hidden"),this.activeEl&&this.activeEl.setAttribute("hidden","true");else if(this.isIconButton){var i=this.dom.querySelector("svg.ln-icon use");i&&this.originalIconHref&&i.setAttribute("href",this.originalIconHref),this.dom.classList.remove("ln-confirm-tooltip"),this.dom.removeAttribute("data-tooltip-text"),this.isIconButton=!1,this.originalIconHref=null}else this.dom.textContent=this.originalText;this.originalAriaLabel!==null&&this.originalAriaLabel!==void 0?this.dom.setAttribute("aria-label",this.originalAriaLabel):this.dom.removeAttribute("aria-label"),this.originalAriaLabel=null,this.originalAriaLive!==null&&this.originalAriaLive!==void 0?this.dom.setAttribute("aria-live",this.originalAriaLive):this.dom.removeAttribute("aria-live"),this.originalAriaLive=null,this.revertTimer&&(clearTimeout(this.revertTimer),this.revertTimer=null)},l.prototype.destroy=function(){a("destroy called on",this.dom),this.dom[e]&&(this.confirming&&this._reset(),this.dom.removeEventListener("click",this._onClick),delete this.dom[e])},N(t,e,l,"ln-confirm")})()})();