Docs: Minor fix to the Web Components Snippets

docs/snippets/web-components/addon-highlight-reset.ts.mdx

@@ -5,10 +5,13 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT, RESET_HIGHLIGHT } from '@storybook/addon-highlight';
 
-export default {
+const meta: Meta = {
   component: 'my-component',
 };
 
+export default meta;
+type Story = StoryObj;
+
 export const ResetHighlight: Story = {
   decorators: [
     (story) => {

docs/snippets/web-components/arg-types-in-story.ts.mdx

@@ -8,8 +8,7 @@ const meta: Meta = {
 };
 
 export default meta;
-
-type Story = StoryObj<typeof Button>;
+type Story = StoryObj;
 
 export const Basic: Story = {
   argTypes: {

docs/snippets/web-components/arg-types-mapping.ts.mdx

@@ -17,5 +17,6 @@ const meta: Meta = {
     },
   },
 };
+
 export default meta;
 ```

docs/snippets/web-components/button-group-story.ts.mdx

@@ -9,8 +9,8 @@ import * as ButtonStories from './Button.stories';
 const meta: Meta = {
   component: 'demo-button-group',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Pair: Story = {

docs/snippets/web-components/button-story-action-event-handle.ts.mdx

@@ -2,7 +2,6 @@
 // Button.stories.ts
 
 import type { Meta } from '@storybook/web-components';
-
 import { withActions } from '@storybook/addon-actions/decorator';
 
 const meta: Meta = {

docs/snippets/web-components/button-story-baseline.ts.mdx

@@ -3,8 +3,6 @@
 
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-import { Button } from './Button';
-
 const meta: Meta = {
   component: 'demo-button',
 };

docs/snippets/web-components/button-story-click-handler-args.ts.mdx

@@ -1,12 +1,11 @@
 ```ts
 // Button.stories.ts
 
-import { html } from 'lit';
-
 import type { Meta, StoryObj } from '@storybook/web-components';
-
 import { action } from '@storybook/addon-actions';
 
+import { html } from 'lit';
+
 const meta: Meta = {
   component: 'custom-button',
 };

docs/snippets/web-components/button-story-click-handler.ts.mdx

@@ -1,12 +1,11 @@
 ```ts
 // Button.stories.ts
 
-import { html } from 'lit';
-
 import type { Meta, StoryObj } from '@storybook/web-components';
-
 import { action } from '@storybook/addon-actions';
 
+import { html } from 'lit';
+
 const meta: Meta = {
   component: 'custom-button',
 };

docs/snippets/web-components/button-story-component-args-primary.ts.mdx

@@ -14,5 +14,6 @@ const meta: Meta = {
     primary: true,
   },
 };
+
 export default meta;
 ```

docs/snippets/web-components/button-story-component-decorator.ts.mdx

@@ -9,8 +9,8 @@ const meta: Meta = {
   component: 'demo-button',
   decorators: [(story) => html`<div style="margin: 3em">${story()}</div>`],
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Example: Story = {};

docs/snippets/web-components/button-story-decorator.ts.mdx

@@ -6,8 +6,8 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   component: 'demo-button',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {

docs/snippets/web-components/button-story-default-export.ts.mdx

@@ -7,5 +7,6 @@ const meta: Meta = {
   title: 'Button',
   component: 'demo-button',
 };
+
 export default meta;
 ```

docs/snippets/web-components/button-story-grouped.ts.mdx

@@ -7,5 +7,6 @@ const meta: Meta = {
   title: 'Design System/Atoms/Button',
   component: 'demo-button',
 };
+
 export default meta;
 ```

docs/snippets/web-components/button-story-hoisted.ts.mdx

@@ -7,8 +7,8 @@ const meta: Meta = {
   title: 'Design System/Atoms/Button',
   component: 'demo-component',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 // This is the only named export in the file, and it matches the component name

docs/snippets/web-components/button-story-primary-composition.ts.mdx

@@ -6,8 +6,8 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   component: 'demo-button',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {

docs/snippets/web-components/button-story-primary-long-name.ts.mdx

@@ -6,8 +6,8 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   component: 'demo-button',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {

docs/snippets/web-components/button-story-rename-story.ts.mdx

@@ -6,8 +6,8 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   component: 'demo-button',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {

docs/snippets/web-components/button-story-using-args.ts.mdx

@@ -3,13 +3,11 @@
 
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-import { Button } from './Button';
-
 const meta: Meta = {
   component: 'demo-button',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {

docs/snippets/web-components/button-story-with-args.ts.mdx

@@ -6,8 +6,8 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   component: 'demo-button',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {

docs/snippets/web-components/button-story-with-blue-args.ts.mdx

@@ -16,5 +16,6 @@ const meta: Meta = {
     },
   },
 };
+
 export default meta;
 ```

docs/snippets/web-components/button-story-with-emojis.ts.mdx

@@ -8,8 +8,8 @@ import { html } from 'lit';
 const meta: Meta = {
   component: 'demo-button',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 /*

docs/snippets/web-components/button-story.ts.mdx

@@ -8,8 +8,8 @@ import { html } from 'lit';
 const meta: Meta = {
   component: 'demo-button',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {

docs/snippets/web-components/checkbox-story-grouped.ts.mdx

@@ -7,5 +7,6 @@ const meta: Meta = {
   title: 'Design System/Atoms/Checkbox',
   component: 'demo-checkbox',
 };
+
 export default meta;
 ```

docs/snippets/web-components/component-story-custom-params.ts.mdx

@@ -6,8 +6,8 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   component: 'demo-button',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj<typeof Button>;
 
 export const Primary: Story = {

docs/snippets/web-components/component-story-highlight-addon.ts.mdx

@@ -5,10 +5,13 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
-export default {
+const meta: Meta = {
   component: 'my-component',
 };
 
+export default meta;
+type Story = StoryObj;
+
 export const Highlighted: Story = {
   decorators: [
     (story) => {

docs/snippets/web-components/component-story-static-asset-cdn.ts.mdx

@@ -1,10 +1,10 @@
 ```ts
 // MyComponent.stories.ts
 
-import { html } from 'lit';
-
 import type { Meta, StoryObj } from '@storybook/web-components';
 
+import { html } from 'lit';
+
 const meta: Meta = {
   component: 'my-component',
 };

docs/snippets/web-components/component-story-static-asset-with-import.ts.mdx

@@ -1,10 +1,10 @@
 ```ts
 // MyComponent.stories.ts
 
-import { html } from 'lit';
-
 import type { Meta, StoryObj } from '@storybook/web-components';
 
+import { html } from 'lit';
+
 import imageFile from './static/image.png';
 
 const meta: Meta = {

docs/snippets/web-components/component-story-static-asset-without-import.ts.mdx

@@ -1,10 +1,10 @@
 ```ts
 // MyComponent.stories.ts
 
-import { html } from 'lit';
-
 import type { Meta, StoryObj } from '@storybook/web-components';
 
+import { html } from 'lit';
+
 const meta: Meta = {
   component: 'my-component',
 };

docs/snippets/web-components/component-story-with-custom-render-function.ts.mdx

@@ -1,10 +1,10 @@
 ```ts
 // MyComponent.stories.ts
 
-import { html } from 'lit';
-
 import type { Meta, StoryObj } from '@storybook/web-components';
 
+import { html } from 'lit';
+
 const meta: Meta = {
   component: 'my-component',
 };

docs/snippets/web-components/csf-3-example-starter.ts.mdx

@@ -7,8 +7,8 @@ const meta: Meta = {
   title: 'components/Button',
   component: 'demo-button',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = { args: { primary: true } };

docs/snippets/web-components/highlight-addon-custom-style.ts.mdx

@@ -5,10 +5,13 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 import { useChannel } from '@storybook/preview-api';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
 
-export default {
+const meta: Meta = {
   component: 'my-component',
 };
 
+export default meta;
+type Story = StoryObj;
+
 export const StyledHighlight: Story = {
   decorators: [
     (story) => {

docs/snippets/web-components/list-story-expanded.ts.mdx

@@ -8,8 +8,8 @@ import { html } from 'lit';
 const meta: Meta = {
   component: 'demo-list',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Empty: Story = {

docs/snippets/web-components/list-story-reuse-data.ts.mdx

@@ -11,8 +11,8 @@ import { Selected, Unselected } from './ListItem.stories';
 const meta: Meta = {
   component: 'demo-list',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const ManyItems: Story = {

docs/snippets/web-components/list-story-starter.ts.mdx

@@ -6,8 +6,8 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 const meta: Meta = {
   component: 'demo-list',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 // Always an empty list, not super interesting

docs/snippets/web-components/list-story-template.ts.mdx

@@ -10,8 +10,8 @@ const meta: Meta = {
   title: 'List',
   component: 'demo-list',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 //👇 The ListTemplate construct will be spread to the existing stories.

docs/snippets/web-components/loader-story.ts.mdx

@@ -14,8 +14,8 @@ const meta: Meta = {
   component: 'demo-todo-item',
   render: (args, { loaded: { todo } }) => TodoItem({ ...args, ...todo }),
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const Primary: Story = {

docs/snippets/web-components/login-form-with-play-function.ts.mdx

@@ -8,8 +8,8 @@ import { expect } from '@storybook/jest';
 const meta: Meta = {
   component: 'demo-login-form',
 };
-export default meta;
 
+export default meta;
 type Story = StoryObj;
 
 export const EmptyForm: Story = {};

docs/snippets/web-components/my-component-disable-toc.ts.mdx

@@ -14,5 +14,6 @@ const meta: Meta = {
     },
   },
 };
+
 export default meta;
 ```