@pine-ds/core 3.2.0 → 3.4.0

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

@@ -9,9 +9,14 @@ export declare class PdsChip {
     componentId: string;
     /**
      * Determines whether a dot should be displayed on the chip.
+     * Note: This prop is ignored when sentiment is 'brand'.
      * @defaultValue false
      */
     dot: boolean;
+    /**
+     * The name of the icon to display before the chip text.
+     */
+    icon?: string;
     /**
      * Determines whether the chip should be displayed in a larger size.
      * @defaultValue false
@@ -21,9 +26,10 @@ export declare class PdsChip {
      * Defines the color scheme of the chip.
      * @defaultValue 'neutral'
      */
-    sentiment: 'accent' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+    sentiment: 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
     /**
      * Sets the style variant of the chip.
+     * Note: This prop is ignored when sentiment is 'brand'.
      * @defaultValue 'text'
      */
     variant: 'text' | 'tag' | 'dropdown';
@@ -33,6 +39,8 @@ export declare class PdsChip {
     pdsTagCloseClick: EventEmitter;
     private handleCloseClick;
     private classNames;
+    private get effectiveVariant();
+    private get iconSize();
     private setChipContent;
     render(): any;
 }

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

@@ -0,0 +1,153 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { BasePdsProps } from "../../utils/interfaces";
+/**
+ * @slot option - Option elements for the combobox dropdown
+ * @slot trigger-content - Custom content for the button trigger when customTriggerContent is true
+ */
+export declare class PdsCombobox implements BasePdsProps {
+    /** Reference to the host element */
+    el: HTMLPdsComboboxElement;
+    /**
+     * A unique identifier used for the underlying component `id` attribute.
+     */
+    componentId: string;
+    /**
+     * Enable custom layout content for options. Options with data-layout attribute will render their HTML content.
+     * ⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.
+     * @default false
+     */
+    customOptionLayouts: boolean;
+    /**
+     * Enable custom layout content for the button trigger via the trigger-content slot.
+     * When true, uses slot content for initial state but updates dynamically with selected option layout.
+     * ⚠️ Security Warning: Only use with trusted content. Basic XSS protection is applied, but avoid user-generated content.
+     * @default false
+     */
+    customTriggerContent: boolean;
+    /**
+     * If true, the combobox is disabled.
+     */
+    disabled: boolean;
+    /**
+     * Placement of the dropdown relative to the trigger.
+     * @default 'bottom-start'
+     */
+    dropdownPlacement: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+    /**
+     * Width of the dropdown. Any valid CSS width value.
+     * @default '236px'
+     */
+    dropdownWidth: string;
+    /**
+     * Visually hides the label text for instances where only the combobox should be displayed.
+     * Label remains accessible to assistive technology such as screen readers.
+     */
+    hideLabel: boolean;
+    /**
+     * Text to be displayed as the combobox label.
+     */
+    label?: string;
+    /**
+     * Maximum height of the dropdown. Can be any valid CSS height value (e.g., '200px', '10rem').
+     * When content exceeds this height, the dropdown will scroll.
+     */
+    maxHeight?: string;
+    /**
+     * Determines the combobox mode: 'filter' (filter options as you type) or 'select-only' (show all options).
+     * @default 'filter'
+     */
+    mode: 'filter' | 'select-only';
+    /**
+     * Placeholder text for the input field.
+     */
+    placeholder?: string;
+    /**
+     * Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable).
+     * @default 'input'
+     */
+    trigger: 'input' | 'button';
+    /**
+     * Width of the trigger (button or input). Any valid CSS width value.
+     * @default 'fit-content'
+     */
+    triggerWidth: string;
+    /**
+     * The visual variant for the button trigger. Matches Pine button variants.
+     * @default 'secondary'
+     */
+    triggerVariant: 'secondary' | 'primary' | 'accent' | 'destructive';
+    /**
+     * The value of the combobox input.
+     */
+    value: string;
+    /**
+     * Emitted when the value changes.
+     */
+    pdsComboboxChange: EventEmitter<{
+        value: string;
+    }>;
+    /**
+     * Internal state for filtered options
+     */
+    filteredOptions: HTMLOptionElement[];
+    /**
+     * Internal state for the currently highlighted option index
+     */
+    highlightedIndex: number;
+    /**
+     * Internal state for dropdown open/close
+     */
+    isOpen: boolean;
+    /**
+     * Internal state for the currently selected option
+     */
+    selectedOption: HTMLOptionElement | null;
+    /**
+     * Internal state for the sanitized layout content of the selected option
+     */
+    selectedOptionLayoutContent: string;
+    private inputEl?;
+    private optionEls;
+    private triggerEl?;
+    private listboxEl?;
+    componentWillLoad(): void;
+    handleValueChange(): void;
+    handleSelectedOptionChange(): void;
+    private updateOptions;
+    private getOptionLabel;
+    private getOptionLayoutContent;
+    private sanitizeHtml;
+    private isOptionLayout;
+    private isOptionSelected;
+    private setSelectedOption;
+    private filterOptions;
+    private openDropdownPositioning;
+    private handleInput;
+    private handleFocus;
+    private handleKeyDown;
+    /**
+     * Sets focus on the native input element.
+     */
+    setFocus(): Promise<void>;
+    /**
+     * Gets the value of the currently selected option.
+     */
+    getSelectedValue(): Promise<string | null>;
+    private onOptionClick;
+    private onOptionMouseEnter;
+    private onOptionMouseDown;
+    private get selectedLabel();
+    private get selectedLayoutContent();
+    private get selectedHasLayout();
+    private onButtonTriggerClick;
+    private onButtonTriggerKeyDown;
+    private onComboboxFocusOut;
+    private handleOptionClick;
+    private renderDropdown;
+    private renderCaretIcon;
+    private renderLayoutContent;
+    private renderDefaultContent;
+    private shouldShowLayoutContent;
+    private renderButtonTriggerContent;
+    render(): any;
+}

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

@@ -1,21 +1,46 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
+import { InputChangeEventDetail, InputInputEventDetail } from './input-interface';
+/**
+ * @slot append - Content to be displayed after the input field
+ * @slot prefix - Content that is displayed visually within the input field before the input field
+ * @slot prepend - Content to be displayed before the input field
+ * @slot suffix - Content that is displayed visually within the input field after the input field
+ * @slot action - Content to be displayed in the label area, typically for help icons or links
+ */
 export declare class PdsInput {
     private nativeInput?;
     private inheritedAttributes;
     private isComposing;
-    /**
-     * The value of the input when the input is focused.
-     */
+    private prefixEl?;
+    private suffixEl?;
     private focusedValue?;
     private originalPdsInput?;
     el: HTMLPdsInputElement;
+    /**
+     * If true, the input has prefix content (non-focusable)
+     */
+    hasPrefix: boolean;
+    /**
+     * If true, the input has suffix content (non-focusable)
+     */
+    hasSuffix: boolean;
+    /**
+     * If true, the input has prepend content (focusable)
+     */
+    hasPrepend: boolean;
+    /**
+     * If true, the input has append content (focusable)
+     */
+    hasAppend: boolean;
+    /**
+     * 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 value has changed.
      *
      * This event will not emit when programmatically setting the `value` property.
@@ -66,10 +91,30 @@ export declare class PdsInput {
      * Text to be displayed as the input label.
      */
     label?: string;
+    /**
+     * Specifies the maximum value for the input field.
+     */
+    max?: string;
+    /**
+     * Specifies the maximum number of characters allowed in the input field.
+     */
+    maxlength?: string;
+    /**
+     * Specifies the minimum value for the input field.
+     */
+    min?: string;
+    /**
+     * Specifies the minimum number of characters allowed in the input field.
+     */
+    minlength?: string;
     /**
      * Specifies the name. Submitted with the form name/value pair.
      */
     name?: string;
+    /**
+     * Specifies the regular expression that the input value is checked against.
+     */
+    pattern?: string;
     /**
      * Specifies a short hint that describes the expected value of the input field.
      */
@@ -82,6 +127,10 @@ export declare class PdsInput {
      * Determines whether or not the input field is required.
      */
     required?: boolean;
+    /**
+     * Works with the `min` and `max` attributes to define increments for the input field.
+     */
+    step?: string;
     /**
      * Determines the type of control that will be displayed
      * `'email'`, `'number'`, `'password'`, `'tel'`, `'text'`, `'url'`
@@ -96,6 +145,15 @@ export declare class PdsInput {
      * Determines if the input has focus.
      */
     hasFocus: boolean;
+    private updateAddonWidths;
+    private renderPrefix;
+    private renderSuffix;
+    private renderPrepend;
+    private renderAppend;
+    private renderAction;
+    componentWillLoad(): void;
+    componentDidLoad(): void;
+    componentDidUpdate(): void;
     protected debounceChanged(): void;
     protected valueChanged(): void;
     private getValue;
@@ -110,12 +168,8 @@ export declare class PdsInput {
      */
     private emitValueChange;
     /**
-     *
      * Emits a `pdsInput` event
      */
     private emitInputChange;
-    componentWillLoad(): void;
-    componentDidLoad(): void;
-    private inputClassNames;
     render(): any;
 }

package/dist/types/components/pds-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-select/pds-select.d.ts

@@ -1,7 +1,11 @@
 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;
+    el: HTMLPdsSelectElement;
     /**
      * Specifies if and how the browser provides `autocomplete` assistance for the field.
      */
@@ -19,6 +23,10 @@ export declare class PdsSelect {
      * Displays error message text describing an invalid state.
      */
     errorMessage: string;
+    /**
+     * Visually hides the label text for instances where only the checkbox should be displayed. Label remains accessible to assistive technology such as screen readers.
+     */
+    hideLabel: boolean;
     /**
      * Displays helper message text below select.
      */
@@ -87,5 +95,6 @@ export declare class PdsSelect {
     private getErrorMessage;
     private renderMessages;
     private classNames;
+    private renderAction;
     render(): any;
 }

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

@@ -1,3 +1,6 @@
+/**
+ * @part content - The text content container
+ */
 export declare class PdsText {
     el: HTMLPdsTextElement;
     /**

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

@@ -1,5 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 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?;
@@ -95,6 +98,10 @@ export declare class PdsTextarea {
      */
     value?: string | null;
     hasFocus: boolean;
+    /**
+     * If true, the textarea has action content in the label area
+     */
+    hasAction: boolean;
     protected debounceChanged(): void;
     /**
      * Update the native input element when the value changes
@@ -117,5 +124,6 @@ export declare class PdsTextarea {
     connectedCallback(): void;
     componentWillLoad(): void;
     componentDidLoad(): void;
+    private renderAction;
     render(): any;
 }

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

@@ -14,6 +14,8 @@ export declare class PdsTooltip {
     private contentDiv;
     private slotMutationObserver;
     private overlayResizeObserver;
+    private currentPathname;
+    private pathnameCheckInterval;
     /**
      * Reference to the Host element
      */
@@ -73,6 +75,7 @@ export declare class PdsTooltip {
     private handlePageShow;
     private handleScroll;
     private handleSpaNavigation;
+    private checkPathnameChange;
     /**
      * Determines the most accurate HTML element to use as the anchor for positioning the tooltip.
      * If `htmlContent` is false, it attempts to find the actual element slotted as the trigger.