@sewadah/selaras 0.1.1 → 0.2.0

package/dist/runtime/internal/ComboboxSelectBase.vue

@@ -7,6 +7,8 @@ import {
   ComboboxPortal,
   ComboboxRoot,
   ComboboxTrigger,
+  DialogClose,
+  ListboxRoot,
   TagsInputInput,
   TagsInputItem,
   TagsInputItemDelete,
@@ -14,28 +16,34 @@ import {
   TagsInputRoot,
   useDirection
 } from "reka-ui";
-import { computed, ref } from "vue";
+import { computed, getCurrentInstance, mergeProps, nextTick, onMounted, onUnmounted, ref, useId, watch } from "vue";
 import Button from "../components/Button.vue";
 import Chip from "../components/Chip.vue";
 import Icon from "../components/Icon.vue";
 import Modal from "../components/Modal.vue";
 import Tooltip from "../components/Tooltip.vue";
-import { useComboboxSelect } from "../composables/use-combobox-select";
 import { useFormField } from "../composables/use-form-field";
 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 { resolveSlot, useComponentTheme, useRootProps } from "../utils/ui";
+import { isNativeInputA11yAttr, isNativeInputAttr, isNativeInputEvent } from "../utils/native-input";
+import { resolveRegisteredColorRole } from "../utils/registered-colors";
+import { resolveSlot, useComponentTheme, useFallthroughAttrs, useRootProps, useThemeBindings } from "../utils/ui";
+import { useComboboxSelect } from "./combobox-select";
 import ComboboxSelectBody from "./ComboboxSelectBody.vue";
 defineOptions({ inheritAttrs: false });
 const props = defineProps({
   id: { type: String, required: false },
   name: { type: String, required: false },
-  items: { type: Array, required: true },
+  form: { type: String, required: false },
+  items: { type: null, required: true },
   valueKey: { type: String, required: false },
   labelKey: { type: String, required: false },
-  modelValue: { type: [String, Array], 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 },
   multiple: { type: Boolean, required: false },
   searchable: { type: Boolean, required: false },
   virtualize: { type: [Boolean, Object], required: false },
@@ -44,6 +52,7 @@ const props = defineProps({
   loading: { type: Boolean, required: false },
   placeholder: { type: String, required: false },
   disabled: { type: Boolean, required: false },
+  required: { type: Boolean, required: false },
   size: { type: null, required: false },
   invalid: { type: Boolean, required: false },
   color: { type: null, required: false, default: "primary" },
@@ -55,12 +64,77 @@ const props = defineProps({
   resetSearchTermOnBlur: { type: Boolean, required: false, default: true },
   resetSearchTermOnSelect: { type: Boolean, required: false, default: true },
   arrow: { type: Boolean, required: false, default: false },
-  mobileModal: { type: Boolean, required: false },
+  adaptive: { type: Boolean, required: false },
   ui: { type: Object, required: false }
 });
-const emit = defineEmits(["update:modelValue", "update:searchTerm"]);
+const emit = defineEmits(["update:open", "update:modelValue", "update:searchTerm"]);
+const instance = getCurrentInstance();
+const initialValue = Array.isArray(props.defaultValue) ? [...props.defaultValue] : props.defaultValue;
+const isControlled = () => Object.hasOwn(instance.vnode.props ?? {}, "modelValue") || Object.hasOwn(instance.vnode.props ?? {}, "model-value");
+function selectionForMode(value, multiple) {
+  if (multiple) {
+    if (value === void 0)
+      return [];
+    return Array.isArray(value) ? [...value] : [value];
+  }
+  return Array.isArray(value) ? value[0] : value;
+}
+function assertControlledSelectionShape(value, multiple) {
+  if (value === void 0)
+    return;
+  if (multiple && !Array.isArray(value))
+    throw new TypeError("[selaras] A controlled Select or Autocomplete with multiple=true requires modelValue to be an array.");
+  if (!multiple && Array.isArray(value))
+    throw new TypeError("[selaras] A controlled Select or Autocomplete with multiple=false requires modelValue to be a scalar or undefined.");
+}
+function assertUniqueMultipleSelection(value, property) {
+  if (!Array.isArray(value))
+    return;
+  const values = /* @__PURE__ */ new Set();
+  for (const selectedValue of value) {
+    if (values.has(selectedValue))
+      throw new TypeError(`[selaras] A multiple Select or Autocomplete requires unique ${property} values.`);
+    values.add(selectedValue);
+  }
+}
+const localValue = ref(selectionForMode(initialValue, !!props.multiple));
+const selection = computed(() => {
+  const value = isControlled() ? props.modelValue : localValue.value;
+  if (isControlled()) {
+    assertControlledSelectionShape(value, !!props.multiple);
+    if (props.multiple)
+      assertUniqueMultipleSelection(value, "modelValue");
+  }
+  return value;
+});
+const rekaSelection = computed(() => selection.value ?? (props.multiple ? [] : null));
+function updateSelection(event, value) {
+  if (!isControlled())
+    localValue.value = value;
+  emit(event, value);
+}
+const editableInput = ref();
+const comboboxRootKey = ref(0);
+function setEditableInput(element) {
+  const candidate = typeof HTMLInputElement !== "undefined" && element instanceof HTMLInputElement ? element : element?.$el;
+  editableInput.value = typeof HTMLInputElement !== "undefined" && candidate instanceof HTMLInputElement ? candidate : void 0;
+}
+assertUniqueMultipleSelection(initialValue, "defaultValue");
+if (isControlled()) {
+  assertControlledSelectionShape(props.modelValue, !!props.multiple);
+  if (props.multiple)
+    assertUniqueMultipleSelection(props.modelValue, "modelValue");
+}
+const formAnchor = ref();
+let ownerForm = null;
+onMounted(() => {
+  ownerForm = formAnchor.value?.form ?? null;
+  ownerForm?.addEventListener("reset", resetSelection);
+});
+onUnmounted(() => ownerForm?.removeEventListener("reset", resetSelection));
 const {
   flatOptions,
+  selectedValues,
   selectedOptions,
   visibleOptions,
   overflowOptions,
@@ -71,7 +145,9 @@ const {
   removeValue,
   hasMatchingOption,
   commitCreatableText
-} = useComboboxSelect(props, emit, { creatable: props.creatable });
+} = useComboboxSelect(new Proxy(props, {
+  get: (target, key) => key === "modelValue" ? selection.value : Reflect.get(target, key)
+}), updateSelection, { creatable: props.creatable });
 function clear() {
   setValue(props.multiple ? [] : void 0);
 }
@@ -110,7 +186,7 @@ function onTriggerKeydown(event) {
         selectedChipValue.value = chips[0].value;
       } else if (event.key === "End") {
         selectedChipValue.value = lastValue;
-      } else if (!selectedChipValue.value) {
+      } else if (selectedChipValue.value === void 0) {
         if (!isNext)
           selectedChipValue.value = lastValue;
       } else {
@@ -132,14 +208,26 @@ function onTriggerKeydown(event) {
     }
   }
 }
-const internalSearchText = ref(props.searchTerm ?? "");
+const internalSearchText = ref(props.searchTerm ?? (props.creatable && !props.multiple && props.resetSearchTermOnSelect ? selectedOptions.value[0]?.label ?? "" : ""));
+const modeSearchLock = ref(false);
 const searchText = computed({
   get: () => props.searchTerm ?? internalSearchText.value,
   set: (value) => {
+    if (modeSearchLock.value)
+      return;
     internalSearchText.value = value;
     emit("update:searchTerm", value);
   }
 });
+const isSearchComposing = ref(false);
+function onSearchCompositionStart() {
+  isSearchComposing.value = true;
+}
+function onSearchCompositionEnd() {
+  nextTick(() => {
+    isSearchComposing.value = false;
+  });
+}
 function revertUnmatchedText() {
   if (!props.forceSelection || !searchText.value || hasMatchingOption(searchText.value))
     return false;
@@ -147,12 +235,16 @@ function revertUnmatchedText() {
   return true;
 }
 function onSearchKeydown(event) {
-  if (event.key !== "Enter")
+  if (event.key !== "Enter" || event.isComposing || isSearchComposing.value || event.keyCode === 229)
     return;
-  if (revertUnmatchedText())
+  if (revertUnmatchedText()) {
+    event.preventDefault();
     return;
-  if (commitCreatableText(searchText.value))
+  }
+  if (commitCreatableText(searchText.value)) {
     searchText.value = "";
+    event.preventDefault();
+  }
 }
 function onSearchBlur() {
   if (revertUnmatchedText())
@@ -164,10 +256,63 @@ function onDropdownClick() {
   searchText.value = "";
 }
 function displayValue(value) {
-  if (!props.creatable || props.multiple || !value || Array.isArray(value))
+  if (!props.creatable || props.multiple || value == null || Array.isArray(value))
     return "";
   return resolveOption(value).label;
 }
+function singleSelectionLabel(value) {
+  return value === void 0 || Array.isArray(value) ? "" : resolveOption(value).label;
+}
+watch(
+  [() => !!props.multiple, selection],
+  ([multiple, currentValue], [previousMultiple, previousValue]) => {
+    if (multiple === previousMultiple)
+      return;
+    const wasEditableFocused = props.creatable && typeof document !== "undefined" && document.activeElement === editableInput.value;
+    const abortingComposition = !!props.creatable && isSearchComposing.value;
+    const previouslyIdle = props.creatable && props.searchTerm === void 0 && searchText.value === (previousMultiple || !props.resetSearchTermOnSelect ? "" : singleSelectionLabel(previousValue));
+    const savedSearchText = searchText.value;
+    let nextValue = currentValue;
+    if (isControlled()) {
+      assertControlledSelectionShape(currentValue, multiple);
+    } else {
+      nextValue = selectionForMode(currentValue, multiple);
+      updateSelection("update:modelValue", nextValue);
+    }
+    selectedChipValue.value = void 0;
+    if (props.creatable)
+      isSearchComposing.value = false;
+    if (abortingComposition) {
+      searchText.value = "";
+      updateOpen(false);
+      comboboxRootKey.value++;
+    }
+    const nextSearchText = abortingComposition ? "" : previouslyIdle ? multiple || !props.resetSearchTermOnSelect ? "" : singleSelectionLabel(nextValue) : savedSearchText;
+    if (props.creatable || props.searchable) {
+      modeSearchLock.value = true;
+      if (props.searchTerm === void 0)
+        internalSearchText.value = nextSearchText;
+    }
+    const priorInput = editableInput.value;
+    nextTick(() => {
+      if (props.creatable || props.searchable) {
+        if (props.searchTerm === void 0)
+          internalSearchText.value = nextSearchText;
+        nextTick(() => {
+          modeSearchLock.value = false;
+        });
+      }
+      if (!wasEditableFocused)
+        return;
+      if (typeof document === "undefined")
+        return;
+      if (document.activeElement !== document.body && document.activeElement !== priorInput)
+        return;
+      editableInput.value?.focus();
+    });
+  },
+  { flush: "pre" }
+);
 const virtualizeConfig = computed(() => {
   if (!props.virtualize)
     return null;
@@ -192,9 +337,17 @@ const clearSize = computed(() => ({ sm: "sm", md: "sm", lg: "md" })[effectiveSiz
 const icons = useIcons();
 const messages = useMessages();
 const theme = useComponentTheme("select", selectTheme);
-const ui = computed(() => theme.value({ size: effectiveSize.value, color: props.color, invalid: selectInvalid.value }));
-const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root);
-const triggerProps = computed(() => resolveSlot(ui.value.trigger, props.ui?.trigger));
+const themeBindings = useThemeBindings();
+const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
+const colorRoleMarker = computed(() => effectiveColor.value);
+const ui = computed(() => theme.value({ size: effectiveSize.value, color: effectiveColor.value, invalid: selectInvalid.value }));
+const nativeTriggerAttrs = useFallthroughAttrs((key) => !props.creatable && (isNativeInputA11yAttr(key) || !props.searchable && isNativeInputEvent(key)));
+const rootProps = useRootProps(() => ui.value.root, () => props.ui?.root, { exclude: (key) => isNativeInputA11yAttr(key) || isNativeInputEvent(key) || (props.creatable || props.searchable) && isNativeInputAttr(key) });
+const nativeSearchInputAttrs = useFallthroughAttrs((key) => isNativeInputAttr(key) || props.creatable && isNativeInputA11yAttr(key));
+const triggerProps = computed(() => mergeProps(
+  resolveSlot(ui.value.trigger, props.ui?.trigger),
+  !props.creatable ? nativeTriggerAttrs.value : {}
+));
 const valueProps = computed(() => resolveSlot(ui.value.value, props.ui?.value));
 const commaValueProps = computed(() => {
   const override = props.ui?.value;
@@ -209,7 +362,11 @@ const iconProps = computed(() => resolveSlot(ui.value.icon, props.ui?.icon));
 const clearProps = computed(() => resolveSlot(ui.value.clear, props.ui?.clear));
 const dropdownProps = computed(() => resolveSlot(ui.value.dropdown, props.ui?.dropdown));
 const searchWrapperProps = computed(() => resolveSlot(ui.value.searchWrapper, props.ui?.searchWrapper));
-const searchInputProps = computed(() => resolveSlot(ui.value.searchInput, props.ui?.searchInput));
+const searchInputProps = computed(() => mergeProps(
+  resolveSlot(ui.value.searchInput, props.ui?.searchInput),
+  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 viewportProps = computed(() => resolveSlot(ui.value.viewport, props.ui?.viewport));
@@ -218,9 +375,89 @@ const itemProps = computed(() => resolveSlot(ui.value.item, props.ui?.item));
 const itemIndicatorProps = computed(() => resolveSlot(ui.value.itemIndicator, props.ui?.itemIndicator));
 const emptyProps = computed(() => resolveSlot(ui.value.empty, props.ui?.empty));
 const mobileContentProps = computed(() => resolveSlot(ui.value.mobileContent, props.ui?.mobileContent));
-const internalOpen = ref(false);
+const mobilePanelProps = computed(() => mergeProps(
+  {
+    style: {
+      width: "min(calc(100vw - 2rem), 36rem)",
+      minWidth: "0",
+      maxHeight: "min(50vh, 28rem)"
+    }
+  },
+  resolveSlot(ui.value.mobilePanel, props.ui?.mobilePanel)
+));
+const localOpen = ref(props.defaultOpen ?? false);
+const isOpenControlled = () => Object.hasOwn(instance.vnode.props ?? {}, "open");
+const open = computed(() => isOpenControlled() ? props.open ?? false : localOpen.value);
+watch(flatOptions, (options, previousOptions) => {
+  const value = selection.value;
+  if (!props.creatable || props.multiple || open.value || props.searchTerm !== void 0 || !props.resetSearchTermOnSelect || value === void 0 || Array.isArray(value))
+    return;
+  const previousLabel = previousOptions.find((option) => option.value === value)?.label ?? String(value);
+  const nextLabel = options.find((option) => option.value === value)?.label ?? String(value);
+  if (previousLabel !== nextLabel && searchText.value === previousLabel)
+    searchText.value = nextLabel;
+});
+function updateOpen(value) {
+  if (!isOpenControlled())
+    localOpen.value = value;
+  emit("update:open", value);
+}
+function resetSelection(event) {
+  queueMicrotask(() => {
+    if (event.defaultPrevented)
+      return;
+    setValue(selectionForMode(initialValue, !!props.multiple));
+    searchText.value = props.creatable && !props.multiple && props.resetSearchTermOnSelect ? singleSelectionLabel(selection.value) : "";
+    selectedChipValue.value = void 0;
+    updateOpen(false);
+  });
+}
 const isMobile = useIsMobile();
-const showMobileModal = computed(() => props.mobileModal && isMobile.value);
+const mobilePresentation = ref(false);
+watch(open, (open2) => {
+  if (!open2 && mobilePresentation.value && !props.creatable && props.resetSearchTermOnBlur)
+    searchText.value = "";
+  mobilePresentation.value = open2 && !!props.adaptive && isMobile.value;
+});
+onMounted(() => {
+  if (!open.value)
+    return;
+  mobilePresentation.value = !!props.adaptive && isMobile.value;
+  if (mobilePresentation.value && props.creatable && !props.disabled) {
+    nextTick(() => {
+      editableInput.value?.focus();
+    });
+  }
+});
+const showMobileSelectModal = computed(() => mobilePresentation.value && !props.creatable);
+const showMobileAutocompletePanel = computed(() => mobilePresentation.value && !!props.creatable);
+const modalId = `selaras-select-modal-${useId()}`;
+const selectTrigger = ref();
+const modalBody = ref();
+const modalTriggerAttrs = computed(() => !props.creatable && (open.value ? showMobileSelectModal.value : props.adaptive && isMobile.value) ? { "aria-haspopup": "dialog", "aria-controls": modalId } : {});
+function onModalSelection(value) {
+  setValue(value == null ? props.multiple ? [] : void 0 : value);
+  if (!props.multiple)
+    updateOpen(false);
+}
+const adaptiveUi = computed(() => ({
+  content: {
+    class: "rounded-[var(--selaras-resolved-radius-md)]",
+    ...!props.creatable ? {
+      "id": modalId,
+      "aria-modal": true,
+      "onOpenAutoFocus": (event) => {
+        if (props.searchable && modalBody.value?.focusSearch())
+          event.preventDefault();
+      },
+      "onCloseAutoFocus": (event) => {
+        event.preventDefault();
+        if (!props.disabled && selectTrigger.value?.$el?.isConnected)
+          selectTrigger.value.$el.focus();
+      }
+    } : {}
+  }
+}));
 const bodyProps = computed(() => ({
   searchable: props.searchable,
   creatable: props.creatable,
@@ -246,17 +483,18 @@ const bodyProps = computed(() => ({
 
 <template>
   <ComboboxRoot
-    :open="internalOpen"
-    :model-value="modelValue"
+    :key="comboboxRootKey"
+    :open="open"
+    :model-value="rekaSelection"
     :multiple="multiple"
     :disabled="disabled"
-    :name="name ?? field?.name"
     :ignore-filter="!searchable"
     :reset-search-term-on-blur="resetSearchTermOnBlur"
     :reset-search-term-on-select="resetSearchTermOnSelect"
+    :data-selaras-color="colorRoleMarker"
     v-bind="rootProps"
-    @update:open="internalOpen = $event"
-    @update:model-value="(value) => emit('update:modelValue', value)"
+    @update:open="updateOpen($event)"
+    @update:model-value="(value2) => setValue(value2 == null ? multiple ? [] : void 0 : value2)"
   >
     <ComboboxAnchor>
       <!--
@@ -267,11 +505,7 @@ const bodyProps = computed(() => ({
       -->
       <div
         v-if="creatable"
-        :id="selectId"
         data-ui-group-item
-        :aria-invalid="selectInvalid || void 0"
-        :aria-describedby="describedBy"
-        :aria-busy="loading || void 0"
         v-bind="triggerProps"
       >
         <!--
@@ -310,15 +544,18 @@ const bodyProps = computed(() => ({
               color="primary"
               variant="soft"
               removable
-              :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--ui-primary)]' }"
+              :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--_selaras-color-fill)]' }"
             >
               <TagsInputItemText as="span">
-                <slot name="item" :item="option.raw">
+                <slot v-if="option.raw" name="item" :item="option.raw">
                   {{ option.label }}
                 </slot>
+                <template v-else>
+                  {{ option.label }}
+                </template>
               </TagsInputItemText>
               <template #remove="{ class: removeClass }">
-                <TagsInputItemDelete :class="removeClass" :aria-label="messages.removeItem(option.label)">
+                <TagsInputItemDelete :class="removeClass" :aria-labelledby="undefined" :aria-label="messages.removeItem(option.label)">
                   <Icon :name="icons.close" class="size-3" />
                 </TagsInputItemDelete>
               </template>
@@ -326,8 +563,13 @@ const bodyProps = computed(() => ({
           </TagsInputItem>
           <ComboboxInput v-model="searchText" as-child>
             <TagsInputInput
+              :id="selectId"
+              :ref="setEditableInput"
               :display-value="displayValue"
               :placeholder="placeholder"
+              :aria-invalid="selectInvalid || void 0"
+              :aria-describedby="describedBy"
+              :aria-busy="loading || void 0"
               v-bind="searchInputProps"
               @keydown="onSearchKeydown"
               @blur="onSearchBlur"
@@ -336,9 +578,14 @@ const bodyProps = computed(() => ({
         </TagsInputRoot>
         <ComboboxInput
           v-else
+          :id="selectId"
+          :ref="setEditableInput"
           v-model="searchText"
           :display-value="displayValue"
           :placeholder="placeholder"
+          :aria-invalid="selectInvalid || void 0"
+          :aria-describedby="describedBy"
+          :aria-busy="loading || void 0"
           v-bind="searchInputProps"
           @keydown="onSearchKeydown"
           @blur="onSearchBlur"
@@ -386,11 +633,12 @@ const bodyProps = computed(() => ({
       <ComboboxTrigger
         v-else
         :id="selectId"
+        ref="selectTrigger"
         data-ui-group-item
         :aria-invalid="selectInvalid || void 0"
         :aria-describedby="describedBy"
         :aria-busy="loading || void 0"
-        v-bind="triggerProps"
+        v-bind="mergeProps(triggerProps, modalTriggerAttrs)"
         tabindex="0"
         @keydown="onTriggerKeydown"
         @blur="selectedChipValue = void 0"
@@ -413,11 +661,14 @@ const bodyProps = computed(() => ({
               removable
               :data-state="option.value === selectedChipValue ? 'active' : 'inactive'"
               :aria-current="option.value === selectedChipValue || void 0"
-              :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--ui-primary)]' }"
+              :ui="{ root: 'data-[state=active]:ring-2 data-[state=active]:ring-[var(--_selaras-color-fill)]' }"
             >
-              <slot name="item" :item="option.raw">
+              <slot v-if="option.raw" name="item" :item="option.raw">
                 {{ option.label }}
               </slot>
+              <template v-else>
+                {{ option.label }}
+              </template>
               <!-- role="button", not a real <button> - this trigger already IS a <button> (ComboboxTrigger), see the clear button below for why. -->
               <template #remove="{ class: removeClass }">
                 <span role="button" tabindex="-1" :class="removeClass" :aria-label="messages.removeItem(option.label)" @click.stop="removeValue(option.value)">
@@ -489,8 +740,12 @@ const bodyProps = computed(() => ({
       </ComboboxTrigger>
     </ComboboxAnchor>
 
-    <ComboboxPortal v-if="!showMobileModal">
-      <ComboboxContent position="popper" :side-offset="4" v-bind="contentProps">
+    <ComboboxPortal v-if="!showMobileSelectModal">
+      <ComboboxContent
+        position="popper" :side-offset="4"
+        :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"
+      >
         <ComboboxSelectBody v-bind="bodyProps" @update:search-text="searchText = $event">
           <template #header>
             <slot name="header" />
@@ -518,73 +773,65 @@ const bodyProps = computed(() => ({
       </ComboboxContent>
     </ComboboxPortal>
     <!--
-      Below 768px, presents the exact same ComboboxSelectBody - the same
-      Root-injected filtering/selection/keyboard behavior, unchanged -
-      inside a centered Modal instead of the small anchored popover above.
-      No ComboboxPortal here: Modal's own DialogPortal already teleports
-      #content as a whole, nesting a second teleport inside it would be
-      redundant. ComboboxContent still wraps it (no `position` prop, so
-      Reka renders it as a plain unstyled box rather than applying its own
-      Floating-UI positioning - confirmed by reading ComboboxContentImpl
-      directly) since ComboboxViewport/ComboboxItem's own context still
-      expects a ComboboxContent ancestor. `title`/`description` are
-      passed explicitly here - Modal's own dev-mode a11y warning is
-      satisfied merely by the content slot existing, so it won't catch a
-      name-less dialog on its own; Modal registers both with Reka
-      (visually hidden) even though the content slot replaces its own
-      visible header.
-    -->
-    <!--
-      auto-focus="!creatable" - Select's own trigger is a one-off tap (a
-      button; once the modal opens, the next interaction is tapping an
-      item, or typing into a *different* search box that lives inside the
-      modal itself), so Reka's default open-autofocus is fine, even
-      helpful for a keyboard user. Autocomplete's trigger *is* the search
-      input itself, typed into continuously while the modal stays open -
-      Reka's default there stole focus away on the very first keystroke
-      (confirmed live: opening via typing immediately re-focused the
-      modal's own content, silently dropping every character typed
-      afterward) - the same class of bug DatePicker's own range-mode
-      autofocus interference was, just triggered by every keystroke
-      instead of a single click.
-      :ui content - overrides Modal's own default rounded-lg down to
-      rounded-md, matching every other floating panel in this library
-      (Select/Autocomplete/DatePicker's own desktop popovers all use
-      rounded-md) - rounded-lg reads noticeably heavier/rounder than the
-      desktop equivalent for what's otherwise the same surface.
+      Modal owns Select's focus/dismissal; Listbox only supplies selection.
+      The content slot retains Modal's registered title/description.
+      Autocomplete stays in the nonmodal ComboboxContent branch above: its
+      editable input is the one focus and dismissal owner for that surface.
     -->
     <Modal
-      v-else :open="internalOpen" :title="placeholder || messages.search" :description="messages.searchDescription"
-      :auto-focus="!creatable" :ui="{ content: 'rounded-[var(--ui-radius-md)]' }"
-      @update:open="internalOpen = $event"
+      v-else :open="open" :title="placeholder || messages.search" :description="messages.searchDescription"
+      :auto-focus="true" :ui="adaptiveUi"
+      @update:open="updateOpen($event)"
     >
       <template #content>
-        <ComboboxContent v-bind="mobileContentProps">
-          <ComboboxSelectBody v-bind="bodyProps" @update:search-text="searchText = $event">
-            <template #header>
-              <slot name="header" />
-            </template>
-            <template #filter-icon>
-              <slot name="filter-icon" />
-            </template>
-            <template #empty>
-              <slot name="empty" />
-            </template>
-            <template #empty-filter>
-              <slot name="empty-filter" />
+        <ListboxRoot
+          v-if="!creatable"
+          :model-value="rekaSelection" :multiple="multiple" :disabled="disabled"
+          :data-selaras-theme="themeBindings['data-selaras-theme']" :data-selaras-mode="themeBindings['data-selaras-mode']" :style="themeBindings.style" :data-selaras-color="colorRoleMarker" v-bind="mobileContentProps"
+          @update:model-value="onModalSelection"
+        >
+          <ComboboxSelectBody ref="modalBody" v-bind="bodyProps" listbox @update:search-text="searchText = $event">
+            <template v-for="slotName in ['header', 'filter-icon', 'empty', 'empty-filter', 'footer'].filter((slotName) => $slots[slotName])" #[slotName]>
+              <slot :name="slotName" />
             </template>
-            <template #item="scope">
+            <template v-if="$slots.item" #item="scope">
               <slot name="item" v-bind="scope" />
             </template>
-            <template #group="scope">
+            <template v-if="$slots.group" #group="scope">
               <slot name="group" v-bind="scope" />
             </template>
-            <template #footer>
-              <slot name="footer" />
-            </template>
           </ComboboxSelectBody>
-        </ComboboxContent>
+        </ListboxRoot>
+        <div v-if="!creatable" class="flex justify-end p-2">
+          <DialogClose as-child>
+            <Button variant="ghost" color="neutral">
+              {{ multiple ? messages.done : messages.cancel }}
+            </Button>
+          </DialogClose>
+        </div>
       </template>
     </Modal>
+    <input
+      ref="formAnchor"
+      :type="required ? 'text' : 'hidden'"
+      :class="required ? 'sr-only' : void 0"
+      :name="required && !selectedValues.length ? name ?? field?.name : void 0"
+      :form="form"
+      :required="required && !disabled && !selectedValues.length"
+      :disabled="disabled || !!selectedValues.length"
+      aria-hidden="true"
+      tabindex="-1"
+      autocomplete="off"
+    >
+    <input
+      v-for="(value, index) in selectedValues"
+      :key="index"
+      type="hidden"
+      :name="name ?? field?.name"
+      :form="form"
+      :value="String(value)"
+      :disabled="disabled"
+      :required="required && !disabled && index === 0"
+    >
   </ComboboxRoot>
 </template>