@pine-ds/core 3.7.0 → 3.8.0

package/dist/types/components.d.ts

@@ -7,15 +7,17 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BoxColumnType, BoxShadowSizeType, BoxTShirtSizeType } from "./utils/types";
 import { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
-import { PlacementType } from "./utils/types";
+import { ChipSentimentType, ChipVariantType, PlacementType } from "./utils/types";
 import { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
 import { InputChangeEventDetail, InputInputEventDetail } from "./components/pds-input/input-interface";
+import { PdsPopoverEventDetail } from "./components/pds-popover/popover-interface";
 import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/pds-textarea/textarea-interface";
 export { BoxColumnType, BoxShadowSizeType, BoxTShirtSizeType } from "./utils/types";
 export { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
-export { PlacementType } from "./utils/types";
+export { ChipSentimentType, ChipVariantType, PlacementType } from "./utils/types";
 export { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
 export { InputChangeEventDetail, InputInputEventDetail } from "./components/pds-input/input-interface";
+export { PdsPopoverEventDetail } from "./components/pds-popover/popover-interface";
 export { TextareaChangeEventDetail, TextareaInputEventDetail } from "./components/pds-textarea/textarea-interface";
 export namespace Components {
     /**
@@ -818,14 +820,33 @@ export namespace Components {
           * Defines the color scheme of the chip.
           * @defaultValue 'neutral'
          */
-        "sentiment": 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+        "sentiment": ChipSentimentType;
         /**
           * Sets the style variant of the chip. Note: This prop is ignored when sentiment is 'brand'.
           * @defaultValue 'text'
          */
-        "variant": 'text' | 'tag' | 'dropdown';
+        "variant": ChipVariantType;
     }
     interface PdsCombobox {
+        /**
+          * Whether a dot should be displayed on the chip trigger.
+          * @default false
+         */
+        "chipDot": boolean;
+        /**
+          * The name of the icon to display in the chip trigger.
+         */
+        "chipIcon"?: string;
+        /**
+          * Whether the chip trigger should be displayed in a larger size.
+          * @default false
+         */
+        "chipLarge": boolean;
+        /**
+          * The sentiment for the chip trigger. Matches Pine chip sentiments.
+          * @default 'neutral'
+         */
+        "chipSentiment": ChipSentimentType;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -875,6 +896,10 @@ export namespace Components {
           * @default 'filter'
          */
         "mode": 'filter' | 'select-only';
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
         /**
           * Placeholder text for the input field.
          */
@@ -884,10 +909,10 @@ export namespace Components {
          */
         "setFocus": () => Promise<void>;
         /**
-          * Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable).
+          * Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
           * @default 'input'
          */
-        "trigger": 'input' | 'button';
+        "trigger": 'input' | 'button' | 'chip';
         /**
           * The visual variant for the button trigger. Matches Pine button variants.
           * @default 'secondary'
@@ -1260,6 +1285,10 @@ export namespace Components {
           * A unique identifier used for the underlying component `id` attribute.
          */
         "componentId": string;
+        /**
+          * Closes the popover programmatically
+         */
+        "hide": () => Promise<void>;
         /**
           * Sets the maximum width of the popover content
           * @defaultValue 352
@@ -1279,10 +1308,18 @@ export namespace Components {
           * 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';
+        /**
+          * Opens the popover programmatically
+         */
+        "show": () => Promise<void>;
         /**
           * Text that appears on the trigger element
          */
         "text": string;
+        /**
+          * Toggles the popover open/closed state programmatically
+         */
+        "toggle": () => Promise<void>;
     }
     interface PdsProgress {
         /**
@@ -1911,6 +1948,10 @@ export interface PdsModalCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPdsModalElement;
 }
+export interface PdsPopoverCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPdsPopoverElement;
+}
 export interface PdsRadioCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPdsRadioElement;
@@ -2240,7 +2281,19 @@ declare global {
         prototype: HTMLPdsModalHeaderElement;
         new (): HTMLPdsModalHeaderElement;
     };
+    interface HTMLPdsPopoverElementEventMap {
+        "pdsPopoverOpen": PdsPopoverEventDetail;
+        "pdsPopoverClose": PdsPopoverEventDetail;
+    }
     interface HTMLPdsPopoverElement extends Components.PdsPopover, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPdsPopoverElementEventMap>(type: K, listener: (this: HTMLPdsPopoverElement, ev: PdsPopoverCustomEvent<HTMLPdsPopoverElementEventMap[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 HTMLPdsPopoverElementEventMap>(type: K, listener: (this: HTMLPdsPopoverElement, ev: PdsPopoverCustomEvent<HTMLPdsPopoverElementEventMap[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 HTMLPdsPopoverElement: {
         prototype: HTMLPdsPopoverElement;
@@ -3365,14 +3418,33 @@ declare namespace LocalJSX {
           * Defines the color scheme of the chip.
           * @defaultValue 'neutral'
          */
-        "sentiment"?: 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+        "sentiment"?: ChipSentimentType;
         /**
           * Sets the style variant of the chip. Note: This prop is ignored when sentiment is 'brand'.
           * @defaultValue 'text'
          */
-        "variant"?: 'text' | 'tag' | 'dropdown';
+        "variant"?: ChipVariantType;
     }
     interface PdsCombobox {
+        /**
+          * Whether a dot should be displayed on the chip trigger.
+          * @default false
+         */
+        "chipDot"?: boolean;
+        /**
+          * The name of the icon to display in the chip trigger.
+         */
+        "chipIcon"?: string;
+        /**
+          * Whether the chip trigger should be displayed in a larger size.
+          * @default false
+         */
+        "chipLarge"?: boolean;
+        /**
+          * The sentiment for the chip trigger. Matches Pine chip sentiments.
+          * @default 'neutral'
+         */
+        "chipSentiment"?: ChipSentimentType;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -3418,6 +3490,10 @@ declare namespace LocalJSX {
           * @default 'filter'
          */
         "mode"?: 'filter' | 'select-only';
+        /**
+          * The name of the form control. Submitted with the form as part of a name/value pair.
+         */
+        "name"?: string;
         /**
           * Emitted when the value changes.
          */
@@ -3427,10 +3503,10 @@ declare namespace LocalJSX {
          */
         "placeholder"?: string;
         /**
-          * Determines the combobox trigger: 'input' (editable input) or 'button' (button-like, non-editable).
+          * Determines the combobox trigger: 'input' (editable input), 'button' (button-like, non-editable), or 'chip' (chip-like, non-editable).
           * @default 'input'
          */
-        "trigger"?: 'input' | 'button';
+        "trigger"?: 'input' | 'button' | 'chip';
         /**
           * The visual variant for the button trigger. Matches Pine button variants.
           * @default 'secondary'
@@ -3828,6 +3904,14 @@ declare namespace LocalJSX {
           * @defaultValue 352
          */
         "maxWidth"?: number;
+        /**
+          * Emitted when the popover is closed
+         */
+        "onPdsPopoverClose"?: (event: PdsPopoverCustomEvent<PdsPopoverEventDetail>) => void;
+        /**
+          * Emitted when the popover is opened
+         */
+        "onPdsPopoverOpen"?: (event: PdsPopoverCustomEvent<PdsPopoverEventDetail>) => void;
         /**
           * Determines the preferred position of the popover
           * @defaultValue "right"

package/dist/types/utils/form.d.ts

@@ -10,3 +10,12 @@ export declare const assignDescription: (id: string, invalid: boolean, helperMes
  * Updates the `invalid` prop of a form element based on it's values validity
  */
 export declare const isRequired: (target: any, component: any) => void;
+/**
+ * Exposes a readonly type property on a custom form element to match native form element behavior.
+ * This makes the type property enumerable and accessible via element.type, matching native HTML elements.
+ * The property is non-configurable, preventing it from being redefined or deleted at runtime.
+ *
+ * @param element - The custom element to add the type property to
+ * @param type - The type value (string literal) or a getter function that returns the type
+ */
+export declare function exposeTypeProperty(element: HTMLElement, type: string | (() => string)): void;

package/dist/types/utils/types.d.ts

@@ -2,3 +2,5 @@ export type PlacementType = 'top-start' | 'top' | 'top-end' | 'left-start' | 'le
 export type BoxColumnType = '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
 export type BoxTShirtSizeType = 'none' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 export type BoxShadowSizeType = 'none' | '050' | '100' | '150' | '200' | '300' | '400' | '500';
+export type ChipSentimentType = 'accent' | 'brand' | 'danger' | 'info' | 'neutral' | 'success' | 'warning';
+export type ChipVariantType = 'text' | 'tag' | 'dropdown';