@pine-ds/core 3.17.0 → 3.18.0

package/dist/types/components.d.ts

@@ -1018,7 +1018,7 @@ export namespace Components {
          */
         "fullWidth": boolean;
         /**
-          * Determines whether the `value` should truncate and display with an ellipsis.
+          * Determines whether the `value` should truncate and display with an ellipsis. When text overflows, a tooltip showing the full value will appear on hover/focus.
           * @defaultValue false
          */
         "truncate": boolean;
@@ -1391,6 +1391,15 @@ export namespace Components {
           * URL endpoint for async data fetching.
          */
         "asyncUrl"?: string;
+        /**
+          * Clears all selected values and resets the component.
+         */
+        "clear": () => Promise<void>;
+        /**
+          * Whether to close the panel after an option is selected. Defaults to `false` (panel stays open for multi-select).
+          * @default false
+         */
+        "closePanelOnSelect": boolean;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -1494,6 +1503,11 @@ export namespace Components {
           * @default false
          */
         "required": boolean;
+        /**
+          * Placeholder text for the search input inside the dropdown panel.
+          * @default 'Find...'
+         */
+        "searchPlaceholder": string;
         /**
           * Sets focus on the trigger button.
          */
@@ -1912,6 +1926,11 @@ export namespace Components {
           * @defaultValue 'asc'
          */
         "defaultSortDirection"?: 'asc' | 'desc';
+        /**
+          * Hides the select-all checkbox in the table header while keeping individual row checkboxes functional. Only applies when `selectable` is true.
+          * @defaultValue false
+         */
+        "disableSelectAll": boolean;
         /**
           * Determines if the should display a fixed first column.
          */
@@ -1938,7 +1957,7 @@ export namespace Components {
          */
         "cellAlign"?: 'start' | 'center' | 'end' | 'justify';
         /**
-          * Truncates content to a max width of 100px and adds an ellipsis.
+          * Truncates content to a max width and adds an ellipsis. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
          */
         "truncate": boolean;
     }
@@ -2083,7 +2102,7 @@ export namespace Components {
   | 'strong'
   | 'em';
         /**
-          * If set or `true`, the text will be truncated. Must add a `width` to the element.
+          * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
          */
         "truncate"?: boolean;
         /**
@@ -2639,6 +2658,7 @@ declare global {
         "pdsMultiselectSearch": MultiselectSearchEventDetail;
         "pdsMultiselectLoadOptions": MultiselectLoadOptionsEventDetail;
         "pdsMultiselectCreate": MultiselectCreateEventDetail;
+        "pdsMultiselectDismiss": void;
     }
     interface HTMLPdsMultiselectElement extends Components.PdsMultiselect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLPdsMultiselectElementEventMap>(type: K, listener: (this: HTMLPdsMultiselectElement, ev: PdsMultiselectCustomEvent<HTMLPdsMultiselectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2802,7 +2822,6 @@ declare global {
         new (): HTMLPdsTabElement;
     };
     interface HTMLPdsTableElementEventMap {
-        "pdsTableSelect": { rowIndex: number; isSelected: boolean };
         "pdsTableSelectAll": { isSelected: boolean };
     }
     interface HTMLPdsTableElement extends Components.PdsTable, HTMLStencilElement {
@@ -4010,7 +4029,7 @@ declare namespace LocalJSX {
          */
         "onPdsCopyTextClick"?: (event: PdsCopytextCustomEvent<string>) => void;
         /**
-          * Determines whether the `value` should truncate and display with an ellipsis.
+          * Determines whether the `value` should truncate and display with an ellipsis. When text overflows, a tooltip showing the full value will appear on hover/focus.
           * @defaultValue false
          */
         "truncate"?: boolean;
@@ -4403,6 +4422,11 @@ declare namespace LocalJSX {
           * URL endpoint for async data fetching.
          */
         "asyncUrl"?: string;
+        /**
+          * Whether to close the panel after an option is selected. Defaults to `false` (panel stays open for multi-select).
+          * @default false
+         */
+        "closePanelOnSelect"?: boolean;
         /**
           * A unique identifier used for the underlying component `id` attribute.
          */
@@ -4496,6 +4520,10 @@ declare namespace LocalJSX {
           * Emitted when a new option is created.
          */
         "onPdsMultiselectCreate"?: (event: PdsMultiselectCustomEvent<MultiselectCreateEventDetail>) => void;
+        /**
+          * Emitted when the dropdown is dismissed via Escape key or click outside.  This event fires only when the user explicitly dismisses the panel without making a selection: - ✅ Fires: Pressing Escape key while dropdown is open - ✅ Fires: Clicking outside the component while dropdown is open - ❌ Does NOT fire: When panel closes due to selection (including when `closePanelOnSelect` is true) - ❌ Does NOT fire: When panel closes programmatically via `closeDropdown()`  Equivalent to Sage's `onEscapeHook`. Use this to restore parent UI state or run cleanup when the user cancels their interaction.
+         */
+        "onPdsMultiselectDismiss"?: (event: PdsMultiselectCustomEvent<void>) => void;
         /**
           * Emitted to request more options (pagination).
          */
@@ -4522,6 +4550,11 @@ declare namespace LocalJSX {
           * @default false
          */
         "required"?: boolean;
+        /**
+          * Placeholder text for the search input inside the dropdown panel.
+          * @default 'Find...'
+         */
+        "searchPlaceholder"?: string;
         /**
           * Width of the trigger button (and reference for dropdown positioning).
           * @default '100%'
@@ -4958,13 +4991,14 @@ declare namespace LocalJSX {
          */
         "defaultSortDirection"?: 'asc' | 'desc';
         /**
-          * Determines if the should display a fixed first column.
+          * Hides the select-all checkbox in the table header while keeping individual row checkboxes functional. Only applies when `selectable` is true.
+          * @defaultValue false
          */
-        "fixedColumn"?: boolean;
+        "disableSelectAll"?: boolean;
         /**
-          * Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.
+          * Determines if the should display a fixed first column.
          */
-        "onPdsTableSelect"?: (event: PdsTableCustomEvent<{ rowIndex: number; isSelected: boolean }>) => void;
+        "fixedColumn"?: boolean;
         /**
           * Event that is emitted when the select all checkbox is clicked, carrying the selected value.
          */
@@ -4991,7 +5025,7 @@ declare namespace LocalJSX {
          */
         "cellAlign"?: 'start' | 'center' | 'end' | 'justify';
         /**
-          * Truncates content to a max width of 100px and adds an ellipsis.
+          * Truncates content to a max width and adds an ellipsis. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
          */
         "truncate"?: boolean;
     }
@@ -5132,7 +5166,7 @@ declare namespace LocalJSX {
   | 'strong'
   | 'em';
         /**
-          * If set or `true`, the text will be truncated. Must add a `width` to the element.
+          * If set or `true`, the text will be truncated. Must add a `width` to the element. When text overflows, a tooltip showing the full text will appear on hover/focus. Note: When truncate is enabled, the element automatically receives tabindex="0" for keyboard accessibility.
          */
         "truncate"?: boolean;
         /**

package/dist/types/utils/truncation-tooltip.d.ts

@@ -0,0 +1,21 @@
+import { PlacementType } from './types';
+export interface TruncationTooltipOptions {
+    /** The host element (for hover/focus listeners and positioning anchor) */
+    hostEl: HTMLElement;
+    /** The inner element where overflow actually occurs (inside shadow root) */
+    contentEl: HTMLElement;
+    /** Function that returns the full text to display in the tooltip */
+    getTooltipText: () => string;
+    /** Tooltip placement preference (default: 'top') */
+    placement?: PlacementType;
+}
+/**
+ * Sets up automatic tooltip behavior for a truncated element.
+ *
+ * When the element's text overflows, hovering or focusing the host element
+ * will display a tooltip showing the full text content. The tooltip is
+ * rendered as a portal on document.body and positioned with Floating UI.
+ *
+ * @returns A cleanup function that removes all listeners, observers, and DOM elements.
+ */
+export declare function setupTruncationTooltip(options: TruncationTooltipOptions): () => void;

package/dist/vscode.html-data.json

@@ -7411,7 +7411,7 @@
           "name": "truncate",
           "description": {
             "kind": "markdown",
-            "value": "Determines whether the `value` should truncate and display with an ellipsis.\n\n**Default:** `false`"
+            "value": "Determines whether the `value` should truncate and display with an ellipsis.\nWhen text overflows, a tooltip showing the full value will appear on hover/focus.\n\n**Default:** `false`"
           }
         },
         {
@@ -8269,7 +8269,7 @@
       "name": "pds-multiselect",
       "description": {
         "kind": "markdown",
-        "value": "The multiselect component allows users to select multiple options from a searchable dropdown list. It displays the selected count in the trigger and shows a searchable list of options in a dropdown panel.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#default), [With Preselected Values](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-preselected-values), [Hidden Selected Items](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#hidden-selected-items), [Max Selections](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#max-selections), [Custom Widths](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#custom-widths), [Async with URL](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#async-with-url), [Consumer-Managed Async](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#consumer-managed-async), [With Error State](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-error-state), [With Create Option](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-create-option)\n\n**Slots:**\n- `(default)` - Static option elements for the multiselect\n- `empty` - Custom empty state message when no options match\n- `loading` - Custom loading indicator\n\n**Events:**\n- `pdsMultiselectChange` - Emitted when selection changes.\n- `pdsMultiselectCreate` - Emitted when a new option is created.\n- `pdsMultiselectLoadOptions` - Emitted to request more options (pagination).\n- `pdsMultiselectSearch` - Emitted on search input (for consumer-managed async)."
+        "value": "The multiselect component allows users to select multiple options from a searchable dropdown list. It displays the selected count in the trigger and shows a searchable list of options in a dropdown panel.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#default), [With Preselected Values](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-preselected-values), [Hidden Selected Items](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#hidden-selected-items), [Max Selections](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#max-selections), [Custom Widths](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#custom-widths), [Async with URL](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#async-with-url), [Consumer-Managed Async](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#consumer-managed-async), [With Error State](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-error-state), [With Create Option](https://pine-design-system.netlify.app/?path=/docs/components-multiselect--docs#with-create-option)\n\n**Slots:**\n- `(default)` - Static option elements for the multiselect\n- `empty` - Custom empty state message when no options match\n- `loading` - Custom loading indicator\n\n**Events:**\n- `pdsMultiselectChange` - Emitted when selection changes.\n- `pdsMultiselectCreate` - Emitted when a new option is created.\n- `pdsMultiselectDismiss` - Emitted when the dropdown is dismissed via Escape key or click outside.\n\nThis event fires only when the user explicitly dismisses the panel without making a selection:\n- ✅ Fires: Pressing Escape key while dropdown is open\n- ✅ Fires: Clicking outside the component while dropdown is open\n- ❌ Does NOT fire: When panel closes due to selection (including when `closePanelOnSelect` is true)\n- ❌ Does NOT fire: When panel closes programmatically via `closeDropdown()`\n\nEquivalent to Sage's `onEscapeHook`. Use this to restore parent UI state or run cleanup when the user cancels their interaction.\n- `pdsMultiselectLoadOptions` - Emitted to request more options (pagination).\n- `pdsMultiselectSearch` - Emitted on search input (for consumer-managed async)."
       },
       "attributes": [
         {
@@ -8294,6 +8294,13 @@
             "value": "URL endpoint for async data fetching."
           }
         },
+        {
+          "name": "close-panel-on-select",
+          "description": {
+            "kind": "markdown",
+            "value": "Whether to close the panel after an option is selected.\nDefaults to `false` (panel stays open for multi-select).\n\n**Default:** `false`"
+          }
+        },
         {
           "name": "component-id",
           "description": {
@@ -8441,6 +8448,13 @@
             "value": "If true, the multiselect is required.\n\n**Default:** `false`"
           }
         },
+        {
+          "name": "search-placeholder",
+          "description": {
+            "kind": "markdown",
+            "value": "Placeholder text for the search input inside the dropdown panel.\n\n**Default:** `'Find...'`"
+          }
+        },
         {
           "name": "trigger-width",
           "description": {
@@ -9511,7 +9525,7 @@
       "name": "pds-table",
       "description": {
         "kind": "markdown",
-        "value": "The table (`pds-table`), consisting of rows and columns, is used to display and organize tabular data.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#default), [Compact](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#compact), [Head Background and Row Dividers](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#head-background-and-row-dividers), [Selectable](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#selectable), [Responsive](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#responsive), [Fixed Column](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#fixed-column), [Fixed w/ Checkbox](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#fixed-w/-checkbox), [Cell Truncation](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#cell-truncation), [Cell Alignment](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#cell-alignment), [Sorting](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#sorting), [Event payload](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#event-payload), [Preventing built-in sorting](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#preventing-built-in-sorting), [Default Sort](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#default-sort)\n\n**CSS Parts:**\n- `responsive-container` - No description\n- `responsive-table` - No description\n- `responsive-wrapper` - No description\n- `scroll-shadow-left` - No description\n- `scroll-shadow-right` - No description\n- `table` - No description\n- `table-inner` - No description\n\n**Events:**\n- `pdsTableSelect` - Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.\n- `pdsTableSelectAll` - Event that is emitted when the select all checkbox is clicked, carrying the selected value."
+        "value": "The table (`pds-table`), consisting of rows and columns, is used to display and organize tabular data.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#default), [Compact](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#compact), [Head Background and Row Dividers](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#head-background-and-row-dividers), [Selectable](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#selectable), [Selectable without Select All](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#selectable-without-select-all), [Responsive](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#responsive), [Fixed Column](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#fixed-column), [Fixed w/ Checkbox](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#fixed-w/-checkbox), [Cell Truncation](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#cell-truncation), [Cell Alignment](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#cell-alignment), [Sorting](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#sorting), [Event payload](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#event-payload), [Preventing built-in sorting](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#preventing-built-in-sorting), [Default Sort](https://pine-design-system.netlify.app/?path=/docs/components-table--docs#default-sort)\n\n**CSS Parts:**\n- `responsive-container` - No description\n- `responsive-table` - No description\n- `responsive-wrapper` - No description\n- `scroll-shadow-left` - No description\n- `scroll-shadow-right` - No description\n- `table` - No description\n- `table-inner` - No description\n\n**Events:**\n- `pdsTableSelectAll` - Event that is emitted when the select all checkbox is clicked, carrying the selected value."
       },
       "attributes": [
         {
@@ -9550,6 +9564,13 @@
             }
           ]
         },
+        {
+          "name": "disable-select-all",
+          "description": {
+            "kind": "markdown",
+            "value": "Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.\nOnly applies when `selectable` is true.\n\n**Default:** `false`"
+          }
+        },
         {
           "name": "fixed-column",
           "description": {
@@ -9632,7 +9653,7 @@
           "name": "truncate",
           "description": {
             "kind": "markdown",
-            "value": "Truncates content to a max width of 100px and adds an ellipsis."
+            "value": "Truncates content to a max width and adds an ellipsis.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility."
           }
         }
       ],
@@ -10018,7 +10039,7 @@
           "name": "truncate",
           "description": {
             "kind": "markdown",
-            "value": "If set or `true`, the text will be truncated. Must add a `width` to the element."
+            "value": "If set or `true`, the text will be truncated. Must add a `width` to the element.\nWhen text overflows, a tooltip showing the full text will appear on hover/focus.\nNote: When truncate is enabled, the element automatically receives tabindex=\"0\" for keyboard accessibility."
           }
         },
         {