it seems volar has some new feature/bug where components defined by f…

…ilenames are treated to override native html elements, causing types clashes.

code/addons/storyshots-core/package.json

@@ -56,7 +56,7 @@
   "devDependencies": {
     "@angular/core": "^16.0.0-rc.4",
     "@angular/platform-browser-dynamic": "^16.0.0-rc.4",
-    "@emotion/jest": "^11.8.0",
+    "@emotion/jest": "^11.10.0",
     "@storybook/addon-docs": "7.1.0-alpha.30",
     "@storybook/angular": "7.1.0-alpha.30",
     "@storybook/react": "7.1.0-alpha.30",

code/renderers/vue/src/public-types.test.ts

@@ -6,7 +6,7 @@ import type { Component } from 'vue';
 import type { ExtendedVue } from 'vue/types/vue';
 import { Vue } from 'vue/types/vue';
 import type { Decorator, Meta, StoryObj } from './public-types';
-import Button from './__tests__/Button.vue';
+import Button from './__tests__/MyButton.vue';
 import type { VueRenderer } from './types';
 
 describe('Meta', () => {

code/renderers/vue3/src/public-types.test.ts

@@ -6,7 +6,7 @@ import { h } from 'vue';
 import type { ComponentPropsAndSlots, Decorator, Meta, StoryObj } from './public-types';
 import type { VueRenderer } from './types';
 import BaseLayout from './__tests__/BaseLayout.vue';
-import Button from './__tests__/Button.vue';
+import Button from './__tests__/MyButton.vue';
 import DecoratorTsVue from './__tests__/Decorator.vue';
 import Decorator2TsVue from './__tests__/Decorator2.vue';
 

code/renderers/vue3/template/cli/js/Button.stories.js

@@ -1,4 +1,4 @@
-import MyButton from './Button.vue';
+import MyButton from './MyButton.vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 export default {

code/renderers/vue3/template/cli/js/Header.stories.js

@@ -1,4 +1,4 @@
-import MyHeader from './Header.vue';
+import MyHeader from './MyHeader.vue';
 
 export default {
   title: 'Example/Header',

code/renderers/vue3/template/cli/js/Header.vue → code/renderers/vue3/template/cli/js/MyHeader.vue

@@ -41,7 +41,7 @@
 
 <script>
 import './header.css';
-import MyButton from './Button.vue';
+import MyButton from './MyButton.vue';
 
 export default {
   name: 'my-header',

code/renderers/vue3/template/cli/ts-3-8/Button.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import Button from './Button.vue';
+import Button from './MyButton.vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta: Meta<typeof Button> = {

code/renderers/vue3/template/cli/ts-3-8/Header.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import MyHeader from './Header.vue';
+import MyHeader from './MyHeader.vue';
 
 const meta: Meta<typeof MyHeader> = {
   /* 👇 The title prop is optional.

code/renderers/vue3/template/cli/ts-3-8/Header.vue → code/renderers/vue3/template/cli/ts-3-8/MyHeader.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts" setup>
 import './header.css';
-import MyButton from './Button.vue';
+import MyButton from './MyButton.vue';
 
 defineProps<{ user: { name: string } | null }>();
 

code/renderers/vue3/template/cli/ts-3-8/Page.vue

@@ -55,7 +55,7 @@
 
 <script lang="ts" setup>
 import './page.css';
-import MyHeader from './Header.vue';
+import MyHeader from './MyHeader.vue';
 
 import { ref } from 'vue';
 

code/renderers/vue3/template/cli/ts-4-9/Button.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import Button from './Button.vue';
+import Button from './MyButton.vue';
 
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta = {

code/renderers/vue3/template/cli/ts-4-9/Header.stories.ts

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
 
-import MyHeader from './Header.vue';
+import MyHeader from './MyHeader.vue';
 
 const meta = {
   /* 👇 The title prop is optional.

code/renderers/vue3/template/cli/ts-4-9/Header.vue → code/renderers/vue3/template/cli/ts-4-9/MyHeader.vue

@@ -23,7 +23,7 @@
 
 <script lang="ts" setup>
 import './header.css';
-import MyButton from './Button.vue';
+import MyButton from './MyButton.vue';
 
 defineProps<{ user: { name: string } | null }>();
 

code/renderers/vue3/template/cli/ts-4-9/Page.vue

@@ -55,7 +55,7 @@
 
 <script lang="ts" setup>
 import './page.css';
-import MyHeader from './Header.vue';
+import MyHeader from './MyHeader.vue';
 
 import { ref } from 'vue';
 

code/yarn.lock

@@ -2600,7 +2600,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/jest@npm:^11.10.0, @emotion/jest@npm:^11.8.0":
+"@emotion/jest@npm:^11.10.0":
   version: 11.11.0
   resolution: "@emotion/jest@npm:11.11.0"
   dependencies:
@@ -5482,7 +5482,7 @@ __metadata:
   dependencies:
     "@angular/core": ^16.0.0-rc.4
     "@angular/platform-browser-dynamic": ^16.0.0-rc.4
-    "@emotion/jest": ^11.8.0
+    "@emotion/jest": ^11.10.0
     "@jest/transform": ^29.3.1
     "@storybook/addon-docs": 7.1.0-alpha.30
     "@storybook/angular": 7.1.0-alpha.30

scripts/package.json

@@ -65,7 +65,7 @@
     "@babel/preset-react": "^7.22.0",
     "@babel/preset-typescript": "^7.21.0",
     "@babel/types": "^7.22.0",
-    "@emotion/jest": "^11.10.5",
+    "@emotion/jest": "^11.10.0",
     "@jest/globals": "^29.3.1",
     "@nx/workspace": "16.2.1",
     "@octokit/graphql": "^5.0.5",

scripts/yarn.lock

@@ -1544,7 +1544,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@emotion/jest@npm:^11.10.5":
+"@emotion/jest@npm:^11.10.0":
   version: 11.11.0
   resolution: "@emotion/jest@npm:11.11.0"
   dependencies:
@@ -2953,7 +2953,7 @@ __metadata:
     "@babel/preset-react": ^7.22.0
     "@babel/preset-typescript": ^7.21.0
     "@babel/types": ^7.22.0
-    "@emotion/jest": ^11.10.5
+    "@emotion/jest": ^11.10.0
     "@jest/globals": ^29.3.1
     "@nx/workspace": 16.2.1
     "@octokit/graphql": ^5.0.5