@pine-ds/core 3.5.2 → 3.7.0

package/dist/types/components.d.ts

@@ -8,11 +8,13 @@ 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 { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/pds-input/input-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 { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/pds-input/input-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/pds-textarea/textarea-interface";
 export namespace Components {
@@ -37,6 +39,11 @@ export namespace Components {
           * Whether the modal is open
          */
         "open": boolean;
+        /**
+          * Whether the modal content should be scrollable
+          * @default true
+         */
+        "scrollable": boolean;
         /**
           * Shows the modal
          */
@@ -183,6 +190,26 @@ export namespace Components {
           * If `true`, the box will be sized to fit its contents.
          */
         "auto"?: boolean;
+        /**
+          * If `true`, the box will be sized to fit its contents at the LG breakpoint.
+         */
+        "autoLg"?: boolean;
+        /**
+          * If `true`, the box will be sized to fit its contents at the MD breakpoint.
+         */
+        "autoMd"?: boolean;
+        /**
+          * If `true`, the box will be sized to fit its contents at the SM breakpoint.
+         */
+        "autoSm"?: boolean;
+        /**
+          * If `true`, the box will be sized to fit its contents at the XL breakpoint.
+         */
+        "autoXl"?: boolean;
+        /**
+          * If `true`, the box will be sized to fit its contents at the XS breakpoint.
+         */
+        "autoXs"?: boolean;
         /**
           * Defines the background-color of the box.
          */
@@ -214,6 +241,26 @@ export namespace Components {
           * If `true`, sets the box `max-width` to `100%`.
          */
         "fit"?: boolean;
+        /**
+          * If `true`, sets the box `max-width` to `100%` at the LG breakpoint.
+         */
+        "fitLg"?: boolean;
+        /**
+          * If `true`, sets the box `max-width` to `100%` at the MD breakpoint.
+         */
+        "fitMd"?: boolean;
+        /**
+          * If `true`, sets the box `max-width` to `100%` at the SM breakpoint.
+         */
+        "fitSm"?: boolean;
+        /**
+          * If `true`, sets the box `max-width` to `100%` at the XL breakpoint.
+         */
+        "fitXl"?: boolean;
+        /**
+          * If `true`, sets the box `max-width` to `100%` at the XS breakpoint.
+         */
+        "fitXs"?: boolean;
         /**
           * Defines how a box will grow or shrink to fit the space available in its container. Can be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto').
           * @defaultValue none
@@ -224,6 +271,31 @@ export namespace Components {
           * @defaultValue none
          */
         "gap"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the LG breakpoint.
+          * @defaultValue none
+         */
+        "gapLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the MD breakpoint.
+          * @defaultValue none
+         */
+        "gapMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the SM breakpoint.
+          * @defaultValue none
+         */
+        "gapSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the XL breakpoint.
+          * @defaultValue none
+         */
+        "gapXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the XS breakpoint.
+          * @defaultValue none
+         */
+        "gapXs"?: BoxTShirtSizeType;
         /**
           * Defines the horizontal alignment of the box items.
           * @defaultValue start
@@ -259,21 +331,121 @@ export namespace Components {
           * @defaultValue none
          */
         "marginBlockEnd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer bottom spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockEndLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer bottom spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockEndMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer bottom spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockEndSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer bottom spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockEndXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer bottom spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockEndXs"?: BoxTShirtSizeType;
         /**
           * Defines the box's outer top spacing.
           * @defaultValue none
          */
         "marginBlockStart"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer top spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockStartLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer top spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockStartMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer top spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockStartSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer top spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockStartXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer top spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockStartXs"?: BoxTShirtSizeType;
         /**
           * Defines the box's outer right spacing.
           * @defaultValue none
          */
         "marginInlineEnd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer right spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineEndLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer right spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineEndMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer right spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineEndSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer right spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineEndXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer right spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineEndXs"?: BoxTShirtSizeType;
         /**
           * Defines the box's outer left spacing.
           * @defaultValue none
          */
         "marginInlineStart"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer left spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineStartLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer left spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineStartMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer left spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineStartSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer left spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineStartXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer left spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineStartXs"?: BoxTShirtSizeType;
         /**
           * The minimum height of the row. Used in conjunction with alignment props
          */
@@ -316,21 +488,146 @@ export namespace Components {
           * @defaultValue none
          */
         "paddingBlockEnd"?: BoxTShirtSizeType;
+        /**
+          * Defines the bottom spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockEndLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the bottom spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockEndMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the bottom spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockEndSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the bottom spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockEndXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the bottom spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockEndXs"?: BoxTShirtSizeType;
         /**
           * Defines the top spacing.
           * @defaultValue none
          */
         "paddingBlockStart"?: BoxTShirtSizeType;
+        /**
+          * Defines the top spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockStartLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the top spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockStartMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the top spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockStartSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the top spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockStartXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the top spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockStartXs"?: BoxTShirtSizeType;
         /**
           * Defines the right spacing.
           * @defaultValue none
          */
         "paddingInlineEnd"?: BoxTShirtSizeType;
+        /**
+          * Defines the right spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineEndLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the right spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineEndMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the right spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineEndSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the right spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineEndXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the right spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineEndXs"?: BoxTShirtSizeType;
         /**
           * Defines the left spacing.
           * @defaultValue none
          */
         "paddingInlineStart"?: BoxTShirtSizeType;
+        /**
+          * Defines the left spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineStartLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the left spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineStartMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the left spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineStartSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the left spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineStartXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the left spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineStartXs"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the LG breakpoint.
+          * @defaultValue none
+         */
+        "paddingLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the MD breakpoint.
+          * @defaultValue none
+         */
+        "paddingMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the SM breakpoint.
+          * @defaultValue none
+         */
+        "paddingSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the XL breakpoint.
+          * @defaultValue none
+         */
+        "paddingXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the XS breakpoint.
+          * @defaultValue none
+         */
+        "paddingXs"?: BoxTShirtSizeType;
         /**
           * Defines the box shadow.
           * @defaultValue none
@@ -365,6 +662,31 @@ export namespace Components {
           * @defaultValue false
          */
         "wrap"?: boolean;
+        /**
+          * Defines whether flex items can wrap onto multiple lines at the LG breakpoint.
+          * @defaultValue false
+         */
+        "wrapLg"?: boolean;
+        /**
+          * Defines whether flex items can wrap onto multiple lines at the MD breakpoint.
+          * @defaultValue false
+         */
+        "wrapMd"?: boolean;
+        /**
+          * Defines whether flex items can wrap onto multiple lines at the SM breakpoint.
+          * @defaultValue false
+         */
+        "wrapSm"?: boolean;
+        /**
+          * Defines whether flex items can wrap onto multiple lines at the XL breakpoint.
+          * @defaultValue false
+         */
+        "wrapXl"?: boolean;
+        /**
+          * Defines whether flex items can wrap onto multiple lines at the XS breakpoint.
+          * @defaultValue false
+         */
+        "wrapXs"?: boolean;
     }
     interface PdsButton {
         /**
@@ -421,7 +743,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 {
         /**
@@ -666,6 +988,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.
@@ -868,6 +1229,11 @@ export namespace Components {
           * @default false
          */
         "open": boolean;
+        /**
+          * Whether the modal content should be scrollable
+          * @default true
+         */
+        "scrollable": boolean;
         /**
           * Opens the modal
          */
@@ -880,7 +1246,7 @@ export namespace Components {
     }
     interface PdsModalContent {
         /**
-          * The border style for the content area. Automatically set based on available space of the modal content.
+          * The border style for the content area. When not explicitly set, automatically determined based on scroll state.
           * @default 'none'
          */
         "border": 'none' | 'both' | 'top' | 'bottom';
@@ -1396,6 +1762,10 @@ export namespace Components {
           * Text to be displayed as the textarea label.
          */
         "label"?: string;
+        /**
+          * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.
+         */
+        "maxLength"?: number;
         /**
           * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.
          */
@@ -1529,6 +1899,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;
@@ -1761,6 +2135,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: {
@@ -2107,6 +2512,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;
@@ -2169,6 +2576,11 @@ declare namespace LocalJSX {
           * Whether the modal is open
          */
         "open"?: boolean;
+        /**
+          * Whether the modal content should be scrollable
+          * @default true
+         */
+        "scrollable"?: boolean;
         /**
           * The size of the modal
          */
@@ -2315,6 +2727,26 @@ declare namespace LocalJSX {
           * If `true`, the box will be sized to fit its contents.
          */
         "auto"?: boolean;
+        /**
+          * If `true`, the box will be sized to fit its contents at the LG breakpoint.
+         */
+        "autoLg"?: boolean;
+        /**
+          * If `true`, the box will be sized to fit its contents at the MD breakpoint.
+         */
+        "autoMd"?: boolean;
+        /**
+          * If `true`, the box will be sized to fit its contents at the SM breakpoint.
+         */
+        "autoSm"?: boolean;
+        /**
+          * If `true`, the box will be sized to fit its contents at the XL breakpoint.
+         */
+        "autoXl"?: boolean;
+        /**
+          * If `true`, the box will be sized to fit its contents at the XS breakpoint.
+         */
+        "autoXs"?: boolean;
         /**
           * Defines the background-color of the box.
          */
@@ -2346,6 +2778,26 @@ declare namespace LocalJSX {
           * If `true`, sets the box `max-width` to `100%`.
          */
         "fit"?: boolean;
+        /**
+          * If `true`, sets the box `max-width` to `100%` at the LG breakpoint.
+         */
+        "fitLg"?: boolean;
+        /**
+          * If `true`, sets the box `max-width` to `100%` at the MD breakpoint.
+         */
+        "fitMd"?: boolean;
+        /**
+          * If `true`, sets the box `max-width` to `100%` at the SM breakpoint.
+         */
+        "fitSm"?: boolean;
+        /**
+          * If `true`, sets the box `max-width` to `100%` at the XL breakpoint.
+         */
+        "fitXl"?: boolean;
+        /**
+          * If `true`, sets the box `max-width` to `100%` at the XS breakpoint.
+         */
+        "fitXs"?: boolean;
         /**
           * Defines how a box will grow or shrink to fit the space available in its container. Can be a predefined value ('none', 'grow', 'shrink') or a custom flex value (e.g., '1', '0 1 auto').
           * @defaultValue none
@@ -2356,6 +2808,31 @@ declare namespace LocalJSX {
           * @defaultValue none
          */
         "gap"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the LG breakpoint.
+          * @defaultValue none
+         */
+        "gapLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the MD breakpoint.
+          * @defaultValue none
+         */
+        "gapMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the SM breakpoint.
+          * @defaultValue none
+         */
+        "gapSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the XL breakpoint.
+          * @defaultValue none
+         */
+        "gapXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the XS breakpoint.
+          * @defaultValue none
+         */
+        "gapXs"?: BoxTShirtSizeType;
         /**
           * Defines the horizontal alignment of the box items.
           * @defaultValue start
@@ -2391,21 +2868,121 @@ declare namespace LocalJSX {
           * @defaultValue none
          */
         "marginBlockEnd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer bottom spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockEndLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer bottom spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockEndMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer bottom spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockEndSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer bottom spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockEndXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer bottom spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockEndXs"?: BoxTShirtSizeType;
         /**
           * Defines the box's outer top spacing.
           * @defaultValue none
          */
         "marginBlockStart"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer top spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockStartLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer top spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockStartMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer top spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockStartSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer top spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockStartXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer top spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "marginBlockStartXs"?: BoxTShirtSizeType;
         /**
           * Defines the box's outer right spacing.
           * @defaultValue none
          */
         "marginInlineEnd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer right spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineEndLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer right spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineEndMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer right spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineEndSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer right spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineEndXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer right spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineEndXs"?: BoxTShirtSizeType;
         /**
           * Defines the box's outer left spacing.
           * @defaultValue none
          */
         "marginInlineStart"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer left spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineStartLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer left spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineStartMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer left spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineStartSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer left spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineStartXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the box's outer left spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "marginInlineStartXs"?: BoxTShirtSizeType;
         /**
           * The minimum height of the row. Used in conjunction with alignment props
          */
@@ -2448,21 +3025,146 @@ declare namespace LocalJSX {
           * @defaultValue none
          */
         "paddingBlockEnd"?: BoxTShirtSizeType;
+        /**
+          * Defines the bottom spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockEndLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the bottom spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockEndMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the bottom spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockEndSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the bottom spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockEndXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the bottom spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockEndXs"?: BoxTShirtSizeType;
         /**
           * Defines the top spacing.
           * @defaultValue none
          */
         "paddingBlockStart"?: BoxTShirtSizeType;
+        /**
+          * Defines the top spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockStartLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the top spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockStartMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the top spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockStartSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the top spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockStartXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the top spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "paddingBlockStartXs"?: BoxTShirtSizeType;
         /**
           * Defines the right spacing.
           * @defaultValue none
          */
         "paddingInlineEnd"?: BoxTShirtSizeType;
+        /**
+          * Defines the right spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineEndLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the right spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineEndMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the right spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineEndSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the right spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineEndXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the right spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineEndXs"?: BoxTShirtSizeType;
         /**
           * Defines the left spacing.
           * @defaultValue none
          */
         "paddingInlineStart"?: BoxTShirtSizeType;
+        /**
+          * Defines the left spacing at the LG breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineStartLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the left spacing at the MD breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineStartMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the left spacing at the SM breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineStartSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the left spacing at the XL breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineStartXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the left spacing at the XS breakpoint.
+          * @defaultValue none
+         */
+        "paddingInlineStartXs"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the LG breakpoint.
+          * @defaultValue none
+         */
+        "paddingLg"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the MD breakpoint.
+          * @defaultValue none
+         */
+        "paddingMd"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the SM breakpoint.
+          * @defaultValue none
+         */
+        "paddingSm"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the XL breakpoint.
+          * @defaultValue none
+         */
+        "paddingXl"?: BoxTShirtSizeType;
+        /**
+          * Defines the spacing between the box items at the XS breakpoint.
+          * @defaultValue none
+         */
+        "paddingXs"?: BoxTShirtSizeType;
         /**
           * Defines the box shadow.
           * @defaultValue none
@@ -2497,6 +3199,31 @@ declare namespace LocalJSX {
           * @defaultValue false
          */
         "wrap"?: boolean;
+        /**
+          * Defines whether flex items can wrap onto multiple lines at the LG breakpoint.
+          * @defaultValue false
+         */
+        "wrapLg"?: boolean;
+        /**
+          * Defines whether flex items can wrap onto multiple lines at the MD breakpoint.
+          * @defaultValue false
+         */
+        "wrapMd"?: boolean;
+        /**
+          * Defines whether flex items can wrap onto multiple lines at the SM breakpoint.
+          * @defaultValue false
+         */
+        "wrapSm"?: boolean;
+        /**
+          * Defines whether flex items can wrap onto multiple lines at the XL breakpoint.
+          * @defaultValue false
+         */
+        "wrapXl"?: boolean;
+        /**
+          * Defines whether flex items can wrap onto multiple lines at the XS breakpoint.
+          * @defaultValue false
+         */
+        "wrapXs"?: boolean;
     }
     interface PdsButton {
         /**
@@ -2554,7 +3281,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 {
         /**
@@ -2808,6 +3535,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.
@@ -3026,6 +3796,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "open"?: boolean;
+        /**
+          * Whether the modal content should be scrollable
+          * @default true
+         */
+        "scrollable"?: boolean;
         /**
           * The size of the modal
           * @default 'md'
@@ -3034,7 +3809,7 @@ declare namespace LocalJSX {
     }
     interface PdsModalContent {
         /**
-          * The border style for the content area. Automatically set based on available space of the modal content.
+          * The border style for the content area. When not explicitly set, automatically determined based on scroll state.
           * @default 'none'
          */
         "border"?: 'none' | 'both' | 'top' | 'bottom';
@@ -3578,6 +4353,10 @@ declare namespace LocalJSX {
           * Text to be displayed as the textarea label.
          */
         "label"?: string;
+        /**
+          * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.
+         */
+        "maxLength"?: number;
         /**
           * Specifies the name. Submitted with the form name/value pair. This value will mirror the componentId.
          */
@@ -3700,6 +4479,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;
@@ -3754,6 +4535,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>;