@pine-ds/core 3.5.2 → 3.7.0

package/dist/types/components/pds-box/pds-box.d.ts

@@ -64,6 +64,26 @@ export declare class PdsBox {
      * 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 XS breakpoint.
+     */
+    autoXs?: 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 MD breakpoint.
+     */
+    autoMd?: 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 XL breakpoint.
+     */
+    autoXl?: boolean;
     /**
      *  Defines the background-color of the box.
      */
@@ -95,16 +115,86 @@ export declare class PdsBox {
      * If `true`, sets the box `max-width` to `100%`.
      */
     fit?: boolean;
+    /**
+     * If `true`, sets the box `max-width` to `100%` at the XS breakpoint.
+     */
+    fitXs?: 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 MD breakpoint.
+     */
+    fitMd?: 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 XL breakpoint.
+     */
+    fitXl?: boolean;
     /**
      * Defines the spacing between the box items.
      * @defaultValue none
     */
     gap?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the XS breakpoint.
+     * @defaultValue none
+    */
+    gapXs?: 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 MD breakpoint.
+     * @defaultValue none
+    */
+    gapMd?: 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 XL breakpoint.
+     * @defaultValue none
+    */
+    gapXl?: BoxTShirtSizeType;
     /**
      * Defines whether flex items are forced onto one line or can wrap onto multiple lines.
      * @defaultValue false
      */
     wrap?: boolean;
+    /**
+     * Defines whether flex items can wrap onto multiple lines at the XS breakpoint.
+     * @defaultValue false
+     */
+    wrapXs?: 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 MD breakpoint.
+     * @defaultValue false
+     */
+    wrapMd?: 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 XL breakpoint.
+     * @defaultValue false
+     */
+    wrapXl?: 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').
@@ -146,21 +236,121 @@ export declare class PdsBox {
      * @defaultValue none
     */
     marginBlockStart?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer top spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartXs?: 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 MD breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartMd?: 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 XL breakpoint.
+     * @defaultValue none
+    */
+    marginBlockStartXl?: BoxTShirtSizeType;
     /**
      * Defines the box's outer left spacing.
      * @defaultValue none
     */
     marginInlineStart?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer left spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartXs?: 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 MD breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartMd?: 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 XL breakpoint.
+     * @defaultValue none
+    */
+    marginInlineStartXl?: BoxTShirtSizeType;
     /**
      * Defines the box's outer right spacing.
      * @defaultValue none
     */
     marginInlineEnd?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer right spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndXs?: 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 MD breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndMd?: 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 XL breakpoint.
+     * @defaultValue none
+    */
+    marginInlineEndXl?: BoxTShirtSizeType;
     /**
      * Defines the box's outer bottom spacing.
      * @defaultValue none
     */
     marginBlockEnd?: BoxTShirtSizeType;
+    /**
+     * Defines the box's outer bottom spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndXs?: 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 MD breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndMd?: 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 XL breakpoint.
+     * @defaultValue none
+    */
+    marginBlockEndXl?: BoxTShirtSizeType;
     /**
      * The minimum height of the row. Used in conjunction with alignment props
      */
@@ -198,26 +388,151 @@ export declare class PdsBox {
      * @defaultValue none
     */
     padding?: BoxTShirtSizeType;
+    /**
+     * Defines the spacing between the box items at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingXs?: 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 MD breakpoint.
+     * @defaultValue none
+    */
+    paddingMd?: 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 XL breakpoint.
+     * @defaultValue none
+    */
+    paddingXl?: BoxTShirtSizeType;
     /**
      * Defines the top spacing.
      * @defaultValue none
     */
     paddingBlockStart?: BoxTShirtSizeType;
+    /**
+     * Defines the top spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartXs?: BoxTShirtSizeType;
+    /**
+     * Defines the top spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartSm?: BoxTShirtSizeType;
+    /**
+     * Defines the top spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartMd?: BoxTShirtSizeType;
+    /**
+     * Defines the top spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartLg?: BoxTShirtSizeType;
+    /**
+     * Defines the top spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockStartXl?: BoxTShirtSizeType;
     /**
      * Defines the bottom spacing.
      * @defaultValue none
     */
     paddingBlockEnd?: BoxTShirtSizeType;
+    /**
+     * Defines the bottom spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndXs?: BoxTShirtSizeType;
+    /**
+     * Defines the bottom spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndSm?: BoxTShirtSizeType;
+    /**
+     * Defines the bottom spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndMd?: BoxTShirtSizeType;
+    /**
+     * Defines the bottom spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndLg?: BoxTShirtSizeType;
+    /**
+     * Defines the bottom spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingBlockEndXl?: BoxTShirtSizeType;
     /**
      * Defines the left spacing.
      * @defaultValue none
     */
     paddingInlineStart?: BoxTShirtSizeType;
+    /**
+     * Defines the left spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartXs?: BoxTShirtSizeType;
+    /**
+     * Defines the left spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartSm?: BoxTShirtSizeType;
+    /**
+     * Defines the left spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartMd?: BoxTShirtSizeType;
+    /**
+     * Defines the left spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartLg?: BoxTShirtSizeType;
+    /**
+     * Defines the left spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineStartXl?: BoxTShirtSizeType;
     /**
      * Defines the right spacing.
      * @defaultValue none
     */
     paddingInlineEnd?: BoxTShirtSizeType;
+    /**
+     * Defines the right spacing at the XS breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndXs?: BoxTShirtSizeType;
+    /**
+     * Defines the right spacing at the SM breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndSm?: BoxTShirtSizeType;
+    /**
+     * Defines the right spacing at the MD breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndMd?: BoxTShirtSizeType;
+    /**
+     * Defines the right spacing at the LG breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndLg?: BoxTShirtSizeType;
+    /**
+     * Defines the right spacing at the XL breakpoint.
+     * @defaultValue none
+    */
+    paddingInlineEndXl?: BoxTShirtSizeType;
     /**
      * Defines the box shadow.
      * @defaultValue none

package/dist/types/components/pds-button/pds-button.d.ts

@@ -69,8 +69,12 @@ export declare class PdsButton {
      * Sets the style variant of the button.
      * @defaultValue primary
      */
-    variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled';
+    variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled' | 'filter';
     pdsClick: EventEmitter;
+    /**
+     * Listen for Enter key presses on form inputs to trigger submit
+     */
+    handleFormKeyDown(event: KeyboardEvent): void;
     private handleClick;
     private classNames;
     private hasSlotContent;

package/dist/types/components/pds-combobox/pds-combobox.d.ts

@@ -87,9 +87,9 @@ export declare class PdsCombobox implements BasePdsProps {
         value: string;
     }>;
     /**
-     * Internal state for filtered options
+     * Internal state for filtered options and group labels
      */
-    filteredOptions: HTMLOptionElement[];
+    filteredItems: (HTMLOptionElement | HTMLOptGroupElement | HTMLPdsTextElement)[];
     /**
      * Internal state for the currently highlighted option index
      */
@@ -108,6 +108,7 @@ export declare class PdsCombobox implements BasePdsProps {
     selectedOptionLayoutContent: string;
     private inputEl?;
     private optionEls;
+    private allItems;
     private triggerEl?;
     private listboxEl?;
     componentWillLoad(): void;
@@ -123,12 +124,34 @@ export declare class PdsCombobox implements BasePdsProps {
     private filterOptions;
     private openDropdownPositioning;
     private handleInput;
-    private handleFocus;
+    private handleInputClick;
     private handleKeyDown;
     /**
      * Sets focus on the native input element.
      */
     setFocus(): Promise<void>;
+    /**
+     * Focus management helper - moves focus to the first option when dropdown opens
+     */
+    private focusFirstOption;
+    /**
+     * Focus management helper - actually focuses the first option when opened via arrow keys
+     */
+    private focusFirstOptionForArrowKeys;
+    private isArrowKeyNavigationMode;
+    /**
+     * Focus management helper - updates visual state and scrolling for the currently highlighted option
+     * Note: We don't actually focus the option to prevent focusout events that close the dropdown
+     */
+    private updateOptionFocus;
+    /**
+     * Updates aria-activedescendant on the trigger element
+     */
+    private updateAriaActiveDescendant;
+    /**
+     * Focus management helper - restores focus to the trigger element
+     */
+    private restoreFocusToTrigger;
     /**
      * Gets the value of the currently selected option.
      */
@@ -136,11 +159,13 @@ export declare class PdsCombobox implements BasePdsProps {
     private onOptionClick;
     private onOptionMouseEnter;
     private onOptionMouseDown;
+    private onOptionKeyDown;
     private get selectedLabel();
     private get selectedLayoutContent();
     private get selectedHasLayout();
     private onButtonTriggerClick;
     private onButtonTriggerKeyDown;
+    private onButtonTriggerKeyUp;
     private onComboboxFocusOut;
     private handleOptionClick;
     private renderDropdown;

package/dist/types/components/pds-filters/pds-filter/filter-interface.d.ts

@@ -0,0 +1,19 @@
+export type PdsFilterVariant = 'default' | 'selected' | 'more' | 'clear';
+export interface PdsFilterOpenEventDetail {
+    componentId: string;
+    variant: PdsFilterVariant;
+    text?: string;
+}
+export interface PdsFilterCloseEventDetail {
+    componentId: string;
+    variant: PdsFilterVariant;
+    text?: string;
+}
+export interface PdsFilterClearEventDetail {
+    componentId: string;
+    text?: string;
+}
+export interface PdsFilterEvent<T> extends CustomEvent<T> {
+    readonly detail: T;
+    readonly target: HTMLPdsFilterElement | null;
+}

package/dist/types/components/pds-filters/pds-filter/pds-filter.d.ts

@@ -0,0 +1,133 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import type { BasePdsProps } from "../../../utils/interfaces";
+import type { PdsFilterOpenEventDetail, PdsFilterCloseEventDetail, PdsFilterClearEventDetail, PdsFilterVariant } from './filter-interface';
+/**
+ * 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
+ *
+ * @part button - Exposes the trigger button element for styling.
+ * @part button-content - Exposes the button content container for styling.
+ * @part button-text - Exposes the button text for styling.
+ * @part icon - Exposes the icon component for styling.
+ * @part popover - Exposes the popover container for styling.
+ * @slot (default) - Popover content that will be displayed when the filter is open.
+ */
+export declare class PdsFilter implements BasePdsProps {
+    el: HTMLPdsFilterElement;
+    private popoverEl;
+    private scrollRAF;
+    private lastScrollTime;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * The variant style of the filter trigger.
+     * @defaultValue 'default'
+     */
+    variant: PdsFilterVariant;
+    /**
+     * 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;
+    /**
+     * The text content displayed in the trigger button.
+     */
+    text?: string;
+    /**
+     * State to track if the popover is open.
+     */
+    isOpen: boolean;
+    /**
+     * Event emitted when the filter popover is opened.
+     */
+    pdsFilterOpen: EventEmitter<PdsFilterOpenEventDetail>;
+    /**
+     * Event emitted when the filter popover is closed.
+     */
+    pdsFilterClose: EventEmitter<PdsFilterCloseEventDetail>;
+    /**
+     * Event emitted when the clear variant is clicked.
+     */
+    pdsFilterClear: EventEmitter<PdsFilterClearEventDetail>;
+    /**
+     * Component lifecycle: Clean up when disconnected from DOM.
+     * Prevents memory leaks by canceling pending operations and closing popovers.
+     */
+    disconnectedCallback(): void;
+    componentDidRender(): void;
+    /**
+     * Handle native popover toggle events directly on the element
+     * This is needed for browsers with native Popover API support
+     */
+    private handleNativePopoverToggle;
+    /**
+     * Reposition popovers on window resize.
+     */
+    handleWindowResize(): void;
+    /**
+     * Reposition popovers on scroll with performance throttling.
+     */
+    handleWindowScroll(): void;
+    /**
+     * Closes other open filter popovers to ensure only one is open at a time.
+     */
+    private closeOtherPopovers;
+    /**
+     * Adjusts popover position to keep it within viewport bounds.
+     * Uses CSS anchor positioning for modern browsers, JavaScript for fallback browsers.
+     */
+    private adjustPopoverPosition;
+    /**
+     * Opens the filter popover programmatically.
+     * Note: Clear variant does not support popover functionality.
+     */
+    showFilter(): Promise<void>;
+    /**
+     * Closes the filter popover programmatically.
+     * Note: Clear variant does not support popover functionality.
+     */
+    hideFilter(): Promise<void>;
+    /**
+     * Listen for popover toggle events for browsers without native Popover API (fallback).
+     * Native API browsers use direct element listeners to avoid conflicts.
+     */
+    handlePopoverToggle(event: Event): void;
+    /**
+     * Listen for clicks to detect outside dismissal.
+     */
+    handleDocumentClick(event: Event): void;
+    /**
+     * Listen for Escape key to ensure close event fires.
+     */
+    handleEscapeKey(event: KeyboardEvent): void;
+    /**
+     * Handle keyboard interactions for clear variant only.
+     */
+    private handleKeyDown;
+    /**
+     * Handle trigger button click. Clear variant emits event, others toggle popover.
+     */
+    private handleClick;
+    /**
+     * Get the appropriate icon for the variant.
+     */
+    private getIcon;
+    /**
+     * Get CSS classes for the trigger button.
+     */
+    private getTriggerClasses;
+    /**
+     * Render the trigger icon.
+     */
+    private renderIcon;
+    /**
+     * Render the dropdown icon for selected variant.
+     */
+    private renderDropdownIcon;
+    render(): any;
+}

package/dist/types/components/pds-filters/pds-filters.d.ts

@@ -0,0 +1,11 @@
+import type { BasePdsProps } from "../../utils/interfaces";
+/**
+ * @slot (default) - Container for pds-filter components.
+ */
+export declare class PdsFilters implements BasePdsProps {
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    render(): any;
+}

package/dist/types/components/pds-modal/pds-modal-content/pds-modal-content.d.ts

@@ -6,17 +6,34 @@ declare global {
 export declare class PdsModalContent {
     el: HTMLPdsModalContentElement;
     /**
-     * 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';
     contentMaxHeight: string;
+    /**
+     * Tracks whether the border prop was explicitly set by the user
+     */
+    private userSetBorder;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     disconnectedCallback(): void;
+    /**
+     * Handle scroll events
+     */
+    private handleScroll;
+    /**
+     * Handle resize events
+     */
+    private handleResize;
     /**
      * Calculates the max-height based on header and footer heights
      */
     private mutationObserver;
+    /**
+     * Updates border visibility based on scroll state (only if not user-defined)
+     */
+    private updateBorders;
     /**
      * Calculates the max-height based on header and footer heights
      */

package/dist/types/components/pds-modal/pds-modal.d.ts

@@ -23,6 +23,11 @@ export declare class PdsModal {
      * @default 'md'
      */
     size: 'sm' | 'md' | 'lg' | 'fullscreen';
+    /**
+     * Whether the modal content should be scrollable
+     * @default true
+     */
+    scrollable: boolean;
     /**
      * Emitted when the modal is opened
      */

package/dist/types/components/pds-modal/test/mock-pds-modal.d.ts

@@ -20,6 +20,11 @@ export declare class MockPdsModal {
      * The size of the modal
      */
     size: 'sm' | 'md' | 'lg' | 'fullscreen';
+    /**
+     * Whether the modal content should be scrollable
+     * @default true
+     */
+    scrollable: boolean;
     /**
      * Whether the modal can be dismissed by clicking the backdrop
      */