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

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

@@ -1,25 +1,51 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var form = require('./form-MhwfKTuo.js');
+var index$1 = require('./index-BDnbr0DK.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var ariaReferences = require('./aria-references-CUmqibnO.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-const pdsLabel = require('./pds-label-7aabdc4e.js');
+const labelCss = () => `:host{display:inline-block}:host([aria-disabled=true]) label{color:var(--pine-color-text-label-disabled)}:host([aria-readonly=true]) label{color:var(--pine-color-text-label-readonly)}label{color:var(--pine-color-text-label);font:var(--pine-typography-body-medium);letter-spacing:var(--pine-letter-spacing)}`;
 
-const pdsSwitchCss = ":host{--border-radius-input:var(--pine-border-radius-200);--box-shadow-focus:0 0 0 2px var(--color-outline-focus);--box-shadow-focus-error:0 0 0 2px var(--color-outline-focus-error);--box-shadow-input-toggle:0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 2px 0 rgba(0, 0, 0, 0.08);--color-background-checked:var(--pine-color-charcoal-400);--color-background-checked-hover:var(--pine-color-charcoal-400);--color-background-disabled:var(--pine-color-grey-300);--color-background-hover:var(--pine-color-grey-500);--color-background-input-default:var(--pine-color-grey-400);--color-input-toggle:var(--pine-color-white);--color-message-text:var(--pine-color-charcoal-200);--color-outline-focus:var(--pine-color-blue-200);--color-outline-focus-error:var(--pine-color-red-200);--color-text-default:var(--pine-color-charcoal-400);--color-text-disabled:var(--pine-color-grey-500);--color-text-error:var(--pine-color-red-300);--dimension-input-height:20px;--dimension-input-width:36px;--line-height-label:var(--pine-line-height-150);--sizing-input-toggle-size:calc(var(--dimension-input-height) - (var(--spacing-input-toggle-offset) * 2));--spacing-label-gap-size:var(--pine-spacing-150);--spacing-input-toggle-offset:calc(var(--pine-spacing-050) / 2);--spacing-message-block:var(--pine-spacing-050);--spacing-message-inline:calc(var(--dimension-input-width) + var(--spacing-label-gap-size));--number-transition-timing:0.15s ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--color-text-default);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;-webkit-margin-after:var(--pine-spacing-md);margin-block-end:var(--pine-spacing-md);position:relative}:host(.pds-switch--error){color:var(--color-text-error)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--color-text-error)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){-webkit-box-shadow:var(--box-shadow-focus-error);box-shadow:var(--box-shadow-focus-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-background-input-default);border:0;border-radius:var(--border-radius-input);cursor:pointer;display:inline-block;height:var(--dimension-input-height);margin:0;padding:0;position:relative;-webkit-transform:translateY(2px);transform:translateY(2px);-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--dimension-input-width)}input::after{background:var(--color-input-toggle);border-radius:50%;-webkit-box-shadow:var(--box-shadow-input-toggle);box-shadow:var(--box-shadow-input-toggle);content:\"\";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:50%;position:absolute;-webkit-transform:translate3d(-100%, -50%, 0);transform:translate3d(-100%, -50%, 0);-webkit-transition:-webkit-transform var(--number-transition-timing);transition:-webkit-transform var(--number-transition-timing);transition:transform var(--number-transition-timing);transition:transform var(--number-transition-timing), -webkit-transform var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-positive:1;flex-grow:1;line-height:var(--line-height-label);-webkit-margin-start:var(--spacing-label-gap-size);margin-inline-start:var(--spacing-label-gap-size)}.pds-switch--error label{color:inherit}.pds-switch__message{color:var(--color-message-text);-ms-flex:1 0 100%;flex:1 0 100%;font-size:var(--pine-font-size-body-sm);line-height:var(--pine-line-height-sm);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline)}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-block);margin-block-start:var(--spacing-message-block)}.pds-switch__message--error{color:inherit}input:disabled{background-color:var(--color-background-disabled);cursor:not-allowed}input:disabled~label{color:var(--color-text-disabled);cursor:initial}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--color-background-hover)}input:focus-visible:not(:disabled){-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}input:checked::after{-webkit-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}input:checked:not(:disabled){background-color:currentColor;color:var(--color-background-checked)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--color-background-checked-hover)}";
-const PdsSwitchStyle0 = pdsSwitchCss;
+const pdsSwitchCss = () => `:host{--sizing-input-toggle-size:calc(var(--pine-dimension-250) - (var(--pine-dimension-025) * 2));--pine-dimension-025:2px;--spacing-message-inline:calc(var(--pine-dimension-450) + var(--pine-dimension-150));--number-transition-timing:var(--pine-motion-duration-fast) ease-out;-ms-flex-align:start;align-items:flex-start;color:var(--pine-color-text);display:-ms-inline-flexbox;display:inline-flex;-ms-flex-flow:row wrap;flex-flow:row wrap;position:relative}:host(.pds-switch--error){color:var(--pine-color-text-message-danger)}:host(.pds-switch--error) input,:host(.pds-switch--error) input:checked,:host(.pds-switch--error) input:hover:not(:disabled):not(:checked){background-color:var(--pine-color-danger)}:host(.pds-switch--error) input:focus-visible:not(:disabled):not(:checked){outline-color:var(--pine-color-focus-ring-danger)}:host(.pds-switch--error) label{color:var(--color-text-error)}input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--pine-color-neutral);border:0;border-radius:var(--pine-dimension-sm);cursor:pointer;display:inline-block;-ms-flex-negative:0;flex-shrink:0;height:var(--pine-dimension-250);margin:0;padding:0;position:relative;-webkit-transition:var(--number-transition-timing);transition:var(--number-transition-timing);-webkit-transition-property:background, border, color;transition-property:background, border, color;width:var(--pine-dimension-450)}input::after{background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);-webkit-box-shadow:var(--pine-box-shadow);box-shadow:var(--pine-box-shadow);content:"";display:block;height:var(--sizing-input-toggle-size);inset-block-start:50%;inset-inline-start:var(--pine-dimension-025);position:absolute;-webkit-transform:translateY(-50%);transform:translateY(-50%);-webkit-transition:inset-inline-start var(--number-transition-timing);transition:inset-inline-start var(--number-transition-timing);width:var(--sizing-input-toggle-size)}label{display:-ms-flexbox;display:flex;gap:var(--pine-dimension-150)}:host(.pds-switch--label-slot) label{-ms-flex-align:center;align-items:center}.pds-switch--error label{color:inherit}.visually-hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-switch__message{color:var(--pine-color-text-message);font:var(--pine-typography-body-sm-medium);-webkit-margin-before:var(--pine-dimension-xs);margin-block-start:var(--pine-dimension-xs);-webkit-margin-start:var(--spacing-message-inline);margin-inline-start:var(--spacing-message-inline);width:100%}.pds-switch__message+.pds-switch__message{-webkit-margin-before:var(--spacing-message-inline);margin-block-start:var(--spacing-message-inline)}.pds-switch__message--error{color:inherit;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-2xs)}.pds-switch__message--error pds-icon{-webkit-margin-before:var(--pine-dimension-025);margin-block-start:var(--pine-dimension-025)}input:disabled{background-color:var(--pine-color-neutral-disabled);cursor:not-allowed}input:disabled~label{cursor:initial}input:disabled:hover::after{background-color:var(--pine-color-secondary)}input:disabled .pds-switch__message{color:initial}input:hover:not(:disabled){background-color:var(--pine-color-neutral-hover)}input:focus-visible:not(:disabled){outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}input:checked::after{inset-inline-start:calc(100% - var(--sizing-input-toggle-size) - var(--pine-dimension-025))}input:checked:not(:disabled){background-color:currentColor;color:var(--pine-color-accent)}input:checked:not(:disabled):hover{border-color:currentColor;color:var(--pine-color-accent-hover)}`;
 
 const PdsSwitch = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.pdsSwitchChange = index.createEvent(this, "pdsSwitchChange", 7);
+        this.pdsSwitchChange = index.createEvent(this, "pdsSwitchChange");
+        this.inheritedAttributes = {};
+        this._type = 'checkbox';
+        this.forwardsDescription = false;
+        this.hostKeeper = new attributes.HostStylingKeeper();
+        this.hasLabelSlot = false;
+        // Kept apart from the `disabled` prop so a fieldset never overwrites what the consumer set.
+        this.fieldsetDisabled = false;
+        /**
+         * Determines the input 'checked' state.
+         */
+        this.checked = false;
+        /**
+         * Determines the input 'disabled' state, preventing user interaction.
+         */
+        this.disabled = false;
+        /**
+         * Determines whether or not the switch is invalid.
+         */
+        this.invalid = false;
+        /**
+         * Determines the 'required' state of the input.
+         */
+        this.required = false;
         this.onSwitchUpdate = (e) => {
-            if (this.disabled)
+            if (this.isDisabled())
                 return;
+            const input = e.target;
+            this.checked = input.checked;
+            this.updateFormValue();
             this.pdsSwitchChange.emit(e);
         };
-        /**
-         * Generate switch classes
-         */
         this.switchClassNames = () => {
             let switchClasses = `pds-switch`;
             if (this.invalid === true) {
@@ -28,29 +54,161 @@ const PdsSwitch = class {
             if (this.helperMessage !== undefined) {
                 switchClasses += " pds-switch--message";
             }
+            if (this.hasLabelSlot) {
+                switchClasses += " pds-switch--label-slot";
+            }
             return switchClasses;
         };
-        this.componentId = undefined;
-        this.checked = false;
-        this.disabled = false;
-        this.errorMessage = undefined;
-        this.helperMessage = undefined;
-        this.invalid = false;
-        this.label = undefined;
-        this.name = undefined;
-        this.required = false;
-        this.type = 'checkbox';
-        this.value = undefined;
+        // An ID on the host can't reach into the shadow root, so the input is pointed at the elements the host's
+        // aria-describedby names, followed by its own helper or error message. A browser without ARIA element
+        // reflection keeps the input's own message only.
+        this.forwardDescription = () => {
+            var _a;
+            const input = this.inputEl;
+            if (input === undefined || !('ariaDescribedByElements' in input))
+                return;
+            const ownId = this.ownDescriptionId();
+            const referenced = ariaReferences.referencedElements(this.el, 'aria-describedby');
+            if (referenced.length === 0) {
+                if (!this.forwardsDescription)
+                    return;
+                this.forwardsDescription = false;
+                // Setting the element property cleared the attribute render wrote, so put that back.
+                if (ownId !== undefined) {
+                    input.setAttribute('aria-describedby', ownId);
+                }
+                else {
+                    input.removeAttribute('aria-describedby');
+                }
+                return;
+            }
+            const own = ownId === undefined ? null : (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.getElementById(ownId);
+            input.ariaDescribedByElements = own == null ? referenced : [...referenced, own];
+            this.forwardsDescription = true;
+        };
+        this.updateHasLabelSlot = () => {
+            this.hasLabelSlot = Array.from(this.el.children).some((child) => child.getAttribute('slot') === 'label');
+        };
+    }
+    isDisabled() {
+        return this.disabled || this.fieldsetDisabled;
+    }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+        // Initialize ElementInternals for form association (only once per element instance)
+        if (this.el.attachInternals && !this.internals) {
+            this.internals = this.el.attachInternals();
+        }
+        // Expose type property on the element instance to match native form element behavior
+        form.exposeTypeProperty(this.el, () => this._type);
+        // A reconnected switch may sit in a different tree, where its description IDs name other elements.
+        this.forwardDescription();
+        if (typeof MutationObserver === 'undefined')
+            return;
+        // Consumers set aria-describedby on the host, sometimes after render, but only the inner input is announced.
+        this.hostDescriptionObserver = new MutationObserver(this.forwardDescription);
+        this.hostDescriptionObserver.observe(this.el, { attributeFilter: ['aria-describedby'] });
+    }
+    disconnectedCallback() {
+        var _a;
+        this.hostKeeper.disconnect();
+        (_a = this.hostDescriptionObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.hostDescriptionObserver = undefined;
+    }
+    componentDidRender() {
+        this.forwardDescription();
+    }
+    componentDidLoad() {
+        this.updateFormValue();
+    }
+    syncFormValue() {
+        this.updateFormValue();
+    }
+    updateFormValue() {
+        if (form.isSpecTest())
+            return;
+        if (this.internals && this.internals.setFormValue) {
+            // The restoration state always carries the checked value, even while disabled, so a bfcache or
+            // back-forward restore can bring back a checked-then-disabled switch instead of losing it to a null state.
+            this.internals.setFormValue(this.formValue(), this.checkedValue());
+        }
+        if (this.internals && this.internals.setValidity) {
+            this.internals.setValidity({});
+        }
+    }
+    // Unchecked sends uncheckedValue when set, even an empty string, otherwise nothing. Disabled sends nothing, like a
+    // native checkbox: the platform only leaves out a host with the disabled attribute present, which is also how
+    // React's own custom-element attribute serialization writes it.
+    formValue() {
+        if (this.isDisabled())
+            return null;
+        return this.checkedValue();
+    }
+    checkedValue() {
+        var _a;
+        if (this.checked)
+            return this.value || 'on';
+        return (_a = this.uncheckedValue) !== null && _a !== void 0 ? _a : null;
+    }
+    ownDescriptionId() {
+        return form.assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage);
+    }
+    formStateRestoreCallback(state) {
+        if (state instanceof FormData) {
+            // For switches, restore if the value exists in FormData
+            const value = this.value || 'on';
+            this.checked = state.get(this.name || this.componentId) === value;
+        }
+        else if (typeof state === 'string') {
+            // Restore from string state
+            this.checked = state === (this.value || 'on');
+        }
+    }
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled) {
+        // Also fires when this element's own `disabled` attribute is merely present, even as the
+        // literal string "false" (a consumer's or React's attribute serialization can write that) —
+        // the platform treats any value as disabled, independent of fieldset state. A real disabled
+        // fieldset ancestor confirms this is genuinely that, not this element's own attribute.
+        this.fieldsetDisabled = disabled && this.el.closest('fieldset[disabled]') !== null;
+    }
+    componentWillLoad() {
+        this.inheritedAttributes = Object.assign({}, attributes.inheritAriaAttributes(this.el, ['aria-describedby']));
+        this.updateHasLabelSlot();
     }
     render() {
-        return (index.h(index.Host, { key: '5c33e5bd4a42f187450a81faec033832524f1b29', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, index.h("input", { key: 'cb2a8287cdb44f337b4ecae15968e823f314b4d1', "aria-describedby": pdsLabel.assignDescription(this.componentId, this.invalid, this.helperMessage), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.disabled, id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate, required: this.required, type: this.type, value: this.value }), index.h(pdsLabel.PdsLabel, { key: '86c700a16a23513b3ba34f2add1775274ecc6784', classNames: "pds-switch__label", htmlFor: this.componentId, text: this.label }), this.helperMessage &&
-            index.h("div", { key: '30c8b18c990a54330bf3442d9cbbb35387de0ec3', class: `pds-switch__message`, id: pdsLabel.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            index.h("div", { key: '1eb57d78271d8c1fbe2fa680eeb88fd2fd1d35c9', class: `pds-switch__message pds-switch__message--error`, id: pdsLabel.messageId(this.componentId, 'error'), "aria-live": "assertive" }, this.errorMessage)));
+        const hostClass = this.switchClassNames();
+        const ariaDisabled = this.isDisabled() ? 'true' : null;
+        this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
+        return (index.h(index.Host, { key: '4c6f12c064caead89979cc4aa0ef25c4581381c3', class: hostClass, "aria-disabled": ariaDisabled }, index.h("label", { key: 'c97164a6d6318be6cbcc026373e3d5c0a9316d56', htmlFor: this.componentId }, index.h("input", Object.assign({ key: 'dfaf7408c3fbbed38bd0732ff156e53f57235100', "aria-describedby": this.ownDescriptionId(), "aria-invalid": this.invalid ? "true" : undefined, checked: this.checked, class: "pds-switch__input", disabled: this.isDisabled(), id: this.componentId, name: this.name ? this.name : this.componentId, onChange: this.onSwitchUpdate,
+            // A description added after the switch, or replaced by a framework or a DOM morph, is picked up by the
+            // time focus reaches the switch and it's announced.
+            onFocus: this.forwardDescription, ref: (el) => (this.inputEl = el), required: this.required, type: "checkbox", value: this.value }, this.inheritedAttributes)), index.h("span", { key: '5e621fa2881bb2d1eddd3dcbc33173f3cf49bd93', class: this.hideLabel ? 'visually-hidden' : '' }, index.h("slot", { key: 'ef682ce320b8d9f2897676af97e0b4d55c55358a', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
+            index.h("div", { key: '145da644abc8829de20ca6f9c4532f5341dec441', class: `pds-switch__message`, id: form.messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            index.h("div", { key: '7766e34f6daaf760d78aec6f08b64f0de15deb4c', class: `pds-switch__message pds-switch__message--error`, id: form.messageId(this.componentId, 'error'), "aria-live": "assertive" }, index.h("pds-icon", { key: '74dfd91aabf60608e8278ef84119466a2143ffc7', "aria-hidden": "true", icon: index$1.danger, size: "small" }), this.errorMessage)));
     }
+    static get formAssociated() { return true; }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "checked": [{
+                "syncFormValue": 0
+            }],
+        "disabled": [{
+                "syncFormValue": 0
+            }],
+        "fieldsetDisabled": [{
+                "syncFormValue": 0
+            }],
+        "uncheckedValue": [{
+                "syncFormValue": 0
+            }],
+        "value": [{
+                "syncFormValue": 0
+            }]
+    }; }
 };
-PdsSwitch.style = PdsSwitchStyle0;
+PdsSwitch.style = labelCss() + pdsSwitchCss();
 
 exports.pds_switch = PdsSwitch;
-
-//# sourceMappingURL=pds-switch.cjs.entry.js.map

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

@@ -1,34 +1,96 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
+var reconnectedContent = require('./reconnected-content-CpnEQcTp.js');
+require('./keep-hydrated-AKoh0DG4.js');
 
-const index = require('./index-46fb0736.js');
-
-const 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");
+        this.hostKeeper = new attributes.HostStylingKeeper();
+        /**
+         * 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;
     }
+    connectedCallback() {
+        this.hostKeeper.connect(this.el);
+    }
+    disconnectedCallback() {
+        this.hostKeeper.disconnect();
+    }
+    // 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' })))));
+        // The docs show consumers omitting `slot`, so server HTML doesn't carry it — a DOM morph
+        // that strips it leaves this tab unslotted, and pds-tabs has no default slot. Put it back.
+        this.hostKeeper.record('', {}, { slot: 'tabs' });
+        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,18 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+require('./keep-hydrated-AKoh0DG4.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: '4b4da65979e3d3557d05cb9aff8d257d29e2c0a5', role: "rowgroup", part: "body" }, index.h("slot", { key: '70dcd401a705a430c54c57bf994a410a636c4a53' })));
     }
 };
-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,157 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var index = require('./index-D9iJuJCP.js');
+var closest = require('./closest-D0qyYtJ3.js');
+var scroll = require('./scroll-2XcoE_6Q.js');
+var truncationTooltip = require('./truncation-tooltip-CM5HgRHh.js');
+require('./keep-hydrated-AKoh0DG4.js');
+require('./floating-ui.dom-Dw41zbyY.js');
+require('./portal-target-e8WQ6dLx.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;
+        this.hasLoaded = false;
+        /**
+         * 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;
             }
-            else {
-                this.tableScrolling = false;
+            try {
+                this.tableScrolling = scroll.isScrolledFromInlineStart(this.scrollContainer);
+            }
+            catch (error) {
+                console.warn('Scroll handler error:', error);
             }
         };
-        this.truncate = undefined;
-        this.tableScrolling = false;
     }
     componentWillRender() {
-        this.tableRef = this.hostElement.closest('pds-table');
+        // The shadow-crossing `closest` util, not the native one -- a selectable row's checkbox
+        // cell lives inside pds-table-row's own shadow root, which native `closest` can't see past.
+        this.tableRef = closest.closest('pds-table', this.hostElement);
+    }
+    // Fires again each time the cell is moved (a sort re-appends every row), unlike componentDidLoad,
+    // so it re-binds what disconnectedCallback tore down. The tooltip binds to the host, which exists before load.
+    connectedCallback() {
+        if (!this.hasLoaded)
+            return;
+        this.tableRef = closest.closest('pds-table', this.hostElement);
+        this.cleanupScrollListener();
+        if (this.needsScrollShadow) {
+            this.setupScrollListener();
+        }
+        if (this.truncate) {
+            this.initTruncationTooltip();
+        }
     }
     componentDidLoad() {
-        if (this.tableRef && this.tableRef.responsive && this.tableRef.fixedColumn) {
-            this.tableRef.addEventListener('scroll', this.handleScroll);
+        this.hasLoaded = true;
+        if (this.needsScrollShadow) {
+            // 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();
+    }
+    get needsScrollShadow() {
+        var _a;
+        return Boolean(((_a = this.tableRef) === null || _a === void 0 ? void 0 : _a.responsive) && this.tableRef.fixedColumn);
+    }
+    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
+        // Without a listener there's no way to know the scroll position any more, so the shadow
+        // this drove shouldn't linger -- matters when a rebind tears this down without setting it
+        // back up (responsive turned off while scrolled), not just on disconnect.
+        this.tableScrolling = false;
+    }
+    /**
+     * Re-binds the scroll listener to the table's current responsive container. Called by
+     * `pds-table` after a live `responsive` toggle: the cell stays in light DOM across that change,
+     * so it never reconnects on its own and would otherwise keep listening to a container the
+     * table already replaced or removed.
+     */
+    async rebindScrollListener() {
+        this.cleanupScrollListener();
+        if (this.needsScrollShadow) {
+            this.setupScrollListener();
+        }
+    }
+    handleTruncateChange(newValue) {
+        if (newValue) {
+            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 +159,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 +171,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: 'bc40b70bcb8f1df7307df6c00e3b73427c8d5ff2', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, index.h("slot", { key: '40dafc4697ba077a121979b604100107f51e9ff1' })));
+                : {} }, index.h("slot", { key: '418219bf8b870557f5f39ae6553db78fe7037389' })));
     }
     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