@pine-ds/core 4.7.2 → 4.8.0

package/hydrate/index.js

@@ -5754,7 +5754,7 @@ class MockPdsModal {
     }; }
 }
 
-/* pds-icons v10.6.0, ES Modules */
+/* pds-icons v10.7.0, ES Modules */
 
 const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
 const calendarSimple = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M8 1a1 1 0 0 1 1 1v1h6V2a1 1 0 1 1 2 0v1.002c.476.003.891.013 1.252.042.562.046 1.079.145 1.564.392a4 4 0 0 1 1.748 1.748c.247.485.346 1.002.392 1.564C22 7.29 22 7.954 22 8.758v8.483c0 .805 0 1.47-.044 2.01-.046.563-.145 1.08-.392 1.565a4 4 0 0 1-1.748 1.748c-.485.247-1.002.346-1.564.392-.541.044-1.206.044-2.01.044H7.758c-.805 0-1.47 0-2.01-.044-.563-.046-1.08-.145-1.565-.392a4 4 0 0 1-1.748-1.748c-.247-.485-.346-1.002-.392-1.564C2 18.71 2 18.046 2 17.242V8.758c0-.805 0-1.47.044-2.01.046-.563.145-1.08.392-1.565a4 4 0 0 1 1.748-1.748c.485-.247 1.002-.346 1.564-.392.361-.03.777-.04 1.252-.042V2a1 1 0 0 1 1-1M7 5.002c-.446.003-.795.012-1.089.036-.438.035-.663.1-.819.18a2 2 0 0 0-.874.874c-.08.156-.145.38-.18.819C4 7.361 4 7.943 4 8.8V9h16v-.2c0-.857 0-1.439-.038-1.889-.035-.438-.1-.663-.18-.819a2 2 0 0 0-.874-.874c-.156-.08-.38-.145-.819-.18A15 15 0 0 0 17 5.002V6a1 1 0 1 1-2 0V5H9v1a1 1 0 1 1-2 0zM20 11H4v6.2c0 .857 0 1.439.038 1.889.035.438.1.663.18.819a2 2 0 0 0 .874.874c.156.08.38.145.819.18C6.361 21 6.943 21 7.8 21h8.4c.857 0 1.439 0 1.889-.038.438-.035.663-.1.819-.18a2 2 0 0 0 .874-.874c.08-.156.145-.38.18-.819.037-.45.038-1.032.038-1.889z'/></svg>";
@@ -6072,7 +6072,7 @@ class PdsAvatar {
             // Percentage is average size of icon in relation to total avatar size
             // of all preset sizes found in Figma.
             // Used to allow icons to scale to container size
-            return hAsync("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%" });
+            return hAsync("pds-icon", { color: "var(--pine-color-brand)", icon: userFilled, size: "33.53%", "aria-hidden": "true" });
         };
         this.classNames = () => ({
             'pds-avatar': true,
@@ -6104,7 +6104,7 @@ class PdsAvatar {
         }
     }
     render() {
-        return (hAsync(Host, { key: '2cfbbe25504088ba2cbb3dc923680365fa78a170', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
+        return (hAsync(Host, { key: 'bd60a3273eaa4e2f5fa4d0f5d0d27babd7674e09', id: this.componentId, class: Object.assign({}, this.classNames()) }, this.renderAvatar()));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -6723,6 +6723,7 @@ class PdsBox {
 
 const pdsButtonCss = () => `:host{--pds-button-background:var(--pds-button-color-background-default);--pds-button-border:var(--pine-border);--pds-button-border-radius:var(--pine-border-radius-full);--pds-button-border-radius-start-end:var(--pine-border-radius-full);--pds-button-border-radius-start-start:var(--pine-border-radius-full);--pds-button-border-radius-end-end:var(--pine-border-radius-full);--pds-button-border-radius-end-start:var(--pine-border-radius-full);--pds-button-min-height:var(--pine-dimension-450);--pds-button-outline-offset:var(--pine-border-width);--pds-button-color-border-default:transparent;--pds-button-color-border-disabled:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-border-hover:transparent;--button-loader-color:var(--pds-button-color-text-default);display:-ms-inline-flexbox;display:inline-flex;vertical-align:middle}:host([full-width=true]){display:-ms-flexbox;display:flex;width:100%}:host([full-width=true]) a,:host([full-width=true]) button{-ms-flex-pack:center;justify-content:center;width:100%}:host([full-width=true]) .pds-button__content{-ms-flex-pack:center;justify-content:center;text-align:center}:host([loading=true]){cursor:wait;pointer-events:none}:host([aria-disabled=true]){pointer-events:none}.pds-button{--pds-loader-color:var(--pds-button-color-text-default);-ms-flex-align:center;align-items:center;background-color:var(--pds-button-background, var(--pds-button-color-background-default));border:var(--pds-button-border);border-color:var(--pds-button-color-border-default);border-radius:var(--pds-button-border-radius);border-end-end-radius:var(--pds-button-border-radius-end-end, var(--pds-button-border-radius));border-end-start-radius:var(--pds-button-border-radius-end-start, var(--pds-button-border-radius));border-start-end-radius:var(--pds-button-border-radius-start-end, var(--pds-button-border-radius));border-start-start-radius:var(--pds-button-border-radius-start-start, var(--pds-button-border-radius));-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pds-button-color-text-default);cursor:pointer;display:-ms-flexbox;display:flex;font:var(--pine-typography-body-brand-label);letter-spacing:var(--pine-letter-spacing);min-height:var(--pds-button-min-height);padding:calc(var(--pine-dimension-xs) - var(--pine-border-width)) var(--pine-dimension-sm);position:relative;text-decoration:none}.pds-button pds-icon{color:currentColor;fill:currentColor}.pds-button:hover{background-color:var(--pds-button-color-background-hover);border-color:var(--pds-button-color-border-hover)}.pds-button:focus-visible{border-color:var(--pds-button-color-border-focus);-webkit-box-shadow:var(--pds-button-box-shadow-focus, none);box-shadow:var(--pds-button-box-shadow-focus, none);outline:var(--pds-button-outline-focus, var(--pine-outline-focus));outline-offset:var(--pds-button-outline-offset)}.pds-button:disabled{background-color:var(--pds-button-color-background-disabled);border-color:var(--pds-button-color-border-disabled);color:var(--pds-button-color-text-disabled);pointer-events:none}.pds-button--primary{--pds-button-color-background-default:var(--pine-color-primary);--pds-button-color-background-hover:var(--pine-color-primary-hover);--pds-button-color-background-disabled:var(--pine-color-primary-disabled);--pds-button-color-border-default:var(--pine-color-primary);--pds-button-color-border-hover:var(--pine-color-primary-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-primary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--accent{--pds-button-color-background-default:var(--pine-color-accent);--pds-button-color-background-hover:var(--pine-color-accent-hover);--pds-button-color-background-disabled:var(--pine-color-accent-disabled);--pds-button-color-border-default:var(--pine-color-accent);--pds-button-color-border-hover:var(--pine-color-accent-hover);--pds-button-color-text-default:var(--pine-color-text-primary);--pds-button-color-text-disabled:var(--pine-color-text-accent-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive{--pds-button-color-background-default:var(--pine-color-danger);--pds-button-color-background-hover:var(--pine-color-danger-hover);--pds-button-color-background-disabled:var(--pine-color-danger-disabled);--pds-button-color-border-default:var(--pine-color-danger);--pds-button-color-border-hover:var(--pine-color-danger-hover);--pds-button-color-text-default:var(--pine-color-white);--pds-button-color-text-disabled:var(--pine-color-text-danger-disabled);--pds-button-color-outline:var(--pine-color-focus-ring-danger);--button-loader-color:var(--pine-color-text-primary)}.pds-button--destructive:focus-visible{outline-color:var(--pine-color-focus-ring-danger)}.pds-button--secondary,.pds-button--disclosure{--pds-button-color-background-default:var(--pine-color-secondary);--pds-button-color-background-hover:var(--pine-color-secondary-hover);--pds-button-color-background-disabled:var(--pine-color-secondary-disabled);--pds-button-color-border-disabled:var(--pine-color-border-disabled);--pds-button-color-border-focus:var(--pine-color-border);--pds-button-color-border-hover:var(--pine-color-border-hover);--pds-button-color-border-default:var(--pine-color-border);--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--secondary:hover,.pds-button--disclosure:hover{background-color:var(--pine-color-secondary-hover)}.pds-button--tertiary{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:var(--pine-color-background-muted);--pds-button-color-background-disabled:transparent;--pds-button-color-border-default:transparent;--pds-button-color-border-hover:var(--pine-color-background-muted);--pds-button-color-border-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-disabled:var(--pine-color-text-secondary-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary)}.pds-button--filter{--pds-button-color-background-default:var(--pine-color-background-container);--pds-button-color-background-hover:var(--pine-color-background-subtle);--pds-button-color-background-disabled:var(--pine-color-white);--pds-button-color-border-default:transparent;--pds-button-color-border-hover:transparent;--pds-button-color-border-focus:transparent;--pds-button-color-text-default:var(--pine-color-text-secondary);--pds-button-color-text-hover:var(--pine-color-text-hover);--pds-button-color-text-disabled:var(--pine-color-text-disabled);--pds-button-color-outline:var(--pine-color-focus-ring);--button-loader-color:var(--pine-color-text-secondary);--pds-button-border-radius:var(--pine-dimension-125);--pds-button-border-radius-start-end:var(--pine-dimension-125);--pds-button-border-radius-start-start:var(--pine-dimension-125);--pds-button-border-radius-end-end:var(--pine-dimension-125);--pds-button-border-radius-end-start:var(--pine-dimension-125);padding:var(--pine-dimension-xs) var(--pine-dimension-sm)}.pds-button--filter:disabled{background-color:var(--pine-color-background-container)}.pds-button--filter:hover{color:var(--pds-button-color-text-hover)}.pds-button--unstyled{--pds-button-color-background-default:transparent;--pds-button-color-background-hover:transparent;--pds-button-color-background-disabled:transparent;--pds-button-color-text-default:var(--pine-color-text);--button-loader-color:var(--pine-color-text);border-width:var(--pine-dimension-none);margin:var(--pine-dimension-none);min-height:auto;padding:var(--pine-dimension-none);width:inherit}.pds-button__content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-xs);position:relative;width:100%}.pds-button__icon{display:-ms-inline-flexbox;display:inline-flex}.pds-button__icon--empty{display:none}.pds-button__text{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;white-space:nowrap}.pds-button__icon--hidden,.pds-button__text--hidden{opacity:0}.pds-button__loader{height:var(--pine-dimension-250);left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);width:var(--pine-dimension-250)}.pds-button--loading{cursor:wait;pointer-events:none}.pds-button--loading .pds-button__loader pds-loader{--loader-color:var(--button-loader-color)}.pds-button--small{min-height:var(--pine-dimension-400);padding:calc(var(--pine-dimension-2xs) - var(--pine-border-width)) var(--pine-dimension-sm)}.pds-button--micro{font-size:var(--pine-font-size-085);min-height:var(--pine-dimension-300);padding:var(--pine-dimension-025) var(--pine-dimension-xs)}.pds-button--icon-only{-ms-flex-align:center;align-items:center;border-radius:var(--pine-border-radius-full);height:var(--button-dimension);-ms-flex-pack:center;justify-content:center;min-height:var(--button-dimension);min-width:var(--button-dimension);padding:var(--pine-dimension-xs);width:var(--button-dimension)}.pds-button--icon-only .pds-button__content{height:100%;-ms-flex-pack:center;justify-content:center;width:100%}.pds-button--icon-only .pds-button__text--hidden{border:0;clip:rect(0 0 0 0);-webkit-clip-path:polygon(0 0, 0 0, 0 0);clip-path:polygon(0 0, 0 0, 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.pds-button--icon-only.pds-button--small{height:var(--pine-dimension-400);min-height:var(--pine-dimension-400);min-width:var(--pine-dimension-400);padding:var(--pine-dimension-2xs);width:var(--pine-dimension-400)}.pds-button--icon-only.pds-button--micro{height:var(--pine-dimension-300);min-height:var(--pine-dimension-300);min-width:var(--pine-dimension-300);padding:var(--pine-dimension-3xs);width:var(--pine-dimension-300)}`;
 
+const FORWARDED_ARIA_ATTRIBUTES = ['aria-current', 'aria-expanded', 'aria-haspopup', 'aria-label', 'aria-pressed'];
 /**
  * @part button - Exposes the underlying button (or anchor) element for styling, including custom size, shape, or surface on icon-only placements (e.g. a compact square or inverse icon button).
  * @part button-content - Exposes the button content for styling.
@@ -6781,11 +6782,16 @@ class PdsButton {
         this.variant = 'primary';
         this.hasStartContent = false;
         this.hasEndContent = false;
-        this.triggerExpanded = null;
-        this.triggerHasPopup = null;
-        this.syncTriggerAria = () => {
-            this.triggerExpanded = this.el.getAttribute('aria-expanded');
-            this.triggerHasPopup = this.el.getAttribute('aria-haspopup');
+        this.forwardedAria = {};
+        // Copied rather than moved: frameworks and DOM morphs put host attributes back on every update,
+        // so taking them off the host would fight each one.
+        this.syncHostAria = () => {
+            const forwarded = {};
+            FORWARDED_ARIA_ATTRIBUTES.forEach((name) => (forwarded[name] = this.el.getAttribute(name)));
+            // A new object always re-renders, and frameworks re-set unchanged attributes on every render of their own.
+            if (FORWARDED_ARIA_ATTRIBUTES.some((name) => forwarded[name] !== this.forwardedAria[name])) {
+                this.forwardedAria = forwarded;
+            }
             this.forwardAriaControls();
         };
         this.handleStartSlotChange = (event) => {
@@ -6823,19 +6829,19 @@ class PdsButton {
         };
     }
     connectedCallback() {
-        this.syncTriggerAria();
+        this.syncHostAria();
         if (typeof MutationObserver === 'undefined')
             return;
-        // Popovers and menus set these on the host after render, but only the inner element is announced.
-        this.triggerAriaObserver = new MutationObserver(this.syncTriggerAria);
-        this.triggerAriaObserver.observe(this.el, {
-            attributeFilter: ['aria-controls', 'aria-expanded', 'aria-haspopup'],
+        // Consumers, popovers and menus set these on the host, often after render, but only the inner element is announced.
+        this.hostAriaObserver = new MutationObserver(this.syncHostAria);
+        this.hostAriaObserver.observe(this.el, {
+            attributeFilter: FORWARDED_ARIA_ATTRIBUTES.concat('aria-controls'),
         });
     }
     disconnectedCallback() {
         var _a;
-        (_a = this.triggerAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.triggerAriaObserver = undefined;
+        (_a = this.hostAriaObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.hostAriaObserver = undefined;
     }
     componentDidRender() {
         this.forwardAriaControls();
@@ -6953,16 +6959,13 @@ class PdsButton {
     }
     render() {
         // Common props for both button and anchor elements
-        const commonProps = {
-            'aria-expanded': this.triggerExpanded,
-            'aria-haspopup': this.triggerHasPopup,
-            class: this.classNames(),
-            part: 'button',
-            ref: (el) => (this.contentEl = el),
-        };
+        const commonProps = Object.assign(Object.assign({}, this.forwardedAria), { class: this.classNames(), part: 'button', ref: (el) => (this.contentEl = el) });
         const attributes = () => {
             if (this.href) {
-                return Object.assign(Object.assign({}, commonProps), { download: this.download, href: this.disabled ? null : this.href, target: this.target });
+                return Object.assign(Object.assign({}, commonProps), {
+                    // ARIA allows aria-pressed only on buttons, so a link never gets it.
+                    'aria-pressed': null, download: this.download, href: this.disabled ? null : this.href, target: this.target
+                });
             }
             return Object.assign(Object.assign({}, commonProps), { 'aria-busy': this.loading ? 'true' : null, 'aria-live': this.loading ? 'polite' : null, 'disabled': this.disabled, 'name': this.name, 'type': this.type, 'value': this.value });
         };
@@ -6995,8 +6998,7 @@ class PdsButton {
             "variant": [1],
             "hasStartContent": [32],
             "hasEndContent": [32],
-            "triggerExpanded": [32],
-            "triggerHasPopup": [32]
+            "forwardedAria": [32]
         },
         "$listeners$": [[16, "keydown", "handleFormKeyDown"]],
         "$lazyBundleId$": "-",
@@ -7189,7 +7191,7 @@ class PdsCheckbox {
         this.hostKeeper.record(hostClass);
         return (hAsync(Host, { key: 'bbe09a5e9eb55f62b2921b09a04ddc9476a871ae', class: hostClass }, hAsync("label", { key: 'fa1856d9306eb8c0c19618ea5e2619ea20c3c51d', htmlFor: this.componentId }, hAsync("input", Object.assign({ key: '8537d97a8e69a17d0d563306dac179e393885dda', type: "checkbox", "aria-describedby": assignDescription(this.componentId, this.invalid, this.helperMessage, this.errorMessage), "aria-invalid": this.invalid ? "true" : undefined, id: this.componentId, indeterminate: this.indeterminate, name: this.name, value: this.value, checked: this.checked, required: this.required, disabled: this.disabled, onChange: this.handleCheckboxChange, onInput: this.handleInput }, this.inheritedAttributes)), hAsync("span", { key: 'e523922889c80a2d18243cb560cd855bab95803d', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: 'b6ff34ecbc346d254a0211bfa610823feedb486b', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
             hAsync("div", { key: '55dcca850dff0aa93d9ba63d6827d9155ac35dab', class: 'pds-checkbox__message', id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            hAsync("div", { key: '5af843679994d29f084d41e90e41e0939c951063', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '10f7efe5d4b252d9dea6f398eff973ba32506898', icon: danger, size: "small" }), this.errorMessage)));
+            hAsync("div", { key: '5af843679994d29f084d41e90e41e0939c951063', class: `pds-checkbox__message pds-checkbox__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '88a46a17abc1c7b3b3e90543ce8dcf38a14c878c', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -8988,12 +8990,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.
  *
@@ -9184,18 +9198,30 @@ 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;
@@ -9215,8 +9241,9 @@ 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();
     };
 }
@@ -9458,13 +9485,13 @@ class PdsChip {
                 'aria-label': this.dismissLabel,
             };
         };
-        return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize })));
+        return (hAsync(CloseElement, Object.assign({}, closeAttributes(), { onClick: this.handleCloseClick }), hAsync("pds-icon", { icon: remove, size: this.iconSize, "aria-hidden": "true" })));
     }
     render() {
         const hostClass = this.classNames();
         const hostStyles = this.hostStyles;
         this.hostKeeper.record(hostClass, hostStyles);
-        return (hAsync(Host, { key: 'f82d84a7f0a4f1c980d47bf75cd4ffeef042607d', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
+        return (hAsync(Host, { key: 'fa432fa987afb5b856e5e7d3894a88be043805d2', class: hostClass, id: this.componentId, style: hostStyles }, this.setChipContent(), this.effectiveVariant === 'tag' && this.renderCloseButton()));
     }
     get el() { return getElement(this); }
     static get style() { return pdsChipTokensCss() + pdsChipCss(); }
@@ -13471,7 +13498,7 @@ class PdsCombobox {
                 'pds-combobox__option--layout': isLayout,
                 'pds-combobox__option--chip': isChip,
                 'pds-combobox__option--disabled': isDisabled,
-            }, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", class: "pds-combobox__option-check" })));
+            }, "data-option-index": index, onMouseDown: this.onOptionMouseDown, onClick: this.onOptionClick, onMouseEnter: this.onOptionMouseEnter, onKeyDown: this.onOptionKeyDown }, isLayout ? (hAsync("pds-box", { class: "pds-combobox__option-layout-wrapper", innerHTML: this.getOptionLayoutContent(option) })) : isChip ? (this.renderOptionChip(option)) : (this.renderOptionLabel(option)), isSelected && hAsync("pds-icon", { icon: "check", size: "regular", "aria-hidden": "true", class: "pds-combobox__option-check" })));
     }
     /** An option's text, after its `data-icon` when it has one. */
     renderOptionLabel(option) {
@@ -13670,7 +13697,7 @@ class PdsCombobox {
     }
     // Helper method to render chip trigger default content
     renderChipTriggerDefaultContent() {
-        return (hAsync("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && hAsync("pds-icon", { icon: this.selectedChipIcon, class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
+        return (hAsync("span", { class: "pds-combobox__chip-trigger-label" }, this.selectedChipIcon && hAsync("pds-icon", { icon: this.selectedChipIcon, "aria-hidden": "true", class: "pds-combobox__chip-trigger-icon" }), this.selectedLabel || this.placeholder));
     }
     // Helper method to render option as chip (new automatic approach)
     renderOptionChip(option) {
@@ -13701,13 +13728,13 @@ class PdsCombobox {
         ]
             .filter(Boolean)
             .join(' ');
-        return (hAsync(Host, { key: 'ead770a3b7ba531a1cfdc6b02aef6d7159481ed0', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '3ca6fd299acd1db8a0e476eee5f7606bc6153625', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '44c72d099c5ccddce18400b9d3c66158f485de05', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
+        return (hAsync(Host, { key: 'c4bc64f28f6f8f2170d199bd89ba02b3fbe41bad', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '7648c513d133e11376e50a9a15bc9a227b8fe1d2', class: "pds-combobox", tabIndex: -1, onFocusout: this.onComboboxFocusOut, part: "combobox" }, this.hasVisibleLabel && (hAsync("label", { key: '1be4dce04b943119265b99c2b14002e5faba337f', htmlFor: this.trigger === 'input' ? this.componentId : undefined, id: this.labelId, class: "pds-combobox__label", onClick: this.onLabelClick }, this.label)), this.trigger === 'input' ? (hAsync("div", { class: "pds-combobox__input-wrapper", style: { width: this.triggerWidth } }, hAsync("input", { ref: el => {
                 this.inputEl = el;
                 this.triggerEl = el;
             }, class: {
                 'pds-combobox__input': true,
                 'pds-combobox__input--invalid': this.isInvalid(),
-            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: '349af9dc6fdae018d4443b178e21b1627fcc85ca', style: { display: 'none' } }, hAsync("slot", { key: '9af42db6d08f148b7d7b5e4b3199f7c9af7699a4', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
+            }, type: "text", role: "combobox", "aria-autocomplete": "list", "aria-haspopup": this.inputPopupRole === 'tree' ? 'tree' : undefined, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.hideLabel ? this.label : undefined, id: this.componentId, value: this.displayText, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleInput, onClick: this.handleInputClick, onKeyDown: this.handleKeyDown, autocomplete: "off", part: "input" }), hAsync("pds-icon", { icon: "enlarge", "aria-hidden": "true", class: "pds-combobox__input-icon" }))) : this.trigger === 'chip' ? (hAsync("div", { class: this.getChipTriggerClass(), style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "chip-trigger" }, this.renderChipTriggerContent())) : (hAsync("div", { class: triggerClass, style: { width: this.triggerWidth }, role: this.usesPanelSearch ? 'button' : 'combobox', "aria-haspopup": this.triggerPopupRole, "aria-controls": this.listboxId, "aria-describedby": assignDescription(this.componentId, this.isInvalid(), this.helperMessage, this.errorMessage), "aria-invalid": this.isInvalid() ? 'true' : undefined, "aria-activedescendant": this.usesPanelSearch ? undefined : this.activeDescendantId, "aria-expanded": this.isOpen ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.triggerAriaLabel, "aria-labelledby": this.triggerLabelledBy, id: this.componentId, tabIndex: this.disabled ? -1 : 0, onClick: this.onButtonTriggerClick, "data-layout": this.customTriggerContent, onKeyDown: this.onButtonTriggerKeyDown, onKeyUp: this.onButtonTriggerKeyUp, ref: el => (this.triggerEl = el), part: "button-trigger" }, this.renderButtonTriggerContent())), this.renderMessages(), hAsync("div", { key: 'f9aca483c67dd0cdf2fcbdc651a13cfb8fcfe7f1', style: { display: 'none' } }, hAsync("slot", { key: '7a0dc5718ccf377b41bd1716030f16a135700518', onSlotchange: () => this.updateOptions() })), this.renderDropdown(), this.groupDisplay !== 'inline' && [
             hAsync("span", { key: "drill-status", class: "visually-hidden", role: "status", "aria-live": "polite" }, this.isOpen && this.effectiveGroupDisplay === 'drill-in' && this.openGroup !== null ? this.openGroup.label : ''),
             // Its own region: sharing one, revealing a row then opening it would leave the text the
             // same, and opening the group would go unannounced.
@@ -16636,11 +16663,11 @@ class PdsDropdownMenu {
             if (tagName === 'pds-dropdown-menu-item') {
                 // For pds-dropdown-menu-item, focus the inner element
                 const menuItem = item;
-                const innerButton = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button');
+                const innerControl = (_a = menuItem.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [role="menuitem"]');
                 const innerLink = ((_d = (_c = (_b = menuItem.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector('pds-link')) === null || _c === void 0 ? void 0 : _c.shadowRoot) === null || _d === void 0 ? void 0 : _d.querySelector('a'))
                     || ((_e = menuItem.shadowRoot) === null || _e === void 0 ? void 0 : _e.querySelector('a'));
-                if (innerButton) {
-                    innerButton.focus();
+                if (innerControl) {
+                    innerControl.focus();
                 }
                 else if (innerLink) {
                     innerLink.focus();
@@ -16792,7 +16819,7 @@ class PdsDropdownMenu {
         }
     }
     render() {
-        return (hAsync(Host, { key: '18dac4d59ea236fe171f4c16f6571cb1547059c6', id: this.componentId }, hAsync("slot", { key: '95201a75a33ccb70dbd51a5cf9d78c76ebf26f65', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '7fc588f40f607ad81ad70bf74a525d078d32a80b', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: '73d13d94edccb68db7b703f930b50f729334efa8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '7066f3a6f71c8961326f38f0509f1c0cc17098ae', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: '9f07ec488b688c58c6422b575015ccd364075fe8', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: 'd0aad3f9ac3b58779669411523adbb8878dec61c', onSlotchange: this.handleSlotChange })))));
+        return (hAsync(Host, { key: '1765909c8c3c140e52dc3f6b50693c97d6bcc003', id: this.componentId }, hAsync("slot", { key: '0b566cd288428a0694a2d61d4a73bd79def4bfad', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), hAsync("pds-box", { key: '16cdfc208cfe7f6e074289c30aa0e1188a34876d', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, hAsync("div", { key: 'a28c1736ad02e8ac3d82c0fe1933606a7216989b', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, hAsync("slot", { key: '9c6dfddefb266083f68aa27d6cc01127a69cd1cf', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: '8cfe85c10f92d4a4ec6b5d2d0264d054a74ba29b', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, hAsync("slot", { key: '1a5b4aa406d2706ca8cef49deb05140a5763be1c', onSlotchange: this.handleSlotChange })))));
     }
     get host() { return getElement(this); }
     static get style() { return pdsDropdownMenuCss(); }
@@ -16811,10 +16838,10 @@ class PdsDropdownMenu {
     }; }
 }
 
-const pdsDropdownMenuItemCss = () => `:host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}`;
+const pdsDropdownMenuItemCss = () => `:host{cursor:pointer;display:-ms-flexbox;display:flex;width:100%;}:host(.is-disabled){cursor:not-allowed !important;opacity:0.5 !important}:host(.is-disabled) .pds-dropdown-menu-item__content{cursor:not-allowed !important;pointer-events:none !important}.pds-dropdown-menu-item__content{-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:0;border-radius:var(--pine-dimension-xs);color:var(--pine-color-text);display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium);gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px);padding:var(--pine-dimension-xs);text-align:start;width:100%;}.pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-background-muted);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content{}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.is-informational){cursor:default}:host(.is-informational) .pds-dropdown-menu-item__content:hover{background-color:transparent;color:var(--pine-color-text)}:host(.destructive) .pds-dropdown-menu-item__content{--pds-context-link-color:var(--pine-color-danger);--pds-context-link-color-hover:var(--pine-color-danger-hover);-ms-flex-align:center;align-items:center;color:var(--pine-color-danger)}:host(.destructive) .pds-dropdown-menu-item__content:hover{background-color:var(--pine-color-danger-disabled);color:var(--pine-color-danger-hover)}:host(.destructive) .pds-dropdown-menu-item__content:focus,:host(.destructive) .pds-dropdown-menu-item__content:focus-visible,:host(.destructive) .pds-dropdown-menu-item__content.has-focus{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}pds-link::part(link):focus,pds-link::part(link):focus-visible{-webkit-box-shadow:none;box-shadow:none;outline:none}pds-link::part(link){-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;gap:var(--pine-dimension-xs);margin:calc(var(--pine-dimension-xs) * -1);padding:var(--pine-dimension-xs);text-decoration:none;width:calc(100% + var(--pine-dimension-xs) * 2)}`;
 
 /**
- * @part button
+ * @part button - Exposes the item's inner element for styling. Appears on button and informational items, not on links.
  */
 class PdsDropdownMenuItem {
     constructor(hostRef) {
@@ -16830,9 +16857,17 @@ class PdsDropdownMenuItem {
          * @defaultValue false
          */
         this.disabled = false;
+        /**
+         * It determines whether or not the dropdown-item is informational: text that the arrow keys
+         * reach but that can't be activated. Takes precedence over `href` and `destructive`.
+         * Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
+         * @defaultValue false
+         */
+        this.informational = false;
         /**
          * Determines whether the link should open in a new tab and display an external icon.
          * This is a simpler alternative to using `target="_blank"` for the common case.
+         * Ignored when `informational` is set.
          * @defaultValue false
          */
         this.external = false;
@@ -16843,6 +16878,12 @@ class PdsDropdownMenuItem {
         this.handleBlur = () => {
             this.hasFocus = false;
         };
+        // Space would otherwise scroll the page, since nothing in the item takes the key.
+        this.handleInformationalKeyDown = (event) => {
+            if (event.key === ' ') {
+                event.preventDefault();
+            }
+        };
         this.handleKeyDown = (event) => {
             // Handle keyboard events
             if (!this.disabled && (event.key === 'Enter')) {
@@ -16864,6 +16905,8 @@ class PdsDropdownMenuItem {
     ;
     handleClick() {
         var _a;
+        if (this.informational)
+            return;
         // Filter only pds-dropdown-menu-item elements and find the index of the current item
         const menuItems = Array.from(this.host.parentNode.children).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
         const itemIndex = menuItems.indexOf(this.host);
@@ -16876,6 +16919,12 @@ class PdsDropdownMenuItem {
         });
     }
     renderElement() {
+        if (this.informational) {
+            return (hAsync("div", { class: {
+                    'pds-dropdown-menu-item__content': true,
+                    'has-focus': this.hasFocus
+                }, role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur }, hAsync("slot", null)));
+        }
         if (this.href != null) {
             return (hAsync("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, target: this.target, class: {
                     'pds-dropdown-menu-item__content': true,
@@ -16888,7 +16937,14 @@ class PdsDropdownMenuItem {
             }, tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, hAsync("slot", null)));
     }
     render() {
-        return (hAsync(Host, { key: '2d499a06768bdc4b9a34774d16c1f1e10804b3d5', id: this.componentId, class: { 'is-disabled': this.disabled, 'destructive': !this.disabled && this.destructive }, onClick: () => !this.disabled && this.handleClick(), role: "none", tabIndex: -1, "aria-disabled": this.disabled ? 'true' : null }, this.renderElement()));
+        return (hAsync(Host, { key: '47a62550fde33f892d7af4f4e71b67ebf7aa2c3f', id: this.componentId, class: {
+                'is-disabled': this.disabled,
+                'is-informational': this.informational,
+                'destructive': !this.disabled && !this.informational && this.destructive
+            }, onClick: () => !this.disabled && this.handleClick(), role: "none",
+            // ARIA ignores role="none" on focusable elements, so a focusable host would sit between
+            // the menu and the informational menuitem as an unexpected child.
+            tabIndex: this.informational ? null : -1, "aria-disabled": this.disabled && !this.informational ? 'true' : null }, this.renderElement()));
     }
     get host() { return getElement(this); }
     static get style() { return pdsDropdownMenuItemCss(); }
@@ -16901,6 +16957,7 @@ class PdsDropdownMenuItem {
             "disabled": [516],
             "download": [1],
             "href": [1],
+            "informational": [516],
             "external": [516],
             "target": [513],
             "hasFocus": [32],
@@ -16908,7 +16965,7 @@ class PdsDropdownMenuItem {
         },
         "$listeners$": undefined,
         "$lazyBundleId$": "-",
-        "$attrsToReflect$": [["disabled", "disabled"], ["external", "external"], ["target", "target"]]
+        "$attrsToReflect$": [["disabled", "disabled"], ["informational", "informational"], ["external", "external"], ["target", "target"]]
     }; }
 }
 
@@ -18695,7 +18752,7 @@ function containsComposed(ancestor, node) {
  */
 const openModals = new Map();
 let openSequence = 0;
-/** Whether an open auto popover's panel sits in `root`, including inside shadow roots under it. */
+/** Whether the panel of an open popover that takes Escape sits in `root`, including inside shadow roots under it. */
 function hasOpenPopover(root) {
     if (root.querySelector('[data-pds-popover-open]'))
         return true;
@@ -19242,14 +19299,14 @@ class PdsModal {
     }
     render() {
         const [sizeClass = 'md', customSize] = this.resolveSize();
-        return (hAsync("dialog", { key: '0b187f36910a859afe57b891f1ebffd1d2d49ab7', class: {
+        return (hAsync("dialog", { key: '0a3ea92246b5ae704bc7dcbadf4f4e0d5a54e9e6', class: {
                 'pds-modal__backdrop': true,
                 'open': this.open
-            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: 'f5e652d4dae0e7c272b37b63eb9c65f04c69536a', class: {
+            }, "aria-modal": this.disableTopLayer ? 'false' : 'true', "aria-labelledby": `${this.componentId}-heading`, onClick: this.handleBackdropClick, onCancel: this.handleCancel }, hAsync("div", { key: 'a38029c2284ed345bec2ce7638fc3415818cd609', class: {
                 'pds-modal': true,
                 [`pds-modal--${sizeClass}`]: true,
                 'pds-modal--scrollable': this.scrollable
-            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: 'a954e1694741f78230599c476b270079797a263e' }))));
+            }, style: customSize !== undefined ? { '--pds-modal-max-width': customSize } : undefined, part: "modal" }, hAsync("slot", { key: '396da81af42685f5c083f853afa207a6844e444e' }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -19300,6 +19357,21 @@ class PdsModalContent {
          * Tracks whether the border prop was explicitly set by the user
          */
         this.userSetBorder = false;
+        this.hasLoaded = false;
+        /**
+         * Handle scroll events
+         */
+        this.handleScroll = () => {
+            this.updateBorders();
+        };
+        /**
+         * Handle resize events
+         */
+        this.handleResize = () => {
+            this.calculateMaxHeight();
+            // Update borders after resize as content scrollability might change
+            setTimeout(() => this.updateBorders(), 50);
+        };
     }
     // Unwraps a nested .pds-modal-content left by a page-cache (Turbo, bfcache) reconnect.
     componentDidRender() {
@@ -19313,43 +19385,30 @@ class PdsModalContent {
         this.userSetBorder = hasBorderAttribute || this.border !== 'none';
     }
     componentDidLoad() {
+        this.hasLoaded = true;
         this.calculateMaxHeight();
-        // Set up resize listener
-        window.addEventListener('resize', this.handleResize.bind(this));
-        // Only set up scroll listener for border updates if borders are managed automatically
         if (!this.userSetBorder) {
-            setTimeout(() => {
-                // The scroll happens on the component element itself (this.el), not the inner div
-                this.el.addEventListener('scroll', this.handleScroll.bind(this));
-                // Initial border update after everything is set up
-                setTimeout(() => this.updateBorders(), 100);
-            }, 100);
+            // Initial border update after everything is set up
+            setTimeout(() => this.updateBorders(), 200);
         }
     }
+    // Here rather than in componentDidLoad, which runs once: content taken out of the page and put
+    // back (a DOM morph or a framework moving it) gets its listeners and header/footer observer back.
+    connectedCallback() {
+        window.addEventListener('resize', this.handleResize);
+        // The scroll happens on the component element itself (this.el), not the inner div
+        this.el.addEventListener('scroll', this.handleScroll);
+        if (this.hasLoaded)
+            this.calculateMaxHeight();
+    }
     disconnectedCallback() {
-        window.removeEventListener('resize', this.handleResize.bind(this));
-        // Clean up scroll listener only if it was set up
-        if (!this.userSetBorder) {
-            this.el.removeEventListener('scroll', this.handleScroll.bind(this));
-        }
+        window.removeEventListener('resize', this.handleResize);
+        this.el.removeEventListener('scroll', this.handleScroll);
         if (this.mutationObserver) {
             this.mutationObserver.disconnect();
+            this.mutationObserver = undefined;
         }
     }
-    /**
-     * Handle scroll events
-     */
-    handleScroll() {
-        this.updateBorders();
-    }
-    /**
-     * Handle resize events
-     */
-    handleResize() {
-        this.calculateMaxHeight();
-        // Update borders after resize as content scrollability might change
-        setTimeout(() => this.updateBorders(), 50);
-    }
     /**
      * Updates border visibility based on scroll state (only if not user-defined)
      */
@@ -19466,10 +19525,10 @@ class PdsModalContent {
     render() {
         // Only apply max-height style if it's not 'none'
         const styleObj = this.contentMaxHeight !== 'none' ? { maxHeight: this.contentMaxHeight } : {};
-        return (hAsync(Host, { key: 'd41d5632eb6a2dafe921546af60f835d3545cc4f' }, hAsync("div", { key: '741ac9f28149039ecf5051142a939ab62ef26a87', class: {
+        return (hAsync(Host, { key: 'c83e230d23444e3d5358d995170e2b8386884fe8' }, hAsync("div", { key: 'b91de2c71e693b5a1ba2b257d741e7b0418c2d76', class: {
                 'pds-modal-content': true,
                 [`pds-modal-content--border-${this.border}`]: true
-            }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '090a52e9425d4df61c2d8216cc19f0925babdffe' }))));
+            }, style: styleObj, tabindex: "-1" }, hAsync("slot", { key: '971cbd44ffeac4bb13a651948a119c603bed9e4f' }))));
     }
     get el() { return getElement(this); }
     static get style() { return pdsModalContentCss(); }
@@ -20725,7 +20784,7 @@ class PdsMultiselect {
                 'pds-multiselect__option--selected': isSelected,
                 'pds-multiselect__option--create': isCreateOption,
                 'pds-multiselect__option--disabled': isDisabled || isCreateDisabled,
-            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (hAsync("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
+            }, role: "option", "aria-selected": isSelected ? 'true' : 'false', "aria-disabled": isDisabled || isCreateDisabled ? 'true' : undefined, "aria-label": isCreateOption ? formatMessage(this.createOptionAriaLabel, { text: option.text }) : undefined, "aria-describedby": hasAction ? `${optionId}-action-description` : undefined, "data-index": index, onMouseDown: this.handleOptionMouseDown(option), onClick: this.handleOptionClick, onMouseEnter: this.handleOptionMouseEnter(index, option) }, isCreateOption ? (hAsync("pds-box", { class: "pds-multiselect__create-option", "align-items": "center", gap: "xs" }, hAsync("pds-icon", { name: "add", size: "small", "aria-hidden": "true" }), hAsync("pds-text", null, formatMessage(this.createOptionLabel, { text: option.text })))) : (hAsync("pds-checkbox", { componentId: `${this.componentId}-checkbox-${index}`, checked: isSelected, label: option.text, disabled: isDisabled, style: { pointerEvents: 'none' } }, this.optionDisplay === 'chip' && (hAsync("pds-chip", { slot: "label", sentiment: "subtle", dot: !!option.dotColor, "dot-color": option.dotColor, "max-width": "100%" }, option.text)))), hasAction && this.renderOptionAction(option, optionId, isHighlighted)));
     }
     renderOptionAction(option, optionId, isHighlighted) {
         var _a;
@@ -20748,7 +20807,7 @@ class PdsMultiselect {
         const hasSlottedEmpty = !!this.el.querySelector('[slot="empty"]');
         const hasSlottedLoading = !!this.el.querySelector('[slot="loading"]');
         const hasSlottedFooter = !!this.el.querySelector('[slot="footer"]');
-        return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), hAsync("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (hAsync("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (hAsync("slot", { name: "loading" })) : (hAsync("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (hAsync("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (hAsync("slot", { name: "empty" })) : (hAsync("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
+        return (hAsync("div", { class: "pds-multiselect__panel", ref: el => (this.panelEl = el), style: { minWidth: this.minWidth } }, hAsync("div", { class: "pds-multiselect__search" }, hAsync("pds-icon", { name: "search", size: "small", "aria-hidden": "true" }), hAsync("input", { ref: el => (this.searchInputEl = el), type: "text", class: "pds-multiselect__search-input", placeholder: this.searchPlaceholder, value: this.searchQuery, "aria-label": this.searchOptionsLabel, "aria-controls": `${this.componentId}-listbox`, "aria-activedescendant": this.highlightedIndex >= 0 ? `${this.componentId}-option-${this.highlightedIndex}` : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": "true", "aria-autocomplete": "list", autocomplete: "off", onInput: this.handleSearchInputChange, onKeyDown: this.handleSearchInputKeyDown })), this.renderSelectedItemsList(), hAsync("ul", { class: "pds-multiselect__listbox", role: "listbox", "aria-multiselectable": "true", "aria-label": this.label || this.optionsLabel, id: `${this.componentId}-listbox`, ref: el => (this.listboxEl = el), style: { maxHeight: this.maxHeight }, onScroll: this.handleScroll }, this.loading && (hAsync("li", { class: "pds-multiselect__loading", role: "presentation" }, hasSlottedLoading ? (hAsync("slot", { name: "loading" })) : (hAsync("pds-loader", { size: "small" })))), !this.loading && filteredOptions.length === 0 && (hAsync("li", { class: "pds-multiselect__empty", role: "presentation" }, hasSlottedEmpty ? (hAsync("slot", { name: "empty" })) : (hAsync("span", null, this.noOptionsFoundLabel)))), this.getGroupedRenderItems(filteredOptions).map((item, itemIndex) => {
             if (item.type === 'group') {
                 return (hAsync("li", { key: `group-${itemIndex}`, role: "group", "aria-label": item.group, class: "pds-multiselect__group" }, hAsync("span", { class: "pds-multiselect__group-header", "aria-hidden": "true" }, item.group), hAsync("ul", { class: "pds-multiselect__group-list", role: "presentation" }, item.options.map(({ option, index }) => this.renderOption(option, index, valueArray)))));
             }
@@ -20807,10 +20866,10 @@ class PdsMultiselect {
     }
     render() {
         const hasSelections = this.selectedItems.length > 0;
-        return (hAsync(Host, { key: 'a7806379c53598d41af91be63ee5bd300cc87755', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '0213d40953f1735b84c038e0e0afd1bc289d45ad', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'fa91c2337cdc9f5dea62173aeaa6b56e118a1316', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
+        return (hAsync(Host, { key: 'd0879469e6ff943374c2f035c0a8d6d57c25dc5f', "aria-disabled": this.disabled ? 'true' : null }, hAsync("div", { key: '80caa694099218561b85c93d547ec9208def0ec7', class: "pds-multiselect", onFocusout: this.handleContainerFocusOut }, this.label && (hAsync("label", { key: 'b4eaa2c9e2901c28ecb0b8f55e63e33ad899e945', id: `${this.componentId}-label`, htmlFor: this.componentId, class: {
                 'pds-multiselect__label': true,
                 'visually-hidden': this.hideLabel,
-            } }, this.label)), hAsync("div", { key: '54209b3edfb3583ab1bcecd2b1df973955abfcc3', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("div", { ref: el => (this.pillInlineTriggerEl = el || undefined), part: "trigger", class: {
+            } }, this.label)), hAsync("div", { key: '404ed58aa6bfb2248ffad5e56ebabfe65149b9a4', class: "pds-multiselect__wrapper", ref: el => (this.containerEl = el), style: { width: this.triggerWidth } }, this.slottedTriggerEl ? (hAsync("slot", { name: "trigger" })) : this.selectedDisplay === 'pill' && this.pillPosition === 'inline' ? (hAsync("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,
@@ -20826,7 +20885,7 @@ 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 }, hAsync("span", { class: {
                 'pds-multiselect__trigger-text': true,
                 'pds-multiselect__trigger-text--placeholder': !hasSelections || (this.selectedDisplay === 'pill' && this.pillPosition === 'below'),
-            } }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: 'e3c1bb5c484d851b332e994cd2a528ae95cbfc4d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '2009f6487118252ef1ec14170ddd0c6853ad279f', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'c740f4845ff0c1ccff4633810c1d9d92fb2e8a78', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'b2406ab3b0957a440593b4b986c98476258349be', icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '6d2db6563864c71ab92ed9a8d4133efca23b1c55', style: { display: 'none' } }, hAsync("slot", { key: '2af0e0a7e2410b9850fd15ef524fb388c32dc320' })))));
+            } }, this.getTriggerText()), hAsync("pds-icon", { "aria-hidden": "true", class: "pds-multiselect__icon", icon: enlarge }))), this.renderDropdown()), this.selectedDisplay === 'pill' && this.pillPosition === 'below' && this.renderBelowPills(), hAsync("span", { key: '73f17916a37722fefebd6b5a184a7b3dca6f4a9d', class: "visually-hidden", "aria-live": "polite", "aria-atomic": "true" }, this.removalAnnouncement), this.helperMessage && !(this.errorMessage && this.errorMessage.length > 0) && (hAsync("p", { key: '1a987562b21da6f8d2f8c9f94e93e8c99a7abd74', class: "pds-multiselect__helper", id: messageId(this.componentId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("p", { key: 'ce1f7f48d6f8dee320d87cb7088f084e68cb3ab5', class: "pds-multiselect__error", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '8347dfdec6ef1b81d4cf9f72cba3d9ec965dcf08', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)), hAsync("div", { key: '74cd840e102ad635d2f4bc23cf3bcfaa61d5cea1', style: { display: 'none' } }, hAsync("slot", { key: 'c2fd9e71363a9661062c8d88be0dd78fc98b964d' })))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -20966,8 +21025,12 @@ const cssEscape = (value) => {
 
 const pdsPopoverCss = () => `:host{--sizing-max-width-default:352px;display:inline-block}:host .pds-popover__trigger-wrapper{display:inline-block}:host .pds-popover__content-slot-wrapper{display:none}`;
 
-/** 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;
@@ -21031,11 +21094,29 @@ 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.
@@ -21046,6 +21127,11 @@ 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"
@@ -21060,6 +21146,7 @@ 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
@@ -21067,6 +21154,7 @@ 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;
@@ -21093,6 +21181,13 @@ 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':
@@ -21107,6 +21202,60 @@ 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$1(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$1(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. */
@@ -21128,6 +21277,32 @@ 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');
     }
@@ -21178,6 +21353,48 @@ 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() {
@@ -21187,6 +21404,7 @@ 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
@@ -21221,6 +21439,7 @@ 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
@@ -21229,6 +21448,8 @@ 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();
     }
@@ -21262,7 +21483,7 @@ 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++}`);
@@ -21276,6 +21497,7 @@ 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
@@ -21403,8 +21625,8 @@ 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';
@@ -21418,11 +21640,16 @@ 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,
@@ -21433,9 +21660,11 @@ 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.
@@ -21514,9 +21743,9 @@ class PdsPopover {
         this.portalEl.style.border = root instanceof ShadowRoot && closest$1('[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
@@ -21625,7 +21854,7 @@ 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.
@@ -21750,10 +21979,16 @@ class PdsPopover {
         }, 16); // ~1 frame at 60fps
     }
     render() {
-        return (hAsync(Host, { key: 'da8a0c715df1199231b1265085f3f9ae0234032d', id: this.componentId }, hAsync("span", { key: 'f35023492399420829cec2e88556462f5ac1663e', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '38ebe92eebb87665467b3f92ff94dc8095450063', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: '8917930f4520544d14bbd68b4c7936dd60af19e3', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: '28d3f9112256edd95721a79a7072a9e35a3712bf', onSlotchange: this.handleContentSlotChange }))));
+        return (hAsync(Host, { key: 'e48b897acdc9e89f2e6b1449e7a358da7da1060c', id: this.componentId }, hAsync("span", { key: 'b83b2c234b07703c2c850a9991c94939ed2fdaf7', class: "pds-popover__trigger-wrapper" }, hAsync("slot", { key: '0a7f7829ee445fd57cf824ebee1409b3c571f983', name: "trigger", onSlotchange: this.handleTriggerSlotChange })), hAsync("div", { key: '8c1fe2d4d7c4342b4bd5eb4c56e596f17b4e14fa', class: "pds-popover__content-slot-wrapper" }, hAsync("slot", { key: '4ccfce1f335acbc436f7942e497f5d360f849d48', onSlotchange: this.handleContentSlotChange }))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
+        "openOn": [{
+                "openOnChanged": 0
+            }],
+        "padding": [{
+                "applyPadding": 0
+            }],
         "placement": [{
                 "restorePlacementDefault": 0
             }]
@@ -21764,9 +21999,11 @@ class PdsPopover {
         "$tagName$": "pds-popover",
         "$members$": {
             "popoverTargetAction": [1, "popover-target-action"],
+            "openOn": [1, "open-on"],
             "popoverType": [1, "popover-type"],
             "componentId": [1, "component-id"],
             "maxWidth": [2, "max-width"],
+            "padding": [1],
             "placement": [1537],
             "active": [32],
             "show": [64],
@@ -21971,11 +22208,11 @@ class PdsRadio {
         const renderLabelAndMessages = () => [
             hAsync("label", { htmlFor: this.componentId, key: `${this.componentId}-label` }, hAsync("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' : '' }), hAsync("span", { key: '2e372a880c28f48fb804bac2518208082c141fad', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)),
             this.helperMessage && (hAsync("div", { key: `${this.componentId}-helper`, class: 'pds-radio__message', id: messageId(this.componentId, 'helper') }, this.helperMessage)),
-            this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '889d502575f6a162f450b6b58d76a6f6f1c74e4b', icon: danger, size: "small" }), this.errorMessage))
+            this.errorMessage && (hAsync("div", { key: `${this.componentId}-error`, class: `pds-radio__message pds-radio__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '08e7a2319eddc1d314ee9dddd51a5ce88cd4ae48', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))
         ];
         const hostClass = this.classNames();
         this.hostKeeper.record(hostClass);
-        return (hAsync(Host, { key: '374003032b28407581a55f1fb0a304c49acf3c16', class: hostClass }, this.hasImage() && (hAsync("div", { key: '7eeb516267de1afcfa85fc7567999db488c2f4f5', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'a312fea06f0c015bffab3bb392ff04d4913fd1c0', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
+        return (hAsync(Host, { key: '351376552abee90f50c3aceb03ecf8a81ae1b82b', class: hostClass }, this.hasImage() && (hAsync("div", { key: 'fd85fd36b2ebd99b12c3bb2a13cf3d3e3c26530f', class: "pds-radio__image-container", part: "image-container" }, hAsync("slot", { key: 'abe75dbe38d29340b805f70861b084c1b3836be9', name: "image", onSlotchange: () => (this._hasImage = this.hasImageSlot()) }))), this.hasImage() ? (hAsync("div", { class: "pds-radio__content-wrapper" }, renderLabelAndMessages())) : (renderLabelAndMessages())));
     }
     get el() { return getElement(this); }
     static get style() { return labelCss$3() + pdsRadioCss(); }
@@ -22173,7 +22410,7 @@ class PdsRadioGroup {
                 'pds-radio-group__radios': true,
                 'pds-radio-group__radios--row': this.direction === 'row',
                 'pds-radio-group__radios--column': this.direction === 'column',
-            } }, hAsync("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'd242da328731e55fa52d8e624fdfc750bfa6cce4', icon: danger, size: "small" }), this.errorMessage))));
+            } }, hAsync("slot", { key: 'd88dde3c631e25c01bc7b6d3ef5d517255fabd1a', onSlotchange: () => this.updateChildRadios() })), this.helperMessage && (hAsync("div", { key: 'a229214ed01663b0fc34f35e27c7148b4eb412ab', class: "pds-radio-group__message", id: messageId(this._groupId, 'helper') }, this.helperMessage)), this.errorMessage && (hAsync("div", { key: 'dc092f2e6dbef0cb369cf00a6eccf9a095a0313d', class: "pds-radio-group__message pds-radio-group__message--error", id: messageId(this._groupId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '83b0129d3d45b74ef1f53acc923387b2de7f079b', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {
@@ -25525,7 +25762,7 @@ class PdsSwitch {
         this.hostKeeper.record(hostClass, {}, { 'aria-disabled': ariaDisabled });
         return (hAsync(Host, { key: 'b8bd2870be101081aa8a65cdee45397bc4c21435', class: hostClass, "aria-disabled": ariaDisabled }, hAsync("label", { key: '1e223f22f7fc6c576098353ad67dc11500def8b4', htmlFor: this.componentId }, hAsync("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)), hAsync("span", { key: '1c252b9455471069f8c6ea6c13f2e88c99308b41', class: this.hideLabel ? 'visually-hidden' : '' }, hAsync("slot", { key: 'ce0d471918bd3018f5e55d0d1e6c5c2247790f81', name: "label", onSlotchange: this.updateHasLabelSlot }), !this.hasLabelSlot && this.label)), this.helperMessage &&
             hAsync("div", { key: '64874b15403f1f42344715ac34febdfb8d94042a', class: `pds-switch__message`, id: messageId(this.componentId, 'helper') }, this.helperMessage), this.errorMessage &&
-            hAsync("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: 'f49caaba976579eb5588e442499595c7dba7ceff', icon: danger, size: "small" }), this.errorMessage)));
+            hAsync("div", { key: '560ea486859124bb0ac2f75ab4bd34b0bca7efbc', class: `pds-switch__message pds-switch__message--error`, id: messageId(this.componentId, 'error'), "aria-live": "assertive" }, hAsync("pds-icon", { key: '2ae8dc876745af26fa2418f2265248aeb8f97a2b', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage)));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -26405,7 +26642,7 @@ class PdsTableHeadCell {
                 this.tableRef.fixedColumn &&
                 this.tableRef.selectable
                 ? { '--fixed-cell-position': '40px' }
-                : {} }, hAsync("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: 'cba838fa029b280561676c2b57af7f8f00055511', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon" }))));
+                : {} }, hAsync("slot", { key: '96084d87a34d7b601a8e8325f344f1fe6601204e' }), this.sortable && this.isActive && (hAsync("pds-icon", { key: '79606519d810dc9882a91cbc3b6a199457086631', icon: this.sortingDirection === 'asc' ? upSmall : downSmall, part: "sort-icon", "aria-hidden": "true" }))));
     }
     get hostElement() { return getElement(this); }
     static get style() { return pdsTableHeadCellCss(); }
@@ -27407,7 +27644,7 @@ class PdsTextarea {
         return (hAsync(Host, { key: '5933dab0c3cd25b1cf2f6851ece8e8064bc7f3b9', "aria-disabled": this.disabled ? 'true' : null, "aria-readonly": this.readonly ? 'true' : null, "has-action": this.hasAction && !this.hideLabel ? 'true' : null }, hAsync("div", { key: '4f1752514d8e5b0f0e3439515cb9e5f043607da1', class: "pds-textarea" }, this.label &&
             hAsync("div", { key: 'd4e6df0b381d781b70eeae72ff2f0e9428c0d901', class: "pds-textarea__label-wrapper" }, hAsync("label", { key: '747d82067eb571d02840cfd981865821099f288b', htmlFor: this.componentId }, hAsync("span", { key: 'bfab6e8ede66d0169dd020b7dd97e125aba417b0', class: this.hideLabel ? 'visually-hidden' : '' }, this.label)), !this.hideLabel && this.renderAction()), hAsync("div", { key: 'a18611c03270e7491c1af69f931419c832192c06', class: "pds-textarea__field-wrapper" }, hAsync("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 &&
             hAsync("p", { key: 'dcb36f21443d2a782c25b7c29c4ce6215f3b212b', class: "pds-textarea__helper-message", id: messageId(this.componentId, 'helper') }, this.helperMessage), this.invalid &&
-            hAsync("p", { key: 'be30fb1a38453296e26b775955389c0ec569df67', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: 'd93dce10d9d9db5815ac5f331848940aed735ba0', icon: danger, size: "small" }), this.errorMessage))));
+            hAsync("p", { key: 'be30fb1a38453296e26b775955389c0ec569df67', "aria-live": "assertive", class: "pds-textarea__error-message", id: messageId(this.componentId, 'error') }, hAsync("pds-icon", { key: '853f06489ef6ca50205799659d221bd3bea7d8da', "aria-hidden": "true", icon: danger, size: "small" }), this.errorMessage))));
     }
     static get formAssociated() { return true; }
     get el() { return getElement(this); }
@@ -27587,7 +27824,7 @@ class PdsToast {
                 'pds-toast--animating-out': this.isAnimatingOut
             }, role: "alert", "aria-live": "polite" }, this.renderIcon(), hAsync("span", { key: 'eaf615d41c138e2c73088d29bac9349f49a63ba7', class: "pds-toast__message" }, hAsync("slot", { key: '33973447154d80b016f5a7954b0473db03228379' })), this.dismissible && (hAsync("button", { key: 'e189834633e1e648282ee43633fd05e53ce38869', type: "button", part: "dismiss", class: "pds-toast__button", onClick: () => {
                 this.dismiss();
-            }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '623a0e4d56e30781fb31bcd085511c17a4777edc', name: "remove" }))))));
+            }, "aria-label": this.dismissLabel }, hAsync("pds-icon", { key: '913201979e52be743ba933ff173e023b81553362', name: "remove", "aria-hidden": "true" }))))));
     }
     get el() { return getElement(this); }
     static get watchers() { return {