@pine-ds/core 4.0.0-mercury.0 → 4.1.0

package/dist/types/components/pds-dropdown-menu/pds-dropdown-menu.d.ts

@@ -0,0 +1,39 @@
+import type { BasePdsProps } from "../../utils/interfaces";
+import { PlacementType } from "../../utils/types";
+/**
+ * @part menu-panel - Exposes the dropdown menu container for styling.
+ */
+export declare class PdsDropdownMenu implements BasePdsProps {
+    private slotEl;
+    private triggerEl;
+    private panelEl;
+    private isOpen;
+    private menuItems;
+    private cleanupAutoUpdate;
+    host: HTMLPdsDropdownMenuElement;
+    currentFocusIndex: number;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * The placement of the dropdown panel relative to the trigger.
+     */
+    placement: PlacementType;
+    componentDidRender(): void;
+    disconnectedCallback(): void;
+    private handleTriggerSlotChange;
+    private handleSlotChange;
+    private toggleDropdown;
+    private openDropdown;
+    private closeDropdown;
+    private handleClick;
+    private isItemDisabled;
+    private getFocusedItemIndex;
+    private focusItemByIndex;
+    private focusNextItem;
+    private focusPreviousItem;
+    handleKeyDown(event: KeyboardEvent): void;
+    handleWindowClick(event: MouseEvent): void;
+    render(): any;
+}

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-image/pds-image.d.ts

@@ -1,7 +1,9 @@
 export declare class PdsImage {
     /**
      * The image's alt tag. If none is provided,
-     * it will default to an empty string.
+     * it will default to an empty string, which is desired for
+     * decorative images.
+     * @defaultValue ''
      */
     alt?: string;
     /**
@@ -16,11 +18,12 @@ export declare class PdsImage {
     height?: number;
     /**
      * Indicates how the browser should load the image.
+     * @defaultValue eager
      */
     loading?: 'eager' | 'lazy';
     /**
      * Determines the intended display size of an image
-     * within certian breakpoints. Has no effect if `srcset`
+     * within certain breakpoints. Has no effect if `srcset`
      * is not set or value has no width descriptor.
      */
     sizes?: string;
@@ -29,7 +32,8 @@ export declare class PdsImage {
      */
     src: string;
     /**
-     * A set of image sources for the browser to use.
+     * A set of image sources for the browser to use
+     * for responsiveness.
      */
     srcset?: string;
     /**

package/dist/types/components/pds-input/input-interface.d.ts

@@ -0,0 +1,12 @@
+export interface InputChangeEventDetail {
+    value?: string | number | null;
+    event?: Event;
+}
+export interface InputInputEventDetail {
+    value?: string | number | null;
+    event?: Event;
+}
+export interface InputEvent<T = InputChangeEventDetail> extends CustomEvent {
+    detail: T;
+    target: HTMLPdsInputElement;
+}

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

@@ -1,11 +1,85 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
+/**
+ * @slot append - Content to be displayed after the input field
+ * @slot prefix - Content that is displayed visually within the input field before the input field
+ * @slot prepend - Content to be displayed before the input field
+ * @slot suffix - Content that is displayed visually within the input field after the input field
+ * @slot action - Content to be displayed in the label area, typically for help icons or links
+ */
 export declare class PdsInput {
+    private nativeInput?;
+    private inheritedAttributes;
+    private isComposing;
+    private prefixEl?;
+    private suffixEl?;
+    private focusedValue?;
+    private originalPdsInput?;
+    private internals?;
+    private resizeObserver?;
+    private hasLoaded;
+    el: HTMLPdsInputElement;
+    /**
+     * If true, the input has prefix content (non-focusable)
+     */
+    hasPrefix: boolean;
+    /**
+     * If true, the input has suffix content (non-focusable)
+     */
+    hasSuffix: boolean;
+    /**
+     * If true, the input has prepend content (focusable)
+     */
+    hasPrepend: boolean;
+    /**
+     * If true, the input has append content (focusable)
+     */
+    hasAppend: boolean;
+    /**
+     * If true, the input has action content in the label area
+     */
+    hasAction: boolean;
+    /**
+     * Emitted when the input loses focus.
+     */
+    pdsBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the value has changed.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    pdsChange: EventEmitter<InputChangeEventDetail>;
+    /**
+     * Emitted when the input has focus.
+     */
+    pdsFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when a keyboard input occurs.
+     */
+    pdsInput: EventEmitter<InputInputEventDetail>;
+    /**
+     * Emitted when a key is pressed down in the input.
+     */
+    pdsKeyDown: EventEmitter<KeyboardEvent>;
+    /**
+     * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global
+     * `input.focus()`.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Specifies if and how the browser provides `autocomplete` assistance for the field.
+     */
+    autocomplete: string;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */
     componentId: string;
     /**
-     * Indicates whether or not the input field is disabled.
+     * Sets the number of milliseconds to wait before updating the value.
+     */
+    debounce?: number;
+    /**
+     * Determines whether or not the input field is disabled.
      */
     disabled?: boolean;
     /**
@@ -17,43 +91,124 @@ export declare class PdsInput {
      */
     helperMessage?: string;
     /**
-     * Indicates whether or not the input field is invalid or throws an error.
+     * Determines whether or not the input field is invalid or throws an error.
      */
     invalid?: boolean;
     /**
      * Text to be displayed as the input label.
      */
     label?: string;
+    /**
+     * Visually hides the label text for instances where only the input should be displayed. Label remains accessible to assistive technology such as screen readers.
+     * Note: When true, the action slot is also hidden to maintain a minimal UI.
+     */
+    hideLabel: boolean;
+    /**
+     * Specifies the maximum value for the input field.
+     */
+    max?: string;
+    /**
+     * Specifies the maximum number of characters allowed in the input field.
+     */
+    maxlength?: string;
+    /**
+     * Specifies the minimum value for the input field.
+     */
+    min?: string;
+    /**
+     * Specifies the minimum number of characters allowed in the input field.
+     */
+    minlength?: string;
     /**
      * Specifies the name. Submitted with the form name/value pair.
      */
     name?: string;
+    /**
+     * Specifies the regular expression that the input value is checked against.
+     */
+    pattern?: string;
     /**
      * Specifies a short hint that describes the expected value of the input field.
      */
     placeholder?: string;
     /**
-     * Indicates whether or not the input field is readonly.
+     * Determines whether or not the input field is readonly.
      */
     readonly?: boolean;
     /**
-     * Indicates whether or not the input field is required.
+     * Determines whether or not the input field is required.
      */
     required?: boolean;
+    /**
+     * Works with the `min` and `max` attributes to define increments for the input field.
+     */
+    step?: string;
     /**
      * Determines the type of control that will be displayed
-     `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`
+     * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`
      * @defaultValue "text"
      */
     type: string;
     /**
      * The value of the input.
      */
-    value?: string;
+    value?: string | number | null;
+    /**
+     * Determines whether or not the input field takes full width of its container.
+     */
+    fullWidth?: boolean;
     /**
-     * Emitted when a keyboard input occurred.
+     * Applies highlight styling to the input field.
      */
-    pdsInput: EventEmitter<InputEvent>;
+    highlight?: boolean;
+    /**
+     * Determines if the input has focus.
+     */
+    hasFocus: boolean;
+    private observeAddonResize;
+    private updateAddonWidths;
+    private renderPrefix;
+    private renderSuffix;
+    private renderPrepend;
+    private renderAppend;
+    private renderAction;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentDidLoad(): void;
+    protected debounceChanged(): void;
+    protected valueChanged(): void;
+    private getValue;
     private onInputEvent;
+    private onChangeEvent;
+    private onBlurEvent;
+    private onFocusEvent;
+    private onCompositionStart;
+    private onCompositionEnd;
+    private onKeyDownEvent;
+    /**
+     * Emits a pdsChange event
+     */
+    private emitValueChange;
+    /**
+     * Emits a `pdsInput` event
+     */
+    private emitInputChange;
+    /**
+     * Updates the form value using ElementInternals API
+     */
+    private updateFormValue;
+    /**
+     * Form Associated Custom Elements API: Called when the form is reset
+     */
+    formResetCallback(): void;
+    /**
+     * Form Associated Custom Elements API: Called when the form is disabled
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Form Associated Custom Elements API: Called to restore form state
+     */
+    formStateRestoreCallback(state: string | FormData | null): void;
     render(): any;
 }

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

@@ -1,35 +1,97 @@
 /**
- * @part link - The main link element that represents the link component.
- * @slot - Content is placed between the opening closing tags.
+ * @part link - Link element styles.
+ * @slot (default) - Text content placed between the opening and closing tags. If no text is provided, the **href** will be used as a fallback.
  */
 export declare class PdsLink {
+    /**
+     * Marks the link as the current/active navigation item — for tab strips and
+     * nav rails built from links. Applies the active treatment (persistent
+     * underline + strong text) and sets `aria-current="page"`.
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Sets the link color.
+     */
+    color?: string;
+    /**
+     * Prompts the user to save the linked URL instead of navigating to it.
+     * It can be used without a value to download with the default filename,
+     * or with a string value to suggest a specific filename for the download.
+     */
+    download?: string;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */
     componentId: string;
     /**
-     * When enabled, opens link in a new tab.
+     * Determines whether the link should open in a new tab.
      * @defaultValue false
+     * @deprecated Consider using the `target` prop for more control. This prop will be maintained for backward compatibility.
      */
     external: boolean;
     /**
-     *
-     * Modifies the look of the link
+     * Specifies where to open the linked document.
+     * @defaultValue undefined
+     * @example
+     * <pds-link href="https://example.com" target="_blank">Opens in new tab</pds-link>
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /**
+     * Sets the link variant styles.
+     * @defaultValue inline
      */
     variant: 'inline' | 'plain';
     /**
-     *
-     * The Font size follows t-shirt model
-     * sm: 12px
-     * md: 14px
-     * lg: 16px
+     * The font size of the link's text.
      * @defaultValue lg
      */
     fontSize: 'sm' | 'md' | 'lg';
     /**
-     * The URL that the hyperlink points to.
+     * The hyperlink's destination URL. If no text is provided in the custom slot, the href will be used.
      */
     href: string;
+    /**
+     * Enables or disables Turbo Drive for this link.
+     * Maps to the `data-turbo` attribute on the inner anchor element.
+     */
+    turbo?: string;
+    /**
+     * Specifies the Turbo Frame to target for navigation.
+     * Maps to the `data-turbo-frame` attribute on the inner anchor element.
+     */
+    turboFrame?: string;
+    /**
+     * Controls the Turbo visit action type.
+     * Maps to the `data-turbo-action` attribute on the inner anchor element.
+     */
+    turboAction?: 'advance' | 'replace';
+    /**
+     * Changes the HTTP method for the link request.
+     * Maps to the `data-turbo-method` attribute on the inner anchor element.
+     */
+    turboMethod?: 'get' | 'post' | 'put' | 'patch' | 'delete';
+    /**
+     * Displays a confirmation dialog before navigating.
+     * Maps to the `data-turbo-confirm` attribute on the inner anchor element.
+     */
+    turboConfirm?: string;
+    /**
+     * Accepts Turbo Stream responses for GET requests.
+     * Maps to the `data-turbo-stream` attribute on the inner anchor element.
+     */
+    turboStream?: string;
+    /**
+     * Controls link prefetching on hover.
+     * Maps to the `data-turbo-prefetch` attribute on the inner anchor element.
+     */
+    turboPrefetch?: string;
+    /**
+     * Eagerly preloads the link's destination into cache.
+     * Maps to the `data-turbo-preload` attribute on the inner anchor element.
+     */
+    turboPreload?: string;
     private classNames;
+    private setLinkStyles;
     render(): any;
 }

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

@@ -1,4 +1,5 @@
 /**
+ * @part loader-svg - Exposes the spinner SVG element for color customization.
  * @slot label - Default slot for Loader label text.
  */
 export declare class PdsLoader {
@@ -19,6 +20,6 @@ export declare class PdsLoader {
      */
     variant: 'spinner' | 'typing';
     private loaderSize;
-    private style;
+    private getSvgStyle;
     render(): any;
 }

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

@@ -0,0 +1,38 @@
+export declare class PdsModalContent {
+    el: HTMLPdsModalContentElement;
+    componentDidRender(): void;
+    /**
+     * 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
+     */
+    private calculateMaxHeight;
+    render(): any;
+}

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

@@ -0,0 +1,5 @@
+export declare class PdsModalFooter {
+    el: HTMLPdsModalFooterElement;
+    componentDidRender(): void;
+    render(): any;
+}

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

@@ -0,0 +1,5 @@
+export declare class PdsModalHeader {
+    el: HTMLPdsModalHeaderElement;
+    componentDidRender(): void;
+    render(): any;
+}