@pine-ds/core 4.11.0 → 4.12.0

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

@@ -1,8 +1,9 @@
 'use strict';
 
 var index = require('./index-D9iJuJCP.js');
+var closest = require('./closest-D0qyYtJ3.js');
 var scroll = require('./scroll-2XcoE_6Q.js');
-var truncationTooltip = require('./truncation-tooltip-Bikp7n9I.js');
+var truncationTooltip = require('./truncation-tooltip-CM5HgRHh.js');
 require('./keep-hydrated-AKoh0DG4.js');
 require('./floating-ui.dom-Dw41zbyY.js');
 require('./portal-target-e8WQ6dLx.js');
@@ -39,14 +40,16 @@ const PdsTableCell = class {
         };
     }
     componentWillRender() {
-        this.tableRef = this.hostElement.closest('pds-table');
+        // The shadow-crossing `closest` util, not the native one -- a selectable row's checkbox
+        // cell lives inside pds-table-row's own shadow root, which native `closest` can't see past.
+        this.tableRef = closest.closest('pds-table', this.hostElement);
     }
     // Fires again each time the cell is moved (a sort re-appends every row), unlike componentDidLoad,
     // so it re-binds what disconnectedCallback tore down. The tooltip binds to the host, which exists before load.
     connectedCallback() {
         if (!this.hasLoaded)
             return;
-        this.tableRef = this.hostElement.closest('pds-table');
+        this.tableRef = closest.closest('pds-table', this.hostElement);
         this.cleanupScrollListener();
         if (this.needsScrollShadow) {
             this.setupScrollListener();
@@ -112,6 +115,22 @@ const PdsTableCell = class {
             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.needsScrollShadow) {
+            this.setupScrollListener();
+        }
     }
     handleTruncateChange(newValue) {
         if (newValue) {
@@ -152,11 +171,11 @@ const PdsTableCell = class {
         return classNames.join(' ');
     }
     render() {
-        return (index.h(index.Host, { key: 'fd84150bcb9bd5d2029624394d4f69b0a7234bc0', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
+        return (index.h(index.Host, { key: 'bc40b70bcb8f1df7307df6c00e3b73427c8d5ff2', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, index.h("slot", { key: '9256f033ec58b9cb2acc74d705acc9726507668b' })));
+                : {} }, index.h("slot", { key: '418219bf8b870557f5f39ae6553db78fe7037389' })));
     }
     get hostElement() { return index.getElement(this); }
     static get watchers() { return {

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

@@ -2,10 +2,11 @@
 
 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 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(.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 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) {
@@ -13,6 +14,7 @@ const PdsTableHeadCell = class {
         this.pdsTableSort = index.createEvent(this, "pdsTableSort");
         this.scrollContainer = null;
         this.setupRetries = 0;
+        this.hasLoaded = false;
         /**
          * The direction of sorting.
          */
@@ -104,22 +106,39 @@ const PdsTableHeadCell = class {
         this.hostElement.classList.remove('is-active');
     }
     componentWillLoad() {
-        // Set initial references and state before first render
-        this.tableRef = this.hostElement.closest('pds-table');
-        const tableHead = this.hostElement.closest('pds-table-head');
+        // 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();
         }
-        // Watch for changes to the parent table-head's border and background attributes
-        const tableHead = this.hostElement.closest('pds-table-head');
+        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) {
@@ -180,6 +199,22 @@ const PdsTableHeadCell = class {
             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.setupScrollListener();
+        }
     }
     classNames() {
         const classNames = [];
@@ -204,14 +239,27 @@ const PdsTableHeadCell = class {
         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: 'd609309180968913315c1428d0403c3974a4bfc0', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
-                this.tableRef.fixedColumn &&
-                this.tableRef.selectable
-                ? { '--fixed-cell-position': '40px' }
-                : {} }, index.h("slot", { key: '7aff5994fe4c5250ce83516960183dbd9ffa9c69' }), this.sortable && this.isActive && (index.h("pds-icon", { key: '0a7b99ab2c56ea0cfb3aa6f810bf802422a29bef', icon: this.sortingDirection === 'asc' ? index$1.upSmall : index$1.downSmall, part: "sort-icon", "aria-hidden": "true" }))));
+        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); }
 };

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

@@ -50,7 +50,7 @@ const PdsTableHead = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '4fb8d7bf4a9b0bce672208651c0600fbc94214af', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (index.h("pds-table-head-cell", { key: '20b86146540208178bd63bd136e14e5534c7ec76', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (index.h("pds-checkbox", { key: 'fa8054dd7ee36c6401e9eeb9c962a820d3a02558', 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: 'a0000270ae6ed1cab1c6e802ccc53ba0de3e54c9' })));
+        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); }
 };

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

@@ -145,7 +145,7 @@ const PdsTableRow = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'dc956e7253971bdadc003448822a83953ed4658f', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (index.h("pds-table-cell", { key: '1f119c5036ab1d27c5138106968a40492222b6f3', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, index.h("pds-checkbox", { key: 'f7a3534eceeabe478fb85e6e476f814e03988cfb', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), index.h("slot", { key: '287c0fe2c39bac5df7a977e31290aeddd0cd46b3' })));
+        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); }
 };

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

@@ -4,8 +4,15 @@ var index = require('./index-D9iJuJCP.js');
 var scroll = require('./scroll-2XcoE_6Q.js');
 require('./keep-hydrated-AKoh0DG4.js');
 
-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(.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}.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)}`;
+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);
@@ -15,6 +22,14 @@ const PdsTable = class {
         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.
@@ -26,6 +41,18 @@ const PdsTable = class {
          * @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.
@@ -42,11 +69,89 @@ const PdsTable = class {
          * @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();
+            });
+        };
     }
     componentDidLoad() {
-        if (this.responsive) {
-            this.setupResponsiveScrolling();
-        }
+        this.hasLoaded = true;
+        this.attachLifecycleBoundSetup();
         // Apply default sort if specified
         // Use requestAnimationFrame to defer until child components are fully initialized
         if (this.defaultSortColumn) {
@@ -82,11 +187,150 @@ const PdsTable = class {
             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.
@@ -180,6 +424,9 @@ 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) {
@@ -248,11 +495,19 @@ const PdsTable = class {
     }
     render() {
         if (this.responsive) {
-            return (index.h(index.Host, { class: "pds-table is-responsive pds-table-responsive-host", id: this.componentId, 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()} pds-table-responsive-host`, id: this.componentId, 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(), id: this.componentId, 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 = pdsTableCss();
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-D9iJuJCP.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
 var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
 require('./keep-hydrated-AKoh0DG4.js');
 

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var index = require('./index-D9iJuJCP.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
 require('./keep-hydrated-AKoh0DG4.js');
 
 const pdsTabsCss = () => `:host{--tabs-dimension-panel-margin-top:var(--pine-dimension-none);--tabs-dimension-panel-padding:0;display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-md)}:host(.pds-tabs--divider) .pds-tabs__tablist{-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(.pds-tabs--stretch){block-size:100%;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host(.pds-tabs--stretch) .pds-tabs__tablist{-ms-flex:0 0 auto;flex:0 0 auto}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--pine-dimension-xs)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--pine-dimension-sm)}:host(.pds-tabs--pill) .pds-tabs__tablist{background-color:var(--pine-color-background-app);border:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);border-radius:var(--pine-dimension-100);display:-ms-inline-flexbox;display:inline-flex;display:-ms-flexbox;display:flex;gap:0;height:var(--pine-dimension-450)}`;
@@ -45,7 +45,7 @@ const PdsTabs = class {
          */
         this.divider = false;
         /**
-         * Stretches the component so the active tab panel fills the remaining height.
+         * Stretches the component to fill its container's height. The active tab panel keeps the height of its content.
          * Requires the component to have a constrained height (e.g. a flex parent).
          * @defaultValue false
          */
@@ -278,7 +278,7 @@ const PdsTabs = class {
         // Only the classes: `active-tab-name` backs the mutable activeTabName prop, so a morph that drops
         // it is a prop change, not a strip.
         this.hostKeeper.record(hostClass);
-        return (index.h(index.Host, { key: '08ac02be358bebbd95dd5edca30cd99789445f50', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, index.h("slot", { key: '02395c056f80f46f1fa9117eafde68ef170b4188', name: "tabpanels" })));
+        return (index.h(index.Host, { key: '69985d6800ac879a8655d52a6b4f72c5b6a20c61', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, index.h("slot", { key: '0fb1b2521b15c77a50d81431cc1f0f6a40360cfa', name: "tabpanels" })));
     }
     get el() { return index.getElement(this); }
 };

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

@@ -2,7 +2,7 @@
 
 var index = require('./index-D9iJuJCP.js');
 var utils = require('./utils-BhRmyxT8.js');
-var truncationTooltip = require('./truncation-tooltip-Bikp7n9I.js');
+var truncationTooltip = require('./truncation-tooltip-CM5HgRHh.js');
 var index$1 = require('./index.cjs.js');
 require('./keep-hydrated-AKoh0DG4.js');
 require('./floating-ui.dom-Dw41zbyY.js');
@@ -86,7 +86,9 @@ const PdsText = class {
             this.truncationCleanup = truncationTooltip.setupTruncationTooltip({
                 hostEl: this.el,
                 contentEl: this.contentEl,
-                getTooltipText: () => this.el.textContent || '',
+                // Not `textContent`: a consumer that wraps its own slot in this text, as `pds-alert` does, holds a
+                // `<slot>` here, which counts as empty and would leave the tooltip with nothing to show.
+                getTooltipText: () => truncationTooltip.flattenedText(this.el),
                 // A wrapping link or button already takes focus, so its focus reveals the text instead of a nested tab stop.
                 manageTabIndex: !usesWrapper,
                 focusEl: usesWrapper ? wrapper : this.el,
@@ -122,7 +124,7 @@ const PdsText = class {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (index.h(Tag, { key: '30566c7810d3fd7f76ae281ae6d9a7e66803f0a3', ref: (el) => (this.contentEl = el), style: this.color && utils.setColor(this.color), class: typeClasses, part: "content" }, index.h("slot", { key: 'f5113458aa9295803fc1c0bc552f9f92602cacba' })));
+        return (index.h(Tag, { key: '3b9efbad7872410a7e07438801ec17382282ab16', ref: (el) => (this.contentEl = el), style: this.color && utils.setColor(this.color), class: typeClasses, part: "content" }, index.h("slot", { key: '0784e6aee6ce23f93f0e3c077da5fa3ca944aebb' })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {