docs(Banner): clarify persistence requirements for dismissed state

Added a note emphasizing the necessity of specifying an `id` prop to maintain the dismissed state of the banner across page reloads. This update enhances user understanding of the banner's behavior regarding visibility persistence.

Author: solidusite

docs/content/docs/2.components/banner.md

@@ -86,6 +86,10 @@ name: 'banner-example'
 When closed, `banner-${id}` will be stored in the local storage to prevent it from being displayed again. :br For the example above, `banner-example` will be stored in the local storage.
 ::
 
+::important
+To persist the dismissed state across page reloads, you must specify an `id` prop. Without an explicit `id`, the banner will only be hidden for the current session and will reappear on page reload.
+::
+
 ### Close Icon
 
 Use the `close-icon` prop to customize the close button [Icon](/docs/components/icon). Defaults to `i-lucide-x`.

playgrounds/nuxt/app/pages/components/banner.vue

@@ -36,9 +36,9 @@ const attrs = reactive({
       v-bind="props"
     />
     <UBanner
+      id="banner3"
       title="Close me - I'll stay closed permanently (id='banner3')"
       :close="true"
-      id="banner3"
       v-bind="props"
     />
   </Matrix>

src/runtime/components/Banner.vue

@@ -103,7 +103,7 @@ onMounted(() => {
 
 useHead(() => {
   if (!hasPersistence.value) return {}
-  
+
   return {
     script: [{
       key: `prehydrate-banner-${id.value}`,