vueless 1.4.12-beta.2 → 1.4.12-beta.21

package/ui.form-radio-group/URadioGroup.vue

@@ -10,7 +10,7 @@ import URadio from "../ui.form-radio/URadio.vue";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Props, SetRadioGroupSelectedItem, Config } from "./types";
+import type { Props, BaseOption, SetRadioGroupSelectedItem, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
 
@@ -31,6 +31,11 @@ const emit = defineEmits([
 
 const listRef = useTemplateRef<HTMLDivElement>("list");
 
+/* Indexable view of the options for `labelKey` / `valueKey` lookups. */
+const keyedOptions = computed(
+  () => props.options as (BaseOption & Record<string, BaseOption["value"]>)[],
+);
+
 const selectedItem = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
@@ -57,7 +62,14 @@ defineExpose({
  * Get element / nested component attributes for each config token ✨
  * Applies: `class`, `config`, redefined default `props` and dev `vl-...` attributes.
  */
-const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(defaultConfig);
+const mutatedProps = computed(() => ({
+  label: Boolean(props.label),
+}));
+
+const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Config>(
+  defaultConfig,
+  mutatedProps,
+);
 </script>
 
 <template>
@@ -99,7 +111,7 @@ const { getDataTest, groupLabelAttrs, listAttrs, groupRadioAttrs } = useUI<Confi
       <!-- @slot Use it to add URadio directly. -->
       <slot>
         <URadio
-          v-for="(option, index) in options"
+          v-for="(option, index) in keyedOptions"
           :key="index"
           :model-value="selectedItem"
           :value="option[valueKey]"

package/ui.form-radio-group/config.ts

@@ -5,11 +5,16 @@ export default /*tw*/ {
     base: "flex flex-col",
     variants: {
       size: {
-        sm: "gap-1.5 mt-1",
-        md: "gap-2 mt-1.5",
-        lg: "gap-2.5 mt-2",
+        sm: "gap-2",
+        md: "gap-2",
+        lg: "gap-2.5",
       },
     },
+    compoundVariants: [
+      { size: "sm", label: true, class: "mt-1" },
+      { size: "md", label: true, class: "mt-1.5" },
+      { size: "lg", label: true, class: "mt-2" },
+    ],
   },
   defaults: {
     color: "primary",

package/ui.form-radio-group/types.ts

@@ -10,9 +10,8 @@ export interface BaseOption {
   description?: string;
 }
 
-export interface Option extends BaseOption {
-  [key: string]: string | number | boolean | UnknownArray | UnknownObject | undefined;
-}
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type Option = BaseOption & (object | UnknownObject);
 
 export type SetRadioGroupSelectedItem =
   | ((value: string | number | boolean | UnknownArray | UnknownObject) => void)

package/ui.form-select/USelect.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends SelectOption">
 import { ref, computed, nextTick, watch, useSlots, onMounted, useId, useTemplateRef } from "vue";
 
 import UIcon from "../ui.image-icon/UIcon.vue";
@@ -19,12 +19,13 @@ import defaultConfig from "./config";
 import { COMPONENT_NAME, DIRECTION, KEYS, MULTIPLE_VARIANTS } from "./constants";
 
 import type { Option, Config as UListboxConfig } from "../ui.form-listbox/types";
-import type { Props, Config } from "./types";
-import type { KeyAttrsWithConfig } from "../types";
+import type { Props, Config, SelectOption, USelectSlots, SelectedSlotOption } from "./types";
+import type { ComponentPublicInstance } from "vue";
+import type { ComponentExposed, KeyAttrsWithConfig } from "../types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props<TOption>>(), {
   ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
   options: () => [],
   modelValue: "",
@@ -97,12 +98,17 @@ const emit = defineEmits([
   "change",
 ]);
 
+defineSlots<USelectSlots<TOption>>();
+
 const slots = useSlots();
 
 const isOpen = ref(false);
 const preferredOpenDirection = ref(DIRECTION.bottom);
 
-const listboxRef = useTemplateRef<InstanceType<typeof UListbox>>("listbox");
+/* `UListbox` is generic, so its type is a function — `InstanceType` does not apply. */
+const listboxRef = useTemplateRef<ComponentExposed<typeof UListbox> & ComponentPublicInstance>(
+  "listbox",
+);
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const labelComponentRef = useTemplateRef<InstanceType<typeof ULabel>>("labelComponent");
 const leftSlotWrapperRef = useTemplateRef<HTMLDivElement>("leftSlotWrapper");
@@ -135,7 +141,7 @@ const dropdownValue = computed({
     emit("update:modelValue", value);
     emit("change", { value, options: props.options });
 
-    if (!props.multiple && props.closeOnSelect) deactivate();
+    if (props.closeOnSelect) deactivate();
   },
 });
 
@@ -151,16 +157,24 @@ const isMultipleBadgeVariant = computed(
   () => props.multiple && props.multipleVariant === MULTIPLE_VARIANTS.badge,
 );
 
+/* Indexable view of the options — `labelKey` / `valueKey` lookups need an index signature. */
+const listboxOptions = computed(() => props.options as Option[]);
+
+/* Same array, keeping `TOption` so the forwarded `UListbox` option slots infer the caller's shape. */
+const typedListboxOptions = computed(() => props.options);
+
 const localValue = computed<Option | Option[]>(() => {
   if (!props.multiple) {
     const [singleValue] = Array.isArray(props.modelValue) ? props.modelValue : [props.modelValue];
 
-    return getCurrentOption(props.options, singleValue, props.valueKey, props.groupValueKey);
+    return getCurrentOption(listboxOptions.value, singleValue, props.valueKey, props.groupValueKey);
   }
 
   return props.modelValue && Array.isArray(props.modelValue)
     ? (props.modelValue
-        .map((value) => getCurrentOption(props.options, value, props.valueKey, props.groupValueKey))
+        .map((value) =>
+          getCurrentOption(listboxOptions.value, value, props.valueKey, props.groupValueKey),
+        )
         .filter(Boolean) as Option[])
     : [];
 });
@@ -179,6 +193,21 @@ const selectedOptions = computed(() => {
   };
 });
 
+/* Slot-facing views of the values above. The internals keep `Option` because `labelKey` /
+ * `valueKey` are runtime strings and need its index signature; slots get the caller's shape.
+ * The narrowing cannot over-promise: `SelectedSlotOption` makes every member optional, which is
+ * exactly what the runtime delivers — a probe records a bare `{}` at `selected-option`, `left` and
+ * `right` when no option matches `modelValue`, and a `{}` array element in `multiple` mode. */
+const slotSelectedOption = computed(() => selectedOption.value as SelectedSlotOption<TOption>);
+
+const slotSelectedOptions = computed(
+  () => selectedOptions.value.full as SelectedSlotOption<TOption>[],
+);
+
+const slotVisibleOptions = computed(
+  () => selectedOptions.value.visible as SelectedSlotOption<TOption>[],
+);
+
 const selectedOptionsLabel = computed(() => {
   return {
     full: selectedOptions.value.full.map((item) => item[props.labelKey]).join(", "),
@@ -556,7 +585,7 @@ const {
 
     <div
       ref="wrapper"
-      :tabindex="searchable || disabled ? -1 : 0"
+      :tabindex="disabled ? -1 : searchable && isOpen ? -1 : 0"
       role="combobox"
       :aria-expanded="ariaExpanded"
       aria-haspopup="listbox"
@@ -589,7 +618,7 @@ const {
         <slot
           name="right"
           :icon-name="rightIcon"
-          :options="multiple ? selectedOptions.full : selectedOption"
+          :options="multiple ? slotSelectedOptions : slotSelectedOption"
         >
           <UIcon v-if="rightIcon" :name="rightIcon" v-bind="rightIconAttrs" />
         </slot>
@@ -669,7 +698,10 @@ const {
             @binding {array} options
             @binding {object} options
           -->
-          <slot name="selected-options" :options="multiple ? selectedOptions.full : selectedOption">
+          <slot
+            name="selected-options"
+            :options="multiple ? slotSelectedOptions : slotSelectedOption"
+          >
             <span v-if="!multiple" v-bind="selectedLabelsAttrs" @click="toggle" @mousedown.prevent>
               <!--
                 @slot Use it to customize selected option.
@@ -681,7 +713,7 @@ const {
                 name="selected-option"
                 :label="selectedOption[labelKey]"
                 :value="selectedOption[valueKey]"
-                :option="localValue"
+                :option="slotSelectedOption"
               >
                 <div
                   :title="(selectedOption[labelKey] || '') as string"
@@ -705,7 +737,7 @@ const {
                       name="selected-option"
                       :label="option[labelKey]"
                       :value="option[valueKey]"
-                      :option="option"
+                      :option="slotVisibleOptions[index]"
                     >
                       {{
                         option[labelKey] +
@@ -746,7 +778,7 @@ const {
                         name="selected-option"
                         :label="option[labelKey]"
                         :value="option[valueKey]"
-                        :option="option"
+                        :option="slotVisibleOptions[index]"
                       >
                         {{ option[labelKey] }}
                       </slot>
@@ -799,7 +831,7 @@ const {
                       name="selected-option"
                       :label="option[labelKey]"
                       :value="option[valueKey]"
-                      :option="option"
+                      :option="slotVisibleOptions[index]"
                     >
                       {{ option[labelKey] }}
                     </slot>
@@ -858,7 +890,7 @@ const {
         :searchable="searchable"
         :options-limit="optionsLimit"
         :multiple="multiple"
-        :options="options"
+        :options="typedListboxOptions"
         :disabled="disabled"
         :size="size"
         :debounce="debounce"
@@ -926,7 +958,7 @@ const {
         <slot
           name="left"
           :icon-name="leftIcon"
-          :options="multiple ? selectedOptions.full : selectedOption"
+          :options="multiple ? slotSelectedOptions : slotSelectedOption"
         >
           <UIcon v-if="leftIcon" :name="leftIcon" v-bind="leftIconAttrs" />
         </slot>

package/ui.form-select/config.ts

@@ -11,10 +11,10 @@ export default /*tw*/ {
   },
   wrapper: {
     base: `
-      flex flex-row-reverse justify-between w-full min-h-full box-border relative
-      rounded-medium border border-solid border-default bg-default outline-solid outline-transparent
-      hover:border-lifted hover:transition hover:focus-within:border-primary focus-within:border-primary
-      focus-within:outline focus-within:outline-small focus-within:outline-primary focus-within:transition
+      flex flex-row-reverse justify-between w-full min-h-full box-border relative transition
+      rounded-medium border border-solid border-default bg-default outline-solid outline-small outline-transparent
+      hover:border-lifted hover:focus-within:border-primary focus-within:border-primary
+      focus-within:outline focus-within:outline-small focus-within:outline-primary
     `,
     variants: {
       error: {

package/ui.form-select/storybook/stories.ts

@@ -7,7 +7,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import USelect from "../../ui.form-select/USelect.vue";
+import USelectComponent from "../../ui.form-select/USelect.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UBadge from "../../ui.text-badge/UBadge.vue";
@@ -25,6 +25,9 @@ import patMorgan from "./assets/images/pat-morgan.png";
 import type { Meta, StoryFn } from "@storybook/vue3-vite";
 import type { Props } from "../types";
 
+/* Generic SFCs are typed as a function, which drops the compiler-generated `__name`. */
+const USelect = USelectComponent as typeof USelectComponent & { __name: string };
+
 interface USelectArgs extends Props {
   slotTemplate?: string;
   enum: "size" | "openDirection" | "labelAlign";

package/ui.form-select/tests/USelect.test-d.ts

@@ -0,0 +1,76 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type {
+  Props,
+  SelectOption,
+  SelectedSlotOption,
+  SelectedOptionsBinding,
+  USelectSlots,
+} from "../types";
+import type { SlotOption } from "../../ui.form-listbox/types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionSlot = NonNullable<USelectSlots<UserOption>["option"]>;
+type OptionProps = Parameters<OptionSlot>[0];
+
+type SelectedOptionProps = Parameters<NonNullable<USelectSlots<UserOption>["selected-option"]>>[0];
+
+describe("USelect 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>();
+    expectTypeOf<keyof OptionProps["option"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("reuses UListbox's SlotOption rather than a second dialect", () => {
+    /* Stage 3 must not invent its own option-slot shape. */
+    expectTypeOf<OptionProps["option"]>().toEqualTypeOf<SlotOption<UserOption>>();
+    expectTypeOf<SelectedSlotOption<UserOption>>().toEqualTypeOf<SlotOption<UserOption>>();
+  });
+
+  it("promises nothing on a selected option, because {} reaches it at runtime", () => {
+    /* `getCurrentOption` returns `{} as Option` when no option matches `modelValue`
+     * (`utilSelect.ts:15`). A runtime probe records that bare `{}` at `selected-option` in all
+     * three `multiple` variants, and at `left` / `right` in single mode. */
+    expectTypeOf<SelectedOptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<SelectedOptionProps["option"]["qty"]>().toEqualTypeOf<number | undefined>();
+
+    /* The empty object the runtime actually delivers must be assignable. */
+    expectTypeOf<Record<string, never>>().toExtend<SelectedOptionProps["option"]>();
+  });
+
+  it("types left / right / selected-options as the option-or-array binding", () => {
+    type LeftProps = Parameters<NonNullable<USelectSlots<UserOption>["left"]>>[0];
+    type RightProps = Parameters<NonNullable<USelectSlots<UserOption>["right"]>>[0];
+    type SelectedOptionsProps = Parameters<
+      NonNullable<USelectSlots<UserOption>["selected-options"]>
+    >[0];
+
+    /* All three bind `multiple ? selectedOptions.full : selectedOption`. */
+    expectTypeOf<LeftProps["options"]>().toEqualTypeOf<SelectedOptionsBinding<UserOption>>();
+    expectTypeOf<RightProps["options"]>().toEqualTypeOf<SelectedOptionsBinding<UserOption>>();
+    expectTypeOf<SelectedOptionsProps["options"]>().toEqualTypeOf<
+      SelectedOptionsBinding<UserOption>
+    >();
+
+    /* In `multiple` mode a non-matching `modelValue` entry contributes a `{}` element. */
+    expectTypeOf<Record<string, never>[]>().toExtend<SelectedOptionsBinding<UserOption>>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<SelectOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+});

package/ui.form-select/tests/USelect.test.ts

@@ -2,13 +2,20 @@ import { mount, flushPromises } from "@vue/test-utils";
 import { describe, it, expect, vi } from "vitest";
 
 import USelect from "../USelect.vue";
-import UListbox from "../../ui.form-listbox/UListbox.vue";
+import UListboxComponent from "../../ui.form-listbox/UListbox.vue";
 import UIcon from "../../ui.image-icon/UIcon.vue";
 import ULabel from "../../ui.form-label/ULabel.vue";
 import UBadge from "../../ui.text-badge/UBadge.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("USelect.vue", () => {
   const defaultOptions = [
     { label: "Option 1", value: "option1" },
@@ -255,6 +262,63 @@ describe("USelect.vue", () => {
       expect(component.getComponent(UListbox).props("searchable")).toBe(true);
     });
 
+    it("Searchable – closes when the search input blurs to an outside element", async () => {
+      const component = mount(USelect, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+        attachTo: document.body,
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+      await flushPromises();
+
+      expect(component.emitted("open")).toBeTruthy();
+
+      const outside = document.createElement("button");
+
+      document.body.appendChild(outside);
+
+      await component
+        .getComponent(UListbox)
+        .get("input")
+        .trigger("blur", { relatedTarget: outside });
+      await flushPromises();
+
+      expect(component.emitted("close")).toBeTruthy();
+      expect(component.findComponent(UListbox).exists()).toBe(false);
+
+      outside.remove();
+      component.unmount();
+    });
+
+    it("Searchable – stays open when focus moves within its own listbox", async () => {
+      const component = mount(USelect, {
+        props: {
+          searchable: true,
+          options: defaultOptions,
+        },
+        attachTo: document.body,
+      });
+
+      await component.get("[role='combobox']").trigger("focus");
+      await flushPromises();
+
+      const listboxEl = component.getComponent(UListbox).element as HTMLElement;
+
+      await component
+        .getComponent(UListbox)
+        .get("input")
+        .trigger("blur", { relatedTarget: listboxEl });
+      await flushPromises();
+
+      expect(component.emitted("close")).toBeFalsy();
+      expect(component.findComponent(UListbox).exists()).toBe(true);
+
+      component.unmount();
+    });
+
     it("Search v-model – passes search to UListbox and filters", async () => {
       const component = mount(USelect, {
         props: {

package/ui.form-select/tests/USelectTypes.vue

@@ -0,0 +1,113 @@
+<!-- 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>
+  <USelect :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, selected, index }">
+      {{ expectOptionalString(option.label) }}
+      {{ expectBoolean(selected) }}
+      {{ expectNumber(index) }}
+    </template>
+
+    <template #empty>empty</template>
+  </USelect>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <USelect :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </USelect>
+
+  <USelect :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </USelect>
+
+  <!-- Regression guard: `getCurrentOption` returns `{} as Option` when no option matches
+       `modelValue` (`utilSelect.ts:15`). A runtime probe records that bare `{}` arriving at
+       `selected-option`, `left` and `right`, and as an array element in `multiple` mode. -->
+  <USelect :options="options" model-value="no-such-value">
+    <template #selected-option="{ option }">
+      <!-- @vue-expect-error the `{}` fallback need not carry `label`. -->
+      {{ expectString(option.label) }}
+    </template>
+
+    <template #left="{ options: selected }">
+      <!-- @vue-expect-error the binding is `option | option[]`, never an array alone. -->
+      {{ expectArray(selected) }}
+    </template>
+
+    <template #right="{ options: selected }">
+      {{ expectSelectedBinding(selected) }}
+    </template>
+
+    <template #selected-options="{ options: selected }">
+      {{ expectSelectedBinding(selected) }}
+    </template>
+  </USelect>
+
+  <USelect :options="options" :model-value="['a']" multiple>
+    <template #selected-options="{ options: selected }">
+      <!-- @vue-expect-error in `multiple` mode an element may be the `{}` fallback. -->
+      {{ Array.isArray(selected) ? expectString(selected[0].label) : "" }}
+    </template>
+  </USelect>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import USelect from "../USelect.vue";
+
+import type { SelectedOptionsBinding } from "../types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+const options = [{ label: "a", value: "a", qty: 1 }];
+const typedOptions = ref<UserOption[]>([]);
+
+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;
+}
+
+function expectArray(value: unknown[]) {
+  return value;
+}
+
+function expectSelectedBinding(value: SelectedOptionsBinding<UserOption>) {
+  return value;
+}
+</script>

package/ui.form-select/types.ts

@@ -1,11 +1,62 @@
 import defaultConfig from "./config";
 
-import type { Option } from "../ui.form-listbox/types";
-import type { ComponentConfig } from "../types";
+import type { BaseOption, SlotOption } from "../ui.form-listbox/types";
+import type { ComponentConfig, UnknownObject } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface Props {
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type SelectOption = BaseOption & (object | UnknownObject);
+
+/**
+ * Shape of a selected option exposed to slots.
+ *
+ * `getCurrentOption` falls back to `{} as Option` when no option matches (`utilSelect.ts:15`), and
+ * that empty object reaches `selected-option`, `left` and `right` verbatim — confirmed by runtime
+ * probe. In `multiple` mode it is an element of the array given to `selected-options`. So no member
+ * of `TOption` can be promised; `SlotOption` (Stage 2's type) already encodes exactly that.
+ */
+export type SelectedSlotOption<TOption extends SelectOption = SelectOption> = SlotOption<TOption>;
+
+/**
+ * What `left`, `right` and `selected-options` receive: `multiple ? selectedOptions.full : selectedOption`.
+ * In `multiple` mode a non-matching `modelValue` entry contributes a `{}` element to the array.
+ */
+export type SelectedOptionsBinding<TOption extends SelectOption = SelectOption> =
+  | SelectedSlotOption<TOption>
+  | SelectedSlotOption<TOption>[];
+
+export interface USelectSlots<TOption extends SelectOption = SelectOption> {
+  label?: (props: { label: string }) => unknown;
+  description?: (props: { description: string }) => unknown;
+  error?: (props: { error: string | boolean }) => unknown;
+  left?: (props: { iconName: string; options: SelectedOptionsBinding<TOption> }) => unknown;
+  right?: (props: { iconName: string; options: SelectedOptionsBinding<TOption> }) => unknown;
+  toggle?: (props: { iconName: string; opened: boolean }) => unknown;
+  clear?: (props: { iconName: string; clear: (event: MouseEvent) => void }) => unknown;
+  "before-toggle"?: () => unknown;
+  "after-toggle"?: () => unknown;
+  "selected-options"?: (props: { options: SelectedOptionsBinding<TOption> }) => unknown;
+  /* All four `selected-option` sites bind a single option, never an array: the `!multiple` branch
+   * binds the selected option and each `multiple` variant binds a `selectedOptions.visible` element.
+   * A runtime probe records a bare `{}` here in all three variants, hence the optional members. */
+  "selected-option"?: (props: {
+    label: unknown;
+    value: unknown;
+    option: SelectedSlotOption<TOption>;
+  }) => unknown;
+  "selected-counter"?: (props: { count: number }) => unknown;
+  "before-option"?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  option?: (props: { option: SlotOption<TOption>; index: number }) => unknown;
+  "after-option"?: (props: {
+    option: SlotOption<TOption>;
+    selected: boolean;
+    index: number;
+  }) => unknown;
+  empty?: () => unknown;
+}
+
+export interface Props<TOption extends SelectOption = SelectOption> {
   /**
    * Select value.
    */
@@ -14,7 +65,7 @@ export interface Props {
   /**
    * Select options.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Select label.