@momentum-design/components 0.129.10 → 0.129.12

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

@@ -1,4 +1,4 @@
-import type { CSSResult } from 'lit';
+import type { CSSResult, TemplateResult } from 'lit';
 import { Component } from '../../models';
 import type { BannerVariant } from './banner.types';
 /**
@@ -51,7 +51,7 @@ declare class Banner extends Component {
     /**
      * Banner label text
      */
-    label: string;
+    label?: string;
     /**
      * Banner secondary label text
      *
@@ -74,7 +74,7 @@ declare class Banner extends Component {
      * @returns Template result containing label and optional secondary label elements
      */
     private getTextLabel;
-    render(): import("lit-html").TemplateResult<1>;
+    render(): TemplateResult<1>;
     static styles: Array<CSSResult>;
 }
 export default Banner;

package/dist/components/banner/banner.component.js

@@ -63,10 +63,6 @@ class Banner extends Component {
          * @default 'custom'
          */
         this.variant = DEFAULTS.VARIANT;
-        /**
-         * Banner label text
-         */
-        this.label = '';
     }
     /**
      * @internal
@@ -79,12 +75,7 @@ class Banner extends Component {
         if (!iconName)
             return nothing;
         return html `
-      <mdc-icon
-        name="${iconName}"
-        size="${DEFAULTS.PREFIX_ICON_SIZE}"
-        part="leading-icon"
-        length-unit="rem"
-      ></mdc-icon>
+      <mdc-icon name="${iconName}" size="${DEFAULTS.PREFIX_ICON_SIZE}" part="leading-icon" length-unit="rem"></mdc-icon>
     `;
     }
     /**
@@ -115,12 +106,11 @@ class Banner extends Component {
     `;
     }
     render() {
-        var _a;
         return html `
       <slot name="content">
         <div part="leading">
           <slot name="leading-icon">
-            ${this.variant !== DEFAULTS.VARIANT ? this.renderIcon((_a = getIconNameForVariant(this.variant)) !== null && _a !== void 0 ? _a : '') : nothing}
+            ${this.variant !== DEFAULTS.VARIANT ? this.renderIcon(getIconNameForVariant(this.variant)) : nothing}
           </slot>
           <slot name="leading-text">
             <div part="leading-text">${this.getTextLabel()}</div>

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

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 declare const TAG_NAME: "mdc-banner";
 /**
  * Banner variants
@@ -13,10 +14,10 @@ declare const BANNER_VARIANT: {
  * Icon names for variants
  */
 declare const VARIANT_ICON_NAMES: {
-    readonly INFORMATIONAL_ICON_NAME: "info-circle-bold";
-    readonly SUCCESS_ICON_NAME: "check-circle-bold";
-    readonly WARNING_ICON_NAME: "warning-bold";
-    readonly ERROR_ICON_NAME: "error-legacy-bold";
+    readonly INFORMATIONAL_ICON_NAME: Extract<IconNames, "info-circle-bold">;
+    readonly SUCCESS_ICON_NAME: Extract<IconNames, "check-circle-bold">;
+    readonly WARNING_ICON_NAME: Extract<IconNames, "warning-bold">;
+    readonly ERROR_ICON_NAME: Extract<IconNames, "error-legacy-bold">;
 };
 /**
  * Default values
@@ -25,4 +26,4 @@ declare const DEFAULTS: {
     readonly VARIANT: "custom";
     readonly PREFIX_ICON_SIZE: 1.25;
 };
-export { TAG_NAME, BANNER_VARIANT, DEFAULTS, VARIANT_ICON_NAMES };
+export { BANNER_VARIANT, DEFAULTS, TAG_NAME, VARIANT_ICON_NAMES };

package/dist/components/banner/banner.constants.js

@@ -26,4 +26,4 @@ const DEFAULTS = {
     VARIANT: BANNER_VARIANT.CUSTOM,
     PREFIX_ICON_SIZE: 1.25,
 };
-export { TAG_NAME, BANNER_VARIANT, DEFAULTS, VARIANT_ICON_NAMES };
+export { BANNER_VARIANT, DEFAULTS, TAG_NAME, VARIANT_ICON_NAMES };

package/dist/components/banner/banner.utils.d.ts

@@ -1,3 +1,4 @@
+import type { IconNames } from '../icon/icon.types';
 import type { BannerVariant } from './banner.types';
-declare const getIconNameForVariant: (variant: BannerVariant) => string | null;
+declare const getIconNameForVariant: (variant: BannerVariant) => IconNames | null;
 export { getIconNameForVariant };

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"
               }
             },
             {
@@ -4797,9 +4797,8 @@
               "kind": "field",
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
               "description": "Banner label text",
               "attribute": "label",
               "reflects": true
@@ -4839,9 +4838,8 @@
             {
               "name": "label",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "''",
               "description": "Banner label text",
               "fieldName": "label"
             },
@@ -51347,7 +51345,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 +53375,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.12",
   "engines": {
     "node": ">=20.0.0",
     "npm": ">=8.0.0"