feat(layer): enhance MDC tabs with icons, type safety, and accessibility

.gitmodules

@@ -7,3 +7,12 @@
 [submodule "ref/docus"]
 	path = ref/docus
 	url = https://github.com/nuxt-content/docus
+[submodule "ref/content"]
+	path = ref/content
+	url = https://github.com/nuxt/content
+[submodule "ref/mdc"]
+	path = ref/mdc
+	url = https://github.com/nuxt-content/mdc
+[submodule "ref/ui"]
+	path = ref/ui
+	url = https://github.com/nuxt/ui

CLAUDE.md

@@ -89,6 +89,11 @@ export default defineNuxtConfig({
 })
 ```
 
+## References
+
+- [Nuxt Content Markdown Documentation](https://content.nuxt.com/raw/docs/files/markdown.md)
+- [MDC Prose Components](https://github.com/nuxt-content/mdc/tree/main/src/runtime/components/prose)
+
 ## ESLint
 
 Uses `@antfu/eslint-config` with Vue and formatters enabled.

apps/docs/content/docs/2.components/6.tabs.md

@@ -5,68 +5,41 @@ description: Tabbed content sections for organizing related content
 
 # Tabs
 
-A component system for creating tabbed content sections. Useful for showing multiple code examples, alternative approaches, or organizing related content.
+A component for creating tabbed content sections. Useful for showing multiple code examples, alternative approaches, or organizing related content.
 
 ## Usage
 
-Create tabs using the `::tabs`, `::tabs-list`, `::tabs-trigger`, and `::tabs-content` components:
+Create tabs using the `::tabs` and `::tabs-item` components:
 
 ```mdc
-::tabs{default-value="tab1"}
-  ::tabs-list
-    ::tabs-trigger{value="tab1"}
-    First Tab
-    ::
-    ::tabs-trigger{value="tab2"}
-    Second Tab
-    ::
-  ::
-
-  ::tabs-content{value="tab1"}
+::tabs
+  ::tabs-item{label="First Tab"}
   Content for the first tab.
   ::
 
-  ::tabs-content{value="tab2"}
+  ::tabs-item{label="Second Tab"}
   Content for the second tab.
   ::
 ::
 ```
 
-::tabs{default-value="tab1"}
-::tabs-list
-::tabs-trigger{value="tab1"}
-First Tab
-::
-::tabs-trigger{value="tab2"}
-Second Tab
-::
-::
-
-::tabs-content{value="tab1"}
-Content for the first tab.
-::
+::tabs
+  ::tabs-item{label="First Tab"}
+  Content for the first tab.
+  ::
 
-::tabs-content{value="tab2"}
-Content for the second tab.
-::
+  ::tabs-item{label="Second Tab"}
+  Content for the second tab.
+  ::
 ::
 
 ## Code Examples
 
 Tabs are useful for showing code in different languages or frameworks:
 
 ```mdc
-::tabs{default-value="vue"}
-  ::tabs-list
-    ::tabs-trigger{value="vue"}
-    Vue
-    ::
-    ::tabs-trigger{value="react"}
-    React
-    ::
-  ::
-
-  ::tabs-content{value="vue"}
+::tabs
+  ::tabs-item{label="Vue"}
   \`\`\`vue
   <script setup>
   const count = ref(0)
@@ -78,7 +51,7 @@ Tabs are useful for showing code in different languages or frameworks:
   \`\`\`
   ::
 
-  ::tabs-content{value="react"}
+  ::tabs-item{label="React"}
   \`\`\`tsx
   function Counter() {
     const [count, setCount] = useState(0)
@@ -89,80 +62,124 @@ Tabs are useful for showing code in different languages or frameworks:
 ::
 ```
 
-::tabs{default-value="vue"}
-::tabs-list
-::tabs-trigger{value="vue"}
-Vue
-::
-::tabs-trigger{value="react"}
-React
-::
-::
+::tabs
+  ::tabs-item{label="Vue"}
 
-::tabs-content{value="vue"}
+  ```vue
+  <script setup>
+  const count = ref(0)
+  </script>
+
+  <template>
+    <button @click="count++">
+      {{ count }}
+    </button>
+  </template>
+  ```
 
-```vue
-<script setup>
-const count = ref(0)
-</script>
+  ::
 
-<template>
-  <button @click="count++">
-    {{ count }}
-  </button>
-</template>
-```
+  ::tabs-item{label="React"}
 
+  ```tsx
+  function Counter() {
+    const [count, setCount] = useState(0)
+    return <button onClick={() => setCount(c => c + 1)}>{count}</button>
+  }
+  ```
+
+  ::
 ::
 
-::tabs-content{value="react"}
+## Package Manager Example
 
-```tsx
-function Counter() {
-  const [count, setCount] = useState(0)
-  return <button onClick={() => setCount(c => c + 1)}>{count}</button>
-}
-```
+Use the `sync` prop to remember the user's choice across tabs:
 
+```mdc
+::tabs{sync="pm"}
+  ::tabs-item{label="npm"}
+  \`\`\`bash
+  npm install @pleaseai/docs
+  \`\`\`
+  ::
+
+  ::tabs-item{label="pnpm"}
+  \`\`\`bash
+  pnpm add @pleaseai/docs
+  \`\`\`
+  ::
+
+  ::tabs-item{label="bun"}
+  \`\`\`bash
+  bun add @pleaseai/docs
+  \`\`\`
+  ::
 ::
-::
+```
 
-## Components
+::tabs{sync="pm"}
+  ::tabs-item{label="npm"}
 
-### Tabs
+  ```bash
+  npm install @pleaseai/docs
+  ```
 
-The root container for the tab system.
+  ::
+
+  ::tabs-item{label="pnpm"}
+
+  ```bash
+  pnpm add @pleaseai/docs
+  ```
 
-| Prop            | Type     | Default | Description                |
-| --------------- | -------- | ------- | -------------------------- |
-| `default-value` | `string` | -       | Initially active tab value |
-| `class`         | `string` | -       | Additional CSS classes     |
+  ::
+
+  ::tabs-item{label="bun"}
+
+  ```bash
+  bun add @pleaseai/docs
+  ```
+
+  ::
+::
+
+## With Icons
+
+Add icons to tab triggers using the `icon` prop:
 
-### TabsList
+```mdc
+::tabs
+  ::tabs-item{label="Vue" icon="i-logos-vue"}
+  Vue content here.
+  ::
 
-Container for tab triggers/buttons.
+  ::tabs-item{label="React" icon="i-logos-react"}
+  React content here.
+  ::
+::
+```
 
-| Prop    | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | -       | Additional CSS classes |
+## Components
 
-### TabsTrigger
+### Tabs
 
-Individual tab button.
+The root container for the tab system.
 
-| Prop    | Type     | Default      | Description                   |
-| ------- | -------- | ------------ | ----------------------------- |
-| `value` | `string` | **required** | Unique identifier for the tab |
-| `class` | `string` | -            | Additional CSS classes        |
+| Prop           | Type     | Default | Description                                          |
+| -------------- | -------- | ------- | ---------------------------------------------------- |
+| `defaultIndex` | `number` | `0`     | Initially active tab index (0-based)                 |
+| `sync`         | `string` | -       | Sync tab selection across tabs with this key via localStorage |
+| `class`        | `string` | -       | Additional CSS classes                               |
 
-### TabsContent
+### TabsItem
 
-Content panel for each tab.
+Individual tab content panel with its trigger label.
 
-| Prop    | Type     | Default      | Description                    |
-| ------- | -------- | ------------ | ------------------------------ |
-| `value` | `string` | **required** | Must match a TabsTrigger value |
-| `class` | `string` | -            | Additional CSS classes         |
+| Prop    | Type     | Default      | Description                        |
+| ------- | -------- | ------------ | ---------------------------------- |
+| `label` | `string` | **required** | The label displayed in the tab trigger |
+| `icon`  | `string` | -            | Optional icon name for the tab     |
+| `class` | `string` | -            | Additional CSS classes             |
 
 ## Styling
 

apps/docs/content/index.md

@@ -57,38 +57,30 @@ Ship fast, flexible, and SEO-optimized documentation with beautiful design out o
     ::::u-page-card
     ---
     spotlight: true
-    class: col-span-1 lg:col-span-2
+    class: col-span-2
     ---
-      :::::tabs{default-value="preview"}
-        ::::::tabs-list
-          :::::::tabs-trigger{value="preview"}
-          Preview
-          :::::::
-          :::::::tabs-trigger{value="code"}
-          Code
-          :::::::
-        ::::::
-        ::::::tabs-content{value="preview"}
-          :::::::div{class="flex flex-col gap-4"}
-            ::::::::note{class="my-0"}
-            Here's some additional information for you.
-            ::::::::
-
-            ::::::::tip{class="my-0"}
-            Here's a helpful suggestion.
-            ::::::::
-
-            ::::::::warning{class="my-0"}
-            Be careful with this action as it might have unexpected results.
-            ::::::::
-
-            ::::::::caution{class="my-0"}
-            This action cannot be undone.
-            ::::::::
-          :::::::
+      :::::tabs
+        ::::::tabs-item{label="Preview" icon="lucide:eye" class="mt-5"}
+        :::::::div{class="flex flex-col gap-4"}
+          ::::::::note{class="my-0"}
+          Here's some additional information for you.
+          ::::::::
+
+          ::::::::tip{class="my-0"}
+          Here's a helpful suggestion.
+          ::::::::
+
+          ::::::::warning{class="my-0"}
+          Be careful with this action as it might have unexpected results.
+          ::::::::
+
+          ::::::::caution{class="my-0"}
+          This action cannot be undone.
+          ::::::::
+        :::::::
         ::::::
 
-        ::::::tabs-content{value="code" class="text-sm overflow-x-auto"}
+        ::::::tabs-item{label="Code" icon="lucide:code" class="mt-5 mb-2 text-xs overflow-x-auto"}
         ```mdc
         ::note
         Here's some additional information.