@pine-ds/core 3.16.3 → 3.18.0

package/dist/collection/utils/truncation-tooltip.js

@@ -0,0 +1,242 @@
+import { computePosition, flip, offset, shift, } from "@floating-ui/dom";
+/** CSS class prefix used for truncation tooltip portal elements */
+const TOOLTIP_CLASS = 'pds-truncation-tooltip';
+/**
+ * Injects the truncation tooltip styles into the document head.
+ * Uses the same design tokens as pds-tooltip for visual consistency.
+ * Only injects once — checks the DOM to avoid duplicates.
+ *
+ * Z-Index Strategy:
+ * Uses --pine-z-index-nuclear (9999) to ensure tooltips appear above all other UI elements.
+ * This is necessary because tooltips are portaled to document.body and must overlay:
+ * - Modal dialogs
+ * - Dropdown menus
+ * - Other floating UI elements
+ * If you encounter z-index conflicts, ensure your overlays use Pine's z-index tokens
+ * or adjust --pine-z-index-nuclear in your theme.
+ */
+function injectStyles() {
+    if (document.querySelector('[data-pds-truncation-tooltip]'))
+        return;
+    const style = document.createElement('style');
+    style.setAttribute('data-pds-truncation-tooltip', '');
+    style.textContent = `
+    .${TOOLTIP_CLASS} {
+      position: fixed;
+      z-index: var(--pine-z-index-nuclear, 9999);
+    }
+    .${TOOLTIP_CLASS}__content {
+      background-color: var(--pine-color-primary, #1a1a2e);
+      border-radius: calc(var(--pine-dimension-xs, 4px) * 1.25);
+      box-shadow: var(--pine-box-shadow, 0 2px 8px rgba(0,0,0,0.15));
+      color: var(--pine-color-text-primary, #fff);
+      cursor: text;
+      font-family: var(--pine-font-family-body, sans-serif);
+      font-size: var(--pine-font-size-body-sm, 0.875rem);
+      letter-spacing: var(--pine-letter-spacing, normal);
+      line-height: var(--pine-line-height-body, 1.5);
+      max-width: 320px;
+      opacity: 0;
+      padding: var(--pine-dimension-xs, 4px) calc(var(--pine-dimension-md, 12px) / 2);
+      transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
+      user-select: text;
+      visibility: hidden;
+      width: max-content;
+      word-break: break-word;
+    }
+    .${TOOLTIP_CLASS}--visible .${TOOLTIP_CLASS}__content {
+      opacity: 1;
+      visibility: visible;
+    }
+  `;
+    document.head.appendChild(style);
+}
+/**
+ * Checks if an element's content is overflowing horizontally (i.e. text is truncated).
+ */
+function isOverflowing(el) {
+    return el.scrollWidth > el.clientWidth;
+}
+/**
+ * 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 function setupTruncationTooltip(options) {
+    const { hostEl, contentEl, getTooltipText, placement = 'top' } = options;
+    injectStyles();
+    let portalEl = null;
+    let isHovering = false;
+    let isHoveringPortal = false;
+    let isFocused = false;
+    let hideTimeout = null;
+    let resizeObserver = null;
+    let resizeDebounce = null;
+    // Use ResizeObserver to re-evaluate overflow when the element resizes
+    // Debounced to prevent performance issues during rapid window resizing
+    if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(() => {
+            if (resizeDebounce) {
+                clearTimeout(resizeDebounce);
+            }
+            resizeDebounce = setTimeout(() => {
+                resizeDebounce = null;
+                // If tooltip is showing but text no longer overflows, hide it
+                if (portalEl && portalEl.isConnected && !isOverflowing(contentEl)) {
+                    hideTooltip();
+                }
+            }, 100);
+        });
+        resizeObserver.observe(contentEl);
+    }
+    function createPortal() {
+        if (portalEl)
+            return;
+        const text = getTooltipText();
+        if (!text || text.trim() === '')
+            return;
+        portalEl = document.createElement('div');
+        portalEl.className = TOOLTIP_CLASS;
+        portalEl.setAttribute('role', 'tooltip');
+        portalEl.setAttribute('aria-hidden', 'false');
+        const contentDiv = document.createElement('div');
+        contentDiv.className = `${TOOLTIP_CLASS}__content`;
+        contentDiv.textContent = text.trim();
+        portalEl.appendChild(contentDiv);
+        document.body.appendChild(portalEl);
+        // Allow the user to hover into the tooltip to select/copy text
+        portalEl.addEventListener('mouseenter', handlePortalMouseEnter);
+        portalEl.addEventListener('mouseleave', handlePortalMouseLeave);
+        positionTooltip().then(() => {
+            if (portalEl) {
+                portalEl.classList.add(`${TOOLTIP_CLASS}--visible`);
+            }
+        });
+    }
+    async function positionTooltip() {
+        if (!portalEl)
+            return;
+        try {
+            const { x, y } = await computePosition(hostEl, portalEl, {
+                placement,
+                strategy: 'fixed',
+                middleware: [offset(4), flip(), shift({ padding: 5 })],
+            });
+            Object.assign(portalEl.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+        }
+        catch (_a) {
+            // Fallback: position above the element with bounds checking
+            if (portalEl) {
+                const rect = hostEl.getBoundingClientRect();
+                const portalRect = portalEl.getBoundingClientRect();
+                const padding = 5;
+                // Ensure tooltip stays within viewport bounds
+                const left = Math.max(padding, Math.min(rect.left, window.innerWidth - portalRect.width - padding));
+                const top = Math.max(padding, rect.top - portalRect.height - 8);
+                portalEl.style.left = `${left}px`;
+                portalEl.style.top = `${top}px`;
+            }
+        }
+    }
+    function removePortal() {
+        if (portalEl) {
+            portalEl.removeEventListener('mouseenter', handlePortalMouseEnter);
+            portalEl.removeEventListener('mouseleave', handlePortalMouseLeave);
+            portalEl.classList.remove(`${TOOLTIP_CLASS}--visible`);
+            // Check if portal is still in the DOM before removing
+            if (portalEl.parentNode && portalEl.isConnected) {
+                try {
+                    portalEl.parentNode.removeChild(portalEl);
+                }
+                catch (e) {
+                    // Portal was already removed, ignore error
+                }
+            }
+            portalEl = null;
+        }
+    }
+    function cancelHideTimeout() {
+        if (hideTimeout !== null) {
+            clearTimeout(hideTimeout);
+            hideTimeout = null;
+        }
+    }
+    function showTooltip() {
+        cancelHideTimeout();
+        if (!isOverflowing(contentEl))
+            return;
+        createPortal();
+    }
+    function hideTooltip() {
+        if (isHovering || isHoveringPortal || isFocused)
+            return;
+        removePortal();
+    }
+    /**
+     * Schedules tooltip removal after a short delay.
+     *
+     * The 100ms delay serves two purposes:
+     * 1. Gives users time to move their cursor from the truncated text to the tooltip portal
+     *    without it closing, enabling text selection/copying from the tooltip
+     * 2. Prevents flickering when the user briefly moves the cursor during normal interaction
+     */
+    function scheduleHide() {
+        cancelHideTimeout();
+        hideTimeout = setTimeout(() => {
+            hideTimeout = null;
+            hideTooltip();
+        }, 100);
+    }
+    function handleMouseEnter() {
+        isHovering = true;
+        showTooltip();
+    }
+    function handleMouseLeave() {
+        isHovering = false;
+        scheduleHide();
+    }
+    function handlePortalMouseEnter() {
+        isHoveringPortal = true;
+        cancelHideTimeout();
+    }
+    function handlePortalMouseLeave() {
+        isHoveringPortal = false;
+        scheduleHide();
+    }
+    function handleFocusIn() {
+        isFocused = true;
+        showTooltip();
+    }
+    function handleFocusOut() {
+        isFocused = false;
+        scheduleHide();
+    }
+    hostEl.addEventListener('mouseenter', handleMouseEnter);
+    hostEl.addEventListener('mouseleave', handleMouseLeave);
+    hostEl.addEventListener('focusin', handleFocusIn);
+    hostEl.addEventListener('focusout', handleFocusOut);
+    // Return cleanup function
+    return () => {
+        cancelHideTimeout();
+        if (resizeDebounce) {
+            clearTimeout(resizeDebounce);
+            resizeDebounce = null;
+        }
+        if (resizeObserver) {
+            resizeObserver.disconnect();
+        }
+        hostEl.removeEventListener('mouseenter', handleMouseEnter);
+        hostEl.removeEventListener('mouseleave', handleMouseLeave);
+        hostEl.removeEventListener('focusin', handleFocusIn);
+        hostEl.removeEventListener('focusout', handleFocusOut);
+        removePortal();
+    };
+}
+//# sourceMappingURL=truncation-tooltip.js.map

package/dist/collection/utils/truncation-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"truncation-tooltip.js","sourceRoot":"","sources":["../../../src/utils/truncation-tooltip.ts"],"names":[],"mappings":"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","sourcesContent":["import { PlacementType } from './types';\nimport {\n  computePosition,\n  flip,\n  offset,\n  shift,\n} from '@floating-ui/dom';\n\nexport interface TruncationTooltipOptions {\n  /** The host element (for hover/focus listeners and positioning anchor) */\n  hostEl: HTMLElement;\n  /** The inner element where overflow actually occurs (inside shadow root) */\n  contentEl: HTMLElement;\n  /** Function that returns the full text to display in the tooltip */\n  getTooltipText: () => string;\n  /** Tooltip placement preference (default: 'top') */\n  placement?: PlacementType;\n}\n\n/** CSS class prefix used for truncation tooltip portal elements */\nconst TOOLTIP_CLASS = 'pds-truncation-tooltip';\n\n/**\n * Injects the truncation tooltip styles into the document head.\n * Uses the same design tokens as pds-tooltip for visual consistency.\n * Only injects once — checks the DOM to avoid duplicates.\n *\n * Z-Index Strategy:\n * Uses --pine-z-index-nuclear (9999) to ensure tooltips appear above all other UI elements.\n * This is necessary because tooltips are portaled to document.body and must overlay:\n * - Modal dialogs\n * - Dropdown menus\n * - Other floating UI elements\n * If you encounter z-index conflicts, ensure your overlays use Pine's z-index tokens\n * or adjust --pine-z-index-nuclear in your theme.\n */\nfunction injectStyles(): void {\n  if (document.querySelector('[data-pds-truncation-tooltip]')) return;\n\n  const style = document.createElement('style');\n  style.setAttribute('data-pds-truncation-tooltip', '');\n  style.textContent = `\n    .${TOOLTIP_CLASS} {\n      position: fixed;\n      z-index: var(--pine-z-index-nuclear, 9999);\n    }\n    .${TOOLTIP_CLASS}__content {\n      background-color: var(--pine-color-primary, #1a1a2e);\n      border-radius: calc(var(--pine-dimension-xs, 4px) * 1.25);\n      box-shadow: var(--pine-box-shadow, 0 2px 8px rgba(0,0,0,0.15));\n      color: var(--pine-color-text-primary, #fff);\n      cursor: text;\n      font-family: var(--pine-font-family-body, sans-serif);\n      font-size: var(--pine-font-size-body-sm, 0.875rem);\n      letter-spacing: var(--pine-letter-spacing, normal);\n      line-height: var(--pine-line-height-body, 1.5);\n      max-width: 320px;\n      opacity: 0;\n      padding: var(--pine-dimension-xs, 4px) calc(var(--pine-dimension-md, 12px) / 2);\n      transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;\n      user-select: text;\n      visibility: hidden;\n      width: max-content;\n      word-break: break-word;\n    }\n    .${TOOLTIP_CLASS}--visible .${TOOLTIP_CLASS}__content {\n      opacity: 1;\n      visibility: visible;\n    }\n  `;\n  document.head.appendChild(style);\n}\n\n/**\n * Checks if an element's content is overflowing horizontally (i.e. text is truncated).\n */\nfunction isOverflowing(el: HTMLElement): boolean {\n  return el.scrollWidth > el.clientWidth;\n}\n\n/**\n * Sets up automatic tooltip behavior for a truncated element.\n *\n * When the element's text overflows, hovering or focusing the host element\n * will display a tooltip showing the full text content. The tooltip is\n * rendered as a portal on document.body and positioned with Floating UI.\n *\n * @returns A cleanup function that removes all listeners, observers, and DOM elements.\n */\nexport function setupTruncationTooltip(options: TruncationTooltipOptions): () => void {\n  const { hostEl, contentEl, getTooltipText, placement = 'top' } = options;\n\n  injectStyles();\n\n  let portalEl: HTMLElement | null = null;\n  let isHovering = false;\n  let isHoveringPortal = false;\n  let isFocused = false;\n  let hideTimeout: ReturnType<typeof setTimeout> | null = null;\n  let resizeObserver: ResizeObserver | null = null;\n  let resizeDebounce: ReturnType<typeof setTimeout> | null = null;\n\n  // Use ResizeObserver to re-evaluate overflow when the element resizes\n  // Debounced to prevent performance issues during rapid window resizing\n  if (typeof ResizeObserver !== 'undefined') {\n    resizeObserver = new ResizeObserver(() => {\n      if (resizeDebounce) {\n        clearTimeout(resizeDebounce);\n      }\n      resizeDebounce = setTimeout(() => {\n        resizeDebounce = null;\n        // If tooltip is showing but text no longer overflows, hide it\n        if (portalEl && portalEl.isConnected && !isOverflowing(contentEl)) {\n          hideTooltip();\n        }\n      }, 100);\n    });\n    resizeObserver.observe(contentEl);\n  }\n\n  function createPortal(): void {\n    if (portalEl) return;\n\n    const text = getTooltipText();\n    if (!text || text.trim() === '') return;\n\n    portalEl = document.createElement('div');\n    portalEl.className = TOOLTIP_CLASS;\n    portalEl.setAttribute('role', 'tooltip');\n    portalEl.setAttribute('aria-hidden', 'false');\n\n    const contentDiv = document.createElement('div');\n    contentDiv.className = `${TOOLTIP_CLASS}__content`;\n    contentDiv.textContent = text.trim();\n\n    portalEl.appendChild(contentDiv);\n    document.body.appendChild(portalEl);\n\n    // Allow the user to hover into the tooltip to select/copy text\n    portalEl.addEventListener('mouseenter', handlePortalMouseEnter);\n    portalEl.addEventListener('mouseleave', handlePortalMouseLeave);\n\n    positionTooltip().then(() => {\n      if (portalEl) {\n        portalEl.classList.add(`${TOOLTIP_CLASS}--visible`);\n      }\n    });\n  }\n\n  async function positionTooltip(): Promise<void> {\n    if (!portalEl) return;\n\n    try {\n      const { x, y } = await computePosition(hostEl, portalEl, {\n        placement,\n        strategy: 'fixed',\n        middleware: [offset(4), flip(), shift({ padding: 5 })],\n      });\n\n      Object.assign(portalEl.style, {\n        left: `${x}px`,\n        top: `${y}px`,\n      });\n    } catch {\n      // Fallback: position above the element with bounds checking\n      if (portalEl) {\n        const rect = hostEl.getBoundingClientRect();\n        const portalRect = portalEl.getBoundingClientRect();\n        const padding = 5;\n\n        // Ensure tooltip stays within viewport bounds\n        const left = Math.max(padding, Math.min(rect.left, window.innerWidth - portalRect.width - padding));\n        const top = Math.max(padding, rect.top - portalRect.height - 8);\n\n        portalEl.style.left = `${left}px`;\n        portalEl.style.top = `${top}px`;\n      }\n    }\n  }\n\n  function removePortal(): void {\n    if (portalEl) {\n      portalEl.removeEventListener('mouseenter', handlePortalMouseEnter);\n      portalEl.removeEventListener('mouseleave', handlePortalMouseLeave);\n      portalEl.classList.remove(`${TOOLTIP_CLASS}--visible`);\n      // Check if portal is still in the DOM before removing\n      if (portalEl.parentNode && portalEl.isConnected) {\n        try {\n          portalEl.parentNode.removeChild(portalEl);\n        } catch (e) {\n          // Portal was already removed, ignore error\n        }\n      }\n      portalEl = null;\n    }\n  }\n\n  function cancelHideTimeout(): void {\n    if (hideTimeout !== null) {\n      clearTimeout(hideTimeout);\n      hideTimeout = null;\n    }\n  }\n\n  function showTooltip(): void {\n    cancelHideTimeout();\n    if (!isOverflowing(contentEl)) return;\n    createPortal();\n  }\n\n  function hideTooltip(): void {\n    if (isHovering || isHoveringPortal || isFocused) return;\n    removePortal();\n  }\n\n  /**\n   * Schedules tooltip removal after a short delay.\n   *\n   * The 100ms delay serves two purposes:\n   * 1. Gives users time to move their cursor from the truncated text to the tooltip portal\n   *    without it closing, enabling text selection/copying from the tooltip\n   * 2. Prevents flickering when the user briefly moves the cursor during normal interaction\n   */\n  function scheduleHide(): void {\n    cancelHideTimeout();\n    hideTimeout = setTimeout(() => {\n      hideTimeout = null;\n      hideTooltip();\n    }, 100);\n  }\n\n  function handleMouseEnter(): void {\n    isHovering = true;\n    showTooltip();\n  }\n\n  function handleMouseLeave(): void {\n    isHovering = false;\n    scheduleHide();\n  }\n\n  function handlePortalMouseEnter(): void {\n    isHoveringPortal = true;\n    cancelHideTimeout();\n  }\n\n  function handlePortalMouseLeave(): void {\n    isHoveringPortal = false;\n    scheduleHide();\n  }\n\n  function handleFocusIn(): void {\n    isFocused = true;\n    showTooltip();\n  }\n\n  function handleFocusOut(): void {\n    isFocused = false;\n    scheduleHide();\n  }\n\n  hostEl.addEventListener('mouseenter', handleMouseEnter);\n  hostEl.addEventListener('mouseleave', handleMouseLeave);\n  hostEl.addEventListener('focusin', handleFocusIn);\n  hostEl.addEventListener('focusout', handleFocusOut);\n\n  // Return cleanup function\n  return () => {\n    cancelHideTimeout();\n    if (resizeDebounce) {\n      clearTimeout(resizeDebounce);\n      resizeDebounce = null;\n    }\n    if (resizeObserver) {\n      resizeObserver.disconnect();\n    }\n    hostEl.removeEventListener('mouseenter', handleMouseEnter);\n    hostEl.removeEventListener('mouseleave', handleMouseLeave);\n    hostEl.removeEventListener('focusin', handleFocusIn);\n    hostEl.removeEventListener('focusout', handleFocusOut);\n    removePortal();\n  };\n}\n"]}

package/dist/docs.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-02-10T20:18:26",
+  "timestamp": "2026-02-18T18:56:56",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.38.3",
@@ -13905,7 +13905,7 @@
           "mutable": false,
           "attr": "truncate",
           "reflectToAttr": false,
-          "docs": "Determines whether the `value` should truncate and display with an ellipsis.",
+          "docs": "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.",
           "docsTags": [
             {
               "name": "defaultValue",
@@ -16812,6 +16812,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "closePanelOnSelect",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "close-panel-on-select",
+          "reflectToAttr": false,
+          "docs": "Whether to close the panel after an option is selected.\nDefaults to `false` (panel stays open for multi-select).",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "componentId",
           "type": "string",
@@ -17100,6 +17129,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "hideSelectedItems",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "hide-selected-items",
+          "reflectToAttr": false,
+          "docs": "Hides the selected items summary section in the dropdown panel.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "invalid",
           "type": "boolean",
@@ -17388,6 +17446,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "searchPlaceholder",
+          "type": "string",
+          "complexType": {
+            "original": "string",
+            "resolved": "string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "search-placeholder",
+          "reflectToAttr": false,
+          "docs": "Placeholder text for the search input inside the dropdown panel.",
+          "docsTags": [
+            {
+              "name": "default",
+              "text": "'Find...'"
+            }
+          ],
+          "default": "'Find...'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "triggerWidth",
           "type": "string",
@@ -17447,6 +17534,28 @@
         }
       ],
       "methods": [
+        {
+          "name": "clear",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "complexType": {
+            "signature": "() => Promise<void>",
+            "parameters": [],
+            "references": {
+              "Promise": {
+                "location": "global",
+                "id": "global::Promise"
+              }
+            },
+            "return": "Promise<void>"
+          },
+          "signature": "clear() => Promise<void>",
+          "parameters": [],
+          "docs": "Clears all selected values and resets the component.",
+          "docsTags": []
+        },
         {
           "name": "setFocus",
           "returns": {
@@ -17511,6 +17620,20 @@
           "docs": "Emitted when a new option is created.",
           "docsTags": []
         },
+        {
+          "event": "pdsMultiselectDismiss",
+          "detail": "void",
+          "bubbles": true,
+          "complexType": {
+            "original": "void",
+            "resolved": "void",
+            "references": {}
+          },
+          "cancelable": true,
+          "composed": true,
+          "docs": "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.",
+          "docsTags": []
+        },
         {
           "event": "pdsMultiselectLoadOptions",
           "detail": "MultiselectLoadOptionsEventDetail",
@@ -20738,6 +20861,35 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "disableSelectAll",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "disable-select-all",
+          "reflectToAttr": false,
+          "docs": "Hides the select-all checkbox in the table header while keeping individual row checkboxes functional.\nOnly applies when `selectable` is true.",
+          "docsTags": [
+            {
+              "name": "defaultValue",
+              "text": "false"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "fixedColumn",
           "type": "boolean",
@@ -20839,20 +20991,6 @@
       ],
       "methods": [],
       "events": [
-        {
-          "event": "pdsTableSelect",
-          "detail": "{ rowIndex: number; isSelected: boolean; }",
-          "bubbles": true,
-          "complexType": {
-            "original": "{ rowIndex: number; isSelected: boolean }",
-            "resolved": "{ rowIndex: number; isSelected: boolean; }",
-            "references": {}
-          },
-          "cancelable": true,
-          "composed": true,
-          "docs": "Event that is emitted when the checkbox is clicked, carrying the rowIndex and selected value.",
-          "docsTags": []
-        },
         {
           "event": "pdsTableSelectAll",
           "detail": "{ isSelected: boolean; }",
@@ -21001,7 +21139,7 @@
           "mutable": false,
           "attr": "truncate",
           "reflectToAttr": false,
-          "docs": "Truncates content to a max width of 100px and adds an ellipsis.",
+          "docs": "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.",
           "docsTags": [],
           "values": [
             {
@@ -22022,7 +22160,7 @@
           "mutable": false,
           "attr": "truncate",
           "reflectToAttr": true,
-          "docs": "If set or `true`, the text will be truncated. Must add a `width` to the element.",
+          "docs": "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.",
           "docsTags": [],
           "values": [
             {

package/dist/esm/{index-D094LgxJ.js → index-BFkDH5XU.js}

@@ -1,4 +1,4 @@
-/* pds-icons v9.15.0, ES Modules */
+/* pds-icons v9.16.0, ES Modules */
 
 const addCircle = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18M1 12C1 5.925 5.925 1 12 1s11 4.925 11 11-4.925 11-11 11S1 18.075 1 12m11-5a1 1 0 0 1 1 1v3h3a1 1 0 1 1 0 2h-3v3a1 1 0 1 1-2 0v-3H8a1 1 0 1 1 0-2h3V8a1 1 0 0 1 1-1'/></svg>";
 const caretDown = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M5.293 8.293a1 1 0 0 1 1.414 0L12 13.586l5.293-5.293a1 1 0 1 1 1.414 1.414l-6 6a1 1 0 0 1-1.414 0l-6-6a1 1 0 0 1 0-1.414'/></svg>";
@@ -15,6 +15,6 @@ const upSmall = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'
 const userFilled = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' class='pdsicon'><path fill-rule='evenodd' d='M8.786 14.5h6.428c.727 0 1.222 0 1.654.076a5 5 0 0 1 4.056 4.056c.076.432.076.927.076 1.654 0 .158.005.318-.023.474a1.5 1.5 0 0 1-1.216 1.217c-.137.024-.28.023-.351.023Q12 21.961 4.59 22c-.07 0-.214.001-.35-.023a1.5 1.5 0 0 1-1.217-1.216c-.028-.157-.023-.317-.023-.475 0-.727 0-1.222.076-1.654a5 5 0 0 1 4.056-4.056c.432-.076.927-.076 1.654-.076M6.5 7.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0'/></svg>";
 
 export { copy as a, danger as b, checkCircleFilled as c, downSmall as d, enlarge as e, addCircle as f, caretDown as g, handle as h, upSmall as i, launch as l, remove as r, trash as t, userFilled as u };
-//# sourceMappingURL=index-D094LgxJ.js.map
+//# sourceMappingURL=index-BFkDH5XU.js.map
 
-//# sourceMappingURL=index-D094LgxJ.js.map
+//# sourceMappingURL=index-BFkDH5XU.js.map