From ba90d973be1f23cbbf09c23e17774e6404000954 Mon Sep 17 00:00:00 2001
From: Rasmus Justesen <pilegaard24@gmail.com>
Date: Tue, 3 Mar 2026 09:58:01 +0100
Subject: [PATCH 1/5] feat: add AlertGroup component and theme styles

---
 src/runtime/components/AlertGroup.vue | 60 +++++++++++++++++++++++++++
 src/theme/alert-group.ts              |  6 +++
 2 files changed, 66 insertions(+)
 create mode 100644 src/runtime/components/AlertGroup.vue
 create mode 100644 src/theme/alert-group.ts

diff --git a/src/runtime/components/AlertGroup.vue b/src/runtime/components/AlertGroup.vue
new file mode 100644
index 0000000000..1d1f2650e7
--- /dev/null
+++ b/src/runtime/components/AlertGroup.vue
@@ -0,0 +1,60 @@
+<script lang="ts">
+import theme from '#build/ui/alert-group'
+import type { AppConfig } from '@nuxt/schema'
+import type { ComponentConfig } from '../types/tv'
+
+type AlertGroup = ComponentConfig<typeof theme, AppConfig, 'alertGroup'>
+</script>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+import type { AlertProps } from '@nuxt/ui'
+import { useAppConfig } from '#imports'
+import { useComponentUI } from '../composables/useComponentUI'
+import { tv } from '../utils/tv'
+
+const props = withDefaults(defineProps<{
+  items: AlertProps[]
+  expand?: boolean
+  max?: number
+}>(), {
+  expand: false,
+  max: 5
+})
+
+const appConfig = useAppConfig() as AlertGroup['AppConfig']
+const uiProp = useComponentUI('alertGroup', props)
+
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alertGroup || {}) }))
+
+const hovered = ref(false)
+const expanded = computed(() => props.expand || hovered.value)
+</script>
+
+<template>
+  <div
+    :data-expanded="expanded"
+    data-slot="root"
+    :class="ui.root({ class: [uiProp?.root, props.class] })"
+    @mouseenter="hovered = true"
+    @mouseleave="hovered = false"
+    @focusin="hovered = true"
+    @focusout="hovered = false"
+  >
+    <UAlert
+      v-for="(item, index) in props.items"
+      :key="`alert-${index}`"
+      v-bind="item"
+      :tabindex="0"
+      :data-expanded="expanded"
+      :data-front="index === 0"
+      :class="ui.items({ class: [uiProp?.items, props.class] })"
+      :style="{
+        width: expanded ? '100%' : `${100 - index * 3}%`,
+        marginTop: expanded || index === 0 ? '0' : (index >= props.max ? '-51px' : '-33px'),
+        zIndex: props.items.length - index,
+        maxHeight: !expanded && index !== 0 ? '51px' : undefined
+      }"
+    />
+  </div>
+</template>
diff --git a/src/theme/alert-group.ts b/src/theme/alert-group.ts
new file mode 100644
index 0000000000..09350ad470
--- /dev/null
+++ b/src/theme/alert-group.ts
@@ -0,0 +1,6 @@
+export default {
+  slots: {
+    root: 'group flex flex-col transition-all duration-300 data-[expanded=true]:gap-2 data-[expanded=false]:gap-0',
+    items: 'transition-all duration-300 mx-auto overflow-hidden not-first:group-data-[expanded=false]:*:invisible'
+  }
+}

From 02dfeecd7fc7c6c2f47b36a83754251b10659811 Mon Sep 17 00:00:00 2001
From: Rasmus Justesen <pilegaard24@gmail.com>
Date: Tue, 3 Mar 2026 10:59:17 +0100
Subject: [PATCH 2/5] feat: add AlertGroup component and integrate with
 navigation

---
 .../nuxt/app/composables/useNavigation.ts     |  1 +
 .../nuxt/app/pages/components/alert-group.vue | 53 +++++++++++++++++++
 src/runtime/components/AlertGroup.vue         | 29 ++++++----
 src/runtime/types/index.ts                    |  1 +
 src/theme/alert-group.ts                      |  2 +-
 src/theme/index.ts                            |  1 +
 6 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 playgrounds/nuxt/app/pages/components/alert-group.vue

diff --git a/playgrounds/nuxt/app/composables/useNavigation.ts b/playgrounds/nuxt/app/composables/useNavigation.ts
index ef65d4352c..7805065463 100644
--- a/playgrounds/nuxt/app/composables/useNavigation.ts
+++ b/playgrounds/nuxt/app/composables/useNavigation.ts
@@ -3,6 +3,7 @@ import { upperName } from '../utils'
 const components = [
   'accordion',
   'alert',
+  'alert-group',
   'auth-form',
   'avatar',
   'badge',
diff --git a/playgrounds/nuxt/app/pages/components/alert-group.vue b/playgrounds/nuxt/app/pages/components/alert-group.vue
new file mode 100644
index 0000000000..4eb8e0336c
--- /dev/null
+++ b/playgrounds/nuxt/app/pages/components/alert-group.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import theme from '#build/ui/alert-group'
+import type { AlertProps } from '@nuxt/ui'
+
+const alertItems: AlertProps[] = [
+  {
+    title: 'First Alert',
+    description: 'This is the first alert in the group.',
+    icon: 'i-lucide-info',
+    color: 'primary'
+  },
+  {
+    title: 'Second Alert',
+    description: 'This is the second alert in the group. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Integer ac sem euismod, dictum erat at, dictum enim. Etiam euismod, urna eu tincidunt consectetur, nisi nisl aliquam nunc, eget aliquam massa nisl quis neque.',
+    icon: 'i-lucide-alert-triangle',
+    color: 'warning'
+  },
+  {
+    title: 'Third Alert',
+    description: 'This is the third alert in the group.',
+    icon: 'i-lucide-check-circle',
+    color: 'success'
+  },
+  {
+    title: 'Fourth Alert',
+    description: 'This is the fourth alert in the group.',
+    icon: 'i-lucide-x-circle',
+    color: 'error'
+  },
+  {
+    title: 'Fifth Alert',
+    description: 'This is the fifth alert in the group.',
+    icon: 'i-lucide-help-circle',
+    color: 'info'
+  }
+]
+
+const attrs = reactive({
+  expand: [false],
+  max: [5]
+})
+</script>
+
+<template>
+  <Navbar>
+    <UCheckbox v-model="attrs.expand[0]" label="Expand" />
+    <UInputNumber v-model="attrs.max[0]" :min="1" :max="10" label="Max" />
+  </Navbar>
+
+  <Matrix v-slot="props" :attrs="attrs" container-class="max-w-196">
+    <UAlertGroup :items="alertItems" v-bind="props" />
+  </Matrix>
+</template>
diff --git a/src/runtime/components/AlertGroup.vue b/src/runtime/components/AlertGroup.vue
index 1d1f2650e7..e326471ce2 100644
--- a/src/runtime/components/AlertGroup.vue
+++ b/src/runtime/components/AlertGroup.vue
@@ -1,23 +1,33 @@
 <script lang="ts">
 import theme from '#build/ui/alert-group'
 import type { AppConfig } from '@nuxt/schema'
+import type { AlertProps } from '@nuxt/ui'
 import type { ComponentConfig } from '../types/tv'
 
 type AlertGroup = ComponentConfig<typeof theme, AppConfig, 'alertGroup'>
+
+export interface AlertGroupProps {
+  items: AlertProps[]
+  /**
+   * @defaultValue false
+   */
+  expand?: boolean
+  /**
+   * @defaultValue 5
+   */
+  max?: number
+  class?: any
+  ui?: AlertGroup['slots']
+}
 </script>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref } from 'vue'
-import type { AlertProps } from '@nuxt/ui'
 import { useAppConfig } from '#imports'
 import { useComponentUI } from '../composables/useComponentUI'
 import { tv } from '../utils/tv'
 
-const props = withDefaults(defineProps<{
-  items: AlertProps[]
-  expand?: boolean
-  max?: number
-}>(), {
+const props = withDefaults(defineProps<AlertGroupProps>(), {
   expand: false,
   max: 5
 })
@@ -25,7 +35,8 @@ const props = withDefaults(defineProps<{
 const appConfig = useAppConfig() as AlertGroup['AppConfig']
 const uiProp = useComponentUI('alertGroup', props)
 
-const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alertGroup || {}) }))
+// eslint-disable-next-line vue/no-dupe-keys
+const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.alertGroup || {}) })({}))
 
 const hovered = ref(false)
 const expanded = computed(() => props.expand || hovered.value)
@@ -50,7 +61,7 @@ const expanded = computed(() => props.expand || hovered.value)
       :data-front="index === 0"
       :class="ui.items({ class: [uiProp?.items, props.class] })"
       :style="{
-        width: expanded ? '100%' : `${100 - index * 3}%`,
+        width: expanded ? '100%' : `${Math.max(0, 100 - index * 3)}%`,
         marginTop: expanded || index === 0 ? '0' : (index >= props.max ? '-51px' : '-33px'),
         zIndex: props.items.length - index,
         maxHeight: !expanded && index !== 0 ? '51px' : undefined
diff --git a/src/runtime/types/index.ts b/src/runtime/types/index.ts
index 0693603371..41e29ced2b 100644
--- a/src/runtime/types/index.ts
+++ b/src/runtime/types/index.ts
@@ -1,5 +1,6 @@
 export * from '../components/Accordion.vue'
 export * from '../components/Alert.vue'
+export * from '../components/AlertGroup.vue'
 export * from '../components/App.vue'
 export * from '../components/AuthForm.vue'
 export * from '../components/Avatar.vue'
diff --git a/src/theme/alert-group.ts b/src/theme/alert-group.ts
index 09350ad470..44279e2aaa 100644
--- a/src/theme/alert-group.ts
+++ b/src/theme/alert-group.ts
@@ -3,4 +3,4 @@ export default {
     root: 'group flex flex-col transition-all duration-300 data-[expanded=true]:gap-2 data-[expanded=false]:gap-0',
     items: 'transition-all duration-300 mx-auto overflow-hidden not-first:group-data-[expanded=false]:*:invisible'
   }
-}
+}
\ No newline at end of file
diff --git a/src/theme/index.ts b/src/theme/index.ts
index 687acd97db..c54b7232c5 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -1,5 +1,6 @@
 export { default as accordion } from './accordion'
 export { default as alert } from './alert'
+export { default as alertGroup } from './alert-group'
 export { default as authForm } from './auth-form'
 export { default as avatar } from './avatar'
 export { default as avatarGroup } from './avatar-group'

From b85f9cc00ef1af3244f7d1d651e58a0ae95163cb Mon Sep 17 00:00:00 2001
From: Rasmus Justesen <pilegaard24@gmail.com>
Date: Tue, 3 Mar 2026 11:32:29 +0100
Subject: [PATCH 3/5] fix: add newline at end of alert-group.ts file

---
 src/theme/alert-group.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/theme/alert-group.ts b/src/theme/alert-group.ts
index 44279e2aaa..09350ad470 100644
--- a/src/theme/alert-group.ts
+++ b/src/theme/alert-group.ts
@@ -3,4 +3,4 @@ export default {
     root: 'group flex flex-col transition-all duration-300 data-[expanded=true]:gap-2 data-[expanded=false]:gap-0',
     items: 'transition-all duration-300 mx-auto overflow-hidden not-first:group-data-[expanded=false]:*:invisible'
   }
-}
\ No newline at end of file
+}

From 575c45ab4b6be6076ae77d8d4e11080fac4f039e Mon Sep 17 00:00:00 2001
From: Rasmus Justesen <pilegaard24@gmail.com>
Date: Tue, 3 Mar 2026 12:15:51 +0100
Subject: [PATCH 4/5] lint error fix

---
 playgrounds/nuxt/app/pages/components/alert-group.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/playgrounds/nuxt/app/pages/components/alert-group.vue b/playgrounds/nuxt/app/pages/components/alert-group.vue
index 4eb8e0336c..23886a3969 100644
--- a/playgrounds/nuxt/app/pages/components/alert-group.vue
+++ b/playgrounds/nuxt/app/pages/components/alert-group.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import theme from '#build/ui/alert-group'
 import type { AlertProps } from '@nuxt/ui'
 
 const alertItems: AlertProps[] = [

From 9a078ba667646cb1ae6b56db1d4770dbc8f914a7 Mon Sep 17 00:00:00 2001
From: Rasmus Justesen <pilegaard24@gmail.com>
Date: Tue, 3 Mar 2026 12:24:42 +0100
Subject: [PATCH 5/5] typecheck error fix

---
 playgrounds/nuxt/app/pages/components/alert-group.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/playgrounds/nuxt/app/pages/components/alert-group.vue b/playgrounds/nuxt/app/pages/components/alert-group.vue
index 23886a3969..b397ed4073 100644
--- a/playgrounds/nuxt/app/pages/components/alert-group.vue
+++ b/playgrounds/nuxt/app/pages/components/alert-group.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { AlertProps } from '@nuxt/ui'
+import { reactive } from 'vue'
 
 const alertItems: AlertProps[] = [
   {
@@ -34,7 +35,7 @@ const alertItems: AlertProps[] = [
   }
 ]
 
-const attrs = reactive({
+const attrs = reactive<Record<string, any>>({
   expand: [false],
   max: [5]
 })