@livenetworks/ashlar 1.4.1 → 1.6.0

package/scss/config/mixins/_tooltip.scss

@@ -6,14 +6,21 @@
 @use 'motion' as *;
 
 // Shared dark-bubble chrome for ::after pseudo-tooltips (tooltip, confirm)
-// and JS-portal tooltip-element. Semantic token pair — in dark mode the
-// neutral scale inversion naturally flips the bubble to light-on-dark.
+// and JS-portal tooltip-element. Reads the theme-root token pair
+// (--fg-default / --bg-base) NOT the rebindable --color-fg / --color-bg:
+// the ::after inherits custom properties from its trigger, and many
+// components locally rebind --color-fg/--color-bg (btn, accordion,
+// avatar, app-shell, …). Reading those would make the bubble's text
+// inherit a context-specific value — e.g. dark-on-dark = invisible.
+// --fg-default / --bg-base are only ever set at :root (and flipped at
+// the dark-theme :root), so the dark-mode inversion still works while
+// the bubble stays immune to component-scope rebinds.
 @mixin tooltip-bubble {
 	--padding-y: var(--size-xs);
 	--padding-x: var(--size-sm);
 	padding: var(--padding-y) var(--padding-x);
-	background: var(--color-fg);
-	color: var(--color-bg);
+	background: var(--fg-default);
+	color: var(--bg-base);
 	@include typography(caption);
 	--radius: var(--radius-sm);
 	border-radius: var(--radius);
@@ -89,15 +96,18 @@
 }
 
 // ─── JS Portal (real DOM tooltip) ──────────────────────
-// When JS enhance is active, tooltips render as positioned
-// DOM elements inside #ln-tooltip-portal instead of ::after.
+// When JS enhance is active, tooltips render as positioned DOM elements
+// inside #ln-tooltip-portal, a shared popover="manual" container promoted
+// to the browser's top layer (showPopover()/hidePopover() in ln-tooltip.js)
+// instead of ::after.
 
 @mixin tooltip-portal {
 	position: fixed;
+	inset: auto;
+	margin: 0;
 	top: 0;
 	left: 0;
 	pointer-events: none;
-	z-index: var(--z-toast);
 }
 
 @mixin tooltip-element {

package/scss/config/mixins/_typography.scss

@@ -49,8 +49,10 @@
 		@error "typography(): unknown role '#{$role}'. Valid roles: #{$valid-roles}";
 	}
 
-	font-size:   var(--text-#{$role});
-	line-height: var(--lh-#{$role});
+	--font-size:   var(--text-#{$role});
+	font-size:     var(--font-size);
+	--line-height: var(--lh-#{$role});
+	line-height:   var(--line-height);
 }
 
 @mixin tracking-tight  { letter-spacing: var(--tracking-tight); }

package/scss/ln-ashlar-dev.scss

@@ -0,0 +1,39 @@
+// ==========================================================================
+// Dev & Validation Diagnostics — ln-ashlar
+// ==========================================================================
+// This stylesheet contains diagnostic CSS tools to validate correct HTML 
+// structure, missing integration attributes, and accessibility warnings during 
+// development. Do not compile or deploy this file to production.
+// ==========================================================================
+
+@use 'config/mixins' as *;
+
+// --- Modular Component Diagnostics ---
+@use '../js/ln-toggle/ln-toggle-dev';
+@use '../js/ln-table/ln-table-dev';
+@use '../js/ln-modal/ln-modal-dev';
+@use '../js/ln-modal-coordinator/ln-modal-coordinator-dev';
+@use '../js/ln-validate/ln-validate-dev';
+@use '../js/ln-date/ln-date-dev';
+@use '../js/ln-number/ln-number-dev';
+@use '../js/ln-tabs/ln-tabs-dev';
+@use '../js/ln-search/ln-search-dev';
+@use '../js/ln-filter/ln-filter-dev';
+@use '../js/ln-sort/ln-sort-dev';
+@use '../js/ln-tooltip/ln-tooltip-dev';
+
+// --- General HTML/Accessibility Diagnostics ---
+[data-ln-debug] {
+	// 1. Image Missing Alt: accessibility warning
+	// Flags an <img> with NO alt attribute (empty alt="" is the valid decorative pattern and is intentionally NOT flagged)
+	img:not([alt]) {
+		@include dev-replaced-error;
+	}
+
+	// 2. Abbr Missing Title: accessibility warning
+	// Flags an <abbr> with no title — the abbreviation has no expansion and is meaningless to readers
+	abbr:not([title]) {
+		@include dev-inline-error("abbr is missing a title attribute");
+	}
+}
+

package/scss/ln-ashlar.scss

@@ -13,6 +13,7 @@
 @use 'components/date';
 @use 'components/layout';
 @use 'components/table';
+@use 'components/sort';
 @use 'components/tabs';
 @use 'components/toggle';
 @use 'components/accordion';
@@ -31,9 +32,11 @@
 @use 'components/timeline';
 @use 'components/stat-card';
 @use 'components/prose';
+@use 'components/editor';
 @use 'components/scrollbar';
 @use 'components/tooltip';
 @use 'components/popover';
+@use 'components/filter';
 @use 'components/chip';
 @use 'components/loader';
 @use 'components/progress';
@@ -45,7 +48,6 @@
 @use 'components/toast';
 @use 'components/upload';
 @use 'components/translations';
-@use 'components/data-table';
 @use 'components/ln-table';
 @use 'components/ajax';
 
@@ -60,4 +62,8 @@
 @use '../js/ln-filter/ln-filter';
 @use '../js/ln-search/ln-search';
 @use '../js/ln-table/ln-table' as ln-table-state;
-@use '../js/ln-data-table/ln-data-table';
+@use '../js/ln-list/ln-list';
+@use '../js/ln-editor/ln-editor';
+@use '../js/ln-confirm/ln-confirm';
+
+

package/js/ln-data-table/README.md

@@ -1,110 +0,0 @@
-# ln-data-table
-
-A zero-dependency, event-driven **Data Presentation Shell** that manages row template rendering, interactive sorting, column filtering, search states, multi-row selections, virtual scrolling (10,000+ items), and keyboard layouts.
-
-It decouples data presentation from data fetching: announcing query intents via request events and awaiting rendered datasets asynchronously.
-
----
-
-## 🧭 Philosophy & Architecture
-
-1. **Presenter Separation:** The component possesses no fetching capabilities. It translates column and search interactions into unified query events and delegates execution to a coordinator (such as `ln-store` or direct server fetchers).
-2. **Dynamic Template Scoping:** Row designs are written cleanly inside standard HTML `<template>` slots. Values are safely bound using double-curly brackets (`{{ field }}`) using browser-native `textContent` for robust XSS protection.
-3. **Flicker-Free Virtual Rendering:** Massive tables auto-activate high-performance virtual scrolling. Only the visible portion of rows plus a buffer are mounted, keeping the DOM extremely small.
-
----
-
-## 📦 Minimal Blueprint
-
-```html
-<section data-ln-data-table="documents" data-ln-data-table-selectable id="documents-table">
-  <header class="ln-table__toolbar">
-    <h3>Documents</h3>
-    <input type="search" placeholder="Search..." data-ln-data-table-search>
-  </header>
-
-  <table>
-    <thead>
-      <tr>
-        <th data-ln-col-select></th>
-        <th data-ln-col="title">
-          Title
-          <button data-ln-col-sort aria-label="Sort">
-            <svg class="ln-icon" data-ln-sort-icon="none"><use href="#ln-arrows-sort"></use></svg>
-            <svg class="ln-icon" data-ln-sort-icon="asc"><use href="#ln-arrow-up"></use></svg>
-            <svg class="ln-icon" data-ln-sort-icon="desc"><use href="#ln-arrow-down"></use></svg>
-          </button>
-        </th>
-      </tr>
-    </thead>
-    <tbody data-ln-data-table-body></tbody>
-  </table>
-
-  <!-- Row Template -->
-  <template data-ln-template="documents-row">
-    <tr data-ln-row>
-      <td><input type="checkbox" data-ln-row-select></td>
-      <td>{{ title }}</td>
-    </tr>
-  </template>
-</section>
-```
-
-> [!IMPORTANT]
-> Directly nested `<table>` elements must not be wrapped in scroll-trapping `overflow-y: auto` containers. The sticky header and virtual scroll calculations automatically bind to the nearest scrollable page-level container.
-
----
-
-## 🛠️ Declarative API Contract
-
-### HTML Attributes
-
-| Attribute | Elements | Description |
-| :--- | :--- | :--- |
-| `data-ln-data-table` | `<section>` | Component root and namespace. |
-| `data-ln-data-table-selectable` | `<section>` | Opt-in. Activates checkbox columns and selection tracking. |
-| `data-ln-col="field"` | `<th>` | Binds column interactions (sort, filter) to a data property. |
-| `data-ln-data-table-search` | `<input>` | Binds keystroke entries to instant search events. |
-
-### JS API
-
-Access the presentation state directly via the `lnDataTable` property on the section container:
-
-```javascript
-const table = document.getElementById('documents-table');
-
-// 1. Inspect state
-const selection = table.lnDataTable.selectedIds; // Set of active string IDs
-const sortedBy = table.lnDataTable.currentSort;   // { field, direction }
-
-// 2. Tear down listeners
-table.lnDataTable.destroy();
-```
-
----
-
-## ⚡ DOM Events
-
-### Emitted (Telemetry & Intent)
-
-| Event | Payload | Description |
-| :--- | :--- | :--- |
-| `ln-data-table:request-data` | `{ table, sort, filters, search }` | Intent event. Fired whenever query states change. |
-| `ln-data-table:row-click` | `{ table, id, record }` | Fired when clicking a row (ignored on inputs/links). |
-| `ln-data-table:row-action` | `{ table, id, action, record }` | Fired on clicking `[data-ln-row-action="action"]` slots. |
-| `ln-data-table:select` | `{ table, selectedIds, count }` | Fired on selecting row checkboxes. |
-
-### Received (State Synchronization)
-
-| Event | Payload | Description |
-| :--- | :--- | :--- |
-| `ln-data-table:set-data` | `{ data: Array, total, filtered }` | Populates table, rebuilds filters, formats counts. |
-| `ln-data-table:set-loading` | `{ loading: Boolean }` | Toggles dim loading state (pointer-events disabled). |
-
----
-
-## ⚠️ Common Pitfalls
-
-- **Bypassing the Template Slot:** Putting static row markup directly inside `<tbody>` will result in it being immediately purged on the first data render event. Always build row cells within `<template>`.
-- **Horizontal Overflow Traps:** Attempting to wrap tables in scroll layers breaks sticky header positioning. Let layout views manage full viewport boundaries instead.
-- **Direct JS string injections:** Attempting to render raw HTML inside templates bypasses the safe `textContent` parser, opening XSS risks. Use custom action dispatchers for complex fields.

package/js/ln-data-table/ln-data-table.js

@@ -1 +0,0 @@
-(function(){"use strict";const x={};function F(o,r){x[o]||(x[o]=document.querySelector('[data-ln-template="'+o+'"]'));const _=x[o];return _?_.content.cloneNode(!0):(console.warn("["+r+'] Template "'+o+'" not found'),null)}function m(o,r,_){o.dispatchEvent(new CustomEvent(r,{bubbles:!0,detail:_||{}}))}function D(o,r){if(!o||!r)return o;const _=o.querySelectorAll("[data-ln-field]");for(let u=0;u<_.length;u++){const a=_[u],g=a.getAttribute("data-ln-field");r[g]!=null&&(a.textContent=r[g])}const y=o.querySelectorAll("[data-ln-attr]");for(let u=0;u<y.length;u++){const a=y[u],g=a.getAttribute("data-ln-attr").split(",");for(let e=0;e<g.length;e++){const t=g[e].trim().split(":");if(t.length!==2)continue;const n=t[0].trim(),l=t[1].trim();r[l]!=null&&a.setAttribute(n,r[l])}}const C=o.querySelectorAll("[data-ln-show]");for(let u=0;u<C.length;u++){const a=C[u],g=a.getAttribute("data-ln-show");g in r&&a.classList.toggle("hidden",!r[g])}const S=o.querySelectorAll("[data-ln-class]");for(let u=0;u<S.length;u++){const a=S[u],g=a.getAttribute("data-ln-class").split(",");for(let e=0;e<g.length;e++){const t=g[e].trim().split(":");if(t.length!==2)continue;const n=t[0].trim(),l=t[1].trim();l in r&&a.classList.toggle(n,!!r[l])}}return o}function T(o,r){if(!o||!r)return o;const _=document.createTreeWalker(o,NodeFilter.SHOW_TEXT);for(;_.nextNode();){const y=_.currentNode;y.textContent.indexOf("{{")!==-1&&(y.textContent=y.textContent.replace(/\{\{\s*(\w+)\s*\}\}/g,function(C,S){return r[S]!==void 0?r[S]:""}))}return o}function R(o,r){if(!document.body){document.addEventListener("DOMContentLoaded",function(){R(o,r)}),console.warn("["+r+'] Script loaded before <body> — add "defer" to your <script> tag');return}o()}function E(o,r,_){if(o){const y=o.querySelector('[data-ln-template="'+r+'"]');if(y)return y.content.cloneNode(!0)}return F(r,_)}function I(o,r,_,y){if(o.nodeType!==1)return;const S=r.indexOf("[")!==-1||r.indexOf(".")!==-1||r.indexOf("#")!==-1?r:"["+r+"]",u=Array.from(o.querySelectorAll(S));o.matches&&o.matches(S)&&u.push(o);for(const a of u)a[_]||(a[_]=new y(a))}function O(o,r,_,y,C={}){const S=C.extraAttributes||[],u=C.onAttributeChange||null,a=C.onInit||null;function g(e){const t=e||document.body;I(t,o,r,_),a&&a(t)}return R(function(){const e=new MutationObserver(function(n){for(let l=0;l<n.length;l++){const i=n[l];if(i.type==="childList"){for(let s=0;s<i.addedNodes.length;s++){const c=i.addedNodes[s];c.nodeType===1&&(I(c,o,r,_),a&&a(c))}for(let s=0;s<i.removedNodes.length;s++){const c=i.removedNodes[s];if(c.nodeType===1){const f=o.indexOf("[")!==-1||o.indexOf(".")!==-1||o.indexOf("#")!==-1?o:"["+o+"]",p=Array.from(c.querySelectorAll(f));c.matches&&c.matches(f)&&p.push(c);for(let A=0;A<p.length;A++){const v=p[A];if(!document.contains(v)){const w=v[r];w&&typeof w.destroy=="function"&&w.destroy()}}}}}else i.type==="attributes"&&(u&&i.target[r]?u(i.target,i.attributeName):(I(i.target,o,r,_),a&&a(i.target)))}});let t=[];if(o.indexOf("[")!==-1){const n=/\[([\w-]+)/g;let l;for(;(l=n.exec(o))!==null;)t.push(l[1])}else t.push(o);e.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:t.concat(S)})},y),window[r]=g,document.readyState==="loading"?document.addEventListener("DOMContentLoaded",function(){g(document.body)}):g(document.body),g}const q={};function H(o,r){q[o]=r}function N(o){return q[o]||{ingress:r=>r,egress:r=>r}}typeof window<"u"&&(window.lnCore=window.lnCore||{},window.lnCore.registerDataMapper=H,window.lnCore.getDataMapper=N),(function(){const o="data-ln-data-table",r="lnDataTable";if(window[r]!==void 0)return;const C=typeof Intl<"u"?new Intl.NumberFormat(document.documentElement.lang||void 0):null;function S(e){return C?C.format(e):String(e)}function u(e){let t=e.parentElement;for(;t&&t!==document.body&&t!==document.documentElement;){const l=getComputedStyle(t).overflowY;if(l==="auto"||l==="scroll")return t;t=t.parentElement}return null}function a(e){this.dom=e,this.name=e.getAttribute(o)||"",this.table=e.querySelector("table"),this.tbody=e.querySelector("[data-ln-data-table-body]")||e.querySelector("tbody"),this.thead=e.querySelector("thead"),this.ths=this.thead?Array.from(this.thead.querySelectorAll("th")):[],this.isLoaded=!1,this.totalCount=0,this.visibleCount=0,this.currentSort=null,this.currentFilters={},this.currentSearch="",this.selectedIds=new Set,this._data=[],this._lastTotal=0,this._lastFiltered=0,this._filterOptions={},this._filterableFields=this.ths.filter(function(n){return n.getAttribute("data-ln-col")&&n.querySelector("[data-ln-col-filter]")}).map(function(n){return n.getAttribute("data-ln-col")}),this._virtual=!1,this._rowHeight=0,this._vStart=-1,this._vEnd=-1,this._rafId=null,this._scrollHandler=null,this._scrollContainer=null,this._totalSpan=e.querySelector("[data-ln-data-table-total]"),this._filteredSpan=e.querySelector("[data-ln-data-table-filtered]"),this._filteredSpan&&(this._filteredWrap=this._filteredSpan.parentElement!==e?this._filteredSpan.closest("[data-ln-data-table-filtered-wrap]")||this._filteredSpan.parentNode:null),this._selectedSpan=e.querySelector("[data-ln-data-table-selected]"),this._selectedSpan&&(this._selectedWrap=this._selectedSpan.parentElement!==e?this._selectedSpan.closest("[data-ln-data-table-selected-wrap]")||this._selectedSpan.parentNode:null);const t=this;return this._onSetData=function(n){const l=n.detail||{};t._data=l.data||[],t._lastTotal=l.total!=null?l.total:t._data.length,t._lastFiltered=l.filtered!=null?l.filtered:t._data.length,t.totalCount=t._lastTotal,t.visibleCount=t._lastFiltered,t.isLoaded=!0,t._updateFilterOptions(l.filterOptions),t._vStart=-1,t._vEnd=-1,t._renderRows(),t._updateFooter(),m(e,"ln-data-table:rendered",{table:t.name,total:t.totalCount,visible:t.visibleCount})},e.addEventListener("ln-data-table:set-data",this._onSetData),this._onSetLoading=function(n){const l=n.detail&&n.detail.loading;e.classList.toggle("ln-data-table--loading",!!l),l&&(t.isLoaded=!1)},e.addEventListener("ln-data-table:set-loading",this._onSetLoading),this._sortButtons=Array.from(e.querySelectorAll("[data-ln-col-sort]")),this._onSortClick=function(n){const l=n.target.closest("[data-ln-col-sort]");if(!l)return;const i=l.closest("th");if(!i)return;const s=i.getAttribute("data-ln-col");s&&t._handleSort(s,i)},this.thead&&this.thead.addEventListener("click",this._onSortClick),this._activeDropdown=null,this._onFilterClick=function(n){const l=n.target.closest("[data-ln-col-filter]");if(!l)return;n.stopPropagation();const i=l.closest("th");if(!i)return;const s=i.getAttribute("data-ln-col");if(s){if(t._activeDropdown&&t._activeDropdown.field===s){t._closeFilterDropdown();return}t._openFilterDropdown(s,i,l)}},this.thead&&this.thead.addEventListener("click",this._onFilterClick),this._onDocClick=function(){t._activeDropdown&&t._closeFilterDropdown()},document.addEventListener("click",this._onDocClick),this._onClearAll=function(n){n.target.closest("[data-ln-data-table-clear-all]")&&(t.currentFilters={},t._updateFilterIndicators(),m(e,"ln-data-table:clear-filters",{table:t.name}),t._requestData())},e.addEventListener("click",this._onClearAll),this._selectable=e.hasAttribute("data-ln-data-table-selectable"),this._selectableActive=!1,this._selectable&&this._enableSelection(),this._onRowClick=function(n){if(n.target.closest("[data-ln-row-select]")||n.target.closest("[data-ln-row-action]")||n.target.closest("a")||n.target.closest("button")||n.ctrlKey||n.metaKey||n.button===1)return;const l=n.target.closest("[data-ln-row]");if(!l)return;const i=l.getAttribute("data-ln-row-id"),s=l._lnRecord||{};m(e,"ln-data-table:row-click",{table:t.name,id:i,record:s})},this.tbody&&this.tbody.addEventListener("click",this._onRowClick),this._onRowAction=function(n){const l=n.target.closest("[data-ln-row-action]");if(!l)return;n.stopPropagation();const i=l.closest("[data-ln-row]");if(!i)return;const s=l.getAttribute("data-ln-row-action"),c=i.getAttribute("data-ln-row-id"),d=i._lnRecord||{};m(e,"ln-data-table:row-action",{table:t.name,id:c,action:s,record:d})},this.tbody&&this.tbody.addEventListener("click",this._onRowAction),this._searchInput=e.querySelector("[data-ln-data-table-search]"),this._searchInput&&(this._onSearchInput=function(){t.currentSearch=t._searchInput.value,m(e,"ln-data-table:search",{table:t.name,query:t.currentSearch}),t._requestData()},this._searchInput.addEventListener("input",this._onSearchInput)),this._focusedRowIndex=-1,this._onKeydown=function(n){if(!e.contains(document.activeElement)&&document.activeElement!==document.body||document.activeElement&&(document.activeElement.tagName==="INPUT"||document.activeElement.tagName==="TEXTAREA"))return;if(n.key==="/"){t._searchInput&&(n.preventDefault(),t._searchInput.focus());return}const l=t.tbody?Array.from(t.tbody.querySelectorAll("[data-ln-row]")):[];if(l.length)switch(n.key){case"ArrowDown":n.preventDefault(),t._focusedRowIndex=Math.min(t._focusedRowIndex+1,l.length-1),t._focusRow(l);break;case"ArrowUp":n.preventDefault(),t._focusedRowIndex=Math.max(t._focusedRowIndex-1,0),t._focusRow(l);break;case"Home":n.preventDefault(),t._focusedRowIndex=0,t._focusRow(l);break;case"End":n.preventDefault(),t._focusedRowIndex=l.length-1,t._focusRow(l);break;case"Enter":if(t._focusedRowIndex>=0&&t._focusedRowIndex<l.length){n.preventDefault();const i=l[t._focusedRowIndex];m(e,"ln-data-table:row-click",{table:t.name,id:i.getAttribute("data-ln-row-id"),record:i._lnRecord||{}})}break;case" ":if(t._selectable&&t._focusedRowIndex>=0&&t._focusedRowIndex<l.length){n.preventDefault();const i=l[t._focusedRowIndex].querySelector("[data-ln-row-select]");i&&(i.checked=!i.checked,i.dispatchEvent(new Event("change",{bubbles:!0})))}break;case"Escape":t._activeDropdown&&t._closeFilterDropdown();break}},document.addEventListener("keydown",this._onKeydown),m(e,"ln-data-table:request-data",{table:this.name,sort:this.currentSort,filters:this.currentFilters,search:this.currentSearch}),this}a.prototype._handleSort=function(e,t){let n;!this.currentSort||this.currentSort.field!==e?n="asc":this.currentSort.direction==="asc"?n="desc":n=null;for(let l=0;l<this.ths.length;l++)this.ths[l].classList.remove("ln-sort-asc","ln-sort-desc");n?(this.currentSort={field:e,direction:n},t.classList.add(n==="asc"?"ln-sort-asc":"ln-sort-desc")):this.currentSort=null,m(this.dom,"ln-data-table:sort",{table:this.name,field:e,direction:n}),this._requestData()},a.prototype._requestData=function(){m(this.dom,"ln-data-table:request-data",{table:this.name,sort:this.currentSort,filters:this.currentFilters,search:this.currentSearch})},a.prototype._updateSelectAll=function(){if(!this._selectAllCheckbox||!this.tbody)return;const e=this.tbody.querySelectorAll("[data-ln-row]");let t=e.length>0;for(let n=0;n<e.length;n++){const l=e[n].getAttribute("data-ln-row-id");if(l!=null&&!this.selectedIds.has(l)){t=!1;break}}this._selectAllCheckbox.checked=t},Object.defineProperty(a.prototype,"selectedCount",{get:function(){return this.selectedIds.size},set:function(){}}),a.prototype._enableSelection=function(){if(this._selectableActive)return;this._selectableActive=!0;const e=this;if(this._onSelectionChange=function(t){const n=t.target.closest("[data-ln-row-select]");if(!n)return;const l=n.closest("[data-ln-row]");if(!l)return;const i=l.getAttribute("data-ln-row-id");i!=null&&(n.checked?(e.selectedIds.add(i),l.classList.add("ln-row-selected")):(e.selectedIds.delete(i),l.classList.remove("ln-row-selected")),e.selectedCount=e.selectedIds.size,e._updateSelectAll(),e._updateFooter(),m(e.dom,"ln-data-table:select",{table:e.name,selectedIds:e.selectedIds,count:e.selectedCount}))},this.tbody&&this.tbody.addEventListener("change",this._onSelectionChange),this._selectAllCheckbox=this.dom.querySelector('[data-ln-col-select] input[type="checkbox"]')||this.dom.querySelector("[data-ln-col-select]"),this._selectAllCheckbox&&this._selectAllCheckbox.tagName==="TH"){const t=document.createElement("input");t.type="checkbox",t.setAttribute("aria-label","Select all"),this._selectAllCheckbox.appendChild(t),this._selectAllCheckbox=t}if(this._selectAllCheckbox&&(this._onSelectAll=function(){const t=e._selectAllCheckbox.checked,n=e.tbody?e.tbody.querySelectorAll("[data-ln-row]"):[];for(let l=0;l<n.length;l++){const i=n[l].getAttribute("data-ln-row-id"),s=n[l].querySelector("[data-ln-row-select]");i!=null&&(t?(e.selectedIds.add(i),n[l].classList.add("ln-row-selected")):(e.selectedIds.delete(i),n[l].classList.remove("ln-row-selected")),s&&(s.checked=t))}e.selectedCount=e.selectedIds.size,m(e.dom,"ln-data-table:select-all",{table:e.name,selected:t}),m(e.dom,"ln-data-table:select",{table:e.name,selectedIds:e.selectedIds,count:e.selectedCount}),e._updateFooter()},this._selectAllCheckbox.addEventListener("change",this._onSelectAll)),this.tbody){const t=this.tbody.querySelectorAll("[data-ln-row]");for(let n=0;n<t.length;n++){const l=t[n].querySelector("[data-ln-row-select]"),i=t[n].getAttribute("data-ln-row-id");l&&l.checked&&i!=null&&(this.selectedIds.add(i),t[n].classList.add("ln-row-selected"))}this.selectedCount=this.selectedIds.size,this.selectedCount>0&&this._updateSelectAll()}},a.prototype._disableSelection=function(){if(!this._selectableActive)return;this._selectableActive=!1,this.tbody&&this._onSelectionChange&&this.tbody.removeEventListener("change",this._onSelectionChange),this._selectAllCheckbox&&this._onSelectAll&&this._selectAllCheckbox.removeEventListener("change",this._onSelectAll);const e=this.dom.querySelector("[data-ln-col-select]");if(e){const t=e.querySelector('input[type="checkbox"]');t&&t.remove()}if(this._selectAllCheckbox=null,this.selectedIds.clear(),this.selectedCount=0,this.tbody){const t=this.tbody.querySelectorAll("[data-ln-row]");for(let n=0;n<t.length;n++){t[n].classList.remove("ln-row-selected");const l=t[n].querySelector("[data-ln-row-select]");l&&(l.checked=!1)}}this._updateFooter()},a.prototype._focusRow=function(e){for(let t=0;t<e.length;t++)e[t].classList.remove("ln-row-focused"),e[t].removeAttribute("tabindex");if(this._focusedRowIndex>=0&&this._focusedRowIndex<e.length){const t=e[this._focusedRowIndex];t.classList.add("ln-row-focused"),t.setAttribute("tabindex","0"),t.focus(),t.scrollIntoView({block:"nearest"})}},a.prototype._openFilterDropdown=function(e,t,n){this._closeFilterDropdown();const l=E(this.dom,this.name+"-column-filter","ln-data-table")||E(this.dom,"column-filter","ln-data-table");if(!l)return;const i=l.firstElementChild;if(!i)return;const s=this._getUniqueValues(e),c=i.querySelector("[data-ln-filter-options]"),d=i.querySelector("[data-ln-filter-search]"),f=this.currentFilters[e]||[],p=this;if(d&&s.length<=8&&d.classList.add("hidden"),c){const v=c.querySelector("[data-ln-filter-reset]");v&&(v.checked=f.length===0);const w=E(i,this.name+"-column-filter-item","ln-data-table")||E(i,"column-filter-item","ln-data-table");if(w)for(let h=0;h<s.length;h++){const b=s[h],k=w.cloneNode(!0);D(k,{value:b});const L=k.querySelector('input[type="checkbox"]');L&&(L.value=b,L.checked=f.length>0&&f.indexOf(b)!==-1),c.appendChild(k)}c.addEventListener("change",function(h){h.target.type==="checkbox"&&(p._applyFilterMutualExclusion(h.target,c),p._onFilterChange(e,c))})}d&&d.addEventListener("input",function(){const v=d.value.toLowerCase(),w=c.querySelectorAll("li");for(let h=0;h<w.length;h++){const b=w[h].textContent.toLowerCase();w[h].classList.toggle("hidden",v&&b.indexOf(v)===-1)}});const A=i.querySelector("[data-ln-filter-clear]");A&&A.addEventListener("click",function(){delete p.currentFilters[e],p._closeFilterDropdown(),p._updateFilterIndicators(),m(p.dom,"ln-data-table:filter",{table:p.name,field:e,values:[]}),p._requestData()}),t.appendChild(i),this._activeDropdown={field:e,th:t,el:i},i.addEventListener("click",function(v){v.stopPropagation()})},a.prototype._closeFilterDropdown=function(){this._activeDropdown&&(this._activeDropdown.el&&this._activeDropdown.el.parentNode&&this._activeDropdown.el.parentNode.removeChild(this._activeDropdown.el),this._activeDropdown=null)},a.prototype._applyFilterMutualExclusion=function(e,t){const n=e.hasAttribute("data-ln-filter-reset"),l=t.querySelector("[data-ln-filter-reset]"),i=t.querySelectorAll('input[type="checkbox"]:not([data-ln-filter-reset])');if(n){e.checked=!0;for(let s=0;s<i.length;s++)i[s].checked=!1}else if(e.checked)l&&(l.checked=!1);else{let s=!1;for(let c=0;c<i.length;c++)if(i[c].checked){s=!0;break}!s&&l&&(l.checked=!0)}},a.prototype._onFilterChange=function(e,t){const n=t.querySelector("[data-ln-filter-reset]"),l=t.querySelectorAll('input[type="checkbox"]:not([data-ln-filter-reset])'),i=[];for(let c=0;c<l.length;c++)l[c].checked&&i.push(l[c].value);const s=n&&n.checked||i.length===0;s?delete this.currentFilters[e]:this.currentFilters[e]=i,this._updateFilterIndicators(),m(this.dom,"ln-data-table:filter",{table:this.name,field:e,values:s?[]:i}),this._requestData()},a.prototype._updateFilterOptions=function(e){if(e!==null&&typeof e=="object"&&!Array.isArray(e)){const t=Object.keys(e);for(let n=0;n<t.length;n++){const l=t[n],i=e[l];if(!Array.isArray(i))continue;const s={},c=[];for(let d=0;d<i.length;d++){const f=String(i[d]);s[f]||(s[f]=!0,c.push(f))}this._filterOptions[l]=c.sort()}}else{const t=this._filterableFields,n=this._data;for(let l=0;l<t.length;l++){const i=t[l];this._filterOptions[i]||(this._filterOptions[i]=[]);const s=this._filterOptions[i],c={};for(let d=0;d<s.length;d++)c[s[d]]=!0;for(let d=0;d<n.length;d++){const f=n[d][i];if(f!=null){const p=String(f);c[p]||(c[p]=!0,s.push(p))}}s.sort()}}},a.prototype._getUniqueValues=function(e){return(this._filterOptions[e]||[]).slice().sort()},a.prototype._updateFilterIndicators=function(){const e=this.ths;for(let t=0;t<e.length;t++){const n=e[t],l=n.getAttribute("data-ln-col");if(!l)continue;const i=n.querySelector("[data-ln-col-filter]");if(!i)continue;const s=this.currentFilters[l]&&this.currentFilters[l].length>0;i.classList.toggle("ln-filter-active",!!s)}},a.prototype._renderRows=function(){if(!this.tbody)return;const e=this._data,t=this._lastTotal,n=this._lastFiltered;if(t===0){this._disableVirtualScroll(),this._showEmptyState(this.name+"-empty");return}if(e.length===0||n===0){this._disableVirtualScroll(),this._showEmptyState(this.name+"-empty-filtered");return}e.length>200?(this._enableVirtualScroll(),this._renderVirtual()):(this._disableVirtualScroll(),this._renderAll())},a.prototype._renderAll=function(){const e=this._data,t=document.createDocumentFragment();for(let n=0;n<e.length;n++){const l=this._buildRow(e[n]);if(!l)break;t.appendChild(l)}this.tbody.textContent="",this.tbody.appendChild(t),this._selectable&&this._updateSelectAll()},a.prototype._buildRow=function(e){const t=E(this.dom,this.name+"-row","ln-data-table");if(!t)return null;const n=t.querySelector("[data-ln-row]")||t.firstElementChild;if(!n)return null;if(this._fillRow(n,e),n._lnRecord=e,e.id!=null&&n.setAttribute("data-ln-row-id",e.id),this._selectable&&e.id!=null&&this.selectedIds.has(String(e.id))){n.classList.add("ln-row-selected");const l=n.querySelector("[data-ln-row-select]");l&&(l.checked=!0)}return n},a.prototype._enableVirtualScroll=function(){if(this._virtual)return;this._virtual=!0,this._vStart=-1,this._vEnd=-1;const e=this;if(!this._rowHeight){const n=this._buildRow(this._data[0]);n&&(this.tbody.textContent="",this.tbody.appendChild(n),this._rowHeight=n.offsetHeight||40,this.tbody.textContent="")}this._scrollContainer=u(this.dom);const t=this._scrollContainer||window;this._scrollHandler=function(){e._rafId||(e._rafId=requestAnimationFrame(function(){e._rafId=null,e._renderVirtual()}))},t.addEventListener("scroll",this._scrollHandler,{passive:!0}),window.addEventListener("resize",this._scrollHandler,{passive:!0})},a.prototype._disableVirtualScroll=function(){this._virtual&&(this._virtual=!1,this._scrollHandler&&((this._scrollContainer||window).removeEventListener("scroll",this._scrollHandler),window.removeEventListener("resize",this._scrollHandler),this._scrollHandler=null),this._scrollContainer=null,this._rafId&&(cancelAnimationFrame(this._rafId),this._rafId=null),this._vStart=-1,this._vEnd=-1)},a.prototype._renderVirtual=function(){const e=this._data,t=e.length,n=this._rowHeight;if(!n||!t)return;const l=this.thead?this.thead.offsetHeight:0,i=this._scrollContainer;let s,c;if(i){const h=this.table.getBoundingClientRect(),b=i.getBoundingClientRect(),k=h.top-b.top+i.scrollTop+l;s=i.scrollTop-k,c=i.clientHeight}else{const k=this.table.getBoundingClientRect().top+window.scrollY+l;s=window.scrollY-k,c=window.innerHeight}let d=Math.max(0,Math.floor(s/n)-15);d=Math.min(d,t);const f=Math.min(d+Math.ceil(c/n)+30,t);if(d===this._vStart&&f===this._vEnd)return;this._vStart=d,this._vEnd=f;const p=this.ths.length||1,A=d*n,v=(t-f)*n,w=document.createDocumentFragment();if(A>0){const h=document.createElement("tr");h.className="ln-data-table__spacer",h.setAttribute("aria-hidden","true");const b=document.createElement("td");b.setAttribute("colspan",p),b.style.height=A+"px",h.appendChild(b),w.appendChild(h)}for(let h=d;h<f;h++){const b=this._buildRow(e[h]);b&&w.appendChild(b)}if(v>0){const h=document.createElement("tr");h.className="ln-data-table__spacer",h.setAttribute("aria-hidden","true");const b=document.createElement("td");b.setAttribute("colspan",p),b.style.height=v+"px",h.appendChild(b),w.appendChild(h)}this.tbody.textContent="",this.tbody.appendChild(w),this._selectable&&this._updateSelectAll()},a.prototype._fillRow=function(e,t){T(e,t);const n=e.querySelectorAll("[data-ln-cell-attr]");for(let l=0;l<n.length;l++){const i=n[l],s=i.getAttribute("data-ln-cell-attr").split(",");for(let c=0;c<s.length;c++){const d=s[c].trim().split(":");if(d.length!==2)continue;const f=d[0].trim(),p=d[1].trim();t[f]!=null&&i.setAttribute(p,t[f])}}},a.prototype._showEmptyState=function(e){const t=E(this.dom,e,"ln-data-table");this.tbody.textContent="",t&&this.tbody.appendChild(t)},a.prototype._updateFooter=function(){const e=this._lastTotal,t=this._lastFiltered,n=t<e;if(this._totalSpan&&(this._totalSpan.textContent=S(e)),this._filteredSpan&&(this._filteredSpan.textContent=n?S(t):""),this._filteredWrap&&this._filteredWrap.classList.toggle("hidden",!n),this._selectedSpan){const l=this.selectedIds.size;this._selectedSpan.textContent=l>0?S(l):"",this._selectedWrap&&this._selectedWrap.classList.toggle("hidden",l===0)}},a.prototype.destroy=function(){this.dom[r]&&(this.dom.removeEventListener("ln-data-table:set-data",this._onSetData),this.dom.removeEventListener("ln-data-table:set-loading",this._onSetLoading),this.thead&&(this.thead.removeEventListener("click",this._onSortClick),this.thead.removeEventListener("click",this._onFilterClick)),document.removeEventListener("click",this._onDocClick),document.removeEventListener("keydown",this._onKeydown),this._searchInput&&this._searchInput.removeEventListener("input",this._onSearchInput),this.tbody&&(this.tbody.removeEventListener("click",this._onRowClick),this.tbody.removeEventListener("click",this._onRowAction)),this._onSelectionChange&&this.tbody&&this.tbody.removeEventListener("change",this._onSelectionChange),this._selectAllCheckbox&&this._onSelectAll&&this._selectAllCheckbox.removeEventListener("change",this._onSelectAll),this.dom.removeEventListener("click",this._onClearAll),this._closeFilterDropdown(),this._disableVirtualScroll(),this._data=[],delete this.dom[r])};function g(e,t){const n=e[r];if(n&&t==="data-ln-data-table-selectable"){const l=e.hasAttribute("data-ln-data-table-selectable");l!==n._selectable&&(n._selectable=l,l?n._enableSelection():n._disableSelection())}}O(o,r,a,"ln-data-table",{extraAttributes:["data-ln-data-table-selectable"],onAttributeChange:g})})()})();

package/js/ln-data-table/ln-data-table.scss

@@ -1,10 +0,0 @@
-// ── JS state: data table loading ──
-// Loading-class added by JS while async data fetches; visual stays here
-// because it's a transient JS-controlled state transition.
-
-.ln-data-table--loading {
-	tbody {
-		opacity: 0.5;
-		pointer-events: none;
-	}
-}