@pine-ds/core 4.0.0-mercury.0 → 4.1.0

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

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

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

@@ -1,27 +1,175 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CuQil7H0.js');
+var scroll = require('./scroll-2XcoE_6Q.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(.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 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;
+        /**
+         * 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;
+        /**
+         * 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';
     }
-    componentWillLoad() {
-        this.sortingColumn = null;
+    componentDidLoad() {
+        if (this.responsive) {
+            this.setupResponsiveScrolling();
+        }
+        // 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.`);
+        }
+    }
+    disconnectedCallback() {
+        if (this._teardownResponsive) {
+            this._teardownResponsive();
+            this._teardownResponsive = null;
+        }
+    }
+    /**
+     * 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'];
@@ -35,6 +183,9 @@ const PdsTable = class {
     }
     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 +201,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 +214,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 +240,19 @@ 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: "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(), id: this.componentId, role: "grid", selectable: this.selectable, tabindex: "0", part: "table" }, index.h("slot", null)));
     }
     get el() { return index.getElement(this); }
 };
-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,33 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CuQil7H0.js');
+var reconnectedContent = require('./reconnected-content-CpnEQcTp.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;
+        /**
+         * 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;
+    }
+    // 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' }))));
+        return (index.h(index.Host, { key: 'be561d592a9c7d2458987bcc09fe5d8d253bd2ba', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, index.h("div", { key: '98cb5eda73378d95519de8ce24c60f9263e89add', 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: '27b707d8fae77685f0cea7b0dc8c8dbcdb808f65' }))));
     }
     get el() { return index.getElement(this); }
 };
-PdsTabpanel.style = PdsTabpanelStyle0;
+PdsTabpanel.style = pdsTabpanelCss();
 
 exports.pds_tabpanel = PdsTabpanel;
-
-//# sourceMappingURL=pds-tabpanel.cjs.entry.js.map

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

@@ -1,20 +1,31 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-CuQil7H0.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsTabsCss = ":host{--spacing-panel-margin-top:0;--spacing-panel-padding:0;--outline:2px solid var(--pine-color-blue-200);--spacing-gap-availability:var(--pine-spacing-100);--spacing-gap-default:var(--pine-spacing-300);--spacing-gap-filter:var(--pine-spacing-200);display:block}.pds-tabs__tablist{display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--spacing-gap-default)}:host(.pds-tabs--availability) .pds-tabs__tablist{gap:var(--spacing-gap-availability)}:host(.pds-tabs--filter) .pds-tabs__tablist{gap:var(--spacing-gap-filter)}";
-const PdsTabsStyle0 = pdsTabsCss;
+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)}`;
 
 const PdsTabs = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.tablistLabel = undefined;
-        this.componentId = undefined;
-        this.variant = undefined;
-        this.activeTabName = undefined;
-        this.activeTabIndex = undefined;
+        /**
+         * Adds a divider rule beneath the tab list.
+         * @defaultValue false
+         */
+        this.divider = false;
+        /**
+         * Stretches the component so the active tab panel fills the remaining height.
+         * Requires the component to have a constrained height (e.g. a flex parent).
+         * @defaultValue false
+         */
+        this.stretch = false;
+        /**
+         * Renders the tab strip as navigation instead of an in-page panel switcher: each
+         * `pds-tab` becomes an `<a href>` inside a `<nav>` landmark (with `aria-current`
+         * on the `active` tab) rather than a `role="tab"` button over a `pds-tabpanel`.
+         * Give every `pds-tab` an `href` and omit `pds-tabpanel`s.
+         * @defaultValue false
+         */
+        this.nav = false;
     }
     tabClickHandler(event) {
         if (this.componentId === event.detail[1]) {
@@ -23,12 +34,48 @@ const PdsTabs = class {
         }
     }
     handleKeyDown(ev) {
+        // Navigation mode uses real links: Tab moves focus, Enter follows the href.
+        // The roving/arrow model is a panel-mode (role=tab) concern only.
+        if (this.isNav)
+            return;
         const keySet = ["ArrowLeft", "ArrowRight", "Home", "End"];
-        if (keySet.includes(ev.key)) {
+        // Only handle keyboard navigation if the event originated from a tab button
+        // that belongs to THIS tabs component
+        const target = ev.target;
+        const targetTab = target.closest('pds-tab');
+        // Check if the tab belongs to this tabs instance (not a nested one)
+        const isOwnTab = targetTab && targetTab.closest('pds-tabs') === this.el;
+        if (keySet.includes(ev.key) && isOwnTab) {
             ev.preventDefault();
             this.moveActiveTab(ev.key);
         }
     }
+    // Navigation mode is an explicit, single source of truth: `nav` drives both the
+    // container (<nav> of links vs role=tablist of buttons) and every child tab (via
+    // `navMode`), so the tabs present when the strip initializes can't mix the two.
+    // (Child discovery is load-time only, like `variant`/`id`; tabs added after load
+    // aren't managed.)
+    get isNav() {
+        return !!this.nav;
+    }
+    // `nav` and per-tab `href` should agree. Warn on the two authoring mistakes
+    // rather than silently rendering a link with no destination, or ignoring an href.
+    warnOnNavConfig() {
+        var _a;
+        if (!((_a = this.tabs) === null || _a === void 0 ? void 0 : _a.length))
+            return;
+        // An empty `href=""` is not a usable destination, so it counts as missing.
+        const withHref = this.tabs.filter((tab) => {
+            const href = tab.getAttribute('href');
+            return href != null && href !== '';
+        }).length;
+        if (this.nav && withHref < this.tabs.length) {
+            console.warn('pds-tabs: `nav` is set, so every pds-tab needs an `href`.');
+        }
+        else if (!this.nav && withHref > 0) {
+            console.warn('pds-tabs: a pds-tab has an `href` but `nav` is not set — add `nav` to pds-tabs for navigation mode; the href is ignored in panel mode.');
+        }
+    }
     moveActiveTab(key) {
         const firstTabNumber = 0;
         const lastTabNumber = this.tabs.length - 1;
@@ -53,8 +100,12 @@ const PdsTabs = class {
         this.activeTabIndex = moveFocusTo;
     }
     findAllChildren() {
-        this.tabs = this.el.querySelectorAll('pds-tab');
-        this.tabPanels = this.el.querySelectorAll('pds-tabpanel');
+        // Only select direct children tabs/tabpanels, not nested ones
+        const allTabs = Array.from(this.el.querySelectorAll('pds-tab'));
+        const allTabPanels = Array.from(this.el.querySelectorAll('pds-tabpanel'));
+        // Filter to only include tabs that belong to this tabs component (not nested)
+        this.tabs = allTabs.filter(tab => tab.closest('pds-tabs') === this.el);
+        this.tabPanels = allTabPanels.filter(panel => panel.closest('pds-tabs') === this.el);
     }
     propGeneration(child, index = 0) {
         child.parentComponentId = this.componentId.toString();
@@ -63,13 +114,25 @@ const PdsTabs = class {
         child['index'] = index;
     }
     passPropsToChildren() {
+        var _a;
+        // Panel mode needs a selected tab so the tablist stays keyboard-reachable
+        // (an all-unselected tablist has every button at tabindex="-1"). Default to
+        // the first ENABLED tab when the consumer omits `activeTabName` — a disabled
+        // tab is itself tabindex="-1", so selecting it would recreate the trap. Nav
+        // mode has no roving/selection, so it's left unset there.
+        if (!this.nav && this.activeTabName == null && this.tabs.length) {
+            const firstEnabled = (_a = this.tabs.find((tab) => !tab.disabled)) !== null && _a !== void 0 ? _a : this.tabs[0];
+            this.activeTabName = firstEnabled.name;
+        }
         this.tabs.forEach((child, index) => {
             if (this.activeTabName === child.name)
                 this.activeTabIndex = index;
             this.propGeneration(child, index);
+            child.navMode = this.nav;
         });
         this.tabPanels.forEach((child) => {
             this.propGeneration(child);
+            child.stretch = this.stretch;
         });
     }
     classNames() {
@@ -78,22 +141,30 @@ const PdsTabs = class {
             const variantClassName = `pds-tabs--${this.variant}`;
             className += ' ' + variantClassName;
         }
+        if (this.divider) {
+            className += ' pds-tabs--divider';
+        }
+        if (this.stretch) {
+            className += ' pds-tabs--stretch';
+        }
         return className;
     }
     ;
     componentWillLoad() {
         this.findAllChildren();
+        this.warnOnNavConfig();
     }
     componentWillRender() {
         this.passPropsToChildren();
     }
     render() {
-        return (index.h(index.Host, { key: 'a36e242d5e746954f80778cf515879ca82258978', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, index.h("div", { key: 'd6d89fd90a9a534f249c549e34308ed245773f60', class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel }, index.h("slot", { key: '9b5e5268c27ecf2a5331cec64d2c7121cef366a1', name: "tabs" })), index.h("slot", { key: 'b835cf1befe68f54b1751a976846d271ce97634e', name: "tabpanels" })));
+        // Navigation mode: a <nav> landmark of links (aria-current marks the current
+        // page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
+        const tabList = this.isNav ? (index.h("nav", { class: "pds-tabs__tablist", "aria-label": this.tablistLabel || undefined, part: "tab-list" }, index.h("slot", { name: "tabs" }))) : (index.h("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, index.h("slot", { name: "tabs" })));
+        return (index.h(index.Host, { key: '43be427fec88d758d9caa2200320a0a327ac9e4d', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, index.h("slot", { key: 'e4b1db5920dc0264811f08706406fd45c48106f9', name: "tabpanels" })));
     }
     get el() { return index.getElement(this); }
 };
-PdsTabs.style = PdsTabsStyle0;
+PdsTabs.style = pdsTabsCss();
 
 exports.pds_tabs = PdsTabs;
-
-//# sourceMappingURL=pds-tabs.cjs.entry.js.map