@prioticket/design-system-web 1.7.0-beta.1 → 1.7.0

package/COMPONENT-DOCUMENTATION.md

@@ -1,6 +1,6 @@
 # @prioticket/design-system-web Components
 
-Version: 1.7.0-beta.1
+Version: 1.7.0
 
 ### <pd-box> (PdBox)
 

package/component-documentation.json

@@ -1,11 +1,11 @@
 {
   "package": {
     "name": "@prioticket/design-system-web",
-    "version": "1.7.0-beta.1",
+    "version": "1.7.0",
     "description": "",
     "installation": "npm install @prioticket/design-system-web"
   },
-  "generatedAt": "2026-03-07T07:22:26.108Z",
+  "generatedAt": "2026-03-09T17:32:58.984Z",
   "components": {
     "pd-box": {
       "tagName": "pd-box",

package/custom-elements.json

@@ -6708,6 +6708,21 @@
               "privacy": "private",
               "default": "null"
             },
+            {
+              "kind": "field",
+              "name": "_flipPositions",
+              "privacy": "private",
+              "default": "new Map<string | number, number>()"
+            },
+            {
+              "kind": "field",
+              "name": "_flipPending",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "false"
+            },
             {
               "kind": "field",
               "name": "_displayDataCache",
@@ -6726,6 +6741,12 @@
               "privacy": "private",
               "default": "''"
             },
+            {
+              "kind": "field",
+              "name": "_displayToDataIndexMap",
+              "privacy": "private",
+              "default": "new Map<T, number>()"
+            },
             {
               "kind": "field",
               "name": "_reactRoots",
@@ -6772,6 +6793,38 @@
               "description": "Processed data with sorting and pagination applied.\nResults are memoized for performance.",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "_captureRowPositions",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "Captures the current Y position of every visible row.\nMust be called BEFORE data changes trigger a re-render."
+            },
+            {
+              "kind": "method",
+              "name": "_playFlipAnimation",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "description": "After re-render, computes the delta between old and new positions\nand animates rows from their old position to the new one."
+            },
+            {
+              "kind": "field",
+              "name": "_dataRevision",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "0",
+              "description": "Incremented whenever data is set, ensuring the cache is always invalidated.\nThis replaces the fragile fingerprinting approach that missed adjacent swaps."
+            },
             {
               "kind": "method",
               "name": "_computeCacheKey",
@@ -6824,25 +6877,6 @@
                 }
               ]
             },
-            {
-              "kind": "method",
-              "name": "_getActualDataIndex",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "number"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "row",
-                  "type": {
-                    "text": "T"
-                  }
-                }
-              ],
-              "description": "Finds the actual index of a row in the full data array.\nThis is critical for stable row keys when pagination is active."
-            },
             {
               "kind": "method",
               "name": "_isColumnSortable",
@@ -7066,7 +7100,7 @@
                   }
                 },
                 {
-                  "name": "index",
+                  "name": "displayIndex",
                   "type": {
                     "text": "number"
                   }
@@ -7090,7 +7124,7 @@
                   }
                 },
                 {
-                  "name": "index",
+                  "name": "displayIndex",
                   "type": {
                     "text": "number"
                   }
@@ -7132,7 +7166,7 @@
                   }
                 },
                 {
-                  "name": "toIndex",
+                  "name": "toDisplayIndex",
                   "type": {
                     "text": "number"
                   }
@@ -7186,7 +7220,7 @@
                   }
                 },
                 {
-                  "name": "index",
+                  "name": "displayIndex",
                   "type": {
                     "text": "number"
                   }
@@ -7204,18 +7238,19 @@
               },
               "parameters": [
                 {
-                  "name": "fromIndex",
+                  "name": "fromDisplayIndex",
                   "type": {
                     "text": "number"
                   }
                 },
                 {
-                  "name": "toIndex",
+                  "name": "toDisplayIndex",
                   "type": {
                     "text": "number"
                   }
                 }
-              ]
+              ],
+              "description": "Maps display indices to this.data indices, performs the reorder\ninternally, and emits the event with the complete reordered array.\n\nWhen sorting is active the user sees a sorted view; dragging within it\nmeans \"I accept this sorted order AND want to adjust it.\"  We therefore\n**materialize** the sort into the data array before applying the drag,\nso the result matches what the user visually intended."
             },
             {
               "kind": "method",
@@ -7636,15 +7671,25 @@
                   "name": "row",
                   "type": {
                     "text": "T"
-                  }
+                  },
+                  "description": "The data item"
                 },
                 {
-                  "name": "index",
+                  "name": "displayIndex",
                   "type": {
                     "text": "number"
-                  }
+                  },
+                  "description": "0-based position in the visible (sorted/paginated) list — used for drag-and-drop"
+                },
+                {
+                  "name": "dataIndex",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "Position in the original this.data array — used for row keys, selection, and events"
                 }
-              ]
+              ],
+              "description": "Renders a single table row."
             },
             {
               "kind": "method",

package/dist/components/pd-table.cjs.js

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("lit"),l=require("lit/decorators.js"),u=require("lit/directives/repeat.js"),g=require("lit/directives/class-map.js"),b=require("lit/directives/ref.js");require("./pd-icon.cjs.js");require("./pd-checkbox.cjs.js");require("./pd-text-field.cjs.js");require("./pd-icon-button.cjs.js");require("./pd-select.cjs.js");require("./pd-menu-item.cjs.js");var m=Object.defineProperty,y=Object.getOwnPropertyDescriptor,d=(p,e,t,a)=>{for(var r=a>1?void 0:a?y(e,t):e,s=p.length-1,n;s>=0;s--)(n=p[s])&&(r=(a?n(e,t,r):n(r))||r);return a&&r&&m(e,t,r),r};exports.PdTable=class extends i.LitElement{constructor(){super(...arguments),this.columns=[],this.data=[],this.rowKey=(e,t)=>{const a=e.id;return a!=null?String(a):`__idx_${t}`},this.selectable=!1,this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageIndex=0,this.totalItems=0,this.draggableRows=!1,this.draggableColumns=!1,this.loading=!1,this.clearSelectionOnDataChange=!1,this.currencyCode="EUR",this.pageSizeOptions=[5,10,25,50,100],this._sortColumn=null,this._sortDirection="asc",this._selectedRowKeys=new Set,this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1,this._draggedColumnIndex=null,this._dragOverColumnIndex=null,this._displayDataCache=[],this._displayDataCacheKey="",this._reactRoots=new Map,this._uniqueId=Math.random().toString(36).substring(2,9)}get _isServerSidePagination(){return this.totalItems>0}get _totalCount(){return this._isServerSidePagination?this.totalItems:this.data.length}get _totalPages(){return Math.ceil(this._totalCount/this.pageSize)}get _displayData(){const e=this._computeCacheKey();if(e===this._displayDataCacheKey)return this._displayDataCache;let t=[...this.data];if(this.sortable&&this._sortColumn&&(t=this._sortData(t)),this.pagination&&!this._isServerSidePagination&&this.data.length>this.pageSize){const a=this.pageIndex*this.pageSize,r=a+this.pageSize;t=t.slice(a,r)}return this._displayDataCacheKey=e,this._displayDataCache=t,t}disconnectedCallback(){super.disconnectedCallback(),this._reactRoots.forEach(({unmount:e})=>e()),this._reactRoots.clear()}willUpdate(e){super.willUpdate(e),e.has("data")&&this.clearSelectionOnDataChange&&(this._selectedRowKeys=new Set),(e.has("data")||e.has("pageSize"))&&this.pageIndex>=this._totalPages&&this._totalPages>0&&(this.pageIndex=this._totalPages-1)}_computeCacheKey(){let e="empty";if(this.data.length>0){const t=this.rowKey(this.data[0],0),a=this.rowKey(this.data[this.data.length-1],this.data.length-1),r=this.data.length>2?this.rowKey(this.data[Math.floor(this.data.length/2)],Math.floor(this.data.length/2)):"";e=`${this.data.length}-${t}-${r}-${a}`}return`${e}|${this._sortColumn}|${this._sortDirection}|${this.pageIndex}|${this.pageSize}|${this.totalItems}`}_sortData(e){const t=this._sortColumn,a=this._sortDirection;return[...e].sort((r,s)=>{const n=r[t],o=s[t];if(n==null&&o==null)return 0;if(n==null)return a==="asc"?1:-1;if(o==null)return a==="asc"?-1:1;if(typeof n=="number"&&typeof o=="number")return a==="asc"?n-o:o-n;if(n instanceof Date&&o instanceof Date)return a==="asc"?n.getTime()-o.getTime():o.getTime()-n.getTime();const h=String(n).toLowerCase(),c=String(o).toLowerCase();return h<c?a==="asc"?-1:1:h>c?a==="asc"?1:-1:0})}_getRowKey(e,t){return this.rowKey(e,t)}_getActualDataIndex(e){return this.data.indexOf(e)}_isColumnSortable(e){return e.sortable!==void 0?e.sortable:this.sortable}_getColumnAlignment(e){return e.align?e.align:e.type==="number"||e.type==="currency"?"right":e.type==="boolean"?"center":"left"}_getColspan(){return this.columns.length+(this.selectable?1:0)+(this.draggableRows?1:0)}_handleSort(e){if(!this._isColumnSortable(e))return;const t=this._sortColumn===e.id&&this._sortDirection==="asc"?"desc":"asc";this._sortColumn=e.id,this._sortDirection=t,this.dispatchEvent(new CustomEvent("pd-table-sort",{detail:{columnId:e.id,direction:t},bubbles:!0,composed:!0}))}_handleHeaderKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._handleSort(t))}_handleSelectAll(e){const t=e.target,a=new Set;t.checked&&this.data.forEach((r,s)=>{a.add(this._getRowKey(r,s))}),this._selectedRowKeys=a,this._emitSelectionChange()}_handleSelectRow(e,t,a){const r=this._getRowKey(e,t),s=new Set(this._selectedRowKeys);a?s.add(r):s.delete(r),this._selectedRowKeys=s,this._emitSelectionChange()}_emitSelectionChange(){const e=this.data.filter((t,a)=>this._selectedRowKeys.has(this._getRowKey(t,a)));this.dispatchEvent(new CustomEvent("pd-table-selection-change",{detail:{selectedKeys:Array.from(this._selectedRowKeys),selectedRows:e},bubbles:!0,composed:!0}))}_handleRowClick(e,t){this.dispatchEvent(new CustomEvent("pd-table-row-click",{detail:{row:e,index:t},bubbles:!0,composed:!0}))}_handleCellChange(e,t,a,r){const s=r.target,n=e[a.id];let o=s.value;if(a.type==="number"||a.type==="currency"){const h=parseFloat(s.value);o=isNaN(h)?null:h}this.dispatchEvent(new CustomEvent("pd-table-cell-change",{detail:{row:e,rowIndex:t,columnId:a.id,value:o,previousValue:n},bubbles:!0,composed:!0}))}_onDragStart(e,t){if(!this.draggableRows||!this._isDragHandleGrabbed){e.preventDefault();return}this._draggedRowIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",String(t))),requestAnimationFrame(()=>{e.target.classList.add("dragging")})}_onDragOver(e,t){!this.draggableRows||this._draggedRowIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverRowIndex!==t&&(this._dragOverRowIndex=t))}_onDragEnd(e){this._resetDragState(),e.target.classList.remove("dragging")}_onDrop(e,t){if(e.preventDefault(),!this.draggableRows||this._draggedRowIndex===null)return;const a=this._draggedRowIndex;a!==t&&(this._sortColumn=null,this._sortDirection="asc",this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:a,toIndex:t,item:this.data[a]},bubbles:!0,composed:!0}))),this._resetDragState()}_resetDragState(){this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1}_handleDragHandleMouseDown(){this._isDragHandleGrabbed=!0}_handleDragHandleMouseUp(){this._isDragHandleGrabbed=!1}_handleDragHandleKeyDown(e,t){e.key==="ArrowUp"&&t>0?(e.preventDefault(),this._emitReorder(t,t-1)):e.key==="ArrowDown"&&t<this.data.length-1&&(e.preventDefault(),this._emitReorder(t,t+1))}_emitReorder(e,t){this._sortColumn=null,this._sortDirection="asc",this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:e,toIndex:t,item:this.data[e]},bubbles:!0,composed:!0}))}_onColumnDragStart(e,t){if(!this.draggableColumns){e.preventDefault();return}this._draggedColumnIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",`column:${t}`)),requestAnimationFrame(()=>{e.target.classList.add("column-dragging")})}_onColumnDragOver(e,t){!this.draggableColumns||this._draggedColumnIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverColumnIndex!==t&&(this._dragOverColumnIndex=t))}_onColumnDragEnd(e){this._resetColumnDragState(),e.target.classList.remove("column-dragging")}_onColumnDrop(e,t){if(e.preventDefault(),!this.draggableColumns||this._draggedColumnIndex===null)return;const a=this._draggedColumnIndex;a!==t&&this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:a,toIndex:t,column:this.columns[a]},bubbles:!0,composed:!0})),this._resetColumnDragState()}_resetColumnDragState(){this._draggedColumnIndex=null,this._dragOverColumnIndex=null}_handleColumnHeaderKeyDown(e,t){this.draggableColumns&&(e.key==="ArrowLeft"&&t>0?(e.preventDefault(),this._emitColumnReorder(t,t-1)):e.key==="ArrowRight"&&t<this.columns.length-1&&(e.preventDefault(),this._emitColumnReorder(t,t+1)))}_emitColumnReorder(e,t){this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:e,toIndex:t,column:this.columns[e]},bubbles:!0,composed:!0}))}_handlePageChange(e){e<0||e>=this._totalPages||(this.pageIndex=e,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:e,pageSize:this.pageSize},bubbles:!0,composed:!0})))}_handlePageSizeChange(e){const t=parseInt(e.detail.value,10);this.pageSize=t,this.pageIndex=0,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:0,pageSize:t},bubbles:!0,composed:!0}))}_renderHeader(){const e=this.data.length>0&&this._selectedRowKeys.size===this.data.length,t=this._selectedRowKeys.size>0&&this._selectedRowKeys.size<this.data.length;return i.html`
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("lit"),d=require("lit/decorators.js"),_=require("lit/directives/repeat.js"),g=require("lit/directives/class-map.js"),y=require("lit/directives/ref.js");require("./pd-icon.cjs.js");require("./pd-checkbox.cjs.js");require("./pd-text-field.cjs.js");require("./pd-icon-button.cjs.js");require("./pd-select.cjs.js");require("./pd-menu-item.cjs.js");var f=Object.defineProperty,w=Object.getOwnPropertyDescriptor,c=(p,e,t,a)=>{for(var r=a>1?void 0:a?w(e,t):e,o=p.length-1,s;o>=0;o--)(s=p[o])&&(r=(a?s(e,t,r):s(r))||r);return a&&r&&f(e,t,r),r};exports.PdTable=class extends i.LitElement{constructor(){super(...arguments),this.columns=[],this.data=[],this.rowKey=(e,t)=>{const a=e.id;return a!=null?String(a):`__idx_${t}`},this.selectable=!1,this.sortable=!1,this.pagination=!1,this.pageSize=10,this.pageIndex=0,this.totalItems=0,this.draggableRows=!1,this.draggableColumns=!1,this.loading=!1,this.clearSelectionOnDataChange=!1,this.currencyCode="EUR",this.pageSizeOptions=[5,10,25,50,100],this._sortColumn=null,this._sortDirection="asc",this._selectedRowKeys=new Set,this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1,this._draggedColumnIndex=null,this._dragOverColumnIndex=null,this._flipPositions=new Map,this._flipPending=!1,this._displayDataCache=[],this._displayDataCacheKey="",this._displayToDataIndexMap=new Map,this._reactRoots=new Map,this._dataRevision=0,this._uniqueId=Math.random().toString(36).substring(2,9)}get _isServerSidePagination(){return this.totalItems>0}get _totalCount(){return this._isServerSidePagination?this.totalItems:this.data.length}get _totalPages(){return Math.ceil(this._totalCount/this.pageSize)}get _displayData(){const e=this._computeCacheKey();if(e===this._displayDataCacheKey)return this._displayDataCache;let t=[...this.data];if(this.sortable&&this._sortColumn&&(t=this._sortData(t)),this.pagination&&!this._isServerSidePagination&&this.data.length>this.pageSize){const a=this.pageIndex*this.pageSize,r=a+this.pageSize;t=t.slice(a,r)}this._displayDataCacheKey=e,this._displayDataCache=t,this._displayToDataIndexMap=new Map;for(let a=0;a<t.length;a++)this._displayToDataIndexMap.set(t[a],this.data.indexOf(t[a]));return t}disconnectedCallback(){super.disconnectedCallback(),this._reactRoots.forEach(({unmount:e})=>e()),this._reactRoots.clear()}willUpdate(e){super.willUpdate(e),e.has("data")&&this._dataRevision++,e.has("data")&&this.clearSelectionOnDataChange&&(this._selectedRowKeys=new Set),(e.has("data")||e.has("pageSize"))&&this.pageIndex>=this._totalPages&&this._totalPages>0&&(this.pageIndex=this._totalPages-1)}updated(e){super.updated(e),this._flipPending&&(this._flipPending=!1,this._playFlipAnimation())}_captureRowPositions(){this._flipPositions.clear();const e=this.shadowRoot?.querySelector("tbody");if(!e)return;const t=e.querySelectorAll('tr[role="row"]'),a=this._displayData;t.forEach((r,o)=>{const s=a[o];if(!s)return;const l=this._displayToDataIndexMap.get(s)??this.data.indexOf(s),n=this._getRowKey(s,l);this._flipPositions.set(n,r.getBoundingClientRect().top)})}_playFlipAnimation(){const e=this.shadowRoot?.querySelector("tbody");if(!e||this._flipPositions.size===0)return;const t=e.querySelectorAll('tr[role="row"]'),a=this._displayData;t.forEach((r,o)=>{const s=a[o];if(!s)return;const l=this._displayToDataIndexMap.get(s)??this.data.indexOf(s),n=this._getRowKey(s,l),h=this._flipPositions.get(n);if(h===void 0)return;const m=r.getBoundingClientRect().top,u=h-m;Math.abs(u)<1||(r.style.transform=`translateY(${u}px)`,r.style.transition="none",requestAnimationFrame(()=>{r.style.transition="transform 200ms cubic-bezier(0.2, 0, 0, 1)",r.style.transform="";const b=()=>{r.style.transition="",r.removeEventListener("transitionend",b)};r.addEventListener("transitionend",b,{once:!0})}))}),this._flipPositions.clear()}_computeCacheKey(){return`${this._dataRevision}|${this._sortColumn}|${this._sortDirection}|${this.pageIndex}|${this.pageSize}|${this.totalItems}`}_sortData(e){const t=this._sortColumn,a=this._sortDirection;return[...e].sort((r,o)=>{const s=r[t],l=o[t];if(s==null&&l==null)return 0;if(s==null)return a==="asc"?1:-1;if(l==null)return a==="asc"?-1:1;if(typeof s=="number"&&typeof l=="number")return a==="asc"?s-l:l-s;if(s instanceof Date&&l instanceof Date)return a==="asc"?s.getTime()-l.getTime():l.getTime()-s.getTime();const n=String(s).toLowerCase(),h=String(l).toLowerCase();return n<h?a==="asc"?-1:1:n>h?a==="asc"?1:-1:0})}_getRowKey(e,t){return this.rowKey(e,t)}_isColumnSortable(e){return e.sortable!==void 0?e.sortable:this.sortable}_getColumnAlignment(e){return e.align?e.align:e.type==="number"||e.type==="currency"?"right":e.type==="boolean"?"center":"left"}_getColspan(){return this.columns.length+(this.selectable?1:0)+(this.draggableRows?1:0)}_handleSort(e){if(!this._isColumnSortable(e))return;const t=this._sortColumn===e.id&&this._sortDirection==="asc"?"desc":"asc";this._sortColumn=e.id,this._sortDirection=t,this.dispatchEvent(new CustomEvent("pd-table-sort",{detail:{columnId:e.id,direction:t},bubbles:!0,composed:!0}))}_handleHeaderKeyDown(e,t){(e.key==="Enter"||e.key===" ")&&(e.preventDefault(),this._handleSort(t))}_handleSelectAll(e){const t=e.target,a=new Set;t.checked&&this.data.forEach((r,o)=>{a.add(this._getRowKey(r,o))}),this._selectedRowKeys=a,this._emitSelectionChange()}_handleSelectRow(e,t,a){const r=this._getRowKey(e,t),o=new Set(this._selectedRowKeys);a?o.add(r):o.delete(r),this._selectedRowKeys=o,this._emitSelectionChange()}_emitSelectionChange(){const e=this.data.filter((t,a)=>this._selectedRowKeys.has(this._getRowKey(t,a)));this.dispatchEvent(new CustomEvent("pd-table-selection-change",{detail:{selectedKeys:Array.from(this._selectedRowKeys),selectedRows:e},bubbles:!0,composed:!0}))}_handleRowClick(e,t){this.dispatchEvent(new CustomEvent("pd-table-row-click",{detail:{row:e,index:t},bubbles:!0,composed:!0}))}_handleCellChange(e,t,a,r){const o=r.target,s=e[a.id];let l=o.value;if(a.type==="number"||a.type==="currency"){const n=parseFloat(o.value);l=isNaN(n)?null:n}this.dispatchEvent(new CustomEvent("pd-table-cell-change",{detail:{row:e,rowIndex:t,columnId:a.id,value:l,previousValue:s},bubbles:!0,composed:!0}))}_onDragStart(e,t){if(!this.draggableRows||!this._isDragHandleGrabbed){e.preventDefault();return}this._draggedRowIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",String(t))),requestAnimationFrame(()=>{(e.target.closest?.("tr")??e.target).classList.add("dragging")})}_onDragOver(e,t){!this.draggableRows||this._draggedRowIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverRowIndex!==t&&(this._dragOverRowIndex=t))}_onDragEnd(e){this._resetDragState(),(e.target.closest?.("tr")??e.target).classList.remove("dragging")}_onDrop(e,t){if(e.preventDefault(),!this.draggableRows||this._draggedRowIndex===null)return;const a=this._draggedRowIndex;a!==t&&this._emitReorder(a,t),this._resetDragState()}_resetDragState(){this._draggedRowIndex=null,this._dragOverRowIndex=null,this._isDragHandleGrabbed=!1}_handleDragHandleMouseDown(){this._isDragHandleGrabbed=!0}_handleDragHandleMouseUp(){this._isDragHandleGrabbed=!1}_handleDragHandleKeyDown(e,t){const a=this._displayData;e.key==="ArrowUp"&&t>0?(e.preventDefault(),this._emitReorder(t,t-1)):e.key==="ArrowDown"&&t<a.length-1&&(e.preventDefault(),this._emitReorder(t,t+1))}_emitReorder(e,t){const a=this._displayData,r=a[e],o=a[t];if(!r||!o)return;this._captureRowPositions(),this._flipPending=!0,this._sortColumn&&(this.data=this._sortData([...this.data])),this._sortColumn=null,this._sortDirection="asc";const s=this.data.indexOf(r),l=this.data.indexOf(o);if(s===-1||l===-1)return;const n=[...this.data],[h]=n.splice(s,1);n.splice(l,0,h),this.data=n,this.dispatchEvent(new CustomEvent("pd-table-row-reorder",{detail:{fromIndex:s,toIndex:l,item:r,data:n},bubbles:!0,composed:!0}))}_onColumnDragStart(e,t){if(!this.draggableColumns){e.preventDefault();return}this._draggedColumnIndex=t,e.dataTransfer&&(e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",`column:${t}`)),requestAnimationFrame(()=>{e.target.classList.add("column-dragging")})}_onColumnDragOver(e,t){!this.draggableColumns||this._draggedColumnIndex===null||(e.preventDefault(),e.dataTransfer&&(e.dataTransfer.dropEffect="move"),this._dragOverColumnIndex!==t&&(this._dragOverColumnIndex=t))}_onColumnDragEnd(e){this._resetColumnDragState(),e.target.classList.remove("column-dragging")}_onColumnDrop(e,t){if(e.preventDefault(),!this.draggableColumns||this._draggedColumnIndex===null)return;const a=this._draggedColumnIndex;a!==t&&this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:a,toIndex:t,column:this.columns[a]},bubbles:!0,composed:!0})),this._resetColumnDragState()}_resetColumnDragState(){this._draggedColumnIndex=null,this._dragOverColumnIndex=null}_handleColumnHeaderKeyDown(e,t){this.draggableColumns&&(e.key==="ArrowLeft"&&t>0?(e.preventDefault(),this._emitColumnReorder(t,t-1)):e.key==="ArrowRight"&&t<this.columns.length-1&&(e.preventDefault(),this._emitColumnReorder(t,t+1)))}_emitColumnReorder(e,t){this.dispatchEvent(new CustomEvent("pd-table-column-reorder",{detail:{fromIndex:e,toIndex:t,column:this.columns[e]},bubbles:!0,composed:!0}))}_handlePageChange(e){e<0||e>=this._totalPages||(this.pageIndex=e,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:e,pageSize:this.pageSize},bubbles:!0,composed:!0})))}_handlePageSizeChange(e){const t=parseInt(e.detail.value,10);this.pageSize=t,this.pageIndex=0,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:0,pageSize:t},bubbles:!0,composed:!0}))}_renderHeader(){const e=this.data.length>0&&this._selectedRowKeys.size===this.data.length,t=this._selectedRowKeys.size>0&&this._selectedRowKeys.size<this.data.length;return i.html`
       <thead>
         <tr role="row">
           ${this.draggableRows?i.html`
@@ -21,20 +21,20 @@
           ${this.columns.map((a,r)=>this._renderHeaderCell(a,r))}
         </tr>
       </thead>
-    `}_renderHeaderCell(e,t){const a=this._isColumnSortable(e),r=this._getColumnAlignment(e),s=this._sortColumn===e.id,n=this._draggedColumnIndex===t,o=this._dragOverColumnIndex===t&&!n,h=s?this._sortDirection==="asc"?"ascending":"descending":"none";return i.html`
+    `}_renderHeaderCell(e,t){const a=this._isColumnSortable(e),r=this._getColumnAlignment(e),o=this._sortColumn===e.id,s=this._draggedColumnIndex===t,l=this._dragOverColumnIndex===t&&!s,n=o?this._sortDirection==="asc"?"ascending":"descending":"none";return i.html`
       <th
         role="columnheader"
-        class=${g.classMap({sortable:a,sorted:s,[`align-${r}`]:!0,"column-draggable":this.draggableColumns,"column-dragging":n,"column-drag-over":o})}
+        class=${g.classMap({sortable:a,sorted:o,[`align-${r}`]:!0,"column-draggable":this.draggableColumns,"column-dragging":s,"column-drag-over":l})}
         style=${e.width?`width: ${e.width};`:""}${e.minWidth?` min-width: ${e.minWidth};`:""}
-        aria-sort=${a?h:i.nothing}
+        aria-sort=${a?n:i.nothing}
         tabindex=${a||this.draggableColumns?"0":i.nothing}
         draggable=${this.draggableColumns?"true":"false"}
         @click=${()=>this._handleSort(e)}
-        @keydown=${c=>{this._handleHeaderKeyDown(c,e),this._handleColumnHeaderKeyDown(c,t)}}
-        @dragstart=${c=>this._onColumnDragStart(c,t)}
-        @dragover=${c=>this._onColumnDragOver(c,t)}
-        @drop=${c=>this._onColumnDrop(c,t)}
-        @dragend=${c=>this._onColumnDragEnd(c)}
+        @keydown=${h=>{this._handleHeaderKeyDown(h,e),this._handleColumnHeaderKeyDown(h,t)}}
+        @dragstart=${h=>this._onColumnDragStart(h,t)}
+        @dragover=${h=>this._onColumnDragOver(h,t)}
+        @drop=${h=>this._onColumnDrop(h,t)}
+        @dragend=${h=>this._onColumnDragEnd(h)}
       >
         <div class=${g.classMap({"header-content":!0,[`align-${r}`]:!0})}>
           ${this.draggableColumns?i.html`
@@ -48,7 +48,7 @@
           <span class="header-text">${e.header}</span>
           ${a?i.html`
             <pd-icon
-              class=${g.classMap({"sort-icon":!0,"sort-icon-visible":s,"sort-icon-desc":s&&this._sortDirection==="desc"})}
+              class=${g.classMap({"sort-icon":!0,"sort-icon-visible":o,"sort-icon-desc":o&&this._sortDirection==="desc"})}
               name="arrow_upward"
               size="small"
               aria-hidden="true"
@@ -56,13 +56,13 @@
           `:i.nothing}
         </div>
       </th>
-    `}_renderCell(e,t,a){if(a.cellTemplate){const s=a.cellTemplate(e,t);if(this._isReactElement(s)){const n=`${this.rowKey(e,t)}-${a.id}`;return this._renderReactCellContent(s,n)}return s}const r=e[a.id];if(a.editable)return this._renderEditableCell(e,t,a,r);switch(a.type){case"currency":return this._formatCurrency(r,a.currencyCode);case"number":return this._formatNumber(r);case"date":return this._formatDate(r);case"boolean":return this._renderBoolean(r);default:return r!=null?String(r):""}}_renderEditableCell(e,t,a,r){const s=a.type==="number"||a.type==="currency"?"number":"text";return i.html`
+    `}_renderCell(e,t,a){if(a.cellTemplate){const o=a.cellTemplate(e,t);if(this._isReactElement(o)){const s=`${this.rowKey(e,t)}-${a.id}`;return this._renderReactCellContent(o,s)}return o}const r=e[a.id];if(a.editable)return this._renderEditableCell(e,t,a,r);switch(a.type){case"currency":return this._formatCurrency(r,a.currencyCode);case"number":return this._formatNumber(r);case"date":return this._formatDate(r);case"boolean":return this._renderBoolean(r);default:return r!=null?String(r):""}}_renderEditableCell(e,t,a,r){const o=a.type==="number"||a.type==="currency"?"number":"text";return i.html`
       <pd-text-field
-        type=${s}
+        type=${o}
         .value=${r!=null?String(r):""}
         aria-label="${a.header}"
-        @change=${n=>this._handleCellChange(e,t,a,n)}
-        @click=${n=>n.stopPropagation()}
+        @change=${s=>this._handleCellChange(e,t,a,s)}
+        @click=${s=>s.stopPropagation()}
         style="width: 100%;"
       ></pd-text-field>
     `}_formatCurrency(e,t){const a=Number(e);if(e==null||isNaN(a))return String(e??"");const r=t||this.currencyCode;try{return a.toLocaleString(this.locale,{style:"currency",currency:r})}catch{return a.toLocaleString(this.locale)}}_formatNumber(e){const t=Number(e);return e==null||isNaN(t)?String(e??""):t.toLocaleString(this.locale)}_formatDate(e){if(e==null)return"";const t=e instanceof Date?e:new Date(String(e));return isNaN(t.getTime())?String(e):t.toLocaleDateString(this.locale)}_renderBoolean(e){const t=!!e;return i.html`
@@ -72,17 +72,17 @@
         aria-label=${t?"Yes":"No"}
         class=${g.classMap({"boolean-true":t,"boolean-false":!t})}
       ></pd-icon>
-    `}_isReactElement(e){return typeof e=="object"&&e!==null&&"$$typeof"in e}_renderReactCellContent(e,t){return i.html`<span style="display:contents" ${b.ref(a=>{if(!a){this._reactRoots.get(t)?.unmount(),this._reactRoots.delete(t);return}const r=this._reactRoots.get(t);if(r){r.render(e);return}Promise.resolve().then(()=>require("../client-CjTRT4wy.cjs")).then(s=>s.client).then(({createRoot:s})=>{if(this._reactRoots.has(t))this._reactRoots.get(t).render(e);else{const n=s(a);n.render(e),this._reactRoots.set(t,{render:o=>n.render(o),unmount:()=>n.unmount()})}})})}></span>`}_renderRow(e,t){const a=this._getRowKey(e,t),r=this._selectedRowKeys.has(a),s=this._draggedRowIndex===t,n=this._dragOverRowIndex===t&&!s;return i.html`
+    `}_isReactElement(e){return typeof e=="object"&&e!==null&&"$$typeof"in e}_renderReactCellContent(e,t){return i.html`<span style="display:contents" ${y.ref(a=>{if(!a){this._reactRoots.get(t)?.unmount(),this._reactRoots.delete(t);return}const r=this._reactRoots.get(t);if(r){r.render(e);return}Promise.resolve().then(()=>require("../client-CjTRT4wy.cjs")).then(o=>o.client).then(({createRoot:o})=>{if(this._reactRoots.has(t))this._reactRoots.get(t).render(e);else{const s=o(a);s.render(e),this._reactRoots.set(t,{render:l=>s.render(l),unmount:()=>s.unmount()})}})})}></span>`}_renderRow(e,t,a){const r=this._getRowKey(e,a),o=this._selectedRowKeys.has(r),s=this._draggedRowIndex===t,l=this._dragOverRowIndex===t&&!s;return i.html`
       <tr
         role="row"
-        class=${g.classMap({selected:r,draggable:this.draggableRows,dragging:s,"drag-over":n})}
-        aria-selected=${this.selectable?String(r):i.nothing}
+        class=${g.classMap({selected:o,draggable:this.draggableRows,dragging:s,"drag-over":l})}
+        aria-selected=${this.selectable?String(o):i.nothing}
         draggable=${this.draggableRows?"true":"false"}
-        @dragstart=${o=>this._onDragStart(o,t)}
-        @dragover=${o=>this._onDragOver(o,t)}
-        @drop=${o=>this._onDrop(o,t)}
-        @dragend=${o=>this._onDragEnd(o)}
-        @click=${()=>this._handleRowClick(e,t)}
+        @dragstart=${n=>this._onDragStart(n,t)}
+        @dragover=${n=>this._onDragOver(n,t)}
+        @drop=${n=>this._onDrop(n,t)}
+        @dragend=${n=>this._onDragEnd(n)}
+        @click=${()=>this._handleRowClick(e,a)}
       >
         ${this.draggableRows?i.html`
           <td class="drag-handle-cell" role="cell">
@@ -95,7 +95,7 @@
               aria-label="Drag to reorder row. Use arrow keys to move up or down."
               @mousedown=${this._handleDragHandleMouseDown}
               @mouseup=${this._handleDragHandleMouseUp}
-              @keydown=${o=>this._handleDragHandleKeyDown(o,t)}
+              @keydown=${n=>this._handleDragHandleKeyDown(n,t)}
             ></pd-icon>
           </td>
         `:i.nothing}
@@ -104,19 +104,19 @@
           <td class="checkbox-cell" role="cell">
             <pd-checkbox
               aria-label="Select row"
-              ?checked=${r}
-              @change=${o=>{const h=o.target;this._handleSelectRow(e,t,h.checked)}}
-              @click=${o=>o.stopPropagation()}
+              ?checked=${o}
+              @change=${n=>{const h=n.target;this._handleSelectRow(e,a,h.checked)}}
+              @click=${n=>n.stopPropagation()}
             ></pd-checkbox>
           </td>
         `:i.nothing}
 
-        ${this.columns.map(o=>i.html`
+        ${this.columns.map(n=>i.html`
           <td
             role="cell"
-            class=${g.classMap({[`align-${this._getColumnAlignment(o)}`]:!0,editable:!!o.editable})}
+            class=${g.classMap({[`align-${this._getColumnAlignment(n)}`]:!0,editable:!!n.editable})}
           >
-            ${this._renderCell(e,t,o)}
+            ${this._renderCell(e,a,n)}
           </td>
         `)}
       </tr>
@@ -141,7 +141,7 @@
           </slot>
         </td>
       </tr>
-    `}_renderPagination(){if(!this.pagination)return i.nothing;const e=this._totalCount,t=e===0?0:this.pageIndex*this.pageSize+1,a=Math.min((this.pageIndex+1)*this.pageSize,e),r=this.pageIndex===0,s=this.pageIndex>=this._totalPages-1||e===0;return i.html`
+    `}_renderPagination(){if(!this.pagination)return i.nothing;const e=this._totalCount,t=e===0?0:this.pageIndex*this.pageSize+1,a=Math.min((this.pageIndex+1)*this.pageSize,e),r=this.pageIndex===0,o=this.pageIndex>=this._totalPages-1||e===0;return i.html`
       <nav class="pagination">
         <div class="items-per-page">
           <label id="page-size-label-${this._uniqueId}">Items per page:</label>
@@ -150,7 +150,7 @@
               variant="filled"
               aria-labelledby="page-size-label-${this._uniqueId}"
               .value=${this.pageSize.toString()}
-              .options=${this.pageSizeOptions.map(n=>({value:String(n),label:String(n)}))}
+              .options=${this.pageSizeOptions.map(s=>({value:String(s),label:String(s)}))}
               @change=${this._handlePageSizeChange}
             ></pd-select>
           </div>
@@ -177,13 +177,13 @@
           <pd-icon-button
             icon="chevron_right"
             aria-label="Next page"
-            ?disabled=${s}
+            ?disabled=${o}
             @click=${()=>this._handlePageChange(this.pageIndex+1)}
           ></pd-icon-button>
           <pd-icon-button
             icon="last_page"
             aria-label="Last page"
-            ?disabled=${s}
+            ?disabled=${o}
             @click=${()=>this._handlePageChange(this._totalPages-1)}
           ></pd-icon-button>
         </div>
@@ -201,7 +201,7 @@
             <tbody>
               ${this.loading?this._renderLoadingState():i.nothing}
               ${t?this._renderEmptyState():i.nothing}
-              ${this.loading?i.nothing:u.repeat(e,a=>{const r=this._getActualDataIndex(a);return this._getRowKey(a,r)},a=>{const r=this._getActualDataIndex(a);return this._renderRow(a,r)})}
+              ${this.loading?i.nothing:_.repeat(e,a=>{const r=this._displayToDataIndexMap.get(a)??this.data.indexOf(a);return this._getRowKey(a,r)},(a,r)=>{const o=this._displayToDataIndexMap.get(a)??this.data.indexOf(a);return this._renderRow(a,r,o)})}
             </tbody>
           </table>
         </div>
@@ -367,7 +367,8 @@
     }
 
     tr.dragging {
-      opacity: 0.5;
+      opacity: 0.4;
+      z-index: 1;
     }
 
     tr.dragging td {
@@ -378,6 +379,11 @@
       box-shadow: inset 0 2px 0 0 var(--md-sys-color-primary);
     }
 
+    /* Rows use will-change during FLIP animation for GPU acceleration */
+    tr[role="row"] {
+      will-change: auto;
+    }
+
     /* Column Drag States */
     th.column-draggable {
       cursor: grab;
@@ -554,4 +560,4 @@
         justify-content: space-between;
       }
     }
-  `;d([l.property({type:Array})],exports.PdTable.prototype,"columns",2);d([l.property({type:Array})],exports.PdTable.prototype,"data",2);d([l.property({attribute:!1})],exports.PdTable.prototype,"rowKey",2);d([l.property({type:Boolean})],exports.PdTable.prototype,"selectable",2);d([l.property({type:Boolean})],exports.PdTable.prototype,"sortable",2);d([l.property({type:Boolean})],exports.PdTable.prototype,"pagination",2);d([l.property({type:Number})],exports.PdTable.prototype,"pageSize",2);d([l.property({type:Number})],exports.PdTable.prototype,"pageIndex",2);d([l.property({type:Number})],exports.PdTable.prototype,"totalItems",2);d([l.property({type:Boolean,attribute:"draggable-rows"})],exports.PdTable.prototype,"draggableRows",2);d([l.property({type:Boolean,attribute:"draggable-columns"})],exports.PdTable.prototype,"draggableColumns",2);d([l.property({type:Boolean})],exports.PdTable.prototype,"loading",2);d([l.property({type:Boolean,attribute:"clear-selection-on-data-change"})],exports.PdTable.prototype,"clearSelectionOnDataChange",2);d([l.property({type:String,attribute:"currency-code"})],exports.PdTable.prototype,"currencyCode",2);d([l.property({type:String})],exports.PdTable.prototype,"locale",2);d([l.property({type:Array,attribute:"page-size-options"})],exports.PdTable.prototype,"pageSizeOptions",2);d([l.state()],exports.PdTable.prototype,"_sortColumn",2);d([l.state()],exports.PdTable.prototype,"_sortDirection",2);d([l.state()],exports.PdTable.prototype,"_selectedRowKeys",2);d([l.state()],exports.PdTable.prototype,"_draggedRowIndex",2);d([l.state()],exports.PdTable.prototype,"_dragOverRowIndex",2);d([l.state()],exports.PdTable.prototype,"_isDragHandleGrabbed",2);d([l.state()],exports.PdTable.prototype,"_draggedColumnIndex",2);d([l.state()],exports.PdTable.prototype,"_dragOverColumnIndex",2);exports.PdTable=d([l.customElement("pd-table")],exports.PdTable);
+  `;c([d.property({type:Array})],exports.PdTable.prototype,"columns",2);c([d.property({type:Array})],exports.PdTable.prototype,"data",2);c([d.property({attribute:!1})],exports.PdTable.prototype,"rowKey",2);c([d.property({type:Boolean})],exports.PdTable.prototype,"selectable",2);c([d.property({type:Boolean})],exports.PdTable.prototype,"sortable",2);c([d.property({type:Boolean})],exports.PdTable.prototype,"pagination",2);c([d.property({type:Number})],exports.PdTable.prototype,"pageSize",2);c([d.property({type:Number})],exports.PdTable.prototype,"pageIndex",2);c([d.property({type:Number})],exports.PdTable.prototype,"totalItems",2);c([d.property({type:Boolean,attribute:"draggable-rows"})],exports.PdTable.prototype,"draggableRows",2);c([d.property({type:Boolean,attribute:"draggable-columns"})],exports.PdTable.prototype,"draggableColumns",2);c([d.property({type:Boolean})],exports.PdTable.prototype,"loading",2);c([d.property({type:Boolean,attribute:"clear-selection-on-data-change"})],exports.PdTable.prototype,"clearSelectionOnDataChange",2);c([d.property({type:String,attribute:"currency-code"})],exports.PdTable.prototype,"currencyCode",2);c([d.property({type:String})],exports.PdTable.prototype,"locale",2);c([d.property({type:Array,attribute:"page-size-options"})],exports.PdTable.prototype,"pageSizeOptions",2);c([d.state()],exports.PdTable.prototype,"_sortColumn",2);c([d.state()],exports.PdTable.prototype,"_sortDirection",2);c([d.state()],exports.PdTable.prototype,"_selectedRowKeys",2);c([d.state()],exports.PdTable.prototype,"_draggedRowIndex",2);c([d.state()],exports.PdTable.prototype,"_dragOverRowIndex",2);c([d.state()],exports.PdTable.prototype,"_isDragHandleGrabbed",2);c([d.state()],exports.PdTable.prototype,"_draggedColumnIndex",2);c([d.state()],exports.PdTable.prototype,"_dragOverColumnIndex",2);exports.PdTable=c([d.customElement("pd-table")],exports.PdTable);