@pine-ds/core 3.0.0-mercury.0 → 3.0.1

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

@@ -1,7 +1,10 @@
+import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * @part button - The main button element that represents the button component.
- * @part caret - The caret icon element that appears when the button variant is 'disclosure'.
- * @part icon - The icon element that appears before the text in the button, if provided.
+ * @part button - Exposes the button element for styling.
+ * @part button-content - Exposes the button content for styling.
+ * @part button-text - Exposes the button text for styling.
+ * @part caret - Exposes the caret icon component for styling. Appears only on the disclosure variant.
+ * @part icon - Exposes the icon component for styling.
 */
 export declare class PdsButton {
     el: HTMLPdsButtonElement;
@@ -10,31 +13,59 @@ export declare class PdsButton {
      */
     componentId: string;
     /**
-     * Toggles disabled state of button
+     * Determines the button's disabled state.
      * @defaultValue false
      */
     disabled?: boolean;
     /**
-     * Displays icon before text when icon string matches an icon name
+     * Determines if the button should take up the full width of its container.
+     * @defaultValue false
+     */
+    fullWidth?: boolean;
+    /**
+     * If provided, renders the component as an anchor (`<a>`) element instead of a button.
+     * When using href, button-specific props (type, name, value, loading) will be ignored.
+     */
+    href?: string;
+    /**
+     * Displays an icon in the button.
+     * @defaultValue null
      */
     icon?: string;
     /**
-     * Provides button with a submittable name
+     * When true, displays only the icon and visually hides the text (keeping it accessible).
+     */
+    iconOnly?: boolean;
+    /**
+     * Determines if the button is in a loading state.
+     * When true, displays a loader and hides the button text.
+     * @defaultValue false
+     */
+    loading?: boolean;
+    /**
+     * Provides the button with a submittable name.
      */
     name?: string;
     /**
-     * Provides button with a submittable value
+     * Specifies where to open the linked document when href is provided.
+     * Only applies when href is set.
      */
-    value?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
     /**
-     * Provides button with a type
+     * Provides button with a type.
      * @defaultValue button
      */
     type?: 'button' | 'reset' | 'submit';
     /**
-     * Sets button variant styles as outlined in Figma documentation
+     * Provides button with a submittable value
+     */
+    value?: string;
+    /**
+     * Sets the style variant of the button.
+     * @defaultValue primary
      */
     variant: 'primary' | 'secondary' | 'accent' | 'disclosure' | 'destructive' | 'unstyled';
+    pdsClick: EventEmitter;
     private handleClick;
     private classNames;
     render(): any;

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

@@ -37,7 +37,7 @@ export declare class PdsCheckbox {
     /**
    * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.
    */
-    labelHidden: boolean;
+    hideLabel: boolean;
     /**
      * String used for checkbox `name` attribute.
      */

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

@@ -1,35 +1,34 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot (default) - The chip's label text.
+ */
 export declare class PdsChip {
     /**
      * A unique identifier used for the underlying component `id` attribute.
      */
     componentId: string;
-    /**
-     * Sets the color scheme of the chip.
-     * @defaultValue 'neutral'
-     */
-    sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
     /**
      * Determines whether a dot should be displayed on the chip.
      * @defaultValue false
      */
     dot: boolean;
     /**
-     *  Sets the text label content of the chip.
-     */
-    label: string;
-    /**
-     * Determines whether the chip should be rendered in a larger size.
+     * Determines whether the chip should be displayed in a larger size.
      * @defaultValue false
      */
     large: boolean;
+    /**
+     * Defines the color scheme of the chip.
+     * @defaultValue 'neutral'
+     */
+    sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
     /**
      * Sets the style variant of the chip.
      * @defaultValue 'text'
      */
     variant: 'text' | 'tag' | 'dropdown';
     /**
-     * Event when close button is clicked on tag variant.
+     * Event emitted when the close button is clicked on a tag variant chip.
      */
     pdsTagCloseClick: EventEmitter;
     private handleCloseClick;

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

@@ -1,7 +1,7 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class PdsCopytext {
     /**
-     * Determines whether `copytext` should have a border.
+     * Determines whether `copytext` should have a visible border.
      * @defaultValue true
      */
     border: boolean;
@@ -20,11 +20,11 @@ export declare class PdsCopytext {
      */
     truncate: boolean;
     /**
-     * String that is displayed and that is also copied to the clipboard upon interaction.
+     * The string displayed that is also copied to the clipboard upon interaction.
      */
     value: string;
     /**
-     * Event when copyText button is clicked.
+     * Event fired when copyText button is clicked.
      */
     pdsCopyTextClick: EventEmitter;
     private copyToClipboard;

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

@@ -8,7 +8,7 @@ export declare class PdsDivider {
      */
     offset: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
     /**
-     * Sets divider to display vertically
+     * Sets divider to display vertically.
      * @defaultValue false
      */
     vertical: boolean;

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 {
+    detai: T;
+    target: HTMLPdsInputElement;
+}

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

@@ -1,11 +1,53 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
 export declare class PdsInput {
+    private nativeInput?;
+    private inheritedAttributes;
+    private isComposing;
+    /**
+     * The value of the input when the input is focused.
+     */
+    private focusedValue?;
+    private originalPdsInput?;
+    el: HTMLPdsInputElement;
+    /**
+     * 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>;
+    /**
+     * 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,7 +59,7 @@ 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;
     /**
@@ -33,27 +75,47 @@ export declare class PdsInput {
      */
     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;
     /**
      * 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;
     /**
-     * Emitted when a keyboard input occurred.
+     * Determines if the input has focus.
      */
-    pdsInput: EventEmitter<InputEvent>;
+    hasFocus: boolean;
+    protected debounceChanged(): void;
+    protected valueChanged(): void;
+    private getValue;
     private onInputEvent;
+    private onChangeEvent;
+    private onBlurEvent;
+    private onFocusEvent;
+    private onCompositionStart;
+    private onCompositionEnd;
+    /**
+     * Emits a pdsChange event
+     */
+    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

@@ -1,6 +1,6 @@
 /**
- * @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 {
     /**
@@ -8,26 +8,22 @@ export declare class PdsLink {
      */
     componentId: string;
     /**
-     * When enabled, opens link in a new tab.
+     * Determines whether the link should open in a new tab.
      * @defaultValue false
      */
     external: boolean;
     /**
-     *
-     * Modifies the look of the link
+     * 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;
     private classNames;

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

@@ -0,0 +1,45 @@
+import { PlacementType } from "../../utils/types";
+export declare class PdsPopover {
+    /**
+     * Reference to the Host element
+     */
+    el: HTMLPdsPopoverElement;
+    /**
+     * Determines when the popover is active
+     * @defaultValue false
+     */
+    active: boolean;
+    /**
+     * Determines the action that triggers the popover. For manual popovers, the consumer is responsible for toggling this value.
+     * @defaultValue "show"
+     */
+    popoverTargetAction: 'show' | 'toggle' | 'hide';
+    /**
+     * Determines the type of popover. Auto popovers can be "light dismissed" by clicking outside of the popover.
+     * Manual popovers require the consumer to handle the visibility of the popover.
+     */
+    popoverType: 'auto' | 'manual';
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Text that appears on the trigger element
+     */
+    text: string;
+    /**
+     * Sets the maximum width of the popover content
+     * @defaultValue 352
+     */
+    maxWidth?: number;
+    /**
+     * Determines the preferred position of the popover
+     * @defaultValue "right"
+     */
+    placement: PlacementType;
+    componentWillRender(): void;
+    handleClick(): void;
+    handleScroll(): void;
+    private handlePopoverPositioning;
+    render(): any;
+}

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

@@ -5,32 +5,36 @@ export declare class PdsRadio {
      * @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.
-     */
-    componentId: string;
+   * 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.
      */

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

@@ -0,0 +1,91 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class PdsSelect {
+    private selectEl;
+    private slotContainer;
+    /**
+     * 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;
+    /**
+     * 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;
+    /**
+     * The value(s) of the selected option(s).
+     *
+     */
+    value?: string | string[];
+    /**
+     * Emitted when a keyboard input occurs.
+     */
+    pdsSelectChange: EventEmitter<InputEvent>;
+    /**
+     * 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;
+    componentWillLoad(): 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;
+    /**
+     * 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 classNames;
+    render(): any;
+}

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

@@ -6,54 +6,50 @@ export declare class PdsSwitch {
      */
     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;
     render(): any;
 }

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

@@ -7,6 +7,10 @@ export declare class PdsTableCell {
      * Truncates content to a max width of 100px and adds an ellipsis.
      */
     truncate: boolean;
+    /**
+     * Determines if the table is currently scrolling.
+     * @defaultValue false
+     */
     private tableScrolling;
     private classNames;
     private handleScroll;

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

@@ -2,10 +2,13 @@ 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;
     /**