Initial feedback addressed

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';

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 -->
 

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';

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;
     }),

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';

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';

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';

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();
     },

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();
     },

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();
     },

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';

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';

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';

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 />',

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 />',

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 />',

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 {

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 {

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();
     },

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();
     },