@pine-ds/core 3.3.0 → 3.4.0

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.
      */
@@ -91,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.d.ts

@@ -428,6 +428,84 @@ export namespace Components {
          */
         "variant": 'text' | 'tag' | 'dropdown';
     }
+    interface PdsCombobox {
+        /**
+          * 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;
+        /**
+          * Gets the value of the currently selected option.
+         */
+        "getSelectedValue": () => Promise<string | null>;
+        /**
+          * 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;
+        /**
+          * Sets focus on the native input element.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable).
+          * @default 'input'
+         */
+        "trigger": 'input' | 'button';
+        /**
+          * The visual variant for the button trigger. Matches Pine button variants.
+          * @default 'secondary'
+         */
+        "triggerVariant": 'secondary' | 'primary' | 'accent' | 'destructive';
+        /**
+          * Width of the trigger (button or input). Any valid CSS width value.
+          * @default 'fit-content'
+         */
+        "triggerWidth": string;
+        /**
+          * The value of the combobox input.
+         */
+        "value": string;
+    }
     interface PdsCopytext {
         /**
           * Determines whether `copytext` should have a visible border.
@@ -787,6 +865,16 @@ export namespace Components {
          */
         "showPercent": boolean;
     }
+    interface 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;
+    }
     interface PdsRadio {
         /**
           * Determines whether or not the radio is checked.
@@ -1337,6 +1425,10 @@ export interface PdsChipCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPdsChipElement;
 }
+export interface PdsComboboxCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPdsComboboxElement;
+}
 export interface PdsCopytextCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPdsCopytextElement;
@@ -1508,6 +1600,23 @@ declare global {
         prototype: HTMLPdsChipElement;
         new (): HTMLPdsChipElement;
     };
+    interface HTMLPdsComboboxElementEventMap {
+        "pdsComboboxChange": { value: string };
+    }
+    interface HTMLPdsComboboxElement extends Components.PdsCombobox, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPdsComboboxElementEventMap>(type: K, listener: (this: HTMLPdsComboboxElement, ev: PdsComboboxCustomEvent<HTMLPdsComboboxElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPdsComboboxElementEventMap>(type: K, listener: (this: HTMLPdsComboboxElement, ev: PdsComboboxCustomEvent<HTMLPdsComboboxElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPdsComboboxElement: {
+        prototype: HTMLPdsComboboxElement;
+        new (): HTMLPdsComboboxElement;
+    };
     interface HTMLPdsCopytextElementEventMap {
         "pdsCopyTextClick": any;
     }
@@ -1646,6 +1755,12 @@ declare global {
         prototype: HTMLPdsProgressElement;
         new (): HTMLPdsProgressElement;
     };
+    interface HTMLPdsPropertyElement extends Components.PdsProperty, HTMLStencilElement {
+    }
+    var HTMLPdsPropertyElement: {
+        prototype: HTMLPdsPropertyElement;
+        new (): HTMLPdsPropertyElement;
+    };
     interface HTMLPdsRadioElementEventMap {
         "pdsRadioChange": boolean;
     }
@@ -1894,6 +2009,7 @@ declare global {
         "pds-button": HTMLPdsButtonElement;
         "pds-checkbox": HTMLPdsCheckboxElement;
         "pds-chip": HTMLPdsChipElement;
+        "pds-combobox": HTMLPdsComboboxElement;
         "pds-copytext": HTMLPdsCopytextElement;
         "pds-divider": HTMLPdsDividerElement;
         "pds-dropdown-menu": HTMLPdsDropdownMenuElement;
@@ -1909,6 +2025,7 @@ declare global {
         "pds-modal-header": HTMLPdsModalHeaderElement;
         "pds-popover": HTMLPdsPopoverElement;
         "pds-progress": HTMLPdsProgressElement;
+        "pds-property": HTMLPdsPropertyElement;
         "pds-radio": HTMLPdsRadioElement;
         "pds-row": HTMLPdsRowElement;
         "pds-select": HTMLPdsSelectElement;
@@ -2361,6 +2478,80 @@ declare namespace LocalJSX {
          */
         "variant"?: 'text' | 'tag' | 'dropdown';
     }
+    interface PdsCombobox {
+        /**
+          * 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';
+        /**
+          * Emitted when the value changes.
+         */
+        "onPdsComboboxChange"?: (event: PdsComboboxCustomEvent<{ value: string }>) => void;
+        /**
+          * 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';
+        /**
+          * The visual variant for the button trigger. Matches Pine button variants.
+          * @default 'secondary'
+         */
+        "triggerVariant"?: 'secondary' | 'primary' | 'accent' | 'destructive';
+        /**
+          * Width of the trigger (button or input). Any valid CSS width value.
+          * @default 'fit-content'
+         */
+        "triggerWidth"?: string;
+        /**
+          * The value of the combobox input.
+         */
+        "value"?: string;
+    }
     interface PdsCopytext {
         /**
           * Determines whether `copytext` should have a visible border.
@@ -2736,6 +2927,16 @@ declare namespace LocalJSX {
          */
         "showPercent"?: boolean;
     }
+    interface 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;
+    }
     interface PdsRadio {
         /**
           * Determines whether or not the radio is checked.
@@ -3309,6 +3510,7 @@ declare namespace LocalJSX {
         "pds-button": PdsButton;
         "pds-checkbox": PdsCheckbox;
         "pds-chip": PdsChip;
+        "pds-combobox": PdsCombobox;
         "pds-copytext": PdsCopytext;
         "pds-divider": PdsDivider;
         "pds-dropdown-menu": PdsDropdownMenu;
@@ -3324,6 +3526,7 @@ declare namespace LocalJSX {
         "pds-modal-header": PdsModalHeader;
         "pds-popover": PdsPopover;
         "pds-progress": PdsProgress;
+        "pds-property": PdsProperty;
         "pds-radio": PdsRadio;
         "pds-row": PdsRow;
         "pds-select": PdsSelect;
@@ -3361,6 +3564,7 @@ declare module "@stencil/core" {
             "pds-button": LocalJSX.PdsButton & JSXBase.HTMLAttributes<HTMLPdsButtonElement>;
             "pds-checkbox": LocalJSX.PdsCheckbox & JSXBase.HTMLAttributes<HTMLPdsCheckboxElement>;
             "pds-chip": LocalJSX.PdsChip & JSXBase.HTMLAttributes<HTMLPdsChipElement>;
+            "pds-combobox": LocalJSX.PdsCombobox & JSXBase.HTMLAttributes<HTMLPdsComboboxElement>;
             "pds-copytext": LocalJSX.PdsCopytext & JSXBase.HTMLAttributes<HTMLPdsCopytextElement>;
             "pds-divider": LocalJSX.PdsDivider & JSXBase.HTMLAttributes<HTMLPdsDividerElement>;
             "pds-dropdown-menu": LocalJSX.PdsDropdownMenu & JSXBase.HTMLAttributes<HTMLPdsDropdownMenuElement>;
@@ -3376,6 +3580,7 @@ declare module "@stencil/core" {
             "pds-modal-header": LocalJSX.PdsModalHeader & JSXBase.HTMLAttributes<HTMLPdsModalHeaderElement>;
             "pds-popover": LocalJSX.PdsPopover & JSXBase.HTMLAttributes<HTMLPdsPopoverElement>;
             "pds-progress": LocalJSX.PdsProgress & JSXBase.HTMLAttributes<HTMLPdsProgressElement>;
+            "pds-property": LocalJSX.PdsProperty & JSXBase.HTMLAttributes<HTMLPdsPropertyElement>;
             "pds-radio": LocalJSX.PdsRadio & JSXBase.HTMLAttributes<HTMLPdsRadioElement>;
             "pds-row": LocalJSX.PdsRow & JSXBase.HTMLAttributes<HTMLPdsRowElement>;
             "pds-select": LocalJSX.PdsSelect & JSXBase.HTMLAttributes<HTMLPdsSelectElement>;