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

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

@@ -1,34 +1,84 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-BdFrBXCD.js');
+var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsTabCss = "pds-tab{--border-none:var(--pine-border-width-none);--border-radius-availability:var(--pine-border-radius-100);--border-radius-default:var(--pine-border-radius-125);--border-radius-none:var(--pine-border-radius-0);--box-shadow-focus:0 0 0 2px var(--pine-color-blue-200);--color-background-active:var(--pine-color-charcoal-400);--color-background-availability:var(--pine-color-white);--color-background-default:var(--pine-color-grey-300);--color-background-hover:var(--pine-color-grey-400);--color-text-active:var(--pine-color-charcoal-400);--color-text-active-inverse:var(--pine-color-white);--color-text-default:var(--pine-color-charcoal-200);--color-text-focus:var(--pine-color-charcoal-300);--font-size-availability-content:var(--pine-font-size-075);--font-size-default:var(--pine-font-size-100);--font-size-filter-content:var(--pine-font-size-087);--font-weight-default:var(--pine-font-weight-medium);--line-height-availability-content:var(--pine-line-height-100);--line-height-default:var(--pine-line-height-150);--line-height-filter-content:var(--pine-line-height-125);--outline:4px solid var(--pine-color-blue-200);--spacing-padding-none:var(--pine-spacing-0);display:inline-block;position:relative}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--border-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--spacing-padding-none);-ms-flex-align:center;align-items:center;color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--color-text-active)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover{color:var(--color-text-active)}.pds-tab:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-tab .pds-tab__content{font-family:inherit;font-size:var(--font-size-default);font-weight:var(--font-weight-default);line-height:var(--line-height-default);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:currentColor;bottom:0;content:\"\";height:3px;left:0;opacity:0;position:absolute;right:0}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:var(--border-radius-availability) var(--border-radius-availability) var(--border-radius-none) var(--border-radius-none);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--color-background-availability)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:1}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--color-background-default)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--color-text-default)}.pds-tabs--availability .pds-tab__content{font-size:var(--font-size-availability-content);line-height:var(--line-height-availability-content);padding-bottom:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:\"\";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter{--color-background-tab:var(--color-background-active)}.pds-tabs--filter .pds-tab{background-color:var(--color-background-tab);border-radius:50px;color:var(--color-text-active);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{--color-background-tab:var(--color-background-active);color:var(--color-text-active-inverse)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true]){--color-background-tab:var(--color-background-hover)}.pds-tabs--filter .pds-tab__content{font-size:var(--font-size-filter-content);line-height:var(--line-height-filter-content);-webkit-padding-after:0;padding-block-end:0}.pds-tabs--filter .pds-tab__content::after{content:unset}";
-const PdsTabStyle0 = pdsTabCss;
+const pdsTabCss = () => `pds-tab{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;position:relative}.pds-tabs--pill pds-tab{-ms-flex:1;flex:1}.pds-tab{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:transparent;border:var(--pine-border-width-none);-webkit-box-shadow:none;box-shadow:none;color:inherit;cursor:pointer;font-family:inherit;padding:var(--pine-dimension-none);-ms-flex-align:center;align-items:center;color:var(--pine-color-text-secondary);display:-ms-inline-flexbox;display:inline-flex;position:relative;text-decoration:none;white-space:nowrap}.pds-tab.is-active,.pds-tab[aria-selected=true]{color:var(--pine-color-text)}.pds-tab.is-active .pds-tab__content::after,.pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tab:hover:not(:disabled,.is-disabled){color:var(--pine-color-text)}.pds-tab:focus{outline:none}.pds-tab:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tab:disabled,.pds-tab.is-disabled{color:var(--pine-color-text-disabled);cursor:not-allowed}.pds-tab .pds-tab__content{font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);-webkit-padding-after:11px;padding-block-end:11px;position:relative}.pds-tab .pds-tab__content::after{background-color:var(--pine-color-brand);content:"";height:3px;inset-block-end:var(--pine-dimension-none);inset-inline-end:var(--pine-dimension-none);inset-inline-start:var(--pine-dimension-none);opacity:0;position:absolute}.pds-tab .pds-tab-edge{display:none}.pds-tabs--availability{--color-background-tab:transparent}.pds-tabs--availability .pds-tab{background-color:var(--color-background-tab);border-radius:calc(var(--pine-dimension-xs) * 1.25) calc(var(--pine-dimension-xs) * 1.25) var(--pine-dimension-none) var(--pine-dimension-none);color:var(--pine-color-text-secondary);padding:8px 16px 13px}.pds-tabs--availability .pds-tab.is-active,.pds-tabs--availability .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-secondary);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab.is-active .pds-tab__content::after,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:1}.pds-tabs--availability .pds-tab.is-active .pds-tab-edge,.pds-tabs--availability .pds-tab[aria-selected=true] .pds-tab-edge{z-index:var(--pine-z-index-raised)}.pds-tabs--availability .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled,.is-disabled){--color-background-tab:var(--pine-color-secondary-hover);color:var(--pine-color-text)}.pds-tabs--availability .pds-tab:focus-visible{color:var(--pine-color-text-secondary)}.pds-tabs--availability .pds-tab:disabled,.pds-tabs--availability .pds-tab.is-disabled{--color-background-tab:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--availability .pds-tab__content{-webkit-padding-after:7px;padding-block-end:7px}.pds-tabs--availability .pds-tab-edge{bottom:0;display:block;height:8px;inset-inline-end:100%;overflow:hidden;position:absolute;width:8px}.pds-tabs--availability .pds-tab-edge::before{border-radius:50%;bottom:0;-webkit-box-shadow:4px 4px 0 0 var(--color-background-tab);box-shadow:4px 4px 0 0 var(--color-background-tab);content:"";display:block;height:200%;inset-inline-end:0;position:absolute;width:200%}.pds-tabs--availability .pds-tab-edge--end{inset-inline-end:unset;inset-inline-start:100%}.pds-tabs--availability .pds-tab-edge--end::before{-webkit-box-shadow:-4px 4px 0 0 var(--color-background-tab);box-shadow:-4px 4px 0 0 var(--color-background-tab);inset-inline-end:unset;inset-inline-start:0}.pds-tabs--filter .pds-tab{background-color:var(--pine-color-background-muted);border-radius:50px;color:var(--pine-color-text);padding:6px 15px}.pds-tabs--filter .pds-tab.is-active,.pds-tabs--filter .pds-tab[aria-selected=true]{background-color:var(--pine-color-primary);color:var(--pine-color-text-primary)}.pds-tabs--filter .pds-tab.is-active:hover:not(:disabled,.is-disabled),.pds-tabs--filter .pds-tab[aria-selected=true]:hover:not(:disabled,.is-disabled){background-color:var(--pine-color-primary-hover)}.pds-tabs--filter .pds-tab:hover:not(.is-active,[aria-selected=true],:disabled,.is-disabled){background-color:var(--pine-color-border-disabled)}.pds-tabs--filter .pds-tab:disabled,.pds-tabs--filter .pds-tab.is-disabled{background-color:transparent;color:var(--pine-color-text-disabled)}.pds-tabs--filter .pds-tab:disabled.is-active,.pds-tabs--filter .pds-tab:disabled[aria-selected=true],.pds-tabs--filter .pds-tab.is-disabled.is-active,.pds-tabs--filter .pds-tab.is-disabled[aria-selected=true]{background-color:var(--pine-color-primary-disabled)}.pds-tabs--filter .pds-tab__content{-webkit-padding-after:var(--pine-dimension-none);padding-block-end:var(--pine-dimension-none)}.pds-tabs--filter .pds-tab__content::after{content:unset}.pds-tabs--pill{--color-background-tab:transparent}.pds-tabs--pill .pds-tab{background-color:var(--color-background-tab);border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text-muted);-ms-flex:1;flex:1;height:34px;-ms-flex-pack:center;justify-content:center}.pds-tabs--pill .pds-tab .pds-tab__content{-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-webkit-padding-after:0;padding-block-end:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{--color-background-tab:var(--pine-color-background-container);border-color:var(--pine-color-border);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);color:var(--pine-color-text-active)}.pds-tabs--pill .pds-tab.is-active:focus-visible,.pds-tabs--pill .pds-tab[aria-selected=true]:focus-visible{border-color:var(--color-border-focus);outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.pds-tabs--pill .pds-tab.is-active .pds-tab__content::after,.pds-tabs--pill .pds-tab[aria-selected=true] .pds-tab__content::after{opacity:0}.pds-tabs--pill .pds-tab.is-active,.pds-tabs--pill .pds-tab[aria-selected=true]{}.pds-tabs--pill .pds-tab:disabled,.pds-tabs--pill .pds-tab.is-disabled{color:var(--pine-color-text-disabled)}`;
 
 const PdsTab = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pdsTabClick = index.createEvent(this, "pdsTabClick", 7);
-        this.name = undefined;
-        this.parentComponentId = undefined;
-        this.variant = undefined;
-        this.index = undefined;
+        this.pdsTabClick = index.createEvent(this, "pdsTabClick");
+        /**
+         * Determines the tab's disabled state.
+         * @defaultValue false
+         */
+        this.disabled = false;
+        /**
+         * Marks this tab as the current one in navigation mode (`href` set). Applies
+         * the active treatment and `aria-current="page"`. Ignored in panel mode, where
+         * the active tab is derived from the parent's `activeTabName`.
+         * @defaultValue false
+         */
+        this.active = false;
+        /**
+         * Keeps track of the tabpanel selected state, this property is passed by parent component
+         */
+        /** @internal */
         this.selected = false;
     }
+    // Unwraps a nested <a>/<button> left by a page-cache (Turbo, bfcache) reconnect.
+    componentDidRender() {
+        reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-tab__content'), 'a.pds-tab, button.pds-tab', '.pds-tab__content');
+    }
     onTabClick(index, parentComponentId) {
+        if (this.disabled)
+            return;
         this.pdsTabClick.emit([index, parentComponentId]);
     }
+    // An empty string is treated as "no destination" everywhere (isNav fallback,
+    // href attribute, role) so a nav tab never renders `href=""` (which would
+    // navigate to the current page).
+    get hasHref() {
+        return this.href != null && this.href !== '';
+    }
+    get isNav() {
+        var _a;
+        // The parent `pds-tabs` is authoritative when present (via `navMode`), so its
+        // tabs share one mode. Standalone, fall back to a usable `href`.
+        return (_a = this.navMode) !== null && _a !== void 0 ? _a : this.hasHref;
+    }
+    get isActive() {
+        // Navigation mode is server-driven via `active`; panel mode is parent-driven
+        // via `selected` (from `activeTabName`).
+        return this.isNav ? this.active : this.selected;
+    }
+    classNames() {
+        const classes = [
+            'pds-tab',
+            this.isActive && 'is-active',
+            this.disabled && 'is-disabled',
+        ];
+        return classes.filter(Boolean).join(' ');
+    }
     render() {
-        const availabilityTabEdgeInlineStart = (index.h("span", { key: '5ea7f20d14e906993c0cfbef0ae9a37b305be9fd', class: "pds-tab-edge", role: "presentation" }));
-        const availabilityTabEdgeInlineEnd = (index.h("span", { key: '9fc8287a57fd777472d9f909a451332b7edd8c39', class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
-        return (index.h(index.Host, { key: '16d11c4bda123cbb698674c560dc7c826fe653ca', variant: this.variant, slot: "tabs", index: this.index }, index.h("button", { key: '63e18d48cd1206c87e520cbe85c09e7fbd8752f0', role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.selected ? "0" : "-1", "aria-selected": this.selected ? "true" : "false", class: this.selected ? "pds-tab is-active" : "pds-tab", onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, index.h("div", { key: '5db0ed6e01b1cfe58f47669b369bb72bd3caa033', class: "pds-tab__content" }, index.h("slot", { key: '1737f4b6a524cf165deb1eb1a2627ae834a76be2' })))));
+        const availabilityTabEdgeInlineStart = (index.h("span", { class: "pds-tab-edge", role: "presentation" }));
+        const availabilityTabEdgeInlineEnd = (index.h("span", { class: "pds-tab-edge pds-tab-edge--end", role: "presentation" }));
+        const content = (index.h(index.Fragment, null, this.variant === "availability" && availabilityTabEdgeInlineStart, this.variant === "availability" && availabilityTabEdgeInlineEnd, index.h("div", { class: "pds-tab__content" }, index.h("slot", null))));
+        // Navigation mode: a real anchor, so keyboard activation and navigation are
+        // native (and Turbo-driven when framed) with no controller — and the current
+        // item carries `aria-current="page"` rather than `role="tab"`/`aria-selected`.
+        if (this.isNav) {
+            return (index.h(index.Host, { variant: this.variant, slot: "tabs", index: this.index }, index.h("a", { href: this.disabled || !this.hasHref ? undefined : this.href,
+                // An anchor without an href (disabled, or forced into nav mode with no
+                // usable href) loses its implicit link role; restore it explicitly so
+                // assistive tech still announces the item rather than as plain text.
+                role: this.disabled || !this.hasHref ? "link" : undefined, id: this.parentComponentId + "__" + this.name, class: this.classNames(), target: this.target, rel: this.target === "_blank" ? "noopener noreferrer" : undefined, "aria-current": this.isActive ? "page" : undefined, "aria-disabled": this.disabled ? "true" : null, "data-turbo-frame": this.turboFrame || undefined, "data-turbo-action": this.turboAction || undefined }, content)));
+        }
+        return (index.h(index.Host, { variant: this.variant, slot: "tabs", index: this.index }, index.h("button", { role: "tab", id: this.parentComponentId + "__" + this.name, "aria-controls": this.parentComponentId + "__" + this.name + "-panel", tabindex: this.disabled ? "-1" : (this.selected ? "0" : "-1"), "aria-selected": this.selected ? "true" : "false", "aria-disabled": this.disabled ? "true" : null, disabled: this.disabled, class: this.classNames(), onClick: this.onTabClick.bind(this, this.index, this.parentComponentId) }, content)));
     }
     get el() { return index.getElement(this); }
 };
-PdsTab.style = PdsTabStyle0;
+PdsTab.style = pdsTabCss();
 
 exports.pds_tab = PdsTab;
-
-//# sourceMappingURL=pds-tab.cjs.entry.js.map

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

@@ -1,22 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-BdFrBXCD.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsTableBodyCss = ":host{border-color:inherit;display:table-row-group;vertical-align:middle}";
-const PdsTableBodyStyle0 = pdsTableBodyCss;
+const pdsTableBodyCss = () => `:host{border-color:inherit;display:table-row-group;vertical-align:middle}`;
 
 const PdsTableBody = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h(index.Host, { key: '53ae547e27857b0e8e11adcbab634979555b37ab', role: "rowgroup" }, index.h("slot", { key: 'ba94c5332cdb944a36eecfd8f16c63e1fd0c0c0c' })));
+        return (index.h(index.Host, { key: '457fc5406a1fe67055038398e03bfad97a393747', role: "rowgroup", part: "body" }, index.h("slot", { key: '5950bced36f7ba590f34173149cf8663ba76103b' })));
     }
 };
-PdsTableBody.style = PdsTableBodyStyle0;
+PdsTableBody.style = pdsTableBodyCss();
 
 exports.pds_table_body = PdsTableBody;
-
-//# sourceMappingURL=pds-table-body.cjs.entry.js.map

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

@@ -1,32 +1,116 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-BdFrBXCD.js');
+var scroll = require('./scroll-2XcoE_6Q.js');
+var truncationTooltip = require('./truncation-tooltip-CVzAha5B.js');
+require('./floating-ui.dom-BZk7Blsu.js');
 
-const index = require('./index-46fb0736.js');
-
-const pdsTableCellCss = ":host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);--color-background-fixed:var(--pine-color-white);--color-cell-default:var(--pine-color-charcoal-200);--dimension-fixed-cell-position:0;--dimension-max-width-truncated:100px;--font-size-cell-default:var(--pine-font-size-087);--number-fixed-column-index:0;--spacing-line-height-cell-default:var(--pine-line-height-125);--spacing-padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-padding-compact:var(--pine-spacing-050);color:var(--color-cell-default);display:table-cell;font-size:var(--font-size-cell-default);line-height:var(--spacing-line-height-cell-default);padding:var(--spacing-padding-cell-default);vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--dimension-max-width-truncated);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}";
-const PdsTableCellStyle0 = pdsTableCellCss;
+const pdsTableCellCss = () => `:host{--box-shadow-fixed:3px 3px 6px -2px rgba(0, 0, 0, 0.2);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);inset-inline-start:var(--pine-dimension-none);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-sm);vertical-align:middle}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);inset-inline-start:0;position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host-context([dir=rtl]){--box-shadow-fixed:-3px 3px 6px -2px rgba(0, 0, 0, 0.2)}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-fixed);box-shadow:var(--box-shadow-fixed)}:host(.is-truncated){max-width:var(--pds-table-cell-truncate-max-width, 100px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host(.has-checkbox){vertical-align:middle;width:16px}:host(.pds-table-cell--align-start){text-align:start}:host(.pds-table-cell--align-center){text-align:center}:host(.pds-table-cell--align-end){text-align:end}:host(.pds-table-cell--align-justify){text-align:justify}`;
 
 const PdsTableCell = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
+        this.scrollContainer = null;
+        this.setupRetries = 0;
+        this.truncationCleanup = null;
+        /**
+         * Determines if the table is currently scrolling.
+         * @defaultValue false
+         */
+        this.tableScrolling = false;
+        /**
+         * Handles scroll events to update fixed column shadow state.
+         * Updates the tableScrolling state to control CSS classes for fixed column shadows.
+         * @private
+         */
         this.handleScroll = () => {
-            if (this.tableRef.scrollLeft > 0) {
-                this.tableScrolling = true;
+            if (!this.scrollContainer) {
+                return;
+            }
+            try {
+                this.tableScrolling = scroll.isScrolledFromInlineStart(this.scrollContainer);
             }
-            else {
-                this.tableScrolling = false;
+            catch (error) {
+                console.warn('Scroll handler error:', error);
             }
         };
-        this.truncate = undefined;
-        this.tableScrolling = false;
     }
     componentWillRender() {
         this.tableRef = this.hostElement.closest('pds-table');
     }
     componentDidLoad() {
         if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
-            this.tableRef.addEventListener('scroll', this.handleScroll);
+            // For responsive tables with fixed columns, set up scroll detection
+            // This enables the first column to show a shadow when the table is scrolled horizontally
+            this.setupScrollListener();
+        }
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
+    }
+    disconnectedCallback() {
+        this.cleanupScrollListener();
+        this.destroyTruncationTooltip();
+    }
+    setupScrollListener() {
+        var _a;
+        if (!this.tableRef)
+            return;
+        // Query shadowRoot once and cache the container
+        const container = (_a = this.tableRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-table-responsive-container');
+        if (container) {
+            // Container available immediately
+            this.scrollContainer = container;
+            this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
+            this.handleScroll(); // Initial check
+            this.setupRetries = 0; // Reset counter on success
+        }
+        else {
+            // Container not ready, set up timer for retry with bounds
+            this.setupTimer = window.setTimeout(() => {
+                if (this.scrollContainer)
+                    return; // Already found
+                this.setupRetries = (this.setupRetries || 0) + 1;
+                if (this.setupRetries <= 50) {
+                    this.setupScrollListener();
+                }
+                else {
+                    console.warn('Failed to find responsive container after 50 attempts');
+                }
+            }, 100);
+        }
+    }
+    cleanupScrollListener() {
+        if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+            this.scrollContainer = null;
+        }
+        if (this.setupTimer !== undefined) {
+            window.clearTimeout(this.setupTimer);
+            this.setupTimer = undefined;
+        }
+        this.setupRetries = 0; // Reset retry counter
+    }
+    handleTruncateChange(newValue) {
+        if (newValue) {
+            this.initTruncationTooltip();
+        }
+        else {
+            this.destroyTruncationTooltip();
+        }
+    }
+    initTruncationTooltip() {
+        this.destroyTruncationTooltip();
+        this.truncationCleanup = truncationTooltip.setupTruncationTooltip({
+            hostEl: this.hostElement,
+            contentEl: this.hostElement,
+            getTooltipText: () => this.hostElement.textContent || '',
+        });
+    }
+    destroyTruncationTooltip() {
+        if (this.truncationCleanup) {
+            this.truncationCleanup();
+            this.truncationCleanup = null;
         }
     }
     classNames() {
@@ -34,6 +118,9 @@ const PdsTableCell = class {
         if (this.tableRef && this.tableRef.compact) {
             classNames.push('is-compact');
         }
+        if (this.cellAlign) {
+            classNames.push(`pds-table-cell--align-${this.cellAlign}`);
+        }
         if (this.truncate) {
             classNames.push('is-truncated');
         }
@@ -43,16 +130,19 @@ const PdsTableCell = class {
         return classNames.join(' ');
     }
     render() {
-        return (index.h(index.Host, { key: '91ed20b4338792e6d72834d81d966c154fa2bc6d', class: this.classNames(), role: "gridcell", style: this.tableRef &&
+        return (index.h(index.Host, { key: 'b108b0fce3ff0d5c503922a6c936ffd6ca52523f', class: this.classNames(), role: "gridcell", part: "cell", tabIndex: this.truncate ? 0 : undefined, style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, index.h("slot", { key: '40dafc4697ba077a121979b604100107f51e9ff1' })));
+                : {} }, index.h("slot", { key: 'ebc1709ef52029bc6afec2fa89a90d47620892cb' })));
     }
     get hostElement() { return index.getElement(this); }
+    static get watchers() { return {
+        "truncate": [{
+                "handleTruncateChange": 0
+            }]
+    }; }
 };
-PdsTableCell.style = PdsTableCellStyle0;
+PdsTableCell.style = pdsTableCellCss();
 
 exports.pds_table_cell = PdsTableCell;
-
-//# sourceMappingURL=pds-table-cell.cjs.entry.js.map

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

@@ -1,54 +1,193 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-BdFrBXCD.js');
+var index$1 = require('./index-CKNNY-lQ.js');
+var scroll = require('./scroll-2XcoE_6Q.js');
 
-const index = require('./index-46fb0736.js');
-const index$1 = require('./index-de3f0730.js');
-
-const pdsTableHeadCellCss = ":host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-grey-300);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);--color-background-fixed:var(--pine-color-white);--color-sorting:var(--pine-color-charcoal-500);--color-text-default:var(--pine-color-charcoal-200);--dimension-fixed-cell-position:0;--font-size-head-cell:var(--pine-font-size-087);--font-weight-cell-default:var(--pine-font-weight-normal);--line-height-cell-default:var(--pine-line-height-125);--padding-cell-default:calc(var(--pine-spacing-300) / 2);--spacing-margin-inline-start-arrow:var(--pine-spacing-050);--spacing-padding-arrow:calc(var(--pine-spacing-050) / 2);--spacing-padding-block-compact:var(--pine-spacing-050);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--color-text-default);display:table-cell;font-size:var(--font-size-head-cell);font-style:normal;font-weight:var(--font-weight-cell-default);line-height:var(--line-height-cell-default);padding:var(--padding-cell-default);text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--spacing-padding-block-compact)}:host(.is-fixed){background:var(--color-background-fixed);left:var(--dimension-fixed-cell-position);position:-webkit-sticky;position:sticky;z-index:1}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--spacing-margin-inline-start-arrow);margin-inline-start:var(--spacing-margin-inline-start-arrow);-webkit-padding-before:var(--spacing-padding-arrow);padding-block-start:var(--spacing-padding-arrow);position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--color-sorting)}";
-const PdsTableHeadCellStyle0 = pdsTableHeadCellCss;
+const pdsTableHeadCellCss = () => `:host{--border-head-cell-default:var(--pine-border-width-thin) solid var(--pine-color-border-subtle);--box-shadow-default:3px 3px 6px -2px rgba(0, 0, 0, 0.1);-webkit-border-after:var(--border-head-cell-default);border-block-end:var(--border-head-cell-default);color:var(--pine-color-text);display:table-cell;font-family:var(--pine-font-family-body);font-size:var(--pine-font-size);font-weight:var(--pine-font-weight-regular);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);padding:var(--pine-dimension-sm);position:relative;text-align:start;vertical-align:inherit}:host(.is-compact){padding-block:var(--pine-dimension-2xs)}:host(.is-fixed){background:var(--pine-color-background-container);inset-inline-start:var(--pine-dimension-none);position:-webkit-sticky;position:sticky;z-index:var(--pine-z-index-raised)}:host(.is-fixed.has-head-background){background-color:var(--pine-color-background-subtle)}:host(.has-head-border){-webkit-border-before:var(--border-head-cell-default);border-block-start:var(--border-head-cell-default)}:host-context([dir=rtl]){--box-shadow-default:-3px 3px 6px -2px rgba(0, 0, 0, 0.1)}:host(.has-scrolled.is-fixed){-webkit-box-shadow:var(--box-shadow-default);box-shadow:var(--box-shadow-default)}:host(.is-sortable){cursor:pointer}:host(.is-sortable) pds-icon{-webkit-margin-start:var(--pine-dimension-2xs);margin-inline-start:var(--pine-dimension-2xs);-webkit-padding-before:2px;padding-block-start:2px;position:absolute}:host(.is-sortable:hover),:host(.is-active){color:var(--pine-color-text-strong)}:host(.pds-table-head-cell--align-start){text-align:start}:host(.pds-table-head-cell--align-center){text-align:center}:host(.pds-table-head-cell--align-end){text-align:end}:host(.pds-table-head-cell--align-justify){text-align:justify}`;
 
 const PdsTableHeadCell = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pdsTableSort = index.createEvent(this, "pdsTableSort", 7);
+        this.pdsTableSort = index.createEvent(this, "pdsTableSort");
+        this.scrollContainer = null;
+        this.setupRetries = 0;
+        /**
+         * The direction of sorting.
+         */
+        this.sortingDirection = 'asc';
+        /**
+         * Determines if the table is currently scrolling.
+         * @defaultValue false
+         */
+        this.tableScrolling = false;
+        /**
+         * Determines if the table row is currently selected.
+         * @defaultValue false
+         */
+        this.isSelected = false;
+        /**
+         * Determines if the parent table-head has the border attribute.
+         * @defaultValue false
+         */
+        this.hasHeadBorder = false;
+        /**
+         * Determines if the parent table-head has the background attribute.
+         * @defaultValue false
+         */
+        this.hasHeadBackground = false;
+        /**
+         * Determines if this column is the currently active sorted column.
+         * @defaultValue false
+         */
+        this.isActive = false;
+        /**
+         * Handles scroll events to update fixed column shadow state.
+         * Updates the tableScrolling state to control CSS classes for fixed column shadows.
+         * @private
+         */
         this.handleScroll = () => {
-            if (this.tableRef.scrollLeft > 0) {
-                this.tableScrolling = true;
+            if (!this.scrollContainer) {
+                return;
             }
-            else {
-                this.tableScrolling = false;
+            try {
+                this.tableScrolling = scroll.isScrolledFromInlineStart(this.scrollContainer);
+            }
+            catch (error) {
+                console.warn('Scroll handler error:', error);
             }
         };
         this.toggleSort = () => {
             if (this.sortable) {
+                // Guard: return early if tableRef is not available
+                if (!this.tableRef) {
+                    return;
+                }
                 const column = this.hostElement.innerText.trim();
+                // Always toggle the direction (preserves original behavior)
                 this.sortingDirection = this.sortingDirection === 'asc' ? 'desc' : 'asc';
-                this.tableRef.querySelectorAll('pds-table-head-cell').forEach((headCell) => {
-                    headCell.classList.remove('is-active');
+                // Reset all OTHER head cells to inactive state (skip the current one)
+                this.tableRef.querySelectorAll('pds-table-head-cell').forEach(async (headCell) => {
+                    // Skip clearing the current cell
+                    if (headCell !== this.hostElement) {
+                        const headCellComponent = headCell;
+                        await headCellComponent.clearActiveSort();
+                    }
                 });
-                this.hostElement.classList.toggle('is-active');
+                // Mark this column as active
+                this.isActive = true;
+                this.hostElement.classList.add('is-active');
+                // Emit the sort event with the current direction
                 this.pdsTableSort.emit({ column, direction: this.sortingDirection });
             }
         };
-        this.sortable = undefined;
-        this.sortingDirection = 'asc';
-        this.tableScrolling = false;
-        this.isSelected = false;
     }
-    componentWillRender() {
+    /**
+     * Programmatically sets this column as the active sort column with the specified direction.
+     * Used by pds-table to apply a default sort on initial load.
+     * @param direction - The sort direction to apply ('asc' or 'desc')
+     */
+    async setActiveSort(direction) {
+        if (!this.sortable)
+            return;
+        this.sortingDirection = direction;
+        this.isActive = true;
+        this.hostElement.classList.add('is-active');
+    }
+    /**
+     * Clears the active sort state from this column.
+     * Used internally when another column becomes active.
+     */
+    async clearActiveSort() {
+        this.isActive = false;
+        this.hostElement.classList.remove('is-active');
+    }
+    componentWillLoad() {
+        // Set initial references and state before first render
         this.tableRef = this.hostElement.closest('pds-table');
+        const tableHead = this.hostElement.closest('pds-table-head');
+        if (tableHead) {
+            this.hasHeadBorder = tableHead.hasAttribute('border');
+            this.hasHeadBackground = tableHead.hasAttribute('background');
+        }
     }
     componentDidLoad() {
         if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
-            this.tableRef.addEventListener('scroll', this.handleScroll);
+            // 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');
+        if (tableHead && typeof MutationObserver !== 'undefined') {
+            // Defensive guard: disconnect existing observer before creating a new one
+            if (this.headObserver) {
+                this.headObserver.disconnect();
+            }
+            this.headObserver = new MutationObserver(() => {
+                // Update state when border or background attributes change
+                this.hasHeadBorder = tableHead.hasAttribute('border');
+                this.hasHeadBackground = tableHead.hasAttribute('background');
+            });
+            this.headObserver.observe(tableHead, {
+                attributes: true,
+                attributeFilter: ['border', 'background']
+            });
         }
     }
+    disconnectedCallback() {
+        this.cleanupScrollListener();
+        if (this.headObserver) {
+            this.headObserver.disconnect();
+        }
+    }
+    setupScrollListener() {
+        var _a;
+        if (!this.tableRef)
+            return;
+        // Query shadowRoot once and cache the container
+        const container = (_a = this.tableRef.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-table-responsive-container');
+        if (container) {
+            // Container available immediately
+            this.scrollContainer = container;
+            this.scrollContainer.addEventListener('scroll', this.handleScroll, { passive: true });
+            this.handleScroll(); // Initial check
+            this.setupRetries = 0; // Reset counter on success
+        }
+        else {
+            // Container not ready, set up timer for retry with bounds
+            this.setupTimer = window.setTimeout(() => {
+                if (this.scrollContainer)
+                    return; // Already found
+                this.setupRetries = (this.setupRetries || 0) + 1;
+                if (this.setupRetries <= 50) {
+                    this.setupScrollListener();
+                }
+                else {
+                    console.warn('Failed to find responsive container after 50 attempts');
+                }
+            }, 100);
+        }
+    }
+    cleanupScrollListener() {
+        if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+            this.scrollContainer = null;
+        }
+        if (this.setupTimer !== undefined) {
+            window.clearTimeout(this.setupTimer);
+            this.setupTimer = undefined;
+        }
+        this.setupRetries = 0; // Reset retry counter
+    }
     classNames() {
         const classNames = [];
         if (this.tableRef && this.tableRef.compact) {
             classNames.push('is-compact');
         }
+        if (this.cellAlign) {
+            classNames.push(`pds-table-head-cell--align-${this.cellAlign}`);
+        }
         if (this.sortable) {
             classNames.push('is-sortable');
         }
@@ -58,19 +197,23 @@ const PdsTableHeadCell = class {
         if (this.tableRef && this.tableRef.fixedColumn && this.tableScrolling) {
             classNames.push('has-scrolled');
         }
-        return classNames.join('  ');
+        if (this.hasHeadBackground) {
+            classNames.push('has-head-background');
+        }
+        if (this.hasHeadBorder) {
+            classNames.push('has-head-border');
+        }
+        return classNames.join(' ');
     }
     render() {
-        return (index.h(index.Host, { key: '72e242a22774d4b534b7a8653673606e0e9c6ef1', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, style: this.tableRef &&
+        return (index.h(index.Host, { key: 'e0a30c326b81e0cc3fa8c0392b61f2a6625aad71', 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: '08e1d5aab1761ed097e2669716884196c946bcc3' }), this.sortable && (index.h("pds-icon", { key: '43421a2b1401426878601468acee702ce45404bf', icon: this.sortingDirection === 'asc' ? index$1.upSmall : index$1.downSmall }))));
+                : {} }, index.h("slot", { key: '3d0012983b2b552e4e61a3d84717afb9de8e572f' }), this.sortable && this.isActive && (index.h("pds-icon", { key: '326607f90b12ecc26a731dc696d0a3b8ebb0960c', icon: this.sortingDirection === 'asc' ? index$1.upSmall : index$1.downSmall, part: "sort-icon" }))));
     }
     get hostElement() { return index.getElement(this); }
 };
-PdsTableHeadCell.style = PdsTableHeadCellStyle0;
+PdsTableHeadCell.style = pdsTableHeadCellCss();
 
 exports.pds_table_head_cell = PdsTableHeadCell;
-
-//# sourceMappingURL=pds-table-head-cell.cjs.entry.js.map

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

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