@pine-ds/core 5.0.0-mercury.0 → 5.0.0

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

@@ -1,15 +1,99 @@
 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
+ * @part action - Exposes the wrapper around the `action` slot for styling. Appears only when the `action` slot has content.
+ * @part append - Exposes the wrapper around the `append` slot for styling. Appears only when the `append` slot has content.
+ * @part prefix - Exposes the wrapper around the `prefix` slot for styling. Appears only when the `prefix` slot has content.
+ * @part prepend - Exposes the wrapper around the `prepend` slot for styling. Appears only when the `prepend` slot has content.
+ * @part suffix - Exposes the wrapper around the `suffix` slot for styling. Appears only when the `suffix` slot has content.
+ */
 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 user changes the value and then presses `Enter` or leaves the field.
+     * `detail` has `value`, as a string, and `event`, the native event behind it, usually `change`.
+     *
+     * This event will not emit when programmatically setting the `value` property, unless the field has focus at the time;
+     * then it emits when the field loses focus.
+     */
+    pdsChange: EventEmitter<InputChangeEventDetail>;
+    /**
+     * Emitted when the input has focus.
+     */
+    pdsFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted after each `input` event, such as typing or pasting. With `debounce`, it waits until that many milliseconds have passed since the last one.
+     * `detail` has `value`, the current value as a string, and `event`, the native `input` event.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    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 after each input event before emitting `pdsInput`.
+     */
+    debounce?: number;
+    /**
+     * Determines whether or not the input field is disabled.
      */
     disabled?: boolean;
     /**
-     * Specifies the error message and provides an error-themed treatment to the field.
+     * Displays an error message below the input and gives the field error styling. It becomes the input's accessible description only while `invalid` is set.
      */
     errorMessage?: string;
     /**
@@ -17,43 +101,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 is invalid.
      */
     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'`, `'search'`, `'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,105 @@
 /**
- * @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 the slot is empty (whitespace counts as content), 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.
+     * Shows the external-link (launch) icon. Opens in a new tab unless `target` says otherwise.
      * @defaultValue false
      */
     external: boolean;
     /**
-     *
-     * Modifies the look of the link
+     * Accessible label for the icon that `external` shows, appended to the
+     * link's name. It isn't announced when `target` is anything other than
+     * `_blank`. Pass a translated string to localize it; defaults to English. Pass an
+     * empty string to make the icon decorative.
+     * @defaultValue '(opens in a new tab)'
+     */
+    externalLabel?: string;
+    /**
+     * Specifies where to open the linked document. Overrides the new-tab
+     * default of `external`; the icon still shows.
+     * @defaultValue undefined
+     * @example
+     * <pds-link href="/dashboard" target="_top">Opens in the top-level frame</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 the default slot is empty (whitespace counts as content), the href will be used as the link text.
      */
     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,7 +1,12 @@
 /**
- * @slot label - Default slot for Loader label text.
+ * @part loader-svg - Exposes the spinner SVG element for color customization.
+ * @slot label - Label text. Defaults to "Loading...". Text outside this slot isn't shown or read.
  */
 export declare class PdsLoader {
+    el: HTMLPdsLoaderElement;
+    private hostKeeper;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     /**
      * If false, the loader will be hidden.
      */
@@ -11,14 +16,16 @@ export declare class PdsLoader {
      */
     showLabel?: boolean;
     /**
-     * Sets the size of the spinner loader. Value can be preset or custom.
+     * Sets the size of the spinner loader: `xs` (24px), `sm` (32px), `md` (48px), `lg` (64px), `xl` (80px),
+     * or a custom CSS length such as `128px`. The `typing` variant ignores it.
      */
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | string;
     /**
      * Determines the type of loader.
      */
     variant: 'spinner' | 'typing';
+    restoreSizeDefault(newValue: typeof this.size): void;
     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,43 @@
+/**
+ * @lightDom renders-markup
+ */
+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;
+    private hasLoaded;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    connectedCallback(): 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,9 @@
+/**
+ * Holds the modal's actions. It adds no padding or layout, so wrap its content in a `pds-box` with `padding="md"`.
+ * @lightDom renders-markup
+ */
+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,9 @@
+/**
+ * Holds the modal's title and close control. It adds no padding or layout, so wrap its content in a `pds-box` with `padding="md"`.
+ * @lightDom renders-markup
+ */
+export declare class PdsModalHeader {
+    el: HTMLPdsModalHeaderElement;
+    componentDidRender(): void;
+    render(): any;
+}

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

@@ -0,0 +1,152 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { ModalSizeType } from "../../utils/types";
+/**
+ * @lightDom renders-markup
+ * @part modal - The panel inside the dialog that holds the modal's content. `pds-modal` has no shadow root, so `::part(modal)` doesn't match it; select it with `pds-modal [part="modal"]` instead.
+ */
+export declare class PdsModal {
+    private modalRef;
+    private previousActiveElement;
+    private focusableElements;
+    el: HTMLPdsModalElement;
+    /**
+     * Whether the modal can be dismissed by clicking the backdrop, pressing Escape, or the browser's
+     * own close request (such as a back gesture)
+     * @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. Can be a predefined value ('sm', 'md', 'lg', 'fullscreen') or a custom
+     * max-width as a CSS length (e.g., '1250px', '80vw'). A custom width stays fluid below that size.
+     * A value that is neither falls back to 'md'.
+     * @default 'md'
+     */
+    size: ModalSizeType | (string & Record<never, never>);
+    /**
+     * Whether the modal content should be scrollable
+     * @default true
+     */
+    scrollable: boolean;
+    /**
+     * Whether the modal opens outside the browser top layer as a non-modal dialog.
+     * When `true` it opens with `dialog.show()` instead of `dialog.showModal()`, so
+     * overlays rendered elsewhere in the DOM (file pickers, editor menus) can display
+     * above it via `z-index`. The page is not made inert and focus is not trapped in
+     * this mode. Read when the modal opens; changing it while the modal is open is
+     * not supported.
+     * @default false
+     */
+    disableTopLayer: boolean;
+    /**
+     * Whether to skip moving focus into the modal when it opens. Set it for a
+     * modal that can open from a background event while the user is mid-task
+     * elsewhere on the page, where moving focus would interrupt them. Pair it
+     * with `disableTopLayer`: in the top layer the rest of the page is inert, so
+     * focus can't stay there. On close, focus moves back only if nothing outside
+     * the modal has taken it.
+     * @default false
+     */
+    disableInitialFocus: boolean;
+    /**
+     * 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[];
+    componentWillLoad(): void;
+    sizeChanged(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    connectedCallback(): 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;
+    /**
+     * Focuses an element from the list. It holds the controls themselves, inside any shadow root,
+     * so they take focus directly.
+     */
+    private focusElement;
+    /**
+     * Opens the modal
+     */
+    showModal(): Promise<void>;
+    /**
+     * Closes the modal
+     */
+    hideModal(): Promise<void>;
+    /**
+     * Focuses the first control of the open modal now on top, when the page behind it is inert: that
+     * modal is in the top layer (or paints there inside a top-layer one), or it wraps this one. A
+     * non-modal one over an interactive page, like a drawer, is left alone.
+     */
+    private focusTopModal;
+    private handleCancel;
+    private handleBackdropClick;
+    /**
+     * Gets the z-index of a modal's backdrop element
+     */
+    private getBackdropZIndex;
+    /**
+     * Whether `active` sits inside a surface actually stacked above this modal.
+     *
+     * Used to decide whether an Escape keypress belongs to that surface instead
+     * of this modal. Focus being merely *outside* this modal is not enough on
+     * its own: in `disableTopLayer` mode the page stays interactive (that's the
+     * point of a non-modal usage like a drawer), so focus will routinely be on
+     * ordinary page content while the modal is open, and that must not be
+     * mistaken for "an overlay owns Escape."
+     *
+     * Two ways a surface can be above: it is itself promoted to the browser's
+     * top layer (a regular `showModal()` dialog, which paints above everything
+     * outside the top layer regardless of z-index — a sibling pds-modal opened
+     * over a `disableTopLayer` drawer typically shares the exact same z-index
+     * token, so a numeric comparison alone would miss it), or it has a higher
+     * z-index than this modal's own backdrop (a `disableTopLayer` overlay, or
+     * anything else deliberately raised above it).
+     *
+     * `topLayerDialog` / `topLayerDialogWasModal` come pre-snapshotted from the
+     * keydown event (see handleKeyDown) rather than being re-derived here: by
+     * the time a later sibling modal's listener runs, an earlier one may have
+     * already closed itself, which clears `:modal` — reading it live here would
+     * lose that evidence depending on listener order.
+     */
+    private isStackedAboveOverlay;
+    /**
+     * The open modal that takes Escape or a backdrop click, among those with no other open modal
+     * inside them (a nested modal's backdrop can share its outer modal's z-index). A top-layer dialog
+     * (or a modal inside one) paints above anything outside it, and within the top layer the last
+     * opened is on top. Modals in the same layer (the page, or one top-layer dialog) then rank by
+     * the highest backdrop, then the one later in the page.
+     */
+    private innermostOpenModal;
+    /** Whether a modal dialog other than this one sits between the focused element and this modal. */
+    private modalDialogAbove;
+    /** The focused element's place in the list: its own stop, or the innermost stop it sits in. */
+    private stopIndex;
+    private handleKeyDown;
+    private resolveSize;
+    private warnOnInvalidSize;
+    render(): any;
+}

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

@@ -0,0 +1,68 @@
+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 content should be scrollable
+     * @default true
+     */
+    scrollable: boolean;
+    /**
+     * Whether the modal can be dismissed by clicking the backdrop or pressing Escape
+     */
+    backdropDismiss: boolean;
+    /**
+     * Whether the modal is open
+     */
+    open: boolean;
+    /**
+     * Event emitted when the modal is opened
+     */
+    pdsModalOpen: EventEmitter<void>;
+    /**
+     * Event emitted when the modal is closed
+     */
+    pdsModalClose: EventEmitter<void>;
+    /**
+     * Event emitted when the backdrop is clicked
+     */
+    pdsModalBackdropClick: EventEmitter<void>;
+    /**
+     * 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
+     * Should only close on Escape if backdropDismiss is enabled
+     */
+    handleKeyDown(event: KeyboardEvent): void;
+    componentDidLoad(): void;
+    render(): any;
+}
+export {};