@livenetworks/ashlar 1.3.2

package/js/ln-popover/README.md

@@ -0,0 +1,127 @@
+# ln-popover
+
+> Viewport-aware click-triggered rich-content overlays, managed reactively via the DOM.
+
+---
+
+## 1. Philosophy & Mindset
+
+In `ln-ashlar`, the core design principle is **orthogonality**. Rather than creating a heavy component that bundles state, positioning algorithms, LIFO click stacks, and styles, `ln-popover` splits them cleanly:
+
+1. **State & Positioning (JavaScript)**: The `ln-popover` script handles binary `open` / `closed` states in the DOM, manages view-port boundaries to flip placement as needed, restores keyboard focus gracefully, and coordinates LIFO (Last-In, First-Out) keyboard ESC dismissal stacks.
+2. **Visual Presentation (CSS)**: Visual layouts, background shadows, and borders are handled in Vanilla CSS. The library ships a premium `@mixin popover` to style popover cards.
+3. **Trigger decoupling (HTML)**: Triggers (`data-ln-popover-for="popoverId"`) and popover containers (`id="popoverId"`) are bound purely by ID, allowing the trigger button and the popup card to live anywhere in the document.
+
+---
+
+## 2. Minimal Blueprint
+
+Triggers and popovers are paired by ID. Wrap content in a `div` carrying the `data-ln-popover` attribute.
+
+```html
+<!-- Trigger anywhere -->
+<button data-ln-popover-for="account-menu">Account</button>
+
+<!-- Popover anywhere — role="dialog" and tabindex="-1" are injected automatically -->
+<div data-ln-popover id="account-menu">
+    <p><strong>user@example.com</strong></p>
+    <nav>
+        <a href="/settings">Settings</a>
+        <a href="/logout">Sign out</a>
+    </nav>
+</div>
+```
+
+### Key Anatomy Rules
+- **The Popover wrapper (`data-ln-popover`)**: Driven by the value `"open"` (open) and `"closed"` or empty (closed).
+- **The Trigger (`data-ln-popover-for="id"`)**: Sets `aria-expanded` and manages focus automatically.
+- **Visual styling**: Re-apply `@mixin popover` in your SCSS on the popover element.
+
+---
+
+## 3. Declarative API & State Contract
+
+There are no imperative JavaScript methods (like `open()` or `close()`) on the component instance. **The HTML attribute is the sole contract.** 
+
+Triggers, LIFO click outside handlers, viewport edge flips, and custom scripts all change state by writing the active attribute on the popover element:
+
+```js
+const popover = document.getElementById('account-menu');
+
+// Open the popover
+popover.setAttribute('data-ln-popover', 'open');
+
+// Close the popover
+popover.setAttribute('data-ln-popover', 'closed');
+
+// Read-only state query
+popover.lnPopover.isOpen; // Returns true/false
+```
+
+### Attributes
+- `data-ln-popover`: Placed on the popover card. Value `"open"` = open; `"closed"` = closed.
+- `data-ln-popover-for="id"`: Placed on triggers referencing the popover ID.
+- `data-ln-popover-position="top|bottom|left|right"`: Preferred placement side. Default: `bottom`.
+- `data-ln-popover-placement`: Set automatically by JS to indicate the *actual* active side after auto-flip is resolved.
+
+---
+
+## 4. Transition Events
+
+All events bubble. The dispatch target is the popover element itself.
+
+| Event | Cancelable | `detail` | Dispatched When |
+|---|---|---|---|
+| **`ln-popover:before-open`** | **Yes** | `{ popoverId, target, trigger }` | Before opening. `event.preventDefault()` cancels the transition and reverts the attribute. |
+| **`ln-popover:open`** | No | `{ popoverId, target, trigger }` | After popover is positioned, classes added, and focus moved. |
+| **`ln-popover:before-close`** | **Yes** | `{ popoverId, target, trigger }` | Before closing. `event.preventDefault()` cancels the close and reverts the attribute. |
+| **`ln-popover:close`** | No | `{ popoverId, target, trigger }` | After popover is closed and focus restored back to the trigger. |
+
+```js
+// Example: Cancel open transition for unauthorized zones
+document.addEventListener('ln-popover:before-open', (e) => {
+    if (e.detail.popoverId === 'admin-zone' && !currentUser.isAdmin) {
+        e.preventDefault(); // Reverts attribute back to "closed"
+    }
+});
+```
+
+---
+
+## 5. Integration Patterns
+
+### A. Position Preferences & Auto-Flip
+Preferred placement is easily configured. If there isn't enough room in the viewport, the positioning engine flips the popover to the opposite side:
+```html
+<div data-ln-popover data-ln-popover-position="right" id="help-menu">...</div>
+```
+
+### B. Nested Popovers (A stays open when B opens)
+Opening B from inside A leaves A open. Pressing `ESC` once closes B first, and then A:
+```html
+<div data-ln-popover id="popover-a">
+    <button data-ln-popover-for="popover-b">Open B</button>
+</div>
+<div data-ln-popover id="popover-b">...</div>
+```
+
+---
+
+## 6. Integration & Source Files
+
+- **Unified Bundle**: Loaded automatically with the main bundle:
+  ```html
+  <script src="dist/ln-ashlar.iife.js" defer></script>
+  ```
+- **Standalone IIFE**: For lightweight pages, load the standalone, self-registering IIFE version:
+  ```html
+  <script src="js/ln-popover/ln-popover.js" defer></script>
+  ```
+- **Active Source (ESM)**: Development source is located at [js/ln-popover/src/ln-popover.js](file:///c:/laragon/www/ln-ashlar/js/ln-popover/src/ln-popover.js).
+
+---
+
+## Related
+- **[`ln-dropdown`](../ln-dropdown/README.md)** — Menu wrapper adding click-outside/teleportation.
+- **[`ln-toggle`](../ln-toggle/README.md)** — Binary disclosure state primitive.
+- **Architecture deep-dive** — [`docs/js/popover.md`](../../docs/js/popover.md).

package/js/ln-popover/ln-popover.js

@@ -0,0 +1 @@
+(function(){"use strict";function A(t,e,n){t.dispatchEvent(new CustomEvent(e,{bubbles:!0,detail:n||{}}))}function O(t,e,n){const a=new CustomEvent(e,{bubbles:!0,cancelable:!0,detail:n||{}});return t.dispatchEvent(a),a}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 E(t,e,n,a){if(t.nodeType!==1)return;const p=e.indexOf("[")!==-1||e.indexOf(".")!==-1||e.indexOf("#")!==-1?e:"["+e+"]",h=Array.from(t.querySelectorAll(p));t.matches&&t.matches(p)&&h.push(t);for(const l of h)l[n]||(l[n]=new a(l))}function I(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}function x(t,e,n,a,u={}){const p=u.extraAttributes||[],h=u.onAttributeChange||null,l=u.onInit||null;function d(m){const i=m||document.body;E(i,t,e,n),l&&l(i)}return k(function(){const m=new MutationObserver(function(r){for(let c=0;c<r.length;c++){const s=r[c];if(s.type==="childList")for(let o=0;o<s.addedNodes.length;o++){const g=s.addedNodes[o];g.nodeType===1&&(E(g,t,e,n),l&&l(g))}else s.type==="attributes"&&(h&&s.target[e]?h(s.target,s.attributeName):(E(s.target,t,e,n),l&&l(s.target)))}});let i=[];if(t.indexOf("[")!==-1){const r=/\[([\w-]+)/g;let c;for(;(c=r.exec(t))!==null;)i.push(c[1])}else i.push(t);m.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:i.concat(p)})},a||(t.indexOf("[")===-1?t.replace("data-",""):"component")),window[e]=d,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){d(document.body)}):d(document.body),d}const L={};function R(t,e){L[t]=e}function M(t){return L[t]||{ingress:e=>e,egress:e=>e}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=R,window.lnCore.getDataMapper=M);function T(t,e,n,a){const u=a,p=window.innerWidth,h=window.innerHeight,l=e.width,d=e.height,m=(n||"bottom").split("-"),i=m[0],r=m[1]==="start"||m[1]==="end"?m[1]:"center",c={top:["top","bottom","right","left"],bottom:["bottom","top","right","left"],left:["left","right","top","bottom"],right:["right","left","top","bottom"]},s=c[i]||c.bottom;function o(f){return f==="top"||f==="bottom"?r==="start"?t.left:r==="end"?t.right-l:t.left+(t.width-l)/2:r==="start"?t.top:r==="end"?t.bottom-d:t.top+(t.height-d)/2}function g(f){let _,w,C=!0;return f==="top"?(_=t.top-u-d,w=o(f),_<0&&(C=!1)):f==="bottom"?(_=t.bottom+u,w=o(f),_+d>h&&(C=!1)):f==="left"?(_=o(f),w=t.left-u-l,w<0&&(C=!1)):(_=o(f),w=t.right+u,w+l>p&&(C=!1)),{top:_,left:w,side:f,fits:C}}let v=null;for(let f=0;f<s.length;f++){const _=g(s[f]);if(_.fits){v=_;break}}v||(v=g(s[0]));let b=v.top,y=v.left;return l>=p?y=0:(y<0&&(y=0),y+l>p&&(y=p-l)),d>=h?b=0:(b<0&&(b=0),b+d>h&&(b=h-d)),{top:b,left:y,placement:v.side}}function B(t){if(!t||t.parentNode===document.body)return function(){};const e=t.parentNode,n=document.createComment("ln-teleport");return e.insertBefore(n,t),document.body.appendChild(t),function(){n.parentNode&&(n.parentNode.insertBefore(t,n),n.parentNode.removeChild(n))}}function D(t){if(!t)return{width:0,height:0};const e=t.style,n=e.visibility,a=e.display,u=e.position;e.visibility="hidden",e.display="block",e.position="fixed";const p=t.offsetWidth,h=t.offsetHeight;return e.visibility=n,e.display=a,e.position=u,{width:p,height:h}}(function(){const t="data-ln-popover",e="lnPopover",n="data-ln-popover-for",a="data-ln-popover-position";if(window[e]!==void 0)return;const u=[];let p=null;function h(){p||(p=function(i){if(i.key!=="Escape"||u.length===0)return;u[u.length-1].close()},document.addEventListener("keydown",p))}function l(){u.length>0||p&&(document.removeEventListener("keydown",p),p=null)}function d(i){return this.dom=i,this.isOpen=i.getAttribute(t)==="open",this.trigger=null,this._teleportRestore=null,this._previousFocus=null,this._boundDocClick=null,this._docClickTimeout=null,this._boundReposition=null,i.hasAttribute("tabindex")||i.setAttribute("tabindex","-1"),i.hasAttribute("role")||i.setAttribute("role","dialog"),this.isOpen&&this._applyOpen(null),this}d.prototype.open=function(i){this.isOpen||(this.trigger=i||null,this.dom.setAttribute(t,"open"))},d.prototype.close=function(){this.isOpen&&this.dom.setAttribute(t,"closed")},d.prototype.toggle=function(i){this.isOpen?this.close():this.open(i)},d.prototype._applyOpen=function(i){this.isOpen=!0,i&&(this.trigger=i),this._previousFocus=document.activeElement,this._teleportRestore=B(this.dom);const r=D(this.dom);if(this.trigger){const g=this.trigger.getBoundingClientRect(),v=this.dom.getAttribute(a)||"bottom",b=T(g,r,v,8);this.dom.style.top=b.top+"px",this.dom.style.left=b.left+"px",this.dom.setAttribute("data-ln-popover-placement",b.placement),this.trigger.setAttribute("aria-expanded","true")}const c=this.dom.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])'),s=Array.prototype.find.call(c,I);s?s.focus():this.dom.focus();const o=this;this._boundDocClick=function(g){o.dom.contains(g.target)||o.trigger&&o.trigger.contains(g.target)||o.close()},o._docClickTimeout=setTimeout(function(){o._docClickTimeout=null,document.addEventListener("click",o._boundDocClick)},0),this._boundReposition=function(){if(!o.trigger)return;const g=o.trigger.getBoundingClientRect(),v=D(o.dom),b=o.dom.getAttribute(a)||"bottom",y=T(g,v,b,8);o.dom.style.top=y.top+"px",o.dom.style.left=y.left+"px",o.dom.setAttribute("data-ln-popover-placement",y.placement)},window.addEventListener("scroll",this._boundReposition,{passive:!0,capture:!0}),window.addEventListener("resize",this._boundReposition),u.push(this),h(),A(this.dom,"ln-popover:open",{popoverId:this.dom.id,target:this.dom,trigger:this.trigger})},d.prototype._applyClose=function(){this.isOpen=!1,this._docClickTimeout&&(clearTimeout(this._docClickTimeout),this._docClickTimeout=null),this._boundDocClick&&(document.removeEventListener("click",this._boundDocClick),this._boundDocClick=null),this._boundReposition&&(window.removeEventListener("scroll",this._boundReposition,{capture:!0}),window.removeEventListener("resize",this._boundReposition),this._boundReposition=null),this.dom.style.top="",this.dom.style.left="",this.dom.removeAttribute("data-ln-popover-placement"),this.trigger&&this.trigger.setAttribute("aria-expanded","false"),this._teleportRestore&&(this._teleportRestore(),this._teleportRestore=null);const i=u.indexOf(this);i!==-1&&u.splice(i,1),l(),this._previousFocus&&this.trigger&&this._previousFocus===this.trigger?this.trigger.focus():this.trigger&&document.activeElement===document.body&&this.trigger.focus(),this._previousFocus=null,A(this.dom,"ln-popover:close",{popoverId:this.dom.id,target:this.dom,trigger:this.trigger}),this.trigger=null},d.prototype.destroy=function(){this.dom[e]&&(this.isOpen&&this._applyClose(),delete this.dom[e],A(this.dom,"ln-popover:destroyed",{popoverId:this.dom.id,target:this.dom}))};function m(i){this.dom=i;const r=i.getAttribute(n);return i.setAttribute("aria-haspopup","dialog"),i.setAttribute("aria-expanded","false"),i.setAttribute("aria-controls",r),this._onClick=function(c){if(c.ctrlKey||c.metaKey||c.button===1)return;c.preventDefault();const s=document.getElementById(r);!s||!s[e]||s[e].toggle(i)},i.addEventListener("click",this._onClick),this}m.prototype.destroy=function(){this.dom.removeEventListener("click",this._onClick),delete this.dom[e+"Trigger"]},x(t,e,d,"ln-popover",{onAttributeChange:function(i){const r=i[e];if(!r)return;const s=i.getAttribute(t)==="open";if(s!==r.isOpen)if(s){if(O(i,"ln-popover:before-open",{popoverId:i.id,target:i,trigger:r.trigger}).defaultPrevented){i.setAttribute(t,"closed");return}r._applyOpen(r.trigger)}else{if(O(i,"ln-popover:before-close",{popoverId:i.id,target:i,trigger:r.trigger}).defaultPrevented){i.setAttribute(t,"open");return}r._applyClose()}}}),x(n,e+"Trigger",m,"ln-popover-trigger")})()})();

package/js/ln-popover/src/ln-popover.js

@@ -0,0 +1,288 @@
+import { dispatch, dispatchCancelable, computePlacement, teleportToBody, measureHidden, isVisible, registerComponent } from '../../ln-core';
+
+(function () {
+	const DOM_SELECTOR = 'data-ln-popover';
+	const DOM_ATTRIBUTE = 'lnPopover';
+	const TRIGGER_SELECTOR = 'data-ln-popover-for';
+	const POSITION_SELECTOR = 'data-ln-popover-position';
+
+	if (window[DOM_ATTRIBUTE] !== undefined) return;
+
+	// ─── Open-stack (Escape closes top of stack) ───────────────
+
+	const openStack = [];
+	let escListener = null;
+
+	function _ensureEscListener() {
+		if (escListener) return;
+		escListener = function (e) {
+			if (e.key !== 'Escape') return;
+			if (openStack.length === 0) return;
+			const top = openStack[openStack.length - 1];
+			top.close();
+		};
+		document.addEventListener('keydown', escListener);
+	}
+
+	function _maybeRemoveEscListener() {
+		if (openStack.length > 0) return;
+		if (!escListener) return;
+		document.removeEventListener('keydown', escListener);
+		escListener = null;
+	}
+
+	// ─── Component ─────────────────────────────────────────────
+
+	function _component(dom) {
+		this.dom = dom;
+		this.isOpen = dom.getAttribute(DOM_SELECTOR) === 'open';
+		this.trigger = null;
+		this._teleportRestore = null;
+		this._previousFocus = null;
+		this._boundDocClick = null;
+		this._docClickTimeout = null;
+		this._boundReposition = null;
+
+		// Make the popover container itself programmatically focusable
+		// as a fallback when it has no focusable children.
+		if (!dom.hasAttribute('tabindex')) {
+			dom.setAttribute('tabindex', '-1');
+		}
+		if (!dom.hasAttribute('role')) {
+			dom.setAttribute('role', 'dialog');
+		}
+
+		// If the markup says open at boot, sync immediately.
+		if (this.isOpen) {
+			this._applyOpen(null);
+		}
+
+		return this;
+	}
+
+	_component.prototype.open = function (trigger) {
+		if (this.isOpen) return;
+		this.trigger = trigger || null;
+		this.dom.setAttribute(DOM_SELECTOR, 'open');
+	};
+
+	_component.prototype.close = function () {
+		if (!this.isOpen) return;
+		this.dom.setAttribute(DOM_SELECTOR, 'closed');
+	};
+
+	_component.prototype.toggle = function (trigger) {
+		if (this.isOpen) {
+			this.close();
+		} else {
+			this.open(trigger);
+		}
+	};
+
+	// ─── Apply open/close (called from _syncAttribute) ─────────
+
+	_component.prototype._applyOpen = function (trigger) {
+		this.isOpen = true;
+		if (trigger) this.trigger = trigger;
+		this._previousFocus = document.activeElement;
+
+		// Teleport into <body> so position:fixed coordinates are reliable
+		// regardless of any ancestor with `transform` or `contain`.
+		this._teleportRestore = teleportToBody(this.dom);
+
+		// Measure (works even though it just got `display: block` by the
+		// attribute switch — measureHidden is safe either way).
+		const size = measureHidden(this.dom);
+
+		// Position relative to the trigger (if any).
+		if (this.trigger) {
+			const rect = this.trigger.getBoundingClientRect();
+			const preferred = this.dom.getAttribute(POSITION_SELECTOR) || 'bottom';
+			const placement = computePlacement(rect, size, preferred, 8);
+			// Inline coordinates are unavoidable for floating UI; CSS
+			// supplies position:fixed via the co-located scss, JS only
+			// writes `top`/`left`. This is consistent with ln-dropdown.
+			this.dom.style.top = placement.top + 'px';
+			this.dom.style.left = placement.left + 'px';
+			this.dom.setAttribute('data-ln-popover-placement', placement.placement);
+			this.trigger.setAttribute('aria-expanded', 'true');
+		}
+
+		// Focus management — first visible focusable, or popover itself.
+		const allFocusable = this.dom.querySelectorAll('a[href], button:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])');
+		const focusable = Array.prototype.find.call(allFocusable, isVisible);
+		if (focusable) {
+			focusable.focus();
+		} else {
+			this.dom.focus();
+		}
+
+		// Outside-click listener (delayed by one tick so the opening
+		// click doesn't immediately close).
+		const self = this;
+		this._boundDocClick = function (e) {
+			if (self.dom.contains(e.target)) return;
+			if (self.trigger && self.trigger.contains(e.target)) return;
+			self.close();
+		};
+		self._docClickTimeout = setTimeout(function () {
+			self._docClickTimeout = null;
+			document.addEventListener('click', self._boundDocClick);
+		}, 0);
+
+		// Reposition on scroll/resize while open.
+		this._boundReposition = function () {
+			if (!self.trigger) return;
+			const r = self.trigger.getBoundingClientRect();
+			const sz = measureHidden(self.dom);
+			const preferred = self.dom.getAttribute(POSITION_SELECTOR) || 'bottom';
+			const p = computePlacement(r, sz, preferred, 8);
+			self.dom.style.top = p.top + 'px';
+			self.dom.style.left = p.left + 'px';
+			self.dom.setAttribute('data-ln-popover-placement', p.placement);
+		};
+		window.addEventListener('scroll', this._boundReposition, { passive: true, capture: true });
+		window.addEventListener('resize', this._boundReposition);
+
+		openStack.push(this);
+		_ensureEscListener();
+
+		dispatch(this.dom, 'ln-popover:open', {
+			popoverId: this.dom.id,
+			target: this.dom,
+			trigger: this.trigger
+		});
+	};
+
+	_component.prototype._applyClose = function () {
+		this.isOpen = false;
+
+		if (this._docClickTimeout) {
+			clearTimeout(this._docClickTimeout);
+			this._docClickTimeout = null;
+		}
+		if (this._boundDocClick) {
+			document.removeEventListener('click', this._boundDocClick);
+			this._boundDocClick = null;
+		}
+		if (this._boundReposition) {
+			window.removeEventListener('scroll', this._boundReposition, { capture: true });
+			window.removeEventListener('resize', this._boundReposition);
+			this._boundReposition = null;
+		}
+
+		// Clear positioning inline styles so re-open re-measures cleanly.
+		this.dom.style.top = '';
+		this.dom.style.left = '';
+		this.dom.removeAttribute('data-ln-popover-placement');
+
+		if (this.trigger) {
+			this.trigger.setAttribute('aria-expanded', 'false');
+		}
+
+		// Restore teleport.
+		if (this._teleportRestore) {
+			this._teleportRestore();
+			this._teleportRestore = null;
+		}
+
+		// Remove from open stack.
+		const idx = openStack.indexOf(this);
+		if (idx !== -1) openStack.splice(idx, 1);
+		_maybeRemoveEscListener();
+
+		// Restore focus to trigger if Escape closed it; on outside-click
+		// we deliberately don't yank focus.
+		if (this._previousFocus && this.trigger && this._previousFocus === this.trigger) {
+			this.trigger.focus();
+		} else if (this.trigger && document.activeElement === document.body) {
+			// User dismissed via Escape — focus was inside popover; return it.
+			this.trigger.focus();
+		}
+		this._previousFocus = null;
+
+		dispatch(this.dom, 'ln-popover:close', {
+			popoverId: this.dom.id,
+			target: this.dom,
+			trigger: this.trigger
+		});
+		this.trigger = null;
+	};
+
+	_component.prototype.destroy = function () {
+		if (!this.dom[DOM_ATTRIBUTE]) return;
+		if (this.isOpen) this._applyClose();
+		delete this.dom[DOM_ATTRIBUTE];
+		dispatch(this.dom, 'ln-popover:destroyed', {
+			popoverId: this.dom.id,
+			target: this.dom
+		});
+	};
+
+	// ─── Trigger Component ─────────────────────────────────────
+
+	function _triggerComponent(dom) {
+		this.dom = dom;
+		const popoverId = dom.getAttribute(TRIGGER_SELECTOR);
+		dom.setAttribute('aria-haspopup', 'dialog');
+		dom.setAttribute('aria-expanded', 'false');
+		dom.setAttribute('aria-controls', popoverId);
+
+		const self = this;
+		this._onClick = function (e) {
+			if (e.ctrlKey || e.metaKey || e.button === 1) return;
+			e.preventDefault();
+			const target = document.getElementById(popoverId);
+			if (!target || !target[DOM_ATTRIBUTE]) return;
+			target[DOM_ATTRIBUTE].toggle(dom);
+		};
+		dom.addEventListener('click', this._onClick);
+		return this;
+	}
+
+	_triggerComponent.prototype.destroy = function () {
+		this.dom.removeEventListener('click', this._onClick);
+		delete this.dom[DOM_ATTRIBUTE + 'Trigger'];
+	};
+
+	// ─── Registration ──────────────────────────────────────────
+
+	registerComponent(DOM_SELECTOR, DOM_ATTRIBUTE, _component, 'ln-popover', {
+		onAttributeChange: function (el) {
+			const instance = el[DOM_ATTRIBUTE];
+			if (!instance) return;
+
+			const value = el.getAttribute(DOM_SELECTOR);
+			const shouldBeOpen = value === 'open';
+
+			if (shouldBeOpen === instance.isOpen) return;
+
+			if (shouldBeOpen) {
+				const before = dispatchCancelable(el, 'ln-popover:before-open', {
+					popoverId: el.id,
+					target: el,
+					trigger: instance.trigger
+				});
+				if (before.defaultPrevented) {
+					el.setAttribute(DOM_SELECTOR, 'closed');
+					return;
+				}
+				instance._applyOpen(instance.trigger);
+			} else {
+				const before = dispatchCancelable(el, 'ln-popover:before-close', {
+					popoverId: el.id,
+					target: el,
+					trigger: instance.trigger
+				});
+				if (before.defaultPrevented) {
+					el.setAttribute(DOM_SELECTOR, 'open');
+					return;
+				}
+				instance._applyClose();
+			}
+		}
+	});
+
+	registerComponent(TRIGGER_SELECTOR, DOM_ATTRIBUTE + 'Trigger', _triggerComponent, 'ln-popover-trigger');
+})();
+