diff --git a/playgrounds/nuxt/app/pages/components/command-palette.vue b/playgrounds/nuxt/app/pages/components/command-palette.vue index abf3b2916d..bf4bd4efe0 100644 --- a/playgrounds/nuxt/app/pages/components/command-palette.vue +++ b/playgrounds/nuxt/app/pages/components/command-palette.vue @@ -75,6 +75,14 @@ const groups = computed(() => [{ toast.add({ title: 'Label added!' }) }, kbds: ['meta', 'L'] + }, { + label: 'Add label', + description: 'Add a label to the current item.', + icon: 'i-lucide-tag', + onSelect(e: Event) { + e.preventDefault() + }, + kbds: ['meta', 'L'] }, { label: 'More actions', placeholder: 'Search actions...', diff --git a/playgrounds/nuxt/app/pages/components/context-menu.vue b/playgrounds/nuxt/app/pages/components/context-menu.vue index 5b6de6f4b9..6296ce32d3 100644 --- a/playgrounds/nuxt/app/pages/components/context-menu.vue +++ b/playgrounds/nuxt/app/pages/components/context-menu.vue @@ -13,6 +13,7 @@ const items = computed(() => [ }], [{ label: 'Appearance', + description: 'Change the appearance of the app', children: [{ label: 'System', icon: 'i-lucide-monitor' @@ -62,6 +63,7 @@ const items = computed(() => [ label: 'Developer', children: [[{ label: 'View Source', + description: 'View the source code of the app', kbds: ['option', 'meta', 'U'], onSelect() { console.log('View Source clicked') diff --git a/playgrounds/nuxt/app/pages/components/dropdown-menu.vue b/playgrounds/nuxt/app/pages/components/dropdown-menu.vue index 4a8deb9377..553b2bf996 100644 --- a/playgrounds/nuxt/app/pages/components/dropdown-menu.vue +++ b/playgrounds/nuxt/app/pages/components/dropdown-menu.vue @@ -13,6 +13,7 @@ const items = computed(() => [ }], [{ label: 'Profile', + description: 'View your profile', icon: 'i-lucide-user', slot: 'custom' as const, onSelect(e: Event) { @@ -21,6 +22,7 @@ const items = computed(() => [ } }, { label: 'Billing', + description: 'Manage billing', icon: 'i-lucide-credit-card', kbds: ['meta', 'b'], onSelect() { @@ -52,6 +54,7 @@ const items = computed(() => [ } }], [{ label: 'More', + description: 'Import from more sources', icon: 'i-lucide-circle-plus', children: [{ label: 'Import from Slack', diff --git a/playgrounds/nuxt/app/pages/components/input-menu.vue b/playgrounds/nuxt/app/pages/components/input-menu.vue index 653905206b..8e1c56b916 100644 --- a/playgrounds/nuxt/app/pages/components/input-menu.vue +++ b/playgrounds/nuxt/app/pages/components/input-menu.vue @@ -22,22 +22,27 @@ const items = [[{ label: 'Fruits', type: 'label' as const }, ...fruits], [{ labe const statuses = [{ label: 'Backlog', value: 'backlog', + description: 'Issues that have been identified but not yet prioritized', icon: 'i-lucide-circle-help' }, { label: 'Todo', value: 'todo', + description: 'Issues that are ready to be worked on', icon: 'i-lucide-circle-plus' }, { label: 'In Progress', value: 'in_progress', + description: 'Issues that are currently being worked on', icon: 'i-lucide-circle-arrow-up' }, { label: 'Done', value: 'done', + description: 'Issues that have been completed successfully', icon: 'i-lucide-circle-check' }, { label: 'Canceled', value: 'canceled', + description: 'Issues that have been cancelled or rejected', icon: 'i-lucide-circle-x' }] satisfies InputMenuItem[] diff --git a/playgrounds/nuxt/app/pages/components/select-menu.vue b/playgrounds/nuxt/app/pages/components/select-menu.vue index 61e3ce51b5..566130a4f6 100644 --- a/playgrounds/nuxt/app/pages/components/select-menu.vue +++ b/playgrounds/nuxt/app/pages/components/select-menu.vue @@ -22,22 +22,27 @@ const items = [[{ label: 'Fruits', type: 'label' }, ...fruits], [{ label: 'Veget const statuses = [{ label: 'Backlog', value: 'backlog', + description: 'Issues that have been identified but not yet prioritized', icon: 'i-lucide-circle-help' }, { label: 'Todo', value: 'todo', + description: 'Issues that are ready to be worked on', icon: 'i-lucide-circle-plus' }, { label: 'In Progress', value: 'in_progress', + description: 'Issues that are currently being worked on', icon: 'i-lucide-circle-arrow-up' }, { label: 'Done', value: 'done', + description: 'Issues that have been completed successfully', icon: 'i-lucide-circle-check' }, { label: 'Canceled', value: 'canceled', + description: 'Issues that have been cancelled or rejected', icon: 'i-lucide-circle-x' }] satisfies SelectMenuItem[] diff --git a/playgrounds/nuxt/app/pages/components/select.vue b/playgrounds/nuxt/app/pages/components/select.vue index cacaeaf1e7..2afcff889a 100644 --- a/playgrounds/nuxt/app/pages/components/select.vue +++ b/playgrounds/nuxt/app/pages/components/select.vue @@ -21,22 +21,27 @@ const items = [[{ label: 'Fruits', type: 'label' as const }, ...fruits], [{ labe const statuses = [{ label: 'Backlog', value: 'backlog', + description: 'Issues that have been identified but not yet prioritized', icon: 'i-lucide-circle-help' }, { label: 'Todo', value: 'todo', + description: 'Issues that are ready to be worked on', icon: 'i-lucide-circle-plus' }, { label: 'In Progress', value: 'in_progress', + description: 'Issues that are currently being worked on', icon: 'i-lucide-circle-arrow-up' }, { label: 'Done', value: 'done', + description: 'Issues that have been completed successfully', icon: 'i-lucide-circle-check' }, { label: 'Canceled', value: 'canceled', + description: 'Issues that have been cancelled or rejected', icon: 'i-lucide-circle-x' }] satisfies SelectItem[] diff --git a/src/runtime/components/CommandPalette.vue b/src/runtime/components/CommandPalette.vue index bb51dbff7f..5e297398b8 100644 --- a/src/runtime/components/CommandPalette.vue +++ b/src/runtime/components/CommandPalette.vue @@ -16,6 +16,7 @@ export interface CommandPaletteItem extends Omit + ui?: Pick [key: string]: any } @@ -153,6 +154,11 @@ export interface CommandPaletteProps = CommandP * @defaultValue 'label' */ labelKey?: GetItemKeys + /** + * The key used to get the description from the item. + * @defaultValue 'description' + */ + descriptionKey?: GetItemKeys class?: any ui?: CommandPalette['slots'] } @@ -171,6 +177,7 @@ export type CommandPaletteSlots = CommandPalett 'item': SlotProps 'item-leading': SlotProps 'item-label': SlotProps + 'item-description': SlotProps 'item-trailing': SlotProps } & Record> & Record> @@ -200,6 +207,7 @@ import UKbd from './Kbd.vue' const props = withDefaults(defineProps>(), { modelValue: '', labelKey: 'label', + descriptionKey: 'description', autofocus: true, back: true, virtualize: false @@ -393,14 +401,22 @@ function onSelect(e: Event, item: T) { /> - - - {{ item.prefix }} + + + + {{ item.prefix }} - + - - + + + + + + + {{ get(item, props.descriptionKey as string) }} + + diff --git a/src/runtime/components/ContextMenu.vue b/src/runtime/components/ContextMenu.vue index 994bd4f6ca..3f93780061 100644 --- a/src/runtime/components/ContextMenu.vue +++ b/src/runtime/components/ContextMenu.vue @@ -11,6 +11,7 @@ type ContextMenu = ComponentConfig export interface ContextMenuItem extends Omit { label?: string + description?: string /** * @IconifyIcon */ @@ -34,7 +35,7 @@ export interface ContextMenuItem extends Omit + ui?: Pick [key: string]: any } @@ -75,6 +76,11 @@ export interface ContextMenuProps = Arr * @defaultValue 'label' */ labelKey?: GetItemKeys + /** + * The key used to get the description from the item. + * @defaultValue 'description' + */ + descriptionKey?: GetItemKeys disabled?: boolean class?: any ui?: ContextMenu['slots'] @@ -92,10 +98,11 @@ export type ContextMenuSlots< 'item': SlotProps 'item-leading': SlotProps 'item-label': SlotProps + 'item-description': SlotProps 'item-trailing': SlotProps 'content-top': (props?: {}) => any 'content-bottom': (props?: {}) => any -} & DynamicSlots, 'leading' | 'label' | 'trailing', { active?: boolean, index: number }> +} & DynamicSlots, 'leading' | 'label' | 'description' | 'trailing', { active?: boolean, index: number }> @@ -112,7 +119,8 @@ const props = withDefaults(defineProps>(), { portal: true, modal: true, externalIcon: true, - labelKey: 'label' + labelKey: 'label', + descriptionKey: 'description' }) const emits = defineEmits() const slots = defineSlots>() @@ -142,6 +150,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.contextMenu :items="items" :portal="portal" :label-key="(labelKey as keyof NestedItem)" + :description-key="(descriptionKey as keyof NestedItem)" :checked-icon="checkedIcon" :loading-icon="loadingIcon" :external-icon="externalIcon" diff --git a/src/runtime/components/ContextMenuContent.vue b/src/runtime/components/ContextMenuContent.vue index 02bc4b1b44..a95c997b86 100644 --- a/src/runtime/components/ContextMenuContent.vue +++ b/src/runtime/components/ContextMenuContent.vue @@ -13,6 +13,7 @@ interface ContextMenuContentProps> exte portal?: boolean | string | HTMLElement sub?: boolean labelKey: GetItemKeys + descriptionKey: GetItemKeys /** * @IconifyIcon */ @@ -58,7 +59,7 @@ const { dir } = useLocale() const appConfig = useAppConfig() const portalProps = usePortal(toRef(() => props.portal)) -const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'loadingIcon', 'externalIcon', 'class', 'ui', 'uiOverride'), emits) +const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'descriptionKey', 'checkedIcon', 'loadingIcon', 'externalIcon', 'class', 'ui', 'uiOverride'), emits) const getProxySlots = () => omit(slots, ['default']) const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: ContextMenuItem, active?: boolean, index: number }>() @@ -82,12 +83,20 @@ const groups = computed(() => - - - {{ get(item, props.labelKey as string) }} - + + + + {{ get(item, props.labelKey as string) }} + + + + - + + + {{ get(item, props.descriptionKey as string) }} + + @@ -136,6 +145,7 @@ const groups = computed(() => :items="(item.children as T)" :align-offset="-4" :label-key="labelKey" + :description-key="descriptionKey" :checked-icon="checkedIcon" :loading-icon="loadingIcon" :external-icon="externalIcon" diff --git a/src/runtime/components/DropdownMenu.vue b/src/runtime/components/DropdownMenu.vue index b0b895891c..b6bdae41b3 100644 --- a/src/runtime/components/DropdownMenu.vue +++ b/src/runtime/components/DropdownMenu.vue @@ -11,6 +11,7 @@ type DropdownMenu = ComponentConfig export interface DropdownMenuItem extends Omit { label?: string + description?: string /** * @IconifyIcon */ @@ -34,7 +35,7 @@ export interface DropdownMenuItem extends Omit + ui?: Pick [key: string]: any } @@ -83,6 +84,11 @@ export interface DropdownMenuProps = A * @defaultValue 'label' */ labelKey?: GetItemKeys + /** + * The key used to get the description from the item. + * @defaultValue 'description' + */ + descriptionKey?: GetItemKeys disabled?: boolean class?: any ui?: DropdownMenu['slots'] @@ -100,10 +106,11 @@ export type DropdownMenuSlots< 'item': SlotProps 'item-leading': SlotProps 'item-label': SlotProps + 'item-description': SlotProps 'item-trailing': SlotProps 'content-top': (props?: {}) => any 'content-bottom': (props?: {}) => any -} & DynamicSlots, 'leading' | 'label' | 'trailing', { active?: boolean, index: number }> +} & DynamicSlots, 'leading' | 'label' | 'description' | 'trailing', { active?: boolean, index: number }> @@ -121,7 +128,8 @@ const props = withDefaults(defineProps>(), { portal: true, modal: true, externalIcon: true, - labelKey: 'label' + labelKey: 'label', + descriptionKey: 'description' }) const emits = defineEmits() const slots = defineSlots>() @@ -152,6 +160,7 @@ const ui = computed(() => tv({ extend: tv(theme), ...(appConfig.ui?.dropdownMenu :items="items" :portal="portal" :label-key="(labelKey as keyof NestedItem)" + :description-key="(descriptionKey as keyof NestedItem)" :checked-icon="checkedIcon" :loading-icon="loadingIcon" :external-icon="externalIcon" diff --git a/src/runtime/components/DropdownMenuContent.vue b/src/runtime/components/DropdownMenuContent.vue index bfcbd56016..51dcd5d7bc 100644 --- a/src/runtime/components/DropdownMenuContent.vue +++ b/src/runtime/components/DropdownMenuContent.vue @@ -14,6 +14,7 @@ interface DropdownMenuContentProps> ex portal?: boolean | string | HTMLElement sub?: boolean labelKey: GetItemKeys + descriptionKey: GetItemKeys /** * @IconifyIcon */ @@ -36,9 +37,9 @@ interface DropdownMenuContentEmits extends RekaDropdownMenuContentEmits {} type DropdownMenuContentSlots< A extends ArrayOrNested = ArrayOrNested, T extends NestedItem = NestedItem -> = Pick, 'item' | 'item-leading' | 'item-label' | 'item-trailing' | 'content-top' | 'content-bottom'> & { +> = Pick, 'item' | 'item-leading' | 'item-label' | 'item-description' | 'item-trailing' | 'content-top' | 'content-bottom'> & { default(props?: {}): any -} & DynamicSlots, 'leading' | 'label' | 'trailing', { active?: boolean, index: number }> +} & DynamicSlots, 'leading' | 'label' | 'description' | 'trailing', { active?: boolean, index: number }> @@ -67,7 +68,7 @@ const { dir } = useLocale() const appConfig = useAppConfig() const portalProps = usePortal(toRef(() => props.portal)) -const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'checkedIcon', 'loadingIcon', 'externalIcon', 'class', 'ui', 'uiOverride'), emits) +const contentProps = useForwardPropsEmits(reactiveOmit(props, 'sub', 'items', 'portal', 'labelKey', 'descriptionKey', 'checkedIcon', 'loadingIcon', 'externalIcon', 'class', 'ui', 'uiOverride'), emits) const getProxySlots = () => omit(slots, ['default']) const [DefineItemTemplate, ReuseItemTemplate] = createReusableTemplate<{ item: DropdownMenuItem, active?: boolean, index: number }>() @@ -91,12 +92,20 @@ const groups = computed(() => - - - {{ get(item, props.labelKey as string) }} - + + + + {{ get(item, props.labelKey as string) }} + + + + - + + + {{ get(item, props.descriptionKey as string) }} + + @@ -147,6 +156,7 @@ const groups = computed(() => :align-offset="-4" :side-offset="3" :label-key="labelKey" + :description-key="descriptionKey" :checked-icon="checkedIcon" :loading-icon="loadingIcon" :external-icon="externalIcon" diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue index 49594f32fb..f7bc475c94 100644 --- a/src/runtime/components/InputMenu.vue +++ b/src/runtime/components/InputMenu.vue @@ -13,6 +13,7 @@ type InputMenu = ComponentConfig export type InputMenuValue = AcceptableValue export type InputMenuItem = InputMenuValue | { label?: string + description?: string /** * @IconifyIcon */ @@ -27,7 +28,7 @@ export type InputMenuItem = InputMenuValue | { disabled?: boolean onSelect?(e?: Event): void class?: any - ui?: Pick + ui?: Pick [key: string]: any } @@ -117,6 +118,11 @@ export interface InputMenuProps = ArrayOr * @defaultValue 'label' */ labelKey?: GetItemKeys + /** + * When `items` is an array of objects, select the field to use as the description. + * @defaultValue 'description' + */ + descriptionKey?: GetItemKeys items?: T /** The value of the InputMenu when initially rendered. Use when you do not need to control the state of the InputMenu. */ defaultValue?: GetModelValue @@ -180,6 +186,7 @@ export interface InputMenuSlots< 'item': SlotProps 'item-leading': SlotProps 'item-label': SlotProps + 'item-description': SlotProps 'item-trailing': SlotProps 'tags-item-text': SlotProps 'tags-item-delete': SlotProps @@ -214,6 +221,7 @@ const props = withDefaults(defineProps>(), { autofocusDelay: 0, portal: true, labelKey: 'label', + descriptionKey: 'description', resetSearchTermOnBlur: true, resetSearchTermOnSelect: true, virtualize: false @@ -482,10 +490,18 @@ defineExpose({ /> - - - {{ isInputItem(item) ? get(item, props.labelKey as string) : item }} - + + + + {{ isInputItem(item) ? get(item, props.labelKey as string) : item }} + + + + + + {{ get(item, props.descriptionKey as string) }} + + diff --git a/src/runtime/components/Select.vue b/src/runtime/components/Select.vue index 67d1c0e510..322aaf60b4 100644 --- a/src/runtime/components/Select.vue +++ b/src/runtime/components/Select.vue @@ -12,6 +12,7 @@ type Select = ComponentConfig export type SelectValue = AcceptableValue export type SelectItem = SelectValue | { label?: string + description?: string /** * @IconifyIcon */ @@ -27,7 +28,7 @@ export type SelectItem = SelectValue | { disabled?: boolean onSelect?(e?: Event): void class?: any - ui?: Pick + ui?: Pick [key: string]: any } @@ -84,6 +85,11 @@ export interface SelectProps = ArrayOrNested * @defaultValue 'label' */ labelKey?: GetItemKeys + /** + * When `items` is an array of objects, select the field to use as the description. + * @defaultValue 'description' + */ + descriptionKey?: GetItemKeys items?: T /** The value of the Select when initially rendered. Use when you do not need to control the state of the Select. */ defaultValue?: GetModelValue @@ -130,6 +136,7 @@ export interface SelectSlots< 'item': SlotProps 'item-leading': SlotProps 'item-label': SlotProps + 'item-description': SlotProps 'item-trailing': SlotProps 'content-top': (props?: {}) => any 'content-bottom': (props?: {}) => any @@ -157,6 +164,7 @@ defineOptions({ inheritAttrs: false }) const props = withDefaults(defineProps>(), { valueKey: 'value' as never, labelKey: 'label', + descriptionKey: 'description', portal: true, autofocusDelay: 0 }) @@ -338,11 +346,19 @@ defineExpose({ /> - - - {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }} - - + + + + {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }} + + + + + + {{ get(item, props.descriptionKey as string) }} + + + diff --git a/src/runtime/components/SelectMenu.vue b/src/runtime/components/SelectMenu.vue index 86fb87e7a8..cdce48859f 100644 --- a/src/runtime/components/SelectMenu.vue +++ b/src/runtime/components/SelectMenu.vue @@ -12,6 +12,7 @@ type SelectMenu = ComponentConfig export type SelectMenuValue = AcceptableValue export type SelectMenuItem = SelectMenuValue | { label?: string + description?: string /** * @IconifyIcon */ @@ -26,7 +27,7 @@ export type SelectMenuItem = SelectMenuValue | { disabled?: boolean onSelect?(e?: Event): void class?: any - ui?: Pick + ui?: Pick [key: string]: any } @@ -109,6 +110,11 @@ export interface SelectMenuProps = Array * @defaultValue 'label' */ labelKey?: GetItemKeys + /** + * When `items` is an array of objects, select the field to use as the description. + * @defaultValue 'description' + */ + descriptionKey?: GetItemKeys items?: T /** The value of the SelectMenu when initially rendered. Use when you do not need to control the state of the SelectMenu. */ defaultValue?: GetModelValue @@ -177,6 +183,7 @@ export interface SelectMenuSlots< 'item': SlotProps 'item-leading': SlotProps 'item-label': SlotProps + 'item-description': SlotProps 'item-trailing': SlotProps 'content-top': (props?: {}) => any 'content-bottom': (props?: {}) => any @@ -208,6 +215,7 @@ const props = withDefaults(defineProps>(), { portal: true, searchInput: true, labelKey: 'label', + descriptionKey: 'description', resetSearchTermOnBlur: true, resetSearchTermOnSelect: true, autofocusDelay: 0, @@ -465,10 +473,18 @@ defineExpose({ /> - - - {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }} - + + + + {{ isSelectItem(item) ? get(item, props.labelKey as string) : item }} + + + + + + {{ get(item, props.descriptionKey as string) }} + + diff --git a/src/theme/command-palette.ts b/src/theme/command-palette.ts index a7e24583d9..fddd91da68 100644 --- a/src/theme/command-palette.ts +++ b/src/theme/command-palette.ts @@ -12,7 +12,7 @@ export default (options: Required) => ({ group: 'p-1 isolate', empty: 'py-6 text-center text-sm text-muted', label: 'p-1.5 text-xs font-semibold text-highlighted', - item: 'group relative w-full flex items-center gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75', + item: 'group relative w-full flex items-start gap-1.5 p-1.5 text-sm select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75', itemLeadingIcon: 'shrink-0 size-5', itemLeadingAvatar: 'shrink-0', itemLeadingAvatarSize: '2xs', @@ -23,7 +23,9 @@ export default (options: Required) => ({ itemTrailingHighlightedIcon: 'shrink-0 size-5 text-dimmed hidden group-data-highlighted:inline-flex', itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0 gap-0.5', itemTrailingKbdsSize: 'md', - itemLabel: 'truncate space-x-1 text-dimmed', + itemContent: 'flex-1 flex flex-col truncate', + itemLabel: 'truncate space-x-1 text-dimmed text-start', + itemDescription: 'truncate text-muted text-start text-xs', itemLabelBase: 'text-highlighted [&>mark]:text-inverted [&>mark]:bg-primary', itemLabelPrefix: 'text-default', itemLabelSuffix: 'text-dimmed [&>mark]:text-inverted [&>mark]:bg-primary' diff --git a/src/theme/context-menu.ts b/src/theme/context-menu.ts index 9a49e6b7e2..a91e931338 100644 --- a/src/theme/context-menu.ts +++ b/src/theme/context-menu.ts @@ -7,7 +7,7 @@ export default (options: Required) => ({ group: 'p-1 isolate', label: 'w-full flex items-center font-semibold text-highlighted', separator: '-mx-1 my-1 h-px bg-border', - item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75', + item: 'group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75', itemLeadingIcon: 'shrink-0', itemLeadingAvatar: 'shrink-0', itemLeadingAvatarSize: '', @@ -15,7 +15,9 @@ export default (options: Required) => ({ itemTrailingIcon: 'shrink-0', itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0', itemTrailingKbdsSize: '', - itemLabel: 'truncate', + itemContent: 'flex-1 flex flex-col truncate', + itemLabel: 'truncate text-start', + itemDescription: 'truncate text-muted text-start', itemLabelExternalIcon: 'inline-block size-3 align-top text-dimmed' }, variants: { @@ -44,6 +46,7 @@ export default (options: Required) => ({ item: 'p-1 text-xs gap-1', itemLeadingIcon: 'size-4', itemLeadingAvatarSize: '3xs', + itemDescription: 'text-[10px]/3', itemTrailingIcon: 'size-4', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'sm' @@ -53,6 +56,7 @@ export default (options: Required) => ({ item: 'p-1.5 text-xs gap-1.5', itemLeadingIcon: 'size-4', itemLeadingAvatarSize: '3xs', + itemDescription: 'text-[10px]/3', itemTrailingIcon: 'size-4', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'sm' @@ -62,6 +66,7 @@ export default (options: Required) => ({ item: 'p-1.5 text-sm gap-1.5', itemLeadingIcon: 'size-5', itemLeadingAvatarSize: '2xs', + itemDescription: 'text-xs', itemTrailingIcon: 'size-5', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'md' @@ -71,6 +76,7 @@ export default (options: Required) => ({ item: 'p-2 text-sm gap-2', itemLeadingIcon: 'size-5', itemLeadingAvatarSize: '2xs', + itemDescription: 'text-xs', itemTrailingIcon: 'size-5', itemTrailingKbds: 'gap-1', itemTrailingKbdsSize: 'md' @@ -80,6 +86,7 @@ export default (options: Required) => ({ item: 'p-2 text-base gap-2', itemLeadingIcon: 'size-6', itemLeadingAvatarSize: 'xs', + itemDescription: 'text-sm', itemTrailingIcon: 'size-6', itemTrailingKbds: 'gap-1', itemTrailingKbdsSize: 'lg' diff --git a/src/theme/dropdown-menu.ts b/src/theme/dropdown-menu.ts index c47b132fac..e8120ea618 100644 --- a/src/theme/dropdown-menu.ts +++ b/src/theme/dropdown-menu.ts @@ -8,7 +8,7 @@ export default (options: Required) => ({ group: 'p-1 isolate', label: 'w-full flex items-center font-semibold text-highlighted', separator: '-mx-1 my-1 h-px bg-border', - item: 'group relative w-full flex items-center select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75', + item: 'group relative w-full flex items-start select-none outline-none before:absolute before:z-[-1] before:inset-px before:rounded-md data-disabled:cursor-not-allowed data-disabled:opacity-75', itemLeadingIcon: 'shrink-0', itemLeadingAvatar: 'shrink-0', itemLeadingAvatarSize: '', @@ -16,7 +16,9 @@ export default (options: Required) => ({ itemTrailingIcon: 'shrink-0', itemTrailingKbds: 'hidden lg:inline-flex items-center shrink-0', itemTrailingKbdsSize: '', - itemLabel: 'truncate', + itemContent: 'flex-1 flex flex-col truncate', + itemLabel: 'truncate text-start', + itemDescription: 'truncate text-muted text-start', itemLabelExternalIcon: 'inline-block size-3 align-top text-dimmed' }, variants: { @@ -45,6 +47,7 @@ export default (options: Required) => ({ item: 'p-1 text-xs gap-1', itemLeadingIcon: 'size-4', itemLeadingAvatarSize: '3xs', + itemDescription: 'text-[10px]/3', itemTrailingIcon: 'size-4', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'sm' @@ -54,6 +57,7 @@ export default (options: Required) => ({ item: 'p-1.5 text-xs gap-1.5', itemLeadingIcon: 'size-4', itemLeadingAvatarSize: '3xs', + itemDescription: 'text-[10px]/3', itemTrailingIcon: 'size-4', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'sm' @@ -63,6 +67,7 @@ export default (options: Required) => ({ item: 'p-1.5 text-sm gap-1.5', itemLeadingIcon: 'size-5', itemLeadingAvatarSize: '2xs', + itemDescription: 'text-xs', itemTrailingIcon: 'size-5', itemTrailingKbds: 'gap-0.5', itemTrailingKbdsSize: 'md' @@ -72,6 +77,7 @@ export default (options: Required) => ({ item: 'p-2 text-sm gap-2', itemLeadingIcon: 'size-5', itemLeadingAvatarSize: '2xs', + itemDescription: 'text-xs', itemTrailingIcon: 'size-5', itemTrailingKbds: 'gap-1', itemTrailingKbdsSize: 'md' @@ -81,6 +87,7 @@ export default (options: Required) => ({ item: 'p-2 text-base gap-2', itemLeadingIcon: 'size-6', itemLeadingAvatarSize: 'xs', + itemDescription: 'text-sm', itemTrailingIcon: 'size-6', itemTrailingKbds: 'gap-1', itemTrailingKbdsSize: 'lg' diff --git a/src/theme/input-menu.ts b/src/theme/input-menu.ts index 5ce2d22a31..c14b27e85e 100644 --- a/src/theme/input-menu.ts +++ b/src/theme/input-menu.ts @@ -22,7 +22,9 @@ export default (options: Required) => { itemLeadingChipSize: '', itemTrailing: 'ms-auto inline-flex gap-1.5 items-center', itemTrailingIcon: 'shrink-0', + itemContent: 'flex-1 flex flex-col truncate', itemLabel: 'truncate', + itemDescription: 'truncate text-muted', tagsItem: 'px-1.5 py-0.5 rounded-sm font-medium inline-flex items-center gap-0.5 ring ring-inset ring-accented bg-elevated text-default data-disabled:cursor-not-allowed data-disabled:opacity-75', tagsItemText: 'truncate', tagsItemDelete: ['inline-flex items-center rounded-xs text-dimmed hover:text-default hover:bg-accented/75 disabled:pointer-events-none', options.theme.transitions && 'transition-colors'], @@ -54,6 +56,7 @@ export default (options: Required) => { itemLeadingAvatarSize: '3xs', itemLeadingChip: 'size-4', itemLeadingChipSize: 'sm', + itemDescription: 'text-[10px]/3', itemTrailingIcon: 'size-4', tagsItem: 'text-[10px]/3', tagsItemDeleteIcon: 'size-3', @@ -66,6 +69,7 @@ export default (options: Required) => { itemLeadingAvatarSize: '3xs', itemLeadingChip: 'size-4', itemLeadingChipSize: 'sm', + itemDescription: 'text-[10px]/3', itemTrailingIcon: 'size-4', tagsItem: 'text-[10px]/3', tagsItemDeleteIcon: 'size-3', @@ -78,6 +82,7 @@ export default (options: Required) => { itemLeadingAvatarSize: '2xs', itemLeadingChip: 'size-5', itemLeadingChipSize: 'md', + itemDescription: 'text-xs', itemTrailingIcon: 'size-5', tagsItem: 'text-xs', tagsItemDeleteIcon: 'size-3.5', @@ -90,6 +95,7 @@ export default (options: Required) => { itemLeadingAvatarSize: '2xs', itemLeadingChip: 'size-5', itemLeadingChipSize: 'md', + itemDescription: 'text-xs', itemTrailingIcon: 'size-5', tagsItem: 'text-xs', tagsItemDeleteIcon: 'size-3.5', @@ -102,6 +108,7 @@ export default (options: Required) => { itemLeadingAvatarSize: 'xs', itemLeadingChip: 'size-6', itemLeadingChipSize: 'lg', + itemDescription: 'text-sm', itemTrailingIcon: 'size-6', tagsItem: 'text-sm', tagsItemDeleteIcon: 'size-4', diff --git a/src/theme/select.ts b/src/theme/select.ts index d46a41ad6d..5406d67ec1 100644 --- a/src/theme/select.ts +++ b/src/theme/select.ts @@ -25,7 +25,9 @@ export default (options: Required) => { itemLeadingChipSize: '', itemTrailing: 'ms-auto inline-flex gap-1.5 items-center', itemTrailingIcon: 'shrink-0', - itemLabel: 'truncate' + itemContent: 'flex-1 flex flex-col truncate', + itemLabel: 'truncate', + itemDescription: 'truncate text-muted' }, variants: { ...fieldGroupVariant, @@ -37,6 +39,7 @@ export default (options: Required) => { itemLeadingAvatarSize: '3xs', itemLeadingChip: 'size-4', itemLeadingChipSize: 'sm', + itemDescription: 'text-[10px]/3', itemTrailingIcon: 'size-4', empty: 'p-1 text-xs' }, @@ -47,6 +50,7 @@ export default (options: Required) => { itemLeadingAvatarSize: '3xs', itemLeadingChip: 'size-4', itemLeadingChipSize: 'sm', + itemDescription: 'text-[10px]/3', itemTrailingIcon: 'size-4', empty: 'p-1.5 text-xs' }, @@ -57,6 +61,7 @@ export default (options: Required) => { itemLeadingAvatarSize: '2xs', itemLeadingChip: 'size-5', itemLeadingChipSize: 'md', + itemDescription: 'text-xs', itemTrailingIcon: 'size-5', empty: 'p-1.5 text-sm' }, @@ -67,6 +72,7 @@ export default (options: Required) => { itemLeadingAvatarSize: '2xs', itemLeadingChip: 'size-5', itemLeadingChipSize: 'md', + itemDescription: 'text-xs', itemTrailingIcon: 'size-5', empty: 'p-2 text-sm' }, @@ -77,6 +83,7 @@ export default (options: Required) => { itemLeadingAvatarSize: 'xs', itemLeadingChip: 'size-6', itemLeadingChipSize: 'lg', + itemDescription: 'text-sm', itemTrailingIcon: 'size-6', empty: 'p-2 text-base' } diff --git a/test/components/CommandPalette.spec.ts b/test/components/CommandPalette.spec.ts index e76a24c725..4238c08dda 100644 --- a/test/components/CommandPalette.spec.ts +++ b/test/components/CommandPalette.spec.ts @@ -62,15 +62,49 @@ describe('CommandPalette', () => { }] }] + const groupsWithDescription = [{ + id: 'actions', + items: [{ + label: 'Create Project', + description: 'Start a new project from scratch', + icon: 'i-lucide-folder-plus', + kbds: ['meta', 'N'] + }, { + label: 'Open File', + description: 'Browse and open an existing file', + icon: 'i-lucide-file', + kbds: ['meta', 'O'] + }, { + label: 'Settings', + description: 'Configure your preferences', + icon: 'i-lucide-settings', + kbds: ['meta', ','] + }] + }, { + id: 'recent', + label: 'Recent Files', + items: [{ + label: 'index.vue', + description: '/src/pages/index.vue', + icon: 'i-lucide-file-code' + }, { + label: 'app.vue', + description: '/app.vue', + icon: 'i-lucide-file-code' + }] + }] + const props = { groups } it.each([ // Props ['with groups', { props }], + ['with groups with description', { props: { groups: groupsWithDescription } }], ['without data', {}], ['with modelValue', { props: { ...props, modelValue: groups[2]?.items[0] } }], ['with defaultValue', { props: { ...props, defaultValue: groups[2]?.items[0] } }], ['with labelKey', { props: { ...props, labelKey: 'icon' } }], + ['with descriptionKey', { props: { groups: groupsWithDescription, descriptionKey: 'label' } }], ['with placeholder', { props: { ...props, placeholder: 'Search...' } }], ['with disabled', { props: { ...props, disabled: true } }], ['with icon', { props: { ...props, icon: 'i-lucide-terminal' } }], @@ -88,6 +122,7 @@ describe('CommandPalette', () => { ['with item slot', { props, slots: { item: () => 'Item slot' } }], ['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }], ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }], + ['with item-description slot', { props: { groups: groupsWithDescription }, slots: { 'item-description': () => 'Item description slot' } }], ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }], ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }], ['with close slot', { props: { ...props, close: true }, slots: { close: () => 'Close slot' } }], diff --git a/test/components/ContextMenu.spec.ts b/test/components/ContextMenu.spec.ts index b19aa6f2ba..279f2e826e 100644 --- a/test/components/ContextMenu.spec.ts +++ b/test/components/ContextMenu.spec.ts @@ -78,12 +78,40 @@ describe('ContextMenu', () => { }] ] + const itemsWithDescription = [ + [{ + label: 'Profile', + description: 'View and edit your profile', + icon: 'i-lucide-user', + children: [{ + label: 'Settings', + description: 'Configure your preferences', + icon: 'i-lucide-settings' + }, { + label: 'Logout', + description: 'Sign out of your account', + icon: 'i-lucide-log-out' + }] + }], [{ + label: 'Dashboard', + description: 'Main overview page', + color: 'primary', + kbds: ['meta', 'D'] + }, { + label: 'Analytics', + description: 'View detailed statistics', + kbds: ['shift', 'meta', 'A'] + }] + ] + const props = { portal: false, items } it.each([ // Props ['with items', { props }], + ['with items with description', { props: { ...props, items: itemsWithDescription } }], ['with labelKey', { props: { ...props, labelKey: 'icon' } }], + ['with descriptionKey', { props: { ...props, items: itemsWithDescription, descriptionKey: 'label' } }], ['with disabled', { props: { ...props, disabled: true } }], ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]), ['with externalIcon', { props: { ...props, externalIcon: 'i-lucide-external-link' } }], @@ -95,6 +123,7 @@ describe('ContextMenu', () => { ['with item slot', { props, slots: { item: () => 'Item slot' } }], ['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }], ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }], + ['with item-description slot', { props: { ...props, items: itemsWithDescription }, slots: { 'item-description': () => 'Item description slot' } }], ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }], ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: ContextMenuProps, slots?: Partial }) => { diff --git a/test/components/DropdownMenu.spec.ts b/test/components/DropdownMenu.spec.ts index 59b5807ccc..ee5d337098 100644 --- a/test/components/DropdownMenu.spec.ts +++ b/test/components/DropdownMenu.spec.ts @@ -87,12 +87,36 @@ describe('DropdownMenu', () => { }] ] + const itemsWithDescription = [ + [{ + label: 'My account', + description: 'Account settings', + avatar: { + src: 'https://github.com/benjamincanac.png' + }, + type: 'label' + }], + [{ + label: 'Profile', + description: 'View your profile', + icon: 'i-lucide-user', + slot: 'custom' + }, { + label: 'Billing', + description: 'Manage billing', + icon: 'i-lucide-credit-card', + kbds: ['meta', 'b'] + }] + ] + const props = { open: true, portal: false, items } it.each([ // Props ['with items', { props }], + ['with items with description', { props: { ...props, items: itemsWithDescription } }], ['with labelKey', { props: { ...props, labelKey: 'icon' } }], + ['with descriptionKey', { props: { ...props, descriptionKey: 'description' } }], ['with disabled', { props: { ...props, disabled: true } }], ['with arrow', { props: { ...props, arrow: true } }], ...sizes.map((size: string) => [`with size ${size}`, { props: { ...props, size } }]), @@ -105,6 +129,7 @@ describe('DropdownMenu', () => { ['with item slot', { props, slots: { item: () => 'Item slot' } }], ['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }], ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }], + ['with item-description slot', { props: { ...props, items: itemsWithDescription }, slots: { 'item-description': () => 'Item description slot' } }], ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }], ['with custom slot', { props, slots: { custom: () => 'Custom slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: DropdownMenuProps, slots?: Partial }) => { diff --git a/test/components/InputMenu.spec.ts b/test/components/InputMenu.spec.ts index d5b03599a4..857a1348cc 100644 --- a/test/components/InputMenu.spec.ts +++ b/test/components/InputMenu.spec.ts @@ -34,15 +34,19 @@ describe('InputMenu', () => { icon: 'i-lucide-circle-x' }] + const itemsWithDescription = [...items.map(item => ({ ...item, description: 'Description' }))] + const props = { open: true, portal: false, items } it.each([ // Props ['with items', { props }], + ['with items with description', { props: { ...props, items: itemsWithDescription } }], ['with modelValue', { props: { ...props, modelValue: items[0] } }], ['with defaultValue', { props: { ...props, defaultValue: items[0] } }], ['with valueKey', { props: { ...props, valueKey: 'value' } }], ['with labelKey', { props: { ...props, labelKey: 'value' } }], + ['with descriptionKey', { props: { ...props, descriptionKey: 'description' } }], ['with multiple', { props: { ...props, multiple: true } }], ['with multiple and modelValue', { props: { ...props, multiple: true, modelValue: [items[0], items[1]] } }], ['with id', { props: { ...props, id: 'id' } }], @@ -81,6 +85,7 @@ describe('InputMenu', () => { ['with item slot', { props, slots: { item: () => 'Item slot' } }], ['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }], ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }], + ['with item-description slot', { props: { ...props, items: itemsWithDescription }, slots: { 'item-description': () => 'Item description slot' } }], ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }], ['with create-item-label slot', { props: { ...props, searchTerm: 'New value', createItem: true }, slots: { 'create-item-label': () => 'Create item slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: InputMenuProps, slots?: Partial }) => { diff --git a/test/components/Select.spec.ts b/test/components/Select.spec.ts index 48cde905a1..de82b54ca8 100644 --- a/test/components/Select.spec.ts +++ b/test/components/Select.spec.ts @@ -34,15 +34,19 @@ describe('Select', () => { icon: 'i-lucide-circle-x' }] + const itemsWithDescription = [...items.map(item => ({ ...item, description: 'Description' }))] + const props = { open: true, portal: false, items } it.each([ // Props ['with items', { props }], + ['with items with description', { props: { ...props, items: itemsWithDescription } }], ['with modelValue', { props: { ...props, modelValue: items[0]?.value } }], ['with defaultValue', { props: { ...props, defaultValue: items[0]?.value } }], ['with valueKey', { props: { ...props, valueKey: 'label' } }], ['with labelKey', { props: { ...props, labelKey: 'value' } }], + ['with descriptionKey', { props: { ...props, descriptionKey: 'description' } }], ['with multiple', { props: { ...props, multiple: true } }], ['with multiple and modelValue', { props: { ...props, multiple: true, modelValue: [items[0], items[1]] } }], ['with id', { props: { ...props, id: 'id' } }], @@ -78,6 +82,7 @@ describe('Select', () => { ['with item slot', { props, slots: { item: () => 'Item slot' } }], ['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }], ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }], + ['with item-description slot', { props: { ...props, items: itemsWithDescription }, slots: { 'item-description': () => 'Item description slot' } }], ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SelectProps, slots?: Partial }) => { const html = await ComponentRender(nameOrHtml, options, Select) diff --git a/test/components/SelectMenu.spec.ts b/test/components/SelectMenu.spec.ts index 214c299142..6c0a7c1c6c 100644 --- a/test/components/SelectMenu.spec.ts +++ b/test/components/SelectMenu.spec.ts @@ -34,15 +34,19 @@ describe('SelectMenu', () => { icon: 'i-lucide-circle-x' }] + const itemsWithDescription = [...items.map(item => ({ ...item, description: 'Description' }))] + const props = { open: true, portal: false, items } it.each([ // Props ['with items', { props }], + ['with items with description', { props: { ...props, items: itemsWithDescription } }], ['with modelValue', { props: { ...props, modelValue: items[0] } }], ['with defaultValue', { props: { ...props, defaultValue: items[0] } }], ['with valueKey', { props: { ...props, valueKey: 'value' } }], ['with labelKey', { props: { ...props, labelKey: 'value' } }], + ['with descriptionKey', { props: { ...props, descriptionKey: 'description' } }], ['with multiple', { props: { ...props, multiple: true } }], ['with multiple and modelValue', { props: { ...props, multiple: true, modelValue: [items[0], items[1]] } }], ['with id', { props: { ...props, id: 'id' } }], @@ -83,6 +87,7 @@ describe('SelectMenu', () => { ['with item slot', { props, slots: { item: () => 'Item slot' } }], ['with item-leading slot', { props, slots: { 'item-leading': () => 'Item leading slot' } }], ['with item-label slot', { props, slots: { 'item-label': () => 'Item label slot' } }], + ['with item-description slot', { props: { ...props, items: itemsWithDescription }, slots: { 'item-description': () => 'Item description slot' } }], ['with item-trailing slot', { props, slots: { 'item-trailing': () => 'Item trailing slot' } }], ['with create-item-label slot', { props: { ...props, searchTerm: 'New value', createItem: true }, slots: { 'create-item-label': () => 'Create item slot' } }] ])('renders %s correctly', async (nameOrHtml: string, options: { props?: SelectMenuProps, slots?: Partial }) => { diff --git a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap index 622b340cb0..9d9e54ce43 100644 --- a/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap +++ b/test/components/__snapshots__/CommandPalette-vue.spec.ts.snap @@ -8,27 +8,36 @@ exports[`CommandPalette > renders with as correctly 1`] = `
@@ -45,27 +54,36 @@ exports[`CommandPalette > renders with class correctly 1`] = `
@@ -80,27 +98,36 @@ exports[`CommandPalette > renders with close correctly 1`] = `
@@ -115,27 +142,36 @@ exports[`CommandPalette > renders with close slot correctly 1`] = `
@@ -150,27 +186,36 @@ exports[`CommandPalette > renders with closeIcon correctly 1`] = `
@@ -187,25 +232,33 @@ exports[`CommandPalette > renders with custom slot correctly 1`] = `
@@ -222,27 +275,62 @@ exports[`CommandPalette > renders with defaultValue correctly 1`] = `
+
+ + +" +`; + +exports[`CommandPalette > renders with descriptionKey correctly 1`] = ` +"
+
+ +
+
+
@@ -259,27 +347,36 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
@@ -296,27 +393,36 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
@@ -333,27 +439,36 @@ exports[`CommandPalette > renders with footer slot correctly 1`] = `
@@ -370,27 +485,62 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
+
+ + +
" +`; + +exports[`CommandPalette > renders with groups with description correctly 1`] = ` +"
+
+ +
+
+
@@ -407,27 +557,36 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
@@ -444,15 +603,42 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
+
+ + +
" +`; + +exports[`CommandPalette > renders with item-description slot correctly 1`] = ` +"
+
+ +
+
+
@@ -469,27 +655,36 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
@@ -506,21 +701,33 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
@@ -537,21 +744,33 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
@@ -568,30 +787,34 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `
" +`; + +exports[`CommandPalette > renders with descriptionKey correctly 1`] = ` +"
+
+ +
+
+
@@ -265,27 +353,36 @@ exports[`CommandPalette > renders with disabled correctly 1`] = `
@@ -302,27 +399,36 @@ exports[`CommandPalette > renders with empty slot correctly 1`] = `
@@ -339,27 +445,36 @@ exports[`CommandPalette > renders with footer slot correctly 1`] = `
@@ -376,27 +491,62 @@ exports[`CommandPalette > renders with groups correctly 1`] = `
+
+ + +
" +`; + +exports[`CommandPalette > renders with groups with description correctly 1`] = ` +"
+
+ +
+
+
@@ -413,27 +563,36 @@ exports[`CommandPalette > renders with icon correctly 1`] = `
@@ -450,15 +609,42 @@ exports[`CommandPalette > renders with item slot correctly 1`] = `
+
+ + +
" +`; + +exports[`CommandPalette > renders with item-description slot correctly 1`] = ` +"
+
+ +
+
+
@@ -475,27 +661,36 @@ exports[`CommandPalette > renders with item-label slot correctly 1`] = `
@@ -512,21 +707,33 @@ exports[`CommandPalette > renders with item-leading slot correctly 1`] = `
@@ -543,21 +750,33 @@ exports[`CommandPalette > renders with item-trailing slot correctly 1`] = `
@@ -574,30 +793,34 @@ exports[`CommandPalette > renders with labelKey correctly 1`] = `