@xleddyl/443-components-vue 0.2.3 → 0.4.0

package/dist/components/layout/PageHeader.vue

@@ -2,7 +2,15 @@
    <header class="k-page-header" :class="{ 'is-bordered': bordered }">
       <div class="k-page-header-heading">
          <slot name="breadcrumbs">
-            <Breadcrumbs v-if="breadcrumbs?.length" :items="breadcrumbs" />
+            <Breadcrumbs
+               v-if="breadcrumbs?.length"
+               :items="breadcrumbs"
+               :ancestors="breadcrumbsAncestors"
+            >
+               <template v-if="$slots['breadcrumb-item']" #item="scope">
+                  <slot name="breadcrumb-item" v-bind="scope" />
+               </template>
+            </Breadcrumbs>
          </slot>
          <div class="k-page-header-title-row">
             <span v-if="icon || $slots.icon" class="k-page-header-icon" aria-hidden="true">
@@ -38,6 +46,7 @@ defineProps({
   description: { type: String, required: false },
   icon: { type: null, required: false },
   breadcrumbs: { type: Array, required: false },
+  breadcrumbsAncestors: { type: Boolean, required: false },
   level: { type: Number, required: false, default: 1 },
   bordered: { type: Boolean, required: false }
 });

package/dist/components/layout/PageHeader.vue.d.ts

@@ -1,26 +1,33 @@
 import type { IconName } from '../../composables/useIcons';
 import type { BreadcrumbItem, HeadingLevel } from './types';
-declare var __VLS_1: {}, __VLS_8: {}, __VLS_21: {}, __VLS_23: {}, __VLS_25: {}, __VLS_27: {}, __VLS_29: {};
+declare var __VLS_1: {}, __VLS_10: {
+    item: BreadcrumbItem;
+    index: number;
+    current: boolean;
+}, __VLS_12: {}, __VLS_25: {}, __VLS_27: {}, __VLS_29: {}, __VLS_31: {}, __VLS_33: {};
 type __VLS_Slots = {} & {
     breadcrumbs?: (props: typeof __VLS_1) => any;
 } & {
-    icon?: (props: typeof __VLS_8) => any;
+    'breadcrumb-item'?: (props: typeof __VLS_10) => any;
 } & {
-    title?: (props: typeof __VLS_21) => any;
+    icon?: (props: typeof __VLS_12) => any;
 } & {
-    badge?: (props: typeof __VLS_23) => any;
+    title?: (props: typeof __VLS_25) => any;
 } & {
-    description?: (props: typeof __VLS_25) => any;
+    badge?: (props: typeof __VLS_27) => any;
 } & {
-    actions?: (props: typeof __VLS_27) => any;
+    description?: (props: typeof __VLS_29) => any;
 } & {
-    default?: (props: typeof __VLS_29) => any;
+    actions?: (props: typeof __VLS_31) => any;
+} & {
+    default?: (props: typeof __VLS_33) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     title?: string | undefined;
     description?: string;
     icon?: IconName;
     breadcrumbs?: BreadcrumbItem[];
+    breadcrumbsAncestors?: boolean;
     level?: HeadingLevel;
     bordered?: boolean;
     innerHTML?: string | undefined | undefined;
@@ -77,7 +84,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;
@@ -219,6 +226,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
     description?: string;
     icon?: IconName;
     breadcrumbs?: BreadcrumbItem[];
+    breadcrumbsAncestors?: boolean;
     level?: HeadingLevel;
     bordered?: boolean;
     innerHTML?: string | undefined | undefined;
@@ -275,7 +283,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/layout/Separator.vue.d.ts

@@ -61,7 +61,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;
@@ -257,7 +257,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/layout/Sidebar.vue.d.ts

@@ -76,7 +76,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;
@@ -273,7 +273,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/layout/SidebarSection.vue.d.ts

@@ -59,7 +59,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;
@@ -253,7 +253,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/layout/Stack.vue.d.ts

@@ -20,9 +20,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;
@@ -126,6 +123,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;
     href?: string | undefined;
     'aria-activedescendant'?: string | 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;
+    ref?: import("vue").VNodeRef | undefined;
     ref_for?: boolean | undefined;
     ref_key?: string | undefined;
     accesskey?: string | undefined;
@@ -236,9 +236,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;
@@ -342,6 +339,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;
     href?: string | undefined;
     'aria-activedescendant'?: string | undefined;
@@ -390,6 +389,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;

package/dist/components/layout/Tabs.vue

@@ -1,5 +1,12 @@
 <template>
-   <div class="k-tabs" :class="[`k-tabs-${variant}`, `k-tabs-${size}`, { 'is-fill': fill }]">
+   <div
+      class="k-tabs"
+      :class="[
+  `k-tabs-${variant}`,
+  `k-tabs-${size}`,
+  { 'is-fill': fill, 'is-stretch': stretch, 'is-inset': inset }
+]"
+   >
       <div
          ref="list"
          class="k-tabs-list"
@@ -16,7 +23,9 @@
             role="tab"
             class="k-tab"
             :aria-selected="isSelected(item) ? 'true' : 'false'"
-            :aria-controls="panelId(index)"
+            :aria-controls="
+  singlePanel ? isSelected(item) ? singlePanelId : void 0 : panelId(index)
+"
             :tabindex="index === focusIndex ? 0 : -1"
             :disabled="item.disabled"
             @click="select(item)"
@@ -25,13 +34,29 @@
          >
             <Icon v-if="item.icon" :name="item.icon" class="k-tab-icon" />
             <span class="k-tab-label">{{ item.label }}</span>
-            <span v-if="item.badge !== void 0 && item.badge !== ''" class="k-tab-badge">{{
-               item.badge
-            }}</span>
+            <template v-if="item.badge !== void 0 && item.badge !== ''">
+               <span
+                  class="k-tab-badge"
+                  :class="item.badgeTone ? `k-tab-badge-${item.badgeTone}` : void 0"
+                  :aria-hidden="item.badgeLabel ? 'true' : void 0"
+                  >{{ item.badge }}</span
+               >
+               <span v-if="item.badgeLabel" class="k-visually-hidden">{{ item.badgeLabel }}</span>
+            </template>
          </button>
          <span class="k-tabs-indicator" aria-hidden="true" />
       </div>
-      <template v-for="(item, index) in items" :key="item.value">
+      <div
+         v-if="singlePanel && activeItem"
+         :id="singlePanelId"
+         class="k-tabs-panel"
+         role="tabpanel"
+         :aria-labelledby="tabId(selectedIndex)"
+         :tabindex="panelFocusable ? 0 : void 0"
+      >
+         <slot name="panel" :item="activeItem" />
+      </div>
+      <template v-for="(item, index) in singlePanel ? [] : items" :key="item.value">
          <div
             v-if="!lazy || visited.has(item.value)"
             v-show="isSelected(item)"
@@ -70,9 +95,11 @@ const props = defineProps({
   activation: { type: String, required: false, default: "automatic" },
   lazy: { type: Boolean, required: false },
   fill: { type: Boolean, required: false },
+  stretch: { type: Boolean, required: false },
+  inset: { type: Boolean, required: false },
   panelFocusable: { type: Boolean, required: false, default: true }
 });
-defineSlots();
+const slots = defineSlots();
 const model = defineModel({ type: [String, Number] });
 const baseId = useId();
 const list = useTemplateRef("list");
@@ -86,6 +113,9 @@ const selectedIndex = computed(
   )
 );
 const focusIndex = ref(selectedIndex.value);
+const singlePanel = computed(() => Boolean(slots.panel));
+const singlePanelId = `${baseId}-panel`;
+const activeItem = computed(() => props.items[selectedIndex.value]);
 const visited = ref(/* @__PURE__ */ new Set());
 const indicator = ref(null);
 const indicatorReady = computed(() => indicator.value !== null);

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

@@ -7,6 +7,9 @@ type __VLS_Slots = {
     default?: (props: {
         item: TabItem;
     }) => unknown;
+    panel?: (props: {
+        item: TabItem;
+    }) => unknown;
 };
 declare const __VLS_base: import("vue").DefineComponent<{
     items: TabItem[];
@@ -16,6 +19,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     activation?: TabsActivation;
     lazy?: boolean;
     fill?: boolean;
+    stretch?: boolean;
+    inset?: boolean;
     panelFocusable?: boolean;
     modelValue?: TabItem["value"];
     key?: PropertyKey | undefined;
@@ -24,7 +29,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;
@@ -137,7 +141,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 +178,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;
@@ -220,6 +225,8 @@ declare const __VLS_base: import("vue").DefineComponent<{
     activation?: TabsActivation;
     lazy?: boolean;
     fill?: boolean;
+    stretch?: boolean;
+    inset?: boolean;
     panelFocusable?: boolean;
     modelValue?: TabItem["value"];
     key?: PropertyKey | undefined;
@@ -228,7 +235,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;
@@ -341,7 +347,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;
@@ -378,6 +384,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/layout/ThemeSwitch.vue.d.ts

@@ -76,7 +76,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;
@@ -308,7 +308,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/layout/Toolbar.vue.d.ts

@@ -62,7 +62,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;
@@ -259,7 +259,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/layout/types.d.ts

@@ -1,5 +1,5 @@
 import type { IconName } from '../../composables/useIcons';
-import type { LinkTarget } from '../core/types';
+import type { LinkTarget, Tone } from '../core/types';
 export type LayoutGap = 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type LayoutAlign = 'start' | 'center' | 'end' | 'stretch' | 'baseline';
 export type LayoutJustify = 'start' | 'center' | 'end' | 'between' | 'around';
@@ -15,6 +15,8 @@ export interface BreadcrumbItem {
     to?: LinkTarget;
     href?: string;
     icon?: IconName;
+    attrs?: Record<string, unknown>;
+    onClick?: (event: MouseEvent) => void;
 }
 export type CardPadding = 'none' | 'sm' | 'md' | 'lg';
 export type CardVariant = 'raised' | 'outline' | 'subtle';
@@ -23,6 +25,8 @@ export interface TabItem {
     label: string;
     icon?: IconName;
     badge?: string | number;
+    badgeTone?: Tone;
+    badgeLabel?: string;
     disabled?: boolean;
 }
 export type TabsVariant = 'segmented' | 'underline';
@@ -30,10 +34,13 @@ export type TabsActivation = 'automatic' | 'manual';
 export interface AccordionItem {
     value?: string | number;
     title: string;
+    description?: string;
     content?: string;
     icon?: IconName;
     disabled?: boolean;
 }
+export type AccordionVariant = 'separated' | 'plain' | 'card' | 'outline';
+export type AccordionContentVariant = 'text' | 'neutral';
 export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
 export interface AppShellContext {
     collapsed: Readonly<{

package/dist/components/overlays/CommandPalette.vue

@@ -1,5 +1,5 @@
 <template>
-   <button
+   <ButtonElement
       v-if="trigger"
       v-bind="$attrs"
       type="button"
@@ -14,7 +14,7 @@
       <span v-if="shortcut" class="k-command-trigger-keys" aria-hidden="true">
          <Kbd v-for="(key, index) in shortcutKeys" :key="index" size="sm">{{ key }}</Kbd>
       </span>
-   </button>
+   </ButtonElement>
    <dialog
       ref="dialogRef"
       class="k-modal k-command"
@@ -65,15 +65,28 @@
                   v-for="(group, groupIndex) in rendered"
                   :key="group.key"
                   role="group"
-                  :aria-labelledby="group.label ? `${listId}-group-${groupIndex}` : void 0"
+                  :aria-labelledby="
+  group.label || $slots['group-label'] ? `${listId}-group-${groupIndex}` : void 0
+"
                   class="k-command-group"
                >
                   <div
-                     v-if="group.label"
+                     v-if="group.label || $slots['group-label']"
                      :id="`${listId}-group-${groupIndex}`"
                      class="k-command-group-label"
                   >
-                     {{ group.label }}
+                     <slot
+                        name="group-label"
+                        :group="group.source"
+                        :label="group.label"
+                        :description="group.description"
+                        :recent="group.recent"
+                     >
+                        <span class="k-command-group-title">{{ group.label }}</span>
+                        <span v-if="group.description" class="k-command-group-description">
+                           {{ group.description }}
+                        </span>
+                     </slot>
                   </div>
                   <div
                      v-for="entry in group.items"
@@ -115,6 +128,9 @@
                   </div>
                </div>
             </div>
+            <div v-if="flat.length && (notice || $slots['after-results'])" class="k-command-notice">
+               <slot name="after-results" :query="query" :count="flat.length">{{ notice }}</slot>
+            </div>
          </div>
          <div class="k-command-footer" aria-hidden="true">
             <span><Kbd size="sm">↑</Kbd><Kbd size="sm">↓</Kbd> {{ moveText }}</span>
@@ -136,10 +152,13 @@ import { useAsyncSearch } from "../../internal/core/search";
 import { matchesSearch } from "../../internal/core/text";
 import { readStorageJson, writeStorageJson } from "../../internal/core/storage";
 import { useRouterLike } from "../../internal/layout/route";
+import { ButtonElement } from "../../internal/core/ButtonElement";
 import Icon from "../core/Icon.vue";
 import Kbd from "../core/Kbd.vue";
 import Spinner from "../core/Spinner.vue";
+import { provideFieldBoundary } from "../../composables/useFieldBoundary";
 defineOptions({ inheritAttrs: false });
+provideFieldBoundary();
 const props = defineProps({
   groups: { type: Array, required: false, default: () => [] },
   search: { type: Function, required: false },
@@ -155,21 +174,26 @@ const props = defineProps({
   recentKey: { type: String, required: false },
   recentLimit: { type: Number, required: false, default: 5 },
   recentLabel: { type: String, required: false },
-  emptyText: { type: String, required: false },
+  emptyText: { type: [String, Function], required: false },
   minQueryText: { type: String, required: false },
   errorText: { type: String, required: false },
   loadingText: { type: String, required: false },
   resultsText: { type: Function, required: false },
   footerMove: { type: String, required: false },
   footerSelect: { type: String, required: false },
-  footerClose: { type: String, required: false }
+  footerClose: { type: String, required: false },
+  notice: { type: String, required: false }
 });
 const { t } = useLocale();
 const placeholderText = computed(() => props.placeholder ?? t("commandPalette.placeholder"));
 const labelText = computed(() => props.label ?? t("commandPalette.label"));
 const triggerText = computed(() => props.triggerLabel ?? t("common.search"));
 const recentText = computed(() => props.recentLabel ?? t("commandPalette.recent"));
-const emptyLabel = computed(() => props.emptyText ?? t("common.noResults"));
+const emptyLabel = computed(() => {
+  const text = props.emptyText;
+  if (typeof text === "function") return text(term.value);
+  return text ?? t("common.noResults");
+});
 const minQueryLabel = computed(() => props.minQueryText ?? t("commandPalette.minQuery"));
 const errorLabel = computed(() => props.errorText ?? t("commandPalette.error"));
 const loadingLabel = computed(() => props.loadingText ?? t("common.loading"));
@@ -177,6 +201,7 @@ const moveText = computed(() => props.footerMove ?? t("commandPalette.move"));
 const selectText = computed(() => props.footerSelect ?? t("commandPalette.select"));
 const closeText = computed(() => props.footerClose ?? t("commandPalette.close"));
 const emit = defineEmits(["select", "open", "close"]);
+defineSlots();
 const open = defineModel("open", { type: Boolean, ...{ default: false } });
 const query = defineModel("query", { type: String, ...{ default: "" } });
 const baseId = useId();
@@ -228,6 +253,8 @@ const rendered = computed(() => {
     list.push({
       key: `group-${group.id}`,
       label: group.label,
+      description: group.description,
+      source: group,
       recent: false,
       items: group.items.map((item) => ({
         key: `${group.id}-${item.id}`,