diff --git a/code/addons/highlight/README.md b/code/addons/highlight/README.md
index 814a914cd80..e8c1b6aae09 100644
--- a/code/addons/highlight/README.md
+++ b/code/addons/highlight/README.md
@@ -19,7 +19,7 @@ yarn add --dev @storybook/addon-highlight
 npm:
 
 ```sh
-npm install --save-dev @storybook/addon-highlight --save-dev
+npm install @storybook/addon-highlight --save-dev
 ```
 
 pnpm:
@@ -45,15 +45,13 @@ export default config;
 
 ### Highlighting DOM Elements
 
-Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight.
+Highlight DOM nodes by emitting the `HIGHLIGHT` event from within a story or an addon. The event payload must contain an `elements` property assigned to an array of selectors matching the elements you want to highlight.
 
 ```ts
 // MyComponent.stories.ts
 
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent';
@@ -86,9 +84,7 @@ Highlights are automatically cleared when the story changes. You can also manual
 // MyComponent.stories.ts|tsx
 
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent';
@@ -116,15 +112,13 @@ export const ResetHighlight: Story = {
 
 ### Customize style
 
-The addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the configuration object and providing a `color` and `style` option. For example:
+The addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a `color` and/or `style` properties. For example:
 
 ```ts
 // MyComponent.stories.ts
 
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent';
diff --git a/docs/essentials/highlight.md b/docs/essentials/highlight.md
index 44a8cba7d7d..a70ed284d25 100644
--- a/docs/essentials/highlight.md
+++ b/docs/essentials/highlight.md
@@ -8,7 +8,7 @@ Storybook's [Highlight](https://storybook.js.org/addons/@storybook/addon-highlig
 
 ## Highlighting DOM Elements
 
-To highlight DOM elements with the addon, you'll need to emit the `HIGHLIGHT` event from within a story or an addon. The event payload must contain a list of selectors you want to highlight. For example:
+To highlight DOM elements with the addon, you'll need to emit the `HIGHLIGHT` event from within a story or an addon. The event payload must contain an `elements` property assigned to an array of selectors matching the elements you want to highlight. For example:
 
 <!-- prettier-ignore-start -->
 
@@ -48,7 +48,7 @@ Out of the box, Storybook automatically removes highlighted elements when transi
 
 ## Customize style
 
-By default, the addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the configuration object and providing a `color` and `style` option. For example:
+By default, the addon applies a standard style to the highlighted elements you've enabled for the story. However, you can enable your custom style by extending the payload object and providing a `color` and/or `style` properties. For example:
 
 <!-- prettier-ignore-start -->
 
diff --git a/docs/snippets/angular/component-story-highlight-addon.ts.mdx b/docs/snippets/angular/component-story-highlight-addon.ts.mdx
index ff928d49278..b64a6c96bac 100644
--- a/docs/snippets/angular/component-story-highlight-addon.ts.mdx
+++ b/docs/snippets/angular/component-story-highlight-addon.ts.mdx
@@ -2,11 +2,8 @@
 // MyComponent.stories.ts
 
 import type { Meta, StoryObj } from '@storybook/angular';
-
 import { componentWrapperDecorator } from '@storybook/angular';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent.component';
diff --git a/docs/snippets/angular/highlight-addon-custom-style.ts.mdx b/docs/snippets/angular/highlight-addon-custom-style.ts.mdx
index d30466ecd46..193a4387e61 100644
--- a/docs/snippets/angular/highlight-addon-custom-style.ts.mdx
+++ b/docs/snippets/angular/highlight-addon-custom-style.ts.mdx
@@ -2,11 +2,8 @@
 // MyComponent.stories.ts
 
 import type { Meta, StoryObj } from '@storybook/angular';
-
 import { componentWrapperDecorator } from '@storybook/angular';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent.component';
@@ -25,8 +22,7 @@ export const StyledHighlight: Story = {
       emit(HIGHLIGHT, {
         elements: ['h2', 'a', '.storybook-button'],
         color: 'blue',
-        // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed'
-        style: 'double',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
       });
       return story;
     }),
diff --git a/docs/snippets/react/component-story-highlight-addon.js.mdx b/docs/snippets/react/component-story-highlight-addon.js.mdx
index cfb875956eb..9d0f8b146d1 100644
--- a/docs/snippets/react/component-story-highlight-addon.js.mdx
+++ b/docs/snippets/react/component-story-highlight-addon.js.mdx
@@ -2,7 +2,6 @@
 // MyComponent.stories.js|jsx
 
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent';
diff --git a/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx b/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx
index c67b184b294..1d43de9ca1c 100644
--- a/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx
+++ b/docs/snippets/react/component-story-highlight-addon.ts-4-9.mdx
@@ -2,9 +2,7 @@
 // MyComponent.stories.ts|tsx
 
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent';
diff --git a/docs/snippets/react/component-story-highlight-addon.ts.mdx b/docs/snippets/react/component-story-highlight-addon.ts.mdx
index 1a191fc0bf6..bed23c3c4ba 100644
--- a/docs/snippets/react/component-story-highlight-addon.ts.mdx
+++ b/docs/snippets/react/component-story-highlight-addon.ts.mdx
@@ -2,9 +2,7 @@
 // MyComponent.stories.ts|tsx
 
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent';
diff --git a/docs/snippets/react/highlight-addon-custom-style.js.mdx b/docs/snippets/react/highlight-addon-custom-style.js.mdx
index 9d1fa116215..18e410be4e1 100644
--- a/docs/snippets/react/highlight-addon-custom-style.js.mdx
+++ b/docs/snippets/react/highlight-addon-custom-style.js.mdx
@@ -2,7 +2,6 @@
 // MyComponent.stories.js|jsx
 
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent';
@@ -18,8 +17,7 @@ export const StyledHighlight = {
       emit(HIGHLIGHT, {
         elements: ['h2', 'a', '.storybook-button'],
         color: 'blue',
-        // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed'
-        style: 'double',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
       });
       return storyFn();
     },
diff --git a/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx b/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx
index 56b38bdcf90..969e2ea13e6 100644
--- a/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx
+++ b/docs/snippets/react/highlight-addon-custom-style.ts-4-9.mdx
@@ -2,9 +2,7 @@
 // MyComponent.stories.ts|tsx
 
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent';
@@ -23,8 +21,7 @@ export const StyledHighlight: Story = {
       emit(HIGHLIGHT, {
         elements: ['h2', 'a', '.storybook-button'],
         color: 'blue',
-        // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed'
-        style: 'double',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
       });
       return storyFn();
     },
diff --git a/docs/snippets/react/highlight-addon-custom-style.ts.mdx b/docs/snippets/react/highlight-addon-custom-style.ts.mdx
index 1be32dac908..ea4534dd16a 100644
--- a/docs/snippets/react/highlight-addon-custom-style.ts.mdx
+++ b/docs/snippets/react/highlight-addon-custom-style.ts.mdx
@@ -2,9 +2,7 @@
 // MyComponent.stories.ts|tsx
 
 import type { Meta, StoryObj } from '@storybook/react';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import { MyComponent } from './MyComponent';
@@ -23,8 +21,7 @@ export const StyledHighlight: Story = {
       emit(HIGHLIGHT, {
         elements: ['h2', 'a', '.storybook-button'],
         color: 'blue',
-        // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed'
-        style: 'double',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
       });
       return storyFn();
     },
diff --git a/docs/snippets/vue/component-story-highlight-addon.js.mdx b/docs/snippets/vue/component-story-highlight-addon.js.mdx
index 3d5a1d0b5c6..3781ac9d3fc 100644
--- a/docs/snippets/vue/component-story-highlight-addon.js.mdx
+++ b/docs/snippets/vue/component-story-highlight-addon.js.mdx
@@ -2,7 +2,6 @@
 // MyComponent.stories.js
 
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx b/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx
index 382988c2824..462c5449844 100644
--- a/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx
+++ b/docs/snippets/vue/component-story-highlight-addon.ts-4-9.mdx
@@ -3,9 +3,7 @@
 
 // Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/component-story-highlight-addon.ts.mdx b/docs/snippets/vue/component-story-highlight-addon.ts.mdx
index 626f8924e69..94ad9f9c0a0 100644
--- a/docs/snippets/vue/component-story-highlight-addon.ts.mdx
+++ b/docs/snippets/vue/component-story-highlight-addon.ts.mdx
@@ -3,9 +3,7 @@
 
 // Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import MyComponent from './MyComponent.vue';
diff --git a/docs/snippets/vue/highlight-addon-custom-style.js.mdx b/docs/snippets/vue/highlight-addon-custom-style.js.mdx
index a8feb1e7a1e..698347ab3dc 100644
--- a/docs/snippets/vue/highlight-addon-custom-style.js.mdx
+++ b/docs/snippets/vue/highlight-addon-custom-style.js.mdx
@@ -2,9 +2,7 @@
 // MyComponent.stories.js
 
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
-
 import MyComponent from './MyComponent.vue';
 
 export default {
@@ -18,8 +16,7 @@ export const StyledHighlight = {
       emit(HIGHLIGHT, {
         elements: ['h2', 'a', '.storybook-button'],
         color: 'blue',
-        // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed'
-        style: 'double',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
       });
       return {
         template: '<story />',
diff --git a/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx b/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx
index 04491e4a6d7..eec2829fc50 100644
--- a/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx
+++ b/docs/snippets/vue/highlight-addon-custom-style.ts-4-9.mdx
@@ -3,9 +3,7 @@
 
 // Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import MyComponent from './MyComponent.vue';
@@ -24,8 +22,7 @@ export const StyledHighlight: Story = {
       emit(HIGHLIGHT, {
         elements: ['h2', 'a', '.storybook-button'],
         color: 'blue',
-        // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed'
-        style: 'double',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
       });
       return {
         template: '<story />',
diff --git a/docs/snippets/vue/highlight-addon-custom-style.ts.mdx b/docs/snippets/vue/highlight-addon-custom-style.ts.mdx
index 9822f5cbb5a..34dd55cebca 100644
--- a/docs/snippets/vue/highlight-addon-custom-style.ts.mdx
+++ b/docs/snippets/vue/highlight-addon-custom-style.ts.mdx
@@ -3,9 +3,7 @@
 
 // Replace vue3 with vue if you are using Storybook for Vue 2
 import type { Meta, StoryObj } from '@storybook/vue3';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 import MyComponent from './MyComponent.vue';
@@ -24,8 +22,7 @@ export const StyledHighlight: Story = {
       emit(HIGHLIGHT, {
         elements: ['h2', 'a', '.storybook-button'],
         color: 'blue',
-        // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed'
-        style: 'double',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
       });
       return {
         template: '<story />',
diff --git a/docs/snippets/web-components/component-story-highlight-addon.js.mdx b/docs/snippets/web-components/component-story-highlight-addon.js.mdx
index 70ed9e359ab..cfa00a6804a 100644
--- a/docs/snippets/web-components/component-story-highlight-addon.js.mdx
+++ b/docs/snippets/web-components/component-story-highlight-addon.js.mdx
@@ -2,7 +2,6 @@
 // MyComponent.stories.js
 
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 export default {
diff --git a/docs/snippets/web-components/component-story-highlight-addon.ts.mdx b/docs/snippets/web-components/component-story-highlight-addon.ts.mdx
index 7a83723b4c8..ce3194d5479 100644
--- a/docs/snippets/web-components/component-story-highlight-addon.ts.mdx
+++ b/docs/snippets/web-components/component-story-highlight-addon.ts.mdx
@@ -2,9 +2,7 @@
 // MyComponent.stories.ts
 
 import type { Meta, StoryObj } from '@storybook/web-components';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 export default {
diff --git a/docs/snippets/web-components/highlight-addon-custom-style.js.mdx b/docs/snippets/web-components/highlight-addon-custom-style.js.mdx
index f37e56fdfbb..0f2ffb53cb4 100644
--- a/docs/snippets/web-components/highlight-addon-custom-style.js.mdx
+++ b/docs/snippets/web-components/highlight-addon-custom-style.js.mdx
@@ -2,7 +2,6 @@
 // MyComponent.stories.js
 
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 export default {
@@ -16,8 +15,7 @@ export const StyledHighlight = {
       emit(HIGHLIGHT, {
         elements: ['h2', 'a', '.storybook-button'],
         color: 'blue',
-        // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed'
-        style: 'double',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
       });
       return story();
     },
diff --git a/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx b/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx
index c1b977ae760..97967c3a6d1 100644
--- a/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx
+++ b/docs/snippets/web-components/highlight-addon-custom-style.ts.mdx
@@ -2,9 +2,7 @@
 // MyComponent.stories.ts
 
 import type { Meta, StoryObj } from '@storybook/web-components';
-
 import { useChannel } from '@storybook/preview-api';
-
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
 export default {
@@ -18,8 +16,7 @@ export const StyledHighlight: Story = {
       emit(HIGHLIGHT, {
         elements: ['h2', 'a', '.storybook-button'],
         color: 'blue',
-        // 👇 Specify the style of the highlighted elements acccepted values are: 'double', 'solid', 'dotted', 'dashed'
-        style: 'double',
+        style: 'double', // 'dotted' | 'dashed' | 'solid' | 'double'
       });
       return story();
     },