@pine-ds/core 4.10.0 → 4.12.0

package/dist/cjs/pds-drawer-content.cjs.entry.js

@@ -15,7 +15,7 @@ const PdsDrawerContent = class {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-drawer-content'), '.pds-drawer-content');
     }
     render() {
-        return (index.h("div", { key: 'b15b087506c1292f9d67e531e8d935069749c09d', class: "pds-drawer-content" }, index.h("slot", { key: '9c60ca75c7905e7e994f9c41eee213b962afb833' })));
+        return (index.h("div", { key: '0d59724de849bc2364d88c4460f70f8b1efa5d1b', class: "pds-drawer-content" }, index.h("slot", { key: '83782b9b4ad99f8075809c9e63d8351fa6109b11' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-drawer-footer.cjs.entry.js

@@ -15,7 +15,7 @@ const PdsDrawerFooter = class {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-drawer__footer'), '.pds-drawer__footer');
     }
     render() {
-        return (index.h("footer", { key: 'a4eec0aff617c605b94f8d3b9ec1e2d98cded6fb', class: "pds-drawer__footer" }, index.h("slot", { key: '6dc379c940e37edfd05d99728be9dff58ca1d717' })));
+        return (index.h("footer", { key: '1345b87580b1931d7c541fac71c0dff33b6cfbf9', class: "pds-drawer__footer" }, index.h("slot", { key: '638fa6bd14d28e814e0e40b02efb1b74f89f51dd' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-drawer-header.cjs.entry.js

@@ -15,7 +15,7 @@ const PdsDrawerHeader = class {
         reconnectedContent.unwrapReconnectedContent(this.el.querySelector('.pds-drawer__header'), '.pds-drawer__header');
     }
     render() {
-        return (index.h("header", { key: '6b9338e5dbf7a7e580c11b28c95ca53693528382', class: "pds-drawer__header" }, index.h("slot", { key: '0990fbcf94c0c438b98cf1e8945f1e2fd9aa33dc' })));
+        return (index.h("header", { key: '6354f36d59e608a85c3cb75d1e5cf04c48dd7045', class: "pds-drawer__header" }, index.h("slot", { key: '2c9d8a405c8850588377553f3d9a19790828cba7' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-drawer.cjs.entry.js

@@ -25,8 +25,8 @@ const PdsDrawer = class {
          */
         this.open = false;
         /**
-         * Which edge of the viewport the drawer is docked to. Logical, so this is
-         * free under RTL — `end` is the inline-end edge regardless of direction.
+         * Which edge of the viewport the drawer is docked to. Logical: `end` is the
+         * inline-end edge, so an `end` drawer docks on the left in right-to-left layouts.
          * @default 'end'
          */
         this.side = 'end';
@@ -52,9 +52,7 @@ const PdsDrawer = class {
         /**
          * Whether the drawer can be dismissed with a pointerdown outside it (in a
          * `modal` drawer, a click on its backdrop).
-         * Replaces `pds-modal`'s `backdropDismiss`.
-         * This also gates Escape, matching how `backdropDismiss` gates Escape on
-         * `pds-modal` today: setting this to `false` means the close button is the
+         * Setting it to `false` also turns off Escape, so the close button is the
          * only way out.
          *
          * A trigger outside the drawer should only ever set `open` to `true` and
@@ -145,11 +143,11 @@ const PdsDrawer = class {
         this.open = false;
     }
     render() {
-        return (index.h(index.Host, { key: '7cf13256457914e48e8fde422832a2a52ee0c13b', class: {
+        return (index.h(index.Host, { key: 'dda3f1dc3013f28a3fc8d1894609dd4b14d227ee', class: {
                 'pds-drawer': true,
                 [`pds-drawer--${this.side}`]: true,
                 [`pds-drawer--${this.size}`]: true,
-            } }, index.h("pds-modal", { key: 'd4ceb5b4c0b03930aa3d001ae1bbbfbf449bde33', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, index.h("slot", { key: '41bfdea76282b333ca6950048999cb9d94e69438' }))));
+            } }, index.h("pds-modal", { key: '3188b99ffb9b3ecb3eeb42fd3ba808d71c652b4f', class: { 'pds-drawer__modal': true, 'pds-drawer__modal--modal': this.modal }, ref: (el) => (this.modalEl = el), componentId: this.componentId, open: this.open, scrollable: this.scrollable, disableTopLayer: !this.modal, backdropDismiss: this.lightDismiss, disableInitialFocus: !this.modal && this.initialFocus === 'none' }, index.h("slot", { key: 'ca4cd34297b4580d554edb45bfbec5b44d7d1fb0' }))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/pds-dropdown-menu-item.cjs.entry.js

@@ -3,42 +3,72 @@
 var index = require('./index-D9iJuJCP.js');
 require('./keep-hydrated-AKoh0DG4.js');
 
-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)}`;
+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:focus-visible{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}.pds-dropdown-menu-item__start{display:-ms-inline-flexbox;display:inline-flex;-ms-flex-negative:0;flex-shrink:0}.pds-dropdown-menu-item__start--empty{display:none}: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-visible{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger);outline-offset:var(--pine-border-width)}:host(.destructive) pds-link::part(link):focus-visible{background-color:var(--pine-color-danger-disabled);outline:var(--pine-outline-focus-danger)}pds-link::part(link):focus-visible{border-radius:var(--pine-dimension-xs);-webkit-box-shadow:none;box-shadow:none;outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}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 PdsDropdownMenuItem = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.pdsClick = index.createEvent(this, "pdsClick");
         /**
-         * 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) => {
@@ -47,63 +77,69 @@ const PdsDropdownMenuItem = class {
             }
         };
         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 [
+            index.h("slot", { name: "start", onSlotchange: this.updateStartSlotEmpty, ref: (el) => {
+                    this.startSlotEl = el;
+                    if (el) {
+                        el.classList.add('pds-dropdown-menu-item__start');
+                        this.updateStartSlotEmpty();
+                    }
+                } }),
+            index.h("slot", null)
+        ];
     }
     renderElement() {
         if (this.informational) {
-            return (index.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 }, index.h("slot", null)));
+            return (index.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 (index.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 }, index.h("slot", null)));
+            return (index.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 (index.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 }, index.h("slot", null)));
+        return (index.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 (index.h(index.Host, { key: 'a69947d99160783919f711d7c53e0592694f9565', id: this.componentId, class: {
+        return (index.h(index.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()));

package/dist/cjs/pds-dropdown-menu-separator.cjs.entry.js

@@ -9,13 +9,13 @@ const PdsDropdownMenuSeparator = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         /**
-         * 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 (index.h(index.Host, { key: '72f29c5015d2379d9986c90ec966f34f41298226', id: this.componentId }, index.h("hr", { key: '72c2155d0fbee6346f3f38997009a7d9e14ad0c8' })));
+        return (index.h(index.Host, { key: '74a214d61042d5759af5aef9d6410ed1a267083c', id: this.componentId }, index.h("hr", { key: 'c521eda51523fce09bd408af2586645fc9a9cd03' })));
     }
 };
 PdsDropdownMenuSeparator.style = pdsDropdownMenuSeparatorCss();

package/dist/cjs/pds-dropdown-menu.cjs.entry.js

@@ -1,11 +1,11 @@
 'use strict';
 
 var index = require('./index-D9iJuJCP.js');
-var attributes = require('./attributes-CW49XqaL.js');
+var attributes = require('./attributes-Cgbkw6gO.js');
 var keepHydrated = require('./keep-hydrated-AKoh0DG4.js');
 var floatingUi_dom = require('./floating-ui.dom-Dw41zbyY.js');
 
-const pdsDropdownMenuCss = () => `:host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}.pds-dropdown-menu__header{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border);-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1);-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs);padding-inline:calc(var(--pine-dimension-xs) * 2 + var(--pine-border-width) + 2px);text-align:start}.pds-dropdown-menu__items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}::slotted(a:not([slot=header])),::slotted(button:not([slot=header])){-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) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive:not([slot=header])){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]:not([slot=header])),::slotted([disabled]:not([disabled=false]):not([slot=header])){cursor:not-allowed;opacity:0.5;pointer-events:none}`;
+const pdsDropdownMenuCss = () => `:host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-overlay);border-radius:var(--pine-dimension-xs);left:var(--pine-dimension-none);min-width:170px;overflow-y:auto;-ms-scroll-chaining:none;overscroll-behavior:contain;padding:var(--pine-dimension-xs);position:fixed;z-index:var(--pine-z-index-overlay)}:host-context([data-theme=dark]) .pds-dropdown-menu--panel{border:var(--pine-border)}.pds-dropdown-menu__header{-webkit-border-after:var(--pine-border-width-thin) solid var(--pine-color-border);border-block-end:var(--pine-border-width-thin) solid var(--pine-color-border);-webkit-margin-after:var(--pine-dimension-xs);margin-block-end:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1);-webkit-padding-after:var(--pine-dimension-xs);padding-block-end:var(--pine-dimension-xs);padding-inline:calc(var(--pine-dimension-xs) * 2 + var(--pine-border-width) + 2px);text-align:start}.pds-dropdown-menu__items{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}::slotted(a:not([slot=header])),::slotted(button:not([slot=header])){-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) !important;-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text) !important;cursor:pointer;display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;font:var(--pine-typography-body-medium) !important;gap:var(--pine-dimension-xs);margin:calc(var(--pine-border-width) + 2px) !important;padding:var(--pine-dimension-xs) !important;text-align:start;text-decoration:none !important;width:calc(100% - (var(--pine-border-width) + 2px) * 2)}::slotted(.destructive:not([slot=header])){color:var(--pine-color-danger) !important}::slotted([aria-disabled=true]:not([slot=header])),::slotted([disabled]:not([disabled=false]):not([slot=header])){cursor:not-allowed;opacity:0.5;pointer-events:none}`;
 
 const PdsDropdownMenu = class {
     constructor(hostRef) {
@@ -13,7 +13,10 @@ const PdsDropdownMenu = class {
         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;
         /**
@@ -74,12 +77,20 @@ const PdsDropdownMenu = class {
         // Open the dropdown and position it
         this.openDropdown = () => {
             var _a;
+            const opening = ++this.openCount;
             const updatePosition = () => {
                 floatingUi_dom.computePosition(this.triggerEl, this.panelEl, {
                     placement: this.placement,
                     strategy: 'fixed',
-                    middleware: [floatingUi_dom.offset(6), floatingUi_dom.flip(), floatingUi_dom.shift({ padding: 5 })],
+                    middleware: [
+                        floatingUi_dom.offset(6),
+                        floatingUi_dom.flip(),
+                        floatingUi_dom.shift({ padding: 5 }),
+                        floatingUi_dom.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`,
@@ -90,12 +101,15 @@ const PdsDropdownMenu = class {
             updatePosition();
             // Set up auto-update for window resize and scroll
             this.cleanupAutoUpdate = floatingUi_dom.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;
@@ -104,12 +118,13 @@ const PdsDropdownMenu = class {
                 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
@@ -139,6 +154,10 @@ const PdsDropdownMenu = class {
         }
         (_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.
@@ -155,18 +174,72 @@ const PdsDropdownMenu = class {
             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) {
@@ -371,7 +444,7 @@ const PdsDropdownMenu = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'aa4ce84354cf87638ee46fd7ed69520228b7e656', id: this.componentId }, index.h("slot", { key: '948800e67d18c8c6cc9e77ef3aeab635c5035453', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), index.h("pds-box", { key: '3ce2a2879b14aad975cea8ae72fcbf8c3abcf20c', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, index.h("div", { key: 'ad25fbf4f3c7a24653c229e64fe2ce893a92e4c8', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, index.h("slot", { key: '35a5903543e08577997b456bcd312bdd009fd8fc', name: "header", onSlotchange: this.handleHeaderSlotChange })), index.h("div", { key: 'a9593adacf047918c1d87494f8c951a2a4a5f76f', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, index.h("slot", { key: '8d2def1cc7020608220099f4ced0f44e9838cce8', onSlotchange: this.handleSlotChange })))));
+        return (index.h(index.Host, { key: '1776921b263178df0de2cdf07a9fb81c668381b6', id: this.componentId }, index.h("slot", { key: '952fdc2b6bb3f1fca5a17dc1962af0e4c38f92e2', name: "trigger", onSlotchange: this.handleTriggerSlotChange }), index.h("pds-box", { key: 'f5f95cebdcf4a4d78d0e4bc47b99c681045f8d38', "border-radius": "sm", display: "flex", direction: "column", class: "pds-dropdown-menu--panel is-hidden", shadow: "100", part: "menu-panel" }, index.h("div", { key: '8bff8a8dd06fe1f433bc512bc0ac9030fc9714e7', class: { 'pds-dropdown-menu__header': true, 'is-hidden': !this.hasHeader } }, index.h("slot", { key: '1c248f137414dd00037d333b1e07c6b04a7b079d', name: "header", onSlotchange: this.handleHeaderSlotChange })), index.h("div", { key: 'db9954f26762a65e762f8c7b3dfd60e363ff8573', class: "pds-dropdown-menu__items", role: "menu", "aria-orientation": "vertical" }, index.h("slot", { key: 'd5cb929db03966d673b23de150970744936cf26d', onSlotchange: this.handleSlotChange })))));
     }
     get host() { return index.getElement(this); }
 };

package/dist/cjs/pds-filter.cjs.entry.js

@@ -3,9 +3,12 @@
 var index = require('./index-D9iJuJCP.js');
 var scroll = require('./scroll-2XcoE_6Q.js');
 var index$1 = require('./index-BDnbr0DK.js');
+var truncationTooltip = require('./truncation-tooltip-CM5HgRHh.js');
 require('./keep-hydrated-AKoh0DG4.js');
+require('./floating-ui.dom-Dw41zbyY.js');
+require('./portal-target-e8WQ6dLx.js');
 
-const pdsFilterCss = () => `:host{--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);display:inline-block;position:relative}.pds-filter__trigger{-ms-flex-align:center;align-items:center;anchor-name:--filter-trigger;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-tertiary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-inter);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-400);gap:var(--pine-dimension-050);letter-spacing:var(--pine-letter-spacing-114);line-height:var(--pine-line-height-150);padding:var(--pine-dimension-025) var(--pine-dimension-125);position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-text-secondary);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-font-size-100)}.pds-filter__trigger:hover,.pds-filter__trigger.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger:hover pds-icon,.pds-filter__trigger.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger:disabled{cursor:not-allowed;opacity:0.5}.pds-filter__trigger--selected{background-color:var(--pine-color-purple-050);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover,.pds-filter__trigger--selected.pds-filter__trigger--open{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover pds-icon,.pds-filter__trigger--selected.pds-filter__trigger--open pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--more{background-color:var(--pine-color-background-container-hover);border:var(--pine-border-width-thin) dashed var(--pine-color-border);color:var(--pine-color-text-tertiary)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger--more:hover pds-icon,.pds-filter__trigger--more.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--clear{background:transparent;border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-100);-webkit-box-shadow:none;box-shadow:none;color:var(--pine-color-purple-600)}.pds-filter__trigger--clear pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-100);color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__button-content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-050);max-inline-size:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__button-text{line-height:var(--pine-line-height-150);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__dropdown-icon{block-size:var(--pine-dimension-200);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-200)}.pds-filter__popover{background-color:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);display:none;inline-size:228px;inset:unset;padding:var(--pine-dimension-100);z-index:var(--pine-z-index-overlay);}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}.pds-filter__popover{}@supports (anchor-name: --test){.pds-filter__popover{inset-block-start:calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));inset-inline-start:anchor(--filter-trigger start);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover{}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.is-open.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}}`;
+const pdsFilterCss = () => `:host{--box-shadow-focus:0 0 0 1px var(--pine-color-background-container), 0 0 0 3px var(--pine-color-focus-ring);display:inline-block;position:relative}.pds-filter__trigger{-ms-flex-align:center;align-items:center;anchor-name:--filter-trigger;background:var(--pine-color-background-container);border:var(--pine-border);border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-050);box-shadow:var(--pine-box-shadow-050);-webkit-box-sizing:border-box;box-sizing:border-box;color:var(--pine-color-text-tertiary);cursor:pointer;display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-inter);font-size:var(--pine-font-size-100);font-weight:var(--pine-font-weight-400);gap:var(--pine-dimension-050);letter-spacing:var(--pine-letter-spacing-114);line-height:var(--pine-line-height-150);padding:var(--pine-dimension-025) var(--pine-dimension-125);position:relative;-webkit-transition:all var(--pine-motion-duration-base) ease;transition:all var(--pine-motion-duration-base) ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-text-secondary);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-font-size-100)}.pds-filter__trigger:hover,.pds-filter__trigger.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger:hover pds-icon,.pds-filter__trigger.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger:disabled{cursor:not-allowed;opacity:0.5}.pds-filter__trigger--selected{background-color:var(--pine-color-purple-050);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover,.pds-filter__trigger--selected.pds-filter__trigger--open{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-500);color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:hover pds-icon,.pds-filter__trigger--selected.pds-filter__trigger--open pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--selected:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--more{background-color:var(--pine-color-background-container-hover);border:var(--pine-border-width-thin) dashed var(--pine-color-border);color:var(--pine-color-text-tertiary)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-background-subtle);border-color:var(--pine-color-border-hover);color:var(--pine-color-text-hover)}.pds-filter__trigger--more:hover pds-icon,.pds-filter__trigger--more.pds-filter__trigger--open pds-icon{color:var(--pine-color-text-secondary)}.pds-filter__trigger--more:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__trigger--clear{background:transparent;border:var(--pine-border-width-thin) solid transparent;border-radius:var(--pine-dimension-100);-webkit-box-shadow:none;box-shadow:none;color:var(--pine-color-purple-600)}.pds-filter__trigger--clear pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover{background-color:var(--pine-color-purple-100);border-color:var(--pine-color-purple-100);color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:hover pds-icon{color:var(--pine-color-purple-600)}.pds-filter__trigger--clear:focus-visible{-webkit-box-shadow:var(--box-shadow-focus);box-shadow:var(--box-shadow-focus);outline:none}.pds-filter__button-content{-ms-flex-align:center;align-items:center;display:-ms-inline-flexbox;display:inline-flex;gap:var(--pine-dimension-050);max-inline-size:148px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__button-text{line-height:var(--pine-line-height-150);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-filter__dropdown-icon{block-size:var(--pine-dimension-200);-ms-flex-negative:0;flex-shrink:0;inline-size:var(--pine-dimension-200)}.pds-filter__popover{background-color:var(--pine-color-background-overlay);border:0;border-radius:var(--pine-dimension-100);-webkit-box-shadow:var(--pine-box-shadow-100);box-shadow:var(--pine-box-shadow-100);-webkit-box-sizing:border-box;box-sizing:border-box;display:none;inline-size:244px;inset:unset;padding:var(--pine-dimension-100);z-index:var(--pine-z-index-overlay);}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}.pds-filter__popover{}@supports (anchor-name: --test){.pds-filter__popover{inset-block-start:calc(anchor(--filter-trigger bottom) + var(--pine-dimension-100));inset-inline-start:anchor(--filter-trigger start);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover{}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto}.pds-filter__popover.is-open.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal.popover-flip-vertical{inset-block-start:anchor(--filter-trigger top);inset-inline-end:anchor(--filter-trigger end);inset-inline-start:auto;-webkit-transform:translateY(calc(-100% - var(--pine-dimension-100)));transform:translateY(calc(-100% - var(--pine-dimension-100)))}}`;
 
 const PdsFilter = class {
     constructor(hostRef) {
@@ -15,6 +18,16 @@ const PdsFilter = class {
         this.pdsFilterClear = index.createEvent(this, "pdsFilterClear");
         this.scrollRAF = null;
         this.lastScrollTime = 0;
+        this.truncationTooltip = 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'
@@ -118,11 +131,15 @@ const PdsFilter = class {
             // 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);
@@ -148,6 +165,7 @@ const PdsFilter = class {
         }
     }
     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
@@ -161,6 +179,10 @@ const PdsFilter = class {
             }
         }
     }
+    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.
      */
@@ -481,7 +503,7 @@ const PdsFilter = class {
         return null;
     }
     render() {
-        return (index.h(index.Host, { key: '9b2286e9a0d7f88b7f6bc90f8444185cfec832c8', id: this.componentId }, index.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 }, index.h("span", { key: 'ee479f7e510ffcb54f7857cb7d1345f2a5c1d76a', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (index.h("span", { key: 'e98aa8b915a2460f3c7d49e20ec7d43853ee5f9f', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (index.h("div", { key: '3084babfba2d96880b2829a60d2ef00140a6813b', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, index.h("slot", { key: 'e901488be75a18bedc6b2c42be5c398fd2cf2a29' })))));
+        return (index.h(index.Host, { key: '0876855dacf0172f83a6e1afcc8b9b1b6acf1251', id: this.componentId }, index.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 }, index.h("span", { key: '075e2f221d297ede0a52185853acbd3e74b99339', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (index.h("span", { key: 'cd1d3a15e0969c3d960786a7fd7fd7b3195dd4de', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (index.h("div", { key: '6524cb11b96f03ef5c528325a950c9f80f5ae9fa', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, index.h("slot", { key: '06cc2ca22068ccedbddf3ff69ce4a352fd01d142' })))));
     }
     get el() { return index.getElement(this); }
 };