@pine-ds/core 4.1.0 → 4.3.0

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

@@ -1,5 +1,9 @@
 import { h } from "@stencil/core";
 import { unwrapReconnectedContent } from "../../utils/reconnected-content";
+const PRESET_SIZES = ['sm', 'md', 'lg', 'fullscreen'];
+const isCustomLength = (value) => /^[a-z0-9.%+\-*/(), ]+$/i.test(value) &&
+    /\d/.test(value) &&
+    (typeof CSS === 'undefined' || CSS.supports('max-width', value));
 export class PdsModal {
     constructor() {
         this.focusableElements = [];
@@ -14,7 +18,9 @@ export class PdsModal {
          */
         this.open = false;
         /**
-         * The size of the modal
+         * The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom
+         * max-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size.
+         * A value that is neither falls back to 'md'.
          * @default 'md'
          */
         this.size = 'md';
@@ -33,6 +39,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 +68,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
@@ -102,10 +146,26 @@ export class PdsModal {
             }
         };
     }
+    componentWillLoad() {
+        this.warnOnInvalidSize();
+    }
+    sizeChanged() {
+        this.warnOnInvalidSize();
+    }
     componentDidLoad() {
         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 +271,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 +318,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 +350,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
      */
@@ -267,15 +410,28 @@ export class PdsModal {
         const thisZIndex = this.getBackdropZIndex(this.el);
         return thisZIndex === maxZIndex;
     }
+    resolveSize() {
+        var _a;
+        const size = ((_a = this.size) !== null && _a !== void 0 ? _a : '').trim() || 'md';
+        if (PRESET_SIZES.includes(size))
+            return [size];
+        return isCustomLength(size) ? ['custom', size] : [undefined];
+    }
+    warnOnInvalidSize() {
+        if (this.resolveSize()[0] !== undefined)
+            return;
+        console.warn(`pds-modal: invalid size "${String(this.size).slice(0, 50)}", using md`);
+    }
     render() {
-        return (h("dialog", { key: '65d204a57e193022eb475c113438a40fc77cf545', class: {
+        const [sizeClass = 'md', customSize] = this.resolveSize();
+        return (h("dialog", { key: 'bbc56f2aaf3fe861ae309eb1930d51a588b4c727', 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: 'a9f07a30f8b4d13ef7ac33068756f0fb03173e27', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick }, h("div", { key: 'b3d6f9c2a7854845ebe94c05ee507000c38a1326', class: {
                 'pds-modal': true,
-                [`pds-modal--${this.size}`]: true,
+                [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, part: "modal" }, h("slot", { key: '8505057bef9b4ed60e51422b05fea08cefce4a4b' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, h("slot", { key: '42ff9ae5e427bc69141c58e0824aad677f5c7756' }))));
     }
     static get is() { return "pds-modal"; }
     static get originalStyleUrls() {
@@ -359,9 +515,20 @@ export class PdsModal {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'sm' | 'md' | 'lg' | 'fullscreen'",
-                    "resolved": "\"fullscreen\" | \"lg\" | \"md\" | \"sm\"",
-                    "references": {}
+                    "original": "ModalSizeType | (string & Record<never, never>)",
+                    "resolved": "\"fullscreen\" | \"lg\" | \"md\" | \"sm\" | string & Record<never, never>",
+                    "references": {
+                        "ModalSizeType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::ModalSizeType",
+                            "referenceLocation": "ModalSizeType"
+                        },
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -370,7 +537,7 @@ export class PdsModal {
                             "name": "default",
                             "text": "'md'"
                         }],
-                    "text": "The size of the modal"
+                    "text": "The size of the modal. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom\nmax-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size.\nA value that is neither falls back to 'md'."
                 },
                 "getter": false,
                 "setter": false,
@@ -423,6 +590,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"
             }
         };
     }
@@ -509,6 +699,9 @@ export class PdsModal {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "size",
+                "methodName": "sizeChanged"
+            }, {
                 "propName": "open",
                 "methodName": "handleOpenChange"
             }];

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

@@ -13,6 +13,12 @@ export default {
     scrollable: true,
     size: 'md',
   },
+  argTypes: {
+    size: {
+      control: 'text',
+      description: "A preset ('sm', 'md', 'lg', 'fullscreen') or a CSS length such as '1100px'.",
+    },
+  },
   parameters: {}
 }
 
@@ -89,6 +95,14 @@ Default.args = {
   open: false,
 };
 
+// Any CSS length works as a size; it becomes the modal's max-width.
+export const CustomSize = BaseTemplate.bind({});
+CustomSize.args = {
+  componentId: 'custom-size-modal',
+  size: '1100px',
+  open: false,
+};
+
 const DestructiveTemplate = (args) => html`
   <div>
     <pds-button id="show-modal" onClick="document.querySelector('#${args.componentId}').open = true">

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: 'cb0c1ce177b2c5bbc03c6310d1c61c2e56c87371', class: backdropClasses }, h("div", { key: '0f25e178dafa91d9c9721180c933faacb03b9360', class: modalClasses, role: "dialog", "aria-modal": "true", "aria-labelledby": this.componentId ? `${this.componentId}-heading` : null, part: "modal" }, h("div", { key: '849c0e574e020c828b3ef8a89e39ffdd6f8da68f', class: "pds-modal__header" }, h("slot", { key: '0c8bcac99adafbbfe67641e3782722bbe1ac13be', name: "header" })), h("div", { key: '5da01ac584f1b6d1ec8b535f6be2ac9f06ac2218', class: "pds-modal-content" }, h("slot", { key: '60ab585878ef793930fb18c363c284249123f423' })), h("div", { key: 'ec6f26f3fa36175cf1a6acc34807c2528b8ed886', class: "pds-modal__footer" }, h("slot", { key: 'da9896baba61891eceb7805c6967741fa86906dc', 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: 'a27955b3d4a7723dc92af6f9f1a4c56da5d392c6', "aria-disabled": this.disabled ? 'true' : null }, h("div", { key: '1bbea74e106b5980427610e9cbe27e2b686ded53', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (h("label", { key: 'a1ba54ded3bf660d234ce430056d1b70058d4e47', 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: '74cd041317c59042452dd9b3e9d165cc88be5ecc', 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: '38056bbcdb0b865e9fe0b249ac3ee2c2adb089d4', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (h("p", { key: '7a576cc360d15e0ec38aeb4c0665a7308e7b1506', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (h("p", { key: '7dadb8425fa729316867a6d9ddb49d2553d82308', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'fc295c5b5110b009a1d6372411c1faf32df9b620', icon: danger, size: "small" }), this.errorMessage)), h("div", { key: '173c9f6953442fdedfdfa71264bcc3781b827701', style: { display: 'none' } }, h("slot", { key: 'e31cb390048516ee400d2875ad993cd6ae07b146' })))));
+            } }, 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: 'f488756aeac4d7d1223b5ccda953aa6ea54788c0', id: this.componentId }, h("span", { key: '9ac844192c4389c1e9dc8548bda70b45c14b9aed', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '5263c5e659fc51f912bdbf92c119dc2bb1f57d4f', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '717d438131ff0bff69f11513c538bf3de5c2d1a4', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '060d737af3edd0d7baf5d556867122ca217d13a2', 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

@@ -1,4 +1,5 @@
 import { Host, h } from "@stencil/core";
+import { normalizeColorValue } from "../../utils/utils";
 export class PdsProgress {
     constructor() {
         /**
@@ -18,7 +19,8 @@ export class PdsProgress {
         this.showPercent = false;
     }
     render() {
-        return (h(Host, { key: '6cb8c8cacf41c0a51907a32cf92d15dea4b4493f', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'e5ad49e7b9328c2234350e3263595112b22b2ff7', class: "pds-progress" }, h("label", { key: '30dab7a71ff8c4947e6d9d199c84a2295c7da7d6', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '74dec83ce7f68395cfe9c3adc4512e6ffe98a3b4', id: this.componentId, max: "100", style: this.fillColor ? { '--color-progress-fill': this.fillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: 'b44b9c937bc8de75cdd1c90336419b65be4fb1c0', class: "pds-progress__percentage" }, this.percent, "%")));
+        const normalizedFillColor = normalizeColorValue(this.fillColor);
+        return (h(Host, { key: 'acca17890c316c056c61e4fad2917f0279126c39', class: this.animated ? { 'is-animated': this.animated } : '' }, h("div", { key: 'f8140ac930335bd67e3576a0f3739092d492d884', class: "pds-progress" }, h("label", { key: '66416d0472024ae14a6413e4e533f08970cbc857', class: "pds-progress__label", htmlFor: this.componentId }, this.label), h("progress", { key: '2bbbe4e1e3d186c2895401ac4b68dabac60a1df9', id: this.componentId, max: "100", style: normalizedFillColor ? { '--color-progress-fill': normalizedFillColor } : {}, value: this.percent })), this.showPercent && h("div", { key: '672956684adf944ea1de8769dbaba615c82a85b6', 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: 'f6ebcf8eec4bbbfe3a8717cf8c5611684d5c8929', id: this.componentId }, h("pds-box", { key: '0c4b9d0154b13da6aa3ee8b04482b5591bfee46f', "align-items": "center", gap: "xs" }, h("pds-icon", { key: '960c0fe6447622133f423b5547f13d7407258cbb', icon: this.icon, size: "var(--pine-dimension-sm)", "aria-hidden": "true" }), h("slot", { key: '367e9265e49712d16576ba0461042e8aa2210e69' }))));
+        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.css

@@ -104,8 +104,7 @@ input:checked:hover {
   border-color: var(--pine-color-accent-hover);
 }
 input:checked::after {
-  /* stylelint-disable-next-line pine-design-system/prefer-semantic-tokens */
-  background: var(--pine-color-white);
+  background: var(--pine-color-text-primary);
   border-radius: var(--pine-border-radius-full);
   content: "";
   display: block;

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: '0c85ea35e55ccb8d0f8ce869f9c3fefe4a143ef7', "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: '3337ad8a86dc975ab2b45e989ab6f2f4bd4af90d', 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: 'c5a3a39cb6ac1afbe9998e77e98e7d46c85a3687', 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: 'e19f3967280820155c8cd14bafc32959f6a78c99', class: this.classNames() }, this.hasImage() && (h("div", { key: 'e990c72656ba7687c43c12c774b547f469213d44', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: '360e92eb7490bf79ac63ff0580dae76ab660d437', 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: 'c8e0b5e7fce3becca58c99d1d8d56bd25db8f2fb', 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: '04d9d3154d1c34b58fb46429417b5b75da3ee96a', class: "pds-radio-group__label" }, this.groupLabel)), h("div", { key: '58b1e3c7ff2ed9b2eceab6be6c0a4903919915d5', 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: '357104f35d9845b0717fa6aa896dc8bd60035b34', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'd05cc6733b4c087d59a9c8ab5e4664ab278ae020', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: '298396cb986b169d6c0d728863cd13d8399cafbf', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'fa820d6a8531600c889d18cdcdb93e3588a26865', 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: '13417071d1d3411e0bfe0de638c017ee96b1002f', 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: 'a1d08dc93decbf50f95152d59ceac4ad38dd5b01', "aria-disabled": this.disabled ? 'true' : null, class: this.classNames(), "has-action": hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '8aaeeea02f9330c013084dd525499e80ac19c463', class: "pds-select" }, !this.hideLabel && (h("div", { key: 'e8a6b8885eb95b68eb7229fe6bf67da4d1be1875', class: "pds-select__label-wrapper" }, h("label", { key: 'e6c6d190b14b49aa5c07a5b13e486bee4499cf60', htmlFor: this.componentId }, h("span", { key: 'e703a2d392f6f6f8dead73d91eb9f1d55b8a51c1', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), hasAction && this.renderAction())), h("select", { key: '61573ecc714d416e4cad4e5307b9bcc4a1b7e190', "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: 'acbd13e28aaca1cac0bcc2b9269083c50104bfc0', "aria-hidden": "true", class: "hidden", ref: (el) => (this.slotContainer = el) }, h("slot", { key: '6f3f4cf1cb3cd71dcefdb149df68aea905b8b5eb', onSlotchange: this.handleSlotChange })), this.renderMessages(), !this.multiple && h("pds-icon", { key: 'a3b2301d28bd6631cd33286ae3b93c67294e4cc6', "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: '18cf8345abe65e492b09add621df93c9eac77d30', class: "pds-sortable-item", id: this.componentId }, this.showHandle && (h("div", { key: 'a9545fad581a44740da59ae64209da530c91fc97', class: "pds-sortable-item__handle" }, h("pds-icon", { key: '4d0ecd4ec0ee6c0aa5249c060098d7748a05b910', "aria-hidden": "true", icon: handleIcon }))), h("slot", { key: 'f79fcb490cb435e578c3d6ff2ce4b8dcd4040555' }), this.enableActions && (h("div", { key: 'eac4084b1bc7e6c0e1026ec9fea2b3a9e33ac618', class: "pds-sortable-item__actions" }, h("slot", { key: '8f77cd2e46a7ed2d442f04747c2ef6b726912ad9', 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: '7c5c1c00c00f8e7122c292f83f33b0b5638a4617', class: this.classNames(), id: this.componentId }, h("slot", { key: 'c418a9e41ff37672d886259c3c8a060507b2a16a' })));
+        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: '3b15b1f098a56bed7f5ab95a549a0ca1cb3444b3', class: this.switchClassNames(), "aria-disabled": this.disabled ? 'true' : null }, h("label", { key: 'f0a6a95ead6b8b11122c5153402fbe68e1382cb4', htmlFor: this.componentId }, h("input", Object.assign({ key: '7633dce93d0983f31492cca51f238d2e321d3316', "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: '3b0b1a38d4a0cee505bd0f1c7383af259e2da2b0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), this.helperMessage &&
-            h("div", { key: 'e6770c0fed9f7a8a626e91cd8aa84b8623bd4b32', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '88cb91dc6cf056b0af35a1821c839166217a9eb4', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '6faf4e7b7e13193c147769d9308fb4d23425aa9c', 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: 'bd4c84fdefd61afbd4138488b04419d62021c1ad', role: "rowgroup", part: "body" }, h("slot", { key: 'a16c0cfc807969c005b743293144e4f7470fe851' })));
+        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: '1b20d85c75e5ca772f1c6fb402d06ef0f6b170a7', 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: '3d1dc98bc9e3dead532af0c5c79305eaedee62be' })));
+                : {} }, 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,