docs: replace mdcslot docs with native <slot />

Author: farnabaz

docs/app/components/example/ExampleAlert.vue

@@ -12,10 +12,7 @@ defineProps({
     class="alert"
     :class="[type]"
   >
-    <MDCSlot
-      :use="$slots.default"
-      unwrap="p"
-    />
+    <slot mdc-unwrap="p" />
   </div>
 </template>
 

docs/app/components/example/ExampleHero.vue

@@ -1,7 +1,7 @@
 <template>
   <section class="pt-4">
     <h1 class="text-4xl">
-      <MDCSlot unwrap="p" />
+      <slot mdc-unwrap="p" />
     </h1>
     <slot name="description" />
   </section>

docs/app/components/example/ExampleTitle.vue

@@ -1,8 +1,5 @@
 <template>
   <h1 class="text-4xl">
-    <MDCSlot
-      :use="$slots.default"
-      unwrap="p"
-    />
+    <slot mdc-unwrap="p" />
   </h1>
 </template>

docs/content/docs/3.files/1.markdown.md

@@ -153,10 +153,7 @@ Components that are used in Markdown has to be marked as `global` in your Nuxt a
 
 Block components are components that accept Markdown content or another component as a slot.
 
-The component must contain either:
-
-- A `<slot />` to accept raw text or another component.
-- The [`<MDCSlot />`](/docs/components/mdc-slot) component to accept formatted text.
+The component must contain at least one `<slot />` component to accept formatted text.
 
 In a markdown file, use the component with the `::` identifier.
 
@@ -204,7 +201,7 @@ This will be rendered inside the `description` slot.
 <template>
   <section>
     <h1 class="text-4xl">
-      <MDCSlot unwrap="p" />
+      <slot mdc-unwrap="p" />
     </h1>
     <slot name="description" />
   </section>
@@ -222,7 +219,7 @@ This will be rendered inside the `description` slot.
 ::
 
 ::note
-Read more about the [`<MDCSlot />`](/docs/components/mdc-slot) component.
+Read more about the [`<slot />`](/docs/components/slot) component.
 ::
 
 ::tip
@@ -238,7 +235,7 @@ You can use Markdown inside your components slots:
   ```html [MyTitle.vue]
   <template>
     <h1 class="text-4xl">
-      <MDCSlot unwrap="p" />
+      <slot mdc-unwrap="p" />
     </h1>
   </template>
   ```
@@ -273,7 +270,7 @@ defineProps(['type'])
 
 <template>
   <div :class="[type]">
-    <MDCSlot :use="$slots.default" unwrap="p" />
+    <slot mdc-unwrap="p" />
   </div>
 </template>
 ```

docs/content/docs/4.components/1.mdc-slot.md renamed to docs/content/docs/4.components/1.slot.md

@@ -1,29 +1,18 @@
 ---
-title: MDCSlot
+title: slot
 description: The fastest way to inject Markdown into your Vue components.
 ---
 
-::warning
-We recommend using `<slot>` as much as possible an only use `<MDCSlot>` when you need unwrapping which is not covered by MDC defaults.
-::
-
-The `<MDCSlot>` is an extension of the [`<slot>`](https://vuejs.org/guide/components/slots.html) component that makes it easier to render and manipulate Markdown content within your Vue components.
-
-::note
-This component is part of [`@nuxtjs/mdc`](https://github.com/nuxt-modules/mdc).
-::
+When you write contents and paragraphs inside a component with the MDC syntax, you can use Vue's `<slot>` component to render the content.
 
 ## Usage
 
-This component is a replacement for Vue's `<slot>` component, specifically designed for MDC.
-
-Use the `<MDCSlot>` component instead of the native `<slot>` component:
+If you don't want to modify the rendered content, simply use Vue's `<slot>` component.
 
 ```vue [components/content/Callout.vue]
 <template>
   <div class="callout">
-    <!-- similar to <slot /> -->
-    <MDCSlot />
+    <slot />
   </div>
 </template>
 ```
@@ -48,14 +37,14 @@ This usage would be similar to using the native `<slot>` component.
 
 ### Unwrapping
 
-The `unwrap` prop allows you to remove one or multiple wrapping elements from the rendered content. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
+The `mdc-unwrap` prop allows you to remove one or multiple wrapping elements from the rendered content. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
 
 Let's unwrap the `<p>` element from the previous example:
 
 ```vue [components/content/Callout.vue]
 <template>
   <div class="callout">
-    <MDCSlot unwrap="p" />
+    <slot mdc-unwrap="p" />
   </div>
 </template>
 ```
@@ -78,9 +67,9 @@ Let's improve our `Callout` component to have a `title` slot:
 <template>
   <div class="callout">
     <h2 v-if="$slots.title">
-      <MDCSlot :use="$slots.title" unwrap="p" />
+      <slot name="title" mdc-unwrap="p" />
     </h2>
-    <MDCSlot :use="$slots.default" />
+    <slot />
   </div>
 </template>
 ```
@@ -109,10 +98,7 @@ When not using the `title` slot, the `h2` element will not be rendered.
 
 ## Props
 
-- `use`: The slot to bind on, you must provide a `use` via `$slots.{your_slot}` in `<template>`.
-  - **Type:** Vue slot `Function`
-  - **Example:** `$slots.default`
-- `unwrap`: Whether to unwrap the content or not. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
+- `mdc-unwrap`: Whether to unwrap the content or not. This is useful when you want to extract the content nested in native Markdown syntax. Each specified tag will get removed from AST.
   - **Type:** `boolean` or `string`
   - **Default:** `false`
   - **Example:** `'p'` or `'ul li'`