@bitrix24/b24ui-nuxt 2.2.1 → 2.3.0

package/README.md

@@ -11,19 +11,19 @@ Visit https://bitrix24.github.io/b24ui/ to explore the documentation.
 ## Installation
 
 ```bash [pnpm]
-pnpm add @bitrix24/b24ui-nuxt
+pnpm add @bitrix24/b24ui-nuxt tailwindcss
 ```
 
 ```bash [yarn]
-yarn add @bitrix24/b24ui-nuxt
+yarn add @bitrix24/b24ui-nuxt tailwindcss
 ```
 
 ```bash [npm]
-npm install @bitrix24/b24ui-nuxt
+npm install @bitrix24/b24ui-nuxt tailwindcss
 ```
 
 ```bash [bun]
-yarn add @bitrix24/b24ui-nuxt
+yarn add @bitrix24/b24ui-nuxt tailwindcss
 ```
 
 ### Nuxt
@@ -71,6 +71,7 @@ import b24UiPlugin from '@bitrix24/b24ui-nuxt/vue-plugin'
 import App from './App.vue'
 
 const app = createApp(App)
+
 const router = createRouter({
   routes: [],
   history: createWebHistory()

package/cli/package.json

@@ -5,7 +5,7 @@
     ".": "./index.mjs"
   },
   "dependencies": {
-    "citty": "^0.1.6",
+    "citty": "^0.2.0",
     "consola": "^3.4.2",
     "pathe": "^2.0.3",
     "scule": "^1.3.0"

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "@bitrix24/b24ui-nuxt",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "docs": "https://bitrix24.github.io/b24ui/guide/installation-nuxt-app.html",
   "configKey": "b24ui",
   "compatibility": {

package/dist/module.mjs

@@ -1,6 +1,6 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addPlugin, hasNuxtModule, addComponentsDir, addImportsDir, installModule } from '@nuxt/kit';
-import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.C-CS9MBp.mjs';
+import { d as defaultOptions, v as version, n as name, a as getDefaultConfig, b as addTemplates } from './shared/b24ui-nuxt.DEyBXBFe.mjs';
 import 'node:url';
 import 'scule';
 import 'knitwork';

package/dist/runtime/components/Accordion.d.vue.ts

@@ -2,7 +2,7 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/accordion';
 import type { IconComponent } from '../types';
-import type { DynamicSlots } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
 export interface AccordionItem {
@@ -37,11 +37,16 @@ export interface AccordionProps<T extends AccordionItem = AccordionItem> extends
      * @IconComponent
      */
     trailingIcon?: IconComponent;
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
      */
-    labelKey?: string;
+    labelKey?: GetItemKeys<T>;
     class?: any;
     b24ui?: Accordion['slots'];
 }
@@ -68,8 +73,12 @@ export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
     open: boolean;
     b24ui: Accordion['b24ui'];
 }>;
-declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<AccordionProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string | string[] | undefined) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<AccordionProps<T> & {
+        "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -79,8 +88,8 @@ declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<A
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Accordion.vue

@@ -14,9 +14,10 @@ const props = defineProps({
   as: { type: null, required: false },
   items: { type: Array, required: false },
   trailingIcon: { type: [Function, Object], required: false },
-  labelKey: { type: String, required: false, default: "label" },
+  valueKey: { type: null, required: false, default: "value" },
+  labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   collapsible: { type: Boolean, required: false, default: true },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
@@ -27,19 +28,19 @@ const props = defineProps({
 const emits = defineEmits(["update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
-const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "type", "unmountOnHide"), emits);
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "unmountOnHide"), emits);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordion || {} })({
   disabled: props.disabled
 }));
 </script>
 
 <template>
-  <AccordionRoot v-bind="rootProps" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <AccordionRoot v-bind="rootProps" :type="type" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <AccordionItem
       v-for="(item, index) in props.items"
       v-slot="{ open }"
       :key="index"
-      :value="item.value || String(index)"
+      :value="get(item, props.valueKey) ?? String(index)"
       :disabled="item.disabled"
       data-slot="item"
       :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"

package/dist/runtime/components/Accordion.vue.d.ts

@@ -2,7 +2,7 @@ import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/accordion';
 import type { IconComponent } from '../types';
-import type { DynamicSlots } from '../types/utils';
+import type { DynamicSlots, GetItemKeys } from '../types/utils';
 import type { ComponentConfig } from '../types/tv';
 type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
 export interface AccordionItem {
@@ -37,11 +37,16 @@ export interface AccordionProps<T extends AccordionItem = AccordionItem> extends
      * @IconComponent
      */
     trailingIcon?: IconComponent;
+    /**
+     * The key used to get the value from the item.
+     * @defaultValue 'value'
+     */
+    valueKey?: GetItemKeys<T>;
     /**
      * The key used to get the label from the item.
      * @defaultValue 'label'
      */
-    labelKey?: string;
+    labelKey?: GetItemKeys<T>;
     class?: any;
     b24ui?: Accordion['slots'];
 }
@@ -68,8 +73,12 @@ export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
     open: boolean;
     b24ui: Accordion['b24ui'];
 }>;
-declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<AccordionProps<T> & __VLS_EmitsToProps<__VLS_NormalizeEmits<(evt: "update:modelValue", value: string | string[] | undefined) => void>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<AccordionProps<T> & {
+        "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -79,8 +88,8 @@ declare const __VLS_export: <T extends AccordionItem>(__VLS_props: NonNullable<A
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Advice.d.vue.ts

@@ -23,9 +23,12 @@ export interface AdviceSlots {
     }): any;
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AdviceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AdviceProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AdviceSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AdviceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AdviceProps> & Readonly<{}>, {
+    as: any;
+    angle: Advice["variants"]["angle"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AdviceSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Advice.vue

@@ -15,7 +15,7 @@ const props = defineProps({
   description: { type: String, required: false },
   angle: { type: null, required: false, default: "bottom" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   icon: { type: [Function, Object], required: false },
   avatar: { type: Object, required: false }
 });

package/dist/runtime/components/Advice.vue.d.ts

@@ -23,9 +23,12 @@ export interface AdviceSlots {
     }): any;
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AdviceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AdviceProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AdviceSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AdviceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AdviceProps> & Readonly<{}>, {
+    as: any;
+    angle: Advice["variants"]["angle"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AdviceSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Alert.d.vue.ts

@@ -73,13 +73,16 @@ export interface AlertSlots {
         b24ui: Alert['b24ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    inverted: boolean;
+    orientation: Alert["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Alert.vue

@@ -25,7 +25,7 @@ const props = defineProps({
   close: { type: [Boolean, Object], required: false },
   closeIcon: { type: [Function, Object], required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const emits = defineEmits(["update:open"]);
 const slots = defineSlots();

package/dist/runtime/components/Alert.vue.d.ts

@@ -73,13 +73,16 @@ export interface AlertSlots {
         b24ui: Alert['b24ui'];
     }): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
+}>, {
+    inverted: boolean;
+    orientation: Alert["variants"]["orientation"];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/App.d.vue.ts

@@ -9,8 +9,10 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
 export interface AppSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<AppProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<AppProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -20,8 +22,8 @@ declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaite
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/App.vue.d.ts

@@ -9,8 +9,10 @@ export interface AppProps<T extends Messages = Messages> extends Omit<ConfigProv
 export interface AppSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<AppProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<AppProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -20,8 +22,8 @@ declare const __VLS_export: <T extends Messages>(__VLS_props: NonNullable<Awaite
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
-declare const _default: typeof __VLS_export;
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
     [K in keyof T as K]: T[K];
-} & {};
+}) & {};

package/dist/runtime/components/Avatar.d.vue.ts

@@ -33,11 +33,11 @@ export interface AvatarProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes,
 export interface AvatarSlots {
     default(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Avatar.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   chip: { type: [Boolean, Object], required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const as = computed(() => {
   if (typeof props.as === "string" || typeof props.as?.render === "function") {

package/dist/runtime/components/Avatar.vue.d.ts

@@ -33,11 +33,11 @@ export interface AvatarProps extends /** @vue-ignore */ Omit<ImgHTMLAttributes,
 export interface AvatarSlots {
     default(props?: {}): any;
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;
 }>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/AvatarGroup.d.vue.ts

@@ -22,9 +22,9 @@ export interface AvatarGroupProps {
 export interface AvatarGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/AvatarGroup.vue

@@ -14,7 +14,7 @@ const props = defineProps({
   size: { type: null, required: false },
   max: { type: [Number, String], required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();

package/dist/runtime/components/AvatarGroup.vue.d.ts

@@ -22,9 +22,9 @@ export interface AvatarGroupProps {
 export interface AvatarGroupSlots {
     default(props?: {}): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AvatarGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Badge.d.vue.ts

@@ -51,9 +51,12 @@ export interface BadgeSlots {
         b24ui: Badge['b24ui'];
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    inverted: boolean;
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Badge.vue

@@ -22,7 +22,7 @@ const props = defineProps({
   useClose: { type: Boolean, required: false },
   onCloseClick: { type: [Function, Array], required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   icon: { type: [Function, Object], required: false },
   avatar: { type: Object, required: false },
   trailing: { type: Boolean, required: false },

package/dist/runtime/components/Badge.vue.d.ts

@@ -51,9 +51,12 @@ export interface BadgeSlots {
         b24ui: Badge['b24ui'];
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    inverted: boolean;
+    as: any;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Banner.d.vue.ts

@@ -11,8 +11,7 @@ export interface BannerProps {
     as?: any;
     /**
      * A unique id saved to local storage to remember if the banner has been dismissed.
-     * Change this value to show the banner again.
-     * @defaultValue '1'
+     * Without an explicit id, the banner will not be persisted and will reappear on page reload.
      */
     id?: string;
     /**
@@ -61,13 +60,13 @@ export interface BannerSlots {
 export interface BannerEmits {
     close: [];
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
 }, string, import("vue").PublicProps, Readonly<BannerProps> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BannerSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Banner.vue

@@ -3,7 +3,7 @@ import theme from "#build/b24ui/banner";
 </script>
 
 <script setup>
-import { computed, watch } from "vue";
+import { computed, ref, onMounted, useId } from "vue";
 import { Primitive } from "reka-ui";
 import { useHead, useAppConfig } from "#imports";
 import { useLocale } from "../composables/useLocale";
@@ -25,7 +25,7 @@ const props = defineProps({
   close: { type: [Boolean, Object], required: false },
   closeIcon: { type: [Function, Object], required: false },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const emits = defineEmits(["close"]);
@@ -35,32 +35,62 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.banner
   color: props.color,
   to: !!props.to
 }));
-const id = computed(() => `banner-${props.id || "1"}`);
-watch(id, (newId) => {
-  if (typeof document === "undefined" || typeof localStorage === "undefined") return;
-  const isClosed = localStorage.getItem(newId) === "true";
-  const htmlElement = document.querySelector("html");
-  htmlElement?.classList.toggle("hide-banner", isClosed);
+const instanceId = useId();
+const id = computed(() => {
+  const rawId = props.id || instanceId;
+  return `banner-${rawId.replace(/[^\w-]/g, "-")}`;
 });
-useHead({
-  script: [{
-    key: "prehydrate-template-banner",
-    innerHTML: `
-            if (localStorage.getItem('${id.value}') === 'true') {
-              document.querySelector('html').classList.add('hide-banner')
-            }`.replace(/\s+/g, " "),
-    type: "text/javascript"
-  }]
+const isVisible = ref(true);
+const hasPersistence = computed(() => !!props.id);
+onMounted(() => {
+  if (hasPersistence.value && typeof localStorage !== "undefined") {
+    const isClosed = localStorage.getItem(id.value) === "true";
+    isVisible.value = !isClosed;
+  }
+});
+useHead(() => {
+  if (!hasPersistence.value) return {};
+  return {
+    script: [{
+      key: `prehydrate-banner-${id.value}`,
+      innerHTML: `
+        (function() {
+          try {
+            if (localStorage.getItem(${JSON.stringify(id.value)}) === 'true') {
+              document.documentElement.style.setProperty('--${id.value}-display', 'none');
+            }
+          } catch (e) {}
+        })();
+      `.replace(/\s+/g, " "),
+      type: "text/javascript",
+      tagPosition: "head"
+    }],
+    style: [{
+      key: `banner-style-${id.value}`,
+      innerHTML: `.banner[data-banner-id="${id.value}"] { display: var(--${id.value}-display, block); }`,
+      tagPosition: "head"
+    }]
+  };
 });
 function onClose() {
-  localStorage.setItem(id.value, "true");
-  document.querySelector("html")?.classList.add("hide-banner");
+  if (hasPersistence.value) {
+    localStorage.setItem(id.value, "true");
+    document.documentElement.style.setProperty(`--${id.value}-display`, "none");
+  }
+  isVisible.value = false;
   emits("close");
 }
 </script>
 
 <template>
-  <Primitive :as="as" class="banner" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive
+    v-show="isVisible"
+    :as="as"
+    class="banner"
+    :data-banner-id="id"
+    data-slot="root"
+    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+  >
     <B24Link
       v-if="to"
       :aria-label="title"
@@ -117,7 +147,3 @@ function onClose() {
     </B24Container>
   </Primitive>
 </template>
-
-<style scoped>
-.hide-banner .banner{display:none}
-</style>

package/dist/runtime/components/Banner.vue.d.ts

@@ -11,8 +11,7 @@ export interface BannerProps {
     as?: any;
     /**
      * A unique id saved to local storage to remember if the banner has been dismissed.
-     * Change this value to show the banner again.
-     * @defaultValue '1'
+     * Without an explicit id, the banner will not be persisted and will reappear on page reload.
      */
     id?: string;
     /**
@@ -61,13 +60,13 @@ export interface BannerSlots {
 export interface BannerEmits {
     close: [];
 }
+declare const _default: typeof __VLS_export;
+export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<BannerProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: () => any;
 }, string, import("vue").PublicProps, Readonly<BannerProps> & Readonly<{
     onClose?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BannerSlots>;
-declare const _default: typeof __VLS_export;
-export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;