@sewadah/selaras 0.2.0 → 0.3.1

package/dist/runtime/directives/mask.js

@@ -0,0 +1,165 @@
+const defaultMaskTokens = {
+  "#": { pattern: /\d/ },
+  "@": { pattern: /[a-z]/i },
+  "*": { pattern: /[\da-z]/i }
+};
+function formatMask(input, mask, tokens = defaultMaskTokens, raw = true) {
+  let masked = "";
+  let unmasked = "";
+  let inputIndex = 0;
+  let maskIndex = 0;
+  let skipped = 0;
+  const slotEnds = [];
+  while (maskIndex < mask.length && inputIndex < input.length) {
+    const maskChar = mask[maskIndex];
+    const token = tokens[maskChar];
+    const char = input[inputIndex];
+    if (token) {
+      if (token.pattern.test(char)) {
+        const accepted = token.transform ? token.transform(char) : char;
+        masked += accepted;
+        unmasked += accepted;
+        slotEnds.push(masked.length);
+        maskIndex++;
+      } else {
+        skipped++;
+      }
+      inputIndex++;
+    } else {
+      masked += maskChar;
+      if (!raw && char === maskChar && inputIndex - skipped === maskIndex)
+        inputIndex++;
+      maskIndex++;
+    }
+  }
+  let slotCount = 0;
+  for (const char of mask) {
+    if (tokens[char])
+      slotCount++;
+  }
+  return { masked, unmasked, completed: slotEnds.length === slotCount, slotEnds };
+}
+const states = /* @__PURE__ */ new WeakMap();
+let nativeDescriptor;
+function nativeValue() {
+  return nativeDescriptor ??= Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value");
+}
+function readNative(input) {
+  return nativeValue().get.call(input);
+}
+function writeNative(input, value) {
+  if (readNative(input) !== value)
+    nativeValue().set.call(input, value);
+}
+function resolveInput(element) {
+  if (element instanceof HTMLInputElement)
+    return element;
+  return element.querySelector("input") ?? void 0;
+}
+function normalize(value) {
+  if (!value)
+    return void 0;
+  return typeof value === "string" ? { mask: value } : value.mask ? value : void 0;
+}
+function resolveTokens(options) {
+  return options.tokens ? { ...defaultMaskTokens, ...options.tokens } : defaultMaskTokens;
+}
+function commit(state, result) {
+  state.masked = result.masked;
+  state.unmasked = result.unmasked;
+  writeNative(state.input, result.masked);
+  if (state.reported === result.masked)
+    return;
+  state.reported = result.masked;
+  const detail = { value: result.unmasked, maskedValue: result.masked, completed: result.completed };
+  state.onMask?.(detail);
+  state.input.dispatchEvent(new CustomEvent("mask", { bubbles: true, detail }));
+}
+function handleInput(state, event) {
+  if (event.isComposing)
+    return;
+  const { input, mask, tokens } = state;
+  const current = readNative(input);
+  const caret = input.selectionStart ?? current.length;
+  const result = formatMask(current, mask, tokens, false);
+  const inputType = event.inputType ?? "";
+  if (inputType.startsWith("delete"))
+    result.masked = result.masked.slice(0, result.slotEnds.at(-1) ?? 0);
+  const position = Math.min(formatMask(current.slice(0, caret), mask, tokens, false).masked.length, result.masked.length);
+  commit(state, result);
+  if (document.activeElement === input)
+    input.setSelectionRange(position, position);
+}
+function install(element, input, options) {
+  const state = {
+    input,
+    mask: options.mask,
+    tokens: resolveTokens(options),
+    onMask: options.onMask,
+    masked: "",
+    unmasked: "",
+    onInput: (event) => handleInput(state, event)
+  };
+  Object.defineProperty(input, "value", {
+    configurable: true,
+    enumerable: nativeValue().enumerable,
+    get: () => {
+      const current = readNative(input);
+      return current === state.masked ? state.unmasked : formatMask(current, state.mask, state.tokens, false).unmasked;
+    },
+    set: (value) => {
+      commit(state, formatMask(value == null ? "" : String(value), state.mask, state.tokens));
+    }
+  });
+  input.addEventListener("input", state.onInput, true);
+  states.set(element, state);
+  commit(state, formatMask(readNative(input), state.mask, state.tokens));
+}
+function uninstall(element, state) {
+  state.input.removeEventListener("input", state.onInput, true);
+  Reflect.deleteProperty(state.input, "value");
+  states.delete(element);
+}
+function apply(element, value) {
+  const options = normalize(value);
+  const input = resolveInput(element);
+  const state = states.get(element);
+  if (state && (!options || state.input !== input))
+    uninstall(element, state);
+  if (!options || !input)
+    return;
+  const existing = states.get(element);
+  if (!existing) {
+    install(element, input, options);
+    return;
+  }
+  existing.onMask = options.onMask;
+  const tokens = resolveTokens(options);
+  if (existing.mask === options.mask && sameTokens(existing.tokens, tokens))
+    return;
+  existing.mask = options.mask;
+  existing.tokens = tokens;
+  commit(existing, formatMask(existing.unmasked, existing.mask, existing.tokens));
+}
+function sameTokens(left, right) {
+  if (left === right)
+    return true;
+  const keys = Object.keys(left);
+  return keys.length === Object.keys(right).length && keys.every((key) => right[key] && String(left[key].pattern) === String(right[key].pattern));
+}
+export const vMask = {
+  getSSRProps() {
+    return void 0;
+  },
+  mounted(element, binding) {
+    apply(element, binding.value);
+  },
+  updated(element, binding) {
+    apply(element, binding.value);
+  },
+  beforeUnmount(element) {
+    const state = states.get(element);
+    if (state)
+      uninstall(element, state);
+  }
+};

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

@@ -1,6 +1,8 @@
 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 { UiProp } from '../utils/ui.js';
 import type { SelectItems, SelectOption } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
@@ -43,7 +45,9 @@ 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>;
@@ -55,57 +59,57 @@ export interface ComboboxSelectBaseEmits {
 }
 declare var __VLS_43: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_94: {}, __VLS_101: {}, __VLS_116: {}, __VLS_140: {
+}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_144: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_160: {
+}, __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: {
+}, __VLS_175: {}, __VLS_182: {}, __VLS_189: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {}, __VLS_228: {}, __VLS_231: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_228: {
+}, __VLS_234: {
     group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_231: {}, __VLS_267: string, __VLS_268: {}, __VLS_271: {
+}, __VLS_237: {}, __VLS_273: string, __VLS_274: {}, __VLS_277: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_274: {
+}, __VLS_280: {
     group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
 };
 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;

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";
@@ -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,22 +241,77 @@ 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();
@@ -339,7 +405,7 @@ const messages = useMessages();
 const theme = useComponentTheme("select", selectTheme);
 const themeBindings = useThemeBindings();
 const effectiveColor = computed(() => resolveRegisteredColorRole(props.color ?? "primary", "primary"));
-const colorRoleMarker = computed(() => effectiveColor.value);
+const colorRoleMarker = computed(() => selectInvalid.value ? "danger" : 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) });
@@ -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));
@@ -461,6 +528,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 +558,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 +576,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
@@ -561,6 +634,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 +644,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 +715,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"
@@ -740,11 +822,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>

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

@@ -1,6 +1,8 @@
 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 { UiProp } from '../utils/ui.js';
 import type { SelectItems, SelectOption } from './combobox-select.js';
 import { selectTheme } from '../theme/select.js';
@@ -43,7 +45,9 @@ 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>;
@@ -55,57 +59,57 @@ export interface ComboboxSelectBaseEmits {
 }
 declare var __VLS_43: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_94: {}, __VLS_101: {}, __VLS_116: {}, __VLS_140: {
+}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_144: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_160: {
+}, __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: {
+}, __VLS_175: {}, __VLS_182: {}, __VLS_189: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {}, __VLS_228: {}, __VLS_231: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_228: {
+}, __VLS_234: {
     group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_231: {}, __VLS_267: string, __VLS_268: {}, __VLS_271: {
+}, __VLS_237: {}, __VLS_273: string, __VLS_274: {}, __VLS_277: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_274: {
+}, __VLS_280: {
     group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
 };
 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;