@sewadah/selaras 0.3.0 → 0.3.1

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();
@@ -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;

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

@@ -3,6 +3,9 @@ export interface ComboboxSelectBodyProps {
     listbox?: boolean;
     searchable?: boolean;
     creatable?: boolean;
+    multiple?: boolean;
+    forceSelection?: boolean;
+    selectedValues?: (string | number)[];
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
@@ -30,15 +33,15 @@ export interface ComboboxSelectBodyEmits {
     'update:searchText': [value: string];
 }
 declare function focusSearch(): boolean;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_37: {}, __VLS_57: {
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_31: {}, __VLS_39: {}, __VLS_61: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_82: {
+}, __VLS_92: {
     group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_90: {
+}, __VLS_102: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_109: {
+}, __VLS_123: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_122: {};
+}, __VLS_136: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
@@ -48,17 +51,19 @@ type __VLS_Slots = {} & {
 } & {
     'empty-filter'?: (props: typeof __VLS_29) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_37) => any;
+    'empty-filter'?: (props: typeof __VLS_31) => any;
 } & {
-    item?: (props: typeof __VLS_57) => any;
+    'empty-filter'?: (props: typeof __VLS_39) => any;
 } & {
-    group?: (props: typeof __VLS_82) => any;
+    item?: (props: typeof __VLS_61) => any;
 } & {
-    item?: (props: typeof __VLS_90) => any;
+    group?: (props: typeof __VLS_92) => any;
 } & {
-    item?: (props: typeof __VLS_109) => any;
+    item?: (props: typeof __VLS_102) => any;
 } & {
-    footer?: (props: typeof __VLS_122) => any;
+    item?: (props: typeof __VLS_123) => any;
+} & {
+    footer?: (props: typeof __VLS_136) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
     focusSearch: typeof focusSearch;

package/dist/runtime/internal/ComboboxSelectBody.vue

@@ -27,6 +27,9 @@ const props = defineProps({
   listbox: { type: Boolean, required: false },
   searchable: { type: Boolean, required: false },
   creatable: { type: Boolean, required: false },
+  multiple: { type: Boolean, required: false },
+  forceSelection: { type: Boolean, required: false },
+  selectedValues: { type: Array, required: false },
   searchText: { type: String, required: true },
   displayValue: { type: Function, required: true },
   items: { type: null, required: true },
@@ -53,10 +56,29 @@ const searchInput = ref();
 const { contains } = useFilter({ sensitivity: "base" });
 const primitives = computed(() => props.listbox ? { input: ListboxFilter, viewport: ListboxContent, group: ListboxGroup, label: ListboxGroupLabel, item: ListboxItem, indicator: ListboxItemIndicator, virtualizer: ListboxVirtualizer } : { input: ComboboxInput, viewport: ComboboxViewport, group: ComboboxGroup, label: ComboboxLabel, item: ComboboxItem, indicator: ComboboxItemIndicator, virtualizer: ComboboxVirtualizer });
 function matches(option) {
-  return !props.listbox || !props.searchable || contains(option.label, props.searchText);
+  return !(props.listbox || props.creatable && props.multiple) || !props.searchable || contains(option.label, props.searchText);
 }
 const visibleOptions = computed(() => props.flatOptions.filter(matches));
-const virtualOptions = computed(() => props.listbox ? visibleOptions.value : props.virtualizedOptions);
+const createText = computed(() => {
+  if (!props.creatable || !props.multiple || props.forceSelection)
+    return "";
+  const text = props.searchText.trim();
+  const lower = text.toLowerCase();
+  if (!text || props.flatOptions.some((option) => String(option.value).toLowerCase() === lower || option.label.toLowerCase() === lower) || props.selectedValues?.some((value) => typeof value === "string" && value.toLowerCase() === lower)) {
+    return "";
+  }
+  return text;
+});
+const virtualOptions = computed(() => {
+  const options = props.listbox ? visibleOptions.value : props.virtualizedOptions;
+  return createText.value ? [{ value: createText.value, label: messages.value.createOption(createText.value), disabled: false, raw: void 0 }, ...options] : options;
+});
+function onItemSelect(event, value) {
+  if (!props.creatable || !props.multiple || !props.selectedValues?.includes(value))
+    return;
+  event.preventDefault();
+  emit("update:searchText", "");
+}
 const filterInputProps = computed(() => mergeProps(
   props.listbox ? { "role": "combobox", "aria-autocomplete": "list", "aria-expanded": true, "aria-controls": listboxId, "aria-label": messages.value.search } : { displayValue: props.displayValue },
   props.searchInputProps ?? {}
@@ -90,18 +112,23 @@ defineExpose({ focusSearch });
     />
   </div>
 
-  <div v-if="flatOptions.length === 0" v-bind="emptyProps">
+  <div v-if="flatOptions.length === 0 && !createText" v-bind="emptyProps">
     <slot name="empty">
       {{ messages.noOptions }}
     </slot>
   </div>
   <component :is="primitives.viewport" v-else :id="listbox ? listboxId : void 0" v-bind="viewportProps">
-    <div v-if="listbox && visibleOptions.length === 0" v-bind="emptyProps">
+    <div v-if="listbox && visibleOptions.length === 0 && !createText" v-bind="emptyProps">
       <slot name="empty-filter">
         {{ messages.noResultsFound }}
       </slot>
     </div>
-    <ComboboxEmpty v-else-if="!listbox" v-bind="emptyProps">
+    <div v-else-if="creatable && multiple && visibleOptions.length === 0 && !createText" v-bind="emptyProps">
+      <slot name="empty-filter">
+        {{ messages.noResultsFound }}
+      </slot>
+    </div>
+    <ComboboxEmpty v-else-if="!listbox && !(creatable && multiple)" v-bind="emptyProps">
       <slot name="empty-filter">
         {{ messages.noResultsFound }}
       </slot>
@@ -121,20 +148,30 @@ defineExpose({ focusSearch });
           :key="String(virtualItem.key)"
           :value="option.value"
           :disabled="option.disabled"
+          :data-selaras-create-option="!option.raw || void 0"
           :style="{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${virtualItem.start}px)`, height: `${virtualItem.size}px` }"
           v-bind="itemProps"
+          @select="onItemSelect($event, option.value)"
         >
-          <slot name="item" :item="option.raw">
+          <template v-if="!option.raw">
             {{ option.label }}
-          </slot>
-          <component :is="primitives.indicator" v-bind="itemIndicatorProps">
-            <Icon :name="icons.check" class="size-4" />
-          </component>
+          </template>
+          <template v-else>
+            <slot name="item" :item="option.raw">
+              {{ option.label }}
+            </slot>
+            <component :is="primitives.indicator" v-bind="itemIndicatorProps">
+              <Icon :name="icons.check" class="size-4" />
+            </component>
+          </template>
         </component>
       </component>
     </ClientOnly>
 
     <template v-else>
+      <component :is="primitives.item" v-if="createText" :value="createText" data-selaras-create-option v-bind="itemProps">
+        {{ messages.createOption(createText) }}
+      </component>
       <template v-for="(entry, index) in items" :key="index">
         <component :is="primitives.group" v-if="isOptionGroup(entry) && groupOptions(entry).some(matches)">
           <component :is="primitives.label" v-bind="groupProps">
@@ -149,6 +186,7 @@ defineExpose({ focusSearch });
             :value="option.value"
             :disabled="option.disabled"
             v-bind="itemProps"
+            @select="onItemSelect($event, option.value)"
           >
             <slot name="item" :item="option.raw">
               {{ option.label }}
@@ -164,6 +202,7 @@ defineExpose({ focusSearch });
           :value="toOption(entry).value"
           :disabled="toOption(entry).disabled"
           v-bind="itemProps"
+          @select="onItemSelect($event, toOption(entry).value)"
         >
           <slot name="item" :item="entry">
             {{ toOption(entry).label }}

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

@@ -3,6 +3,9 @@ export interface ComboboxSelectBodyProps {
     listbox?: boolean;
     searchable?: boolean;
     creatable?: boolean;
+    multiple?: boolean;
+    forceSelection?: boolean;
+    selectedValues?: (string | number)[];
     searchText: string;
     displayValue: (value: unknown) => string;
     items: SelectItems;
@@ -30,15 +33,15 @@ export interface ComboboxSelectBodyEmits {
     'update:searchText': [value: string];
 }
 declare function focusSearch(): boolean;
-declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_37: {}, __VLS_57: {
+declare var __VLS_1: {}, __VLS_3: {}, __VLS_21: {}, __VLS_29: {}, __VLS_31: {}, __VLS_39: {}, __VLS_61: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_82: {
+}, __VLS_92: {
     group: import("./combobox-select.js").SelectOptionGroup<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_90: {
+}, __VLS_102: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_109: {
+}, __VLS_123: {
     item: SelectOption<import("../utils/select-contracts.js").SelectValue>;
-}, __VLS_122: {};
+}, __VLS_136: {};
 type __VLS_Slots = {} & {
     header?: (props: typeof __VLS_1) => any;
 } & {
@@ -48,17 +51,19 @@ type __VLS_Slots = {} & {
 } & {
     'empty-filter'?: (props: typeof __VLS_29) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_37) => any;
+    'empty-filter'?: (props: typeof __VLS_31) => any;
 } & {
-    item?: (props: typeof __VLS_57) => any;
+    'empty-filter'?: (props: typeof __VLS_39) => any;
 } & {
-    group?: (props: typeof __VLS_82) => any;
+    item?: (props: typeof __VLS_61) => any;
 } & {
-    item?: (props: typeof __VLS_90) => any;
+    group?: (props: typeof __VLS_92) => any;
 } & {
-    item?: (props: typeof __VLS_109) => any;
+    item?: (props: typeof __VLS_102) => any;
 } & {
-    footer?: (props: typeof __VLS_122) => any;
+    item?: (props: typeof __VLS_123) => any;
+} & {
+    footer?: (props: typeof __VLS_136) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
     focusSearch: typeof focusSearch;

package/dist/runtime/internal/DatePickerCalendarBody.vue

@@ -120,7 +120,7 @@ const cellTriggerUi = {
       <DatePickerGrid v-for="month in grid" :key="month.value.toString()" v-bind="gridProps">
         <DatePickerGridHead v-bind="gridHeadProps">
           <DatePickerGridRow>
-            <DatePickerHeadCell v-for="day in weekDays" :key="day" v-bind="headCellProps">
+            <DatePickerHeadCell v-for="(day, index) in weekDays" :key="index" v-bind="headCellProps">
               {{ day }}
             </DatePickerHeadCell>
           </DatePickerGridRow>

package/dist/runtime/internal/DatePickerRangeCalendarBody.vue

@@ -51,7 +51,7 @@ const rangeCellTriggerUi = {
       <DateRangePickerGrid v-for="month in grid" :key="month.value.toString()" v-bind="gridProps">
         <DateRangePickerGridHead v-bind="gridHeadProps">
           <DateRangePickerGridRow>
-            <DateRangePickerHeadCell v-for="day in weekDays" :key="day" v-bind="headCellProps">
+            <DateRangePickerHeadCell v-for="(day, index) in weekDays" :key="index" v-bind="headCellProps">
               {{ day }}
             </DateRangePickerHeadCell>
           </DateRangePickerGridRow>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    shortcut?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/internal/ShortcutHint.vue

@@ -0,0 +1,13 @@
+<script setup>
+import Kbd from "../components/Kbd.vue";
+import { applyClassPrefix } from "../utils/ui";
+defineProps({
+  shortcut: { type: String, required: false }
+});
+</script>
+
+<template>
+  <span v-if="shortcut" :class="applyClassPrefix('ms-auto inline-flex items-center gap-1')" aria-hidden="true">
+    <Kbd v-for="key in shortcut.split('+')" :key="key" :value="key.trim()" size="sm" />
+  </span>
+</template>

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

@@ -0,0 +1,6 @@
+type __VLS_Props = {
+    shortcut?: string;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;