@momentum-design/components 0.129.36 → 0.129.38

package/dist/components/bullet/bullet.component.d.ts

@@ -2,15 +2,25 @@ import type { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { Size } from './bullet.types';
 /**
- * Bullet component, which is a visual marker
- * and be used to organize and present items in a list format.
+ * The Bullet component displays a small circular visual indicator used to organize and present
+ * items in a list format. It provides a simple, consistent way to mark list items or emphasize
+ * content points.
+ *
+ * Bullets are available in three sizes (small, medium, large) to accommodate different layout
+ * densities and visual hierarchies.
+ *
+ * ## When to use
+ * Use bullets to create unordered lists, mark navigation items, or provide visual indicators
+ * for list content. Choose bullet size based on content importance and layout density.
+ *
+ * ## Accessibility
+ * - Bullets are purely decorative and should be used alongside meaningful text content
+ * - Do not rely solely on bullet size or color to convey information
  *
  * @tagname mdc-bullet
  *
- * @cssproperty --mdc-bullet-background-color - background color of the bullet
- * @cssproperty --mdc-bullet-size-small - small size value of the bullet
- * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet
- * @cssproperty --mdc-bullet-size-large - large size value of the bullet
+ * @cssproperty --mdc-bullet-background-color - Background color of the bullet.
+ * @cssproperty --mdc-bullet-size - Height of the bullet.
  */
 declare class Bullet extends Component {
     /**

package/dist/components/bullet/bullet.component.js

@@ -12,15 +12,25 @@ import { Component } from '../../models';
 import styles from './bullet.styles';
 import { SIZE } from './bullet.constants';
 /**
- * Bullet component, which is a visual marker
- * and be used to organize and present items in a list format.
+ * The Bullet component displays a small circular visual indicator used to organize and present
+ * items in a list format. It provides a simple, consistent way to mark list items or emphasize
+ * content points.
+ *
+ * Bullets are available in three sizes (small, medium, large) to accommodate different layout
+ * densities and visual hierarchies.
+ *
+ * ## When to use
+ * Use bullets to create unordered lists, mark navigation items, or provide visual indicators
+ * for list content. Choose bullet size based on content importance and layout density.
+ *
+ * ## Accessibility
+ * - Bullets are purely decorative and should be used alongside meaningful text content
+ * - Do not rely solely on bullet size or color to convey information
  *
  * @tagname mdc-bullet
  *
- * @cssproperty --mdc-bullet-background-color - background color of the bullet
- * @cssproperty --mdc-bullet-size-small - small size value of the bullet
- * @cssproperty --mdc-bullet-size-medium - medium size value of the bullet
- * @cssproperty --mdc-bullet-size-large - large size value of the bullet
+ * @cssproperty --mdc-bullet-background-color - Background color of the bullet.
+ * @cssproperty --mdc-bullet-size - Height of the bullet.
  */
 class Bullet extends Component {
     constructor() {

package/dist/components/bullet/bullet.styles.js

@@ -2,23 +2,22 @@ import { css } from 'lit';
 const styles = css `
   :host {
     --mdc-bullet-background-color: var(--mds-color-theme-outline-secondary-normal);
-    --mdc-bullet-size-small: 0.25rem;
-    --mdc-bullet-size-medium: 0.5rem;
-    --mdc-bullet-size-large: 1rem;
+    --mdc-bullet-size: 0.25rem;
 
     border-radius: 50%;
     display: block;
     aspect-ratio: 1;
+    height: var(--mdc-bullet-size);
     background-color: var(--mdc-bullet-background-color);
   }
   :host([size='small']) {
-    height: var(--mdc-bullet-size-small);
+    --mdc-bullet-size: 0.25rem;
   }
   :host([size='medium']) {
-    height: var(--mdc-bullet-size-medium);
+    --mdc-bullet-size: 0.5rem;
   }
   :host([size='large']) {
-    height: var(--mdc-bullet-size-large);
+    --mdc-bullet-size: 1rem;
   }
 `;
 export default [styles];

package/dist/components/divider/divider.component.d.ts

@@ -3,85 +3,80 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { Directions, DividerOrientation, DividerVariant } from './divider.types';
 /**
- * `mdc-divider` is a component that provides a line to separate and organize content.
- * It can also include a button or text positioned centrally, allowing users to interact with the layout.
+ * The Divider component provides a visual line to separate and organize content within layouts.
+ * It supports both horizontal and vertical orientations with solid or gradient styles, and can
+ * optionally include centered text labels or interactive grabber buttons.
  *
- * **Divider Orientation:**
- * - **Horizontal**: A thin, horizontal line.
- * - **Vertical**: A thin, vertical line.
+ * The divider automatically infers its type based on the content in its slot:
+ * - **Primary**: Simple line with no content
+ * - **Text**: Horizontal line with centered text label
+ * - **Grabber Button**: Line with centered interactive button
  *
- * **Divider Variants:**
- * - **solid**: Solid line.
- * - **gradient**: Gradient Line.
+ * **Note:**
+ * - Vertical text dividers are not currently supported.
+ * - If the slot contains invalid tag names or multiple elements, the divider defaults to the Primary type
+ * - Use the provided CSS custom properties to customize divider styles
  *
- * **Divider Types:**
- * - The type of divider is inferred based on the kind of slot present.
- *  - **Primary**: A simple horizontal or vertical divider.
- *  - **Text**: A horizontal divider with a text label in the center.
- *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.
+ * ## When to use
+ * Use dividers to create visual separation between content sections, list items, or layout regions.
+ * Add text labels to provide context, or grabber buttons to create resizable panes.
  *
- * **Accessibility:**
- * - When the slot is replaced by an `mdc-button`:
- *   - `aria-label` should be passed to the `mdc-button`.
- *   - `aria-expanded` should be passed to the `mdc-button`.
- *
- * **Notes:**
- * - If the slot is replaced by an invalid tag name or contains multiple elements,
- *   the divider defaults to the **Primary** type.
- * - To override the styles of the divider, use the provided CSS custom properties.
+ * ## Accessibility
+ * - When using a grabber button, provide `aria-label` to describe its purpose
+ * - Set `aria-expanded` on the button to indicate the current state of resizable sections
+ * - Ensure sufficient color contrast for the divider line
  *
  * @tagname mdc-divider
  *
- * @cssproperty --mdc-divider-background-color - background color of the divider
- * @cssproperty --mdc-divider-width - width of the divider
- * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider
- * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider
- * @cssproperty --mdc-divider-text-size - font size of label in the text divider
- * @cssproperty --mdc-divider-text-color - font color of label in the text divider
- * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
- * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
- * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
- *  in rest state
- * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
- *  in hover state
- * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
- *  in pressed state
- * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
- * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
+ * @cssproperty --mdc-divider-background-color - Background color of the divider line.
+ * @cssproperty --mdc-divider-width - Width (thickness) of the divider line.
+ * @cssproperty --mdc-divider-horizontal-gradient - Gradient for horizontal dividers.
+ * @cssproperty --mdc-divider-vertical-gradient - Gradient for vertical dividers.
+ * @cssproperty --mdc-divider-text-size - Font size of the text label in text dividers.
+ * @cssproperty --mdc-divider-text-color - Font color of the text label in text dividers.
+ * @cssproperty --mdc-divider-text-margin - Left and right margin of the text label.
+ * @cssproperty --mdc-divider-text-line-height - Line height of the text label.
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - Background color of the grabber button in rest state.
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - Background color of the grabber button in hover state.
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - Background color of the grabber button in pressed state.
+ * @cssproperty --mdc-divider-grabber-button-border-color - Border color of the grabber button.
+ * @cssproperty --mdc-divider-grabber-button-border-radius - Border radius of the grabber button.
+ *
+ * @slot - Content for the divider. Use `mdc-text` for text labels or `mdc-button` for grabber buttons.
  */
 declare class Divider extends Component {
     /**
-     * Two orientations of divider
-     * - **horizontal**: A thin, horizontal line with 0.0625rem width.
-     * - **vertical**: A thin, vertical line with 0.0625rem width.
+     * Determines the orientation of the divider line.
+     * - **horizontal**: A thin horizontal line
+     * - **vertical**: A thin vertical line
      *
-     * Note: We do not support "Vertical Text Divider" as of now.
+     * Note: Vertical text dividers are not currently supported.
      * @default horizontal
      */
     orientation: DividerOrientation;
     /**
-     * Two variants of divider
-     * - **solid**: Solid line.
-     * - **gradient**: Gradient Line that fades on either sides of the divider.
+     * Visual style of the divider line.
+     * - **solid**: Solid line with uniform color
+     * - **gradient**: Gradient line that fades on both ends
      * @default solid
      */
     variant: DividerVariant;
     /**
-     * Direction of the arrow icon, if applicable.
-     * - **positive**
-     * - **negative**
+     * Direction of the arrow icon displayed on the grabber button.
+     * - **positive**: Up arrow (horizontal) or right arrow (vertical)
+     * - **negative**: Down arrow (horizontal) or left arrow (vertical)
      *
-     * Note: Positive and Negative directions are defined based on Cartesian plane.
-     * @default 'negative'
+     * Only applies when using a grabber button. Directions follow the Cartesian coordinate system.
+     * @default negative
      */
     arrowDirection: Directions;
     /**
-     * Position of the button, if applicable.
-     * - **positive**
-     * - **negative**
+     * Position of the grabber button along the divider line.
+     * - **positive**: Right side (horizontal) or top side (vertical)
+     * - **negative**: Left side (horizontal) or bottom side (vertical)
      *
-     * Note: Positive and Negative directions are defined based on Cartesian plane.
-     * @default 'negative'
+     * Only applies when using a grabber button. Directions follow the Cartesian coordinate system.
+     * @default negative
      */
     buttonPosition: Directions;
     /**

package/dist/components/divider/divider.component.js

@@ -13,87 +13,82 @@ import { Component } from '../../models';
 import { ARROW_ICONS, BUTTON_TAG, DEFAULTS, DIRECTIONS, DIVIDER_ORIENTATION, DIVIDER_VARIANT, TEXT_TAG, } from './divider.constants';
 import styles from './divider.styles';
 /**
- * `mdc-divider` is a component that provides a line to separate and organize content.
- * It can also include a button or text positioned centrally, allowing users to interact with the layout.
+ * The Divider component provides a visual line to separate and organize content within layouts.
+ * It supports both horizontal and vertical orientations with solid or gradient styles, and can
+ * optionally include centered text labels or interactive grabber buttons.
  *
- * **Divider Orientation:**
- * - **Horizontal**: A thin, horizontal line.
- * - **Vertical**: A thin, vertical line.
+ * The divider automatically infers its type based on the content in its slot:
+ * - **Primary**: Simple line with no content
+ * - **Text**: Horizontal line with centered text label
+ * - **Grabber Button**: Line with centered interactive button
  *
- * **Divider Variants:**
- * - **solid**: Solid line.
- * - **gradient**: Gradient Line.
+ * **Note:**
+ * - Vertical text dividers are not currently supported.
+ * - If the slot contains invalid tag names or multiple elements, the divider defaults to the Primary type
+ * - Use the provided CSS custom properties to customize divider styles
  *
- * **Divider Types:**
- * - The type of divider is inferred based on the kind of slot present.
- *  - **Primary**: A simple horizontal or vertical divider.
- *  - **Text**: A horizontal divider with a text label in the center.
- *  - **Grabber Button**: A horizontal or vertical divider with a styled button in the center.
+ * ## When to use
+ * Use dividers to create visual separation between content sections, list items, or layout regions.
+ * Add text labels to provide context, or grabber buttons to create resizable panes.
  *
- * **Accessibility:**
- * - When the slot is replaced by an `mdc-button`:
- *   - `aria-label` should be passed to the `mdc-button`.
- *   - `aria-expanded` should be passed to the `mdc-button`.
- *
- * **Notes:**
- * - If the slot is replaced by an invalid tag name or contains multiple elements,
- *   the divider defaults to the **Primary** type.
- * - To override the styles of the divider, use the provided CSS custom properties.
+ * ## Accessibility
+ * - When using a grabber button, provide `aria-label` to describe its purpose
+ * - Set `aria-expanded` on the button to indicate the current state of resizable sections
+ * - Ensure sufficient color contrast for the divider line
  *
  * @tagname mdc-divider
  *
- * @cssproperty --mdc-divider-background-color - background color of the divider
- * @cssproperty --mdc-divider-width - width of the divider
- * @cssproperty --mdc-divider-horizontal-gradient - gradient of the horizontal divider
- * @cssproperty --mdc-divider-vertical-gradient - gradient of the vertical divider
- * @cssproperty --mdc-divider-text-size - font size of label in the text divider
- * @cssproperty --mdc-divider-text-color - font color of label in the text divider
- * @cssproperty --mdc-divider-text-margin - left and right margin of label in the text divider
- * @cssproperty --mdc-divider-text-line-height - line height of label in the text divider
- * @cssproperty --mdc-divider-grabber-button-background-color-normal - background color of the grabber button
- *  in rest state
- * @cssproperty --mdc-divider-grabber-button-background-color-hover - background color of the grabber button
- *  in hover state
- * @cssproperty --mdc-divider-grabber-button-background-color-pressed - background color of the grabber button
- *  in pressed state
- * @cssproperty --mdc-divider-grabber-button-border-color - border color of the grabber button
- * @cssproperty --mdc-divider-grabber-button-border-radius - border radius of the grabber button
+ * @cssproperty --mdc-divider-background-color - Background color of the divider line.
+ * @cssproperty --mdc-divider-width - Width (thickness) of the divider line.
+ * @cssproperty --mdc-divider-horizontal-gradient - Gradient for horizontal dividers.
+ * @cssproperty --mdc-divider-vertical-gradient - Gradient for vertical dividers.
+ * @cssproperty --mdc-divider-text-size - Font size of the text label in text dividers.
+ * @cssproperty --mdc-divider-text-color - Font color of the text label in text dividers.
+ * @cssproperty --mdc-divider-text-margin - Left and right margin of the text label.
+ * @cssproperty --mdc-divider-text-line-height - Line height of the text label.
+ * @cssproperty --mdc-divider-grabber-button-background-color-normal - Background color of the grabber button in rest state.
+ * @cssproperty --mdc-divider-grabber-button-background-color-hover - Background color of the grabber button in hover state.
+ * @cssproperty --mdc-divider-grabber-button-background-color-pressed - Background color of the grabber button in pressed state.
+ * @cssproperty --mdc-divider-grabber-button-border-color - Border color of the grabber button.
+ * @cssproperty --mdc-divider-grabber-button-border-radius - Border radius of the grabber button.
+ *
+ * @slot - Content for the divider. Use `mdc-text` for text labels or `mdc-button` for grabber buttons.
  */
 class Divider extends Component {
     constructor() {
         super(...arguments);
         /**
-         * Two orientations of divider
-         * - **horizontal**: A thin, horizontal line with 0.0625rem width.
-         * - **vertical**: A thin, vertical line with 0.0625rem width.
+         * Determines the orientation of the divider line.
+         * - **horizontal**: A thin horizontal line
+         * - **vertical**: A thin vertical line
          *
-         * Note: We do not support "Vertical Text Divider" as of now.
+         * Note: Vertical text dividers are not currently supported.
          * @default horizontal
          */
         this.orientation = DEFAULTS.ORIENTATION;
         /**
-         * Two variants of divider
-         * - **solid**: Solid line.
-         * - **gradient**: Gradient Line that fades on either sides of the divider.
+         * Visual style of the divider line.
+         * - **solid**: Solid line with uniform color
+         * - **gradient**: Gradient line that fades on both ends
          * @default solid
          */
         this.variant = DEFAULTS.VARIANT;
         /**
-         * Direction of the arrow icon, if applicable.
-         * - **positive**
-         * - **negative**
+         * Direction of the arrow icon displayed on the grabber button.
+         * - **positive**: Up arrow (horizontal) or right arrow (vertical)
+         * - **negative**: Down arrow (horizontal) or left arrow (vertical)
          *
-         * Note: Positive and Negative directions are defined based on Cartesian plane.
-         * @default 'negative'
+         * Only applies when using a grabber button. Directions follow the Cartesian coordinate system.
+         * @default negative
          */
         this.arrowDirection = DEFAULTS.ARROW_DIRECTION;
         /**
-         * Position of the button, if applicable.
-         * - **positive**
-         * - **negative**
+         * Position of the grabber button along the divider line.
+         * - **positive**: Right side (horizontal) or top side (vertical)
+         * - **negative**: Left side (horizontal) or bottom side (vertical)
          *
-         * Note: Positive and Negative directions are defined based on Cartesian plane.
-         * @default 'negative'
+         * Only applies when using a grabber button. Directions follow the Cartesian coordinate system.
+         * @default negative
          */
         this.buttonPosition = DEFAULTS.BUTTON_DIRECTION;
     }

package/dist/components/marker/marker.component.d.ts

@@ -2,28 +2,33 @@ import { CSSResult } from 'lit';
 import { Component } from '../../models';
 import type { MarkerVariants } from './marker.types';
 /**
- * `mdc-marker`, which is a vertical line and
- * used to draw attention to specific parts of
- * the content or to signify important information.
+ * The Marker component displays a vertical line (0.25rem wide) used to draw attention to specific content
+ * or signify important information. It provides visual emphasis through color and pattern variations.
  *
- * **Marker Variants**:
- * - **solid**: Solid marker.
- * - **striped**: Striped marker.
+ * Markers are commonly used alongside list items, cards, or content blocks to indicate status,
+ * priority, or categorization.
+ *
+ * ## When to use
+ * Use markers to highlight important content, indicate status or priority levels, or provide
+ * visual categorization in lists and layouts.
+ *
+ * ## Accessibility
+ * - Markers are purely decorative and should not convey information solely through color
+ * - Always pair markers with text labels or other indicators to convey meaning
+ * - Ensure sufficient color contrast for visibility
  *
  * @tagname mdc-marker
  *
- * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color
- * in solid variant.
- * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.
- * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color
- * in striped variant.
- * @cssproperty --mdc-marker-width - Allows customization of the default width.
+ * @cssproperty --mdc-marker-solid-background-color - Background color for solid variant markers.
+ * @cssproperty --mdc-marker-striped-color - Stripe color for striped variant markers.
+ * @cssproperty --mdc-marker-striped-background-color - Background color for striped variant markers.
+ * @cssproperty --mdc-marker-width - Width (thickness) of the marker line.
  */
 declare class Marker extends Component {
     /**
-     * There are two variants of markers, each with a width of 0.25rem:
-     * - **solid**: Solid marker.
-     * - **striped**: Striped marker.
+     * Visual style of the marker.
+     * - **solid**: Solid colored vertical line
+     * - **striped**: Vertical line with diagonal stripes pattern
      * @default solid
      */
     variant: MarkerVariants;

package/dist/components/marker/marker.component.js

@@ -12,30 +12,35 @@ import { Component } from '../../models';
 import styles from './marker.styles';
 import { MARKER_VARIANTS } from './marker.constants';
 /**
- * `mdc-marker`, which is a vertical line and
- * used to draw attention to specific parts of
- * the content or to signify important information.
+ * The Marker component displays a vertical line (0.25rem wide) used to draw attention to specific content
+ * or signify important information. It provides visual emphasis through color and pattern variations.
  *
- * **Marker Variants**:
- * - **solid**: Solid marker.
- * - **striped**: Striped marker.
+ * Markers are commonly used alongside list items, cards, or content blocks to indicate status,
+ * priority, or categorization.
+ *
+ * ## When to use
+ * Use markers to highlight important content, indicate status or priority levels, or provide
+ * visual categorization in lists and layouts.
+ *
+ * ## Accessibility
+ * - Markers are purely decorative and should not convey information solely through color
+ * - Always pair markers with text labels or other indicators to convey meaning
+ * - Ensure sufficient color contrast for visibility
  *
  * @tagname mdc-marker
  *
- * @cssproperty --mdc-marker-solid-background-color - Allows customization of the default background color
- * in solid variant.
- * @cssproperty --mdc-marker-striped-color - Allows customization of the default stripes in striped variant.
- * @cssproperty --mdc-marker-striped-background-color - Allows customization of the default background color
- * in striped variant.
- * @cssproperty --mdc-marker-width - Allows customization of the default width.
+ * @cssproperty --mdc-marker-solid-background-color - Background color for solid variant markers.
+ * @cssproperty --mdc-marker-striped-color - Stripe color for striped variant markers.
+ * @cssproperty --mdc-marker-striped-background-color - Background color for striped variant markers.
+ * @cssproperty --mdc-marker-width - Width (thickness) of the marker line.
  */
 class Marker extends Component {
     constructor() {
         super(...arguments);
         /**
-         * There are two variants of markers, each with a width of 0.25rem:
-         * - **solid**: Solid marker.
-         * - **striped**: Striped marker.
+         * Visual style of the marker.
+         * - **solid**: Solid colored vertical line
+         * - **striped**: Vertical line with diagonal stripes pattern
          * @default solid
          */
         this.variant = MARKER_VARIANTS.SOLID;

package/dist/components/popover/popover.component.d.ts

@@ -344,8 +344,6 @@ declare class Popover extends Popover_base {
     animationFrame: boolean;
     arrowElement: HTMLElement | null;
     /** @internal */
-    private hoverTimer;
-    /** @internal */
     private isHovered;
     /** @internal */
     private openDelay;
@@ -380,6 +378,7 @@ declare class Popover extends Popover_base {
      * @internal
      */
     get triggerElement(): HTMLElement | null;
+    private timers;
     constructor();
     private parseTrigger;
     protected firstUpdated(changedProperties: PropertyValues): Promise<void>;
@@ -452,6 +451,10 @@ declare class Popover extends Popover_base {
      *  This method checks if the trigger element has visible focus or is being hovered.
      */
     private handleFocusIn;
+    /**
+     * Cancels the open delay timer.
+     */
+    private cancelOpenDelay;
     /**
      * Starts the close delay timer.
      * If the popover is not interactive, it will close the popover after the delay.

package/dist/components/popover/popover.component.js

@@ -16,7 +16,8 @@ import { Component } from '../../models';
 import { BackdropMixin } from '../../utils/mixins/BackdropMixin';
 import { FocusTrapMixin } from '../../utils/mixins/FocusTrapMixin';
 import { PreventScrollMixin } from '../../utils/mixins/PreventScrollMixin';
-import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TRIGGER } from './popover.constants';
+import { Timers } from '../../utils/controllers/Timers';
+import { COLOR, DEFAULTS, POPOVER_PLACEMENT, TIMEOUTS, TRIGGER } from './popover.constants';
 import { PopoverEventManager } from './popover.events';
 import { popoverStack } from './popover.stack';
 import styles from './popover.styles';
@@ -365,8 +366,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         this.animationFrame = DEFAULTS.ANIMATION_FRAME;
         this.arrowElement = null;
         /** @internal */
-        this.hoverTimer = null;
-        /** @internal */
         this.isHovered = false;
         /** @internal */
         this.openDelay = 0;
@@ -385,6 +384,7 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
          * @internal
          */
         this.popoverDepth = 0;
+        this.timers = new Timers(this);
         this.parseTrigger = () => {
             var _a;
             const triggers = ((_a = this.trigger) === null || _a === void 0 ? void 0 : _a.split(' ')) || [];
@@ -556,57 +556,77 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
                 this.show();
             }
         };
+        /**
+         * Cancels the open delay timer.
+         */
+        this.cancelOpenDelay = () => {
+            this.timers.clearTimeout(TIMEOUTS.OPEN);
+        };
         /**
          * Starts the close delay timer.
          * If the popover is not interactive, it will close the popover after the delay.
          */
         this.startCloseDelay = () => {
+            this.cancelOpenDelay();
             if (!this.interactive) {
                 this.hide();
             }
             else {
-                this.hoverTimer = window.setTimeout(() => {
+                const callback = () => {
                     this.visible = false;
-                }, this.closeDelay);
+                };
+                if (this.closeDelay > 0) {
+                    this.timers.setTimeout(TIMEOUTS.HOVER, callback, this.closeDelay);
+                }
+                else {
+                    this.timers.clearTimeout(TIMEOUTS.HOVER);
+                    callback();
+                }
             }
         };
         /**
          * Cancels the close delay timer.
          */
         this.cancelCloseDelay = () => {
-            if (this.hoverTimer) {
-                window.clearTimeout(this.hoverTimer);
-                this.hoverTimer = null;
-            }
+            this.timers.clearTimeout(TIMEOUTS.HOVER);
+            this.timers.clearTimeout(TIMEOUTS.CLOSE);
         };
         /**
          * Shows the popover.
          */
         this.show = () => {
-            if (this.visible || this.shouldSuppressOpening) {
+            if (this.shouldSuppressOpening) {
                 return;
             }
             this.cancelCloseDelay();
+            if (this.visible) {
+                return;
+            }
+            const callback = () => {
+                this.visible = true;
+            };
             if (this.openDelay > 0) {
-                setTimeout(() => {
-                    this.visible = true;
-                }, this.openDelay);
+                this.timers.setTimeout(TIMEOUTS.OPEN, callback, this.openDelay);
             }
             else {
-                this.visible = true;
+                this.timers.clearTimeout(TIMEOUTS.OPEN);
+                callback();
             }
         };
         /**
          * Hides the popover.
          */
         this.hide = () => {
-            if (this.closeDelay) {
-                setTimeout(() => {
-                    this.visible = false;
-                }, this.closeDelay);
+            this.cancelOpenDelay();
+            const callback = () => {
+                this.visible = false;
+            };
+            if (this.closeDelay > 0) {
+                this.timers.setTimeout(TIMEOUTS.CLOSE, callback, this.closeDelay);
             }
             else {
-                this.visible = false;
+                this.timers.clearTimeout(TIMEOUTS.CLOSE);
+                callback();
             }
         };
         /**
@@ -724,8 +744,6 @@ class Popover extends BackdropMixin(PreventScrollMixin(FocusTrapMixin(Component)
         this.moveElementBackAfterBackdropRemoval(this.triggerElement);
         this.removeBackdrop();
         (_b = this.floatingUICleanupFunction) === null || _b === void 0 ? void 0 : _b.call(this);
-        // clean timer if there is one set:
-        this.cancelCloseDelay();
         if (!this.keepConnectedTooltipOpen) {
             if (this.connectedTooltip) {
                 this.connectedTooltip.shouldSuppressOpening = false;