vueless 1.4.12-beta.9 → 1.5.0

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

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";