@pine-ds/core 4.7.1 → 4.8.0

package/dist/types/components/pds-popover/pds-popover.d.ts

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import { PlacementType } from "../../utils/types";
+import { PlacementType, PopoverPaddingType } from "../../utils/types";
 import { PdsPopoverEventDetail } from './popover-interface';
 /**
  * @slot trigger - The trigger element for the popover
@@ -56,6 +56,20 @@ export declare class PdsPopover {
      * Timestamp when popover was opened (for preventing immediate close)
      */
     private openTimestamp;
+    /**
+     * Set while hover holds the popover open, until a click pins it or it closes
+     */
+    private hoverOpened;
+    private hoverOpenTimer?;
+    private hoverCloseTimer?;
+    /**
+     * Set when the pointer left while focus was in the panel, so focus leaving it closes it instead
+     */
+    private closeWhenFocusLeaves;
+    /**
+     * How far the pointer was from the panel at its last move after leaving the trigger
+     */
+    private panelDistance;
     /**
      * Instance counter for unique IDs
      */
@@ -80,6 +94,13 @@ export declare class PdsPopover {
      * @defaultValue "show"
      */
     popoverTargetAction: 'show' | 'toggle' | 'hide';
+    /**
+     * Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes
+     * when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
+     * @defaultValue "click"
+     */
+    openOn?: 'click' | 'hover';
+    protected openOnChanged(): void;
     /**
      * 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.
@@ -94,6 +115,13 @@ export declare class PdsPopover {
      * @defaultValue 352
      */
     maxWidth?: number;
+    /**
+     * Sets the padding of the popover content
+     * @defaultValue "md"
+     */
+    padding?: PopoverPaddingType;
+    applyPadding(): void;
+    private paddingToken;
     /**
      * Determines the preferred position of the popover
      * @defaultValue "right"
@@ -116,6 +144,20 @@ export declare class PdsPopover {
      * Handles clicks on the trigger element
      */
     private handleTriggerClick;
+    private listenForHover;
+    private stopListeningForHover;
+    private handleHoverEnter;
+    private handleHoverLeave;
+    private handleMoveTowardPanel;
+    private distanceToPanel;
+    private handleHoverFocusOut;
+    private closeFromHover;
+    /**
+     * Keeps a popover that hover opened open, closing from then on as one opened by a click does. A
+     * manual one gives up Escape again, which it took only while hover held it.
+     */
+    private pin;
+    private clearHoverTimers;
     connectedCallback(): void;
     disconnectedCallback(): void;
     /**

package/dist/types/components.d.ts

@@ -8,7 +8,7 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BoxColumnType, BoxShadowSizeType, BoxSpacingType, TextSizeType } from "./utils/types";
 import { Event } from "./stencil-public-runtime";
 import { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
-import { ChipSentimentType, ChipSizeType, ChipVariantType, ModalSizeType, PlacementType } from "./utils/types";
+import { ChipSentimentType, ChipSizeType, ChipVariantType, ModalSizeType, PlacementType, PopoverPaddingType } from "./utils/types";
 import { ComboboxLoadOptionsEventDetail, ComboboxOption, ComboboxSearchEventDetail } from "./components/pds-combobox/combobox-interface";
 import { DatepickerChangeEventDetail, DatepickerPreset } from "./components/pds-datepicker/datepicker-interface";
 import { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
@@ -22,7 +22,7 @@ import { TextareaChangeEventDetail, TextareaInputEventDetail } from "./component
 export { BoxColumnType, BoxShadowSizeType, BoxSpacingType, TextSizeType } from "./utils/types";
 export { Event } from "./stencil-public-runtime";
 export { CheckboxChangeEventDetail } from "./components/pds-checkbox/checkbox-interface";
-export { ChipSentimentType, ChipSizeType, ChipVariantType, ModalSizeType, PlacementType } from "./utils/types";
+export { ChipSentimentType, ChipSizeType, ChipVariantType, ModalSizeType, PlacementType, PopoverPaddingType } from "./utils/types";
 export { ComboboxLoadOptionsEventDetail, ComboboxOption, ComboboxSearchEventDetail } from "./components/pds-combobox/combobox-interface";
 export { DatepickerChangeEventDetail, DatepickerPreset } from "./components/pds-datepicker/datepicker-interface";
 export { PdsFilterClearEventDetail, PdsFilterCloseEventDetail, PdsFilterOpenEventDetail, PdsFilterVariant } from "./components/pds-filters/pds-filter/filter-interface";
@@ -1531,20 +1531,25 @@ export namespace Components {
          */
         "disabled": boolean;
         /**
-          * Prompts the user to save the linked URL instead of navigating to it. It can be used without a value to download with the default filename, or with a string value to suggest a specific filename for the download. Only applies when href is set.
+          * Prompts the user to save the linked URL instead of navigating to it. It can be used without a value to download with the default filename, or with a string value to suggest a specific filename for the download. Only applies when href is set. Ignored when `informational` is set.
          */
         "download"?: string;
         /**
-          * Determines whether the link should open in a new tab and display an external icon. This is a simpler alternative to using `target="_blank"` for the common case.
+          * Determines whether the link should open in a new tab and display an external icon. This is a simpler alternative to using `target="_blank"` for the common case. Ignored when `informational` is set.
           * @defaultValue false
          */
         "external": boolean;
         /**
-          * If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.
+          * If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button. Ignored when `informational` is set.
          */
         "href": string | undefined;
         /**
-          * Specifies where to open the linked document when href is provided. Takes precedence over the `external` prop if both are set. Only applies when href is set.
+          * It determines whether or not the dropdown-item is informational: text that the arrow keys reach but that can't be activated. Takes precedence over `href` and `destructive`. Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
+          * @defaultValue false
+         */
+        "informational": boolean;
+        /**
+          * Specifies where to open the linked document when href is provided. Takes precedence over the `external` prop if both are set. Only applies when href is set. Ignored when `informational` is set.
           * @defaultValue undefined
          */
         "target"?: '_blank' | '_self' | '_parent' | '_top';
@@ -2156,6 +2161,16 @@ export namespace Components {
           * @defaultValue 352
          */
         "maxWidth"?: number;
+        /**
+          * Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
+          * @defaultValue "click"
+         */
+        "openOn"?: 'click' | 'hover';
+        /**
+          * Sets the padding of the popover content
+          * @defaultValue "md"
+         */
+        "padding"?: PopoverPaddingType;
         /**
           * Determines the preferred position of the popover
           * @defaultValue "right"
@@ -5396,24 +5411,29 @@ declare namespace LocalJSX {
          */
         "disabled"?: boolean;
         /**
-          * Prompts the user to save the linked URL instead of navigating to it. It can be used without a value to download with the default filename, or with a string value to suggest a specific filename for the download. Only applies when href is set.
+          * Prompts the user to save the linked URL instead of navigating to it. It can be used without a value to download with the default filename, or with a string value to suggest a specific filename for the download. Only applies when href is set. Ignored when `informational` is set.
          */
         "download"?: string;
         /**
-          * Determines whether the link should open in a new tab and display an external icon. This is a simpler alternative to using `target="_blank"` for the common case.
+          * Determines whether the link should open in a new tab and display an external icon. This is a simpler alternative to using `target="_blank"` for the common case. Ignored when `informational` is set.
           * @defaultValue false
          */
         "external"?: boolean;
         /**
-          * If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.
+          * If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button. Ignored when `informational` is set.
          */
         "href"?: string | undefined;
+        /**
+          * It determines whether or not the dropdown-item is informational: text that the arrow keys reach but that can't be activated. Takes precedence over `href` and `destructive`. Screen readers announce it as dimmed or unavailable, the same way as a disabled item.
+          * @defaultValue false
+         */
+        "informational"?: boolean;
         /**
           * Emitted when the dropdown-item is clicked.
          */
         "onPdsClick"?: (event: PdsDropdownMenuItemCustomEvent<{itemIndex: number, item: HTMLPdsDropdownMenuItemElement, content: string}>) => void;
         /**
-          * Specifies where to open the linked document when href is provided. Takes precedence over the `external` prop if both are set. Only applies when href is set.
+          * Specifies where to open the linked document when href is provided. Takes precedence over the `external` prop if both are set. Only applies when href is set. Ignored when `informational` is set.
           * @defaultValue undefined
          */
         "target"?: '_blank' | '_self' | '_parent' | '_top';
@@ -6069,6 +6089,16 @@ declare namespace LocalJSX {
           * Emitted when the popover is opened
          */
         "onPdsPopoverOpen"?: (event: PdsPopoverCustomEvent<PdsPopoverEventDetail>) => void;
+        /**
+          * Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes when the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.
+          * @defaultValue "click"
+         */
+        "openOn"?: 'click' | 'hover';
+        /**
+          * Sets the padding of the popover content
+          * @defaultValue "md"
+         */
+        "padding"?: PopoverPaddingType;
         /**
           * Determines the preferred position of the popover
           * @defaultValue "right"
@@ -7227,6 +7257,7 @@ declare namespace LocalJSX {
         "disabled": boolean;
         "download": string;
         "href": string | undefined;
+        "informational": boolean;
         "external": boolean;
         "target": '_blank' | '_self' | '_parent' | '_top';
     }
@@ -7368,9 +7399,11 @@ declare namespace LocalJSX {
     }
     interface PdsPopoverAttributes {
         "popoverTargetAction": 'show' | 'toggle' | 'hide';
+        "openOn": 'click' | 'hover';
         "popoverType": 'auto' | 'manual';
         "componentId": string;
         "maxWidth": number;
+        "padding": PopoverPaddingType;
         "placement": PlacementType;
     }
     interface PdsProgressAttributes {

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

@@ -25,7 +25,7 @@ export interface TruncationTooltipOptions {
      */
     manageTabIndex?: boolean;
     /**
-     * The element whose focus shows the tooltip (default: `hostEl`).
+     * The element whose keyboard focus shows the tooltip (default: `hostEl`).
      *
      * Pass the wrapping control when it sits outside `hostEl`, so focusing it
      * still reveals the text once `manageTabIndex` is `false`.
@@ -35,9 +35,9 @@ export interface TruncationTooltipOptions {
 /**
  * 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.
+ * When the element's text overflows, hovering the host element or giving it
+ * keyboard focus will display a tooltip showing the full text content. The
+ * tooltip is rendered as a portal on document.body and positioned with Floating UI.
  *
  * Also owns the element's `tabindex` while it is clipped — see syncTabIndex.
  *

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

@@ -6,5 +6,6 @@ export type ChipSentimentType = 'accent' | 'brand' | 'danger' | 'info' | 'neutra
 export type ModalSizeType = 'sm' | 'md' | 'lg' | 'fullscreen';
 export type ChipSizeType = 'sm' | 'md' | 'lg';
 export type ChipVariantType = 'text' | 'tag' | 'dropdown';
+export type PopoverPaddingType = Extract<BoxSpacingType, 'none' | 'xs' | 'sm' | 'md'>;
 export declare const TEXT_SIZES: readonly ["2xl", "xl", "lg", "md", "sm", "xs", "2xs", "h1", "h2", "h3", "h4", "h5", "h6"];
 export type TextSizeType = (typeof TEXT_SIZES)[number];

package/dist/vscode.html-data.json

@@ -8311,7 +8311,7 @@
       "name": "pds-dropdown-menu",
       "description": {
         "kind": "markdown",
-        "value": "Dropdown Menus reveal a list of actions from a button trigger, implementing the WAI-ARIA Menu Button pattern. Use them to conserve space when options do not need to be visible at all times.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#default), [With Separator](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-separator), [With Icons](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-icons), [With Header](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-header), [With Links](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-links), [With External Links](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-external-links), [Mixing Menu Items with Raw Elements](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#mixing-menu-items-with-raw-elements), [With Disabled Items](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-disabled-items), [With Custom Placement](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-custom-placement), [Scrollable Menu](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#scrollable-menu)\n\n**Slots:**\n- `header` - Non-interactive content displayed above the menu items inside the dropdown panel. It renders outside the menu role, so assistive tech reads it as plain content rather than as a menu item.\n\n**CSS Parts:**\n- `menu-panel` - Exposes the dropdown menu container for styling."
+        "value": "Dropdown Menus reveal a list of actions from a button trigger, implementing the WAI-ARIA Menu Button pattern. Use them to conserve space when options do not need to be visible at all times.\n\n**Examples:**\n[Default](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#default), [With Separator](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-separator), [With Icons](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-icons), [With Header](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-header), [With Links](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-links), [With External Links](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-external-links), [With Informational Items](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-informational-items), [Mixing Menu Items with Raw Elements](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#mixing-menu-items-with-raw-elements), [With Disabled Items](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-disabled-items), [With Custom Placement](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#with-custom-placement), [Scrollable Menu](https://pine-design-system.netlify.app/?path=/docs/components-dropdown-menu--docs#scrollable-menu)\n\n**Slots:**\n- `header` - Non-interactive content displayed above the menu items inside the dropdown panel. It renders outside the menu role, so assistive tech reads it as plain content rather than as a menu item.\n\n**CSS Parts:**\n- `menu-panel` - Exposes the dropdown menu container for styling."
       },
       "attributes": [
         {
@@ -8378,7 +8378,7 @@
       "name": "pds-dropdown-menu-item",
       "description": {
         "kind": "markdown",
-        "value": "\n\n**CSS Parts:**\n- `button` - No description\n\n**Events:**\n- `pdsClick` - Emitted when the dropdown-item is clicked."
+        "value": "\n\n**CSS Parts:**\n- `button` - Exposes the item's inner element for styling. Appears on button and informational items, not on links.\n\n**Events:**\n- `pdsClick` - Emitted when the dropdown-item is clicked."
       },
       "attributes": [
         {
@@ -8406,28 +8406,35 @@
           "name": "download",
           "description": {
             "kind": "markdown",
-            "value": "Prompts the user to save the linked URL instead of navigating to it.\nIt can be used without a value to download with the default filename,\nor with a string value to suggest a specific filename for the download.\nOnly applies when href is set."
+            "value": "Prompts the user to save the linked URL instead of navigating to it.\nIt can be used without a value to download with the default filename,\nor with a string value to suggest a specific filename for the download.\nOnly applies when href is set. Ignored when `informational` is set."
           }
         },
         {
           "name": "external",
           "description": {
             "kind": "markdown",
-            "value": "Determines whether the link should open in a new tab and display an external icon.\nThis is a simpler alternative to using `target=\"_blank\"` for the common case.\n\n**Default:** `false`"
+            "value": "Determines whether the link should open in a new tab and display an external icon.\nThis is a simpler alternative to using `target=\"_blank\"` for the common case.\nIgnored when `informational` is set.\n\n**Default:** `false`"
           }
         },
         {
           "name": "href",
           "description": {
             "kind": "markdown",
-            "value": "If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button."
+            "value": "If provided, renders the dropdown-item as an anchor (`<a>`) element instead of a button.\nIgnored when `informational` is set."
+          }
+        },
+        {
+          "name": "informational",
+          "description": {
+            "kind": "markdown",
+            "value": "It determines whether or not the dropdown-item is informational: text that the arrow keys\nreach but that can't be activated. Takes precedence over `href` and `destructive`.\nScreen readers announce it as dimmed or unavailable, the same way as a disabled item.\n\n**Default:** `false`"
           }
         },
         {
           "name": "target",
           "description": {
             "kind": "markdown",
-            "value": "Specifies where to open the linked document when href is provided.\nTakes precedence over the `external` prop if both are set.\nOnly applies when href is set.\n\n**Type:** `\"_blank\" | \"_parent\" | \"_self\" | \"_top\"`"
+            "value": "Specifies where to open the linked document when href is provided.\nTakes precedence over the `external` prop if both are set.\nOnly applies when href is set. Ignored when `informational` is set.\n\n**Type:** `\"_blank\" | \"_parent\" | \"_self\" | \"_top\"`"
           },
           "values": [
             {
@@ -9579,7 +9586,7 @@
       "name": "pds-popover",
       "description": {
         "kind": "markdown",
-        "value": "Popovers display contextual information when users click or initiates a keyboard event on an element. They typically contain more information than tooltips and can include interactive elements.\n\n**Examples:**\n[Trigger Slot](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#trigger-slot), [Behavior Types](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#behavior-types), [Target Actions](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#target-actions), [Width/Sizing](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#width/sizing)\n\n**Slots:**\n- `(default)` - The content to display inside the popover\n- `trigger` - The trigger element for the popover\n\n**Events:**\n- `pdsPopoverClose` - Emitted when the popover is closed\n- `pdsPopoverOpen` - Emitted when the popover is opened"
+        "value": "Popovers display contextual information when users click an element or activate it with the keyboard, and can also open when users hover over it. They typically contain more information than tooltips and can include interactive elements.\n\n**Examples:**\n[Trigger Slot](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#trigger-slot), [Behavior Types](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#behavior-types), [Target Actions](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#target-actions), [Open on hover](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#open-on-hover), [Width/Sizing](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#width/sizing), [Padding](https://pine-design-system.netlify.app/?path=/docs/components-popover--docs#padding)\n\n**Slots:**\n- `(default)` - The content to display inside the popover\n- `trigger` - The trigger element for the popover\n\n**Events:**\n- `pdsPopoverClose` - Emitted when the popover is closed\n- `pdsPopoverOpen` - Emitted when the popover is opened"
       },
       "attributes": [
         {
@@ -9596,6 +9603,42 @@
             "value": "Sets the maximum width of the popover content\n\n**Type:** `number`\n\n**Default:** `352`"
           }
         },
+        {
+          "name": "open-on",
+          "description": {
+            "kind": "markdown",
+            "value": "Determines how the popover opens. With `hover`, it also opens when the pointer rests on the trigger and closes\nwhen the pointer leaves, until a click on the trigger keeps it open. Enter or Space on the trigger opens it either way.\n\n**Type:** `\"click\" | \"hover\"`\n\n**Default:** `'click'`"
+          },
+          "values": [
+            {
+              "name": "click"
+            },
+            {
+              "name": "hover"
+            }
+          ]
+        },
+        {
+          "name": "padding",
+          "description": {
+            "kind": "markdown",
+            "value": "Sets the padding of the popover content\n\n**Type:** `\"md\" | \"none\" | \"sm\" | \"xs\"`\n\n**Default:** `'md'`"
+          },
+          "values": [
+            {
+              "name": "md"
+            },
+            {
+              "name": "none"
+            },
+            {
+              "name": "sm"
+            },
+            {
+              "name": "xs"
+            }
+          ]
+        },
         {
           "name": "placement",
           "description": {