@xleddyl/443-components-vue 0.2.2 → 0.3.0

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,20 @@
                      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-for="entry in searchSlots"
+                        :key="entry.source"
+                        #[entry.target]="scope"
+                     >
+                        <slot :name="entry.source" v-bind="scope" />
+                     </template>
+                  </CommandPalette>
                </slot>
             </template>
             <slot name="sidebar" :collapsed="isCollapsed">
@@ -90,6 +101,7 @@
                :name="brandName"
                :icon="brandIcon"
                :logo="brandLogo"
+               :show-name="brandShowName"
                :to="brandTo"
                size="sm"
             />
@@ -138,6 +150,7 @@
 import { computed, ref, useSlots, 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 +167,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 +177,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" },
@@ -219,7 +235,27 @@ const settingsSlots = computed(
     target: name.slice(SETTINGS_SLOT_PREFIX.length)
   }))
 );
+const SEARCH_SLOT_PREFIX = "search-";
+const searchSlots = computed(
+  () => Object.keys(slots).filter((name) => name.startsWith(SEARCH_SLOT_PREFIX)).map((name) => ({
+    source: name,
+    target: name.slice(SEARCH_SLOT_PREFIX.length)
+  }))
+);
 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)

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

@@ -3,54 +3,60 @@ import type { BreadcrumbItem } from '../layout/types';
 import type { MenuItem } from '../overlays/types';
 import type { ThemePreset } from '../../composables/usePreset';
 import type { LinkTarget } from '../core/types';
-import type { AccountAction, DashboardAccount, DashboardNavigation, DashboardSearch, DashboardVariant, SettingsModalSection, ThemeSwitchPlacement } from './types';
+import type { AccountAction, BrandLogo, DashboardAccount, DashboardNavigation, DashboardSearch, DashboardSearchProps, DashboardVariant, SettingsModalSection, ThemeSwitchPlacement } from './types';
 declare var __VLS_18: {
     collapsed: boolean;
 }, __VLS_26: {
     collapsed: boolean;
-}, __VLS_35: {
+}, __VLS_39: string, __VLS_40: {
+    item: import("../overlays/types").CommandItem;
+    active: boolean;
+}, __VLS_42: {
     collapsed: boolean;
-}, __VLS_43: {
+}, __VLS_50: {
     collapsed: boolean;
-}, __VLS_45: {
+}, __VLS_52: {
     collapsed: boolean;
-}, __VLS_67: {}, __VLS_74: {
+}, __VLS_74: {}, __VLS_81: {
     mobile: boolean;
-}, __VLS_81: {
+}, __VLS_88: {
     mobile: boolean;
-}, __VLS_88: {}, __VLS_103: string, __VLS_104: {
+}, __VLS_95: {}, __VLS_110: string, __VLS_111: {
     section: SettingsModalSection;
     close: () => void;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_103>]?: (props: typeof __VLS_104) => any;
+    [K in NonNullable<typeof __VLS_39>]?: (props: typeof __VLS_40) => any;
+} & {
+    [K in NonNullable<typeof __VLS_110>]?: (props: typeof __VLS_111) => any;
 } & {
     brand?: (props: typeof __VLS_18) => any;
 } & {
     search?: (props: typeof __VLS_26) => any;
 } & {
-    sidebar?: (props: typeof __VLS_35) => any;
+    sidebar?: (props: typeof __VLS_42) => any;
 } & {
-    'sidebar-footer'?: (props: typeof __VLS_43) => any;
+    'sidebar-footer'?: (props: typeof __VLS_50) => any;
 } & {
-    account?: (props: typeof __VLS_45) => any;
+    account?: (props: typeof __VLS_52) => any;
 } & {
-    'topbar-brand'?: (props: typeof __VLS_67) => any;
+    'topbar-brand'?: (props: typeof __VLS_74) => any;
 } & {
-    topbar?: (props: typeof __VLS_74) => any;
+    topbar?: (props: typeof __VLS_81) => any;
 } & {
-    actions?: (props: typeof __VLS_81) => any;
+    actions?: (props: typeof __VLS_88) => any;
 } & {
-    default?: (props: typeof __VLS_88) => any;
+    default?: (props: typeof __VLS_95) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
-    variant?: "sidebar" | "inset" | "floating" | undefined;
+    variant?: "sidebar" | "floating" | "inset" | undefined;
     navigation?: DashboardNavigation;
     currentPath?: string;
     brandName?: string;
     brandSubtitle?: string;
     brandIcon?: IconName;
-    brandLogo?: string;
+    brandLogo?: BrandLogo;
+    brandShowName?: boolean;
     brandTo?: LinkTarget;
     account?: DashboardAccount;
     accountAction?: AccountAction;
@@ -60,6 +66,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onSignOut?: () => void;
     breadcrumbs?: BreadcrumbItem[];
     search?: DashboardSearch;
+    searchProps?: DashboardSearchProps;
+    searchNavigation?: boolean;
     searchLabel?: string;
     searchPlaceholder?: string;
     searchShortcut?: string | false;
@@ -88,7 +96,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -238,6 +245,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 | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined;
@@ -294,13 +302,14 @@ declare const __VLS_base: import("vue").DefineComponent<{
     "update:settingsOpen": (value: boolean) => any;
     "update:settingsSection": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<{
-    variant?: "sidebar" | "inset" | "floating" | undefined;
+    variant?: "sidebar" | "floating" | "inset" | undefined;
     navigation?: DashboardNavigation;
     currentPath?: string;
     brandName?: string;
     brandSubtitle?: string;
     brandIcon?: IconName;
-    brandLogo?: string;
+    brandLogo?: BrandLogo;
+    brandShowName?: boolean;
     brandTo?: LinkTarget;
     account?: DashboardAccount;
     accountAction?: AccountAction;
@@ -310,6 +319,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onSignOut?: () => void;
     breadcrumbs?: BreadcrumbItem[];
     search?: DashboardSearch;
+    searchProps?: DashboardSearchProps;
+    searchNavigation?: boolean;
     searchLabel?: string;
     searchPlaceholder?: string;
     searchShortcut?: string | false;
@@ -338,7 +349,6 @@ declare const __VLS_base: import("vue").DefineComponent<{
     style?: import("vue").StyleValue;
     results?: (string | number) | undefined;
     placeholder?: string | undefined;
-    ref?: import("vue").VNodeRef | undefined;
     class?: import("vue").ClassValue;
     role?: string | undefined;
     'aria-label'?: string | undefined;
@@ -488,6 +498,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 | undefined;
     ref_key?: string | undefined | undefined;
     accesskey?: string | undefined;
@@ -539,15 +550,16 @@ declare const __VLS_base: import("vue").DefineComponent<{
     "onUpdate:settingsSection"?: ((value: string | undefined) => any) | undefined;
 }>, {
     variant: DashboardVariant;
+    shortcut: string | false;
     collapsible: boolean;
     storageKey: string | false;
-    shortcut: string | false;
     viewTransition: boolean;
     brandTo: LinkTarget;
     themeSwitch: ThemeSwitchPlacement;
     accountAction: AccountAction;
     settingsSections: SettingsModalSection[];
     settingsPresets: false | readonly ThemePreset[];
+    searchNavigation: boolean;
     searchShortcut: string | false;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

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

@@ -82,7 +82,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;
@@ -285,7 +285,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/DetailPage.vue.d.ts

@@ -39,7 +39,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;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -152,7 +151,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;
@@ -189,6 +188,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;
@@ -250,7 +250,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;
     role?: string | undefined | undefined;
     'aria-label'?: string | undefined | undefined;
@@ -363,7 +362,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;
@@ -400,6 +399,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;

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

@@ -86,7 +86,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;
@@ -295,7 +295,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/ErrorPage.vue.d.ts

@@ -82,7 +82,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;
@@ -288,7 +288,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/ListPage.vue

@@ -75,16 +75,18 @@
                />
                <slot name="toolbar" />
             </div>
-            <div
-               v-if="selectable && selected.length || $slots['toolbar-end']"
-               class="k-list-toolbar-end"
-            >
-               <template v-if="selectable && selected.length">
-                  <span class="k-list-selection" aria-live="polite">{{
-                     selectedLabel(selected.length)
-                  }}</span>
-                  <slot name="bulk" :selected="selected" :clear="() => selected = []" />
-               </template>
+            <div v-if="selectable || $slots['toolbar-end']" class="k-list-toolbar-end">
+               <SelectionBar
+                  v-if="selectable"
+                  class="k-list-selection"
+                  :count="selected.length"
+                  :selected-text="selectedLabel"
+                  :on-clear="clearSelection"
+               >
+                  <template v-if="$slots.bulk" #actions>
+                     <slot name="bulk" :selected="selected" :clear="clearSelection" />
+                  </template>
+               </SelectionBar>
                <slot name="toolbar-end" />
             </div>
          </div>
@@ -164,6 +166,7 @@ import { normalizeSearch } from "../../internal/core/text";
 import Input from "../core/Input.vue";
 import FilterPills from "../data/FilterPills.vue";
 import Pagination from "../data/Pagination.vue";
+import SelectionBar from "../data/SelectionBar.vue";
 import Table from "../data/Table.vue";
 import EmptyState from "../feedback/EmptyState.vue";
 import Card from "../layout/Card.vue";
@@ -244,6 +247,9 @@ const filterValues = computed(() => {
   return Array.isArray(value) ? value : [value];
 });
 const isFiltered = computed(() => search.value.trim() !== "" || filterValues.value.length > 0);
+function clearSelection() {
+  selected.value = [];
+}
 const hasToolbar = computed(
   () => Boolean(
     props.searchable || props.filters?.length || slots.toolbar || slots["toolbar-end"] || props.selectable

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

@@ -434,8 +434,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     onVnodeUnmounted?: (((vnode: import("vue").VNode) => void) | ((vnode: import("vue").VNode) => void)[]) | undefined;
 }> & Readonly<{}>, {
     fill: boolean;
-    title: string;
     message: string;
+    title: string;
     backLabel: string | false;
     homeTo: LinkTarget;
     homeLabel: string | false;