@bitrix24/b24ui-nuxt 2.2.1 → 2.4.0

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

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/badge";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { tv } from "../utils/tv";
@@ -22,7 +23,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 },
@@ -30,6 +31,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("badge", props);
 async function onCloseClickWrapper(event) {
   const callbacks = Array.isArray(props.onCloseClick) ? props.onCloseClick : [props.onCloseClick];
   try {
@@ -55,31 +57,31 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
   <Primitive
     :as="as"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
   >
     <Primitive
       :as="as"
       data-slot="wrapper"
-      :class="b24ui.wrapper({ class: props.b24ui?.wrapper })"
+      :class="b24ui.wrapper({ class: uiProp?.wrapper })"
     >
       <slot name="leading" :b24ui="b24ui">
         <Component
           :is="leadingIconName"
           v-if="isLeading && leadingIconName"
           data-slot="leadingIcon"
-          :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+          :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
         />
         <B24Avatar
           v-else-if="!!avatar"
-          :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+          :size="uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
           v-bind="avatar"
           data-slot="leadingAvatar"
-          :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+          :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
         />
       </slot>
 
       <slot :b24ui="b24ui">
-        <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label })">
+        <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: uiProp?.label })">
           {{ label }}
         </span>
       </slot>
@@ -88,7 +90,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
       <Cross20Icon
         v-if="useClose"
         data-slot="trailingIcon"
-        :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+        :class="b24ui.trailingIcon({ class: uiProp?.trailingIcon })"
         aria-hidden="true"
         @click.stop.prevent="onCloseClickWrapper"
       />

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,9 +3,10 @@ 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 { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -25,42 +26,73 @@ 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"]);
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("banner", props);
 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: [uiProp?.root, props.class] })"
+  >
     <B24Link
       v-if="to"
       :aria-label="title"
@@ -72,21 +104,21 @@ function onClose() {
       <span class="absolute inset-0 " aria-hidden="true" />
     </B24Link>
 
-    <B24Container data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
-      <div data-slot="left" :class="b24ui.left({ class: props.b24ui?.left })" />
+    <B24Container data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div data-slot="left" :class="b24ui.left({ class: uiProp?.left })" />
 
-      <div data-slot="center" :class="b24ui.center({ class: props.b24ui?.center })">
+      <div data-slot="center" :class="b24ui.center({ class: uiProp?.center })">
         <slot name="leading" :b24ui="b24ui">
-          <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+          <Component :is="icon" v-if="icon" data-slot="icon" :class="b24ui.icon({ class: uiProp?.icon })" />
         </slot>
 
-        <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: props.b24ui?.title })">
+        <div v-if="title || !!slots.title" data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
           <slot name="title">
             {{ title }}
           </slot>
         </div>
 
-        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+        <div v-if="actions?.length || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions })">
           <slot name="actions">
             <B24Button
               v-for="(action, index) in actions"
@@ -99,7 +131,7 @@ function onClose() {
         </div>
       </div>
 
-      <div data-slot="right" :class="b24ui.right({ class: props.b24ui?.right })">
+      <div data-slot="right" :class="b24ui.right({ class: uiProp?.right })">
         <slot name="close" :b24ui="b24ui">
           <B24Button
             v-if="close"
@@ -109,7 +141,7 @@ function onClose() {
             :aria-label="t('banner.close')"
             v-bind="typeof close === 'object' ? close : {}"
             data-slot="close"
-            :class="b24ui.close({ class: props.b24ui?.close })"
+            :class="b24ui.close({ class: uiProp?.close })"
             @click="onClose"
           />
         </slot>
@@ -117,7 +149,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;

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

@@ -67,8 +67,10 @@ export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
     index: number;
     active?: boolean;
 }>;
-declare const __VLS_export: <T extends BreadcrumbItem>(__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<BreadcrumbProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends BreadcrumbItem>(__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<BreadcrumbProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -78,8 +80,8 @@ declare const __VLS_export: <T extends BreadcrumbItem>(__VLS_props: NonNullable<
 }>) => 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/Breadcrumb.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/breadcrumb";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
@@ -20,27 +21,28 @@ const props = defineProps({
   separatorIcon: { type: [Function, Object], required: false },
   labelKey: { type: null, required: false, default: "label" },
   class: { type: null, required: false },
-  b24ui: { type: null, required: false }
+  b24ui: { type: Object, required: false }
 });
 const slots = defineSlots();
 const { dir } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("breadcrumb", props);
 const separatorIcon = computed(() => props.separatorIcon || (dir.value === "rtl" ? icons.chevronLeft : icons.chevronRight));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcrumb || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <ol data-slot="list" :class="b24ui.list({ class: props.b24ui?.list })">
+  <Primitive :as="as" aria-label="breadcrumb" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <ol data-slot="list" :class="b24ui.list({ class: uiProp?.list })">
       <template v-for="(item, index) in items" :key="index">
-        <li data-slot="item" :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item] })">
+        <li data-slot="item" :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item] })">
           <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
             <B24LinkBase
               v-bind="slotProps"
               as="span"
               :aria-current="(item.active ?? active) && index === items.length - 1 ? 'page' : void 0"
               data-slot="link"
-              :class="b24ui.link({ class: [props.b24ui?.link, item.b24ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: !!item.disabled, to: !!item.to })"
+              :class="b24ui.link({ class: [uiProp?.link, item.b24ui?.link, item.class], active: item.active ?? index === items.length - 1, disabled: !!item.disabled, to: !!item.to })"
             >
               <slot
                 :name="item.slot || 'item'"
@@ -60,21 +62,21 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcr
                     :is="item.icon"
                     v-if="item.icon"
                     data-slot="linkLeadingIcon"
-                    :class="b24ui.linkLeadingIcon({ class: [props.b24ui?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
+                    :class="b24ui.linkLeadingIcon({ class: [uiProp?.linkLeadingIcon, item.b24ui?.linkLeadingIcon], active: item.active ?? index === items.length - 1 })"
                   />
                   <B24Avatar
                     v-else-if="item.avatar"
-                    :size="props.b24ui?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()"
+                    :size="uiProp?.linkLeadingAvatarSize || b24ui.linkLeadingAvatarSize()"
                     v-bind="item.avatar"
                     data-slot="linkLeadingAvatar"
-                    :class="b24ui.linkLeadingAvatar({ class: [props.b24ui?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
+                    :class="b24ui.linkLeadingAvatar({ class: [uiProp?.linkLeadingAvatar, item.b24ui?.linkLeadingAvatar], active: item.active ?? index === items.length - 1 })"
                   />
                 </slot>
 
                 <span
                   v-if="get(item, props.labelKey) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']"
                   data-slot="linkLabel"
-                  :class="b24ui.linkLabel({ class: [props.b24ui?.linkLabel, item.b24ui?.linkLabel] })"
+                  :class="b24ui.linkLabel({ class: [uiProp?.linkLabel, item.b24ui?.linkLabel] })"
                 >
                   <slot
                     :name="item.slot ? `${item.slot}-label` : 'item-label'"
@@ -97,12 +99,12 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.breadcr
           </B24Link>
         </li>
 
-        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="b24ui.separator({ class: [props.b24ui?.separator, item.b24ui?.separator] })">
+        <li v-if="index < items.length - 1" role="presentation" aria-hidden="true" data-slot="separator" :class="b24ui.separator({ class: [uiProp?.separator, item.b24ui?.separator] })">
           <slot name="separator" :b24ui="b24ui">
             <Component
               :is="separatorIcon"
               data-slot="separatorIcon"
-              :class="b24ui.separatorIcon({ class: [props.b24ui?.separatorIcon, item.b24ui?.separatorIcon] })"
+              :class="b24ui.separatorIcon({ class: [uiProp?.separatorIcon, item.b24ui?.separatorIcon] })"
             />
           </slot>
         </li>

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

@@ -67,8 +67,10 @@ export type BreadcrumbSlots<T extends BreadcrumbItem = BreadcrumbItem> = {
     index: number;
     active?: boolean;
 }>;
-declare const __VLS_export: <T extends BreadcrumbItem>(__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<BreadcrumbProps<T>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <T extends BreadcrumbItem>(__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<BreadcrumbProps<T>> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -78,8 +80,8 @@ declare const __VLS_export: <T extends BreadcrumbItem>(__VLS_props: NonNullable<
 }>) => 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/Button.d.vue.ts

@@ -81,9 +81,12 @@ export interface ButtonSlots {
         b24ui: Button['b24ui'];
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+    type: "reset" | "submit" | "button";
+    normalCase: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

package/dist/runtime/components/Button.vue

@@ -7,6 +7,7 @@ import { computed, ref, inject } from "vue";
 import { defu } from "defu";
 import { useForwardProps } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFieldGroup } from "../composables/useFieldGroup";
 import { formLoadingInjectionKey } from "../composables/useFormField";
@@ -38,7 +39,7 @@ const props = defineProps({
   class: { type: null, required: false },
   activeClass: { type: String, required: false },
   inactiveClass: { type: String, required: false },
-  b24ui: { type: null, required: false },
+  b24ui: { type: Object, required: false },
   icon: { type: [Function, Object], required: false },
   avatar: { type: Object, required: false },
   loading: { type: Boolean, required: false },
@@ -68,6 +69,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("button", props);
 const { orientation, size: buttonSize, noSplit } = useFieldGroup(props);
 const linkProps = useForwardProps(pickLinkProps(props));
 const proxyLinkProps = computed(() => {
@@ -142,7 +144,7 @@ const b24ui = computed(() => tv({
       v-bind="slotProps"
       data-slot="base"
       :class="b24ui.base({
-  class: [props.b24ui?.base, props.class],
+  class: [uiProp?.base, props.class],
   active,
   ...active && activeDepth ? { depth: activeDepth } : {},
   ...active && activeColor ? { color: activeColor } : {}
@@ -152,35 +154,35 @@ const b24ui = computed(() => tv({
       <div
         v-if="isLoading"
         data-slot="baseLoading"
-        :class="b24ui.baseLoading({ class: props.b24ui?.baseLoading, active })"
+        :class="b24ui.baseLoading({ class: uiProp?.baseLoading, active })"
       >
-        <LoaderWaitIcon v-if="useWait" data-slot="baseLoadingWaitIcon" :class="b24ui.baseLoadingWaitIcon({ class: props.b24ui?.baseLoadingWaitIcon })" aria-hidden="true" />
-        <LoaderClockIcon v-else-if="useClock" data-slot="baseLoadingClockIcon" :class="b24ui.baseLoadingClockIcon({ class: props.b24ui?.baseLoadingClockIcon })" aria-hidden="true" />
-        <SpinnerIcon v-else data-slot="baseLoadingSpinnerIcon" :class="b24ui.baseLoadingSpinnerIcon({ class: props.b24ui?.baseLoadingSpinnerIcon })" aria-hidden="true" />
+        <LoaderWaitIcon v-if="useWait" data-slot="baseLoadingWaitIcon" :class="b24ui.baseLoadingWaitIcon({ class: uiProp?.baseLoadingWaitIcon })" aria-hidden="true" />
+        <LoaderClockIcon v-else-if="useClock" data-slot="baseLoadingClockIcon" :class="b24ui.baseLoadingClockIcon({ class: uiProp?.baseLoadingClockIcon })" aria-hidden="true" />
+        <SpinnerIcon v-else data-slot="baseLoadingSpinnerIcon" :class="b24ui.baseLoadingSpinnerIcon({ class: uiProp?.baseLoadingSpinnerIcon })" aria-hidden="true" />
       </div>
       <div
         data-slot="baseLine"
-        :class="[b24ui.baseLine({ class: [props.b24ui?.baseLine] }), isLoading ? 'invisible' : '']"
+        :class="[b24ui.baseLine({ class: [uiProp?.baseLine] }), isLoading ? 'invisible' : '']"
       >
         <slot name="leading" :b24ui="b24ui">
           <Component
             :is="leadingIconName"
             v-if="isLeading && typeof leadingIconName !== 'undefined'"
             data-slot="leadingIcon"
-            :class="b24ui.leadingIcon({ class: props.b24ui?.leadingIcon })"
+            :class="b24ui.leadingIcon({ class: uiProp?.leadingIcon })"
           />
           <B24Avatar
             v-else-if="!!avatar"
-            :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
+            :size="uiProp?.leadingAvatarSize || b24ui.leadingAvatarSize()"
             v-bind="avatar"
             data-slot="leadingAvatar"
-            :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+            :class="b24ui.leadingAvatar({ class: uiProp?.leadingAvatar })"
           />
         </slot>
 
         <slot :b24ui="b24ui">
-          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: props.b24ui?.label, active })">
-            <span data-slot="labelInner" :class="b24ui.labelInner({ class: props.b24ui?.labelInner, active })">
+          <span v-if="label !== void 0 && label !== null" data-slot="label" :class="b24ui.label({ class: uiProp?.label, active })">
+            <span data-slot="labelInner" :class="b24ui.labelInner({ class: uiProp?.labelInner, active })">
               {{ label }}
             </span>
           </span>
@@ -190,7 +192,7 @@ const b24ui = computed(() => tv({
           <ChevronDownSIcon
             v-if="useDropdown"
             data-slot="trailingIcon"
-            :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+            :class="b24ui.trailingIcon({ class: uiProp?.trailingIcon })"
             aria-hidden="true"
           />
         </slot>

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

@@ -81,9 +81,12 @@ export interface ButtonSlots {
         b24ui: Button['b24ui'];
     }): any;
 }
-declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 declare const _default: typeof __VLS_export;
 export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+    type: "reset" | "submit" | "button";
+    normalCase: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -83,6 +83,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     yearControls?: boolean;
     defaultValue?: CalendarDefaultValue<R, M>;
     modelValue?: CalendarModelValue<R, M>;
+    weekNumbers?: boolean;
     class?: any;
     b24ui?: Calendar['slots'];
 }
@@ -98,8 +99,15 @@ export interface CalendarSlots {
         day: string;
     }) => any;
 }
-declare const __VLS_export: <R extends boolean, M extends boolean>(__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<CalendarProps<R, M> & __VLS_EmitsToProps<__VLS_NormalizeEmits<((evt: "update:modelValue", date: CalendarModelValue<R, M>) => void) & ((evt: "update:placeholder", ...args: [date: DateValue] & [date: DateValue]) => void) & ((evt: "update:validModelValue", date: DateRange) => void) & ((evt: "update:startValue", date: DateValue | undefined) => void)>>> & import("vue").PublicProps & (typeof globalThis extends {
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <R extends boolean, M extends boolean>(__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<CalendarProps<R, M> & {
+        "onUpdate:modelValue"?: ((date: CalendarModelValue<R, M>) => any) | undefined;
+        "onUpdate:placeholder"?: ((...args: DateValue[]) => any) | undefined;
+        "onUpdate:validModelValue"?: ((date: DateRange) => any) | undefined;
+        "onUpdate:startValue"?: ((date: DateValue | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
@@ -109,8 +117,8 @@ declare const __VLS_export: <R extends boolean, M extends boolean>(__VLS_props:
 }>) => 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];
-} & {};
+}) & {};