VL_UListbox-selected-slot-prop_Vitalii-Dudnik

src/ui.form-input-search/UInputSearch.vue

@@ -138,6 +138,7 @@ const {
     :placeholder="placeholder"
     inputmode="search"
     :left-icon="leftIcon"
+    :autocomplete="false"
     v-bind="searchButtonLabel ? searchInputWithButtonAttrs : searchInputAttrs"
     :data-test="getDataTest()"
     @update:model-value="onUpdateValue"

src/ui.form-listbox/UListbox.vue

@@ -120,7 +120,7 @@ const getOptionAriaSelected = (option: Option) => {
   if (option && option.groupLabel) return undefined;
   if (option.divider) return undefined;
 
-  return !!isSelectedOption(option);
+  return isSelectedOption(option);
 };
 
 const filteredOptions = computed(() => {
@@ -285,7 +285,7 @@ function select(option: Option, keyCode?: string) {
 
 function isSelectedOption(option: Option) {
   if (props.multiple) {
-    return (selectedValue.value as SelectedValue[]).find((selected) =>
+    return !!(selectedValue.value as SelectedValue[]).find((selected) =>
       isEqual(selected, option[props.valueKey]),
     );
   }
@@ -515,9 +515,15 @@ const {
           <!--
             @slot Use it to add something after the option.
             @binding {object} option
+            @binding {boolean} selected
             @binding {number} index
           -->
-          <slot name="after-option" :option="option" :index="index">
+          <slot
+            name="after-option"
+            :option="option"
+            :selected="isSelectedOption(option)"
+            :index="index"
+          >
             <UIcon
               v-if="isSelectedOption(option)"
               color="inherit"

src/ui.form-select/USelect.vue

@@ -718,12 +718,7 @@ const {
                   :key="index"
                   v-bind="selectedLabelAttrs"
                 >
-                  <UBadge
-                    :title="option[labelKey]"
-                    :size="size"
-                    variant="subtle"
-                    v-bind="badgeLabelAttrs"
-                  >
+                  <UBadge :title="option[labelKey]" :size="size" v-bind="badgeLabelAttrs">
                     <div v-bind="selectedLabelTextAttrs">
                       <!--
                         @slot Use it to customize selected option.
@@ -885,13 +880,14 @@ const {
           <slot name="option" :option="option" :index="index" />
         </template>
 
-        <template #after-option="{ option, index }">
+        <template #after-option="{ option, selected, index }">
           <!--
             @slot Use it to add something after option.
             @binding {object} option
+            @binding {boolean} selected
             @binding {number} index
           -->
-          <slot name="after-option" :option="option" :index="index" />
+          <slot name="after-option" :option="option" :selected="selected" :index="index" />
         </template>
 
         <template #empty>

src/ui.form-select/config.ts

@@ -76,7 +76,12 @@ export default /*tw*/ {
     ],
   },
   counter: "",
-  badgeLabel: "{UBadge} py-0.5 px-1.5 gap-0.5 rounded-small max-w-full",
+  badgeLabel: {
+    base: "{UBadge} py-0.5 px-1.5 gap-0.5 rounded-small max-w-full",
+    defaults: {
+      variant: "subtle",
+    },
+  },
   badgeClearIcon: {
     base: "{>clearIcon} -mr-1",
     defaults: {