@pine-ds/core 3.1.0 → 3.3.0

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

@@ -1,21 +1,41 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
+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
+ */
 export declare class PdsInput {
     private nativeInput?;
     private inheritedAttributes;
     private isComposing;
-    /**
-     * The value of the input when the input is focused.
-     */
+    private prefixEl?;
+    private suffixEl?;
     private focusedValue?;
     private originalPdsInput?;
     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;
     /**
      * 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.
@@ -66,10 +86,30 @@ export declare class PdsInput {
      * Text to be displayed as the input label.
      */
     label?: string;
+    /**
+     * 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.
      */
@@ -82,6 +122,10 @@ export declare class PdsInput {
      * 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'`, `'url'`
@@ -96,6 +140,14 @@ export declare class PdsInput {
      * Determines if the input has focus.
      */
     hasFocus: boolean;
+    private updateAddonWidths;
+    private renderPrefix;
+    private renderSuffix;
+    private renderPrepend;
+    private renderAppend;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
     protected debounceChanged(): void;
     protected valueChanged(): void;
     private getValue;
@@ -110,12 +162,8 @@ export declare class PdsInput {
      */
     private emitValueChange;
     /**
-     *
      * Emits a `pdsInput` event
      */
     private emitInputChange;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    private inputClassNames;
     render(): any;
 }

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

@@ -3,6 +3,10 @@
  * @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 {
+    /**
+     * Sets the link color.
+     */
+    color?: string;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */
@@ -27,5 +31,6 @@ export declare class PdsLink {
      */
     href: string;
     private classNames;
+    private setLinkStyles;
     render(): any;
 }

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

@@ -0,0 +1,25 @@
+declare global {
+    interface HTMLPdsModalContentElement extends HTMLElement {
+        border: 'none' | 'both';
+    }
+}
+export declare class PdsModalContent {
+    el: HTMLPdsModalContentElement;
+    /**
+     * The border style for the content area. Automatically set based on available space of the modal content.
+     * @default 'none'
+     */
+    border: 'none' | 'both' | 'top' | 'bottom';
+    contentMaxHeight: string;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    /**
+     * Calculates the max-height based on header and footer heights
+     */
+    private mutationObserver;
+    /**
+     * 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,3 @@
+export declare class PdsModalFooter {
+    render(): any;
+}

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

@@ -0,0 +1,3 @@
+export declare class PdsModalHeader {
+    render(): any;
+}

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

@@ -0,0 +1,72 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PdsModal {
+    private modalRef;
+    private previousActiveElement;
+    private focusableElements;
+    el: HTMLPdsModalElement;
+    /**
+     * Whether the modal can be dismissed by clicking the backdrop
+     * @default true
+     */
+    backdropDismiss: boolean;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Whether the modal is open
+     * @default false
+     */
+    open: boolean;
+    /**
+     * The size of the modal
+     * @default 'md'
+     */
+    size: 'sm' | 'md' | 'lg' | 'fullscreen';
+    /**
+     * Emitted when the modal is opened
+     */
+    pdsModalOpen: EventEmitter<void>;
+    /**
+     * Emitted when the modal is closed
+     */
+    pdsModalClose: EventEmitter<void>;
+    /**
+     * Stores the list of focusable elements in the modal
+     */
+    focusableElementsArray: HTMLElement[];
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleOpenChange(newValue: boolean): void;
+    /**
+     * Updates the list of focusable elements in the modal
+     */
+    private updateFocusableElements;
+    /**
+     * Sets focus to the first focusable element in the modal
+     */
+    private setInitialFocus;
+    /**
+     * Helper method to focus an element, with special handling for web components
+     */
+    private focusElement;
+    /**
+     * Opens the modal
+     */
+    showModal(): Promise<void>;
+    /**
+     * Closes the modal
+     */
+    hideModal(): Promise<void>;
+    private handleBackdropClick;
+    /**
+     * Gets the z-index of a modal's backdrop element
+     */
+    private getBackdropZIndex;
+    /**
+     * Checks if this modal is the innermost (highest z-index) modal
+     */
+    private isInnermostModal;
+    private handleKeyDown;
+    render(): any;
+}

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

@@ -0,0 +1,63 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+interface HTMLMockPdsModalElement extends HTMLElement {
+    open: boolean;
+    showModal: () => Promise<void>;
+    hideModal: () => Promise<void>;
+    handleBackdropClick: (event: MouseEvent) => void;
+    handleKeyDown: (event: KeyboardEvent) => void;
+}
+/**
+ * Mock PdsModal component for testing purposes
+ * This component mimics the real PdsModal but without using the Popover API
+ */
+export declare class MockPdsModal {
+    el: HTMLMockPdsModalElement;
+    /**
+     * The ID of the modal component
+     */
+    componentId?: string;
+    /**
+     * The size of the modal
+     */
+    size: 'sm' | 'md' | 'lg' | 'fullscreen';
+    /**
+     * Whether the modal can be dismissed by clicking the backdrop
+     */
+    backdropDismiss: boolean;
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Event emitted when the modal is opened
+     */
+    pdsModalOpen: EventEmitter;
+    /**
+     * Event emitted when the modal is closed
+     */
+    pdsModalClose: EventEmitter;
+    /**
+     * Event emitted when the backdrop is clicked
+     */
+    pdsModalBackdropClick: EventEmitter;
+    /**
+     * Shows the modal
+     */
+    showModal(): Promise<void>;
+    /**
+     * Hides the modal
+     */
+    hideModal(): Promise<void>;
+    /**
+     * Listen for click events on the backdrop
+     */
+    handleBackdropClick(event: MouseEvent): void;
+    /**
+     * Listen for keydown events to handle Escape key
+     * Native dialog element always closes on Escape key press
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    componentDidLoad(): void;
+    render(): any;
+}
+export {};

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

@@ -19,6 +19,10 @@ export declare class PdsSelect {
      * Displays error message text describing an invalid state.
      */
     errorMessage: string;
+    /**
+     * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.
+     */
+    hideLabel: boolean;
     /**
      * Displays helper message text below select.
      */

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

@@ -0,0 +1,57 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PdsToast {
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Whether the toast can be dismissed manually via the close button.
+     * Note: This only controls manual dismissal. Auto-dismissal via duration still applies.
+     * @default true
+     */
+    dismissible: boolean;
+    /**
+     * The duration in milliseconds to show the toast before auto-dismissing.
+     * Set to 0 to disable auto-dismiss.
+     * @default 4500
+     */
+    duration: number;
+    /**
+     * The name of the icon to display in the toast.
+     */
+    icon?: string;
+    /**
+     * The type of toast to display.
+     * - default: Grey background (default)
+     * - danger: Red background
+     * - loading: With spinner animation
+     * @default 'default'
+     */
+    type: 'default' | 'danger' | 'loading';
+    /**
+     * Whether the toast is currently visible.
+     */
+    isVisible: boolean;
+    /**
+     * Whether the toast is animating out.
+     */
+    isAnimatingOut: boolean;
+    /**
+     * Timer for auto-dismissal
+     */
+    private dismissTimer?;
+    /**
+     * Event emitted when the toast is dismissed, either manually or automatically.
+     */
+    pdsToastDismissed: EventEmitter<{
+        componentId?: string;
+    }>;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleDurationChange(newDuration: number): void;
+    dismiss(): Promise<void>;
+    private cleanup;
+    private startDismissTimer;
+    private renderIcon;
+    render(): any;
+}

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

@@ -3,7 +3,19 @@
  * @slot content - HTML content for the tooltip
  */
 export declare class PdsTooltip {
-    private contentEl;
+    private static instanceCounter;
+    /**
+     * Internal state: true if the tooltip was opened by user interaction (hover/focus),
+     * false if opened via the `opened` prop or currently closed.
+     */
+    private _isInteractiveOpen;
+    private portalEl;
+    private triggerEl;
+    private contentDiv;
+    private slotMutationObserver;
+    private overlayResizeObserver;
+    private currentPathname;
+    private pathnameCheckInterval;
     /**
      * Reference to the Host element
      */
@@ -46,10 +58,9 @@ export declare class PdsTooltip {
      * @defaultValue false
      */
     opened: boolean;
-    handleOpenToggle(): void;
+    handleOpenToggle(newValue: boolean, oldValue: boolean): void;
     componentWillLoad(): void;
     componentDidLoad(): () => void;
-    componentDidUpdate(): void;
     componentDidRender(): void;
     /**
      * Shows the tooltip by enabling the opened property
@@ -62,5 +73,22 @@ export declare class PdsTooltip {
     private handleHide;
     private handleShow;
     private handlePageShow;
+    private handleScroll;
+    private handleSpaNavigation;
+    private checkPathnameChange;
+    /**
+     * Determines the most accurate HTML element to use as the anchor for positioning the tooltip.
+     * If `htmlContent` is false, it attempts to find the actual element slotted as the trigger.
+     * Otherwise, or if no specific element is found, it defaults to the span wrapper around the trigger slot.
+     * This helps with precise alignment.
+     */
+    private determinePositioningAnchor;
+    /**
+     * Centralized method to calculate and apply the tooltip's position.
+     * Uses the determined anchor element and the current content dimensions.
+     */
+    private repositionPortal;
+    private createPortal;
+    private removePortal;
     render(): any;
 }