@xleddyl/443-components-vue 0.2.3 → 0.4.0

package/dist/components/overlays/Popover.vue.d.ts

@@ -2,13 +2,13 @@ import type { OverlayPlacement } from './types';
 declare var __VLS_1: {
     open: boolean;
     close: () => void;
-}, __VLS_3: {
+}, __VLS_9: {
     close: () => void;
 };
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 } & {
-    content?: (props: typeof __VLS_3) => any;
+    content?: (props: typeof __VLS_9) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     placement?: OverlayPlacement;
@@ -25,7 +25,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -137,7 +136,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -174,6 +173,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -209,7 +209,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
 }, {
     show: () => void;
     hide: () => void;
@@ -231,7 +231,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     'aria-label'?: string | undefined | undefined;
     'aria-hidden'?: (boolean | "true" | "false") | undefined;
@@ -343,7 +342,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -380,6 +379,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -415,7 +415,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     is?: string | undefined | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
-    popover?: (import("../..").PopoverMode | "" | boolean) | undefined;
+    popover?: (import("../../index.ts").PopoverMode | "" | boolean) | undefined;
 }> & Readonly<{
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
 }>, {

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

@@ -11,9 +11,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     hotkey?: string | false;
     key?: PropertyKey | undefined;
     style?: import("vue").StyleValue;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     to?: string | import("vue").RendererElement | null | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined;
     ref_key?: string | undefined;
     disabled?: boolean;
@@ -77,7 +77,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -222,9 +222,9 @@ declare const __VLS_export: import("vue").DefineComponent<{
     hotkey?: string | false;
     key?: PropertyKey | undefined;
     style?: import("vue").StyleValue;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     to?: string | import("vue").RendererElement | null | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined;
     ref_key?: string | undefined;
     disabled?: boolean;
@@ -288,7 +288,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/components/overlays/Tooltip.vue.d.ts

@@ -69,7 +69,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -270,7 +270,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/components/overlays/types.d.ts

@@ -2,7 +2,9 @@ import type { LinkTarget } from '../core/types';
 import type { IconName } from '../../composables/useIcons';
 import type { Placement, Side } from '../../internal/floating/position';
 export type { Placement as OverlayPlacement, Side as OverlaySide };
-export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fit';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full' | 'fit' | 'fullscreen';
+export type DialogCloseReason = 'escape' | 'backdrop' | 'close-button' | 'action';
+export type DialogBeforeClose = (reason: DialogCloseReason) => boolean | Promise<boolean>;
 export type ToasterPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 export interface ToasterOptions {
     position?: ToasterPosition;
@@ -58,7 +60,7 @@ export interface MenuSeparator {
 export type MenuItem = MenuActionItem | MenuCheckboxItem | MenuRadioItem;
 export type MenuEntry = MenuItem | MenuLabel | MenuSeparator;
 export type MenuItems = MenuEntry[] | MenuEntry[][];
-export interface CommandItem {
+export interface CommandItem<T = unknown> {
     id: string;
     label: string;
     description?: string;
@@ -68,10 +70,14 @@ export interface CommandItem {
     to?: LinkTarget;
     href?: string;
     disabled?: boolean;
-    onSelect?: (item: CommandItem) => void;
+    data?: T;
+    onSelect?: (item: CommandItem<T>) => void;
 }
-export interface CommandGroup {
+export interface CommandGroup<T = unknown> {
     id: string;
     label?: string;
-    items: CommandItem[];
+    description?: string;
+    items: CommandItem<T>[];
 }
+export type CommandSearch<T = unknown> = (query: string, signal: AbortSignal) => CommandGroup<T>[] | Promise<CommandGroup<T>[]>;
+export type CommandEmptyText = string | ((query: string) => string);

package/dist/components/templates/AccountMenu.vue.d.ts

@@ -17,8 +17,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    type?: "submit" | "reset" | "button" | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -120,6 +118,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -130,7 +129,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -167,6 +166,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;
@@ -231,8 +231,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined | undefined;
-    type?: "submit" | "reset" | "button" | undefined | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -334,6 +332,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     color?: string | undefined | undefined;
     id?: string | undefined | undefined;
     lang?: string | undefined | undefined;
+    type?: "submit" | "reset" | "button" | undefined | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -344,7 +343,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -381,6 +380,7 @@ declare const __VLS_export: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined | undefined;

package/dist/components/templates/AppearanceSettings.vue.d.ts

@@ -66,7 +66,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -266,7 +266,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/components/templates/AuthLayout.vue.d.ts

@@ -89,7 +89,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -296,7 +296,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-colindex'?: (string | number) | undefined;
     'aria-colspan'?: (string | number) | undefined;
     'aria-controls'?: string | undefined | undefined;
-    'aria-current'?: "page" | "location" | "time" | (boolean | "true" | "false") | "step" | "date" | undefined;
+    'aria-current'?: "page" | "time" | (boolean | "true" | "false") | "step" | "location" | "date" | undefined;
     'aria-describedby'?: string | undefined | undefined;
     'aria-details'?: string | undefined | undefined;
     'aria-disabled'?: (boolean | "true" | "false") | undefined;

package/dist/components/templates/Brand.vue

@@ -6,7 +6,22 @@
       class="k-brand"
       :class="[`k-brand-${size}`, { 'is-link': isLink, 'is-accent': accent }]"
    >
-      <img v-if="logo" class="k-brand-logo" :src="logo" :alt="name ?? ''" />
+      <span v-if="$slots.logo" class="k-brand-logo is-slot" v-bind="logoAttrs">
+         <slot name="logo" />
+      </span>
+      <span
+         v-else-if="logoSvg !== void 0"
+         class="k-brand-logo is-svg"
+         v-bind="logoAttrs"
+         v-html="logoSvg"
+      />
+      <component :is="logo" v-else-if="logoComponent" class="k-brand-logo" v-bind="logoAttrs" />
+      <img
+         v-else-if="logo"
+         class="k-brand-logo"
+         :src="logoUrl"
+         :alt="showText ? '' : name ?? ''"
+      />
       <span v-else class="k-brand-mark" aria-hidden="true">
          <slot name="mark">
             <Icon v-if="icon" :name="icon" />
@@ -34,25 +49,39 @@ const props = defineProps({
   name: { type: String, required: false },
   subtitle: { type: String, required: false },
   icon: { type: null, required: false },
-  logo: { type: String, required: false },
+  logo: { type: null, required: false },
   to: { type: [String, Object], required: false },
   href: { type: String, required: false },
   size: { type: String, required: false, default: "md" },
   accent: { type: Boolean, required: false },
-  hideText: { type: Boolean, required: false }
+  hideText: { type: Boolean, required: false },
+  showName: { type: Boolean, required: false }
 });
 const slots = useSlots();
 const { resolveLink } = useLinkResolver();
 const link = computed(() => resolveLink(props));
 const isLink = computed(() => link.value !== null);
 const tag = computed(() => link.value?.is ?? "span");
+const hasLogo = computed(() => Boolean(props.logo || slots.logo));
+const logoSvg = computed(
+  () => typeof props.logo === "string" && props.logo.trimStart().startsWith("<svg") ? props.logo : void 0
+);
+const logoUrl = computed(
+  () => typeof props.logo === "string" && logoSvg.value === void 0 ? props.logo : void 0
+);
+const logoComponent = computed(
+  () => props.logo && typeof props.logo !== "string" ? props.logo : void 0
+);
+const logoAttrs = computed(
+  () => showText.value || !props.name ? { "aria-hidden": "true" } : { role: "img", "aria-label": props.name }
+);
 const linkAttrs = computed(() => {
   if (!link.value) return {};
-  const label = showText.value || props.logo ? void 0 : props.name;
+  const label = showText.value || hasLogo.value ? void 0 : props.name;
   return { ...link.value.attrs, "aria-label": label };
 });
 const initial = computed(() => (props.name ?? "").trim().charAt(0).toUpperCase());
 const showText = computed(
-  () => !props.hideText && !props.logo && Boolean(props.name || slots.default)
+  () => !props.hideText && (!hasLogo.value || props.showName) && Boolean(props.name || slots.default)
 );
 </script>

package/dist/components/templates/Brand.vue.d.ts

@@ -1,24 +1,28 @@
+import type { Component } from 'vue';
 import type { IconName } from '../../composables/useIcons';
-import type { BrandSize } from './types';
+import type { BrandLogo, BrandSize } from './types';
 import type { LinkTarget } from '../core/types';
-declare var __VLS_7: {}, __VLS_14: {}, __VLS_16: {};
+declare var __VLS_7: {}, __VLS_14: {}, __VLS_21: {}, __VLS_23: {};
 type __VLS_Slots = {} & {
-    mark?: (props: typeof __VLS_7) => any;
+    logo?: (props: typeof __VLS_7) => any;
 } & {
-    default?: (props: typeof __VLS_14) => any;
+    mark?: (props: typeof __VLS_14) => any;
 } & {
-    subtitle?: (props: typeof __VLS_16) => any;
+    default?: (props: typeof __VLS_21) => any;
+} & {
+    subtitle?: (props: typeof __VLS_23) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     name?: string;
     subtitle?: string;
     icon?: IconName;
-    logo?: string;
+    logo?: BrandLogo;
     to?: LinkTarget;
     href?: string | undefined;
     size?: BrandSize;
     accent?: boolean;
     hideText?: boolean;
+    showName?: boolean;
     inlist?: any;
     download?: any;
     key?: PropertyKey | undefined;
@@ -28,9 +32,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
-    type?: string | undefined;
-    ref?: import("vue").VNodeRef | undefined;
-    target?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -134,6 +135,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     id?: string | undefined;
     lang?: string | undefined;
     media?: string | undefined;
+    target?: string | undefined;
+    type?: string | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -181,6 +184,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined;
     ref_key?: string | undefined;
     accesskey?: string | undefined;
@@ -220,23 +224,24 @@ declare const __VLS_base: import("vue").DefineComponent<{
     hreflang?: string | undefined;
     ping?: string | undefined;
     referrerpolicy?: ("" | "origin" | "no-referrer" | "no-referrer-when-downgrade" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url") | undefined;
-    as?: string | import("vue").Component;
     onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    as?: string | Component;
 }, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{
     name?: string;
     subtitle?: string;
     icon?: IconName;
-    logo?: string;
+    logo?: BrandLogo;
     to?: LinkTarget;
     href?: string | undefined;
     size?: BrandSize;
     accent?: boolean;
     hideText?: boolean;
+    showName?: boolean;
     inlist?: any;
     download?: any;
     key?: PropertyKey | undefined;
@@ -246,9 +251,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
     bind?: Record<string, unknown>;
-    type?: string | undefined;
-    ref?: import("vue").VNodeRef | undefined;
-    target?: string | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -352,6 +354,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     id?: string | undefined;
     lang?: string | undefined;
     media?: string | undefined;
+    target?: string | undefined;
+    type?: string | undefined;
     tabindex?: (string | number) | undefined;
     'aria-activedescendant'?: string | undefined;
     'aria-atomic'?: (boolean | "true" | "false") | undefined;
@@ -399,6 +403,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     'aria-valuemin'?: (string | number) | undefined;
     'aria-valuenow'?: (string | number) | undefined;
     'aria-valuetext'?: string | undefined;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined;
     ref_key?: string | undefined;
     accesskey?: string | undefined;
@@ -438,13 +443,13 @@ declare const __VLS_base: import("vue").DefineComponent<{
     hreflang?: string | undefined;
     ping?: string | undefined;
     referrerpolicy?: ("" | "origin" | "no-referrer" | "no-referrer-when-downgrade" | "origin-when-cross-origin" | "same-origin" | "strict-origin" | "strict-origin-when-cross-origin" | "unsafe-url") | undefined;
-    as?: string | import("vue").Component;
     onVnodeBeforeMount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeMounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUpdate?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUpdated?: (((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void) | ((vnode: import("vue").VNode, oldVNode: import("vue").VNode) => void)[]) | undefined;
     onVnodeBeforeUnmount?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
+    as?: string | Component;
 }> & Readonly<{}>, {
     size: BrandSize;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/templates/DashboardLayout.vue

@@ -28,6 +28,7 @@
                      :subtitle="brandSubtitle"
                      :icon="brandIcon"
                      :logo="brandLogo"
+                     :show-name="brandShowName"
                      :to="brandTo"
                   />
                </slot>
@@ -38,10 +39,25 @@
                      v-model:open="searchOpen"
                      :groups="commandGroups"
                      :trigger-label="searchLabel"
-                     :placeholder="searchPlaceholderText"
                      :shortcut="searchShortcut"
                      class="k-dashboard-search"
-                  />
+                     v-bind="searchProps"
+                     :search="searchFunction"
+                     :placeholder="searchProps?.placeholder ?? searchPlaceholderText"
+                  >
+                     <template v-if="$slots['search-item']" #item="scope">
+                        <slot name="search-item" v-bind="scope" />
+                     </template>
+                     <template v-if="$slots['search-empty']" #empty="scope">
+                        <slot name="search-empty" v-bind="scope" />
+                     </template>
+                     <template v-if="$slots['search-group-label']" #group-label="scope">
+                        <slot name="search-group-label" v-bind="scope" />
+                     </template>
+                     <template v-if="$slots['search-after-results']" #after-results="scope">
+                        <slot name="search-after-results" v-bind="scope" />
+                     </template>
+                  </CommandPalette>
                </slot>
             </template>
             <slot name="sidebar" :collapsed="isCollapsed">
@@ -90,6 +106,7 @@
                :name="brandName"
                :icon="brandIcon"
                :logo="brandLogo"
+               :show-name="brandShowName"
                :to="brandTo"
                size="sm"
             />
@@ -126,6 +143,9 @@
             :title="settingsTitleText"
             :on-sign-out="onSignOut"
          >
+            <template v-if="$slots['settings-account-fields']" #account-fields="scope">
+               <slot name="settings-account-fields" v-bind="scope" />
+            </template>
             <template v-for="entry in settingsSlots" :key="entry.source" #[entry.target]="scope">
                <slot :name="entry.source" v-bind="scope" />
             </template>
@@ -135,9 +155,10 @@
 </template>
 
 <script setup>
-import { computed, ref, useSlots, useTemplateRef } from "vue";
+import { computed, ref, useTemplateRef } from "vue";
 import { useLocale } from "../../composables/useLocale";
 import { navCommands, toNavSections } from "../../internal/layout/navigation";
+import { matchesSearch } from "../../internal/core/text";
 import AppShell from "../layout/AppShell.vue";
 import Breadcrumbs from "../layout/Breadcrumbs.vue";
 import Sidebar from "../layout/Sidebar.vue";
@@ -154,7 +175,8 @@ const props = defineProps({
   brandName: { type: String, required: false },
   brandSubtitle: { type: String, required: false },
   brandIcon: { type: null, required: false },
-  brandLogo: { type: String, required: false },
+  brandLogo: { type: null, required: false },
+  brandShowName: { type: Boolean, required: false },
   brandTo: { type: [String, Object], required: false, default: "/" },
   account: { type: Object, required: false },
   accountAction: { type: String, required: false, default: "settings" },
@@ -163,7 +185,9 @@ const props = defineProps({
   settingsTitle: { type: String, required: false },
   onSignOut: { type: Function, required: false },
   breadcrumbs: { type: Array, required: false },
-  search: { type: [Boolean, Array], required: false },
+  search: { type: [Boolean, Array, Function], required: false },
+  searchProps: { type: Object, required: false },
+  searchNavigation: { type: Boolean, required: false, default: true },
   searchLabel: { type: String, required: false },
   searchPlaceholder: { type: String, required: false },
   searchShortcut: { type: [String, Boolean], required: false, default: "mod+k" },
@@ -184,6 +208,7 @@ const props = defineProps({
   themeLabel: { type: String, required: false }
 });
 const emit = defineEmits(["accountSelect"]);
+const slots = defineSlots();
 const collapsed = defineModel("collapsed", { type: Boolean, ...{ default: false } });
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const settingsOpen = defineModel("settingsOpen", { type: Boolean, ...{ default: false } });
@@ -196,7 +221,6 @@ const searchPlaceholderText = computed(
 const navigationGroupLabel = computed(
   () => props.searchNavigationLabel ?? t("dashboardLayout.pages")
 );
-const slots = useSlots();
 const shell = useTemplateRef("shell");
 const searchOpen = ref(false);
 const hasDesktopTopbar = computed(
@@ -212,14 +236,29 @@ const hasSidebarFooter = computed(
 const hasSettings = computed(
   () => props.accountAction === "settings" && Boolean(props.account || props.settingsSections)
 );
-const SETTINGS_SLOT_PREFIX = "settings-";
+const SETTINGS_SLOT_PATTERN = /^settings-(section|actions)-./;
 const settingsSlots = computed(
-  () => Object.keys(slots).filter((name) => name.startsWith(SETTINGS_SLOT_PREFIX)).map((name) => ({
+  () => Object.keys(slots).filter((name) => SETTINGS_SLOT_PATTERN.test(name)).map((name) => ({
     source: name,
-    target: name.slice(SETTINGS_SLOT_PREFIX.length)
+    target: name.slice("settings-".length)
   }))
 );
-const navigationCommands = computed(() => navCommands(toNavSections(props.navigation)));
+const navigationCommands = computed(
+  () => navCommands(toNavSections(props.navigation))
+);
+const searchFunction = computed(() => {
+  const search = props.search;
+  if (typeof search !== "function") return void 0;
+  if (!props.searchNavigation) return search;
+  return async (query, signal) => {
+    const groups = await search(query, signal);
+    const items = navigationCommands.value.filter(
+      (item) => matchesSearch([item.label, item.description, ...item.keywords ?? []], query)
+    );
+    if (!items.length) return groups;
+    return [{ id: "navigation", label: navigationGroupLabel.value, items }, ...groups];
+  };
+});
 const commandGroups = computed(() => {
   const groups = [];
   if (navigationCommands.value.length)