@bitrix24/b24ui-nuxt 2.3.0 → 2.4.0

package/dist/runtime/components/DashboardGroup.vue

@@ -3,45 +3,49 @@ import theme from "#build/b24ui/dashboard-group";
 </script>
 
 <script setup>
-import { ref, computed, useId } from "vue";
+import { ref, computed } from "vue";
 import { Primitive } from "reka-ui";
 import { useNuxtApp, useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { provideDashboardContext } from "../utils/dashboard";
 import { tv } from "../utils/tv";
 const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
-  id: { type: String, required: false },
+  b24ui: { type: Object, required: false },
   storage: { type: String, required: false, default: "cookie" },
-  storageKey: { type: String, required: false, default: "dashboard" }
+  storageKey: { type: String, required: false, default: "dashboard" },
+  persistent: { type: Boolean, required: false, default: true },
+  unit: { type: String, required: false, default: "px" }
 });
 defineSlots();
 const nuxtApp = useNuxtApp();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardGroup", props);
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardGroup || {} }));
 const sidebarOpen = ref(false);
-const isLoading = ref(false);
-const contextId = `${props.storage}-sidebar-group-${props.id || useId()}`;
+const sidebarCollapsed = ref(false);
 provideDashboardContext({
-  contextId,
   storage: props.storage,
   storageKey: props.storageKey,
+  persistent: props.persistent,
+  unit: props.unit,
   sidebarOpen,
   toggleSidebar: () => {
     nuxtApp.hooks.callHook("dashboard:sidebar:toggle");
   },
+  sidebarCollapsed,
+  collapseSidebar: (collapsed) => {
+    nuxtApp.hooks.callHook("dashboard:sidebar:collapse", collapsed);
+  },
   toggleSearch: () => {
     nuxtApp.hooks.callHook("dashboard:search:toggle");
-  },
-  isLoading,
-  load: (load, contextId2) => {
-    nuxtApp.hooks.callHook("dashboard:content:load", load, contextId2);
   }
 });
 </script>
 
 <template>
-  <Primitive :as="as" :class="b24ui({ class: props.class })">
+  <Primitive :as="as" :class="b24ui({ class: [uiProp?.base, props.class] })">
     <slot />
   </Primitive>
 </template>

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

@@ -1,11 +1,14 @@
-import type { UseLoadingProps } from '../composables/useLoading';
-export interface DashboardGroupProps extends Pick<UseLoadingProps, 'id' | 'storage' | 'storageKey'> {
+import type { UseResizableProps } from '../composables/useResizable';
+export interface DashboardGroupProps extends Pick<UseResizableProps, 'storage' | 'storageKey' | 'persistent' | 'unit'> {
     /**
      * The element or component this component should render as.
      * @defaultValue 'div'
      */
     as?: any;
     class?: any;
+    b24ui?: {
+        base?: any;
+    };
 }
 export interface DashboardGroupSlots {
     default(props?: {}): any;
@@ -15,6 +18,8 @@ export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardGroupProps> & Readonly<{}>, {
     storage: "cookie" | "local";
     storageKey: string;
+    persistent: boolean;
+    unit: "%" | "rem" | "px";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardGroupSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,59 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-navbar';
+import type { DashboardContext } from '../utils/dashboard';
+import type { ButtonProps, IconComponent, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>;
+export interface DashboardNavbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed next to the title.
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    title?: string;
+    /**
+     * Customize the toggle button to open the sidebar.
+     * `{ color: 'air-tertiary', size: 'md' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    b24ui?: DashboardNavbar['slots'];
+}
+type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
+export interface DashboardNavbarSlots {
+    title(props?: {}): any;
+    leading(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+    trailing(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+    left(props: DashboardNavbarSlotsProps): any;
+    default(props: DashboardNavbarSlotsProps): any;
+    right(props: DashboardNavbarSlotsProps): any;
+    toggle(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
+    toggle: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardNavbar.vue

@@ -0,0 +1,79 @@
+<script>
+import theme from "#build/b24ui/dashboard-navbar";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { createReusableTemplate } from "@vueuse/core";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import B24DashboardSidebarToggle from "./DashboardSidebarToggle.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  as: { type: null, required: false },
+  icon: { type: [Function, Object], required: false },
+  title: { type: String, required: false },
+  toggle: { type: [Boolean, Object], required: false, default: true },
+  toggleSide: { type: String, required: false, default: "left" },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+const slots = defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardNavbar", props);
+const dashboardContext = useDashboard({});
+const [DefineToggleTemplate, ReuseToggleTemplate] = createReusableTemplate();
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardNavbar || {} })());
+</script>
+
+<template>
+  <DefineToggleTemplate>
+    <slot name="toggle" v-bind="{ ...dashboardContext, b24ui }">
+      <B24DashboardSidebarToggle
+        v-if="toggle"
+        v-bind="typeof toggle === 'object' ? toggle : {}"
+        :side="toggleSide"
+        data-slot="toggle"
+        :class="b24ui.toggle({ class: uiProp?.toggle, toggleSide })"
+      />
+    </slot>
+  </DefineToggleTemplate>
+
+  <Primitive :as="as" v-bind="$attrs" data-slot="root" :class="b24ui.root({ class: [uiProp?.root, props.class] })">
+    <div data-slot="left" :class="b24ui.left({ class: uiProp?.left })">
+      <ReuseToggleTemplate v-if="toggleSide === 'left'" />
+
+      <slot name="left" v-bind="dashboardContext">
+        <slot name="leading" v-bind="{ ...dashboardContext, b24ui }">
+          <Component
+            :is="icon"
+            v-if="icon"
+            data-slot="icon"
+            :class="b24ui.icon({ class: uiProp?.icon })"
+          />
+        </slot>
+
+        <h1 data-slot="title" :class="b24ui.title({ class: uiProp?.title })">
+          <slot name="title">
+            {{ title }}
+          </slot>
+        </h1>
+
+        <slot name="trailing" v-bind="{ ...dashboardContext, b24ui }" />
+      </slot>
+    </div>
+
+    <div v-if="!!slots.default" data-slot="center" :class="b24ui.center({ class: uiProp?.center })">
+      <slot v-bind="dashboardContext" />
+    </div>
+
+    <div data-slot="right" :class="b24ui.right({ class: uiProp?.right })">
+      <slot name="right" v-bind="dashboardContext" />
+
+      <ReuseToggleTemplate v-if="toggleSide === 'right'" />
+    </div>
+  </Primitive>
+</template>

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

@@ -0,0 +1,59 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-navbar';
+import type { DashboardContext } from '../utils/dashboard';
+import type { ButtonProps, IconComponent, LinkPropsKeys } from '../types';
+import type { ComponentConfig } from '../types/tv';
+type DashboardNavbar = ComponentConfig<typeof theme, AppConfig, 'dashboardNavbar'>;
+export interface DashboardNavbarProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    /**
+     * The icon displayed next to the title.
+     * @IconComponent
+     */
+    icon?: IconComponent;
+    title?: string;
+    /**
+     * Customize the toggle button to open the sidebar.
+     * `{ color: 'air-tertiary', size: 'md' }`{lang="ts-type"}
+     * @defaultValue true
+     */
+    toggle?: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    /**
+     * The side to render the toggle button on.
+     * @defaultValue 'left'
+     */
+    toggleSide?: 'left' | 'right';
+    class?: any;
+    b24ui?: DashboardNavbar['slots'];
+}
+type DashboardNavbarSlotsProps = Omit<DashboardContext, 'storage' | 'storageKey' | 'persistent' | 'unit'>;
+export interface DashboardNavbarSlots {
+    title(props?: {}): any;
+    leading(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+    trailing(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+    left(props: DashboardNavbarSlotsProps): any;
+    default(props: DashboardNavbarSlotsProps): any;
+    right(props: DashboardNavbarSlotsProps): any;
+    toggle(props: DashboardNavbarSlotsProps & {
+        b24ui: DashboardNavbar['b24ui'];
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardNavbarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardNavbarProps> & Readonly<{}>, {
+    toggle: boolean | Omit<ButtonProps, LinkPropsKeys>;
+    toggleSide: "left" | "right";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardNavbarSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,31 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-panel';
+import type { UseResizableProps } from '../composables/useResizable';
+import type { ComponentConfig } from '../types/tv';
+type DashboardPanel = ComponentConfig<typeof theme, AppConfig, 'dashboardPanel'>;
+export interface DashboardPanelProps extends Pick<UseResizableProps, 'id' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable'> {
+    class?: any;
+    b24ui?: DashboardPanel['slots'];
+}
+export interface DashboardPanelSlots {
+    'default'(props?: {}): any;
+    'header'(props?: {}): any;
+    'body'(props?: {}): any;
+    'footer'(props?: {}): any;
+    'resize-handle'(props: {
+        onMouseDown: (e: MouseEvent) => void;
+        onTouchStart: (e: TouchEvent) => void;
+        onDoubleClick: (e: MouseEvent) => void;
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
+    minSize: number;
+    resizable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardPanel.vue

@@ -0,0 +1,66 @@
+<script>
+import theme from "#build/b24ui/dashboard-panel";
+</script>
+
+<script setup>
+import { computed, useId, toRef } from "vue";
+import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
+import { useResizable } from "../composables/useResizable";
+import { useDashboard } from "../utils/dashboard";
+import { tv } from "../utils/tv";
+import B24DashboardResizeHandle from "./DashboardResizeHandle.vue";
+defineOptions({ inheritAttrs: false });
+const props = defineProps({
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false },
+  id: { type: String, required: false },
+  minSize: { type: Number, required: false, default: 200 },
+  maxSize: { type: Number, required: false },
+  defaultSize: { type: Number, required: false },
+  resizable: { type: Boolean, required: false, default: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardPanel", props);
+const dashboardContext = useDashboard({ storageKey: "dashboard", unit: "px" });
+const id = `${dashboardContext.storageKey}-panel-${props.id || useId()}`;
+const { el, size, isDragging, onMouseDown, onTouchStart, onDoubleClick } = useResizable(id, toRef(() => ({ ...dashboardContext, ...props })));
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardPanel || {} })({
+  size: !!size.value
+}));
+</script>
+
+<template>
+  <div
+    :id="id"
+    ref="el"
+    v-bind="$attrs"
+    :data-dragging="isDragging"
+    data-slot="root"
+    :class="b24ui.root({ class: [uiProp?.root, props.class] })"
+    :style="[size ? { '--width': `${size}${dashboardContext.unit}` } : void 0]"
+  >
+    <slot>
+      <slot name="header" />
+
+      <div data-slot="body" :class="b24ui.body({ class: uiProp?.body })">
+        <slot name="body" />
+      </div>
+
+      <slot name="footer" />
+    </slot>
+  </div>
+
+  <slot name="resize-handle" :on-mouse-down="onMouseDown" :on-touch-start="onTouchStart" :on-double-click="onDoubleClick">
+    <B24DashboardResizeHandle
+      v-if="resizable"
+      :aria-controls="id"
+      data-slot="handle"
+      :class="b24ui.handle({ class: uiProp?.handle })"
+      @mousedown="onMouseDown"
+      @touchstart="onTouchStart"
+      @dblclick="onDoubleClick"
+    />
+  </slot>
+</template>

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

@@ -0,0 +1,31 @@
+import type { AppConfig } from '@nuxt/schema';
+import theme from '#build/b24ui/dashboard-panel';
+import type { UseResizableProps } from '../composables/useResizable';
+import type { ComponentConfig } from '../types/tv';
+type DashboardPanel = ComponentConfig<typeof theme, AppConfig, 'dashboardPanel'>;
+export interface DashboardPanelProps extends Pick<UseResizableProps, 'id' | 'minSize' | 'maxSize' | 'defaultSize' | 'resizable'> {
+    class?: any;
+    b24ui?: DashboardPanel['slots'];
+}
+export interface DashboardPanelSlots {
+    'default'(props?: {}): any;
+    'header'(props?: {}): any;
+    'body'(props?: {}): any;
+    'footer'(props?: {}): any;
+    'resize-handle'(props: {
+        onMouseDown: (e: MouseEvent) => void;
+        onTouchStart: (e: TouchEvent) => void;
+        onDoubleClick: (e: MouseEvent) => void;
+    }): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardPanelProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardPanelProps> & Readonly<{}>, {
+    minSize: number;
+    resizable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardPanelSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,22 @@
+export interface DashboardResizeHandleProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: {
+        base?: any;
+    };
+}
+export interface DashboardResizeHandleSlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardResizeHandleSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -0,0 +1,30 @@
+<script>
+import theme from "#build/b24ui/dashboard-resize-handle";
+</script>
+
+<script setup>
+import { computed } from "vue";
+import { Primitive } from "reka-ui";
+import { useAppConfig } from "#imports";
+import { tv } from "../utils/tv";
+import { useComponentUI } from "../composables/useComponentUI";
+const props = defineProps({
+  as: { type: null, required: false },
+  class: { type: null, required: false },
+  b24ui: { type: Object, required: false }
+});
+defineSlots();
+const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardResizeHandle", props);
+const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardResizeHandle || {} }));
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    role="separator"
+    :class="b24ui({ class: [uiProp?.base, props.class] })"
+  >
+    <slot />
+  </Primitive>
+</template>

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

@@ -0,0 +1,22 @@
+export interface DashboardResizeHandleProps {
+    /**
+     * The element or component this component should render as.
+     * @defaultValue 'div'
+     */
+    as?: any;
+    class?: any;
+    b24ui?: {
+        base?: any;
+    };
+}
+export interface DashboardResizeHandleSlots {
+    default(props?: {}): any;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardResizeHandleProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardResizeHandleProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, DashboardResizeHandleSlots>;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/DashboardSearch.vue

@@ -8,6 +8,7 @@ import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactivePick } from "@vueuse/core";
 import { useAppConfig, useColorMode, defineShortcuts, useRuntimeHook } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { omit, transformUI } from "../utils";
 import { tv } from "../utils/tv";
@@ -47,6 +48,7 @@ useRuntimeHook("dashboard:search:toggle", () => {
 const { t } = useLocale();
 const colorMode = useColorMode();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSearch", props);
 const commandPaletteProps = useForwardProps(reactivePick(props, "size", "icon", "placeholder", "autofocus", "loading", "close", "closeIcon"));
 const modalProps = useForwardProps(reactivePick(props, "overlay", "transition", "content", "dismissible", "fullscreen", "modal", "portal"));
 const getProxySlots = () => omit(slots, ["content"]);
@@ -120,7 +122,7 @@ defineExpose({
     :description="description || t('dashboardSearch.description')"
     v-bind="modalProps"
     data-slot="modal"
-    :class="b24ui.modal({ class: [props.b24ui?.modal, props.class] })"
+    :class="b24ui.modal({ class: [uiProp?.modal, props.class] })"
   >
     <template #content="contentData">
       <slot name="content" v-bind="contentData">
@@ -130,7 +132,8 @@ defineExpose({
           v-bind="commandPaletteProps"
           :groups="groups"
           :fuse="fuse"
-          :b24ui="transformUI(omit(b24ui, ['modal']), props.b24ui)"
+          :input="{ fixed: true }"
+          :b24ui="transformUI(omit(b24ui, ['modal']), uiProp)"
           @update:model-value="onSelect"
           @update:open="open = $event"
         >

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

@@ -42,10 +42,10 @@ export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsK
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
-    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    collapsed: boolean;
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
-    collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/runtime/components/DashboardSearchButton.vue

@@ -8,6 +8,7 @@ import { useForwardProps } from "reka-ui";
 import { defu } from "defu";
 import { reactiveOmit, createReusableTemplate } from "@vueuse/core";
 import { useAppConfig } from "#imports";
+import { useComponentUI } from "../composables/useComponentUI";
 import { useLocale } from "../composables/useLocale";
 import { useDashboard } from "../utils/dashboard";
 import { omit, transformUI } from "../utils";
@@ -54,6 +55,7 @@ const buttonProps = useForwardProps(reactiveOmit(props, "icon", "label", "collap
 const tooltipProps = toRef(() => defu(typeof props.tooltip === "boolean" ? {} : props.tooltip, { delayDuration: 0, content: { side: "right" } }));
 const { t } = useLocale();
 const appConfig = useAppConfig();
+const uiProp = useComponentUI("dashboardSearchButton", props);
 const { toggleSearch } = useDashboard({ toggleSearch: () => {
 } });
 const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboardSearchButton || {} })({
@@ -68,16 +70,17 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboa
       :label="label || t('dashboardSearchButton.label')"
       v-bind="{
   ...buttonProps,
-  ...collapsed ? {
+  ...props.collapsed ? {
+    'label': void 0,
     'aria-label': label || t('dashboardSearchButton.label')
   } : {
-    color: 'air-secondary-no-accent'
+    color: buttonProps['color'] === 'air-tertiary-no-accent' ? 'air-secondary-no-accent' : buttonProps['color']
   },
   ...$attrs
 }"
       data-slot="base"
-      :class="b24ui.base({ class: [props.b24ui?.base, props.class] })"
-      :b24ui="transformUI(b24ui, props.b24ui)"
+      :class="b24ui.base({ class: [uiProp?.base, props.class] })"
+      :b24ui="transformUI(b24ui, uiProp)"
       @click="toggleSearch"
     >
       <template v-for="(_, name) in getProxySlots()" #[name]="slotData">
@@ -85,12 +88,13 @@ const b24ui = computed(() => tv({ extend: tv(theme), ...appConfig.b24ui?.dashboa
       </template>
 
       <template #trailing="{ b24ui: b24uiProxy }">
-        <div data-slot="trailing" :class="b24ui.trailing({ class: props.b24ui?.trailing })">
+        <div data-slot="trailing" :class="b24ui.trailing({ class: uiProp?.trailing })">
           <slot name="trailing" :b24ui="b24uiProxy">
-            <template v-if="kbds?.length">
+            <template v-if="!collapsed && kbds?.length">
               <B24Kbd
                 v-for="(kbd, index) in kbds"
                 :key="index"
+                size="sm"
                 v-bind="typeof kbd === 'string' ? { value: kbd } : kbd"
               />
             </template>

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

@@ -42,10 +42,10 @@ export interface DashboardSearchButtonProps extends Omit<ButtonProps, LinkPropsK
 declare const _default: typeof __VLS_export;
 export default _default;
 declare const __VLS_export: __VLS_WithSlots<import("vue").DefineComponent<DashboardSearchButtonProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<DashboardSearchButtonProps> & Readonly<{}>, {
-    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-accent" | "air-secondary-accent-1" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-secondary-alert" | "air-secondary-accent-2" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-selection" | "air-boost";
+    color: "link" | "air-primary" | "air-primary-success" | "air-primary-alert" | "air-primary-copilot" | "air-secondary" | "air-secondary-alert" | "air-secondary-accent" | "air-secondary-accent-1" | "air-secondary-accent-2" | "air-tertiary" | "default" | "danger" | "success" | "warning" | "primary" | "secondary" | "collab" | "ai" | "air-selection" | "air-secondary-no-accent" | "air-tertiary-accent" | "air-tertiary-no-accent" | "air-boost";
+    collapsed: boolean;
     tooltip: boolean | TooltipProps;
     kbds: KbdProps["value"][] | KbdProps[];
-    collapsed: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>, ButtonSlots>;
 type __VLS_WithSlots<T, S> = T & {
     new (): {