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

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

@@ -1,8 +1,13 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class PdsTable {
     el: HTMLPdsTableElement;
+    private scrollContainer;
+    private _responsiveHandleScroll;
+    private _responsiveHandleResize;
+    private _responsiveResizeObserver;
+    private _teardownResponsive;
     /**
-     * Determines if table displays compact which reduces the spacing of table cells.
+     * Determines if the table displays with reduced table cell padding.
      */
     compact: boolean;
     /**
@@ -14,29 +19,76 @@ export declare class PdsTable {
      */
     responsive: boolean;
     /**
-     * Determines if table displays fixed column which fixes the first column of the table.
+     * Determines if the should display a fixed first column.
      */
     fixedColumn: boolean;
     /**
-     * Determines if table displays checkboxes for selectable rows.
+     * Determines if the table displays checkboxes for selectable rows.
      */
     selectable: boolean;
+    /**
+     * Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.
+     * Only applies when `selectable` is true.
+     * @defaultValue false
+     */
+    disableSelectAll: boolean;
+    /**
+     * Adds divider borders between table rows. The last row will not have a bottom border.
+     * @defaultValue false
+     */
+    rowDividers: boolean;
+    /**
+     * The name of the column to sort by on initial load.
+     * Must match the text content of a sortable column header.
+     */
+    defaultSortColumn?: string;
+    /**
+     * The direction to sort the default column on initial load.
+     * Only applies if `defaultSortColumn` is set.
+     * @defaultValue 'asc'
+     */
+    defaultSortDirection?: 'asc' | 'desc';
+    /**
+     * The name of the column being sorted.
+     * @defaultValue null
+     */
     sortingColumn: string | null;
-    sortingDirection: 'asc' | 'desc';
     /**
-     * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.
+     * The direction of sorting.
+     * @defaultValue 'asc'
      */
-    pdsTableSelect: EventEmitter<{
-        rowIndex: number;
-        isSelected: boolean;
-    }>;
+    sortingDirection: 'asc' | 'desc';
     /**
      * Event that is emitted when the select all checkbox is clicked, carrying the selected value.
      */
     pdsTableSelectAll: EventEmitter<{
         isSelected: boolean;
     }>;
-    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Applies the default sort configuration on initial load.
+     * Finds the matching column header and activates its sort state.
+     * @private
+     */
+    private applyDefaultSort;
+    disconnectedCallback(): void;
+    /**
+     * Sets up responsive scrolling behavior for the table.
+     *
+     * This method creates a horizontal scrolling system where:
+     * - The table content can scroll horizontally when it exceeds the container width
+     * - Scroll shadows appear at the inline-start/end edges to indicate scrollable content
+     * - Fixed columns remain sticky during horizontal scrolling
+     * - Shadows respect border-radius and don't appear when there's nothing to scroll
+     *
+     * Architecture:
+     * - Host element: Contains everything, respects parent constraints
+     * - Container element: Handles horizontal scrolling (overflow-x: auto)
+     * - Shadow elements: Positioned fixed relative to host, show scroll indicators
+     *
+     * @private
+     */
+    private setupResponsiveScrolling;
     private classNames;
     private sortTable;
     handleTableSort(event: CustomEvent<{

package/dist/types/components/pds-tabs/pds-tab/pds-tab.d.ts

@@ -1,6 +1,44 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class PdsTab {
     el: HTMLPdsTabElement;
+    componentDidRender(): void;
+    /**
+     * Determines the tab's disabled state.
+     * @defaultValue false
+     */
+    disabled?: boolean;
+    /**
+     * Turns the tab into a navigation link to this URL. When set, the tab renders
+     * an `<a href>` (marked `aria-current="page"` when `active`) instead of a
+     * `role="tab"` button, so each tab is its own page/URL — for tab strips that
+     * navigate rather than switch in-page panels. Pairs with `pds-tabs` navigation
+     * mode; no `pds-tabpanel`s are needed. Apply `href` to all tabs in a
+     * `pds-tabs` or none — mixing navigation and panel tabs is not supported.
+     */
+    href?: string;
+    /**
+     * Marks this tab as the current one in navigation mode (`href` set). Applies
+     * the active treatment and `aria-current="page"`. Ignored in panel mode, where
+     * the active tab is derived from the parent's `activeTabName`.
+     * @defaultValue false
+     */
+    active?: boolean;
+    /**
+     * Where to open the linked URL, in navigation mode. Maps to the anchor's
+     * `target` attribute.
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    /**
+     * Navigation mode: the Turbo Frame to target. Maps to `data-turbo-frame` on the
+     * anchor, so a tab can swap a single frame (e.g. a page body) while leaving the
+     * rest of the page in place.
+     */
+    turboFrame?: string;
+    /**
+     * Navigation mode: the Turbo visit action. Maps to `data-turbo-action` on the
+     * anchor (`advance` gives each tab its own history entry).
+     */
+    turboAction?: 'advance' | 'replace';
     /**
      * Sets the related tab name, this name must match a `pds-tabpanel`'s tab name property
      */
@@ -25,11 +63,22 @@ export declare class PdsTab {
      */
     /** @internal */
     selected: boolean;
+    /**
+     * Set by the parent `pds-tabs` to force navigation vs panel rendering, so tabs
+     * present when the strip initializes share one mode. Standalone (no parent), the
+     * tab falls back to whether it has an `href`.
+     */
+    /** @internal */
+    navMode?: boolean;
     /**
      * Emits an event upon tab click for `pds-tab` and `pds-tabpanel` to listen for
      */
     /** @internal */
     pdsTabClick: EventEmitter<object>;
     private onTabClick;
+    private get hasHref();
+    private get isNav();
+    private get isActive();
+    private classNames;
     render(): any;
 }

package/dist/types/components/pds-tabs/pds-tabpanel/pds-tabpanel.d.ts

@@ -1,5 +1,6 @@
 export declare class PdsTabpanel {
     el: HTMLPdsTabpanelElement;
+    componentDidRender(): void;
     /**
      * Sets the related tab name, this name must match a `pds-tab`'s tab name property
      */
@@ -19,5 +20,10 @@ export declare class PdsTabpanel {
      */
     /** @internal */
     selected: boolean;
+    /**
+     * Keeps track of the parent `stretch` state so the active panel can fill height, this property is passed by parent component
+     */
+    /** @internal */
+    stretch: boolean;
     render(): any;
 }

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

@@ -1,6 +1,7 @@
 /**
 * @slot tabs - Content is placed within the `div[role="tablist"]` element as children
 * @slot tabpanels - Content is placed directly after the `div[role="tablist"]` element as siblings
+* @part tab-list - Exposes the container element that holds all the tab buttons for styling.
 */
 export declare class PdsTabs {
     private tabs;
@@ -17,11 +18,32 @@ export declare class PdsTabs {
     /**
      * Sets tabs variant styles as outlined in Figma documentation
      */
-    variant: 'primary' | 'availability' | 'filter';
+    variant: 'primary' | 'availability' | 'filter' | 'pill';
     /**
-     * Sets the starting active tab name and maintains the name as the component re-renders
+     * Adds a divider rule beneath the tab list.
+     * @defaultValue false
      */
-    activeTabName: string;
+    divider?: boolean;
+    /**
+     * Stretches the component so the active tab panel fills the remaining height.
+     * Requires the component to have a constrained height (e.g. a flex parent).
+     * @defaultValue false
+     */
+    stretch?: boolean;
+    /**
+     * Renders the tab strip as navigation instead of an in-page panel switcher: each
+     * `pds-tab` becomes an `<a href>` inside a `<nav>` landmark (with `aria-current`
+     * on the `active` tab) rather than a `role="tab"` button over a `pds-tabpanel`.
+     * Give every `pds-tab` an `href` and omit `pds-tabpanel`s.
+     * @defaultValue false
+     */
+    nav?: boolean;
+    /**
+     * Sets the starting active tab name and maintains the name as the component re-renders.
+     * Panel mode only — in navigation mode (`nav`) the active tab is set per-tab via
+     * `active`, so this is not required there.
+     */
+    activeTabName?: string;
     /**
      * Sets the starting active tab index number and maintains the index number as the component re-renders
      */
@@ -29,6 +51,8 @@ export declare class PdsTabs {
     activeTabIndex: number;
     tabClickHandler(event: CustomEvent<any>): void;
     handleKeyDown(ev: KeyboardEvent): void;
+    private get isNav();
+    private warnOnNavConfig;
     private moveActiveTab;
     private findAllChildren;
     private propGeneration;

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

@@ -0,0 +1,55 @@
+import { TextSizeType } from '../../utils/types';
+/**
+ * @part content - The text content container
+ */
+export declare class PdsText {
+    el: HTMLPdsTextElement;
+    private contentEl;
+    private truncationCleanup;
+    /**
+     * Sets the text alignment.
+     */
+    align?: 'start' | 'center' | 'end' | 'justify';
+    /**
+     * Sets the text color.
+     */
+    color?: string;
+    /**
+     * Sets the text decoration.
+     */
+    decoration?: 'strikethrough' | 'underline-dotted';
+    /**
+     * Set the bottom margin for the text.
+     */
+    gutter?: '2xl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs' | '2xs';
+    /**
+     * If set or `true`, the text will be italic.
+     */
+    italic?: boolean;
+    /**
+     * Sets the font size.
+     */
+    size?: TextSizeType;
+    /**
+     * Sets the font weight.
+     */
+    weight?: 'extra-light' | 'light' | 'regular' | 'medium' | 'semibold' | 'bold';
+    /**
+     * Determines what semantic text tag to render.
+     */
+    tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'code' | 'pre' | 'strong' | 'em';
+    /**
+     * If set or `true`, the text will be truncated. Must add a `width` to the element.
+     * When text overflows, a tooltip showing the full text will appear on hover/focus.
+     * Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
+     */
+    truncate?: boolean;
+    handleTruncateChange(newValue: boolean): void;
+    validateSize(newValue?: string): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private initTruncationTooltip;
+    private destroyTruncationTooltip;
+    render(): any;
+}

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

@@ -1,64 +1,187 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { TextareaChangeEventDetail } from './textarea-interface';
+import { TextareaChangeEventDetail, TextareaInputEventDetail } from './textarea-interface';
+/**
+ * @slot action - Content to be displayed in the label area, typically for help icons or links
+ */
 export declare class PdsTextarea {
+    private nativeTextarea?;
+    private focusedValue?;
+    private inheritedAttributes;
+    private originalPdsInput?;
+    private internals?;
+    private resizeObserver?;
+    private characterCounter?;
+    private readonly _type;
     el: HTMLPdsTextareaElement;
+    /**
+     * Emitted when the input loses focus.
+     */
+    pdsBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the input has focus.
+     */
+    pdsFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when a keyboard input occurs.
+     *
+     * For elements that accept text input (`type=text`, `type=tel`, etc.), the interface
+     * is [`InputEvent`](https://developer.mozilla.org/en-US/docs/Web/API/InputEvent); for others,
+     * the interface is [`Event`](https://developer.mozilla.org/en-US/docs/Web/API/Event). If
+     * the input is cleared on edit, the type is `null`.
+     */
+    pdsInput: EventEmitter<TextareaInputEventDetail>;
+    /**
+     * Event emitted whenever the value of the textarea changes.
+     *
+     * This event will not emit when programmatically setting the `value` property.
+     */
+    pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;
+    /**
+     * Emitted when a key is pressed down in the textarea.
+     */
+    pdsKeyDown: EventEmitter<KeyboardEvent>;
+    /**
+     * Sets focus on the native `textarea` in the `pds-textarea`. Use this method instead of the global
+     * `textarea.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 textarea is disabled
+     * Determines whether or not the textarea is disabled.
      * @defaultValue false
      */
     disabled: boolean;
     /**
-     * Specifies the error text and provides an error-themed treatment to the field
+     * The amount of time, in milliseconds, to wait to trigger the event after each keystroke.
+     */
+    debounce?: number;
+    /**
+     * Displays an error message below the textarea field.
      */
     errorMessage?: string;
     /**
-     * Displays a hint or description of the textarea
+     * Displays a message or hint below the textarea field.
      */
     helperMessage?: string;
     /**
-     * Indicates whether or not the textarea is invalid or throws an error
+     * Determines whether or not the textarea is invalid or throws an error.
      * @defaultValue false
      */
     invalid: boolean;
     /**
-     * Text to be displayed as the textarea label
+     * Text to be displayed as the textarea label.
      */
     label?: string;
     /**
-     * Specifies the name, submitted with the form name/value pair. This value will mirror the componentId
+     * Visually hides the label text for instances where only the textarea 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 name. Submitted with the form name/value pair. This value will mirror the componentId.
      */
     name: string;
     /**
-     * Specifies a short hint that describes the expected value of the textarea
+     * Specifies a short hint that describes the expected value of the textarea.
      */
     placeholder?: string;
     /**
-     * Indicates whether or not the textarea is readonly
+     * Determines whether or not the textarea is readonly.
      * @defaultValue false
      */
     readonly: boolean;
     /**
-     * Indicates whether or not the textarea is required
+     * Determines whether or not the textarea is required.
      * @defaultValue false
      */
     required: boolean;
     /**
-     * Sets number of rows of text visible without needing to scroll in the textarea
+     * Sets number of rows of text visible without needing to scroll in the textarea.
      */
     rows?: number;
     /**
-     * The value of the textarea
+     * Specifies the maximum number of characters allowed in the textarea. When set, displays a character counter.
      */
-    value?: string;
+    maxLength?: number;
     /**
-     * Event emitted whenever the value of the textarea changes
+     * Applies highlight styling to the textarea field.
      */
-    pdsTextareaChange: EventEmitter<TextareaChangeEventDetail>;
+    highlight?: boolean;
+    /**
+     * The value of the textarea.
+     */
+    value?: string | null;
+    hasFocus: boolean;
+    /**
+     * If true, the textarea has action content in the label area
+     */
+    hasAction: boolean;
+    /**
+     * Template for the character-counter's accessible label. Pass a translated
+     * string to localize it; `{current}` and `{max}` are interpolated.
+     * @defaultValue '{current} of {max} characters'
+     */
+    characterCountLabel: string;
+    protected debounceChanged(): void;
+    /**
+     * Update the native input element when the value changes
+     */
+    protected valueChanged(): void;
+    protected maxLengthChanged(): void;
+    /**
+     * Emits an `pdsInput` event.
+     */
+    private emitInputChange;
+    /**
+     * Emits an `pdsTextareaChange` event.
+     */
+    private emitValueChange;
+    private getValue;
+    private onBlur;
+    private onFocus;
+    private onInput;
     private onTextareaChange;
+    private onKeyDown;
     private textareaClassNames;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Sets up ResizeObserver to track textarea resize for character counter positioning
+     */
+    private setupResizeObserver;
+    /**
+     * Updates character counter position to stay within textarea boundaries during resize
+     */
+    private updateCharacterCounterPosition;
+    /**
+     * Renders the character counter when maxLength is set
+     */
+    private renderCharacterCounter;
+    private renderAction;
+    /**
+     * 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-textarea/textarea-interface.d.ts

@@ -1,6 +1,10 @@
 export interface TextareaChangeEventDetail {
     event?: Event;
-    value: string | null;
+    value?: string | null;
+}
+export interface TextareaInputEventDetail {
+    event?: Event;
+    value?: string | null;
 }
 export interface TextareaEvent<T = TextareaChangeEventDetail> extends CustomEvent {
     detail: T;

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

@@ -0,0 +1,70 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @part dismiss
+ */
+export declare class PdsToast {
+    el: HTMLPdsToastElement;
+    /**
+     * 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';
+    /**
+     * Accessible label for the dismiss button. Pass a translated string to
+     * localize it; defaults to English.
+     * @defaultValue 'Dismiss message'
+     */
+    dismissLabel: string;
+    /**
+     * 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 waitForDismissAnimation;
+    private getDismissAnimationDurationMs;
+    private parseCssDurationToMs;
+    private cleanup;
+    private startDismissTimer;
+    private renderIcon;
+    render(): any;
+}

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

@@ -1,19 +1,27 @@
-import { EventEmitter } from '../../stencil-public-runtime';
+import { PlacementType } from "../../utils/types";
 /**
  * @slot (default) - The tooltip's target element
  * @slot content - HTML content for the tooltip
  */
 export declare class PdsTooltip {
-    private contentEl;
+    private static instanceCounter;
     /**
-     * Reference to the Host element
+     * Internal state: true if the tooltip was opened by user interaction (hover/focus),
+     * false if opened via the `opened` prop or currently closed.
      */
-    el: HTMLPdsTooltipElement;
+    private _isInteractiveOpen;
+    private portalEl;
+    private resolvedPlacement;
+    private triggerEl;
+    private contentDiv;
+    private slotMutationObserver;
+    private currentPathname;
+    private pathnameCheckInterval;
+    private stopAutoUpdate;
     /**
-     * Determines when the tooltip is open
-     * @defaultValue false
+     * Reference to the Host element
      */
-    isOpen: boolean;
+    el: HTMLPdsTooltipElement;
     /**
      * Content for the tooltip. If HTML is required, use the content slot
      */
@@ -26,7 +34,7 @@ export declare class PdsTooltip {
      * Determines whether or not the tooltip has an arrow
      * @defaultValue true
      */
-    hasArrow?: boolean;
+    hasArrow: boolean;
     /**
      * Enable this option when using the content slot
      * @defaultValue false
@@ -36,23 +44,24 @@ export declare class PdsTooltip {
      * Determines the preferred position of the tooltip
      * @defaultValue "right"
      */
-    placement: 'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end';
+    placement: PlacementType;
+    /**
+     * Sets the maximum width of the tooltip content
+     * @defaultValue "352px"
+     */
+    maxWidth: string;
     /**
      * Determines whether or not the tooltip is visible
      * @defaultValue false
      */
     opened: boolean;
-    handleOpenToggle(): void;
-    /**
-     * Emitted after a tooltip is closed
-     */
-    pdsTooltipHide: EventEmitter;
-    /**
-     * Emitted after a tooltip is shown
-     */
-    pdsTooltipShow: EventEmitter;
+    handleOpenToggle(newValue: boolean, oldValue: boolean): void;
     componentWillLoad(): void;
-    componentDidUpdate(): void;
+    componentDidLoad(): void;
+    private hasCheckedReconnect;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private unwrapReconnectedSlots;
     componentDidRender(): void;
     /**
      * Shows the tooltip by enabling the opened property
@@ -64,5 +73,22 @@ export declare class PdsTooltip {
     hideTooltip(): Promise<void>;
     private handleHide;
     private handleShow;
+    private handlePageShow;
+    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 using floating UI.
+     * Uses the determined anchor element and applies computePosition with flip, offset, and shift.
+     */
+    private repositionPortal;
+    private createPortal;
+    private removePortal;
     render(): any;
 }