@pine-ds/core 3.6.0 → 3.7.0

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-BVCWKPy3.js';
-import { a as copy } from './index-DrJ5r5Pu.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-Bf1dou5H.js';
+import { a as copy } from './index-D4MkIUXU.js';
 
 const pdsCopytextCss = ":host(.pds-copytext){--copytext-color-background-hover:var(--pine-color-grey-200)}:host(.pds-copytext) pds-button{-ms-flex-align:center;align-items:center;background:var(--pine-color-secondary);border-radius:var(--pine-border-radius-full);border-width:var(--pine-dimension-none);display:-ms-inline-flexbox;display:inline-flex;font-family:var(--pine-font-family-heading);font-size:var(--pine-font-size-body-md);font-weight:var(--pine-font-weight-body-medium);letter-spacing:var(--pine-letter-spacing);line-height:var(--pine-line-height-body);max-width:100%;padding:var(--pine-dimension-2xs) var(--pine-dimension-xs)}:host(.pds-copytext) pds-button::part(button){-webkit-padding-end:calc(var(--pine-dimension-xs) / 2);padding-inline-end:calc(var(--pine-dimension-xs) / 2)}:host(.pds-copytext) pds-button::part(button):hover{background-color:var(--copytext-color-background-hover);color:var(--pine-color-text-secondary-hover)}:host(.pds-copytext) pds-button span{font-weight:var(--pine-font-weight-medium);-webkit-margin-end:var(--pine-dimension-xs);margin-inline-end:var(--pine-dimension-xs);white-space:nowrap}:host(.pds-copytext) pds-button :nth-child(2){-ms-flex-negative:0;flex-shrink:0}:host(.pds-copytext):host(.pds-copytext--bordered){border-width:var(--pine-dimension-none);padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered) pds-button{padding:var(--pine-dimension-none)}:host(.pds-copytext):host(.pds-copytext--bordered)::part(button):hover{background-color:transparent}:host(.pds-copytext):host(.pds-copytext--bordered) span{border:var(--pine-border);border-radius:var(--pine-border-radius-full);-webkit-margin-end:var(--pine-dimension-sm);margin-inline-end:var(--pine-dimension-sm);padding-block:var(--pine-dimension-xs);padding-inline:var(--pine-dimension-sm)}:host(.pds-copytext):host(.pds-copytext--bordered) :hover span{border:var(--pine-border-hover)}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button,:host(.pds-copytext):host(.pds-copytext--truncated) pds-button{display:-ms-inline-flexbox;display:inline-flex;min-width:auto;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-content),:host(.pds-copytext):host(.pds-copytext--full-width) pds-button::part(button-text),:host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-content),:host(.pds-copytext):host(.pds-copytext--truncated) pds-button::part(button-text){-ms-flex-negative:1;flex-shrink:1;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button span,:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{text-align:start;width:100%}:host(.pds-copytext):host(.pds-copytext--full-width) pds-button{-ms-flex-pack:justify;justify-content:space-between}:host(.pds-copytext):host(.pds-copytext--truncated) pds-button span{overflow:hidden;text-overflow:ellipsis}";
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-BVCWKPy3.js';
+import { r as registerInstance, h, H as Host } from './index-Bf1dou5H.js';
 
 const pdsDividerCss = ".pds-divider{background:var(--pine-color-border);border:0;display:-ms-flexbox;display:flex;height:var(--pine-border-width);margin:0;width:100%}.pds-divider--vertical{height:100%;width:1px}.pds-divider--offset-xxs{margin:0 calc(var(--pine-dimension-2xs) * -1);padding:0 var(--pine-dimension-2xs)}.pds-divider--offset-xxs.pds-divider--vertical{margin:calc(var(--pine-dimension-2xs) * -1) 0;padding:var(--pine-dimension-2xs) 0}.pds-divider--offset-xs{margin:0 calc(var(--pine-dimension-xs) * -1);padding:0 var(--pine-dimension-xs)}.pds-divider--offset-xs.pds-divider--vertical{margin:calc(var(--pine-dimension-xs) * -1) 0;padding:var(--pine-dimension-xs) 0}.pds-divider--offset-sm{margin:0 calc(var(--pine-dimension-sm) * -1);padding:0 var(--pine-dimension-sm)}.pds-divider--offset-sm.pds-divider--vertical{margin:calc(var(--pine-dimension-sm) * -1) 0;padding:var(--pine-dimension-sm) 0}.pds-divider--offset-md{margin:0 calc(var(--pine-dimension-md) * -1);padding:0 var(--pine-dimension-md)}.pds-divider--offset-md.pds-divider--vertical{margin:calc(var(--pine-dimension-md) * -1) 0;padding:var(--pine-dimension-md) 0}.pds-divider--offset-lg{margin:0 calc(var(--pine-dimension-lg) * -1);padding:0 var(--pine-dimension-lg)}.pds-divider--offset-lg.pds-divider--vertical{margin:calc(var(--pine-dimension-lg) * -1) 0;padding:var(--pine-dimension-lg) 0}.pds-divider--offset-xl{margin:0 calc(var(--pine-dimension-xl) * -1);padding:0 var(--pine-dimension-xl)}.pds-divider--offset-xl.pds-divider--vertical{margin:calc(var(--pine-dimension-xl) * -1) 0;padding:var(--pine-dimension-xl) 0}.pds-divider--offset-xxl{margin:0 calc(var(--pine-dimension-2xl) * -1);padding:0 var(--pine-dimension-2xl)}.pds-divider--offset-xxl.pds-divider--vertical{margin:calc(var(--pine-dimension-2xl) * -1) 0;padding:var(--pine-dimension-2xl) 0}@media (max-width: 767px){.pds-divider--vertical{display:none}}";
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Bf1dou5H.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);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-grey-150);color:var(--pine-color-text-hover)}.pds-dropdown-menu-item__content:focus,.pds-dropdown-menu-item__content:focus-visible,.pds-dropdown-menu-item__content.has-focus{outline:var(--pine-outline-focus);outline-offset:var(--pine-border-width)}:host(.destructive) .pds-dropdown-menu-item__content{-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){display:block;margin-inline:calc(var(--pine-dimension-xs) * -1);padding-inline:var(--pine-dimension-xs);width:100%}";
 

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

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, H as Host } from './index-BVCWKPy3.js';
+import { r as registerInstance, h, H as Host } from './index-Bf1dou5H.js';
 
-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 = class {
     constructor(hostRef) {

package/dist/esm/pds-dropdown-menu-separator.entry.js.map

@@ -1 +1 @@
-{"version":3,"file":"pds-dropdown-menu-separator.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,2BAA2B,GAAG,2FAA2F;;MCQlH,wBAAwB,GAAA,MAAA;AALrC,IAAA,WAAA,CAAA,OAAA,EAAA;;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;;;;;;;"}
+{"version":3,"file":"pds-dropdown-menu-separator.entry.js","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"],"names":[],"mappings":";;AAAA,MAAM,2BAA2B,GAAG,mKAAmK;;MCQ1L,wBAAwB,GAAA,MAAA;AALrC,IAAA,WAAA,CAAA,OAAA,EAAA;;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;;;;;;;"}

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host, g as getElement } from './index-BVCWKPy3.js';
+import { r as registerInstance, h, H as Host, g as getElement } from './index-Bf1dou5H.js';
 import { c as computePosition, o as offset, f as flip, s as shift } from './floating-ui.dom-DbQzNDdQ.js';
 
 const pdsDropdownMenuCss = ":host{display:block}.is-hidden{display:none}.pds-dropdown-menu--panel{background-color:var(--pine-color-background-container);left:var(--pine-dimension-none);min-width:170px;padding:var(--pine-dimension-xs);position:absolute;z-index:9999}";

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

@@ -0,0 +1,486 @@
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-Bf1dou5H.js';
+import { t as trash, e as enlarge } from './index-D4MkIUXU.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 = 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;
+        /**
+         * 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 getElement(this); }
+};
+PdsFilter.style = pdsFilterCss;
+
+export { PdsFilter as pds_filter };
+//# sourceMappingURL=pds-filter.entry.js.map
+
+//# sourceMappingURL=pds-filter.entry.js.map