@pine-ds/core 4.0.0 → 4.2.0

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

@@ -33,6 +33,19 @@ export class PdsModal {
          * @default false
          */
         this.disableTopLayer = false;
+        /**
+         * Whether to skip moving focus into the modal when it opens — both our own
+         * `setInitialFocus()` and the browser's native "dialog focusing steps",
+         * which move focus into the dialog as soon as `show()`/`showModal()` is
+         * called regardless of application code. Focus return on close is
+         * unaffected either way. For a modal opened by something other than a
+         * direct user click — a redirect, a deep link, a background event —
+         * stealing focus on open can interrupt whatever the user was already
+         * doing. Default `false` preserves today's behavior for every existing
+         * consumer.
+         * @default false
+         */
+        this.disableInitialFocus = false;
         /**
          * Stores the list of focusable elements in the modal
          */
@@ -49,16 +62,41 @@ export class PdsModal {
             }
         };
         this.handleKeyDown = (e) => {
+            var _a, _b, _c;
             // If the modal is not open, don't handle any keyboard events
             if (!this.open)
                 return;
             // Handle Escape key to close the modal
             if (e.key === 'Escape') {
-                // In non-top-layer mode, focus can move into an overlay stacked above the
-                // modal (the reason disableTopLayer exists). If that overlay owns focus,
-                // leave Escape to it rather than dismissing this modal out from under it.
-                const active = document.activeElement;
-                if (this.disableTopLayer && active && active !== document.body && !this.el.contains(active)) {
+                // Every open pds-modal shares this document-level listener for the
+                // same keydown event. Whichever one runs first can synchronously move
+                // focus (hideModal() restores it), which would make a later instance's
+                // own read of document.activeElement reflect that side effect instead
+                // of where focus actually was when the key was pressed — stacking two
+                // sibling modals closing on one Escape instead of just the top one.
+                // That alone isn't enough, though: isStackedAboveOverlay's `:modal`
+                // check reads LIVE top-layer state, and hideModal()'s close() clears it
+                // synchronously — so whichever sibling's listener runs first (DOM
+                // order, not z-index) can close itself and erase the very evidence a
+                // later listener needs to recognize it was stacked above. Snapshot that
+                // determination too, in the same first-listener-wins block, before any
+                // instance has had a chance to act on this keypress.
+                const eventSnapshot = e;
+                if (!('__pdsActiveElementAtEscape' in eventSnapshot)) {
+                    const activeAtDispatch = document.activeElement;
+                    eventSnapshot.__pdsActiveElementAtEscape = activeAtDispatch;
+                    const topLayerDialog = (_a = activeAtDispatch === null || activeAtDispatch === void 0 ? void 0 : activeAtDispatch.closest('dialog')) !== null && _a !== void 0 ? _a : null;
+                    eventSnapshot.__pdsTopLayerDialogAtEscape = topLayerDialog;
+                    eventSnapshot.__pdsTopLayerDialogWasModalAtEscape = !!(topLayerDialog && topLayerDialog.matches(':modal'));
+                }
+                // Leave Escape to a genuinely stacked-above overlay (disableTopLayer's
+                // reason for existing) — not just to anything outside this modal.
+                const active = eventSnapshot.__pdsActiveElementAtEscape;
+                if (this.disableTopLayer &&
+                    active &&
+                    active !== document.body &&
+                    !this.el.contains(active) &&
+                    this.isStackedAboveOverlay(active, (_b = eventSnapshot.__pdsTopLayerDialogAtEscape) !== null && _b !== void 0 ? _b : null, (_c = eventSnapshot.__pdsTopLayerDialogWasModalAtEscape) !== null && _c !== void 0 ? _c : false)) {
                     return;
                 }
                 // Always prevent native dialog close behavior
@@ -106,6 +144,16 @@ export class PdsModal {
         this.modalRef = this.el.querySelector('.pds-modal__backdrop');
         // Add keyboard event listener
         document.addEventListener('keydown', this.handleKeyDown);
+        // @Watch('open') only fires on a later change, not the prop's initial
+        // value — a modal mounted with `open` already true (static markup, or a
+        // framework passing it on first render) would otherwise never call
+        // show()/showModal(): the panel still appears, since that's driven by the
+        // `open` CSS class, but the native <dialog> itself was never opened, so
+        // there's no top-layer promotion, no dialog focusing steps, and no
+        // focusable-elements list or previousActiveElement captured.
+        if (this.open) {
+            this.showModal();
+        }
     }
     // Unwraps a nested dialog.pds-modal__backdrop left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
@@ -211,8 +259,39 @@ export class PdsModal {
                 // Update focusable elements and set initial focus
                 // Using a longer timeout to ensure all components are fully rendered
                 setTimeout(() => {
+                    var _a, _b;
                     this.updateFocusableElements();
-                    this.setInitialFocus();
+                    if (this.disableInitialFocus) {
+                        // show()/showModal() also move focus into the dialog natively (the
+                        // HTML spec's "dialog focusing steps") — that native step isn't
+                        // necessarily done by the time this task runs either, so counter it
+                        // here, in the same deferred slot setInitialFocus() below uses for
+                        // the same reason, rather than racing it synchronously above.
+                        //
+                        // disableInitialFocus exists for a drawer that can open in the
+                        // background while the user is mid-task elsewhere — by the time
+                        // this runs, they may have already clicked into something of
+                        // their own outside the dialog. Only act if focus is still where
+                        // the native steps (or nothing) left it, so that isn't stolen.
+                        const activeElement = document.activeElement;
+                        const focusAlreadyClaimedElsewhere = activeElement !== null && activeElement !== document.body && !((_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.contains(activeElement));
+                        if (!focusAlreadyClaimedElsewhere) {
+                            if (this.previousActiveElement !== document.body && typeof ((_b = this.previousActiveElement) === null || _b === void 0 ? void 0 : _b.focus) === 'function') {
+                                this.previousActiveElement.focus();
+                            }
+                            else if (activeElement instanceof HTMLElement) {
+                                // Nothing was focused before opening (previousActiveElement is
+                                // body), so there's nothing to restore focus to — body.focus()
+                                // would be a no-op and leave focus wherever the native focusing
+                                // steps put it, inside the dialog. Blur that instead so focus
+                                // ends up nowhere, matching the state before opening.
+                                activeElement.blur();
+                            }
+                        }
+                    }
+                    else {
+                        this.setInitialFocus();
+                    }
                     this.pdsModalOpen.emit();
                 }, 100);
             }
@@ -227,10 +306,22 @@ export class PdsModal {
     async hideModal() {
         if (this.modalRef) {
             try {
+                // Capture before close(): with the async task queue, a prop change
+                // that triggers hideModal() (e.g. light dismiss setting `open` false
+                // on a pointerdown elsewhere) doesn't run until the next frame — by
+                // then the browser has already moved focus to whatever the user's
+                // click actually landed on. Restoring previousActiveElement in that
+                // case would steal focus back from a real new destination; only
+                // restore it when focus is still inside the modal (or nowhere, i.e.
+                // document.body), meaning nothing else has claimed it since.
+                const activeElement = document.activeElement;
+                const focusAlreadyMovedElsewhere = activeElement !== null && activeElement !== document.body && !this.modalRef.contains(activeElement);
                 this.modalRef.close();
                 this.open = false;
                 // Restore focus to the element that was focused before the modal was opened
-                if (this.previousActiveElement && typeof this.previousActiveElement.focus === 'function') {
+                if (!focusAlreadyMovedElsewhere &&
+                    this.previousActiveElement &&
+                    typeof this.previousActiveElement.focus === 'function') {
                     this.previousActiveElement.focus();
                 }
                 this.pdsModalClose.emit();
@@ -247,6 +338,46 @@ export class PdsModal {
         const backdrop = modal.querySelector('.pds-modal__backdrop');
         return backdrop ? parseInt(getComputedStyle(backdrop).zIndex, 10) : -1;
     }
+    /**
+     * Whether `active` sits inside a surface actually stacked above this modal.
+     *
+     * Used to decide whether an Escape keypress belongs to that surface instead
+     * of this modal. Focus being merely *outside* this modal is not enough on
+     * its own: in `disableTopLayer` mode the page stays interactive (that's the
+     * point of a non-modal usage like a drawer), so focus will routinely be on
+     * ordinary page content while the modal is open, and that must not be
+     * mistaken for "an overlay owns Escape."
+     *
+     * Two ways a surface can be above: it is itself promoted to the browser's
+     * top layer (a regular `showModal()` dialog, which paints above everything
+     * outside the top layer regardless of z-index — a sibling pds-modal opened
+     * over a `disableTopLayer` drawer typically shares the exact same z-index
+     * token, so a numeric comparison alone would miss it), or it has a higher
+     * z-index than this modal's own backdrop (a `disableTopLayer` overlay, or
+     * anything else deliberately raised above it).
+     *
+     * `topLayerDialog` / `topLayerDialogWasModal` come pre-snapshotted from the
+     * keydown event (see handleKeyDown) rather than being re-derived here: by
+     * the time a later sibling modal's listener runs, an earlier one may have
+     * already closed itself, which clears `:modal` — reading it live here would
+     * lose that evidence depending on listener order.
+     */
+    isStackedAboveOverlay(active, topLayerDialog, topLayerDialogWasModal) {
+        if (topLayerDialog && topLayerDialog !== this.modalRef && topLayerDialogWasModal) {
+            return true;
+        }
+        const ownZIndex = this.getBackdropZIndex(this.el);
+        let node = active;
+        while (node && node !== document.body) {
+            const style = getComputedStyle(node);
+            const zIndex = parseInt(style.zIndex, 10);
+            if (style.position !== 'static' && !isNaN(zIndex) && zIndex > ownZIndex) {
+                return true;
+            }
+            node = node.parentElement;
+        }
+        return false;
+    }
     /**
      * Checks if this modal is the innermost (highest z-index) modal
      */
@@ -268,14 +399,14 @@ export class PdsModal {
         return thisZIndex === maxZIndex;
     }
     render() {
-        return (h("dialog", { key: '134e913f0bf5d7bf77e67f00707a399fae986fcb', class: {
+        return (h("dialog", { key: 'f35044ec9bca1189069faf083c824d8144800053', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '6cb819a92c00b5c8676b4d1a84301896373305f3', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: '99a53b36e160ac14dfd6d598aeaa94114855dacc', class: {
                 'pds-modal': true,
                 [`pds-modal--${this.size}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, h("slot", { key: 'aff0f88a7b9e1b4b681a6a14636153ce3a6907d5' }))));
+            }, part: "modal" }, h("slot", { key: 'cfee7bdf3620d606b1d3130f4ebed4caa83084f1' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {
@@ -423,6 +554,29 @@ export class PdsModal {
                 "reflect": false,
                 "attribute": "disable-top-layer",
                 "defaultValue": "false"
+            },
+            "disableInitialFocus": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "false"
+                        }],
+                    "text": "Whether to skip moving focus into the modal when it opens \u2014 both our own\n`setInitialFocus()` and the browser's native \"dialog focusing steps\",\nwhich move focus into the dialog as soon as `show()`/`showModal()` is\ncalled regardless of application code. Focus return on close is\nunaffected either way. For a modal opened by something other than a\ndirect user click \u2014 a redirect, a deep link, a background event \u2014\nstealing focus on open can interrupt whatever the user was already\ndoing. Default `false` preserves today's behavior for every existing\nconsumer."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disable-initial-focus",
+                "defaultValue": "false"
             }
         };
     }

package/dist/collection/components/pds-modal/test/mock-pds-modal.js

@@ -77,7 +77,7 @@ export class MockPdsModal {
             'pds-modal__backdrop': true,
             'open': this.open,
         };
-        return (h("div", { key: '6e7f71b339764894e1f17d253fc3c8e0243e4f90', class: backdropClasses }, h("div", { key: '25b2f82c1af743156d152880631d4294dfec68b5', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '6bc97e805daee5e5dd547fa0b919a05cf1b6a6a1', class: "pds-modal__header" }, h("slot", { key: 'd9e7c248d983e3c055ed7e0aea5a4d5a15dfea12', name: "header" })), h("div", { key: '5608ee069b59cb34dc812bde22f83c6bce7e6904', class: "pds-modal-content" }, h("slot", { key: '6e3e790330598e1bde733350e5e216d269426e51' })), h("div", { key: '381f3c4e1c9c83b0687e1f1484b64334e388d669', class: "pds-modal__footer" }, h("slot", { key: '6e3a3cb64623de59a409072ab9c1bf65af8c2f6c', name: "footer" })))));
+        return (h("div", { key: '1207382ec39e45f95449791cd9fbf3ad54a17564', class: backdropClasses }, h("div", { key: '865cff8feaf031750e6763d60580f9060dfc0c91', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: 'b49ba7c717999b53578056ad35c4ec270dbdfd01', class: "pds-modal__header" }, h("slot", { key: '2c06b0f0c4692f1991eb389a73b751d38796c1cf', name: "header" })), h("div", { key: 'ca0e6f324db12de5bd0c21b53bf888ab44c0d34c', class: "pds-modal-content" }, h("slot", { key: 'cef74e83f58195b574f9a290f748cecb2561668e' })), h("div", { key: '65518e197e80fa0cd8ea8cbbd9bb10a064e251ca', class: "pds-modal__footer" }, h("slot", { key: '8cd72b932b7c4d31cf9ecb8f0c37d9a5b5ca7594', name: "footer" })))));
     }
     static get is() { return "mock-pds-modal"; }
     static get originalStyleUrls() {

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

@@ -1021,10 +1021,10 @@ export class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (h(Host, { key: '4a54a778522d0a1d2f45c32928e7a663f19c0189', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '3593eb4fa1a0ae575b1c0ed03f0763dcea04c9e6', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'f91a680ae3c3021bac6bd99368d3ef6ad6438898', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (h(Host, { key: '5d4de9ca729d5bfb63a8a73f8f40328b9ab48f57', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '2b5e1e01caaa4a6540a67e2638a20072e9f706cb', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'f23b840feb4e243d90b3a9913dab1b238e7c497d', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), h("div", { key: 'de2899f19057b8cd19cf3467251d03c1b43b73f5', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), h("div", { key: '2e1f89d6f06332e957858c0eea34fca1a9629921', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (h("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
                 'pds-multiselect__trigger': true,
                 'pds-multiselect__trigger--open': this.isOpen,
                 'pds-multiselect__trigger--disabled': this.disabled,
@@ -1040,7 +1040,7 @@ export class PdsMultiselect {
             }, id: this.componentId, disabled: this.disabled, "aria-required": this.required ? 'true' : undefined, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": "listbox", "aria-describedby": assignDescription(this.componentId, this.invalid || !!this.errorMessage, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid || !!this.errorMessage ? 'true' : undefined, onClick: this.handleTriggerClick, onKeyDown: this.handleTriggerKeyDown }, h("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '199804f5352818d32542864e3a61f7a9364cc2e3', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: 'e6855ff0aaf18f59dced2df5d636cadb4d47427b', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '29eae23d8db31b9b9c292d5cd1dc5f641613ed32', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'aad6fd945998957cd28ab6eb97c4d80f0a732ea5', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '7d0d56a1e097cfc0c7396c1957d16014cb071b1e', style: { display: 'none' } }, h("slot", { key: '6e7fc9dbdab3977248439aa5ea14f13e0f45bbc6' })))));
+            } }, this.getTriggerText()), h("pds-icon", { class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), h("span", { key: '3d2e201157ce16abbcd12fa9254ced7f2b562a8f', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '3bbf405df2e72ae730529f28273b003b3332e980', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: 'ef4a27162b00b14c3c9dfcb695f311961f2f56e5', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '99fb12375e2d660018276091bf8014b9bc9a672e', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '8fc6369015e8d04d1dec582007733eb5db6776f5', style: { display: 'none' } }, h("slot", { key: 'a808ecb0f4b2c00fca478cda5c0054c6aba29a8d' })))));
     }
     static get is() { return "pds-multiselect"; }
     static get encapsulation() { return "shadow"; }

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

@@ -554,7 +554,7 @@ export class PdsPopover {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (h(Host, { key: '2e19ac35068ac25b013bd146da0b3b343eb89d75', id: this.componentId }, h("span", { key: 'e982ade010dc6539593759704e5afae29ce5eba8', class: "pds-popover__trigger-wrapper" }, h("slot", { key: 'f1e1ef5e3b0b52a96cb566175ea420e1d1545ccc', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'caa5762029db6430f174c8936611fe332889620d', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: 'cdad839643d1a5a2024cd55cdd33750f8665a366', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: '760428c178ed92dfc35293181b7cef8fac3b4e26', id: this.componentId }, h("span", { key: 'd12a6a33dcf0fe6f3b61972ae8e5ac604263b2ac', class: "pds-popover__trigger-wrapper" }, h("slot", { key: 'd975e355a3acb9bc6d95202ec177f631bddb43bf', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: 'f99ae2d97c75ed8ec63fbd0a859f8b7b9f78f0d2', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: 'd1620c57d993496045fc3c47b55cdd0c1d07b36c', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: '23b8b17a11e6537d1f73cd435c66e779267c6909', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '6bf201015c284f26b2bb794237aef8d4e4d532ee', class: "pds-progress" }, h("label", { key: '7e144a90c1fde70e58095bda2e23b250529a8114', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: 'ebf00485c3c7523e184fcc022e2bcc325a13458f', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '6f37bd88ccb9228b0d0ca4d934a2d3cff0026533', class: "pds-progress__percentage" }, this.percent, "%")));
+        return (h(Host, { key: '0ae02615ceeb094270d4d385d27dc1e539984e88', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: '8da2f2a5b260cb19cda3021cc9289bde18fff9fc', class: "pds-progress" }, h("label", { key: 'a84106244fafed602c1f14b63d83b16f123732f4', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '82fb1a46fb2e7c89d5b4ed4e8e3efa590c896d0d', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '36d041d1c5e656ac0864999200f48e15e53aa3f3', class: "pds-progress__percentage" }, this.percent, "%")));
     }
     static get is() { return "pds-progress"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,7 +10,7 @@ export class PdsProperty {
         this.icon = 'star';
     }
     render() {
-        return (h(Host, { key: '947e0adfc46ab267b4a5f3e3da5dedcd8ab64d3e', id: this.componentId }, h("pds-box", { key: 'bc6fbd4eaa162a7d9ff6348d74bf15f71e776db6', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '5d703e9afd94761aae842c82c7b5e9223b63b894', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: 'e5e02fb21c783f7e4027591e99cd966981babc04' }))));
+        return (h(Host, { key: '1ce4509363c6c40c76d7d6c17335721b348abf04', id: this.componentId }, h("pds-box", { key: '8c6f5dd171e0383640aa550ccbe1b20e74de5b07', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '31c19e7ff0c466f2fe54ad2d2366929311f01364', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: 'b5ddb877ef6f3239992a892c7990bbd4fcfa77ae' }))));
     }
     static get is() { return "pds-property"; }
     static get encapsulation() { return "shadow"; }

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

@@ -92,11 +92,11 @@ export class PdsRadio {
     }
     render() {
         const renderLabelAndMessages = () => [
-            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'd7534f457e24558e0e206e2de82eac5f59b47d8a', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: 'bfb6a44684fcbb271c38da03b620e97067af6634', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
+            h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'faa2d815e03f6b05108af0e7934101b2d5f71c59', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, type: "radio", id: this.componentId, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleRadioChange, class: this.hasImage() ? 'visually-hidden' : '' }), h("span", { key: '22df3067667a7815e03dca45e4ef49d0e1caadcc', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (h("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd0c120ce21687b550b22546330d647f9876ee4d6', icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (h("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '6dac17ccd12d558d3b25ffb77c55d160a619d6ab', icon: danger, size: "small" }), this.errorMessage))
         ];
-        return (h(Host, { key: '55e4f32776bc8a5835801cd7d48b29045d4ce17f', class: this.classNames() }, this.hasImage() && (h("div", { key: '3d9bf1d624c00ea90971638b2de7b548aec73330', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'a256ede1340cf052570330342b1ed9e5f299c821', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (h(Host, { key: 'b464057b9e8d5de710183803c7d5e825316b3c3b', class: this.classNames() }, this.hasImage() && (h("div", { key: '692b2681221596cdf4bf6a21574edb2373d5127b', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'd68951b5b671863d582ad1a98543a51832966b36', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     static get is() { return "pds-radio"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/pds-radio-group/pds-radio-group.js

@@ -160,13 +160,13 @@ export class PdsRadioGroup {
     render() {
         const gapValue = this.getGapValue();
         const ariaDescribedBy = this.getAriaDescribedBy();
-        return (h(Host, { key: '0f6b6ddc2af79fc470c050ed6b5588640fe0d7b6', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
+        return (h(Host, { key: '048d4676df7c31a9ab08e4d4fc2b93866c1241fd', class: this.classNames(), id: this._groupId, role: "group", "aria-describedby": ariaDescribedBy, style: {
                 '--pds-radio-group-gap': gapValue,
-            } }, this.groupLabel && (h("div", { key: '77dbdc4801c3ff50fa3ea6a84d3d6aa51702ad02', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: 'c8d7f6aebc39f72a57f353ac2f8677139ac77e71', class: {
+            } }, this.groupLabel && (h("div", { key: '414363733d6053517bb63888fb9813af6554d4df', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: 'd368dc474bf76f5cf7d633e59f929060fbf60b83', class: {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, h("slot", { key: '605e640fada693696e0b71205d18904b0af887b0', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '13cc1c7a6b70ce6826f91a68380bc46188b218e1', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '693dd2f784eb5de04f1b885948e7064936cffa7d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '1569aeeeffde77d4920627020d04983e860ea52e', icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: '210e1ba8d276c2832017ea7bf3d03348aa46106a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: '06015935856640afdcddfcd8833a3a0659c58698', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '44256d9a050feda9651f90093a298a12d9e97250', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '2b3aa1ffaa0f6a3ad0ce83d2becfcfdcc2f56fbc', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -55,7 +55,7 @@ export class PdsRow {
         })), (this.minHeight && {
             'min-height': this.minHeight,
         }));
-        return h(Host, { key: '7d99184153a86e5d7d2c90fce98e05e9c4a36b81', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
+        return h(Host, { key: '556bb00908d60df442b1fae17e28e54353f85f20', class: `pds-row ${rowClasses}`, style: rowInlineStyles });
     }
     static get is() { return "pds-row"; }
     static get originalStyleUrls() {

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

@@ -228,7 +228,7 @@ export class PdsSelect {
     }
     render() {
         const hasAction = this.el.querySelector('[slot="action"]') !== null;
-        return (h(Host, { key: 'c74f5e86a09bd3fe6e8048ca103ec9aa66a98fc6', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '76de23d6b0d9e32fab48e09a8f6ee3211e196115', class: "pds-select" }, !this.hideLabel && (h("div", { key: '1db87074447cbc819e6b06dd89135d018656a471', class: "pds-select__label-wrapper" }, h("label", { key: 'bc28c3b3361a19ee14a1b79edda736340009d87d', htmlFor: this.componentId }, h("span", { key: 'f0828e0e83c7c0d7cf50e08df4b861dad4df9eb9', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: 'd7d254887c976a95ad1f1da2ea540d6d3f986630', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: '793a84d41bd5e18d64757238704a053b1135a83c', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '27ed9ff31bbf83fcbd2ed8dd2b23b97422b18d25', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: '43d415eab0fc8a3c02e19848a5622ea43f04256e', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
+        return (h(Host, { key: '6b240f3f91bcbdc52f019b0b6c57afda91abcbc9', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '5bcacb3b861b69d4b2a16b917bad3d7c356eab13', class: "pds-select" }, !this.hideLabel && (h("div", { key: '4707b7b50a9e3144316f6c3e8b78767aee56553e', class: "pds-select__label-wrapper" }, h("label", { key: '89992c65158f26fef606b4f613baf139e9fe17c8', htmlFor: this.componentId }, h("span", { key: '8f05323646aca793a80310515b1cc6e0e8597736', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '8381fe48cce4c6ec32ae2c0dd16bc3e188fbfda0', "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-label": this.hideLabel ? this.label : undefined, autocomplete: this.autocomplete || undefined, class: "pds-select__field", disabled: this.disabled, id: this.componentId, multiple: this.multiple, name: this.name, onBlur: this.onBlur, onChange: this.onSelectUpdate, onFocus: this.onFocus, onKeyDown: this.onKeyDown, part: "select", required: this.required, ref: (el) => (this.selectEl = el) }), h("div", { key: 'c05f059e3c4e21d304ac1da08613d2b2d84aa342', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: 'b52f06405693803c0d2309e97f2611598cac7b70', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'e1e7af5249a928402a3c5dfe418f695b4e1fa7d4', "aria-hidden": "true", class: "pds-select__select-icon", icon: enlarge }))));
     }
     static get is() { return "pds-select"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-sortable/pds-sortable-item/pds-sortable-item.js

@@ -38,7 +38,7 @@ export class PdsSortableItem {
         }
     }
     render() {
-        return (h(Host, { key: '5533907ee217d31754ac19bf712bdb903e3b1614', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: '37642112619986b21c16c243e8d140ae82c869da', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '71ec5188d7443c39ab00ba8b24ffbfbdfb3bd5b4', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: '4c5f80514336f40086a3b92d8c3d5ebb04115f4a' }), this.enableActions && (h("div", { key: 'ca821be132fb88e0faa207817bb27db488475d96', class: "pds-sortable-item__actions" }, h("slot", { key: '50fc7b02c86246cd60710996399c53b9f1f669c4', name: "sortable-item-actions" })))));
+        return (h(Host, { key: '07dcd36e87b8fcfae7ff5f33a7bd8d44322fcbb3', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'cb2de083316c50beb63d700288c9091d01a99240', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '90906fe69419f1a240aa976e7024872577d00bd3', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'a6969eb7d575919db12f98e3fc5d82708128be8e' }), this.enableActions && (h("div", { key: '5688ea0ead3c2adba9e21a7fa327adc6fdbc71b1', class: "pds-sortable-item__actions" }, h("slot", { key: 'f62b4ecf0c92edae854e9b3ca5e9da6a5051f77d', name: "sortable-item-actions" })))));
     }
     static get is() { return "pds-sortable-item"; }
     static get encapsulation() { return "scoped"; }

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

@@ -57,7 +57,7 @@ export class PdsSortable {
         this.sortableInstance = Sortable.create(this.el, sortableOptions);
     }
     render() {
-        return (h(Host, { key: '562bfb1ecea0b3a3f246b2e277b71f70d14b854c', class: this.classNames(), id: this.componentId }, h("slot", { key: 'a1ff894a9cd6049e532d2fa744429cec6d97e280' })));
+        return (h(Host, { key: '235879c63aa8e55ea819fd3bcdb30ef56dd2c0b3', class: this.classNames(), id: this.componentId }, h("slot", { key: '28cb6ef1a3b1f7de15f1f2728ffa625c879890dc' })));
     }
     static get is() { return "pds-sortable"; }
     static get encapsulation() { return "scoped"; }

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

@@ -2,7 +2,7 @@
   --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: 0.15s ease-out;
+  --number-transition-timing: var(--pine-motion-duration-fast) ease-out;
   align-items: flex-start;
   color: var(--pine-color-text);
   display: inline-flex;

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

@@ -82,9 +82,9 @@ export class PdsSwitch {
         this.inheritedAttributes = Object.assign({}, inheritAriaAttributes(this.el));
     }
     render() {
-        return (h(Host, { key: '96ee8c40c04e95b461ba2942b740503897a56b27', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: '441d6854f2c0b02ecf3d874198b3e0636d68c83b', htmlFor: this.componentId }, h("input", Object.assign({ key: 'ed0c344ab46d83faf902571fcd282a605f5cfbec', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "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: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: 'a2e89156f56d6c921be9b866823bb4b36710b40f', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: '1465778f0a69d4c87108a80603d123bf0500911d', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '2a652c3019f45a060283f98ea97ac83e17d7de33', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '438895d9ad8799b540ab239ac90bedcb0231d2f0', icon: danger, size: "small" }), this.errorMessage)));
+        return (h(Host, { key: '0f7a97cc04485d5ead92f1d9e1deff176bef7859', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'bb8d0849e8ac5fd63d83f30d892bb195c7ed984c', htmlFor: this.componentId }, h("input", Object.assign({ key: 'd4f1c469ed61e5511fb4fef2b587b7320b7b8d10', "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "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: "checkbox", value: this.value }, this.inheritedAttributes)), h("span", { key: 'a902c71c77d143e5930f18ab3f37d3442d9190e3', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
+            h("div", { key: '3802a9cc1068caa4955634be3c728f283dedab16', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
+            h("div", { key: 'be0d4094af7f9c59be32faf42aed585ec92fd730', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f0f342b703fc5db7a4b03891ed5101e0ebcde47e', icon: danger, size: "small" }), this.errorMessage)));
     }
     static get is() { return "pds-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,7 +1,7 @@
 import { Host, h } from "@stencil/core";
 export class PdsTableBody {
     render() {
-        return (h(Host, { key: '457fc5406a1fe67055038398e03bfad97a393747', role: "rowgroup", part: "body" }, h("slot", { key: '5950bced36f7ba590f34173149cf8663ba76103b' })));
+        return (h(Host, { key: '38b6b6121a4652e5b98f2ff22721e687ae401437', role: "rowgroup", part: "body" }, h("slot", { key: '7ce84ac64307b9e19a8b4b72efe3e8eab34f99bf' })));
     }
     static get is() { return "pds-table-body"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,11 +123,11 @@ export class PdsTableCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'b108b0fce3ff0d5c503922a6c936ffd6ca52523f', class: this.classNames(), role: "gridcell", part: "cell", tabIndex: this.truncate ? 0 : undefined, style: this.tableRef &&
+        return (h(Host, { key: '1c37f341c8171d322d60647b25bfa92fdd9ea339', class: this.classNames(), role: "gridcell", part: "cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: 'ebc1709ef52029bc6afec2fa89a90d47620892cb' })));
+                : {} }, h("slot", { key: '339b2217df131c58d76258f581a53c0bd46cbd03' })));
     }
     static get is() { return "pds-table-cell"; }
     static get encapsulation() { return "shadow"; }
@@ -174,7 +174,7 @@ export class PdsTableCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Truncates content to a max width and adds an ellipsis.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility."
+                    "text": "Truncates content to a max width and adds an ellipsis.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: While the content is overflowing, the cell receives tabindex=\"0\" so the\ntooltip can be reached by keyboard. Content that fits is left out of the tab order."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -42,7 +42,7 @@ export class PdsTableHead {
         }
     }
     render() {
-        return (h(Host, { key: 'd5d5906bdb23794b911ecd5904a4cc58aa5380d6', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '85df57fb4371e4fba855e16ce62c8329b49e08cf', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (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" })))), h("slot", { key: '494dc0395da229a264c38540479f36967601cc26' })));
+        return (h(Host, { key: '5815389e77b61a323dd4430625b0917a7428bf02', role: "row", part: "head" }, this.tableRef && this.tableRef.selectable && (h("pds-table-head-cell", { key: '161fdced5a7c7cd13a62fb7c1ed96e82ad2dbfd0', part: this.tableRef.selectable ? 'checkbox-cell' : '' }, !this.tableRef.disableSelectAll && (h("pds-checkbox", { key: 'd6e90d844d314ef347ffb4db8b360ba36887c311', componentId: this.generateUniqueId(), indeterminate: this.indeterminate, onInput: this.handleInput, label: "Select All Rows", hideLabel: true, checked: this.isSelected, part: "select-all-checkbox" })))), h("slot", { key: '1dd5dd37d4fca230000a6eb4b96fee87e4e67802' })));
     }
     static get is() { return "pds-table-head"; }
     static get encapsulation() { return "shadow"; }

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

@@ -199,11 +199,11 @@ export class PdsTableHeadCell {
         return classNames.join(' ');
     }
     render() {
-        return (h(Host, { key: 'e0a30c326b81e0cc3fa8c0392b61f2a6625aad71', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
+        return (h(Host, { key: 'c30192a432bbd8868326fc7ed4199b98a33991ff', class: this.classNames(), role: "columnheader", onClick: this.toggleSort, part: "head-cell", style: this.tableRef &&
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '3d0012983b2b552e4e61a3d84717afb9de8e572f' }), this.sortable && this.isActive && (h("pds-icon", { key: '326607f90b12ecc26a731dc696d0a3b8ebb0960c', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, h("slot", { key: 'e725a7e576f6bc56d385c8cb0822ce255544fbcb' }), this.sortable && this.isActive && (h("pds-icon", { key: '52068d114bfadcd6d4e02c86e703349bc7833716', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -137,7 +137,7 @@ export class PdsTableRow {
         }
     }
     render() {
-        return (h(Host, { key: '6bbd8bb7cd1f90de0e418748bf8d3b9240ab0cb8', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '9a92396654e7cdf819536335ebe95169d4d4c26d', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: 'bf61a00da4d3c19280aae90d8eaff9515a716c52', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: 'f77887e878913bea5e0ca0a281a639285a65f1c1' })));
+        return (h(Host, { key: '4188f670137051d35cf73a5ca86566f65c3eca09', class: this.classNames(), role: "row", part: "row" }, this.tableRef && this.tableRef.selectable && (h("pds-table-cell", { key: '122ff6ec96ea4857b863f9283bd46946dc403bff', part: this.tableRef.fixedColumn ? 'checkbox-cell' : 'checkbox-cell', class: this.tableRef.selectable ? 'has-checkbox' : '' }, h("pds-checkbox", { key: '9997b31c86190fe8f25ba4d1b42b8753facbba70', componentId: this.generateUniqueId(), onPdsCheckboxChange: this.handleCheckboxChange, indeterminate: this.indeterminate, label: "Select Row", hideLabel: true, checked: this.isSelected, part: "row-checkbox" }))), h("slot", { key: 'f9bc0700386b11a35f78d639118351675ab7150d' })));
     }
     static get is() { return "pds-table-row"; }
     static get encapsulation() { return "shadow"; }

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

@@ -18,7 +18,7 @@ export class PdsTabpanel {
         unwrapReconnectedContent(this.el.querySelector('.pds-tabpanel'), '.pds-tabpanel');
     }
     render() {
-        return (h(Host, { key: '342748daeeba7a5e0d2daef6eb0d1c787cdb47ea', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: '72826548113720f89b9adcf017c1ca02a9f7a02a', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: 'f12d5bacd3ce3509c84720cdbd4441c82b1f8ced' }))));
+        return (h(Host, { key: 'e1dd3a854d6ceffff0688afb7ed02f3d56ae9333', slot: "tabpanels", class: this.stretch && this.selected ? "pds-tabpanel--stretch-active" : undefined }, h("div", { key: '381a763bc540659c8944ff48ccc1a41ad94dc087', role: "tabpanel", id: this.parentComponentId + "__" + this.name + '-panel', tabindex: "0", "aria-labelledby": this.parentComponentId + "__" + this.name, class: this.selected ? "pds-tabpanel is-active" : "pds-tabpanel" }, h("slot", { key: 'bdb11c6e68f701cf91fda68db5122bb9dfe7d894' }))));
     }
     static get is() { return "pds-tabpanel"; }
     static get originalStyleUrls() {

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

@@ -160,7 +160,7 @@ export class PdsTabs {
         // Navigation mode: a <nav> landmark of links (aria-current marks the current
         // page). Panel mode: the ARIA tablist of role=tab buttons over tabpanels.
         const tabList = this.isNav ? (h("nav", { class: "pds-tabs__tablist", "aria-label": this.tablistLabel || undefined, part: "tab-list" }, h("slot", { name: "tabs" }))) : (h("div", { class: "pds-tabs__tablist", role: "tablist", "aria-label": this.tablistLabel, part: "tab-list" }, h("slot", { name: "tabs" })));
-        return (h(Host, { key: '97bb6d788bd7bdf393b46eaecea612d9b0c9dee4', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, h("slot", { key: '252855bfa496bc3e04fbe6dc0bcb7597c7360407', name: "tabpanels" })));
+        return (h(Host, { key: 'f9d0e94dcacd7b94691368f08eb77b45475c0a35', "active-tab-name": this.activeTabName, class: this.classNames(), id: this.componentId }, tabList, h("slot", { key: '93c605b2bd4b8ad3dcd8f494a82fd30833e8b300', name: "tabpanels" })));
     }
     static get is() { return "pds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,7 +83,7 @@ export class PdsText {
             ? `pds-text--decoration-${this.decoration}`
             : ''}
     `;
-        return (h(Tag, { key: '9ae3d5a57202ca1308c69b76645168fc8e18953b', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content", tabIndex: this.truncate ? 0 : undefined }, h("slot", { key: 'e6c95b8240690a9c83927e206096bbd7615dd4d2' })));
+        return (h(Tag, { key: 'cf597479ded618a0674d68fd726b828d88c0e642', ref: (el) => (this.contentEl = el), style: this.color && setColor(this.color), class: typeClasses, part: "content" }, h("slot", { key: 'f9c163be5662522b012bca6b0a23cfe00860e474' })));
     }
     static get is() { return "pds-text"; }
     static get encapsulation() { return "shadow"; }
@@ -271,7 +271,7 @@ export class PdsText {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility."
+                    "text": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: While the text is overflowing, the element receives tabindex=\"0\" so the\ntooltip can be reached by keyboard. Text that fits is left out of the tab order."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -301,10 +301,10 @@ export class PdsTextarea {
     }
     render() {
         const value = this.getValue();
-        return (h(Host, { key: 'd13869d989752c76c80a46ebb0291df2c0546cc2', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '19454f642896485dc22bc5dac8b6ed3b4ae5627a', class: "pds-textarea" }, this.label &&
-            h("div", { key: 'def9e117ba3667a542e8cec32c2eabfa701c3305', class: "pds-textarea__label-wrapper" }, h("label", { key: '893a1db325ece460c627e72b765289098823e49e', htmlFor: this.componentId }, h("span", { key: 'd047f17441aa81800057d7403af15f6e38c53f6c', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '7d0f2fab56fee9b9d9e0facabc7e607cb6bee23b', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '261e6031c61832acde2d595248ccdc8bd5c84768', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
-            h("p", { key: 'de40f9d13bda3d9a224349b7f4ca38194e7adbb5', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: '1306917ce521c3ad0d303d255f9e7aefd0e65de7', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '1c9e22b9b4bf84f671797bbfb9080bdbdb7619a7', icon: danger, size: "small" }), this.errorMessage))));
+        return (h(Host, { key: '838d12ba686fb041996c44522d3fd30e1b56c610', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: 'bd3eef138a5c8f2cd4e48c007561bb1b12f4e575', class: "pds-textarea" }, this.label &&
+            h("div", { key: 'f83f23b17cd157d48bb5c0c5067ca5f611d73529', class: "pds-textarea__label-wrapper" }, h("label", { key: '896b7b495ad6f7deb8d4738e623f0676f0a98c1f', htmlFor: this.componentId }, h("span", { key: '02b06db969467f6c4e83e0f713bee0be76f8dfff', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: '15c5964576e73db36cee4a9ca868c28571250a27', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '4493797e03322993a8cbe5530a18a9ef984b9796', ref: (el) => this.nativeTextarea = el, "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, autocomplete: this.autocomplete, class: this.textareaClassNames(), disabled: this.disabled, id: this.componentId, maxlength: this.maxLength, name: this.name, placeholder: this.placeholder, readOnly: this.readonly, required: this.required, rows: this.rows, onBlur: this.onBlur, onChange: this.onTextareaChange, onFocus: this.onFocus, onInput: this.onInput, onKeyDown: this.onKeyDown }, this.inheritedAttributes), value), this.renderCharacterCounter()), this.helperMessage &&
+            h("p", { key: '9c8794ec733a3ece5eaeac74ef6a1ebb223558c3', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
+            h("p", { key: 'c4b9be66c3f3c39ddf495708f0f03cfda03e7fc6', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'c117b8d62c055382f5d43caa7f2cb880796c495b', icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }