From d3abbc54653f8a6c1c326620d6f5ecdd7a30511d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 28 Aug 2025 11:02:33 +0200
Subject: [PATCH 1/8] fix(NeButton): add story for icon only button

---
 stories/NeButton.stories.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/stories/NeButton.stories.ts b/stories/NeButton.stories.ts
index fc967cb..eddc55c 100644
--- a/stories/NeButton.stories.ts
+++ b/stories/NeButton.stories.ts
@@ -3,6 +3,8 @@
 
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { NeButton } from '../src/main'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faCopy } from '@fortawesome/free-solid-svg-icons'
 
 const meta = {
   title: 'NeButton',
@@ -133,6 +135,24 @@ export const WithSuffix: Story = {
   args: { loadingPosition: 'suffix' }
 }
 
+const templateIconOnly = `<div>
+  <NeButton v-bind="args">
+    <FontAwesomeIcon :icon="faCopy" class="h-6 w-4" aria-hidden="true" />
+  </NeButton>
+  <div class="mt-4">It is recommended to show a tooltip when the cursor hovers over the button.</div>
+</div>`
+
+export const IconOnly: Story = {
+  render: (args) => ({
+    components: { NeButton, FontAwesomeIcon },
+    setup() {
+      return { args, faCopy }
+    },
+    template: templateIconOnly
+  }),
+  args: {}
+}
+
 export const Disabled: Story = {
   render: (args) => ({
     components: { NeButton },

From 0eda880f697e67c6001c7de8519b2d53050407a4 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 28 Aug 2025 11:03:01 +0200
Subject: [PATCH 2/8] fix(NeTooltip): prevent nesting of button elements

---
 src/components/NeToastNotification.vue | 4 +++-
 src/components/NeTooltip.vue           | 8 ++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/NeToastNotification.vue b/src/components/NeToastNotification.vue
index 84cbf43..2cd9919 100644
--- a/src/components/NeToastNotification.vue
+++ b/src/components/NeToastNotification.vue
@@ -89,7 +89,9 @@ library.add(fasXmark)
           class="text-gray-500 dark:text-gray-400"
         >
           <template #trigger>
-            {{ humanDistanceToNowLoc(notification.timestamp) }}
+            <span class="cursor-pointer">
+              {{ humanDistanceToNowLoc(notification.timestamp) }}
+            </span>
           </template>
           <template #content>
             {{ formatDateLoc(notification.timestamp, 'Pp') }}
diff --git a/src/components/NeTooltip.vue b/src/components/NeTooltip.vue
index ec5465b..34de433 100644
--- a/src/components/NeTooltip.vue
+++ b/src/components/NeTooltip.vue
@@ -51,14 +51,14 @@ defineProps({
 
 <template>
   <Tippy :interactive="interactive" :placement="placement" :trigger="triggerEvent" theme="tailwind">
-    <button type="button" class="inline-flex">
-      <slot name="trigger">
+    <slot name="trigger">
+      <button type="button" class="inline-flex">
         <FontAwesomeIcon
           :icon="faCircleInfo"
           class="h-4 w-4 text-indigo-500 dark:text-indigo-300"
         />
-      </slot>
-    </button>
+      </button>
+    </slot>
     <template #content>
       <slot name="content" />
     </template>

From d0c99d44772a544d387ab169fb13bc2928104f53 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 28 Aug 2025 12:46:26 +0200
Subject: [PATCH 3/8] feat(NeTable): add hover color to table rows

---
 src/components/NeTableRow.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NeTableRow.vue b/src/components/NeTableRow.vue
index 3c0f94c..cf7f3db 100644
--- a/src/components/NeTableRow.vue
+++ b/src/components/NeTableRow.vue
@@ -18,7 +18,7 @@ const trCardStyle: Record<Breakpoint, string> = {
 }
 </script>
 <template>
-  <tr :class="[`grid`, trCardStyle[cardBreakpoint]]">
+  <tr :class="[`grid`, `hover:bg-gray-100 dark:hover:bg-gray-800`, trCardStyle[cardBreakpoint]]">
     <slot />
   </tr>
 </template>

From 567aea3d70d3e5a07c3be949c885fcfb361325f7 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 28 Aug 2025 14:38:51 +0200
Subject: [PATCH 4/8] fix(NeDropdownFilter): add clearSearchLabel prop

---
 src/components/NeDropdownFilter.vue | 3 +++
 stories/NeDropdownFilter.stories.ts | 1 +
 2 files changed, 4 insertions(+)

diff --git a/src/components/NeDropdownFilter.vue b/src/components/NeDropdownFilter.vue
index e55c249..9e63677 100644
--- a/src/components/NeDropdownFilter.vue
+++ b/src/components/NeDropdownFilter.vue
@@ -51,12 +51,14 @@ export interface Props {
   size?: ButtonSize
   disabled?: boolean
   id?: string
+  clearSearchLabel: string
 }
 
 const props = withDefaults(defineProps<Props>(), {
   showClearFilter: true,
   showSelectionCount: true,
   showOptionsFilter: false,
+  clearSearchLabel: 'Clear',
   optionsFilterPlaceholder: '',
   maxOptionsShown: 25,
   alignToRight: false,
@@ -220,6 +222,7 @@ function maybeFocusOptionsFilter() {
               ref="optionsFilterRef"
               v-model="optionsFilter"
               :placeholder="optionsFilterPlaceholder"
+              :clear-search-label="clearSearchLabel"
               is-search
               @keydown.stop
             />
diff --git a/stories/NeDropdownFilter.stories.ts b/stories/NeDropdownFilter.stories.ts
index 241391c..4f9e810 100644
--- a/stories/NeDropdownFilter.stories.ts
+++ b/stories/NeDropdownFilter.stories.ts
@@ -49,6 +49,7 @@ const meta = {
     showSelectionCount: true,
     noOptionsLabel: 'No options',
     showOptionsFilter: false,
+    clearSearchLabel: 'Clear',
     optionsFilterPlaceholder: 'Filter options',
     maxOptionsShown: 25,
     moreOptionsHiddenLabel: 'Continue typing to show more options',

From 78e6612f293248f63988d61d49a36baf92e5e5ac Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 28 Aug 2025 14:39:24 +0200
Subject: [PATCH 5/8] fix(NeSideDrawer): add show event

---
 src/components/NeSideDrawer.vue | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/NeSideDrawer.vue b/src/components/NeSideDrawer.vue
index 8a0a970..094dff0 100644
--- a/src/components/NeSideDrawer.vue
+++ b/src/components/NeSideDrawer.vue
@@ -7,7 +7,7 @@
 import { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faXmark } from '@fortawesome/free-solid-svg-icons'
-import { onMounted, onUnmounted } from 'vue'
+import { onMounted, onUnmounted, watch } from 'vue'
 
 const props = defineProps({
   isShown: { type: Boolean, default: false },
@@ -16,7 +16,16 @@ const props = defineProps({
   closeAriaLabel: { type: String, default: 'Close side drawer' }
 })
 
-const emit = defineEmits(['close'])
+const emit = defineEmits(['close', 'show'])
+
+watch(
+  () => props.isShown,
+  () => {
+    if (props.isShown) {
+      emit('show')
+    }
+  }
+)
 
 onMounted(() => {
   window.addEventListener('keydown', onKeyUp)

From 1fbd4e148fe86612f1f4389c1157eb8a560aea1d Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 28 Aug 2025 14:40:40 +0200
Subject: [PATCH 6/8] feat(NeBadgeV2): add NeBadgeV2 component

---
 src/components/NeBadgeV2.vue | 115 +++++++++++++++++++++++++++++++++++
 src/main.ts                  |   1 +
 stories/NeBadgeV2.stories.ts |  94 ++++++++++++++++++++++++++++
 3 files changed, 210 insertions(+)
 create mode 100644 src/components/NeBadgeV2.vue
 create mode 100644 stories/NeBadgeV2.stories.ts

diff --git a/src/components/NeBadgeV2.vue b/src/components/NeBadgeV2.vue
new file mode 100644
index 0000000..e416ecd
--- /dev/null
+++ b/src/components/NeBadgeV2.vue
@@ -0,0 +1,115 @@
+<!--
+  Copyright (C) 2025 Nethesis S.r.l.
+  SPDX-License-Identifier: GPL-3.0-or-later
+-->
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+
+const {
+  size = 'sm',
+  kind = 'indigo',
+  pill = true,
+  dismissable = false,
+  customKindClasses = '',
+  dismissAriaLabel = 'Dismiss'
+} = defineProps<{
+  size?: 'xs' | 'sm' | 'md'
+  kind?: 'primary' | 'indigo' | 'gray' | 'green' | 'amber' | 'rose' | 'blue' | 'custom'
+  pill?: boolean
+  dismissable?: boolean
+  customKindClasses?: string
+  dismissAriaLabel?: string
+}>()
+
+const emit = defineEmits(['dismiss'])
+
+const textClasses = computed(() => {
+  switch (size) {
+    case 'xs':
+      return 'text-xs'
+    case 'md':
+      return 'text-base'
+    case 'sm':
+    default:
+      return 'text-sm'
+  }
+})
+
+const paddingClasses = computed(() => {
+  ////
+  return 'px-2.5'
+})
+
+const spacingClasses = computed(() => {
+  return 'gap-x-1'
+})
+
+const kindClasses = computed(() => {
+  switch (kind) {
+    case 'primary':
+      return 'bg-primary-100 text-primary-800 dark:bg-primary-700 dark:text-primary-100'
+    case 'gray':
+      return 'bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-gray-100'
+    case 'green':
+      return 'bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-50'
+    case 'amber':
+      return 'bg-amber-100 text-amber-800 dark:bg-amber-700 dark:text-amber-50'
+    case 'rose':
+      return 'bg-rose-100 text-rose-800 dark:bg-rose-700 dark:text-rose-100'
+    case 'blue':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100'
+    case 'custom':
+      return `${customKindClasses}`
+    case 'indigo':
+    default:
+      return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100'
+  }
+})
+
+const dismissButtonClasses = computed(() => {
+  switch (kind) {
+    case 'primary':
+      return 'hover:bg-primary-200 hover:dark:bg-primary-600'
+    case 'gray':
+      return 'hover:bg-gray-300 hover:dark:bg-gray-500'
+    case 'green':
+      return 'hover:bg-green-200 hover:dark:bg-green-600'
+    case 'amber':
+      return 'hover:bg-amber-200 hover:dark:bg-amber-600'
+    case 'rose':
+      return 'hover:bg-rose-200 hover:dark:bg-rose-600'
+    case 'blue':
+      return 'hover:bg-blue-200 hover:dark:bg-blue-600'
+    case 'indigo':
+    default:
+      return 'hover:bg-indigo-200 hover:dark:bg-indigo-500'
+  }
+})
+</script>
+
+<template>
+  <span
+    :class="[
+      textClasses,
+      spacingClasses,
+      paddingClasses,
+      kindClasses,
+      pill ? 'rounded-full' : 'rounded'
+    ]"
+    class="flex w-fit items-center py-0.5 font-medium"
+  >
+    <slot />
+    <button
+      v-if="dismissable"
+      :class="`inline-flex rounded focus:ring-2 focus:ring-offset-2 focus:outline-hidden ${dismissButtonClasses}`"
+      type="button"
+      @click="emit('dismiss')"
+    >
+      <span class="sr-only">{{ dismissAriaLabel }}</span>
+      <FontAwesomeIcon :icon="faXmark" class="size-4" aria-hidden="true" />
+    </button>
+  </span>
+</template>
diff --git a/src/main.ts b/src/main.ts
index 47c7f89..7ae0e82 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -39,6 +39,7 @@ export { default as NeListbox } from './components/NeListbox.vue'
 export { default as NeDropdownFilter } from './components/NeDropdownFilter.vue'
 export { default as NeSortDropdown } from './components/NeSortDropdown.vue'
 export { default as NeAvatar } from './components/NeAvatar.vue'
+export { default as NeBadgeV2 } from './components/NeBadgeV2.vue'
 
 // types export
 export type { NeComboboxOption } from './components/NeCombobox.vue'
diff --git a/stories/NeBadgeV2.stories.ts b/stories/NeBadgeV2.stories.ts
new file mode 100644
index 0000000..d9a48c5
--- /dev/null
+++ b/stories/NeBadgeV2.stories.ts
@@ -0,0 +1,94 @@
+//  Copyright (C) 2025 Nethesis S.r.l.
+//  SPDX-License-Identifier: GPL-3.0-or-later
+
+import { Meta, StoryObj } from '@storybook/vue3-vite'
+import { NeBadgeV2 } from '../src/main'
+
+const meta: Meta<typeof NeBadgeV2> = {
+  title: 'NeBadgeV2',
+  component: NeBadgeV2,
+  tags: ['autodocs'],
+  argTypes: {
+    size: {
+      options: ['xs', 'sm', 'md'],
+      control: { type: 'inline-radio' }
+    },
+    kind: {
+      options: ['primary', 'gray', 'indigo', 'green', 'amber', 'rose', 'blue', 'custom'],
+      control: { type: 'inline-radio' }
+    }
+  },
+  args: {
+    size: 'sm',
+    kind: 'indigo',
+    pill: true,
+    dismissable: false,
+    customKindClasses: '',
+    dismissAriaLabel: 'Dismiss'
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const defaultTemplate = `<NeBadgeV2 v-bind="args">Badge</NeBadgeV2>`
+
+export const Default: Story = {
+  render: (args) => ({
+    components: { NeBadgeV2 },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {}
+}
+
+export const Kinds: Story = {
+  render: (args) => ({
+    components: { NeBadgeV2 },
+    setup() {
+      return { args }
+    },
+    template: `
+      <div class="flex flex-wrap gap-8">
+        <NeBadgeV2 v-bind="args" kind="indigo">indigo</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="primary">primary</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="gray">gray</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="green">green</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="amber">amber</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="rose">rose</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="blue">blue</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="custom" customKindClasses="bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-700 dark:text-fuchsia-50">custom</NeBadgeV2>
+      </div>
+    `
+  }),
+  args: {}
+}
+
+export const CustomKind: Story = {
+  render: (args) => ({
+    components: { NeBadgeV2 },
+    setup() {
+      return { args }
+    },
+    template: `<NeBadgeV2 v-bind="args">Custom badge</NeBadgeV2>`
+  }),
+  args: {
+    kind: 'custom',
+    customKindClasses: 'text-white bg-linear-to-br from-fuchsia-500 to-blue-500'
+  }
+}
+
+export const Dismissable: Story = {
+  render: (args) => ({
+    components: { NeBadgeV2 },
+    setup() {
+      return { args }
+    },
+    template: defaultTemplate
+  }),
+  args: {
+    dismissable: true
+  }
+}

From 74ebaf6978e0cca37163f45d36ce4cfbcad89c50 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Thu, 28 Aug 2025 15:24:41 +0200
Subject: [PATCH 7/8] fix(NeListbox): fix width of options list

---
 src/components/NeListbox.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/NeListbox.vue b/src/components/NeListbox.vue
index 00618f0..905c9f2 100644
--- a/src/components/NeListbox.vue
+++ b/src/components/NeListbox.vue
@@ -69,6 +69,7 @@ const showOptions = ref(false)
 const listboxRef = ref<HTMLDivElement | null>(null)
 const top = ref(0)
 const left = ref(0)
+const width = ref(0)
 const buttonRef = ref<InstanceType<typeof Listbox> | null>(null)
 
 const inputValidStyle =
@@ -137,6 +138,7 @@ watch(
 function calculatePosition() {
   top.value = buttonRef.value?.$el.getBoundingClientRect().bottom + window.scrollY
   left.value = buttonRef.value?.$el.getBoundingClientRect().left - window.scrollX
+  width.value = buttonRef.value?.$el.getBoundingClientRect().width || 0
 }
 
 function onClickOutsideListbox() {
@@ -246,7 +248,7 @@ onClickOutside(listboxRef, () => onClickOutsideListbox())
             <ListboxOptions
               static
               :class="`absolute z-10 mt-1 max-h-60 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-gray-500/5 focus:outline-hidden sm:text-sm dark:bg-gray-950 ${optionsPanelStyle}`"
-              :style="[{ top: top + 'px' }, { left: left + 'px' }]"
+              :style="[{ top: top + 'px' }, { left: left + 'px' }, { 'min-width': width + 'px' }]"
             >
               <ListboxOption
                 v-for="option in allOptions"

From ac6831e93efa014543b947ff893f411227e65376 Mon Sep 17 00:00:00 2001
From: Andrea Leardini <andre8244@gmail.com>
Date: Fri, 29 Aug 2025 10:42:33 +0200
Subject: [PATCH 8/8] fix(NeBadgeV2): minor fixes

---
 src/components/NeBadgeV2.vue | 39 ++++++++++++++++++++----------------
 stories/NeBadgeV2.stories.ts | 28 +++++++++++++++++++++-----
 2 files changed, 45 insertions(+), 22 deletions(-)

diff --git a/src/components/NeBadgeV2.vue b/src/components/NeBadgeV2.vue
index e416ecd..560a4f9 100644
--- a/src/components/NeBadgeV2.vue
+++ b/src/components/NeBadgeV2.vue
@@ -10,13 +10,13 @@ import { faXmark } from '@fortawesome/free-solid-svg-icons'
 
 const {
   size = 'sm',
-  kind = 'indigo',
+  kind = 'gray',
   pill = true,
   dismissable = false,
   customKindClasses = '',
   dismissAriaLabel = 'Dismiss'
 } = defineProps<{
-  size?: 'xs' | 'sm' | 'md'
+  size?: 'xs' | 'sm'
   kind?: 'primary' | 'indigo' | 'gray' | 'green' | 'amber' | 'rose' | 'blue' | 'custom'
   pill?: boolean
   dismissable?: boolean
@@ -30,8 +30,6 @@ const textClasses = computed(() => {
   switch (size) {
     case 'xs':
       return 'text-xs'
-    case 'md':
-      return 'text-base'
     case 'sm':
     default:
       return 'text-sm'
@@ -39,8 +37,13 @@ const textClasses = computed(() => {
 })
 
 const paddingClasses = computed(() => {
-  ////
-  return 'px-2.5'
+  switch (size) {
+    case 'xs':
+      return 'px-3'
+    case 'sm':
+    default:
+      return 'px-2.5'
+  }
 })
 
 const spacingClasses = computed(() => {
@@ -51,8 +54,8 @@ const kindClasses = computed(() => {
   switch (kind) {
     case 'primary':
       return 'bg-primary-100 text-primary-800 dark:bg-primary-700 dark:text-primary-100'
-    case 'gray':
-      return 'bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-gray-100'
+    case 'indigo':
+      return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100'
     case 'green':
       return 'bg-green-100 text-green-800 dark:bg-green-700 dark:text-green-50'
     case 'amber':
@@ -63,9 +66,9 @@ const kindClasses = computed(() => {
       return 'bg-blue-100 text-blue-800 dark:bg-blue-700 dark:text-blue-100'
     case 'custom':
       return `${customKindClasses}`
-    case 'indigo':
+    case 'gray':
     default:
-      return 'bg-indigo-100 text-indigo-800 dark:bg-indigo-700 dark:text-indigo-100'
+      return 'bg-gray-200 text-gray-800 dark:bg-gray-600 dark:text-gray-100'
   }
 })
 
@@ -73,8 +76,8 @@ const dismissButtonClasses = computed(() => {
   switch (kind) {
     case 'primary':
       return 'hover:bg-primary-200 hover:dark:bg-primary-600'
-    case 'gray':
-      return 'hover:bg-gray-300 hover:dark:bg-gray-500'
+    case 'indigo':
+      return 'hover:bg-indigo-200 hover:dark:bg-indigo-500'
     case 'green':
       return 'hover:bg-green-200 hover:dark:bg-green-600'
     case 'amber':
@@ -83,15 +86,17 @@ const dismissButtonClasses = computed(() => {
       return 'hover:bg-rose-200 hover:dark:bg-rose-600'
     case 'blue':
       return 'hover:bg-blue-200 hover:dark:bg-blue-600'
-    case 'indigo':
+    case 'custom':
+      return 'hover:bg-white/20'
+    case 'gray':
     default:
-      return 'hover:bg-indigo-200 hover:dark:bg-indigo-500'
+      return 'hover:bg-gray-300 hover:dark:bg-gray-500'
   }
 })
 </script>
 
 <template>
-  <span
+  <div
     :class="[
       textClasses,
       spacingClasses,
@@ -99,7 +104,7 @@ const dismissButtonClasses = computed(() => {
       kindClasses,
       pill ? 'rounded-full' : 'rounded'
     ]"
-    class="flex w-fit items-center py-0.5 font-medium"
+    class="inline-flex w-fit items-center py-0.5 font-medium"
   >
     <slot />
     <button
@@ -111,5 +116,5 @@ const dismissButtonClasses = computed(() => {
       <span class="sr-only">{{ dismissAriaLabel }}</span>
       <FontAwesomeIcon :icon="faXmark" class="size-4" aria-hidden="true" />
     </button>
-  </span>
+  </div>
 </template>
diff --git a/stories/NeBadgeV2.stories.ts b/stories/NeBadgeV2.stories.ts
index d9a48c5..5de0a3f 100644
--- a/stories/NeBadgeV2.stories.ts
+++ b/stories/NeBadgeV2.stories.ts
@@ -3,6 +3,8 @@
 
 import { Meta, StoryObj } from '@storybook/vue3-vite'
 import { NeBadgeV2 } from '../src/main'
+import { faAward } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 const meta: Meta<typeof NeBadgeV2> = {
   title: 'NeBadgeV2',
@@ -10,7 +12,7 @@ const meta: Meta<typeof NeBadgeV2> = {
   tags: ['autodocs'],
   argTypes: {
     size: {
-      options: ['xs', 'sm', 'md'],
+      options: ['xs', 'sm'],
       control: { type: 'inline-radio' }
     },
     kind: {
@@ -20,7 +22,7 @@ const meta: Meta<typeof NeBadgeV2> = {
   },
   args: {
     size: 'sm',
-    kind: 'indigo',
+    kind: 'gray',
     pill: true,
     dismissable: false,
     customKindClasses: '',
@@ -44,7 +46,7 @@ export const Default: Story = {
   args: {}
 }
 
-export const Kinds: Story = {
+export const Kind: Story = {
   render: (args) => ({
     components: { NeBadgeV2 },
     setup() {
@@ -52,9 +54,9 @@ export const Kinds: Story = {
     },
     template: `
       <div class="flex flex-wrap gap-8">
-        <NeBadgeV2 v-bind="args" kind="indigo">indigo</NeBadgeV2>
-        <NeBadgeV2 v-bind="args" kind="primary">primary</NeBadgeV2>
         <NeBadgeV2 v-bind="args" kind="gray">gray</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="primary">primary</NeBadgeV2>
+        <NeBadgeV2 v-bind="args" kind="indigo">indigo</NeBadgeV2>
         <NeBadgeV2 v-bind="args" kind="green">green</NeBadgeV2>
         <NeBadgeV2 v-bind="args" kind="amber">amber</NeBadgeV2>
         <NeBadgeV2 v-bind="args" kind="rose">rose</NeBadgeV2>
@@ -80,6 +82,22 @@ export const CustomKind: Story = {
   }
 }
 
+const withIconTemplate = `<NeBadgeV2 v-bind="args">
+  <FontAwesomeIcon :icon="faAward" class="size-4" />
+  Badge
+</NeBadgeV2>`
+
+export const WithIcon: Story = {
+  render: (args) => ({
+    components: { NeBadgeV2, FontAwesomeIcon },
+    setup() {
+      return { args, faAward }
+    },
+    template: withIconTemplate
+  }),
+  args: {}
+}
+
 export const Dismissable: Story = {
   render: (args) => ({
     components: { NeBadgeV2 },