@livenetworks/ashlar 1.6.0 → 2.0.0

package/components/ln-confirm/README.md

@@ -0,0 +1,216 @@
+# ln-confirm
+
+> Applied directly to `<button data-ln-confirm>` or `<a data-ln-confirm>`. On the first `click`, it calls
+> `e.preventDefault()`, sets `data-ln-confirm-state="confirming"`, unhides `[data-ln-confirm-active]` (or swaps text),
+> and starts a `setTimeout`. A second `click` before timeout lets the native event proceed; if the timer fires first,
+> it clears the attribute and restores the original DOM content.
+
+---
+
+## 🧭 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 swapping labels, child states or the icon in place.
+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-ln-confirm-state="confirming"` | `<button>` (auto) | Managed state. Set during active confirmation; acts as public CSS hook. |
+| `data-ln-confirm-announcer` | injected `<span>` (auto) | Marker on the transient `role="alert"` node that speaks the prompt in 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 (live read-only getter over data-ln-confirm-state)
+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: `components/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-ln-confirm-state="confirming"` (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`.
+
+### Attribute contract
+
+The `ATTRIBUTES` table is the single source of truth for the host attributes. Each entry
+with a `prop` becomes a **live getter** via `defineAttrs` — `confirmText`, `timeout` and
+`confirming` read the DOM on every access, so nothing is copied into instance state and
+there is no sync step. The getters have no setter; assigning to them throws.
+
+`data-ln-confirm` and `data-ln-confirm-timeout` are therefore read at the moment they are
+used — the prompt when the button arms, the timeout when `_startTimer` schedules the
+revert. Changing the timeout while armed does not affect the already-running timer.
+
+No entry declares an `effect`, so the component is deliberately non-reactive: the shared
+observer watches `data-ln-confirm` for instance creation only, and editing any of these
+attributes never runs component code on its own.
+
+`originalText` is the one genuine snapshot — it is `dom.textContent.trim()` captured at
+construction, not an attribute, and is what `_reset` restores. Text mode therefore reverts
+to the label the button had when it was hydrated; use Two-Element mode for labels that
+change at runtime.
+
+### 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) and handles a11y (below). Everything is restored symmetrically in `_reset`.
+
+### Icon-only accessibility
+
+The icon swap is silent to AT and there is no visible text to read. So the icon branch:
+1. swaps `aria-label` to `confirmText` (original captured, restored on reset), and
+2. appends a transient `<span data-ln-confirm-announcer role="alert">` carrying the prompt,
+   removed again in `_reset`.
+
+`role="alert"` is its own assertive live region, which is why this branch deliberately does
+**not** also set `aria-live` on the button — a live region nested inside a live region gets
+announced twice. The two-element branch does still set `aria-live="polite"`, because there
+the button's own content changes (`hidden` flips) and nothing is injected.
+
+The announcer is hidden by a co-located rule on `[data-ln-confirm-announcer]` rather than
+by `.sr-only`: this component's SCSS ships in `ln-ashlar-core.css` and `.sr-only` does not,
+so a core-only consumer would otherwise see the prompt printed inside the button.
+
+Text mode needs neither: `textContent` *is* the accessible name, and changing it is itself
+the announcement.
+
+### CSS hooks
+
+Co-located SCSS carries two functional rules. This file ships in the **core** bundle, so
+neither may lean on theme tokens or theme utilities:
+
+```scss
+[data-ln-confirm] [hidden]  { display: none; }
+[data-ln-confirm-announcer] { /* visually hidden, no theme dependency */ }
+```
+
+The first is the П4 hiding contract: native `hidden` is the mechanism — `_enterConfirm` and
+`_reset` toggle it on the idle/active children — and the rule backs the UA default up at
+(0,2,0) so a `display` set on a child cannot defeat it. There is deliberately no second,
+state-keyed rule performing the same hiding. A two-element button whose
+`[data-ln-confirm-active]` is missing `hidden` in the authored markup is a markup bug, and
+`ln-confirm-dev.scss` says so under `[data-ln-debug]` instead of silently papering over it.
+
+The single themed rule rebinds the accent token while armed:
+
+```scss
+// theme/components/_confirm.scss
+[data-ln-confirm-state="confirming"] { --color-primary: var(--color-error); }
+```
+
+`theme/base/_global.scss` documents this as *the* way to express a colour variant, so a
+button carrying `@mixin btn` — including `button[type="submit"]` — turns red while armed and
+theme overrides keep working. A bare `<button>` runs only `@mixin button-base`, whose
+`color: var(--btn-fg)` never reads `--color-primary`; it has no variant to recolour, so its
+armed signal is the icon swap alone. That is deliberate, not an oversight.
+
+`ln-confirm` renders no bubble, no tooltip and no overlay, and therefore needs no ancestor
+to relax `overflow`. A button that also wants a tooltip composes
+[ln-tooltip](../ln-tooltip/README.md) alongside it.
+
+### 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/components/ln-confirm/ln-confirm-dev.scss

@@ -0,0 +1,24 @@
+@use '../../theme/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Two-Element Mode Incomplete: if [data-ln-confirm-idle] is present, [data-ln-confirm-active] is required
+	[data-ln-confirm]:has([data-ln-confirm-idle]):not(:has([data-ln-confirm-active])) {
+		@include dev-inline-error("ln-confirm two-element mode is missing [data-ln-confirm-active]");
+	}
+
+	// 2. Two-Element Mode Incomplete: if [data-ln-confirm-active] is present, [data-ln-confirm-idle] is required
+	[data-ln-confirm]:has([data-ln-confirm-active]):not(:has([data-ln-confirm-idle])) {
+		@include dev-inline-error("ln-confirm two-element mode is missing [data-ln-confirm-idle]");
+	}
+
+	// 3. Confirm Empty Message: empty string without two-element mode
+	[data-ln-confirm=""]:not(:has([data-ln-confirm-idle])):not(:has([data-ln-confirm-active])) {
+		@include dev-inline-error("data-ln-confirm has empty prompt and no idle/active child elements");
+	}
+
+	// 4. Two-Element Mode: the active child must carry `hidden` in the authored markup,
+	//    otherwise both labels render at rest
+	[data-ln-confirm]:not([data-ln-confirm-state="confirming"]) [data-ln-confirm-active]:not([hidden]) {
+		@include dev-inline-error("ln-confirm [data-ln-confirm-active] is missing the hidden attribute");
+	}
+}

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

@@ -0,0 +1 @@
+(function(){"use strict";function L(){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 C(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 i=1;i<t.length;i++)if(t[i]&&t[i].nodeType===1){r=t[i];break}if(!C(r))return}e.apply(console,t)}}function O(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 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()}function H(e){return!!(!e||e.ctrlKey||e.metaKey||e.shiftKey||e.altKey||typeof e.button=="number"&&e.button!==0)}const I={};function U(e,t){I[e]=t}function V(e){return I[e]||{ingress:t=>t,egress:t=>t}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=U,window.lnCore.getDataMapper=V);function K(){typeof window>"u"||(window.lnCore=window.lnCore||{},!window.lnCore._localeObserverBound&&(window.lnCore._localeObserverBound=!0,m(function(){new MutationObserver(function(){O(document,"ln-core:locale-change",{})}).observe(document.documentElement,{attributes:!0,attributeFilter:["lang"],subtree:!0})},"ln-core")))}const D={};function P(e,t){if(!e||typeof t!="object")return;const n=e.toLowerCase().split("-")[0];D[n]=t}function Q(e){if(!e)return null;const t=e.toLowerCase().split("-")[0];return D[t]||null}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerLocaleFallback=P,window.lnCore.getLocaleFallback=Q,window.lnCore.ensureLocaleObserver=K);const y={};function J(e,t){y[e]||(y[e]=document.querySelector('[data-ln-template="'+e+'"]'));const n=y[e];return n?n.content.cloneNode(!0):(console.warn("["+(t||"ln-core")+'] Template "'+e+'" not found'),null)}function $(e,t){if(!e||!t)return e;const n=e.querySelectorAll("[data-ln-field]");for(let l=0;l<n.length;l++){const a=n[l],s=a.getAttribute("data-ln-field");t[s]!=null&&(a.textContent=t[s])}const r=e.querySelectorAll("[data-ln-attr]");for(let l=0;l<r.length;l++){const a=r[l],s=a.getAttribute("data-ln-attr").split(",");for(let d=0;d<s.length;d++){const f=s[d].trim().split(":");if(f.length!==2)continue;const c=f[0].trim(),u=f[1].trim();t[u]!=null&&a.setAttribute(c,t[u])}}const i=e.querySelectorAll("[data-ln-show]");for(let l=0;l<i.length;l++){const a=i[l],s=a.getAttribute("data-ln-show");s in t&&a.classList.toggle("hidden",!t[s])}const o=e.querySelectorAll("[data-ln-class]");for(let l=0;l<o.length;l++){const a=o[l],s=a.getAttribute("data-ln-class").split(",");for(let d=0;d<s.length;d++){const f=s[d].trim().split(":");if(f.length!==2)continue;const c=f[0].trim(),u=f[1].trim();u in t&&a.classList.toggle(c,!!t[u])}}return e}function G(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)$(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 q(e,t){if(!e||!t)return e;const n=document.createTreeWalker(e,NodeFilter.SHOW_TEXT);for(;n.nextNode();){const o=n.currentNode;o.textContent.indexOf("{{")!==-1&&(o.textContent=o.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(l,a){return t[a]!==void 0?t[a]:""}))}const r=function(o,l){return t[l]!==void 0?t[l]:""},i=Array.from(e.querySelectorAll("*"));e.nodeType===1&&i.push(e);for(let o=0;o<i.length;o++){const l=i[o],a=l.attributes;for(let s=0;s<a.length;s++){const d=a[s];d.value.indexOf("{{")!==-1&&l.setAttribute(d.name,d.value.replace(/\{\{\s*(\w+)\s*\}\}/g,r))}}return e}function X(e,t,n,r,i,o){const l={};for(let s=0;s<e.children.length;s++){const d=e.children[s],f=d.getAttribute("data-ln-render-key");f&&(l[f]=d)}const a=document.createDocumentFragment();for(let s=0;s<t.length;s++){const d=t[s],f=String(r(d));let c=l[f];if(c)i(c,d,s);else{const u=J(n,o);if(!u||(q(u,d),c=u.firstElementChild,!c))continue;c.setAttribute("data-ln-render-key",f),i(c,d,s)}a.appendChild(c)}e.textContent="",e.appendChild(a)}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.fillTemplate=q,window.lnCore.fill=$,window.lnCore.lnFill=G,window.lnCore.renderList=X);function M(e,t,n){const r=e.getAttribute(t);return r===null?n:r}function z(e,t,n){const r=parseInt(e.getAttribute(t),10);return isNaN(r)?n:r}function Y(e,t,n=!1){const r=e.getAttribute(t);if(r===null)return!!n;const i=r.trim().toLowerCase();return!(i==="false"||i==="0")}function Z(e,t){return(e.getAttribute(t)||"").split(",").map(n=>n.trim()).filter(Boolean)}const A=new Map;function ee(e,t){const n=(e?e.join("|"):"")+"::"+t;if(A.has(n))return A.get(n);const r=new Set(e||[]),i=function(o,l){const a=o.getAttribute(l);return a!==null&&r.has(a)?a:t};return A.set(n,i),i}function te(e,t,n){const r=parseFloat(e.getAttribute(t));return isNaN(r)?n:r}function ne(e,t,n){const r=e.getAttribute(t);if(!r)return n;try{return JSON.parse(r)}catch{return n}}function N(e,t,n,r,i){if(!e||t===null)return!0;const o=r||"ln-component",l=e.type;if(l==="trigger"||l==="marker"||l==="string"||l==="list"||!l||t===""&&e.fallback!==void 0)return!0;const a=s=>{i?console.warn(s,i):console.warn(s)};if(l==="boolean"){const s=t.trim().toLowerCase();return s!==""&&s!=="true"&&s!=="false"&&s!=="1"&&s!=="0"?(a(`[${o}] Invalid value "${t}" for boolean attribute "${n}". Allowed: "true", "false", or presence-only.`),!1):!0}if(l==="enum"){const s=e.values||[];return s.includes(t)?!0:(a(`[${o}] Invalid value "${t}" for attribute "${n}". Allowed: ${s.join(", ")}. Fallback: "${e.fallback}".`),!1)}if(l==="integer"){if(!/^-?\d+$/.test(t))return a(`[${o}] Invalid integer "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1;const s=parseInt(t,10);return e.min!==void 0&&s<e.min?(a(`[${o}] Value ${s} for attribute "${n}" is less than min (${e.min}).`),!1):e.max!==void 0&&s>e.max?(a(`[${o}] Value ${s} for attribute "${n}" is greater than max (${e.max}).`),!1):!0}if(l==="float")return isNaN(Number(t))?(a(`[${o}] Invalid float "${t}" for attribute "${n}". Fallback: ${e.fallback}.`),!1):!0;if(l==="json")try{return JSON.parse(t),!0}catch(s){return a(`[${o}] Invalid JSON for attribute "${n}": ${s.message}. Fallback: ${e.fallback}.`),!1}return!0}function re(e,t,n){for(const r in n){const[i,o,l]=n[r];Object.defineProperty(e,r,{get:function(){return i(t,o,l)},enumerable:!0,configurable:!0})}return e}function ie(e){const t={};for(const n in e){const r=e[n];if(!r||!r.prop)continue;let i=r.read;if(!i&&r.type)switch(r.type){case"enum":i=ee(r.values,r.fallback);break;case"integer":i=z;break;case"float":i=te;break;case"boolean":i=Y;break;case"list":i=Z;break;case"json":i=ne;break;case"string":default:i=M;break}i||(i=M),t[r.prop]=[i,n,r.fallback]}return t}function oe(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 le(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 v(e,t,n,r){if(e.nodeType!==1)return;const o=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",l=Array.from(e.querySelectorAll(o));e.matches&&e.matches(o)&&l.push(e);for(const a of l)if(!a[n]){window.lnCore._persistSink&&a.hasAttribute("data-ln-persist")&&window.lnCore._persistSink(a,t);try{a[n]=new r(a)}catch(s){console.error("["+n+"] init failed",a,s)}}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore._bootHolds=window.lnCore._bootHolds||0,window.lnCore._bootQueue=window.lnCore._bootQueue||[]);function se(){return typeof window<"u"&&window.lnCore&&window.lnCore._bootHolds||0}function ae(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 R(){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 ce(e){const t=R(),n=e.observed||[];for(let r=0;r<n.length;r++){const i=n[r];t.byAttr.has(i)||t.byAttr.set(i,[]),t.byAttr.get(i).push(e)}if(t.byDeclaredAttr=t.byDeclaredAttr||new Map,e.attributes)for(const r in e.attributes){t.byDeclaredAttr.has(r)||t.byDeclaredAttr.set(r,[]);const i=t.byDeclaredAttr.get(r);i.some(o=>o.componentTag===e.componentTag)||i.push({spec:e.attributes[r],componentTag:e.componentTag})}if(e.onAttrChange||e.effects){t.reactive.push(e);const r=le(e);if(r===null)t.reactiveWildcard.push(e);else for(const i of r)t.byReactive.has(i)||t.byReactive.set(i,[]),t.byReactive.get(i).push(e)}e.persist&&t.persist.push(e)}function F(e,t,n,r){for(let i=0;i<e.length;i++){const o=e[i];if(!t[o.attribute])continue;const l=o.effects&&o.effects[n];l?l(t,n,r):o.onAttrChange&&(!o.declared||o.declared.has(n))&&o.onAttrChange(t,n,r)}}function ue(e){const t=e.target,n=e.attributeName;if(e.oldValue===t.getAttribute(n))return;const r=R(),i=r.byAttr.get(n);if(L()&&r.byDeclaredAttr&&r.byDeclaredAttr.has(n)&&C(t)){const o=r.byDeclaredAttr.get(n),l=t.getAttribute(n);for(let a=0;a<o.length;a++)N(o[a].spec,l,n,o[a].componentTag,t)}if(window.lnCore._debugSink&&(n.indexOf("data-ln-")===0||i)&&window.lnCore._debugSink("attr",n,t,{oldValue:e.oldValue,newValue:t.getAttribute(n)}),n.indexOf("data-ln-")===0){const o=r.byReactive.get(n);o&&F(o,t,n,e.oldValue),r.reactiveWildcard.length&&F(r.reactiveWildcard,t,n,e.oldValue)}if(i)for(let o=0;o<i.length;o++){const l=i[o];if(l.handler){l.handler(t,n,e.oldValue);continue}l.onAttributeChange&&t[l.attribute]?l.onAttributeChange(t,n):(v(t,l.selector,l.attribute,l.ComponentFn),l.onInit&&l.onInit(t))}}function de(){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{ue(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 B(){return window.lnCore=window.lnCore||{},window.lnCore._lifecycleRegistry=window.lnCore._lifecycleRegistry||[]}function fe(e){const t=B();if(t.length){if(e.target)for(let n=0;n<t.length;n++){const r=t[n];if(r.onSubtreeChange){const i=r.query,o=e.target.nodeType===1?e.target.matches(i)?e.target:e.target.closest(i):e.target.parentElement?e.target.parentElement.closest(i):null;o&&r.onSubtreeChange(o,e)}}for(let n=0;n<e.addedNodes.length;n++){const r=e.addedNodes[n];if(r.nodeType===1)for(let i=0;i<t.length;i++){const o=t[i];v(r,o.selector,o.attribute,o.ComponentFn),o.onInit&&o.onInit(r)}}for(let n=0;n<e.removedNodes.length;n++){const r=e.removedNodes[n];if(r.nodeType===1)for(let i=0;i<t.length;i++){const o=t[i],l=o.query,a=Array.from(r.querySelectorAll(l));r.matches&&r.matches(l)&&a.push(r);for(let s=0;s<a.length;s++){const d=a[s];if(!document.contains(d)){const f=d[o.attribute];if(f&&typeof f.destroy=="function")try{f.destroy()}catch(c){console.error("["+o.attribute+"] destroy failed",d,c)}delete d[o.attribute]}}}}}}function he(){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{fe(r)}catch(i){console.error("[ln-core] lifecycle handler failed",r.target,i)}}}).observe(document.body,{childList:!0,subtree:!0})},"ln-core"))}function we(e,t,n,r,i={}){const o=i.extraAttributes||[],l=i.onAttributeChange||null,a=i.onSubtreeChange||null,s=i.onInit||null,d=i.onAttrChange||null,f=i.effects||null,c=i.attributes||null,u=c?oe(c):f,h=c?new Set(Object.keys(c)):null,b=i.persist||null;function p(k){const w=k||document.body;if(v(w,e,t,n),c&&L())for(const g in c){const Te=c[g],S=Array.from(w.querySelectorAll("["+g+"]"));w.matches&&w.matches("["+g+"]")&&S.push(w);for(let E=0;E<S.length;E++){const x=S[E];C(x)&&N(Te,x.getAttribute(g),g,r,x)}}s&&s(w)}const T=[];if(e.indexOf("[")!==-1){const k=/\[([\w-]+)/g;let w;for(;(w=k.exec(e))!==null;)T.push(w[1])}else T.push(e);ce({selector:e,attribute:t,componentTag:r,attributes:c,ComponentFn:n,onInit:s,observed:T.concat(o),onAttributeChange:l,onAttrChange:d,effects:u,declared:h,persist:b}),de();const _e=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]";B().push({selector:e,attribute:t,ComponentFn:n,onInit:s,onSubtreeChange:a,query:_e}),he(),window[t]=p;function W(){se()>0?ae(function(){p(document.body)}):p(document.body)}return document.readyState==="loading"?document.addEventListener("DOMContentLoaded",W):W(),p}function j(e){return(e||"").replace(/^#/,"")}function _(e){const t=e===void 0?location.hash:e,n={},r=j(t);if(!r)return n;const i=r.split("&");for(let o=0;o<i.length;o++){const l=i[o];if(!l)continue;const a=l.indexOf(":"),s=a>-1?l.slice(0,a):l,d=a>-1?l.slice(a+1):"";if(s)try{n[s]=decodeURIComponent(d)}catch{n[s]=d}}return n}function be(e){if(!e)return null;const t=_();return e in t?t[e]:null}function ge(e,t){if(!e)return;const n=_();t==null?delete n[e]:n[e]=String(t);const i=Object.keys(n).map(function(o){const l=n[o];return l===""?o:o+":"+encodeURIComponent(l)}).join("&");j(location.hash)!==i&&(location.hash=i)}function me(e){return e.button===1||e.ctrlKey||e.metaKey||e.shiftKey?!1:(e.preventDefault(),!0)}function pe(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 Ce(e,t){return!t||t==="none"||e===null||e===void 0?null:String(e)+"."+t}function ye(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 Ae(e,t){return!e||!Array.isArray(t)||t.length===0?null:e+":"+t.map(encodeURIComponent).join(",")}function ve(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),i=r?r.split(",").map(function(o){try{return decodeURIComponent(o)}catch{return o}}).filter(Boolean):[];return{key:n,values:i}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.hashParse=_,window.lnCore.hashGet=be,window.lnCore.hashSet=ge,window.lnCore.hashLinkClick=me,window.lnCore.resolveHashNamespace=pe,window.lnCore.hashSortEncode=Ce,window.lnCore.hashSortDecode=ye,window.lnCore.hashFilterEncode=Ae,window.lnCore.hashFilterDecode=ve),(function(){const e="data-ln-confirm",t="lnConfirm",n="data-ln-confirm-state",r="data-ln-confirm-announcer";if(window[t]!==void 0)return;function o(c,u,h){return c.getAttribute(u)||h}function l(c,u,h){const b=parseFloat(c.getAttribute(u));return isNaN(b)||b<=0?h:b}function a(c){const u=document.createElement("span");return u.setAttribute(r,""),u.setAttribute("role","alert"),u.textContent=c,u}const s={"data-ln-confirm":{prop:"confirmText",type:"string",read:o,fallback:"Confirm?",description:"Prompt text or confirmation action trigger"},"data-ln-confirm-timeout":{prop:"timeout",type:"float",read:l,fallback:3,min:.1,description:"Confirmation timeout in seconds before reverting"},"data-ln-confirm-state":{prop:"confirming",type:"enum",values:["confirming"],read:(c,u)=>c.getAttribute(u)==="confirming",description:'Active confirmation state marker on button ("confirming")'}},d=ie(s);function f(c){this.dom=c,re(this,c,d),this.revertTimer=null,this._submitted=!1,this.idleEl=c.querySelector("[data-ln-confirm-idle]"),this.activeEl=c.querySelector("[data-ln-confirm-active]"),this.isTwoElementMode=!!(this.idleEl||this.activeEl),this.originalText=this.isTwoElementMode?"":c.textContent.trim();const u=this;return this._onClick=function(h){if(!H(h))if(!u.confirming)h.preventDefault(),h.stopImmediatePropagation(),u._enterConfirm();else{if(u._submitted)return;u._submitted=!0,h.stopPropagation(),u._reset()}},c.addEventListener("click",this._onClick),this}f.prototype._enterConfirm=function(){if(this.dom.setAttribute(n,"confirming"),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 c=this.activeEl?this.activeEl.textContent.trim():"";c&&(this.dom.setAttribute("aria-label",c),this.dom.setAttribute("aria-live","polite"))}else{const c=this.dom.querySelector("svg.ln-icon use");c&&this.originalText===""?(this.isIconButton=!0,this.originalIconHref=c.getAttribute("href"),c.setAttribute("href","#ln-icon-check"),this.dom.setAttribute("aria-label",this.confirmText),this.dom.appendChild(a(this.confirmText))):this.dom.textContent=this.confirmText}this._startTimer(),O(this.dom,"ln-confirm:waiting",{target:this.dom})},f.prototype._startTimer=function(){this.revertTimer&&clearTimeout(this.revertTimer);const c=this,u=this.timeout*1e3;this.revertTimer=setTimeout(function(){c._reset()},u)},f.prototype._reset=function(){if(this._submitted=!1,this.dom.removeAttribute(n),this.isTwoElementMode)this.idleEl&&this.idleEl.removeAttribute("hidden"),this.activeEl&&this.activeEl.setAttribute("hidden","true");else if(this.isIconButton){const c=this.dom.querySelector("svg.ln-icon use");c&&this.originalIconHref&&c.setAttribute("href",this.originalIconHref);const u=this.dom.querySelector("["+r+"]");u&&u.remove(),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)},f.prototype.destroy=function(){this.dom[t]&&(this.confirming&&this._reset(),this.dom.removeEventListener("click",this._onClick),delete this.dom[t])},we(e,t,f,"ln-confirm",{attributes:s})})()})();

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

@@ -0,0 +1,66 @@
+{
+	"$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-confirm",
+	"generator": "scripts/sync-ln-schemas.mjs",
+	"attributes": {
+		"data-ln-confirm": {
+			"direction": null,
+			"sources": [
+				"ln-confirm-dev.scss",
+				"ln-confirm.scss",
+				"src/ln-confirm.js"
+			],
+			"type": "string",
+			"fallback": "Confirm?",
+			"description": "Prompt text or confirmation action trigger"
+		},
+		"data-ln-confirm-active": {
+			"direction": "author",
+			"sources": [
+				"ln-confirm-dev.scss",
+				"src/ln-confirm.js"
+			]
+		},
+		"data-ln-confirm-announcer": {
+			"direction": "both",
+			"sources": [
+				"ln-confirm.scss",
+				"src/ln-confirm.js"
+			]
+		},
+		"data-ln-confirm-idle": {
+			"direction": "author",
+			"sources": [
+				"ln-confirm-dev.scss",
+				"src/ln-confirm.js"
+			]
+		},
+		"data-ln-confirm-state": {
+			"direction": "runtime",
+			"sources": [
+				"ln-confirm-dev.scss",
+				"src/ln-confirm.js"
+			],
+			"type": "enum",
+			"values": [
+				"confirming"
+			],
+			"description": "Active confirmation state marker on button ("
+		},
+		"data-ln-confirm-timeout": {
+			"direction": null,
+			"sources": [
+				"src/ln-confirm.js"
+			],
+			"type": "float",
+			"min": 0.1,
+			"description": "Confirmation timeout in seconds before reverting"
+		},
+		"data-ln-debug": {
+			"direction": null,
+			"sources": [
+				"ln-confirm-dev.scss"
+			]
+		}
+	}
+}

package/components/ln-confirm/ln-confirm.scss

@@ -0,0 +1,24 @@
+// ==========================================================================
+// ln-confirm — Functional Hiding Contract & Announcer
+// ==========================================================================
+
+// П4 hiding contract: native `hidden` is the mechanism — the component toggles it
+// on the idle/active children. This backs up the UA default at (0,2,0) so a
+// `display` set on a child cannot defeat it.
+[data-ln-confirm] [hidden] {
+	display: none;
+}
+
+// Injected announcer. This file ships in the CORE bundle and `.sr-only` does not,
+// so the hiding cannot be delegated to the theme.
+[data-ln-confirm-announcer] {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border-width: 0;
+}