docs(update): update playground and docs

Author: ThornWalli

docs/src/components/content-container.md

@@ -83,6 +83,11 @@ Can be used to overwrite the level.
     </ContentContainer>
   </ContentContainer>
 </template>
+
+<script setup>
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+</script>
 ```
 
 ```html

docs/src/components/content-headline.md

@@ -60,6 +60,11 @@ Tag for the element.
     </ContentContainer>
   </ContentContainer>
 </template>
+
+<script setup>
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+</script>
 ```
 
 ```html

docs/src/introduction.md

@@ -58,6 +58,11 @@ If `ContentContainer` is level 2, `ContentHeadline` level 2 is rendered as `h2`.
     <footer>Footer</footer>
   </div>
 </template>
+
+<script setup>
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
+</script>
 ```
 
 ```html

docs/src/usage.md

@@ -20,6 +20,10 @@ The main structure is in the `<main>` tag, which contains the main components.
     <ContentContainer class="gallery">…</ContentContainer>
   </ContentContainer>
 </template>
+
+<script setup>
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+</script>
 ```
 
 ```html [HTML]
@@ -52,7 +56,7 @@ It is recommended to create a separate component that extends the `ContentContai
 </template>
 
 <script setup>
-import { ContentContainer } from 'vue-semantic-structure';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
 </script>
 ```
 
@@ -70,6 +74,10 @@ In comparison to the basic application, the entire content is enclosed in anothe
     </CustomContentContainer>
   </CustomContentContainer>
 </template>
+
+<script setup>
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
+</script>
 ```
 
 ```html [HTML]

playground/src/components/DebugArticleContentContainer.vue

@@ -15,7 +15,7 @@
 
 <script setup>
 import { inject, provide } from 'vue';
-import { ContentContainer } from 'vue-semantic-structure';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
 
 const props = defineProps({
   debug: {

playground/src/components/DebugContainer.vue

@@ -12,7 +12,7 @@
 
 <script setup>
 import { inject, provide } from 'vue';
-import { ContentContainer } from 'vue-semantic-structure';
+import ContentContainer from 'vue-semantic-structure/ContentContainer.vue';
 
 const props = defineProps({
   debug: {

playground/src/components/DebugHeadline.vue

@@ -7,7 +7,7 @@
 
 <script setup>
 import { inject } from 'vue';
-import { ContentHeadline } from 'vue-semantic-structure';
+import ContentHeadline from 'vue-semantic-structure/ContentHeadline.vue';
 
 const debug = inject('debugHeadings', false);
 </script>