@pine-ds/core 4.7.1 → 4.8.0

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

@@ -4,8 +4,12 @@ import { restoreReflectedDefault } from "../../utils/reflected-attribute-default
 import { setAttributesIfChanged } from "../../utils/attributes";
 import { cssEscape } from "../../utils/css";
 import { limitRestores } from "../../utils/keep-hydrated";
-/** Open auto popovers, in the order they opened: Escape goes to the last one it applies to. */
-const openAutoPopovers = [];
+/** Open popovers that close on Escape, in the order they opened: Escape goes to the last one it applies to. */
+const popoversTakingEscape = [];
+/** Hovering the trigger waits this long before opening, so a pointer passing over it doesn't open it. */
+const HOVER_OPEN_DELAY_MS = 120;
+/** Leaving the trigger and panel waits this long before closing, which covers the gap between them. */
+const HOVER_CLOSE_DELAY_MS = 200;
 /** The focused element, followed down through shadow roots to the control that has focus. */
 function deepActiveElement() {
     var _a;
@@ -66,11 +70,29 @@ export class PdsPopover {
          * Timestamp when popover was opened (for preventing immediate close)
          */
         this.openTimestamp = 0;
+        /**
+         * Set while hover holds the popover open, until a click pins it or it closes
+         */
+        this.hoverOpened = false;
+        /**
+         * Set when the pointer left while focus was in the panel, so focus leaving it closes it instead
+         */
+        this.closeWhenFocusLeaves = false;
+        /**
+         * How far the pointer was from the panel at its last move after leaving the trigger
+         */
+        this.panelDistance = Infinity;
         /**
          * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
          * @defaultValue "show"
          */
         this.popoverTargetAction = 'show';
+        /**
+         * Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes
+         * when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
+         * @defaultValue "click"
+         */
+        this.openOn = 'click';
         /**
          * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
          * Manual popovers require the consumer to handle the visibility of the popover.
@@ -81,6 +103,11 @@ export class PdsPopover {
          * @defaultValue 352
          */
         this.maxWidth = 352;
+        /**
+         * Sets the padding of the popover content
+         * @defaultValue "md"
+         */
+        this.padding = 'md';
         /**
          * Determines the preferred position of the popover
          * @defaultValue "right"
@@ -95,6 +122,7 @@ export class PdsPopover {
             // Clean up previous trigger's event listener if it exists
             if (this.triggerEl != null) {
                 this.triggerEl.removeEventListener('click', this.handleTriggerClick);
+                this.stopListeningForHover(this.triggerEl);
             }
             if (assignedElements.length > 0) {
                 // Use the first assigned element as the trigger
@@ -102,6 +130,7 @@ export class PdsPopover {
                 this.linkTriggerToPortal();
                 // Attach click listener to handle popover visibility
                 this.triggerEl.addEventListener('click', this.handleTriggerClick);
+                this.listenForHover(this.triggerEl);
             }
             else {
                 this.triggerEl = null;
@@ -128,6 +157,13 @@ export class PdsPopover {
             if (!anchorWithHref) {
                 event.preventDefault();
             }
+            if (this.openOn === 'hover' && this.popoverTargetAction !== 'hide') {
+                const heldByHover = this.hoverOpened;
+                this.pin();
+                // Pinning, not toggling: the hover before a click has already opened it.
+                if (heldByHover)
+                    return;
+            }
             // Execute the appropriate action based on popoverTargetAction prop
             switch (this.popoverTargetAction) {
                 case 'show':
@@ -142,6 +178,60 @@ export class PdsPopover {
                     break;
             }
         };
+        // A tap sends touch pointer events and then a click, so touch takes the click path alone.
+        this.handleHoverEnter = (event) => {
+            if (event.pointerType === 'touch')
+                return;
+            this.clearHoverTimers();
+            if (this.active)
+                return;
+            this.hoverOpenTimer = setTimeout(() => {
+                this.hoverOpenTimer = undefined;
+                if (this.active || this.portalEl == null)
+                    return;
+                this.hoverOpened = true;
+                this.show();
+            }, HOVER_OPEN_DELAY_MS);
+        };
+        this.handleHoverLeave = (event) => {
+            if (event.pointerType === 'touch')
+                return;
+            this.clearHoverTimers();
+            if (!this.hoverOpened)
+                return;
+            this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
+            if (event.currentTarget !== this.triggerEl)
+                return;
+            this.panelDistance = this.distanceToPanel(event);
+            document.addEventListener('pointermove', this.handleMoveTowardPanel);
+        };
+        // A slow diagonal from the trigger to a panel shorter than it runs beside the panel for longer
+        // than the close delay, so each move that brings the pointer closer starts the delay again.
+        this.handleMoveTowardPanel = (event) => {
+            const distance = this.distanceToPanel(event);
+            if (distance < this.panelDistance) {
+                clearTimeout(this.hoverCloseTimer);
+                this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
+            }
+            this.panelDistance = distance;
+        };
+        this.handleHoverFocusOut = (event) => {
+            if (!this.closeWhenFocusLeaves || containsComposed(this.portalEl, event.relatedTarget))
+                return;
+            this.closeWhenFocusLeaves = false;
+            this.hoverCloseTimer = setTimeout(this.closeFromHover, HOVER_CLOSE_DELAY_MS);
+        };
+        this.closeFromHover = () => {
+            this.clearHoverTimers();
+            if (!this.hoverOpened)
+                return;
+            // Content shown on hover stays while focus is in it (WCAG 1.4.13).
+            if (containsComposed(this.portalEl, deepActiveElement())) {
+                this.closeWhenFocusLeaves = true;
+                return;
+            }
+            this.hide();
+        };
         /** The focus style copied into a shadow root the panel opened in, which `document.head` can't reach. */
         this.shadowFocusStyle = null;
         /** The dialog the panel was opened in, closed along with it. */
@@ -163,6 +253,32 @@ export class PdsPopover {
             }
         };
     }
+    openOnChanged() {
+        this.pin();
+        this.stopListeningForHover(this.triggerEl);
+        this.stopListeningForHover(this.portalEl);
+        // Out of the page, connectedCallback binds them when it comes back.
+        if (!this.isComponentMounted)
+            return;
+        this.listenForHover(this.triggerEl);
+        this.listenForHover(this.portalEl);
+    }
+    applyPadding() {
+        if (this.portalEl != null)
+            this.portalEl.style.padding = this.paddingToken();
+    }
+    paddingToken() {
+        switch (this.padding) {
+            case 'none':
+                return 'var(--pine-dimension-none)';
+            case 'xs':
+                return 'var(--pine-dimension-xs)';
+            case 'sm':
+                return 'var(--pine-dimension-sm)';
+            default:
+                return 'var(--pine-dimension-md)';
+        }
+    }
     restorePlacementDefault(newValue) {
         this.placement = restoreReflectedDefault(this.el, 'placement', newValue, 'right');
     }
@@ -213,6 +329,48 @@ export class PdsPopover {
         // Skips values already in place, so the trigger observer's own callback doesn't loop.
         return setAttributesIfChanged(this.triggerEl, { 'aria-expanded': String(this.active), 'aria-controls': this.portalEl.id });
     }
+    listenForHover(el) {
+        if (this.openOn !== 'hover' || el == null)
+            return;
+        el.addEventListener('pointerenter', this.handleHoverEnter);
+        el.addEventListener('pointerleave', this.handleHoverLeave);
+        el.addEventListener('focusout', this.handleHoverFocusOut);
+    }
+    stopListeningForHover(el) {
+        if (el == null)
+            return;
+        el.removeEventListener('pointerenter', this.handleHoverEnter);
+        el.removeEventListener('pointerleave', this.handleHoverLeave);
+        el.removeEventListener('focusout', this.handleHoverFocusOut);
+    }
+    distanceToPanel({ clientX, clientY }) {
+        const panel = this.portalEl.getBoundingClientRect();
+        return Math.hypot(Math.max(panel.left - clientX, 0, clientX - panel.right), Math.max(panel.top - clientY, 0, clientY - panel.bottom));
+    }
+    /**
+     * Keeps a popover that hover opened open, closing from then on as one opened by a click does. A
+     * manual one gives up Escape again, which it took only while hover held it.
+     */
+    pin() {
+        var _a;
+        this.clearHoverTimers();
+        if (!this.hoverOpened)
+            return;
+        this.hoverOpened = false;
+        if (this.popoverType === 'auto')
+            return;
+        this.forgetOpen();
+        (_a = this.portalEl) === null || _a === void 0 ? void 0 : _a.removeAttribute('data-pds-popover-open');
+        document.removeEventListener('keydown', this.boundEscapeKeyHandler);
+    }
+    clearHoverTimers() {
+        clearTimeout(this.hoverOpenTimer);
+        clearTimeout(this.hoverCloseTimer);
+        this.hoverOpenTimer = undefined;
+        this.hoverCloseTimer = undefined;
+        this.closeWhenFocusLeaves = false;
+        document.removeEventListener('pointermove', this.handleMoveTowardPanel);
+    }
     // componentDidLoad doesn't run again when a popover comes back, so rebuild whatever
     // disconnectedCallback tore down. Each step is a no-op when nothing was.
     connectedCallback() {
@@ -222,6 +380,7 @@ export class PdsPopover {
         this.isComponentMounted = true;
         this.createPortal();
         (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.addEventListener('click', this.handleTriggerClick);
+        this.listenForHover(this.triggerEl);
         this.observeTrigger();
         this.linkTriggerToPortal();
         // Still open after a move: the trigger moved, so the portal follows it, into the dialog it
@@ -256,6 +415,7 @@ export class PdsPopover {
         if (this.triggerEl != null) {
             this.triggerEl.removeEventListener('click', this.handleTriggerClick);
         }
+        this.stopListeningForHover(this.triggerEl);
         (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.triggerObserver = null;
         // Clean up all event listeners
@@ -264,6 +424,8 @@ export class PdsPopover {
         document.removeEventListener('submit', this.handleSubmitFromPanel, true);
         // Clear any pending debounce timers
         this.clearDebounceTimers();
+        this.clearHoverTimers();
+        this.hoverOpened = false;
         // Remove portal from DOM
         this.removePortal();
     }
@@ -297,7 +459,7 @@ export class PdsPopover {
         this.portalEl.style.borderRadius = 'var(--pine-dimension-125)';
         this.portalEl.style.boxShadow = 'var(--pine-box-shadow-200)';
         this.portalEl.style.margin = 'var(--pine-dimension-none)';
-        this.portalEl.style.padding = 'var(--pine-dimension-md)';
+        this.portalEl.style.padding = this.paddingToken();
         // Generate unique ID
         if (!this.componentId) {
             (_a = this.generatedPortalId) !== null && _a !== void 0 ? _a : (this.generatedPortalId = `pds-popover-portal-${PdsPopover.instanceCounter++}`);
@@ -311,6 +473,7 @@ export class PdsPopover {
         // Add global focus styles to match Pine design system
         // This is done after appending to ensure it's part of the document and can access CSS variables
         this.addPortalFocusStyles();
+        this.listenForHover(this.portalEl);
     }
     /**
      * Adds Pine design system focus styles and dark mode border to the portal element
@@ -438,8 +601,8 @@ export class PdsPopover {
         // Update portal content with latest slot content
         this.updatePortalContent();
         // Show portal. The attribute tells a modal around it that this popover takes Escape first; only
-        // an auto popover listens for Escape.
-        if (this.popoverType === 'auto')
+        // an auto popover, or one hover opened, listens for Escape.
+        if (this.popoverType === 'auto' || this.hoverOpened)
             this.portalEl.setAttribute('data-pds-popover-open', '');
         this.portalEl.style.display = 'block';
         this.portalEl.style.opacity = '1';
@@ -453,11 +616,16 @@ export class PdsPopover {
         // Add scroll and resize listeners for repositioning (always)
         this.addScrollAndResizeListeners();
         document.addEventListener('submit', this.handleSubmitFromPanel, true);
-        // Add document listeners for light dismiss and escape key (auto type only)
+        // Add document listeners for light dismiss and escape key (auto type only), or for the escape
+        // key alone while hover holds a manual popover open
         if (this.popoverType === 'auto') {
-            openAutoPopovers.push(this);
+            popoversTakingEscape.push(this);
             this.addLightDismissListeners();
         }
+        else if (this.hoverOpened) {
+            popoversTakingEscape.push(this);
+            document.addEventListener('keydown', this.boundEscapeKeyHandler);
+        }
         // Emit open event
         this.pdsPopoverOpen.emit({
             componentId: this.componentId,
@@ -468,9 +636,11 @@ export class PdsPopover {
      * Closes the popover programmatically
      */
     async hide() {
+        this.clearHoverTimers();
         if (!this.active || !this.portalEl)
             return;
         this.active = false;
+        this.hoverOpened = false;
         this.unwatchDialogClose();
         // Restoring the content drops its focus to the body, so check where focus is first. In a
         // shadow root, document.activeElement is only its host.
@@ -549,9 +719,9 @@ export class PdsPopover {
         this.portalEl.style.border = root instanceof ShadowRoot && closest('[data-theme="dark"]', this.el) ? 'var(--pine-border)' : '';
     }
     forgetOpen() {
-        const index = openAutoPopovers.indexOf(this);
+        const index = popoversTakingEscape.indexOf(this);
         if (index >= 0)
-            openAutoPopovers.splice(index, 1);
+            popoversTakingEscape.splice(index, 1);
     }
     /**
      * Whether an Escape is this popover's. One from a dialog the popover isn't in belongs to that
@@ -660,7 +830,7 @@ export class PdsPopover {
             return;
         // Like the native Popover API, Escape closes only the top popover: the last one opened that
         // it applies to. Every open popover hears it, so each checks whether it's that one.
-        const top = [...openAutoPopovers].reverse().find(popover => popover.takesEscapeFrom(event));
+        const top = [...popoversTakingEscape].reverse().find(popover => popover.takesEscapeFrom(event));
         if (top !== this)
             return;
         // Take the key, so the dialog or modal around it doesn't close too.
@@ -785,7 +955,7 @@ export class PdsPopover {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (h(Host, { key: 'da8a0c715df1199231b1265085f3f9ae0234032d', id: this.componentId }, h("span", { key: 'f35023492399420829cec2e88556462f5ac1663e', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '38ebe92eebb87665467b3f92ff94dc8095450063', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8917930f4520544d14bbd68b4c7936dd60af19e3', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '28d3f9112256edd95721a79a7072a9e35a3712bf', onSlotchange: this.handleContentSlotChange }))));
+        return (h(Host, { key: 'e48b897acdc9e89f2e6b1449e7a358da7da1060c', id: this.componentId }, h("span", { key: 'b83b2c234b07703c2c850a9991c94939ed2fdaf7', class: "pds-popover__trigger-wrapper" }, h("slot", { key: '0a7f7829ee445fd57cf824ebee1409b3c571f983', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), h("div", { key: '8c1fe2d4d7c4342b4bd5eb4c56e596f17b4e14fa', class: "pds-popover__content-slot-wrapper" }, h("slot", { key: '4ccfce1f335acbc436f7942e497f5d360f849d48', onSlotchange: this.handleContentSlotChange }))));
     }
     static get is() { return "pds-popover"; }
     static get encapsulation() { return "shadow"; }
@@ -824,6 +994,29 @@ export class PdsPopover {
                 "attribute": "popover-target-action",
                 "defaultValue": "'show'"
             },
+            "openOn": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'click' | 'hover'",
+                    "resolved": "\"click\" | \"hover\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"click\""
+                        }],
+                    "text": "Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes\nwhen the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "open-on",
+                "defaultValue": "'click'"
+            },
             "popoverType": {
                 "type": "string",
                 "mutable": false,
@@ -886,6 +1079,36 @@ export class PdsPopover {
                 "attribute": "max-width",
                 "defaultValue": "352"
             },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PopoverPaddingType",
+                    "resolved": "\"md\" | \"none\" | \"sm\" | \"xs\"",
+                    "references": {
+                        "PopoverPaddingType": {
+                            "location": "import",
+                            "path": "@utils/types",
+                            "id": "src/utils/types.ts::PopoverPaddingType",
+                            "referenceLocation": "PopoverPaddingType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [{
+                            "name": "defaultValue",
+                            "text": "\"md\""
+                        }],
+                    "text": "Sets the padding of the popover content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "padding",
+                "defaultValue": "'md'"
+            },
             "placement": {
                 "type": "string",
                 "mutable": true,
@@ -1028,6 +1251,12 @@ export class PdsPopover {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "openOn",
+                "methodName": "openOnChanged"
+            }, {
+                "propName": "padding",
+                "methodName": "applyPadding"
+            }, {
                 "propName": "placement",
                 "methodName": "restorePlacementDefault"
             }];

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

@@ -6,9 +6,18 @@ export default {
 	args: {
 		popoverTargetAction: 'toggle',
 		popoverType: 'auto',
+		openOn: 'click',
 		placement: 'bottom-start',
+		padding: 'md',
 		componentId: 'popover-playground',
 	},
+	argTypes: {
+		padding: {
+			control: { type: 'select' },
+			options: ['none', 'xs', 'sm', 'md'],
+		},
+		openOn: { control: 'inline-radio', options: ['click', 'hover'] },
+	},
 	component: 'pds-popover',
 	parameters: {},
 	title: 'components/Popover'
@@ -19,8 +28,10 @@ const BaseTemplate = (args) => html`
 		component-id=${args.componentId}
 		popover-target-action=${args.popoverTargetAction}
 		popover-type=${args.popoverType}
+		open-on=${args.openOn}
 		placement=${args.placement}
 		.maxWidth=${args.maxWidth}
+		padding=${args.padding}
 	>
 		<pds-button slot="trigger">Show popover</pds-button>
 		<p>This is popover content that can be configured using the controls below.</p>
@@ -84,3 +95,23 @@ export const WithContent = (args) => html`
 WithContent.args = {
 	componentId: 'popover-rich'
 };
+
+export const OpenOnHover = (args) => html`
+	<pds-popover
+		component-id=${args.componentId || 'popover-hover'}
+		open-on="hover"
+		popover-target-action=${args.popoverTargetAction}
+		popover-type=${args.popoverType}
+		placement=${args.placement}
+		.maxWidth=${args.maxWidth}
+	>
+		<pds-button slot="trigger" variant="secondary">Hover for details</pds-button>
+		<pds-box direction="column" gap="xs" fit="true">
+			<pds-text tag="h3" size="md" weight="semibold">Project summary</pds-text>
+			<pds-text tag="p" size="sm" color="secondary">Rest the pointer on the trigger to preview supporting details. Click the trigger to keep this open while you read.</pds-text>
+		</pds-box>
+	</pds-popover>
+`;
+OpenOnHover.args = {
+	componentId: 'popover-hover'
+};

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

@@ -101,11 +101,11 @@ export class PdsRadio {
         const renderLabelAndMessages = () => [
             h("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, h("input", { key: 'ccd618855831bcee309e815f2cd2712fd4e8fe1f', "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: '2e372a880c28f48fb804bac2518208082c141fad', 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: '889d502575f6a162f450b6b58d76a6f6f1c74e4b', 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: '08e7a2319eddc1d314ee9dddd51a5ce88cd4ae48', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))
         ];
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (h(Host, { key: '374003032b28407581a55f1fb0a304c49acf3c16', class: hostClass }, this.hasImage() && (h("div", { key: '7eeb516267de1afcfa85fc7567999db488c2f4f5', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'a312fea06f0c015bffab3bb392ff04d4913fd1c0', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (h("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (h(Host, { key: '351376552abee90f50c3aceb03ecf8a81ae1b82b', class: hostClass }, this.hasImage() && (h("div", { key: 'fd85fd36b2ebd99b12c3bb2a13cf3d3e3c26530f', class: "pds-radio__image-container", part: "image-container" }, h("slot", { key: 'abe75dbe38d29340b805f70861b084c1b3836be9', 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

@@ -167,7 +167,7 @@ export class PdsRadioGroup {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, h("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'd242da328731e55fa52d8e624fdfc750bfa6cce4', icon: danger, size: "small" }), this.errorMessage))));
+            } }, h("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (h("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (h("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '83b0129d3d45b74ef1f53acc923387b2de7f079b', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-radio-group"; }
     static get encapsulation() { return "scoped"; }

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

@@ -115,7 +115,7 @@ export class PdsSwitch {
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
         return (h(Host, { key: 'b8bd2870be101081aa8a65cdee45397bc4c21435', class: hostClass, "aria-disabled": ariaDisabled }, h("label", { key: '1e223f22f7fc6c576098353ad67dc11500def8b4', htmlFor: this.componentId }, h("input", Object.assign({ key: 'edf59869e165a65b97465ea9de06f7ea82fbc9a6', "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: '1c252b9455471069f8c6ea6c13f2e88c99308b41', class: this.hideLabel ? 'visually-hidden' : '' }, h("slot", { key: 'ce0d471918bd3018f5e55d0d1e6c5c2247790f81', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
             h("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            h("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: 'f49caaba976579eb5588e442499595c7dba7ceff', icon: danger, size: "small" }), this.errorMessage)));
+            h("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, h("pds-icon", { key: '2ae8dc876745af26fa2418f2265248aeb8f97a2b', "aria-hidden": "true", 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-head-cell/pds-table-head-cell.js

@@ -203,7 +203,7 @@ export class PdsTableHeadCell {
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, h("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (h("pds-icon", { key: 'cba838fa029b280561676c2b57af7f8f00055511', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, h("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (h("pds-icon", { key: '79606519d810dc9882a91cbc3b6a199457086631', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon", "aria-hidden": "true" }))));
     }
     static get is() { return "pds-table-head-cell"; }
     static get encapsulation() { return "shadow"; }

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

@@ -488,7 +488,7 @@ const TruncateTemplate = (args) => html`
     </pds-table-row>
   </pds-table-body>
 </pds-table>
-<pds-text tag="p" size="xs" color="secondary" gutter="sm">Hover over truncated cells to see the full content in a tooltip.</pds-text>`;
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">Hover over or tab to a truncated cell to see the full content in a tooltip.</pds-text>`;
 
 export const Truncate = TruncateTemplate.bind();
 Truncate.args = {

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

@@ -113,7 +113,7 @@ const TruncateTemplate = (args) => html`
     ${args.slot}
   </pds-text>
 </div>
-<pds-text tag="p" size="xs" color="secondary" gutter="sm">Hover over the truncated text above to see the full content in a tooltip.</pds-text>`;
+<pds-text tag="p" size="xs" color="secondary" gutter="sm">Hover over or tab to the truncated text above to see the full content in a tooltip.</pds-text>`;
 
 export const Truncate = TruncateTemplate.bind();
 Truncate.args = {

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

@@ -309,7 +309,7 @@ export class PdsTextarea {
         return (h(Host, { key: '5933dab0c3cd25b1cf2f6851ece8e8064bc7f3b9', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, h("div", { key: '4f1752514d8e5b0f0e3439515cb9e5f043607da1', class: "pds-textarea" }, this.label &&
             h("div", { key: 'd4e6df0b381d781b70eeae72ff2f0e9428c0d901', class: "pds-textarea__label-wrapper" }, h("label", { key: '747d82067eb571d02840cfd981865821099f288b', htmlFor: this.componentId }, h("span", { key: 'bfab6e8ede66d0169dd020b7dd97e125aba417b0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), h("div", { key: 'a18611c03270e7491c1af69f931419c832192c06', class: "pds-textarea__field-wrapper" }, h("textarea", Object.assign({ key: '868382c7b04a4e59c0daa9d98afcdc9048f6224f', 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: 'dcb36f21443d2a782c25b7c29c4ce6215f3b212b', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            h("p", { key: 'be30fb1a38453296e26b775955389c0ec569df67', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: 'd93dce10d9d9db5815ac5f331848940aed735ba0', icon: danger, size: "small" }), this.errorMessage))));
+            h("p", { key: 'be30fb1a38453296e26b775955389c0ec569df67', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, h("pds-icon", { key: '853f06489ef6ca50205799659d221bd3bea7d8da', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     static get is() { return "pds-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -127,7 +127,7 @@ export class PdsToast {
                 'pds-toast--animating-out': this.isAnimatingOut
             }, role: "alert", "aria-live": "polite" }, this.renderIcon(), h("span", { key: 'eaf615d41c138e2c73088d29bac9349f49a63ba7', class: "pds-toast__message" }, h("slot", { key: '33973447154d80b016f5a7954b0473db03228379' })), this.dismissible && (h("button", { key: 'e189834633e1e648282ee43633fd05e53ce38869', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: '623a0e4d56e30781fb31bcd085511c17a4777edc', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, h("pds-icon", { key: '913201979e52be743ba933ff173e023b81553362', name: "remove", "aria-hidden": "true" }))))));
     }
     static get is() { return "pds-toast"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/truncation-tooltip.js

@@ -57,12 +57,24 @@ function injectStyles() {
 function isOverflowing(el) {
     return el.scrollWidth > el.clientWidth;
 }
+/**
+ * Engines without `:focus-visible` throw on the selector, so there every
+ * focus counts as visible rather than none.
+ */
+function isFocusVisible(el) {
+    try {
+        return el.matches(':focus-visible');
+    }
+    catch (_a) {
+        return true;
+    }
+}
 /**
  * Sets up automatic tooltip behavior for a truncated element.
  *
- * When the element's text overflows, hovering or focusing the host element
- * will display a tooltip showing the full text content. The tooltip is
- * rendered as a portal on document.body and positioned with Floating UI.
+ * When the element's text overflows, hovering the host element or giving it
+ * keyboard focus will display a tooltip showing the full text content. The
+ * tooltip is rendered as a portal on document.body and positioned with Floating UI.
  *
  * Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
  *
@@ -253,18 +265,30 @@ export function setupTruncationTooltip(options) {
         isHoveringPortal = false;
         scheduleHide();
     }
-    function handleFocusIn() {
+    // Keyboard focus only: focus from a click would pin the tooltip open after the pointer leaves.
+    // Events from inside a shadow root arrive retargeted to its host, so test the innermost target.
+    function showForVisibleFocus(event) {
+        if (!isFocusVisible(event.composedPath()[0]))
+            return;
         isFocused = true;
         showTooltip();
     }
+    // A key press after a click makes focus visible in place, with no new focusin. keyup, not
+    // keydown, so Tab's focus move lands first; Escape asks to dismiss, never to reveal.
+    function handleKeyUp(event) {
+        if (isFocused || event.key === 'Escape')
+            return;
+        showForVisibleFocus(event);
+    }
     function handleFocusOut() {
         isFocused = false;
         scheduleHide();
     }
     hostEl.addEventListener('mouseenter', handleMouseEnter);
     hostEl.addEventListener('mouseleave', handleMouseLeave);
-    focusEl.addEventListener('focusin', handleFocusIn);
+    focusEl.addEventListener('focusin', showForVisibleFocus);
     focusEl.addEventListener('focusout', handleFocusOut);
+    focusEl.addEventListener('keyup', handleKeyUp);
     // Return cleanup function
     return () => {
         disposed = true;
@@ -284,8 +308,9 @@ export function setupTruncationTooltip(options) {
         }
         hostEl.removeEventListener('mouseenter', handleMouseEnter);
         hostEl.removeEventListener('mouseleave', handleMouseLeave);
-        focusEl.removeEventListener('focusin', handleFocusIn);
+        focusEl.removeEventListener('focusin', showForVisibleFocus);
         focusEl.removeEventListener('focusout', handleFocusOut);
+        focusEl.removeEventListener('keyup', handleKeyUp);
         removePortal();
     };
 }