@sewadah/selaras 0.3.2 → 0.5.0

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "selaras",
   "configKey": "selaras",
-  "version": "0.3.2",
+  "version": "0.5.0",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

package/dist/runtime/components/DashboardResizeHandle.vue

@@ -12,8 +12,9 @@ const isMobile = computed(() => dashboard?.isMobile.value ?? false);
 const theme = useComponentTheme("dashboardResizeHandle", dashboardResizeHandleTheme);
 const ui = computed(() => theme.value());
 const rootUi = computed(() => resolveSlot(ui.value.root, props.ui?.root));
+const lineUi = computed(() => resolveSlot(ui.value.line, props.ui?.line));
 </script>
 
 <template>
-  <SplitterResizeHandle v-if="!isMobile" direction="horizontal" :ui="{ root: rootUi, line: props.ui?.line }" />
+  <SplitterResizeHandle v-if="!isMobile" direction="horizontal" :ui="{ root: rootUi, line: lineUi }" />
 </template>

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

@@ -60,21 +60,21 @@ export interface ComboboxSelectBaseEmits {
 }
 declare var __VLS_43: {
     item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_144: {
+}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_136: {}, __VLS_143: {}, __VLS_150: {}, __VLS_174: {
     item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_164: {
+}, __VLS_194: {
     selected: import("./combobox-select.js").ResolvedOption | undefined;
-}, __VLS_175: {}, __VLS_182: {}, __VLS_189: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {}, __VLS_228: {}, __VLS_231: {
+}, __VLS_205: {}, __VLS_212: {}, __VLS_219: {}, __VLS_249: {}, __VLS_252: {}, __VLS_255: {}, __VLS_258: {}, __VLS_261: {
     item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_234: {
+}, __VLS_264: {
     group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
-}, __VLS_237: {}, __VLS_273: string, __VLS_274: {}, __VLS_277: {
+}, __VLS_267: {}, __VLS_305: string, __VLS_306: {}, __VLS_309: {}, __VLS_319: {
     item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_280: {
+}, __VLS_322: {
     group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_273>]?: (props: typeof __VLS_274) => any;
+    [K in NonNullable<typeof __VLS_305>]?: (props: typeof __VLS_306) => any;
 } & {
     item?: (props: typeof __VLS_43) => any;
 } & {
@@ -84,33 +84,41 @@ type __VLS_Slots = {} & {
 } & {
     'dropdown-icon'?: (props: typeof __VLS_120) => any;
 } & {
-    item?: (props: typeof __VLS_144) => any;
+    'clear-icon'?: (props: typeof __VLS_136) => any;
 } & {
-    value?: (props: typeof __VLS_164) => any;
+    'loading-icon'?: (props: typeof __VLS_143) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_175) => any;
+    'dropdown-icon'?: (props: typeof __VLS_150) => any;
 } & {
-    'loading-icon'?: (props: typeof __VLS_182) => any;
+    item?: (props: typeof __VLS_174) => any;
 } & {
-    'dropdown-icon'?: (props: typeof __VLS_189) => any;
+    value?: (props: typeof __VLS_194) => any;
 } & {
-    header?: (props: typeof __VLS_219) => any;
+    'clear-icon'?: (props: typeof __VLS_205) => any;
 } & {
-    'filter-icon'?: (props: typeof __VLS_222) => any;
+    'loading-icon'?: (props: typeof __VLS_212) => any;
 } & {
-    empty?: (props: typeof __VLS_225) => any;
+    'dropdown-icon'?: (props: typeof __VLS_219) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_228) => any;
+    header?: (props: typeof __VLS_249) => any;
 } & {
-    item?: (props: typeof __VLS_231) => any;
+    'filter-icon'?: (props: typeof __VLS_252) => any;
 } & {
-    group?: (props: typeof __VLS_234) => any;
+    empty?: (props: typeof __VLS_255) => any;
 } & {
-    footer?: (props: typeof __VLS_237) => any;
+    'empty-filter'?: (props: typeof __VLS_258) => any;
 } & {
-    item?: (props: typeof __VLS_277) => any;
+    item?: (props: typeof __VLS_261) => any;
 } & {
-    group?: (props: typeof __VLS_280) => any;
+    group?: (props: typeof __VLS_264) => any;
+} & {
+    footer?: (props: typeof __VLS_267) => any;
+} & {
+    header?: (props: typeof __VLS_309) => any;
+} & {
+    item?: (props: typeof __VLS_319) => any;
+} & {
+    group?: (props: typeof __VLS_322) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;

package/dist/runtime/internal/ComboboxSelectBase.vue

@@ -117,7 +117,16 @@ function updateSelection(event, value) {
     localValue.value = value;
   emit(event, value);
 }
+const localOpen = ref(props.defaultOpen ?? false);
+const isOpenControlled = () => Object.hasOwn(instance.vnode.props ?? {}, "open");
+const open = computed(() => isOpenControlled() ? props.open ?? false : localOpen.value);
+const isMobile = useIsMobile();
+const mobilePresentation = ref(false);
+const showMobileModal = computed(() => mobilePresentation.value);
+const showMobileAutocompleteModal = computed(() => mobilePresentation.value && !!props.creatable);
+const modalBody = ref();
 const editableInput = ref();
+const activeEditableInput = computed(() => showMobileAutocompleteModal.value ? modalBody.value?.searchElement : editableInput.value);
 const comboboxRootKey = ref(0);
 function setEditableInput(element) {
   const candidate = typeof HTMLInputElement !== "undefined" && element instanceof HTMLInputElement ? element : element?.$el;
@@ -241,13 +250,13 @@ function revertUnmatchedText() {
   return true;
 }
 function onSearchKeydown(event) {
-  if (event.target !== editableInput.value)
+  if (event.target !== activeEditableInput.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) {
+  if (event.key === "Backspace" && props.creatable && props.multiple && props.displayMode === "comma" && !event.isComposing && !isSearchComposing.value && event.keyCode !== 229 && !searchText.value && !activeEditableInput.value?.value && selectedValues.value.length) {
     removeValue(selectedValues.value.at(-1));
     event.preventDefault();
     return;
@@ -266,18 +275,20 @@ function onSearchKeydown(event) {
   if (props.forceSelection)
     return;
   if (props.creatable && !searchText.value.trim()) {
-    const activeId2 = editableInput.value?.getAttribute("aria-activedescendant");
+    const activeId2 = activeEditableInput.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 activeId = activeEditableInput.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 = "";
+    else if (showMobileAutocompleteModal.value)
+      updateOpen(false);
     event.preventDefault();
     event.stopPropagation();
   }
@@ -297,7 +308,9 @@ onUnmounted(() => {
   if (typeof window !== "undefined")
     endSuggestionPointer();
 });
-function onSearchBlur() {
+function onSearchBlur(event) {
+  if (props.creatable && event?.target !== editableInput.value)
+    return;
   if (pointerInSuggestionContent.value)
     return;
   if (revertUnmatchedText())
@@ -329,7 +342,7 @@ watch(
   ([multiple, currentValue], [previousMultiple, previousValue]) => {
     if (multiple === previousMultiple)
       return;
-    const wasEditableFocused = props.creatable && typeof document !== "undefined" && document.activeElement === editableInput.value;
+    const wasEditableFocused = props.creatable && typeof document !== "undefined" && document.activeElement === activeEditableInput.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;
@@ -354,7 +367,7 @@ watch(
       if (props.searchTerm === void 0)
         internalSearchText.value = nextSearchText;
     }
-    const priorInput = editableInput.value;
+    const priorInput = activeEditableInput.value;
     nextTick(() => {
       if (props.creatable || props.searchable) {
         if (props.searchTerm === void 0)
@@ -369,7 +382,7 @@ watch(
         return;
       if (document.activeElement !== document.body && document.activeElement !== priorInput)
         return;
-      editableInput.value?.focus();
+      activeEditableInput.value?.focus();
     });
   },
   { flush: "pre" }
@@ -441,20 +454,10 @@ const groupProps = computed(() => resolveSlot(ui.value.group, props.ui?.group));
 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 mobilePanelProps = computed(() => mergeProps(
-  {
-    style: {
-      width: "min(calc(100vw - 2rem), 36rem)",
-      minWidth: "0",
-      maxHeight: "min(50vh, 28rem)"
-    }
-  },
-  resolveSlot(ui.value.mobilePanel, props.ui?.mobilePanel)
+const mobileContentProps = computed(() => mergeProps(
+  resolveSlot(ui.value.mobileContent, props.ui?.mobileContent),
+  props.creatable ? 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))
@@ -479,34 +482,48 @@ function resetSelection(event) {
     updateOpen(false);
   });
 }
-const isMobile = useIsMobile();
-const mobilePresentation = ref(false);
 watch(open, (open2) => {
-  if (!open2 && mobilePresentation.value && !props.creatable && props.resetSearchTermOnBlur)
-    searchText.value = "";
+  if (!open2 && mobilePresentation.value && props.resetSearchTermOnBlur)
+    searchText.value = props.creatable && !props.multiple ? singleSelectionLabel(selection.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 useMobileAutocompleteTrigger = computed(() => props.creatable && (open.value ? showMobileAutocompleteModal.value : props.adaptive && isMobile.value));
 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 } : {});
+const modalTriggerAttrs = computed(() => !props.creatable && (open.value ? showMobileModal.value : props.adaptive && isMobile.value) ? { "aria-haspopup": "dialog", "aria-controls": modalId } : {});
 function onModalSelection(value) {
   setValue(value == null ? props.multiple ? [] : void 0 : value);
+  if (props.creatable) {
+    nextTick(() => {
+      if (props.resetSearchTermOnSelect)
+        searchText.value = props.multiple ? "" : singleSelectionLabel(selection.value);
+    });
+  }
   if (!props.multiple)
     updateOpen(false);
 }
+watch(selection, () => {
+  if (useMobileAutocompleteTrigger.value && !open.value && props.resetSearchTermOnSelect && props.searchTerm === void 0)
+    internalSearchText.value = props.multiple ? "" : singleSelectionLabel(selection.value);
+});
+function openMobileAutocomplete(event) {
+  if (props.disabled || event && !["ArrowDown", "ArrowUp", "Enter", " "].includes(event.key))
+    return;
+  event?.preventDefault();
+  updateOpen(true);
+}
+function finishMobileAutocomplete() {
+  if (isSearchComposing.value)
+    return;
+  if (!revertUnmatchedText() && !props.forceSelection)
+    commitCreatableText(searchText.value);
+  updateOpen(false);
+}
 function serializeFormValue(value) {
   if (typeof value !== "object")
     return String(value);
@@ -518,22 +535,26 @@ function serializeFormValue(value) {
 }
 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) => {
+    "class": "rounded-[var(--selaras-resolved-radius-md)]",
+    "id": modalId,
+    "aria-modal": true,
+    "onOpenAutoFocus": (event) => {
+      if (props.searchable && modalBody.value?.focusSearch())
         event.preventDefault();
-        if (!props.disabled && selectTrigger.value?.$el?.isConnected)
-          selectTrigger.value.$el.focus();
-      }
-    } : {}
+    },
+    "onCloseAutoFocus": (event) => {
+      event.preventDefault();
+      if (props.disabled)
+        return;
+      nextTick(() => {
+        const target = props.creatable ? editableInput.value : selectTrigger.value?.$el;
+        if (target?.isConnected)
+          target.focus();
+      });
+    }
   }
 }));
+const modalSearchInputProps = computed(() => mergeProps(searchInputProps.value, props.creatable ? { "id": `${selectId.value ?? modalId}-input`, "aria-label": nativeSearchInputAttrs.value["aria-label"] ?? props.placeholder ?? messages.value.search } : {}));
 const bodyProps = computed(() => ({
   searchable: props.searchable,
   creatable: props.creatable,
@@ -563,7 +584,7 @@ const bodyProps = computed(() => ({
 <template>
   <ComboboxRoot
     :key="comboboxRootKey"
-    :open="open"
+    :open="useMobileAutocompleteTrigger ? false : open"
     :model-value="rekaSelection"
     :multiple="multiple"
     :disabled="disabled"
@@ -583,7 +604,7 @@ const bodyProps = computed(() => ({
         typing is always available without opening anything first.
       -->
       <div
-        v-if="creatable"
+        v-if="creatable && !useMobileAutocompleteTrigger"
         data-ui-group-item
         :data-selaras-field-filled="selectedValues.length ? '' : void 0"
         :data-selaras-field-active="open ? '' : void 0"
@@ -719,6 +740,50 @@ const bodyProps = computed(() => ({
         </ComboboxTrigger>
       </div>
 
+      <div
+        v-else-if="creatable"
+        data-ui-group-item
+        :data-selaras-field-filled="selectedValues.length ? '' : void 0"
+        :data-selaras-field-active="open ? '' : void 0"
+        v-bind="triggerProps"
+        @click="openMobileAutocomplete()"
+      >
+        <span v-if="multiple && selectedOptions.length" v-bind="commaValueProps">{{ commaText }}</span>
+        <input
+          :id="selectId"
+          :ref="setEditableInput"
+          :value="multiple ? '' : searchText"
+          :placeholder="multiple && selectedOptions.length ? void 0 : placeholder"
+          :disabled="disabled"
+          :aria-invalid="selectInvalid || void 0"
+          :aria-describedby="searchDescribedBy"
+          :aria-busy="loading || void 0"
+          v-bind="searchInputProps"
+          readonly
+          aria-haspopup="dialog"
+          :aria-expanded="open"
+          :aria-controls="modalId"
+          @keydown="openMobileAutocomplete"
+        >
+        <Button v-if="clearable && !disabled && selectedOptions.length" :size="clearSize" variant="text" color="neutral" tabindex="-1" :aria-label="messages.clear" v-bind="clearProps" @click.stop="clear">
+          <template #icon>
+            <slot name="clear-icon">
+              <Icon :name="icons.close" class="size-4" />
+            </slot>
+          </template>
+        </Button>
+        <slot v-if="loading" name="loading-icon">
+          <Icon :name="icons.loading" class="size-4 animate-spin" v-bind="iconProps" />
+        </slot>
+        <span v-if="loading" class="sr-only">{{ messages.loading }}</span>
+        <button v-if="dropdown" type="button" tabindex="-1" :disabled="disabled" :aria-label="messages.search" v-bind="dropdownProps" @click.stop="onDropdownClick();
+  openMobileAutocomplete()">
+          <slot name="dropdown-icon">
+            <Icon :name="icons.chevronDown" class="size-4" />
+          </slot>
+        </button>
+      </div>
+
       <ComboboxTrigger
         v-else
         :id="selectId"
@@ -831,12 +896,12 @@ const bodyProps = computed(() => ({
       </ComboboxTrigger>
     </ComboboxAnchor>
 
-    <ComboboxPortal v-if="!showMobileSelectModal" v-bind="portalProps">
+    <ComboboxPortal v-if="!showMobileModal" 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"
+        v-bind="contentProps"
         @pointerdown.capture="startSuggestionPointer"
       >
         <ComboboxSelectBody v-bind="bodyProps" @update:search-text="searchText = $event">
@@ -866,10 +931,8 @@ const bodyProps = computed(() => ({
       </ComboboxContent>
     </ComboboxPortal>
     <!--
-      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 owns focus and dismissal; Listbox supplies selection and the
+      Autocomplete editor inside the same accessible dialog surface.
     -->
     <Modal
       v-else :open="open" :title="placeholder || messages.search" :description="messages.searchDescription"
@@ -878,15 +941,26 @@ const bodyProps = computed(() => ({
     >
       <template #content>
         <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"
+          @pointerdown.capture="startSuggestionPointer"
+          @keydown.capture="onSearchKeydown"
           @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]>
+          <ComboboxSelectBody ref="modalBody" v-bind="bodyProps" :search-input-props="modalSearchInputProps" listbox @update:search-text="searchText = $event">
+            <template v-for="slotName in ['filter-icon', 'empty', 'empty-filter', 'footer'].filter((slotName) => $slots[slotName])" #[slotName]>
               <slot :name="slotName" />
             </template>
+            <template #header>
+              <slot name="header" />
+              <div v-if="creatable && multiple && selectedOptions.length" class="flex flex-wrap gap-1.5 px-3 pt-3">
+                <template v-if="displayMode === 'chip'">
+                  <Chip v-for="option in visibleOptions" :key="option.key" :label="option.label" size="sm" removable @remove="removeValue(option.value)" />
+                  <span v-if="overflowOptions.length" v-bind="chipOverflowProps">{{ messages.moreItems(overflowOptions.length) }}</span>
+                </template>
+                <span v-else v-bind="valueProps">{{ commaText }}</span>
+              </div>
+            </template>
             <template v-if="$slots.item" #item="scope">
               <slot name="item" v-bind="scope" />
             </template>
@@ -895,10 +969,13 @@ const bodyProps = computed(() => ({
             </template>
           </ComboboxSelectBody>
         </ListboxRoot>
-        <div v-if="!creatable" class="flex justify-end p-2">
-          <DialogClose as-child>
+        <div v-if="creatable || multiple" class="flex justify-end p-2">
+          <Button v-if="creatable" variant="ghost" color="neutral" @click="finishMobileAutocomplete">
+            {{ messages.done }}
+          </Button>
+          <DialogClose v-else as-child>
             <Button variant="ghost" color="neutral">
-              {{ multiple ? messages.done : messages.cancel }}
+              {{ messages.done }}
             </Button>
           </DialogClose>
         </div>

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

@@ -60,21 +60,21 @@ export interface ComboboxSelectBaseEmits {
 }
 declare var __VLS_43: {
     item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_144: {
+}, __VLS_98: {}, __VLS_105: {}, __VLS_120: {}, __VLS_136: {}, __VLS_143: {}, __VLS_150: {}, __VLS_174: {
     item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_164: {
+}, __VLS_194: {
     selected: import("./combobox-select.js").ResolvedOption | undefined;
-}, __VLS_175: {}, __VLS_182: {}, __VLS_189: {}, __VLS_219: {}, __VLS_222: {}, __VLS_225: {}, __VLS_228: {}, __VLS_231: {
+}, __VLS_205: {}, __VLS_212: {}, __VLS_219: {}, __VLS_249: {}, __VLS_252: {}, __VLS_255: {}, __VLS_258: {}, __VLS_261: {
     item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_234: {
+}, __VLS_264: {
     group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
-}, __VLS_237: {}, __VLS_273: string, __VLS_274: {}, __VLS_277: {
+}, __VLS_267: {}, __VLS_305: string, __VLS_306: {}, __VLS_309: {}, __VLS_319: {
     item: SelectModelValue | SelectOption<SelectModelValue>;
-}, __VLS_280: {
+}, __VLS_322: {
     group: import("./combobox-select.js").SelectOptionGroup<SelectModelValue>;
 };
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_273>]?: (props: typeof __VLS_274) => any;
+    [K in NonNullable<typeof __VLS_305>]?: (props: typeof __VLS_306) => any;
 } & {
     item?: (props: typeof __VLS_43) => any;
 } & {
@@ -84,33 +84,41 @@ type __VLS_Slots = {} & {
 } & {
     'dropdown-icon'?: (props: typeof __VLS_120) => any;
 } & {
-    item?: (props: typeof __VLS_144) => any;
+    'clear-icon'?: (props: typeof __VLS_136) => any;
 } & {
-    value?: (props: typeof __VLS_164) => any;
+    'loading-icon'?: (props: typeof __VLS_143) => any;
 } & {
-    'clear-icon'?: (props: typeof __VLS_175) => any;
+    'dropdown-icon'?: (props: typeof __VLS_150) => any;
 } & {
-    'loading-icon'?: (props: typeof __VLS_182) => any;
+    item?: (props: typeof __VLS_174) => any;
 } & {
-    'dropdown-icon'?: (props: typeof __VLS_189) => any;
+    value?: (props: typeof __VLS_194) => any;
 } & {
-    header?: (props: typeof __VLS_219) => any;
+    'clear-icon'?: (props: typeof __VLS_205) => any;
 } & {
-    'filter-icon'?: (props: typeof __VLS_222) => any;
+    'loading-icon'?: (props: typeof __VLS_212) => any;
 } & {
-    empty?: (props: typeof __VLS_225) => any;
+    'dropdown-icon'?: (props: typeof __VLS_219) => any;
 } & {
-    'empty-filter'?: (props: typeof __VLS_228) => any;
+    header?: (props: typeof __VLS_249) => any;
 } & {
-    item?: (props: typeof __VLS_231) => any;
+    'filter-icon'?: (props: typeof __VLS_252) => any;
 } & {
-    group?: (props: typeof __VLS_234) => any;
+    empty?: (props: typeof __VLS_255) => any;
 } & {
-    footer?: (props: typeof __VLS_237) => any;
+    'empty-filter'?: (props: typeof __VLS_258) => any;
 } & {
-    item?: (props: typeof __VLS_277) => any;
+    item?: (props: typeof __VLS_261) => any;
 } & {
-    group?: (props: typeof __VLS_280) => any;
+    group?: (props: typeof __VLS_264) => any;
+} & {
+    footer?: (props: typeof __VLS_267) => any;
+} & {
+    header?: (props: typeof __VLS_309) => any;
+} & {
+    item?: (props: typeof __VLS_319) => any;
+} & {
+    group?: (props: typeof __VLS_322) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBaseProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: SelectModelValue | SelectModelValue[] | undefined) => any;

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

@@ -68,6 +68,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
     focusSearch: typeof focusSearch;
+    searchElement: import("vue").ComputedRef<HTMLInputElement | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:searchText": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBodyProps> & Readonly<{

package/dist/runtime/internal/ComboboxSelectBody.vue

@@ -90,13 +90,13 @@ function focusSearch() {
   element.focus();
   return true;
 }
-defineExpose({ focusSearch });
+defineExpose({ focusSearch, searchElement: computed(() => searchInput.value?.$el) });
 </script>
 
 <template>
   <slot name="header" />
 
-  <div v-if="searchable && !creatable" v-bind="searchWrapperProps">
+  <div v-if="searchable && (!creatable || listbox)" v-bind="searchWrapperProps">
     <slot name="filter-icon">
       <Icon :name="icons.search" class="size-4 text-[var(--selaras-resolved-text-muted)]" />
     </slot>

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

@@ -68,6 +68,7 @@ type __VLS_Slots = {} & {
 };
 declare const __VLS_base: import("vue").DefineComponent<ComboboxSelectBodyProps, {
     focusSearch: typeof focusSearch;
+    searchElement: import("vue").ComputedRef<HTMLInputElement | undefined>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:searchText": (value: string) => any;
 }, string, import("vue").PublicProps, Readonly<ComboboxSelectBodyProps> & Readonly<{

package/dist/runtime/theme/dashboard-resize-handle.d.ts

@@ -2,25 +2,31 @@ export declare const dashboardResizeHandleTheme: import("tailwind-variants").TVR
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
         };
     };
 } | {
     [x: string]: {
         [x: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     root: string;
+    line: string;
 }, undefined, {
     [key: string]: {
         [key: string]: import("tailwind-variants").ClassValue | {
             root?: import("tailwind-variants").ClassValue;
+            line?: import("tailwind-variants").ClassValue;
         };
     };
 } | {}, {
     root: string;
+    line: string;
 }, import("tailwind-variants").TVReturnTypeLike<unknown, {
     root: string;
+    line: string;
 }>>;
 export type DashboardResizeHandleThemeSlots = keyof (typeof dashboardResizeHandleTheme)['slots'];

package/dist/runtime/theme/dashboard-resize-handle.js

@@ -1,17 +1,9 @@
 import { tv } from "tailwind-variants";
 export const dashboardResizeHandleTheme = tv({
   slots: {
-    // SplitterResizeHandle's own hit area is deliberately wider than its
-    // visible line (a comfortable grab target, invisible padding on
-    // either side) - harmless when both adjacent panels share one
-    // background, but once DashboardSidebar's own root reads as
-    // --selaras-resolved-surface-elevated (a step apart from DashboardPanel's own plain
-    // --selaras-resolved-surface-default), that "invisible" padding stops being invisible: it reads
-    // as a sliver of the wrong background bleeding through right at the
-    // sidebar's own edge. A background split exactly down the middle -
-    // matching each side's real background - makes the hit area blend
-    // into whichever panel it happens to be sitting over instead of
-    // showing through as its own separate strip.
-    root: "bg-[linear-gradient(to_right,var(--selaras-resolved-surface-elevated)_50%,var(--selaras-resolved-surface-default)_50%)]"
+    // Overlap the panel boundary without consuming layout space or painting
+    // either surface. Both panels keep their own backgrounds beneath the target.
+    root: "z-10 -mx-1 w-2 bg-transparent",
+    line: "rtl:translate-x-1/2 group-focus-visible:bg-[var(--_selaras-color-indicator)]"
   }
 });