vueless 1.4.12-beta.8 → 1.5.0

package/ui.dropdown/tests/UDropdown.test-d.ts

@@ -0,0 +1,61 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownSlots<UserOption>["option"]>>[0];
+type DefaultProps = Parameters<NonNullable<UDropdownSlots<UserOption>["default"]>>[0];
+
+describe("UDropdown types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* The option slots are forwarded to `UListbox`, whose `filterGroups` concats nested group
+     * members into the flat list — a member need not carry the parent's members. */
+    type BeforeProps = Parameters<NonNullable<UDropdownSlots<UserOption>["before-option"]>>[0];
+    type AfterProps = Parameters<NonNullable<UDropdownSlots<UserOption>["after-option"]>>[0];
+
+    type GroupMember = { value: string; title: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterProps["option"]>();
+  });
+
+  it("keeps the full guarantee on selectedOptions, which is a plain subset", () => {
+    /* `selectedOptions` filters `props.options` and injects nothing (`UDropdown.vue:93`), so
+     * unlike the option slots it is NOT Partial. */
+    expectTypeOf<DefaultProps["selectedOptions"]>().toEqualTypeOf<UserOption[]>();
+    expectTypeOf<DefaultProps["selectedOptions"][number]["label"]>().toEqualTypeOf<string>();
+  });
+
+  it("types displayLabel as possibly undefined", () => {
+    /* It joins `option[labelKey]` lookups, which are `undefined` for an option without that key. */
+    expectTypeOf<DefaultProps["displayLabel"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});

package/ui.dropdown/tests/UDropdown.test.ts

@@ -3,7 +3,14 @@ import { describe, it, expect } from "vitest";
 import { nextTick } from "vue";
 
 import UDropdown from "../UDropdown.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
+
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
 
 describe("UDropdown.vue", () => {
   const defaultOptions = [

package/ui.dropdown/tests/UDropdownTypes.vue

@@ -0,0 +1,111 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <UDropdown :options="options">
+    <!-- Forwarded verbatim to `UListbox`, so they inherit its group flattening — a flattened
+         member need not carry the parent's members, hence the optional types. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <!-- `selectedOptions` is a `filter`ed subset of `props.options` with nothing injected, so it
+         keeps the full (non-Partial) guarantee — unlike the option slots above. -->
+    <template #default="{ selectedOptions, opened }">
+      {{ expectString(selectedOptions[0].label) }}
+      {{ expectNumber(selectedOptions[0].qty) }}
+      {{ expectBoolean(opened) }}
+    </template>
+
+    <template #empty>empty</template>
+  </UDropdown>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdown :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdown>
+
+  <UDropdown :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdown>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdown
+    :options="groupedOptions"
+    group-label-key="groupName"
+    group-value-key="children"
+    label-key="label"
+  >
+    <template #option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+    <template #before-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `qty`. -->
+      {{ expectNumber(option.qty) }}
+    </template>
+    <template #after-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `groupName`. -->
+      {{ expectString(option.groupName) }}
+    </template>
+  </UDropdown>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdown from "../UDropdown.vue";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+/* A group whose members lack the parent's members — exactly what `filterGroups` flattens. */
+const groupedOptions = [
+  {
+    groupName: "Group A",
+    label: "Group A",
+    qty: 1,
+    children: [{ value: "c1", title: "Child" }],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectBoolean(value: boolean) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>

package/ui.dropdown/types.ts

@@ -1,11 +1,35 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption, SlotOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/**
+ * The option slots are forwarded verbatim to `UListbox`, so they inherit its flattening: with
+ * `groupValueKey` set, `filterGroups` concats nested group members into the list the slots iterate
+ * and those members need not carry the parent's members. Hence `SlotOption`, which is `Partial`.
+ *
+ * `selectedOptions` is different — it is a `filter`ed subset of `props.options` (`UDropdown.vue:91`)
+ * with no synthetic entry, so it keeps the full `TOption` guarantee.
+ */
+export interface UDropdownSlots<TOption extends ListboxOption = ListboxOption> {
+  default?: (props: {
+    /* `displayLabel` joins `option[labelKey]` lookups, which yield `undefined` for an option
+       without that key — so it is only `string` when the label is resolvable. */
+    opened: boolean;
+    displayLabel: string | undefined;
+    fullLabel: string;
+    selectedOptions: TOption[];
+  }) => unknown;
+  dropdown?: (props: { opened: boolean; contentClasses: string | undefined }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends ListboxOption = ListboxOption> {
   /**
    * Selected dropdown value.
    */
@@ -24,7 +48,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

package/ui.dropdown-badge/UDropdownBadge.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { computed, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
@@ -11,11 +11,13 @@ import UDropdown from "../ui.dropdown/UDropdown.vue";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UDropdownBadgeSlots } from "./types";
+import type { ListboxOption } from "../ui.form-listbox/types";
+import type { ComponentExposed } from "../types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -59,7 +61,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-type UDropdownRef = InstanceType<typeof UDropdown>;
+defineSlots<UDropdownBadgeSlots<TOption>>();
+
+/* `UDropdown` is generic, so its type is a function — `InstanceType` does not apply. */
+type UDropdownRef = ComponentExposed<typeof UDropdown>;
 
 const dropdownRef = useTemplateRef<UDropdownRef>("dropdown");
 

package/ui.dropdown-badge/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdownBadge from "../../ui.dropdown-badge/UDropdownBadge.vue";
+import UDropdownBadgeComponent from "../../ui.dropdown-badge/UDropdownBadge.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -24,6 +24,11 @@ import emilyDavis from "../../ui.form-select/storybook/assets/images/emily-davis
 import alexJohnson from "../../ui.form-select/storybook/assets/images/alex-johnson.png";
 import patMorgan from "../../ui.form-select/storybook/assets/images/pat-morgan.png";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDropdownBadge = UDropdownBadgeComponent as typeof UDropdownBadgeComponent & {
+  __name: string;
+};
+
 interface DefaultUDropdownBadgeArgs extends Props {
   slotTemplate?: string;
 }

package/ui.dropdown-badge/tests/UDropdownBadge.test-d.ts

@@ -0,0 +1,55 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownBadgeSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["option"]>>[0];
+
+describe("UDropdownBadge types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* Forwarded through `UDropdown` to `UListbox`, whose `filterGroups` concats nested group
+     * members into the flat list — a member need not carry the parent's members. */
+    type BeforeProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["before-option"]>>[0];
+    type AfterProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["after-option"]>>[0];
+
+    type GroupMember = { value: string; title: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterProps["option"]>();
+  });
+
+  it("types the default slot label as possibly undefined", () => {
+    /* It is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. */
+    type DefaultProps = Parameters<NonNullable<UDropdownBadgeSlots<UserOption>["default"]>>[0];
+
+    expectTypeOf<DefaultProps["label"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});

package/ui.dropdown-badge/tests/UDropdownBadge.test.ts

@@ -4,10 +4,17 @@ import { describe, it, expect } from "vitest";
 import UDropdownBadge from "../UDropdownBadge.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
 
 import type { Props } from "../types";
 
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
+
 describe("UDropdownBadge.vue", () => {
   const defaultOptions = [
     { value: 1, label: "Option 1" },

package/ui.dropdown-badge/tests/UDropdownBadgeTypes.vue

@@ -0,0 +1,107 @@
+<!-- Type-level fixture: checked by `npm run ts:check`, never mounted.
+     Proves slot props infer from the `options` prop at a real call site. -->
+<template>
+  <UDropdownBadge :options="options">
+    <!-- Forwarded through `UDropdown` to `UListbox`, so they inherit its group flattening — a
+         flattened member need not carry the parent's members, hence the optional types. -->
+    <template #before-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectOptionalNumber(option.qty) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #after-option="{ option, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #empty>empty</template>
+  </UDropdownBadge>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UDropdownBadge :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UDropdownBadge>
+
+  <UDropdownBadge :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UDropdownBadge>
+
+  <!-- `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. -->
+  <UDropdownBadge :options="options">
+    <template #default="{ label }">
+      <!-- @vue-expect-error the label is `undefined` when it cannot be resolved. -->
+      {{ expectString(label) }}
+    </template>
+  </UDropdownBadge>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present. -->
+  <UDropdownBadge
+    :options="groupedOptions"
+    group-label-key="groupName"
+    group-value-key="children"
+    label-key="label"
+  >
+    <template #option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+    <template #before-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `qty`. -->
+      {{ expectNumber(option.qty) }}
+    </template>
+    <template #after-option="{ option }">
+      <!-- @vue-expect-error a flattened group member need not carry `groupName`. -->
+      {{ expectString(option.groupName) }}
+    </template>
+  </UDropdownBadge>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UDropdownBadge from "../UDropdownBadge.vue";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+/* A group whose members lack the parent's members — exactly what `filterGroups` flattens. */
+const groupedOptions = [
+  {
+    groupName: "Group A",
+    label: "Group A",
+    qty: 1,
+    children: [{ value: "c1", title: "Child" }],
+  },
+];
+
+function expectString(value: string) {
+  return value;
+}
+
+function expectNumber(value: number) {
+  return value;
+}
+
+function expectOptionalString(value: string | undefined) {
+  return value;
+}
+
+function expectOptionalNumber(value: number | undefined) {
+  return value;
+}
+</script>

package/ui.dropdown-badge/types.ts

@@ -1,11 +1,25 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
+import type { ListboxOption, SlotOption } from "../ui.form-listbox/types";
 import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/* Option slots are forwarded through `UDropdown` to `UListbox`, inheriting its group flattening —
+   a flattened member need not carry the parent's members, so `SlotOption` is `Partial`. */
+export interface UDropdownBadgeSlots<TOption extends ListboxOption = ListboxOption> {
+  /* `label` is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups — `undefined`
+     when the label cannot be resolved. */
+  default?: (props: { label: string | undefined; opened: boolean }) => unknown;
+  left?: (props: { opened: boolean }) => unknown;
+  toggle?: (props: { opened: boolean }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends ListboxOption = ListboxOption> {
   /**
    * Selected badge.
    */
@@ -24,7 +38,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

package/ui.dropdown-button/UDropdownButton.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { computed, useTemplateRef } from "vue";
 
 import { useUI } from "../composables/useUI";
@@ -11,11 +11,13 @@ import UDropdown from "../ui.dropdown/UDropdown.vue";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, Config } from "./types";
+import type { Props, Config, UDropdownButtonSlots } from "./types";
+import type { ListboxOption } from "../ui.form-listbox/types";
+import type { ComponentExposed } from "../types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -59,7 +61,10 @@ const emit = defineEmits([
   "update:search",
 ]);
 
-type UDropdownRef = InstanceType<typeof UDropdown>;
+defineSlots<UDropdownButtonSlots<TOption>>();
+
+/* `UDropdown` is generic, so its type is a function — `InstanceType` does not apply. */
+type UDropdownRef = ComponentExposed<typeof UDropdown>;
 
 const dropdownRef = useTemplateRef<UDropdownRef>("dropdown");
 

package/ui.dropdown-button/storybook/stories.ts

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UDropdownButton from "../../ui.dropdown-button/UDropdownButton.vue";
+import UDropdownButtonComponent from "../../ui.dropdown-button/UDropdownButton.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
@@ -24,6 +24,11 @@ import emilyDavis from "../../ui.form-select/storybook/assets/images/emily-davis
 import alexJohnson from "../../ui.form-select/storybook/assets/images/alex-johnson.png";
 import patMorgan from "../../ui.form-select/storybook/assets/images/pat-morgan.png";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const UDropdownButton = UDropdownButtonComponent as typeof UDropdownButtonComponent & {
+  __name: string;
+};
+
 interface DefaultUDropdownButtonArgs extends Props {
   slotTemplate?: string;
 }

package/ui.dropdown-button/tests/UDropdownButton.test-d.ts

@@ -0,0 +1,57 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { Props, UDropdownButtonSlots } from "../types";
+import type { ListboxOption, SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionProps = Parameters<NonNullable<UDropdownButtonSlots<UserOption>["option"]>>[0];
+
+describe("UDropdownButton types", () => {
+  it("infers the caller's option shape in a forwarded option slot", () => {
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+    expectTypeOf<OptionProps["index"]>().toEqualTypeOf<number>();
+  });
+
+  it("does not expose undeclared option properties to a slot", () => {
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* Forwarded through `UDropdown` to `UListbox`, whose `filterGroups` concats nested group
+     * members into the flat list — a member need not carry the parent's members. */
+    type BeforeProps = Parameters<
+      NonNullable<UDropdownButtonSlots<UserOption>["before-option"]>
+    >[0];
+    type AfterProps = Parameters<NonNullable<UDropdownButtonSlots<UserOption>["after-option"]>>[0];
+
+    type GroupMember = { value: string; title: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterProps["option"]>();
+  });
+
+  it("types the default slot label as possibly undefined", () => {
+    /* It is `UDropdown`'s `displayLabel`, a join of `option[labelKey]` lookups. */
+    type DefaultProps = Parameters<NonNullable<UDropdownButtonSlots<UserOption>["default"]>>[0];
+
+    expectTypeOf<DefaultProps["label"]>().toEqualTypeOf<string | undefined>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});

package/ui.dropdown-button/tests/UDropdownButton.test.ts

@@ -4,10 +4,17 @@ import { describe, it, expect } from "vitest";
 import UDropdownButton from "../UDropdownButton.vue";
 import UButton from "../../ui.button/UButton.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
 
 import type { Props } from "../types";
 
+import type { ComponentProps } from "../../types";
+
+/* Generic SFCs are typed as a function, which `findComponent` does not accept. */
+const UListbox = UListboxComponent as unknown as new () => {
+  $props: ComponentProps<typeof UListboxComponent>;
+};
+
 describe("UDropdownButton.vue", () => {
   const defaultOptions = [
     { value: 1, label: "Option 1" },