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

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

@@ -0,0 +1,4 @@
+export interface PdsPopoverEventDetail {
+    componentId: string;
+    popoverType: 'auto' | 'manual';
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @slot (default) - The property text content.
+ */
+export declare class PdsProperty {
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * The name of the icon to display before the property text.
+     */
+    icon: string;
+    render(): any;
+}

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

@@ -1,36 +1,52 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot image - Custom image content to display instead of the default radio input
+ * @part image-container - The container for the image
+ */
 export declare class PdsRadio {
+    private readonly _type;
+    el: HTMLPdsRadioElement;
+    private _hasImage;
     /**
      * Determines whether or not the radio is checked.
      * @defaultValue false
      */
     checked: boolean;
+    /**
+     * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
+     */
+    componentId: string;
     /**
      * Determines whether or not the radio is disabled.
      * @defaultValue false
      */
     disabled: boolean;
     /**
-     * Displays message text describing an invalid state.
+     * Displays error message text describing an invalid state.
      */
     errorMessage: string;
     /**
-     * Determines whether or not the radio is invalid.
-     * @defaultValue false
+     * Displays helper message text below radio.
      */
-    invalid: boolean;
+    helperMessage: string;
     /**
-     * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
+     * Adds a border around the radio component for better visual separation.
+     * @defaultValue false
      */
-    componentId: string;
+    hasBorder: boolean;
+    /**
+   * Determines whether or not the radio is invalid.
+   * @defaultValue false
+   */
+    invalid: boolean;
     /**
      * String used for label text next to radio.
      */
     label: string;
     /**
-     * String used for helper message below radio.
+     * Visually hides the label text for instances where only the radio should be displayed. Label remains accessible to assistive technology such as screen readers.
      */
-    helperMessage: string;
+    hideLabel: boolean;
     /**
      * String used for radio `name` attribute.
      */
@@ -45,10 +61,15 @@ export declare class PdsRadio {
      */
     value: string;
     /**
-     * Emits a boolean indicating whether the checkbox is currently checked or unchecked.
+     * Emits a boolean indicating whether the radio is currently checked or unchecked.
      */
     pdsRadioChange: EventEmitter<boolean>;
     private handleRadioChange;
+    private hasImageSlot;
+    private hasImage;
     private classNames;
+    componentWillLoad(): void;
+    connectedCallback(): void;
+    componentDidRender(): void;
     render(): any;
 }

package/dist/types/components/pds-radio-group/pds-radio-group.d.ts

@@ -0,0 +1,73 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { RadioGroupChangeEventDetail } from './radio-group-interface';
+/**
+ * @slot (default) - Child pds-radio components
+ */
+export declare class PdsRadioGroup {
+    el: HTMLPdsRadioGroupElement;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Stable group ID generated once during component initialization.
+     * Used to maintain DOM stability and accessibility relationships across re-renders.
+     */
+    private _groupId;
+    /**
+     * Layout direction for the radio group.
+     * @defaultValue column
+     */
+    direction: 'row' | 'column';
+    /**
+     * Displays error message text describing an invalid state for the entire group.
+     */
+    errorMessage: string;
+    /**
+     * Displays helper message text below the radio group.
+     */
+    helperMessage: string;
+    /**
+     * Spacing between radio items. Accepts t-shirt sizes (none, xxs, xs, sm, md, lg, xl, xxl) or core spacing tokens (025, 050, 100, etc.).
+     * @defaultValue xs
+     */
+    gap: string;
+    /**
+     * Determines whether or not the radio group is disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Determines whether or not the radio group is invalid.
+     * @defaultValue false
+     */
+    invalid: boolean;
+    /**
+     * String used for group label/heading.
+     */
+    groupLabel: string;
+    /**
+     * String used for radio `name` attribute. Applied to all child radios.
+     * Required for proper radio group behavior (mutual exclusivity and form submission).
+     */
+    name: string;
+    /**
+     * Determines whether or not the radio group is required.
+     * @defaultValue false
+     */
+    required: boolean;
+    /**
+     * Emits when a radio in the group is selected, providing the selected value and component ID.
+     */
+    pdsRadioGroupChange: EventEmitter<RadioGroupChangeEventDetail>;
+    handlePropsChange(): void;
+    handleRadioChange(event: Event): void;
+    private updateChildRadios;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidRender(): void;
+    private classNames;
+    private getGapValue;
+    private getAriaDescribedBy;
+    render(): any;
+}

package/dist/types/components/pds-radio-group/radio-group-interface.d.ts

@@ -0,0 +1,5 @@
+export interface RadioGroupChangeEventDetail {
+    checked: boolean;
+    value?: string;
+    componentId?: string;
+}

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

@@ -1,4 +1,4 @@
-import { BoxTShirtSizeType } from '../../utils/types';
+import { BoxSpacingType } from '../../utils/types';
 export declare class PdsRow {
     /**
      * Defines the vertical alignment of the row items.
@@ -12,7 +12,15 @@ export declare class PdsRow {
     /**
      * Defines the spacing between the row items.
      */
-    colGap?: BoxTShirtSizeType | null;
+    colGap?: BoxSpacingType | null;
+    /**
+     * Defines the spacing between the row items vertically.
+     */
+    colGapBlock?: BoxSpacingType | null;
+    /**
+     * Defines the spacing between the row items horizontally.
+     */
+    colGapInline?: BoxSpacingType | null;
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */

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

@@ -0,0 +1,146 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot action - Content to be displayed in the label area, typically for help icons or links
+ */
+export declare class PdsSelect {
+    private selectEl;
+    private slotContainer;
+    private internals?;
+    private _type;
+    el: HTMLPdsSelectElement;
+    /**
+     * 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 select field is disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
+    /**
+     * Displays error message text describing an invalid state.
+     */
+    errorMessage: string;
+    /**
+     * Visually hides the label text for instances where only the select 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;
+    /**
+     * Displays helper message text below select.
+     */
+    helperMessage: string;
+    /**
+     * Determines whether or not the select is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * Text to be displayed as the select label.
+     */
+    label?: string;
+    /**
+     * Indicates whether multiple options can be selected.
+     * @defaultValue false
+     */
+    multiple: boolean;
+    /**
+     * Specifies the name. Submitted with the form name/value pair.
+     */
+    name: string;
+    /**
+     * Indicates whether or not the select field is required.
+     * @defaultValue false
+     */
+    required: boolean;
+    /**
+     * Applies highlight styling to the select field.
+     */
+    highlight?: boolean;
+    /**
+     * The value(s) of the selected option(s).
+     *
+     */
+    value?: string | string[];
+    /**
+     * Emitted when the select value changes.
+     */
+    pdsSelectChange: EventEmitter<InputEvent>;
+    /**
+     * Emitted when the select loses focus.
+     */
+    pdsBlur: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when the select gains focus.
+     */
+    pdsFocus: EventEmitter<FocusEvent>;
+    /**
+     * Emitted when a key is pressed down in the select.
+     */
+    pdsKeyDown: EventEmitter<KeyboardEvent>;
+    /**
+     * Handles the change in the value of the select component.
+     * This method is called whenever the value of the select component changes.
+     * It updates the selected option accordingly.
+     */
+    valueChanged(): void;
+    /**
+     * Updates the type property when multiple changes to match native select behavior.
+     */
+    multipleChanged(): void;
+    private updateType;
+    connectedCallback(): void;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    /**
+     * Updates the selected option in the select element based on the current value.
+     *
+     * This method iterates through all the options of the select element and sets the
+     * 'selected' attribute on the option that matches the current value. If an option
+     * does not match the current value, the 'selected' attribute is removed.
+     *
+     * @private
+     * @returns {void}
+     */
+    private updateSelectedOption;
+    /**
+     * Emits an event on input change.
+    */
+    private onSelectUpdate;
+    private onBlur;
+    private onFocus;
+    private onKeyDown;
+    /**
+     * Handles the change event for the slot element.
+     * This method is triggered when the slot content changes.
+     * It updates the inner HTML of the select element by cloning and appending
+     * the assigned <option> elements from the slot.
+     */
+    private handleSlotChange;
+    private getHelperMessage;
+    private getErrorMessage;
+    private renderMessages;
+    private isInvalid;
+    private classNames;
+    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-sortable/pds-sortable-item/pds-sortable-item.d.ts

@@ -18,6 +18,7 @@ export declare class PdsSortableItem {
      * @defaultValue false
      */
     showHandle: boolean;
+    componentDidRender(): void;
     componentWillRender(): void;
     render(): any;
 }

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

@@ -1,27 +1,35 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { SortableEvent } from 'sortablejs';
 export declare class PdsSortable {
     el: HTMLPdsSortableElement;
     /**
      * Event emitted when a sortable item is moved.
      */
-    pdsSortableItemMoved: EventEmitter;
+    pdsSortableItemMoved: EventEmitter<SortableEvent>;
     /**
      * Determines whether `sortable` should have a border.
      * @defaultValue false
      */
     border: boolean;
+    /**
+     * Determines whether or not the sortable is disabled.
+     * @defaultValue false
+     */
+    disabled: boolean;
     /**
      * A unique identifier used for the sortable container `id` attribute.
      */
     componentId: string;
     /**
-     * Deternines whether `sortable` items should be divided with border.
+     * Determines whether `sortable` items should be divided with border.
      */
     dividers: boolean;
     /**
      * Determines the grabbable area for the `pds-sortable-item`.
      */
     handleType: 'handle' | 'row';
+    private sortableInstance;
+    handleDisabledChange(): void;
     private classNames;
     componentDidLoad(): void;
     render(): any;

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

@@ -1,7 +1,9 @@
+import type { SortableEvent } from 'sortablejs';
 export interface SortableType {
     animation: number;
+    disabled: boolean;
     ghostClass: string;
     dragClass: string;
-    onEnd: (evt: Event) => void;
+    onEnd: (evt: SortableEvent) => void;
     handle?: string;
 }

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

@@ -1,59 +1,64 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class PdsSwitch {
+    private inheritedAttributes;
+    private internals?;
+    private readonly _type;
     el: HTMLPdsSwitchElement;
     /**
      * A unique identifier used for the underlying component `id` attribute and the label `for` attribute.
      */
     componentId: string;
     /**
-     * Determines the input 'checked' state
+     * Determines the input 'checked' state.
      */
     checked: boolean;
     /**
-     * Determines the input 'disabled' state, preventing user interaction
+     * Determines the input 'disabled' state, preventing user interaction.
      */
     disabled?: boolean;
     /**
-     * Displays message text describing an invalid state
+     * Displays message text describing an invalid state.
      */
     errorMessage?: string;
     /**
-     * Displays help text for additional description of an input
+     * Visually hides the label text for instances where only the switch should be displayed. Label remains accessible to assistive technology such as screen readers.
+     */
+    hideLabel: boolean;
+    /**
+     * Displays help text for additional description of an input.
      */
     helperMessage: string;
     /**
-     * Determines the input 'invalid' state, signifying an error is present
+     * Determines the input 'invalid' state, signifying an error is present.
      */
     invalid?: boolean;
     /**
-     * Displays text to describe the input
+     * Displays text to describe the input.
      */
     label: string;
     /**
-     * Identifies form data and unifies a group of radio inputs for toggling a single property/value
+     * Identifies form data and unifies a group of radio inputs for toggling a single property/value.
      */
     name: string;
     /**
-     * Determines the 'required' state of the input
+     * Determines the 'required' state of the input.
      */
     required?: boolean;
     /**
-     * Specifies the underlying input element type
-     * @defaultValue 'checkbox'
-     */
-    type: 'checkbox' | 'radio';
-    /**
-     * Provides input with a string submitted in form data, and can be used to distinguish radio inputs
+     * Provides input with a string submitted in form data.
      */
     value: string;
     /**
-     * Emits an event on input change
-    */
+     * Emits an event on input change.
+     */
     pdsSwitchChange: EventEmitter<InputEvent>;
     private onSwitchUpdate;
-    /**
-     * Generate switch classes
-     */
     private switchClassNames;
+    connectedCallback(): void;
+    componentDidLoad(): void;
+    checkedChanged(): void;
+    private updateFormValue;
+    formStateRestoreCallback(state: string | FormData | null): void;
+    componentWillLoad(): void;
     render(): any;
 }

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

@@ -1,14 +1,39 @@
 export declare class PdsTableCell {
     hostElement: HTMLPdsTableCellElement;
     private tableRef;
+    private scrollContainer;
+    private setupTimer;
+    private setupRetries;
+    private truncationCleanup;
     componentWillRender(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private setupScrollListener;
+    private cleanupScrollListener;
     /**
-     * Truncates content to a max width of 100px and adds an ellipsis.
+     * Sets the text alignment within the cell.
+     */
+    cellAlign?: 'start' | 'center' | 'end' | 'justify';
+    /**
+     * Truncates content to a max width and adds an ellipsis.
+     * 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;
+    /**
+     * Determines if the table is currently scrolling.
+     * @defaultValue false
+     */
     private tableScrolling;
+    private initTruncationTooltip;
+    private destroyTruncationTooltip;
     private classNames;
+    /**
+     * Handles scroll events to update fixed column shadow state.
+     * Updates the tableScrolling state to control CSS classes for fixed column shadows.
+     * @private
+     */
     private handleScroll;
     render(): any;
 }

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

@@ -2,12 +2,25 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class PdsTableHead {
     hostElement: HTMLPdsTableHeadElement;
     private tableRef;
-    /** Indicates that the selection state is indeterminate. */
+    /**
+     * Determines if the select all checkbox is in an indeterminate state.
+     */
     indeterminate?: boolean;
     /**
-    * A local state to track whether the row is currently selected.
+    * Determines if the table row is currently selected.
+    * @defaultValue false
     */
     isSelected: boolean;
+    /**
+     * Adds top and bottom borders to the table head.
+     * @defaultValue false
+     */
+    border: boolean;
+    /**
+     * Adds a subtle background color to the table head.
+     * @defaultValue false
+     */
+    background: boolean;
     /**
      * Event that is emitted when the select all checkbox is clicked, carrying the selected value.
      */

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

@@ -2,6 +2,14 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class PdsTableHeadCell {
     hostElement: HTMLPdsTableHeadCellElement;
     private tableRef;
+    private scrollContainer;
+    private setupTimer;
+    private setupRetries;
+    private headObserver?;
+    /**
+     * Sets the text alignment within the head cell.
+     */
+    cellAlign?: 'start' | 'center' | 'end' | 'justify';
     /**
      * Determines whether the table column is sortable when set to `true`.
      */
@@ -13,14 +21,56 @@ export declare class PdsTableHeadCell {
         column: string;
         direction: string;
     }>;
+    /**
+     * The direction of sorting.
+     */
     private sortingDirection;
+    /**
+     * Determines if the table is currently scrolling.
+     * @defaultValue false
+     */
     private tableScrolling;
     /**
-     * A local state to track whether the row is currently selected.
+     * Determines if the table row is currently selected.
+     * @defaultValue false
      */
     isSelected: boolean;
-    componentWillRender(): void;
+    /**
+     * Determines if the parent table-head has the border attribute.
+     * @defaultValue false
+     */
+    private hasHeadBorder;
+    /**
+     * Determines if the parent table-head has the background attribute.
+     * @defaultValue false
+     */
+    private hasHeadBackground;
+    /**
+     * Determines if this column is the currently active sorted column.
+     * @defaultValue false
+     */
+    private isActive;
+    /**
+     * Programmatically sets this column as the active sort column with the specified direction.
+     * Used by pds-table to apply a default sort on initial load.
+     * @param direction - The sort direction to apply ('asc' or 'desc')
+     */
+    setActiveSort(direction: 'asc' | 'desc'): Promise<void>;
+    /**
+     * Clears the active sort state from this column.
+     * Used internally when another column becomes active.
+     */
+    clearActiveSort(): Promise<void>;
+    componentWillLoad(): void;
     componentDidLoad(): void;
+    disconnectedCallback(): void;
+    private setupScrollListener;
+    private cleanupScrollListener;
+    /**
+     * Handles scroll events to update fixed column shadow state.
+     * Updates the tableScrolling state to control CSS classes for fixed column shadows.
+     * @private
+     */
     private handleScroll;
     private toggleSort;
     private classNames;

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

@@ -2,14 +2,26 @@ import { EventEmitter } from '../../../stencil-public-runtime';
 export declare class PdsTableRow {
     hostElement: HTMLPdsTableRowElement;
     private tableRef;
+    private observer;
+    private bodyObserver;
     /**
-     * Indicates that the selection state is indeterminate.
-     * */
+      * Determines if the row selected is in an indeterminate state.
+      */
     indeterminate?: boolean;
     /**
-     * A local state to track whether the row is currently selected.
+     * Determines if the table row is currently selected.
      */
     isSelected?: boolean;
+    /**
+     * Determines if the row should have a divider border.
+     * @defaultValue false
+     */
+    private hasDivider;
+    /**
+     * Determines if this is the last row in the table body.
+     * @defaultValue false
+     */
+    private isLastRow;
     /**
      * Event that is emitted when the checkbox is clicked, carrying the selected value.
      */
@@ -17,11 +29,18 @@ export declare class PdsTableRow {
         rowIndex: number;
         isSelected: boolean;
     }>;
-    private handleClick;
+    private handleCheckboxChange;
     private handleSelect;
     private classNames;
     componentWillRender(): void;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private cleanupObservers;
+    private setupObservers;
+    private shouldHaveDivider;
+    private updateDividerState;
+    private updateLastRowState;
     private generateUniqueId;
     render(): any;
 }