fix: add nui prefix to named group

components/base/BaseAccordion.vue

@@ -102,7 +102,7 @@ const toggle = (key: number) => {
     >
       <slot name="accordion-item" :item="item" :index="key" :toggle="toggle">
         <summary
-          class="group cursor-pointer list-none outline-none"
+          class="group/nui-accordion cursor-pointer list-none outline-none"
           tabindex="0"
           @click.prevent="() => toggle(key)"
         >
@@ -132,7 +132,7 @@ const toggle = (key: number) => {
 
               <div
                 v-if="props.action === 'dot'"
-                class="group-focus:outline-muted-200 dark:group-focus:outline-muted-700 ms-2 h-3 w-3 rounded-full transition-colors duration-300 group-focus:outline-dashed group-focus:outline-offset-2"
+                class="group-focus/nui-accordion:outline-muted-200 dark:group-focus/nui-accordion:outline-muted-700 ms-2 h-3 w-3 rounded-full transition-colors duration-300 group-focus/nui-accordion:outline-dashed group-focus/nui-accordion:outline-offset-2"
                 :class="
                   internalOpenItems?.includes(key)
                     ? 'bg-primary-500'
@@ -141,7 +141,7 @@ const toggle = (key: number) => {
               ></div>
               <div
                 v-else-if="props.action === 'chevron'"
-                class="group-focus:outline-muted-200 dark:group-focus:outline-muted-700 border-muted-200 dark:border-muted-700 dark:bg-muted-700/60 ms-2 flex h-8 w-8 items-center justify-center rounded-full border bg-white transition-all duration-300 group-focus:outline-dashed group-focus:outline-offset-2"
+                class="group-focus/nui-accordion:outline-muted-200 dark:group-focus/nui-accordion:outline-muted-700 border-muted-200 dark:border-muted-700 dark:bg-muted-700/60 ms-2 flex h-8 w-8 items-center justify-center rounded-full border bg-white transition-all duration-300 group-focus/nui-accordion:outline-dashed group-focus/nui-accordion:outline-offset-2"
                 :class="
                   internalOpenItems?.includes(key)
                     ? 'text-primary-500 rotate-180'
@@ -152,7 +152,7 @@ const toggle = (key: number) => {
               </div>
               <div
                 v-else-if="props.action === 'plus'"
-                class="group-focus:outline-muted-200 dark:group-focus:outline-muted-700 border-muted-200 dark:border-muted-700 dark:bg-muted-700/60 ms-2 flex h-8 w-8 items-center justify-center rounded-full border bg-white transition-all duration-300 group-focus:outline-dashed group-focus:outline-offset-2"
+                class="group-focus/nui-accordion:outline-muted-200 dark:group-focus/nui-accordion:outline-muted-700 border-muted-200 dark:border-muted-700 dark:bg-muted-700/60 ms-2 flex h-8 w-8 items-center justify-center rounded-full border bg-white transition-all duration-300 group-focus/nui-accordion:outline-dashed group-focus:outline-offset-2"
                 :class="
                   internalOpenItems?.includes(key)
                     ? 'text-primary-500 rotate-45'

components/base/BaseDropdown.vue

@@ -49,7 +49,9 @@ const shape = computed(
 </script>
 
 <template>
-  <div class="group/drop inline-flex items-center justify-center text-right">
+  <div
+    class="group/nui-dropdown inline-flex items-center justify-center text-right"
+  >
     <Menu
       v-slot="{ open, close }: { open: boolean, close: () => void }"
       as="div"
@@ -76,7 +78,7 @@ const shape = computed(
           <button
             v-else-if="props.flavor === 'context'"
             type="button"
-            class="group-hover/drop:ring-muted-200 dark:group-hover/drop:ring-muted-700/70 dark:ring-offset-muted-900 inline-flex h-9 w-9 items-center justify-center rounded-full ring-1 ring-transparent transition-all duration-300 group-hover/drop:ring-offset-4"
+            class="group-hover/nui-dropdown:ring-muted-200 dark:group-hover/nui-dropdown:ring-muted-700/70 dark:ring-offset-muted-900 inline-flex h-9 w-9 items-center justify-center rounded-full ring-1 ring-transparent transition-all duration-300 group-hover/nui-dropdown:ring-offset-4"
           >
             <span
               class="border-muted-200 dark:border-muted-700 dark:bg-muted-800 flex h-9 w-9 items-center justify-center rounded-full border bg-white"

components/base/BaseDropdownItem.vue

@@ -49,7 +49,7 @@ const { is, attributes } = useNinjaButton(props)
     <component
       :is="is"
       v-bind="attributes"
-      class="group/dropitem flex w-full items-center justify-start rounded-md px-3 py-2 text-left text-sm transition-colors duration-300"
+      class="group/nui-dropdown-item flex w-full items-center justify-start rounded-md px-3 py-2 text-left text-sm transition-colors duration-300"
       :class="[
         active
           ? 'bg-muted-100 dark:bg-muted-700 text-primary-500'

components/base/BaseSnack.vue

@@ -38,7 +38,7 @@ const emit = defineEmits(['delete'])
 
 <template>
   <div
-    class="nui-focus group/snack inline-flex items-center rounded-full outline-transparent"
+    class="nui-focus group/nui-snack inline-flex items-center rounded-full outline-transparent"
     :class="[
       !props.icon && !props.image && 'ps-4',
       props.small ? 'h-8' : 'h-10',

components/form/BaseAutocomplete.vue

@@ -283,7 +283,7 @@ function removeItem(item: any) {
         </li>
       </ul>
     </div>
-    <div class="group/autocomplete relative">
+    <div class="group/nui-autocomplete relative">
       <ComboboxInput
         class="nui-focus border-muted-300 text-muted-600 placeholder:text-muted-300 focus:border-muted-300 focus:shadow-muted-300/50 dark:border-muted-700 dark:bg-muted-900/75 dark:text-muted-200 dark:placeholder:text-muted-500 dark:focus:border-muted-700 dark:focus:shadow-muted-800/50 peer w-full border bg-white font-sans leading-5 outline-transparent transition-all duration-300 focus:shadow-lg focus:ring-0 disabled:cursor-not-allowed disabled:opacity-75"
         :class="[
@@ -335,7 +335,7 @@ function removeItem(item: any) {
       </ComboboxLabel>
       <div
         v-if="props.icon || selected?.icon"
-        class="text-muted-400 group-focus-within/autocomplete:text-primary-500 absolute start-0 top-0 flex items-center justify-center transition-colors duration-300"
+        class="text-muted-400 group-focus-within/nui-autocomplete:text-primary-500 absolute start-0 top-0 flex items-center justify-center transition-colors duration-300"
         :class="[props.condensed && 'h-8 w-8', !props.condensed && 'h-10 w-10']"
       >
         <Icon :name="selected?.icon ?? props.icon" class="h-4 w-4" />

components/form/BaseCheckbox.vue

@@ -134,7 +134,7 @@ const id = useNinjaId(() => props.id)
     ]"
   >
     <div
-      class="nui-focus group/checkbox relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center overflow-hidden"
+      class="nui-focus group/nui-checkbox relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center overflow-hidden"
       :class="[
         shape === 'rounded' && 'rounded',
         shape === 'curved' && 'rounded-md',

components/form/BaseCheckboxHeadless.vue

@@ -56,7 +56,7 @@ const id = useNinjaId(() => props.id)
 </script>
 
 <template>
-  <div class="group/checkbox relative">
+  <div class="group/nui-checkbox-headless relative">
     <label
       v-if="props.label"
       :for="id"

components/form/BaseInput.vue

@@ -199,7 +199,7 @@ if (process.dev) {
     >
       <slot name="label">{{ props.label }}</slot>
     </label>
-    <div class="group/input relative">
+    <div class="group/nui-input relative">
       <input
         :id="id"
         ref="inputRef"
@@ -269,7 +269,7 @@ if (process.dev) {
       </div>
       <div
         v-if="props.icon"
-        class="text-muted-400 group-focus-within/input:text-primary-500 absolute start-0 top-0 flex items-center justify-center transition-colors duration-300 peer-disabled:cursor-not-allowed peer-disabled:opacity-75"
+        class="text-muted-400 group-focus-within/nui-input:text-primary-500 absolute start-0 top-0 flex items-center justify-center transition-colors duration-300 peer-disabled:cursor-not-allowed peer-disabled:opacity-75"
         :class="[
           props.condensed && 'h-8 w-8',
           !props.condensed && 'h-10 w-10',

components/form/BaseInputFile.vue

@@ -157,7 +157,7 @@ const id = useNinjaId(() => props.id)
     >
       <slot name="label">{{ props.label }}</slot>
     </label>
-    <div class="group/file relative">
+    <div class="group/nui-input-file relative">
       <label
         tabindex="0"
         class="nui-focus border-muted-300 text-muted-600 placeholder:text-muted-300 dark:border-muted-700 dark:bg-muted-900/75 dark:text-muted-200 dark:placeholder:text-muted-500 dark:focus:border-muted-700 peer flex w-full cursor-pointer items-center overflow-hidden border bg-white font-sans transition-colors duration-300 focus-within:outline-1 disabled:cursor-not-allowed disabled:opacity-75"
@@ -181,7 +181,7 @@ const id = useNinjaId(() => props.id)
         ]"
       >
         <div
-          class="group-hover/file:text-primary-500 bg-muted-50 border-muted-300 dark:border-muted-700 dark:bg-muted-800 text-muted-400 group-focus-within/file:text-primary-500 pointer-events-none flex shrink-0 items-center justify-center gap-1 border border-s-0 transition-colors duration-100 group-disabled/file:cursor-not-allowed peer-disabled:opacity-75"
+          class="group-hover/nui-input-file:text-primary-500 bg-muted-50 border-muted-300 dark:border-muted-700 dark:bg-muted-800 text-muted-400 group-focus-within/nui-input-file:text-primary-500 pointer-events-none flex shrink-0 items-center justify-center gap-1 border border-s-0 transition-colors duration-100 group-disabled/nui-input-file:cursor-not-allowed peer-disabled:opacity-75"
           :class="[
             props.condensed && 'h-8 px-2',
             !props.condensed && 'h-10 px-3',

components/form/BaseInputFileHeadless.vue

@@ -124,7 +124,7 @@ defineExpose({
 </script>
 
 <template>
-  <div class="group/file relative">
+  <div class="group/nui-file-headless relative">
     <slot
       :id="id"
       :el="el"

components/form/BaseRadio.vue

@@ -108,7 +108,7 @@ const id = useNinjaId(() => props.id)
     ]"
   >
     <div
-      class="nui-focus group/radio relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full"
+      class="nui-focus group/nui-radio relative flex h-5 w-5 shrink-0 cursor-pointer items-center justify-center overflow-hidden rounded-full"
     >
       <input
         :id="id"

components/form/BaseRadioHeadless.vue

@@ -56,7 +56,7 @@ const id = useNinjaId(() => props.id)
 </script>
 
 <template>
-  <div class="group/radio relative">
+  <div class="group/nui-radio-headless relative">
     <label
       v-if="label"
       :for="id"

components/form/BaseSelect.vue

@@ -161,7 +161,7 @@ const placeholder = computed(() => {
     >
       <slot name="label">{{ props.label }}</slot>
     </label>
-    <div class="group/select relative">
+    <div class="group/nui-select relative">
       <select
         :id="id"
         ref="selectRef"
@@ -241,7 +241,7 @@ const placeholder = computed(() => {
       </div>
       <div
         v-if="props.icon"
-        class="text-muted-400 group-focus-within/select:text-primary-500 absolute start-0 top-0 flex items-center justify-center transition-colors duration-300 peer-disabled:cursor-not-allowed peer-disabled:opacity-75"
+        class="text-muted-400 group-focus-within/nui-select:text-primary-500 absolute start-0 top-0 flex items-center justify-center transition-colors duration-300 peer-disabled:cursor-not-allowed peer-disabled:opacity-75"
         :class="[
           props.loading && 'opacity-0',
           props.condensed ? 'h-8 w-8' : 'h-10 w-10',
@@ -262,7 +262,7 @@ const placeholder = computed(() => {
         </slot>
       </div>
       <div
-        class="text-muted-400 pointer-events-none absolute end-0 top-0 flex items-center justify-center transition-transform duration-300 group-focus-within/select:-rotate-180"
+        class="text-muted-400 pointer-events-none absolute end-0 top-0 flex items-center justify-center transition-transform duration-300 group-focus-within/nui-select:-rotate-180"
         :class="[
           props.classes?.chevron,
           props.condensed ? 'h-8 w-8' : 'h-10 w-10',

components/form/BaseTextarea.vue

@@ -201,7 +201,7 @@ const id = useNinjaId(() => props.id)
     >
       {{ props.label }}
     </label>
-    <div class="group/textarea relative flex flex-col">
+    <div class="group/nui-textarea relative flex flex-col">
       <textarea
         :id="id"
         ref="textareaRef"