@pine-ds/core 5.0.0-mercury.0 → 5.0.0

package/dist/cjs/pds-table-head-cell.cjs.entry.js

@@ -1,47 +1,219 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var index$1 = require('./index-BDnbr0DK.js');
+var closest = require('./closest-D0qyYtJ3.js');
+var scroll = require('./scroll-2XcoE_6Q.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-const index$1 = require('./index-de3f0730.js');
-
-const pdsTableHeadCellCss = ":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);--color-background-fixed:var(--pine-color-white);--color-sorting:var(--pine-color-charcoal-500);--color-text-default:var(--pine-color-charcoal-200);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-087);--font-weight-cell-default:var(--pine-font-weight-normal);--line-height-cell-default:var(--pine-line-height-125);--padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-margin-inline-start-arrow:var(--pine-spacing-050);--spacing-padding-arrow:calc(var(--pine-spacing-050) / 2);--spacing-padding-block-compact:var(--pine-spacing-050);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--color-text-default);display:table-cell;font-size:var(--font-size-head-cell);font-style:normal;font-weight:var(--font-weight-cell-default);line-height:var(--line-height-cell-default);padding:var(--padding-cell-default);text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-block-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
-const PdsTableHeadCellStyle0 = pdsTableHeadCellCss;
+const pdsTableHeadCellCss = () => `:host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-sm);position:relative;text-align:start;vertical-align:inherit}:host(.has-width){-webkit-box-sizing:border-box;box-sizing:border-box;min-width:var(--pds-table-head-cell-width);width:var(--pds-table-head-cell-width)}:host(.has-auto-width){-webkit-box-sizing:border-box;box-sizing:border-box;width:var(--pds-table-head-cell-auto-floor-width, auto)}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(.is-fixed.has-head-background){background-color:var(--pine-color-background-subtle)}:host(.has-head-border){-webkit-border-before:var(--border-head-cell-default);border-block-start:var(--border-head-cell-default)}:host-context([dir=rtl]){--box-shadow-default:-3px 3px 6px -2px rgba(0, 0, 0, 0.1)}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-strong)}:host(.pds-table-head-cell--align-start){text-align:start}:host(.pds-table-head-cell--align-center){text-align:center}:host(.pds-table-head-cell--align-end){text-align:end}:host(.pds-table-head-cell--align-justify){text-align:justify}`;
 
 const PdsTableHeadCell = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pdsTableSort = index.createEvent(this, "pdsTableSort", 7);
+        this.pdsTableSort = index.createEvent(this, "pdsTableSort");
+        this.scrollContainer = null;
+        this.setupRetries = 0;
+        this.hasLoaded = false;
+        /**
+         * The direction of sorting.
+         */
+        this.sortingDirection = 'asc';
+        /**
+         * Determines if the table is currently scrolling.
+         * @defaultValue false
+         */
+        this.tableScrolling = false;
+        /**
+         * Determines if the table row is currently selected.
+         * @defaultValue false
+         */
+        this.isSelected = false;
+        /**
+         * Determines if the parent table-head has the border attribute.
+         * @defaultValue false
+         */
+        this.hasHeadBorder = false;
+        /**
+         * Determines if the parent table-head has the background attribute.
+         * @defaultValue false
+         */
+        this.hasHeadBackground = false;
+        /**
+         * Determines if this column is the currently active sorted column.
+         * @defaultValue false
+         */
+        this.isActive = false;
+        /**
+         * Handles scroll events to update fixed column shadow state.
+         * Updates the tableScrolling state to control CSS classes for fixed column shadows.
+         * @private
+         */
         this.handleScroll = () => {
-            if (this.tableRef.scrollLeft > 0) {
-                this.tableScrolling = true;
+            if (!this.scrollContainer) {
+                return;
+            }
+            try {
+                this.tableScrolling = scroll.isScrolledFromInlineStart(this.scrollContainer);
             }
-            else {
-                this.tableScrolling = false;
+            catch (error) {
+                console.warn('Scroll handler error:', error);
             }
         };
         this.toggleSort = () => {
             if (this.sortable) {
+                // Guard: return early if tableRef is not available
+                if (!this.tableRef) {
+                    return;
+                }
                 const column = this.hostElement.innerText.trim();
+                // Always toggle the direction (preserves original behavior)
                 this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';
-                this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {
-                    headCell.classList.remove('is-active');
+                // Reset all OTHER head cells to inactive state (skip the current one)
+                this.tableRef.querySelectorAll('pds-table-head-cell').forEach(async (headCell) => {
+                    // Skip clearing the current cell
+                    if (headCell !== this.hostElement) {
+                        const headCellComponent = headCell;
+                        await headCellComponent.clearActiveSort();
+                    }
                 });
-                this.hostElement.classList.toggle('is-active');
+                // Mark this column as active
+                this.isActive = true;
+                this.hostElement.classList.add('is-active');
+                // Emit the sort event with the current direction
                 this.pdsTableSort.emit({ column, direction: this.sortingDirection });
             }
         };
-        this.sortable = undefined;
-        this.sortingDirection = 'asc';
-        this.tableScrolling = false;
-        this.isSelected = false;
     }
-    componentWillRender() {
-        this.tableRef = this.hostElement.closest('pds-table');
+    /**
+     * Programmatically sets this column as the active sort column with the specified direction.
+     * Used by pds-table to apply a default sort on initial load.
+     * @param direction - The sort direction to apply ('asc' or 'desc')
+     */
+    async setActiveSort(direction) {
+        if (!this.sortable)
+            return;
+        this.sortingDirection = direction;
+        this.isActive = true;
+        this.hostElement.classList.add('is-active');
+    }
+    /**
+     * Clears the active sort state from this column.
+     * Used internally when another column becomes active.
+     */
+    async clearActiveSort() {
+        this.isActive = false;
+        this.hostElement.classList.remove('is-active');
+    }
+    componentWillLoad() {
+        // Set initial references and state before first render. The shadow-crossing `closest`
+        // util, not the native one -- the select-all cell lives inside pds-table-head's own shadow
+        // root, which native `closest` can't see past.
+        this.tableRef = closest.closest('pds-table', this.hostElement);
+        const tableHead = closest.closest('pds-table-head', this.hostElement);
+        if (tableHead) {
+            this.hasHeadBorder = tableHead.hasAttribute('border');
+            this.hasHeadBackground = tableHead.hasAttribute('background');
+        }
+    }
+    // Fires again each time the cell is moved (such as a reparent or DOM morph), unlike
+    // componentDidLoad, so it re-binds what disconnectedCallback tore down.
+    connectedCallback() {
+        if (!this.hasLoaded)
+            return;
+        this.tableRef = closest.closest('pds-table', this.hostElement);
+        if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
+            this.setupScrollListener();
+        }
+        this.setupHeadObserver();
     }
     componentDidLoad() {
+        this.hasLoaded = true;
+        if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
+            // For responsive tables with fixed columns, set up scroll detection
+            // This enables the first column header to show a shadow when the table is scrolled horizontally
+            this.setupScrollListener();
+        }
+        this.setupHeadObserver();
+    }
+    // Watches the parent table-head's border and background attributes.
+    setupHeadObserver() {
+        const tableHead = closest.closest('pds-table-head', this.hostElement);
+        if (tableHead && typeof MutationObserver !== 'undefined') {
+            // Defensive guard: disconnect existing observer before creating a new one
+            if (this.headObserver) {
+                this.headObserver.disconnect();
+            }
+            this.headObserver = new MutationObserver(() => {
+                // Update state when border or background attributes change
+                this.hasHeadBorder = tableHead.hasAttribute('border');
+                this.hasHeadBackground = tableHead.hasAttribute('background');
+            });
+            this.headObserver.observe(tableHead, {
+                attributes: true,
+                attributeFilter: ['border', 'background']
+            });
+        }
+    }
+    disconnectedCallback() {
+        this.cleanupScrollListener();
+        if (this.headObserver) {
+            this.headObserver.disconnect();
+        }
+    }
+    setupScrollListener() {
+        var _a;
+        if (!this.tableRef)
+            return;
+        // Query shadowRoot once and cache the container
+        const container = (_a = this.tableRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-table-responsive-container');
+        if (container) {
+            // Container available immediately
+            this.scrollContainer = container;
+            this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
+            this.handleScroll(); // Initial check
+            this.setupRetries = 0; // Reset counter on success
+        }
+        else {
+            // Container not ready, set up timer for retry with bounds
+            this.setupTimer = window.setTimeout(() => {
+                if (this.scrollContainer)
+                    return; // Already found
+                this.setupRetries = (this.setupRetries || 0) + 1;
+                if (this.setupRetries <= 50) {
+                    this.setupScrollListener();
+                }
+                else {
+                    console.warn('Failed to find responsive container after 50 attempts');
+                }
+            }, 100);
+        }
+    }
+    cleanupScrollListener() {
+        if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+            this.scrollContainer = null;
+        }
+        if (this.setupTimer !== undefined) {
+            window.clearTimeout(this.setupTimer);
+            this.setupTimer = undefined;
+        }
+        this.setupRetries = 0; // Reset retry counter
+        // Without a listener there's no way to know the scroll position any more, so the shadow
+        // this drove shouldn't linger -- matters when a rebind tears this down without setting it
+        // back up (responsive turned off while scrolled), not just on disconnect.
+        this.tableScrolling = false;
+    }
+    /**
+     * Re-binds the scroll listener to the table's current responsive container. Called by
+     * `pds-table` after a live `responsive` toggle: the cell stays in light DOM across that
+     * change, so it never reconnects on its own and would otherwise keep listening to a container
+     * the table already replaced or removed.
+     */
+    async rebindScrollListener() {
+        this.cleanupScrollListener();
         if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
-            this.tableRef.addEventListener('scroll', this.handleScroll);
+            this.setupScrollListener();
         }
     }
     classNames() {
@@ -49,6 +221,9 @@ const PdsTableHeadCell = class {
         if (this.tableRef && this.tableRef.compact) {
             classNames.push('is-compact');
         }
+        if (this.cellAlign) {
+            classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);
+        }
         if (this.sortable) {
             classNames.push('is-sortable');
         }
@@ -58,19 +233,36 @@ const PdsTableHeadCell = class {
         if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {
             classNames.push('has-scrolled');
         }
-        return classNames.join('  ');
+        if (this.hasHeadBackground) {
+            classNames.push('has-head-background');
+        }
+        if (this.hasHeadBorder) {
+            classNames.push('has-head-border');
+        }
+        if (this.width) {
+            classNames.push('has-width');
+        }
+        else if (this.tableRef && this.tableRef.tableLayout === 'fixed') {
+            classNames.push('has-auto-width');
+        }
+        return classNames.join(' ');
+    }
+    hostStyles() {
+        const styles = {};
+        if (this.tableRef && this.tableRef.fixedColumn && this.tableRef.selectable) {
+            styles['--fixed-cell-position'] = '40px';
+        }
+        // Hand the width to the stylesheet as a custom property rather than an inline width.
+        if (this.width) {
+            styles['--pds-table-head-cell-width'] = this.width;
+        }
+        return styles;
     }
     render() {
-        return (index.h(index.Host, { key: '72e242a22774d4b534b7a8653673606e0e9c6ef1', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
-                this.tableRef.fixedColumn &&
-                this.tableRef.selectable
-                ? { '--fixed-cell-position': '40px' }
-                : {} }, index.h("slot", { key: '08e1d5aab1761ed097e2669716884196c946bcc3' }), this.sortable && (index.h("pds-icon", { key: '43421a2b1401426878601468acee702ce45404bf', icon: this.sortingDirection === 'asc' ? index$1.upSmall : index$1.downSmall }))));
+        return (index.h(index.Host, { key: '353a05a4026064d05a4b924bec3fa2f17f1902ce', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.hostStyles() }, index.h("slot", { key: '51ead68fc052805d60bbfc6e626f6aedcc5671fc' }), this.sortable && this.isActive && (index.h("pds-icon", { key: '9a5c27232f06a15dc8329c329f01b08cb6d836b8', icon: this.sortingDirection === 'asc' ? index$1.upSmall : index$1.downSmall, part: "sort-icon", "aria-hidden": "true" }))));
     }
     get hostElement() { return index.getElement(this); }
 };
-PdsTableHeadCell.style = PdsTableHeadCellStyle0;
+PdsTableHeadCell.style = pdsTableHeadCellCss();
 
 exports.pds_table_head_cell = PdsTableHeadCell;
-
-//# sourceMappingURL=pds-table-head-cell.cjs.entry.js.map

package/dist/cjs/pds-table-head.cjs.entry.js

@@ -1,17 +1,25 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var closest = require('./closest-D0qyYtJ3.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-const closest = require('./closest-b45138d3.js');
-
-const pdsTableHeadCss = ":host{--border-head-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--color-background-fixed:var(--pine-color-base-white);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--color-background-fixed);left:0;position:-webkit-sticky;position:sticky;z-index:1}:host pds-table-checkbox-cell{-webkit-border-after:var(--border-head-default);border-block-end:var(--border-head-default)}";
-const PdsTableHeadStyle0 = pdsTableHeadCss;
+const pdsTableHeadCss = () => `:host{--border-head-default:var(--pine-border-width-thin) solid var(--pine-color-background-subtle);border-color:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table-header-group;vertical-align:middle}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host pds-table-checkbox-cell{-webkit-border-after:var(--border-head-default);border-block-end:var(--border-head-default)}:host([border]){-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-webkit-border-before:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-start:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host([border]) pds-table-head-cell{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);-webkit-border-before:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-start:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host([background]){background-color:var(--pine-color-background-subtle)}:host([background]) pds-table-head-cell{background-color:var(--pine-color-background-subtle)}`;
 
 const PdsTableHead = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pdsTableSelectAll = index.createEvent(this, "pdsTableSelectAll", 7);
+        this.pdsTableSelectAll = index.createEvent(this, "pdsTableSelectAll");
+        /**
+         * Adds top and bottom borders to the table head.
+         * @defaultValue false
+         */
+        this.border = false;
+        /**
+         * Adds a subtle background color to the table head.
+         * @defaultValue false
+         */
+        this.background = false;
         this.generateUniqueId = () => {
             const randomString = Math.random().toString(36).substring(2, 8);
             const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
@@ -28,8 +36,6 @@ const PdsTableHead = class {
                 this.pdsTableSelectAll.emit({ isSelected });
             }
         };
-        this.indeterminate = undefined;
-        this.isSelected = undefined;
     }
     componentWillLoad() {
         if (this.isSelected) {
@@ -44,12 +50,10 @@ const PdsTableHead = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '7729235908073cae63294e4ad641bae0403e2c34', role: "row" }, this.tableRef && this.tableRef.selectable && (index.h("pds-table-head-cell", { key: '2bb801124a3f8d1c9f18d03d1461953da4cdafc6', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, index.h("pds-checkbox", { key: '2119be5b2db13a44add35fa9c9fc761a68a2b060', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", labelHidden: true, checked: this.isSelected }))), index.h("slot", { key: 'baa5b3af10a77e1a8aff537c3c731fbc59a54ca8' })));
+        return (index.h(index.Host, { key: 'ba81f3a9655b49cf01311c697a8aae3e69de0e81', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (index.h("pds-table-head-cell", { key: '4f182b3053469afbaff81c4918bf66376fc7ade4', part: this.tableRef.selectable ? 'checkbox-cell' : '', width: this.tableRef.tableLayout === 'fixed' ? 'var(--pine-dimension-2xl)' : undefined }, !this.tableRef.disableSelectAll && (index.h("pds-checkbox", { key: 'b26c7e8c26b3cc837f180431dc53a17ae0d84f1f', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), index.h("slot", { key: 'e9eef43af95340fcce2d9f2f60800d897ee423f1' })));
     }
     get hostElement() { return index.getElement(this); }
 };
-PdsTableHead.style = PdsTableHeadStyle0;
+PdsTableHead.style = pdsTableHeadCss();
 
 exports.pds_table_head = PdsTableHead;
-
-//# sourceMappingURL=pds-table-head.cjs.entry.js.map

package/dist/cjs/pds-table-row.cjs.entry.js

@@ -1,19 +1,29 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var closest = require('./closest-D0qyYtJ3.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-const closest = require('./closest-b45138d3.js');
-
-const pdsTableRowCss = ":host{--color-background-fixed:var(--pine-color-white);--color-background-interactive:var(--pine-color-grey-200);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--color-background-fixed);left:0;position:-webkit-sticky;position:sticky;z-index:1}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}";
-const PdsTableRowStyle0 = pdsTableRowCss;
+const pdsTableRowCss = () => `:host{--color-background-interactive:var(--pine-color-background-subtle);border-color:inherit;display:table-row;vertical-align:inherit}:host::part(checkbox-cell){background-color:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(:hover),:host(:hover)::part(checkbox-cell),:host(:hover) ::slotted(pds-table-cell),:host(.is-selected),:host(.is-selected)::part(checkbox-cell),:host(.is-selected) ::slotted(pds-table-cell){background:var(--color-background-interactive)}:host(.has-divider) ::slotted(pds-table-cell),:host(.has-divider) pds-table-cell{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border-subtle)}:host(.has-divider.is-last-row) ::slotted(pds-table-cell),:host(.has-divider.is-last-row) pds-table-cell{-webkit-border-after:0;border-block-end:0}`;
 
 const PdsTableRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pdsTableRowSelected = index.createEvent(this, "pdsTableRowSelected", 7);
-        this.handleClick = () => {
-            this.isSelected = !this.isSelected; // Toggle the selected state
+        this.pdsTableRowSelected = index.createEvent(this, "pdsTableRowSelected");
+        this.observer = null;
+        this.bodyObserver = null;
+        /**
+         * Determines if the row should have a divider border.
+         * @defaultValue false
+         */
+        this.hasDivider = false;
+        /**
+         * Determines if this is the last row in the table body.
+         * @defaultValue false
+         */
+        this.isLastRow = false;
+        this.handleCheckboxChange = (event) => {
+            this.isSelected = event.detail.checked;
             this.handleSelect(this.isSelected);
         };
         this.handleSelect = (isSelected) => {
@@ -32,17 +42,23 @@ const PdsTableRow = class {
             const uniqueId = `${randomString}-${timestamp}`;
             return uniqueId;
         };
-        this.indeterminate = undefined;
-        this.isSelected = undefined;
     }
     classNames() {
         const classNames = [];
         if (this.isSelected) {
             classNames.push("is-selected");
         }
-        return classNames.join('  ');
+        if (this.hasDivider) {
+            classNames.push("has-divider");
+        }
+        if (this.isLastRow) {
+            classNames.push("is-last-row");
+        }
+        return classNames.join(' ');
     }
     componentWillRender() {
+        // Always refresh tableRef to get latest prop values
+        // This ensures we pick up changes to parent table props
         this.tableRef = this.hostElement.closest('pds-table');
         if (this.tableRef && this.tableRef.fixedColumn) {
             const tableCell = this.hostElement.querySelector('pds-table-cell');
@@ -50,17 +66,89 @@ const PdsTableRow = class {
         }
     }
     componentWillLoad() {
+        // Handle initial selection state
         if (this.isSelected) {
             this.handleSelect(this.isSelected);
         }
+        // Note: tableRef, observers, and divider state are set up in connectedCallback
+        // which runs before componentWillLoad and also handles row re-attachment after sorting
+    }
+    connectedCallback() {
+        // When a row is re-attached to the DOM (e.g., after sorting),
+        // we need to re-setup the observers since disconnectedCallback cleared them
+        // Note: componentDidLoad only fires once, but connectedCallback fires every time
+        // the element is attached to the DOM (including after being moved)
+        this.tableRef = this.hostElement.closest('pds-table');
+        this.setupObservers();
+        this.updateDividerState();
+    }
+    disconnectedCallback() {
+        this.cleanupObservers();
+    }
+    cleanupObservers() {
+        if (this.observer) {
+            this.observer.disconnect();
+            this.observer = null;
+        }
+        if (this.bodyObserver) {
+            this.bodyObserver.disconnect();
+            this.bodyObserver = null;
+        }
+    }
+    setupObservers() {
+        // Clean up any existing observers first
+        this.cleanupObservers();
+        // Watch for changes to the parent table's row-dividers attribute
+        if (this.tableRef && typeof MutationObserver !== 'undefined') {
+            this.observer = new MutationObserver(() => {
+                this.updateDividerState();
+            });
+            this.observer.observe(this.tableRef, {
+                attributes: true,
+                attributeFilter: ['row-dividers']
+            });
+        }
+        // Watch for child list changes in table body (e.g., when rows are reordered during sorting)
+        const tableBody = this.hostElement.closest('pds-table-body');
+        if (tableBody && typeof MutationObserver !== 'undefined') {
+            this.bodyObserver = new MutationObserver(() => {
+                this.updateLastRowState();
+            });
+            this.bodyObserver.observe(tableBody, {
+                childList: true
+            });
+        }
+    }
+    shouldHaveDivider() {
+        if (!this.tableRef) {
+            this.tableRef = this.hostElement.closest('pds-table');
+        }
+        // Reads the parent pds-table component's rowDividers property value directly
+        return !!(this.tableRef && this.tableRef.rowDividers);
+    }
+    updateDividerState() {
+        this.hasDivider = this.shouldHaveDivider();
+        this.updateLastRowState();
+    }
+    updateLastRowState() {
+        if (!this.hasDivider) {
+            this.isLastRow = false;
+            return;
+        }
+        const tableBody = this.hostElement.closest('pds-table-body');
+        if (tableBody) {
+            const rows = Array.from(tableBody.querySelectorAll('pds-table-row'));
+            this.isLastRow = rows[rows.length - 1] === this.hostElement;
+        }
+        else {
+            this.isLastRow = false;
+        }
     }
     render() {
-        return (index.h(index.Host, { key: 'dbfba35e818a96281f5df7e51e60f0bbaf4d5527', class: this.classNames(), role: "row" }, this.tableRef && this.tableRef.selectable && (index.h("pds-table-cell", { key: 'a0d9118e63db0829f4352875cbacf76c11978fff', part: this.tableRef.fixedColumn ? 'checkbox-cell' : '', class: this.tableRef.selectable ? 'has-checkbox' : '' }, index.h("pds-checkbox", { key: '60ebde7bb2e745af55e3713b952f963d50396485', componentId: this.generateUniqueId(), onClick: this.handleClick, indeterminate: this.indeterminate, label: "Select Row", labelHidden: true, checked: this.isSelected }))), index.h("slot", { key: '97f90a8d36781f3b278f83b16c778d5e2b6e9bce' })));
+        return (index.h(index.Host, { key: '3bf8a5bf5f0ccb4a933a756d3ba52aaa2e35d4f0', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (index.h("pds-table-cell", { key: '5dfb53c4c7c550abbe445753828aa5a40cf53a7f', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, index.h("pds-checkbox", { key: 'a53b603e4e9a09705263341ecacd3b77d96fd75f', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), index.h("slot", { key: '4ae4007c867694a25b2ca0df6d69635bc0fa7cd0' })));
     }
     get hostElement() { return index.getElement(this); }
 };
-PdsTableRow.style = PdsTableRowStyle0;
+PdsTableRow.style = pdsTableRowCss();
 
 exports.pds_table_row = PdsTableRow;
-
-//# sourceMappingURL=pds-table-row.cjs.entry.js.map