@sewadah/selaras 0.3.0 → 0.3.2

package/dist/runtime/internal/ComboboxSelectBase.d.vue.ts

@@ -1,6 +1,9 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { SelectThemeSlots } from '../theme/select.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
+import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { UiProp } from '../utils/ui.js';
 import type { SelectItems, SelectOption } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
@@ -16,9 +19,9 @@ export interface ComboboxSelectBaseProps {
     open?: boolean;
     /** Initial uncontrolled open state. */
     defaultOpen?: boolean;
-    modelValue?: string | number | (string | number)[];
+    modelValue?: SelectModelValue | SelectModelValue[];
     /** Initial uncontrolled selection and native form reset target. */
-    defaultValue?: string | number | (string | number)[];
+    defaultValue?: SelectModelValue | SelectModelValue[];
     multiple?: boolean;
     searchable?: boolean;
     virtualize?: boolean | {
@@ -43,76 +46,78 @@ export interface ComboboxSelectBaseProps {
     resetSearchTermOnBlur?: boolean;
     resetSearchTermOnSelect?: boolean;
     /** Shows a small pointer triangle connecting the panel to its trigger. */
-    arrow?: boolean;
+    arrow?: boolean | RoundedArrowConfig;
+    positioning?: OverlayPositioning;
+    portal?: OverlayPortal;
     /** Opts into the component's accessible small-screen presentation. */
     adaptive?: boolean;
     ui?: UiProp<SelectThemeSlots>;
 }
 export interface ComboboxSelectBaseEmits {
     'update:open': [value: boolean];
-    'update:modelValue': [value: string | number | (string | number)[] | undefined];
+    'update:modelValue': [value: SelectModelValue | SelectModelValue[] | undefined];
     'update:searchTerm': [value: string];
 }
 declare var __VLS_43: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_94: {}, __VLS_101: {}, __VLS_116: {}, __VLS_140: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_160: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_144: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_164: {
     selected: import("./combobox-select.js").ResolvedOption | undefined;
-}, __VLS_171: {}, __VLS_178: {}, __VLS_185: {}, __VLS_213: {}, __VLS_216: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_228: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_231: {}, __VLS_267: string, __VLS_268: {}, __VLS_271: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_274: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_175: {}, __VLS_182: {}, __VLS_189: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {}, __VLS_228: {}, __VLS_231: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_234: {
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
+}, __VLS_237: {}, __VLS_273: string, __VLS_274: {}, __VLS_277: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_280: {
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_267>]?: (props: typeof __VLS_268) => any;
+    [K in NonNullable<typeof __VLS_273>]?: (props: typeof __VLS_274) => any;
 } & {
     item?: (props: typeof __VLS_43) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_94) => any;
+    'clear-icon'?: (props: typeof __VLS_98) => any;
 } & {
-    'loading-icon'?: (props: typeof __VLS_101) => any;
+    'loading-icon'?: (props: typeof __VLS_105) => any;
 } & {
-    'dropdown-icon'?: (props: typeof __VLS_116) => any;
+    'dropdown-icon'?: (props: typeof __VLS_120) => any;
 } & {
-    item?: (props: typeof __VLS_140) => any;
+    item?: (props: typeof __VLS_144) => any;
 } & {
-    value?: (props: typeof __VLS_160) => any;
+    value?: (props: typeof __VLS_164) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_171) => any;
+    'clear-icon'?: (props: typeof __VLS_175) => any;
 } & {
-    'loading-icon'?: (props: typeof __VLS_178) => any;
+    'loading-icon'?: (props: typeof __VLS_182) => any;
 } & {
-    'dropdown-icon'?: (props: typeof __VLS_185) => any;
+    'dropdown-icon'?: (props: typeof __VLS_189) => any;
 } & {
-    header?: (props: typeof __VLS_213) => any;
+    header?: (props: typeof __VLS_219) => any;
 } & {
-    'filter-icon'?: (props: typeof __VLS_216) => any;
+    'filter-icon'?: (props: typeof __VLS_222) => any;
 } & {
-    empty?: (props: typeof __VLS_219) => any;
+    empty?: (props: typeof __VLS_225) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_222) => any;
+    'empty-filter'?: (props: typeof __VLS_228) => any;
 } & {
-    item?: (props: typeof __VLS_225) => any;
+    item?: (props: typeof __VLS_231) => any;
 } & {
-    group?: (props: typeof __VLS_228) => any;
+    group?: (props: typeof __VLS_234) => any;
 } & {
-    footer?: (props: typeof __VLS_231) => any;
+    footer?: (props: typeof __VLS_237) => any;
 } & {
-    item?: (props: typeof __VLS_271) => any;
+    item?: (props: typeof __VLS_277) => any;
 } & {
-    group?: (props: typeof __VLS_274) => any;
+    group?: (props: typeof __VLS_280) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | (string | number)[] | undefined) => any;
+    "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;
     "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBaseProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: SelectModelValue | SelectModelValue[] | undefined) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/runtime/internal/ComboboxSelectBase.vue

@@ -27,7 +27,9 @@ import { useIcons } from "../composables/use-icons";
 import { useIsMobile } from "../composables/use-media-query";
 import { useMessages } from "../composables/use-messages";
 import { selectTheme } from "../theme/select";
+import { arrowContentProps, arrowElementProps } from "../utils/arrow";
 import { isNativeInputA11yAttr, isNativeInputAttr, isNativeInputEvent } from "../utils/native-input";
+import { overlayPortalProps } from "../utils/overlay";
 import { resolveRegisteredColorRole } from "../utils/registered-colors";
 import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps, useThemeBindings } from "../utils/ui";
 import { useComboboxSelect } from "./combobox-select";
@@ -42,8 +44,8 @@ const props = defineProps({
   labelKey: { type: String, required: false },
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modelValue: { type: [String, Number, Array], required: false },
-  defaultValue: { type: [String, Number, Array], required: false },
+  modelValue: { type: [String, Number, Object, Array], required: false },
+  defaultValue: { type: [String, Number, Object, Array], required: false },
   multiple: { type: Boolean, required: false },
   searchable: { type: Boolean, required: false },
   virtualize: { type: [Boolean, Object], required: false },
@@ -63,7 +65,9 @@ const props = defineProps({
   searchTerm: { type: String, required: false },
   resetSearchTermOnBlur: { type: Boolean, required: false, default: true },
   resetSearchTermOnSelect: { type: Boolean, required: false, default: true },
-  arrow: { type: Boolean, required: false, default: false },
+  arrow: { type: [Boolean, Object], required: false, default: false },
+  positioning: { type: Object, required: false },
+  portal: { type: [Boolean, String], required: false, skipCheck: true, default: void 0 },
   adaptive: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
@@ -210,11 +214,13 @@ function onTriggerKeydown(event) {
 }
 const internalSearchText = ref(props.searchTerm ?? (props.creatable && !props.multiple && props.resetSearchTermOnSelect ? selectedOptions.value[0]?.label ?? "" : ""));
 const modeSearchLock = ref(false);
+const keyboardNavigatedOptions = ref(false);
 const searchText = computed({
   get: () => props.searchTerm ?? internalSearchText.value,
   set: (value) => {
     if (modeSearchLock.value)
       return;
+    keyboardNavigatedOptions.value = false;
     internalSearchText.value = value;
     emit("update:searchTerm", value);
   }
@@ -235,23 +241,78 @@ function revertUnmatchedText() {
   return true;
 }
 function onSearchKeydown(event) {
-  if (event.key !== "Enter" || event.isComposing || isSearchComposing.value || event.keyCode === 229)
+  if (event.target !== editableInput.value)
     return;
+  if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key) && !event.isComposing && !isSearchComposing.value) {
+    keyboardNavigatedOptions.value = true;
+    return;
+  }
+  if (event.key === "Backspace" && props.creatable && props.multiple && props.displayMode === "comma" && !event.isComposing && !isSearchComposing.value && event.keyCode !== 229 && !searchText.value && !editableInput.value.value && selectedValues.value.length) {
+    removeValue(selectedValues.value.at(-1));
+    event.preventDefault();
+    return;
+  }
+  if (event.key !== "Enter")
+    return;
+  if (event.isComposing || isSearchComposing.value || event.keyCode === 229) {
+    event.stopPropagation();
+    return;
+  }
   if (revertUnmatchedText()) {
     event.preventDefault();
+    event.stopPropagation();
     return;
   }
-  if (commitCreatableText(searchText.value)) {
-    searchText.value = "";
+  if (props.forceSelection)
+    return;
+  if (props.creatable && !searchText.value.trim()) {
+    const activeId2 = editableInput.value?.getAttribute("aria-activedescendant");
+    const activeOption2 = activeId2 ? document.getElementById(activeId2) : null;
+    if (keyboardNavigatedOptions.value && activeOption2?.getAttribute("aria-selected") === "false")
+      return;
+    event.stopPropagation();
+    return;
+  }
+  const activeId = editableInput.value?.getAttribute("aria-activedescendant");
+  const activeOption = activeId ? document.getElementById(activeId) : null;
+  if ((!hasMatchingOption(searchText.value) || !activeOption || activeOption.hasAttribute("data-selaras-create-option")) && commitCreatableText(searchText.value)) {
+    if (props.multiple)
+      searchText.value = "";
     event.preventDefault();
+    event.stopPropagation();
   }
 }
+const pointerInSuggestionContent = ref(false);
+function endSuggestionPointer() {
+  pointerInSuggestionContent.value = false;
+  window.removeEventListener("pointerup", endSuggestionPointer);
+  window.removeEventListener("pointercancel", endSuggestionPointer);
+}
+function startSuggestionPointer() {
+  pointerInSuggestionContent.value = true;
+  window.addEventListener("pointerup", endSuggestionPointer);
+  window.addEventListener("pointercancel", endSuggestionPointer);
+}
+onUnmounted(() => {
+  if (typeof window !== "undefined")
+    endSuggestionPointer();
+});
 function onSearchBlur() {
+  if (pointerInSuggestionContent.value)
+    return;
   if (revertUnmatchedText())
     return;
-  if (commitCreatableText(searchText.value))
+  if (props.forceSelection)
+    return;
+  if (commitCreatableText(searchText.value) && props.multiple)
     searchText.value = "";
 }
+function onComboboxValueUpdate(value) {
+  setValue(value ?? (props.multiple ? [] : void 0));
+  if (props.creatable && props.multiple) {
+    searchText.value = "";
+  }
+}
 function onDropdownClick() {
   searchText.value = "";
 }
@@ -332,6 +393,11 @@ const field = useFormField();
 const selectId = computed(() => props.id ?? field?.id);
 const selectInvalid = computed(() => props.invalid || (field?.invalid.value ?? false));
 const describedBy = computed(() => field?.describedBy.value);
+const selectedSummaryId = `selaras-autocomplete-selection-${useId()}`;
+const searchDescribedBy = computed(() => [
+  describedBy.value,
+  props.creatable && props.multiple && props.displayMode === "comma" && selectedOptions.value.length ? selectedSummaryId : void 0
+].filter(Boolean).join(" ") || void 0);
 const effectiveSize = computed(() => props.size ?? field?.size ?? "md");
 const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSize.value]);
 const icons = useIcons();
@@ -367,8 +433,9 @@ const searchInputProps = computed(() => mergeProps(
   nativeSearchInputAttrs.value,
   { onCompositionstart: onSearchCompositionStart, onCompositionend: onSearchCompositionEnd }
 ));
-const contentProps = computed(() => resolveSlot(ui.value.content, props.ui?.content));
-const arrowProps = computed(() => resolveSlot(ui.value.arrow, props.ui?.arrow));
+const contentProps = computed(() => ({ ...resolveSlot(ui.value.content, props.ui?.content), ...arrowContentProps(props.arrow), ...props.positioning }));
+const portalProps = computed(() => overlayPortalProps(props.portal));
+const arrowProps = computed(() => ({ ...resolveSlot(ui.value.arrow, props.ui?.arrow), ...arrowElementProps(props.arrow) }));
 const viewportProps = computed(() => resolveSlot(ui.value.viewport, props.ui?.viewport));
 const groupProps = computed(() => resolveSlot(ui.value.group, props.ui?.group));
 const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
@@ -440,6 +507,15 @@ function onModalSelection(value) {
   if (!props.multiple)
     updateOpen(false);
 }
+function serializeFormValue(value) {
+  if (typeof value !== "object")
+    return String(value);
+  try {
+    return JSON.stringify(value) ?? "";
+  } catch {
+    return String(value);
+  }
+}
 const adaptiveUi = computed(() => ({
   content: {
     class: "rounded-[var(--selaras-resolved-radius-md)]",
@@ -461,6 +537,9 @@ const adaptiveUi = computed(() => ({
 const bodyProps = computed(() => ({
   searchable: props.searchable,
   creatable: props.creatable,
+  multiple: props.multiple,
+  forceSelection: props.forceSelection,
+  selectedValues: selectedValues.value,
   searchText: searchText.value,
   displayValue,
   items: props.items,
@@ -488,13 +567,13 @@ const bodyProps = computed(() => ({
     :model-value="rekaSelection"
     :multiple="multiple"
     :disabled="disabled"
-    :ignore-filter="!searchable"
+    :ignore-filter="!searchable || creatable && multiple"
     :reset-search-term-on-blur="resetSearchTermOnBlur"
     :reset-search-term-on-select="resetSearchTermOnSelect"
     :data-selaras-color="colorRoleMarker"
     v-bind="rootProps"
     @update:open="updateOpen($event)"
-    @update:model-value="(value2) => setValue(value2 == null ? multiple ? [] : void 0 : value2)"
+    @update:model-value="(value2) => onComboboxValueUpdate(value2)"
   >
     <ComboboxAnchor>
       <!--
@@ -506,7 +585,10 @@ const bodyProps = computed(() => ({
       <div
         v-if="creatable"
         data-ui-group-item
+        :data-selaras-field-filled="selectedValues.length ? '' : void 0"
+        :data-selaras-field-active="open ? '' : void 0"
         v-bind="triggerProps"
+        @keydown.capture="onSearchKeydown"
       >
         <!--
           TagsInputRoot doesn't own selection truth here - it only reads
@@ -535,7 +617,7 @@ const bodyProps = computed(() => ({
           -->
           <TagsInputItem
             v-for="option in visibleOptions"
-            :key="option.value"
+            :key="option.key"
             :value="option.value"
             as-child
           >
@@ -547,7 +629,7 @@ const bodyProps = computed(() => ({
               :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--_selaras-color-fill)]' }"
             >
               <TagsInputItemText as="span">
-                <slot v-if="option.raw" name="item" :item="option.raw">
+                <slot v-if="option.raw !== void 0" name="item" :item="option.raw">
                   {{ option.label }}
                 </slot>
                 <template v-else>
@@ -561,6 +643,9 @@ const bodyProps = computed(() => ({
               </template>
             </Chip>
           </TagsInputItem>
+          <Tooltip v-if="overflowOptions.length" :text="overflowOptions.map((o) => o.label).join(', ')">
+            <span v-bind="chipOverflowProps">{{ messages.moreItems(overflowOptions.length) }}</span>
+          </Tooltip>
           <ComboboxInput v-model="searchText" as-child>
             <TagsInputInput
               :id="selectId"
@@ -568,31 +653,35 @@ const bodyProps = computed(() => ({
               :display-value="displayValue"
               :placeholder="placeholder"
               :aria-invalid="selectInvalid || void 0"
-              :aria-describedby="describedBy"
+              :aria-describedby="searchDescribedBy"
               :aria-busy="loading || void 0"
               v-bind="searchInputProps"
-              @keydown="onSearchKeydown"
               @blur="onSearchBlur"
             />
           </ComboboxInput>
         </TagsInputRoot>
+        <span v-if="multiple && displayMode === 'comma' && selectedOptions.length" :id="selectedSummaryId" class="sr-only">
+          {{ selectedOptions.map((o) => o.label).join(", ") }}
+        </span>
+        <span v-if="multiple && displayMode === 'comma' && selectedOptions.length" aria-hidden="true" v-bind="commaValueProps">
+          {{ commaText }}
+        </span>
+        <Tooltip v-if="multiple && displayMode === 'comma' && overflowOptions.length" :text="overflowOptions.map((o) => o.label).join(', ')">
+          <span v-bind="chipOverflowProps">{{ messages.moreItems(overflowOptions.length) }}</span>
+        </Tooltip>
         <ComboboxInput
-          v-else
+          v-if="!(multiple && displayMode === 'chip')"
           :id="selectId"
           :ref="setEditableInput"
           v-model="searchText"
           :display-value="displayValue"
-          :placeholder="placeholder"
+          :placeholder="multiple && displayMode === 'comma' && selectedOptions.length ? void 0 : placeholder"
           :aria-invalid="selectInvalid || void 0"
-          :aria-describedby="describedBy"
+          :aria-describedby="searchDescribedBy"
           :aria-busy="loading || void 0"
           v-bind="searchInputProps"
-          @keydown="onSearchKeydown"
           @blur="onSearchBlur"
         />
-        <Tooltip v-if="overflowOptions.length" :text="overflowOptions.map((o) => o.label).join(', ')">
-          <span v-bind="chipOverflowProps">{{ messages.moreItems(overflowOptions.length) }}</span>
-        </Tooltip>
         <!--
           A plain Button, not ComboboxCancel as-child - this trigger is a
           <div>, so unlike the non-creatable branch below there's no real
@@ -635,6 +724,8 @@ const bodyProps = computed(() => ({
         :id="selectId"
         ref="selectTrigger"
         data-ui-group-item
+        :data-selaras-field-filled="selectedValues.length ? '' : void 0"
+        :data-selaras-field-active="open ? '' : void 0"
         :aria-invalid="selectInvalid || void 0"
         :aria-describedby="describedBy"
         :aria-busy="loading || void 0"
@@ -654,7 +745,7 @@ const bodyProps = computed(() => ({
           <div v-if="displayMode === 'chip'" class="flex flex-1 flex-wrap items-center gap-1.5">
             <Chip
               v-for="option in visibleOptions"
-              :key="option.value"
+              :key="option.key"
               size="sm"
               color="primary"
               variant="soft"
@@ -663,7 +754,7 @@ const bodyProps = computed(() => ({
               :aria-current="option.value === selectedChipValue || void 0"
               :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--_selaras-color-fill)]' }"
             >
-              <slot v-if="option.raw" name="item" :item="option.raw">
+              <slot v-if="option.raw !== void 0" name="item" :item="option.raw">
                 {{ option.label }}
               </slot>
               <template v-else>
@@ -740,11 +831,13 @@ const bodyProps = computed(() => ({
       </ComboboxTrigger>
     </ComboboxAnchor>
 
-    <ComboboxPortal v-if="!showMobileSelectModal">
+    <ComboboxPortal v-if="!showMobileSelectModal" v-bind="portalProps">
       <ComboboxContent
         position="popper" :side-offset="4"
+        :hide-when-empty="creatable && !multiple && !forceSelection"
         :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" :data-selaras-color="colorRoleMarker"
         v-bind="showMobileAutocompletePanel ? mergeProps(contentProps, mobilePanelProps) : contentProps"
+        @pointerdown.capture="startSuggestionPointer"
       >
         <ComboboxSelectBody v-bind="bodyProps" @update:search-text="searchText = $event">
           <template #header>
@@ -829,7 +922,7 @@ const bodyProps = computed(() => ({
       type="hidden"
       :name="name ?? field?.name"
       :form="form"
-      :value="String(value)"
+      :value="serializeFormValue(value)"
       :disabled="disabled"
       :required="required && !disabled && index === 0"
     >

package/dist/runtime/internal/ComboboxSelectBase.vue.d.ts

@@ -1,6 +1,9 @@
 import type { VariantProps } from 'tailwind-variants';
 import type { SelectThemeSlots } from '../theme/select.js';
+import type { RoundedArrowConfig } from '../utils/arrow.js';
 import type { ColorRole } from '../utils/color-registry.js';
+import type { OverlayPortal, OverlayPositioning } from '../utils/overlay.js';
+import type { SelectModelValue } from '../utils/select-contracts.js';
 import type { UiProp } from '../utils/ui.js';
 import type { SelectItems, SelectOption } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
@@ -16,9 +19,9 @@ export interface ComboboxSelectBaseProps {
     open?: boolean;
     /** Initial uncontrolled open state. */
     defaultOpen?: boolean;
-    modelValue?: string | number | (string | number)[];
+    modelValue?: SelectModelValue | SelectModelValue[];
     /** Initial uncontrolled selection and native form reset target. */
-    defaultValue?: string | number | (string | number)[];
+    defaultValue?: SelectModelValue | SelectModelValue[];
     multiple?: boolean;
     searchable?: boolean;
     virtualize?: boolean | {
@@ -43,76 +46,78 @@ export interface ComboboxSelectBaseProps {
     resetSearchTermOnBlur?: boolean;
     resetSearchTermOnSelect?: boolean;
     /** Shows a small pointer triangle connecting the panel to its trigger. */
-    arrow?: boolean;
+    arrow?: boolean | RoundedArrowConfig;
+    positioning?: OverlayPositioning;
+    portal?: OverlayPortal;
     /** Opts into the component's accessible small-screen presentation. */
     adaptive?: boolean;
     ui?: UiProp<SelectThemeSlots>;
 }
 export interface ComboboxSelectBaseEmits {
     'update:open': [value: boolean];
-    'update:modelValue': [value: string | number | (string | number)[] | undefined];
+    'update:modelValue': [value: SelectModelValue | SelectModelValue[] | undefined];
     'update:searchTerm': [value: string];
 }
 declare var __VLS_43: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_94: {}, __VLS_101: {}, __VLS_116: {}, __VLS_140: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_160: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_144: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_164: {
     selected: import("./combobox-select.js").ResolvedOption | undefined;
-}, __VLS_171: {}, __VLS_178: {}, __VLS_185: {}, __VLS_213: {}, __VLS_216: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_228: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_231: {}, __VLS_267: string, __VLS_268: {}, __VLS_271: {
-    item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_274: {
-    group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
+}, __VLS_175: {}, __VLS_182: {}, __VLS_189: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {}, __VLS_228: {}, __VLS_231: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_234: {
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
+}, __VLS_237: {}, __VLS_273: string, __VLS_274: {}, __VLS_277: {
+    item: SelectModelValue | SelectOption<SelectModelValue>;
+}, __VLS_280: {
+    group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_267>]?: (props: typeof __VLS_268) => any;
+    [K in NonNullable<typeof __VLS_273>]?: (props: typeof __VLS_274) => any;
 } & {
     item?: (props: typeof __VLS_43) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_94) => any;
+    'clear-icon'?: (props: typeof __VLS_98) => any;
 } & {
-    'loading-icon'?: (props: typeof __VLS_101) => any;
+    'loading-icon'?: (props: typeof __VLS_105) => any;
 } & {
-    'dropdown-icon'?: (props: typeof __VLS_116) => any;
+    'dropdown-icon'?: (props: typeof __VLS_120) => any;
 } & {
-    item?: (props: typeof __VLS_140) => any;
+    item?: (props: typeof __VLS_144) => any;
 } & {
-    value?: (props: typeof __VLS_160) => any;
+    value?: (props: typeof __VLS_164) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_171) => any;
+    'clear-icon'?: (props: typeof __VLS_175) => any;
 } & {
-    'loading-icon'?: (props: typeof __VLS_178) => any;
+    'loading-icon'?: (props: typeof __VLS_182) => any;
 } & {
-    'dropdown-icon'?: (props: typeof __VLS_185) => any;
+    'dropdown-icon'?: (props: typeof __VLS_189) => any;
 } & {
-    header?: (props: typeof __VLS_213) => any;
+    header?: (props: typeof __VLS_219) => any;
 } & {
-    'filter-icon'?: (props: typeof __VLS_216) => any;
+    'filter-icon'?: (props: typeof __VLS_222) => any;
 } & {
-    empty?: (props: typeof __VLS_219) => any;
+    empty?: (props: typeof __VLS_225) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_222) => any;
+    'empty-filter'?: (props: typeof __VLS_228) => any;
 } & {
-    item?: (props: typeof __VLS_225) => any;
+    item?: (props: typeof __VLS_231) => any;
 } & {
-    group?: (props: typeof __VLS_228) => any;
+    group?: (props: typeof __VLS_234) => any;
 } & {
-    footer?: (props: typeof __VLS_231) => any;
+    footer?: (props: typeof __VLS_237) => any;
 } & {
-    item?: (props: typeof __VLS_271) => any;
+    item?: (props: typeof __VLS_277) => any;
 } & {
-    group?: (props: typeof __VLS_274) => any;
+    group?: (props: typeof __VLS_280) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | number | (string | number)[] | undefined) => any;
+    "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;
     "update:open": (value: boolean) => any;
     "update:searchTerm": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBaseProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | number | (string | number)[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: SelectModelValue | SelectModelValue[] | undefined) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
     "onUpdate:searchTerm"?: ((value: string) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;