@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

package/dist/runtime/components/Calendar.vue

@@ -9,6 +9,7 @@ import { useForwardPropsEmits } from "reka-ui";
 import { Calendar as SingleCalendar, RangeCalendar } from "reka-ui/namespaced";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -62,6 +63,7 @@ const emits = defineEmits(["update:modelValue", "update:placeholder", "update:va
 defineSlots();
 const { dir, t, locale } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("calendar", props);
 const rootProps = useForwardPropsEmits(reactiveOmit(props, "range", "modelValue", "defaultValue", "color", "size", "monthControls", "yearControls", "class", "b24ui"), emits);
 const nextYearIcon = computed(() => props.nextYearIcon || (dir.value === "rtl" ? icons.chevronDoubleLeft : icons.chevronDoubleRight));
 const nextMonthIcon = computed(() => props.nextMonthIcon || (dir.value === "rtl" ? icons.chevronLeft : icons.chevronRight));
@@ -96,16 +98,16 @@ const btnSize = computed(() => {
     :model-value="modelValue"
     :default-value="defaultValue"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
   >
-    <Calendar.Header data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+    <Calendar.Header data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>
         <B24Button :icon="prevYearIcon" :size="btnSize" color="air-tertiary" v-bind="props.prevYear" />
       </Calendar.Prev>
       <Calendar.Prev v-if="props.monthControls" :aria-label="t('calendar.prevMonth')" as-child>
         <B24Button :icon="prevMonthIcon" :size="btnSize" color="air-tertiary" v-bind="props.prevMonth" />
       </Calendar.Prev>
-      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="b24ui.heading({ class: props.b24ui?.heading })">
+      <Calendar.Heading v-slot="{ headingValue }" data-slot="heading" :class="b24ui.heading({ class: uiProp?.heading })">
         <slot name="heading" :value="headingValue">
           {{ headingValue }}
         </slot>
@@ -117,20 +119,20 @@ const btnSize = computed(() => {
         <B24Button :icon="nextYearIcon" :size="btnSize" color="air-tertiary" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
-    <div data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+    <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
       <Calendar.Grid
         v-for="month in grid"
         :key="month.value.toString()"
         data-slot="grid"
-        :class="b24ui.grid({ class: props.b24ui?.grid })"
+        :class="b24ui.grid({ class: uiProp?.grid })"
       >
         <Calendar.GridHead>
-          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="b24ui.gridWeekDaysRow({ class: props.b24ui?.gridWeekDaysRow })">
+          <Calendar.GridRow data-slot="gridWeekDaysRow" :class="b24ui.gridWeekDaysRow({ class: uiProp?.gridWeekDaysRow })">
             <Calendar.HeadCell
               v-for="day in weekDays"
               :key="day"
               data-slot="headCell"
-              :class="b24ui.headCell({ class: props.b24ui?.headCell })"
+              :class="b24ui.headCell({ class: uiProp?.headCell })"
             >
               <slot name="week-day" :day="day">
                 {{ day }}
@@ -138,18 +140,18 @@ const btnSize = computed(() => {
             </Calendar.HeadCell>
           </Calendar.GridRow>
         </Calendar.GridHead>
-        <Calendar.GridBody data-slot="gridBody" :class="b24ui.gridBody({ class: props.b24ui?.gridBody })">
+        <Calendar.GridBody data-slot="gridBody" :class="b24ui.gridBody({ class: uiProp?.gridBody })">
           <Calendar.GridRow
             v-for="(weekDates, index) in month.rows"
             :key="`weekDate-${index}`"
             data-slot="gridRow"
-            :class="b24ui.gridRow({ class: props.b24ui?.gridRow })"
+            :class="b24ui.gridRow({ class: uiProp?.gridRow })"
           >
             <td
               v-if="weekNumbers && weekDates[0]"
               role="gridcell"
               data-slot="cellWeek"
-              :class="b24ui.cellWeek({ class: props.b24ui?.cellWeek })"
+              :class="b24ui.cellWeek({ class: uiProp?.cellWeek })"
             >
               {{ getWeekNumber(weekDates[0], locale.code) }}
             </td>
@@ -158,13 +160,13 @@ const btnSize = computed(() => {
               :key="weekDate.toString()"
               :date="weekDate"
               data-slot="cell"
-              :class="b24ui.cell({ class: props.b24ui?.cell })"
+              :class="b24ui.cell({ class: uiProp?.cell })"
             >
               <Calendar.CellTrigger
                 :day="weekDate"
                 :month="month.value"
                 data-slot="cellTrigger"
-                :class="b24ui.cellTrigger({ class: props.b24ui?.cellTrigger })"
+                :class="b24ui.cellTrigger({ class: uiProp?.cellTrigger })"
               >
                 <slot name="day" :day="weekDate">
                   {{ weekDate.day }}

package/dist/runtime/components/Card.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/card";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -15,22 +16,23 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("card", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.card || {} })({
   variant: props.variant
 }));
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <slot name="header" />
     </div>
 
-    <div v-if="!!slots.default" data-slot="body" :class="b24ui.body({ class: props.b24ui?.body })">
+    <div v-if="!!slots.default" data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
       <slot />
     </div>
 
-    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div v-if="!!slots.footer" data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
     </div>
   </Primitive>

package/dist/runtime/components/ChatMessage.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/chat-message";
 import { computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import B24Button from "./Button.vue";
@@ -28,6 +29,7 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatMessage", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMessage || {} })({
   variant: props.variant,
   side: props.side,
@@ -38,27 +40,27 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMes
 </script>
 
 <template>
-  <Primitive :as="as" :data-role="role" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
-      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
+  <Primitive :as="as" :data-role="role" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
+      <div v-if="icon || avatar || !!slots.leading" data-slot="leading" :class="b24ui.leading({ class: uiProp?.leading })">
         <slot name="leading" :avatar="avatar" :b24ui="b24ui">
           <Component
             :is="icon"
             v-if="icon"
             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>
       </div>
 
-      <div v-if="parts.length || !!slots.content" data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
+      <div v-if="parts.length || !!slots.content" data-slot="content" :class="b24ui.content({ class: uiProp?.content })">
         <slot
           :id="id"
           name="content"
@@ -73,7 +75,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMes
         </slot>
       </div>
 
-      <div v-if="actions || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: props.b24ui?.actions })">
+      <div v-if="actions || !!slots.actions" data-slot="actions" :class="b24ui.actions({ class: uiProp?.actions })">
         <slot name="actions" :actions="actions">
           <B24Tooltip v-for="(action, index) in actions" :key="index" :text="action.label">
             <B24Button

package/dist/runtime/components/ChatMessages.vue

@@ -8,6 +8,7 @@ import { Presence } from "reka-ui";
 import { defu } from "defu";
 import { useElementBounding, useEventListener, watchThrottled } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { omit } from "../utils";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
@@ -30,6 +31,7 @@ const props = defineProps({
 const slots = defineSlots();
 const getProxySlots = () => omit(slots, ["default", "indicator", "viewport"]);
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatMessages", props);
 const userProps = toRef(() => defu(props.user, { side: "right", variant: "message" }));
 const assistantProps = toRef(() => defu(props.assistant, { side: "left", variant: "message" }));
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatMessages || {} })({
@@ -158,13 +160,16 @@ onMounted(() => {
     return;
   }
   lastScrollTop.value = parent.value.scrollTop;
-  setTimeout(() => {
-    if (props.shouldScrollToBottom) {
+  if (props.shouldScrollToBottom) {
+    scrollToBottom(false);
+    setTimeout(() => {
       scrollToBottom(false);
-    } else {
+    }, 100);
+  } else {
+    nextTick(() => {
       checkScrollPosition();
-    }
-  }, 100);
+    });
+  }
   useEventListener(parent, "scroll", checkScrollPosition);
   useEventListener(window, "resize", () => nextTick(updateLastMessageHeight));
 });
@@ -175,7 +180,7 @@ onMounted(() => {
     ref="el"
     :data-status="status"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     :style="{ '--last-message-height': `${lastMessageHeight}px` }"
   >
     <slot>
@@ -201,7 +206,7 @@ onMounted(() => {
     >
       <template #content>
         <slot name="indicator" :b24ui="b24ui">
-          <div data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })">
+          <div data-slot="indicator" :class="b24ui.indicator({ class: uiProp?.indicator })">
             <span />
             <span />
             <span />
@@ -211,7 +216,7 @@ onMounted(() => {
     </B24ChatMessage>
 
     <Presence :present="showAutoScroll">
-      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+      <div :data-state="showAutoScroll ? 'open' : 'closed'" data-slot="viewport" :class="b24ui.viewport({ class: uiProp?.viewport })">
         <slot name="viewport" :b24ui="b24ui" :on-click="onAutoScrollClick">
           <B24Button
             v-if="autoScroll"
@@ -219,7 +224,7 @@ onMounted(() => {
             color="air-secondary-no-accent"
             v-bind="typeof autoScroll === 'object' ? autoScroll : {}"
             data-slot="autoScroll"
-            :class="b24ui.autoScroll({ class: props.b24ui?.autoScroll })"
+            :class="b24ui.autoScroll({ class: uiProp?.autoScroll })"
             @click="onAutoScrollClick"
           />
         </slot>

package/dist/runtime/components/ChatPalette.vue

@@ -6,6 +6,7 @@ import theme from "#build/b24ui/chat-palette";
 import { computed } from "vue";
 import { Primitive, Slot } from "reka-ui";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
@@ -14,18 +15,19 @@ const props = defineProps({
 });
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPalette", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPalette || {} })());
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="content" :class="b24ui.content({ class: props.b24ui?.content })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="content" :class="b24ui.content({ class: uiProp?.content })">
       <Slot compact>
         <slot />
       </Slot>
     </div>
 
-    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="b24ui.prompt({ class: props.b24ui?.prompt })">
+    <Slot v-if="!!slots.prompt" data-slot="prompt" :class="b24ui.prompt({ class: uiProp?.prompt })">
       <slot name="prompt" />
     </Slot>
   </Primitive>

package/dist/runtime/components/ChatPrompt.vue

@@ -7,6 +7,7 @@ import { computed, toRef, useTemplateRef } from "vue";
 import { Primitive, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -35,6 +36,7 @@ const slots = defineSlots();
 const model = defineModel({ type: String, ...{ default: "" } });
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPrompt", props);
 const textareaProps = useForwardProps(reactivePick(props, "rows", "autofocus", "autofocusDelay", "autoresize", "autoresizeDelay", "maxrows", "icon", "avatar", "loading"));
 const getProxySlots = () => omit(slots, ["header", "footer", "default"]);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPrompt || {} })({
@@ -57,8 +59,8 @@ defineExpose({
 </script>
 
 <template>
-  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })" @submit.prevent="submit">
-    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: props.b24ui?.header })">
+  <Primitive :as="as" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })" @submit.prevent="submit">
+    <div v-if="!!slots.header" data-slot="header" :class="b24ui.header({ class: uiProp?.header })">
       <slot name="header" />
     </div>
 
@@ -68,10 +70,11 @@ defineExpose({
       :placeholder="placeholder || t('chatPrompt.placeholder')"
       :disabled="Boolean(error) || disabled"
       no-border
+      fixed
       v-bind="{ ...textareaProps, ...$attrs }"
-      :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), props.b24ui)"
+      :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), uiProp)"
       data-slot="body"
-      :class="b24ui.body({ class: props.b24ui?.body })"
+      :class="b24ui.body({ class: uiProp?.body })"
       @keydown.enter.exact.prevent="submit"
       @keydown.esc="blur"
     >
@@ -80,9 +83,9 @@ defineExpose({
       </template>
     </B24Textarea>
 
-    <div data-slot="footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
+    <div data-slot="footer" :class="b24ui.footer({ class: uiProp?.footer })">
       <slot name="footer" />
-      <slot name="default" :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), props.b24ui)" />
+      <slot name="default" :b24ui="transformUI(omit(b24ui, ['root', 'body', 'header', 'footer']), uiProp)" />
     </div>
   </Primitive>
 </template>

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

@@ -66,11 +66,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onStop?: ((event: MouseEvent) => any) | undefined;
     onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
-    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
     status: ChatStatus;
-    streamingColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-    submittedColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-    errorColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    streamingColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    submittedColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    errorColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/ChatPromptSubmit.vue

@@ -7,6 +7,7 @@ import { computed } from "vue";
 import { useForwardProps } from "reka-ui";
 import { reactiveOmit } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -51,6 +52,7 @@ const emits = defineEmits(["stop", "reload"]);
 const slots = defineSlots();
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("chatPromptSubmit", props);
 const buttonProps = useForwardProps(reactiveOmit(props, "icon", "color", "status", "streamingIcon", "streamingColor", "submittedIcon", "submittedColor", "errorIcon", "errorColor", "class", "b24ui"));
 const statusButtonProps = computed(() => ({
   ready: {
@@ -94,8 +96,8 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chatPro
 }"
     :aria-label="t('chatPromptSubmit.label')"
     data-slot="base"
-    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
-    :b24ui="transformUI(b24ui, props.b24ui)"
+    :class="b24ui.base({ class: [uiProp?.base, props.class] })"
+    :b24ui="transformUI(b24ui, uiProp)"
   >
     <template v-for="(_, name) in slots" #[name]="slotData">
       <slot :name="name" v-bind="slotData" />

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

@@ -66,11 +66,11 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChatPr
     onStop?: ((event: MouseEvent) => any) | undefined;
     onReload?: ((event: MouseEvent) => any) | undefined;
 }>, {
-    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
     status: ChatStatus;
-    streamingColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-    submittedColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
-    errorColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    streamingColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    submittedColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    errorColor: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/Checkbox.vue

@@ -3,10 +3,11 @@ import theme from "#build/b24ui/checkbox";
 </script>
 
 <script setup>
-import { computed, useId } from "vue";
+import { computed, useAttrs, useId } from "vue";
 import { Primitive, CheckboxRoot, CheckboxIndicator, Label, useForwardProps } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { tv } from "../utils/tv";
 import Minus20Icon from "@bitrix24/b24icons-vue/actions/Minus20Icon";
@@ -33,9 +34,15 @@ const slots = defineSlots();
 const emits = defineEmits(["change"]);
 const modelValue = defineModel({ type: [Boolean, String], ...{ default: void 0 } });
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("checkbox", props);
 const rootProps = useForwardProps(reactivePick(props, "required", "value", "defaultValue"));
 const { id: _id, emitFormChange, emitFormInput, size, color, name, disabled, ariaAttrs } = useFormField(props);
 const id = _id.value ?? useId();
+const attrs = useAttrs();
+const forwardedAttrs = computed(() => {
+  const { "data-state": _, ...rest } = attrs;
+  return rest;
+});
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.checkbox || {} })({
   size: size.value,
   color: color.value,
@@ -53,40 +60,40 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="!variant || variant === 'list' ? as : Label" data-slot="root" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div data-slot="container" :class="b24ui.container({ class: props.b24ui?.container })">
+  <Primitive :as="!variant || variant === 'list' ? as : Label" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="container" :class="b24ui.container({ class: uiProp?.container })">
       <CheckboxRoot
         :id="id"
-        v-bind="{ ...rootProps, ...$attrs, ...ariaAttrs }"
+        v-bind="{ ...rootProps, ...forwardedAttrs, ...ariaAttrs }"
         v-model="modelValue"
         :name="name"
         :disabled="disabled"
         data-slot="base"
-        :class="b24ui.base({ class: props.b24ui?.base })"
+        :class="b24ui.base({ class: uiProp?.base })"
         @update:model-value="onUpdate"
       >
         <template #default="{ modelValue }">
-          <CheckboxIndicator data-slot="indicator" :class="b24ui.indicator({ class: props.b24ui?.indicator })">
-            <Minus20Icon v-if="modelValue === 'indeterminate'" data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-            <CheckIcon v-else data-slot="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
+          <CheckboxIndicator data-slot="indicator" :class="b24ui.indicator({ class: uiProp?.indicator })">
+            <Minus20Icon v-if="modelValue === 'indeterminate'" data-slot="icon" :class="b24ui.icon({ class: uiProp?.icon })" />
+            <CheckIcon v-else data-slot="icon" :class="b24ui.icon({ class: uiProp?.icon })" />
           </CheckboxIndicator>
         </template>
       </CheckboxRoot>
     </div>
 
-    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+    <div v-if="label || !!slots.label || (description || !!slots.description)" data-slot="wrapper" :class="b24ui.wrapper({ class: uiProp?.wrapper })">
       <component
         :is="!variant || variant === 'list' ? Label : 'p'"
         v-if="label || !!slots.label"
         :for="id"
         data-slot="label"
-        :class="b24ui.label({ class: props.b24ui?.label })"
+        :class="b24ui.label({ class: uiProp?.label })"
       >
         <slot name="label" :label="label">
           {{ label }}
         </slot>
       </component>
-      <p v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: props.b24ui?.description })">
+      <p v-if="description || !!slots.description" data-slot="description" :class="b24ui.description({ class: uiProp?.description })">
         <slot name="description" :description="description">
           {{ description }}
         </slot>

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

@@ -76,14 +76,14 @@ export default _default;
 declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__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<CheckboxGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>[]) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/CheckboxGroup.vue

@@ -7,6 +7,7 @@ import { computed, useId } from "vue";
 import { CheckboxGroupRoot, useForwardProps, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useFormField } from "../composables/useFormField";
 import { get, omit } from "../utils";
 import { tv } from "../utils/tv";
@@ -35,6 +36,7 @@ const props = defineProps({
 const emits = defineEmits(["change", "update:modelValue"]);
 const slots = defineSlots();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("checkboxGroup", props);
 const rootProps = useForwardPropsEmits(reactivePick(props, "as", "modelValue", "defaultValue", "orientation", "loop", "required"), emits);
 const checkboxProps = useForwardProps(reactivePick(props, "variant", "indicator"));
 const getProxySlots = () => omit(slots, ["legend"]);
@@ -95,11 +97,11 @@ function onUpdate(value) {
     :name="name"
     :disabled="disabled"
     data-slot="root"
-    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
     @update:model-value="onUpdate"
   >
-    <fieldset data-slot="fieldset" :class="b24ui.fieldset({ class: props.b24ui?.fieldset })" v-bind="ariaAttrs">
-      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
+    <fieldset data-slot="fieldset" :class="b24ui.fieldset({ class: uiProp?.fieldset })" v-bind="ariaAttrs">
+      <legend v-if="legend || !!slots.legend" data-slot="legend" :class="b24ui.legend({ class: uiProp?.legend })">
         <slot name="legend">
           {{ legend }}
         </slot>
@@ -112,9 +114,9 @@ function onUpdate(value) {
         :size="size"
         :name="name"
         :disabled="item.disabled || disabled"
-        :b24ui="{ ...props.b24ui ? omit(props.b24ui, ['root']) : void 0, ...item.b24ui || {} }"
+        :b24ui="{ ...uiProp ? omit(uiProp, ['root']) : void 0, ...item.b24ui || {} }"
         data-slot="item"
-        :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class], disabled: item.disabled || disabled })"
+        :class="b24ui.item({ class: [uiProp?.item, item.b24ui?.item, item.class], disabled: item.disabled || disabled })"
       >
         <template v-for="(_, name) in getProxySlots()" #[name]>
           <slot :name="name" :item="item" />

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

@@ -76,14 +76,14 @@ export default _default;
 declare const __VLS_export: <T extends CheckboxGroupItem[], VK extends GetItemKeys<T> = "value">(__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<CheckboxGroupProps<T, VK> & {
         onChange?: ((event: Event) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>[]) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
     expose: (exposed: {}) => void;
     attrs: any;
     slots: CheckboxGroupSlots<T>;
-    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, import("../types").NestedItem<T>>[]) => void);
+    emit: ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", value: import("../types").GetItemValue<T, VK, undefined, import("../types").NestedItem<T>>[]) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

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

@@ -72,8 +72,8 @@ declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<ChipPr
 }> & Readonly<{
     "onUpdate:show"?: ((value: boolean) => any) | undefined;
 }>, {
-    inset: boolean;
     inverted: boolean;
+    inset: boolean;
     standalone: boolean;
     hideZero: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ChipSlots>;