@bitrix24/b24ui-nuxt 0.6.8 → 0.7.1

package/dist/runtime/components/Button.vue

@@ -133,14 +133,13 @@ const b24ui = computed(() => tv({
     v-slot="{ active, ...slotProps }"
     :type="type"
     :disabled="disabled || isLoading"
-    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
     v-bind="proxyLinkProps"
     custom
   >
     <B24LinkBase
       v-bind="slotProps"
       :class="b24ui.base({
-  class: [props.class, props.b24ui?.base],
+  class: [props.b24ui?.base, props.class],
   active,
   ...active && activeDepth ? { depth: activeDepth } : {},
   ...active && activeColor ? { color: activeColor } : {}
@@ -176,7 +175,7 @@ const b24ui = computed(() => tv({
         </slot>
 
         <slot>
-          <span v-if="label" :class="b24ui.label({ class: props.b24ui?.label, active })">
+          <span v-if="label !== void 0 && label !== null" :class="b24ui.label({ class: props.b24ui?.label, active })">
             {{ label }}
           </span>
         </slot>

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/button';
-import type { LinkProps } from './Link.vue';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { LinkProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type Button = ComponentConfig<typeof theme, AppConfig, 'button'>;
 export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | 'trailingIcon'>, Omit<LinkProps, 'raw' | 'custom'> {

package/dist/runtime/components/Calendar.vue

@@ -93,7 +93,7 @@ const btnSize = computed(() => {
     :default-value="defaultValue"
     :locale="locale"
     :dir="dir"
-    :class="b24ui.root({ class: [props.class, props.b24ui?.root] })"
+    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
   >
     <Calendar.Header :class="b24ui.header({ class: props.b24ui?.header })">
       <Calendar.Prev v-if="props.yearControls" :prev-page="(date) => paginateYear(date, -1)" :aria-label="t('calendar.prevYear')" as-child>

package/dist/runtime/components/Checkbox.vue

@@ -17,7 +17,9 @@ const props = defineProps({
   label: { type: String, required: false },
   description: { type: String, required: false },
   color: { type: null, required: false },
+  variant: { type: null, required: false },
   size: { type: null, required: false },
+  indicator: { type: null, required: false },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
   disabled: { type: Boolean, required: false },
@@ -37,6 +39,8 @@ const id = _id.value ?? useId();
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.checkbox || {} })({
   size: size.value,
   color: color.value,
+  variant: props.variant,
+  indicator: props.indicator,
   required: props.required,
   disabled: disabled.value,
   checked: Boolean(modelValue.value ?? props.defaultValue)
@@ -50,7 +54,7 @@ function onUpdate(value) {
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <Primitive :as="!variant || variant === 'list' ? as : Label" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <div :class="b24ui.container({ class: props.b24ui?.container })">
       <CheckboxRoot
         :id="id"
@@ -62,7 +66,7 @@ function onUpdate(value) {
         @update:model-value="onUpdate"
       >
         <template #default="{ modelValue }">
-          <CheckboxIndicator as-child>
+          <CheckboxIndicator :class="b24ui.indicator({ class: props.b24ui?.indicator })">
             <Minus20Icon v-if="modelValue === 'indeterminate'" :class="b24ui.icon({ class: props.b24ui?.icon })" />
             <CheckIcon v-else :class="b24ui.icon({ class: props.b24ui?.icon })" />
           </CheckboxIndicator>
@@ -71,11 +75,16 @@ function onUpdate(value) {
     </div>
 
     <div v-if="label || !!slots.label || (description || !!slots.description)" :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-      <Label v-if="label || !!slots.label" :for="id" :class="b24ui.label({ class: props.b24ui?.label })">
+      <component
+        :is="!variant || variant === 'list' ? Label : 'p'"
+        v-if="label || !!slots.label"
+        :for="id"
+        :class="b24ui.label({ class: props.b24ui?.label })"
+      >
         <slot name="label" :label="label">
           {{ label }}
         </slot>
-      </Label>
+      </component>
       <p v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
         <slot name="description" :description="description">
           {{ description }}

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

@@ -15,10 +15,19 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
      * @defaultValue 'primary'
      */
     color?: Checkbox['variants']['color'];
+    /**
+     * @defaultValue 'list'
+     */
+    variant?: Checkbox['variants']['variant'];
     /**
      * @defaultValue 'md'
      */
     size?: Checkbox['variants']['size'];
+    /**
+     * Position of the indicator.
+     * @defaultValue 'start'
+     */
+    indicator?: Checkbox['variants']['indicator'];
     class?: any;
     b24ui?: Checkbox['slots'];
 }

package/dist/runtime/components/Chip.vue

@@ -34,7 +34,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chip ||
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <Slot v-bind="$attrs">
       <slot />
     </Slot>

package/dist/runtime/components/Collapsible.vue

@@ -25,7 +25,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.collaps
 </script>
 
 <template>
-  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <CollapsibleRoot v-slot="{ open }" v-bind="rootProps" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <CollapsibleTrigger v-if="!!slots.default" as-child>
       <slot :open="open" />
     </CollapsibleTrigger>

package/dist/runtime/components/Countdown.vue

@@ -238,7 +238,7 @@ defineExpose({
   <Primitive
     :as="as"
     v-bind="$attrs"
-    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
   >
     <svg
       v-if="props.useCircle"

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

@@ -79,15 +79,15 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CountdownP
     stop: () => void;
     restart: () => void;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    end: () => any;
     abort: () => any;
     progress: (payload: CountdownData) => any;
     start: () => any;
-    end: () => any;
 }, string, import("vue").PublicProps, Readonly<CountdownProps> & Readonly<{
+    onEnd?: (() => any) | undefined;
     onAbort?: (() => any) | undefined;
     onProgress?: ((payload: CountdownData) => any) | undefined;
     onStart?: (() => any) | undefined;
-    onEnd?: (() => any) | undefined;
 }>, {
     as: any;
     emitEvents: boolean;

package/dist/runtime/components/DescriptionList.vue

@@ -51,7 +51,7 @@ const normalizedItems = computed(() => {
 </script>
 
 <template>
-  <div :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <div :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <h2 v-if="legend || !!slots.legend" :class="b24ui.legend({ class: props.b24ui?.legend })">
       <slot name="legend">
         {{ legend }}
@@ -129,7 +129,8 @@ const normalizedItems = computed(() => {
             :class="b24ui.descriptionWrapper({
   class: [
     props.b24ui?.descriptionWrapper,
-    item?.b24ui?.descriptionWrapper
+    item?.b24ui?.descriptionWrapper,
+    item?.b24ui?.class
   ],
   orientation: item.orientation
 })"

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

@@ -26,7 +26,7 @@ export interface DescriptionListItem {
      */
     actions?: ButtonProps[];
     class?: any;
-    b24ui?: DescriptionList['slots'];
+    b24ui?: Pick<DescriptionList['slots'], 'labelWrapper' | 'icon' | 'avatar' | 'label' | 'descriptionWrapper' | 'description' | 'actions'>;
     [key: string]: any;
 }
 export interface DescriptionListProps<T extends DescriptionListItem = DescriptionListItem> {

package/dist/runtime/components/DropdownMenu.vue

@@ -46,7 +46,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dropdow
     </DropdownMenuTrigger>
 
     <B24DropdownMenuContent
-      :class="b24ui.content({ class: [!slots.default && props.class, props.b24ui?.content] })"
+      :class="b24ui.content({ class: [!slots.default && props.b24ui?.content, props.class] })"
       :b24ui="b24ui"
       :b24ui-override="props.b24ui"
       v-bind="contentProps"

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

@@ -29,6 +29,8 @@ export interface DropdownMenuItem extends Omit<LinkProps, 'type' | 'raw' | 'cust
     children?: ArrayOrNested<DropdownMenuItem>;
     onSelect?(e: Event): void;
     onUpdateChecked?(checked: boolean): void;
+    class?: any;
+    b24ui?: Pick<DropdownMenu['slots'], 'item' | 'label' | 'separator' | 'itemLeadingIcon' | 'itemLeadingAvatarSize' | 'itemLeadingAvatar' | 'itemLabel' | 'itemLabelExternalIcon' | 'itemTrailing' | 'itemTrailingIcon' | 'itemTrailingKbds' | 'itemTrailingKbdsSize'>;
     [key: string]: any;
 }
 export interface DropdownMenuProps<T extends ArrayOrNested<DropdownMenuItem> = ArrayOrNested<DropdownMenuItem>> extends Omit<DropdownMenuRootProps, 'dir'> {

package/dist/runtime/components/DropdownMenuContent.vue

@@ -67,48 +67,48 @@ const groups = computed(
         <Component
           :is="icons.loading"
           v-if="item.loading"
-          :class="b24ui.itemLeadingIcon({ class: b24uiOverride?.itemLeadingIcon, color: item?.color, loading: true })"
+          :class="b24ui.itemLeadingIcon({ class: [b24uiOverride?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], color: item?.color, loading: true })"
         />
         <Component
           :is="item.icon"
           v-else-if="item.icon"
-          :class="b24ui.itemLeadingIcon({ class: b24uiOverride?.itemLeadingIcon, color: item?.color, active })"
+          :class="b24ui.itemLeadingIcon({ class: [b24uiOverride?.itemLeadingIcon, item.b24ui?.itemLeadingIcon], color: item?.color, active })"
         />
         <B24Avatar
           v-else-if="item.avatar"
-          :size="props.b24uiOverride?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
+          :size="item.b24ui?.itemLeadingAvatarSize || props.b24uiOverride?.itemLeadingAvatarSize || b24ui.itemLeadingAvatarSize()"
           v-bind="item.avatar"
-          :class="b24ui.itemLeadingAvatar({ class: b24uiOverride?.itemLeadingAvatar, active })"
+          :class="b24ui.itemLeadingAvatar({ class: [b24uiOverride?.itemLeadingAvatar, item.b24ui?.itemLeadingAvatar], active })"
         />
       </slot>
 
-      <span v-if="getLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="b24ui.itemLabel({ class: b24uiOverride?.itemLabel, active })">
+      <span v-if="getLabel(item) || !!slots[item.slot ? `${item.slot}-label` : 'item-label']" :class="b24ui.itemLabel({ class: [b24uiOverride?.itemLabel, item.b24ui?.itemLabel], active })">
         <slot :name="item.slot ? `${item.slot}-label` : 'item-label'" :item="item" :active="active" :index="index">
           {{ getLabel(item) }}
         </slot>
         <Component
           :is="typeof externalIcon !== 'boolean' ? externalIcon : icons.external"
           v-if="item.target === '_blank' && externalIcon !== false"
-          :class="b24ui.itemLabelExternalIcon({ class: b24uiOverride?.itemLabelExternalIcon, color: item?.color, active })"
+          :class="b24ui.itemLabelExternalIcon({ class: [b24uiOverride?.itemLabelExternalIcon, item.b24ui?.itemLabelExternalIcon], color: item?.color, active })"
         />
       </span>
 
-      <span :class="b24ui.itemTrailing({ class: b24uiOverride?.itemTrailing })">
+      <span :class="b24ui.itemTrailing({ class: [b24uiOverride?.itemTrailing, item.b24ui?.itemTrailing] })">
         <slot :name="item.slot ? `${item.slot}-trailing` : 'item-trailing'" :item="item" :active="active" :index="index">
           <Component
             :is="childrenIcon"
             v-if="item.children?.length"
-            :class="b24ui.itemTrailingIcon({ class: b24uiOverride?.itemTrailingIcon, color: item?.color, active })"
+            :class="b24ui.itemTrailingIcon({ class: [b24uiOverride?.itemTrailingIcon, item.b24ui?.itemTrailingIcon], color: item?.color, active })"
           />
-          <span v-else-if="item.kbds?.length" :class="b24ui.itemTrailingKbds({ class: b24uiOverride?.itemTrailingKbds })">
-            <B24Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="props.b24uiOverride?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
+          <span v-else-if="item.kbds?.length" :class="b24ui.itemTrailingKbds({ class: [b24uiOverride?.itemTrailingKbds, item.b24ui?.itemTrailingKbds] })">
+            <B24Kbd v-for="(kbd, kbdIndex) in item.kbds" :key="kbdIndex" :size="item.b24ui?.itemTrailingKbdsSize || props.b24uiOverride?.itemTrailingKbdsSize || b24ui.itemTrailingKbdsSize()" v-bind="typeof kbd === 'string' ? { value: kbd } : kbd" />
           </span>
         </slot>
 
         <DropdownMenu.ItemIndicator as-child>
           <Component
             :is="checkedIcon || icons.check"
-            :class="b24ui.itemTrailingIcon({ class: b24uiOverride?.itemTrailingIcon, color: item?.color })"
+            :class="b24ui.itemTrailingIcon({ class: [b24uiOverride?.itemTrailingIcon, item.b24ui?.itemTrailingIcon], color: item?.color })"
           />
         </DropdownMenu.ItemIndicator>
       </span>
@@ -119,72 +119,74 @@ const groups = computed(
     <component :is="sub ? DropdownMenu.SubContent : DropdownMenu.Content" :class="props.class" v-bind="contentProps">
       <slot name="content-top" />
 
-      <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: b24uiOverride?.group })">
-        <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
-          <DropdownMenu.Label v-if="item.type === 'label'" :class="b24ui.label({ class: b24uiOverride?.label })">
-            <ReuseItemTemplate :item="item" :index="index" />
-          </DropdownMenu.Label>
-          <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="b24ui.separator({ class: b24uiOverride?.separator })" />
-          <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
-            <DropdownMenu.SubTrigger
-              as="button"
-              type="button"
+      <div role="presentation" :class="b24ui.viewport({ class: props.b24ui?.viewport })">
+        <DropdownMenu.Group v-for="(group, groupIndex) in groups" :key="`group-${groupIndex}`" :class="b24ui.group({ class: b24uiOverride?.group })">
+          <template v-for="(item, index) in group" :key="`group-${groupIndex}-${index}`">
+            <DropdownMenu.Label v-if="item.type === 'label'" :class="b24ui.label({ class: [b24uiOverride?.label, item.b24ui?.label, item.class] })">
+              <ReuseItemTemplate :item="item" :index="index" />
+            </DropdownMenu.Label>
+            <DropdownMenu.Separator v-else-if="item.type === 'separator'" :class="b24ui.separator({ class: [b24uiOverride?.separator, item.b24ui?.separator, item.class] })" />
+            <DropdownMenu.Sub v-else-if="item?.children?.length" :open="item.open" :default-open="item.defaultOpen">
+              <DropdownMenu.SubTrigger
+                as="button"
+                type="button"
+                :disabled="item.disabled"
+                :text-value="getLabel(item)"
+                :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color })"
+              >
+                <ReuseItemTemplate :item="item" :index="index" />
+              </DropdownMenu.SubTrigger>
+
+              <B24DropdownMenuContent
+                sub
+                :class="props.class"
+                :b24ui="b24ui"
+                :b24ui-override="b24uiOverride"
+                :portal="portal"
+                :items="item.children"
+                align="start"
+                :align-offset="-4"
+                :side-offset="3"
+                :label-key="labelKey"
+                :checked-icon="checkedIcon"
+                :external-icon="externalIcon"
+                v-bind="item.content"
+              >
+                <template v-for="(_, name) in proxySlots" #[name]="slotData">
+                  <slot :name="name" v-bind="slotData" />
+                </template>
+              </B24DropdownMenuContent>
+            </DropdownMenu.Sub>
+            <DropdownMenu.CheckboxItem
+              v-else-if="item.type === 'checkbox'"
+              :model-value="item.checked"
               :disabled="item.disabled"
               :text-value="getLabel(item)"
-              :class="b24ui.item({ class: b24uiOverride?.item, color: item?.color })"
+              :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color })"
+              @update:model-value="item.onUpdateChecked"
+              @select="item.onSelect"
             >
               <ReuseItemTemplate :item="item" :index="index" />
-            </DropdownMenu.SubTrigger>
-
-            <B24DropdownMenuContent
-              sub
-              :class="props.class"
-              :b24ui="b24ui"
-              :b24ui-override="b24uiOverride"
-              :portal="portal"
-              :items="item.children"
-              align="start"
-              :align-offset="-4"
-              :side-offset="3"
-              :label-key="labelKey"
-              :checked-icon="checkedIcon"
-              :external-icon="externalIcon"
-              v-bind="item.content"
+            </DropdownMenu.CheckboxItem>
+            <DropdownMenu.Item
+              v-else
+              as-child
+              :disabled="item.disabled"
+              :text-value="getLabel(item)"
+              @select="item.onSelect"
             >
-              <template v-for="(_, name) in proxySlots" #[name]="slotData">
-                <slot :name="name" v-bind="slotData" />
-              </template>
-            </B24DropdownMenuContent>
-          </DropdownMenu.Sub>
-          <DropdownMenu.CheckboxItem
-            v-else-if="item.type === 'checkbox'"
-            :model-value="item.checked"
-            :disabled="item.disabled"
-            :text-value="getLabel(item)"
-            :class="b24ui.item({ class: [b24uiOverride?.item, item.class], color: item?.color })"
-            @update:model-value="item.onUpdateChecked"
-            @select="item.onSelect"
-          >
-            <ReuseItemTemplate :item="item" :index="index" />
-          </DropdownMenu.CheckboxItem>
-          <DropdownMenu.Item
-            v-else
-            as-child
-            :disabled="item.disabled"
-            :text-value="getLabel(item)"
-            @select="item.onSelect"
-          >
-            <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
-              <B24LinkBase
-                v-bind="slotProps"
-                :class="b24ui.item({ class: [b24uiOverride?.item, item.class], color: item?.color, active })"
-              >
-                <ReuseItemTemplate :item="item" :active="active" :index="index" />
-              </B24LinkBase>
-            </B24Link>
-          </DropdownMenu.Item>
-        </template>
-      </DropdownMenu.Group>
+              <B24Link v-slot="{ active, ...slotProps }" v-bind="pickLinkProps(item)" custom>
+                <B24LinkBase
+                  v-bind="slotProps"
+                  :class="b24ui.item({ class: [b24uiOverride?.item, item.b24ui?.item, item.class], color: item?.color, active })"
+                >
+                  <ReuseItemTemplate :item="item" :active="active" :index="index" />
+                </B24LinkBase>
+              </B24Link>
+            </DropdownMenu.Item>
+          </template>
+        </DropdownMenu.Group>
+      </div>
 
       <slot />
 

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

@@ -30,31 +30,15 @@ type DropdownMenuContentSlots<T extends ArrayOrNested<DropdownMenuItem>> = Omit<
 declare const _default: <T extends ArrayOrNested<DropdownMenuItem>>(__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<Pick<Partial<{}> & Omit<{
         readonly onEscapeKeyDown?: ((event: KeyboardEvent) => any) | undefined;
-        readonly onPointerDownOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }>) => any) | undefined;
-        readonly onFocusOutside?: ((event: CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
-        readonly onInteractOutside?: ((event: CustomEvent<{
-            originalEvent: PointerEvent;
-        }> | CustomEvent<{
-            originalEvent: FocusEvent;
-        }>) => any) | undefined;
+        readonly onPointerDownOutside?: ((event: import("reka-ui").PointerDownOutsideEvent) => any) | undefined;
+        readonly onFocusOutside?: ((event: import("reka-ui").FocusOutsideEvent) => any) | undefined;
+        readonly onInteractOutside?: ((event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => any) | undefined;
         readonly onCloseAutoFocus?: ((event: Event) => any) | undefined;
     } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onEscapeKeyDown" | "onPointerDownOutside" | "onFocusOutside" | "onInteractOutside" | "onCloseAutoFocus"> & DropdownMenuContentProps<T> & Partial<{}>> & import("vue").PublicProps;
     expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
     attrs: any;
     slots: DropdownMenuContentSlots<T>;
-    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }>) => void) & ((evt: "focusOutside", event: CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "interactOutside", event: CustomEvent<{
-        originalEvent: PointerEvent;
-    }> | CustomEvent<{
-        originalEvent: FocusEvent;
-    }>) => void) & ((evt: "closeAutoFocus", event: Event) => void);
+    emit: ((evt: "escapeKeyDown", event: KeyboardEvent) => void) & ((evt: "pointerDownOutside", event: import("reka-ui").PointerDownOutsideEvent) => void) & ((evt: "focusOutside", event: import("reka-ui").FocusOutsideEvent) => void) & ((evt: "interactOutside", event: import("reka-ui").PointerDownOutsideEvent | import("reka-ui").FocusOutsideEvent) => void) & ((evt: "closeAutoFocus", event: Event) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/Form.vue

@@ -3,7 +3,7 @@ import theme from "#build/b24ui/form";
 </script>
 
 <script setup>
-import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly } from "vue";
+import { provide, inject, nextTick, ref, onUnmounted, onMounted, computed, useId, readonly, reactive } from "vue";
 import { useEventBus } from "@vueuse/core";
 import { useAppConfig } from "#imports";
 import { formOptionsInjectionKey, formInputsInjectionKey, formBusInjectionKey, formLoadingInjectionKey } from "../composables/useFormField";
@@ -20,7 +20,7 @@ const props = defineProps({
   } },
   disabled: { type: Boolean, required: false },
   validateOnInputDelay: { type: Number, required: false, default: 300 },
-  transform: { type: Boolean, required: false, default: true },
+  transform: { type: null, required: false, default: () => true },
   attach: { type: Boolean, required: false, default: true },
   loadingAuto: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
@@ -80,9 +80,9 @@ const errors = ref([]);
 provide("form-errors", errors);
 const inputs = ref({});
 provide(formInputsInjectionKey, inputs);
-const dirtyFields = /* @__PURE__ */ new Set();
-const touchedFields = /* @__PURE__ */ new Set();
-const blurredFields = /* @__PURE__ */ new Set();
+const dirtyFields = reactive(/* @__PURE__ */ new Set());
+const touchedFields = reactive(/* @__PURE__ */ new Set());
+const blurredFields = reactive(/* @__PURE__ */ new Set());
 function resolveErrorIds(errs) {
   return errs.map((err) => ({
     ...err,
@@ -205,6 +205,6 @@ defineExpose({
     :class="b24ui({ class: props.class })"
     @submit.prevent="onSubmitWrapper"
   >
-    <slot :errors="errors" />
+    <slot :errors="errors" :loading="loading" />
   </component>
 </template>

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

@@ -1,5 +1,5 @@
-import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form, InferInput, InferOutput } from '../types/form';
-export interface FormProps<S extends FormSchema> {
+import type { FormSchema, FormError, FormInputEvents, FormErrorEvent, FormSubmitEvent, Form, InferInput, FormData } from '../types/form';
+export interface FormProps<S extends FormSchema, T extends boolean = true> {
     id?: string | number;
     /** Schema to validate the form state. Supports Standard Schema objects, Yup, Joi, and Superstructs. */
     schema?: S;
@@ -27,7 +27,7 @@ export interface FormProps<S extends FormSchema> {
      * If true, schema transformations will be applied to the state on submit.
      * @defaultValue `true`
      */
-    transform?: boolean;
+    transform?: T;
     /**
      * If true, this form will attach to its parent Form (if any) and validate at the same time.
      * @defaultValue `true`
@@ -40,26 +40,27 @@ export interface FormProps<S extends FormSchema> {
      */
     loadingAuto?: boolean;
     class?: any;
-    onSubmit?: ((event: FormSubmitEvent<InferOutput<S>>) => void | Promise<void>) | (() => void | Promise<void>);
+    onSubmit?: ((event: FormSubmitEvent<FormData<S, T>>) => void | Promise<void>) | (() => void | Promise<void>);
 }
-export interface FormEmits<S extends FormSchema> {
-    (e: 'submit', payload: FormSubmitEvent<InferOutput<S>>): void;
+export interface FormEmits<S extends FormSchema, T extends boolean = true> {
+    (e: 'submit', payload: FormSubmitEvent<FormData<S, T>>): void;
     (e: 'error', payload: FormErrorEvent): void;
 }
 export interface FormSlots {
     default(props?: {
         errors: FormError[];
+        loading: boolean;
     }): any;
 }
-declare const _default: <S extends FormSchema>(__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<{
+declare const _default: <S extends FormSchema, T extends boolean = true>(__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<Pick<Partial<{}> & Omit<{
         readonly onError?: ((payload: FormErrorEvent) => any) | undefined;
-        readonly onSubmit?: ((payload: FormSubmitEvent<InferOutput<S>>) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onError" | "onSubmit"> & FormProps<S> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<Form<InferInput<S>>>): void;
+        readonly onSubmit?: ((payload: FormSubmitEvent<FormData<S, T>>) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onSubmit" | "onError"> & FormProps<S, T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<Form<S>>): void;
     attrs: any;
     slots: FormSlots;
-    emit: FormEmits<S>;
+    emit: FormEmits<S, T>;
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/FormField.vue

@@ -52,7 +52,7 @@ provide(formFieldInjectionKey, computed(() => ({
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
       <div v-if="label || !!slots.label" :class="b24ui.labelWrapper({ class: props.b24ui?.labelWrapper })">
         <Label :for="id" :class="b24ui.label({ class: props.b24ui?.label })">
@@ -79,17 +79,17 @@ provide(formFieldInjectionKey, computed(() => ({
 
       <div v-if="typeof error === 'string' && error || !!slots.error" :id="`${ariaId}-error`" :class="b24ui.error({ class: props.b24ui?.error })">
         <slot name="error" :error="error">
-          <div class="flex flex-row flex-nowrap gap-0.5">
+          <div :class="b24ui.errorWrapper({ class: props.b24ui?.errorWrapper })">
             <WarningIcon :class="b24ui.errorIcon()" />
             <div>{{ error }}</div>
           </div>
         </slot>
       </div>
-      <p v-else-if="help || !!slots.help" :class="b24ui.help({ class: props.b24ui?.help })">
+      <div v-else-if="help || !!slots.help" :class="b24ui.help({ class: props.b24ui?.help })">
         <slot name="help" :help="help">
           {{ help }}
         </slot>
-      </p>
+      </div>
     </div>
   </Primitive>
 </template>