@prioticket/design-system-web 1.2.0 → 1.3.0-beta.2

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

@@ -0,0 +1,559 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("lit"),l=require("lit/decorators.js"),u=require("lit/directives/repeat.js"),g=require("lit/directives/class-map.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 b=Object.defineProperty,m=Object.getOwnPropertyDescriptor,d=(p,e,t,a)=>{for(var r=a>1?void 0:a?m(e,t):e,n=p.length-1,i;n>=0;n--)(i=p[n])&&(r=(a?i(e,t,r):i(r))||r);return a&&r&&b(e,t,r),r};exports.PdTable=class extends o.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._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}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,n)=>{const i=r[t],s=n[t];if(i==null&&s==null)return 0;if(i==null)return a==="asc"?1:-1;if(s==null)return a==="asc"?-1:1;if(typeof i=="number"&&typeof s=="number")return a==="asc"?i-s:s-i;if(i instanceof Date&&s instanceof Date)return a==="asc"?i.getTime()-s.getTime():s.getTime()-i.getTime();const h=String(i).toLowerCase(),c=String(s).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,n)=>{a.add(this._getRowKey(r,n))}),this._selectedRowKeys=a,this._emitSelectionChange()}_handleSelectRow(e,t,a){const r=this._getRowKey(e,t),n=new Set(this._selectedRowKeys);a?n.add(r):n.delete(r),this._selectedRowKeys=n,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 n=r.target,i=e[a.id];let s=n.value;if(a.type==="number"||a.type==="currency"){const h=parseFloat(n.value);s=isNaN(h)?null:h}this.dispatchEvent(new CustomEvent("pd-table-cell-change",{detail:{row:e,rowIndex:t,columnId:a.id,value:s,previousValue:i},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=e.target,a=parseInt(t.value,10);this.pageSize=a,this.pageIndex=0,this.dispatchEvent(new CustomEvent("pd-table-page-change",{detail:{pageIndex:0,pageSize:a},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 o.html`
+      <thead>
+        <tr role="row">
+          ${this.draggableRows?o.html`
+            <th class="drag-handle-header" role="columnheader" aria-label="Reorder">
+              <span class="visually-hidden">Reorder</span>
+            </th>
+          `:o.nothing}
+
+          ${this.selectable?o.html`
+            <th class="checkbox-cell" role="columnheader">
+              <pd-checkbox
+                aria-label="Select all rows"
+                ?checked=${e}
+                ?indeterminate=${t}
+                @change=${this._handleSelectAll}
+              ></pd-checkbox>
+            </th>
+          `:o.nothing}
+
+          ${this.columns.map((a,r)=>this._renderHeaderCell(a,r))}
+        </tr>
+      </thead>
+    `}_renderHeaderCell(e,t){const a=this._isColumnSortable(e),r=this._getColumnAlignment(e),n=this._sortColumn===e.id,i=this._draggedColumnIndex===t,s=this._dragOverColumnIndex===t&&!i,h=n?this._sortDirection==="asc"?"ascending":"descending":"none";return o.html`
+      <th
+        role="columnheader"
+        class=${g.classMap({sortable:a,sorted:n,[`align-${r}`]:!0,"column-draggable":this.draggableColumns,"column-dragging":i,"column-drag-over":s})}
+        style=${e.width?`width: ${e.width};`:""}${e.minWidth?` min-width: ${e.minWidth};`:""}
+        aria-sort=${a?h:o.nothing}
+        tabindex=${a||this.draggableColumns?"0":o.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)}
+      >
+        <div class=${g.classMap({"header-content":!0,[`align-${r}`]:!0})}>
+          ${this.draggableColumns?o.html`
+            <pd-icon
+              class="column-drag-handle"
+              name="drag_indicator"
+              size="small"
+              aria-hidden="true"
+            ></pd-icon>
+          `:o.nothing}
+          <span class="header-text">${e.header}</span>
+          ${a?o.html`
+            <pd-icon
+              class=${g.classMap({"sort-icon":!0,"sort-icon-visible":n,"sort-icon-desc":n&&this._sortDirection==="desc"})}
+              name="arrow_upward"
+              size="small"
+              aria-hidden="true"
+            ></pd-icon>
+          `:o.nothing}
+        </div>
+      </th>
+    `}_renderCell(e,t,a){if(a.cellTemplate)return a.cellTemplate(e,t);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 n=a.type==="number"||a.type==="currency"?"number":"text";return o.html`
+      <pd-text-field
+        type=${n}
+        .value=${r!=null?String(r):""}
+        aria-label="${a.header}"
+        @change=${i=>this._handleCellChange(e,t,a,i)}
+        @click=${i=>i.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 o.html`
+      <pd-icon
+        name=${t?"check":"close"}
+        size="small"
+        aria-label=${t?"Yes":"No"}
+        class=${g.classMap({"boolean-true":t,"boolean-false":!t})}
+      ></pd-icon>
+    `}_renderRow(e,t){const a=this._getRowKey(e,t),r=this._selectedRowKeys.has(a),n=this._draggedRowIndex===t,i=this._dragOverRowIndex===t&&!n;return o.html`
+      <tr
+        role="row"
+        class=${g.classMap({selected:r,draggable:this.draggableRows,dragging:n,"drag-over":i})}
+        aria-selected=${this.selectable?String(r):o.nothing}
+        draggable=${this.draggableRows?"true":"false"}
+        @dragstart=${s=>this._onDragStart(s,t)}
+        @dragover=${s=>this._onDragOver(s,t)}
+        @drop=${s=>this._onDrop(s,t)}
+        @dragend=${s=>this._onDragEnd(s)}
+        @click=${()=>this._handleRowClick(e,t)}
+      >
+        ${this.draggableRows?o.html`
+          <td class="drag-handle-cell" role="cell">
+            <pd-icon
+              name="drag_indicator"
+              size="small"
+              class="drag-handle"
+              tabindex="0"
+              role="button"
+              aria-label="Drag to reorder row. Use arrow keys to move up or down."
+              @mousedown=${this._handleDragHandleMouseDown}
+              @mouseup=${this._handleDragHandleMouseUp}
+              @keydown=${s=>this._handleDragHandleKeyDown(s,t)}
+            ></pd-icon>
+          </td>
+        `:o.nothing}
+
+        ${this.selectable?o.html`
+          <td class="checkbox-cell" role="cell">
+            <pd-checkbox
+              aria-label="Select row"
+              ?checked=${r}
+              @change=${s=>{const h=s.target;this._handleSelectRow(e,t,h.checked)}}
+              @click=${s=>s.stopPropagation()}
+            ></pd-checkbox>
+          </td>
+        `:o.nothing}
+
+        ${this.columns.map(s=>o.html`
+          <td
+            role="cell"
+            class=${g.classMap({[`align-${this._getColumnAlignment(s)}`]:!0,editable:!!s.editable})}
+          >
+            ${this._renderCell(e,t,s)}
+          </td>
+        `)}
+      </tr>
+    `}_renderEmptyState(){return o.html`
+      <tr class="state-row">
+        <td colspan=${this._getColspan()} class="no-data">
+          <slot name="no-data">
+            <div class="empty-state">
+              <pd-icon name="inbox" size="large" aria-hidden="true"></pd-icon>
+              <span>No data available</span>
+            </div>
+          </slot>
+        </td>
+      </tr>
+    `}_renderLoadingState(){return o.html`
+      <tr class="state-row">
+        <td colspan=${this._getColspan()} class="loading-cell">
+          <slot name="loading">
+            <div class="loading-state">
+              <span>Loading...</span>
+            </div>
+          </slot>
+        </td>
+      </tr>
+    `}_renderPagination(){if(!this.pagination)return o.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,n=this.pageIndex>=this._totalPages-1||e===0;return o.html`
+      <nav class="pagination" aria-label="Table pagination">
+        <div class="pagination-info" aria-live="polite" aria-atomic="true">
+          <span class="pagination-range">${t}–${a}</span>
+          <span class="pagination-total">of ${e}</span>
+        </div>
+
+        <div class="pagination-controls" role="group" aria-label="Pagination controls">
+          <pd-icon-button
+            icon="first_page"
+            aria-label="First page"
+            ?disabled=${r}
+            @click=${()=>this._handlePageChange(0)}
+          ></pd-icon-button>
+          <pd-icon-button
+            icon="chevron_left"
+            aria-label="Previous page"
+            ?disabled=${r}
+            @click=${()=>this._handlePageChange(this.pageIndex-1)}
+          ></pd-icon-button>
+          <pd-icon-button
+            icon="chevron_right"
+            aria-label="Next page"
+            ?disabled=${n}
+            @click=${()=>this._handlePageChange(this.pageIndex+1)}
+          ></pd-icon-button>
+          <pd-icon-button
+            icon="last_page"
+            aria-label="Last page"
+            ?disabled=${n}
+            @click=${()=>this._handlePageChange(this._totalPages-1)}
+          ></pd-icon-button>
+        </div>
+
+        <div class="items-per-page">
+          <label id="page-size-label-${this._uniqueId}">Items per page:</label>
+          <pd-select
+            aria-labelledby="page-size-label-${this._uniqueId}"
+            .value=${this.pageSize.toString()}
+            @change=${this._handlePageSizeChange}
+          >
+            ${this.pageSizeOptions.map(i=>o.html`
+              <pd-menu-item value=${String(i)}>${i}</pd-menu-item>
+            `)}
+          </pd-select>
+        </div>
+      </nav>
+    `}render(){const e=this._displayData,t=e.length===0&&!this.loading;return o.html`
+      <div class="table-wrapper">
+        <div class="table-container">
+          <table
+            role="grid"
+            aria-busy=${this.loading?"true":"false"}
+            aria-rowcount=${this._totalCount}
+          >
+            ${this._renderHeader()}
+            <tbody>
+              ${this.loading?this._renderLoadingState():o.nothing}
+              ${t?this._renderEmptyState():o.nothing}
+              ${this.loading?o.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)})}
+            </tbody>
+          </table>
+        </div>
+        ${this._renderPagination()}
+      </div>
+    `}clearSelection(){this._selectedRowKeys=new Set,this._emitSelectionChange()}selectByKeys(e){this._selectedRowKeys=new Set(e.map(t=>String(t))),this._emitSelectionChange()}selectAll(){const e=this.data.map((t,a)=>this._getRowKey(t,a));this._selectedRowKeys=new Set(e),this._emitSelectionChange()}getSelectedRows(){return this.data.filter((e,t)=>this._selectedRowKeys.has(this._getRowKey(e,t)))}getSelectedKeys(){return Array.from(this._selectedRowKeys)}clearSort(){this._sortColumn=null,this._sortDirection="asc"}setSort(e,t="asc"){this._sortColumn=e,this._sortDirection=t}goToPage(e){this._handlePageChange(e)}invalidateCache(){this._displayDataCacheKey=""}};exports.PdTable.styles=o.css`
+    :host {
+      display: block;
+
+      /* Customizable CSS custom properties */
+      --pd-table-header-bg: var(--md-sys-color-surface);
+      --pd-table-header-hover-bg: var(--md-sys-color-surface-container-highest);
+      --pd-table-row-bg: var(--md-sys-color-surface);
+      --pd-table-row-hover-bg: var(--md-sys-color-surface-container-low);
+      --pd-table-row-selected-bg: var(--md-sys-color-secondary-container);
+      --pd-table-row-selected-color: var(--md-sys-color-on-secondary-container);
+      --pd-table-border-color: var(--md-sys-color-outline-variant);
+      --pd-table-cell-padding: 12px 16px;
+      --pd-table-row-height: 52px;
+      --pd-table-header-height: 56px;
+
+      font-family: var(--md-sys-typescale-body-medium-font, inherit);
+    }
+
+    /* Visually hidden but accessible */
+    .visually-hidden {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+    }
+
+    /* Container */
+    .table-container {
+      width: 100%;
+      overflow-x: auto;
+      border: 1px solid var(--pd-table-border-color);
+      border-radius: var(--md-sys-shape-corner-medium, 12px);
+      background: var(--pd-table-row-bg);
+    }
+
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      border-spacing: 0;
+    }
+
+    /* Header Styles */
+    th {
+      background-color: var(--pd-table-header-bg);
+      color: var(--md-sys-color-on-surface);
+      font-weight: var(--md-sys-typescale-label-large-weight, 500);
+      font-size: var(--md-sys-typescale-label-large-size, 14px);
+      text-align: left;
+      padding: var(--pd-table-cell-padding);
+      white-space: nowrap;
+      user-select: none;
+      border-bottom: 1px solid var(--pd-table-border-color);
+      height: var(--pd-table-header-height);
+      box-sizing: border-box;
+      position: relative;
+    }
+
+    th.sortable {
+      cursor: pointer;
+      transition: background-color 0.15s ease;
+    }
+
+    th.sortable:hover {
+      background-color: var(--pd-table-header-hover-bg);
+    }
+
+    th.sortable:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: -2px;
+      border-radius: 4px;
+    }
+
+    .header-content {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      min-height: 20px;
+    }
+
+    .header-content.align-right {
+      float: right;
+    }
+
+    .header-content.align-center {
+      justify-content: center;
+      width: 100%;
+    }
+
+    .header-content.align-left {
+      justify-content: flex-start;
+    }
+
+    .header-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    /* Sort Icon */
+    .sort-icon {
+      opacity: 0;
+      transition: opacity 0.15s ease, transform 0.2s ease;
+      transform: rotate(0deg);
+      flex-shrink: 0;
+    }
+
+    th.sortable:hover .sort-icon {
+      opacity: 0.4;
+    }
+
+    .sort-icon-visible {
+      opacity: 1 !important;
+    }
+
+    .sort-icon-desc {
+      transform: rotate(180deg);
+    }
+
+    /* Cell Styles */
+    td {
+      padding: var(--pd-table-cell-padding);
+      color: var(--md-sys-color-on-surface);
+      font-size: var(--md-sys-typescale-body-medium-size, 14px);
+      border-bottom: none;
+      background: var(--pd-table-row-bg);
+      height: var(--pd-table-row-height);
+      box-sizing: border-box;
+      vertical-align: middle;
+    }
+
+    /* Row States */
+    tbody tr {
+      transition: background-color 0.1s ease;
+    }
+
+    tbody tr:not(.state-row):hover td {
+      background-color: var(--pd-table-row-hover-bg);
+    }
+
+    tr.selected td {
+      background-color: var(--pd-table-row-selected-bg);
+      color: var(--pd-table-row-selected-color);
+    }
+
+    tr.selected:hover td {
+      background-color: var(--pd-table-row-selected-bg);
+      filter: brightness(0.97);
+    }
+
+    /* Row Drag States */
+    tr.draggable {
+      cursor: default;
+    }
+
+    tr.dragging {
+      opacity: 0.5;
+    }
+
+    tr.dragging td {
+      background: var(--md-sys-color-surface-container-high);
+    }
+
+    tr.drag-over td {
+      box-shadow: inset 0 2px 0 0 var(--md-sys-color-primary);
+    }
+
+    /* Column Drag States */
+    th.column-draggable {
+      cursor: grab;
+      user-select: none;
+    }
+
+    th.column-draggable:active {
+      cursor: grabbing;
+    }
+
+    th.column-dragging {
+      opacity: 0.5;
+      background: var(--md-sys-color-surface-container-high) !important;
+    }
+
+    th.column-drag-over {
+      box-shadow: inset 2px 0 0 0 var(--md-sys-color-primary);
+    }
+
+    .column-drag-handle {
+      color: var(--md-sys-color-on-surface-variant);
+      margin-right: 4px;
+      flex-shrink: 0;
+      opacity: 0.6;
+      transition: opacity 0.15s ease;
+    }
+
+    th.column-draggable:hover .column-drag-handle {
+      opacity: 1;
+    }
+
+    /* Alignment */
+    .align-left { text-align: left; }
+    .align-center { text-align: center; }
+    .align-right { text-align: right; }
+
+    /* Special Cells */
+    .checkbox-cell {
+      width: 52px;
+      padding: 0 8px;
+      text-align: center;
+    }
+
+    .drag-handle-cell {
+      width: 44px;
+      padding: 0 8px;
+      text-align: center;
+    }
+
+    .drag-handle {
+      cursor: grab;
+      color: var(--md-sys-color-on-surface-variant);
+      border-radius: 4px;
+      padding: 4px;
+    }
+
+    .drag-handle:hover {
+      background-color: var(--md-sys-color-surface-container-high);
+    }
+
+    .drag-handle:focus-visible {
+      outline: 2px solid var(--md-sys-color-primary);
+      outline-offset: 2px;
+    }
+
+    .drag-handle-header {
+      width: 44px;
+    }
+
+    /* Boolean Icons */
+    .boolean-true {
+      color: var(--md-sys-color-primary);
+    }
+
+    .boolean-false {
+      color: var(--md-sys-color-outline);
+    }
+
+    /* Empty & Loading States */
+    .no-data,
+    .loading-cell {
+      text-align: center;
+      padding: 48px 16px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .empty-state,
+    .loading-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .empty-state pd-icon {
+      color: var(--md-sys-color-outline);
+    }
+
+    /* Pagination */
+    .pagination {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      gap: 16px;
+      color: var(--md-sys-color-on-surface);
+      font-size: var(--md-sys-typescale-label-large-size, 14px);
+      border-top: 1px solid var(--pd-table-border-color);
+      flex-wrap: wrap;
+    }
+
+    .pagination-info {
+      flex: 1;
+      min-width: 100px;
+    }
+
+    .pagination-range {
+      font-weight: 500;
+    }
+
+    .pagination-total {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .pagination-controls {
+      display: flex;
+      gap: 4px;
+      flex: 1;
+      justify-content: center;
+    }
+
+    .items-per-page {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+      justify-content: flex-end;
+    }
+
+    .items-per-page label {
+      color: var(--md-sys-color-on-surface-variant);
+    }
+
+    .items-per-page pd-select {
+      min-width: 72px;
+    }
+
+    /* Editable Cell Styling */
+    td.editable {
+      padding: 4px 8px;
+    }
+
+    pd-text-field {
+      --md-filled-text-field-container-color: transparent;
+      --md-filled-text-field-active-indicator-color: transparent;
+      --md-filled-text-field-hover-active-indicator-color: var(--md-sys-color-primary);
+      --md-filled-text-field-input-text-font: inherit;
+    }
+
+    /* Responsive */
+    @media (max-width: 600px) {
+      .pagination {
+        flex-direction: column;
+        gap: 12px;
+        padding: 12px;
+      }
+
+      .pagination-info,
+      .pagination-controls,
+      .items-per-page {
+        flex: none;
+        width: 100%;
+        justify-content: center;
+      }
+
+      .items-per-page {
+        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);