@momentum-design/components 0.129.42 → 0.129.43

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

@@ -2,8 +2,22 @@ import { type EventName } from '@lit/react';
 import Component from '../../components/coachmark';
 import type { Events as EventsInherited } from '../../components/popover/popover.types';
 /**
+ * A Coachmark is a contextual guidance component used to highlight a specific UI element and explain its purpose or functionality.
+ * It is typically shown as part of onboarding, feature discovery, or progressive education within the product.
+ *
  * Coachmark component based on top of the popover component,
  * with the default value of certain properties changed.
+ * Coachmark component will always have an arrow attached to it.
+ * The color of the coachmark is contrast.
+ *
+ * ## When to use
+ * - Introducing a new or complex feature to users.
+ * - Drawing attention to a UI element that might otherwise be missed.
+ * - Providing step-by-step guidance in an onboarding or walkthrough flow.
+ *
+ * ## Accessibility
+ * - The default role of coachmark is `"dialog"`, which can be changed via the `role` attribute.
+ * - aria-label or aria-labelledby can be provided to give the coachmark an accessible name.
  *
  * @dependency mdc-popover
  *
@@ -25,7 +39,6 @@ import type { Events as EventsInherited } from '../../components/popover/popover
  * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
  *
  * @slot - Default slot for modal container
- *
  */
 declare const reactWrapper: import("@lit/react").ReactWebComponent<Component, {
     onShown: EventName<EventsInherited["onShownEvent"]>;

package/dist/react/coachmark/index.js

@@ -3,8 +3,22 @@ import { createComponent } from '@lit/react';
 import Component from '../../components/coachmark';
 import { TAG_NAME } from '../../components/coachmark/coachmark.constants';
 /**
+ * A Coachmark is a contextual guidance component used to highlight a specific UI element and explain its purpose or functionality.
+ * It is typically shown as part of onboarding, feature discovery, or progressive education within the product.
+ *
  * Coachmark component based on top of the popover component,
  * with the default value of certain properties changed.
+ * Coachmark component will always have an arrow attached to it.
+ * The color of the coachmark is contrast.
+ *
+ * ## When to use
+ * - Introducing a new or complex feature to users.
+ * - Drawing attention to a UI element that might otherwise be missed.
+ * - Providing step-by-step guidance in an onboarding or walkthrough flow.
+ *
+ * ## Accessibility
+ * - The default role of coachmark is `"dialog"`, which can be changed via the `role` attribute.
+ * - aria-label or aria-labelledby can be provided to give the coachmark an accessible name.
  *
  * @dependency mdc-popover
  *
@@ -26,7 +40,6 @@ import { TAG_NAME } from '../../components/coachmark/coachmark.constants';
  * @cssproperty --mdc-popover-elevation-3 - elevation of the popover
  *
  * @slot - Default slot for modal container
- *
  */
 const reactWrapper = createComponent({
     tagName: TAG_NAME,

package/package.json

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