@bitrix24/b24ui-nuxt 0.7.1 → 1.0.1

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

@@ -74,5 +74,5 @@ declare const _default: <T extends AccordionItem>(__VLS_props: NonNullable<Await
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

package/dist/runtime/components/Advice.vue

@@ -9,7 +9,6 @@ import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
-import PersonIcon from "@bitrix24/b24icons-vue/main/PersonIcon";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false, default: "div" },
@@ -44,21 +43,10 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.advice
           :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
           v-bind="avatar"
           :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
+          :b24ui="{ icon: props.b24ui?.leadingAvatarIcon || b24ui.leadingAvatarIcon() }"
         />
       </slot>
     </div>
-    <div
-      v-else
-      :class="b24ui.leading({ class: props.b24ui?.leading })"
-    >
-      <B24Avatar
-        :size="props.b24ui?.leadingAvatarSize || b24ui.leadingAvatarSize()"
-        :icon="PersonIcon"
-        alt="Person"
-        :class="b24ui.leadingAvatar({ class: props.b24ui?.leadingAvatar })"
-        :b24ui="{ icon: 'text-white bg-base-800 dark:text-200' }"
-      />
-    </div>
     <div :class="b24ui.descriptionWrapper({ class: props.b24ui?.descriptionWrapper })">
       <div :class="b24ui.descriptionAngle({ class: props.b24ui?.descriptionAngle })">
         <svg

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

@@ -21,7 +21,7 @@ export interface AdviceSlots {
     leading(props?: {}): any;
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AdviceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AdviceProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AdviceProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AdviceProps> & Readonly<{}>, {
     as: any;
     angle: Advice["variants"]["angle"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AdviceSlots>;

package/dist/runtime/components/Alert.vue

@@ -18,6 +18,7 @@ const props = defineProps({
   icon: { type: [Function, Object], required: false },
   avatar: { type: Object, required: false },
   color: { type: null, required: false },
+  inverted: { type: Boolean, required: false, default: false },
   orientation: { type: null, required: false, default: "vertical" },
   size: { type: null, required: false },
   actions: { type: Array, required: false },
@@ -32,6 +33,7 @@ const { t } = useLocale();
 const appConfig = useAppConfig();
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert || {} })({
   color: props.color,
+  inverted: Boolean(props.inverted),
   size: props.size,
   orientation: props.orientation,
   title: !!props.title || !!slots.title
@@ -63,7 +65,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
 
       <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="b24ui.actions({ class: props.b24ui?.actions })">
         <slot name="actions">
-          <B24Button v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+          <B24Button v-for="(action, index) in actions" :key="index" size="sm" v-bind="action" />
         </slot>
       </div>
     </div>
@@ -71,7 +73,7 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
     <div v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions) || close" :class="b24ui.actions({ class: props.b24ui?.actions, orientation: 'horizontal' })">
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
-          <B24Button v-for="(action, index) in actions" :key="index" size="xs" v-bind="action" />
+          <B24Button v-for="(action, index) in actions" :key="index" size="sm" v-bind="action" />
         </slot>
       </template>
 
@@ -79,8 +81,8 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.alert |
         <B24Button
           v-if="close"
           :icon="closeIcon || icons.close"
-          size="xs"
-          color="link"
+          size="sm"
+          color="air-tertiary"
           :aria-label="t('alert.close')"
           v-bind="typeof close === 'object' ? close : {}"
           :class="b24ui.close({ class: props.b24ui?.close })"

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

@@ -21,6 +21,12 @@ export interface AlertProps {
      * @defaultValue 'default'
      */
     color?: Alert['variants']['color'];
+    /**
+     * If set to `true` the color is inverted.
+     * Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
+     * @defaultValue false
+     */
+    inverted?: boolean;
     /**
      * The orientation between the content and the actions.
      * @defaultValue 'vertical'
@@ -34,12 +40,12 @@ export interface AlertProps {
      * Display a list of actions:
      * - under the title and description when orientation is `vertical`
      * - next to the close button when orientation is `horizontal`
-     * `{ size: 'xs' }`{lang="ts"}
+     * `{ size: 'sm' }`{lang="ts"}
      */
     actions?: ButtonProps[];
     /**
      * Display a close button to dismiss the alert.
-     * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts"}
+     * `{ size: 'sm', color: 'air-tertiary-no-accent' }`{lang="ts"}
      * @emits 'update:open'
      * @defaultValue false
      */
@@ -54,7 +60,7 @@ export interface AlertProps {
     b24ui?: Alert['slots'];
 }
 export interface AlertEmits {
-    (e: 'update:open', value: boolean): void;
+    'update:open': [value: boolean];
 }
 export interface AlertSlots {
     leading(props?: {}): any;
@@ -67,11 +73,12 @@ export interface AlertSlots {
         };
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AlertProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {
+    inverted: boolean;
     orientation: Alert["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, AlertSlots>;
 export default _default;

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

@@ -20,5 +20,5 @@ declare const _default: <T extends Messages>(__VLS_props: NonNullable<Awaited<ty
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -29,7 +29,7 @@ export interface AvatarProps {
 export interface AvatarSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<AvatarProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, {
     default?: (props: {}) => any;

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

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

package/dist/runtime/components/Badge.vue

@@ -15,13 +15,12 @@ const props = defineProps({
   as: { type: null, required: false, default: "span" },
   label: { type: [String, Number], required: false },
   color: { type: null, required: false },
-  depth: { type: null, required: false },
+  inverted: { type: Boolean, required: false, default: 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 },
-  useFill: { type: Boolean, required: false },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
   icon: { type: [Function, Object], required: false },
@@ -42,13 +41,12 @@ const { orientation, size: buttonGroupSize } = useButtonGroup(props);
 const { isLeading, leadingIconName } = useComponentIcons(props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge || {} })({
   color: props.color,
-  depth: props.depth,
+  inverted: Boolean(props.inverted),
   size: buttonGroupSize.value || props.size,
   square: props.square || !slots.default && !props.label,
   buttonGroup: orientation.value,
   useLink: Boolean(props.useLink),
   useClose: Boolean(props.useClose),
-  useFill: Boolean(props.useFill),
   leading: Boolean(isLeading.value)
 }));
 </script>
@@ -76,13 +74,11 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.badge |
         />
       </slot>
 
-      <span :class="b24ui.label({ class: props.b24ui?.label })">
-        <slot>
-          <span v-if="label !== void 0 && label !== null">
-            {{ label }}
-          </span>
-        </slot>
-      </span>
+      <slot>
+        <span v-if="label !== void 0 && label !== null" :class="b24ui.label({ class: props.b24ui?.label })">
+          {{ label }}
+        </span>
+      </slot>
     </Primitive>
     <slot name="trailing">
       <Cross20Icon

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

@@ -15,9 +15,11 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
      */
     color?: Badge['variants']['color'];
     /**
-     * @defaultValue 'normal'
+     * If set to `true` the color is inverted.
+     * Used for 'air-primary', 'air-primary-success', 'air-primary-alert', 'air-primary-copilot' and 'air-primary-warning' colors.
+     * @defaultValue false
      */
-    depth?: Badge['variants']['depth'];
+    inverted?: boolean;
     /**
      * @defaultValue 'md'
      */
@@ -35,11 +37,6 @@ export interface BadgeProps extends Omit<UseComponentIconsProps, 'loading' | 'lo
      */
     useClose?: boolean;
     onCloseClick?: ((event: MouseEvent) => void | Promise<void>) | Array<((event: MouseEvent) => void | Promise<void>)>;
-    /**
-     * Fills the background
-     * @defaultValue false
-     */
-    useFill?: boolean;
     class?: any;
     b24ui?: Badge['slots'];
 }
@@ -48,7 +45,8 @@ export interface BadgeSlots {
     default(props?: {}): any;
     trailing(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<BadgeProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BadgeProps> & Readonly<{}>, {
+    inverted: boolean;
     as: any;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, BadgeSlots>;
 export default _default;

package/dist/runtime/components/Button.vue

@@ -10,13 +10,13 @@ import { useAppConfig } from "#imports";
 import { useComponentIcons } from "../composables/useComponentIcons";
 import { useButtonGroup } from "../composables/useButtonGroup";
 import { formLoadingInjectionKey } from "../composables/useFormField";
-import { omit } from "../utils";
+import { omit, mergeClasses } from "../utils";
 import { tv } from "../utils/tv";
 import { pickLinkProps } from "../utils/link";
 import B24Avatar from "./Avatar.vue";
 import B24Link from "./Link.vue";
 import B24LinkBase from "./LinkBase.vue";
-import ChevronDownIcon from "@bitrix24/b24icons-vue/actions/ChevronDownIcon";
+import ChevronDownSIcon from "@bitrix24/b24icons-vue/outline/ChevronDownSIcon";
 import LoaderWaitIcon from "@bitrix24/b24icons-vue/animated/LoaderWaitIcon";
 import LoaderClockIcon from "@bitrix24/b24icons-vue/animated/LoaderClockIcon";
 import SpinnerIcon from "@bitrix24/b24icons-vue/specialized/SpinnerIcon";
@@ -30,14 +30,14 @@ const props = defineProps({
   rounded: { type: Boolean, required: false },
   block: { type: Boolean, required: false },
   loadingAuto: { type: Boolean, required: false },
-  normalCase: { type: Boolean, required: false },
+  normalCase: { type: Boolean, required: false, default: true },
   useWait: { type: Boolean, required: false },
   useClock: { type: Boolean, required: false },
   useDropdown: { type: Boolean, required: false },
   onClick: { type: [Function, Array], required: false },
   class: { type: null, required: false },
-  activeClass: { type: String, required: false, default: "" },
-  inactiveClass: { type: String, required: false, default: "" },
+  activeClass: { type: String, required: false },
+  inactiveClass: { type: String, required: false },
   b24ui: { type: null, required: false },
   icon: { type: [Function, Object], required: false },
   avatar: { type: Object, required: false },
@@ -45,7 +45,7 @@ const props = defineProps({
   as: { type: null, required: false },
   type: { type: null, required: false, default: "button" },
   disabled: { type: Boolean, required: false },
-  active: { type: Boolean, required: false, default: void 0 },
+  active: { type: Boolean, required: false },
   exact: { type: Boolean, required: false },
   exactQuery: { type: [Boolean, String], required: false },
   exactHash: { type: Boolean, required: false },
@@ -102,10 +102,10 @@ const b24ui = computed(() => tv({
     variants: {
       active: {
         true: {
-          base: props.activeClass
+          base: mergeClasses(appConfig.b24ui?.button?.variants?.active?.true?.base, props.activeClass)
         },
         false: {
-          base: props.inactiveClass
+          base: mergeClasses(appConfig.b24ui?.button?.variants?.active?.false?.base, props.inactiveClass)
         }
       }
     }
@@ -124,7 +124,8 @@ const b24ui = computed(() => tv({
   useWait: Boolean(props.useWait),
   useClock: Boolean(props.useClock),
   leading: Boolean(isLeading.value),
-  buttonGroup: orientation.value
+  buttonGroup: orientation.value,
+  isAir: true
 }));
 </script>
 
@@ -148,11 +149,11 @@ const b24ui = computed(() => tv({
     >
       <div
         v-if="isLoading"
-        class="h-full w-full absolute inset-0 flex flex-row flex-nowrap items-center justify-center"
+        :class="b24ui.baseLoading({ class: props.b24ui?.baseLoading, active })"
       >
-        <LoaderWaitIcon v-if="useWait" class="w-[28px] h-[28px]" aria-hidden="true" />
-        <LoaderClockIcon v-else-if="useClock" class="w-[28px] h-[28px]" aria-hidden="true" />
-        <SpinnerIcon v-else class="size-lg animate-spin stroke-2" aria-hidden="true" />
+        <LoaderWaitIcon v-if="useWait" :class="b24ui.baseLoadingWaitIcon({ class: props.b24ui?.baseLoadingWaitIcon })" aria-hidden="true" />
+        <LoaderClockIcon v-else-if="useClock" :class="b24ui.baseLoadingClockIcon({ class: props.b24ui?.baseLoadingClockIcon })" aria-hidden="true" />
+        <SpinnerIcon v-else :class="b24ui.baseLoadingSpinnerIcon({ class: props.b24ui?.baseLoadingSpinnerIcon })" aria-hidden="true" />
       </div>
       <div
         :class="[
@@ -176,12 +177,14 @@ const b24ui = computed(() => tv({
 
         <slot>
           <span v-if="label !== void 0 && label !== null" :class="b24ui.label({ class: props.b24ui?.label, active })">
-            {{ label }}
+            <span :class="b24ui.labelInner({ class: props.b24ui?.labelInner, active })">
+              {{ label }}
+            </span>
           </span>
         </slot>
 
         <slot name="trailing">
-          <ChevronDownIcon
+          <ChevronDownSIcon
             v-if="useDropdown"
             :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
             aria-hidden="true"

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

@@ -7,7 +7,7 @@ type Button = ComponentConfig<typeof theme, AppConfig, 'button'>;
 export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | 'trailingIcon'>, Omit<LinkProps, 'raw' | 'custom'> {
     label?: string;
     /**
-     * @defaultValue 'default'
+     * @defaultValue 'air-secondary-no-accent'
      */
     color?: Button['variants']['color'];
     activeColor?: Button['variants']['color'];
@@ -37,7 +37,7 @@ export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | '
     loadingAuto?: boolean;
     /**
      * Disable uppercase label
-     * @defaultValue false
+     * @defaultValue true
      */
     normalCase?: boolean;
     /**
@@ -51,7 +51,7 @@ export interface ButtonProps extends Omit<UseComponentIconsProps, 'trailing' | '
      */
     useClock?: boolean;
     /**
-     * Shows icons.chevronDown on the right side
+     * Shows icons.ChevronDownSIcon on the right side
      * @defaultValue false
      */
     useDropdown?: boolean;
@@ -74,11 +74,9 @@ export interface ButtonSlots {
     default(props?: {}): any;
     trailing(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ButtonProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
     type: "reset" | "submit" | "button";
-    activeClass: string;
-    active: boolean;
-    inactiveClass: string;
+    normalCase: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -28,7 +28,7 @@ export interface ButtonGroupProps {
 export interface ButtonGroupSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ButtonGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ButtonGroupProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ButtonGroupProps> & Readonly<{}>, {
     orientation: ButtonGroup["variants"]["orientation"];
     noSplit: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonGroupSlots>;

package/dist/runtime/components/Calendar.vue

@@ -27,7 +27,7 @@ const props = defineProps({
   range: { type: Boolean, required: false },
   multiple: { type: Boolean, required: false },
   monthControls: { type: Boolean, required: false, default: true },
-  yearControls: { type: Boolean, required: false, default: true },
+  yearControls: { type: Boolean, required: false, default: false },
   defaultValue: { type: null, required: false },
   modelValue: { type: null, required: false },
   class: { type: null, required: false },
@@ -77,10 +77,10 @@ function paginateYear(date, sign) {
 const Calendar = computed(() => props.range ? RangeCalendar : SingleCalendar);
 const btnSize = computed(() => {
   switch (props.size) {
-    case "lg":
-      return "sm";
-    default:
+    case "xs":
       return "xs";
+    default:
+      return "sm";
   }
 });
 </script>
@@ -97,10 +97,10 @@ const btnSize = computed(() => {
   >
     <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>
-        <B24Button :icon="prevYearIcon" :size="btnSize" color="link" v-bind="props.prevYear" />
+        <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="link" v-bind="props.prevMonth" />
+        <B24Button :icon="prevMonthIcon" :size="btnSize" color="air-tertiary" v-bind="props.prevMonth" />
       </Calendar.Prev>
       <Calendar.Heading v-slot="{ headingValue }" :class="b24ui.heading({ class: props.b24ui?.heading })">
         <slot name="heading" :value="headingValue">
@@ -108,10 +108,10 @@ const btnSize = computed(() => {
         </slot>
       </Calendar.Heading>
       <Calendar.Next v-if="props.monthControls" :aria-label="t('calendar.nextMonth')" as-child>
-        <B24Button :icon="nextMonthIcon" :size="btnSize" color="link" v-bind="props.nextMonth" />
+        <B24Button :icon="nextMonthIcon" :size="btnSize" color="air-tertiary" v-bind="props.nextMonth" />
       </Calendar.Next>
       <Calendar.Next v-if="props.yearControls" :next-page="(date) => paginateYear(date, 1)" :aria-label="t('calendar.nextYear')" as-child>
-        <B24Button :icon="nextYearIcon" :size="btnSize" color="link" v-bind="props.nextYear" />
+        <B24Button :icon="nextYearIcon" :size="btnSize" color="air-tertiary" v-bind="props.nextYear" />
       </Calendar.Next>
     </Calendar.Header>
     <div :class="b24ui.body({ class: props.b24ui?.body })">

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

@@ -23,7 +23,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     nextYearIcon?: IconComponent;
     /**
      * Configure the next year button.
-     * `{ color: 'link' }`{lang="ts"}
+     * `{ color: 'air-tertiary' }`{lang="ts"}
      */
     nextYear?: ButtonProps;
     /**
@@ -34,7 +34,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     nextMonthIcon?: IconComponent;
     /**
      * Configure the next month button.
-     * `{ color: 'link' }`{lang="ts"}
+     * `{ color: 'air-tertiary' }`{lang="ts"}
      */
     nextMonth?: ButtonProps;
     /**
@@ -45,7 +45,7 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     prevYearIcon?: IconComponent;
     /**
      * Configure the prev year button.
-     * `{ color: 'link' }`{lang="ts"}
+     * `{ color: 'air-tertiary' }`{lang="ts"}
      */
     prevYear?: ButtonProps;
     /**
@@ -56,11 +56,11 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     prevMonthIcon?: IconComponent;
     /**
      * Configure the prev month button.
-     * `{ color: 'link' }`{lang="ts"}
+     * `{ color: 'air-tertiary' }`{lang="ts"}
      */
     prevMonth?: ButtonProps;
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
     color?: Calendar['variants']['color'];
     /**
@@ -71,9 +71,15 @@ export interface CalendarProps<R extends boolean = false, M extends boolean = fa
     range?: R & boolean;
     /** Whether multiple dates can be selected */
     multiple?: M & boolean;
-    /** Show month controls */
+    /**
+     * Show month controls
+     * @defaultValue 'true'
+     */
     monthControls?: boolean;
-    /** Show year controls */
+    /**
+     * Show year controls
+     * @defaultValue 'false'
+     */
     yearControls?: boolean;
     defaultValue?: CalendarDefaultValue<R, M>;
     modelValue?: CalendarModelValue<R, M>;
@@ -107,5 +113,5 @@ declare const _default: <R extends boolean, M extends boolean>(__VLS_props: NonN
 };
 export default _default;
 type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
+    [K in keyof T as K]: T[K];
 } & {};

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

@@ -12,7 +12,7 @@ export interface CheckboxProps extends Pick<CheckboxRootProps, 'disabled' | 'req
     label?: string;
     description?: string;
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
     color?: Checkbox['variants']['color'];
     /**
@@ -44,7 +44,7 @@ export interface CheckboxSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<CheckboxProps & {
     modelValue?: boolean | "indeterminate";
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (payload: Event) => any;
     "update:modelValue": (value: boolean | "indeterminate") => any;
 }, string, import("vue").PublicProps, Readonly<CheckboxProps & {

package/dist/runtime/components/Chip.vue

@@ -6,42 +6,63 @@ import theme from "#build/b24ui/chip";
 import { computed } from "vue";
 import { Primitive, Slot } from "reka-ui";
 import { useAppConfig } from "#imports";
-import { useAvatarGroup } from "../composables/useAvatarGroup";
 import { tv } from "../utils/tv";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   as: { type: null, required: false },
   text: { type: [String, Number], required: false },
+  trailingIcon: { type: [Function, Object], required: false },
   color: { type: null, required: false },
+  inverted: { type: Boolean, required: false, default: false },
   size: { type: null, required: false },
   position: { type: null, required: false },
   inset: { type: Boolean, required: false, default: false },
   standalone: { type: Boolean, required: false, default: false },
+  hideZero: { type: Boolean, required: false, default: false },
   class: { type: null, required: false },
   b24ui: { type: null, required: false }
 });
 defineSlots();
 const show = defineModel("show", { type: Boolean, ...{ default: true } });
-const { size } = useAvatarGroup(props);
 const appConfig = useAppConfig();
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.chip || {} })({
   color: props.color,
-  size: size.value,
+  inverted: Boolean(props.inverted),
+  size: props.size,
+  // size.value
   position: props.position,
   inset: Boolean(props.inset),
-  standalone: Boolean(props.standalone)
+  standalone: Boolean(props.standalone),
+  hideZero: Boolean(props.hideZero),
+  oneDigit: !props.trailingIcon && props.text?.toString().length === 1
 }));
+const value = computed(() => {
+  return props.text;
+});
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
+  <Primitive
+    :as="as"
+    :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
+  >
     <Slot v-bind="$attrs">
       <slot />
     </Slot>
 
-    <span v-if="show" :class="b24ui.base({ class: props.b24ui?.base })">
+    <span
+      v-if="show"
+      :class="b24ui.base({ class: props.b24ui?.base })"
+      :data-value="value"
+    >
       <slot name="content">
-        {{ text }}
+        <span>{{ text }}</span>
+      </slot>
+      <slot name="trailing">
+        <Component
+          :is="trailingIcon"
+          :class="b24ui.trailingIcon({ class: props.b24ui?.trailingIcon })"
+        />
       </slot>
     </span>
   </Primitive>