@livenetworks/ashlar 1.5.1 → 1.6.0

package/js/ln-toggle/src/ln-toggle.js

@@ -8,40 +8,7 @@ import { persistGet, persistSet } from '../../ln-core';
 	if (window[DOM_ATTRIBUTE] !== undefined) return;
 
 
-	function _attachTriggers(root) {
-		const triggers = Array.from(root.querySelectorAll('[data-ln-toggle-for]'));
-		if (root.hasAttribute && root.hasAttribute('data-ln-toggle-for')) {
-			triggers.push(root);
-		}
-		for (const btn of triggers) {
-			if (btn[DOM_ATTRIBUTE + 'Trigger']) continue;
-			const handler = function (e) {
-				if (e.ctrlKey || e.metaKey || e.button === 1) return;
-				e.preventDefault();
-				const targetId = btn.getAttribute('data-ln-toggle-for');
-				const target = document.getElementById(targetId);
-				if (!target || !target[DOM_ATTRIBUTE]) return;
 
-				const action = btn.getAttribute('data-ln-toggle-action') || 'toggle';
-				if (action === 'open') {
-					target.setAttribute(DOM_SELECTOR, 'open');
-				} else if (action === 'close') {
-					target.setAttribute(DOM_SELECTOR, 'close');
-				} else if (action === 'toggle') {
-					const current = target.getAttribute(DOM_SELECTOR);
-					target.setAttribute(DOM_SELECTOR, current === 'open' ? 'close' : 'open');
-				}
-				// unknown action — silent no-op
-			};
-			btn.addEventListener('click', handler);
-			btn[DOM_ATTRIBUTE + 'Trigger'] = handler;
-			const targetId = btn.getAttribute('data-ln-toggle-for');
-			const target = document.getElementById(targetId);
-			if (target && target[DOM_ATTRIBUTE]) {
-				btn.setAttribute('aria-expanded', target[DOM_ATTRIBUTE].isOpen ? 'true' : 'false');
-			}
-		}
-	}
 
 	function _syncTriggerAria(panelEl, isOpen) {
 		const triggers = document.querySelectorAll(
@@ -57,6 +24,21 @@ import { persistGet, persistSet } from '../../ln-core';
 	function _component(dom) {
 		this.dom = dom;
 
+		const self = this;
+		this._onRequestOpen = function () {
+			self.open();
+		};
+		this._onRequestClose = function () {
+			self.close();
+		};
+		this._onRequestToggle = function () {
+			self.toggle();
+		};
+
+		this.dom.addEventListener('ln-toggle:request-open', this._onRequestOpen);
+		this.dom.addEventListener('ln-toggle:request-close', this._onRequestClose);
+		this.dom.addEventListener('ln-toggle:request-toggle', this._onRequestToggle);
+
 		// ─── Restore persisted state ──────────────────────────────
 		if (dom.hasAttribute('data-ln-persist')) {
 			const saved = persistGet('toggle', dom);
@@ -76,16 +58,25 @@ import { persistGet, persistSet } from '../../ln-core';
 		return this;
 	}
 
+	_component.prototype.open = function () {
+		this.dom.setAttribute(DOM_SELECTOR, 'open');
+	};
+
+	_component.prototype.close = function () {
+		this.dom.setAttribute(DOM_SELECTOR, 'close');
+	};
+
+	_component.prototype.toggle = function () {
+		const current = this.dom.getAttribute(DOM_SELECTOR);
+		this.dom.setAttribute(DOM_SELECTOR, current === 'open' ? 'close' : 'open');
+	};
+
 	_component.prototype.destroy = function () {
 		if (!this.dom[DOM_ATTRIBUTE]) return;
+		this.dom.removeEventListener('ln-toggle:request-open', this._onRequestOpen);
+		this.dom.removeEventListener('ln-toggle:request-close', this._onRequestClose);
+		this.dom.removeEventListener('ln-toggle:request-toggle', this._onRequestToggle);
 		dispatch(this.dom, 'ln-toggle:destroyed', { target: this.dom });
-		const triggers = document.querySelectorAll('[data-ln-toggle-for="' + this.dom.id + '"]');
-		for (const btn of triggers) {
-			if (btn[DOM_ATTRIBUTE + 'Trigger']) {
-				btn.removeEventListener('click', btn[DOM_ATTRIBUTE + 'Trigger']);
-				delete btn[DOM_ATTRIBUTE + 'Trigger'];
-			}
-		}
 		delete this.dom[DOM_ATTRIBUTE];
 	};
 
@@ -129,11 +120,33 @@ import { persistGet, persistSet } from '../../ln-core';
 		}
 	}
 
+	// ─── Event Delegation ──────────────────────────────────────
+
+	document.addEventListener('click', function (e) {
+		if (e.ctrlKey || e.metaKey || e.button === 1) return;
+
+		const trigger = e.target.closest('[data-ln-toggle-for]');
+		if (trigger) {
+			const targetId = trigger.getAttribute('data-ln-toggle-for');
+			const target = document.getElementById(targetId);
+			if (target && target[DOM_ATTRIBUTE]) {
+				e.preventDefault();
+				const action = trigger.getAttribute('data-ln-toggle-action') || 'toggle';
+				if (action === 'open') {
+					target.setAttribute(DOM_SELECTOR, 'open');
+				} else if (action === 'close') {
+					target.setAttribute(DOM_SELECTOR, 'close');
+				} else if (action === 'toggle') {
+					const current = target.getAttribute(DOM_SELECTOR);
+					target.setAttribute(DOM_SELECTOR, current === 'open' ? 'close' : 'open');
+				}
+			}
+		}
+	});
+
 	// ─── Init ──────────────────────────────────────────────────
 
 	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-toggle', {
-		extraAttributes: ['data-ln-toggle-for'],
-		onAttributeChange: _syncAttribute,
-		onInit: _attachTriggers
+		onAttributeChange: _syncAttribute
 	});
 })();

package/js/ln-tooltip/README.md

@@ -1,58 +1,95 @@
-# ln-tooltip
-
-A zero-dependency, progressively enhanced **Dual-Layer Tooltip Primitive** that displays lightweight contextual descriptions on hover and focus.
-
-It supports two levels of execution: a **pure CSS baseline** (zero JS footprint, utilizing pseudo-elements) and a **JS progressive enhancement layer** (portaled to the body to escape parent clipping, viewport-aware auto-flipping, and automated `aria-describedby` wiring).
-
----
-
-## 🧭 Philosophy & Architecture
-
-1. **CSS-First Baseline (Zero-JS):** Every element carrying `data-ln-tooltip="text"` immediately receives a beautiful hover/focus visual tooltip via pure CSS `::after` pseudo-elements.
-2. **JS Portaled Enhancement (`data-ln-tooltip-enhance`):** Opt-in to activate JS features. The component detaches the tooltip from the trigger and mounts it in a global `<body>` portal (`#ln-tooltip-portal`), avoiding parent `overflow: hidden` clipping, wrapping long texts safely, and auto-flipping the bubble if it hits viewport boundaries.
-3. **Automated `<abbr>` Semantic Integration:** Elements containing both `data-ln-tooltip` and a native `title` attribute (such as standard `<abbr>` elements) auto-enhance without requiring the `-enhance` flag. The JS layer intercepts the native browser hover tooltip and replaces it dynamically to avoid double tooltips.
-
----
-
-## 📦 Minimal Blueprint
-
-### CSS Baseline (Zero JS)
-```html
-<button type="button" data-ln-tooltip="Save document" aria-label="Save document">
-  <svg class="ln-icon" aria-hidden="true"><use href="#ln-device-floppy"></use></svg>
-</button>
-```
-
-### JS Progressive Enhancement (Viewport-Aware & Portaled)
-Add `data-ln-tooltip-enhance` to activate advanced positioning and accessibility wiring.
-```html
-<button type="button" 
-        data-ln-tooltip="Delete this document permanently" 
-        data-ln-tooltip-enhance 
-        data-ln-tooltip-position="right"
-        aria-label="Delete document">
-  <svg class="ln-icon" aria-hidden="true"><use href="#ln-trash"></use></svg>
-</button>
-```
-
----
-
-## 🛠️ Declarative API Contract
-
-### HTML Attributes
-
-| Attribute | Elements | Description |
-| :--- | :--- | :--- |
-| `data-ln-tooltip="text"` | Trigger element | Tooltip text. Required. If empty, falls back to the native `title` attribute. |
-| `data-ln-tooltip-position` | Trigger element | Preferred placement side: `top` (default), `bottom`, `left`, `right`. |
-| `data-ln-tooltip-enhance` | Trigger element | Opt-in. Activates JS portaling, edge auto-flipping, and accessibility descriptions. |
-| `title` | Trigger element | When present alongside `data-ln-tooltip`, forces auto-enhance to suppress native tooltips. |
-| `aria-describedby` | Trigger element | *State*. Automatically wired by the JS layer at runtime to point to the portal bubble ID. |
-
----
-
-## ⚠️ Common Pitfalls
-
-- **Omitting `aria-label` on Icon Buttons:** Sighted users see the tooltip, but screen readers require standard labeling. Sighted tooltips are visual mirrors; always include a matching `aria-label` on icon-only controls.
-- **Triggering on Non-Focusable Elements:** Tooltips rely on hover and keyboard focus. Putting `data-ln-tooltip` on plain `<span>` or `<div>` elements without `tabindex="0"` makes them completely inaccessible to keyboard users.
-- **Applying to Native Disabled Buttons:** Standard disabled buttons (e.g. `<button disabled>`) block pointer events in many browsers, preventing tooltips from firing. Use `aria-disabled="true"` instead to preserve tooltips while indicating disabled status.
+# ln-tooltip
+
+A zero-dependency, progressively enhanced **Dual-Layer Tooltip Primitive** that displays lightweight contextual descriptions on hover and focus.
+
+It supports two levels of execution: a **pure CSS baseline** (zero JS footprint, utilizing pseudo-elements) and a **JS progressive enhancement layer** (top-layer promoted via the native Popover API to escape parent clipping, viewport-aware auto-flipping, and automated `aria-describedby` wiring).
+
+---
+
+## 🧭 Philosophy & Architecture
+
+1. **CSS-First Baseline (Zero-JS):** Every element carrying `data-ln-tooltip="text"` immediately receives a beautiful hover/focus visual tooltip via pure CSS `::after` pseudo-elements.
+2. **JS Top-Layer Enhancement (`data-ln-tooltip-enhance`):** Opt-in to activate JS features. The component detaches the tooltip from the trigger and mounts it in a shared `<body>` container (`#ln-tooltip-portal`) promoted to the browser's top layer via the native Popover API (`popover="manual"`, `showPopover()`/`hidePopover()`), avoiding parent `overflow: hidden` clipping and any ancestor stacking context, wrapping long texts safely, and auto-flipping the bubble if it hits viewport boundaries.
+3. **Automated `<abbr>` Semantic Integration:** Elements containing both `data-ln-tooltip` and a native `title` attribute (such as standard `<abbr>` elements) auto-enhance without requiring the `-enhance` flag. The JS layer intercepts the native browser hover tooltip and replaces it dynamically to avoid double tooltips.
+
+---
+
+## 📦 Minimal Blueprint
+
+### CSS Baseline (Zero JS)
+```html
+<button type="button" data-ln-tooltip="Save document" aria-label="Save document">
+  <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-device-floppy"></use></svg>
+</button>
+```
+
+### JS Progressive Enhancement (Viewport-Aware & Top-Layer Promoted)
+Add `data-ln-tooltip-enhance` to activate advanced positioning and accessibility wiring.
+```html
+<button type="button" 
+        data-ln-tooltip="Delete this document permanently" 
+        data-ln-tooltip-enhance 
+        data-ln-tooltip-position="right"
+        aria-label="Delete document">
+  <svg class="ln-icon" aria-hidden="true"><use href="#ln-icon-trash"></use></svg>
+</button>
+```
+
+---
+
+## 🛠️ Declarative API Contract
+
+### HTML Attributes
+
+| Attribute | Elements | Description |
+| :--- | :--- | :--- |
+| `data-ln-tooltip="text"` | Trigger element | Tooltip text. Required. If empty, falls back to the native `title` attribute. |
+| `data-ln-tooltip-position` | Trigger element | Preferred placement side: `top` (default), `bottom`, `left`, `right`. |
+| `data-ln-tooltip-enhance` | Trigger element | Opt-in. Activates top-layer promotion, edge auto-flipping, and accessibility descriptions. |
+| `title` | Trigger element | When present alongside `data-ln-tooltip`, forces auto-enhance to suppress native tooltips. |
+| `aria-describedby` | Trigger element | *State*. Automatically wired by the JS layer at runtime to point to the portal bubble ID. |
+
+---
+
+## ⚠️ Common Pitfalls
+
+- **Omitting `aria-label` on Icon Buttons:** Sighted users see the tooltip, but screen readers require standard labeling. Sighted tooltips are visual mirrors; always include a matching `aria-label` on icon-only controls.
+- **Triggering on Non-Focusable Elements:** Tooltips rely on hover and keyboard focus. Putting `data-ln-tooltip` on plain `<span>` or `<div>` elements without `tabindex="0"` makes them completely inaccessible to keyboard users.
+- **Applying to Native Disabled Buttons:** Standard disabled buttons (e.g. `<button disabled>`) block pointer events in many browsers, preventing tooltips from firing. Use `aria-disabled="true"` instead to preserve tooltips while indicating disabled status.
+
+---
+
+## 🔧 Internals
+
+Source: `js/ln-tooltip/ln-tooltip.js`. Tooltips are mechanically inert from the data layer's perspective — no coordinator wiring, the only event dispatched is `ln-tooltip:destroyed`.
+
+### Two render strategies, one attribute
+
+`scss/components/_tooltip.scss` applies `@mixin tooltip` to every `[data-ln-tooltip]` element unconditionally — a `::after` pseudo-element reading `attr(data-ln-tooltip)` (falling back to `attr(title)`), toggled on `:hover`/`:focus-visible`. Zero JS. The JS layer attaches only when an element matches `[data-ln-tooltip-enhance]` (explicit opt-in) or `[data-ln-tooltip][title]` (auto-enhance, so the CSS baseline can't otherwise stop the native `title` tooltip from leaking through). For either match, co-located CSS sets `content: none` on the `::after`, suppressing the baseline so only one bubble ever renders:
+
+```scss
+[data-ln-tooltip][data-ln-tooltip-enhance]::after,
+[data-ln-tooltip][title]::after { content: none; }
+```
+
+This suppressor is static CSS, in effect before JS executes — no flash of the baseline pre-init. If JS never runs, an auto-enhance element (has `title`) degrades to the browser's native tooltip; an explicit `-enhance` element with no `title` degrades to nothing, an accepted cost of that opt-in.
+
+### Portal architecture
+
+A single `<div id="ln-tooltip-portal">` is created lazily in `<body>` on the first `_show` call — `position: fixed` at `(0,0)`, `pointer-events: none`, `z-index: var(--z-toast)` (shares the toast layer, so tooltips render above modals/dropdowns regardless of ancestor stacking context). It is never destroyed. Each tooltip node is its own `position: fixed` `<div class="ln-tooltip">`, so its placement is independent of the portal's box — only one node exists inside the portal at any time, created on show, removed on hide.
+
+### Show / hide flow
+
+`_show(trigger)`: same-trigger guard (a second `mouseenter` from a hovered child doesn't recreate the bubble) → `_hide()` any previous tooltip → read `data-ln-tooltip` (fallback `title`), abort silently if both empty → ensure portal → stash and remove `title` (prevents the native browser tooltip appearing after ~1s hover dwell; restored on hide) → build the node with a stable id and append it (must be in the DOM before `computePlacement` reads `offsetWidth`/`offsetHeight`) → `computePlacement(rect, size, preferred, 6)` returns `{ top, left, placement }` after viewport auto-flip → write the two inline styles + `data-ln-tooltip-placement` → wire `aria-describedby` → register the ESC listener if not already present.
+
+`_hide()`: no-op if nothing is active; otherwise restores the stashed `title`, clears `aria-describedby`, removes the node from the DOM (not cached), clears the active-state variables, and removes the ESC listener.
+
+### One visible at a time
+
+Module-level `activeTrigger`/`activeTooltipNode` enforce a hard single-tooltip invariant — every `_show` hides the previous bubble first, mirroring the CSS baseline's natural one-hover-at-a-time behavior. This is also why the `title` stash can live in a single module-level variable rather than a per-trigger map.
+
+### Lifecycle
+
+`registerComponent` wires a `MutationObserver` watching for `[data-ln-tooltip-enhance], [data-ln-tooltip][title]`. On init, four listeners attach to the trigger: `mouseenter`/`focus` → `_show(el)`; `mouseleave`/`blur` → `_hide()` guarded by `activeTrigger === el` (so one trigger can't hide another's tooltip). `focus`/`blur` use the capture phase so events from focusable descendants reach the trigger reliably.
+
+The component never auto-destroys on element removal — listeners are garbage-collected with the element. `destroy()` exists for the rarer case of unwiring without removing the element: removes all four listeners, `_hide()`s if this trigger is currently active, deletes the instance properties, dispatches `ln-tooltip:destroyed`.

package/js/ln-tooltip/ln-tooltip-dev.scss

@@ -0,0 +1,9 @@
+@use '../../scss/config/mixins' as *;
+
+[data-ln-debug] {
+	// 1. Empty Tooltip: accessibility warning
+	// Flags a [data-ln-tooltip] declared empty with no native title fallback (renders an empty bubble); :not([title]) honors the documented title fallback
+	[data-ln-tooltip=""]:not([title]) {
+		@include dev-inline-error("data-ln-tooltip is empty and has no title fallback");
+	}
+}

package/js/ln-tooltip/ln-tooltip.js

@@ -1 +1 @@
-(function(){"use strict";function x(e,o,b){e.dispatchEvent(new CustomEvent(o,{bubbles:!0,detail:b||{}}))}function C(e,o){if(!document.body){document.addEventListener("DOMContentLoaded",function(){C(e,o)}),console.warn("["+o+'] Script loaded before <body> — add "defer" to your <script> tag');return}e()}function L(e,o,b,c){if(e.nodeType!==1)return;const y=o.indexOf("[")!==-1||o.indexOf(".")!==-1||o.indexOf("#")!==-1?o:"["+o+"]",r=Array.from(e.querySelectorAll(y));e.matches&&e.matches(y)&&r.push(e);for(const i of r)i[b]||(i[b]=new c(i))}function O(e,o,b,c,v={}){const y=v.extraAttributes||[],r=v.onAttributeChange||null,i=v.onInit||null;function s(p){const f=p||document.body;L(f,e,o,b),i&&i(f)}return C(function(){const p=new MutationObserver(function(w){for(let E=0;E<w.length;E++){const d=w[E];if(d.type==="childList"){for(let u=0;u<d.addedNodes.length;u++){const l=d.addedNodes[u];l.nodeType===1&&(L(l,e,o,b),i&&i(l))}for(let u=0;u<d.removedNodes.length;u++){const l=d.removedNodes[u];if(l.nodeType===1){const t=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",m=Array.from(l.querySelectorAll(t));l.matches&&l.matches(t)&&m.push(l);for(let n=0;n<m.length;n++){const a=m[n];if(!document.contains(a)){const h=a[o];h&&typeof h.destroy=="function"&&h.destroy()}}}}}else d.type==="attributes"&&(r&&d.target[o]?r(d.target,d.attributeName):(L(d.target,e,o,b),i&&i(d.target)))}});let f=[];if(e.indexOf("[")!==-1){const w=/\[([\w-]+)/g;let E;for(;(E=w.exec(e))!==null;)f.push(E[1])}else f.push(e);p.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:f.concat(y)})},c),window[o]=s,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){s(document.body)}):s(document.body),s}const T={};function N(e,o){T[e]=o}function M(e){return T[e]||{ingress:o=>o,egress:o=>o}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=N,window.lnCore.getDataMapper=M);function D(e,o,b,c){const v=c,y=window.innerWidth,r=window.innerHeight,i=o.width,s=o.height,p=b.split("-"),f=p[0],w=p[1]==="start"||p[1]==="end"?p[1]:"center",E={top:["top","bottom","right","left"],bottom:["bottom","top","right","left"],left:["left","right","top","bottom"],right:["right","left","top","bottom"]},d=E[f]||E.bottom;function u(n){return n==="top"||n==="bottom"?w==="start"?e.left:w==="end"?e.right-i:e.left+(e.width-i)/2:w==="start"?e.top:w==="end"?e.bottom-s:e.top+(e.height-s)/2}function l(n){let a,h,_=!0;return n==="top"?(a=e.top-v-s,h=u(n),a<0&&(_=!1)):n==="bottom"?(a=e.bottom+v,h=u(n),a+s>r&&(_=!1)):n==="left"?(a=u(n),h=e.left-v-i,h<0&&(_=!1)):(a=u(n),h=e.right+v,h+i>y&&(_=!1)),{top:a,left:h,side:n,fits:_}}let A=null;for(let n=0;n<d.length;n++){const a=l(d[n]);if(a.fits){A=a;break}}A||(A=l(d[0]));let t=A.top,m=A.left;return i>=y?m=0:(m<0&&(m=0),m+i>y&&(m=y-i)),s>=r?t=0:(t<0&&(t=0),t+s>r&&(t=r-s)),{top:t,left:m,placement:A.side}}(function(){const e="data-ln-tooltip-enhance",o="data-ln-tooltip",b="data-ln-tooltip-position",c="lnTooltipEnhance",v="ln-tooltip-portal";if(window[c]!==void 0)return;let y=0,r=null,i=null,s=null,p=null,f=null;function w(){return r&&r.parentNode||(r=document.getElementById(v),r||(r=document.createElement("div"),r.id=v,document.body.appendChild(r))),r}function E(){f||(f=function(t){t.key==="Escape"&&l()},document.addEventListener("keydown",f))}function d(){f&&(document.removeEventListener("keydown",f),f=null)}function u(t){if(s===t)return;l();const m=t.getAttribute(o)||t.getAttribute("title");if(!m)return;w(),t.hasAttribute("title")&&(p=t.getAttribute("title"),t.removeAttribute("title"));const n=document.createElement("div");n.className="ln-tooltip",n.textContent=m,t[c+"Uid"]||(y+=1,t[c+"Uid"]="ln-tooltip-"+y),n.id=t[c+"Uid"],r.appendChild(n);const a=n.offsetWidth,h=n.offsetHeight,_=t.getBoundingClientRect(),I=t.getAttribute(b)||"top",g=D(_,{width:a,height:h},I,6);n.style.top=g.top+"px",n.style.left=g.left+"px",n.setAttribute("data-ln-tooltip-placement",g.placement),t.setAttribute("aria-describedby",n.id),i=n,s=t,E()}function l(){if(!i){d();return}s&&(s.removeAttribute("aria-describedby"),p!==null&&s.setAttribute("title",p)),p=null,i.parentNode&&i.parentNode.removeChild(i),i=null,s=null,d()}function A(t){return this.dom=t,t.hasAttribute("data-ln-tooltip-enhanced")||(t.setAttribute("data-ln-tooltip-enhanced",""),this._addedEnhancedAttr=!0),this._onEnter=function(){u(t)},this._onLeave=function(){s===t&&l()},this._onFocus=function(){u(t)},this._onBlur=function(){s===t&&l()},t.addEventListener("mouseenter",this._onEnter),t.addEventListener("mouseleave",this._onLeave),t.addEventListener("focus",this._onFocus,!0),t.addEventListener("blur",this._onBlur,!0),this}A.prototype.destroy=function(){const t=this.dom;t.removeEventListener("mouseenter",this._onEnter),t.removeEventListener("mouseleave",this._onLeave),t.removeEventListener("focus",this._onFocus,!0),t.removeEventListener("blur",this._onBlur,!0),s===t&&l(),this._addedEnhancedAttr&&t.removeAttribute("data-ln-tooltip-enhanced"),delete t[c],delete t[c+"Uid"],x(t,"ln-tooltip:destroyed",{trigger:t})},O("["+e+"], ["+o+"][title]",c,A,"ln-tooltip")})()})();
+(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 E={};function B(t,e){E[t]||(E[t]=document.querySelector('[data-ln-template="'+t+'"]'));const r=E[t];return r?r.content.cloneNode(!0):(console.warn("["+(e||"ln-core")+'] Template "'+t+'" not found'),null)}function I(t,e,r){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:r||{}}))}function T(t,e){if(!t||!e)return t;const r=t.querySelectorAll("[data-ln-field]");for(let n=0;n<r.length;n++){const l=r[n],o=l.getAttribute("data-ln-field");e[o]!=null&&(l.textContent=e[o])}const c=t.querySelectorAll("[data-ln-attr]");for(let n=0;n<c.length;n++){const l=c[n],o=l.getAttribute("data-ln-attr").split(",");for(let s=0;s<o.length;s++){const d=o[s].trim().split(":");if(d.length!==2)continue;const a=d[0].trim(),m=d[1].trim();e[m]!=null&&l.setAttribute(a,e[m])}}const f=t.querySelectorAll("[data-ln-show]");for(let n=0;n<f.length;n++){const l=f[n],o=l.getAttribute("data-ln-show");o in e&&l.classList.toggle("hidden",!e[o])}const u=t.querySelectorAll("[data-ln-class]");for(let n=0;n<u.length;n++){const l=u[n],o=l.getAttribute("data-ln-class").split(",");for(let s=0;s<o.length;s++){const d=o[s].trim().split(":");if(d.length!==2)continue;const a=d[0].trim(),m=d[1].trim();m in e&&l.classList.toggle(a,!!e[m])}}return t}function P(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 c=0;c<r.length;c++)r[c].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)T(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 S(t,e){if(!t||!e)return t;const r=document.createTreeWalker(t,NodeFilter.SHOW_TEXT);for(;r.nextNode();){const u=r.currentNode;u.textContent.indexOf("{{")!==-1&&(u.textContent=u.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(n,l){return e[l]!==void 0?e[l]:""}))}const c=function(u,n){return e[n]!==void 0?e[n]:""},f=Array.from(t.querySelectorAll("*"));t.nodeType===1&&f.push(t);for(let u=0;u<f.length;u++){const n=f[u],l=n.attributes;for(let o=0;o<l.length;o++){const s=l[o];s.value.indexOf("{{")!==-1&&n.setAttribute(s.name,s.value.replace(/\{\{\s*(\w+)\s*\}\}/g,c))}}return t}function F(t,e,r,c,f,u){const n={};for(let o=0;o<t.children.length;o++){const s=t.children[o],d=s.getAttribute("data-ln-key");d&&(n[d]=s)}const l=document.createDocumentFragment();for(let o=0;o<e.length;o++){const s=e[o],d=String(c(s));let a=n[d];if(a)f(a,s,o);else{const m=B(r,u);if(!m||(S(m,s),a=m.firstElementChild,!a))continue;a.setAttribute("data-ln-key",d),f(a,s,o)}l.appendChild(a)}t.textContent="",t.appendChild(l)}function k(t,e){if(!document.body){document.addEventListener("DOMContentLoaded",function(){k(t,e)}),console.warn("["+e+'] Script loaded before <body> — add "defer" to your <script> tag');return}t()}function L(t,e,r,c){if(t.nodeType!==1)return;const u=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",n=Array.from(t.querySelectorAll(u));t.matches&&t.matches(u)&&n.push(t);for(const l of n)l[r]||(l[r]=new c(l))}function M(t,e,r,c,f={}){const u=f.extraAttributes||[],n=f.onAttributeChange||null,l=f.onInit||null;function o(s){const d=s||document.body;L(d,t,e,r),l&&l(d)}return k(function(){const s=new MutationObserver(function(a){for(let m=0;m<a.length;m++){const b=a[m];if(b.type==="childList"){for(let y=0;y<b.addedNodes.length;y++){const g=b.addedNodes[y];g.nodeType===1&&(L(g,t,e,r),l&&l(g))}for(let y=0;y<b.removedNodes.length;y++){const g=b.removedNodes[y];if(g.nodeType===1){const C=t.indexOf("[")!==-1||t.indexOf(".")!==-1||t.indexOf("#")!==-1?t:"["+t+"]",i=Array.from(g.querySelectorAll(C));g.matches&&g.matches(C)&&i.push(g);for(let h=0;h<i.length;h++){const w=i[h];if(!document.contains(w)){const p=w[e];p&&typeof p.destroy=="function"&&p.destroy()}}}}}else b.type==="attributes"&&(n&&b.target[e]?n(b.target,b.attributeName):(L(b.target,t,e,r),l&&l(b.target)))}});let d=[];if(t.indexOf("[")!==-1){const a=/\[([\w-]+)/g;let m;for(;(m=a.exec(t))!==null;)d.push(m[1])}else d.push(t);s.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:d.concat(u)})},c),window[e]=o,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){o(document.body)}):o(document.body),o}const O={};function W(t,e){O[t]=e}function j(t){return O[t]||{ingress:e=>e,egress:e=>e}}const N={};function D(t,e){if(!t||typeof e!="object")return;const r=t.toLowerCase().split("-")[0];N[r]=e}function U(t){if(!t)return null;const e=t.toLowerCase().split("-")[0];return N[e]||null}D("mk",{monthsLong:["јануари","февруари","март","април","мај","јуни","јули","август","септември","октомври","ноември","декември"],monthsShort:["јан","фев","мар","апр","мај","јун","јул","авг","септ","окт","ноем","дек"],daysLong:["недела","понеделник","вторник","среда","четврток","петок","сабота"],daysShort:["нед","пон","вт","ср","чет","пет","саб"]}),typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=W,window.lnCore.getDataMapper=j,window.lnCore.registerLocaleFallback=D,window.lnCore.getLocaleFallback=U,window.lnCore.fillTemplate=S,window.lnCore.fill=T,window.lnCore.lnFill=P,window.lnCore.renderList=F);function q(t){return(t||"").replace(/^#/,"")}function _(t){const e=t===void 0?location.hash:t,r={},c=q(e);if(!c)return r;const f=c.split("&");for(let u=0;u<f.length;u++){const n=f[u];if(!n)continue;const l=n.indexOf(":"),o=l>-1?n.slice(0,l):n,s=l>-1?n.slice(l+1):"";if(o)try{r[o]=decodeURIComponent(s)}catch{r[o]=s}}return r}function G(t){if(!t)return null;const e=_();return t in e?e[t]:null}function K(t,e){if(!t)return;const r=_();e==null?delete r[t]:r[t]=String(e);const f=Object.keys(r).map(function(u){const n=r[u];return n===""?u:u+":"+encodeURIComponent(n)}).join("&");q(location.hash)!==f&&(location.hash=f)}function H(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=_,window.lnCore.hashGet=G,window.lnCore.hashSet=K,window.lnCore.hashLinkClick=H);function X(t,e,r,c){const f=c,u=window.innerWidth,n=window.innerHeight,l=e.width,o=e.height,s=r.split("-"),d=s[0],a=s[1]==="start"||s[1]==="end"?s[1]:"center",m={top:["top","bottom","right","left"],bottom:["bottom","top","right","left"],left:["left","right","top","bottom"],right:["right","left","top","bottom"]},b=m[d]||m.bottom;function y(h){return h==="top"||h==="bottom"?a==="start"?t.left:a==="end"?t.right-l:t.left+(t.width-l)/2:a==="start"?t.top:a==="end"?t.bottom-o:t.top+(t.height-o)/2}function g(h){let w,p,A=!0;return h==="top"?(w=t.top-f-o,p=y(h),w<0&&(A=!1)):h==="bottom"?(w=t.bottom+f,p=y(h),w+o>n&&(A=!1)):h==="left"?(w=y(h),p=t.left-f-l,p<0&&(A=!1)):(w=y(h),p=t.right+f,p+l>u&&(A=!1)),{top:w,left:p,side:h,fits:A}}let v=null;for(let h=0;h<b.length;h++){const w=g(b[h]);if(w.fits){v=w;break}}v||(v=g(b[0]));let C=v.top,i=v.left;return l>=u?i=0:(i<0&&(i=0),i+l>u&&(i=u-l)),o>=n?C=0:(C<0&&(C=0),C+o>n&&(C=n-o)),{top:C,left:i,placement:v.side}}(function(){const t="data-ln-tooltip-enhance",e="data-ln-tooltip",r="data-ln-tooltip-position",c="lnTooltipEnhance",f="ln-tooltip-portal";if(window[c]!==void 0)return;let u=0,n=null,l=null,o=null,s=null,d=null,a=null;function m(){return n&&n.parentNode||(n=document.getElementById(f),n||(n=document.createElement("div"),n.id=f,document.body.appendChild(n)),n.hasAttribute("popover")||n.setAttribute("popover","manual")),n}function b(){a||(a=function(i){i.key==="Escape"&&v()},document.addEventListener("keydown",a))}function y(){a&&(document.removeEventListener("keydown",a),a=null)}function g(i){if(o===i)return;v();const h=i.getAttribute(e)||i.getAttribute("title");if(!h)return;m(),typeof n.showPopover=="function"&&n.showPopover(),i.hasAttribute("title")&&(s=i.getAttribute("title"),i.removeAttribute("title"));const w=i.getAttribute("aria-describedby");w?d=w:d=null;const p=document.createElement("div");p.className="ln-tooltip",p.textContent=h,i[c+"Uid"]||(u+=1,i[c+"Uid"]="ln-tooltip-"+u),p.id=i[c+"Uid"],n.appendChild(p);const A=p.offsetWidth,J=p.offsetHeight,Q=i.getBoundingClientRect(),V=i.getAttribute(r)||"top",x=X(Q,{width:A,height:J},V,6);p.style.top=x.top+"px",p.style.left=x.left+"px",p.setAttribute("data-ln-tooltip-placement",x.placement),d?i.setAttribute("aria-describedby",d+" "+p.id):i.setAttribute("aria-describedby",p.id),l=p,o=i,b()}function v(){if(!l){y();return}o&&(d!==null?o.setAttribute("aria-describedby",d):o.removeAttribute("aria-describedby"),d=null,s!==null&&o.setAttribute("title",s)),s=null,l.parentNode&&l.parentNode.removeChild(l),l=null,o=null,n&&typeof n.hidePopover=="function"&&n.matches(":popover-open")&&n.hidePopover(),y()}function C(i){return this.dom=i,i.hasAttribute("data-ln-tooltip-enhanced")||(i.setAttribute("data-ln-tooltip-enhanced",""),this._addedEnhancedAttr=!0),this._onEnter=function(){g(i)},this._onLeave=function(){o===i&&!i.contains(document.activeElement)&&v()},this._onFocus=function(){g(i)},this._onBlur=function(){o===i&&!i.matches(":hover")&&v()},i.addEventListener("mouseenter",this._onEnter),i.addEventListener("mouseleave",this._onLeave),i.addEventListener("focus",this._onFocus,!0),i.addEventListener("blur",this._onBlur,!0),this}C.prototype.destroy=function(){const i=this.dom;i.removeEventListener("mouseenter",this._onEnter),i.removeEventListener("mouseleave",this._onLeave),i.removeEventListener("focus",this._onFocus,!0),i.removeEventListener("blur",this._onBlur,!0),o===i&&v(),this._addedEnhancedAttr&&i.removeAttribute("data-ln-tooltip-enhanced"),delete i[c],delete i[c+"Uid"],I(i,"ln-tooltip:destroyed",{trigger:i})},M("["+t+"], [data-ln-tooltip-enhanced], ["+e+"][title]",c,C,"ln-tooltip")})()})();

package/js/ln-tooltip/src/ln-tooltip.js

@@ -14,6 +14,7 @@ import { computePlacement, dispatch, registerComponent } from '../../ln-core';
 	let activeTooltipNode = null;
 	let activeTrigger = null;
 	let activeStashedTitle = null;
+	let activeStashedDescribedBy = null;
 	let escListener = null;
 
 	function _ensurePortal() {
@@ -24,6 +25,13 @@ import { computePlacement, dispatch, registerComponent } from '../../ln-core';
 			portal.id = PORTAL_ID;
 			document.body.appendChild(portal);
 		}
+		// Popover API gives top-layer promotion for free — no ancestor
+		// overflow/z-index/transform can clip or bury the portal. `manual`
+		// keeps show/hide entirely under this file's control (no native
+		// light-dismiss), same convention as ln-dropdown/ln-popover.
+		if (!portal.hasAttribute('popover')) {
+			portal.setAttribute('popover', 'manual');
+		}
 		return portal;
 	}
 
@@ -52,6 +60,15 @@ import { computePlacement, dispatch, registerComponent } from '../../ln-core';
 
 		_ensurePortal();
 
+		// Promote before measuring: a manual popover is `display: none` (UA
+		// default) until shown, and a hidden ancestor collapses the whole
+		// subtree's layout box regardless of the child's own display —
+		// so offsetWidth/offsetHeight below would read 0 if this ran later.
+		// _hide() above already guarantees the portal is closed, so no
+		// InvalidStateError risk here (matches ln-dropdown/ln-popover: bare
+		// feature-detect on show, guarded feature-detect on hide).
+		if (typeof portal.showPopover === 'function') portal.showPopover();
+
 		// Stash + strip `title` while our tooltip is visible so the browser's
 		// native title tooltip does not appear alongside it. Restored on hide.
 		if (trigger.hasAttribute('title')) {
@@ -59,6 +76,14 @@ import { computePlacement, dispatch, registerComponent } from '../../ln-core';
 			trigger.removeAttribute('title');
 		}
 
+		// Stash pre-existing aria-describedby
+		const existingDescribedBy = trigger.getAttribute('aria-describedby');
+		if (existingDescribedBy) {
+			activeStashedDescribedBy = existingDescribedBy;
+		} else {
+			activeStashedDescribedBy = null;
+		}
+
 		const node = document.createElement('div');
 		node.className = 'ln-tooltip';
 		node.textContent = text;
@@ -85,7 +110,11 @@ import { computePlacement, dispatch, registerComponent } from '../../ln-core';
 		node.style.left = placement.left + 'px';
 		node.setAttribute('data-ln-tooltip-placement', placement.placement);
 
-		trigger.setAttribute('aria-describedby', node.id);
+		if (activeStashedDescribedBy) {
+			trigger.setAttribute('aria-describedby', activeStashedDescribedBy + ' ' + node.id);
+		} else {
+			trigger.setAttribute('aria-describedby', node.id);
+		}
 
 		activeTooltipNode = node;
 		activeTrigger = trigger;
@@ -98,7 +127,13 @@ import { computePlacement, dispatch, registerComponent } from '../../ln-core';
 			return;
 		}
 		if (activeTrigger) {
-			activeTrigger.removeAttribute('aria-describedby');
+			if (activeStashedDescribedBy !== null) {
+				activeTrigger.setAttribute('aria-describedby', activeStashedDescribedBy);
+			} else {
+				activeTrigger.removeAttribute('aria-describedby');
+			}
+			activeStashedDescribedBy = null;
+
 			if (activeStashedTitle !== null) {
 				activeTrigger.setAttribute('title', activeStashedTitle);
 			}
@@ -109,6 +144,11 @@ import { computePlacement, dispatch, registerComponent } from '../../ln-core';
 		}
 		activeTooltipNode = null;
 		activeTrigger = null;
+		// Exit the top layer — guard required: hidePopover() throws
+		// InvalidStateError if called while not currently showing.
+		if (portal && typeof portal.hidePopover === 'function' && portal.matches(':popover-open')) {
+			portal.hidePopover();
+		}
 		_removeEscListener();
 	}
 
@@ -124,14 +164,13 @@ import { computePlacement, dispatch, registerComponent } from '../../ln-core';
 			this._addedEnhancedAttr = true;
 		}
 
-		const self = this;
 		this._onEnter = function () { _show(el); };
 		this._onLeave = function () {
-			if (activeTrigger === el) _hide();
+			if (activeTrigger === el && !el.contains(document.activeElement)) _hide();
 		};
 		this._onFocus = function () { _show(el); };
 		this._onBlur = function () {
-			if (activeTrigger === el) _hide();
+			if (activeTrigger === el && !el.matches(':hover')) _hide();
 		};
 
 		el.addEventListener('mouseenter', this._onEnter);
@@ -160,7 +199,7 @@ import { computePlacement, dispatch, registerComponent } from '../../ln-core';
 	// ─── Registration ──────────────────────────────────────────
 
 	registerComponent(
-		'[' + TRIGGER_SELECTOR + '], [' + TEXT_ATTR + '][title]',
+		'[' + TRIGGER_SELECTOR + '], [data-ln-tooltip-enhanced], [' + TEXT_ATTR + '][title]',
 		DOM_ATTRIBUTE,
 		_component,
 		'ln-tooltip'