@pine-ds/core 3.6.0 → 3.7.0

package/components/pds-copytext.js

@@ -1,5 +1,5 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
-import { e as copy } from './index2.js';
+import { f as copy } from './index2.js';
 import { d as defineCustomElement$4 } from './pds-button2.js';
 import { d as defineCustomElement$3 } from './pds-icon2.js';
 import { d as defineCustomElement$2 } from './pds-loader2.js';

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

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 
-const pdsDropdownMenuSeparatorCss = ":host hr{border:1px solid var(--pine-color-border);margin-block:var(--pine-dimension-xs)}";
+const pdsDropdownMenuSeparatorCss = ":host hr{border:0;border-top:1px solid var(--pine-color-border);height:0;margin-block:var(--pine-dimension-xs);margin-inline:calc(var(--pine-dimension-xs) * -1)}";
 
 const PdsDropdownMenuSeparator$1 = /*@__PURE__*/ proxyCustomElement(class PdsDropdownMenuSeparator extends HTMLElement {
     constructor() {

package/components/pds-dropdown-menu-separator.js.map

@@ -1 +1 @@
-{"file":"pds-dropdown-menu-separator.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,2FAA2F;;MCQlHA,0BAAwB,iBAAAC,kBAAA,CAAA,MAAA,wBAAA,SAAA,WAAA,CAAA;AALrC,IAAA,WAAA,GAAA;;;;AAWE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAUlC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EACxB,CAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsDropdownMenuSeparator","__stencil_proxyCustomElement"],"sources":["src/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.scss?tag=pds-dropdown-menu-separator&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.tsx"],"sourcesContent":[":host {\n  hr {\n    border: 1px solid var(--pine-color-border);\n    margin-block: var(--pine-dimension-xs);\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\n\n@Component({\n  tag: 'pds-dropdown-menu-separator',\n  styleUrl: 'pds-dropdown-menu-separator.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenuSeparator implements BasePdsProps {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * It determines whether or not the dropdown-item is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled: boolean = false;\n\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr/>\n      </Host>\n    );\n  }\n}\n"],"version":3}
+{"file":"pds-dropdown-menu-separator.js","mappings":";;AAAA,MAAM,2BAA2B,GAAG,mKAAmK;;MCQ1LA,0BAAwB,iBAAAC,kBAAA,CAAA,MAAA,wBAAA,SAAA,WAAA,CAAA;AALrC,IAAA,WAAA,GAAA;;;;AAWE;;;AAGG;AACK,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAUlC;IAPC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,EAAE,EAAE,IAAI,CAAC,WAAW,EAAA,EACxB,CAAK,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACA;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["PdsDropdownMenuSeparator","__stencil_proxyCustomElement"],"sources":["src/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.scss?tag=pds-dropdown-menu-separator&encapsulation=shadow","src/components/pds-dropdown-menu/pds-dropdown-menu-separator/pds-dropdown-menu-separator.tsx"],"sourcesContent":[":host {\n  hr {\n    border: 0;\n    border-top: 1px solid var(--pine-color-border);\n    height: 0;\n    margin-block: var(--pine-dimension-xs);\n    margin-inline: calc(var(--pine-dimension-xs) * -1);\n  }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\nimport type { BasePdsProps } from '@utils/interfaces';\n\n@Component({\n  tag: 'pds-dropdown-menu-separator',\n  styleUrl: 'pds-dropdown-menu-separator.scss',\n  shadow: true,\n})\nexport class PdsDropdownMenuSeparator implements BasePdsProps {\n  /**\n   * A unique identifier used for the underlying component `id` attribute.\n   */\n  @Prop() componentId: string;\n\n  /**\n   * It determines whether or not the dropdown-item is disabled.\n   * @defaultValue false\n   */\n  @Prop() disabled: boolean = false;\n\n\n  render() {\n    return (\n      <Host id={this.componentId}>\n        <hr/>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/components/pds-filter.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../dist/types/components";
+
+interface PdsFilter extends Components.PdsFilter, HTMLElement {}
+export const PdsFilter: {
+    prototype: PdsFilter;
+    new (): PdsFilter;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/components/pds-filter.js

@@ -0,0 +1,518 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { t as trash, g as enlarge } from './index2.js';
+import { d as defineCustomElement$2 } from './pds-icon2.js';
+
+const pdsFilterCss = ":host{--box-shadow-focus:0 0 0 1px var(--pine-color-white), 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-width-thin) solid var(--pine-color-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-placeholder);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 0.2s ease;transition:all 0.2s ease}.pds-filter__trigger pds-icon{block-size:var(--pine-font-size-100);color:var(--pine-color-grey-800);-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-grey-100);border-color:var(--pine-color-grey-400);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-grey-800)}.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-grey-050);border:var(--pine-border-width-thin) dashed var(--pine-color-grey-300);color:var(--pine-color-text-placeholder)}.pds-filter__trigger--more pds-icon{color:var(--pine-color-grey-800)}.pds-filter__trigger--more:hover,.pds-filter__trigger--more.pds-filter__trigger--open{background-color:var(--pine-color-grey-100);border-color:var(--pine-color-grey-400);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-grey-800)}.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-container);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:1000;}.pds-filter__popover:popover-open,.pds-filter__popover.is-open{display:block}@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 left);position:fixed;position-anchor:--filter-trigger;}.pds-filter__popover.popover-flip-horizontal{inset-inline-start:anchor(--filter-trigger right);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.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-start:anchor(--filter-trigger right);-webkit-transform:translate(-100%, calc(-100% - var(--pine-dimension-100)));transform:translate(-100%, calc(-100% - var(--pine-dimension-100)))}.pds-filter__popover.is-open.popover-flip-horizontal{inset-inline-start:anchor(--filter-trigger right);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.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-start:anchor(--filter-trigger right);-webkit-transform:translate(-100%, calc(-100% - var(--pine-dimension-100)));transform:translate(-100%, calc(-100% - var(--pine-dimension-100)))}}";
+
+const PdsFilter$1 = /*@__PURE__*/ proxyCustomElement(class PdsFilter extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.pdsFilterOpen = createEvent(this, "pdsFilterOpen", 7);
+        this.pdsFilterClose = createEvent(this, "pdsFilterClose", 7);
+        this.pdsFilterClear = createEvent(this, "pdsFilterClear", 7);
+        this.scrollRAF = null;
+        this.lastScrollTime = 0;
+        /**
+         * 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
+        };
+    }
+    /**
+     * Component lifecycle: Clean up when disconnected from DOM.
+     * Prevents memory leaks by canceling pending operations and closing popovers.
+     */
+    disconnectedCallback() {
+        // 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() {
+        // 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);
+            }
+        }
+    }
+    /**
+     * 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
+        const bufferSpace = 20;
+        const wouldOverflowRight = (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 (wouldOverflowRight) {
+                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 = triggerRect.left;
+            let top = triggerRect.bottom + 8;
+            let transformOrigin = 'top left';
+            // Apply horizontal flipping if needed
+            if (wouldOverflowRight) {
+                const actualPopoverWidth = this.popoverEl.getBoundingClientRect().width || popoverWidth;
+                left = triggerRect.right - actualPopoverWidth;
+                transformOrigin = '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: 1000;
+        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: 'b71d1cab5042924f757ddda1eacfb890f42e9fed', id: this.componentId }, h("button", { key: '0ffe440aa5ac796b11a07f0628c51ed7a9d2788c', 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: 'b4c2039d6eb44f7f0126cbe7a6d93a24b5fbcece', class: "pds-filter__button-content", part: "button-content" }, this.renderIcon(), this.text && (h("span", { key: 'ef09dc1271e7229600cc9dc325e050639b68576d', class: "pds-filter__button-text", part: "button-text" }, this.text)), this.renderDropdownIcon())), this.variant !== 'clear' && (h("div", { key: '32348303268d267afa96649f8b289bb729757a00', ref: el => this.popoverEl = el, id: `${this.componentId}-popover`, class: "pds-filter__popover", popover: "auto", part: "popover" }, h("slot", { key: '416aa12e660af5b69033f9145229da3b170d0414' })))));
+    }
+    get el() { return this; }
+    static get style() { return pdsFilterCss; }
+}, [1, "pds-filter", {
+        "componentId": [1, "component-id"],
+        "variant": [1],
+        "icon": [1],
+        "text": [1],
+        "isOpen": [32],
+        "showFilter": [64],
+        "hideFilter": [64]
+    }, [[9, "resize", "handleWindowResize"], [9, "scroll", "handleWindowScroll"], [4, "toggle", "handlePopoverToggle"], [4, "click", "handleDocumentClick"], [4, "keydown", "handleEscapeKey"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["pds-filter", "pds-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "pds-filter":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, PdsFilter$1);
+            }
+            break;
+        case "pds-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const PdsFilter = PdsFilter$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { PdsFilter, defineCustomElement };
+//# sourceMappingURL=pds-filter.js.map
+
+//# sourceMappingURL=pds-filter.js.map