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

package/ui.dropdown-link/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 UDropdownLinkSlots<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 link.
    */
@@ -24,7 +38,7 @@ export interface Props {
   /**
    * Options list.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Label key in the item object of options.

package/ui.form-calendar/config.ts

@@ -56,7 +56,7 @@ export default /*tw*/ {
   timepicker: "mt-2 pl-1 pt-3 text-medium flex items-stretch justify-between gap-2 border-t border-muted",
   timepickerLabel: "w-full self-center",
   timepickerInputWrapper: `
-    flex items-center rounded-medium border border-solid border-default outline-solid outline-transparent
+    flex items-center rounded-medium border border-solid border-default outline-solid outline-small outline-transparent
     hover:focus-within:border-primary focus-within:border-primary
     focus-within:outline focus-within:outline-small focus-within:outline-primary
   `,

package/ui.form-checkbox/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   },
   checkbox: {
     base: `
-      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-transparent
+      {>checkboxBase} ml-0 bg-default border border-solid border-default outline-solid outline-medium outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted
       active:border-{color} active:bg-{color}/15

package/ui.form-checkbox/tests/UCheckbox.test.ts

@@ -33,7 +33,7 @@ describe("UCheckbox.vue", () => {
     it("Value – returns correct value type when checkbox is checked", async () => {
       const testValues = ["string-value", 42, true, { id: 1, name: "test" }, [1, 2, 3]];
 
-      testValues.forEach(async (testValue) => {
+      for (const testValue of testValues) {
         const component = mount(UCheckbox, {
           props: {
             value: testValue,
@@ -48,7 +48,7 @@ describe("UCheckbox.vue", () => {
         const emittedValues = component.emitted("update:modelValue");
 
         expect(emittedValues![0][0]).toEqual([testValue]);
-      });
+      }
     });
 
     it("TrueValue and FalseValue – returns correct values when checkbox is checked and unchecked", async () => {
@@ -59,7 +59,7 @@ describe("UCheckbox.vue", () => {
         { trueValue: true, falseValue: false },
       ];
 
-      testValuePairs.forEach(async ({ trueValue, falseValue }) => {
+      for (const { trueValue, falseValue } of testValuePairs) {
         const component = mount(UCheckbox, {
           props: {
             trueValue,
@@ -81,7 +81,7 @@ describe("UCheckbox.vue", () => {
         emittedValues = component.emitted("update:modelValue");
 
         expect(emittedValues![1][0]).toEqual(falseValue);
-      });
+      }
     });
 
     it("Partial – displays correct icon when checkbox is partially checked", () => {

package/ui.form-checkbox/types.ts

@@ -4,16 +4,18 @@ import type { ComponentConfig, UnknownObject, UnknownArray } from "../types";
 
 export type Config = typeof defaultConfig;
 
-export interface UCheckboxOption {
+export interface BaseCheckboxOption {
   value?: string | number | boolean | UnknownObject | UnknownArray;
   falseValue?: string | number | boolean | UnknownObject | UnknownArray;
   trueValue?: string | number | boolean | UnknownObject | UnknownArray;
   label?: string;
   icon?: string;
   description?: string;
-  [key: string]: string | number | boolean | UnknownObject | UnknownArray | undefined;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type UCheckboxOption = BaseCheckboxOption & (object | UnknownObject);
+
 export interface Props {
   /**
    * Checkbox value.

package/ui.form-checkbox-group/UCheckboxGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { provide, ref, watch, useTemplateRef } from "vue";
+import { computed, provide, ref, watch, useTemplateRef } from "vue";
 import { isEqual } from "lodash-es";
 
 import { useUI } from "../composables/useUI";
@@ -12,6 +12,7 @@ import { COMPONENT_NAME } from "./constants";
 import defaultConfig from "./config";
 
 import type { UnknownObject } from "../types";
+import type { BaseCheckboxOption } from "../ui.form-checkbox/types";
 import type { Props, Config } from "./types";
 
 defineOptions({ inheritAttrs: false });
@@ -35,6 +36,11 @@ const listRef = useTemplateRef<HTMLDivElement>("list");
 
 const checkedItems = ref([] as UnknownObject[]);
 
+/* Indexable view of the options for `labelKey` / `valueKey` lookups. */
+const keyedOptions = computed(
+  () => props.options as (BaseCheckboxOption & Record<string, BaseCheckboxOption["value"]>)[],
+);
+
 provide<(value: UnknownObject[]) => void>(
   "setCheckboxGroupCheckedItems",
   (value: UnknownObject[]) => {
@@ -116,7 +122,7 @@ const { getDataTest, groupLabelAttrs, groupCheckboxAttrs, listAttrs } =
       <!-- @slot Use it to add UCheckbox directly. -->
       <slot>
         <UCheckbox
-          v-for="(option, index) in options"
+          v-for="(option, index) in keyedOptions"
           :key="index"
           :model-value="modelValue"
           :value="option[valueKey]"

package/ui.form-date-picker/UDatePicker.vue

@@ -119,6 +119,16 @@ function deactivate() {
   customView.value = View.Day;
 }
 
+function deactivateOnBlur(event: FocusEvent) {
+  const related = event.relatedTarget as HTMLElement | null;
+
+  if (related && wrapperRef.value?.contains(related)) {
+    return;
+  }
+
+  deactivate();
+}
+
 function onUserFormatDateChange(value: string) {
   userFormatDate.value = value.trim();
 }
@@ -279,7 +289,7 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()">
+  <div v-bind="wrapperAttrs" ref="wrapper" :data-test="getDataTest()" @focusout="deactivateOnBlur">
     <UInput
       :id="elementId"
       :key="String(userFormatDate)"

package/ui.form-date-picker/tests/UDatePicker.test.ts

@@ -356,6 +356,53 @@ describe("UDatePicker.vue", () => {
       expect(calendar.isVisible()).toBe(true);
     });
 
+    it("Calendar – hides when focus leaves the whole component", async () => {
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+        },
+        attachTo: document.body,
+      });
+
+      const input = component.getComponent(UInput).find("input");
+      const calendar = component.findComponent({ name: "UCalendar" });
+
+      await input.trigger("focus");
+      expect(calendar.isVisible()).toBe(true);
+
+      const outsideElement = document.createElement("button");
+
+      document.body.appendChild(outsideElement);
+
+      await component.trigger("focusout", { relatedTarget: outsideElement });
+
+      expect(calendar.isVisible()).toBe(false);
+
+      outsideElement.remove();
+      component.unmount();
+    });
+
+    it("Calendar – stays open when focus moves inside the component", async () => {
+      const component = mount(UDatePicker, {
+        props: {
+          modelValue: new Date(),
+        },
+        attachTo: document.body,
+      });
+
+      const input = component.getComponent(UInput).find("input");
+      const calendar = component.findComponent({ name: "UCalendar" });
+
+      await input.trigger("focus");
+      expect(calendar.isVisible()).toBe(true);
+
+      await component.trigger("focusout", { relatedTarget: calendar.element });
+
+      expect(calendar.isVisible()).toBe(true);
+
+      component.unmount();
+    });
+
     it("Calendar – hides when escape key is pressed on calendar", async () => {
       const component = mount(UDatePicker, {
         props: {

package/ui.form-input/UInput.vue

@@ -281,6 +281,7 @@ const {
     :align="labelAlign"
     centred
     v-bind="inputLabelAttrs"
+    :data-test="getDataTest('label')"
   >
     <template #label>
       <!--

package/ui.form-input/config.ts

@@ -12,7 +12,7 @@ export default /*tw*/ {
   wrapper: {
     base: `
       flex gap-3 w-full px-3 relative bg-default transition
-      border border-solid rounded-medium border-default outline-solid outline-transparent
+      border border-solid rounded-medium border-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 focus-within:transition
     `,

package/ui.form-input/tests/UInput.test.ts

@@ -302,6 +302,22 @@ describe("UInput.vue", () => {
 
       expect(component.get("input").attributes("data-test")).toBe(dataTestValue);
     });
+
+    it("Data Test – forwards data-test to the label so the error block is targetable", () => {
+      const dataTestValue = "test-input";
+
+      const component = mount(UInput, {
+        props: {
+          dataTest: dataTestValue,
+          error: "This is an error",
+        },
+      });
+
+      const errorElement = component.find(`[data-test="${dataTestValue}-label-error"]`);
+
+      expect(errorElement.exists()).toBe(true);
+      expect(errorElement.text()).toBe("This is an error");
+    });
   });
 
   describe("Slots", () => {

package/ui.form-input-file/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   dropzone: {
     base: `
       p-3 size-auto w-full bg-default transition
-      rounded-medium border border-solid border-default outline-solid outline-transparent
+      rounded-medium border border-solid border-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
     `,

package/ui.form-listbox/UListbox.vue

@@ -1,4 +1,4 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TOption extends ListboxOption">
 import { watch, computed, useId, ref, useTemplateRef, nextTick } from "vue";
 import { isEqual } from "lodash-es";
 
@@ -18,12 +18,20 @@ import usePointer from "./usePointer";
 import defaultConfig from "./config";
 import { COMPONENT_NAME } from "./constants";
 
-import type { Option, Props, Config, SelectedValue } from "./types";
+import type {
+  Option,
+  Props,
+  Config,
+  SelectedValue,
+  ListboxOption,
+  SlotOption,
+  UListboxSlots,
+} from "./types";
 
 defineOptions({ inheritAttrs: false });
 
-const props = withDefaults(defineProps<Props>(), {
-  ...getDefaults<Props, Config>(defaultConfig, COMPONENT_NAME),
+const props = withDefaults(defineProps<Props<TOption>>(), {
+  ...getDefaults<Props<TOption>, Config>(defaultConfig, COMPONENT_NAME),
   modelValue: "",
   options: () => [],
 });
@@ -65,6 +73,8 @@ const emit = defineEmits([
   "update:search",
 ]);
 
+defineSlots<UListboxSlots<TOption>>();
+
 const wrapperRef = useTemplateRef<HTMLDivElement>("wrapper");
 const listboxInputRef = useTemplateRef<{ input: HTMLInputElement }>("listbox-input");
 const optionsRef = useTemplateRef<HTMLLIElement[]>("option");
@@ -75,8 +85,11 @@ const wrapperMaxHeight = ref("");
 
 const localSearch = ref(props.search ?? "");
 
+/* Indexable view of the options, `labelKey` / `valueKey` lookups need an index signature. */
+const localOptions = computed(() => props.options as Option[]);
+
 const { pointer, pointerDirty, pointerSet, pointerBackward, pointerForward, pointerReset } =
-  usePointer(props.options, optionsRef, wrapperRef);
+  usePointer(localOptions.value, optionsRef, wrapperRef);
 
 const elementId = props.id || useId();
 
@@ -123,10 +136,13 @@ const getOptionAriaSelected = (option: Option) => {
   return isSelectedOption(option);
 };
 
+/* `filterGroups` flattens group members, which need not carry `TOption`'s members. */
+const getSlotOption = (option: Option) => option as SlotOption<TOption>;
+
 const filteredOptions = computed(() => {
   const normalizedSearch = searchModel.value.toLowerCase().trim();
 
-  let options = [...props.options];
+  let options = [...localOptions.value];
 
   options = props.groupValueKey
     ? filterGroups(
@@ -324,9 +340,9 @@ function optionHighlight(index: number, option: Option) {
 }
 
 function addPointerElement(keyCode?: string) {
-  if (props.options.length > 0) {
-    select(props.options[pointer.value], keyCode);
-    onClickOption(props.options[pointer.value]);
+  if (localOptions.value.length > 0) {
+    select(localOptions.value[pointer.value], keyCode);
+    onClickOption(localOptions.value[pointer.value]);
   }
 
   pointerReset();
@@ -496,14 +512,14 @@ const {
             @binding {object} option
             @binding {number} index
           -->
-          <slot name="before-option" :option="option" :index="index" />
+          <slot name="before-option" :option="getSlotOption(option)" :index="index" />
 
           <!--
             @slot Use it to add something instead of the option.
             @binding {object} option
             @binding {number} index
           -->
-          <slot name="option" :option="option" :index="index">
+          <slot name="option" :option="getSlotOption(option)" :index="index">
             <span
               :style="getMarginForSubCategory(option.level)"
               v-bind="optionContentAttrs"
@@ -520,7 +536,7 @@ const {
           -->
           <slot
             name="after-option"
-            :option="option"
+            :option="getSlotOption(option)"
             :selected="isSelectedOption(option)"
             :index="index"
           >
@@ -580,6 +596,7 @@ const {
         <UButton
           round
           square
+          tabindex="-1"
           v-bind="addOptionButtonAttrs"
           :data-test="getDataTest('add-button')"
           @click="onClickAddOption"

package/ui.form-listbox/config.ts

@@ -15,7 +15,7 @@ export default /*tw*/ {
   listboxInput: {
     base: "{UInputSearch} sticky top-0 pt-1 bg-default z-10",
     searchInput: {
-      wrapper: "pl-2 pr-1 rounded-none border-0 border-b focus-within:outline-0 border-default!",
+      wrapper: "pl-2 pr-1 rounded-none border-0 border-b focus-within:outline-0 outline-none! border-default!",
     },
   },
   selectIcon: {

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

@@ -6,7 +6,7 @@ import {
   getDocsDescription,
 } from "../../utils/storybook";
 
-import UListbox from "../UListbox.vue";
+import UListboxComponent from "../UListbox.vue";
 import URow from "../../ui.container-row/URow.vue";
 import UCol from "../../ui.container-col/UCol.vue";
 import UAvatar from "../../ui.image-avatar/UAvatar.vue";
@@ -23,6 +23,9 @@ 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 UListbox = UListboxComponent as typeof UListboxComponent & { __name: string };
+
 interface DefaultUListboxArgs extends Props {
   slotTemplate?: string;
 }

package/ui.form-listbox/tests/UListbox.test-d.ts

@@ -0,0 +1,63 @@
+import { describe, it, expectTypeOf } from "vitest";
+
+import type { ListboxOption, Props, SlotOption, UListboxSlots } from "../types";
+
+interface UserOption {
+  label: string;
+  value: string;
+  qty: number;
+}
+
+type OptionSlot = NonNullable<UListboxSlots<UserOption>["option"]>;
+type OptionProps = Parameters<OptionSlot>[0];
+
+describe("UListbox types", () => {
+  it("infers the caller's option shape in an 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", () => {
+    /* An index signature would make any key legal, so `option.nonExistent` must not resolve. */
+    type HasIndexSignature = string extends keyof OptionProps["option"] ? true : false;
+
+    expectTypeOf<HasIndexSignature>().toEqualTypeOf<false>();
+    expectTypeOf<keyof OptionProps["option"]>().not.toEqualTypeOf<string>();
+  });
+
+  it("keeps the reserved option keys available", () => {
+    expectTypeOf<OptionProps["option"]>().toHaveProperty("groupLabel");
+    expectTypeOf<OptionProps["option"]>().toHaveProperty("isSubGroup");
+    expectTypeOf<OptionProps["option"]>().toHaveProperty("level");
+  });
+
+  it("does not promise the caller's members on any option slot", () => {
+    /* `filterGroups` concats the `groupValueKey` array into the flat list the slots iterate, and
+     * those members are typed `Option`, not `TOption`. A runtime probe with grouped options whose
+     * members lack the parent's members confirms all three slots receive them verbatim. */
+    type BeforeOption = Parameters<NonNullable<UListboxSlots<UserOption>["before-option"]>>[0];
+    type AfterOption = Parameters<NonNullable<UListboxSlots<UserOption>["after-option"]>>[0];
+
+    expectTypeOf<BeforeOption["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<OptionProps["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<AfterOption["option"]["label"]>().toEqualTypeOf<string | undefined>();
+    expectTypeOf<AfterOption["selected"]>().toEqualTypeOf<boolean>();
+
+    /* The real flattened-member shape recorded at these slots must be assignable to all of them. */
+    type GroupMember = { label: string; value: string };
+
+    expectTypeOf<GroupMember>().toExtend<BeforeOption["option"]>();
+    expectTypeOf<GroupMember>().toExtend<OptionProps["option"]>();
+    expectTypeOf<GroupMember>().toExtend<AfterOption["option"]>();
+  });
+
+  it("resolves Props with no type argument", () => {
+    expectTypeOf<Props>().toEqualTypeOf<Props<ListboxOption>>();
+    expectTypeOf<Props<UserOption>["options"]>().toEqualTypeOf<UserOption[] | undefined>();
+  });
+
+  it("exposes SlotOption as the shared slot option shape", () => {
+    expectTypeOf<SlotOption<UserOption>>().toEqualTypeOf<OptionProps["option"]>();
+  });
+});

package/ui.form-listbox/tests/UListboxTypes.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>
+  <UListbox :options="options">
+    <!-- With `groupValueKey` set, `filterGroups` flattens group members into the same list the
+         slots iterate, and a member need not carry the parent's members — so they are optional. -->
+    <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>
+  </UListbox>
+
+  <!-- Options from a non-literal source still expose the declared option shape. -->
+  <UListbox :options="typedOptions">
+    <template #option="{ option }">{{ expectOptionalString(option.label) }}</template>
+  </UListbox>
+
+  <UListbox :options="options">
+    <template #option="{ option }">
+      <!-- @vue-expect-error `nonExistent` is not a key of the inferred option. -->
+      {{ option.nonExistent }}
+    </template>
+  </UListbox>
+
+  <!-- Regression guard: an option slot must never promise the caller's members as present.
+       `filterGroups` concats the `groupValueKey` array into the flat list, and those members are
+       typed `Option`, not `TOption` — a runtime probe confirms the slots receive them verbatim. -->
+  <UListbox
+    :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>
+  </UListbox>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+
+import UListbox from "../UListbox.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.
+   The parent declares `label`/`qty`/`groupName`; the flattened child carries none of them. */
+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.form-listbox/types.ts

@@ -16,9 +16,41 @@ export interface Option extends BaseOption {
   [key: string]: string | number | boolean | UnknownObject | Option[] | OnClickOption | undefined;
 }
 
+/* Any object shape is a valid option, only reserved option keys are type checked. */
+export type ListboxOption = BaseOption & (object | UnknownObject);
+
 export type SelectedValue = string | number | UnknownObject;
 
-export interface Props {
+/* Drops `Option`'s `[key: string]` index signature so slot options only expose known keys. */
+type KnownKeys<T> = {
+  [K in keyof T as string extends K ? never : number extends K ? never : K]: T[K];
+};
+
+/**
+ * Option shape exposed to slots: the caller's option plus the reserved option keys.
+ *
+ * `TOption`'s own keys are optional. With `groupValueKey` set, `filterGroups` flattens the
+ * nested `groupValueKey` array into the same list the slots iterate, and those group members
+ * are typed `Option`, not `TOption` — so a flattened child need not carry the parent's members.
+ * `BaseOption`'s keys are optional already, so nothing is promised that can be absent.
+ */
+export type SlotOption<TOption extends ListboxOption = ListboxOption> = Partial<
+  KnownKeys<TOption>
+> &
+  BaseOption;
+
+export interface UListboxSlots<TOption extends ListboxOption = ListboxOption> {
+  "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 ListboxOption = ListboxOption> {
   /**
    * Selected item.
    */
@@ -32,7 +64,7 @@ export interface Props {
   /**
    * List options.
    */
-  options?: Option[];
+  options?: TOption[];
 
   /**
    * Shows input to search value in a list.

package/ui.form-radio/config.ts

@@ -3,7 +3,7 @@ export default /*tw*/ {
   radio: {
     base: `
       bg-default cursor-pointer transition
-      border border-solid border-default rounded-full outline-solid outline-transparent
+      border border-solid border-default rounded-full outline-solid outline-medium outline-transparent
       appearance-none p-0 print:color-adjust-exact inline-block align-middle bg-origin-border select-none shrink-0
       hover:border-lifted hover:checked:border-{color}
       active:border-{color} active:bg-{color}/15