@pine-ds/core 4.10.0 → 4.12.0

package/dist/collection/components/pds-table/pds-table-row/pds-table-row.js

@@ -1,5 +1,9 @@
 import { Host, h } from "@stencil/core";
 import { closest } from "../../../utils/closest";
+/**
+ * @part row - Set on the `pds-table-row` element itself, so `::part(row)` matches it only from a shadow root that contains it. Style `pds-table-row` directly instead.
+ * @part row-checkbox - Exposes the row's selection checkbox for styling. Appears only when the table is `selectable`.
+ */
 export class PdsTableRow {
     constructor() {
         this.observer = null;
@@ -137,7 +141,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: 'dc956e7253971bdadc003448822a83953ed4658f', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '1f119c5036ab1d27c5138106968a40492222b6f3', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, 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" }))), h("slot", { key: '287c0fe2c39bac5df7a977e31290aeddd0cd46b3' })));
+        return (h(Host, { key: '3bf8a5bf5f0ccb4a933a756d3ba52aaa2e35d4f0', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '5dfb53c4c7c550abbe445753828aa5a40cf53a7f', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, 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" }))), h("slot", { key: '4ae4007c867694a25b2ca0df6d69635bc0fa7cd0' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-table/pds-table.css

@@ -14,6 +14,10 @@
   outline: var(--pine-outline-focus);
 }
 
+:host(.is-fixed-layout) {
+  table-layout: fixed;
+}
+
 /*
  * Responsive Table Architecture
  *
@@ -67,6 +71,10 @@
   width: 100% !important;
 }
 
+.pds-table-responsive-wrapper .pds-table.is-fixed-layout {
+  table-layout: fixed !important;
+}
+
 /* Shadows positioned relative to host (non-scrolling), covering container edges */
 .scroll-shadow-left,
 .scroll-shadow-right {

package/dist/collection/components/pds-table/pds-table.js

@@ -1,5 +1,21 @@
-import { Host, h } from "@stencil/core";
+import { Host, h, forceUpdate } from "@stencil/core";
 import { getScrollOffsetFromStart } from "../../utils/scroll";
+// 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;
+/**
+ * @part responsive-container - Exposes the horizontal scroll container for styling. Appears only when `responsive` is set.
+ * @part responsive-table - Set on the `pds-table` element itself when `responsive` is set, so `::part(responsive-table)` matches it only from a shadow root that contains it. Style `pds-table` directly instead.
+ * @part responsive-wrapper - Exposes the wrapper inside the scroll container for styling. Appears only when `responsive` is set.
+ * @part scroll-shadow-left - Exposes the scroll shadow at the inline-start edge for styling. Appears only when `responsive` is set.
+ * @part scroll-shadow-right - Exposes the scroll shadow at the inline-end edge for styling. Appears only when `responsive` is set.
+ * @part table - Set on the `pds-table` element itself, so `::part(table)` matches it only from a shadow root that contains it. Style `pds-table` directly instead.
+ * @part table-inner - Exposes the inner table element around the slotted head and body for styling. Appears only when `responsive` is set.
+ */
 export class PdsTable {
     constructor() {
         this.scrollContainer = null;
@@ -7,6 +23,14 @@ export class PdsTable {
         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.
@@ -18,6 +42,18 @@ export class PdsTable {
          * @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.
@@ -34,11 +70,89 @@ export class PdsTable {
          * @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) {
@@ -74,11 +188,150 @@ export class PdsTable {
             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');
+            forceUpdate(cell);
+            void cell.rebindScrollListener();
+        });
+        this.allBodyCells().forEach((cell) => {
+            void cell.rebindScrollListener();
+        });
+        const head = this.el.querySelector('pds-table-head');
+        if (head)
+            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.
@@ -172,6 +425,9 @@ export class PdsTable {
         if (this.responsive) {
             classNames.push('is-responsive');
         }
+        if (this.tableLayout === 'fixed') {
+            classNames.push('is-fixed-layout');
+        }
         return classNames.join('  ');
     }
     sortTable(column, direction) {
@@ -240,7 +496,7 @@ export class PdsTable {
     }
     render() {
         if (this.responsive) {
-            return (h(Host, { class: "pds-table is-responsive pds-table-responsive-host", id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0", part: "table responsive-table" }, h("div", { class: "scroll-shadow-left", part: "scroll-shadow-left" }), h("div", { class: "scroll-shadow-right", part: "scroll-shadow-right" }), h("div", { class: "pds-table-responsive-container", part: "responsive-container" }, h("div", { class: "pds-table-responsive-wrapper", part: "responsive-wrapper" }, h("div", { class: this.classNames(), part: "table-inner" }, h("slot", null))))));
+            return (h(Host, { class: `${this.classNames()} pds-table-responsive-host`, id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0", part: "table responsive-table" }, h("div", { class: "scroll-shadow-left", part: "scroll-shadow-left" }), h("div", { class: "scroll-shadow-right", part: "scroll-shadow-right" }), h("div", { class: "pds-table-responsive-container", part: "responsive-container" }, h("div", { class: "pds-table-responsive-wrapper", part: "responsive-wrapper" }, h("div", { class: this.classNames(), part: "table-inner" }, h("slot", null))))));
         }
         return (h(Host, { class: this.classNames(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0", part: "table" }, h("slot", null)));
     }
@@ -327,7 +583,7 @@ export class PdsTable {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if the should display a fixed first column."
+                    "text": "Determines if the table displays a fixed first column."
                 },
                 "getter": false,
                 "setter": false,
@@ -399,6 +655,29 @@ export class PdsTable {
                 "attribute": "row-dividers",
                 "defaultValue": "false"
             },
+            "tableLayout": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'auto' | 'fixed'",
+                    "resolved": "\"auto\" | \"fixed\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "'auto'"
+                        }],
+                    "text": "Sets how the table sizes its columns. With `auto`, each column is sized from its content,\nso columns can change width when the rows change (for example after a sort). With `fixed`,\ncolumns take the `width` set on their `pds-table-head-cell` and ignore their content;\ncolumns without a `width` share the remaining space. Under `responsive`, that remaining\nshare keeps a 120px floor on narrow viewports where the other columns' widths already fill\nit, growing the table instead (scrollable) -- without `responsive` there's no floor, since\nthere would be nothing to scroll the overflow it would create. Content longer than its\ncolumn overflows, so add `truncate` to cells whose content may not fit."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "table-layout",
+                "defaultValue": "'auto'"
+            },
             "defaultSortColumn": {
                 "type": "string",
                 "mutable": false,
@@ -458,7 +737,7 @@ export class PdsTable {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Event that is emitted when the select all checkbox is clicked, carrying the selected value."
+                    "text": "Event that is emitted by `pds-table-head` when the select all checkbox is clicked, carrying the selected value.\nIt bubbles through the table; the table doesn't emit it itself."
                 },
                 "complexType": {
                     "original": "{ isSelected: boolean }",
@@ -468,6 +747,15 @@ export class PdsTable {
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "tableLayout",
+                "methodName": "handleFixedLayoutInputsChange"
+            }, {
+                "propName": "responsive",
+                "methodName": "handleFixedLayoutInputsChange"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "pdsTableSort",

package/dist/collection/components/pds-table/stories/pds-table.stories.js

@@ -65,17 +65,17 @@ const BaseTemplate = (args) => html`
     <pds-table-head-cell>Column Title</pds-table-head-cell>
   </pds-table-head>
   <pds-table-body>
-    <pds-table-row value="row1">
+    <pds-table-row>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
     </pds-table-row>
-    <pds-table-row value="row2">
+    <pds-table-row>
       <pds-table-cell>Row Item Bravo</pds-table-cell>
       <pds-table-cell>Row Item Bravo</pds-table-cell>
       <pds-table-cell>Row Item Bravo</pds-table-cell>
     </pds-table-row>
-    <pds-table-row value="row3">
+    <pds-table-row>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
@@ -150,7 +150,7 @@ const ResponsiveTemplate = (args) => html`
     <pds-table-head-cell>Actions</pds-table-head-cell>
   </pds-table-head>
   <pds-table-body>
-    <pds-table-row value="responsive1">
+    <pds-table-row>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
       <pds-table-cell>Row Item Beta</pds-table-cell>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
@@ -172,7 +172,7 @@ const ResponsiveTemplate = (args) => html`
         </pds-dropdown-menu>
       </pds-table-cell>
     </pds-table-row>
-    <pds-table-row value="responsive2">
+    <pds-table-row>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
       <pds-table-cell>Row Item Beta</pds-table-cell>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
@@ -194,7 +194,7 @@ const ResponsiveTemplate = (args) => html`
         </pds-dropdown-menu>
       </pds-table-cell>
     </pds-table-row>
-    <pds-table-row value="responsive3">
+    <pds-table-row>
       <pds-table-cell>Row Item Alpha</pds-table-cell>
       <pds-table-cell>Row Item Beta</pds-table-cell>
       <pds-table-cell>Row Item Charlie</pds-table-cell>
@@ -495,3 +495,128 @@ Truncate.args = {
   border: true,
   rowDividers: true,
 };
+
+const ColumnWidthsTemplate = (args) => html`
+<pds-table
+  component-id="column-widths"
+  table-layout="${args.tableLayout}"
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+>
+  <pds-table-head ?border=${args.border}>
+    <pds-table-head-cell sortable>Name</pds-table-head-cell>
+    <pds-table-head-cell sortable width="148px">Lifetime value</pds-table-head-cell>
+    <pds-table-head-cell sortable width="134px">Added</pds-table-head-cell>
+    <pds-table-head-cell sortable width="216px">Email marketing</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell truncate>Alexandra Christina Rodriguez-Fitzgerald</pds-table-cell>
+      <pds-table-cell>$12,480.00</pds-table-cell>
+      <pds-table-cell>Mar 4, 2024</pds-table-cell>
+      <pds-table-cell>Unsubscribed manually</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Bo Li</pds-table-cell>
+      <pds-table-cell>$0.00</pds-table-cell>
+      <pds-table-cell>Jan 12, 2026</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Jonathan Alexander Bartholomew III</pds-table-cell>
+      <pds-table-cell>$1,250,300.00</pds-table-cell>
+      <pds-table-cell>Sep 30, 2025</pds-table-cell>
+      <pds-table-cell>Not subscribed</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Mia Chen</pds-table-cell>
+      <pds-table-cell>$75.00</pds-table-cell>
+      <pds-table-cell>Jul 1, 2025</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">Sort any column: with a fixed table layout, the columns keep their widths whichever rows come first. Set the table layout to auto to compare.</pds-text>`;
+
+export const ColumnWidths = ColumnWidthsTemplate.bind();
+ColumnWidths.args = {
+  border: true,
+  responsive: false,
+  rowDividers: true,
+  tableLayout: 'fixed',
+};
+ColumnWidths.argTypes = {
+  tableLayout: {
+    control: { type: 'select' },
+    options: ['auto', 'fixed'],
+    description: 'Sets how the table sizes its columns. With `fixed`, columns take the `width` set on their `pds-table-head-cell` and ignore their content.',
+  },
+};
+
+const ColumnWidthsResponsiveTemplate = (args) => html`
+<pds-table
+  component-id="column-widths-responsive"
+  table-layout="${args.tableLayout}"
+  ?fixed-column=${args.fixedColumn}
+  ?responsive=${args.responsive}
+  ?row-dividers=${args.rowDividers}
+>
+  <pds-table-head ?border=${args.border}>
+    <pds-table-head-cell sortable>Name</pds-table-head-cell>
+    <pds-table-head-cell sortable width="148px">Lifetime value</pds-table-head-cell>
+    <pds-table-head-cell sortable width="134px">Added</pds-table-head-cell>
+    <pds-table-head-cell sortable width="216px">Email marketing</pds-table-head-cell>
+    <pds-table-head-cell sortable width="240px">Tags</pds-table-head-cell>
+    <pds-table-head-cell sortable width="180px">Last activity</pds-table-head-cell>
+    <pds-table-head-cell sortable width="160px">Source</pds-table-head-cell>
+  </pds-table-head>
+  <pds-table-body>
+    <pds-table-row>
+      <pds-table-cell truncate>Alexandra Christina Rodriguez-Fitzgerald</pds-table-cell>
+      <pds-table-cell>$12,480.00</pds-table-cell>
+      <pds-table-cell>Mar 4, 2024</pds-table-cell>
+      <pds-table-cell>Unsubscribed manually</pds-table-cell>
+      <pds-table-cell truncate>Customer, Webinar 2024</pds-table-cell>
+      <pds-table-cell>Opened an email</pds-table-cell>
+      <pds-table-cell>Checkout</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Bo Li</pds-table-cell>
+      <pds-table-cell>$0.00</pds-table-cell>
+      <pds-table-cell>Jan 12, 2026</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+      <pds-table-cell truncate>Lead</pds-table-cell>
+      <pds-table-cell>Signed up</pds-table-cell>
+      <pds-table-cell>Opt-in form</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Jonathan Alexander Bartholomew III</pds-table-cell>
+      <pds-table-cell>$1,250,300.00</pds-table-cell>
+      <pds-table-cell>Sep 30, 2025</pds-table-cell>
+      <pds-table-cell>Not subscribed</pds-table-cell>
+      <pds-table-cell truncate>Customer, VIP, Coaching</pds-table-cell>
+      <pds-table-cell>Bought an offer</pds-table-cell>
+      <pds-table-cell>Import</pds-table-cell>
+    </pds-table-row>
+    <pds-table-row>
+      <pds-table-cell truncate>Mia Chen</pds-table-cell>
+      <pds-table-cell>$75.00</pds-table-cell>
+      <pds-table-cell>Jul 1, 2025</pds-table-cell>
+      <pds-table-cell>Subscribed</pds-table-cell>
+      <pds-table-cell truncate>Customer</pds-table-cell>
+      <pds-table-cell>Completed a lesson</pds-table-cell>
+      <pds-table-cell>Landing page</pds-table-cell>
+    </pds-table-row>
+  </pds-table-body>
+</pds-table>
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">The column widths add up to more than the container, so the table scrolls horizontally. Name has no width and keeps a 120px minimum.</pds-text>`;
+
+export const ColumnWidthsResponsive = ColumnWidthsResponsiveTemplate.bind();
+ColumnWidthsResponsive.args = {
+  border: true,
+  fixedColumn: false,
+  responsive: true,
+  rowDividers: true,
+  tableLayout: 'fixed',
+};
+ColumnWidthsResponsive.argTypes = ColumnWidths.argTypes;

package/dist/collection/components/pds-tabs/pds-tabs.js

@@ -43,7 +43,7 @@ export class PdsTabs {
          */
         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
          */
@@ -276,7 +276,7 @@ export class PdsTabs {
         // 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 (h(Host, { key: '08ac02be358bebbd95dd5edca30cd99789445f50', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, h("slot", { key: '02395c056f80f46f1fa9117eafde68ef170b4188', name: "tabpanels" })));
+        return (h(Host, { key: '69985d6800ac879a8655d52a6b4f72c5b6a20c61', "active-tab-name": this.activeTabName, class: hostClass, id: this.componentId }, tabList, h("slot", { key: '0fb1b2521b15c77a50d81431cc1f0f6a40360cfa', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -387,7 +387,7 @@ export class PdsTabs {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Stretches the component so the active tab panel fills the remaining height.\nRequires the component to have a constrained height (e.g. a flex parent)."
+                    "text": "Stretches the component to fill its container's height. The active tab panel keeps the height of its content.\nRequires the component to have a constrained height (e.g. a flex parent)."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-tabs/stories/pds-tabs.stories.js

@@ -42,7 +42,7 @@ Pill.args = {
   variant: 'pill',
 }
 const AvailabilityTemplate = (args) => html`
-<div style="background-color: #ddd; padding: 20px;">
+<div style="background-color: var(--pine-color-background-inset-emphasized); padding: var(--pine-dimension-md);">
   <pds-tabs active-tab-name=${args.activeTabName} variant=${args.variant} component-id=${args.componentId} tablist-label=${args.tablistLabel}>
     <pds-tab name="monday">Monday</pds-tab>
     <pds-tab name="tuesday">Tuesday</pds-tab>