@bitrix24/b24ui-nuxt 0.7.1 → 1.0.1

package/dist/runtime/components/Slideover.vue

@@ -3,7 +3,7 @@ import theme from "#build/b24ui/slideover";
 </script>
 
 <script setup>
-import { computed, toRef } from "vue";
+import { computed, toRef, ref } from "vue";
 import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose, VisuallyHidden, useForwardPropsEmits } from "reka-ui";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig } from "#imports";
@@ -12,19 +12,20 @@ import { usePortal } from "../composables/usePortal";
 import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Button from "./Button.vue";
+import B24SidebarLayout from "./SidebarLayout.vue";
 const props = defineProps({
   title: { type: String, required: false },
   description: { type: String, required: false },
   content: { type: Object, required: false },
   overlay: { type: Boolean, required: false, default: true },
-  overlayBlur: { type: null, required: false, default: "auto" },
+  overlayBlur: { type: null, required: false, default: "off" },
   transition: { type: Boolean, required: false, default: true },
-  side: { type: null, required: false, default: "right" },
+  side: { type: null, required: false, default: "bottom" },
   portal: { type: [Boolean, String], required: false, skipCheck: true, default: true },
   close: { type: [Boolean, Object], required: false, default: true },
   closeIcon: { type: [Function, Object], required: false },
   dismissible: { type: Boolean, required: false, default: true },
-  scrollbarThin: { type: Boolean, required: false, default: true },
+  useLightContent: { type: Boolean, required: false, default: true },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
   open: { type: Boolean, required: false },
@@ -59,6 +60,30 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
   side: props.side,
   overlayBlur: props.overlayBlur
 }));
+const sidebarRef = ref(null);
+defineExpose({
+  /**
+   * Get SidebarLayout API
+   * @throws {Error} If SidebarLayout is not initialized
+   */
+  getSidebarApi: () => {
+    if (!sidebarRef.value) {
+      return null;
+    }
+    return sidebarRef.value.api;
+  },
+  // Direct access to SidebarLayout methods
+  setSidebarLoading: (value) => {
+    if (sidebarRef.value) {
+      sidebarRef.value.api.setLoading(value);
+    }
+  },
+  setSidebarRootLoading: (value) => {
+    if (sidebarRef.value) {
+      sidebarRef.value.api.setRootLoading(value);
+    }
+  }
+});
 </script>
 
 <template>
@@ -78,7 +103,11 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
         @after-leave="emits('after:leave')"
         v-on="contentEvents"
       >
-        <VisuallyHidden v-if="!!slots.content && (title || !!slots.title || (description || !!slots.description))">
+        <VisuallyHidden
+          v-if="
+  !!slots.content && (title || !!slots.title || (description || !!slots.description)) || !slots.content && !!slots.header && (!slots.title || !slots.description)
+"
+        >
           <DialogTitle v-if="title || !!slots.title">
             <slot name="title">
               {{ title }}
@@ -93,50 +122,98 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.slideov
         </VisuallyHidden>
 
         <slot name="content" :close="close">
-          <div v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || (props.close || !!slots.close)" :class="b24ui.header({ class: props.b24ui?.header })">
-            <slot name="header" :close="close">
-              <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
-                <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
-                  <slot name="title">
-                    {{ title }}
-                  </slot>
-                </DialogTitle>
+          <template v-if="['left', 'right', 'bottom'].includes(props?.side) && (props.close || !!slots.close)">
+            <DialogClose v-if="props.close || !!slots.close" as-child>
+              <slot name="close" :close="close" :b24ui="b24ui">
+                <!-- @todo fix this css -->
+                <B24Button
+                  v-if="props.close"
+                  :icon="closeIcon || icons.close"
+                  class="group"
+                  color="air-primary"
+                  :aria-label="t('slideover.close')"
+                  size="lg"
+                  :b24ui="{
+  leadingIcon: 'group-hover:rounded-full group-hover:border-1 group-hover:border-current',
+  baseLine: 'ps-[4px] pe-[4px]',
+  label: 'hidden sm:flex'
+}"
+                  v-bind="typeof props.close === 'object' ? props.close : {}"
+                  :class="b24ui.close({ class: props.b24ui?.close })"
+                />
+              </slot>
+            </DialogClose>
+          </template>
+          <B24SidebarLayout
+            ref="sidebarRef"
+            :use-light-content="props.useLightContent"
+            is-inner
+            :b24ui="{
+  root: b24ui.sidebarLayoutRoot({ class: props.b24ui?.sidebarLayoutRoot }),
+  header: b24ui.sidebarLayoutHeaderWrapper({ class: props.b24ui?.sidebarLayoutHeaderWrapper }),
+  pageBottomWrapper: b24ui.sidebarLayoutPageBottomWrapper({ class: props.b24ui?.sidebarLayoutPageBottomWrapper })
+}"
+          >
+            <template v-if="!!slots['sidebar']" #sidebar>
+              <slot name="sidebar" :close="close" />
+            </template>
 
-                <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
-                  <slot name="description">
-                    {{ description }}
-                  </slot>
-                </DialogDescription>
-              </div>
+            <template v-if="!!slots['navbar']" #navbar>
+              <slot name="navbar" :close="close" />
+            </template>
 
-              <slot name="actions" />
+            <template v-if="!!slots.header || (title || !!slots.title) || (description || !!slots.description) || ['top'].includes(props?.side) && (props.close || !!slots.close)" #content-top>
+              <div :class="b24ui.header({ class: props.b24ui?.header })">
+                <slot name="header" :close="close">
+                  <div :class="b24ui.wrapper({ class: props.b24ui?.wrapper })">
+                    <DialogTitle v-if="title || !!slots.title" :class="b24ui.title({ class: props.b24ui?.title })">
+                      <slot name="title">
+                        {{ title }}
+                      </slot>
+                    </DialogTitle>
 
-              <DialogClose v-if="props.close || !!slots.close" as-child>
-                <slot name="close" :close="close" :b24ui="b24ui">
-                  <B24Button
-                    v-if="props.close"
-                    :icon="closeIcon || icons.close"
-                    class="group"
-                    :color="['left', 'right'].includes(props?.side) ? 'primary' : 'link'"
-                    :aria-label="t('slideover.close')"
-                    :b24ui="{
-  leadingIcon: ['left', 'right'].includes(props?.side) ? 'group-hover:rounded-full group-hover:border-1 group-hover:border-current' : ''
-}"
-                    v-bind="typeof props.close === 'object' ? props.close : {}"
-                    :class="b24ui.close({ class: props.b24ui?.close })"
-                  />
+                    <DialogDescription v-if="description || !!slots.description" :class="b24ui.description({ class: props.b24ui?.description })">
+                      <slot name="description">
+                        {{ description }}
+                      </slot>
+                    </DialogDescription>
+                  </div>
+                  <template v-if="props.close || !!slots.close">
+                    <DialogClose v-if="props.close || !!slots.close" as-child>
+                      <slot name="close" :close="close" :b24ui="b24ui">
+                        <B24Button
+                          v-if="props.close"
+                          :icon="closeIcon || icons.close"
+                          class="group"
+                          color="air-tertiary-no-accent"
+                          :aria-label="t('slideover.close')"
+                          size="lg"
+                          v-bind="typeof props.close === 'object' ? props.close : {}"
+                          :class="b24ui.close({ class: props.b24ui?.close })"
+                        />
+                      </slot>
+                    </DialogClose>
+                  </template>
                 </slot>
-              </DialogClose>
-            </slot>
-          </div>
+              </div>
+            </template>
+
+            <template v-if="!!slots['actions']" #content-actions>
+              <slot name="actions" />
+            </template>
 
-          <div :class="b24ui.body({ class: props.b24ui?.body, scrollbarThin: Boolean(props.scrollbarThin) })">
-            <slot name="body" :close="close" />
-          </div>
+            <template v-if="!!slots['body']" #default>
+              <div :class="b24ui.body({ class: props.b24ui?.body })">
+                <slot name="body" :close="close" />
+              </div>
+            </template>
 
-          <div v-if="!!slots.footer" :class="b24ui.footer({ class: props.b24ui?.footer })">
-            <slot name="footer" :close="close" />
-          </div>
+            <template v-if="!!slots.footer" #content-bottom>
+              <div :class="b24ui.footer({ class: props.b24ui?.footer })">
+                <slot name="footer" :close="close" />
+              </div>
+            </template>
+          </B24SidebarLayout>
         </slot>
       </DialogContent>
     </DialogPortal>

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

@@ -3,6 +3,7 @@ import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/slideover';
 import type { ButtonProps, IconComponent } from '../types';
 import type { EmitsToProps, ComponentConfig } from '../types/utils';
+import type { SidebarLayoutApi } from '../composables/useSidebarLayout';
 type Slideover = ComponentConfig<typeof theme, AppConfig, 'slideover'>;
 export interface SlideoverProps extends DialogRootProps {
     title?: string;
@@ -19,7 +20,7 @@ export interface SlideoverProps extends DialogRootProps {
     /**
      * Render an overlay blur behind the slideover.
      * `auto` use `motion-safe`.
-     * @defaultValue 'auto'
+     * @defaultValue 'off'
      */
     overlayBlur?: Slideover['variants']['overlayBlur'];
     /**
@@ -29,7 +30,7 @@ export interface SlideoverProps extends DialogRootProps {
     transition?: boolean;
     /**
      * The side of the slideover.
-     * @defaultValue 'right'
+     * @defaultValue 'bottom'
      */
     side?: Slideover['variants']['side'];
     /**
@@ -39,8 +40,8 @@ export interface SlideoverProps extends DialogRootProps {
     portal?: boolean | string | HTMLElement;
     /**
      * Display a close button to dismiss the slideover.
-     * `{ color: 'primary' }`{lang="ts"} for `left`, `right`
-     * `{ color: 'link' }`{lang="ts"} for `top`, `bottom`
+     * `{ color: 'air-primary' }`{lang="ts"} for `left`, `right`, `bottom`
+     * `{ color: 'air-tertiary' }`{lang="ts"} for `top`
      * @defaultValue true
      */
     close?: boolean | Partial<ButtonProps>;
@@ -56,9 +57,10 @@ export interface SlideoverProps extends DialogRootProps {
      */
     dismissible?: boolean;
     /**
-     * @defaultValue true
+     * The content is placed on a light background.
+     * @defaultValue 'true'
      */
-    scrollbarThin?: boolean;
+    useLightContent?: boolean;
     class?: any;
     b24ui?: Slideover['slots'];
 }
@@ -74,6 +76,12 @@ export interface SlideoverSlots {
     content(props: {
         close: () => void;
     }): any;
+    sidebar(props: {
+        close: () => void;
+    }): any;
+    navbar(props: {
+        close: () => void;
+    }): any;
     header(props: {
         close: () => void;
     }): any;
@@ -93,7 +101,12 @@ export interface SlideoverSlots {
         close: () => void;
     }): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+export interface SlideoverInstance {
+    getSidebarApi: () => SidebarLayoutApi | null;
+    setSidebarLoading: (value: boolean) => void;
+    setSidebarRootLoading: (value: boolean) => void;
+}
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverProps, SlideoverInstance, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:open": (value: boolean) => any;
     "after:leave": () => any;
     "after:enter": () => any;
@@ -105,14 +118,14 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SlideoverP
     "onClose:prevent"?: (() => any) | undefined;
 }>, {
     close: boolean | Partial<ButtonProps>;
+    transition: boolean;
     modal: boolean;
     portal: boolean | string | HTMLElement;
     overlay: boolean;
     side: Slideover["variants"]["side"];
     overlayBlur: Slideover["variants"]["overlayBlur"];
-    transition: boolean;
     dismissible: boolean;
-    scrollbarThin: boolean;
+    useLightContent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, SlideoverSlots>;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {

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

@@ -11,7 +11,7 @@ export interface SwitchProps extends Pick<SwitchRootProps, 'disabled' | 'id' | '
      */
     as?: any;
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
     color?: Switch['variants']['color'];
     /**
@@ -57,7 +57,7 @@ export interface SwitchSlots {
 }
 declare const _default: __VLS_WithSlots<import("vue").DefineComponent<SwitchProps & {
     modelValue?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     change: (payload: Event) => any;
     "update:modelValue": (value: boolean) => any;
 }, string, import("vue").PublicProps, Readonly<SwitchProps & {

package/dist/runtime/components/Tabs.vue

@@ -10,10 +10,10 @@ import { useAppConfig } from "#imports";
 import { get } from "../utils";
 import { tv } from "../utils/tv";
 import B24Avatar from "./Avatar.vue";
+import B24Badge from "./Badge.vue";
 const props = defineProps({
   as: { type: null, required: false },
   items: { type: Array, required: false },
-  color: { type: null, required: false },
   variant: { type: null, required: false },
   size: { type: null, required: false },
   orientation: { type: null, required: false, default: "horizontal" },
@@ -34,7 +34,6 @@ const getLabel = (item) => {
   return get(item, props.labelKey);
 };
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.tabs || {} })({
-  color: props.color,
   variant: props.variant,
   size: props.size,
   orientation: props.orientation
@@ -78,7 +77,16 @@ defineExpose({
           <slot :item="item" :index="index">{{ getLabel(item) }}</slot>
         </span>
 
-        <slot name="trailing" :item="item" :index="index" />
+        <slot name="trailing" :item="item" :index="index">
+          <B24Badge
+            v-if="item.badge !== void 0"
+            color="air-primary"
+            variant="outline"
+            :size="item.ui?.trailingBadgeSize || props.b24ui?.trailingBadgeSize || b24ui.trailingBadgeSize()"
+            v-bind="typeof item.badge === 'string' || typeof item.badge === 'number' ? { label: item.badge } : item.badge"
+            :class="b24ui.trailingBadge({ class: [props.b24ui?.trailingBadge, item.b24ui?.trailingBadge] })"
+          />
+        </slot>
       </TabsTrigger>
 
       <slot name="list-trailing" />

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

@@ -2,7 +2,7 @@ import type { ComponentPublicInstance } from 'vue';
 import type { TabsRootProps, TabsRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/tabs';
-import type { AvatarProps, IconComponent } from '../types';
+import type { AvatarProps, BadgeProps, IconComponent } from '../types';
 import type { DynamicSlots, ComponentConfig } from '../types/utils';
 type Tabs = ComponentConfig<typeof theme, AppConfig, 'tabs'>;
 export interface TabsItem {
@@ -12,13 +12,18 @@ export interface TabsItem {
      */
     icon?: IconComponent;
     avatar?: AvatarProps;
+    /**
+     * Display a badge on the item.
+     * `{ size: 'sm', color: 'air-primary' }`{lang="ts"}
+     */
+    badge?: string | number | BadgeProps;
     slot?: string;
     content?: string;
     /** A unique value for the tab item. Defaults to the index. */
     value?: string | number;
     disabled?: boolean;
     class?: any;
-    b24ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatarSize' | 'leadingAvatar' | 'label' | 'content'>;
+    b24ui?: Pick<Tabs['slots'], 'trigger' | 'leadingIcon' | 'leadingAvatar' | 'leadingAvatarSize' | 'label' | 'trailingBadge' | 'trailingBadgeSize' | 'content'>;
     [key: string]: any;
 }
 export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootProps<string | number>, 'defaultValue' | 'modelValue' | 'activationMode' | 'unmountOnHide'> {
@@ -28,10 +33,6 @@ export interface TabsProps<T extends TabsItem = TabsItem> extends Pick<TabsRootP
      */
     as?: any;
     items?: T[];
-    /**
-     * @defaultValue 'default'
-     */
-    color?: Tabs['variants']['color'];
     /**
      * @defaultValue 'link'
      */
@@ -89,5 +90,5 @@ declare const _default: <T extends TabsItem>(__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/Textarea.vue

@@ -11,6 +11,7 @@ import { useComponentIcons } from "../composables/useComponentIcons";
 import { useFormField } from "../composables/useFormField";
 import { looseToNumber } from "../utils";
 import { tv } from "../utils/tv";
+import B24Badge from "./Badge.vue";
 import B24Avatar from "./Avatar.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
@@ -59,7 +60,6 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.textare
   loading: props.loading,
   highlight: highlight.value,
   autoresize: Boolean(props.autoresize),
-  tagColor: props.tagColor,
   rounded: Boolean(props.rounded),
   noPadding: Boolean(props.noPadding),
   noBorder: Boolean(props.noBorder),
@@ -143,9 +143,13 @@ defineExpose({
 
 <template>
   <Primitive :as="as" :class="b24ui.root({ class: [props.b24ui?.root, props.class] })">
-    <div v-if="isTag" :class="b24ui.tag({ class: props.b24ui?.tag })">
-      {{ props.tag }}
-    </div>
+    <B24Badge
+      v-if="isTag"
+      :class="b24ui.tag({ class: props.b24ui?.tag })"
+      :color="props.tagColor"
+      :label="props.tag"
+      size="xs"
+    />
 
     <textarea
       :id="id"

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

@@ -1,6 +1,7 @@
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/textarea';
 import type { UseComponentIconsProps } from '../composables/useComponentIcons';
+import type { BadgeProps } from '../types';
 import type { ComponentConfig } from '../types/utils';
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>;
 type TextareaValue = string | number | null;
@@ -17,7 +18,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
      */
     placeholder?: string;
     /**
-     * @defaultValue 'primary'
+     * @defaultValue 'air-primary'
      */
     color?: Textarea['variants']['color'];
     /**
@@ -76,7 +77,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     /**
      * @defaultValue 'primary'
      */
-    tagColor?: Textarea['variants']['tagColor'];
+    tagColor?: BadgeProps['color'];
     /**
      * Highlight the ring color like a focus state
      * @defaultValue false
@@ -95,9 +96,9 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
     b24ui?: Textarea['slots'];
 }
 export interface TextareaEmits<T extends TextareaValue = TextareaValue> {
-    (e: 'update:modelValue', payload: T): void;
-    (e: 'blur', event: FocusEvent): void;
-    (e: 'change', event: Event): void;
+    'update:modelValue': [payload: T];
+    'blur': [event: FocusEvent];
+    'change': [event: Event];
 }
 export interface TextareaSlots {
     leading(props?: {}): any;
@@ -115,11 +116,11 @@ declare const _default: <T extends TextareaValue>(__VLS_props: NonNullable<Await
     }>): void;
     attrs: any;
     slots: TextareaSlots;
-    emit: TextareaEmits<T>;
+    emit: ((evt: "blur", event: FocusEvent) => void) & ((evt: "change", event: Event) => void) & ((evt: "update:modelValue", payload: T) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };
 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/Toast.vue

@@ -12,6 +12,7 @@ import { tv } from "../utils/tv";
 import icons from "../dictionary/icons";
 import B24Avatar from "./Avatar.vue";
 import B24Button from "./Button.vue";
+import B24Progress from "./Progress.vue";
 const props = defineProps({
   as: { type: null, required: false },
   title: { type: [String, Object, Function], required: false },
@@ -20,10 +21,10 @@ const props = defineProps({
   avatar: { type: Object, required: false },
   color: { type: null, required: false },
   orientation: { type: null, required: false, default: "vertical" },
-  progress: { type: Boolean, required: false, default: true },
-  actions: { type: Array, required: false },
   close: { type: [Boolean, Object], required: false, default: true },
   closeIcon: { type: [Function, Object], required: false },
+  actions: { type: Array, required: false },
+  progress: { type: [Boolean, Object], required: false, default: true },
   class: { type: null, required: false },
   b24ui: { type: null, required: false },
   defaultOpen: { type: Boolean, required: false },
@@ -59,7 +60,7 @@ defineExpose({
 <template>
   <ToastRoot
     ref="el"
-    v-slot="{ remaining, duration }"
+    v-slot="{ remaining, duration, open }"
     v-bind="rootProps"
     :data-orientation="orientation"
     :class="b24ui.root({ class: [props.b24ui?.root, props.class] })"
@@ -97,7 +98,7 @@ defineExpose({
       <div v-if="orientation === 'vertical' && (actions?.length || !!slots.actions)" :class="b24ui.actions({ class: props.b24ui?.actions })">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
-            <B24Button size="xs" :color="color" v-bind="action" />
+            <B24Button size="sm" :color="color" v-bind="action" />
           </ToastAction>
         </slot>
       </div>
@@ -107,7 +108,7 @@ defineExpose({
       <template v-if="orientation === 'horizontal' && (actions?.length || !!slots.actions)">
         <slot name="actions">
           <ToastAction v-for="(action, index) in actions" :key="index" :alt-text="action.label || 'Action'" as-child @click.stop>
-            <B24Button size="xs" :color="color" v-bind="action" />
+            <B24Button size="sm" :color="color" v-bind="action" />
           </ToastAction>
         </slot>
       </template>
@@ -117,8 +118,8 @@ defineExpose({
           <B24Button
             v-if="close"
             :icon="closeIcon || icons.close"
-            size="xs"
-            color="link"
+            size="sm"
+            color="air-tertiary"
             :aria-label="t('toast.close')"
             v-bind="typeof close === 'object' ? close : {}"
             :class="b24ui.close({ class: props.b24ui?.close })"
@@ -128,6 +129,13 @@ defineExpose({
       </ToastClose>
     </div>
 
-    <div v-if="progress && remaining > 0 && duration" :class="b24ui.progress({ class: props.b24ui?.progress })" :style="{ width: `${remaining / duration * 100}%` }" />
+    <B24Progress
+      v-if="progress && open && remaining > 0 && duration"
+      :model-value="remaining / duration * 100"
+      :color="color"
+      v-bind="typeof progress === 'object' ? progress : {}"
+      size="sm"
+      :class="b24ui.progress({ class: props.b24ui?.progress })"
+    />
   </ToastRoot>
 </template>

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

@@ -1,7 +1,7 @@
 import type { ToastRootProps, ToastRootEmits } from 'reka-ui';
 import type { AppConfig } from '@nuxt/schema';
 import theme from '#build/b24ui/toast';
-import type { AvatarProps, ButtonProps, IconComponent } from '../types';
+import type { AvatarProps, ButtonProps, ProgressProps, IconComponent } from '../types';
 import type { StringOrVNode, ComponentConfig } from '../types/utils';
 type Toast = ComponentConfig<typeof theme, AppConfig, 'toast'>;
 export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open' | 'type' | 'duration'> {
@@ -18,7 +18,7 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
     icon?: IconComponent;
     avatar?: AvatarProps;
     /**
-     * @defaultValue 'default'
+     * @defaultValue 'air-secondary-no-accent'
      */
     color?: Toast['variants']['color'];
     /**
@@ -27,29 +27,30 @@ export interface ToastProps extends Pick<ToastRootProps, 'defaultOpen' | 'open'
      */
     orientation?: Toast['variants']['orientation'];
     /**
-     * Whether to show the progress bar.
+     * Display a close button to dismiss the toast.
+     * `{ size: 'sm', color: 'air-tertiary' }`{lang="ts"}
      * @defaultValue true
      */
-    progress?: boolean;
+    close?: boolean | Partial<ButtonProps>;
+    /**
+     * The icon displayed in the close button.
+     * @defaultValue icons.close
+     * @IconComponent
+     */
+    closeIcon?: IconComponent;
     /**
      * 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 toast.
-     * `{ size: 'md', color: 'neutral', variant: 'link' }`{lang="ts"}
+     * Display a progress bar showing the toast's remaining duration.
+     * `{ size: 'sm' }`{lang="ts"}
      * @defaultValue true
      */
-    close?: boolean | Partial<ButtonProps>;
-    /**
-     * The icon displayed in the close button.
-     * @defaultValue icons.close
-     * @IconComponent
-     */
-    closeIcon?: IconComponent;
+    progress?: boolean | Pick<ProgressProps, 'color' | 'b24ui'>;
     class?: any;
     b24ui?: Toast['slots'];
 }
@@ -152,7 +153,7 @@ declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToastProps
     }>, "currentTarget">) => any) | undefined;
 }>, {
     close: boolean | Partial<ButtonProps>;
-    progress: boolean;
+    progress: boolean | Pick<ProgressProps, "color" | "b24ui">;
     orientation: Toast["variants"]["orientation"];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToastSlots>;
 export default _default;

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

@@ -34,10 +34,10 @@ export interface ToasterProps extends Omit<ToastProviderProps, 'swipeDirection'>
 export interface ToasterSlots {
     default(props?: {}): any;
 }
-declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
+declare const _default: __VLS_WithSlots<import("vue").DefineComponent<ToasterProps, void, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ToasterProps> & Readonly<{}>, {
     progress: boolean;
-    position: Toaster["variants"]["position"];
     duration: number;
+    position: Toaster["variants"]["position"];
     expand: boolean;
     portal: boolean | string | HTMLElement;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ToasterSlots>;