@bitrix24/b24ui-nuxt 0.6.7 → 0.7.0

package/dist/module.json

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

package/dist/module.mjs

@@ -1,11 +1,12 @@
 import { defu } from 'defu';
 import { defineNuxtModule, createResolver, addVitePlugin, addPlugin, addComponentsDir, addImportsDir, hasNuxtModule, installModule } from '@nuxt/kit';
-import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.jU270f-Q.mjs';
+import { d as defaultOptions, a as getDefaultUiConfig, b as addTemplates } from './shared/b24ui-nuxt.C-kZb5Ac.mjs';
 import 'node:url';
 import 'scule';
+import 'knitwork';
 
 const name = "@bitrix24/b24ui-nuxt";
-const version = "0.6.7";
+const version = "0.7.0";
 
 const module = defineNuxtModule({
   meta: {
@@ -39,7 +40,14 @@ const module = defineNuxtModule({
       }
     }
     if (options.colorMode) {
-      await registerModule("@nuxtjs/color-mode", "colorMode", { classSuffix: "", disableTransition: true });
+      await registerModule(
+        "@nuxtjs/color-mode",
+        "colorMode",
+        {
+          classSuffix: "",
+          disableTransition: true
+        }
+      );
     }
     addPlugin({ src: resolve("./runtime/plugins/colors") });
     addComponentsDir({

package/dist/runtime/components/Accordion.vue

@@ -0,0 +1,96 @@
+<script>
+import theme from "#build/b24ui/accordion";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { AccordionRoot, AccordionItem, AccordionHeader, AccordionTrigger, AccordionContent, useForwardPropsEmits } from "reka-ui";
+import { reactivePick } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { get } from "../utils";
+import { tv } from "../utils/tv";
+import icons from "../dictionary/icons";
+const props = defineProps({
+  as: { type: null, required: false },
+  items: { type: Array, required: false },
+  trailingIcon: { type: [Function, Object], required: false },
+  labelKey: { type: String, required: false, default: "label" },
+  class: { type: null, required: false },
+  b24ui: { type: null, required: false },
+  collapsible: { type: Boolean, required: false, default: true },
+  defaultValue: { type: null, required: false },
+  modelValue: { type: null, required: false },
+  type: { type: String, required: false, default: "single" },
+  disabled: { type: Boolean, required: false },
+  unmountOnHide: { type: Boolean, required: false, default: true }
+});
+const emits = defineEmits(["update:modelValue"]);
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const rootProps = useForwardPropsEmits(reactivePick(props, "as", "collapsible", "defaultValue", "disabled", "modelValue", "type", "unmountOnHide"), emits);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.accordion || {} })({
+  disabled: props.disabled
+}));
+</script>
+
+<template>
+  <AccordionRoot v-bind="rootProps" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+    <AccordionItem
+      v-for="(item, index) in props.items"
+      v-slot="{ open }"
+      :key="index"
+      :value="item.value || String(index)"
+      :disabled="item.disabled"
+      :class="b24ui.item({ class: [props.b24ui?.item, item.b24ui?.item, item.class] })"
+    >
+      <AccordionHeader as="div" :class="b24ui.header({ class: [props.b24ui?.header, item.b24ui?.header] })">
+        <AccordionTrigger :class="b24ui.trigger({ class: [props.b24ui?.trigger, item.b24ui?.trigger], disabled: item.disabled })">
+          <slot name="leading" :item="item" :index="index" :open="open">
+            <Component
+              :is="item.icon"
+              v-if="item.icon"
+              :class="b24ui.leadingIcon({ class: [props.b24ui?.leadingIcon, item?.b24ui?.leadingIcon] })"
+            />
+          </slot>
+
+          <span
+            v-if="get(item, props.labelKey) || !!slots.default"
+            :class="b24ui.label({ class: [props.b24ui?.label, item.b24ui?.label] })"
+          >
+            <slot :item="item" :index="index" :open="open">{{ get(item, props.labelKey) }}</slot>
+          </span>
+
+          <slot name="trailing" :item="item" :index="index" :open="open">
+            <Component
+              :is="item.trailingIcon || trailingIcon || icons.chevronDown"
+              :class="b24ui.trailingIcon({ class: [props.b24ui?.trailingIcon, item.b24ui?.trailingIcon] })"
+            />
+          </slot>
+        </AccordionTrigger>
+      </AccordionHeader>
+
+      <AccordionContent
+        v-if="item.content || !!slots.content || item.slot && !!slots[item.slot] || !!slots.body || item.slot && !!slots[`${item.slot}-body`]"
+        :class="b24ui.content({ class: [props.b24ui?.content, item.b24ui?.content] })"
+      >
+        <slot
+          :name="item.slot || 'content'"
+          :item="item"
+          :index="index"
+          :open="open"
+        >
+          <div :class="b24ui.body({ class: [props.b24ui?.body, item.b24ui?.body] })">
+            <slot
+              :name="item.slot ? `${item.slot}-body` : 'body'"
+              :item="item"
+              :index="index"
+              :open="open"
+            >
+              {{ item.content }}
+            </slot>
+          </div>
+        </slot>
+      </AccordionContent>
+    </AccordionItem>
+  </AccordionRoot>
+</template>

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

@@ -0,0 +1,78 @@
+import type { AccordionRootProps, AccordionRootEmits } from 'reka-ui';
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/accordion';
+import type { IconComponent } from '../types';
+import type { DynamicSlots, ComponentConfig } from '../types/utils';
+type Accordion = ComponentConfig<typeof theme, AppConfig, 'accordion'>;
+export interface AccordionItem {
+    label?: string;
+    /**
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    /**
+     * @IconComponent
+     */
+    trailingIcon?: IconComponent;
+    slot?: string;
+    content?: string;
+    /** A unique value for the accordion item. Defaults to the index. */
+    value?: string;
+    disabled?: boolean;
+    class?: any;
+    b24ui?: Pick<Accordion['slots'], 'item' | 'header' | 'trigger' | 'leadingIcon' | 'label' | 'trailingIcon' | 'content' | 'body'>;
+    [key: string]: any;
+}
+export interface AccordionProps<T extends AccordionItem = AccordionItem> extends Pick<AccordionRootProps, 'collapsible' | 'defaultValue' | 'modelValue' | 'type' | 'disabled' | 'unmountOnHide'> {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    items?: T[];
+    /**
+     * The icon displayed on the right side of the trigger.
+     * @defaultValue icons.chevronDown
+     * @IconComponent
+     */
+    trailingIcon?: IconComponent;
+    /**
+     * The key used to get the label from the item.
+     * @defaultValue 'label'
+     */
+    labelKey?: string;
+    class?: any;
+    b24ui?: Accordion['slots'];
+}
+export interface AccordionEmits extends AccordionRootEmits {
+}
+type SlotProps<T extends AccordionItem> = (props: {
+    item: T;
+    index: number;
+    open: boolean;
+}) => any;
+export type AccordionSlots<T extends AccordionItem = AccordionItem> = {
+    leading: SlotProps<T>;
+    default: SlotProps<T>;
+    trailing: SlotProps<T>;
+    content: SlotProps<T>;
+    body: SlotProps<T>;
+} & DynamicSlots<T, 'body', {
+    index: number;
+    open: boolean;
+}>;
+declare const _default: <T extends AccordionItem>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
+        readonly "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:modelValue"> & AccordionProps<T> & Partial<{}>> & import("vue").PublicProps;
+    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+    attrs: any;
+    slots: AccordionSlots<T>;
+    emit: (evt: "update:modelValue", value: string | string[] | undefined) => void;
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/runtime/components/Advice.vue

@@ -31,7 +31,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.advice
 </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 v-if="isLeading || !!avatar || !!slots.leading" :class="b24ui.leading({ class: props.b24ui?.leading })">
       <slot name="leading">
         <Component

package/dist/runtime/components/Alert.vue

@@ -39,7 +39,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
 </script>
 
 <template>
-  <Primitive :as="as" :data-orientation="orientation" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })">
+  <Primitive :as="as" :data-orientation="orientation" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
     <slot name="leading">
       <Component
         :is="icon"

package/dist/runtime/components/Avatar.vue

@@ -9,6 +9,7 @@ import { useAppConfig } from "#imports";
 import ImageComponent from "#build/b24ui-image-component";
 import { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
+import B24Chip from "./Chip.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "span" },
@@ -17,6 +18,7 @@ const props = defineProps({
   icon: { type: [Function, Object], required: false },
   text: { type: String, required: false },
   size: { type: null, required: false },
+  chip: { type: [Boolean, Object], required: false },
   class: { type: null, required: false },
   style: { type: null, required: false },
   b24ui: { type: null, required: false }
@@ -52,7 +54,13 @@ function onError() {
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.class, props.b24ui?.root] })" :style="props.style">
+  <component
+    :is="props.chip ? B24Chip : Primitive"
+    :as="as"
+    v-bind="props.chip ? typeof props.chip === 'object' ? { inset: true, ...props.chip } : { inset: true } : {}"
+    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+    :style="props.style"
+  >
     <component
       :is="ImageComponent"
       v-if="src && !error"
@@ -69,8 +77,8 @@ function onError() {
     <Slot v-else v-bind="$attrs">
       <slot>
         <Component :is="icon" v-if="icon" :class="b24ui.icon({ class: props.b24ui?.icon })" />
-        <span v-else :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || '\xA0' }}</span>
+        <span v-else :class="b24ui.fallback({ class: props.b24ui?.fallback })">{{ fallback || "\xA0" }}</span>
       </slot>
     </Slot>
-  </Primitive>
+  </component>
 </template>

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

@@ -1,7 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/avatar';
+import type { IconComponent, ChipProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
-import type { IconComponent } from '../types';
 type Avatar = ComponentConfig<typeof theme, AppConfig, 'avatar'>;
 export interface AvatarProps {
     /**
@@ -21,6 +21,7 @@ export interface AvatarProps {
      * @defaultValue 'md'
      */
     size?: Avatar['variants']['size'];
+    chip?: boolean | ChipProps;
     class?: any;
     style?: any;
     b24ui?: Avatar['slots'];

package/dist/runtime/components/AvatarGroup.vue

@@ -58,7 +58,7 @@ provide(avatarGroupInjectionKey, 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] })">
     <component :is="avatar" v-for="(avatar, count) in visibleAvatars" :key="count" :class="b24ui.base({ class: props.b24ui?.base })" />
     <B24Avatar v-if="hiddenCount > 0" :text="`+${hiddenCount}`" :class="b24ui.base({ class: props.b24ui?.base })" />
   </Primitive>

package/dist/runtime/components/Badge.vue

@@ -17,6 +17,7 @@ const props = defineProps({
   color: { type: null, required: false },
   depth: { type: null, required: false },
   size: { type: null, required: false },
+  square: { type: Boolean, required: false },
   useLink: { type: Boolean, required: false },
   useClose: { type: Boolean, required: false },
   onCloseClick: { type: [Function, Array], required: false },
@@ -28,7 +29,7 @@ const props = defineProps({
   trailing: { type: Boolean, required: false },
   trailingIcon: { type: [Function, Object], required: false }
 });
-defineSlots();
+const slots = defineSlots();
 const appConfig = useAppConfig();
 async function onCloseClickWrapper(event) {
   const callbacks = Array.isArray(props.onCloseClick) ? props.onCloseClick : [props.onCloseClick];
@@ -43,6 +44,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
   color: props.color,
   depth: props.depth,
   size: buttonGroupSize.value || props.size,
+  square: props.square || !slots.default && !props.label,
   buttonGroup: orientation.value,
   useLink: Boolean(props.useLink),
   useClose: Boolean(props.useClose),
@@ -54,7 +56,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
 <template>
   <Primitive
     :as="as"
-    :class="b24ui.base({ class: [props.class, props.b24ui?.base] })"
+    :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
   >
     <Primitive
       :as="as"
@@ -76,7 +78,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
 
       <span :class="b24ui.label({ class: props.b24ui?.label })">
         <slot>
-          <span v-if="label">
+          <span v-if="label !== void 0 && label !== null">
             {{ label }}
           </span>
         </slot>

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

@@ -22,6 +22,8 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
      * @defaultValue 'md'
      */
     size?: Badge['variants']['size'];
+    /** Render the badge with equal padding on all sides. */
+    square?: boolean;
     /**
      * Shows 'underline' on hover
      * @defaultValue false

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

@@ -37,6 +37,7 @@ const props = defineProps({
   allowNonContiguousRanges: { type: Boolean, required: false },
   pagedNavigation: { type: Boolean, required: false },
   preventDeselect: { type: Boolean, required: false },
+  maximumDays: { type: Number, required: false },
   weekStartsOn: { type: Number, required: false },
   weekdayFormat: { type: String, required: false },
   fixedWeeks: { type: Boolean, required: false, default: true },
@@ -48,8 +49,11 @@ const props = defineProps({
   initialFocus: { type: Boolean, required: false },
   isDateDisabled: { type: Function, required: false },
   isDateUnavailable: { type: Function, required: false },
+  isDateHighlightable: { type: Function, required: false },
   nextPage: { type: Function, required: false },
-  prevPage: { type: Function, required: false }
+  prevPage: { type: Function, required: false },
+  disableDaysOutsideCurrentView: { type: Boolean, required: false },
+  fixedDate: { type: String, required: false }
 });
 const emits = defineEmits(["update:modelValue", "update:placeholder", "update:startValue"]);
 defineSlots();
@@ -89,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,13 +17,15 @@ 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 },
   required: { type: Boolean, required: false },
   name: { type: String, required: false },
-  value: { type: [String, Number, Object, null], required: false },
+  value: { type: null, required: false },
   id: { type: String, required: false },
   defaultValue: { type: [Boolean, String], 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'> {