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

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

@@ -1,27 +1,420 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var scroll = require('./scroll-2XcoE_6Q.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsTableCss = ":host{--color-background-default:var(--pine-color-white);background:var(--color-background-default);border-collapse:separate;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;width:100%}:host(:focus-visible){--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}:host(.is-responsive){background-attachment:local, local, scroll, scroll;background-image:-webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(var(--color-background-default)), to(var(--color-background-default))), -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0))), -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, var(--color-background-default), var(--color-background-default)), linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(255, 255, 255, 0));background-position:left center, right center, left center, right center;background-repeat:no-repeat;background-size:4px 100%, 4px 100%, 4px 100%, 4px 100%;display:block;margin:0 auto;max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;overflow-x:auto;white-space:nowrap}";
-const PdsTableStyle0 = pdsTableCss;
+const pdsTableCss = () => `@charset "UTF-8";:host{--color-background-default:var(--pine-color-background-container);background:var(--color-background-default);border-collapse:separate;border-radius:inherit;-webkit-box-sizing:border-box;box-sizing:border-box;display:table;isolation:isolate;width:100%}:host(:focus-visible){outline:var(--pine-outline-focus)}:host(.is-fixed-layout){table-layout:fixed}:host(.pds-table-responsive-host){border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;max-width:100% !important;overflow:hidden !important;position:relative !important;width:100% !important}.pds-table-responsive-container{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;overflow-x:auto !important;overflow-y:visible !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper{border-radius:inherit;-webkit-box-sizing:border-box !important;box-sizing:border-box !important;display:block !important;position:relative !important;width:100% !important}.pds-table-responsive-wrapper .pds-table{display:table !important;min-width:-webkit-max-content !important;min-width:-moz-max-content !important;min-width:max-content !important;table-layout:auto !important;white-space:nowrap !important;width:100% !important}.pds-table-responsive-wrapper .pds-table.is-fixed-layout{table-layout:fixed !important}.scroll-shadow-left,.scroll-shadow-right{height:100%;opacity:0;pointer-events:none;position:absolute;top:0;-webkit-transition:opacity 0.1s ease;transition:opacity 0.1s ease;width:4px;z-index:var(--pine-z-index)}.scroll-shadow-left{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);border-end-start-radius:inherit;border-start-start-radius:inherit;inset-inline-start:0}:host-context([dir=rtl]) .scroll-shadow-left{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent)}.scroll-shadow-right{background:-webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to left, rgba(0, 0, 0, 0.1), transparent);border-end-end-radius:inherit;border-start-end-radius:inherit;inset-inline-end:0}:host-context([dir=rtl]) .scroll-shadow-right{background:-webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.1)), to(transparent));background:linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent)}`;
 
+// A column with no width of its own, under table-layout: fixed, otherwise shares whatever's left
+// after the explicit-width columns -- which can go to nothing on a narrow viewport. Below this,
+// it keeps this floor instead and the table grows wider, scrollable under `responsive` -- the
+// only mode this applies in. Without `responsive` there's no container to measure that the floor
+// itself can't grow (the table's own width would, chasing its tail) and no way to scroll the
+// overflow it would create.
+const AUTO_COLUMN_FLOOR_WIDTH_PX = 120;
 const PdsTable = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pdsTableSelect = index.createEvent(this, "pdsTableSelect", 7);
-        this.pdsTableSelectAll = index.createEvent(this, "pdsTableSelectAll", 7);
-        this.compact = undefined;
-        this.componentId = undefined;
-        this.responsive = undefined;
-        this.fixedColumn = undefined;
-        this.selectable = undefined;
+        this.pdsTableSelectAll = index.createEvent(this, "pdsTableSelectAll");
+        this.scrollContainer = null;
+        this._responsiveHandleScroll = null;
+        this._responsiveHandleResize = null;
+        this._responsiveResizeObserver = null;
+        this._teardownResponsive = null;
+        this._fixedLayoutResizeObserver = null;
+        this._fixedLayoutHandleResize = null;
+        this._fixedLayoutMutationObserver = null;
+        this._pendingColumnWidthsRecalc = false;
+        // componentDidLoad fires once; a later connectedCallback (the table was re-parented, reordered,
+        // or moved by a DOM morph) needs this to know it's a reconnect, not the first load, so it
+        // re-attaches what disconnectedCallback tore down.
+        this.hasLoaded = false;
+        /**
+         * Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.
+         * Only applies when `selectable` is true.
+         * @defaultValue false
+         */
+        this.disableSelectAll = false;
+        /**
+         * Adds divider borders between table rows. The last row will not have a bottom border.
+         * @defaultValue false
+         */
+        this.rowDividers = false;
+        /**
+         * Sets how the table sizes its columns. With `auto`, each column is sized from its content,
+         * so columns can change width when the rows change (for example after a sort). With `fixed`,
+         * columns take the `width` set on their `pds-table-head-cell` and ignore their content;
+         * columns without a `width` share the remaining space. Under `responsive`, that remaining
+         * share keeps a 120px floor on narrow viewports where the other columns' widths already fill
+         * it, growing the table instead (scrollable) -- without `responsive` there's no floor, since
+         * there would be nothing to scroll the overflow it would create. Content longer than its
+         * column overflows, so add `truncate` to cells whose content may not fit.
+         * @defaultValue 'auto'
+         */
+        this.tableLayout = 'auto';
+        /**
+         * The direction to sort the default column on initial load.
+         * Only applies if `defaultSortColumn` is set.
+         * @defaultValue 'asc'
+         */
+        this.defaultSortDirection = 'asc';
+        /**
+         * The name of the column being sorted.
+         * @defaultValue null
+         */
         this.sortingColumn = null;
+        /**
+         * The direction of sorting.
+         * @defaultValue 'asc'
+         */
         this.sortingDirection = 'asc';
+        /**
+         * `tableLayout` or `responsive` changing at runtime is handled here, deferred to
+         * `componentDidRender` rather than done directly -- a `@Watch` runs before this component's
+         * own re-render, and both the floor's measurement and the responsive scroll setup query
+         * `.pds-table-responsive-container`, which that re-render is what creates or removes. Reading
+         * it any earlier would still see the old tree.
+         */
+        this._pendingFixedLayoutInputsSync = false;
+        /**
+         * Measures the explicit-width columns against the available space and gives the columns with
+         * no `width` of their own (which otherwise share whatever's left) a floor so none of them
+         * squeeze below `AUTO_COLUMN_FLOOR_WIDTH_PX`. Re-run on resize, since the responsive
+         * container's available width can change after load -- and only under `responsive`: that
+         * container is the one thing in this layout the floor's own growth can't also grow, which is
+         * what keeps this from measuring its own effect and oscillating.
+         * @private
+         */
+        this.recalcAutoColumnWidths = () => {
+            var _a, _b, _c, _d, _e, _f;
+            if (this.tableLayout !== 'fixed' || !this.responsive)
+                return;
+            const headCells = Array.from(this.el.querySelectorAll('pds-table-head-cell'));
+            const autoCells = [];
+            let explicitWidthPx = 0;
+            for (const cell of headCells) {
+                if (!cell.getAttribute('width')) {
+                    autoCells.push(cell);
+                    continue;
+                }
+                // Measured from layout rather than parsed from the attribute, so any CSS length -- px,
+                // rem, %, a token -- counts correctly, the same as the select-all column below.
+                explicitWidthPx += cell.getBoundingClientRect().width;
+            }
+            if (autoCells.length === 0)
+                return;
+            // A selectable table's select-all column lives in pds-table-head's shadow root, out of reach
+            // of the query above, and its width is a token rather than a px value -- so measure it.
+            if (this.selectable) {
+                const selectAllCell = (_b = (_a = this.el
+                    .querySelector('pds-table-head')) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-table-head-cell');
+                explicitWidthPx += (_c = selectAllCell === null || selectAllCell === void 0 ? void 0 : selectAllCell.getBoundingClientRect().width) !== null && _c !== void 0 ? _c : 0;
+            }
+            const measureEl = (_d = this.el.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('.pds-table-responsive-container');
+            const availableWidth = (_e = measureEl === null || measureEl === void 0 ? void 0 : measureEl.clientWidth) !== null && _e !== void 0 ? _e : 0;
+            const sharePerAutoColumn = (availableWidth - explicitWidthPx) / autoCells.length;
+            const needsFloor = sharePerAutoColumn < AUTO_COLUMN_FLOOR_WIDTH_PX;
+            autoCells.forEach((cell) => {
+                if (needsFloor) {
+                    cell.style.setProperty('--pds-table-head-cell-auto-floor-width', `${AUTO_COLUMN_FLOOR_WIDTH_PX}px`);
+                }
+                else {
+                    cell.style.removeProperty('--pds-table-head-cell-auto-floor-width');
+                }
+            });
+            // The floor can widen the table past its container on its own, with no scroll or
+            // container-resize event of its own to trigger the shadows' usual recompute -- reading
+            // `scrollWidth` just below forces the layout the style change above needs anyway.
+            (_f = this._responsiveHandleScroll) === null || _f === void 0 ? void 0 : _f.call(this);
+        };
+        // A `width` attribute change or a new head cell fires this in the same turn as that cell's
+        // own re-render, which is what applies `--pds-table-head-cell-width` -- measuring right away
+        // would still see the previous layout. Deferred one frame, by which point Stencil's own (also
+        // rAF-scheduled) write for that cell has flushed. Resize and window-resize don't need this:
+        // both fire only once layout has already settled.
+        this.scheduleColumnWidthsRecalc = () => {
+            if (this._pendingColumnWidthsRecalc)
+                return;
+            this._pendingColumnWidthsRecalc = true;
+            requestAnimationFrame(() => {
+                // A teardown in the meantime (disconnect, or the floor turning off) leaves this flag
+                // cleared but can't cancel an already-scheduled frame -- checked here so it's a no-op
+                // rather than measuring and writing styles on a table that's no longer set up for it.
+                if (!this._pendingColumnWidthsRecalc)
+                    return;
+                this._pendingColumnWidthsRecalc = false;
+                if (this.el.isConnected)
+                    this.recalcAutoColumnWidths();
+            });
+        };
     }
-    componentWillLoad() {
-        this.sortingColumn = null;
+    componentDidLoad() {
+        this.hasLoaded = true;
+        this.attachLifecycleBoundSetup();
+        // Apply default sort if specified
+        // Use requestAnimationFrame to defer until child components are fully initialized
+        if (this.defaultSortColumn) {
+            requestAnimationFrame(() => {
+                void this.applyDefaultSort().catch((err) => {
+                    console.warn('Failed to apply default sort.', err);
+                });
+            });
+        }
+    }
+    /**
+     * Applies the default sort configuration on initial load.
+     * Finds the matching column header and activates its sort state.
+     * @private
+     */
+    async applyDefaultSort() {
+        var _a;
+        // Normalize direction to handle invalid HTML attribute values
+        const direction = this.defaultSortDirection === 'desc' ? 'desc' : 'asc';
+        // Find the matching sortable header cell
+        const columnHeaderCells = Array.from(this.el.querySelectorAll('pds-table-head-cell[sortable]'));
+        const matchingCell = columnHeaderCells.find((cell) => { var _a; return ((_a = cell.textContent) !== null && _a !== void 0 ? _a : '').trim() === this.defaultSortColumn; });
+        if (matchingCell) {
+            const columnName = ((_a = matchingCell.textContent) !== null && _a !== void 0 ? _a : '').trim();
+            // Sort the table data
+            this.sortTable(columnName, direction);
+            this.sortingColumn = columnName;
+            this.sortingDirection = direction;
+            // Activate the visual state on the header cell
+            await matchingCell.setActiveSort(direction);
+        }
+        else {
+            console.warn(`Default sort column "${this.defaultSortColumn}" not found.`);
+        }
+    }
+    /**
+     * Re-attaches the responsive scroll listeners and the fixed-layout width floor after the table
+     * reconnects (it was re-parented, reordered, or moved by a DOM morph) -- `disconnectedCallback`
+     * tears both down, and neither comes back on its own.
+     */
+    connectedCallback() {
+        if (!this.hasLoaded)
+            return;
+        this.attachLifecycleBoundSetup();
+    }
+    attachLifecycleBoundSetup() {
+        if (this.responsive) {
+            this.setupResponsiveScrolling();
+        }
+        if (this.tableLayout === 'fixed' && this.responsive) {
+            this.setupFixedLayoutWidths();
+        }
+    }
+    disconnectedCallback() {
+        if (this._teardownResponsive) {
+            this._teardownResponsive();
+            this._teardownResponsive = null;
+        }
+        this.teardownFixedLayoutWidths();
+        // A disconnect in the same turn as a pending tableLayout/responsive change could be the
+        // table being moved rather than removed for good -- there's no way to tell them apart yet
+        // here, and dropping the pending sync unconditionally would lose a change that's still
+        // coming once a same-turn reconnect's own render flushes. Checked on a microtask instead, by
+        // which point a same-turn reconnect has already happened; a disconnect that sticks still
+        // won't leave anything queued to leak a listener later.
+        if (this._pendingFixedLayoutInputsSync) {
+            queueMicrotask(() => {
+                if (!this.el.isConnected)
+                    this._pendingFixedLayoutInputsSync = false;
+            });
+        }
+    }
+    handleFixedLayoutInputsChange() {
+        this._pendingFixedLayoutInputsSync = true;
+    }
+    componentDidRender() {
+        if (!this._pendingFixedLayoutInputsSync)
+            return;
+        this._pendingFixedLayoutInputsSync = false;
+        this.syncFixedLayoutInputs();
+    }
+    /**
+     * The floor only applies with `tableLayout="fixed"` and `responsive` both set, so either one
+     * changing at runtime can turn it on or off -- and `responsive` on its own also starts or stops
+     * the (separate) scroll listeners, same as it does on first load. A head cell only reads
+     * `tableLayout` during its own render, and the floor this sets lives in inline style, not a
+     * re-render -- so turning the floor off (including live, e.g. the Storybook control) needs
+     * both cleared explicitly, not just the observers torn down. The select-all column reads
+     * `tableLayout` the same way, one level up in `pds-table-head`'s own render, since it owns that
+     * cell rather than letting it through a `<slot>`. A `fixedColumn` cell's own sticky-shadow
+     * scroll listener is bound to this same container, cached on the cell itself -- it stays in
+     * light DOM across this change and never reconnects on its own, so it needs telling directly
+     * rather than finding out the container moved.
+     * @private
+     */
+    syncFixedLayoutInputs() {
+        if (this._teardownResponsive) {
+            this._teardownResponsive();
+            this._teardownResponsive = null;
+        }
+        if (this.responsive)
+            this.setupResponsiveScrolling();
+        this.teardownFixedLayoutWidths();
+        const floorActive = this.tableLayout === 'fixed' && this.responsive;
+        if (floorActive)
+            this.setupFixedLayoutWidths();
+        this.allHeadCells().forEach((cell) => {
+            if (!floorActive)
+                cell.style.removeProperty('--pds-table-head-cell-auto-floor-width');
+            index.forceUpdate(cell);
+            void cell.rebindScrollListener();
+        });
+        this.allBodyCells().forEach((cell) => {
+            void cell.rebindScrollListener();
+        });
+        const head = this.el.querySelector('pds-table-head');
+        if (head)
+            index.forceUpdate(head);
+        // The select-all cell's `width` is applied by that `forceUpdate`, which hasn't flushed yet --
+        // the floor's own recalc above just ran against its previous (or absent) width. That cell
+        // sits in `pds-table-head`'s shadow root, out of reach of the mutation observer that would
+        // otherwise catch the change, so this needs scheduling directly rather than left to notice.
+        if (floorActive)
+            this.scheduleColumnWidthsRecalc();
+    }
+    // The select-all cell sits in `pds-table-head`'s own shadow root, and a selectable row's
+    // checkbox cell in its own, rather than coming through a `<slot>` like the rest -- a
+    // light-DOM-only `querySelectorAll` from here never reaches either one.
+    allHeadCells() {
+        var _a;
+        const slotted = Array.from(this.el.querySelectorAll('pds-table-head-cell'));
+        const head = this.el.querySelector('pds-table-head');
+        const ownCell = (_a = head === null || head === void 0 ? void 0 : head.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-table-head-cell');
+        return ownCell ? [...slotted, ownCell] : slotted;
+    }
+    allBodyCells() {
+        const slotted = Array.from(this.el.querySelectorAll('pds-table-cell'));
+        const rows = Array.from(this.el.querySelectorAll('pds-table-row'));
+        const ownCells = rows
+            .map((row) => { var _a; return (_a = row.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-table-cell'); })
+            .filter((cell) => cell !== null);
+        return [...slotted, ...ownCells];
+    }
+    setupFixedLayoutWidths() {
+        this.recalcAutoColumnWidths();
+        if (typeof window === 'undefined')
+            return;
+        this._fixedLayoutHandleResize = () => this.recalcAutoColumnWidths();
+        if (window.ResizeObserver) {
+            try {
+                this._fixedLayoutResizeObserver = new ResizeObserver(this._fixedLayoutHandleResize);
+                this._fixedLayoutResizeObserver.observe(this.el);
+            }
+            catch (error) {
+                // ResizeObserver not available in some environments (e.g., tests); window resize still covers it.
+            }
+        }
+        window.addEventListener('resize', this._fixedLayoutHandleResize);
+        // A column added, removed, or given a different `width` changes the floor calc's inputs,
+        // and none of that is a resize of anything this observes above.
+        if (typeof MutationObserver !== 'undefined') {
+            this._fixedLayoutMutationObserver = new MutationObserver(this.scheduleColumnWidthsRecalc);
+            this._fixedLayoutMutationObserver.observe(this.el, { childList: true, subtree: true, attributeFilter: ['width'] });
+        }
+    }
+    teardownFixedLayoutWidths() {
+        if (this._fixedLayoutResizeObserver) {
+            this._fixedLayoutResizeObserver.disconnect();
+            this._fixedLayoutResizeObserver = null;
+        }
+        if (this._fixedLayoutMutationObserver) {
+            this._fixedLayoutMutationObserver.disconnect();
+            this._fixedLayoutMutationObserver = null;
+        }
+        if (typeof window !== 'undefined' && this._fixedLayoutHandleResize) {
+            window.removeEventListener('resize', this._fixedLayoutHandleResize);
+        }
+        this._fixedLayoutHandleResize = null;
+        this._pendingColumnWidthsRecalc = false;
+    }
+    /**
+     * Sets up responsive scrolling behavior for the table.
+     *
+     * This method creates a horizontal scrolling system where:
+     * - The table content can scroll horizontally when it exceeds the container width
+     * - Scroll shadows appear at the inline-start/end edges to indicate scrollable content
+     * - Fixed columns remain sticky during horizontal scrolling
+     * - Shadows respect border-radius and don't appear when there's nothing to scroll
+     *
+     * Architecture:
+     * - Host element: Contains everything, respects parent constraints
+     * - Container element: Handles horizontal scrolling (overflow-x: auto)
+     * - Shadow elements: Positioned fixed relative to host, show scroll indicators
+     *
+     * @private
+     */
+    setupResponsiveScrolling() {
+        var _a, _b, _c;
+        const container = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-table-responsive-container');
+        const leftShadow = (_b = this.el.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('.scroll-shadow-left');
+        const rightShadow = (_c = this.el.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('.scroll-shadow-right');
+        if (!container || !leftShadow || !rightShadow)
+            return;
+        // Store container reference for cleanup
+        this.scrollContainer = container;
+        /**
+         * Updates the visibility of scroll shadows based on current scroll position.
+         * Inline-start shadow: shows when scrolled away from start (hidden if fixedColumn is enabled)
+         * Inline-end shadow: shows when there is content to scroll and not at the end
+         */
+        this._responsiveHandleScroll = () => {
+            if (!this.scrollContainer)
+                return;
+            const { scrollWidth, clientWidth } = this.scrollContainer;
+            const maxScroll = scrollWidth - clientWidth;
+            const scrollOffset = scroll.getScrollOffsetFromStart(this.scrollContainer);
+            // Inline-start shadow when scrolled away from start, but not if there's a fixed column
+            leftShadow.style.opacity = (scrollOffset > 0 && !this.fixedColumn) ? '1' : '0';
+            // Inline-end shadow when there is content to scroll and not at the end
+            rightShadow.style.opacity = (maxScroll > 0 && scrollOffset < maxScroll - 1) ? '1' : '0';
+        };
+        // Add scroll event listener to container element
+        this.scrollContainer.addEventListener('scroll', this._responsiveHandleScroll, { passive: true });
+        // Add resize observer to update shadows when container size changes
+        if (typeof window !== 'undefined' && window.ResizeObserver) {
+            try {
+                this._responsiveResizeObserver = new ResizeObserver(() => {
+                    var _a;
+                    (_a = this._responsiveHandleScroll) === null || _a === void 0 ? void 0 : _a.call(this);
+                });
+                this._responsiveResizeObserver.observe(this.scrollContainer);
+            }
+            catch (error) {
+                // ResizeObserver not available in some environments (e.g., tests)
+                // Fall back to window resize listener only
+            }
+        }
+        // Listen for window resize as fallback
+        if (typeof window !== 'undefined') {
+            this._responsiveHandleResize = () => {
+                var _a;
+                (_a = this._responsiveHandleScroll) === null || _a === void 0 ? void 0 : _a.call(this);
+            };
+            window.addEventListener('resize', this._responsiveHandleResize);
+        }
+        // Create teardown function for cleanup
+        this._teardownResponsive = () => {
+            if (this.scrollContainer && this._responsiveHandleScroll) {
+                this.scrollContainer.removeEventListener('scroll', this._responsiveHandleScroll);
+                this.scrollContainer = null;
+            }
+            if (this._responsiveResizeObserver) {
+                this._responsiveResizeObserver.disconnect();
+                this._responsiveResizeObserver = null;
+            }
+            if (typeof window !== 'undefined' && this._responsiveHandleResize) {
+                window.removeEventListener('resize', this._responsiveHandleResize);
+                this._responsiveHandleResize = null;
+            }
+            this._responsiveHandleScroll = null;
+        };
+        // Initial check after setup
+        this._responsiveHandleScroll();
     }
     classNames() {
         const classNames = ['pds-table'];
@@ -31,10 +424,16 @@ const PdsTable = class {
         if (this.responsive) {
             classNames.push('is-responsive');
         }
+        if (this.tableLayout === 'fixed') {
+            classNames.push('is-fixed-layout');
+        }
         return classNames.join('  ');
     }
     sortTable(column, direction) {
         const tableBody = this.el.querySelector('pds-table-body');
+        // Return early if no table body exists
+        if (!tableBody)
+            return;
         // Get the rows in the table body
         const tableRows = Array.from(tableBody.querySelectorAll('pds-table-row'));
         // Find the column index based on the column name
@@ -50,10 +449,10 @@ const PdsTable = class {
             const valueA = a.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
             const valueB = b.querySelector(`pds-table-cell:nth-child(${columnIndex + 1})`).textContent.trim();
             if (direction === 'asc') {
-                return valueA.localeCompare(valueB);
+                return valueA.localeCompare(valueB, undefined, { sensitivity: 'base' });
             }
             else {
-                return valueB.localeCompare(valueA);
+                return valueB.localeCompare(valueA, undefined, { sensitivity: 'base' });
             }
         });
         // Clear and append the sorted rows back to the table body
@@ -63,6 +462,8 @@ const PdsTable = class {
         });
     }
     handleTableSort(event) {
+        if (event.defaultPrevented)
+            return;
         const { direction } = event.detail;
         this.sortTable(event.detail.column, direction);
         this.sortingColumn = event.detail.column;
@@ -87,16 +488,27 @@ const PdsTable = class {
         if (!pdsTableHead)
             return;
         const headerCheckbox = pdsTableHead.shadowRoot.querySelector('pds-checkbox');
-        headerCheckbox.checked = allSelectedRows;
-        headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
+        if (headerCheckbox) {
+            headerCheckbox.checked = allSelectedRows;
+            headerCheckbox.indeterminate = !allSelectedRows && !noneSelectedRows;
+        }
     }
     render() {
-        return (index.h(index.Host, { key: '95cc4db296681faa0fc046c9b1d6807d640b7730', class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0" }, index.h("slot", { key: 'ecc9bc0761409d5a2819a05d72290c294e27454f' })));
+        if (this.responsive) {
+            return (index.h(index.Host, { class: `${this.classNames()} pds-table-responsive-host`, role: "grid", selectable: this.selectable, tabindex: "0", part: "table responsive-table" }, index.h("div", { class: "scroll-shadow-left", part: "scroll-shadow-left" }), index.h("div", { class: "scroll-shadow-right", part: "scroll-shadow-right" }), index.h("div", { class: "pds-table-responsive-container", part: "responsive-container" }, index.h("div", { class: "pds-table-responsive-wrapper", part: "responsive-wrapper" }, index.h("div", { class: this.classNames(), part: "table-inner" }, index.h("slot", null))))));
+        }
+        return (index.h(index.Host, { class: this.classNames(), role: "grid", selectable: this.selectable, tabindex: "0", part: "table" }, index.h("slot", null)));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "tableLayout": [{
+                "handleFixedLayoutInputsChange": 0
+            }],
+        "responsive": [{
+                "handleFixedLayoutInputsChange": 0
+            }]
+    }; }
 };
-PdsTable.style = PdsTableStyle0;
+PdsTable.style = pdsTableCss();
 
 exports.pds_table = PdsTable;
-
-//# sourceMappingURL=pds-table.cjs.entry.js.map

package/dist/cjs/pds-tabpanel.cjs.entry.js

@@ -1,27 +1,46 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsTabpanelCss = ":host{display:block}.pds-tabpanel{display:none;margin-top:var(--spacing-panel-margin-top);padding:var(--spacing-panel-padding)}.pds-tabpanel.is-active{display:block}";
-const PdsTabpanelStyle0 = pdsTabpanelCss;
+const pdsTabpanelCss = () => `:host{display:block}:host(.pds-tabpanel--stretch-active){-ms-flex:1 1 auto;flex:1 1 auto;min-block-size:0}:host(.pds-tabpanel--stretch-active) .pds-tabpanel.is-active{block-size:100%}.pds-tabpanel{display:none;margin-top:var(--tabs-dimension-panel-margin-top);padding:var(--tabs-dimension-panel-padding)}.pds-tabpanel:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabpanel.is-active{display:block}`;
 
 const PdsTabpanel = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.name = undefined;
-        this.parentComponentId = undefined;
-        this.variant = undefined;
-        this.selected = false;
+        this.hostKeeper = new attributes.HostStylingKeeper();
+        /**
+         * Keeps track of the tabpanel selected state, this property is passed by parent component
+         */
+        /** @internal */
+        this.selected = false; // eslint-disable-line @stencil-community/strict-mutable
+        /**
+         * Keeps track of the parent `stretch` state so the active panel can fill height, this property is passed by parent component
+         */
+        /** @internal */
+        this.stretch = false;
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    // Unwraps a nested .pds-tabpanel left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
     }
     render() {
-        return (index.h(index.Host, { key: 'b071d63a6211e70b09f11a18609d15728eb485c6', slot: "tabpanels" }, index.h("div", { key: 'ab8de65d7142136888c853170b7b8b190f21abcc', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, index.h("slot", { key: '0cac8366d5502be7033d1b71b681bf564aa557e8' }))));
+        const hostClass = this.stretch && this.selected ? "pds-tabpanel--stretch-active" : "";
+        // The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
+        // that strips it (and the stretch-active class) leaves this panel unslotted. Put both back.
+        this.hostKeeper.record(hostClass, {}, { slot: 'tabpanels' });
+        return (index.h(index.Host, { key: 'b649c0f9e0c103a2d7dad43b7db0a092194b4ba0', slot: "tabpanels", class: hostClass || undefined }, index.h("div", { key: 'a578722d33f7d04726185e393771838870833984', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, index.h("slot", { key: '2ebe5745c444563333ee175bb3a1f7401ba77ec1' }))));
     }
     get el() { return index.getElement(this); }
 };
-PdsTabpanel.style = PdsTabpanelStyle0;
+PdsTabpanel.style = pdsTabpanelCss();
 
 exports.pds_tabpanel = PdsTabpanel;
-
-//# sourceMappingURL=pds-tabpanel.cjs.entry.js.map