Merge remote-tracking branch 'origin/v3' into feat/init-blog

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

@@ -973,7 +973,7 @@ export default {
 
 ```vue [src/runtime/components/Card.vue]
 <template>
-  <div :class="ui.root({ class: [props.class, props.ui?.root] })">
+  <div :class="ui.root({ class: [props.ui?.root, props.class] })">
     <div :class="ui.header({ class: props.ui?.header })">
       <slot name="header" />
     </div>

docs/content/1.getting-started/contribution.md

@@ -16,7 +16,7 @@ Here's an overview of the key directories and files in the Nuxt UI project struc
 
 ### Documentation
 
-The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` v3 to generate pages from Markdown files. See the [Content v3 Docs](https://content3.nuxt.dev/docs/getting-started) for details on how it works. Here's a breakdown of its structure:
+The documentation lives in the `docs` folder as a Nuxt app using `@nuxt/content` v3 to generate pages from Markdown files. See the [Nuxt Content documentation](https://content.nuxt.com/docs/getting-started) for details on how it works. Here's a breakdown of its structure:
 
 ```bash
 ├── app/

docs/content/3.components/form.md

@@ -24,7 +24,7 @@ It requires two props:
 **No validation library is included** by default, ensure you **install the one you need**.
 ::
 
-::tabs
+::tabs{class="gap-0"}
   ::component-example{label="Valibot"}
   ---
   name: 'form-example-valibot'

docs/content/3.components/navigation-menu.md

@@ -21,8 +21,12 @@ Use the `items` prop as an array of objects with the following properties:
 - `icon?: string`{lang="ts-type"}
 - `avatar?: AvatarProps`{lang="ts-type"}
 - `badge?: string | number | BadgeProps`{lang="ts-type"}
+- `tooltip?: TooltipProps`{lang="ts-type"}
 - `trailingIcon?: string`{lang="ts-type"}
 - `type?: 'label' | 'link'`{lang="ts-type"}
+- `collapsible?: boolean`{lang="ts-type"}
+- `defaultOpen?: boolean`{lang="ts-type"}
+- `open?: boolean`{lang="ts-type"}
 - `value?: string`{lang="ts-type"}
 - `disabled?: boolean`{lang="ts-type"}
 - `class?: any`{lang="ts-type"}
@@ -140,7 +144,7 @@ Each item can take a `children` array of objects with the following properties t
 Use the `orientation` prop to change the orientation of the NavigationMenu.
 
 ::note
-When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties.
+When orientation is `vertical`, a [Collapsible](/components/collapsible) component is used to display children. You can control the open state of each item using the `open` and `defaultOpen` properties. You can also use the `collapsible` property to control if the item is collapsible.
 ::
 
 ::component-code

docs/content/3.components/slider.md

@@ -136,6 +136,21 @@ props:
 ---
 ::
 
+### Tooltip :badge{label="Soon" class="align-text-top"}
+
+Use the `tooltip` prop to display a [Tooltip](/components/tooltip) around the Slider thumbs with the current value. You can set it to `true` for default behavior or pass an object to customize it with any property from the [Tooltip](/components/tooltip#props) component.
+
+::component-code
+---
+ignore:
+  - defaultValue
+  - tooltip
+props:
+  defaultValue: 50
+  tooltip: true
+---
+::
+
 ### Disabled
 
 Use the `disabled` prop to disable the Slider.

docs/content/3.components/table.md

@@ -260,6 +260,30 @@ You can use the `expanded` prop to control the expandable state of the rows (can
 You could also add this action to the [`DropdownMenu`](/components/dropdown-menu) component inside the `actions` column.
 ::
 
+### With grouped rows
+
+You can group rows based on a given column value and show/hide sub rows via some button added to the cell using the TanStack Table [Grouping APIs](https://tanstack.com/table/latest/docs/api/features/grouping).
+
+#### Important parts:
+
+* Add prop `grouping` to `UTable` component with an array of column ids you want to group by.
+* Add prop `grouping-options` to `UTable`. It must include `getGroupedRowModel`, you can import it from `@tanstack/vue-table` or implement your own.
+* Expand rows via `row.toggleExpanded()` method on any cell of the row. Keep in mind, it also toggles `#expanded` slot.
+* Use `aggregateFn` on column definition to define how to aggregate the rows.
+* `agregatedCell` renderer on column definition only works if there is no `cell` renderer.
+
+::component-example
+---
+prettier: true
+collapse: true
+name: 'table-grouped-rows-example'
+highlights:
+  - 159
+  - 169
+class: '!p-0'
+---
+::
+
 ### With row selection
 
 You can add a new column that renders a [Checkbox](/components/checkbox) component inside the `header` and `cell` to select rows using the TanStack Table [Row Selection APIs](https://tanstack.com/table/latest/docs/api/features/row-selection).

docs/content/3.components/tabs.md

@@ -210,10 +210,6 @@ You can control the active item by using the `default-value` prop or the `v-mode
 
 :component-example{name="tabs-model-value-example"}
 
-::tip
-You can also pass the `value` of one of the items if provided.
-::
-
 ### With content slot
 
 Use the `#content` slot to customize the content of each item.