feat(Carousel): implement component (#2288)

docs/content/1.getting-started/3.theme.md

@@ -36,7 +36,7 @@ Tailwind CSS v4 takes a CSS-first configuration approach, you now customize your
 </style>
 ```
 
-The `@theme` directive tells Tailwind to make new utilities and variants available based on those variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.
+The `@theme` directive tells Tailwind to make new utilities and variants available based on these variables. It's the equivalent of the `theme.extend` key in Tailwind CSS v3 `tailwind.config.ts` file.
 
 ::note
 You can learn more about this on [https://tailwindcss.com/blog/tailwindcss-v4-alpha](https://tailwindcss.com/blog/tailwindcss-v4-alpha#css-first-configuration).
@@ -383,7 +383,7 @@ export default {
 
 ::
 
-::note
+::warning
 Components without slots don't have a [`ui` prop](#ui-prop), only the [`class` prop](#class-prop) is available to override styles.
 ::
 
@@ -434,11 +434,11 @@ The `defaultVariants` property specifies the default values for each variant. It
 
 You have multiple ways to customize the appearance of Nuxt UI components, you can do it for all components at once or on a per-component basis.
 
-::tip
+::note
 Tailwind Variants uses [tailwind-merge](https://github.com/dcastil/tailwind-merge) under the hood to merge classes so you don't have to worry about conflicting classes.
 ::
 
-::note
+::tip
 You can explore the theme for each component in two ways:
 
 - Check the `Theme` section in the documentation of each individual component.
@@ -463,7 +463,9 @@ export default defineAppConfig({
 })
 ```
 
+::note
 In this example, the `font-bold` class will override the default `font-medium` class on all buttons.
+::
 
 ### `ui` prop
 
@@ -492,7 +494,9 @@ slots:
 ---
 ::
 
+::note
 In this example, the `trailingIcon` slot is overwritten with `size-3` even though the `md` size variant would apply a `size-5` class to it.
+::
 
 ### `class` prop
 
@@ -506,3 +510,7 @@ slots:
   default: Button
 ---
 ::
+
+::note
+In this example, the `font-bold` class will override the default `font-medium` class on this button.
+::

docs/content/1.getting-started/4.icons.md

@@ -69,7 +69,7 @@ npm install @iconify-json/{collection_name}
 
 For example, to use the `i-uil-github` icon, install it's collection with `@iconify-json/uil`. This way the icons can be served locally or from your serverless functions, which is faster and more reliable on both SSR and client-side.
 
-::tip{to="https://github.com/nuxt/icon?tab=readme-ov-file#iconify-dataset" target="_blank"}
+::note{to="https://github.com/nuxt/icon?tab=readme-ov-file#iconify-dataset" target="_blank"}
 Read more about this in the `@nuxt/icon` documentation.
 ::
 
@@ -109,7 +109,7 @@ Then you can use the icons like this:
 </template>
 ```
 
-::tip{to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
+::note{to="https://github.com/nuxt/icon?tab=readme-ov-file#custom-local-collections" target="_blank"}
 Read more about this in the `@nuxt/icon` documentation.
 ::
 

docs/content/1.getting-started/5.fonts.md

@@ -25,6 +25,6 @@ Nuxt UI automatically registers the `@nuxt/fonts` module for you, so there's no
 
 That's it! Nuxt Fonts will detect this and you should immediately see the web font loaded in your browser.
 
-::tip{to="https://fonts.nuxt.com/advanced" target="_blank"}
+::note{to="https://fonts.nuxt.com/advanced" target="_blank"}
 Read more about how `@nuxt/fonts` work behind the scenes to optimize your fonts.
 ::