@pine-ds/core 3.2.0 → 3.4.0

package/dist/types/components.d.ts

@@ -404,10 +404,14 @@ export namespace Components {
          */
         "componentId": string;
         /**
-          * Determines whether a dot should be displayed on the chip.
+          * 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
@@ -417,13 +421,91 @@ export namespace Components {
           * 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.
+          * Sets the style variant of the chip. Note: This prop is ignored when sentiment is 'brand'.
           * @defaultValue 'text'
          */
         "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.
@@ -578,10 +660,30 @@ export namespace Components {
           * 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.
          */
@@ -598,6 +700,10 @@ export namespace Components {
           * Sets focus on the native `input` in the `pds-input`. Use this method instead of the global `input.focus()`.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * 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'`
           * @defaultValue "text"
@@ -759,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.
@@ -863,6 +979,10 @@ export namespace Components {
           * Displays helper message text below select.
          */
         "helperMessage": 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;
         /**
           * Determines whether or not the select is invalid.
          */
@@ -1305,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;
@@ -1476,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;
     }
@@ -1614,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;
     }
@@ -1862,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;
@@ -1877,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;
@@ -2301,10 +2450,14 @@ declare namespace LocalJSX {
          */
         "componentId"?: string;
         /**
-          * Determines whether a dot should be displayed on the chip.
+          * 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
@@ -2318,13 +2471,87 @@ declare namespace LocalJSX {
           * 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.
+          * Sets the style variant of the chip. Note: This prop is ignored when sentiment is 'brand'.
           * @defaultValue 'text'
          */
         "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.
@@ -2483,6 +2710,22 @@ declare namespace LocalJSX {
           * 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.
          */
@@ -2503,6 +2746,10 @@ declare namespace LocalJSX {
           * Emitted when a keyboard input occurs.
          */
         "onPdsInput"?: (event: PdsInputCustomEvent<InputInputEventDetail>) => void;
+        /**
+          * 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.
          */
@@ -2515,6 +2762,10 @@ declare namespace LocalJSX {
           * 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'`
           * @defaultValue "text"
@@ -2676,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.
@@ -2784,6 +3045,10 @@ declare namespace LocalJSX {
           * Displays helper message text below select.
          */
         "helperMessage"?: 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;
         /**
           * Determines whether or not the select is invalid.
          */
@@ -3245,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;
@@ -3260,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;
@@ -3297,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>;
@@ -3312,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>;