@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -0,0 +1,510 @@
+import { r as registerInstance, c as createEvent, h, H as Host, a as getElement } from './index-4_RRPJTO.js';
+import { i as isRtlDirection } from './scroll-DtgUQhjl.js';
+import { t as trash, e as enlarge } from './index-B0DXTeeV.js';
+import { b as bindTruncationTooltips } from './truncation-tooltip-CkIWm6Z-.js';
+import './keep-hydrated-BgNaWLoS.js';
+import './floating-ui.dom-Cuc0DYlm.js';
+import './portal-target-CKRzRKdO.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);-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) {
+        registerInstance(this, hostRef);
+        this.pdsFilterOpen = createEvent(this, "pdsFilterOpen");
+        this.pdsFilterClose = createEvent(this, "pdsFilterClose");
+        this.pdsFilterClear = createEvent(this, "pdsFilterClear");
+        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'
+         */
+        this.variant = 'default';
+        /**
+         * State to track if the popover is open.
+         */
+        this.isOpen = false;
+        /**
+         * Handle native popover toggle events directly on the element
+         * This is needed for browsers with native Popover API support
+         */
+        this.handleNativePopoverToggle = (event) => {
+            const target = event.target;
+            if (target && target.id === `${this.componentId}-popover`) {
+                // Check current popover state
+                let isCurrentlyOpen = false;
+                try {
+                    isCurrentlyOpen = target.matches(':popover-open');
+                }
+                catch (error) {
+                    // Fallback if :popover-open selector isn't supported
+                    isCurrentlyOpen = target.style.display === 'block';
+                }
+                // Update state
+                this.isOpen = isCurrentlyOpen;
+                if (this.isOpen) {
+                    setTimeout(() => this.adjustPopoverPosition(), 0);
+                    this.pdsFilterOpen.emit({
+                        componentId: this.componentId,
+                        variant: this.variant,
+                        text: this.text,
+                    });
+                }
+                else {
+                    this.pdsFilterClose.emit({
+                        componentId: this.componentId,
+                        variant: this.variant,
+                        text: this.text,
+                    });
+                }
+            }
+        };
+        /**
+         * Handle keyboard interactions for clear variant only.
+         */
+        this.handleKeyDown = (event) => {
+            // Only handle clear variant manually, let native API handle everything else
+            if (this.variant === 'clear' && (event.key === 'Enter' || event.key === ' ')) {
+                event.preventDefault();
+                this.handleClick();
+            }
+        };
+        /**
+         * Handle trigger button click. Clear variant emits event, others toggle popover.
+         */
+        this.handleClick = (event) => {
+            if (this.variant === 'clear') {
+                this.pdsFilterClear.emit({
+                    componentId: this.componentId,
+                    text: this.text,
+                });
+                return;
+            }
+            this.closeOtherPopovers();
+            // Check for popover API support
+            const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
+            if (!supportsPopoverAPI) {
+                // Manual fallback for browsers without popover API support
+                // Prevent default to avoid conflicts with any native behavior
+                if (event) {
+                    event.preventDefault();
+                }
+                setTimeout(() => {
+                    if (this.popoverEl != null) {
+                        this.isOpen = !this.isOpen;
+                        if (this.isOpen) {
+                            this.popoverEl.style.display = 'block';
+                            this.popoverEl.classList.add('is-open');
+                            this.adjustPopoverPosition();
+                            this.pdsFilterOpen.emit({
+                                componentId: this.componentId,
+                                variant: this.variant,
+                                text: this.text,
+                            });
+                        }
+                        else {
+                            this.popoverEl.style.display = 'none';
+                            this.popoverEl.classList.remove('is-open');
+                            this.pdsFilterClose.emit({
+                                componentId: this.componentId,
+                                variant: this.variant,
+                                text: this.text,
+                            });
+                        }
+                    }
+                }, 0);
+            }
+            // For browsers with native popover API, let the native behavior handle the toggle
+            // 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);
+            this.scrollRAF = null;
+        }
+        this.lastScrollTime = 0;
+        // Clean up native popover event listeners
+        if (this.popoverEl) {
+            const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
+            if (supportsPopoverAPI) {
+                this.popoverEl.removeEventListener('toggle', this.handleNativePopoverToggle);
+            }
+        }
+        // Ensure popover is closed
+        if (this.isOpen && this.popoverEl) {
+            try {
+                this.popoverEl.hidePopover();
+            }
+            catch (error) {
+                this.popoverEl.style.display = 'none';
+                this.popoverEl.classList.remove('is-open');
+            }
+        }
+    }
+    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
+        if (this.popoverEl) {
+            const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
+            if (supportsPopoverAPI) {
+                // Remove any existing listeners to avoid duplicates
+                this.popoverEl.removeEventListener('toggle', this.handleNativePopoverToggle);
+                // Add direct listener for native popover events
+                this.popoverEl.addEventListener('toggle', this.handleNativePopoverToggle);
+            }
+        }
+    }
+    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.
+     */
+    handleWindowResize() {
+        if (this.isOpen) {
+            setTimeout(() => this.adjustPopoverPosition(), 16);
+        }
+    }
+    /**
+     * Reposition popovers on scroll with performance throttling.
+     */
+    handleWindowScroll() {
+        if (this.isOpen) {
+            const supportsAnchorPositioning = "anchorName" in document.documentElement.style;
+            const now = performance.now();
+            const throttleMs = supportsAnchorPositioning ? 66 : 33;
+            if (now - this.lastScrollTime < throttleMs) {
+                return;
+            }
+            this.lastScrollTime = now;
+            if (this.scrollRAF) {
+                cancelAnimationFrame(this.scrollRAF);
+            }
+            this.scrollRAF = requestAnimationFrame(() => {
+                if (this.isOpen && this.popoverEl && this.el.isConnected) {
+                    this.adjustPopoverPosition();
+                }
+                this.scrollRAF = null;
+            });
+        }
+    }
+    /**
+     * Closes other open filter popovers to ensure only one is open at a time.
+     */
+    closeOtherPopovers() {
+        const allFilters = document.querySelectorAll('pds-filter');
+        allFilters.forEach((filter) => {
+            var _a;
+            if (filter === this.el)
+                return;
+            const popover = (_a = filter.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__popover');
+            if (popover) {
+                // Check for popover API support to avoid crashes
+                let isPopoverOpen = false;
+                try {
+                    isPopoverOpen = popover.matches(':popover-open');
+                }
+                catch (error) {
+                    // Fallback if :popover-open selector isn't supported
+                    isPopoverOpen = popover.style.display === 'block';
+                }
+                if (isPopoverOpen) {
+                    try {
+                        popover.hidePopover();
+                    }
+                    catch (error) {
+                        popover.style.display = 'none';
+                        popover.classList.remove('is-open');
+                    }
+                }
+            }
+        });
+    }
+    /**
+     * Adjusts popover position to keep it within viewport bounds.
+     * Uses CSS anchor positioning for modern browsers, JavaScript for fallback browsers.
+     */
+    adjustPopoverPosition() {
+        var _a;
+        if (!this.popoverEl || this.variant === 'clear')
+            return;
+        const triggerEl = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('.pds-filter__trigger');
+        if (!triggerEl)
+            return;
+        const triggerRect = triggerEl.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const supportsAnchorPositioning = "anchorName" in document.documentElement.style;
+        // Get dimensions for boundary detection
+        const popoverWidth = 228;
+        const popoverHeight = this.popoverEl.getBoundingClientRect().height || 200;
+        // Boundary detection for flipping (inline-end overflow respects document direction)
+        const bufferSpace = 20;
+        const isRtl = isRtlDirection(this.el);
+        const wouldOverflowInlineEnd = isRtl
+            ? (triggerRect.right - popoverWidth - bufferSpace) < 0
+            : (triggerRect.left + popoverWidth + bufferSpace) > viewportWidth;
+        const wouldOverflowBottom = (triggerRect.bottom + 8 + popoverHeight + bufferSpace) > viewportHeight;
+        if (supportsAnchorPositioning) {
+            // Modern browsers: CSS anchor positioning + JavaScript-controlled flipping
+            this.popoverEl.classList.remove('popover-flip-horizontal', 'popover-flip-vertical');
+            if (wouldOverflowInlineEnd) {
+                this.popoverEl.classList.add('popover-flip-horizontal');
+            }
+            if (wouldOverflowBottom) {
+                this.popoverEl.classList.add('popover-flip-vertical');
+            }
+        }
+        else {
+            // Fallback browsers: JavaScript positioning with boundary detection
+            let left = isRtl ? triggerRect.right - popoverWidth : triggerRect.left;
+            let top = triggerRect.bottom + 8;
+            let transformOrigin = isRtl ? 'top right' : 'top left';
+            // Apply horizontal flipping if needed
+            if (wouldOverflowInlineEnd) {
+                const actualPopoverWidth = this.popoverEl.getBoundingClientRect().width || popoverWidth;
+                left = isRtl ? triggerRect.left : triggerRect.right - actualPopoverWidth;
+                transformOrigin = isRtl ? 'top left' : 'top right';
+            }
+            // Apply vertical flipping if needed
+            if (wouldOverflowBottom) {
+                top = triggerRect.top - popoverHeight - 8;
+                transformOrigin = transformOrigin.replace('top', 'bottom');
+            }
+            // Apply positioning in single DOM write for performance
+            this.popoverEl.style.cssText = `
+        position: fixed;
+        left: ${left}px;
+        top: ${top}px;
+        z-index: var(--pine-z-index-overlay);
+        transform-origin: ${transformOrigin};
+      `;
+        }
+    }
+    /**
+     * Opens the filter popover programmatically.
+     * Note: Clear variant does not support popover functionality.
+     */
+    async showFilter() {
+        if (this.variant === 'clear') {
+            console.warn('Clear variant does not support showFilter method');
+            return;
+        }
+        if (this.popoverEl != null) {
+            try {
+                this.popoverEl.showPopover();
+            }
+            catch (error) {
+                // Fallback for testing environment where showPopover is not available
+                this.popoverEl.style.display = 'block';
+                this.popoverEl.classList.add('is-open');
+            }
+        }
+    }
+    /**
+     * Closes the filter popover programmatically.
+     * Note: Clear variant does not support popover functionality.
+     */
+    async hideFilter() {
+        if (this.variant === 'clear') {
+            console.warn('Clear variant does not support hideFilter method');
+            return;
+        }
+        if (this.popoverEl != null) {
+            try {
+                this.popoverEl.hidePopover();
+            }
+            catch (error) {
+                // Fallback for testing environment where hidePopover is not available
+                this.popoverEl.style.display = 'none';
+                this.popoverEl.classList.remove('is-open');
+            }
+        }
+    }
+    /**
+     * Listen for popover toggle events for browsers without native Popover API (fallback).
+     * Native API browsers use direct element listeners to avoid conflicts.
+     */
+    handlePopoverToggle(event) {
+        const target = event.target;
+        const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
+        // Only handle events for fallback browsers (Firefox) to avoid duplicate handling
+        if (!supportsPopoverAPI && target && target.id === `${this.componentId}-popover`) {
+            // Check for popover API support to avoid crashes
+            let isCurrentlyOpen = false;
+            try {
+                isCurrentlyOpen = target.matches(':popover-open');
+            }
+            catch (error) {
+                // Fallback if :popover-open selector isn't supported
+                isCurrentlyOpen = target.style.display === 'block';
+            }
+            // Update state
+            this.isOpen = isCurrentlyOpen;
+            if (this.isOpen) {
+                setTimeout(() => this.adjustPopoverPosition(), 0);
+                this.pdsFilterOpen.emit({
+                    componentId: this.componentId,
+                    variant: this.variant,
+                    text: this.text,
+                });
+            }
+            else {
+                this.pdsFilterClose.emit({
+                    componentId: this.componentId,
+                    variant: this.variant,
+                    text: this.text,
+                });
+            }
+        }
+    }
+    /**
+     * Listen for clicks to detect outside dismissal.
+     */
+    handleDocumentClick(event) {
+        // Check if click is outside and popover gets closed
+        if (!this.el.contains(event.target) && this.isOpen && this.variant !== 'clear') {
+            setTimeout(() => {
+                if (this.popoverEl && this.isOpen) {
+                    // Check for popover API support to avoid crashes
+                    const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
+                    let popoverIsClosed = false;
+                    if (supportsPopoverAPI) {
+                        try {
+                            popoverIsClosed = !this.popoverEl.matches(':popover-open');
+                        }
+                        catch (error) {
+                            // Fallback if :popover-open selector isn't supported
+                            popoverIsClosed = this.popoverEl.style.display !== 'block';
+                        }
+                    }
+                    else {
+                        // Manual fallback - assume popover was closed by outside click
+                        popoverIsClosed = true;
+                    }
+                    if (popoverIsClosed) {
+                        this.isOpen = false;
+                        if (!supportsPopoverAPI) {
+                            this.popoverEl.style.display = 'none';
+                            this.popoverEl.classList.remove('is-open');
+                        }
+                        this.pdsFilterClose.emit({
+                            componentId: this.componentId,
+                            variant: this.variant,
+                            text: this.text,
+                        });
+                    }
+                }
+            }, 0);
+        }
+    }
+    /**
+     * Listen for Escape key to ensure close event fires.
+     */
+    handleEscapeKey(event) {
+        if (event.key === 'Escape' && this.isOpen && this.variant !== 'clear') {
+            // Check if popover was closed by Escape
+            setTimeout(() => {
+                if (this.popoverEl && this.isOpen) {
+                    // Check for popover API support to avoid crashes
+                    const supportsPopoverAPI = HTMLElement.prototype.showPopover && !navigator.userAgent.includes('Firefox');
+                    let popoverIsClosed = false;
+                    if (supportsPopoverAPI) {
+                        try {
+                            popoverIsClosed = !this.popoverEl.matches(':popover-open');
+                        }
+                        catch (error) {
+                            // Fallback if :popover-open selector isn't supported
+                            popoverIsClosed = this.popoverEl.style.display !== 'block';
+                        }
+                    }
+                    else {
+                        // Manual fallback - assume popover was closed by Escape
+                        popoverIsClosed = true;
+                    }
+                    if (popoverIsClosed) {
+                        this.isOpen = false;
+                        if (!supportsPopoverAPI) {
+                            this.popoverEl.style.display = 'none';
+                            this.popoverEl.classList.remove('is-open');
+                        }
+                        this.pdsFilterClose.emit({
+                            componentId: this.componentId,
+                            variant: this.variant,
+                            text: this.text,
+                        });
+                    }
+                }
+            }, 0);
+        }
+    }
+    /**
+     * Get the appropriate icon for the variant.
+     */
+    getIcon() {
+        if (this.variant === 'clear') {
+            return trash;
+        }
+        return this.icon;
+    }
+    /**
+     * Get CSS classes for the trigger button.
+     */
+    getTriggerClasses() {
+        const classes = ['pds-filter__trigger'];
+        classes.push(`pds-filter__trigger--${this.variant}`);
+        if (this.isOpen && this.variant !== 'clear') {
+            classes.push('pds-filter__trigger--open');
+        }
+        return classes.join(' ');
+    }
+    /**
+     * Render the trigger icon.
+     */
+    renderIcon() {
+        const iconToRender = this.getIcon();
+        if (iconToRender == null || iconToRender === '')
+            return null;
+        return (h("pds-icon", { icon: iconToRender, size: "var(--pine-font-size-100)", "aria-hidden": "true", part: "icon" }));
+    }
+    /**
+     * Render the dropdown icon for selected variant.
+     */
+    renderDropdownIcon() {
+        if (this.variant === 'selected') {
+            return (h("pds-icon", { icon: enlarge, size: "var(--pine-dimension-200)", "aria-hidden": "true", class: "pds-filter__dropdown-icon", part: "icon" }));
+        }
+        return null;
+    }
+    render() {
+        return (h(Host, { key: 'ae727227de30a285588182dce73fa4867e66bb89' }, h("button", { key: '45ff52e203ff936d42c9ba037066756035d74d98', 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: '05fb0de22068e9fcc79d8903a617513db0d71da1', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: '4589b7fc0aed1ab3d7e6c06fea123553d2b77a3e', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '4cbad5c76e8e28eb4a09d4a2c8a3d7c30024f114', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: 'c915f596e9d9efe1a7b1bd2edcf9b704d986438d' })))));
+    }
+    get el() { return getElement(this); }
+};
+PdsFilter.style = pdsFilterCss();
+
+export { PdsFilter as pds_filter };

package/dist/esm/pds-filters.entry.js

@@ -0,0 +1,16 @@
+import { r as registerInstance, h, H as Host } from './index-4_RRPJTO.js';
+import './keep-hydrated-BgNaWLoS.js';
+
+const pdsFiltersCss = () => `:host{display:block}.pds-filters{-ms-flex-align:start;align-items:flex-start;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:var(--pine-dimension-100)}`;
+
+const PdsFilters = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '4a5ed2d7e80d82be9517682ee66e464fa61ea45b' }, h("div", { key: '7cabd4f934c17b14268c28f9ce99e8900795c516', class: "pds-filters" }, h("slot", { key: 'a1d01f1be8885c3cf68f98df59d67f56709f00e8' }))));
+    }
+};
+PdsFilters.style = pdsFiltersCss();
+
+export { PdsFilters as pds_filters };