@pine-ds/core 3.6.0 → 3.8.0

package/dist/types/components.d.ts

@@ -7,13 +7,17 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BoxColumnType, BoxShadowSizeType, BoxTShirtSizeType } from "./utils/types";
 import { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
-import { PlacementType } from "./utils/types";
+import { ChipSentimentType, ChipVariantType, PlacementType } from "./utils/types";
+import { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/pds-input/input-interface";
+import { PdsPopoverEventDetail } from "./components/pds-popover/popover-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/pds-textarea/textarea-interface";
 export { BoxColumnType, BoxShadowSizeType, BoxTShirtSizeType } from "./utils/types";
 export { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
-export { PlacementType } from "./utils/types";
+export { ChipSentimentType, ChipVariantType, PlacementType } from "./utils/types";
+export { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/pds-input/input-interface";
+export { PdsPopoverEventDetail } from "./components/pds-popover/popover-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/pds-textarea/textarea-interface";
 export namespace Components {
     /**
@@ -741,7 +745,7 @@ export namespace Components {
           * Sets the style variant of the button.
           * @defaultValue primary
          */
-        "variant": 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled';
+        "variant": 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' | 'filter';
     }
     interface PdsCheckbox {
         /**
@@ -816,14 +820,33 @@ export namespace Components {
           * Defines the color scheme of the chip.
           * @defaultValue 'neutral'
          */
-        "sentiment": 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+        "sentiment": ChipSentimentType;
         /**
           * Sets the style variant of the chip. Note: This prop is ignored when sentiment is 'brand'.
           * @defaultValue 'text'
          */
-        "variant": 'text' | 'tag' | 'dropdown';
+        "variant": ChipVariantType;
     }
     interface PdsCombobox {
+        /**
+          * Whether a dot should be displayed on the chip trigger.
+          * @default false
+         */
+        "chipDot": boolean;
+        /**
+          * The name of the icon to display in the chip trigger.
+         */
+        "chipIcon"?: string;
+        /**
+          * Whether the chip trigger should be displayed in a larger size.
+          * @default false
+         */
+        "chipLarge": boolean;
+        /**
+          * The sentiment for the chip trigger. Matches Pine chip sentiments.
+          * @default 'neutral'
+         */
+        "chipSentiment": ChipSentimentType;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -873,6 +896,10 @@ export namespace Components {
           * @default 'filter'
          */
         "mode": 'filter' | 'select-only';
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
         /**
           * Placeholder text for the input field.
          */
@@ -882,10 +909,10 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable).
+          * Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
           * @default 'input'
          */
-        "trigger": 'input' | 'button';
+        "trigger": 'input' | 'button' | 'chip';
         /**
           * The visual variant for the button trigger. Matches Pine button variants.
           * @default 'secondary'
@@ -986,6 +1013,45 @@ export namespace Components {
          */
         "disabled": boolean;
     }
+    /**
+     * Individual filter component with cross-browser popover positioning.
+     * Uses a hybrid approach for optimal cross-browser compatibility:
+     * - Modern browsers: CSS anchor positioning + JavaScript flip classes
+     * - Fallback browsers: JavaScript positioning with viewport boundary detection
+     */
+    interface PdsFilter {
+        /**
+          * A unique identifier used for the underlying component `id` attribute.
+         */
+        "componentId": string;
+        /**
+          * Closes the filter popover programmatically. Note: Clear variant does not support popover functionality.
+         */
+        "hideFilter": () => Promise<void>;
+        /**
+          * The name of the icon to display in the trigger button. For 'clear' variant, this is ignored as it always shows trash icon.
+         */
+        "icon"?: string;
+        /**
+          * Opens the filter popover programmatically. Note: Clear variant does not support popover functionality.
+         */
+        "showFilter": () => Promise<void>;
+        /**
+          * The text content displayed in the trigger button.
+         */
+        "text"?: string;
+        /**
+          * The variant style of the filter trigger.
+          * @defaultValue 'default'
+         */
+        "variant": PdsFilterVariant;
+    }
+    interface PdsFilters {
+        /**
+          * A unique identifier used for the underlying component `id` attribute.
+         */
+        "componentId": string;
+    }
     interface PdsImage {
         /**
           * The image's alt tag. If none is provided, it will default to an empty string, which is desired for decorative images.
@@ -1219,6 +1285,10 @@ export namespace Components {
           * A unique identifier used for the underlying component `id` attribute.
          */
         "componentId": string;
+        /**
+          * Closes the popover programmatically
+         */
+        "hide": () => Promise<void>;
         /**
           * Sets the maximum width of the popover content
           * @defaultValue 352
@@ -1238,10 +1308,18 @@ export namespace Components {
           * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover. Manual popovers require the consumer to handle the visibility of the popover.
          */
         "popoverType": 'auto' | 'manual';
+        /**
+          * Opens the popover programmatically
+         */
+        "show": () => Promise<void>;
         /**
           * Text that appears on the trigger element
          */
         "text": string;
+        /**
+          * Toggles the popover open/closed state programmatically
+         */
+        "toggle": () => Promise<void>;
     }
     interface PdsProgress {
         /**
@@ -1858,6 +1936,10 @@ export interface PdsDropdownMenuItemCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPdsDropdownMenuItemElement;
 }
+export interface PdsFilterCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPdsFilterElement;
+}
 export interface PdsInputCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPdsInputElement;
@@ -1866,6 +1948,10 @@ export interface PdsModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPdsModalElement;
 }
+export interface PdsPopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPdsPopoverElement;
+}
 export interface PdsRadioCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPdsRadioElement;
@@ -2090,6 +2176,37 @@ declare global {
         prototype: HTMLPdsDropdownMenuSeparatorElement;
         new (): HTMLPdsDropdownMenuSeparatorElement;
     };
+    interface HTMLPdsFilterElementEventMap {
+        "pdsFilterOpen": PdsFilterOpenEventDetail;
+        "pdsFilterClose": PdsFilterCloseEventDetail;
+        "pdsFilterClear": PdsFilterClearEventDetail;
+    }
+    /**
+     * Individual filter component with cross-browser popover positioning.
+     * Uses a hybrid approach for optimal cross-browser compatibility:
+     * - Modern browsers: CSS anchor positioning + JavaScript flip classes
+     * - Fallback browsers: JavaScript positioning with viewport boundary detection
+     */
+    interface HTMLPdsFilterElement extends Components.PdsFilter, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPdsFilterElementEventMap>(type: K, listener: (this: HTMLPdsFilterElement, ev: PdsFilterCustomEvent<HTMLPdsFilterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPdsFilterElementEventMap>(type: K, listener: (this: HTMLPdsFilterElement, ev: PdsFilterCustomEvent<HTMLPdsFilterElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPdsFilterElement: {
+        prototype: HTMLPdsFilterElement;
+        new (): HTMLPdsFilterElement;
+    };
+    interface HTMLPdsFiltersElement extends Components.PdsFilters, HTMLStencilElement {
+    }
+    var HTMLPdsFiltersElement: {
+        prototype: HTMLPdsFiltersElement;
+        new (): HTMLPdsFiltersElement;
+    };
     interface HTMLPdsImageElement extends Components.PdsImage, HTMLStencilElement {
     }
     var HTMLPdsImageElement: {
@@ -2164,7 +2281,19 @@ declare global {
         prototype: HTMLPdsModalHeaderElement;
         new (): HTMLPdsModalHeaderElement;
     };
+    interface HTMLPdsPopoverElementEventMap {
+        "pdsPopoverOpen": PdsPopoverEventDetail;
+        "pdsPopoverClose": PdsPopoverEventDetail;
+    }
     interface HTMLPdsPopoverElement extends Components.PdsPopover, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPdsPopoverElementEventMap>(type: K, listener: (this: HTMLPdsPopoverElement, ev: PdsPopoverCustomEvent<HTMLPdsPopoverElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPdsPopoverElementEventMap>(type: K, listener: (this: HTMLPdsPopoverElement, ev: PdsPopoverCustomEvent<HTMLPdsPopoverElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
     }
     var HTMLPdsPopoverElement: {
         prototype: HTMLPdsPopoverElement;
@@ -2436,6 +2565,8 @@ declare global {
         "pds-dropdown-menu": HTMLPdsDropdownMenuElement;
         "pds-dropdown-menu-item": HTMLPdsDropdownMenuItemElement;
         "pds-dropdown-menu-separator": HTMLPdsDropdownMenuSeparatorElement;
+        "pds-filter": HTMLPdsFilterElement;
+        "pds-filters": HTMLPdsFiltersElement;
         "pds-image": HTMLPdsImageElement;
         "pds-input": HTMLPdsInputElement;
         "pds-link": HTMLPdsLinkElement;
@@ -3203,7 +3334,7 @@ declare namespace LocalJSX {
           * Sets the style variant of the button.
           * @defaultValue primary
          */
-        "variant"?: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled';
+        "variant"?: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' | 'filter';
     }
     interface PdsCheckbox {
         /**
@@ -3287,14 +3418,33 @@ declare namespace LocalJSX {
           * Defines the color scheme of the chip.
           * @defaultValue 'neutral'
          */
-        "sentiment"?: 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+        "sentiment"?: ChipSentimentType;
         /**
           * Sets the style variant of the chip. Note: This prop is ignored when sentiment is 'brand'.
           * @defaultValue 'text'
          */
-        "variant"?: 'text' | 'tag' | 'dropdown';
+        "variant"?: ChipVariantType;
     }
     interface PdsCombobox {
+        /**
+          * Whether a dot should be displayed on the chip trigger.
+          * @default false
+         */
+        "chipDot"?: boolean;
+        /**
+          * The name of the icon to display in the chip trigger.
+         */
+        "chipIcon"?: string;
+        /**
+          * Whether the chip trigger should be displayed in a larger size.
+          * @default false
+         */
+        "chipLarge"?: boolean;
+        /**
+          * The sentiment for the chip trigger. Matches Pine chip sentiments.
+          * @default 'neutral'
+         */
+        "chipSentiment"?: ChipSentimentType;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -3340,6 +3490,10 @@ declare namespace LocalJSX {
           * @default 'filter'
          */
         "mode"?: 'filter' | 'select-only';
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
         /**
           * Emitted when the value changes.
          */
@@ -3349,10 +3503,10 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable).
+          * Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
           * @default 'input'
          */
-        "trigger"?: 'input' | 'button';
+        "trigger"?: 'input' | 'button' | 'chip';
         /**
           * The visual variant for the button trigger. Matches Pine button variants.
           * @default 'secondary'
@@ -3457,6 +3611,49 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
     }
+    /**
+     * Individual filter component with cross-browser popover positioning.
+     * Uses a hybrid approach for optimal cross-browser compatibility:
+     * - Modern browsers: CSS anchor positioning + JavaScript flip classes
+     * - Fallback browsers: JavaScript positioning with viewport boundary detection
+     */
+    interface PdsFilter {
+        /**
+          * A unique identifier used for the underlying component `id` attribute.
+         */
+        "componentId": string;
+        /**
+          * The name of the icon to display in the trigger button. For 'clear' variant, this is ignored as it always shows trash icon.
+         */
+        "icon"?: string;
+        /**
+          * Event emitted when the clear variant is clicked.
+         */
+        "onPdsFilterClear"?: (event: PdsFilterCustomEvent<PdsFilterClearEventDetail>) => void;
+        /**
+          * Event emitted when the filter popover is closed.
+         */
+        "onPdsFilterClose"?: (event: PdsFilterCustomEvent<PdsFilterCloseEventDetail>) => void;
+        /**
+          * Event emitted when the filter popover is opened.
+         */
+        "onPdsFilterOpen"?: (event: PdsFilterCustomEvent<PdsFilterOpenEventDetail>) => void;
+        /**
+          * The text content displayed in the trigger button.
+         */
+        "text"?: string;
+        /**
+          * The variant style of the filter trigger.
+          * @defaultValue 'default'
+         */
+        "variant"?: PdsFilterVariant;
+    }
+    interface PdsFilters {
+        /**
+          * A unique identifier used for the underlying component `id` attribute.
+         */
+        "componentId"?: string;
+    }
     interface PdsImage {
         /**
           * The image's alt tag. If none is provided, it will default to an empty string, which is desired for decorative images.
@@ -3707,6 +3904,14 @@ declare namespace LocalJSX {
           * @defaultValue 352
          */
         "maxWidth"?: number;
+        /**
+          * Emitted when the popover is closed
+         */
+        "onPdsPopoverClose"?: (event: PdsPopoverCustomEvent<PdsPopoverEventDetail>) => void;
+        /**
+          * Emitted when the popover is opened
+         */
+        "onPdsPopoverOpen"?: (event: PdsPopoverCustomEvent<PdsPopoverEventDetail>) => void;
         /**
           * Determines the preferred position of the popover
           * @defaultValue "right"
@@ -4358,6 +4563,8 @@ declare namespace LocalJSX {
         "pds-dropdown-menu": PdsDropdownMenu;
         "pds-dropdown-menu-item": PdsDropdownMenuItem;
         "pds-dropdown-menu-separator": PdsDropdownMenuSeparator;
+        "pds-filter": PdsFilter;
+        "pds-filters": PdsFilters;
         "pds-image": PdsImage;
         "pds-input": PdsInput;
         "pds-link": PdsLink;
@@ -4412,6 +4619,14 @@ declare module "@stencil/core" {
             "pds-dropdown-menu": LocalJSX.PdsDropdownMenu & JSXBase.HTMLAttributes<HTMLPdsDropdownMenuElement>;
             "pds-dropdown-menu-item": LocalJSX.PdsDropdownMenuItem & JSXBase.HTMLAttributes<HTMLPdsDropdownMenuItemElement>;
             "pds-dropdown-menu-separator": LocalJSX.PdsDropdownMenuSeparator & JSXBase.HTMLAttributes<HTMLPdsDropdownMenuSeparatorElement>;
+            /**
+             * Individual filter component with cross-browser popover positioning.
+             * Uses a hybrid approach for optimal cross-browser compatibility:
+             * - Modern browsers: CSS anchor positioning + JavaScript flip classes
+             * - Fallback browsers: JavaScript positioning with viewport boundary detection
+             */
+            "pds-filter": LocalJSX.PdsFilter & JSXBase.HTMLAttributes<HTMLPdsFilterElement>;
+            "pds-filters": LocalJSX.PdsFilters & JSXBase.HTMLAttributes<HTMLPdsFiltersElement>;
             "pds-image": LocalJSX.PdsImage & JSXBase.HTMLAttributes<HTMLPdsImageElement>;
             "pds-input": LocalJSX.PdsInput & JSXBase.HTMLAttributes<HTMLPdsInputElement>;
             "pds-link": LocalJSX.PdsLink & JSXBase.HTMLAttributes<HTMLPdsLinkElement>;

package/dist/types/utils/form.d.ts

@@ -10,3 +10,12 @@ export declare const assignDescription: (id: string, invalid: boolean, helperMes
  * Updates the `invalid` prop of a form element based on it's values validity
  */
 export declare const isRequired: (target: any, component: any) => void;
+/**
+ * Exposes a readonly type property on a custom form element to match native form element behavior.
+ * This makes the type property enumerable and accessible via element.type, matching native HTML elements.
+ * The property is non-configurable, preventing it from being redefined or deleted at runtime.
+ *
+ * @param element - The custom element to add the type property to
+ * @param type - The type value (string literal) or a getter function that returns the type
+ */
+export declare function exposeTypeProperty(element: HTMLElement, type: string | (() => string)): void;

package/dist/types/utils/types.d.ts

@@ -2,3 +2,5 @@ export type PlacementType = 'top-start' | 'top' | 'top-end' | 'left-start' | 'le
 export type BoxColumnType = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 export type BoxTShirtSizeType = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type BoxShadowSizeType = 'none' | '050' | '100' | '150' | '200' | '300' | '400' | '500';
+export type ChipSentimentType = 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+export type ChipVariantType = 'text' | 'tag' | 'dropdown';