@momentum-design/components 0.129.10 → 0.129.11

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

@@ -3,10 +3,18 @@ import type { CSSResult } from 'lit';
 import Popover from '../popover/popover.component';
 import type { TooltipType } from './tooltip.types';
 /**
+ * A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>
+ * Tooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.
+ *
+ * Because of this, tooltips cannot contain content that can be focused or interacted with.
+ * When a tooltip must contain a focusable element like a link or button, use a toggle tip instead.
+ *
  * A tooltip is triggered by mouse hover or by keyboard focus
  * and will disappear upon mouse exit or focus change.
  *
- * Note: Tooltips cannot contain content that can be focused or interacted with.
+ * Note:
+ *  - Tooltips cannot contain content that can be focused or interacted with.
+ *  - Tooltips will contain the default `aria-hidden="true"` so that VO will never focus the tooltip.
  *
  * @tagname mdc-tooltip
  *

package/dist/components/tooltip/tooltip.component.js

@@ -11,14 +11,22 @@ import { property } from 'lit/decorators.js';
 import { v4 as uuidv4 } from 'uuid';
 import { ROLE } from '../../utils/roles';
 import Popover from '../popover/popover.component';
-import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { DEFAULTS as POPOVER_DEFAULTS, POPOVER_PLACEMENT } from '../popover/popover.constants';
 import { DEFAULTS, TOOLTIP_TYPES } from './tooltip.constants';
 import styles from './tooltip.styles';
 /**
+ * A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>
+ * Tooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.
+ *
+ * Because of this, tooltips cannot contain content that can be focused or interacted with.
+ * When a tooltip must contain a focusable element like a link or button, use a toggle tip instead.
+ *
  * A tooltip is triggered by mouse hover or by keyboard focus
  * and will disappear upon mouse exit or focus change.
  *
- * Note: Tooltips cannot contain content that can be focused or interacted with.
+ * Note:
+ *  - Tooltips cannot contain content that can be focused or interacted with.
+ *  - Tooltips will contain the default `aria-hidden="true"` so that VO will never focus the tooltip.
  *
  * @tagname mdc-tooltip
  *
@@ -47,24 +55,27 @@ class Tooltip extends Popover {
     }
     connectedCallback() {
         super.connectedCallback();
-        this.backdrop = false;
+        this.role = ROLE.TOOLTIP;
+        // We don't want the tooltip to be visible for screen readers as they are not focusable
+        this.ariaHidden = DEFAULTS.ARIA_HIDDEN;
+        // Tooltip defaults
+        this.backdrop = DEFAULTS.BACKDROP;
         this.delay = this.delay || DEFAULTS.DELAY;
-        this.focusTrap = false;
-        this.hideOnBlur = true;
-        this.hideOnEscape = true;
-        this.interactive = false;
+        this.disableAriaExpanded = DEFAULTS.DISABLE_ARIA_EXPANDED;
+        this.hideOnBlur = DEFAULTS.HIDE_ON_BLUR;
+        this.hideOnEscape = DEFAULTS.HIDE_ON_ESCAPE;
         this.offset = this.offset || DEFAULTS.OFFSET;
         this.placement = this.placement || DEFAULTS.PLACEMENT;
-        this.role = ROLE.TOOLTIP;
-        this.trigger = 'mouseenter focusin';
-        this.preventScroll = false;
-        this.disableFlip = false;
-        this.preventScroll = false;
-        this.closeButton = false;
-        this.hideOnOutsideClick = false;
-        this.focusBackToTrigger = false;
-        this.size = false;
-        this.disableAriaExpanded = true;
+        this.trigger = DEFAULTS.TRIGGER;
+        // Popover defaults
+        this.closeButton = POPOVER_DEFAULTS.CLOSE_BUTTON;
+        this.disableFlip = POPOVER_DEFAULTS.DISABLE_FLIP;
+        this.focusBackToTrigger = POPOVER_DEFAULTS.FOCUS_BACK;
+        this.focusTrap = POPOVER_DEFAULTS.FOCUS_TRAP;
+        this.hideOnOutsideClick = POPOVER_DEFAULTS.HIDE_ON_CLICK_OUTSIDE;
+        this.interactive = POPOVER_DEFAULTS.INTERACTIVE;
+        this.preventScroll = POPOVER_DEFAULTS.PREVENT_SCROLL;
+        this.size = POPOVER_DEFAULTS.SIZE;
     }
     /**
      * Sets the type attribute for the tooltip component.

package/dist/components/tooltip/tooltip.constants.d.ts

@@ -5,8 +5,13 @@ declare const TOOLTIP_TYPES: {
     readonly NONE: "none";
 };
 declare const DEFAULTS: {
+    readonly ARIA_HIDDEN: "true";
     readonly BACKDROP: false;
     readonly DELAY: "0,0";
+    readonly DISABLE_ARIA_EXPANDED: true;
+    readonly HIDE_ON_BLUR: true;
+    readonly HIDE_ON_ESCAPE: true;
+    readonly TRIGGER: "mouseenter focusin";
     readonly OFFSET: 4;
     readonly PLACEMENT: "top";
     readonly SHOW_ARROW: true;

package/dist/components/tooltip/tooltip.constants.js

@@ -1,5 +1,5 @@
 import utils from '../../utils/tag-name';
-import { POPOVER_PLACEMENT } from '../popover/popover.constants';
+import { POPOVER_PLACEMENT, TRIGGER } from '../popover/popover.constants';
 const TAG_NAME = utils.constructTagName('tooltip');
 const TOOLTIP_TYPES = {
     DESCRIPTION: 'description',
@@ -7,8 +7,13 @@ const TOOLTIP_TYPES = {
     NONE: 'none',
 };
 const DEFAULTS = {
+    ARIA_HIDDEN: 'true',
     BACKDROP: false,
     DELAY: '0,0',
+    DISABLE_ARIA_EXPANDED: true,
+    HIDE_ON_BLUR: true,
+    HIDE_ON_ESCAPE: true,
+    TRIGGER: `${TRIGGER.MOUSEENTER} ${TRIGGER.FOCUSIN}`,
     OFFSET: 4,
     PLACEMENT: POPOVER_PLACEMENT.TOP,
     SHOW_ARROW: true,

package/dist/custom-elements.json

@@ -153,8 +153,8 @@
               "attribute": "disabled",
               "reflects": true,
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "components/accordionbutton/accordionbutton.component.js"
+                "name": "DisabledMixin",
+                "module": "utils/mixins/DisabledMixin.js"
               }
             },
             {
@@ -412,8 +412,8 @@
               "default": "undefined",
               "fieldName": "disabled",
               "inheritedFrom": {
-                "name": "AccordionButton",
-                "module": "src/components/accordionbutton/accordionbutton.component.ts"
+                "name": "DisabledMixin",
+                "module": "src/utils/mixins/DisabledMixin.ts"
               }
             },
             {
@@ -51347,7 +51347,7 @@
       "declarations": [
         {
           "kind": "class",
-          "description": "A tooltip is triggered by mouse hover or by keyboard focus\nand will disappear upon mouse exit or focus change.\n\nNote: Tooltips cannot contain content that can be focused or interacted with.",
+          "description": "A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>\nTooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.\n\nBecause of this, tooltips cannot contain content that can be focused or interacted with.\nWhen a tooltip must contain a focusable element like a link or button, use a toggle tip instead.\n\nA tooltip is triggered by mouse hover or by keyboard focus\nand will disappear upon mouse exit or focus change.\n\nNote:\n - Tooltips cannot contain content that can be focused or interacted with.\n - Tooltips will contain the default `aria-hidden=\"true\"` so that VO will never focus the tooltip.",
           "name": "Tooltip",
           "cssProperties": [
             {
@@ -53377,7 +53377,7 @@
             "module": "/src/components/popover/popover.component"
           },
           "tagName": "mdc-tooltip",
-          "jsDoc": "/**\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note: Tooltips cannot contain content that can be focused or interacted with.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
+          "jsDoc": "/**\n * A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>\n * Tooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.\n *\n * Because of this, tooltips cannot contain content that can be focused or interacted with.\n * When a tooltip must contain a focusable element like a link or button, use a toggle tip instead.\n *\n * A tooltip is triggered by mouse hover or by keyboard focus\n * and will disappear upon mouse exit or focus change.\n *\n * Note:\n *  - Tooltips cannot contain content that can be focused or interacted with.\n *  - Tooltips will contain the default `aria-hidden=\"true\"` so that VO will never focus the tooltip.\n *\n * @tagname mdc-tooltip\n *\n * @event shown - (React: onShown) This event is dispatched when the tooltip is shown\n * @event hidden - (React: onHidden) This event is dispatched when the tooltip is hidden\n * @event created - (React: onCreated) This event is dispatched when the tooltip is created (added to the DOM)\n * @event destroyed - (React: onDestroyed) This event is dispatched when the tooltip is destroyed (removed from the DOM)\n *\n * @cssproperty --mdc-tooltip-max-width - The maximum width of the tooltip.\n * @cssproperty --mdc-tooltip-padding - The padding of the tooltip.\n * @cssproperty --mdc-tooltip-text-color - The text color of the tooltip.\n * @cssproperty --mdc-tooltip-text-color-contrast - The text color of the tooltip when the color is contrast.\n *\n */",
           "customElement": true,
           "slots": [
             {

package/dist/react/tooltip/index.d.ts

@@ -2,10 +2,18 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/tooltip';
 import type { Events as EventsInherited } from '../../components/popover/popover.types';
 /**
+ * A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>
+ * Tooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.
+ *
+ * Because of this, tooltips cannot contain content that can be focused or interacted with.
+ * When a tooltip must contain a focusable element like a link or button, use a toggle tip instead.
+ *
  * A tooltip is triggered by mouse hover or by keyboard focus
  * and will disappear upon mouse exit or focus change.
  *
- * Note: Tooltips cannot contain content that can be focused or interacted with.
+ * Note:
+ *  - Tooltips cannot contain content that can be focused or interacted with.
+ *  - Tooltips will contain the default `aria-hidden="true"` so that VO will never focus the tooltip.
  *
  * @tagname mdc-tooltip
  *

package/dist/react/tooltip/index.js

@@ -3,10 +3,18 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/tooltip';
 import { TAG_NAME } from '../../components/tooltip/tooltip.constants';
 /**
+ * A Tooltip is a special type of popovers that provide additional context to content on the screen. <br/>
+ * Tooltip is triggered by mouse hover or by keyboard focus and will disappear upon mouse exit or focus change.
+ *
+ * Because of this, tooltips cannot contain content that can be focused or interacted with.
+ * When a tooltip must contain a focusable element like a link or button, use a toggle tip instead.
+ *
  * A tooltip is triggered by mouse hover or by keyboard focus
  * and will disappear upon mouse exit or focus change.
  *
- * Note: Tooltips cannot contain content that can be focused or interacted with.
+ * Note:
+ *  - Tooltips cannot contain content that can be focused or interacted with.
+ *  - Tooltips will contain the default `aria-hidden="true"` so that VO will never focus the tooltip.
  *
  * @tagname mdc-tooltip
  *

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@momentum-design/components",
   "packageManager": "yarn@3.2.4",
-  "version": "0.129.10",
+  "version": "0.129.11",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"