@pine-ds/core 4.11.0 → 4.12.0

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-item/pds-dropdown-menu-item.js

@@ -1,39 +1,71 @@
 import { h, Host } from "@stencil/core";
 /**
+ * @slot (default) - The item's label.
+ * @slot start - Content to display before the item's label, such as a `pds-icon`. A `pds-icon` without an `aria-label` or `aria-labelledby` is decorative; a named one is announced before the label, so leave decorative icons unnamed.
  * @part button - Exposes the item's inner element for styling. Appears on button and informational items, not on links.
  */
 export class PdsDropdownMenuItem {
     constructor() {
         /**
-         * It determines whether or not the dropdown-item is destructive.
+         * Determines whether or not the dropdown menu item is destructive.
          * @defaultValue false
          */
         this.destructive = false;
         /**
-         * It determines whether or not the dropdown-item is disabled.
+         * Determines whether or not the dropdown menu item is disabled.
          * @defaultValue false
          */
         this.disabled = false;
         /**
-         * It determines whether or not the dropdown-item is informational: text that the arrow keys
+         * Determines whether or not the dropdown menu 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.
+         * Shows the external-link (launch) icon. Opens in a new tab unless `target` says otherwise.
+         * Only applies when href is set. Ignored when `informational` is set.
          * @defaultValue false
          */
         this.external = false;
-        this.hasFocus = false;
-        this.handleFocus = () => {
-            this.hasFocus = true;
+        this.handleClick = () => {
+            var _a, _b;
+            if (this.disabled || this.informational)
+                return;
+            // Filter only pds-dropdown-menu-item elements and find the index of the current item
+            const menuItems = Array.from((_b = (_a = this.host.parentElement) === null || _a === void 0 ? void 0 : _a.children) !== null && _b !== void 0 ? _b : []).filter((child) => child.tagName.toLowerCase() === 'pds-dropdown-menu-item');
+            const itemIndex = menuItems.indexOf(this.host);
+            // The label's text: default-slot content only, so start-slot content stays out of it
+            const content = Array.from(this.host.childNodes)
+                .filter((node) => node.nodeType === Node.TEXT_NODE ||
+                (node.nodeType === Node.ELEMENT_NODE && !node.getAttribute('slot')))
+                .map((node) => node.textContent)
+                .join('')
+                .trim();
+            this.pdsClick.emit({
+                itemIndex,
+                item: this.host,
+                content
+            });
         };
-        this.handleBlur = () => {
-            this.hasFocus = false;
+        // Checked directly against the light DOM rather than kept in @State: Stencil's JSX doesn't
+        // type a `class` prop for `<slot>`, and a ref callback only fires once, on creation, so it
+        // can't push a later @State change back onto the element either way. Called once up front
+        // (from the ref, since nothing's assigned at componentWillLoad's point) and again on every
+        // native slotchange after that, both calling classList directly. add/remove, not the two-argument
+        // form of toggle(): Stencil's mock-doc (used by spec tests) implements toggle() as a plain flip
+        // and silently ignores a force argument, so a toggle() call that'd be correct against a real
+        // DOM can still fail there.
+        this.updateStartSlotEmpty = () => {
+            var _a, _b;
+            const hasContent = Array.from(this.host.children).some((child) => child.getAttribute('slot') === 'start');
+            if (hasContent) {
+                (_a = this.startSlotEl) === null || _a === void 0 ? void 0 : _a.classList.remove('pds-dropdown-menu-item__start--empty');
+            }
+            else {
+                (_b = this.startSlotEl) === null || _b === void 0 ? void 0 : _b.classList.add('pds-dropdown-menu-item__start--empty');
+            }
         };
         // Space would otherwise scroll the page, since nothing in the item takes the key.
         this.handleInformationalKeyDown = (event) => {
@@ -42,63 +74,69 @@ export class PdsDropdownMenuItem {
             }
         };
         this.handleKeyDown = (event) => {
-            // Handle keyboard events
-            if (!this.disabled && (event.key === 'Enter')) {
-                // Only prevent default for button elements or Space key
-                // For links with Enter key, we want the default navigation behavior
-                if (!this.href) {
-                    event.preventDefault();
-                }
-                this.handleClick();
+            var _a;
+            if (this.disabled || event.key !== 'Enter')
+                return;
+            if (this.href != null) {
+                // Enter on the inner <a> itself follows the link, and its native click reaches the host's
+                // click handler below, which emits pdsClick -- returning early here leaves that alone.
+                // Safari leaves focus on the pds-link host after a mouse click, not its inner <a>, where
+                // Enter would otherwise do nothing: an anchor only activates on Enter when it is itself the
+                // focused element, not an ancestor of it. Forwarding the click to the real anchor instead
+                // runs the browser's own navigation (hash, download, target), and still reaches the same
+                // host click handler, so pdsClick still isn't emitted twice.
+                if (event.composedPath()[0] !== this.innerAnchor())
+                    (_a = this.innerAnchor()) === null || _a === void 0 ? void 0 : _a.click();
+                return;
             }
+            event.preventDefault();
+            this.handleClick();
         };
     }
     /**
-     * Trigger the click event
+     * Trigger the click event. Does nothing when the item is disabled or informational.
      */
     async clickItem() {
         this.handleClick();
     }
     ;
-    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);
-        // Get the text content from the slotted content
-        const content = ((_a = this.host.textContent) === null || _a === void 0 ? void 0 : _a.trim()) || '';
-        this.pdsClick.emit({
-            itemIndex,
-            item: this.host,
-            content
-        });
+    // Always render the start slot so slotted content is projected reliably, with nothing wrapping
+    // it: a wrapper would sit between the slotted content and this host, leaving it without an
+    // assignedSlot, which breaks a click-target walk that follows assignedSlot up to find a link
+    // (Turbo's link lookup works this way). The --empty class hides it when nothing is slotted, so
+    // it adds no gap.
+    renderContent() {
+        return [
+            h("slot", { name: "start", onSlotchange: this.updateStartSlotEmpty, ref: (el) => {
+                    this.startSlotEl = el;
+                    if (el) {
+                        el.classList.add('pds-dropdown-menu-item__start');
+                        this.updateStartSlotEmpty();
+                    }
+                } }),
+            h("slot", null)
+        ];
     }
     renderElement() {
         if (this.informational) {
-            return (h("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 }, h("slot", null)));
+            return (h("div", { class: "pds-dropdown-menu-item__content", role: "menuitem", "aria-disabled": "true", part: "button", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleInformationalKeyDown }, this.renderContent()));
         }
         if (this.href != null) {
-            return (h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: {
-                    'pds-dropdown-menu-item__content': true,
-                    'has-focus': this.hasFocus
-                }, tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, onFocus: this.handleFocus, onBlur: this.handleBlur, "aria-disabled": this.disabled ? 'true' : null }, h("slot", null)));
+            return (h("pds-link", { download: this.download, href: this.disabled ? null : this.href, external: this.external, externalLabel: this.externalLabel, target: this.target, class: "pds-dropdown-menu-item__content", tabIndex: this.disabled ? -1 : 0, onKeyDown: this.handleKeyDown, "aria-disabled": this.disabled ? 'true' : null }, this.renderContent()));
         }
-        return (h("button", { class: {
-                'pds-dropdown-menu-item__content': true,
-                'has-focus': this.hasFocus
-            }, 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 }, h("slot", null)));
+        return (h("button", { class: "pds-dropdown-menu-item__content", tabIndex: this.disabled ? -1 : 0, type: "button", part: "button", onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-disabled": this.disabled ? 'true' : null }, this.renderContent()));
+    }
+    // pds-link's own shadow root, one level in from its host.
+    innerAnchor() {
+        var _a, _b, _c, _d;
+        return (_d = (_c = (_b = (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-link')) === null || _b === void 0 ? void 0 : _b.shadowRoot) === null || _c === void 0 ? void 0 : _c.querySelector('a')) !== null && _d !== void 0 ? _d : null;
     }
     render() {
-        return (h(Host, { key: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
+        return (h(Host, { key: '139943faad1c0047bb0363e0eaa0cde9efb2f957', 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",
+            }, onClick: 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()));
@@ -151,7 +189,7 @@ export class PdsDropdownMenuItem {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "It determines whether or not the dropdown-item is destructive."
+                    "text": "Determines whether or not the dropdown menu item is destructive."
                 },
                 "getter": false,
                 "setter": false,
@@ -174,7 +212,7 @@ export class PdsDropdownMenuItem {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "It determines whether or not the dropdown-item is disabled."
+                    "text": "Determines whether or not the dropdown menu item is disabled."
                 },
                 "getter": false,
                 "setter": false,
@@ -213,7 +251,7 @@ export class PdsDropdownMenuItem {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.\nIgnored when `informational` is set."
+                    "text": "If provided, renders the dropdown menu item as an anchor (`<a>`) element instead of a button.\nIgnored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -235,7 +273,7 @@ export class PdsDropdownMenuItem {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "It determines whether or not the dropdown-item is informational: text that the arrow keys\nreach but that can't be activated. Takes precedence over `href` and `destructive`.\nScreen readers announce it as dimmed or unavailable, the same way as a disabled item."
+                    "text": "Determines whether or not the dropdown menu item is informational: text that the arrow keys\nreach but that can't be activated. Takes precedence over `href` and `destructive`.\nScreen readers announce it as dimmed or unavailable, the same way as a disabled item."
                 },
                 "getter": false,
                 "setter": false,
@@ -258,7 +296,7 @@ export class PdsDropdownMenuItem {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "Determines whether the link should open in a new tab and display an external icon.\nThis is a simpler alternative to using `target=\"_blank\"` for the common case.\nIgnored when `informational` is set."
+                    "text": "Shows the external-link (launch) icon. Opens in a new tab unless `target` says otherwise.\nOnly applies when href is set. Ignored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -281,7 +319,7 @@ export class PdsDropdownMenuItem {
                             "name": "defaultValue",
                             "text": "'(opens in a new tab)'"
                         }],
-                    "text": "Accessible label for the external-link icon, passed to the inner\n`pds-link`. Pass a translated string to localize it; defaults to English.\nPass an empty string to make the icon decorative."
+                    "text": "Accessible label for the icon that `external` shows, passed to the inner\n`pds-link` and appended to the item's name. It isn't announced when\n`target` is anything other than `_blank`. Pass a translated string to\nlocalize it; defaults to English. Pass an empty string to make the icon\ndecorative."
                 },
                 "getter": false,
                 "setter": false,
@@ -303,7 +341,7 @@ export class PdsDropdownMenuItem {
                             "name": "defaultValue",
                             "text": "undefined"
                         }],
-                    "text": "Specifies where to open the linked document when href is provided.\nTakes precedence over the `external` prop if both are set.\nOnly applies when href is set. Ignored when `informational` is set."
+                    "text": "Specifies where to open the linked document when href is provided.\nOverrides the new-tab default of `external`; the icon still shows.\nOnly applies when href is set. Ignored when `informational` is set."
                 },
                 "getter": false,
                 "setter": false,
@@ -312,11 +350,6 @@ export class PdsDropdownMenuItem {
             }
         };
     }
-    static get states() {
-        return {
-            "hasFocus": {}
-        };
-    }
     static get events() {
         return [{
                 "method": "pdsClick",
@@ -326,7 +359,7 @@ export class PdsDropdownMenuItem {
                 "composed": true,
                 "docs": {
                     "tags": [],
-                    "text": "Emitted when the dropdown-item is clicked."
+                    "text": "Emitted when the dropdown menu item is clicked."
                 },
                 "complexType": {
                     "original": "{itemIndex: number, item: HTMLPdsDropdownMenuItemElement, content: string}",
@@ -355,7 +388,7 @@ export class PdsDropdownMenuItem {
                     "return": "Promise<void>"
                 },
                 "docs": {
-                    "text": "Trigger the click event",
+                    "text": "Trigger the click event. Does nothing when the item is disabled or informational.",
                     "tags": []
                 }
             }

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.js

@@ -2,13 +2,13 @@ import { Host, h } from "@stencil/core";
 export class PdsDropdownMenuSeparator {
     constructor() {
         /**
-         * It determines whether or not the dropdown-item is disabled.
+         * Has no effect. A separator can't be focused or activated.
          * @defaultValue false
          */
         this.disabled = false;
     }
     render() {
-        return (h(Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, h("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
+        return (h(Host, { key: '74a214d61042d5759af5aef9d6410ed1a267083c', id: this.componentId }, h("hr", { key: 'c521eda51523fce09bd408af2586645fc9a9cd03' })));
     }
     static get is() { return "pds-dropdown-menu-separator"; }
     static get encapsulation() { return "shadow"; }
@@ -58,7 +58,7 @@ export class PdsDropdownMenuSeparator {
                             "name": "defaultValue",
                             "text": "false"
                         }],
-                    "text": "It determines whether or not the dropdown-item is disabled."
+                    "text": "Has no effect. A separator can't be focused or activated."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.css

@@ -11,6 +11,8 @@
   border-radius: var(--pine-dimension-xs);
   left: var(--pine-dimension-none);
   min-width: 170px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   padding: var(--pine-dimension-xs);
   position: fixed;
   z-index: var(--pine-z-index-overlay);

package/dist/collection/components/pds-dropdown-menu/pds-dropdown-menu.js

@@ -1,8 +1,10 @@
 import { Host, h } from "@stencil/core";
 import { setAttributesIfChanged } from "../../utils/attributes";
 import { limitRestores } from "../../utils/keep-hydrated";
-import { computePosition, flip, offset, shift, autoUpdate, } from "@floating-ui/dom";
+import { computePosition, flip, offset, shift, size, autoUpdate, } from "@floating-ui/dom";
 /**
+ * @slot trigger - The trigger element for the dropdown menu. It receives `aria-expanded` and `aria-haspopup`, so slot the focusable control itself, such as a `pds-button`, not a wrapper around it.
+ * @slot (default) - The menu items: `pds-dropdown-menu-item` and `pds-dropdown-menu-separator` elements, or raw `<a>` and `<button>` elements.
  * @slot header - Non-interactive content displayed above the menu items inside the dropdown panel. It renders outside the menu role, so assistive tech reads it as plain content rather than as a menu item.
  * @part menu-panel - Exposes the dropdown menu container for styling.
  */
@@ -11,7 +13,10 @@ export class PdsDropdownMenu {
         this.isOpen = false;
         this.menuItems = [];
         this.cleanupAutoUpdate = null;
+        // Counts each opening, so a position worked out for an earlier opening is ignored.
+        this.openCount = 0;
         this.triggerObserver = null;
+        this.triggerVisibility = null;
         this.currentFocusIndex = -1;
         this.hasHeader = false;
         /**
@@ -72,12 +77,20 @@ export class PdsDropdownMenu {
         // Open the dropdown and position it
         this.openDropdown = () => {
             var _a;
+            const opening = ++this.openCount;
             const updatePosition = () => {
                 computePosition(this.triggerEl, this.panelEl, {
                     placement: this.placement,
                     strategy: 'fixed',
-                    middleware: [offset(6), flip(), shift({ padding: 5 })],
+                    middleware: [
+                        offset(6),
+                        flip(),
+                        shift({ padding: 5 }),
+                        size({ padding: 5, apply: ({ availableHeight, elements }) => this.capPanelHeight(elements.floating, availableHeight) }),
+                    ],
                 }).then(({ x, y }) => {
+                    if (!this.isOpen || opening !== this.openCount)
+                        return;
                     Object.assign(this.panelEl.style, {
                         left: `${x}px`,
                         top: `${y}px`,
@@ -88,12 +101,15 @@ export class PdsDropdownMenu {
             updatePosition();
             // Set up auto-update for window resize and scroll
             this.cleanupAutoUpdate = autoUpdate(this.triggerEl, this.panelEl, updatePosition);
+            this.watchTriggerVisibility();
             (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.remove('is-hidden');
             this.isOpen = true;
             this.syncTriggerAria();
         };
-        // Close the dropdown
-        this.closeDropdown = () => {
+        // Close the dropdown. Closed because its trigger left the view, focus from the menu still goes back
+        // to the trigger, so it isn't lost, but without scrolling the trigger back into view. The next Tab
+        // carries on from there.
+        this.closeDropdown = ({ preventScroll = false } = {}) => {
             var _a;
             (_a = this.host.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('pds-box').classList.add('is-hidden');
             this.isOpen = false;
@@ -102,12 +118,13 @@ export class PdsDropdownMenu {
                 this.cleanupAutoUpdate();
                 this.cleanupAutoUpdate = null;
             }
+            this.stopWatchingTriggerVisibility();
             this.syncTriggerAria();
             // Reset focus index
             this.currentFocusIndex = -1;
             // Return focus to trigger
             if (this.isFocusInMenu()) {
-                this.focusTrigger();
+                this.focusTrigger(preventScroll);
             }
         };
         // Handle click on the trigger element
@@ -137,6 +154,10 @@ export class PdsDropdownMenu {
         }
         (_a = this.triggerObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.triggerObserver = null;
+        this.stopWatchingTriggerVisibility();
+        // The menu was detached, so a position still being worked out for it is dropped. The menu
+        // itself stays open.
+        this.openCount++;
     }
     // The trigger is the consumer's element, so anything can rewrite its attributes (a Turbo morph
     // matches it to server HTML that has no ARIA). Put Pine's values back when that happens.
@@ -153,18 +174,72 @@ export class PdsDropdownMenu {
             attributeFilter: ['aria-haspopup', 'aria-expanded'],
         });
     }
+    // The panel is fixed, so a menu taller than the room beside its trigger would run off the window
+    // with no way to reach its last items. It's capped to that room and scrolls inside itself. A
+    // smaller max-height set through the menu-panel part is kept. The cap is important, as a
+    // ::part() rule outside the shadow root otherwise beats the panel's own inline style.
+    //
+    // Removing `max-height` lifts the panel's own scroll constraint, so a layout read in between
+    // (`getComputedStyle`) can commit a frame with nothing left to scroll, and the browser resets
+    // `scrollTop` to 0. This runs on every `autoUpdate` pass, including a small ancestor scroll that
+    // leaves the trigger in view, so a menu scrolled partway down would otherwise jump back to the
+    // top on its own. Restoring `scrollTop` afterward keeps the user's place; the browser clamps it
+    // automatically if the new max-height is shorter than before.
+    capPanelHeight(panel, availableHeight) {
+        const { scrollTop } = panel;
+        panel.style.removeProperty('max-height');
+        const partMaxHeight = getComputedStyle(panel).maxHeight;
+        const room = `${Math.max(0, availableHeight)}px`;
+        panel.style.setProperty('max-height', partMaxHeight === 'none' ? room : `min(${partMaxHeight}, ${room})`, 'important');
+        panel.scrollTop = scrollTop;
+    }
+    // Once the trigger is fully out of view, scrolled or clipped by any container or the window, the
+    // menu closes rather than float away from it, much as a native select's list does. An
+    // IntersectionObserver measures against the layout viewport, so panning a pinch-zoomed page
+    // doesn't close it, as Floating UI's hide() would.
+    watchTriggerVisibility() {
+        this.stopWatchingTriggerVisibility();
+        if (typeof IntersectionObserver === 'undefined')
+            return;
+        // Only a trigger seen in view this opening closes the menu when it leaves.
+        let triggerSeen = false;
+        let broughtIntoView = false;
+        this.triggerVisibility = new IntersectionObserver((entries) => {
+            if (!this.isOpen)
+                return;
+            if (entries[entries.length - 1].isIntersecting) {
+                triggerSeen = true;
+            }
+            else if (triggerSeen) {
+                this.closeDropdown({ preventScroll: true });
+            }
+            else if (!broughtIntoView) {
+                // Opened with its trigger out of view, from the keyboard after an earlier close or from a
+                // script, the trigger is scrolled into view so the menu opens beside it. A trigger that
+                // still can't be seen leaves the menu open.
+                broughtIntoView = true;
+                this.triggerEl.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+            }
+        });
+        this.triggerVisibility.observe(this.triggerEl);
+    }
+    stopWatchingTriggerVisibility() {
+        var _a;
+        (_a = this.triggerVisibility) === null || _a === void 0 ? void 0 : _a.disconnect();
+        this.triggerVisibility = null;
+    }
     // Outside clicks and scripted closes leave focus where it is; only focus in the menu or on its trigger returns.
     isFocusInMenu() {
         const focused = this.host.getRootNode().activeElement;
         return focused != null && this.host.contains(focused);
     }
     // A trigger whose host can't take focus itself, such as pds-chip, passes it to the control inside.
-    focusTrigger() {
+    focusTrigger(preventScroll = false) {
         var _a, _b;
-        this.triggerEl.focus();
+        this.triggerEl.focus({ preventScroll });
         if (this.host.getRootNode().activeElement === this.triggerEl)
             return;
-        (_b = (_a = this.triggerEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [href], [tabindex]:not([tabindex="-1"])')) === null || _b === void 0 ? void 0 : _b.focus();
+        (_b = (_a = this.triggerEl.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('button, [href], [tabindex]:not([tabindex="-1"])')) === null || _b === void 0 ? void 0 : _b.focus({ preventScroll });
     }
     // Check if a menu item is disabled (handles both component and raw elements)
     isItemDisabled(item) {
@@ -369,7 +444,7 @@ export class PdsDropdownMenu {
         }
     }
     render() {
-        return (h(Host, { key: 'aa4ce84354cf87638ee46fd7ed69520228b7e656', id: this.componentId }, h("slot", { key: '948800e67d18c8c6cc9e77ef3aeab635c5035453', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: '3ce2a2879b14aad975cea8ae72fcbf8c3abcf20c', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: 'ad25fbf4f3c7a24653c229e64fe2ce893a92e4c8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: '35a5903543e08577997b456bcd312bdd009fd8fc', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'a9593adacf047918c1d87494f8c951a2a4a5f76f', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: '8d2def1cc7020608220099f4ced0f44e9838cce8', onSlotchange: this.handleSlotChange })))));
+        return (h(Host, { key: '1776921b263178df0de2cdf07a9fb81c668381b6', id: this.componentId }, h("slot", { key: '952fdc2b6bb3f1fca5a17dc1962af0e4c38f92e2', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), h("pds-box", { key: 'f5f95cebdcf4a4d78d0e4bc47b99c681045f8d38', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, h("div", { key: '8bff8a8dd06fe1f433bc512bc0ac9030fc9714e7', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, h("slot", { key: '1c248f137414dd00037d333b1e07c6b04a7b079d', name: "header", onSlotchange: this.handleHeaderSlotChange })), h("div", { key: 'db9954f26762a65e762f8c7b3dfd60e363ff8573', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, h("slot", { key: 'd5cb929db03966d673b23de150970744936cf26d', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "pds-dropdown-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/pds-dropdown-menu/stories/pds-dropdown-menu.stories.js

@@ -25,7 +25,7 @@ const BaseTemplate = (args) => html`
     <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
     <pds-dropdown-menu-item disabled>disabled</pds-dropdown-menu-item>
     <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
-    <pds-dropdown-menu-item destructive><pds-icon name="trash"></pds-icon> Delete</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item destructive><pds-icon slot="start" name="trash"></pds-icon>Delete</pds-dropdown-menu-item>
     <pds-dropdown-menu-item href="https://wwww.google.com">Go to Google</pds-dropdown-menu-item>
     <pds-dropdown-menu-item href="https://wwww.google.com" disabled>Go to Google</pds-dropdown-menu-item>
   </pds-dropdown-menu></div>`;
@@ -75,3 +75,26 @@ InformationalOnly.args = {
   componentId: 'informational-only-dropdown',
   placement: 'bottom-start',
 }
+
+const WithIconsTemplate = (args) => html`
+<div style="height: 250px">
+  <pds-dropdown-menu
+    component-id=${args.componentId}
+    placement=${args.placement}
+  >
+    <pds-button slot="trigger">Actions</pds-button>
+    <pds-dropdown-menu-item><pds-icon slot="start" name="pen"></pds-icon>Edit</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item><pds-icon slot="start" name="duplicate"></pds-icon>Duplicate</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item href="#export"><pds-icon slot="start" name="download"></pds-icon>Download</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item disabled><pds-icon slot="start" name="archive"></pds-icon>Archive</pds-dropdown-menu-item>
+    <pds-dropdown-menu-item informational><pds-icon slot="start" name="gear"></pds-icon>Managed in settings</pds-dropdown-menu-item>
+    <pds-dropdown-menu-separator></pds-dropdown-menu-separator>
+    <pds-dropdown-menu-item destructive><pds-icon slot="start" name="trash"></pds-icon>Delete</pds-dropdown-menu-item>
+  </pds-dropdown-menu>
+</div>`;
+
+export const WithIcons = WithIconsTemplate.bind();
+WithIcons.args = {
+  componentId: 'icons-dropdown',
+  placement: 'bottom-start',
+}

package/dist/collection/components/pds-filters/pds-filter/pds-filter.css

@@ -142,8 +142,9 @@
   border: 0;
   border-radius: var(--pine-dimension-100);
   box-shadow: var(--pine-box-shadow-100);
+  box-sizing: border-box;
   display: none;
-  inline-size: 228px;
+  inline-size: 244px;
   inset: unset;
   padding: var(--pine-dimension-100);
   z-index: var(--pine-z-index-overlay);

package/dist/collection/components/pds-filters/pds-filter/pds-filter.js

@@ -1,12 +1,10 @@
 import { Host, h } from "@stencil/core";
 import { isRtlDirection } from "../../../utils/scroll";
 import { enlarge, trash } from "@pine-ds/icons/icons";
+import { bindTruncationTooltips } from "../../../utils/truncation-tooltip";
 /**
- * Individual filter component with cross-browser popover positioning.
- *
- * Uses a hybrid approach for optimal cross-browser compatibility:
- * - Modern browsers: CSS anchor positioning + JavaScript flip classes
- * - Fallback browsers: JavaScript positioning with viewport boundary detection
+ * A single filter in `pds-filters`: a trigger button that opens a popover holding the filter controls.
+ * The `clear` variant has no popover and emits `pdsFilterClear` instead.
  *
  * @part button - Exposes the trigger button element for styling.
  * @part button-content - Exposes the button content container for styling.
@@ -19,6 +17,16 @@ export class PdsFilter {
     constructor() {
         this.scrollRAF = null;
         this.lastScrollTime = 0;
+        this.truncationTooltip = bindTruncationTooltips((textEl) => {
+            var _a;
+            return ({
+                // The trigger, not the host, whose child the popover is; `__button-content` holds the max width, so the text overflows.
+                hostEl: (_a = textEl.closest('button')) !== null && _a !== void 0 ? _a : textEl,
+                contentEl: textEl,
+                getTooltipText: () => { var _a; return (_a = this.text) !== null && _a !== void 0 ? _a : ''; },
+                manageTabIndex: false,
+            });
+        });
         /**
          * The variant style of the filter trigger.
          * @defaultValue 'default'
@@ -122,11 +130,15 @@ export class PdsFilter {
             // The toggle event listener will capture the state change and emit events
         };
     }
+    connectedCallback() {
+        this.syncTruncationTooltip();
+    }
     /**
      * Component lifecycle: Clean up when disconnected from DOM.
      * Prevents memory leaks by canceling pending operations and closing popovers.
      */
     disconnectedCallback() {
+        this.truncationTooltip.destroy();
         // Cancel pending animation frames
         if (this.scrollRAF) {
             cancelAnimationFrame(this.scrollRAF);
@@ -152,6 +164,7 @@ export class PdsFilter {
         }
     }
     componentDidRender() {
+        this.syncTruncationTooltip();
         // Note: popoverEl is set via ref callback in render method
         // For browsers with native popover API, we need direct element listeners
         // since the document listener may not capture native popover toggle events
@@ -165,6 +178,10 @@ export class PdsFilter {
             }
         }
     }
+    syncTruncationTooltip() {
+        var _a;
+        this.truncationTooltip.sync([(_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__button-text')]);
+    }
     /**
      * Reposition popovers on window resize.
      */
@@ -485,7 +502,7 @@ export class PdsFilter {
         return null;
     }
     render() {
-        return (h(Host, { key: '9b2286e9a0d7f88b7f6bc90f8444185cfec832c8', id: this.componentId }, h("button", { key: '968953600d615f2739757a91422dafdb817c9a6f', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: 'ee479f7e510ffcb54f7857cb7d1345f2a5c1d76a', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: 'e98aa8b915a2460f3c7d49e20ec7d43853ee5f9f', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '3084babfba2d96880b2829a60d2ef00140a6813b', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'e901488be75a18bedc6b2c42be5c398fd2cf2a29' })))));
+        return (h(Host, { key: '0876855dacf0172f83a6e1afcc8b9b1b6acf1251', id: this.componentId }, h("button", { key: 'e20b93644a520ed3351fb5802d1e6f0cb2465248', class: this.getTriggerClasses(), type: "button", popoverTarget: this.variant !== 'clear' ? `${this.componentId}-popover` : undefined, popoverTargetAction: this.variant !== 'clear' ? 'toggle' : undefined, onKeyDown: this.variant === 'clear' ? this.handleKeyDown : undefined, onClick: (event) => this.handleClick(event), part: "button", "aria-expanded": this.isOpen ? 'true' : 'false', "aria-haspopup": this.variant !== 'clear' ? 'true' : undefined, "aria-controls": this.variant !== 'clear' ? `${this.componentId}-popover` : undefined }, h("span", { key: '075e2f221d297ede0a52185853acbd3e74b99339', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: 'cd1d3a15e0969c3d960786a7fd7fd7b3195dd4de', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '6524cb11b96f03ef5c528325a950c9f80f5ae9fa', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '06cc2ca22068ccedbddf3ff69ce4a352fd01d142' })))));
     }
     static get is() { return "pds-filter"; }
     static get encapsulation() { return "shadow"; }
@@ -581,7 +598,7 @@ export class PdsFilter {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The text content displayed in the trigger button."
+                    "text": "The text content displayed in the trigger button.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/pds-image/image-interface.js

@@ -0,0 +1 @@
+export {};